:root {

    color-scheme: light dark;

    font-family: 'Nunito', sans-serif;
    font-size: 0.8rem;
    font-weight: normal;

    --content-width-min: 20rem;
    --content-width-optimal: 80ch;
    --def_spacing: .5rem;
    --height_header: 3rem;
    --height_guide: 0rem;
    --height_subscription_status: 0rem;
    --height_footer: 4.5rem;
    --height_footer_modal: 4.5rem;

    --sidenav_spacer: 0rem;

    --panel_info_spacer:0rem;
    --panel_info_width: min(calc(100% - 1rem), 55ch);

    --table_cell_padding: .2rem .5rem .2rem .5rem;
    --icon_size: 1.5em;
    --standard_border_radius: 1rem;

    --input_switch_button_translate: 0px;
    --input_switch_option_off_display: block;
    --input_switch_option_on_display: none;

    -webkit-tap-highlight-color: transparent;

    /* Animation presets */

    --animation_standard_props: .2s both ease-in-out;
    --animation_pop_down:
        var(--animation_standard_props) animateFade,
        var(--animation_standard_props) animateSlideVertical;

    --animation_fade_translation:
        var(--animation_standard_props) animateFade,
        var(--animation_standard_props) animateTranslateXY;

}

html {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
.theme--light {

    --input_switch_accent_boxshadow: 0px 0px 2px 0px hsl(0, 0%, 67%);
    --input_switch_text_color: hsl(0, 0%, 100%);

    --default_border_line: 1px solid hsl(0, 0%, 80%);
    --default_border_line2: 1px solid hsl(0, 0%, 80%);
    --default_border_line3: 1px solid hsl(0, 0%, 80%);
    --default_border_line_heavy: 2px solid hsl(0, 0%, 80%);
    --default_overlay_border_line: 1px solid hsl(0, 0%, 70%);

    --default_shadow:
        0 1px 2px 0 hsla(205, 5%, 25%, 0.3),
        0 1px 3px 1px hsla(205, 5%, 25%, .15);

    --default_drop_shadow:
        drop-shadow(0px 1px 2px hsla(205, 5%, 25%, 0.3))
        drop-shadow(0px 1px 3px hsla(205, 5%, 25%, 0.15));

    --box_shadow_modal:
        4px 4px 3px hsla(0, 0%, 0%, 0.2),
        -4px -4px 3px hsla(0, 0%, 40%, 0.55);

    --box_shadow_tooltip:
        1px 2px 3px hsla(0, 0%, 0%, 0.2),
        -1px -1px 3px hsla(0, 0%, 40%, 0.55);

    --box_shadow_button:
        0 3px 1px -2px hsla(0, 0%, 0%, 0.2),
        0 2px 2px 0 hsla(0, 0%, 0%, 0.14),
        0 1px 5px 0 hsla(0, 0%, 0%, 0.12);

    --box_shadow_inset_top: inset 0px 3px 3px -3px hsl(0, 0%, 80%);
    --box_shadow_inset_bottom: inset 0px -3px 3px -3px hsl(0, 0%, 80%);

    --box_shadow_input: inset 0 2px 3px 0 hsla(0, 0%, 0%, 0.15);

    --color_focus: hsl(210, 82%, 56%);

    --color_text_default:hsl(0, 0%, 0%);
    color: var(--color_text_default);

    --color_text_header: hsl(0, 0%, 100%);
    --color_text_header_hover: hsl(180, 78%, 40%);
    --color_text_navigation: hsl(215, 20%, 35%);
    --color_text_section_divider: hsl(215, 20%, 35%);
    --color_text_card_heading: hsl(215, 20%, 35%);
    --color_text_section_heading: hsl(215, 20%, 55%);
    --color_text_defined_term: hsl(210, 65%, 30%);
    --color_text_group: hsl(215, 20%, 35%);
    --color_text_with_background: hsl(0, 0%, 100%);
    --color_text_with_background_dark: hsl(0, 0%, 0%);
    --color_text_primary: hsl(0, 0%, 0%);
    --color_text_info: hsl(0, 0%, 45%);
    --color_text_na: hsl(0, 0%, 80%);
    --color_text_na_heading: hsl(0, 0%, 60%);

    --color_text_notification: hsl(20, 90%, 50%);
    --color_text_warning: hsl(355, 100%, 50%);
    --color_text_warning_alternative: hsl(40, 100%, 55%);
    --color_text_warning_with_background: hsl(355, 100%, 35%);
    --color_text_error: hsl(355, 100%, 25%);

    --color_text_button: hsl(0, 0%, 100%);
    --color_text_positive: hsl(165, 100%, 25%);
    --color_text_positive_light: hsl(165, 100%, 50%);
    --color_text_negative: hsl(355, 100%, 45%);
    --color_text_negative_light: hsl(355, 100%, 90%);
    --color_text_income: hsl(165, 100%, 35%);
    --color_text_expenditure: hsl(0, 95%, 70%);
    --color_text_asset: hsl(205, 100%, 50%);
    --color_text_liability: hsl(40, 100%, 45%);
    --color_text_opening_balance: hsl(216, 19%, 35%);

    --color_text_portfolio_buy: hsl(205, 100%, 50%);
    --color_text_portfolio_sell: hsl(40, 100%, 45%);

    --color_text_input_placeholder: hsl(0, 0%, 55%);
    --color_text_input_label: hsl(0, 0%, 65%);

    --color_text_valid: hsl(165, 100%, 40%);
    --color_text_invalid: hsl(360, 100%, 40%);

    --color_text_guide_indicator: hsl(280, 46%, 65%);

    --color_heatmap_positive: 165, 100%, 40%;
    --color_heatmap_negative: 0, 100%, 80%;

    --color_historic_budget_good: hsl(165, 100%, 40%);
    --color_historic_budget_warn: hsl(40, 100%, 55%);
    --color_historic_budget_bad: hsl(0, 95%, 75%);
    --color_historic_budget_worst: hsl(0, 100%, 50%);

    --meter_bar_used_color_good: hsl(165, 60%, 60%);
    --meter_bar_used_color_warn: hsl(40, 100%, 45%);
    --meter_bar_used_color_warn_alt: hsl(55, 100%, 45%);
    --meter_bar_used_color_bad: hsl(0, 90%, 80%);
    --meter_bar_used_color_worst: hsl(0, 85%, 70%);

    --color_background_body: hsl(225, 35%, 95%);

    --color_background_header: hsl(215, 20%, 35%);
    --color_background_sidebar: hsl(0, 0%, 100%);
    --color_background_sidebar_alternative: hsl(225, 35%, 92%);

    --color_bg_alpha: 100%;
    --color_background_card: hsl(0, 0%, 100%);
    --color_background_tooltip: hsla(0, 0%, 100%, 1);

    --color_background_clickable_section_heading: hsl(210, 15%, 85%);
    --color_background_clickable_section: hsl(225, 75%, 95%);
    --color_background_clickable_section2: hsl(225, 75%, 95%);

    --color_background_combobox_label: hsl(0, 0%, 100%, 1);

    --color_background_input_accent_inactive: hsl(0, 0%, 75%);
    --color_background_input_accent_focus: hsl(200, 98%, 50%);
    --color_background_input_accent_checked: hsl(180, 78%, 40%);

    --color_background_input_back_unchecked: hsl(0, 0%, 90%);
    --color_background_input_disabled: hsl(0, 0%, 98%);
    --color_background_input_back_focus: hsl(198, 100%, 90%);
    --color_background_input_back_checked: hsla(180, 78%, 42%, 0.65);

    --color_background_delete_row: hsl(0, 0%, 90%);
    --color_background_invalid: hsl(0, 100%, 90%);
    --color_background_invalid_overlay: hsl(0, 100%, 90%, 50%);
    --color_background_warning: hsl(55, 100%, 45%);

    --color_background_budget: hsl(215, 52%, 90%);

    --brightness_tooltip_target: 80%;
}


.theme--dark {
    --color_text_default:hsl(0, 0%, 85%);

    --default_shadow:
        1px 2px 3px hsla(0, 0%, 0%, 0.2),
        -4px -4px 3px hsla(213, 24%, 10%, 0.2);

    --default_drop_shadow: drop-shadow(1px 2px 3px hsla(0, 0%, 0%, 0.2));

    --box_shadow_modal: var(--default_shadow);
    --box_shadow_header: none;
    --box_shadow_tooltip: none;
    --box_shadow_brightness_guide_focus: 60%;

    --box_shadow_inset_top: inset 0px 3px 3px -3px hsl(0, 0%, 10%);
    --box_shadow_inset_bottom: inset 0px -3px 3px -3px hsl(0, 0%, 10%);
    --box_shadow_checkbox_button: inset 0px 0px 5px 1px hsl(0 0% 15%);

    --default_border_line: 1px solid hsl(0, 0%, 15%);
    --default_border_line2: 1px solid hsl(0, 0%, 25%);
    --default_border_line3: 1px solid hsl(0, 0%, 5%);
    --default_border_line_heavy: 2px solid hsl(0, 0%, 15%);
    --default_overlay_border_line: 1px solid hsl(0, 0%, 90%);
    --border_table_row: 1px solid hsl(0, 0%, 40%);
    --border_table_total_row: 1px solid hsl(212, 30%, 40%);
    --border_budget_bar_alternative: 1px solid hsl(0, 0%, 20%);

    --border_tag: 1px solid hsl(0, 0%, 40%);

    --color_focus: hsl(210, 73%, 50%);

    --color_background_body: hsl(0, 0%, 10%);
    --color_background_scrollbar_track: hsl(0, 0%, 10%);

    --color_background_scrollbar_thumb: hsl(0, 0%, 45%);
    --color_background_scrollbar_thumb: hsl(210, 67%, 30%);

    --color_background_header: hsl(0, 0%, 15%);
    --color_background_breadcrumbs: hsl(0, 0%, 20%);
    --color_background_sidebar: hsl(0, 0%, 15%);
    --color_background_sidebar_alternative: hsl(225, 10%, 15%);

    --color_background_card: hsl(0, 0%, 20%);
    --color_background_card_inactive: hsl(0, 0%, 15%);
    --color_background_delete_row: hsl(0, 0%, 17%);

    --color_background_clickable_section_heading: hsl(210, 15%, 25%);
    --color_background_clickable_section: hsl(0, 0%, 17%);
    --color_background_clickable_section2: hsl(0, 0%, 12%);

    --color_background_combobox_label: hsl(0, 0%, 20%, 1);

    --color_background_card_group_heading: hsl(210, 15%, 20%);
    --color_background_card_group_heading2: hsl(210, 15%, 30%);
    --color_background_card_bottom_bar: hsl(0, 0%, 25%);
    --color_background_tooltip: hsla(0, 0%, 20%, 1);
    --color_background_section_heading: hsl(215, 20%, 35%);
    --color_background_input: hsl(0, 0%, 15%);
    --color_background_input_disabled: hsl(0, 0%, 19%);
    --color_background_input_back_unchecked: hsl(0, 0%, 15%);
    --color_background_input_accent_inactive: hsl(0, 0%, 15%);
    --color_background_section_header: hsl(225, 45%, 40%);
    --color_background_section_header_ripple: hsl(220, 20%, 35%);

    --color_background_button_disabled: hsl(0, 0%, 25%);

    --color_background_table_heading: hsl(230, 25%, 25%);
    --color_background_table_heading_highlight: hsl(230, 50%, 50%);

    --color_background_table_row_2: hsl(0, 0%, 15%);
    --color_background_table_row_3: hsl(0, 0%, 12%);

    --color_background_chart_tooltip_row_odd: hsl(0, 0%, 15%);

    --color_background_highlight: hsl(225, 45%, 45%);
    --color_background_guide_menu_item_highlight: hsl(165, 100%, 30%);

    --color_background_budget: hsl(225, 50%, 30%);

    --color_background_budget_meter: hsl(0, 0%, 18%);
    --color_background_goal_meter: hsl(165, 100%, 20%);

    --color_background_warning: hsl(55, 100%, 45%);

    --color_background_payee_tag: hsl(0, 0%, 24%);


    --color_text_navigation: hsl(0, 0%, 80%);
    --color_text_header: hsl(0, 0%, 80%);
    --color_text_section_divider: hsl(0, 0%, 90%);
    --color_text_card_heading: hsl(0, 0%, 90%);
    --color_text_section_heading: hsl(216, 19%, 65%);
    --color_text_primary: hsl(0, 0%, 85%);
    --color_text_info: hsl(0, 0%, 70%);
    --color_text_info_important:hsl(280, 100%, 75%);
    --color_text_error_no_background: hsl(357, 100%, 55%);
    --color_text_na: hsl(0, 0%, 35%);
    --color_text_na_heading:hsl(0, 0%, 50%);
    --color_text_warning: hsl(355, 100%, 70%);
    --color_text_warning_alternative: hsl(40, 100%, 45%);
    --color_text_table_total: hsl(0, 0%, 85%);
    --color_text_input : hsl(0, 0%, 90%);
    --color_text_input_placeholder : hsl(0, 0%, 55%);
    --color_text_input_label: hsl(0, 0%, 60%);
    --color_text_input_caret: hsl(0, 0%, 60%);

    --color_text_table_heading: hsl(216, 19%, 85%);

    --color_text_operator: hsl(216, 19%, 85%);

    --color_text_positive: hsl(150, 80%, 70%);
    --color_text_negative: hsl(0, 95%, 75%);

    --color_text_asset: hsl(205, 100%, 60%);
    --color_text_liability: hsl(40, 100%, 55%);
    --color_text_income: hsl(165, 100%, 40%);
    --color_text_expenditure: hsl(0, 95%, 75%);
    --color_text_opening_balance: hsl(216, 19%, 55%);

    --color_text_portfolio_buy: hsl(205, 100%, 60%);
    --color_text_portfolio_sell: hsl(40, 100%, 55%);

    --color_heatmap_positive: 165, 100%, 30%;
    --color_heatmap_negative: 0, 100%, 25%;

    --color_historic_budget_good: hsl(165, 100%, 30%);
    --color_historic_budget_warn: hsl(40, 100%, 45%);
    --color_historic_budget_bad: hsl(0, 75%, 40%);
    --color_historic_budget_worst: hsl(0, 100%, 25%);

    --meter_bar_used_color_good: hsl(165, 100%, 30%);
    --meter_bar_used_color_warn: hsl(40, 100%, 45%);
    --meter_bar_used_color_warn_alt: hsl(55, 100%, 45%);
    --meter_bar_used_color_bad: hsl(0, 75%, 60%);
    --meter_bar_used_color_worst: hsl(0, 100%, 40%);

    --color_text_shadow: 1px 1px 0px black;

    --color_text_button_disabled: hsl(0, 0%, 45%);

    --color_icon: hsl(0, 0%, 90%);

    --tag_opacity: .8;

    --filter_birghtness: brightness(100);
    --brightness_tooltip_target: 40%;

}


a {color: inherit;}

/* ====== SCROLLBAR ====== */

    @media (hover: hover) {

        body {
            /* Only for Firefox */
            scrollbar-width: thin;
            scrollbar-color:
                /* var(--color_background_scrollbar_thumb, hsl(280, 46%, 65%)) */
                var(--color_background_scrollbar_thumb, hsl(210, 73%, 80%))
                var(--color_background_scrollbar_track, hsl(0, 0%, 95%));
        }


        ::-webkit-scrollbar {
            width: 10px;
            height: 15px;
        }

        ::-webkit-scrollbar-track {
            background: var(--color_background_scrollbar_track, hsl(0, 0%, 95%));
        }

        ::-webkit-scrollbar-corner {
            background: var(--color_background_scrollbar_track, hsl(0, 0%, 95%));
        }

        ::-webkit-scrollbar-thumb {
            /* background: var(--color_background_scrollbar_thumb, hsl(0, 0%, 55%)); */
            /* background: var(--color_background_scrollbar_thumb, hsl(280, 46%, 65%)); */
            background: var(--color_background_scrollbar_thumb, hsl(210, 73%, 80%));
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb:hover {
            /* background: hsl(280, 100%, 65%); */
            background: var(--color_focus);
        }

    }

    html,
    .--no_overscroll,
    .--no_overscroll * {
        overscroll-behavior: none;
    }

/* ====== ZINDEX ====== */

    #id_modal {z-index: 30;}
    #id_modal_bottom_bar_close {z-index: 40;}
    #id_banner_install_app {z-index: 44;}
    #id_banner_premium_feature {z-index: 45;}
    #id_banner_subscription_status {z-index: 46;}
    #id_guide_bar_container {z-index: 48;}
    #id_info_panel_back {z-index: 49;}
    #id_info_panel {z-index: 50;}
    #id_combo_box {z-index: 58;}
    #id_help_bar {z-index: 59;}
    #id_nav_bar {z-index: 60;}
    #id_header {z-index: 70;}
    #id_messages_wrapper {z-index: 80;}

/* ====== BANNER ====== */

    .body__banner {
        position: fixed !important;
        top: calc(var(--height_header) + var(--height_guide));
        right: var(--panel_info_spacer);
        min-height: 3.5rem;
        width: calc(100% - var(--sidenav_spacer) - var(--panel_info_spacer));
        display: flex;
        justify-content: center;
    }


    .body__banner ~ .PrimaryContainer {
        --height_subscription_status: 3rem;
    }


/* ====== HEADER ====== */

    #id_header {
        position: fixed;
        top: 0;
        height: var(--height_header);
        width: 100vw;
        box-shadow: var(--box_shadow_header, 0px 2px 2px hsl(0, 0%, 67%));
        background-color: var(--color_background_header);
        display: grid;
        grid-template-areas: var(
            --header_grid_area,
            "header_nav header_search header_actions"
        );
        grid-auto-columns: min-content;
        grid-template-columns: var(
            --header_template_columns,
            min-content 1fr
        );
    }

    .--offline {
        --color_background_header: hsl(0, 0%, 67%);
    }

    #id_toggle_side_nav {
        grid-area: header_nav;
        display: var(--navigation_toggle_display, inline-block);
        margin-left: .5rem;
        padding-inline: 0; /* Fix Safari iOS bug */
    }

    #id_image_logo {
        grid-area: header_logo;
        display: var(--logo_display, none);
        height: var(--height_header);
        padding-inline: var(--def_spacing);
        align-items: center;
    }

    #id_header_search {
        --input_bar_display: none;
        --box_shadow_input: none;
        --search_bar_width: 2.5rem;
        --input_min_width: 2.5rem;
        --scale: 1.5;
        --color_icon_overide: hsl(0, 0%, 100%);
        --input_cursor: pointer;
        z-index: 2;
        grid-area: header_search;
        display: flex;
        align-items: center;
        padding-right: 1rem;
        pointer-events: none;
    }

    .--scale_icon {
        transform: scale(var(--scale, 1));
        transition: all .2s;
    }

    #id_header_search:where(
        :focus-within,
        :has(#id_data_universal_search:hover),
    ) {
        --search_bar_width: 100%;
        --box_shadow_input: inset 0 0 20px hsla(0, 0%, 0%, 0.4);
        --input_bar_display: unset;
        --color_icon_overide: unset;
        --scale: unset;
        --input_cursor: unset;
        grid-column-end: var(--header_search_grid_col_end_override, -1);
        background-color: var(--color_background_header);
    }


