/*PICKUP FROM LEGACY CSS PREFIXED THEME IS GENERIC-********************************************************************/
:root {
    --theme-danger-background: var(--btnDangerBackground);

    --theme-media-tablet-portrait:var(--mediaTabletPortrait);
    --theme-media-tablet-landscape: var(--mediaTabletWide);
    --theme-media-desk-s: var(--mediaDeskSmall);
    --theme-media-desk-l: var(--mediaDeskLarge);

    --theme-font-family-sans: var(--sansFontFamily);
    --theme-font-family-serif: var(--serifFontFamily);
    --theme-font-family-mono: var(--monoFontFamily);

    --theme-font-size-base: var(--baseFontSize);
    --theme-font-family-base: var(--baseFontFamily);
    --theme-line-height-base: var(--baseLineHeight);
    --theme-font-family-alt: var(--altFontFamily);

    --theme-padding-large: var(--paddingLarge);
    --theme-padding-small: var(--paddingSmall);
    --theme-padding-mini: var(--paddingMini);

    --theme-border-radius-l: var(--borderRadiusLarge);
    --theme-border-radius: var(--baseBorderRadius);
    --theme-border-radius-s: var(--borderRadiusSmall);


    --theme-black: var(--black);
    --theme-gray-darker: var(--grayDarker);
    --theme-gray-dark: var(--grayDark);
    --theme-graylighter-dark: var(--grayLighterDark);
    --theme-gray-muted-dark: var(--grayMutedDark);
    --theme-gray-muted: var(--grayMuted);
    --theme-gray: var(--gray);
    --theme-gray-light: var(--grayLight);
    --theme-gray-lighter: var(--grayLighter);
    --theme-gray-lightest: var(--grayLightest);
    --theme-white: var(--white);


    /*  Accent colors */
    /* ------------------------- */
    --theme-blue: var(--blue);
    --theme-blue-dark: var(--blueDark);
    --theme-blue-light: var(--blueLight);
    --theme-blue-lightest: var(--blueLightest);
    --theme-green: var(--green);
    --theme-red: var(--red);
    --theme-red-light: var(--redLight);
    --theme-yellow: var(--yellow);
    --theme-yellow-light: var(--yellowLight);
    --theme-orange: var(--orange);
    --theme-pink: var(--pink);
    --theme-purple: var(--purple);

    --theme-body-background: var(--bodyBackground);
    --theme-text-color: var(--textColor);
    --theme-text-color-chite: var(--textColorWhite);
    --theme-text-color-gray-light: var(--textColorGrayLight);
    --theme-text-color-gray: var(--textColorGray);

    --theme-alt-background: var(--altBackground);
    --theme-alt-color: var(--altColor);

    --theme-link-color: var(--linkColor);
    --theme-link-color-hover: var(--linkColorHover);


    --theme-font-color: var(--font-color);
    --theme-font-color-active: var(--font-color-active);
    --theme-font-color-hover: var(--font-color-hover);
    --theme-font-color-invalid: var(--font-color-invalid);

    --theme-border-color: var(--border-color);
    --theme-border-color-hover: var(--border-color-hover);
    --theme-border-color-active: var(--border-color-active);
    --theme-border-color-invalid: var(--border-color-invalid);

    --theme-status-warning-text: var(--warningText);
    --theme-status-warning-background: var(--warningBackground);
    --theme-status-warning-border: var(--warningBorder);

    --theme-status-error-text: var(--errorText);
    --theme-status-error-background: var(--errorBackground);
    --theme-status-error-border: var(--errorBorder);

    --theme-status-success-text: var(--successText);
    --theme-status-success-background: var(--successBackground);
    --theme-status-success-border: var(--successBorder);

    --theme-status-info-text: var(--infoText);
    --theme-status-info-background: var(--infoBackground);
    --theme-status-info-border: var(--infoBorder);







    /*[GRID]***********************************************************************************************************/
    --theme-grid-row-height: var(--gridRowHeight);
    --theme-table-background: var(--tableBackground);
    --theme-table-background-accent: var(--tableBackgroundAccent);
    --theme-table-background-hover: var(--tableBackgroundHover);
    --theme-table-border: var(--tableBorder);
    --theme-table-row-border: var(--tableRowBorder);
    --theme-table-alt-row-border: var(--tableAltRowBorder);
    --theme-table-header-background: var(--tableHeaderBackground);
    --theme-table-footer-background: var(--tableFooterBackground);
    --theme-table-groupHeader-background: var(--tableGroupHeaderBackground);
    --theme-table-groupHeader-background0: var(--tableGroupHeaderBackground0);
    --theme-table-groupHeader-background1: var(--tableGroupHeaderBackground1);
    --theme-table-groupHeader-background2: var(--tableGroupHeaderBackground2);
    --theme-table-groupHeader-background3: var(--tableGroupHeaderBackground3);
    --theme-table-groupHeader-background4: var(--tableGroupHeaderBackground4);

    /*[BTN]************************************************************************************************************/
    --theme-btn-text-color: var(--btnTextColor);
    --theme-btn-text-alt-color: var(--btnTextAltColor);
    --theme-btnMetro-color: var(--btnMetroColor);

    --theme-btnMetro-background: var(--btnMetroBackground);
    --theme-btnMetro-background-highlight: var(--btnMetroBackgroundHighlight);

    --theme-btn-height: var(--btnHeight);
    --theme-btn-border: var(--btnBorder);

    --theme-btn-background: var(--btnBackground);
    --theme-btn-background-highlight: var(--btnBackgroundHighlight);

    --theme-btn-primary-background: var(--btnPrimaryBackground);
    --theme-btn-primary-background-highlight: var(--btnPrimaryBackgroundHighlight);

    --theme-btn-secondary-background: var(--btnSecondaryBackground);
    --theme-btn-secondary-background-highlight: var(--btnSecondaryBackgroundHighlight);

    --theme-btn-danger-background: var(--btnDangerBackground);
    --theme-btn-danger-background-highlight: var(--btnDangerBackgroundHighlight);

    --theme-btn-inverse-background: var(--btnInverseBackground);
    --theme-btn-inverse-background-highlight: var(--btnInverseBackgroundHighlight);

    --theme-btn-metro-color-light: var(--btnMetroColorLight);


    /*[INPUT]**********************************************************************************************************/
    --theme-input-background: var(--inputBackground);
    --theme-input-border: var(--inputBorder);
    --theme-input-border-radius: var(--inputBorderRadius);
    --theme-inputDisabled-background: var(--inputDisabledBackground);
    --theme-formActions-background: var(--formActionsBackground);
    --theme-input-height: var(--inputHeight);
    --theme-input-width: var(--inputWidth);
    --theme-padding-base-vertical: var(--padding-base-vertical);
    --theme-placeholder-text: var(--placeholderText);


    /*[HRULE]**********************************************************************************************************/
    --theme-hr-border: var(--hrBorder);

    /*[TOOLTIP]********************************************************************************************************/
    --theme-tooltip-color: var(--tooltipColor);
    --theme-tooltip-background: var(--tooltipBackground);
    --theme-tooltip-arrow-width: var(--tooltipArrowWidth);
    --theme-tooltip-arrow-color: var(--tooltipArrowColor);

    /*[POPOVER]********************************************************************************************************/
    --theme-popover-background: var(--popoverBackground);
    --theme-popover-title-background: var(--popoverTitleBackground);
    --theme-popover-border-radius: var(--popoverBorderRadius);
    --theme-popover-border-color: var(--popoverBorderColor);
    --theme-popover-border-width: var(--popoverBorderWidth);

    /*  Special enhancement for popovers */
    --theme-popover-arrow-width: var(--popoverArrowWidth);
    --theme-popover-arrow-color: var(--popoverArrowColor);
    --theme-popover-arrow-outer-width: var(--popoverArrowOuterWidth);
    --theme-popover-arrow-outer-color: var(--popoverArrowOuterColor);

    /*[DROPDOWN]*******************************************************************************************************/
    --theme-dropdown-background: var(--dropdownBackground);
    --theme-dropdown-border: var(--dropdownBorder);
    --theme-dropdown-border-radius: var(--dropdownBorderRadius);

    /*[DROPDOWN-GROUP]*************************************************************************************************/
    --theme-dropdown-divider-top: var(--dropdownDividerTop);
    --theme-dropdown-divider-bottom: var(--dropdownDividerBottom);

    /*[DROPDOWN-ITEM]**************************************************************************************************/
    --theme-dropdown-list-selected-color: var(--dropdownListSelectedColor);
    --theme-dropdown-link-color: var(--dropdownLinkColor);
    --theme-dropdown-link-color-hover: var(--dropdownLinkColorHover);
    --theme-dropdown-link-color-active: var(--dropdownLinkColorActive);

    --theme-dropdown-link-background-active: var(--dropdownLinkBackgroundActive);
    --theme-dropdown-link-background-hover: var(--dropdownLinkBackgroundHover);

    /*[DIALOG]*********************************************************************************************************/
    --theme-dlg-header-height: var(--dlgHeaderHeightDesktop);
    --theme-dlg-footer-height: var(--dlgFooterHeightDesktop);
    --theme-dialog-background: var(--dialogBackground);
    --theme-dialog-btn: var(--dialogBtnBase);
    --theme-dialog-btn-bg: var(--dialogBtnBg);
    --theme-dialog-btn-bg-hover: var(--dialogBtnBgHover);
    --theme-dialog-btn-bg-active: var(--dialogBtnBgActive);
    /*  Notifications */
    --theme-modal-background: var(--modalBackground);
    --theme-modal-text-color: var(--modalTextColor);

    /*[APP]************************************************************************************************************/
    --theme-app-header-height-desktop: var(--appHeaderHeightDesktop);

    /*[PAGE]***********************************************************************************************************/
    --theme-page-header-height: var(--pageHeaderHeightDesktop);
    --theme-page-footer-height: var(--pageFooterHeightDesktop);
    --theme-page-padding-lr: var(--pageLRPaddingDesktop);
    /*[FOOTER]*********************************************************************************************************/
    --theme--footer-height-sticky: var(--stickyFooterHeight);

    /*[OTHER]**********************************************************************************************************/
    --theme-tabbar-height: var(--tabBarHeight);
    --theme-mediabar-s: var(--mediaBarSmall);
    --theme-mediabar-l: var(--mediaBarLarge);

}

