/*
    responsive reference:
    - CSS variables cannot be used for media queries so values must be hard-coded (ex: `max-width: 768px`)
    - nav.nav.responsive @ 650px
    - fly-out asides     @ 1150px
    - rhythm unit to 90% @ 1250px
*/

/*  ██ Variables ███████████████████████████████████████████████████████████████████████████████████████████████████████████████ */


    :root {

        /* Z-index Reference: */
        --menu_z                 : 5;
        --menu_item_z            : 10;
        --dropdown_z             : 15;
        --nav_responsive_z       : 150;
        --nav_responsive_btn_z   : 151;
        --aside_responsive_z     : 160;
        --aside_responsive_btn_z : 161;
        --override_under_z       : 174;
        --override_z             : 175;
        --override_over_z        : 176;
        --modal_z                : 200;

        /* Colors: */

            --c_red    : hsl( 0deg 100% 45% );
            --c_orange : hsl( 25deg 100% 50% );
            --c_yellow : hsl( 50deg 100% 50% );
            --c_green  : hsl( 100deg 80% 50% );
            --c_cyan   : hsl( 175deg 100% 50% );
            --c_blue   : hsl( 230deg 80% 60% );
            --c_purple : hsl( 280deg 100% 50% );

            --c_red_over    : #fff;
            --c_orange_over : #000;
            --c_yellow_over : #000;
            --c_green_over  : #000;
            --c_cyan_over   : #000;
            --c_blue_over   : #fff;
            --c_purple_over : #fff;

            --c_light_red    : hsl( 0deg 100% 65% );
            --c_light_orange : hsl( 25deg 100% 65% );
            --c_light_yellow : hsl( 50deg 100% 65% );
            --c_light_green  : hsl( 100deg 80% 65% );
            --c_light_cyan   : hsl( 185deg 100% 83% );
            --c_light_blue   : hsl( 230deg 100% 75% );
            --c_light_purple : hsl( 280deg 100% 65% );

            --c_light_red_over    : #000;
            --c_light_orange_over : #000;
            --c_light_yellow_over : #000;
            --c_light_green_over  : #000;
            --c_light_cyan_over   : #000;
            --c_light_blue_over   : #000;
            --c_light_purple_over : #000;

            --k_0   : hsl( 0, 0%, 100% );
            --k_5   : hsl( 0, 0%, 95% );
            --k_10  : hsl( 0, 0%, 90% );
            --k_15  : hsl( 0, 0%, 85% );
            --k_20  : hsl( 0, 0%, 80% );
            --k_25  : hsl( 0, 0%, 75% );
            --k_30  : hsl( 0, 0%, 70% );
            --k_35  : hsl( 0, 0%, 65% );
            --k_40  : hsl( 0, 0%, 60% );
            --k_45  : hsl( 0, 0%, 55% );
            --k_50  : hsl( 0, 0%, 50% );
            --k_55  : hsl( 0, 0%, 45% );
            --k_60  : hsl( 0, 0%, 40% );
            --k_65  : hsl( 0, 0%, 35% );
            --k_70  : hsl( 0, 0%, 30% );
            --k_75  : hsl( 0, 0%, 25% );
            --k_80  : hsl( 0, 0%, 20% );
            --k_85  : hsl( 0, 0%, 15% );
            --k_90  : hsl( 0, 0%, 10% );
            --k_95  : hsl( 0, 0%, 5% );
            --k_100 : hsl( 0, 0%, 0% );

        /* Globals: */
            --r : 0.9rem;

            --r_0_25  : calc( var( --r ) * 0.25 );
            --r_0_5   : calc( var( --r ) * 0.5 );
            --r_0_75  : calc( var( --r ) * 0.75 );
            --r_1_25  : calc( var( --r ) * 1.25 );
            --r_1_5   : calc( var( --r ) * 1.5 );
            --r_1_75  : calc( var( --r ) * 1.75 );
            --r_2     : calc( var( --r ) * 2 );
            --r_2_25  : calc( var( --r ) * 2.25 );
            --r_2_5   : calc( var( --r ) * 2.5 );
            --r_3     : calc( var( --r ) * 3 );
            --r_4     : calc( var( --r ) * 4 );
            --r_5     : calc( var( --r ) * 5 );
            --r_6     : calc( var( --r ) * 6 );

            --r_margin_bottom           : var( --r_1_5 );
            --font_family               : monospace;
            --font_family_monospace     : monospace;
            --font_size                 : var( --r );
            --line_height_multiplier    : 1.4;
            --line_height_relative      : calc( 1em * var( --line_height_multiplier ) );
            --color                     : var( --k_0 );
            --background                : var( --k_100 );

        /* Browser overrides: */
            --scroll_width          : var( --r_0_75 );
            --scroll_track_bg       : var( --k_80 );
            --scroll_thumb_bg       : var( --k_50 );
            --scroll_thumb_hover_bg : var( --k_40 );
            --selected_color        : var( --k_0 );
            --selected_bg           : var( --c_blue );
            --focus_outline_width   : 2px;
            --focus_outline_offset  : 0;
            --focus_outline_color   : var( --k_0 );

        /* Layout */
            --header_height        : var( --r_3 );
            --footer_height        : var( --r_3 );
            --header_padding       : 0;
            --footer_padding       : 0;
            --asides_width         : 15vw;
            --asides_min_width     : 320px;
            --header_bg            : var( --k_80 );
            --footer_bg            : var( --k_80 );
            --asides_bg            : var( --k_90 );
            --header_color         : var( --k_0 );
            --footer_color         : var( --k_0 );
            --asides_color         : var( --k_0 );
            --layout_borders_color : var( --k_70 );
            --layout_borders_width : 1px;
            --layout_borders       : var( --layout_borders_color ) var( --layout_borders_width ) solid;
            --content_width        : 1000px;
            --content_padding      : var( --r_1_5 ) var( --r ) var( --r_6 );

        /* Layout - Responsive */
            --aside_responsive_padding : 0 0 calc( var( --flyout_arrow_bottom ) + var( --flyout_arrow_size ) + var( --r ) );
            --flyout_arrow_bottom      : 10vh;
            --flyout_arrow_size        : var( --r_2_5 );
            --flyout_icon_size         : var( --r_2 );
            --flyout_arrow_invert      : 1;
            --flyout_arrow_opacity     : 0.8;
            --flyout_arrow_bg          : rgba( 0, 0, 0, 0.5 );
            --flyout_left_arrow        : url( "/img/icons/chevron_right.svg" );
            --flyout_right_arrow       : url( "/img/icons/chevron_left.svg" );
            --flyout_box_shadow        : 0 0 50px rgba( 0, 0, 0, 0.5 );

        /* Navbars */
            --brand_bg                  : var( --k_100 );
            --brand_margin              : 0 var( --r_0_5 );
            --brand_img_max_height      : calc( var( --header_height ) * 0.7 );
            --brand_img_top_offset      : 0;
            --nav_responsive_icon_size  : var( --r_1_25 );
            --nav_responsive_btn_size   : var( --r_1_5 );
            --nav_responsive_btn_invert : 1;
            --nav_responsive_menu_bg    : var( --k_80 );
            --nav_responsive_icon       : url( "/img/icons/bars.svg" );
            --nav_responsive_close_icon : url( "/img/icons/x.svg" );
            --nav_responsive_margin     : 0 var( --r_0_5 ) 0 auto;
            --nav_responsive_shadow     : 0 5px 5px rgba( 0, 0, 0, 0.5 );

        /* Icons */
            --icon_width      : 1em;
            --icon_height     : 1em;
            --icon_margin     : 0 0.5em;
            /*--icon_top_offset : -0.05em;*/
            --icon_top_offset : 0;
            --icon_ext_filter : 1;

        /* Menus */
            --menu_color         : var( --k_0 );
            --menu_borders_width : var( --layout_borders_width );
            --menu_borders_color : var( --layout_borders_color );
            --menu_active_bg     : rgba( 255, 255, 255, 0.15 );
            --menu_hover_bg      : var( --menu_active_bg );
            --menu_sub_menu_bg   : var( --k_100 );
            --menu_h_height      : 100%;
            --menu_h_padding     : 0 var( --r_0_75 );
            --menu_v_padding     : var( --r_0_5 ) var( --r );

        /* Links */
            --a_color           : var( --c_light_blue );
            --a_hover_color     : var( --c_blue );
            --a_text_decoration : none;

        /* Utility */
            --dismiss_box_size        : 25px;
            --dismiss_x_size          : var( --r_1_75 );
            --dismiss_color           : #fff;
            --dismiss_border_width    : var( --layout_borders_width );
            --fade_transition         : 0.3s;
            --interface_override_bg   : rgba( 0, 0, 0, 0.5 );
            --spinner_img             : url( /img/spinner.svg );
            --spinner_size            : var( --r_2 );
            --spinner_size_lg         : var( --r_4 );
            --spinner_margin_bottom   : var( --r_0_5 );
            --caret_margin            : 0 var( --r_0_5 );
            --spinner_invert          : 1;

        /* Typography */
            --general_el_margin_bottom  : var( --r_margin_bottom );
            --lists_margin_left         : var( --r_2_5 );
            --li_bottom_margin          : calc( var( --r_margin_bottom ) / 6 );
            --hr_margin                 : var( --r_margin_bottom );
            --hr_border_color           : var( --layout_borders_color );
            --hr_border                 : var( --layout_borders_width ) solid var( --hr_border_color );
            --h1_font_size              : var( --r_2_5 );
            --h2_font_size              : var( --r_2_25 );
            --h3_font_size              : var( --r_2 );
            --h4_font_size              : var( --r_1_5 );
            --h5_font_size              : var( --r_1_25 );
            --h6_font_size              : var( --r );
            --h1_to_3_margin            : var( --r_2 ) 0;
            --h4_to_6_margin            : var( --r_2 ) 0 var( --r );
            --bold_font_weight          : 700;
            --small_font_size           : var( --r_0_75 );
            --pre_margin_bottom         : var( --r_margin_bottom );
            --code_padding              : 0.125em 0.25em;
            --code_bg                   : var( --k_90 );
            --code_borders_color        : var( --layout_borders_color );
            --code_borders              : var( --layout_borders_width ) solid var( --code_borders_color );
            --sub_sup_font_size         : var( --r_0_75 );
            --sub_bottom                : -0.25em;
            --sup_top                   : -0.5em;
            --block_quote_bg            : var( --k_90 );
            --block_quote_borders_color : var( --k_70 );
            --block_quote_borders_width : var( --layout_borders_width );
            --block_quote_padding       : var( --r );
            --block_quote_margin_bottom : var( --r_margin_bottom );
            --figure_borders_color      : var( --k_70 );
            --figure_borders_width      : var( --layout_borders_width );
            --figure_margin_bottom      : var( --r_margin_bottom );
            --figcaption_bg             : var( --k_95 );
            --figcaption_font_size      : 0.85em;
            --figcaption_padding        : var( --r_0_25 );
            --address_margin_bottom     : var( --r_margin_bottom );
            --progress_bar_color        : var( --c_blue );
            --progress_bar_bg           : var( --k_80 );
            --mark_color                : var( --k_100 );
            --mark_bg                   : var( --c_light_yellow );
            --dl_margin_bottom          : var( --r_margin_bottom );
            --dd_padding                : 0 0 var( --r ) var( --r_2 );
            --details_borders_color     : var( --k_70 );
            --details_summary_bg        : var( --k_90 );
            --details_borders_width     : var( --layout_borders_width );
            --details_margin_bottom     : var( --r_margin_bottom );
            --details_padding           : var( --r_0_5 );

        /* Images / Audio / Video */
            --media_display : block;
            --media_margin  : var( --r_margin_bottom );

        /* Aside Headings */
            --aside_heading_padding : var( --r );
            --aside_heading_bg      : var( --k_80 );
            --aside_heading_color   : var( --k_0 );

        /* Tables */
            --table_th_td_padding     : var( --r_0_5 ) var( --r );
            --table_th_bg             : var( --k_75 );
            --table_borders_color     : var( --layout_borders_color );
            --table_borders_width     : var( --layout_borders_width );
            --table_borders           : var( --table_borders_width ) solid var( --table_borders_color );
            --table_normal_row_bg     : var( --k_100 );
            --table_striped_row_bg    : var( --k_90 );
            --table_caption_font_size : 0.85em;
            --table_caption_padding   : var( --table_th_td_padding );
            --table_caption_bg        : var( --k_85 );

        /* Inputs */
            --label_margin               : 0 0 var( --r_0_25 );
            --input_color                : var( --k_0 );
            --input_bg                   : var( --k_90 );
            --input_borders_color        : var( --layout_borders_color );
            --input_borders              : var( --layout_borders_width ) solid var( --input_borders_color );
            --input_s_padding            : var( --r_0_25 ) var( --r_0_5 );
            --input_s_font_size          : calc( var( --r ) * 0.8 );
            --input_s_line_height        : var( --r );
            --input_padding              : var( --r_0_5 ) var( --r_0_75 );
            --input_l_padding            : var( --r ) var( --r_1_25 );
            --input_l_font_size          : var( --r_1_25 );
            --input_l_line_height        : var( --r_1_5 );
            --input_xl_padding           : var( --r_1_25 ) var( --r_1_5 );
            --input_xl_font_size         : var( --r_1_5 );
            --input_xl_line_height       : var( --r_1_75 );
            --input_disabled_opacity     : 0.7;
            --input_focus_outline_width  : var( --focus_outline_width );
            --input_focus_outline_color  : var( --focus_outline_color );
            --input_focus_outline_offset : 0;
            --input_icon_inverts         : 1;
            --textarea_min_height        : var( --r_6 );
            --fieldset_padding           : var( --r ) var( --r_1_5 ) var( --r_2 );
            --fieldset_borders           : var( --layout_borders );
            --legend_font_weight         : var( --bold_font_weight );

        /* Buttons */
            --btn_font_weight               : 700;
            --btn_transition                : none;
            --btn_default_bg                : var( --input_bg );
            --btn_default_color             : var( --k_0 );
            --btn_outline_border_width      : var( --layout_borders_width );
            --btn_outline_border_color      : var( --k_50 );
            --btn_focus_outline_width       : var( --focus_outline_width );
            --btn_focus_outline_color       : var( --focus_outline_color );
            --btn_active_outline_offset     : 0;
            --btn_active_outline_width      : var( --layout_borders_width );

        /* Alerts */
            --alert_default_color           : var( --k_0 );
            --alert_default_bg              : var( --k_80 );
            --alert_margin_bottom           : var( --general_el_margin_bottom );
            --alert_padding                 : var( --r_1_5 ) var( --r );

        /* Panels */
            --panel_color               : var( --k_0 );
            --panel_body_bg             : var( --k_100 );
            --panel_header_footer_bg    : var( --k_80 );
            --panel_padding             : var( --r );
            --panel_border_color        : var( --layout_borders_color );
            --panel_border              : var( --layout_borders_width ) solid var( --panel_border_color );

        /* Modals */
            --modal_color        : var( --k_0 );
            --modal_bg           : var( --k_90 );
            --modal_border_color : var( --layout_borders_color );
            --modal_border       : var( --layout_borders_width ) solid var( --modal_border_color );
            --modal_top          : 10vh;
            --modal_max_height   : 80vh;
            --modal_max_width    : 95vw;
            --modal_width        : 50rem;
            --modal_l_width      : 75rem;
            --modal_s_width      : 25rem;

        /* TODO: Dropdowns */
            --dropdown_menu_min_width : 12rem;
            --dropdown_borders_width  : var( --layout_borders_width );
            --dropdown_borders_color  : var( --layout_borders_color );
            --dropdown_borders        : var( --dropdown_borders_width ) solid var( --dropdown_borders_color );
    }