/* ====== MAIN CONTAINERS ====== */

    body {
        margin: 0;
        padding: 0;
    }


    /* Required to restricted overflow on sticky tables*/
    #id_content {
        /*
        When changing the height test on firefox with overflow and sticky bottom items
        as firefox has some bugs with these
        */
        --height_footer: 0rem;
        --custom_toolbar_margin_top: calc(var(--def_spacing) * -2);
        padding-left: 0;
        border-left: solid transparent var(--def_spacing);
        border-radius: 10px;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: none;
        scrollbar-gutter: stable;
    }

    .PrimaryContainer {
        --primary_container_height: calc(
            var(--primary_container_initial_height, 100%)
            - var(--primary_container_height_adjustment, 0rem)
            - var(--height_header)
            - var(--height_guide)
            - var(--height_subscription_status)
        );
        position: fixed;
        height: var(--primary_container_height);
        max-height: var(--primary_container_height);
        right: var(--panel_info_spacer);
        width: calc(100% - var(--sidenav_spacer) - var(--panel_info_spacer));
        box-sizing: border-box;
        padding:
            calc(var(--def_spacing) * 2)
            var(--def_spacing)
            0rem
            var(--def_spacing);
        margin-top: calc(
            var(--height_header)
            + var(--height_guide)
            + var(--height_subscription_status)
        );
        gap: calc(var(--def_spacing) * 2);
        overflow: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        outline: none;
    }

    .PrimaryContainer:after {
        /* Needed for Firefox as padding on the container is ignored on overflow scroll */
        content: '';
        padding: var(--primary_container_spacer, calc(var(--def_spacing) * 2));
    }

    .PrimaryContainer > *,
    .SizeWrapper,
    .SizeWrapperWide {
        width: clamp(
            var(--content-width-min),
            var(--content-width-required, var(--content-width-optimal)),
            100%
        );
        max-width: 100%;
    }

    .SizeWrapperWide {
        --content-width-required: calc(var(--content-width-optimal) + 6rem);
    }

    .MaxContentWidth {
        width: max-content;
        min-width: max(var(--content-width-min), min(var(--content-width-optimal), 100%));
    }


/* ====== TOOLBAR ====== */

    .custom_toolbar {
        --custom_card_border_radius: 0 0 var(--standard_border_radius) var(--standard_border_radius);
        --overflow: visible;
        display: inline-grid;
        grid-template-columns: minmax(auto, 1fr) auto minmax(auto, 1fr);
        flex-grow: 1;
        gap: var(--def_spacing);
        margin-top: var(--custom_toolbar_margin_top);
        min-height: 5rem;
    }

    .custom_toolbar__item--left {
        display: flex;
        grid-column: 1;
        justify-self: start;
        align-items: center;
    }

    .custom_toolbar__item--center {
        grid-column: 2;
        justify-self: stretch;
    }

    .custom_toolbar__item--right {
        display: flex;
        grid-column: 3;
        justify-self: end;
        align-items: center;
    }


/* ====== MERGED COMPONENT ====== */

    .merged_component {
        --modified_border_radius: 0;
        border-radius: var(--standard_border_radius);
    }

    .merged_component--two_button {
        box-shadow: var(--box_shadow_button);
        --modified_box_shadow: none;
    }

    .merged_component--two_button > :last-child {
        border-left: var(--button_group_button_border_left);
    }

    .merged_component > :where(:not(.merged_component--ignore)):first-child {--modified_border_radius: var(--standard_border_radius) 0 0 var(--standard_border_radius);}
    .merged_component > :nth-last-child(1 of :not(.Hidden)) {
        --modified_border_radius: 0 var(--standard_border_radius) var(--standard_border_radius) 0;
    }
    .merged_component > :first-child:nth-last-child(1 of :not(.Hidden)) {--modified_border_radius: var(--standard_border_radius);}


/* ====== COMBOBOX ====== */

    .--in_side_panel {
        right: 1.5rem;
        width: min(calc(100% - 5rem), 45ch);
    }

    #id_combo_box_list dd {
        margin-inline-start: 0;
    }

    .jsComboboxMainItem,
    .jsComboboxHideHiddenItems .jsComboboxHiddenItem {display: none;}

    .jsComboboxHideHiddenItems .jsComboboxMainItem {display: block;}


    @media only screen and (max-height: 100ch) {
        /* Media query used allow combobox to overlap guide on small screen */

        #id_combo_box {
            --height_guide: 0rem !important;
        }
    }


/* ====== GUIDE ====== */

    #id_guide_bar_container ~ :where(.body__banner, .PrimaryContainer) {
        --height_guide: 9rem;
    }

    .GuideFocusStart,
    .GuideFocus {
        position: relative;
        overflow: visible;
        contain: layout;
    }

    :where(.GuideFocusStart, .GuideFocus)::before {
        pointer-events: none;
        z-index: 1000;
        position : absolute;
        content : '' !important;
        background-color: transparent !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: var(--standard_border_radius);
        --box_shadow_color_guide_focus: hsla(280, 100%, var(--box_shadow_brightness_guide_focus, 50%), .5);
        box-shadow: 0 0 0 10px var(--box_shadow_color_guide_focus), inset 0 0 0 5px var(--box_shadow_color_guide_focus);
        animation: AnimateShadow 1s infinite ease-in-out !important;
        contain: layout style paint;
    }

    .diagram {
        background-color: hsl(222, 77%, 90%);
        color: hsl(0, 0%, 0%);
        --color_icon: hsl(0, 0%, 0%);
    }


    @keyframes AnimateShadow {
        0% {transform: scale(.9);}
        50% {transform: scale(1);}
        100% {transform: scale(.9);}
    }

    .guides__menu_item--highlight {
        background-color: var(--color_background_guide_menu_item_highlight, hsl(165, 55%, 80%));
    }

    .guides--searched .guides__group {
        display: var(--guide_group_display, none);
    }

    .guides--searched .guides__item {
        display: var(--guide_item_display, none);
    }

    .guides--searched .guides__section {
        display: var(--guide_section_display, none);
    }

    .guides__group:has(.guides__show_guide) {
        --guide_group_display: block;
    }

    .guides__item:has(.guides__show_guide) {
        --guide_item_display: block;
    }

    .guides__show_guide {
        --guide_group_display: block;
        --guide_item_display: block;
        --guide_section_display: block;
    }


    @media only screen and (min-width: 100ch) {

        .guides__wrapper {
            --guides_wrapper_columns: clamp(30ch, 45ch, 30%) 1fr;
            --guides_header_top: 0;
            --guides_header_wrapper_margin: -3rem;
            --guides_header_margin: 0;
            --guides_popup_menu_display: none;
            --guides_menu_display: block;
        }

    }

    .jsWrapperAskAQuestion:not(:empty):not(.Hidden) + #id_sidebar_guide_content {
        display: none;
    }



/* ====== HEADER ====== */

    .header_button {
        z-index : 1;
        height: 100%;
        min-width: 4rem;
        background-color: transparent;
        border: none;
        border-radius: var(--standard_border_radius);
        cursor: pointer;
        color: var(--color_text_header);
        --color_icon: var(--color_text_header);
        text-align: center;
        outline: none;
        text-decoration: none;
        font-size: 1.5rem;
    }

    .header_button:is(:focus, :hover) {
        color: var(--color_text_header_hover);
        --color_icon: var(--color_text_header_hover);
    }

    #id_input_universal_search::placeholder {
        color: var(--color_text_na);
    }


/* ====== SIDEBARS ====== */

    .sidebar {
        --sidebar_transition: transform .2s linear var(--transition_delay, 0s);
        position: fixed;
        top: var(--height_header);
        height: calc(100% - var(--height_header));
        outline: none;
        box-shadow: var(--default_shadow);
        background-color: var(--color_background_sidebar);
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
        white-space: nowrap;
        transition: var(--sidebar_transition);
        will-change: transform;
    }

    #id_nav_bar {
        --sidenav_width_wide: 18rem;
        --sidenav_width_narrow: 5rem;
        --icon_size: 2rem;
        --color_icon: var(--color_text_navigation);
        width: var(--sidenav_width_wide);
        border-radius: var(--sidenav_border_radius, 0 var(--standard_border_radius) var(--standard_border_radius) 0);
        transform: translateX(var(--aside_translateX, calc(var(--sidenav_width_wide) * -1)));
        color: var(--color_text_navigation);
    }

    .sidebar__content_wrapper {
        --default_border_line: var(--default_border_line3);
        display: flex;
        flex-direction: column;
        height: 100%;
        align-items: stretch;
        transition: var(--sidebar_transition);
        transform: translateX(var(--nav_content_translateX));
        will-change: transform;
    }

    .nav_bar__item {
        padding: 1.5rem;
        gap: 1.5rem;
    }

    @media only screen and (max-width: 125ch) {
        .sidebar--show_sidebar + #id_info_panel_back {
            --info_panel_back_opacity: .8;
            --info_panel_translate_delay: 0s;
            --info_panel_back_translateX: 0;
        }
    }

    #id_help_bar {
        right: 0;
        width: var(--panel_info_width);
    }

    #id_help_bar {
        width: min(calc(100% - 4rem), 65ch);
        transform: translateX(var(--aside_translateX, 100%));
        border-radius: var(--standard_border_radius) 0 0 var(--standard_border_radius);
    }

    /* focus within is required if sidebar is closed and used tabs into it */
    .sidebar--show_sidebar,
    #id_nav_bar:is(:focus-within, .sidebar--show_sidebar) {
        --aside_translateX: 0;
    }


    #id_body:has(#id_info_panel.sidebar--show_sidebar){
        --info_panel_icon_hide_display: flex;
        --info_panel_icon_show_display: none;
    }

    .custom_icon--has_notification {
        position: relative;
    }

    .custom_icon--has_notification::after {
        content: '';
        position: absolute;
        top: .5rem;
        right: .25rem;
        height: .5rem;
        width: .5rem;
        border-radius: 50%;
        background-color: red;

    }


    @media only screen and (min-width: 40rem) {

        :root {
            --sidenav_spacer: 5rem;
            --header_grid_area: "header_nav header_logo header_search header_actions";
            --header_template_columns: min-content min-content 1fr;
            --logo_display: flex;
            --header_search_grid_col_end_override: auto;
        }

        #id_nav_bar {
            --aside_translateX: 0;
        }

        #id_nav_bar:not(:is(:focus-within, .sidebar--show_sidebar)) {
            --aside_translateX: calc(var(--sidenav_width_wide) * -1 + var(--sidenav_width_narrow));
            --nav_content_translateX: calc(var(--sidenav_width_wide) - var(--sidenav_width_narrow));
            --sidenav_border_radius: 0;
        }

        @media (hover: hover) and (pointer: fine) {

            :root {
                --header_grid_area: "header_logo header_search header_actions";
                --header_template_columns: min-content 1fr;
                --navigation_toggle_display: none;
            }

            #id_nav_bar:hover {
                --aside_translateX: 0rem;
                --nav_content_translateX: 0rem;
                --sidenav_border_radius: initial;
                --transition_delay: .2s;
            }

            #id_nav_bar:has(#id_link_user_profile:hover) {
                --transition_delay: 0s;
            }

        }

    }

    @media only screen and (min-width: 150ch) {

        .LoggedIn:not(.--hide_info_panel) {
            --panel_info_spacer: var(--panel_info_width);
            --info_panel_translateX: 0;
            --info_panel_border_radius: 0;
            --messages_right_offset: var(--panel_info_width);
            --info_panel_icon_hide_display: flex;
            --info_panel_icon_show_display: none;
        }

    }

/* ====== CONTAINERS ====== */

    .WillChange {will-change: transform;}

    .DisplayContent {display: contents;}

    .CheckContent:empty {
        --display_override: none;
        display: none;
    }

    .grid_text_image {
        display: grid;
        grid-template-areas: var(--grid_text_image_template_area,
            "title"
            "image"
            "text"
            "bar"
        );
        grid-auto-columns: 1fr;
        grid-auto-rows: min-content;
        gap: 0 var(--def_spacing);
        justify-items: stretch;
    }

    @media (min-width: 45rem) {
        .grid_text_image {
            --grid_text_image_template_area:
                "title title"
                "text image"
                "bar bar";
        }

        .grid_text_image--left {
            --grid_text_image_template_area:
                "title title"
                "image text"
                "bar bar";
        }

        .grid_text_image--left .grid_text_image__image {
            border-radius: 0 var(--standard_border_radius) var(--standard_border_radius) 0;
        }

        .grid_text_image__image {
            border-radius: var(--standard_border_radius) 0 0 var(--standard_border_radius);
        }

    }

    .grid_text_image__text {
        grid-area: text;
    }

    .grid_text_image__image {
        grid-area: image;
        max-width: 100%;
        height: auto;
        align-self: center;
    }

    .grid_bar {
        display: grid;
        grid-template-areas: "left_section center_section right_section";
        grid-template-columns: repeat(3, minmax(max-content, 1fr));
        justify-items: center;
    }

    .grid_bar__item--left,
    .grid_bar > :not(:where(.grid_bar__item--center, .grid_bar__item--right)):first-child:not(:last-child) {
        grid-area: left_section;
        justify-self: start;
    }

    .grid_bar__item--center,
    .grid_bar > :not(:where(.grid_bar__item--left, .grid_bar__item--right)):first-child:last-child {
        grid-area: center_section;
    }


    .grid_bar__item--right,
    .grid_bar > :not(:where(.grid_bar__item--center, .grid_bar__item--left)):last-child:not(:first-child) {
        grid-area: right_section;
        justify-self: end;
    }

    .--flex {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .--flex_column {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .ContainerMargin > :not(.ContainerMargin),
    :not(.ContainerMargin):not(.custom_card):not(.popup_menu__menu) > .ContainerMargin:not(.ContainerPadding) {
        margin: var(--def_spacing);
    }

    .--active_page,
    .--box_shadow {
        box-shadow: var(--default_shadow);
    }

    /* Safari 9+ */
    /* https://browserstrangeness.bitbucket.io/css_hacks.html#safari */
    /* https://stackoverflow.com/questions/16348489/is-there-a-css-hack-for-safari-only-not-chrome */
    @supports (-webkit-hyphens:none) {

        .custom_table :where(thead, tbody).--box_shadow {
            filter: var(--default_drop_shadow);
        }
    }


    .BoxShadowHighlight {
        box-shadow:
            3px 6px 14px 0 hsl(0, 0%, 35%),
            -8px -8px 18px 0 hsl(0, 0%, 35%);
    }


    .HeightFull {height: 100%;}

    .HeightMax {
        max-height: calc(
            100vh
            - var(--height_header)
            - var(--height_guide)
            - var(--height_footer)
            - var(--height_max_reduction, 4rem)
        );
    }

    .HeightMin {min-height: 3rem;}
    .HeightMin2 {min-height: 10rem;}

    dl {
        margin-block-start: 0; /*Chrome is defaulting this to 1rem*/
    }


/* ====== OVERFLOW ====== */

    .--overflow_visible {
        --overflow: visible;
        overflow: var(--overflow);
    }

    .--overflow_auto {
        --overflow: auto;
        overflow: var(--overflow);
    }

    .--overflow_hidden {
        --overflow: hidden;
        overflow: var(--overflow);
    }

    @media (hover: hover) and (pointer: fine) {

        .--scrollbar_on_hover {
            overflow: hidden;
        }

        .--scrollbar_on_hover:hover {
            overflow-y: auto;
        }
    }

/* ====== CARD ====== */

    .custom_card {
        box-sizing: border-box;
        overflow: var(--overflow, auto);
        border-radius: var(--custom_card_border_radius, var(--standard_border_radius));
        box-shadow: var(--card_shadow, var(--default_shadow));
        background-color: var(--color_background_card);
    }

    .custom_card > :where(.custom_table:last-child, #id_combo_box_list){
        margin-bottom: 0;
    }

    .custom_card--with_buttons {
        display: flex;
        flex-direction: column;
        max-height: var(
            --override_card_max_height,
            calc(
                100vh
                - var(--height_header)
                - var(--height_guide)
                - var(--height_footer)
                - var(--height_max_reduction, 11rem)
            )
        );
    }

    .custom_card__heading {
        --color_icon: var(--color_text_card_heading);
        box-sizing: border-box;
        min-width: 10rem;
        margin: 0;
        padding: 0.5rem 0 0.5rem 0;
        padding-left: var(--def_spacing);
        padding-right: var(--def_spacing);
        white-space: nowrap;
        font-weight: bolder;
        color: var(--color_text_card_heading);
        font-size: 1.2rem;
    }

    #id_modal .custom_card__heading {
        /* Required to position the close button correctly */
        position: relative;
    }

    .custom_card__section_heading {
        background-color: var(
            --color_background_card_group_heading,
            hsla(210, 15%, 95%, 1)
        );
        --bg_color_table_row: var(
            --color_background_card_group_heading,
            hsla(210, 15%, 95%, 1)
        );
        --ripple_color: var(
            --color_background_section_header_ripple,
            hsl(220, 20%, 80%)
        );
    }

    .custom_card__section_heading--subheading {
        background-color: var(
            --color_background_card_group_heading2,
            hsl(210, 15%, 95%, .9)
        );

    }

    .custom_card__mini_heading {
        background-color: var(--color_background_section_heading, hsl(222, 77%, 90%));
    }

    .custom_card__section--inactive {
        --color_text_overide: var(--color_text_na);
        --color_icon_overide: var(--color_text_na);
        --color_icon_clickable: var(--color_text_na);
        --color_background_overide: var(--color_background_card_inactive, hsl(0, 0%, 94%));
        color: var(--color_text_na);
        background-color: var(--color_background_overide);
    }

    .custom_card__section--warning {
        background-color: var(--color_background_invalid);
        color: var(--color_text_warning_with_background);
        --color_icon: var(--color_text_warning_with_background);
    }

    .custom_card__section--error {
        background-color: var(--color_background_invalid);
        color: var(--color_text_error);
        --color_icon: var(--color_text_error);
    }


/* ====== MODAL ====== */

    #id_modal {
        --primary_container_spacer: calc(
            (
                var(--height_footer_modal)
                + (var(--def_spacing) * 3)
            ) / 2
        );
        --sticky_position_bottom: var(--height_footer_modal);
        --card_shadow: var(--box_shadow_modal);
        --color_text_card_heading: var(--color_text_with_background);
        /*
        Needed to stop element being full page height
        and causing reflow on scroll
        due to dynamic browser ui on mobile
        */
        --primary_container_height_adjustment: 1px;
        box-shadow: 0 1px 0px black;
        transform: translateX(var(--modal_translateX, 100%));
        background-color: hsla(0, 0%, 0%, 0.8);

        opacity: var(--modal_opacity, 0);
        transition: opacity .3s ease-in-out;
        animation-fill-mode: forwards;
        overscroll-behavior: contain;
    }


    #id_modal_bottom_bar_close {
        --min_width_button: 5rem;
        display: none;
        position: fixed;
        bottom: 0;
        right: var(--panel_info_spacer);
        height: var(--height_footer_modal);
    }

    .--show_modal + #id_modal_bottom_bar_close {
        display: flex;
    }

    .--show_modal {
        --modal_translateX: 0;
        --modal_opacity: 1;
    }

    .--hide_modal {
        --modal_translateX: 0;
    }

    #id_modal.--hide_modal > * {
        --translate_y_from : -3rem;
        animation: var(--animation_fade_translation);
        animation-direction: reverse;
    }


