/* 9.3.0.24 */
/*
Mongoose Style Template - 'New Flavor'

BACKCOLOR and FORECOLOR expect #ARGB in hex.
BOXSHADOW in "C(#ffee3e3e) L(1) T(1) R(1) B(1)
Format:
MGELEM(Element Type) CSS Selectors ([.]where the class name would go with the dot ){
   CSS property: MGVAR(MG attribute name)
}
MGIFVAR(MG Attribute name) - if variable exists, this line is valid (use | for OR condition thisvar|thatvar)
MGIFNOTVAR(MG Attribute name) - if variable does not exist, this line is valid

Style Rules in General (CSS rules - lower in list wins)
   - in-line styling (from JavaScript) tries to be on a lower level (background) element
   - plain control styling tries to be on that lower level element (so overruled by above)
   - Req/TBD styling on top of the lower level element
   - hover style (do not want hover color while focused/typing)
   - focused-current selected or active control or element
   - read-only / disabled control
   - focused-current select often has !important (yeow)
*/

/* Explorer */
MGELEM(explorertopitem) #explorerPanel .x-panel-header, #explorerPanel .x-grid-row {
   BACKCOLOR: MGVAR(Background);
}

/* top level font properties */
MGELEM(explorertopitem) #explorerPanel .x-title-text, #explorerPanel .x-grid-row {
   FORECOLOR: MGVAR(Foreground);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}

MGELEM(explorertopitem) #explorerPanel .x-title-text {
   line-height: 1em;
}

/* to set up the size of plus-minus */
MGELEM(exploreritem) #explorerPanel .x-tree-elbow-img {
   font-size: MGVAR(FontSize);
   padding-right: .7em;
}

MGELEM(exploreritem) #explorerPanel .x-tree-expander::before, #explorerPanel .x-tree-expander::after  {
   BACKGROUND: MGVAR(Foreground);
   width: .7em;
}

MGELEM(exploreritem) #explorerPanel .x-grid-cell:not(.mgRootExpNode) {
   BACKCOLOR: MGVAR(Background);
}

MGELEM(exploreritem) #explorerPanel .x-grid-cell:not(.mgRootExpNode) .x-tree-node-text {
   FORECOLOR: MGVAR(Foreground);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}

MGELEM(exploreritem) #explorerPanel .x-grid-cell:not(.mgRootExpNode) .x-tree-expander::before,
   #explorerPanel .x-grid-cell:not(.mgRootExpNode) .x-tree-expander::after {
   BACKCOLOR: MGVAR(Foreground);
}

MGELEM(exploreritem) #explorerPanel .x-grid-item-over .x-grid-cell:not(.mgRootExpNode) {
   BACKCOLOR: MGVAR(HoverBackground);
}

MGELEM(exploreritem) #explorerPanel .x-grid-item-over .x-grid-cell:not(.mgRootExpNode) .x-tree-node-text {
   FORECOLOR: MGVAR(HoverForeground);
}

MGELEM(exploreritem) #explorerPanel .x-grid-item-over .x-grid-cell:not(.mgRootExpNode) .x-tree-expander::before, 
   #explorerPanel .x-grid-item-over .x-grid-cell:not(.mgRootExpNode) .x-tree-expander::after {
   BACKGROUND: MGVAR(HoverForeground);
}

MGELEM(exploreritem) #explorerPanel .x-grid-item-focused .x-tree-expander::before, 
   #explorerPanel .x-tree-arrows .x-grid-item-focused .x-tree-expander::after {
   BACKGROUND: MGVAR(ActiveForeground);
}

MGELEM(exploreritem) #explorerPanel .x-grid-item-focused.x-grid-cell:not(.mgRootExpNode) .x-grid-cell-inner {
   BACKCOLOR: MGVAR(ActiveBackground);
}

MGELEM(exploreritem) #explorerPanel .x-grid-item-focused.x-grid-cell:not(.mgRootExpNode) .x-grid-cell-inner .x-tree-node-text {
   FORECOLOR: MGVAR(ActiveForeground);
}

MGELEM(explorerroot) #explorerPanel .mgRootExpNode {
   BACKCOLOR: MGVAR(Background);
}

MGELEM(explorerroot) #explorerPanel .mgRootExpNode .x-tree-node-text {
   FORECOLOR: MGVAR(Foreground);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}

MGELEM(explorerroot) #explorerPanel .x-grid-item-over .mgRootExpNode {
   BACKCOLOR: MGVAR(HoverBackground);
}

MGELEM(explorerroot) #explorerPanel .x-grid-item-over .mgRootExpNode .x-tree-node-text {
   FORECOLOR: MGVAR(HoverForeground);
}

MGELEM(explorerroot) #explorerPanel .x-grid-item-over .mgRootExpNode .x-tree-expander::before, 
   #explorerPanel .x-grid-item-over.mgRootExpNode .x-tree-expander::after {
   BACKCOLOR: MGVAR(HoverForeground);
}

MGELEM(explorerroot) #explorerPanel .x-grid-item-focused.mgRootExpNode .x-grid-cell-inner {
   BACKCOLOR: MGVAR(ActiveBackground);
}

MGELEM(explorerroot) #explorerPanel .x-grid-item-focused.mgRootExpNode .x-grid-cell-inner .x-tree-node-text {
   FORECOLOR: MGVAR(ActiveForeground);
}

MGELEM(explorerroot) #explorerPanel .x-grid-item-focused.mgRootExpNode .x-tree-expander::before, 
   #explorerPanel  .x-grid-item-over .x-grid-item-focused.mgRootExpNode .x-tree-expander::before, 
   #explorerPanel .x-grid-item-over .x-grid-item-focused.mgRootExpNode .x-tree-expander::after,
   #explorerPanel .x-grid-item-focused.mgRootExpNode .x-tree-expander::after {
   BACKCOLOR: MGVAR(ActiveForeground);
}

MGELEM(explorerroot) #explorerPanel .mgRootExpNode .x-tree-expander::before, #explorerPanel .mgRootExpNode .x-tree-expander::after  {
   BACKGROUND: MGVAR(Foreground);
   width: .7em;
}

MGELEM(explorerroot) #explorerPanel .x-grid-item-over .mgRootExpNode .x-tree-expander::before, 
   #explorerPanel .x-grid-item-over .mgRootExpNode .x-tree-expander::after {
   BACKGROUND: MGVAR(HoverForeground);
}

/* Menu */

/* Menu Toolbar */
MGELEM(menu) #mainToolbarMenu, #mainToolbarMenu .x-btn  {
   BACKCOLOR: MGVAR(Background);
}

MGELEM(menu) #mainToolbarMenu .x-btn-wrap  {
   box-shadow: MGVAR(Border);
}

MGELEM(menu) #mainToolbarMenu .x-btn-inner {
   FORECOLOR: MGVAR(Foreground);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
   line-height: 1em;
}

MGELEM(menu) #mainToolbarMenu .mg-menu-dropdown, #mainToolbarMenu .mg-expand-explorer {
   fill: MGVAR(Foreground);
}

MGELEM(menu) .mg-toolbar-menu .x-menu-item-text-default, .x-box-scroller-body-vertical .x-menu-item-text-default {
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
   FORECOLOR: MGVAR(Foreground);
   line-height: 1em;
}
/*top item*/
MGELEM(menutopitem) #mainToolbarMenu .x-btn-wrap  {
   BACKCOLOR: MGVAR(Background);
}

MGELEM(menutopitem) #mainToolbarMenu .x-btn-inner {
   FORECOLOR: MGVAR(Foreground);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
   line-height: 1em;
}

MGELEM(menutopitem) #mainToolbarMenu .mg-menu-dropdown, #mainToolbarMenu .mg-expand-explorer {
   fill: MGVAR(Foreground);
}

/*top item disabled/read-only - need class and test example! */
MGELEM(menutopitem) #mainToolbarMenu .x-btn.x-btn-disabled .x-btn-wrap  {
   BACKCOLOR: MGVAR(DisabledBackground);
}

MGELEM(menutopitem) #mainToolbarMenu .x-btn.x-btn-disabled .x-btn-inner {
   FORECOLOR: MGVAR(DisabledForeground);
}

MGELEM(menutopitem) #mainToolbarMenu .x-btn.x-btn-disabled .mg-menu-dropdown, #mainToolbarMenu .x-btn.x-btn-over .mg-expand-explorer {
   fill: MGVAR(DisabledForeground);
}

/*top item hover*/
MGELEM(menutopitem) #mainToolbarMenu .x-btn.x-btn-over .x-btn-wrap  {
   BACKCOLOR: MGVAR(HoverBackground);
}

MGELEM(menutopitem) #mainToolbarMenu .x-btn.x-btn-over .x-btn-inner {
   FORECOLOR: MGVAR(HoverForeground);
}

MGELEM(menutopitem) #mainToolbarMenu .x-btn.x-btn-over .mg-menu-dropdown, #mainToolbarMenu .x-btn.x-btn-over .mg-expand-explorer {
   fill: MGVAR(HoverForeground);
}

/*top item pressed*/
MGELEM(menutopitem) #mainToolbarMenu .x-btn.x-btn-pressed .x-btn-wrap  {
   BACKCOLOR: MGVAR(PressedBackground);
}