/*USED BY NEW COMPONENTS***********************************************************************************************/
:root {
    --cm-button-toggle-icon-color: black;

    --cm-transition-quickly: 0.05s ease;
    --cm-transition-slowly: 0.2s ease;
    --cm-transition-mobile: 0.4s ease;

    --cm-border-radius-sharp: 0.02em;
    --cm-border-radius-s: 3px;
    --cm-border-radius: 5px;
    --cm-border-radius-l: 7px;
    --cm-border-radius-circle: 50%;
    /*feeds gap in vbox/hbox*/
    --cm-space-xxl: 72px;
    --cm-space-xl: 36px;
    --cm-space-l: 24px;
    --cm-space-m: 16px;
    --cm-space-s: 8px;
    --cm-space-xs: 4px;

    --cm-color-surface: rgb(255, 255, 255);
    --cm-color-background: rgb(250, 251, 251);
    --cm-color-surface-raised: rgb(250, 251, 251);
    --cm-color-surface-lowered: rgb(230, 232, 235);
    --cm-color-overlay: rgba(144, 152, 152, 0.4);
    /*NOTE:
        INLINE:Left/Right/Horizontal>>>>
        BLOCK:Up/Down/Vertical^^^^^^
     */

    /*[LAYOUT]*********************************************************************************************************/
    --cm-page-padding:var(--theme-page-padding-lr, 30px);
    --cm-page-header-block-size:var(--theme-page-header-height, 90px);
    --cm-page-footer-block-size:var(--theme-page-footer-height,0px);

    --cm-panel-padding:var(--theme-page-padding-lr, 30px);
    --cm-panel-header-block-size:var(--theme-page-header-height, 90px);
    --cm-panel-footer-block-size:var(--theme-page-footer-height,60px);

    /*[HEADER]*********************************************************************************************************/
    --cm-header-size-l: 55px;
    --cm-header-size-m: 50px;
    --cm-header-size-s: 30px;

    /*[FOOTER]*********************************************************************************************************/
    --cm-footer-size-l: 55px;
    --cm-footer-size-m: 50px;
    --cm-footer-size-s: 30px;

    /*[POPUP]**********************************************************************************************************/
    --cm-popup-border: var(--theme-popover-border-width) var(--theme-popover-border-color) solid;
    --cm-popup-border-radius: var(--theme-popover-border-radius);
    --cm-popup-background: var(--theme-popover-background);
    --cm-popup-box-shadow: 0 4px 12px rgba(12, 12, 12, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);

    /*[DROPDOWN]***NOT*USED********************************************************************************************/
    --cm-dropdown-border: var(--theme-dropdown-border);
    --cm-dropdown-border-radius: 1px;
    --cm-dropdown-box-shadow: 0 4px 12px rgba(12, 12, 12, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    --cm-dropdown-max-block-size: 460 px;
    /*[DROPDOWNITEM]***************************************************************************************************/
    --cm-dropdownitem-bg: transparent;
    --cm-dropdownitem-bg-hover: var(--theme-btn-background-highlight);
    --cm-dropdownitem-text-transform: uppercase;

    /*4 states normal/hover/active/focus*/
    /*[BTN]************************************************************************************************************/
    /*[HEADER BTN]*****************************************************************************************************/
    --cm-ibtn-text-color: var(--btnMetroColor);
    --cm-ibtn-icon-color: var(--btnMetroColor);
    --cm-ibtn-bg: transparent;

    --cm-ibtn-bg-hover: var(--btnMetroBackground);

    --cm-ibtn-text-color-active: var(--btnMetroColor);
    --cm-ibtn-icon-color-active: var(--textColorWhite);
    --cm-ibtn-bg-active: var(--btnMetroBackgroundHighlight);

    /*[TOOLBAR BTN]****************************************************************************************************/

    /*[ACTION BTN]*****************************************************************************************************/
    --xcm-action-btn-text-color: var(--btnMetroColor);
    --xcm-action-btn-icon-color: var(--btnMetroColor);
    --xcm-action-btn-bg: --btnMetroColor;
    --xcm-action-btn-border: --btnMetroColor;

    --xcm-action-btn-bg-hover: var(--btnMetroBackground);

    --xcm-action-btn-text-color-active: var(--btnMetroColor);
    --xcm-action-btn-icon-color-active: var(--textColorWhite);
    --xcm-action-btn-bg-active: var(--btnMetroBackgroundHighlight);
    --xcm-action-btn-border-active: var(--grayMutedDark);



}