/* ====== INFO PANEL  ====== */

    #id_info_panel {
        transform: translateX(var(--info_panel_translateX, var(--aside_translateX, 100%)));
    }

    #id_info_panel:has(#id_input_info_panel_tab_1:checked) {--info_panel_content_translate: -100%;}
    #id_info_panel:has(#id_input_info_panel_tab_2:checked) {--info_panel_content_translate: -200%;}
    #id_info_panel:has(#id_input_info_panel_tab_3:checked) {--info_panel_content_translate: -300%;}

    #id_info_panel:has(#id_input_info_panel_tab_0:checked) .info_panel__content:nth-child(1),
    #id_info_panel:has(#id_input_info_panel_tab_1:checked) .info_panel__content:nth-child(2),
    #id_info_panel:has(#id_input_info_panel_tab_2:checked) .info_panel__content:nth-child(3),
    #id_info_panel:has(#id_input_info_panel_tab_3:checked) .info_panel__content:nth-child(4) {
        --info_panel_content_opacity: 1;
    }

    .info_panel__tab_label_wrapper:has(:checked) {
        box-shadow: var(--default_shadow);
    }

    .info_panel__tab_label_wrapper:has(:checked)::before {
        content: '';
        position: absolute;
        bottom: 0;
        width: 100%;
        height: .25rem;
        border-radius: var(--standard_border_radius);
        background-color: var(--color_focus);
        color: var(--color_text_with_background);
        --color_icon: var(--color_text_with_background);
    }

    .info_panel__tab_label {
        grid-area: label;
    }

    .info_panel__content_wrapper {
        overflow: hidden;
        grid-area: info-content;
        display: flex;
    }

    .info_panel__content {
        min-width: 100%;
        opacity: var(--info_panel_content_opacity, 0);
        translate: var(--info_panel_content_translate, 0%);
        transition: translate .2s ease, opacity .3s ease-out;
    }

    #id_info_panel_tab_notifications > *:not(#id_section_info_user_notes):not(:first-child):not(:empty) {
        margin-top: calc(var(--def_spacing) * 2);
    }

    .notification__item:not(:empty) ~ .notification__no_notification {
        --no_notifications_display: none;
    }


/* ====== NO ITEMS ====== */


    .no_items__message {
        display: var(--no_items_message_display)
    }

    .no_items__message:not(:first-child) {
        --no_items_message_display: none;
    }


/* ====== DEFAULT INPUTS ====== */

    .custom_input__wrapper {
        position: relative;
        box-shadow: var(--box_shadow_input);
        border-radius: var(--modified_border_radius, var(--standard_border_radius));
        background-color: var(--color_background_input, hsl(0, 0%, 98%));
        overflow: hidden;
        min-width: var(--input_min_width, 5rem); /*Needed to prevent text area resizing being too small*/
        min-height: var(--input_min_height, 2.5rem); /*Needed to prevent text area resizing being too small*/
        align-items: end;  /*Needed to display select element correctly in safari*/
        cursor: var(--input_cursor);
    }

    .custom_input__wrapper:is(:hover, :focus-within) {
        --input_bar_bg_color: hsl(200, 100%, 50%);
        --txt_color_radio: var(--color_text_header_hover);
    }

    .custom_input__wrapper:focus-within{
        --input_bar_animation_name: AnimateInputBar
    }

    @keyframes AnimateInputBar {
        from {transform: scaleX(0.2);}
        to {transform: scaleY(2);}
    }

    .custom_input__wrapper--radio {
        --input_width: 1.5rem;
        --input_height: 1.5rem;
        --input_min_height: auto;
        --input_cursor: pointer;
        min-height: auto;
        padding: var(--def_spacing);
        color: var(--txt_color_radio);
        align-items: center;
    }

    .custom_input__wrapper--textarea {
        --input_height: 100%;
        max-height: min(100vh - 30rem, 40ch);
        cursor: auto;
    }

    .custom_input__wrapper--with_icon {
        --input_padding_top: .2rem;
        --input_padding_left: 2.25rem;
        --custom_input_label_translate_x: 2rem;
        --custom_input_label_translate_y: .5rem;
        --color_icon:var(--color_text_input_label);
    }

    .custom_input__wrapper--with_icon .custom_input__input:not(:placeholder-shown) {
        --input_padding_top: 1rem;
    }

    .custom_input__wrapper--with_icon .custom_input__input {
        margin-left: -2rem;
    }

    .custom_input__wrapper::before {
        display: var(--input_bar_display, inline-block);
        content: '';
        height: 1px;
        background-color: var(--input_bar_bg_color, hsl(0, 0%, 73%));
        position: absolute;
        bottom: 0px; /* Needed for Safari */
        width: 100%;
        transform-origin: center;
        animation: .2s ease-out forwards;
        animation-name: var(--input_bar_animation_name);
    }

    .custom_input__input:not(:placeholder-shown) ~ .custom_input__label {
        --input_label_opacity: 1;
        --custom_input_label_translate_y: 0;
    }

    .custom_input__label {
        position:absolute;
        top: 0.1rem;
        left: var(--custom_input_label_left, .75rem);
        right: var(--custom_input_label_right, auto);
        overflow: hidden;
        border-radius: var(--standard_border_radius);
        font-size: .9rem;
        font-weight: normal;
        white-space: nowrap;
        color: var(--color_text_input_label);
        opacity: var(--input_label_opacity_override, var(--input_label_opacity, 0));
        transform: translate(var(--custom_input_label_translate_x, 0), var(--custom_input_label_translate_y, 1.25rem));
        transition: transform 0.1s ease-in-out;
    }

    .custom_input__label--hide {
        --input_label_opacity_override: 0;
        --input_padding_top: 0;
    }

    .custom_input__input,
    input,
    select {
        position: var(--input_postion);
        box-sizing: border-box;
        left: var(--input_left, 0);
        margin: 0;
        width: var(--input_width, 100%);
        height: var(--input_height);
        min-height: var(--input_min_height, 2.5rem);
        /*Extra Top padding needed to stop the floating label being cut off*/
        padding: var(
            --input_padding_override,
            var(--input_padding_top, 1rem)
            var(--input_padding_right, .5rem)
            0
            var(--input_padding_left, .75rem)
        );
        border: none;
        background-color: transparent;
        font-family: inherit;
        font-size: inherit;
        text-align : var(--custom_input_text_align);

        transform: translate(var(--custom_input_translate_x, 0), var(--custom_input_translate_y, 0));
        transition: transform 0.1s ease-in-out;

        outline: none;
    }

    .custom_input__input[type='text'] {
        --input_cursor: text;
    }


    .custom_input__input {
        caret-color: var(--color_text_input_caret);
        color: var(
            --color_text_overide,
            var(--color_text_input, hsl(0, 0%, 0%))
        );
        cursor: var(--input_cursor);
    }

    .custom_input__input--simple_text_area {
        padding: 0;
        margin: 0;
        text-align: left;
        border: none;
        color: var(
            --color_text_overide,
            var(--color_text_input, hsl(0, 0%, 0%))
        );
        background-color: transparent;
    }

    select.custom_input__input {
        -webkit-appearance: none;
    }

    .custom_input__select_option {
        background-color: hsl(0, 0%, 100%);
        color: hsl(0, 0%, 0%);
    }

    .custom_input__input--validatable_hidden {
        opacity: 0;
        width: 0;
        height: 0;
        max-height: 0;
        min-height: 0;
        padding: 0;
        float: left;
        pointer-events:none;
        user-select: none;
    }

    .custom_input__input--with_select_icon {
        margin-right: -2rem;
        cursor: pointer;
    }

    input:read-only {
        cursor: auto;
        border-bottom: none;
    }

    [type='checkbox'] {
        width: 2rem;
        min-width: 2rem;
        max-width: 2rem;
    }

    ::placeholder,
    input:placeholder-shown ~ .custom_input__input {
        color: var(--color_text_input_placeholder);
    }


    .custom_table input[type='number'] {
        text-align: right;
    }


    /*
    :invalid selector on the select only works on an option if the select box is required,
    and the selected option's value is empty, so you can style it as you would a text box's placeholder text.
    Setting it to disabled prevents the user from selecting it in the select options,
    and setting it to hidden hides it from the select options.
    */
    select:invalid,
    select option[value=""] {
      color: hsl(0, 0%, 73%);
    }

    .delete_row__group:has(.delete_row__toggle:checked),
    .IgnoreCell {
        --color_background_input: var(--color_background_delete_row);
        --color_background_invalid: var(--color_background_delete_row);
        --color_background_button_overide: var(--color_text_na);
        --color_text_overide: var(--color_text_na);
        background-color: var(--color_background_delete_row);
        color: var(--color_text_na);
    }

   .custom_input__wrapper--valid,
   .custom_input__wrapper--invalid {
        --custom_input_label_translate_x: 1rem;
        --custom_input_translate_x: 1rem;
        --input_postion: relative;
        --input_left: -1rem;
        --input_padding_left: 2rem;
    }

    :where(
        .custom_input__wrapper--valid,
        .custom_input__wrapper--invalid
    )::after {
        content: var(--input_validation_content, "✔");
        position: absolute;
        bottom: 0;
        left: 0;
        padding: .2rem .2rem .2rem .5rem;
        font-weight: bold;
        color: var(--input_validation_txt_color, var(--color_text_valid));
    }

    .custom_input__wrapper--invalid {
        --input_validation_content: "✘";
        --input_validation_txt_color: var(--color_text_invalid);
    }

    .InvalidCell,
    .form__error_message {
        --color_background_input: var(--color_background_invalid);
        background-color: var(--color_background_invalid);
        color: var(--color_text_overide, var(--color_text_error));
    }

    .form__error_message--warning {
        background-color: var(--color_background_warning);
        color: hsl(0, 0%, 0%);
    }

    .custom_input--text_align_right {
        --custom_input_text_align: right;
        --custom_input_label_left: auto;
        --custom_input_label_right: .5rem;
        --custom_input_label_translate_x: 0;
    }

    @media (hover: hover) and (pointer: fine) {
        .custom_input--text_align_right {
            --custom_input_label_right: 1.5rem;
        }

        .custom_input--no_spinner .custom_input--text_align_right {
            --custom_input_label_right: .5rem;
        }
    }

    .custom_input--search ::-webkit-search-cancel-button {
        -webkit-appearance: none;
    }

    .custom_input__input:placeholder-shown ~ .jsClearInputButton {
        --custom_button_display: none
    }

    .custom_input--toggle_sign {
        --custom_button_display: none;
        --min_width_button: 2.5rem;
        min-width: 17ch;
        max-width: var(--input_max_width, calc(17ch + 2.5rem));
    }

    .custom_input--toggle_sign:not(:is(:focus-within, :hover)) .custom_input__wrapper {
        --modified_border_radius: var(--standard_border_radius);
    }

    .custom_input--toggle_sign:is(:focus-within, :hover) {
        --custom_button_display: flex;
        --input_min_width: calc(100% - 2.5rem);
    }

    /* Remove spinner icon from Chrome, Safari, Edge, Opera */
    .custom_input--no_spinner input::-webkit-outer-spin-button,
    .custom_input--no_spinner input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Remove spinner icon from Firefox */
    :where(.custom_input--no_spinner, .Disabled) input[type=number] {
        -moz-appearance: textfield;
    }


/* ====== CLICKABLE CONTENT ====== */

    .--active_page,
    .clickable--section {
        position: relative;
    }

    :where(
        #id_nav_bar a.--active_page,
        .clickable--section,
    )::before {
        content: var(--clickable_content);
        position: absolute;
        top: 0;
        left: 0;
        width: var(--focus_indicator_width, .5rem);
        height: 100%;
        background-color: var(--color_focus);
        color: var(--color_text_with_background);
        --color_icon: var(--color_text_with_background);
    }

    .clickable--secondary_target::before {
        display: none;
    }


    #id_nav_bar a.--active_page::before{
        --clickable_content: '';
    }

    .clickable,
    .clickable--capture,
    .clickable--section,
    .Clickable {
        outline: none;
    }

    select,
    .clickable,
    .clickable--pointer_only,
    .clickable--capture,
    .clickable--section,
    .Clickable {
        cursor: pointer;
    }

    .clickable--text {
        text-decoration: underline;
    }


    @media (any-pointer: fine) {
        /* Media query used to prevent hover state being stuck on touch devices */

        .clickable:not(:has(.clickable:is(:hover, :focus-visible))):is(:hover, :focus-visible) {
            --color_icon_overide: var(--color_icon_clickable);
            background-color: var(--color_bg_clickable);
            backdrop-filter: var(--color_bg_filter_clickable);
        }

        .clickable--has_clickable:has(.clickable:is(:hover, :focus-visible)) {
            box-shadow: none;
        }

        .clickable__section_heading {
            --color_bg_clickable: var(--color_background_clickable_section_heading);
        }

        .clickable__card_heading,
        .clickable__section {
            --color_bg_clickable: var(--color_background_clickable_section);
        }

        .clickable__section2 {
            --color_bg_clickable: var(--color_background_clickable_section2);
        }

        .clickable__section_on_dark_bg {
            --color_bg_clickable: var(--color_focus);
        }

        .clickable__section_with_dark_bg {
            --color_bg_filter_clickable: brightness(1.1);
        }

        .clickable__icon {
            --color_bg_clickable: var(--color_focus);
            --color_icon_clickable: var(--color_text_with_background);
        }

        .clickable__cell:is(:hover, :focus-visible) {
            background-color: inherit;
            box-shadow: inset 0 0 0 2px var(--color_focus);
        }

        .clickable--table_row:is(:hover, :focus-visible) td {
            cursor: pointer;
            box-shadow:
                inset 0 2px 0 0 var(--color_focus),
                inset 0 -2px 0 0 var(--color_focus);
        }

        :where(
            .clickable--capture,
            .clickable--section,
        ):not(:has(.Clickable:is(:hover, :focus))):is(:hover, :focus) {
            --clickable_content: '';
        }

        .Clickable:not(.custom_input__wrapper):is(:hover, :focus) {
            --ripple_color: hsl(280, 46%, 75%);

            --color_icon_overide: var(--color_text_with_background);
            --color_text_overide: var(--color_text_with_background);
            --color_background_overide: var(--color_focus);
            --color_adjustment: brightness(.9);

            --tag_border_color_overide: hsl(0, 0%, 100%);
            --tag_back_color_overide: transparent;

            --brightness_tooltip_target: 50%;

            background-color: var(--color_focus);
            color: var(--color_text_with_background);
        }
    }


/* ====== DROP AREAS ====== */

    /*This section needs to be after 'Clickable' otherwise the dropzone won't have correct format*/

    .drop_zone {
        min-height: 8rem;
        border-radius: var(--standard_border_radius);
        outline: 2px dashed #92b0b3;
        outline-offset: -10px;
        transition: background-color .15s linear;
    }

    .drop_zone--hover,
    .drop_zone:hover {
        outline-color: var(--color_text_with_background);
        color: var(--color_text_with_background);
        --color_icon: var(--color_text_with_background);
        background-color: var(--color_background_input_accent_checked);
    }


/* ====== EXPANDABLE ====== */

    .jsSelectAllGroup:has(.ExpandGroup.ExpandOpen) {
        --expand_group_toggle_icon_open: none;
        --expand_group_toggle_icon_closed: flex;
    }

    .expand_group__toggle:focus-within:not(:active) {
        --expand_group_toggle_animation: var(--animation_standard_props) animateRotateIn;
    }

    .expand_group__toggle_icon--open {
        --icon_display_override: var(--expand_group_toggle_icon_open, flex);
        animation: var(--expand_group_toggle_animation);
    }

    .expand_group__toggle_icon--close {
        --icon_display_override: var(--expand_group_toggle_icon_closed, none);
        animation-name: animateRotateOut;
        animation: var(--expand_group_toggle_animation);
    }


    .ExpandGroup:not(.ExpandOpen):not(.--animate_expand) .ExpandItem,
    .ExpandGroup.ExpandClose:not(.--animate_expand) .ExpandItem,
    .ExpandGroup.ExpandClose:not(.--animate_expand) + .ExpandItem,
    .ExpandGroup.ExpandClose:not(.--animate_expand) + .ExpandItem ~ .ExpandItem,
    .ExpandGroup:not(.ExpandOpen) .ExpandIconClose,
    .ExpandGroup.ExpandOpen .ExpandIconOpen {
        display: none;
    }

    .ExpandGroup.ExpandOpen .ExpandGroup:not(.ExpandOpen) .ExpandIconOpen {
        display: inline-block;
    }

    .ExpandOpen [data-ui_on_click~="uiExpandToggle"].--border_rounded {
        border-radius: var(--standard_border_radius) var(--standard_border_radius) 0 0;
    }

    .ExpandOpen [data-ui_on_click~="uiExpandToggle"].--border_rounded + .custom_card {
        border-radius: 0 0 var(--standard_border_radius) var(--standard_border_radius);
    }

    .AnimateExpandIcon.--animate_expand :where(.ExpandIconOpen, .ExpandIconClose) {
        animation: var(--animation_standard_props) animateRotateOut;
    }

    .ExpandIconClose {
        animation-name: animateRotateIn !important;
    }

    /* Animate sibling elements */

    .ExpandSiblings--reversed,
    .ExpandSiblings {
        --translate_y_to: calc(0rem - var(--animation_height));
        position: relative;
        z-index: 100;
        animation: var(--animation_standard_props) animateTranslateXY;
    }

    .ExpandSiblings--reversed {
        animation-direction: reverse;
    }

    /* Required for table row animations */
    .--animate_expand {
        position: relative;
        z-index: 1;
    }

    .ExpandItem {
        --translate_y_from: -3rem;
    }

    .--expand_horizontal {
        --translate_x_from : -3rem;
        --translate_y_from : 0;
    }

    .ExpandClose.--animate_expand ~ .ExpandItem,
    .ExpandClose.--animate_expand .ExpandItem {
        z-index: -100;
        animation-direction: reverse !important;
    }

    :where(.ExpandOpen, .ExpandClose).--animate_expand ~ .ExpandItem,
    :where(.ExpandOpen, .ExpandClose).--animate_expand .ExpandItem {
        pointer-events: none;
        animation: var(--animation_fade_translation);
    }

    .--animate_expand :has(+ .ExpandItem) {
        z-index: 1;
        position: var(--position, relative);
    }


