:root {
    --html-font-size: 82%;
    --body-font: var(--font);
    --body-background-color: var(--gs-white);
    --body-background: none;
    --body-color: var(--gs-hard);
    --font-family: "Roboto", sans-serif;
    --font-size: 100%;
    --font: normal var(--font-size) var(--font-family);
    --border-style: solid;
    --border-width: 1px;
    --border-radius-default: 0.25rem;
    --border-radius-top-left: var(--border-radius-default);
    --border-radius-top-right: var(--border-radius-default);
    --border-radius-bottom-right: var(--border-radius-default);
    --border-radius-bottom-left: var(--border-radius-default);
    --border-radius: var(--border-radius-top-left) var(--border-radius-top-right) var(--border-radius-bottom-right) var(--border-radius-bottom-left);
    /*--animation-duration: 0.2s;*/
    --inherit: inherit;


    /* COLORS */
    --gs-black: #000000;
    --gs-hard: #222;
    --gs-dark: #303030;
    --gs-medium-dark: #838383;
    --gs-medium: #dddddd;
    --gs-medium-light: #e1e1e1;
    --gs-light: #f5f5f5;
    --gs-white: #ffffff;


    --bg-dark: #003444;
    --bg-medium-dark: #005e7a;
    --bg-medium: #00799e;
    --bg-medium-light: #37b2d8;
    --bg-light: #9ee8ff;


    --text-black: black;
    --text-white: white;
    --text-dark: #133a6c;
    --text-medium: #216fdf;
    --text-light: #c2ddff;

    --text-required: #db4242;
    --text-error: #db4242;
    --text-link: #4e89da;

    --wx-control-padding: 0;
    --wx-control-margin: 0.15em;
    --wx-control-label-color: var(--gs-dark);
    --wx-control-label-font-weight: bold;
    --wx-control-label-font-size: 1em;
    --wx-control-label-required-color: var(--text-required);
    --wx-control-label-after-content: '';
    --wx-control-value-color: var(--inherit);
    --wx-control-error-background-color: var(--gs-white);
    --wx-control-error-border-color: var(--gs-dark);
    --wx-control-error-text-color: var(--text-error);
    --wx-control-error-max-width: 12rem;
    --wx-control-error-font-size: 0.85em;

    --wx-control-addremove-add-background-color: darken(var(--gs-medium-dark), 20%);
    --wx-control-addremove-add-color: var(--gs-white);
    --wx-control-addremove-remove-background-color: darken(var(--gs-medium-dark), 20%);
    --wx-control-addremove-remove-color: var(--gs-white);

    --wx-control-mod-add-background-color: #b7ffd8;
    --wx-control-mod-add-color: #52ac7e;
    --wx-control-mod-add-border: var(--border-style) var(--border-width) #52ac7e;
    --wx-control-mod-add-border-bottom: var(--border-style) var(--border-width) #52ac7e;
    --wx-control-mod-remove-background-color: #ffd8d8;
    --wx-control-mod-remove-color: #e03434;
    --wx-control-mod-remove-border: var(--border-style) var(--border-width) #e03434;
    --wx-control-mod-remove-border-bottom: var(--border-style) var(--border-width) #e03434;
    --wx-control-mod-update-background-color: #bfe5ff;
    --wx-control-mod-update-color: #195c8a;
    --wx-control-mod-update-border: var(--border-style) var(--border-width) #195c8a;
    --wx-control-mod-update-border-bottom: var(--border-style) var(--border-width) #195c8a;

    --message-padding: 10px;
    --message-margin: 0 0 1rem 0;
    --message-info-background-color: #008dcb;
    --message-info-color: var(--gs-white);
    --message-info-border: var(--border-style) var(--border-width) #006997;
    --message-warning-background-color: #ff9400;
    --message-warning-color: var(--gs-white);
    --message-warning-border: var(--border-style) var(--border-width) #e18300;
    --message-error-background-color: #b00020;
    --message-error-color: var(--gs-white);
    --message-error-border: var(--border-style) var(--border-width) #890019;


    --wx-textbox-background-color: var(--gs-white);
    --wx-textbox-color: var(--gs-hard);
    --wx-textbox-border: var(--border-style) var(--border-width) var(--gs-medium);
    --wx-textbox-border-bottom: var(--border-style) var(--border-width) var(--gs-medium);
    --wx-textbox-padding: 0.4em;
    --wx-textbox-placeholder-color: darken(var(--gs-medium),10%);
    --wx-textbox-search-color: var(--gs-black);

    --wx-checkbox-border: var(--border-style) var(--border-width) var(--gs-medium);
    --wx-checkbox-padding: 0.4em;

    --wx-combobox-padding: 0.4em;
    --wx-combobox-background-color: var(--gs-white);
    --wx-combobox-border: var(--border-style) var(--border-width) var(--gs-medium);
    --wx-combobox-border-bottom: var(--border-style) var(--border-width) var(--gs-medium);
    --wx-combobox-arrow-color: var(--gs-black);
    --wx-combobox-list-background-color: var(--gs-white);
    --wx-combobox-list-border: var(--border-style) var(--border-width) var(--gs-medium);
    --wx-combobox-list-shadow: 0.125rem 0.125rem 0.625rem var(--gs-medium-dark);
    --wx-combobox-list-padding: 0.3em;
    --wx-combobox-list-maxheight: 18.75em;
    --wx-combobox-list-item-color: var(--gs-hard);
    --wx-combobox-list-item-padding: 0.15em;
    --wx-combobox-list-item-minheight: 1.3em;
    --wx-combobox-list-item-highlight-color: blue;
    --wx-combobox-list-item-highlight-font-weight: bold;
    --wx-combobox-list-item-selected-background-color: blue;
    --wx-combobox-list-item-selected-color: var(--gs-white);
    --wx-combobox-list-item-hover-color: var(--gs-hard);
    --wx-combobox-list-item-hover-background-color: var(--gs-medium-light);
    --wx-combobox-list-item-deprecated-background-color: var(--gs-light);
    --wx-combobox-list-item-deprecated-color: var(--gs-medium-dark);
    --wx-combobox-list-item-deprecated-font-size: 0.8em;
    --wx-combobox-message-background-color: var(--gs-dark);
    --wx-combobox-message-color: var(--text-white);
    --wx-combobox-message-font-size: 0.85em;
    --wx-combobox-message-padding: 0.25em;
    --wx-combobox-suggestion-color: darken(var(--gs-medium),10%);



    --wx-dropdown-background-color: var(--gs-white);
    --wx-dropdown-color: var(--gs-hard);
    --wx-dropdown-border-color: var(--gs-medium);
    --wx-dropdown-padding: .4em .4em .4em .4em;
    --wx-dropdown-radius: var(--border-radius);

    --tooltip-background-color: #f7fade;
    --tooltip-color: var(--gs-black);
    --tooltip-shadow: 0.125rem 0.125rem 0.625rem var(--gs-medium-dark);


    --wx-link-color: blue;

    --wx-button-padding: 4px;
    --wx-button-background-color: var(--gs-medium-light);
    --wx-button-color: var(--gs-black);
    --wx-button-border: var(--border-style) var(--border-width) var(--gs-medium-dark);
    --wx-button-border-radius: var(--border-radius);
    --wx-button-border-color: var(--gs-medium);

    /*--wx-section-margin: 1.4em 0 1.4em 0;*/
    --wx-section-margin: 0 0 0 0;
    --wx-section-font-size: 1.0rem;
    --wx-section-header-padding: 0.7em 0.3em 0.7em 0.7em;
    --wx-section-header-background-color: none;
    --wx-section-header-background: linear-gradient(to bottom, darken(var(--gs-medium),5%), var(--gs-medium-light));
    /*--wx-section-header-background: linear-gradient(to bottom, --gs-black, --gs-dark);*/
    --wx-section-header-color: var(--gs-black);
    --wx-section-header-font-size: 1.2em;
    --wx-section-header-font-weight: bold;
    --wx-section-header-border-top: none; 
    --wx-section-header-border-right: none; 
    --wx-section-header-border-bottom: var(--border-style) var(--border-width) var(--gs-medium-light);
    --wx-section-header-border-left: none;
    --wx-section-header-border-radius: var(--border-radius-top-left) var(--border-radius-top-right) 0 0;
    --wx-section-body-padding: 0.5em;
    --wx-section-body-background: linear-gradient(to bottom, var(--gs-light), var(--gs-light));
    --wx-section-body-color: --inherit;
    --wx-section-body-border-top: none;
    --wx-section-body-border-right: var(--border-style) var(--border-width) var(--gs-medium-light);
    --wx-section-body-border-bottom: var(--border-style) var(--border-width) var(--gs-medium-light);
    --wx-section-body-border-left: var(--border-style) var(--border-width) var(--gs-medium-light);
    --wx-section-body-border-radius: 0 0 var(--border-radius-bottom-right) var(--border-radius-bottom-left);
    --wx-section-tool-font-size: 1.0em;
    --wx-section-tool-margin: 0 0.3em 0 0.3em;
    --wx-section-tool-color: var(--gs-dark);

    --wx-section-container-padding: 0.2em;
    --wx-section-container-margin: 0.2em;
    --wx-section-container-background-color: transparent;
    --wx-section-container-border-top: var(--border-style) var(--border-width) var(--gs-medium-light);
    --wx-section-container-border-right: var(--border-style) var(--border-width) var(--gs-medium-light);
    --wx-section-container-border-bottom: var(--border-style) var(--border-width) var(--gs-medium-light);
    --wx-section-container-border-left: var(--border-style) var(--border-width) var(--gs-medium-light);

    --wx-section-divider-background-color: var(--gs-medium);
    --wx-subsection-margin: 0 0 0 0;
    --wx-subsection-header-background-color: transparent;
    --wx-subsection-header-border-left: none;
    --wx-subsection-header-border-top: none;
    --wx-subsection-header-border-right: none;
    --wx-subsection-header-border-bottom: var(--border-style) var(--border-width) var(--gs-medium);
    --wx-subsection-header-border-radius: 0;
    --wx-subsection-header-color: var(--text-black);
    --wx-subsection-header-font-size: 1.1em;
    --wx-subsection-header-font-weight: bold;
    --wx-subsection-header-padding: 0.2em 0.2em 0.2em 0.2em;
    --wx-subsection-title-background: linear-gradient(to bottom, darken(var(--gs-medium),5%), var(--gs-medium-light));
    --wx-subsection-title-border-left: var(--border-style) var(--border-width) var(--gs-medium);
    --wx-subsection-title-border-top: var(--border-style) var(--border-width) var(--gs-medium);
    --wx-subsection-title-border-right: var(--border-style) var(--border-width) var(--gs-medium);
    --wx-subsection-title-border-bottom: none;
    --wx-subsection-title-border-radius: 0.6rem 0.6rem 0 0;
    --wx-subsection-title-padding: 0.3rem 0.6rem 0.3rem 0.6rem;
    --wx-subsection-title-font-size: 1.0em;
    --wx-subsection-title-font-weight: bold;
    --wx-subsection-body-padding: 0.5em 0 0.2em 0;
    --wx-subsection-body-background-color: transparent;

    --wx-subsection-body-border-left: none;
    --wx-subsection-body-border-top: none;
    --wx-subsection-body-border-right: none;
    --wx-subsection-body-border-bottom: none;

    --wx-subsection-body-border-radius: 0 0 var(--border-radius-bottom-right) var(--border-radius-bottom-left);
    --wx-subsection-group-background-color: var(--gs-medium-light);
    --wx-subsection-group-border-color: var(--gs-medium);
    --wx-subsection-tool-font-size: 0.8em;
    --wx-subsection-tool-color: var(--gs-dark);


    --wx-status-msg-background-color: var(--bg-dark);
    --wx-status-msg-border-color: var(--bg-dark);
    --wx-status-msg-color: var(--text-white);
    --wx-status-msg-overlay-background-color: var(--gs-white);

    --wx-flyout-container-background-color: var(--gs-white);
    --wx-flyout-container-header-margin: 0 0 0 0;
    --wx-flyout-container-header-padding: 0.75rem;
    --wx-flyout-container-header-font-size: 1.4rem;
    --wx-flyout-container-header-background-color: none;
    --wx-flyout-container-header-background: linear-gradient(to bottom, darken(var(--gs-medium),5%), var(--gs-medium-light));
    --wx-flyout-container-header-label-color: var(--gs-black);
    --wx-flyout-container-header-close-color: var(--gs-black);
    --wx-flyout-container-transition: ease 150ms;
    --wx-flyout-overlay-transition: ease 150ms;
    --wx-flyout-overlay-opacity: 0.8;

    --wx-modal-overlay-transition: ease 0;
    --wx-modal-overlay-opacity: 0.8;
    --wx-modal-container-transition: ease 0;
    --wx-modal-dialog-header-padding: 0.7em 0.3em 0.7em 0.7em;
    --wx-modal-dialog-header-background-color: none;
    --wx-modal-dialog-header-background: linear-gradient(to bottom, darken(var(--gs-medium),5%), var(--gs-medium-light));
    --wx-modal-dialog-header-color: --gs-black;
    --wx-modal-dialog-header-font-size: 1.2em;
    --wx-modal-dialog-header-font-weight: bold;
    --wx-modal-dialog-header-border-top: none;
    --wx-modal-dialog-header-border-right: none;
    --wx-modal-dialog-header-border-bottom: var(--border-style) var(--border-width) var(--gs-medium-light);
    --wx-modal-dialog-header-border-left: none;
    --wx-modal-dialog-header-border-radius: var(--border-radius-top-left) var(--border-radius-top-right) 0 0;

    --wx-modal-dialog-body-background-color: var(--gs-white);
    --wx-modal-dialog-body-padding: 0.3rem;
    --wx-modal-dialog-body-border-top: none;
    --wx-modal-dialog-body-border-right: none;
    --wx-modal-dialog-body-border-bottom: none;
    --wx-modal-dialog-body-border-left: none;
    --wx-modal-dialog-body-border-radius: 0 0 var(--border-radius-bottom-right) var(--border-radius-bottom-left);


    --wx-toast-transition-in: ease 200ms;
    --wx-toast-transition-out: ease 500ms;
    --wx-toast-padding: 1.5rem;
    --wx-toast-background-color: #004f8e;
    --wx-toast-color: var(--gs-white);
    --wx-toast-border: none;
    --wx-toast-shadow: 2px 2px 1rem var(--gs-medium-dark);
    --wx-toast-max-width: 300px;
    --wx-toast-bottom: 10px;
    --wx-toast-right: 10px;

}