/*  ██ Light theme vars ████████████████████████████████████████████████████████████████████████████████████████████████████████ */

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

        :root {

            /* Globals: */
                --color      : var( --k_100 );
                --background : var( --k_0 );

            /* Browser Overrides */
                --scroll_track_bg       : var( --k_20 );
                --scroll_thumb_bg       : var( --k_50 );
                --scroll_thumb_hover_bg : var( --k_60 );
                --focus_outline_color    : var( --k_70 );

            /* Layout */
                --header_bg            : var( --k_10 );
                --footer_bg            : var( --k_10 );
                --asides_bg            : var( --k_15 );
                --header_color         : var( --k_100 );
                --footer_color         : var( --k_100 );
                --asides_color         : var( --k_100 );
                --layout_borders_color : var( --k_30 );

            /* Layout - Responsive */
                --flyout_arrow_invert : 0;
                --flyout_arrow_bg     : rgba( 0, 0, 0, 0.2 );

            /* Navbars */
                --brand_bg                  : var( --k_100 );
                --nav_responsive_btn_invert : 0;
                --nav_responsive_menu_bg    : var( --k_10 );
                --nav_responsive_shadow     : 0 5px 5px rgba( 0, 0, 0, 0.1 );

            /* Icons */
                --icon_ext_filter : 0;

            /* Menus */
                --menu_color       : var( --k_100 );
                --menu_active_bg   : rgba( 0, 0, 0, 0.1 );
                --menu_sub_menu_bg : var( --k_20 );

            /* Links */
                --a_color       : var( --c_blue );
                --a_hover_color : var( --c_light_blue );

            /* Utility */
                --dismiss_color         : #000;
                --spinner_invert        : 0;
                --interface_override_bg : rgba( 0, 0, 0, 0.2 );

            /* Typography */
                --code_bg                   : var( --k_10 );
                --block_quote_bg            : var( --k_5 );
                --block_quote_borders_color : var( --k_15 );
                --figure_borders_color      : var( --k_15 );
                --figcaption_bg             : var( --k_10 );
                --details_borders_color     : var( --k_15 );
                --details_summary_bg        : var( --k_10 );

            /* Tables */
                --table_th_bg          : var( --k_25 );
                --table_borders_color  : var( --layout_borders_color );
                --table_striped_row_bg : var( --k_10 );
                --table_normal_row_bg  : var( --k_0 );
                --table_caption_bg     : var( --k_15 );

            /* Inputs */
                --input_color               : var( --k_100 );
                --input_bg                  : var( --k_5 );
                --input_icon_inverts        : 0;

            /* Buttons */
                --btn_default_color    : var( --k_100 );
                --btn_default_hover_bg : var( --k_10 );

            /* Aside Headings */
                --aside_heading_bg    : var( --k_20 );
                --aside_heading_color : var( --k_100 );

            /* Alerts */
                --alert_default_color : var( --k_100 );
                --alert_default_bg    : var( --k_10 );

            /* Panels */
                --panel_color            : var( --k_100 );
                --panel_body_bg          : var( --k_0 );
                --panel_header_footer_bg : var( --k_10 );

            /* Modals */
                --modal_color             : var( --k_100 );
                --modal_bg                : var( --k_0 );
        }
    }
    

/*  ██ Responsive vars █████████████████████████████████████████████████████████████████████████████████████████████████████████ */

    @media( max-width: 1250px ) {

        :root {

            /* Slight mobile sizing errors: */
            /* --r: 0.9rem; */

            --line_height_multiplier: 1.3;
        }
    }