/* ====== CHECKBOX ====== */

    .custom_checkbox {
        position: relative;
        outline: none;
        cursor: pointer;
        margin: var(--custom_checkbox_margin, auto);
        clear: both;
    }

    .custom_checkbox__element {
        height: 2rem;
        width: 2rem;
        border-radius: calc(var(--standard_border_radius) / 2);
        box-shadow: var(--box_shadow_input);
        background-color: var(
            --input_checkbox_back_color_override,
            var(--input_checkbox_back_color, var(--color_background_input_back_unchecked))
        );
    }

    .custom_checkbox__element::after {
        content: "";
        margin-top: -.3rem;
        width: .5rem;
        height: 1rem;
        border: solid hsl(0, 0%, 100%);
        border-width: 0 2px 2px 0;
        border-radius: 0 0 3px 0;
        transform: var(--input_checkbox_transform, rotate(0deg) scale(0));
        transition: transform 0.2s ease-out;
    }

    .custom_checkbox:is(:active, :hover, :focus) {
        --input_checkbox_back_color: var(--color_background_input_back_focus);
    }

    .custom_checkbox__input:checked ~ .custom_checkbox__element {
        --input_checkbox_back_color: var(--color_background_input_accent_checked);
        --input_checkbox_transform: rotate(45deg) scale(1);
    }

/* ====== SWITCH ======*/

    .custom_switch {
        --color_bg_input_back_unchecked: var(--color_background_input_back_unchecked);
        --color_bg_input_back_checked: var(--color_background_input_back_checked);
        --color_bg_input_accent_unchecked: var(--color_background_input_accent_inactive);
        --color_bg_input_accent_checked: var(--color_background_input_accent_checked);
    }

    .custom_switch--inverted_options {
        --color_bg_input_back_unchecked: var(--color_background_input_back_checked);
        --color_bg_input_back_checked: var(--color_background_input_back_unchecked);
        --color_bg_input_accent_unchecked: var(--color_background_input_accent_checked);
        --color_bg_input_accent_checked: var(--color_background_input_accent_inactive);
        rotate: 180deg;
    }

    .custom_switch__input{
        height: 0;
        width: 0;
        min-width: 0;
        visibility: hidden;
    }

    .custom_switch__label {
        --color_icon : var(--input_switch_text_color);
        position: relative;
        display: flex;
        align-items: center;
        width: 4rem;
        height: 1.5rem;
        border-radius: 100px;
        box-shadow: var(--box_shadow_input);
        background-color: var(--input_switch_back_color, var(--color_bg_input_back_unchecked));
        color: var(--input_switch_text_color);
        cursor: pointer;
        outline: none;
        -webkit-tap-highlight-color: transparent;
    }

    .custom_switch__options {
        position: absolute;
        left: -0.25rem;
        width: 1.25rem;
        height: 1.25rem;
        padding: 0.5rem;
        border-radius: 50%;
        background-color: var(--input_switch_accent_color, var(--color_bg_input_accent_unchecked));
        box-shadow: var(--input_switch_accent_boxshadow);
        font-size: x-small;
        user-select: none;
        transition: 0.2s;
        transform: translateX(var(--input_switch_button_translate));
    }

    .custom_switch__option_off {display: var(--input_switch_option_off_display);}
    .custom_switch__option_on {display: var(--input_switch_option_on_display);}

    .custom_switch__input:checked + .custom_switch__label {
        --input_switch_back_color: var(--color_bg_input_back_checked);
        --input_switch_accent_color: var(--color_bg_input_accent_checked);
        --input_switch_button_translate: 2rem;
        --input_switch_option_off_display: none;
        --input_switch_option_on_display: block;
    }

    .custom_switch:is(:hover, :focus) {
        --input_switch_back_color: var(--color_background_input_back_focus);
        --input_switch_accent_boxshadow: 0px 0px 1px 1px var(--color_background_input_accent_focus);
    }

    .custom_switch:is(:hover, :focus) .custom_switch__input:checked + .custom_switch__label {
        --input_switch_accent_color: var(--color_background_input_accent_focus);
    }


/* ====== INPUR RANGE ====== */


    .custom_input__input--range {
        -webkit-appearance: none;
        padding: 0rem;
        cursor: pointer;
    }

    .custom_input__input--range::-webkit-slider-runnable-track {
        height: 1rem;
        background-color: var(
            --input_checkbox_back_color_override,
            var(--input_checkbox_back_color, var(--color_background_input_back_unchecked))
        );
        border: none;
        border-radius: var(--standard_border_radius);
        box-shadow: var(--box_shadow_input);
    }

    .custom_input__input--range::-moz-range-track {
        height: 1rem;
        background-color: var(
            --input_checkbox_back_color_override,
            var(--input_checkbox_back_color, var(--color_background_input_back_unchecked))
        );
        border: none;
        border-radius: var(--standard_border_radius);
        box-shadow: var(--box_shadow_input);
    }

    .custom_input__input--range::-webkit-slider-thumb {
        -webkit-appearance: none;
        margin-top: -.5rem;
        height: 2rem;
        width: 3rem;
        border: none;
        box-shadow: var(--input_switch_accent_boxshadow);
        border-radius: var(--standard_border_radius);
        background-color: var(--input_switch_accent_color, var(--color_background_input_accent_checked));
    }

    .custom_input__input--range::-moz-range-thumb {
        margin-top: -.5rem;
        height: 2rem;
        width: 3rem;
        border: none;
        box-shadow: var(--input_switch_accent_boxshadow);
        border-radius: var(--standard_border_radius);
        background-color: var(--input_switch_accent_color, var(--color_background_input_accent_checked));
    }

    .custom_input__input--range:is(:active, :hover, :focus) {
        --input_checkbox_back_color: var(--color_background_input_back_focus);
        --input_switch_accent_color: var(--color_background_input_accent_focus);
    }



/* ====== RIPPLE ====== */

    .custom_ripple {
        position: relative;
        overflow: clip;
    }

    .custom_ripple__circle {
        pointer-events: none;
        position: absolute;
        border-radius: 50%;
        transform: scale(0);
        animation: ripple 600ms linear;
        background-color: var(--ripple_color, hsla(0, 0%, 64%, 0.45));
    }

    @keyframes ripple {
        to {
            transform: scale(4);
            opacity: 0;
        }
    }


/* ====== BUTTONS ====== */

    .custom_button {
        --box_shadow_button_hover : 0px 2px 2px hsla(0, 0%, 0%, .4);
        --color_icon: var(--color_text_button);
        font-size: 1em; /* Needed for Safari */
        box-sizing: border-box;
        min-height: 2.5rem;
        min-width: var(--min_width_button, min-content); /*Don't make this too big as need dynamic sized buttons for small screens*/
        padding: 0 var(--def_spacing);
        display: var(--custom_button_display, flex);
        gap: var(--def_spacing);
        margin: 0; /* Needed for Safari */
        justify-content: center;
        align-items: center;
        background-color: var(
            --color_background_button_overide,
            var(
                --color_background_button_hover,
                var(
                    --color_background_button,
                    hsl(216 19% 44%)
                )
            )
        );
        opacity: var(--custom_button_opacity);
        border: none;
        border-radius: var(--modified_border_radius, var(--standard_border_radius));
        color: var(--color_text_button) !important;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        user-select: none;
        outline: none;
        flex-shrink: 0;
        font-family: 'Nunito', sans-serif;
        box-shadow: var(--modified_box_shadow, var(--box_shadow_button));
        transition: transform .1s ease-out;
    }

    .custom_button:is(:hover, :focus-visible) {
        -webkit-tap-highlight-color: transparent;
    }

    .custom_button:not(:active):is(:hover, :focus-visible) {
        --box_shadow_button: var(--box_shadow_button_hover);
        --color_background_button_hover: var(--clr_bg_button_hover);
        filter: var(--button_filter_hover, brightness(110%));
    }

    .custom_button:not(:active):focus-visible { /*State to show if a user tabs to an element*/
        --box_shadow_button:
            inset 0px 0px 0px 2px hsl(0, 0%, 0%),
            inset 0px 0px 0px 3px hsl(0, 0%, 100%),
            var(--box_shadow_button_hover);
    }

    .custom_button--icon {
        height: auto;
        min-width: 2.5rem;
    }

    .custom_button__spacer::before {
        height: 100%;
        border-left: 2px solid hsl(0, 0%, 100%);
        margin: 0 var(--def_spacing) 0 var(--def_spacing);
        content: '';
    }

    .custom_button__spacer--vertical {
        width: 100%;
        max-height: 1px;
        background-color: hsl(0, 0%, 100%);
        flex-grow: 0;
    }

    .AnimateButtonReveal {
        --translate_x_from: -1rem;
        animation: var(--animation_fade_translation);
    }


    .custom_button--bar_item {
        --color_background_button: transparent;
        --color_text_button: var(--color_text_info);
        --clr_bg_button_hover: var(--color_background_clickable_section);
        --modified_box_shadow: 0;
        --button_filter_hover: none;
    }

    .custom_button--no_shadow {
        --box_shadow_button: none;
    }

    .custom_button--menu_item {
        --modified_border_radius: 0;
        --modified_box_shadow: none;
        --color_background_button: none;
        --color_text_button: var(--color_text_default);
        --clr_bg_button_hover: var(--color_background_clickable_section);
        --button_filter_hover: none;
        box-sizing: content-box;
        flex-grow: 1;
    }

    .custom_button--link {
        --button_filter_hover: none;
        --color_background_button: transparent;
        --color_text_button: var(--color_text);
        --color_icon: var(--color_text, var(--color_text_default));
        text-decoration: underline;
        box-shadow: none;
    }

    .custom_button--action {--color_background_button: hsl(180, 58%, 45%);}
    .custom_button--action_off {--color_background_button: hsl(215, 20%, 25%);}

    .custom_button--action_add {--color_background_button: hsl(165, 100%, 30%);}

    .custom_button--checkbox_action_remove:has(input:checked),
    .custom_button--action_remove {
        --color_background_button: hsl(0, 70%, 45%);
    }

    .custom_button--call_to_action {--color_background_button: var(--color_focus);}

    .custom_button--toggle {
        --color_background_button: hsl(210, 90%, 55%);
    }

    .custom_button--checkbox:has(input:checked) {
        --custom_button_icon_unchecked_display: none;
        --custom_button_icon_checked_display: inline-flex;

        --custom_button_text_unchecked_display: none;
        --custom_button_text_checked_display: inline-flex;
    }

    .custom_button--checkbox:focus-within:not(:active) {
        --button_icon_animation: var(--animation_standard_props) animateRotateIn;
    }

    .custom_button__text--unchecked {
        display: var(--custom_button_text_unchecked_display, flex);
    }

    .custom_button__text--checked {
        display: var(--custom_button_text_checked_display, none);;
    }

    .custom_button__icon--unchecked {
        --icon_display_override: var(--custom_button_icon_unchecked_display, inline-flex);
        animation-name: animateRotateOut;
        animation: var(--button_icon_animation);
    }

    .custom_button__icon--checked {
        --icon_display_override: var(--custom_button_icon_checked_display, none);
        animation: var(--button_icon_animation);
    }

    .custom_button--current_page {--color_background_button: hsl(210, 90%, 55%);}
    .custom_button--signup {--color_background_button: hsl(20, 90%, 50%);}

    .custom_button--check_active_input:has(
        .custom_button__active_trigger:where(
            :not([type="checkbox"]):not(:placeholder-shown),
            [type="checkbox"]:checked,
        )
    ) {
        --color_background_button: hsl(180, 58%, 45%);
    }

/* ====== POPUP MESSAGE ====== */

    #id_messages_wrapper {
        position: fixed;
        right: calc(0.5rem + var(--messages_right_offset, 0rem));
        bottom: 7rem;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        transition: bottom .3s;
        overflow: hidden;
    }

    .popup_message {
        --message_background_color_from: hsl(165, 100%, 35%);
        --message_background_color_to: hsl(165, 100%, 40%);
        --message_text_color: var(--color_text_with_background);
        margin-top: 1rem;
        padding: var(--def_spacing);
        box-shadow: var(--default_shadow);
        border-radius: var(--standard_border_radius);
        background-image: linear-gradient(
            90deg,
            var(--message_background_color_from) 0%, var(--message_background_color_from) 50%,
            var(--message_background_color_to) 50%, var(--message_background_color_to) 100%
        );
        background-size: 200%;
        color: var(--message_text_color);
        --color_icon: var(--message_text_color);
        display: flex;
        align-items: flex-start;
        will-change: transform;
        transform: translateX(30rem);
        animation:
            MessageSlide 8s ease-in-out,
            MessageColor 7.5s linear;
    }

    .popup_message--error {
        --message_background_color_from: hsl(0, 100%, 80%);
        --message_background_color_to: hsl(0, 100%, 85%);
        --message_text_color: var(--color_text_error);
        --color_icon: var(--color_text_error);
    }

    .popup_message--warning {
        --message_background_color_from: hsl(55, 100%, 40%);
        --message_background_color_to: hsl(55, 100%, 45%);
        --message_text_color: hsl(0, 0%, 0%);
    }

    @keyframes MessageSlide {
        5%  {transform: translateX(0);}
        95% {transform: translateX(0);}
    }

    @keyframes MessageColor {
        from {background-position: 100% 0;}
        to   {background-position: 0 100%;}
    }


/* ====== HIDE IF INPUT EMPTY ====== */

    .check_input_empty__wrapper:has(:placeholder-shown) .check_input_empty__hide {
        display: none;
    }


/* ====== TABLE ====== */

    .custom_table {
        border-width: 0;
        border-spacing: 0;
        text-align: right;
        margin: 0;
        table-layout: fixed;
        min-width: 100%;
        font-style: normal;
        font-weight: normal;
    }

    .custom_table__head {
        z-index: 3;
        display: var(--table_head_display, table-header-group);
        color: var(--color_text_table_heading, hsl(216, 19%, 35%));
    }

    .custom_table__body {
        display: var(--table_body_display, table-row-group);
    }

    .custom_table__row {
        display: var(--table_row_display, table-row);
        border-style: none;
        background-color: var(--bg_color_table_row, var(--color_background_card));
    }

    .custom_table__row--total{
        --border_top_table_cell: var(--border_table_total_row, 1px solid hsl(212, 30%, 80%));
        color: var(--color_text_table_total, hsl(216, 19%, 35%));
    }

    .custom_table__head_cell {
        display: var(--table_cell_display, table-cell);
        padding: var(--table_cell_padding);
        background-color: var(
            --table_bg_color_overide,
            var(--color_background_table_heading, hsl(225, 35%, 95%))
        );
        box-shadow: var(--table_cell_head_box_shadow);
        vertical-align: bottom;
        align-items: end;
        justify-content: end;
        text-align: right;
    }

    .custom_table__head_cell--alternative {
        --table_bg_color_overide: var(--color_background_table_heading, hsl(225, 35%, 85%));
    }

    .custom_table__head_cell--highlight {
        --table_bg_color_overide: var(--color_background_table_heading_highlight, hsl(210, 100%, 80%));
    }

    .custom_table__body_cell {
        display: var(--table_cell_display, table-cell);
        border-top: var(--border_top_table_cell);
        border-bottom: var(--border_bottom_table_cell);
        box-shadow: var(--box_shadow_table_cell);
        padding: var(--table_cell_padding);
        background-color: inherit;
        align-items: center;
        justify-content: end;
        text-align: right;
    }

    .custom_table__cell--min_width {
        min-width: 9ch;
    }

    .custom_table__head_cell:is(:first-child, :last-child) {
        --table_cell_head_box_shadow: var(--table_cell_first_head_box_shadow);
    }

    :is(
        .custom_table__head_cell,
        .custom_table__body_cell
    ):first-child {
        grid-column: 1;
        text-align: left;
        justify-content: start;
    }

    .custom_table__body_cell:not(:last-child):first-child {
        z-index: 1;
        position: sticky;
        left: 0;
        max-width: 45vw;
    }

    .custom_table__head_cell:not(:last-child):first-child {
        z-index: 4;
        position: sticky;
        left: 0;
        max-width: 45vw;
    }

    .AlternateRows tr:not(:last-child) {
        --border_bottom_table_cell: var(--border_table_row, 1px solid hsl(0, 0%, 80%));
    }

    .custom_table__head_cell:first-child,
    .custom_table__row:first-child .custom_table__body_cell:first-child {
        border-top-left-radius: var(--table_first_cell_border_radius_tl, var(--standard_border_radius));

        /* Animation removes rounded border as you scroll */
        animation-name: animationBorderRadius;
        animation-range-start: 1rem;
        animation-timing-function: step-start;
        animation-timeline: scroll(x);
    }

    .custom_table__head_cell:last-child,
    .custom_table__row:first-child .custom_table__body_cell:last-child {
        border-top-right-radius: var(--table_first_cell_border_radius_tr, var(--standard_border_radius));
    }

    .custom_table__row:last-child .custom_table__body_cell:first-child {
        border-bottom-left-radius: var(--table_first_cell_border_radius_bl, var(--standard_border_radius));
        /* Animation removes rounded border as you scroll */
        animation-name: animationBorderRadius;
        animation-range-start: 1rem;
        animation-timing-function: step-start;
        animation-timeline: scroll(x);
    }

    .custom_table__row:last-child .custom_table__body_cell:last-child {
        border-bottom-right-radius: var(--table_first_cell_border_radius_br, var(--standard_border_radius));
    }

    @keyframes animationBorderRadius {
        to {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    }


/* ====== DATA GRID ====== */

    .data_grid {
        display: grid;
        grid-template-columns: repeat(var(--grid_columns, 3), auto);
    }

    .data_grid__subcol {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span calc(var(--rows, 0) + var(--dynamic_rows, 0));
    }

    .data_grid__subgrid {
        display: grid;
        grid: subgrid / subgrid;
        grid-column: 1 / -1;
        grid-row: span calc(var(--rows, 0) + var(--dynamic_rows, 0));
    }

    /* Safari freezes with subgrid in rows so set heights dynamically using js */
    @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {

        .data_grid__subcol,
        .data_grid__subgrid
         {
            grid-template-rows: auto;
            grid-row: auto;
        }
    }

    .data_grid__subrow {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / -1;
    }

    .data_grid__cell--span_all_columns {
        grid-column: 1 / -1;
    }

    .data_grid__cell--text {
        text-align: left;
        justify-content: start;
    }

    .data_grid__cell--number {
        justify-content: end;
        text-align: right;
    }


/* ====== DATA GRID - CUSTOM DASHBOARD ====== */

    .data_grid--custom_dashboard {
        counter-reset: card_number;
        --custom_dashboard_template_columns: var(--custom_dashboard_template_columns_narrow, 1);
    }

    .data_grid__custom_dashboard--show_wide {
        display: var(--custom_dashboard_wide_display, none);
    }

    .data_grid--custom_dashboard:has(.data_grid__custom_dashboard_card_menu_icon.popover__target) .jsCustomDashboardCardHeading::before {
        counter-increment: card_number;
        content: var(--card_counter, counter(card_number)) ") ";
    }

    .data_grid__custom_dashboard_card {
        --custom_dashboard_card_column_span: var(--custom_dashboard_card_column_span_narrow, 1);
        --custom_dashboard_card_row_span: var(--custom_dashboard_card_row_span_narrow, 1);
        grid-column: span min(var(--custom_dashboard_card_column_span, 1), var(--custom_dashboard_template_columns));
        grid-row: span var(--custom_dashboard_card_row_span, 1);
    }


    @media only screen and (min-width: 100ch) {

        #id_content {
            --custom_dashboard_wide_display: flex;
        }

        .data_grid--custom_dashboard {
            --custom_dashboard_template_columns: var(--custom_dashboard_template_columns_wide, 4);
        }

        .data_grid__custom_dashboard_card {
            --custom_dashboard_card_column_span: var(--custom_dashboard_card_column_span_wide, 1);
            --custom_dashboard_card_row_span: var(--custom_dashboard_card_row_span_wide, 1);
            order: var(--card_order_wide);
            --card_counter: var(--card_order_wide_text);
        }

        .data_grid__custom_dashboard--show_narrow {
            display: none;
        }
    }