MGELEM(menutopitem) #mainToolbarMenu .x-btn.x-btn-pressed .x-btn-inner {
   FORECOLOR: MGVAR(PressedForeground);
}

MGELEM(menutopitem) #mainToolbarMenu .x-btn.x-btn-pressed .mg-menu-dropdown, #mainToolbarMenu .x-btn.x-btn-pressed .mg-expand-explorer {
   fill: MGVAR(PressedForeground);
}

/* Menu Item */
MGELEM(menuitem) .mg-toolbar-menu .x-box-scroller-body-vertical, .mg-toolbar-menu .x-box-scroller-body-vertical .x-menu-item-link  {
   BACKCOLOR: MGVAR(Background);
}

MGELEM(menuitem) .mg-toolbar-menu .x-menu-item-default.x-menu-item-separator  {
   BACKCOLOR: MGVAR(Background);
}

MGELEM(menuitem) .mg-toolbar-menu .x-box-scroller-body-vertical .x-menu-item-text {
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
   FORECOLOR: MGVAR(Foreground);
}

/* Menu Item Disabled */
MGELEM(menuitem) .mg-toolbar-menu .x-box-scroller-body-vertical .x-menu-item-disabled .x-menu-item-link  {
   BACKCOLOR: MGVAR(DisabledBackground);
}

MGELEM(menuitem) .mg-toolbar-menu .x-box-scroller-body-vertical .x-menu-item-disabled .x-menu-item-text  {
   FORECOLOR: MGVAR(DisabledForeground);
}

/* Menu Item Hover */
MGELEM(menuitem) .mg-toolbar-menu .x-box-scroller-body-vertical .x-menu-item-focus  {
   BACKCOLOR: MGVAR(HoverBackground);
}

MGELEM(menuitem) .mg-toolbar-menu .x-box-scroller-body-vertical .x-menu-item-focus .x-menu-item-text  {
   FORECOLOR: MGVAR(HoverForeground);
}

/* Menu Item pressed */
MGELEM(menuitem) .mg-toolbar-menu .x-box-scroller-body-vertical .x-menu-item-pressed .x-menu-item-link  {
   BACKCOLOR: MGVAR(PressedBackground);
}

MGELEM(menuitem) .mg-toolbar-menu .x-box-scroller-body-vertical .x-menu-item-pressed .x-menu-item-text  {
   FORECOLOR: MGVAR(PressedForeground);
}


/* Toolbar */
MGELEM(Toolbar) #mainToolbar, #mainToolbar .x-btn, #mainToolbar .x-btn .btn-icon {
   BACKCOLOR: MGVAR(Background);
}

/* Tabbed Form (not notebook) */
MGELEM(TabbedFormHeader) .mg-form-tab-panel-bar .x-tab  {
   BACKCOLOR: MGVAR(Background);
   FORECOLOR: MGVAR(Foreground);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
   BOXSHADOW: MGVAR(DefaultTabBorder);
}

MGELEM(TabbedFormHeader) .mg-form-tab-panel-bar .x-tab-default.x-tab-active.x-tab  {
   BACKCOLOR: MGVAR(SelectedTabBackground);
   FORECOLOR: MGVAR(SelectedTabForeground);
}

MGELEM(TabbedFormHeader) .mg-form-tab-panel-bar .x-tab-default.x-tab.x-tab-over  {
   FORECOLOR: MGVAR(HoverForeground);
   BACKCOLOR: MGVAR(HoverBackground);
}

MGELEM(TabbedFormHeader) .mg-form-tab-panel-bar .x-tab .x-tab-inner {
   FORECOLOR: MGVAR(Foreground);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}

MGELEM(TabbedFormHeader) .mg-form-tab-panel-bar .x-tab-default.x-tab.x-tab-active .x-tab-inner {
   FORECOLOR: MGVAR(SelectedTabForeground);
}

MGELEM(TabbedFormHeader) .mg-form-tab-panel-bar .x-tab-default.x-tab.x-tab-over .x-tab-inner {
   FORECOLOR: MGVAR(HoverForeground);
}

/* SDI case (non-tabbed forms) */
MGELEM(TabbedFormHeader) .x-window.mgFormPanelWnd > .x-window-header {
   BACKCOLOR: MGVAR(SelectedTabBackground);
}

MGELEM(TabbedFormHeader) .x-window.mgFormPanelWnd > .x-window-header .x-tool-img {
   background-color: transparent MGIFVAR(SelectedTabBackground);
}

MGELEM(TabbedFormHeader) .x-window.mgFormPanelWnd > .x-window-header .x-title {
   FORECOLOR: MGVAR(Foreground);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}


/* Button */
MGELEM(Button) .mg-button[.] button {
   FORECOLOR: MGVAR(Foreground);
   BACKCOLOR: MGVAR(Background);
   BOXSHADOW: MGVAR(Border);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}

MGELEM(Button) .mg-button.x-btn-over:not(.x-btn-disabled)[.] button { 
   FORECOLOR: MGVAR(HoverForeground) !important;
   BACKCOLOR: MGVAR(HoverBackground) !important;
   BOXSHADOW: MGVAR(HoverBorder) !important;
}

MGELEM(Button) .mg-form-comp.mg-readonly[.] button,
               .mg-form-comp.mg-readonly.x-btn-over[.] button,
               .mg-form-comp.mg-readonly.x-btn-pressed[.] button,
               .mg-form-comp.mg-readonly.x-btn-pressed.x-btn-over[.] button {
   FORECOLOR: MGVAR(DisabledForeground);
   BACKCOLOR: MGVAR(DisabledBackground);
   BOXSHADOW: MGVAR(DisabledBorder);
}

MGELEM(Button) .mg-form-comp.mg-readonly[.],
               .mg-form-comp.mg-readonly.x-btn-over[.],
               .mg-form-comp.mg-readonly.x-btn-pressed[.],
               .mg-form-comp.mg-readonly.x-btn-pressed.x-btn-over[.] {
   filter: none MGIFVAR(DisabledBackground);
   opacity:1 MGIFVAR(DisabledBackground);

}

MGELEM(Button) .mg-button.x-btn.x-btn-pressed[.] button,
               .mg-button.x-btn.x-btn-pressed.x-btn-over[.] button {
   FORECOLOR: MGVAR(PressedForeground) !important;
   BACKCOLOR: MGVAR(PressedBackground) !important;
   BOXSHADOW: MGVAR(PressedBorder) !important;
}
MGELEM(Button) .mg-button.x-btn.x-btn-focus[.] {
   BOXSHADOW: MGVAR(PressedBorder) !important;
}

/* Default Button */
MGELEM(Button) .mg-defbutton.x-btn[.] button {
   FORECOLOR: MGVAR(DefaultButtonForeground);
   BACKCOLOR: MGVAR(DefaultButtonBackground);
   BOXSHADOW: MGVAR(DefaultButtonBorder);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}

MGELEM(Button) .mg-defbutton.x-btn.x-btn-over:not(.x-btn-disabled)[.] button { 
   FORECOLOR: MGVAR(DefaultButtonHoverForeground) !important;
   BACKCOLOR: MGVAR(DefaultButtonHoverBackground) !important;
   BOXSHADOW: MGVAR(DefaultButtonHoverBorder) !important;
}

MGELEM(Button) .mg-defbutton.x-btn.mg-readonly[.] button,
               .mg-defbutton.mg-readonly.x-btn-over[.] button,
               .mg-defbutton.mg-readonly.x-btn-pressed[.] button {
   FORECOLOR: MGVAR(DisabledForeground);
   BACKCOLOR: MGVAR(DisabledBackground);
   BOXSHADOW: MGVAR(DisabledBorder);
}

MGELEM(Button) .mg-defbutton.x-btn.mg-readonly[.],
               .mg-defbutton.mg-readonly.x-btn-over[.],
               .mg-defbutton.mg-readonly.x-btn-pressed[.]{
   filter:none MGIFVAR(DisabledBackground);
   opacity:1 MGIFVAR(DisabledBackground);
}

MGELEM(Button) .mg-defbutton.x-btn-pressed:not(.x-btn-disabled)[.] button,
               .mg-defbutton.x-btn-pressed.x-btn-over:not(.x-btn-disabled)[.] button {
   FORECOLOR: MGVAR(DefaultPressedForeground) !important;
   BACKCOLOR: MGVAR(DefaultPressedBackground) !important;
   BOXSHADOW: MGVAR(DefaultPressedBorder) !important;
}
                                                                              
MGELEM(Button) .mg-defbutton.x-btn.x-btn-focus[.] {
   BOXSHADOW: MGVAR(DefaultPressedBorder) !important;
}


/* Form Panel Only  */
MGELEM(Form) [.].mg-form-panel {
   BACKCOLOR: MGVAR(Background);
   FORECOLOR: MGVAR(Foreground);
}


/* Checkbox */
MGELEM(Checkbox) .mg-ckbox[.] {
   BACKCOLOR: MGVAR(Background);
   FORECOLOR: MGVAR(Foreground);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}