/*  ██ Root element + <html> & <body>  █████████████████████████████████████████████████████████████████████████████████████████ */

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        -webkit-tap-highlight-color: transparent;
    }

    html,
    body {
        font-family: var( --font_family );
        font-size: var( --font_size );
        line-height: calc( var( --font_size ) * var( --line_height_multiplier ) );
        height: 100%;
        max-height: 100%;
        overflow: hidden;
    }

    body {
        color: var( --color );
        background: var( --background );
        display: flex;
        flex-direction: column;
    }

/*  ██ Browser overrides ███████████████████████████████████████████████████████████████████████████████████████████████████████ */

    ::selection {
        color: var( --selected_color );
        background: var( --selected_bg );
    }

    *:focus,
    *:focus-visible {
        outline: solid var( --focus_outline_width ) var( --focus_outline_color );
        outline-offset: var( --focus_outline_offset );
    }

/*  ██ Colors ██████████████████████████████████████████████████████████████████████████████████████████████████████████████████ */

    .red { color: var( --c_red ); }
    .bg_red {
        color: var( --c_red_over );
        background : var( --c_red );
    }

    .orange { color: var( --c_orange ); }
    .bg_orange {
        color: var( --c_orange_over );
        background : var( --c_orange );
    }

    .yellow { color: var( --c_yellow ); }
    .bg_yellow {
        color: var( --c_yellow_over );
        background : var( --c_yellow );
    }

    .green { color: var( --c_green ); }
    .bg_green {
        color: var( --c_green_over );
        background : var( --c_green );
    }

    .cyan { color: var( --c_cyan ); }
    .bg_cyan {
        color: var( --c_cyan_over );
        background : var( --c_cyan );
    }

    .blue { color: var( --c_blue ); }
    .bg_blue {
        color: var( --c_blue_over );
        background : var( --c_blue );
    }

    .purple { color: var( --c_purple ); }
    .bg_purple {
        color: var( --c_purple_over );
        background : var( --c_purple );
    }

    .light_red { color: var( --c_light_red ); }
    .bg_light_red {
        color: var( --c_light_red_over );
        background : var( --c_light_red );
    }

    .light_orange { color: var( --c_light_orange ); }
    .bg_light_orange {
        color: var( --c_light_orange_over );
        background : var( --c_light_orange );
    }

    .light_yellow { color: var( --c_light_yellow ); }
    .bg_light_yellow {
        color: var( --c_light_yellow_over );
        background : var( --c_light_yellow );
    }

    .light_green { color: var( --c_light_green ); }
    .bg_light_green {
        color: var( --c_light_green_over );
        background : var( --c_light_green );
    }

    .light_cyan { color: var( --c_light_cyan ); }
    .bg_light_cyan {
        color: var( --c_light_cyan_over );
        background : var( --c_light_cyan );
    }

    .light_blue { color: var( --c_light_blue ); }
    .bg_light_blue {
        color: var( --c_light_blue_over );
        background : var( --c_light_blue );
    }

    .light_purple { color: var( --c_light_purple ); }
    .bg_light_purple {
        color: var( --c_light_purple_over );
        background : var( --c_light_purple );
    }

    .k_0 { color: var( --k_0 ); }
    .k_5 { color: var( --k_5 ); }
    .k_10 { color: var( --k_10 ); }
    .k_15 { color: var( --k_15 ); }
    .k_20 { color: var( --k_20 ); }
    .k_25 { color: var( --k_25 ); }
    .k_30 { color: var( --k_30 ); }
    .k_35 { color: var( --k_35 ); }
    .k_40 { color: var( --k_40 ); }
    .k_45 { color: var( --k_45 ); }
    .k_50 { color: var( --k_50 ); }
    .k_55 { color: var( --k_55 ); }
    .k_60 { color: var( --k_60 ); }
    .k_65 { color: var( --k_65 ); }
    .k_70 { color: var( --k_70 ); }
    .k_75 { color: var( --k_75 ); }
    .k_80 { color: var( --k_80 ); }
    .k_85 { color: var( --k_85 ); }
    .k_90 { color: var( --k_90 ); }
    .k_95 { color: var( --k_95 ); }
    .k_100 { color: var( --k_100 ); }

    .k_0_bg { background: var( --k_0 ); }
    .k_5_bg { background: var( --k_5 ); }
    .k_10_bg { background: var( --k_10 ); }
    .k_15_bg { background: var( --k_15 ); }
    .k_20_bg { background: var( --k_20 ); }
    .k_25_bg { background: var( --k_25 ); }
    .k_30_bg { background: var( --k_30 ); }
    .k_35_bg { background: var( --k_35 ); }
    .k_40_bg { background: var( --k_40 ); }
    .k_45_bg { background: var( --k_45 ); }
    .k_50_bg { background: var( --k_50 ); }
    .k_55_bg { background: var( --k_55 ); }
    .k_60_bg { background: var( --k_60 ); }
    .k_65_bg { background: var( --k_65 ); }
    .k_70_bg { background: var( --k_70 ); }
    .k_75_bg { background: var( --k_75 ); }
    .k_80_bg { background: var( --k_80 ); }
    .k_85_bg { background: var( --k_85 ); }
    .k_90_bg { background: var( --k_90 ); }
    .k_95_bg { background: var( --k_95 ); }
    .k_100_bg { background: var( --k_100 ); }

/*  ██ Layout ██████████████████████████████████████████████████████████████████████████████████████████████████████████████████ */

    #layout {
        display: grid;
        grid-template: auto 1fr auto / auto 1fr auto;
        width: 100%;
        flex: 1;
        overflow: hidden;
    }

    #layout > #aside_left,
    #layout > main,
    #layout > #aside_right {
        overflow-y: auto;
    }

    #layout > header {
        background: var( --header_bg );
        color: var( --header_color );
        height: var( --header_height );
        padding: var( --header_padding );
        border-bottom: var( --layout_borders );
        grid-column: 1 / 4;
    }

    #layout > aside {
        background: var( --asides_bg );
        color: var( --asides_color );
        width: var( --asides_width );
        min-width: var( --asides_min_width );
    }

    #layout > #aside_left {
        border-right: var( --layout_borders );
        grid-column: 1 / 2;
    }

    #layout > main {
        grid-column: 2 / 3;
        overflow-x: hidden;
    }

    #layout > #aside_right {
        border-left: var( --layout_borders );
        grid-column: 3 / 4;
    }

    #layout > footer {
        background: var( --footer_bg );
        color: var( --footer_color );
        height: var( --footer_height );
        padding: var( --footer_padding );
        border-top: var( --layout_borders );
        grid-column: 1 / 4;
    }

    /* Content container */
    #content {
        max-width: 100%;
        width: var( --content_width );
        padding: var( --content_padding );
        margin: 0 auto;
    }

    #content.full_width {
        width: 100%;
        max-width: 100%;
    }

    #content.full_height { height: 100%; }

    #content.no_padding { padding: 0; }

    /* Responsive layout + flyout asides */
    #aside_left_check,
    #aside_right_check,
    label[for="aside_left_check"],
    label[for="aside_right_check"] { display: none; }

    @media( max-width: 1150px ) {

        html { padding-top: var( --header_height ); }

        body, html { overflow: auto; }

        #layout {
            display: flex;
            flex-direction: column;
            height: auto;
            padding: 0;
        }

        #layout > header {
            top: 0;
            position: fixed;
            width: 100%;
            z-index: var( --nav_responsive_z );
        }

        #layout > main { flex: 1; }

        /* Fly-out responsive asides: */
        #aside_left.responsive,
        #aside_right.responsive {
            top: 0;
            bottom: 0;
            position: fixed;
            z-index: var( --aside_responsive_z );
            padding: var( --aside_responsive_padding );
            box-shadow: var( --flyout_box_shadow );
        }

        #aside_left.responsive  { left: -100%; }
        #aside_right.responsive { right: -100%; }

        /* Override shows when nav is active - JS driven! */
        body.aside_active {
            --nav_responsive_z       : calc( var( --override_z ) - 1);
            --nav_responsive_btn_z   : calc( var( --override_z ) - 1);
            --aside_responsive_z     : calc( var( --override_z ) + 1);
            --aside_responsive_btn_z : calc( var( --override_z ) + 2);
        }

        body.aside_active #override {
            display: block;
            visibility: visible;
        }

        label[for="aside_left_check"],
        label[for="aside_right_check"],
        label[for="aside_left_check"]::after,
        label[for="aside_right_check"]::after {
            display: block;
            position: fixed;
            bottom: var( --flyout_arrow_bottom );
            height: var( --flyout_arrow_size );
            width: var( --flyout_arrow_size );
            margin: 0;
            z-index: var( --aside_responsive_btn_z );
            opacity: var( --flyout_arrow_opacity );
        }

        label[for="aside_left_check"],
        label[for="aside_right_check"] { background: var( --flyout_arrow_bg ); }

        label[for="aside_left_check"]::after,
        label[for="aside_right_check"]::after {
            content: " ";
            background-repeat: no-repeat;
            background-size: var( --flyout_icon_size ) var( --flyout_icon_size );
            filter: invert( var( --flyout_arrow_invert ) );
            background-position: center center;
        }

        label[for="aside_left_check"]  { left: 0; }
        label[for="aside_right_check"] { right: 0; }

        label[for="aside_left_check"]::after  { background-image: var( --flyout_left_arrow ); }
        label[for="aside_right_check"]::after { background-image: var( --flyout_right_arrow ); }

        #aside_left_check:checked + label[for="aside_left_check"]::after,
        #aside_right_check:checked + label[for="aside_right_check"]::after { transform: rotate( 180deg ); }

        #aside_left_check:checked ~ #aside_left.responsive,
        #aside_left.responsive:focus-within {
            left: 0;
        }

        #aside_right_check:checked ~ #aside_right.responsive,
        #aside_right.responsive:focus-within {
            right: 0;
        }
    }