/* ====== DATA GRID - CATEGORIES ====== */


    .data_grid__category_cell_row_span {
        grid-row: var(--category_cell_grid_row, span 3);
        align-items: var(--category_cell_align, start);
    }

    .data_grid__category_amount {
        padding-bottom: var(--category_cell_padding, calc(var(--def_spacing) / 2));
    }

    .data_grid__category_budget_bar {
        grid-column: var(--category_budget_meter_grid_column, 2 / span 3);
        grid-row: var(--category_budget_meter_grid_row, 3);
        padding-top: var(--category_cell_padding, calc(var(--def_spacing) / 2));
    }

    .data_grid__category_budget {
        padding-bottom: var(--category_cell_padding, calc(var(--def_spacing) / 2));
    }

    .data_grid__category_amount_ytd {
        display: var(--category_amount_ytd_display, none);
    }

    .data_grid__category_amount_ltm {
        display: var(--category_amount_ltm_display, none);
    }

    .data_grid__category_amount_cumulative {
        display: var(--category_amount_cumulative_display, none);
    }

    @media only screen and (min-width: 90ch) {

        #id_content {
            --category_controls_display: contents;
            --category_grid_columns: auto minmax(10ch, 1fr) auto minmax(auto, 20ch) repeat(5, auto);
            --category_cell_grid_row: auto;
            --category_cell_align: center;
            --category_budget_meter_grid_column: auto;
            --category_budget_meter_grid_row: auto;
            --category_budget_heading_grid_column: 5;
            --category_cell_total_budget_column: 5;
            --category_cell_padding: var(--def_spacing);
        }

        .--show_category_ytd_total_column {
            --category_amount_ytd_display: flex;
        }


        .--show_category_ltm_total_column {
            --category_amount_ltm_display: flex;
        }

        .--show_category_lifetime_cumulative_total_column {
            --category_amount_cumulative_display: flex;
        }

    }


/* ====== DATA GRID - ACCOUNTS ====== */


    .data_grid--account {
        grid-template-columns: auto 1fr auto auto;
    }

    .data_grid__account_info:has(.--sync_issue) {
        --display_sync_balance: none;
    }

    @media only screen and (min-width: 90ch) {

        .data_grid--account {
            grid-template-columns: auto minmax(20%, 35%) 1fr auto auto auto;
            --account_credit_limit_grid_column: 4;
            --account_balance_grid_column: 5;
            --account_menu_grid_column: 6;
            --account_cell_padding: var(--def_spacing);
        }

        .data_grid__account_info {
            --account_info_grid_column: var(--account_info_grid_column_wide);
        }

        .meter_bar--credit_limit {
            max-width: 60ch;
        }

    }


/* ====== DATA GRID - PORTFOLIO ====== */


    .data_grid__portfolio_total_row {
        grid-template-areas: var(
            --portfolio_account_row_template_area,
            "label label label label label valuation menu"
            ". . . . roi roi menu"
        );
    }

    .data_grid__portfolio_subcell {
        font-size: var(--portfolio_subcell_font_size, .8rem);
        padding-bottom: var(--portfolio_cell_padding_bottom, var(--def_spacing));
    }

    .data_grid__portfolio_cell_purchase_cost,
    .data_grid__portfolio_cell_share_of_account,
    .data_grid__portfolio_cell_share_of_portfolio,
    .data_grid__portfolio_cell_gain_unrealised,
    .data_grid__portfolio_cell_gain_realised,
    .data_grid__portfolio_cell_gain_income {
        display: none;
    }

    .data_grid__portfolio_cell_note {
        display: var(--portfolio_column_display_note, none);
        grid-area: note;
    }

    @media only screen and (min-width: 120ch) {

        #id_section_portfolio {
            --portfolio_widescreen_only_display: content;
        }

        .data_grid__portfolio_cell_sticky {
            z-index: 1;
            position: sticky;
            left: 0;
            border-right: var(--default_border_line);
        }

        .data_grid__portfolio_cell_purchase_cost {
            display: var(--portfolio_column_display_purchase_cost, none);
            grid-area: purchase_cost;
        }

        .data_grid__portfolio_cell_share_of_account {
            display: var(--portfolio_column_display_share_of_account, none);
            grid-area: share_of_account;
        }

        .data_grid__portfolio_cell_share_of_portfolio {
            display: var(--portfolio_column_display_share_of_portfolio, none);
            grid-area: share_of_portfolio;
        }

        .data_grid__portfolio_cell_gain_unrealised {
            display: var(--portfolio_column_display_gain_unrealised, none);
            grid-area: gain_unrealised;
        }

        .data_grid__portfolio_cell_gain_realised {
            display: var(--portfolio_column_display_gain_realised, none);
            grid-area: gain_realised;
        }

        .data_grid__portfolio_cell_gain_income {
            display: var(--portfolio_column_display_gain_income, none);
            grid-area: gain_income;
        }

        .data_grid--portfolio {
            --portfolio_header_row_display: grid;
            --portfolio_template_colums: repeat(16, auto);
            --portfolio_account_row_template_area: "label . . . . purchase_cost valuation share_of_account share_of_portfolio gain_unrealised gain_realised gain_income roi roi . menu";
            --portfolio_item_row_template_area: "label symbol holding price price purchase_cost valuation share_of_account share_of_portfolio gain_unrealised gain_realised gain_income roi roi note menu";
            --portfolio_symbol_small_display: none;
            --portfolio_symbol_large_display: flex;
            --portfolio_value_label_display: none;
            --portfolio_item_column_gap: 0;
            --portfolio_cell_return_display: contents;
            --portfolio_cell_padding_bottom: 0;
            --portfolio_value_padding: var(--def_spacing) calc(var(--def_spacing) * .5);
            --portfolio_cell_align: end;
            --portfolio_subcell_font_size: auto;
        }

    }


/* ====== DATA GRID - BUDGET SUMMARY ====== */

    .jsBudgetSummaryWrapper:has(#id_input_budget_summary_show_all_rows:checked) {
        --budgets_summary_section_force_display: contents;
        --budget_summary_no_rows_display: none;
    }

    .jsBudgetSummaryWrapper:has(#id_input_budget_rollover_mode:checked) {
        --budget_rollover_display: flex;
        --budget_summary_rollover_columns: 2;
    }

    .data_grid__budget_summary_rows_wrapper {
        display: var(--budgets_summary_section_force_display, none);
    }

    .data_grid__budget_summary_rows_wrapper:has(.data_grid__budget_summary_row--force_show) {
        display: contents;
    }

    .data_grid__budget_summary_rows_wrapper:not(:has(.jsBudgetSummaryRow)) {
        display: none;
    }

    .data_grid__budget_summary_amount_cell:has(.jsBudgetOverrideForm) {
        --budget_override_show_display: flex;
        --budget_override_hide_display: none;
    }

    .budget_summary--rollover_controls {
        display: var(--budget_rollover_display, none);
    }

/* ====== DATA GRID - RECURRING BUDGETS ====== */

    .data_grid__subrow--recurring_budget {
        grid-template-areas: var(--budget_template_area,
            "budget_next_due budget_next_due"
            "budget_category_amount budget_category_amount"
            "budget_info ."
            "budget_info budget_menu"
        );
        grid-template-columns: 1fr;
    }

    @media only screen and (min-width: 110ch) {

        #id_content .data_grid__subrow--recurring_budget {
            --budget_template_area: none;
            --budget_cell_area: auto;
            --budget_type_alignment: auto;
            --budget_category_amount_padding: var(--def_spacing);
            --budget_next_due_display: block;
            --budget_next_due_flex: row;
            --budget_next_due_padding: var(--def_spacing);
            --budget_cell_info_padding: 0;
            grid-template-columns: subgrid;
        }

    }

/* ====== DATA GRID - BUDGET INPUT ====== */

    .data_grid--recurring_budget_input:has(.data_grid--recurring_budget_alterations:nth-child(2)) {
        --recurring_budget_input_columns: 1fr auto auto auto;
        --recurring_budget_input_row_delete_display: flex;
    }

    .data_grid__row--altered_budget_inputs + .data_grid__row--altered_budget_calculated {
        display: none;
    }

/* ====== DYNAMIC CONTENT ====== */

    .dynamic_content::before {
        content: var(--dynamic_content);
    }


/* ====== COUNTER ====== */

    .counter__wrapper {
        counter-reset: section;

    }

    .counter__item::before {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--def_spacing);
        counter-increment: section;
        content: counter(section);
    }


/* ====== FINANCIAL STATEMENT ====== */

    .--has_budget_override::before {
        content: '◦';
        margin-right: 1ch;
    }

    .FSSection + :is(.FSAccountGroup, .FSAccount),
    .FSAccountGroup + .FSAccount:not([data-account_group_name='']) {
        --box_shadow_table_cell: var(--box_shadow_inset_top);
    }

    /* :is selector around :has prevents Firefox invalidating all selectors */
    .FSAccount:is(:has(+ .FSSection)),
    .LastRow:not([data-account_group_name='']):not(.ExpandOpen) {
        --box_shadow_table_cell: var(--box_shadow_inset_bottom);
    }

    /* :is selector around :has prevents Firefox invalidating all selectors */
    .FSSection + .FSAccount:is(:has(+ .FSSection)),
    .FSSection + .FSAccountGroup.LastRow:not(.ExpandOpen),
    .FSAccountGroup + .FSAccount.LastRow:not([data-account_group_name='']) {
        --box_shadow_table_cell:
            var(--box_shadow_inset_top),
            var(--box_shadow_inset_bottom);
    }


/* ====== INPUT GRID ====== */

    .InputGrid {
        display: grid;
        grid-template-columns: minmax(min-content, auto);
        grid-auto-columns: max-content;
        grid-gap: var(--def_spacing);
        align-items: stretch;
    }

    .InputGrid-row {
        display: contents;
    }

    .InputGrid-c1 {
        grid-column-start: 1;
        left: 0;
    }

    .InputGrid-c2 {
        grid-column-start: 2;
    }

    .InputGrid-c3 {
        grid-column-start: 3;
    }

    .InputGrid-c4 {
        grid-column-start: 4;
    }


/* ====== LIST ====== */

    ol {
        list-style-type: none;
        margin: 0;
        padding: 0;
        /*border-bottom: 1px solid #C7C7C7; /*Even darker grey*/
    }

    .UnorderedList {
        padding-inline-start: 1.25rem;
    }

    .ParagraphStandard ol {
        list-style-type: decimal;
        margin: revert;
        padding: revert;
    }

    .ParagraphStandard li {
        margin: .5rem 0;
    }

/* ====== POPUP MENU ===== */

    .popup_menu {
        position: var(--popup_menu_position, relative);
    }

    .popup_menu__button {
        width: var(--popup_menu_button_width, fit-content);
        height: var(--popup_menu_button_height);
    }

    :is(
        .popup_menu,
        .popup_menu__button,
    ):focus {
        outline: none;
    }

    .popup_menu__menu {
        z-index: 1;
        display: var(--popup_menu_display, none);
        contain: layout style paint;
        position: absolute;
        left: var(
            --popup_menu_position_left,
            0rem
        );
        right: var(--popup_menu_position_right, auto);
        top: var(--popup_menu_position_top);
        bottom: var(--popup_menu_position_bottom);
        margin-top: var(--popup_menu_offset, var(--def_spacing));
        box-shadow: var(--default_shadow);
        background-color: var(--color_background_card);
        border: var(--default_overlay_border_line);
        border-radius: var(--popup_menu_border, 0 0 var(--standard_border_radius) var(--standard_border_radius));
        color: var(--color_text_primary);
        min-width: 10ch;
        width: max-content;
        max-width: calc(
            var(--popup_page_size, calc(100vw - 4.5rem - var(--sidenav_spacer)))
            - var(--popup_max_width_adjustment, 0rem)
        );

        /*Make this a bit shorted than the screen less top and bottom bars so it works on mobile with url bar*/
        max-height: calc(100vh - 15rem - var(--height_guide));

        overflow-y: auto;
        flex-direction: column;
        transform: translate(var(--popup_menu_translate_x));

        animation: var(--animation_pop_down);
        transform-origin: var(--popup_menu_transform_origin, top);
        will-change: transform;

    }

    .merged_component .popup_menu__menu{
        --modified_border_radius: var(--standard_border_radius);
    }

    .popup_menu__section_heading {
        border-top: var(--default_border_line);
        padding: calc(var(--def_spacing) * 2);
        padding-bottom: var(--def_spacing);
        display: flex;
        gap: calc(var(--def_spacing) * 2);
        align-items: center;
        justify-content: flex-start;
        color: var(--color_text_section_heading);
        font-weight: bold;
    }

    .popup_menu__item {
        min-height: 2.5rem;
        padding-inline: calc(var(--def_spacing) * 2);
        padding-block: var(--def_spacing);
        display: flex;
        gap: calc(var(--def_spacing) * 2);
        align-items: center;
        justify-content: flex-start;
    }

    .popup_menu--open {
        --popup_menu_display: flex;
    }

    .popup_menu--right {
        --popup_menu_position_left: auto;
        --popup_menu_position_right: 0rem;
        --popup_menu_transform_origin: top right;
    }

    .popup_menu--center_top {
        --popup_menu_position_left: 50%;
        --popup_menu_position_bottom: calc(100% + var(--popup_menu_offset, var(--def_spacing)));
        --popup_menu_border: var(--standard_border_radius) var(--standard_border_radius) 0 0;
        --popup_menu_transform_origin: bottom;
        --popup_menu_translate_x: -50%;
        --translate_x_from: -100%;
    }

    .popup_menu--center_bottom {
        --popup_menu_position_left: 50%;
        --popup_menu_translate_x: -50%;
        --translate_x_from: -50%;
    }

    @media (hover: hover) and (pointer: fine) {
        /* Media query used to prevent hover state being stuck on touch devices */

        .popup_menu {
            --popup_menu_offset: var(--popup_menu_hover_offset, 0rem);
        }

        .popup_menu:not(.popup_menu--no_hover_show):where(
            .popup_menu__button:hover,
            :has(.popup_menu__button:hover)
        ),
        .popup_menu__menu:where(:hover, :focus-within) {
            --popup_menu_display: flex;
        }

    }

/* ====== TOOLTIP ====== */

    .custom_popover {
        --override_card_max_height: min(calc(100vh - 10rem), 60ch);
        contain: layout style;
        z-index: 10000;
        position: absolute;
        display: var(--tooltip_display, none);
        width: max-content;
        min-width: 10ch;
        max-width: min(50ch, calc(100vw - 4rem));
        outline: none;
        padding: var(--tooltip_spacing, 1rem);
    }

    .tooltip--no_spacing {
        --tooltip_spacing: 0;
    }

    .popover__menu_icon--open {
        --icon_display_override: var(--popover_menu_icon_open_display, inline-flex);
        /* animation: var(--animation_standard_props) animateRotateIn; */
    }

    .popover__menu_icon--close {
        --icon_display_override: var(--popover_menu_icon_close_display, none);
        animation: var(--animation_standard_props) animateRotateOut;
    }

    .popover__target {
        --popover_menu_icon_open_display: none;
        --popover_menu_icon_close_display: inline-flex;
        anchor-name: --popover_target;
    }

    .popover__target:where(.popover__target--highlight) {
        box-shadow: inset 0px 0px 0px 1px hsl(0, 0%, var(--brightness_tooltip_target));
    }

    .--tooltip_visible {
        --tooltip_display: block;
    }

    .--tooltip_transition {
        transition:
            top .2s ease-out,
            left .2s ease-out,
            right .2s ease-out;
    }

    @position-try --popover_position_x1 {
        right: anchor(left);
        left: auto;
    }

    @position-try --popover_position_x2 {
        right: anchor(right);
        left: auto;
    }

    @position-try --popover_position_x3 {
        right: auto;
        left: auto;
    }

    .tooltip__content {
        overflow: hidden;
        box-shadow: var(--box_shadow_tooltip);
        border: var(--default_overlay_border_line);
        background-color: var(--color_background_tooltip);
        border-radius: var(--tooltip_border_radius, var(--standard_border_radius));
        min-height: 2rem;
    }

    .tooltip--rounded_bottom {
        --tooltip_border_radius: 0 0 var(--standard_border_radius) var(--standard_border_radius);
    }

    .tooltip--rounded_right {
        --tooltip_border_radius: 0 var(--standard_border_radius) var(--standard_border_radius) 0;
    }


    @media only screen and (max-width: 125ch) {

        :where(#id_content, .jsPopoverParent):has(.popover--dragging) {
            overflow: hidden;
        }

        .popover--menu {
            --tooltip_border_radius: var(--standard_border_radius) var(--standard_border_radius) 0 0;
            --translate_y_from: 100%;
            position: sticky;
            top: auto !important;
            left: 0 !important;
            bottom: 0 !important;
            min-width: 100%;
            display: flex;
            justify-content: center;
            background-color: hsl(0deg 0% 0% / 80%);
            transition:
                transform .25s ease-in-out allow-discrete,
                display .25s allow-discrete;
            transition: transform .25s ease-in-out allow-discrete;
            /* animation: var(--animation_standard_props) animateTranslateXY !important; */
        }

        .popover--dragging {
            animation: none !important;
        }

        .popover--menu .tooltip__content::before {
            content: '';
            height: .25rem;
            margin: .5rem calc(50% - 2rem) .5rem calc(50% - 2rem);
            background: linear-gradient(to right, grey 0%, grey 100%);
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: center;
            border-radius: .5rem;
        }

        /* @starting-style {
            .popover--menu {
              transform: translateY(100%);
            }
        } */


    }