MGELEM(Checkbox) .mg-ckbox[.] .x-form-cb-label {
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}
MGELEM(Checkbox) .mg-ckbox[.].mg-req {
   BACKCOLOR: MGVAR(RequiredBackground);
}
MGELEM(Checkbox) .mg-ckbox[.].mg-req{
   FORECOLOR: MGVAR(RequiredForeground);
}
MGELEM(Checkbox) .mg-ckbox[.].mg-tbd {
   BACKCOLOR: MGVAR(TBDBackground);
}
MGELEM(Checkbox) .mg-ckbox[.].mg-tbd .x-form-cb-label{
   FORECOLOR: MGVAR(TBDForeground);
}
MGELEM(Checkbox) .mg-ckbox[.]:not(.mg-readonly):hover {
   BACKCOLOR: MGVAR(HoverBackground);
}
MGELEM(Checkbox) .mg-ckbox[.]:not(.mg-readonly):hover{
   FORECOLOR: MGVAR(HoverForeground);
}
MGELEM(Checkbox) .mg-ckbox[.].mg-readonly, .mg-ckbox[.]:hover.mg-readonly  {
   BACKCOLOR: MGVAR(DisabledBackground) !important;
}
MGELEM(Checkbox) .mg-ckbox[.].mg-readonly .x-form-cb-label, .mg-ckbox[.]:hover.mg-readonly .x-form-cb-label {
   FORECOLOR: MGVAR(DisabledForeground);
}


/* Combobox */
/* Font & Color applies to both the edit area and the popup list */
MGELEM(Combobox) .mg-select[.] {
   BACKCOLOR: MGVAR(Background);
}
MGELEM(Combobox) .mg-select[.] .x-form-field {
   FORECOLOR: MGVAR(Foreground);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}

MGELEM(Combobox) .mg-combo-list-container[.] {
   BACKCOLOR: MGVAR(Background);
   FORECOLOR: MGVAR(Foreground);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}
MGELEM(Combobox) .mg-combo-list-container[.] .x-boundlist-item-over {
   FORECOLOR: MGVAR(HoverForeground);
   BACKCOLOR: MGVAR(HoverBackground);
}

MGELEM(Combobox) .mg-select[.].mg-req .x-form-trigger-wrap {
   BACKCOLOR: MGVAR(RequiredBackground);
}
MGELEM(Combobox) .mg-select[.].mg-req .x-form-field {
   FORECOLOR: MGVAR(RequiredForeground);
}

MGELEM(Combobox) .mg-select[.].mg-tbd .x-form-trigger-wrap {
   BACKCOLOR: MGVAR(TBDBackground);
}
MGELEM(Combobox) .mg-select[.].mg-tbd .x-form-field {
   FORECOLOR: MGVAR(TBDForeground);
}

MGELEM(Combobox) .mg-select[.]:not(.x-field-focus):not(.mg-readonly):hover .x-form-trigger-wrap {
   BACKCOLOR: MGVAR(HoverBackground);
}
MGELEM(Combobox) .mg-select[.]:not(.x-field-focus):not(.mg-readonly):hover .x-form-field {
   FORECOLOR: MGVAR(HoverForeground);
}

MGELEM(Combobox) .mg-select[.].mg-readonly .x-form-trigger-wrap, .mg-select[.].mg-readonly:hover .x-form-trigger-wrap {
   BACKCOLOR: MGVAR(DisabledBackground);
}
MGELEM(Combobox) .mg-select[.].mg-readonly .x-form-field, .mg-select[.].mg-readonly:hover .x-form-field {
   FORECOLOR: MGVAR(DisabledForeground);
}


/* Drop List (exact same styling as the ComboBox)*/
/* Font & Color applies to both the edit area and the popup list */
MGELEM(Droplist) .mg-dlist[.] {
   BACKCOLOR: MGVAR(Background);
}
MGELEM(Droplist) .mg-dlist[.] .x-form-field {
   FORECOLOR: MGVAR(Foreground);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}

MGELEM(Droplist) .mg-drop-list-container[.] {
   BACKCOLOR: MGVAR(Background);
   FORECOLOR: MGVAR(Foreground);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}
MGELEM(Droplist) .mg-drop-list-container[.] .x-boundlist-item-over {
   FORECOLOR: MGVAR(HoverForeground);
   BACKCOLOR: MGVAR(HoverBackground);
}

MGELEM(Droplist) .mg-dlist[.].mg-req .x-form-trigger-wrap {
   BACKCOLOR: MGVAR(RequiredBackground);
}
MGELEM(Droplist) .mg-dlist[.].mg-req .x-form-field {
   FORECOLOR: MGVAR(RequiredForeground);
}

MGELEM(Droplist) .mg-dlist[.].mg-tbd .x-form-trigger-wrap {
   BACKCOLOR: MGVAR(TBDBackground);
}
MGELEM(Droplist) .mg-dlist[.].mg-tbd .x-form-field {
   FORECOLOR: MGVAR(TBDForeground);
}

MGELEM(Droplist) .mg-dlist[.]:not(.x-field-focus):not(.mg-readonly):hover .x-form-trigger-wrap {
   BACKCOLOR: MGVAR(HoverBackground);
}
MGELEM(Droplist) .mg-dlist[.]:not(.x-field-focus):not(.mg-readonly):hover .x-form-field {
   FORECOLOR: MGVAR(HoverForeground);
}

MGELEM(Droplist) .mg-dlist[.].mg-readonly, .mg-dlist[.].mg-readonly:hover .x-form-trigger-wrap {
   BACKCOLOR: MGVAR(DisabledBackground);
}
MGELEM(Droplist) .mg-dlist[.].mg-readonly .x-form-field, .mg-dlist[.].mg-readonly:hover .x-form-field {
   FORECOLOR: MGVAR(DisabledForeground);
}


/* Date Picker - field aspect */
MGELEM(Datepicker) .mg-date[.] {
   BACKCOLOR: MGVAR(Background);
}
MGELEM(Datepicker) .mg-date[.] .x-form-field {
   FORECOLOR: MGVAR(Foreground);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}

MGELEM(Datepicker) .mg-date[.].mg-req  {
   BACKCOLOR: MGVAR(RequiredBackground);
}
MGELEM(Datepicker) .mg-date[.].mg-req .x-form-field {
   FORECOLOR: MGVAR(RequiredForeground);
}

MGELEM(Datepicker) .mg-date[.].mg-tbd {
   BACKCOLOR: MGVAR(TBDBackground);
}
MGELEM(Datepicker) .mg-date[.].mg-tbd .x-form-field {
   FORECOLOR: MGVAR(TBDForeground);
}

MGELEM(Datepicker) .mg-date[.]:not(.x-field-focus):not(.mg-readonly):hover .x-form-trigger-wrap {
   BACKCOLOR: MGVAR(HoverBackground);
}
MGELEM(Datepicker) .mg-date[.]:not(.x-field-focus):not(.mg-readonly):hover .x-form-field {
   FORECOLOR: MGVAR(HoverForeground);
}

MGELEM(Datepicker) .mg-date[.].mg-readonly, .mg-date[.].mg-readonly:hover .x-form-trigger-wrap {
   BACKCOLOR: MGVAR(DisabledBackground);
}
MGELEM(Datepicker) .mg-date[.].mg-readonly .x-form-field, .mg-date[.].mg-readonly:hover .x-form-field {
   FORECOLOR: MGVAR(DisabledForeground);
}


/* Date Picker - popup calendar aspect */
MGELEM(Datepicker) .mg-date-picker[.] .x-datepicker-today {
   BACKCOLOR: MGVAR(TodayBackground);
}
MGELEM(Datepicker) .mg-date-picker[.] .x-datepicker-selected {
   BACKCOLOR: MGVAR(SelectedDayBackground);
}
MGELEM(Datepicker) .mg-date-picker[.] .x-datepicker-selected .x-datepicker-date {
   FORECOLOR: MGVAR(SelectedDayForeground);
}


/* Edit - both single and multiline edit */
MGELEM(Edit) .mg-edit[.] .x-form-field, 
             .mg-mledit[.] .x-form-field {
   FORECOLOR: MGVAR(Foreground);
   BACKCOLOR: MGVAR(Background);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}
MGELEM(Edit) .mg-edit[.]:not(.x-field-focus):not(.mg-readonly):hover .x-form-field, 
             .mg-mledit[.]:not(.x-field-focus):not(.mg-readonly):hover .x-form-field {
   FORECOLOR: MGVAR(HoverForeground);
   BACKCOLOR: MGVAR(HoverBackground);
}

MGELEM(Edit) .mg-edit[.].mg-readonly .x-form-field,   .mg-edit[.].mg-readonly:hover .x-form-field, 
             .mg-mledit[.].mg-readonly .x-form-field, .mg-mledit[.].mg-readonly:hover .x-form-field {
   FORECOLOR: MGVAR(DisabledForeground);
   BACKCOLOR: MGVAR(DisabledBackground);
}

MGELEM(Edit) .mg-edit[.].mg-req .x-form-field.x-form-text,
             .mg-mledit[.].mg-req .x-form-field.x-form-text {
   FORECOLOR: MGVAR(RequiredForeground);
   BACKCOLOR: MGVAR(RequiredBackground);
}