/*  ██ Navbars █████████████████████████████████████████████████████████████████████████████████████████████████████████████████ */

    nav.nav {
        display: flex;
        height: 100%;
        align-items: center;
    }

    nav.nav > .brand {
        background: var( --brand_bg );
        height: 100%;
        display: flex;
        align-items: center;
    }

    nav.nav > .brand img {
        max-height: var( --brand_img_max_height );
        top: var( --brand_img_top_offset );
        position: relative;
        margin: 0;
    }

    nav.nav > .brand a {
        display: flex;
        align-items: center;
        position: relative;
        margin: var( --brand_margin );
    }

    /* Responsive nav - nav.nav.responsive */
    #nav_check,
    label[for="nav_check"] { display: none; }

    @media( max-width: 820px ) {

        /* Responsive nav menu */
        nav.nav.responsive {
            background: var( --header_bg );
            top: 0;
            overflow: hidden;
            position: fixed;
            width: 100%;
            z-index: var( --nav_responsive_z );
            height: var( --header_height );
            border-bottom: solid var( --menu_borders_width ) var( --menu_borders_color );
        }

        /* Override shows when nav is active - JS driven! */
        body.nav_active {
            --aside_responsive_z     : calc( var( --override_z ) - 1);
            --aside_responsive_btn_z : calc( var( --override_z ) - 1);
            --nav_responsive_z       : calc( var( --override_z ) + 1);
        }

        body.nav_active #override {
            display: block;
            visibility: visible;
        }

        /* Responsive nav menu toggle */
        label[for="nav_check"],
        label[for="nav_check"]::after {
            display: block;
            height: var( --nav_responsive_btn_size );
            width: var( --nav_responsive_btn_size );
            margin: var( --nav_responsive_margin );
            z-index: var( --nav_responsive_btn_z );
        }

        label[for="nav_check"] { background: var( --nav_responsive_menu_bg ); }

        label[for="nav_check"]::after {
            content: " ";
            background-repeat: no-repeat;
            background-size: var( --nav_responsive_icon_size ) var( --nav_responsive_icon_size );
            filter: invert( var( --nav_responsive_btn_invert ) );
            background-position: center center;
        }

        label[for="nav_check"]::after { background-image: var( --nav_responsive_icon ); }

        /* Checkbox nav state active */
        #nav_check:checked + label[for="nav_check"]::after {
            background-image: var( --nav_responsive_close_icon );
        }

        #nav_check:checked ~ menu.h,
        nav.nav.responsive menu.h:focus-within {
            position: fixed;
            background: var( --nav_responsive_menu_bg );
            max-height: calc( 100vh - var( --header_height ) );
            overflow-y: auto;
            box-shadow: var( --nav_responsive_shadow );
        }

        /* Turn .menu.h into .menu_v */
        nav.nav.responsive > menu.h {
            height: auto;
            position: absolute;
            top: var( --header_height );
        }

        nav.nav.responsive > menu.h { flex-direction: column; }

        nav.nav.responsive > menu.h > li {
            border-right: none;
            border-bottom: solid var( --menu_borders_width ) var( --menu_borders_color );
            flex-direction: column;
            width: 100%;
        }

        nav.nav.responsive > menu.h > li > * {
            height: auto;
            width: 100%;
        }

        nav.nav.responsive > menu.h > li > *:not( menu ) { padding: var( --menu_v_padding ); }

        nav.nav.responsive > menu.h > li > menu.h {
            border-top: solid var( --menu_borders_width ) var( --menu_borders_color );
            background: var( --menu_sub_menu_bg );
        }

        nav.nav.responsive > menu.h > li > menu.h > li:last-child { border-bottom: none; }

        /* .menu.h dropdowns */
        nav.nav.responsive > menu.h > li menu {
            min-width: 100%;
            border: none;
            position: static;
            left: initial;
            top: initial;
            z-index: var( --dropdown_z );
        }

        nav.nav.responsive > menu.h > li menu menu {
            top: initial;
            left: initial;
        }
    }

/*  ██ Menus ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████ */

    menu {
        border-top: solid var( --menu_borders_width ) var( --menu_borders_color );
        list-style: none;
        margin: 0;
        display: flex;
        width: 100%;
        flex-direction: column;
        z-index: var( --menu_z );
    }

    menu > li > a, menu > li > .href { z-index: var( --menu_item_z ); }

    menu li {
        display: flex;
        padding: 0;
        margin: 0;
        position: relative;
        border-bottom: solid var( --menu_borders_width ) var( --menu_borders_color );
        flex-direction: column;
        width: 100%;
    }

    menu > li > *,
    menu > li > .href {
        color: var( --menu_color );
        display: flex;
        align-items: center;
        width: 100%;
        text-decoration: none;
    }

    menu > li > *.active,
    menu > li > *.current_page { background: var( --menu_active_bg ); }

    menu > li > *:focus,
    menu > li > *:focus-visible {
        color: var( --menu_color );
        background: var( --menu_active_bg );
    }

    menu > li > a:hover:not(.btn),
    menu > li > .href:hover:not(.btn) {
        color: var( --menu_color );
        background: var( --menu_hover_bg );
    }

    menu > li > *:not( menu ) { padding: var( --menu_v_padding ); }

    /* Horizontal/vertical styling */
    menu.h {
        border-top: none;
        border-left: solid var( --menu_borders_width ) var( --menu_borders_color );
        height: var( --menu_h_height );
        flex-direction: row;
    }

    menu.h > li {
        flex-direction: row;
        border-bottom: none;
        border-right: solid var( --menu_borders_width ) var( --menu_borders_color );
        width: auto;
    }

    menu.h > li > * { width: auto; }

    menu.h > li > *:not( menu ) {
        height: 100%;
        padding: var( --menu_h_padding );
    }

    /* Sub-menus */
    menu > li > menu {
        border-top: solid var( --menu_borders_width ) var( --menu_borders_color );
        background: var( --menu_sub_menu_bg );
    }

    menu > li > menu > li:last-child { border-bottom: none; }

    /* .menu.h dropdowns */
    menu.h > li menu {
        visibility: hidden;
        min-width: var( --dropdown_menu_min_width );
        border: var( --dropdown_borders );
        display: none;
        position: absolute;
        left: calc( var( --dropdown_borders_width ) * -1 );
        top: calc( 100% - var( --dropdown_borders_width ) );
        z-index: var( --dropdown_z );
    }

    menu.h > li menu menu {
        top: calc( var( --dropdown_borders_width ) * -1 );
        left: 100%;
    }

    menu > li:hover > menu,
    menu > li:focus-within > menu,
    menu > li menu:hover,
    menu > li menu:focus {
        visibility: visible;
        display: block;
    }

    menu.left {
        left: calc( -100% - var( --menu_borders_width ) * 2 ) !important;
    }

    menu.right {
        left: unset !important;
        right: 0;
    }

