:root {
    /*
        Spacing and corners
    */
    --mobile-minimum-target-size: 40px;
    --baseline: 22px;
    --grid-baseline: 22px;
    --gutter: 15px;
    --element-spacing: 8px;
    /**/
    --rounded-border-radius: 2px;
    --box-padding: 15px;
    --btn-group-child-spacing: 12px;
    --btn-group-bottom-margin: 0px;
    /*
        Brand colours
    */
    --brand-color1: #96c11f; /*green*/
    --brand-color2: #262d80; /*tp blue*/

    --site-main-color: #d6d5d5;
    --site-bg-color: #f9f9f9;
    --modal-bg-color: rgba(0,0,0,0.38); /* Spinner/modal background */
    /* 
        Header
    */
    --header-bg-color: #ffffff;
    --header-border-color: #e6e6e6;
    --header-font-color: #404040;
    --header-font-weight: normal;
    --header-title-font-size: 24px;
    --header-button-bg-color: #262d80;
    --header-button-font-color: #ffffff;
    /* 
        Footer
    */
    --footer-bg-color: #ffffff;
    --footer-border-color: #e6e6e6;
    --footer-font-color: #404040;
    --footer-font-weight: normal;
    /*
        Base fonts
    */
    /*--typeface: url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');*/
    --font-family: "Open Sans", sans-serif;
    --base-font-color: #666666;
    --base-font-color-alt: #404040;
    --font-size-base: 16px;
    --font-size-reduced: 12px;
    /**/
    --h1-font-size: 40px;
    --h1-line-height: 48px;
    --h1-font-weight: 700;
    --h1-color: inherit;
    /**/
    --h2-font-size: 22px;
    --h2-line-height: 1.4;
    --h2-font-weight: 600;
    --h2-color: inherit;
    /**/
    --h3-font-size: 20px;
    --h3-line-height: 1.4;
    --h3-font-weight: 600;
    --h3-color: inherit;
    /**/
    --h4-font-size: 18px;
    --h4-line-height: 1.4;
    --h4-font-weight: 600;
    --h4-color: inherit;
    /* 
    Buttons
        First, common properties:
    */
    --button-pading-top: 10px;
    --button-pading-sides: 30px;
    --button-border-radius: 6px;
    --button-border-width: 2px;
    --button-font-size: 1em;
    --button-font-weight: 600;
    --button-text-transform: none;
    /*
    Second, override properties:
    */
    --button-disabled-bg-color: inherit;
    --button-disabled-text-color: inherit;
    --button-disabled-border-color: inherit;
    /*---*/
    --button-default-bg: #606080;
    --button-default-color: #ffffff;
    --button-default-border-color: #ffffff;
    /*---*/
    --button-progressive-bg: var(--brand-color1);
    --button-progressive-color: #ffffff;
    --button-progressive-border-color: #ffffff;
    /*---*/
    --button-destructive-bg: #d11b1b;
    --button-destructive-color: #ffffff;
    --button-destructive-border-color: #ffffff;
    /*---*/
    --button-ghost-bg: transparent;
    --button-ghost-color: var(--base-font-color);
    --button-ghost-border-color: var(--base-font-color);
    /* ---  */
    --button-font-size-reduced: 12px;
    /*
        panels
    */
    --panel-bg-color: #ffffff;
    --panel-box-shadow: 0px 5px 15px rgb(0, 0, 0, 0.15);
    /*
        box-shadow
    */
    --box-shadow: 0px 5px 15px rgb(0, 0, 0, 0.15);
    /*
        Tooltips
    */
    --bubble-bg-color: #333333;
    --bubble-text-color: #ffffff;
    --bubble-bg-color-critical: #dd0000;
    --bubble-text-color-critical: #ffffff;
    --tooltip-cursor: help;
    /*
        Forms
    */
    --form-input-bg-color: #ffffff;
    --form-input-font-color: #333333;
    --form-input-border-color: #333333;
    --form-input-border-width: 3px;
    --form-validation-color: var(--text-error);
    --form-helper-text-color: inherit;
    --form-helper-text-size: var(--font-size-reduced);
    --form-disabled-background-color: #dddddd;
}