MGELEM(Edit) .mg-edit[.].mg-tbd .x-form-field.x-form-text,
             .mg-mledit[.].mg-tbd .x-form-field.x-form-text {
   FORECOLOR: MGVAR(TBDForeground);
   BACKCOLOR: MGVAR(TBDBackground);
}


/* HyperLink */
MGELEM(Hyperlinkbutton) [.].mg-hlink {
   FORECOLOR: MGVAR(Foreground);
   BACKCOLOR: MGVAR(Background);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}
MGELEM(Hyperlinkbutton) [.].mg-hlink.mg-readonly, [.].mg-hlink.mg-readonly:hover {
   FORECOLOR: MGVAR(DisabledForeground);
   BACKCOLOR: MGVAR(DisabledBackground);
}
MGELEM(Hyperlinkbutton) [.].mg-hlink:not(.mg-readonly):hover {
   FORECOLOR: MGVAR(HoverForeground);
   BACKCOLOR: MGVAR(HoverBackground);
}

/* Static (label) */
MGELEM(Static) .mg-label[.] {
   FORECOLOR: MGVAR(Foreground);
   BACKCOLOR: MGVAR(Background);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}
MGELEM(Static) .mg-label[.].mg-readonly,  .mg-label[.].mg-readonly:hover  {
   FORECOLOR: MGVAR(DisabledForeground);
   BACKCOLOR: MGVAR(DisabledBackground);
}
MGELEM(Static) .mg-label[.].mg-req {
   FORECOLOR: MGVAR(RequiredForeground);
   BACKCOLOR: MGVAR(RequiredBackground);
}
MGELEM(Static) .mg-label[.].mg-tbd {
   FORECOLOR: MGVAR(TBDForeground);
   BACKCOLOR: MGVAR(TBDBackground);
}
MGELEM(Static) .mg-label[.]:not(.mg-readonly):hover {
   FORECOLOR: MGVAR(HoverForeground);
   BACKCOLOR: MGVAR(HoverBackground);
}

/* Listbox */
MGELEM(Listbox) ul[.].mg-list {
   FORECOLOR: MGVAR(Foreground);
   BACKCOLOR: MGVAR(Background);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}
MGELEM(Listbox) ul[.].mg-list.mg-readonly,  ul[.].mg-list.mg-readonly:hover  {
   FORECOLOR: MGVAR(DisabledForeground);
   BACKCOLOR: MGVAR(DisabledBackground) !important;

}
MGELEM(Listbox) ul[.].mg-list.mg-req {
   FORECOLOR: MGVAR(RequiredForeground);
   BACKCOLOR: MGVAR(RequiredBackground);

}
MGELEM(Listbox) ul[.].mg-list.mg-tbd {
   FORECOLOR: MGVAR(TBDForeground);
   BACKCOLOR: MGVAR(TBDBackground);

}
MGELEM(Listbox) ul[.].mg-list:not(.mg-readonly):hover {
   FORECOLOR: MGVAR(HoverForeground);
   BACKCOLOR: MGVAR(HoverBackground);

}

/* Radio */
MGELEM(RadioButton) .mg-radiobtn[.] {
   BACKCOLOR: MGVAR(Background);
   FORECOLOR: MGVAR(Foreground);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}
MGELEM(RadioButton) .mg-radiobtn[.] .x-form-cb-label {
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}

MGELEM(RadioButton) .mg-radiobtn[.].mg-req {
   BACKCOLOR: MGVAR(RequiredBackground);
   FORECOLOR: MGVAR(RequiredForeground);
}
MGELEM(RadioButton) .mg-radiobtn[.].mg-tbd {
   BACKCOLOR: MGVAR(TBDBackground);
   FORECOLOR: MGVAR(TBDForeground);
}
MGELEM(RadioButton) .mg-radiobtn[.]:not(.mg-readonly):hover {
   BACKCOLOR: MGVAR(HoverBackground);
   FORECOLOR: MGVAR(HoverForeground);
}
MGELEM(RadioButton) .mg-radiobtn[.].mg-readonly, .mg-radiobtn[.].mg-readonly:hover {
   BACKCOLOR: MGVAR(DisabledBackground) !important;
   FORECOLOR: MGVAR(DisabledForeground);
}


/* Grid Body */
/* 1st row = odd  = .x-grid-item
   2nd row = even = .x-grid-item.x-grid-item-alt
*/
MGELEM(Grid) .mg-grid[.] .x-panel-body {
   BACKCOLOR: MGVAR(Background);
   FORECOLOR: MGVAR(Foreground);
}

MGELEM(Grid) .mg-grid[.].mg-tilecontainer {
   BACKCOLOR: MGVAR(Background);
}

MGELEM(Grid) .mg-grid[.] .x-grid-item {
   FORECOLOR: MGVAR(Foreground);
   BACKCOLOR: MGVAR(Background);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}

/* odd/even rows */
MGELEM(Grid) [.].mg-grid .x-grid-item:not(.x-grid-item-alt) {
   BACKCOLOR: MGVAR(AltRowBackground);
   FORECOLOR: MGVAR(AltRowForeground);
}
MGELEM(Grid) [.].mg-grid .x-grid-item.x-grid-item-alt {
   BACKCOLOR: MGVAR(EvenAltRowBackground);
   FORECOLOR: MGVAR(EvenAltRowForeground);
}

/* read-only cells */
/*
MGELEM(Grid) .mg-grid[.] .x-grid-item.x-grid-item-alt .x-grid-cell.mg-readonly {
   filter:none MGIFVAR(AltRowBackground|AltRowForeground);
   opacity:1 MGIFVAR(AltRowBackground|AltRowForeground);
   BACKCOLOR: MGVAR(AltRowBackground);
   FORECOLOR: MGVAR(AltRowForeground);
}

MGELEM(Grid) .mg-grid[.] .x-grid-item:not(.x-grid-item-alt) .x-grid-cell.mg-readonly {
   filter:none MGIFVAR(EvenAltRowBackground|EvenAltRowForeground);
   opacity:1 MGIFVAR(EvenAltRowBackground|EvenAltRowForeground);
   BACKCOLOR: MGVAR(EvenAltRowBackground);
   FORECOLOR: MGVAR(EvenAltRowForeground);
}
*/

/* Grid Row Numberer Column - overrules alt row color */
MGELEM(Grid) .mg-grid[.] .x-grid-inner-locked,
             .mg-grid[.] .x-grid-inner-locked > .x-grid-header-ct .x-column-header,
             .mg-grid[.] .x-grid-inner-locked .x-grid-item {
   BACKCOLOR: MGVAR(RowHeaderBackground);
}
MGELEM(Grid) .mg-grid[.] .x-grid-inner-locked .x-grid-cell {
   FORECOLOR: MGVAR(RowHeaderForeground);
}

/* Hover (not locked column) */
MGELEM(Grid) .mg-grid[.]:not(.mg-readonly) .x-grid-item-over,
             .mg-grid[.]:not(.mg-readonly) .x-grid-item-over .x-grid-cell {
   background: none MGIFVAR(HoverBackground);
   BACKCOLOR: MGVAR(HoverBackground);
   FORECOLOR: MGVAR(HoverForeground);
}

/* Grid Column Header */
MGELEM(Grid) .mg-grid[.] .x-grid-header-ct,
             .mg-grid[.] .x-grid-header-ct .x-column-header {
   BACKCOLOR: MGVAR(ColHeaderBackground);
   FORECOLOR: MGVAR(ColHeaderForeground);

   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}

MGELEM(Grid) .mg-grid[.] .x-grid-header-ct .x-column-header.mg-col-select {
   BACKCOLOR: MGVAR(SelectedColHeaderBackground);
   FORECOLOR: MGVAR(SelectedColHeaderForeground);
}


/* Grid Column Specific */
MGELEM(GridColumn) .mg-grid .x-grid-header-ct .x-column-header[.] {
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}

/* Grid Column Colors */
MGELEM(GridColumn) .mg-grid [.].x-grid-cell {
   BACKCOLOR: MGVAR(Background);
   FORECOLOR: MGVAR(Foreground);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}

MGELEM(GridColumn) .mg-grid .x-grid-header-ct [.].x-column-header.mg-col-select,
                   .mg-grid [.].x-grid-cell.mg-col-select {
   BACKCOLOR: MGVAR(SelectedColHeaderBackground);
   FORECOLOR: MGVAR(SelectedColHeaderForeground);
}
 
/* Grid Column Disabled */
MGELEM(GridColumn) .mg-grid [.].x-grid-cell.mg-readonly {
   BACKCOLOR: MGVAR(DisabledBackground);
   FORECOLOR: MGVAR(DisabledForeground);
}
MGELEM(GridColumn) .mg-grid [.].x-grid-cell.x-grid-check-col-td.mg-readonly {
   opacity: .5;
   filter: alpha(opacity = 50);
}

/* Grid Column Required */
MGELEM(GridColumn) .mg-grid [.].x-grid-cell.mg-req {
   BACKCOLOR: MGVAR(RequiredBackground);
   FORECOLOR: MGVAR(RequiredForeground);

}