/*  ██ Typography ██████████████████████████████████████████████████████████████████████████████████████████████████████████████ */

    a,
    .href {
        background: transparent;
        color: var( --a_color );
        text-decoration: var( --a_text_decoration );
    }

    a:hover:not(.btn),
    .href:hover:not(.btn) {
        color: var( --a_hover_color );
        cursor: pointer;
    }

    p, ul, ol, table { margin-bottom: var( --general_el_margin_bottom ); }

    ul, ol { margin-left: var( --lists_margin_left ); }

    ul > ul,
    ul > ol,
    ol > ol,
    ol > ul {
        margin-top: var( --li_bottom_margin );
        margin-bottom: 0;
    }

    li { margin-bottom: var( --li_bottom_margin ); }

    ul > li:last-of-type,
    ol > li:last-of-type {
        margin-bottom: 0;
    }

    li > ul,
    li > ol {
        margin-top: var( --li_bottom_margin );
        margin-bottom: 0;
    }

    dl {
        margin: 0 0 var( --dl_margin_bottom );
        padding: 0;
    }

    dt { font-weight: var( --bold_font_weight ); }

    dd { padding: var( --dd_padding ); }

    dl > dd:last-of-type { padding-bottom: 0; }

    hr {
        height: 0;
        overflow: visible;
        border: none;
        border-top: var( --hr_border );
        margin: var( --hr_margin ) 0;
    }

    hr.double { margin: calc( var( --hr_margin ) * 2 ) 0; }
    hr.half { margin: calc( var( --hr_margin ) / 2 ) 0; }

    b, strong { font-weight: var( --bold_font_weight ); }

    h1, .h1,
    h2, .h2,
    h3, .h3,
    h4, .h4,
    h5, .h5,
    h6, .h6 {
        line-height: var( --line_height_relative );
    }

    h1, .h1 { font-size: var( --h1_font_size ); }
    h2, .h2 { font-size: var( --h2_font_size ); }
    h3, .h3 { font-size: var( --h3_font_size ); }
    h4, .h4 { font-size: var( --h4_font_size ); }
    h5, .h5 { font-size: var( --h5_font_size ); }
    h6, .h6 { font-size: var( --h6_font_size ); }

    h1, .h1,
    h2, .h2,
    h3, .h3 {
        margin: var( --h1_to_3_margin );
    }

    h4, .h4,
    h5, .h5,
    h6, .h6 {
        margin: var( --h4_to_6_margin );
    }

    h5, .h5,
    h6, .h6 {
        font-weight: 700;
    }

    small {
        font-size: var( --small_font_size );
        line-height: var( --line_height_relative );
    }

    pre {
        overflow-x: auto;
        font-size: var( --font_size );
        font-family: var( --font_family_monospace );
        margin-bottom: var( --pre_margin_bottom );
        max-width: 100%;
    }

    code,
    kbd,
    samp {
        font-family: var( --font_family_monospace );
        padding: var( --code_padding );
        background: var( --code_bg );
        border: var( --code_borders );
    }

    sub,
    sup {
        font-size: var( --sub_sup_font_size );
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }

    sub { bottom: var( --sub_bottom ); }
    sup { top: var( --sup_top ); }

    abbr[title] {
        border-bottom: none;
        text-decoration: underline;
        text-decoration: underline dotted;
    }

    progress {
        background-color: var( --progress_bar_bg );
        display: block;
        vertical-align: baseline;
        width: 100%;
    }

    progress::-webkit-progress-bar {
        background-color: var( --progress_bar_bg );
        width: 100%;
    }

    progress::-webkit-progress-value { background-color: var( --progress_bar_color ) !important; }
    progress::-moz-progress-bar { background-color: var( --progress_bar_color ) !important; }
    progress { color: var( --progress_bar_color ) ; }

    details { display: block; }
    summary { cursor: pointer; }

    blockquote {
        background: var( --block_quote_bg );
        border: var( --block_quote_borders_width ) var( --block_quote_borders_color ) solid;
        padding: var( --block_quote_padding );
        margin: 0 0 var( --block_quote_margin_bottom );
    }

    blockquote > *:last-child { margin-bottom: 0; }

    cite { font-style: italic; }

    figure {
        border: var( --figure_borders_width ) var( --figure_borders_color ) solid;
        margin: 0 0 var( --figure_margin_bottom );
        text-align: center;
    }

    figure > blockquote,
    figure > img,
    figure > svg,
    figure > picture {
        display: block;
        z-index: 1;
        border: none;
        margin: 0;
    }

    figure > figcaption {
        background: var( --figcaption_bg );
        font-size: var( --figcaption_font_size );
        border-top: var( --figure_borders_width ) var( --figure_borders_color ) solid;
        padding: var( --figcaption_padding );
    }

    address {
        margin: 0 0 var( --address_margin_bottom );
        font-style: italic;
    }

    time { font-weight: var( --bold_font_weight ); }

    mark {
        color: var( --mark_color );
        background: var( --mark_bg );
    }

    q { font-style: italic; }

    var {
        font-style: italic;
        font-weight: var( --bold_font_weight );
    }

    details > summary {
        background: var( --details_summary_bg );
        border: var( --details_borders_width ) var( --details_borders_color ) solid;
        padding: var( --details_padding );
    }

    details[open] {
        border-left: var( --details_borders_width ) var( --details_borders_color ) solid;
        border-right: var( --details_borders_width ) var( --details_borders_color ) solid;
        border-bottom: var( --details_borders_width ) var( --details_borders_color ) solid;
        padding: 0 var( --details_padding ) var( --details_padding );
    }

    details[open] > summary {
        margin: 0 calc( var( --details_padding ) * -1 ) var( --details_padding );
    }

    details:focus,
    details > summary:focus { outline-offset: 0; }

/*  ██ Images / Audio / Video ██████████████████████████████████████████████████████████████████████████████████████████████████ */

    img,
    picture,
    svg,
    canvas,
    video,
    audio {
        border-style: none;
        max-width: 100%;
        display: var( --media_display );
        margin: 0 0 var( --media_margin );
    }

    .full_width > *,
    .align_center > *,
    .align_left > *,
    .align_right > * {
        width: 100%;
        margin: 0;
    }

    .align_center { margin: 0 auto var( --media_margin ); }

    .align_left,
    .align_right {
        display: inline-block;
        max-width: 50%;
    }

    .align_left {
        float: left;
        margin: 0 var( --media_margin ) var( --media_margin ) 0;
    }

    .align_right {
        float: right;
        margin: 0 0 var( --media_margin ) var( --media_margin );
    }

    @media( max-aspect-ratio: 49/50 ) {

        .align_left,
        .align_right {
            max-width: 35%;
        }
    }

    @media( max-aspect-ratio: 30/50 ) {

        .align_left,
        .align_right {
            display: flex !important;
            justify-content: center;
            float: none;
            max-width: 100%;
            margin: 0 auto var( --media_margin ) !important;
        }

        /* Reset button width when explicitly aligned */
        .align_left > .btn,
        .align_right > .btn {
            width: auto;
        }
    }

    .full_width {
        display: block;
        margin: 0 auto var( --media_margin );
        width: 100%;
    }

/*  ██ Aside headings ██████████████████████████████████████████████████████████████████████████████████████████████████████████ */

    aside > .aside_heading {
        padding: var( --aside_heading_padding );
        background: var( --aside_heading_bg );
        color: var( --aside_heading_color );
        margin: 0;
    }

    aside > .aside_heading > a {
        color: var( --aside_heading_color );
        text-decoration: none;
    }

    aside > .aside_heading > a:hover { color: var( --aside_heading_color ); }

/*  ██ Tables ██████████████████████████████████████████████████████████████████████████████████████████████████████████████████ */

    table {
        width: 100%;
        border-collapse: collapse;
    }

    caption {
        caption-side: bottom;
        background: var( --table_caption_bg );
        padding: var( --table_caption_padding );
        font-size: var( --table_caption_font_size );
    }

    table.bordered caption {
        border-right: var( --table_borders );
        border-left: var( --table_borders );
        border-bottom: var( --table_borders );
    }

    th,
    td {
        text-align: left;
        padding: var( --table_th_td_padding );
    }

    table th { background: var( --table_th_bg ); }

    table.bordered {
        border-top: var( --table_borders );
        border-left: var( --table_borders );
    }

    table.bordered th,
    table.bordered td {
        border-right: var( --table_borders );
        border-bottom: var( --table_borders );
    }

    table.striped tbody tr:nth-child( even ) { background: var( --table_normal_row_bg ); }
    table.striped tbody tr:nth-child( odd ) { background: var( --table_striped_row_bg ); }

    /* Table input */
    td.input {
        padding: 0;
        background: var( --input_bg );
        text-align: center;
    }

    td.input > input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
    td.input > textarea,
    td.input > select,
    td.input > button,
    td.input > .btn {
        border: none;
        margin: 0;
        text-align: left;
    }

    td.input > input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
    td.input > textarea,
    td.input > select {
        background: transparent !important;
    }

    td.input > input[type="checkbox"],
    td.input > input[type="radio"],
    td.input > input[type="color"] {
        margin: 0 auto;
    }

    td.input:focus-within {
        outline: var( --input_focus_outline_color ) var( --input_focus_outline_width ) solid;
        outline-offset: calc( var( --table_borders_width ) * -1 );
        z-index: 1;
    }

    td.input *:focus-visible { outline: none !important; }

    th.shrink, td.shrink {
        width: 0.1%;
        white-space: nowrap;
    }

/*  ██ Input ███████████████████████████████████████████████████████████████████████████████████████████████████████████████████ */

    label {
        display: block;
        margin: var( --label_margin );
    }

    input,
    textarea,
    select,
    optgroup,
    button,
    [type='button'],
    [type='reset'],
    [type='submit'],
    .btn {
        font-family: inherit;
        font-size: 100%;
        margin: 0;
        text-transform: none;
        line-height: var( --line_height_relative );
    }

    button,
    [type='button'],
    [type='reset'],
    [type='submit'],
    .btn {
        -webkit-appearance: button;
    }

    input,
    textarea,
    select,
    button,
    [type='button'],
    [type='reset'],
    [type='submit'],
    .btn {
        color: var( --input_color );
        background: var( --input_bg );
        border: var( --input_borders );
        padding: var( --input_padding );
    }

    input:focus,
    textarea:focus,
    select:focus {
        outline: var( --input_focus_outline_width ) var( --input_focus_outline_color ) solid;
        outline-offset: var( --input_focus_outline_offset );
    }

    *:disabled {
        filter: saturate( 0% );
        opacity: var( --input_disabled_opacity ) !important;
        cursor: not-allowed !important;
    }

    input[type="text"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="week"],
    input[type="month"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="range"],
    input[type="url"],
    input[type="file"],
    input[list],
    textarea,
    select {
        width: 100%;
    }

    textarea {
        display: block;
        min-height: var( --textarea_min_height );
        overflow: auto;
    }

    ::-webkit-calendar-picker-indicator { filter: invert( var( --input_icon_inverts ) ); }

    input[type="color"] {
        background: transparent;
        border: none;
        padding: 0;
    }

    [type='search'] { -webkit-appearance: textfield; }
    [type='search']::-webkit-search-decoration { -webkit-appearance: none; }

    ::-webkit-file-upload-button {
        -webkit-appearance: button;
        font: inherit;
    }

    fieldset {
        padding: var( --fieldset_padding );
        border: var( --fieldset_borders );
    }

    fieldset *:last-child { margin-bottom: 0; }
    legend { font-weight: var( --legend_font_weight ); }

    /* General form helpers */
    .form_help {
        margin: var( --r_0_5 ) 0 0;
        opacity: 0.7;
        font-size: 95%;
    }

    .form_error {
        margin: var( --r_0_5 ) 0 0;
        font-size: 95%;
        color: var( --c_red );
    }

    .form_help + .form_error,
    .form_error + .form_error { margin: 0; }

    label.required:after {
        content: ' *';
        color: var( --c_red );
    }