/* ====== CHART ====== */

    .chart__wrapper {
        --chart_tooltip_background_color: hsla(0, 0%, 0%, 0.7);
        --chart_max_height: 35vh;
        display: grid;
        justify-content: stretch;
        grid-auto-columns: minmax(45ch, 1fr);
    }

    .chart__wrapper--side_tooltip {
        --chart_tooltip_pointer_events: auto;
        --chart_tooltip_max_height: var(--chart_max_height);
        --chart_tooltip_min_width: 30ch;
        --chart_tooltip_header_position: sticky;
        --chart_tooltip_background_color: var(--color_background_card);
        --chart_tooltip_text_color: var(--color_text_default);
        --color_text_negative_light: var(--color_text_negative);
        --color_text_positive_light: var(--color_text_positive);
        --chart_tooltip_total_border: var(--border_table_total_row, 1px solid hsl(212, 30%, 80%));
        --chart_tooltip_animation_y: -3rem;
        grid-template-columns: minmax(0, 2fr);
    }

    @media (min-width: 140ch) {
        .chart__wrapper--side_tooltip {
            grid-auto-flow: var(--chart_grid_flow, column);
            --chart_tooltip_animation_y: 0;
            --chart_tooltip_animation_x: 3rem;
        }
    }

    .chart__canvas_wrapper {
        min-height: 20rem;
        height: var(--chart_height, clamp(20rem, 40rem, var(--chart_max_height)));
        cursor: pointer;
    }

    .chart__canvas_wrapper--summary_to_detail {
        min-height: 10rem;
        --chart_height: var(--chart_height_categories, 10rem);
        padding: var(--chart_padding);
    }

    #id_content .chart__item--detailed,
    #id_wrapper_chart_popout .chart__item--summary {
        display: none;
    }

    .chart__tooltip {
        --color_background_chart_tooltip_row: inherit;
        z-index: 10000;
        background: var(--chart_tooltip_background_color);
        border-radius: var(--standard_border_radius);
        color: var(--chart_tooltip_text_color, hsl(0, 0%, 100%));
        opacity: 1;
        pointer-events: var(--chart_tooltip_pointer_events, none);
        position: var(--chart_tooltip_position);
        max-height: var(--chart_tooltip_max_height);
        min-width: var(--chart_tooltip_min_width);
        overflow-y: auto;
        overflow-x: hidden;
    }

    .chart__wrapper--side_tooltip table {
        --color_background_chart_tooltip_row_alternate: var(--color_background_chart_tooltip_row_odd, hsl(0, 0%, 95%));
        --translate_x_from: var(--chart_tooltip_animation_x);
        --translate_y_from: var(--chart_tooltip_animation_y);
        animation: var(--animation_fade_translation);
    }


    .chart__tooltip_header {
        --table_first_cell_border_radius_bl : 0;
        --table_first_cell_border_radius_br : 0;
        position: var(--chart_tooltip_header_position);
        top: 0;
    }

    .chart__tooltip_th {
        min-width: 8ch;
    }

    .chart__tooltip_th:first-child {
        text-align: left;
        border-top-left-radius: calc(var(--standard_border_radius) / 2);
    }

    .chart__tooltip_th:last-child {
        border-top-right-radius: calc(var(--standard_border_radius) / 2);
    }

    .chart__tooltip_first_cell {
        display: flex;
        width: 100%;
        align-items: center;
        text-align: left;
    }

    .chart__tooltip--overlay {
        --chart_tooltip_position: absolute;
        transform: translate(-50%, 0);
        transition: all .2s ease;
    }

    .chart__tooltip .custom_table {
        margin: 0;
    }

    .chart__tooltip :where(tr, th) {border-width: 0;}

    .chart__tooltip__legend_item {
        flex-shrink: 0;
        border-width: 2px;
        margin-right: 10px;
        height: 10px;
        width: 10px;
        display: inline-block;
    }

    .chart__tooltip_row,
    .chart__tooltip_total_row {
        background-color: var(--color_background_chart_tooltip_row);
    }

    .chart__tooltip_row:nth-child(2n) {
        background-color: var(--color_background_chart_tooltip_row_alternate)
    }

    .chart__tooltip_total_row {
        font-weight: bold;
    }

    .chart__tooltip_total_row {
        position: sticky;
        bottom: 0;
        background-color: var(--chart_tooltip_background_color);
    }

    .chart__tooltip_total_row td {
        border-top: var(--chart_tooltip_total_border, 1px solid hsl(0, 0%, 100%));
    }

/* ====== ICONS ====== */

    .custom_icon {
        vertical-align: middle;
        justify-content: center;
        display: var(--icon_display_override, inline-flex);
    }

    .custom_icon__element {
        height: var(--icon_size);
        width: var(--icon_size);
        fill: var(--color_icon_overide, var(--color_icon));
    }

    .IconPadding {
        padding: 2px;
    }


/* ====== HIGHLIGHTS ====== */

    .highlight {
        background-color: var(--color_background_highlight, hsl(222, 77%, 90%));
    }

    .highlight--transaction_entry .account_name__text {
        background-color: var(--color_background_highlight, hsl(222, 77%, 90%));
        border-radius: var(--standard_border_radius);
    }

    .highlight--page_status {
        background-color: hsl(165, 100%, 30%);
        --color_icon: var(--color_text_with_background);
        color: var(--color_text_with_background);
    }

    .highlight--login {
        --color_text_overide: var(--color_text_with_background);
        --color_icon_overide: var(--color_text_overide);
        background-color: hsl(20, 90%, 50%);
        color: var(--color_text_overide);
    }

    .highlight--positive {
        --color_icon: var(--color_text_overide, hsl(179, 100%, 15%));
        background-color: var(--color_background_overide, hsl(150, 100%, 85%));
        color: var(--color_text_overide, hsl(179, 100%, 15%));
        filter: var(--color_adjustment);
    }

    .highlight--positive_most {
        background-color: var(--color_background_overide, hsl(165, 100%, 30%));
        color: var(--color_text_overide, hsl(0, 0%, 100%));
        --color_icon: var(--color_text_overide, hsl(0, 0%, 100%));
        filter: var(--color_adjustment);
    }

    .highlight--negative {
        background-color: var(--color_background_overide, var(--color_background_invalid));
        color: var(--color_text_overide, hsl(355, 100%, 30%));
        --color_icon: var(--color_text_overide, hsl(355, 100%, 30%));
        filter: var(--color_adjustment);
    }

    .highlight--error,
    .highlight--negative_most {
        background-color: var(--color_background_overide, hsl(0, 70%, 45%));
        color: var(--color_text_overide, hsl(0, 0%, 100%));
        --color_icon: var(--color_text_overide, hsl(0, 0%, 100%));
        filter: var(--color_adjustment);
    }

    .highlight--warning {
        background-color: var(--color_background_overide, var(--color_background_warning));
        color: var(--color_text_overide, hsl(0, 0%, 0%));
        --color_icon: var(--color_text_overide, hsl(0, 0%, 0%));
        filter: var(--color_adjustment);
    }

    .highlight--focus {
        background-color: var(--color_background_overide, var(--color_focus));
        color: var(--color_text_overide, hsl(0, 0%, 100%));
        --color_icon: var(--color_text_overide, hsl(0, 0%, 100%));
        filter: var(--color_adjustment);
    }

    .highlight--asset {
        background-color: hsl(215, 100%, 75%);
        --color_icon: var(--color_text_with_background_dark);
        color: var(--color_text_with_background_dark);
    }

    .highlight--liability {
        background-color: hsl(35, 100%, 65%);
        --color_icon: var(--color_text_with_background_dark);
        color: var(--color_text_with_background_dark);
    }

    .highlight--income {
        background-color: hsl(150, 80%, 70%);
        --color_icon: var(--color_text_with_background_dark);
        color: var(--color_text_with_background_dark);
    }

    .highlight--expenditure {
        background-color: hsl(0, 95%, 75%);
        --color_icon: var(--color_text_with_background_dark);
        color: var(--color_text_with_background_dark);
    }

    .highlight--portfolio_item {
        background-color: hsl(179, 67%, 28%, 30%);
    }

    .highlight--reserve {
        background-color: hsl(0, 0%, 75%);
        --color_icon: var(--color_text_with_background_dark);
        color: var(--color_text_with_background_dark);
    }

    .highlight--budget {
        background-color: var(--color_background_budget);
    }

/* ====== TEXT ====== */

    p {
        margin: 0;
    }

    .ParagraphStandard :is(p, ul, ol) {
        margin-block-end: calc(var(--def_spacing) * 2) !important;
    }

    .TextWeightStandard {font-weight: 400;}

    .TextOperator {
        font-size: 1.3rem;
        font-weight: bold;
        color: var(--color_text_operator, hsl(216, 19%, 35%));
    }

    .--secondary_data {
        font-size: .8rem;
        font-weight: 400;
    }

    .TextSizeStandard {font-size: 1rem;}
    .TextSizeLarge {font-size: 1.3rem;}
    .TextSizeExtraLarge {font-size: 2rem;}

    .--text_decoration_none {text-decoration: none;}

    .TextNoWrap {white-space:nowrap;}
    .TextWhiteSpaceWrap {white-space:normal;}
    .TextWhiteSpacePreWrap {white-space:pre-wrap;}

    .TextAlignLeft {text-align: left;}
    .TextAlignCenter {text-align: center;}
    .TextAlignRight {text-align: right;}

    .--text_wrap_balanced {
        text-wrap: balance;
    }

    .Unselectable {
        user-select: none;
        pointer-events: none;
    }

    .Ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    mark {
        background-color: transparent;
        color: inherit;
    }

    .InLineTextSpacing {
        padding: 2px;
        margin: -2px;
    }

/* ====== GENERIC GRID ====== */

    .grid_table {
        display: block;
        flex-direction: column;
        gap: var(--def_spacing);
        width: clamp(
            var(--content-width-min),
            var(--content-width-required, var(--content-width-optimal)),
            100%
        );
    }

    .grid_table__row_group {
        display: var(--grid_row_group_display, block);
        overflow: hidden;
        border-radius: var(--grid_row_group_border_radius);
    }

    .grid_table__spacer {
        height: calc(var(--def_spacing) * 2);
    }

    .grid_table__row {
        display: var(--grid_row_display, grid);
        grid-template-areas: var(--row_template_area);
        grid-auto-columns: max-content;
        grid-template-columns: var(
            --grid_row_template_columns,
            max-content 1fr min-content
        );
        background-color: var(--grid_table_row_bg_override, var(--grid_table_row_bg));
    }

    .grid_table__row--centered {
        justify-content: center;
    }

    .grid_table__row--group {
        --grid_table_row_bg: var(
            --color_background_card_group_heading,
            hsla(210, 15%, 95%, 1)
        );
        --row_template_area: var(--row_group_template);
        --color_bg_clickable: var(--color_background_clickable_section_heading);
    }

    .grid_table__cell {
        grid-area: var(--grid_cell_area_override, var(--grid_cell_area));
        padding: var(--grid_cell_padding_override, var(--def_spacing));
        background-color: var(--grid_table_row_bg);
        border-radius: var(
            --grid_cell_radius_override,
            var(--grid_cell_radius_tl, 0) var(--grid_cell_radius_tr, 0) var(--grid_cell_radius_br, 0) var(--grid_cell_radius_bl, 0)
        );
    }

    .grid_table__cell:empty {
        --grid_cell_padding_override: 0;
    }

    .grid_table__cell--icon {
        --grid_cell_area: icon;
        text-align: center;
        width: 4ch;
        align-content: var(--grid_table_cell_vertical_position);
    }

    .grid_table__cell--menu {
        --grid_cell_area: menu;
        width: 3rem;
        padding-inline: 0;
        display: var(--grid_cell_display, flex);
        justify-content: center;
        align-items: var(--grid_cell_menu_aligment, flex-start);
    }

    .grid_table__cell--drag {
        --grid_cell_padding_override: var(--def_spacing);
        --grid_cell_area: drag;
        width: 4ch;
        justify-content: center;
        text-align: center;
    }

    @media only screen and (min-width: 110ch) {


        #id_content .grid_table {
            --grid_row_group_display: table-row-group;
            --grid_row_display: table-row;
            --grid_table_row_bg_override: none;
            --grid_cell_display: table-cell;
            --grid_cell_area_override: auto;
            --grid_cell_padding_override: var(--def_spacing);
            display: table;
            border-collapse: collapse;
            width: min(100%, 150ch);
        }

        .grid_table__cell {
            /* Needed for borders to show on Firefox */
            background-clip: padding-box;
        }

        .grid_table__row--group :where(
            .grid_table__cell:nth-last-child(2),
            .grid_table__cell--drag,
        ) {
            --grid_cell_radius_tr: var(--standard_border_radius);
        }

        .grid_table__row--group .grid_table__cell--icon {
            --grid_cell_radius_tl: var(--standard_border_radius);
        }

        #id_content .grid_table__cell--icon {
            padding: 0;
        }

        #id_content .grid_table__cell--menu {
            text-align: center;
        }

        .Draggable .grid_table__cell--drag {
            --drag_point_display: table-cell;
        }

        .Draggable .grid_table__cell:nth-last-child(2) {
            --grid_cell_radius_override: 0;
        }

        /* Safari 9+ */
        /* https://browserstrangeness.bitbucket.io/css_hacks.html#safari */
        /* https://stackoverflow.com/questions/16348489/is-there-a-css-hack-for-safari-only-not-chrome */
        @supports (-webkit-hyphens:none) {

            #id_content .grid_table__row_group--items {
                border-bottom: var(--default_border_line_heavy);
            }

            .grid_table__row--group {
                border-top: var(--default_border_line);
            }

        }

    }


/* ====== GRID TRANSACTIONS ====== */


    .grid_table__row--transaction {
        --grid_table_row_bg: var(--color_background_card);
        --grid_cell_padding_override: 0;
        --grid_cell_menu_aligment: center;
        --grid_row_template_columns: auto 1fr auto auto;
        grid-template-rows: auto auto 1fr;
        padding: var(--def_spacing) 0 0 var(--def_spacing);
        row-gap: calc(var(--def_spacing) / 2);
        column-gap: var(--def_spacing);
    }

    .grid_table__row--section {
        display: var(--grid_row_display, flex)
    }

    .grid_table__row_group--items {
        border-top: 2px solid var(--color_background_body);
    }

    .grid_table__row_group:not(.grid_table__row_group--items) + .grid_table__row_group--items {
        border-top: none;
    }

    .grid_table__row--transaction_date {
        --grid_cell_padding_override: 0;
        padding-right: 0;
    }

    .grid_table__row--uncategorized_transaction {
        row-gap: var(--def_spacing);
    }

    .grid_table__cell--month_year {
        --grid_cell_padding_override: 0;
    }

    .grid_table__cell--checkbox {
        --grid_cell_padding_override: 0;
        grid-row: 1 / -1;
        grid-column: 1;
        display: var(--grid_cell_checkbox_display, none);
        vertical-align: top;
        text-align: center;
        min-width: 3ch;
        overflow: hidden;
        margin-top: calc(0rem - var(--def_spacing));
        margin-left: calc(0rem - var(--def_spacing));
        margin-bottom: calc(0rem - var(--def_spacing));
    }

    .grid_table__cell--account {
        overflow: hidden;
        grid-column: 2;
        min-width: 10ch;
    }

    .grid_table__cell--account_placeholder {
        display: var(--grid_cell_display, none);
    }

    .grid_table__cell--category {
        grid-column: 2;
        min-width: 15ch;
    }

    .grid_table__cell--transaction_note {
        display: var(--grid_cell_display, flex);
        grid-column: 2;
        min-width: 15ch;
        padding-left: var(--grid_cell_padding_left, 2rem);
        word-break: break-word;
    }

    .grid_table__cell--uncategorized_category,
    .grid_table__cell--uncategorized_transaction_note {
        grid-column: 2 / 6;
        min-width: 15ch;
        padding-right: var(--def_spacing);
    }

    .grid_table__cell--uncategorized_transaction_note {
        padding-left: var(--grid_cell_padding_left, 2rem);
        padding-bottom: var(--def_spacing);
    }

    .grid_table__cell--amount {
        grid-row: 1;
        grid-column: 3 / 6;
        text-align: right;
        padding-right: var(--def_spacing);
    }

    .grid_table__cell--amount_split {
        grid-column: 3 / 6;
        text-align: right;
        padding-right: var(--def_spacing);
    }

    .grid_table__cell--transaction_tags {
        order: 1000000;
        grid-column: 2 / 4;
        display: var(--grid_cell_display, flex);
        padding-left: var(--grid_cell_padding_left, 1.5rem);
        padding-bottom: var(--def_spacing);
    }

    .grid_table__cell--transaction_indicators {
        order: 1000000;
        grid-column: 4;
        display: var(--grid_cell_display, flex);
        justify-content: end;
        padding-bottom: var(--def_spacing);
    }

    .grid_table__row--transaction .grid_table__cell--menu {
        --grid_cell_area: .;
        order: 1000000;
        grid-column: 5;
        --grid_cell_padding_override: var(--def_spacing);
    }

    .grid_table__cell--transaction_indicators:empty + .grid_table__cell--transaction_tags {
        padding-left: var(--grid_cell_padding_left, 1.5rem);
    }

    .grid_table__indicator_wrapper {
        display: flex;
        gap: var(--def_spacing);
        align-items: center;
        place-content: flex-end;
    }

    .grid_table__cell--transaction_note:empty,
    .grid_table__cell--transaction_indicators:empty,
    .grid_table__cell--transaction_tags:empty {
        --grid_cell_display: none;
    }

    .grid_table__row--transaction_entry_group {
        display: var(--grid_row_entry_group_display, contents);
    }

    @media only screen and (min-width: 110ch) {

        #id_content .grid_table__row--transaction {
            --grid_cell_padding_override: var(--def_spacing);
            --grid_cell_padding_left: var(--def_spacing);
            --grid_row_entry_group_display: table-row;
        }

        #id_content .grid_table__row--transaction_date {
            --grid_cell_padding_override: var(--def_spacing);
        }

        #id_content .grid_table__row_group.grid_table__row--transaction {
            --grid_row_display: table-row-group;
        }

        #id_content .grid_table__row--transaction.clickable--section::before {
            display: none;
        }

        #id_content .grid_table__cell.clickable--section {
            --focus_indicator_width: .25rem;
        }

        #id_content .clickable--secondary_target::before {
            display: block;
        }

        #id_content .jsSelectAllGroup {
            --grid_cell_checkbox_display: var(--transactions_cell_checkbox_display);
        }

        #id_content .grid_table__row--transaction_entry_group:not(:first-child) .grid_table__cell:not(.grid_table__cell--account_placeholder) {
            border-top: 1px solid var(--color_background_body);
        }

        #id_content .grid_table__cell--month_year {
            --grid_cell_padding_override: var(--def_spacing);
            border-bottom: var(--default_border_line);
        }

        #id_content :where(
            .grid_table__cell--transaction_note,
            .grid_table__cell--transaction_indicators,
            .grid_table__cell--transaction_tags,
        ):empty {
            --grid_cell_display: table-cell;
        }

    }