/* Grid Column TBD */
MGELEM(GridColumn) .mg-grid [.].x-grid-cell.mg-tbd {
   BACKCOLOR: MGVAR(TBDBackground);
   FORECOLOR: MGVAR(TBDForeground);
}

/* Grid Row Selected/Current Row */
MGELEM(Grid) .mg-grid[.] .x-grid-row.mg-row-current .x-grid-cell {
   background: none MGIFVAR(SelectedRowBackground);
   BACKCOLOR: MGVAR(SelectedRowBackground);
   FORECOLOR: MGVAR(SelectedRowForeground);
}

/* Grid Column Hover */
MGELEM(GridColumn) .mg-grid:not(.mg-readonly) .x-grid-item.x-grid-item-over [.].x-grid-cell,
                   .mg-grid:not(.mg-readonly) .x-column-header[.] .x-column-header-over  {
   background: none MGIFVAR(HoverBackground);
   BACKCOLOR: MGVAR(HoverBackground);
   FORECOLOR: MGVAR(HoverForeground);
}

/* Grid Column - popup part of the combobox */
/**
MGELEM(GridColumn) .mg-grid-combo-list-container[.],
                   .mg-grid-drop-list-container[.] {
}
**/

/* Grid Cells being edited */
MGELEM(GridColumn) .mg-grid[.] .x-grid-row .x-grid-cell.x-grid-cell-selected.mg-underEdit {
   background: none MGIFVAR(SelectedCellBackground);
   BACKCOLOR: MGVAR(SelectedCellBackground);
   FORECOLOR: MGVAR(SelectedCellForeground);
}    


/* Groupbox */
MGELEM(Groupbox) .mg-gbox[.] {
   BACKCOLOR: MGVAR(Background);
}
MGELEM(Groupbox) .mg-gbox[.] > .x-fieldset-header > .x-fieldset-header-text {
   BACKCOLOR: MGVAR(Background);
   FORECOLOR: MGVAR(Foreground);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}

MGELEM(Groupbox) .mg-gbstyle-classic[.] {
   border-color: MGVAR(Border);
}
MGELEM(Groupbox) .mg-gbstyle-modern[.]:not(.mg-gb-header-box) > legend::after {
   border-top-color: MGVAR(Border);
}
MGELEM(Groupbox) .mg-gbstyle-modern[.].mg-gb-header-box > legend {
   border-bottom-color: MGVAR(Border);
}

/* the panelbackground would overrule the general background (like in WinStudio) */
MGELEM(Groupbox) .mg-gbox[.] > .x-fieldset-body {
   BACKCOLOR: MGVAR(PanelBackground);
}

MGELEM(Groupbox) .mg-gbox[.].mg-readonly > .x-fieldset-body,  
                 .mg-gbox[.].mg-readonly > .x-fieldset-header > .x-fieldset-header-text {
   FORECOLOR: MGVAR(DisabledForeground);
   BACKCOLOR: MGVAR(DisabledBackground);
}

/* hover - flash header & body */
MGELEM(Groupbox) .mg-gbox.[.]:hover:not(.mg-readonly) > .x-fieldset-header > .x-fieldset-header-text {
   BACKCOLOR: MGVAR(HoverBackground);
   FORECOLOR: MGVAR(HoverForeground);
}
MGELEM(Groupbox) .mg-gbox[.]:hover:not(.mg-readonly),  
                 .mg-gbox[.]:hover:not(.mg-readonly) > .x-fieldset-header {
   BACKCOLOR: MGVAR(HoverBackground);
}


/* Notebooks */
/* Children-chain being exact so don't leak into other controls
   Two flavors: single row with 'More...' and multiple rows
   These start with TWO selectors (.mg-notebook and .mg-form-comp) because many of the standard notebook
   styles specify the classic/modern as a second selector too. This allows the CSS engine to
   have this overrule the original style.
*/
/* Notebook panel */
MGELEM(Notebook) .mg-notebook.mg-form-comp[.] > .x-panel-body,
                 .mg-notebook.mg-form-comp[.] > .x-panel-body > .x-tabpanel-child > .x-panel-body {
   BACKCOLOR: MGVAR(PanelBackground);
}

/* Notebook tabs */
MGELEM(Notebook) .mg-notebook.mg-form-comp[.] > .x-tab-bar .x-tab,
                 .mg-notebook.mg-form-comp[.] > .x-tab-bar .x-box-menu-after {
   BACKCOLOR: MGVAR(Background);
}

MGELEM(Notebook) .mg-notebook.mg-form-comp[.] > .x-tab-bar .x-tab-inner,
                 .mg-notebook.mg-form-comp[.] > .x-tab-bar .x-box-menu-after .x-btn-button .x-btn-inner {
   FORECOLOR: MGVAR(Foreground);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}

MGELEM(Notebook) .mg-notebook.mg-form-comp[.] > .x-tab-bar .x-tab.x-tab-over:not(.x-tab-active),
                 .mg-notebook.mg-form-comp[.] > .x-tab-bar .x-btn.x-box-menu-after.x-btn-over:not(.mg-btn-selected) {
   FORECOLOR: MGVAR(HoverForeground);
   BACKCOLOR: MGVAR(HoverBackground);
}
MGELEM(Notebook) .mg-notebook.mg-form-comp[.] > .x-tab-bar .x-tab.x-tab-over:not(.x-tab-active) .x-tab-inner {
   FORECOLOR: MGVAR(HoverForeground);
}
MGELEM(Notebook) .mg-notebook.mg-form-comp[.] > .x-tab-bar .x-btn.x-box-menu-after.x-btn-over:not(.mg-btn-selected) .x-btn-inner {
   FORECOLOR: MGVAR(HoverForeground);
}

MGELEM(Notebook) .mg-notebook.mg-form-comp[.] > .x-tab-bar .x-tab.x-tab-active,
                 .mg-notebook.mg-form-comp[.] > .x-tab-bar .x-box-menu-after.mg-btn-selected {
   FORECOLOR: MGVAR(SelectedTabForeground);
   BACKCOLOR: MGVAR(SelectedTabBackground);
}

MGELEM(Notebook) .mg-notebook.mg-form-comp[.] > .x-tab-bar .x-tab-bar-body .x-box-menu-after .mg-btn-selected .x-btn-inner {
   FORECOLOR: MGVAR(SelectedTabForeground);
}

MGELEM(Notebook) .mg-notebook.mg-form-comp[.] > .x-tab-bar .x-item-disabled.x-tab,
                 .mg-notebook.mg-form-comp[.] > .x-tab-bar .x-item-disabled .x-tab-inner,
                 .mg-notebook.mg-form-comp[.] > .x-tab-bar .x-item-disabled.x-box-menu-after,
                 .mg-notebook.mg-form-comp[.] > .x-tab-bar .x-item-disabled.x-box-menu-after .x-btn-inner {
   /* ExtJS sets opacity to 30% */
   FORECOLOR: MGVAR(DisabledForeground);
   BACKCOLOR: MGVAR(DisabledBackground);
   filter:none MGIFVAR(DisabledBackground);
   opacity: 0.8 MGIFVAR(DisabledBackground);
}


/* Vertical Grid - affect both name and value cells */
/* 1st row = odd  = .mg-row-odd
   2nd row = even = .mg-row-even (plain grid is .x-grid-item-alt)
*/
MGELEM(VerticalGrid) [.].mg-vgrid .x-panel-body {
   BACKCOLOR: MGVAR(Background);
}

MGELEM(VerticalGrid) [.].mg-vgrid .x-grid-item {
   FORECOLOR: MGVAR(Foreground);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}

/* odd/even rows */
MGELEM(VerticalGrid) [.].mg-vgrid .mg-row-odd {
   BACKCOLOR: MGVAR(AltRowBackground);
   FORECOLOR: MGVAR(AltRowForeground);
}
MGELEM(VerticalGrid) [.].mg-vgrid .mg-row-even {
   BACKCOLOR: MGVAR(EvenAltRowBackground);
   FORECOLOR: MGVAR(EvenAltRowForeground);
}

/* property name column */
MGELEM(VerticalGrid) [.].mg-vgrid .x-grid-header-ct,
                     [.].mg-vgrid .x-grid-property-name {
   BACKCOLOR: MGVAR(ColHeaderBackground);
   FORECOLOR: MGVAR(ColHeaderForeground);
}

/* selected */
MGELEM(VerticalGrid) [.].mg-vgrid .mg-row-current .x-grid-property-name {
   background: none MGIFVAR(SelectedRowBackground);
   BACKCOLOR: MGVAR(SelectedRowBackground);
   FORECOLOR: MGVAR(SelectedRowForeground);
}    

/* hover */
MGELEM(VerticalGrid) [.].mg-vgrid:not(mg-readonly) .x-grid-item-over .x-grid-cell {
   background: none MGIFVAR(HoverBackground);
   BACKCOLOR: MGVAR(HoverBackground);
   FORECOLOR: MGVAR(HoverForeground);
}

/* readonly cell */ 
/* -- MG thinks all VG cells are readonly??!!
MGELEM(VerticalGrid) [.].mg-vgrid .x-grid-cell.mg-readonly {
   BACKCOLOR: MGVAR(DisabledBackground);
   FORECOLOR: MGVAR(DisabledForeground);
}
*/