/*  ██ Buttons █████████████████████████████████████████████████████████████████████████████████████████████████████████████████ */

    button,
    input[type="reset"],
    input[type="submit"],
    input[type="button"],
    .btn {
        cursor: pointer;
        background: var( --btn_default_bg );
        color: var( --btn_default_color );
        display: inline-flex;
        font-weight: var( --btn_font_weight );
        transition: var( --btn_transition );
        outline-offset: 0;
        text-decoration: none;
    }

    button:hover, button:focus,
    input[type="reset"]:hover, input[type="reset"]:focus,
    input[type="submit"]:hover, input[type="submit"]:focus,
    input[type="button"]:hover, input[type="button"]:focus,
    .btn:hover, .btn:focus {
        outline: var( --btn_focus_outline_width ) var( --btn_focus_outline_color ) solid;
        outline-offset: 0;
    }

    button:active,
    input[type="reset"]:active,
    input[type="submit"]:active,
    input[type="button"]:active,
    .btn:active {
        outline-offset: var( --btn_active_outline_offset );
        outline-width: var( --btn_active_outline_width );
    }

    /* Default outline border color */
    .btn.outline { border-color: var( --btn_outline_border_color ); }

    .btn.red {
        border: 0px solid var( --c_red );
        color: var( --c_red_over );
        background: var( --c_red );
    }

    .btn.orange {
        border: 0px solid var( --c_orange );
        color: var( --c_orange_over );
        background: var( --c_orange );
    }

    .btn.yellow {
        border: 0px solid var( --c_yellow );
        color: var( --c_yellow_over );
        background: var( --c_yellow );
    }

    .btn.green {
        border: 0px solid var( --c_green );
        color: var( --c_green_over );
        background: var( --c_green );
    }

    .btn.cyan {
        border: 0px solid var( --c_cyan );
        color: var( --c_cyan_over );
        background: var( --c_cyan );
    }

    .btn.blue {
        border: 0px solid var( --c_blue );
        color: var( --c_blue_over );
        background: var( --c_blue );
    }

    .btn.purple {
        border: 0px solid var( --c_purple );
        color: var( --c_purple_over );
        background: var( --c_purple );
    }

    .btn.light_red {
        border: 0px solid var( --c_light_red );
        color: var( --c_light_red_over );
        background: var( --c_light_red );
    }

    .btn.light_orange {
        border: 0px solid var( --c_light_orange );
        color: var( --c_light_orange_over );
        background: var( --c_light_orange );
    }

    .btn.light_yellow {
        border: 0px solid var( --c_light_yellow );
        color: var( --c_light_yellow_over );
        background: var( --c_light_yellow );
    }

    .btn.light_green {
        border: 0px solid var( --c_light_green );
        color: var( --c_light_green_over );
        background: var( --c_light_green );
    }

    .btn.light_cyan {
        border: 0px solid var( --c_light_cyan );
        color: var( --c_light_cyan_over );
        background: var( --c_light_cyan );
    }

    .btn.light_blue {
        border: 0px solid var( --c_light_blue );
        color: var( --c_light_blue_over );
        background: var( --c_light_blue );
    }

    .btn.light_purple {
        border: 0px solid var( --c_light_purple );
        color: var( --c_light_purple_over );
        background: var( --c_light_purple );
    }

    /* Enable border width */
    .btn.outline {
        background: none;
        border-width: var( --btn_outline_border_width );
    }

    .btn.outline.red { color: var( --c_red ); }
    .btn.outline.orange { color: var( --c_orange ); }
    .btn.outline.yellow { color: var( --c_yellow ); }
    .btn.outline.green { color: var( --c_green ); }
    .btn.outline.cyan { color: var( --c_cyan ); }
    .btn.outline.blue { color: var( --c_blue ); }
    .btn.outline.purple { color: var( --c_purple ); }
    .btn.outline.light_red { color: var( --c_light_red ); }
    .btn.outline.light_orange { color: var( --c_light_orange ); }
    .btn.outline.light_yellow { color: var( --c_light_yellow ); }
    .btn.outline.light_green { color: var( --c_light_green ); }
    .btn.outline.light_cyan { color: var( --c_light_cyan ); }
    .btn.outline.light_blue { color: var( --c_light_blue ); }
    .btn.outline.light_purple { color: var( --c_light_purple ); }

/*  ██ Input groups ████████████████████████████████████████████████████████████████████████████████████████████████████████████ */

    .input_group { display: flex; }

    .input_group > *:not( :first-child ):not( .outline ) {
        border-left: none !important;
    }

    .input_group > .btn,
    .input_group > input[type="reset"],
    .input_group > input[type="submit"],
    .input_group > input[type="button"],
    .input_group > button {
        white-space: nowrap;
    }

    .input_group > *:hover,
    .input_group > *:focus,
    .input_group > *:active { z-index: 1; }

    .input_group span.icon_btn {
        background: var( --btn_default_bg );
        color: var( --btn_default_color );
        border: var( --input_borders );
        padding: var( --input_padding );
        display: inline-flex;
    }

/*  ██ Input/button sizes ██████████████████████████████████████████████████████████████████████████████████████████████████████ */

    input.s,
    textarea.s,
    select.s,
    button.s,
    .btn.s {
        padding: var( --input_s_padding );
        font-size: var( --input_s_font_size );
        line-height: var( --input_s_line_height );
    }

    input.l,
    textarea.l,
    select.l,
    button.l,
    .btn.l {
        padding: var( --input_l_padding );
        font-size: var( --input_l_font_size );
        line-height: var( --input_l_line_height );
    }

    input.xl,
    textarea.xl,
    select.xl,
    button.xl,
    .btn.xl {
        padding: var( --input_xl_padding );
        font-size: var( --input_xl_font_size );
        line-height: var( --input_xl_line_height );
    }

/*  ██ Alerts ██████████████████████████████████████████████████████████████████████████████████████████████████████████████████ */

    .alert {
        margin-bottom: var( --alert_margin_bottom );
        padding: var( --alert_padding );
        color:  var( --alert_default_color );
        background: var( --alert_default_bg );
        position: relative;
    }

    .alert > h1:first-child,
    .alert > h2:first-child,
    .alert > h3:first-child,
    .alert > h4:first-child,
    .alert > h5:first-child,
    .alert > h6:first-child,
    .alert > .dismiss + h1,
    .alert > .dismiss + h2,
    .alert > .dismiss + h3,
    .alert > .dismiss + h4,
    .alert > .dismiss + h5,
    .alert > .dismiss + h6 { margin-top: 0; }
    .alert > *:last-child { margin-bottom: 0; }

    .alert > .dismiss {
        float: right;
        margin: 0 0 0 var( --r );
    }

    .alert.red {
        border: 0px solid var( --c_red );
        color: var( --c_red_over );
        --dismiss_color : var( --c_red_over );
        background: var( --c_red );
    }

    .alert.orange {
        border: 0px solid var( --c_orange );
        color: var( --c_orange_over );
        --dismiss_color : var( --c_orange_over );
        background: var( --c_orange );
    }

    .alert.yellow {
        border: 0px solid var( --c_yellow );
        color: var( --c_yellow_over );
        --dismiss_color : var( --c_yellow_over );
        background: var( --c_yellow );
    }

    .alert.green {
        border: 0px solid var( --c_green );
        color: var( --c_green_over );
        --dismiss_color: var( --c_green_over );
        background: var( --c_green );
    }

    .alert.cyan {
        border: 0px solid var( --c_cyan );
        color: var( --c_cyan_over );
        --dismiss_color: var( --c_cyan_over );
        background: var( --c_cyan );
    }

    .alert.blue {
        border: 0px solid var( --c_blue );
        color: var( --c_blue_over );
        --dismiss_color: var( --c_blue_over );
        background: var( --c_blue );
    }

    .alert.purple {
        border: 0px solid var( --c_purple );
        color: var( --c_purple_over );
        --dismiss_color: var( --c_purple_over );
        background: var( --c_purple );
    }

    .alert.light_red {
        border: 0px solid var( --c_light_red );
        color: var( --c_light_red_over );
        --dismiss_color: var( --c_light_red_over );
        background: var( --c_light_red );
    }

    .alert.light_orange {
        border: 0px solid var( --c_light_orange );
        color: var( --c_light_orange_over );
        --dismiss_color: var( --c_light_orange_over );
        background: var( --c_light_orange );
    }

    .alert.light_yellow {
        border: 0px solid var( --c_light_yellow );
        color: var( --c_light_yellow_over );
        --dismiss_color: var( --c_light_yellow_over );
        background: var( --c_light_yellow );
    }

    .alert.light_green {
        border: 0px solid var( --c_light_green );
        color: var( --c_light_green_over );
        --dismiss_color: var( --c_light_green_over );
        background: var( --c_light_green );
    }

    .alert.light_cyan {
        border: 0px solid var( --c_light_cyan );
        color: var( --c_light_cyan_over );
        --dismiss_color: var( --c_light_cyan_over );
        background: var( --c_light_cyan );
    }

    .alert.light_blue {
        border: 0px solid var( --c_light_blue );
        color: var( --c_light_blue_over );
        --dismiss_color: var( --c_light_blue_over );
        background: var( --c_light_blue );
    }

    .alert.light_purple {
        border: 0px solid var( --c_light_purple );
        color: var( --c_light_purple_over );
        --dismiss_color: var( --c_light_purple_over );
        background: var( --c_light_purple );
    }

    .site_alert {
        width: 100%;
        margin: 0;
    }