/* ====== ACCOUNT BALANCE HISTORY DATA ====== */

    .account_balance_history__row {
        justify-items: stretch;
        gap: var(--def_spacing);
        padding-block: calc(var(--def_spacing) / 2);
    }

    .account_balance_history__revaluations {
        visibility: var(--account_balance_history_revaluations_visibility, visible);
    }

    .account_balance_history__uneditable {
        display: var(--account_balance_history_uneditable_display, flex);
    }

    .account_balance_history__wrapper:has(.account_balance_history__edit_field) {
        --account_balance_history_revaluations_visibility: hidden;
    }

    .account_balance_history__row:has(.account_balance_history__edit_field) {
        --account_balance_history_uneditable_display: none;
    }

    @media only screen and (min-width: 70ch) {

        .account_balance_history__row:has(.account_balance_history__edit_field) {
            --account_balance_history_edit_field_date_column: 2;
            --account_balance_history_edit_field_amount_column: 3;
            --account_balance_history_edit_menu_rows: 1;
        }

    }


/* ====== DATE SECTION HEADER ====== */

    .section_divider {
        margin: 0 calc(var(--def_spacing) * 2);
        padding-top: calc(var(--def_spacing) * 2);
        border-top: 1px solid var(--color_text_section_divider);
        color: var(--color_text_section_divider);
    }

    .section_divider:first-child {
        padding-top: var(--def_spacing);
        border-top: none;
    }


/* ====== TRANSACTION FORM ====== */

    .transaction_form--is_multicurrency {
        --transaction_form_grid_span: 1;
        --transaction_form_split_amount_display: flex;
        --transaction_form_currency_display: inline-flex;
        --transaction_form_balance_icon_display: none;
    }

    .transaction_form--balancing_row_is_multicurrency {
        --transaction_form_balancing_icon_visibility: hidden;
    }

    .transaction_form:has(.transaction_form__row:nth-child(3)) {
        --transaction_form_grid_span: 1;
        --transaction_form_split_amount_display: flex;
        --transaction_form_split_note_display: flex;
        --transaction_form_non_split_element_display: none;
    }

/* ====== CATEGORIZATION FORM ====== */

    .categorization_rule_amount_wrapper:has(option:checked[value=""]) {
        --categorization_amount_input_display: none;
    }


/* ====== TAGS ====== */

    .custom_tag {
        --color_icon_overide: var(--tag_text_color, var(--color_text_with_background));

        font-weight: normal;
        display: flex;
        align-items: center;
        text-align: center;

        border-radius: var(--modified_border_radius, var(--standard_border_radius));
        padding: .2rem;
        padding-inline: .3rem;

        border: 1px solid var(--tag_border_color_overide, var(--tag_border_color, transparent));
        background-color: var(--tag_back_color_overide, var(--tag_back_color, hsl(0, 0%, 49%)));
        color: var(--tag_text_color, var(--color_text_with_background));
        opacity: var(--tag_opacity, .6);

        font-size: .9rem;
    }

    .custom_tag--transaction {--tag_back_color: hsl(220, 90%, 40%);}
    .custom_tag--budget {--tag_back_color: hsl(21, 89%, 52%);}
    .custom_tag--beta {--tag_back_color: hsl(21, 89%, 52%);}
    .custom_tag--synced {--tag_back_color: hsl(271, 43%, 44%);}
    .custom_tag--synced_altered {--tag_back_color: hsl(220, 90%, 40%);}
    .custom_tag--uncategorised {--tag_back_color: hsl(271, 43%, 44%);}
    .custom_tag--archived {--tag_back_color: hsl(0, 0%, 49%);}
    .custom_tag--new_account {--tag_back_color: hsl(21, 89%, 52%);}
    .custom_tag--portfolio {--tag_back_color: hsl(179, 67%, 28%);}
    .custom_tag--commented {--tag_back_color:hsl(180, 58%, 45%);}
    .custom_tag--not_commented {--tag_back_color:hsl(215, 20%, 35%);}
    .custom_tag--planned {--tag_back_color:hsl(210, 90%, 55%);}
    .custom_tag--in_progress {--tag_back_color:hsl(270, 78%, 65%);}
    .custom_tag--completed {--tag_back_color:hsl(165, 100%, 30%);}
    .custom_tag--not_reviewed {--tag_opacity: .3;}
    .custom_tag--declined {--tag_back_color:hsl(0, 70%, 45%);}
    .custom_tag--reconnect {--tag_back_color:hsl(0, 70%, 45%);}


    .tag--payee {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-inline: var(--def_spacing);
        background-color: var(--color_background_payee_tag, hsl(0, 0%, 94%));
        border-radius: var(--standard_border_radius);
    }


    .transaction_tags__tag {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-inline: var(--def_spacing);
        border: var(--border_tag, 1px solid hsl(0, 0%, 80%));
        border-radius: var(--standard_border_radius);
        box-shadow: var(--tag_box_shadow);
    }

/* ====== GENERAL ====== */

    .Indent {padding-left: 2rem;}
    .IndentIcon {padding-left: calc(2rem + var(--def_spacing));}

    .--resize_auto {resize: auto;}
    .--resize_none {resize: none;}

    .--width_full {width: 100%;}
    .--width_optimal_auto {--content-width-optimal : auto;}
    .--width_min_content {width: min-content;}
    .--width_fit_content {width: fit-content;}
    .--width_fixed1 {width: 3rem;}

    .--width_min1,
    .--width_min1 input {
        min-width: 6rem;
    }
    .--width_min2 {min-width: 20ch;}


/* ====== DISABLED ====== */

    .Disabled {
        --box_shadow_button: none;
        --box_shadow_input: none;
        --button_group_button_border_left: 1px solid var(--color_text_button_disabled, hsl(0, 0%, 100%));
        --color_text_button: var(--color_text_button_disabled, hsl(0, 0%, 100%));
        --color_background_button_overide: var(--color_background_button_disabled, hsl(0, 0%, 85%));
        --color_background_input: var(--color_background_input_disabled);
        --custom_button_opacity: .5;
        --input_checkbox_back_color_override: hsl(0, 0%, 60%);
        --input_bar_display: none;
        --color_icon: var(--color_text_na);
        --color_text_overide: var(--color_text_na);
        color: var(--color_text_na) !important;
        pointer-events: none;
    }

    .Disabled a {
        --color_icon: var(--color_text_na);
        color: var(--color_text_na) !important;
    }


/* ====== MULTI SELECT ======= */


    .jsSelectAllGroup:has(
        :where(
            .multi_select_mode__button,
            .multi_select_mode__item
        ) :checked
    ) {
        --multi_select_item_display: flex;
        --multi_select_mode_button_border_radius: 0;
        --multi_select_mode_button_bg_color: hsl(180, 58%, 45%);
        --multi_select_item_icon_display: none;
        --grid_cell_icon_display: block;
        --grid_cell_checkbox_display: block;
        --transactions_cell_checkbox_display: table-cell;
        --grid_cell_budget_padding_inline: var(--def_spacing);

    }

    .multi_select_mode__button {
        --min_width_button: 2.5rem;
        border-radius: var(--multi_select_mode_button_border_radius, 0 0 0 var(--standard_border_radius));
    }

    .multi_select_mode__item {
        display: var(--multi_select_item_display, none);
    }


/* ====== DRAGING ITEMS ======= */

    .Draggable {
        --drag_point_display: flex;
    }

    .Draggable [draggable],
    .Draggable [draggable] a {
        cursor: move;
    }

    .DragIcon {
        display: var(--drag_point_display, none);
        touch-action: none;  /*Prevents scrolling on touch devices */
        background-color: var(--bg_color_drag_icon, hsl(20, 90%, 50%));
        color: hsl(0, 0%, 100%);
        --color_icon: hsl(0, 0%, 100%);
    }

    .DragCurrent {
        border-radius: var(--standard_border_radius);
        box-shadow:
            0 0px 14px 0 hsla(230, 23%, 30%, 0.1),
            0 0 20px 0 hsl(207, 90%, 54%);
        --bg_color_drag_icon: hsl(207, 90%, 54%);

    }

    .drag_mode--active,
    .drag_mode--active ~ .custom_popover{
        --tooltip_display: none;
    }

    .drag_mode--active .drag_mode_item_collapse {
        display: none !important;
    }


/* ====== IMAGE LOADER ====== */

    .ImageLoader {
        position: absolute;
        width: 100%;
        margin-top: var(--def_spacing);
    }


/* ====== LOGIN ====== */

    #id_body:has(#id_card_login) #id_login {
        display: none;
    }

    #id_text_sign_up_progress:before {
        animation-name:sign_up_progress;
        animation-delay: 1s;
        animation-duration: 15s;
        animation-fill-mode: forwards;
        content: "";
    }

    @keyframes sign_up_progress {
        0% {content: "Verifying signup";}
        33% {content: "Creating profile";}
        66% {content: "Creating demo data";}
        100% {content: "Finalizing profile creation";}
    }


/* ====== METER BAR ====== */

    .meter_bar__wrapper {
        --color_text: hsl(0, 0%, 0%);
        --color_icon_overide: var(--color_text);
        z-index: 1;
        position: relative;
        color: var(--color_text);
        background-color: var(--meter_bar_bg_color, transparent);
        contain: layout style paint;
    }

    .meter_bar__wrapper::before {
        position: absolute;
        left: 0;
        content: '';
        height: 100%;
        background-color: var(--meter_bar_used_color, var(--meter_bar_used_color_good));
        width: 100%;
        z-index: -1;
        transform-origin: left;
        scale: min(var(--meter_bar_used_size, 0), 1) 1;
        transition: scale .4s ease-out;
    }

    .meter_bar--asset {
        --meter_bar_bg_color: hsl(205, 100%, 70%);
        --meter_bar_used_color: hsl(205, 100%, 50%);

    }

    .meter_bar--liability {
        --meter_bar_bg_color: hsl(40, 100%, 80%);
        --meter_bar_used_color: hsl(40, 100%, 50%);
    }

    .meter_bar--good {
        --meter_bar_used_color: var(--meter_bar_used_color_good);
    }

    .meter_bar--warn {
        --meter_bar_used_color: var(--meter_bar_used_color_warn);
    }

    .meter_bar--warn_alt {
        --meter_bar_used_color: var(--meter_bar_used_color_warn_alt);
    }

    .meter_bar--bad {
        --meter_bar_used_color: var(--meter_bar_used_color_bad);
    }

    .meter_bar--worst {
        --meter_bar_used_color: var(--meter_bar_used_color_worst);
    }

    .meter_bar--budget {
        --meter_bar_bg_color: var(--color_background_budget_meter, hsl(225, 35%, 92%));
        display: flex;
        height: .5rem;
        border-radius: var(--standard_border_radius);
        border: var(--meter_bar_budget_border);
        justify-content: end;
        align-items: center;
        padding: 0 var(--def_spacing);
    }

    .meter_bar--credit_limit {
        display: flex;
        gap: .25rem;
        font-size: .75rem;
        min-width: 25ch;
        min-height: 2rem;
        border-radius: var(--standard_border_radius);
        border: var(--default_border_line);
        justify-content: space-between;
        align-items: center;
        padding: 0 var(--def_spacing);
        contain: layout style paint;
    }


/* ====== HISTORIC BUDGET METER ====== */

    .historic_budget_meter--active {
        --historic_budget_content : '';
    }

    .historic_budget_meter {
        position: relative;
    }

    .historic_budget_meter::after {
        position: absolute;
        content: var(--historic_budget_content);
        bottom: 0;
        left: 0;
        width: calc(var(--historic_budget_bar_size) - 1px);
        height: 2px;
        border-radius: 1px 0 0 1px;
        background-color: var(--historic_budget_color, var(--color_historic_budget_good));
    }

    .historic_budget_meter--warn {
        --historic_budget_color: var(--color_historic_budget_warn);
    }

    .historic_budget_meter--bad {
        --historic_budget_color: var(--color_historic_budget_bad);
    }

    .historic_budget_meter--worst {
        --historic_budget_color: var(--color_historic_budget_worst);
    }

/* ====== HEATMAP ====== */

    .heatmap--positive {
        background-color: hsl(var(--color_heatmap_positive), var(--heatmap_opacity));
    }

    .heatmap--negative {
        background-color: hsl(var(--color_heatmap_negative), var(--heatmap_opacity));
    }


/* ====== SPARKLINE ====== */

    .--animate_sparkline {
        --sparkline_animation_name: animateExpand;
    }

    .sparkline__wrapper {
        --sparkline_height: var(--sparkline_height_override, 2.5rem);
        position: relative;
        display: flex;
        height: var(--sparkline_height);
        min-width: 5ch;
    }

    .sparkline__wrapper:before {
        --sparkline_bar_margin_modifier: calc(-1 * var(--sparkline_min));
        --sparkline_bar_margin: calc(
            (var(--sparkline_height) - 1px)
            * (var(--sparkline_bar_margin_modifier) / max(var(--sparkline_range), 1))
        );
        position: absolute;
        content : '';
        width: 100%;
        height: 1px;
        align-self: flex-end;
        margin-bottom: var(--sparkline_bar_margin);
        background-color: hsl(215, 20%, 35%);

    }

    .sparkline__bar {
        --sparkline_bar_radius: 20%;
        --sparkline_bar_margin_modifier: calc(-1 * var(--sparkline_min));
        --sparkline_bar_margin: calc(
            var(--sparkline_height)
            * (var(--sparkline_bar_margin_modifier) / var(--sparkline_range))
        );
        content: '';
        background-color: var(--color_background_sparkline_bar, var(--color_text_income));
        height: var(--sparkline_bar_height);
        min-width: 1px;
        flex-grow: 1;
        margin-right: 1px;
        margin-bottom: var(--sparkline_bar_margin);
        align-self: var(--sparkline_bar_position, flex-end);
        border-radius: var(--sparkline_bar_radius) var(--sparkline_bar_radius) 0 0;
        animation: var(--sparkline_animation_name) .5s;
        animation-delay: calc(var(--sparkline_animation_order) * 5ms);
        transform-origin: var(--sparkline_animation_origin, bottom);
    }

    .sparkline__bar--negative {
        --sparkline_bar_position: flex-start;
        --color_background_sparkline_bar: var(--color_text_expenditure);
        --sparkline_bar_margin_modifier: var(--sparkline_max);
        --sparkline_animation_origin: top;
        margin-top: var(--sparkline_bar_margin);
        margin-bottom: 0;
        border-radius: 0 0 var(--sparkline_bar_radius) var(--sparkline_bar_radius);
    }

    .sparkline__bar--balance_sheet {
        --color_background_sparkline_bar: var(--color_text_asset);
    }

    .sparkline__bar--balance_sheet.sparkline__bar--negative {
        --color_background_sparkline_bar: var(--color_text_liability);
    }

    .sparkline__bar--vertical_line::after {
        content: '';
        position: fixed;
        top: 0;
        right: var(--sparkling_vertical_line_position);
        height: 100%;
        border-right: 2px dashed var(--color_text_default);
    }


    @keyframes animateExpand {
        from {
            transform: scaleY(0);
        }
    }