/* Vertical Grid Element - only affect the value cell */
MGELEM(VerticalGridElement) .mg-vgrid .x-grid-cell-value.x-grid-cell[.] {
   BACKCOLOR: MGVAR(Background);
   FORECOLOR: MGVAR(Foreground);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}

MGELEM(VerticalGrid) [.].mg-vgrid .x-grid-cell-value.x-grid-cell-selected {
   background: none MGIFVAR(SelectedCellBackground);
   BACKCOLOR: MGVAR(SelectedCellBackground);
   FORECOLOR: MGVAR(SelectedCellForeground);
}    

MGELEM(VerticalGridElement) .mg-vgrid .x-grid-cell-value[.].x-grid-cell-selected {
   background: none MGIFVAR(SelectedCellBackground);
   BACKCOLOR: MGVAR(SelectedCellBackground);
   FORECOLOR: MGVAR(SelectedCellForeground);
}    

MGELEM(VerticalGridElement) .mg-vgrid .x-grid-cell-value.x-grid-cell-value[.].mg-req {
   BACKCOLOR: MGVAR(RequiredBackground);
   FORECOLOR: MGVAR(RequiredForeground);
}
MGELEM(VerticalGridElement) .mg-vgrid .x-grid-cell-value.x-grid-cell-value[.].mg-tbd{
   BACKCOLOR: MGVAR(TBDBackground);
   FORECOLOR: MGVAR(TBDForeground);
}

MGELEM(VerticalGridElement) .mg-vgrid:not(mg-readonly) .x-grid-item-over .x-grid-cell-value[.]  {
   background: none MGIFVAR(HoverBackground);
   BACKCOLOR: MGVAR(HoverBackground);
   FORECOLOR: MGVAR(HoverForeground);
}


/* Tile components */
MGELEM(Form) .mg-tile[.]  {
   BACKCOLOR: MGVAR(Background);
}
/* two flavors of current - to handle both form and tile level themes */
MGELEM(Form) [.] .mg-tile.mg-tile-current  rect.mg-tile-background,
             [.].mg-tile.mg-tile-current  rect.mg-tile-background {
   SVGCOLOR: MGVAR(SelectedTileBackground) !important;
}
MGELEM(Form) .mg-tile[.] text {
   SVGTEXTCOLOR: MGVAR(Foreground);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}
MGELEM(Form) [.].mg-tile.mg-readonly rect {
   SVGCOLOR: MGVAR(DisabledBackground);
}
MGELEM(Form) [.].mg-tile.mg-readonly text {
   SVGTEXTCOLOR: MGVAR(DisabledForeground);
}
MGELEM(Form) [.].mg-tile.mg-req rect {
   SVGCOLOR: MGVAR(RequiredBackground);
}
MGELEM(Form) [.].mg-tile.mg-req text {
   SVGTEXTCOLOR: MGVAR(RequiredForeground);
}
MGELEM(Form) [.].mg-tile.mg-tbd rect {
   SVGCOLOR: MGVAR(TBDBackground);
}
MGELEM(Form) [.].mg-tile.mg-tbd text {
   SVGTEXTCOLOR: MGVAR(TBDForeground);
}
MGELEM(Form) [.].mg-tile:hover:not(.mg-readonly) rect.mg-tile-background {
   SVGCOLOR: MGVAR(HoverBackground);
}
MGELEM(Form) [.].mg-tile:hover:not(.mg-readonly) text {
   SVGTEXTCOLOR: MGVAR(HoverForeground);
}

MGELEM(Static) [.].mg-tile-label > rect {
   SVGCOLOR: MGVAR(Background);
}
MGELEM(Static) [.].mg-tile-label > text {
   SVGTEXTCOLOR: MGVAR(Foreground);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}
MGELEM(Static) [.].mg-tile-label.mg-readonly > rect {
   SVGCOLOR: MGVAR(DisabledBackground);
}
MGELEM(Static) [.].mg-tile-label.mg-readonly > text {
   SVGTEXTCOLOR: MGVAR(DisabledForeground);
}

MGELEM(Hyperlinkbutton) [.].mg-tile-hlink > rect {
   SVGCOLOR: MGVAR(Background);
}
MGELEM(Hyperlinkbutton) [.].mg-tile-hlink > text {
   SVGTEXTCOLOR: MGVAR(Foreground);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}

MGELEM(Hyperlinkbutton) [.].mg-tile-hlink.mg-readonly > rect {
   SVGCOLOR: MGVAR(DisabledBackground);
}
MGELEM(Hyperlinkbutton) [.].mg-tile-hlink.mg-readonly > text {
   SVGTEXTCOLOR: MGVAR(DisabledForeground);
}

/* Whether hyperlinks show hover can be discussed */
MGELEM(Hyperlinkbutton) [.].mg-tile-hlink:hover:not(.mg-readonly) > rect {
   SVGCOLOR: MGVAR(HoverBackground);
}
MGELEM(Hyperlinkbutton) [.].mg-tile-hlink:hover:not(.mg-readonly) > text {
   SVGTEXTCOLOR: MGVAR(HoverForeground);
}

MGELEM(Edit) [.].mg-tile-edit > rect {
   SVGCOLOR: MGVAR(Background);
}
MGELEM(Edit) [.].mg-tile-edit > text {
   SVGTEXTCOLOR: MGVAR(Foreground);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}
MGELEM(Edit) [.].mg-tile-edit.mg-readonly > rect {
   SVGCOLOR: MGVAR(DisabledBackground);
}
MGELEM(Edit) [.].mg-tile-edit.mg-readonly > text {
   SVGTEXTCOLOR: MGVAR(DisabledForeground);
}
MGELEM(Edit) [.].mg-tile-edit.mg-req > rect {
   SVGCOLOR: MGVAR(RequiredBackground);
}
MGELEM(Edit) [.].mg-tile-edit.mg-req > text {
   SVGTEXTCOLOR: MGVAR(RequiredForeground);
}
MGELEM(Edit) [.].mg-tile-edit.mg-tbd > rect {
   SVGCOLOR: MGVAR(TBDBackground);
}
MGELEM(Edit) [.].mg-tile-edit.mg-tbd > text {
   SVGTEXTCOLOR: MGVAR(TBDForeground);
}

MGELEM(Combobox) [.].mg-tile-select > rect {
   SVGCOLOR: MGVAR(Background);
}
MGELEM(Combobox) [.].mg-tile-select > text {
   SVGTEXTCOLOR: MGVAR(Foreground);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}
MGELEM(Combobox) [.].mg-tile-select.mg-readonly > rect {
   SVGCOLOR: MGVAR(DisabledBackground) !important;
}
MGELEM(Combobox) [.].mg-tile-select.mg-readonly > text {
   SVGTEXTCOLOR: MGVAR(DisabledForeground);
}
MGELEM(Combobox) [.].mg-tile-select.mg-req > rect {
   SVGCOLOR: MGVAR(RequiredBackground);
}
MGELEM(Combobox) [.].mg-tile-select.mg-req > text {
   SVGTEXTCOLOR: MGVAR(RequiredForeground);
}
MGELEM(Combobox) [.].mg-tile-select.mg-tbd > rect {
   SVGCOLOR: MGVAR(TBDBackground);
}
MGELEM(Combobox) [.].mg-tile-select.mg-tbd > text {
   SVGTEXTCOLOR: MGVAR(TBDForeground);
}

MGELEM(Datepicker) [.].mg-tile-date > rect {
   SVGCOLOR: MGVAR(Background);
}
MGELEM(Datepicker) [.].mg-tile-date > text {
   SVGTEXTCOLOR: MGVAR(Foreground);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}
MGELEM(Datepicker) [.].mg-tile-date.mg-readonly > rect {
   SVGCOLOR: MGVAR(DisabledBackground) !important;
}
MGELEM(Datepicker) [.].mg-tile-date.mg-readonly > text {
   SVGTEXTCOLOR: MGVAR(DisabledForeground);
}
MGELEM(Datepicker) [.].mg-tile-date.mg-req > rect {
   SVGCOLOR: MGVAR(RequiredBackground);
}
MGELEM(Datepicker) [.].mg-tile-date.mg-req > text {
   SVGTEXTCOLOR: MGVAR(RequiredForeground);
}
MGELEM(Datepicker) [.].mg-tile-date.mg-tbd > rect {
   SVGCOLOR: MGVAR(TBDBackground);
}
MGELEM(Datepicker) [.].mg-tile-date.mg-tbd > text {
   SVGTEXTCOLOR: MGVAR(TBDForeground);
}

MGELEM(Button) [.].mg-tile-btn > rect {
   SVGCOLOR: MGVAR(Background);
   SVGBORDER: MGVAR(Border);
}
MGELEM(Button) [.].mg-tile-btn > text {
   SVGTEXTCOLOR: MGVAR(Foreground);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}