/*  ██ Panels ██████████████████████████████████████████████████████████████████████████████████████████████████████████████████ */

    .panel {
        border: var( --panel_border );
        color: var( --panel_color );
    }

    .panel > header,
    .panel > .body,
    .panel > footer {
        padding: var( --panel_padding );
    }

    .panel > header,
    .panel > footer {
        background: var( --panel_header_footer_bg );
    }

    .panel > header {
        border-bottom: var( --panel_border );
        font-weight: 700;
    }

    .panel > .body {
        background: var( --panel_body_bg );
        overflow-y: auto;
    }

    .panel > footer { border-top: var( --panel_border ); }

    .panel > header > .dismiss {
        float: right;
        margin: 0 0 0 var( --r );
    }

    .panel.stretch {
        display: flex;
        height: 100%;
        flex-direction: column;
    }

    .panel.stretch .body { flex: 1; }

/*  ██ Modals ██████████████████████████████████████████████████████████████████████████████████████████████████████████████████ */

    .modal { display: none; }

    .modal > .body > *:last-child { margin-bottom: 0; }

    .modal.active {
        display: flex;
        flex-direction: column;
        position: fixed;
        margin: 0 auto;
        left: 0;
        right: 0;
        width: var( --modal_width );
        max-width: var( --modal_max_width );
        max-height: var( --modal_max_height );
        top: var( --modal_top );
        overflow: hidden;
        color: var( --modal_color );
        background: var( --modal_bg );
        border: var( --modal_border );
        z-index: var( --modal_z );
    }

    .modal.s { width: var( --modal_s_width ); }
    .modal.l { width: var( --modal_l_width ); }

    .modal.full {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        max-height: 100vh;
        border: none;
        width: 100%;
        max-width: 100%;
    }

    .modal.processing > .body {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

/*  ██ Grid ████████████████████████████████████████████████████████████████████████████████████████████████████████████████████ */

    .row {
        display: grid;
        gap: var( --r_1_5 );
        grid-template-columns: repeat( 12, 1fr );
    }

    .row.no_gap { gap: 0; }

    .col_1 { grid-column: span 1; }
    .col_2 { grid-column: span 2; }
    .col_3 { grid-column: span 3; }
    .col_4 { grid-column: span 4; }
    .col_5 { grid-column: span 5; }
    .col_6 { grid-column: span 6; }
    .col_7 { grid-column: span 7; }
    .col_8 { grid-column: span 8; }
    .col_9 { grid-column: span 9; }
    .col_10 { grid-column: span 10; }
    .col_11 { grid-column: span 11; }
    .col_12 { grid-column: span 12; }

    @media( max-width: 1000px ) { .row.break_1000 { display: block; } }
    @media( max-width: 900px )  { .row.break_900  { display: block; } }
    @media( max-width: 800px )  { .row.break_800  { display: block; } }
    @media( max-width: 700px )  { .row.break_700  { display: block; } }
    @media( max-width: 600px )  { .row.break_600  { display: block; } }
    @media( max-width: 400px )  { .row.break_400  { display: block; } }

    .row_flex {
        display: flex;
        justify-content: space-between;
    }

    .col_border_collapse {
        margin-left: calc( --layout_borders_width * -1 );
    }

/*  ██ TODO: Dropdowns █████████████████████████████████████████████████████████████████████████████████████████████████████████ */

    .dropdown { position: relative; }

    .dropdown menu {
        border: solid var( --menu_borders_width ) var( --menu_borders_color );
        background: var( --menu_sub_menu_bg );
        visibility: hidden;
        opacity: 0;
        display: none;
        text-align: left;
        margin: 0;
        width: 100%;
        width: calc( 100% + var( --menu_borders_width ) * 2 );
        min-width: 12rem;
        position: absolute;
        left: calc( var( --menu_borders_width ) * -1 );
        top: calc( 100% - var( --menu_borders_width ) );
        z-index: var( --dropdown_z );
    }

    .dropdown menu menu {
        top: calc( var( --menu_borders_width ) * -1 );
        left: 100%;
    }

    .dropdown:hover > menu,
    .dropdown:focus-within > menu,
    .dropdown menu:hover,
    .dropdown menu:focus-within,
    .dropdown menu > li > *:hover ~ menu,
    .dropdown menu > li > *:focus-within ~ menu {
        opacity: 1; /* Remove if using with JS dropdowns! */
        visibility: visible;
        display: block;
    }

    .dropdown.up > menu {
        bottom: calc( 100% - var( --menu_borders_width ) );
        left: calc( var( --menu_borders_width ) * -1 );
        top: initial;
        right: initial;
    }

    .dropdown.down > menu {
        top: calc( 100% - var( --menu_borders_width ) );
        left: calc( var( --menu_borders_width ) * -1 );
    }

    .dropdown.left > menu {
        top: calc( var( --menu_borders_width ) * -1 );
        left: calc( -100% - var( --menu_borders_width ) * 2 );
    }

    .dropdown.right > menu {
        top: calc( var( --menu_borders_width ) * -1 );
        left: 100%;
    }

/*  ██ TODO: Icons █████████████████████████████████████████████████████████████████████████████████████████████████████████████ */

    img.icon, svg.icon {
        width: var( --icon_width );
        height: var( --icon_height );
        margin: var( --icon_margin );
        top: var( --icon_top_offset );
        position: relative;
    }

     /* External icon helper class */
     /* - Since external SVG's cannot be styled via CSS via "fill" and "stroke" we have to use an inversion filter */
     /*   to support black/white icons */
    .icon_ext { filter: invert( var( --icon_ext_filter ) ); }

    .btn.orange .icon_ext,
    .btn.yellow .icon_ext,
    .btn.green .icon_ext,
    .btn.cyan .icon_ext,
    .btn.light_red .icon_ext,
    .btn.light_orange .icon_ext,
    .btn.light_yellow .icon_ext,
    .btn.light_green .icon_ext,
    .btn.light_cyan .icon_ext,
    .btn.light_blue .icon_ext,
    .btn.light_purple .icon_ext { --icon_ext_filter : 0; }

    .btn.red .icon_ext,
    .btn.blue .icon_ext,
    .btn.purple .icon_ext { --icon_ext_filter : 1; }

    img.icon_inline,
    svg.icon_inline {
        display: inline-flex;
        align-self: center;
        height: 1.2em;
        width: 1.2em;
        margin: 0 0.4em;
        position: static;
    }

/*  ██ Rabbit ██████████████████████████████████████████████████████████████████████████████████████████████████████████████████ */

    .rabbit_circle {
        background: var( --c_blue );
        border-radius: 50%;
        width: 100px;
        height: 100px;
        margin: 0 auto 0;
        position: relative;
        z-index: 5;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .rabbit_bg {
        background: var( --c_light_blue );
        width: 100px;
        height: 55px;
        position: absolute;
        top: 0;
        z-index: 10;
    }

    .rabbit_running {
        display: block;
        width: 75px;
        height: 75px;
        margin: 0 auto;
        position: relative;
        z-index: 15;
    }

/*  ██ Utility classes █████████████████████████████████████████████████████████████████████████████████████████████████████████ */

    /* NOTE: Must be at end to override previously defined styling (these classes have priority) */

    /* No text decoration */
    .no_decorate { text-decoration: none !important; }

    /* Text/float alignment */
    .text_center { text-align: center; }
    .text_right { text-align: right; }
    .text_left { text-align: left; }
    .float_right, .pull_right { float: right; }
    .float_left, .pull_left { float: left; }

    .clearfix:after {
        display: block;
        height: 0;
        content: "";
        clear: both;
    }

    .center_block {
        display: block;
        margin: 0 auto;
    }

    .justify_center { justify-content: center; }

    /* Font */
    .uppercase { text-transform: uppercase !important; }
    .font_monospace { font-family: monospace; }
    .font_weight_100 { font-weight: 100; }
    .font_weight_200 { font-weight: 200; }
    .font_weight_300 { font-weight: 300; }
    .font_weight_400 { font-weight: 400; }
    .font_weight_500 { font-weight: 500; }
    .font_weight_600 { font-weight: 600; }
    .font_weight_700 { font-weight: 700; }
    .font_size_70 { font-size: 70%; }
    .font_size_75 { font-size: 75%; }
    .font_size_80 { font-size: 80%; }
    .font_size_85 { font-size: 85%; }
    .font_size_90 { font-size: 90%; }
    .font_size_95 { font-size: 95%; }
    .font_size_105 { font-size: 105%; }
    .font_size_110 { font-size: 110%; }
    .font_size_115 { font-size: 115%; }
    .font_size_120 { font-size: 120%; }
    .font_size_125 { font-size: 125%; }
    .font_size_150 { font-size: 150%; }
    .font_size_175 { font-size: 175%; }
    .font_size_200 { font-size: 200%; }

    .no_wrap { white-space: nowrap !important; }

    /* Hidden class */
    .hidden,
    [hidden] { display: none !important; }

    /* Dismiss X button */
    .dismiss::before {
        content: "\d7";
        font-size: var( --dismiss_x_size );
        color: var( --dismiss_color );
        border: var( --dismiss_color ) var( --dismiss_border_width ) solid;
        width: var( --dismiss_box_size );
        height: var( --dismiss_box_size );
        transition: var( --btn_transition );
        overflow: hidden;
        justify-content: center;
        align-items: center;
        display: flex;
        cursor: pointer;
    }

    .dismiss:hover::before,
    .dismiss:focus::before {
        outline: var( --btn_focus_outline_width ) var( --btn_focus_outline_color ) solid;
        outline-offset: 0;
    }

    .dismiss:active::before {
        outline-offset: var( --btn_active_outline_offset );
        outline-width: var( --btn_active_outline_width );
    }

    /* Opacity fade-in removal class */
    .fade_in,
    .fade_out {
        transition: opacity var( --fade_transition );
        opacity: 0;
    }

    /* Interface body override */
    #override {
        z-index: var( --override_z );
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: var( --interface_override_bg );
        backdrop-filter: blur( 5px );
        transform: scale( 1.1 );
        display: none;
        visibility: hidden;
    }

    #override.active {
        display: block;
        visibility: visible;
    }

    /* Spinner */
    .spinner {
        background: var( --spinner_img );
        height: var( --spinner_size );
        width: var( --spinner_size );
        background-size: var( --spinner_size ) var( --spinner_size );
        animation: spin 3s linear infinite;
        margin-bottom: var( --spinner_margin_bottom );
        filter: invert( var( --spinner_invert ) );
    }

    @keyframes spin { 
        100% { transform : rotate( 360deg ); }
    }

    .spinner.lg {
        height: var( --spinner_size_lg );
        width: var( --spinner_size_lg );
        background-size: var( --spinner_size_lg ) var( --spinner_size_lg );
    }

    /* Carets */
    .caret {
        display: inline-block;
        margin: var( --caret_margin );
    }

    .caret.up:before    { content: "\25B4"; }
    .caret.right:before { content: "\25B8"; }
    .caret.down:before  { content: "\25BE"; }
    .caret.left:before  { content: "\25C2"; }

    /* Width */
    .w25  { width: 25%; }
    .w50  { width: 50%; }
    .w75  { width: 75%; }
    .w100 { width: 100%; }

    /* Responsive */
    .responsive_wrap {
        margin-bottom: var( --general_el_margin_bottom );
        max-width: 100%;
        overflow-x: auto;
    }

    .responsive_wrap *:last-child { margin-bottom: 0; }

    /* Margin */
    .m_0   { margin: 0 !important; }
    .m_025 { margin: var( --r_0_25 ) !important; }
    .m_05  { margin: var( --r_0_5 ) !important; }
    .m_075 { margin: var( --r_0_75 ) !important; }
    .m_1   { margin: var( --r ) !important; }
    .m_1_5 { margin: var( --r_1_5 ) !important; }
    .m_2   { margin: var( --r_2 ) !important; }
    .m_3   { margin: var( --r_3 ) !important; }
    .m_4   { margin: var( --r_4 ) !important; }

    .m_t_0    { margin-top: 0 !important; }
    .m_t_0_25 { margin-top: var( --r_0_25 ) !important; }
    .m_t_0_5  { margin-top: var( --r_0_5 ) !important; }
    .m_t_0_75 { margin-top: var( --r_0_75 ) !important; }
    .m_t_1    { margin-top: var( --r ) !important; }
    .m_t_1_5  { margin-top: var( --r_1_5 ) !important; }
    .m_t_2    { margin-top: var( --r_2 ) !important; }
    .m_t_3    { margin-top: var( --r_3 ) !important; }
    .m_t_4    { margin-top: var( --r_4 ) !important; }

    .m_r_0     { margin-right: 0 !important; }
    .m_r_0_25  { margin-right: var( --r_0_25 ) !important; }
    .m_r_0_5   { margin-right: var( --r_0_5 ) !important; }
    .m_r_0_75  { margin-right: var( --r_0_75 ) !important; }
    .m_r_1     { margin-right: var( --r ) !important; }
    .m_r_1_5   { margin-right: var( --r_1_5 ) !important; }
    .m_r_2     { margin-right: var( --r_2 ) !important; }
    .m_r_3     { margin-right: var( --r_3 ) !important; }
    .m_r_4     { margin-right: var( --r_4 ) !important; }
    .m_r_auto  { margin-right: auto !important; }

    .m_b_0    { margin-bottom: 0 !important; }
    .m_b_0_25 { margin-bottom: var( --r_0_25 ) !important; }
    .m_b_0_5  { margin-bottom: var( --r_0_5 ) !important; }
    .m_b_0_75 { margin-bottom: var( --r_0_75 ) !important; }
    .m_b_1    { margin-bottom: var( --r ) !important; }
    .m_b_1_5  { margin-bottom: var( --r_1_5 ) !important; }
    .m_b_2    { margin-bottom: var( --r_2 ) !important; }
    .m_b_3    { margin-bottom: var( --r_3 ) !important; }
    .m_b_4    { margin-bottom: var( --r_4 ) !important; }

    .m_l_0     { margin-left: 0 !important; }
    .m_l_0_25  { margin-left: var( --r_0_25 ) !important; }
    .m_l_0_5   { margin-left: var( --r_0_5 ) !important; }
    .m_l_0_75  { margin-left: var( --r_0_75 ) !important; }
    .m_l_1     { margin-left: var( --r ) !important; }
    .m_l_1_5   { margin-left: var( --r_1_5 ) !important; }
    .m_l_2     { margin-left: var( --r_2 ) !important; }
    .m_l_3     { margin-left: var( --r_3 ) !important; }
    .m_l_4     { margin-left: var( --r_4 ) !important; }
    .m_l_auto  { margin-left: auto !important; }

    .m_lr_auto {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Padding */
    .p_0    { padding: 0 !important; }
    .p_0_25 { padding: var( --r_0_25 ) !important; }
    .p_0_5  { padding: var( --r_0_5 ) !important; }
    .p_0_75 { padding: var( --r_0_75 ) !important; }
    .p_1    { padding: var( --r ) !important; }
    .p_1_5  { padding: var( --r_1_5 ) !important; }
    .p_2    { padding: var( --r_2 ) !important; }
    .p_3    { padding: var( --r_3 ) !important; }
    .p_4    { padding: var( --r_4 ) !important; }

    .p_t_0    { padding-top: 0 !important; }
    .p_t_0_25 { padding-top: var( --r_0_25 ) !important; }
    .p_t_0_5  { padding-top: var( --r_0_5 ) !important; }
    .p_t_0_75 { padding-top: var( --r_0_75 ) !important; }
    .p_t_1    { padding-top: var( --r ) !important; }
    .p_t_1_5  { padding-top: var( --r_1_5 ) !important; }
    .p_t_2    { padding-top: var( --r_2 ) !important; }
    .p_t_3    { padding-top: var( --r_3 ) !important; }
    .p_t_4    { padding-top: var( --r_4 ) !important; }

    .p_r_0    { padding-right: 0 !important; }
    .p_r_0_25 { padding-right: var( --r_0_25 ) !important; }
    .p_r_0_5  { padding-right: var( --r_0_5 ) !important; }
    .p_r_0_75 { padding-right: var( --r_0_75 ) !important; }
    .p_r_1    { padding-right: var( --r ) !important; }
    .p_r_1_5  { padding-right: var( --r_1_5 ) !important; }
    .p_r_2    { padding-right: var( --r_2 ) !important; }
    .p_r_3    { padding-right: var( --r_3 ) !important; }
    .p_r_4    { padding-right: var( --r_4 ) !important; }

    .p_b_0    { padding-bottom: 0 !important; }
    .p_b_0_25 { padding-bottom: var( --r_0_25 ) !important; }
    .p_b_0_5  { padding-bottom: var( --r_0_5 ) !important; }
    .p_b_0_75 { padding-bottom: var( --r_0_75 ) !important; }
    .p_b_1    { padding-bottom: var( --r ) !important; }
    .p_b_1_5  { padding-bottom: var( --r_1_5 ) !important; }
    .p_b_2    { padding-bottom: var( --r_2 ) !important; }
    .p_b_3    { padding-bottom: var( --r_3 ) !important; }
    .p_b_4    { padding-bottom: var( --r_4 ) !important; }

    .p_l_0    { padding-left: 0 !important; }
    .p_l_0_25 { padding-left: var( --r_0_25 ) !important; }
    .p_l_0_5  { padding-left: var( --r_0_5 ) !important; }
    .p_l_0_75 { padding-left: var( --r_0_75 ) !important; }
    .p_l_1    { padding-left: var( --r ) !important; }
    .p_l_1_5  { padding-left: var( --r_1_5 ) !important; }
    .p_l_2    { padding-left: var( --r_2 ) !important; }
    .p_l_3    { padding-left: var( --r_3 ) !important; }
    .p_l_4    { padding-left: var( --r_4 ) !important; }

    /* Display/flex */
    .display_block        { display: block !important; }
    .display_inline       { display: inline !important; }
    .display_inline_block { display: inline-block !important; }
    .display_flex         { display: flex !important; }
    .display_inline_flex  { display: inline-flex !important; }

    .flex_row      { flex-direction: row; }
    .flex_column   { flex-direction: column; }
    .flex_h_center { justify-content: center; }
    .flex_v_center { align-items: center; }

    .flex_h_center_self { justify-self: center; }
    .flex_v_center_self { align-self: center; }

    /* Only screenreader */
    .sr_only {
        border: 0;
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
        word-wrap: normal !important;
    }

    /* Interactable */
    .clickable { cursor: pointer; }

    /* Opacity */
    .o_10 { opacity: 0.1 !important; }
    .o_20 { opacity: 0.2 !important; }
    .o_30 { opacity: 0.3 !important; }
    .o_40 { opacity: 0.4 !important; }
    .o_50 { opacity: 0.5 !important; }
    .o_60 { opacity: 0.6 !important; }
    .o_70 { opacity: 0.7 !important; }
    .o_80 { opacity: 0.8 !important; }
    .o_90 { opacity: 0.9 !important; }

    /* Lists */
    ul.unstyled, ol.unstyled {
        list-style: none;
        margin-left: 0;
    }