/* ====== BACKGROUND IMAGE ====== */

    .bg_image {
        background-image: var(--bg_image_url, none);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

/* ====== SPINNER ====== */

    .loading__container:has(.loading__loader) .loading__complete {
        display: none;
    }

    .spinner_wrapper {
        display: flex;
        height: var(--icon_size);
        width: var(--icon_size);
        align-items: center;
    }

    .spinner_item,
    .spinner_wrapper::before,
    .spinner_wrapper::after {
        content : '';
        background-color: var(--color_icon_overide, var(--color_icon, hsl(0, 0%, 0%)));
        border-radius: 50%;
        flex-grow: 1;
        aspect-ratio: 1;
        animation: animationSpinner .8s linear infinite;
    }

    .spinner_item {
        animation-delay: .4s;
    }

    @keyframes animationSpinner {
        from {
            transform: scale(.1);
        }
        50% {
            transform: scale(1);
            opacity: .5;
        }
        to {
            transform: scale(.1);
        }
    }


/* ====== CHROME DATE PICKER ====== */

    @media (prefers-color-scheme: dark) {

        body:not(.theme--dark) input::-webkit-calendar-picker-indicator {
            filter: invert(1);
        }

    }

    @media (prefers-color-scheme: light) {

        body.theme--dark input::-webkit-calendar-picker-indicator {
            filter: invert(1);
        }

    }

/* ====== MATHS ====== */


    .math__bracket_left,
    .math__bracket_right {
        content: '';
        width: calc(var(--def_spacing) * 2);
        min-width: calc(var(--def_spacing) * 2);
        align-self: stretch;
        border: 1px solid hsl(0, 0%, 0%);
    }

    .math__bracket_left {
        border-right: none;
        border-radius: var(--standard_border_radius) 0 0 var(--standard_border_radius);
    }
    .math__bracket_right {
        border-left: none;
        border-radius:  0 var(--standard_border_radius) var(--standard_border_radius) 0;
    }




/* ====== MODIFIERS - STICKY ====== */

    .--sticky {
        --position: sticky;
        z-index: 3; /* ====== Needed for top level sticky elements ====== */
        position: sticky;
        top: calc(
            var(--sticky_top,  0px)
            + var(--sticky_top_adjustment, 0px)
        );
    }

    .--sticky_bottom,
    .--sticky_left,
    .--sticky_right {
        --position: sticky;
        position: sticky;
    }

    .--sticky_main {--sticky_top: -1rem;}
    .--sticky_bottom {bottom: var(--sticky_position_bottom, 0);}
    .--sticky_left {left: 0;}
    .--sticky_right {right: 0;}

    /* Needed for position sticky bug in Safari */
    /* Safari 9+ */
    /* https://browserstrangeness.bitbucket.io/css_hacks.html#safari */
    /* https://stackoverflow.com/questions/16348489/is-there-a-css-hack-for-safari-only-not-chrome */
    /* @supports (-webkit-hyphens:none) { */
        /* th {
            position: initial;
        }
        .--sticky_main th {
            top: initial;
        } */
    /* } */

/* ====== MODIFIERS - Z-INDEX ====== */

    .ZIndexMax,
    .--z_index_max {z-index: 10000;}

    .--z_index_1 {
        z-index: 1;
    }


/* ====== MODIFIERS - DISPLAY ====== */

    .--contain_visibility {
        content-visibility: auto;
        contain-intrinsic-size: var(--containment_width, 1px) var(--containment_height, 50rem);
    }
    .--contain_strict {contain: strict;}
    .--contain_content {contain: content;}

    .Hidden,
    .--hidden {display: none !important;}

    @media only screen and (max-width: 35rem) {
        .HiddenSmallScreen {display: none !important;}
    }

/* ====== MODIFIERS - MARGIN ====== */

    .--outline_spacing {
        padding: .25rem;
        margin: -.25rem;
    }

    .--margin {margin: var(--def_spacing);}
    .--margin2 {margin: calc(var(--def_spacing) * 2);}
    .--margin_t {margin-top: var(--def_spacing);}
    .--margin_t2 {margin-top: calc(var(--def_spacing) * 2);}
    .--margin_t_auto {margin-top: auto;}
    .--margin_b {margin-bottom: var(--def_spacing);}
    .--margin_b2 {margin-bottom: calc(var(--def_spacing) * 2);}
    .--margin_l {margin-left: var(--def_spacing);}
    .--margin_l_auto {margin-left: auto;}
    .--margin_r {margin-right: var(--def_spacing);}
    .--margin_r_auto {margin-right: auto;}
    .--margin_block_auto {margin-block: auto;}

/* ====== MODIFIERS - PADDING ====== */

    .--pad,
    .ContainerPadding {padding: var(--def_spacing);}

    .--pad2 {padding: calc(var(--def_spacing) * 2);}
    .--pad_inline_half {padding: var(--def_spacing) calc(var(--def_spacing) * .5);}
    .--pad_block_half {padding: calc(var(--def_spacing) * .5) var(--def_spacing) ;}

    .--pad_offset_right {
        padding: var(--def_spacing);
        padding-right: calc(var(--def_spacing) * 1.5);
    }

    .--pad_none {padding: 0}
    .--pad_t {padding-top: calc(var(--def_spacing));}
    .--pad_t2 {padding-top: calc(var(--def_spacing) * 2);}
    .--pad_b {padding-bottom: calc(var(--def_spacing));}
    .--pad_b2 {padding-bottom: calc(var(--def_spacing) * 2);}
    .--pad_l {padding-left: var(--def_spacing)}
    .--pad_l2 {padding-left: calc(var(--def_spacing) * 2);}
    .--pad_r {padding-right: var(--def_spacing);}
    .--pad_r2 {padding-right: calc(var(--def_spacing) * 2);}

    .PaddingTable {padding: .2rem .5rem .2rem .5rem}


/* ====== MODIFIERS - BORDER SHAPE ====== */

    .--border_round {border-radius: 50%;}
    .--border_rounded {border-radius: var(--standard_border_radius);}

    .--border_rounded_top,
    #id_combo_box_list dt {
        border-radius: var(--standard_border_radius) var(--standard_border_radius) 0 0;
    }
    .--border_rounded_top_right {border-radius: 0 var(--standard_border_radius) 0 0;}
    .--border_rounded_top_left {border-radius: var(--standard_border_radius) 0 0 0;}
    .--border_rounded_bottom {border-radius: 0 0 var(--standard_border_radius) var(--standard_border_radius);}
    .--border_rounded_bottom_left {border-radius: 0 0 0 var(--standard_border_radius);}
    .--border_rounded_bottom_right {border-radius: 0 0 var(--standard_border_radius) 0;}
    .--border_rounded_right {border-radius: 0 var(--standard_border_radius) var(--standard_border_radius) 0;}
    .--border_rounded_left {border-radius: var(--standard_border_radius) 0 0 var(--standard_border_radius);}
    .--border_rounded_none {border-radius: 0;}

/* ====== MODIFIERS - BORDER ====== */

    .inner_border__item {
        border-top: var(--default_border_line);
        border-left: var(--default_border_line);
        margin-top: -1px;
        margin-left: -1px;
    }

    .--border {
        border: var(--default_border_line);
    }

    .--border2 {
        border: var(--default_border_line2);
    }

    .--border_top,
    .CardSection:not(:first-child) {
        --border_top_table_cell: var(--default_border_line);
        border-top: var(--default_border_line);
    }

    .--border_top_heavy {
        border-top: var(--default_border_line_heavy);
    }

    .--border_left,
    .CardSectionHorizontal:not(:first-child) {
        border-left: var(--default_border_line);
    }

    .--border_left_heavy {
        border-left: var(--default_border_line_heavy);
    }

    .--border_bottom {
        --border_bottom_table_cell: var(--default_border_line);
        border-bottom: var(--default_border_line);
    }

    .--border_bottom_heavy {
        border-bottom: var(--default_border_line_heavy);
    }

    .--border_right {border-right: var(--default_border_line);}


/* ====== MODIFIERS - WRAP, GROW, SHRINK ====== */

    .--flex_wrap {flex-wrap: wrap;}
    .--flex_wrap_reverse {flex-wrap: wrap-reverse;}

    .--flex_grow {flex-grow: 1;}
    .--flex_shrink {flex-shrink: 1;}
    .--flex_no_shrink {flex-shrink: 0;}


/* ====== MODIFIERS - GAP ALIGN JUSTIFY ====== */

    .--gap {gap: var(--def_spacing);}
    .--gap2 {gap: calc(var(--def_spacing) * 2);}
    .--gap_col {column-gap: var(--def_spacing);}

    .--align_start {align-items: flex-start;}
    .--align_end {align-items: flex-end;}
    .--align_stretch {align-items: stretch;}

    .--justify_start {justify-content: start;}
    .--justify_end {justify-content: end;}
    .--justify_space_between {justify-content: space-between;}
    .--justify_space_evenly {justify-content: space-evenly;}
    .--justify_stretch {justify-content: stretch;}


/* ====== MODIFIERS - COLOR ====== */

    .--clr_bg__inherit {
        background-color: inherit;
    }

    .--clr_bg__body {
        background-color: var(--color_background_body);
    }

    .--clr_bg__default {
        background-color: var(--color_background_card);
    }

    .--clr_bg__nested_row {
        background-color: var(--color_background_table_row_2, hsl(0, 0%, 96%))
    }

    .--clr_bg__nested_row2 {
        --bg_color_table_row: var(--color_background_table_row_3, hsl(0, 0%, 93%));
        background-color: var(--color_background_table_row_3, hsl(0, 0%, 93%));
    }

    .--clr_bg_txt__header_row {
        background-color: var(--color_background_table_heading, hsl(225, 35%, 93%));
        color: var(--color_text_table_heading, hsl(216, 19%, 35%));
    }

    .--clr_bg__group_row {
        background-color: var(--color_background_card_group_heading, hsla(210, 15%, 95%, 1));
    }

    .--clr_bg__transparent {background-color: transparent;}

    .--clr_bg__bar2 {
        background-color: var(--color_background_card_bottom_bar, hsl(215, 25%, 90%));
    }

    .--clr_bg__alternate:nth-child(even) {
        background-color: var(--color_background_chart_tooltip_row_odd, hsl(0, 0%, 95%));
    }



    /* Use https://codepen.io/sosuke/pen/Pjoqqp to convert a hex color into a filter for icons */

    [class*='TextColor'] {
        color: var(--color_text_overide, var(--color_text));
        --color_icon: var(--color_text);
    }

    .TextColorCardHeading {--color_text: var(--color_text_card_heading);}
    .TextColorDefinedTerm {--color_text: var(--color_text_defined_term);}
    .TextColorGroup {--color_text: var(--color_text_group);}
    .TextColorOperator {--color_text: var(--color_text_card_heading);}
    .TextColorPrimary {--color_text: var(--color_text_primary);}

    .TextColorInfo {--color_text: var(--color_text_info);}

    .TextColorInfoImportant {--color_text: var(--color_text_info_important, hsl(280, 100%, 35%))}
    .TextColorNA {--color_text : var(--color_text_na);}
    .TextColorNAHeading {--color_text : var(--color_text_na_heading);}

    /* Must be below the other options in order to override */
    .TextColorWithBackground {--color_text: var(--color_text_with_background);}

    .TextColorWithLightBackground {
        --color_icon: var(--color_text_with_background_dark);
        color: var(--color_text_with_background_dark);
    }

    .TextColorWarning {--color_text: var(--color_text_warning);}
    .TextColorWarningAltenative {--color_text: var(--color_text_warning_alternative);}
    .TextColorError {--color_text: var(--color_text_error_no_background, var(--color_text_error));}

    .TextColorIncome {--color_text: var(--color_text_income);}
    .TextColorExpenditure {--color_text: var(--color_text_expenditure);}
    .TextColorAsset {--color_text: var(--color_text_asset);}
    .TextColorPortfolioItem {--color_text: var(--color_text_asset);}
    .TextColorLiability {--color_text: var(--color_text_liability);}
    .TextColorOpeningBalance {--color_text: var(--color_text_opening_balance);}

    .TextColorPortfolioItemBuy {--color_text: var(--color_text_portfolio_buy);}
    .TextColorPortfolioItemSell {--color_text: var(--color_text_portfolio_sell);}

    .TextColorAccount {--color_text: var(--color_text_defined_term);}
    .TextColorCategory {--color_text: var(--color_text_defined_term);}
    .TextColorTransaction {--color_text: var(--color_text_defined_term);}
    .TextColorForecastRule {--color_text: var(--color_text_defined_term);}

    .TextColorPositive {--color_text: var(--color_text_positive);}
    .TextColorPositiveLight {--color_text: var(--color_text_positive_light);}
    .TextColorNegative {--color_text: var(--color_text_negative);}
    .TextColorNegativeLight {--color_text: var(--color_text_negative_light);}

    .TextColorNotification {--color_text: var(--color_text_notification);}
    .TextColorGuideIndicator {--color_text: var(--color_text_guide_indicator);}


    .--shadow__nested_row {
        box-shadow: var(--box_shadow_inset_top), var(--box_shadow_inset_bottom);
    }

    .--bg_shadow_cover {
        box-shadow: 3px 0px var(--color_background_body), -13px 0px var(--color_background_body);
    }

/* ====== MODIFIERS - TEXT ====== */

    .--txt_bold {font-weight: bold;}

    .--txt_line_through {text-decoration: line-through;}

/* ====== MODIFIERS - TRANSFORMS ====== */

    .Rotate90 {transform: rotate(90deg);}
    .Rotate180 {transform: rotate(180deg);}

/* ====== ANIMATION DISABLED ====== */

    .AnimationDisabled * {
        animation: none !important;
    }

/* ====== ANIMATION FADE ====== */

    .AnimateFadeInWrapper > :not(.custom_ripple__circle),
    .AnimateFadeIn,
    .AnimateFadeOut {
        animation: var(--animation_standard_props) animateFade;
        animation-delay: calc(var(--animation_order) * 50ms);
    }

    .AnimateFadeOut {
        animation-direction: reverse;
    }

    @keyframes animateFade {
        from {opacity: 0;}
        to {opacity: 1;}
    }


/* ====== ANIMATION TRANSLATIONS ====== */

    .AnimationWrapper [style*='--animation-order'],
    .AnimationWrapper[style*='--animation-order'] {
        animation: var(--animation_pop_down);
        animation-delay: calc(var(--animation-order) * 50ms);
        transform-origin: top;
    }


    .AnimateSlideRight {
        --translate_x_to: 30rem;
        --translate_y_from: 0;
        animation: animateTranslateXY .5s ease-in-out;
    }


    .AnimateShowDownWrapper > *,
    .AnimateShowDown {
        --translate_y_from: -3rem;
        animation: var(--animation_fade_translation);
    }

    .AnimateShowLeft {
        --translate_x_from: -3rem;
        --translate_y_from: 0;
        animation: var(--animation_fade_translation);
    }

    .AnimateShowRight {
        --translate_x_from: 3rem;
        --translate_y_from: 0;
        animation: var(--animation_fade_translation);
    }

    .AnimateShowUp {
        --translate_y_from: 3rem;
        animation: var(--animation_fade_translation);
    }

    .AnimateHideUp {
        --translate_y_from: -3rem;
        animation: var(--animation_fade_translation);
        animation-direction: reverse;
    }

    .AnimateHideDownWrapper > *,
    .AnimateHideDown {
        --translate_y_from: 3rem;
        animation: var(--animation_fade_translation);
        animation-direction: reverse;
    }


    @keyframes animateTranslateXY {
        from {transform: translate(var(--translate_x_from, 0), var(--translate_y_from, 0));}
        to {transform: translate(var(--translate_x_to, 0), var(--translate_y_to, 0));}
    }


    @keyframes animateSlideVertical {
        from {transform: translateY(var(--translate_y_from, -1rem)) translateX(var(--translate_x_from, 0));}
    }


/* ====== ANIMATION SCALE ====== */

    .AnimationScaleFromLeft {
        transform-origin: left;
        animation: animateScaleFromLeft .5s ease-out;

    }

    @keyframes animateScaleFromLeft {
        from {transform: scaleX(0);}
    }


/* ====== ANIMATION ROTATE ====== */

    .AnimateRotateIn,
    .AnimateRotateOut {
        animation: var(--animation_standard_props) animateRotateIn;
    }

    .AnimateRotateOut {
        animation-name: animateRotateOut;
    }

    .AnimateRotateInfinite {
        animation-name: animateRotate;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }

    @keyframes animateRotate {
        to {transform: rotate(360deg);}
    }

    @keyframes animateRotateIn {
        from {transform: scale(0.6) rotate(-90deg);}
    }

    @keyframes animateRotateOut {
        from {transform: scale(0.6) rotate(90deg);}
    }


/* ====== ANIMATION FLASH ====== */

    .AnimateElementAttention {
        --box_shadow_attention :
            0 0 0 4px hsl(190, 100%, 50%),
            inset 0 0 0 2px hsl(190, 100%, 50%),
            inset 0 0 0 4px hsl(0, 0%, 100%);
        box-shadow: var(--box_shadow_attention);
        border-radius: var(--standard_border_radius);
        animation: animateElementAttention 2.5s ease-in-out !important;
        transform-origin: top;
        z-index: 100 !important;
        position: relative !important;
    }

    @keyframes animateElementAttention {
        39% { transform: scale3d(.9,.9,1);}
        40% { transform: scale3d(1,1,1);}
        50% { transform: scale3d(.97,.97,1);}
        60% { transform: scale3d(1,1,1);}
        70% { transform: scale3d(.98,.98,1);}
        80% {
            transform: scale3d(1,1,1);
            box-shadow: var(--box_shadow_attention);
        }
        90% {transform: scale3d(.99,.99,1);}
        100% {
            transform: scale3d(1,1,1);
            box-shadow: none;
        }
    }

/* ====== ANIMATION PULSE ====== */

    #id_loading_indicator {
        --animation_duration:2s;
        z-index: -1;
        grid-row: 1;
        position: absolute;
        width: 100vw;
        height: 100%;
        overflow: hidden;
        display: flex;
        justify-content: center;
    }


    .Loading #id_loading_indicator::before,
    .Loading #id_loading_indicator::after {
        content:'';
        background: hsl(215, 20%, 35%);
        border-radius: 100%;
        box-shadow: 0 0 0 6rem hsl(0, 0%, 50%);
        opacity: 0;
        animation: animatePulse var(--animation_duration) infinite;
    }

    .Loading #id_loading_indicator::after {
        animation-delay: calc(var(--animation_duration) / 2);
    }

    @keyframes animatePulse {
        0% {
            opacity: .3;
            transform: scale(0);
        }
        70% {transform: scale(5);}
    }

/* ====== ANIMATION SHINE ====== */

    .AnimateShine {
        position: relative;
        overflow: hidden;
    }

    .AnimateShine:after {
        content: '';
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background: hsla(0, 0%, 100%, 0.3);
        opacity: 0;
        transform: skewX(-30deg) translateX(100%);
        pointer-events: none;
        animation: animateShine 5s ease-in-out infinite;
    }

    @keyframes animateShine {
        40% {
            opacity: 0;
            transform: skewX(-30deg) translateX(-100%);
        }
        60% {
            opacity: 1;
            transform: skewX(-30deg) translateX(110%);
        }
    }

/* ====== ANIMATION MORE INFO ARROW ====== */

    .AnimateArrow {
        animation: animateArrow 3s ease infinite;
    }

    @keyframes animateArrow {
        30% {transform: translateX(0%);}
        40% {transform: translateX(10%);}
        50% {transform: translateX(0%);}
        60% {transform: translateX(10%);}
        70% {transform: translateX(0%);}
    }

    .AnimateOnHoverShrink:hover {
        transform: scale(1.1);
    }


/* ====== ANIMATION TYPE WRITER ====== */

    .AnimateText::after {
        content : '';
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: calc(100% - 4px);
        background-color: hsl(222, 77%, 90%);
        border-left: 4px solid var(--color_text_defined_term);
        opacity:0;
        transform: translateX(100%);
        /* transform-origin: right; */
        animation: animateText 3s ease-out;
    }

    @keyframes animateText {
        from {
            opacity: 1;
            transform: translateX(0);
        }
        60% {
            opacity: 1;
            transform: translateX(100%);
        }
    }


/* ====== PRINT SETTINGS ====== */

    @media print {
        @page {
            size: A3 landscape;
        }

        table {
            page-break-inside: avoid;
        }
    }