MGELEM(Button) [.].mg-tile-btn:hover:not(.mg-readonly) > rect, 
               [.].mg-tile-btn:focus:not(.mg-readonly) > rect { 
   SVGCOLOR: MGVAR(HoverBackground);
   cursor: pointer;
   SVGBORDER: MGVAR(HoverBorder);
   stroke-width: 0 MGIFNOTVAR(HoverBorder);
}
MGELEM(Button) [.].mg-tile-btn:active > rect { 
   SVGCOLOR: MGVAR(PressedBackground);
   SVGBORDER: MGVAR(PressedBorder);
   stroke-width: 0 MGIFNOTVAR(PressedBorder);
}
MGELEM(Button) [.].mg-tile-btn:hover:not(.mg-readonly) > text, 
               [.].mg-tile-btn:active:not(.mg-readonly) > text, 
               [.].mg-tile-btn:focus:not(.mg-readonly) > text { 
   SVGTEXTCOLOR: MGVAR(HoverForeground);
   cursor: pointer;
}
MGELEM(Button) [.].mg-tile-btn:active > text { 
   SVGTEXTCOLOR: MGVAR(PressedForeground);
   cursor: pointer;
}
MGELEM(Button) [.].mg-tile-btn.mg-readonly > rect {
   SVGCOLOR: MGVAR(DisabledBackground);
   SVGBORDER: MGVAR(DisabledBorder);
   stroke-width: 0 MGIFNOTVAR(DisabledBorder);
   fill-opacity:1 MGIFVAR(DisabledBackground);
}
MGELEM(Button) [.].mg-tile-btn.mg-readonly > text {
   SVGTEXTCOLOR: MGVAR(DisabledForeground);
}

MGELEM(Button) [.].mg-tile-btn.mg-defbutton > rect {
   SVGCOLOR: MGVAR(DefaultButtonBackground);
   SVGBORDER: MGVAR(DefaultButtonBorder);
}
MGELEM(Button) [.].mg-tile-btn.mg-defbutton > text {
   SVGTEXTCOLOR: MGVAR(DefaultButtonForeground);
}
MGELEM(Button) [.].mg-tile-btn.mg-defbutton:hover:not(.mg-readonly) > rect, 
               [.].mg-tile-btn.mg-defbutton:active:not(.mg-readonly) > rect, 
               [.].mg-tile-btn.mg-defbutton:focus:not(.mg-readonly) > rect { 
   SVGCOLOR: MGVAR(DefaultButtonHoverBackground);
   cursor: pointer;
}
MGELEM(Button) [.].mg-tile-btn.mg-defbutton:hover:not(.mg-readonly) > rect, 
               [.].mg-tile-btn.mg-defbutton:focus:not(.mg-readonly) > rect { 
   SVGBORDER: MGVAR(DefaultButtonHoverBorder);
   stroke-width: 0 MGIFNOTVAR(DefaultButtonHoverBorder);
}
MGELEM(Button) [.].mg-tile-btn.mg-defbutton:active > rect { 
   SVGBORDER: MGVAR(DefaultPressedBorder);
   stroke-width: 0 MGIFNOTVAR(DefaultPressedBorder);
}
MGELEM(Button) [.].mg-tile-btn.mg-defbutton:hover:not(.mg-readonly) > text, 
               [.].mg-tile-btn.mg-defbutton:active:not(.mg-readonly) > text, 
               [.].mg-tile-btn.mg-defbutton:focus:not(.mg-readonly) > text { 
   SVGTEXTCOLOR: MGVAR(DefaultButtonHoverForeground);
   cursor: pointer;
}

MGELEM(Checkbox) [.].mg-tile-ckbox > rect {
   SVGCOLOR: MGVAR(Background);
}
MGELEM(Checkbox) [.].mg-tile-ckbox > text {
   SVGTEXTCOLOR: MGVAR(Foreground);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}
MGELEM(Checkbox) [.].mg-tile-ckbox.mg-readonly > rect {
   SVGCOLOR: MGVAR(DisabledBackground) !important;
}
MGELEM(Checkbox) [.].mg-tile-ckbox.mg-readonly > text {
   SVGTEXTCOLOR: MGVAR(DisabledForeground);
}
MGELEM(Checkbox) [.].mg-tile-ckbox.mg-disabled > text {
   fill-opacity:1 MGIFVAR(DisabledBackground);
}
MGELEM(Checkbox) [.].mg-tile-ckbox.mg-req > rect {
   SVGCOLOR: MGVAR(RequiredBackground);
}
MGELEM(Checkbox) [.].mg-tile-ckbox.mg-req > text {
   SVGTEXTCOLOR: MGVAR(RequiredForeground);
}
MGELEM(Checkbox) [.].mg-tile-ckbox.mg-tbd > rect {
   SVGCOLOR: MGVAR(TBDBackground);
}
MGELEM(Checkbox) [.].mg-tile-ckbox.mg-tbd > text {
   SVGTEXTCOLOR: MGVAR(TBDForeground);
}
/***
MGELEM(Checkbox) [.].mg-tile-ckbox:hover > rect {
   SVGCOLOR: MGVAR(HoverBackground);
}
MGELEM(Checkbox) [.].mg-tile-ckbox:hover > text {
   SVGTEXTCOLOR: MGVAR(HoverForeground);
}
***/

/* Calendar */
MGELEM(Calendar) [.] .mg-calendar .x-panel-body-default {
   font-size: MGVAR(FontSize);
}

MGELEM(Calendar) [.] .mg-calendar .x-toolbar-text {
   FORECOLOR: MGVAR(Foreground);
   font-family: MGVAR(FontFamily);
}

MGELEM(Calendar) [.] .mg-calendar .ext-cal-hd-days-tbl {
   FORECOLOR: MGVAR(Foreground);
   font-family: MGVAR(FontFamily);
}

MGELEM(Calendar) [.] .mg-calendar .ext-cal-toolbar {
   BACKCOLOR: MGVAR(Background);
}

MGELEM(Calendar) [.] .mg-calendar .ext-cal-day {
   BACKCOLOR: MGVAR(CalendarDayBackground);
}

MGELEM(Calendar) [.] .ext-cal-day.ext-cal-day-prev  {
   BACKCOLOR: MGVAR(CalendarAlternateBackground);
   FORECOLOR: MGVAR(CalendarAlternateForeground);
}

MGELEM(Calendar) [.] .ext-cal-day.ext-cal-day-next {
   BACKCOLOR: MGVAR(CalendarAlternateBackground);
   FORECOLOR: MGVAR(CalendarAlternateForeground);
}

MGELEM(Calendar) [.] .mg-calendar .ext-cal-month-hd .ext-cal-hd-day, [.] .mg-calendar .ext-cal-monthview .ext-cal-week-link-hd, [.] .mg-calendar .ext-cal-monthview .ext-cal-week-link {
   BACKCOLOR: MGVAR(CalendarHeaderBackground);
   FORECOLOR: MGVAR(CalendarHeaderForeground);
   font-size: MGVAR(CalendarHeaderFontSize);
   font-family: MGVAR(CalendarHeaderFontFamily);
}

MGELEM(Calendar) [.] .mg-calendar td.ext-cal-dtitle {
   BACKCOLOR: MGVAR(CalendarHeaderBackground);
   FORECOLOR: MGVAR(CalendarHeaderForeground);
   font-size: MGVAR(CalendarHeaderFontSize);
   font-family: MGVAR(CalendarHeaderFontFamily);
   line-height: 1em;
}

MGELEM(Calendar) [.] .mg-calendar .ext-cal-dtitle-prev div {
   FORECOLOR: MGVAR(CalendarHeaderForeground);
}

MGELEM(Calendar) [.] .mg-calendar .ext-cal-dtitle-next div {
   FORECOLOR: MGVAR(CalendarHeaderForeground);
}

MGELEM(Calendar) [.] .ext-cal-monthview .ext-cal-week-link-hd {
   BACKCOLOR: MGVAR(CalendarHeaderBackground);
}

MGELEM(Calendar) [.] .ext-cal-monthview .ext-cal-week-link {
   BACKCOLOR: MGVAR(CalendarHeaderBackground);
}

MGELEM(Calendar) [.] td.ext-cal-dtitle {
   BACKCOLOR: MGVAR(CalendarHeaderBackground);
}

MGELEM(Calendar) [.] .ext-cal-gutter {
   BACKCOLOR: MGVAR(CalendarHeaderBackground);
}

MGELEM(Calendar) [.] .ext-cal-gutter-rt {
   BACKCOLOR: MGVAR(CalendarHeaderBackground);
}

MGELEM(Calendar) [.] .ext-cal-day-time-inner {
   BACKCOLOR: MGVAR(CalendarHeaderBackground);
   FORECOLOR: MGVAR(CalendarHeaderForeground);
   font-size: MGVAR(CalendarHeaderFontSize);
   font-family: MGVAR(CalendarHeaderFontFamily);
   line-height: 1em;
}

MGELEM(Calendar) [.] .mgCalendar-month-day-selected {
   BACKCOLOR: MGVAR(CalendarDayBackground);
   FORECOLOR: MGVAR(CalendarDayForeground);
}

MGELEM(Calendar) [.] .ext-cal-evr.ext-cal-evt, [.] .ext-cal-day-col-gutter  .ext-cal-evr.ext-cal-evt {
   FORECOLOR: MGVAR(CalendarEventForeground);
   font-size: MGVAR(CalendarEventFontSize);
   font-family: MGVAR(CalendarEventFontFamily);
}

MGELEM(Calendar) [.] .mg-calendar:not(.mg-readonly) .ext-evt-over.ext-cal-evr.ext-cal-evt {
   BACKCOLOR: MGVAR(HoverBackground) !important;
   FORECOLOR: MGVAR(HoverForeground);
   opacity: 1 MGIFVAR(HoverBackground);
}

MGELEM(Calendar) [.] .mg-cal-tooltip {
   BACKCOLOR: MGVAR(CalendarTooltipBackground);
}

MGELEM(Calendar) [.] .mg-cal-tooltip .x-tip-body-default {
   font-size: MGVAR(CalendarTooltipFontSize);
   FORECOLOR: MGVAR(CalendarTooltipForeground);
   font-family: MGVAR(CalendarTooltipFontFamily);
   line-height: 1em;
}
/* End - Calendar */

/* DataView */
MGELEM(DataView) [.] .ui-iggrid .ui-iggrid-headertable,  
                 [.] .ui-iggrid .ui-iggrid-tablebody.ui-widget-content {
   font-size: MGVAR(FontSize);
   font-family: MGVAR(FontFamily);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}

MGELEM(Dataview) [.] .ui-iggrid .ui-iggrid-table tr:not(.ui-iggrid-altrecord) {
   BACKCOLOR: MGVAR(AltRowBackground);
   FORECOLOR: MGVAR(AltRowForeground);
}

MGELEM(DataView) [.] .ui-iggrid .ui-iggrid-table tr.ui-iggrid-altrecord {
   BACKCOLOR: MGVAR(EvenAltRowBackground);
   FORECOLOR: MGVAR(EvenAltRowForeground);
}

MGELEM(DataView) [.] .ui-widget, [.] .ui-widget-footer {
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}

MGELEM(DataView) [.] .ui-iggrid th.ui-state-default a, 
                 [.] .ui-iggrid-record.ui-iggrid-groupedrow, 
                 [.] .ui-iggrid-groupedcolumnlabel {
   FORECOLOR: MGVAR(ColHeaderForeground);
}

MGELEM(DataView) [.] .ui-iggrid .ui-iggrid-headertable .ui-iggrid-header, 
                 [.] .ui-iggrid .ui-iggrid-headertable .ui-iggrid-filterrow {
   BACKCOLOR: MGVAR(ColHeaderBackground);
   FORECOLOR: MGVAR(ColHeaderForeground);
}

MGELEM(DataView) [.] .ui-iggrid .ui-iggrid-headertable .ui-iggrid-childarea, 
                 [.] .ui-iggrid .ui-iggrid-headertable .ui-iggrid-record.ui-iggrid-groupedrow, 
                 [.] .ui-iggrid .ui-iggrid-headertable .ui-iggrid-groupedcolumnlabel, 
                 [.] .ui-iggrid .ui-iggrid-headertable .ui-iggrid-nongrouprowemptycell, 
                 [.] .ui-iggrid .ui-iggrid-headertable .ui-iggrid tfoot td.ui-state-default, 
                 [.] .ui-iggrid .ui-iggrid-headertable .ui-iggrid-footerextracell {
   BACKCOLOR: MGVAR(ColHeaderBackground);
}

/* not seeing any active row class */
MGELEM(DataView) [.] .ui-iggrid .ui-iggrid-activerow {
   BACKCOLOR: MGVAR(SelectedRowBackground);
   FORECOLOR: MGVAR(SelectedRowForeground);
}

MGELEM(DataView) [.] .ui-iggrid .ui-iggrid-headertable .ui-iggrid-header.ui-state-hover,
                 [.] .ui-iggrid .ui-iggrid-headertable .ui-iggrid-filterrow.ui-state-hover, 
                 [.] .ui-iggrid .ui-iggrid-headertable .ui-iggrid-filtercell.ui-state-hover {
   BACKCOLOR: MGVAR(HoverBackground) !important MGIFVAR(HoverBackground);
   FORECOLOR: MGVAR(HoverForeground) !important MGIFVAR(HoverForeground);
}

MGELEM(Dataview) [.] .ui-iggrid .ui-iggrid-tablebody.ui-widget-content .ui-state-hover {
   BACKCOLOR: MGVAR(HoverBackground);
   FORECOLOR: MGVAR(HoverForeground);
}

MGELEM(Dataview) [.] .ui-iggrid .ui-iggrid-tablebody.ui-widget-content .ui-state-focus {
   BACKCOLOR: MGVAR(HighlightedCellBackground);
   FORECOLOR: MGVAR(HighlightedCellForeground);
}
/* End - DataView */

/* FlexLayout */
MGELEM(FlexLayout) [.].mg-flexlayout {
   BACKCOLOR: MGVAR(Background);
}

MGELEM(FlexLayout) [.].mg-flexlayout:hover {
   BACKCOLOR: MGVAR(HoverBackground);
}

/* Infocon */
MGELEM(Infocon) [.].mg-infocon,                      /* AO & combobox */
                [.].mg-infocon.x-boundlist {         /* combobox popup */
   FORECOLOR: MGVAR(Foreground);
   BACKCOLOR: MGVAR(Background);
   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}

MGELEM(Infocon) [.].mg-infocon-combo > .x-form-item-body  text,
                [.].mg-infocon.x-boundlist text,
                [.].mg-infocon-array .x-panel-body text {
   SVGTEXTCOLOR: MGVAR(Foreground);
}

MGELEM(Infocon) [.].mg-infocon:not(.mg-readonly) .x-combo-list-item:hover  rect.mg-tile-background,
                [.].mg-infocon:not(.mg-readonly) .x-boundlist-item-over  rect.mg-tile-background,
                [.].mg-infocon:not(.mg-readonly) .x-form-text-wrap:hover rect.mg-tile-background {
   SVGCOLOR: MGVAR(HoverBackground);
}
MGELEM(Infocon) [.].mg-infocon:not(.mg-readonly) .x-combo-list-item:hover  text,
                [.].mg-infocon:not(.mg-readonly) .x-boundlist-item-over  text,
                [.].mg-infocon:not(.mg-readonly) .x-form-text-wrap:hover text {
   SVGTEXTCOLOR: MGVAR(HoverForeground);
}

MGELEM(Infocon) [.].mg-infocon-combo:not(.mg-readonly) .x-form-text-wrap:hover,
                [.].mg-infocon-combo:not(.mg-readonly) .x-form-text-wrap:hover input,
                [.].mg-infocon-combo:not(.mg-readonly) .x-form-text-wrap:hover .mg-tile {
   BACKCOLOR: MGVAR(HoverBackground);
   FORECOLOR: MGVAR(HoverForeground);
}

MGELEM(Infocon) [.].mg-infocon .mg-tile-current  rect.mg-tile-background {
   SVGCOLOR: MGVAR(SelectedTileBackground) !important;
}

MGELEM(Infocon) [.].mg-infocon.x-form-field-wrap.mg-readonly > input.mg-infocon.x-form-field,
                [.].mg-infocon-array.mg-readonly .x-panel-body {
   filter:none MGIFVAR(DisabledBackground);
   FORECOLOR: MGVAR(DisabledForeground);
   BACKCOLOR: MGVAR(DisabledBackground);
   opacity:1 MGIFVAR(DisabledBackground);
}

/* TreeControl */
MGELEM(TreeControl) [.].mg-tree .x-panel-body {
   BACKCOLOR: MGVAR(Background);
   FORECOLOR: MGVAR(Foreground);

   font-family: MGVAR(FontFamily);
   font-size: MGVAR(FontSize);
   font-weight: MGVAR(FontBold);
   font-style: MGVAR(FontItalic);
}

/* BUG - designer does not define a hover color but black/white is being sent to the webclient
MGELEM(TreeControl) [.].mg-tree .x-grid-item-over .x-tree-node-text {
   FORECOLOR: MGVAR(HoverForeground);
   BACKCOLOR: MGVAR(HoverBackground);
}
*/

/*
   style the document icon - but don't quite yet
   - but can't style the lines/elbows so it looks odd
   - color for fill needs to be plain rgb not rgba

MGELEM(TreeControl) [.].mg-tree .x-panel-body svg {
   fill: MGVAR(Foreground);
}

MGLEM(TreeControl) [.].mg-tree.mg-readonly .x-panel-body svg {
   fill: MGVAR(DisabledForeground);
}
*/

MGELEM(TreeControl) [.].mg-tree .x-grid-item-selected, 
                    [.].mg-tree .x-grid-item-focused {
   FORECOLOR: MGVAR(SelectedRowForeground);
   BACKCOLOR: MGVAR(SelectedRowBackground);
}

MGELEM(TreeControl) [.].mg-tree.mg-readonly * {
   BACKCOLOR: MGVAR(DisabledBackground);
   FORECOLOR: MGVAR(DisabledForeground);
}

MGELEM(TreeControl) [.].mg-tree.mg-readonly svg {
   fill: MGVAR(DisabledForeground);
}