//*===========* Imports *===========*/ 
@import "compass/css3";

//>skin_default_variables
// ==== Global Settings - Flags and other settings that have skin-wide effects
// Standard settings
$theme_name: "Tahoe" !default;
// Global flags
$experimental-support-for-svg: true !default;
$use_non_transparent_background: false !default;
$listGrid_show_rollOver_glow: true !default;
$listGrid_show_cell_separators: false !default;
$listGrid_show_row_separators: false !default;
$show_button_outer_glow: true !default;
$show_scroll_thumb_grip: true !default;
$invert_menu_icons_on_rollover: true !default;

// ==== Fonts - Variables for fonts
// Font
$primary_font: RobotoLight !default;
$secondary_font: corbel !default;
$secondary_font_bold: corbel-bold !default;
$tertiary_font: calibri !default;
$standard_body_font: $tertiary_font !default;
$standard_tab_font: $secondary_font !default;
$standard_menu_font: $secondary_font !default;
$standard_hover_font: $standard_body_font !default;
// Font sizes
$normal_font_size: 12px !default;
$standard_font_size: 11px !default;
$standard_small_font_size: 9px !default;
$standard_header_font_size: 14px !default;

// ==== Standard Colors - Variables for Colors
// Color settings
$primary_hue: 214 !default;
$default_saturation: 74% !default;
$default_lightness: 58% !default;
$default_glow_color: hsl($primary_hue - 9, 87%, 53%) !default;
$default_outset_glow: 0 0 5px 0 $default_glow_color !default;
$default_inset_glow: inset 0 0 5px 0 $default_glow_color !default;
$selectedRow_hue: $primary_hue !default;
// Standard settings
$standard_white: #ffffff !default;
$standard_black: #000000 !default;
$standard_gray: #808080 !default;
$standard_blue: #0000FF !default;
$standard_color: $standard_black !default;
$standard_bgColor: #fafafa !default;
$standard_border_color: #d0d0d0 !default;
$standard_header_color: white !default;
$standard_header_bgColor: hsl($primary_hue  - 11, 74%, 58%) !default;
$standard_header_dark_bgColor: hsl($primary_hue  - 9, 81%, 44%) !default;
$standard_widget_border_color: $standard_border_color !default;
$default_border_color: #ababab !default;
$secondary_hue: 203.02 !default;
$normal_font_color: hsl(0, 0%, 15.7%) !default;

// ==== Standard Settings - Base settings that are derived by more localized variables
// Standard settings
$standard_border_width: 1px !default;
$standard_transparent_border: $standard_border_width solid transparent !default;
$standard_button_border_radius: 0px !default;
// Safari browser wrongly renders white text in certain elements for some combinations of
// color/background-color.  Currently, we remap #ababab to #a1a1a1 to avoid the bug in formItem-
// related CSS classes for non-dark flat skins (i.e. all but Obsidian and Twilight).  So if you
// change $default_disabled_text_color, Canvas._patchStyleSheetsForSafari() may need updating.
$default_disabled_text_color: #ababab !default;
$default_border_dark_color: #cccccc !default;
$general_button_focused_border_color: hsl($primary_hue  - 9, 100%, 28%) !default;
$active_over_bgColor: hsl($primary_hue  - 11, 100%, 86%) !default;
$secondary_header_bgColor: #f0f0f0 !default;
$active_disabled_bgColor: $standard_widget_border_color !default;
$secondary_header_color: #616161 !default;

// ==== Buttons - Variables for Button styles
// General
$button_font_size: $standard_font_size !default;
$button_primary_hue: 214 !default;
$button_border_color: hsl($primary_hue  - 9, 100%, 28%) !default;
$button_border_radius: $standard_button_border_radius !default;
$button_normal_color: white !default;
$button_normal_bgColor: $standard_header_dark_bgColor !default;
$button_normal_border_color: $button_normal_bgColor !default;
$button_normal_border: 2px solid $button_normal_border_color !default;
$button_disabled_color: #ababab !default;
$button_disabled_bgColor: #dadada !default;
$button_disabled_border: 2px solid #dadada !default;
$button_focused_border_color: $general_button_focused_border_color !default;
$button_focused_border: 2px solid $button_focused_border_color !default;
$button_over_border: $button_normal_border !default;
$button_over_shadow: 0 0 0.2em 0.1em hsl($primary_hue + 2, 87%, 53%) !default;
$button_over_bgColor: $button_normal_bgColor !default;
$button_down_bgColor: $button_normal_bgColor !default;
$button_deselected_disabled_color: hsl(0, 0%, 66%) !default;

// ==== Windows and Dialogs - Variables used for styling Windows and Dialogs
// Window
$window_border_color: $standard_border_color !default;
$window_shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.05) !default;
$window_body_bgColor: $standard_bgColor !default;
// Header
$window_header_font: $standard_body_font !default;
$window_header_font_size: 14px !default;
$window_header_color: $standard_header_color !default;
$window_header_bgColor: $standard_header_bgColor !default;
// Status
$window_status_color: $button_normal_bgColor !default;
$window_status_bgColor: white !default;
$window_status_font_size: $standard_font_size !default;

// ==== Menus and MenuButtons - Variables for styling Menus and MenuButtons
// Menu
$menu_font: $standard_menu_font !default;
$menu_font_size: $standard_font_size !default;
$menu_over_bgColor: $standard_header_dark_bgColor !default;
$menu_selected_color: #282828 !default;
$menu_disabled_color: #999999 !default;
$menu_bgColor: hsl($primary_hue, 0%, 100%) !default;
$menu_parent_over_bgColor: hsl($primary_hue  - 9, 82%, 59%) !default;
// MenuButton
$menuButton_hue: 214 !default;
$menuButton_standard_color: $menu_over_bgColor !default;
$menuButton_border: 2px solid $menuButton_standard_color !default;
$menuButton_font: $standard_menu_font !default;
$menuButton_padding: 0px 0px 0px 6px !default;
$menuButton_font_size: $standard_font_size !default;
$menuButton_down_border_color: hsl($menuButton_hue  - 9, 100%, 28%) !default;
$menuButton_focused_over_color: $menuButton_standard_color !default;
$menuButton_focused_over_shadow: 0 0 5px $menuButton_focused_over_color !default;
$menuButton_focused_border_color: $general_button_focused_border_color !default;
$menuButton_focused_border: 2px solid #003760 !default;
$menuButton_border_color: #cccccc !default;
$menuButton_border_shadow: 0 0 15px 5px rgba(0,0,0,0.03) !default;
$menuButton_border_radius: $standard_button_border_radius !default;
$menuButton_normal_border: 2px solid $menuButton_standard_color !default;
$menuButton_opened_shadow: none !default;
$menuButton_focused_bgColor: hsl($menuButton_hue  - 9, 71%, 40%) !default;
$menuButton_focused_over_bgColor: hsl($menuButton_hue  - 9, 71%, 40%) !default;
$menuButton_focused_over_border_color: hsl($menuButton_hue  - 8, 100%, 19%) !default;
$menuButton_focused_over_border: 2px solid $menuButton_focused_over_border_color !default;
$menuButton_down_border: 2px solid $menuButton_down_border_color !default;
$menuButton_down_bgColor: $button_normal_bgColor !default;
$menuButton_down_glow: inset 0 0 5px 1px $menuButton_down_border_color !default;
$menuButton_over_bgColor: $button_normal_bgColor !default;
$menuButton_selected_color: $standard_white !default;
$menuButton_disabled_color: #9e9e9e !default;
$menuButton_disabled_bgColor: #dadada !default;
$menuButton_disabled_border_color: #dadada !default;

// ==== Tabs - Variables for Tab styles
// Tabset
$tabSet_container_color: $standard_widget_border_color !default;
$tabSet_container_bgColor: $standard_white !default;
$tabSet_container_border_color: #9e9e9e !default;
$tabSet_container_font_size: $standard_font_size !default;
$tabSet_scroller_sprite_image: url("images/TabSet/controls-btn.png") !default;
$tabSet_picker_sprite_image: url("images/TabSet/controls-btn.png") !default;
// TabButton settings
$tabButton_font: $secondary_font_bold !default;
$tabButton_font_size: 11px !default;
$tabButton_color: $standard_white !default;
$tabButton_bgColor: hsl($primary_hue  - 9, 74%, 72%) !default;
$tabButton_border_color: hsl($primary_hue  - 9, 74%, 72%) !default;
$tabButton_border_width: 2px !default;
$tabButton_over_border_color: $tabButton_border_color !default;
$tabButton_focused_border_color: $general_button_focused_border_color !default;
$tabButton_top_down_shadow: inset -10px 0px 10px -11px $tabButton_focused_border_color, inset 10px 10px 10px -11px $tabButton_focused_border_color !default;
$tabButton_bottom_down_shadow: inset -10px 0px 10px -11px $tabButton_focused_border_color, inset 10px -10px 10px -11px $tabButton_focused_border_color !default;
$tabButton_left_down_shadow: inset 10px 10px 10px -11px $tabButton_focused_border_color, inset 0px -10px 10px -11px $tabButton_focused_border_color !default;
$tabButton_right_down_shadow: inset -10px 10px 10px -11px $tabButton_focused_border_color, inset 0px -10px 10px -11px $tabButton_focused_border_color !default;
$tabButton_selected_font: $tabButton_font !default;
$tabButton_selected_color: $standard_white !default;
$tabButton_selected_bgColor: $standard_header_dark_bgColor !default;
$tabButton_selected_border_color: $standard_header_dark_bgColor !default;
$tabButton_selected_over_border_color: $tabButton_selected_bgColor !default;
$tabButton_disabled_color: #9e9e9e !default;
$tabButton_disabled_bgColor: #dadada !default;
$tabButton_disabled_border_color: #dadada !default;
$tabButton_over_shadow: 0 0 0.2em 0.1em hsl($primary_hue + 2, 87%, 53%) !default;

// ==== SectionStacks - Variables for SectionStack styles
// General SectionStack settings
$sectionStack_border_color: $standard_widget_border_color !default;
$sectionStack_primary_hue: 214 !default;
$sectionStack_saturation: -80 !default;
$sectionStack_lightness: -42 !default;
$sectionStack_glossy: false !default;
// SectionHeader
$sectionHeader_horizontal_border_weight: thin !default;
$sectionHeader_border_lightness: 0 !default;
$sectionHeader_font: $standard_body_font !default;
$sectionHeader_font_size: 12.58px !default;
$sectionHeader_color: #616161 !default;
$sectionHeader_bgColor: $secondary_header_bgColor !default;
$sectionHeader_padding_left: 10px !default;
$sectionHeader_padding_right: false !default;
$sectionHeader_disabled_text_color: #ababab !default;
$sectionHeader_disabled_bgColor: #dadada !default;
$sectionHeader_disabled_border_color: $standard_widget_border_color !default;

// ==== Navigation Bar - Variables for Navigation Bar styles
// General
$navBar_bgColor: $secondary_header_bgColor !default;
$navBar_border_color: $standard_widget_border_color !default;
$navBar_transition_duration: 450ms !default;
$navBar_leftButton_icon_fadeInDelay_ratio: 0.3 !default;
$navBar_leftButton_icon_fadeOutDuration_ratio: (1 - $navBar_leftButton_icon_fadeInDelay_ratio) !default;
$navBar_title_fadeOutDuration_ratio: 0.4 !default;
$navBar_title_fadeInDelay_ratio: 0.3 !default;
$navBar_fudgeFactor: 0.625 !default;
// Header
$navBar_header_font_size: 15px !default;
$navBar_header_font: $primary_font !default;
$navBar_header_color: #616161 !default;
// NavButton
$navButton_selected_color: $secondary_header_bgColor !default;
$navButton_selected_bgColor: #616161 !default;
$navButton_selected_border_color: #929292 !default;

// ==== ListGrids - Variables for ListGrid styles
// Font-related ListGrid settings
$listGrid_sortNumeral_font_size: 7px !default;
$listGrid_summaryCell_font_size: 12.5px !default;
$listGrid_groupNode_font_size: 12.5px !default;
$listGrid_cell_font_size: $normal_font_size !default;
$listGrid_cell_font: $standard_body_font !default;
$listGrid_headerButton_font: $standard_body_font !default;
// Color-related ListGrid settings
$listGrid_hue: $primary_hue !default;
$listGrid_selectedRow_hue: $selectedRow_hue !default;
$listGrid_glow_color: hsl($listGrid_selectedRow_hue - 9, 74%, 58%) !default;
$listGrid_border_color: $standard_widget_border_color !default;
// HeaderButton
$listGrid_headerButton_font_size: 12px !default;
$listGrid_headerButton_color: $standard_color !default;
$listGrid_headerButton_bgColor: $standard_header_bgColor !default;
$listGrid_headerButton_over_bgColor: hsl($listGrid_hue  - 11, 89%, 68%) !default;
$listGrid_headerButton_border: none !default;
$listGrid_headerButton_border_bottom: 0px !default;
$listGrid_headerButton_selected_over_bgColor: $listGrid_headerButton_over_bgColor !default;
$listGrid_headerButton_selected_horizontal_padding: 4px !default;
$listGrid_headerButton_disabled_hue: 46 !default;
$listGrid_headerButton_disabled_saturation: 0 !default;
$listGrid_headerButton_disabled_lightness: 0 !default;
$listGrid_headerButton_disabled_color: $standard_black !default;
$listGrid_headerButton_disabled_bgColor: hsl($listGrid_headerButton_disabled_hue + 1, 82%, 98%) !default;
$listGrid_headerButton_selected_bgColor: darken($listGrid_headerButton_bgColor, 5) !default;
$listGrid_headerSpan_over_bgColor: hsl($listGrid_hue  - 11, 89%, 68%) !default;
$listGrid_headerSpan_border_color: $standard_white !default;
$listGrid_headerTitle_color: $standard_black !default;
// Standard ListGrid settings
$listGrid_groupNode_text_color: hsl($listGrid_hue  - 9, 100%, 28%) !default;
$listGrid_groupNode_border_color: #8C8C8C !default;
$listGrid_body_bgColor: $standard_white !default;
$listGrid_show_header_bottom_border: false !default;
// Cells...
$listGrid_cell_font_color: #3f3f3f !default;
$listGrid_cell_text_font_color: $standard_white !default;
$listGrid_cell_bgColor: white !default;
$listGrid_cell_dark_bgColor: $standard_bgColor !default;
$listGrid_cell_altCol_bgColor: $standard_bgColor !default;
$listGrid_cell_altCol_dark_bgColor: #f5f5f5 !default;
$listGrid_cell_over_color: #3f3f3f !default;
$listGrid_cell_over_bgColor: hsl($listGrid_selectedRow_hue - 11, 100%, 86%) !default;
$listGrid_cell_selected_text_color: white !default;
$listGrid_cell_selected_bgColor: hsl($listGrid_selectedRow_hue  - 11, 85%, 66%) !default;
$listGrid_cell_selected_over_bgColor: hsl($listGrid_selectedRow_hue  - 11, 85%, 66%) !default;
$listGrid_cell_selected_over_glow_color: $listGrid_glow_color !default;
$listGrid_cell_selected_over_border_color: hsl($listGrid_selectedRow_hue  - 11, 85%, 66%) !default;
$listGrid_cell_disabled_color: #b8b8b8 !default;
$listGrid_cell_disabled_bgColor: #ededed !default;
$listGrid_summaryCell_disabled_bgColor: hsl($listGrid_hue  - 11, 100%, 95%) !default;
$listGrid_summaryCell_dark_color: hsl(0, 0%, 34.5%) !default;
$listGrid_summaryCell_border_color: $general_button_focused_border_color !default;
$listGrid_summaryCell_color: $listGrid_summaryCell_border_color !default;
$listGrid_summaryCell_bgColor: hsl($listGrid_hue  - 11, 100%, 95%) !default;

// ==== Trees - Variables for TreeGrid styles
// General
$treeGrid_hue: $primary_hue !default;
$treeGrid_selectedRow_hue: $selectedRow_hue !default;
$treeGrid_glow_color: hsl($treeGrid_selectedRow_hue - 9, 74%, 58%) !default;
// Cell
$treeGrid_cell_color: #616161 !default;
$treeGrid_cell_over_color: white !default;
$treeGrid_cell_over_bgColor: hsl($treeGrid_selectedRow_hue - 11, 100%, 86%) !default;
$treeGrid_cell_selected_color: white !default;
$treeGrid_cell_selected_bgColor: hsl($treeGrid_selectedRow_hue  - 11, 85%, 66%) !default;
$treeGrid_cell_selected_over_bgColor: hsl($treeGrid_selectedRow_hue  - 11, 85%, 66%) !default;
$treeGrid_cell_selected_over_glow_color: $treeGrid_glow_color !default;

// ==== CubeGrid - Variables for CubeGrid styles
// General
$cubeGrid_font: $standard_body_font !default;
$cubeGrid_hue: $primary_hue !default;
$cubeGrid_selectedRow_hue: $selectedRow_hue !default;
$cubeGrid_glow_color: hsl($cubeGrid_selectedRow_hue - 9, 74%, 58%) !default;
$cubeGrid_font_size: $normal_font_size !default;
// Headers
$cubeGrid_header_font: $tertiary_font !default;
$cubeGrid_header_color: $standard_white !default;
$cubeGrid_header_bgColor: $standard_header_bgColor !default;
$cubeGrid_header_border_color: $standard_white !default;
$cubeGrid_header_over_bgColor: hsl($cubeGrid_hue  - 11, 92%, 72%) !default;
$cubeGrid_header_disabled_color: $standard_gray !default;
$cubeGrid_header_disabled_bgColor: #7D7D7D !default;
$cubeGrid_header_selected_bgColor: $standard_header_dark_bgColor !default;
$cubeGrid_header_selected_over_color: $cubeGrid_header_color !default;
$cubeGrid_header_selected_over_bgColor: hsl($cubeGrid_hue  - 9, 86%, 28%) !default;
$cubeGrid_header_selected_down_bgColor: hsl($cubeGrid_hue  - 9, 87%, 34%) !default;
$cubeGrid_header_selected_disabled_bgColor: hsl($cubeGrid_hue  - 2, 49%, 47%) !default;
$cubeGrid_headerLabel_color: $cubeGrid_header_color !default;
$cubeGrid_headerLabel_bgColor: $cubeGrid_header_selected_bgColor !default;
$cubeGrid_headerLabel_selected_bgColor: hsl($cubeGrid_hue  - 9, 93%, 34%) !default;
$cubeGrid_innerHeader_font_size: 12px !default;
$cubeGrid_innerHeader_color: #3f3f3f !default;
$cubeGrid_innerHeader_border_color: $standard_widget_border_color !default;
$cubeGrid_innerHeader_top_border: $standard_border_width solid $cubeGrid_innerHeader_border_color !default;
$cubeGrid_innerHeader_bgColor: #e6e6e6 !default;
$cubeGrid_headerLabel_font_size: 13px !default;
// Cells
$cubeGrid_cell_selected_over_glow_color: $cubeGrid_glow_color !default;
$cubeGrid_cell_font_color: #3f3f3f !default;
$cubeGrid_cell_bgColor: white !default;
$cubeGrid_cell_border_color: $standard_widget_border_color !default;
$cubeGrid_cell_dark_bgColor: $standard_bgColor !default;
$cubeGrid_cell_over_color: $cubeGrid_cell_font_color !default;
$cubeGrid_cell_over_bgColor: hsl($cubeGrid_selectedRow_hue - 11, 100%, 86%) !default;
$cubeGrid_cell_selected_color: $cubeGrid_cell_font_color !default;
$cubeGrid_cell_selected_bgColor: hsl($cubeGrid_selectedRow_hue  - 11, 85%, 66%) !default;
$cubeGrid_cell_selected_over_color: $cubeGrid_cell_font_color !default;
$cubeGrid_cell_selected_over_bgColor: hsl($cubeGrid_selectedRow_hue  - 11, 85%, 66%) !default;
$cubeGrid_cell_disabled_color: hsl(0, 0%, 40%) !default;

// ==== PickLists - Variables for PickList styles
// General
$pickList_selectedRow_hue: $selectedRow_hue !default;
$pickList_menu_bgColor: $standard_white !default;
$pickList_menu_border: $standard_border_width solid hsl(0, 0%, 72.2%) !default;
// Cell
$pickList_selected_over_bgColor: hsl($pickList_selectedRow_hue - 11, 100%, 86%) !default;
$pickList_cell_deselected_color: hsl(0, 0%, 66%) !default;
$pickList_cell_disabled_color: hsl(0, 0%, 33%) !default;
$pickList_cell_over_bgColor: hsl($pickList_selectedRow_hue - 11, 100%, 86%) !default;
$pickList_cell_over_border_color: hsl(0, 0%, 77%) !default;

// ==== TileGrids - Variables for TileGrid styles
// SimpleTile
$tileGrid_simpleTile_over_bgColor: $standard_bgColor !default;
$tileGrid_simpleTile_font_size: $standard_small_font_size !default;
$tileGrid_simpleTile_over_border_color: hsl(0, 0%, 81%) !default;
$tileGrid_simpleTile_selected_bgColor: $standard_bgColor !default;
$tileGrid_simpleTile_selected_border_color: hsl(0, 0%, 81%) !default;

// ==== SplitBars - Variables used for styling SplitBars
// General
$splitBar_hue: 214 !default;
$splitBar_saturation: -75 !default;
$splitBar_lightness: 0 !default;
$splitBar_bgColor: #e6e6e6 !default;

// ==== RichTextEditors - Variables used for styling RichTextEditors
// General
$rich_text_border_color: $standard_widget_border_color !default;

// ==== ToolStrips - Variables used for styling ToolStrips
// General
$toolStrip_border_color: $standard_widget_border_color !default;
$toolStrip_bgColor: $secondary_header_bgColor !default;
// Group
$toolStripGroup_color: #616161 !default;
$toolStripGroup_font_size: 15.5px !default;
$toolStripGroup_border_color: $standard_widget_border_color !default;
$toolStripGroup_bgColor: $toolStrip_bgColor !default;
$toolStripGroup_font: $standard_body_font !default;
// Button
$toolStripButton_font: $primary_font !default;
$toolStripButton_color: $toolStrip_bgColor !default;
$toolStripButton_border_color: #ababab !default;
$toolStripButton_over_border_color: #9e9e9e !default;
$toolStripButton_over_bgColor: transparent !default;
$toolStripButton_selected_bgColor: #616161 !default;
$toolStripButton_selected_border_color: #9e9e9e !default;
$toolStripButton_disabled_bgColor: #e8e8e8 !default;

// ==== Ribbons and IconButtons - Variables used for styling Ribbons and IconButtons
// RibbonBar
$ribbonBar_bgColor: $standard_white !default;
$ribbonBar_border_color: $standard_widget_border_color !default;
$ribbonBar_shadow: #fafcff 0 1px 0 inset !default;
// RibbonGroup
$ribbonGroup_shadow: 3px 3px 5px 2px #f3f3f3 !default;
// IconButton
$iconButton_color: #4d4d4d !default;
$iconButton_border_color: transparent !default;
$iconButton_border_over_color: $standard_widget_border_color !default;
$iconButton_border_selected_color: hsl($primary_hue  - 9, 76%, 52%) !default;
$iconButton_bgColor: transparent !default;
$iconButton_over_bgColor: $standard_bgColor !default;
$iconButton_border_radius: 3px !default;
$iconButton_menu_icon_border_radius: 3px !default;
$iconButton_font: $standard_body_font !default;
$iconButton_font_size: 13.5px !default;

// ==== Scrollbars - Variables used for styling Scrollbars
// ScrollTrack
$scrollTrack_bgColor: #ededed !default;
$scrollTrack_down_bgColor: $default_border_dark_color !default;
$scrollTrack_over_bgColor: hsl(0, 0%, 85.5%) !default;
$scrollTrack_disabled_background: linear-gradient(top,(#e3e3e3, #efefef 20%, #f2f2f2 90%, $scrollTrack_bgColor)) !default;
// Scrollbar
$scrollbar_default_border: none !default;
$scrollbar_vertical_start_over_xpos: -32px !default;
$scrollbar_vertical_start_down_xpos: -48px !default;
$scrollbar_vertical_end_over_xpos: -32px !default;
$scrollbar_vertical_end_down_xpos: -48px !default;
$scrollbar_horizontal_start_over_ypos: -32px !default;
$scrollbar_horizontal_start_down_ypos: -48px !default;
$scrollbar_horizontal_end_over_ypos: -32px !default;
$scrollbar_horizontal_end_down_ypos: -48px !default;

// ==== DynamicForms and FormItems - Variables used for styling DynamicForms and the various FormItem types
// form standard
$radio_button_skinning: false !default;
$form_value_color: hsl(0, 0%, 20%) !default;
$form_title_color: hsl($primary_hue  - 2, 100%, 20%) !default;
$hint_text_color: hsl($primary_hue  - 2, 53%, 27%) !default;
$headerItem_color: hsl(0, 0%, 30%) !default;
// FormItem
$formItem_font_size: 12.58px !default;
$formItem_bgColor: white !default;
$formItem_border_color: #b8b8b8 !default;
$formItem_hint_color: #999999 !default;
$formItem_error_color: hsl($primary_hue - 2, 53%, 27%) !default;
$formItem_focused_border_color: $button_normal_bgColor !default;
$formItem_focused_bgColor: $formItem_bgColor !default;
$formItem_focused_shadow: none !default;
$formItem_focused_over_border_color: $general_button_focused_border_color !default;
$formItem_disabled_bgColor: #e2e2e2 !default;
$formItem_over_bgColor: $formItem_bgColor !default;
$formItem_over_border_color: $formItem_focused_border_color !default;
$formItem_over_border: $standard_border_width solid $formItem_over_border_color !default;
$formItem_over_shadow: 0 0 5px 0 $formItem_focused_border_color !default;
$formItem_focused_over_shadow: $formItem_over_shadow, inset 0 0 5px 0 $formItem_focused_border_color !default;
$formItem_color: #282828 !default;
$formItem_edit_font: $standard_body_font !default;
$uploadItem_bgColor: $formItem_bgColor !default;
// ComboBox
$combo_pending_hue: 214 !default;
$combobox_item_picker_icon: url(./images/pickers/down.png) !default;
$combobox_item_picker_over_icon: url(./images/pickers/down.png) !default;
$combobox_item_picker_focused_over_icon: url(./images/pickers/down.png) !default;
$combobox_item_picker_disabled_icon: url(./images/pickers/down_Disabled.png) !default;
// SelectItem
$select_item_lite_control_over_border_color: $button_normal_bgColor !default;
$select_item_lite_control_focused_border_color: $button_normal_bgColor !default;
$select_item_lite_control_focused_outline: none !default;
$select_item_lite_control_disabled_border: 1px solid $default_border_color !default;
// Spinner
$spinner_lc_border_over: 1px solid $formItem_focused_border_color !default;
$spinner_lc_shadow_over: 0 0 5px 0 $select_item_lite_control_focused_border_color !default;
$spinner_lc_disabled_bgColor: $formItem_disabled_bgColor !default;
$spinner_lc_disabled_border: $formItem_border_color !default;
$spinner_lc_disabled_text_color: $default_disabled_text_color !default;
$spinner_increase_icon_offset: 0px 18px !default;
$spinner_increase_icon_offset_disabled: -16px 18px !default;
$spinner_increase_icon_offset_over: -31px 18px !default;
$spinner_decrease_icon_offset: 0px -4px !default;
$spinner_decrease_icon_offset_disabled: -16px -4px !default;
$spinner_decrease_icon_offset_over: -31px -4px !default;
$spinner_icon_sprite: url(./images/DynamicForm/spinner_control_sprite_transparent.png) !default;
$spinner_icon_sprite_rtl: url(./images/DynamicForm/spinner_control_sprite_transparent_rtl.png) !default;
// Pending Values
$pending_value_color: hsl($combo_pending_hue - 4, 100%, 40%) !default;
$pending_value_dark_color: #981c65 !default;

// Fix bug in Safari when you apply background-color: transparent.  In some situations, when
// applied to disabled <input> elements, the entire content of the element becomes invisible.
// So:
// - Use rgba(255,255,255,0) instead in most cases, since it has the same meaning and thus
//   doesn't affect other browsers but avoids triggering the bug in Safari.
// - For IE9 and earlier, which don't understand rgba(), use the \9 CSS hack to overlay the
//   original background-color: transparent CSS.
$transparent_background_from_rgba: rgba(255,255,255,0) !default;
$transparent_background_for_ie: \9 transparent !default;

// ==== DetailViewers - Variables used for styling DetailViewers
// Font
$detailViewer_font: $standard_body_font !default;
$detailViewer_font_size: $standard_font_size !default;
// Color
$detailViewer_color: #363636 !default;
$detailViewer_bgColor: hsl($primary_hue  - 11, 100%, 97%) !default;
$detailViewer_border_color: #929292 !default;
$detailViewer_label_bgColor: $standard_bgColor !default;

// ==== Sliders - Variables used for styling Sliders
// Title
$slider_title_color: #4d4d4d !default;
// Value
$slider_value_color: hsl($primary_hue  - 8, 12%, 23%) !default;
$slider_value_bgColor: $standard_white !default;
$slider_value_border_color: $formItem_border_color !default;
$slider_value_disabled_color: #9e9e9e !default;
$slider_value_disabled_bgColor: #e6e6e6 !default;
$slider_value_disabled_border_color: #b8b8b8 !default;
$slider_value_arrow_hidden_border_color: $standard_white !default;
// Range
$slider_range_color: $normal_font_color !default;
$slider_range_disabled_color: $default_disabled_text_color !default;
// Thumb
$slider_thumb_bgColor: $button_normal_bgColor !default;
$slider_thumb_outline: none !default;
$slider_thumb_disabled_bgColor: #9e9e9e !default;
$slider_thumb_disabled_outline: none !default;
// Track
$slider_track_bgColor: #e6e6e6 !default;
$slider_track_disabled_bgColor: #e6e6e6 !default;
$slider_activeTrack_disabled_bgColor: $active_disabled_bgColor !default;
$slider_activeTrack_bgColor: $active_over_bgColor !default;

// ==== DateChoosers - Variables used for styling DateChoosers
// General
$dateChooser_primary_hue: 214 !default;
$dateChooser_font: $primary_font !default;
$dateChooser_bgColor: hsl($dateChooser_primary_hue, 0%, 100%) !default;
$dateChooser_border_color: $standard_widget_border_color !default;
$dateChooser_shadow: 5px 5px 15px 0 rgba(0,0,0,0.05) !default;
// Navigation
$dateChooser_nav_sprite_image: none !default;
$dateChooser_nav_spriting: false !default;
$dateChooser_navButton_bgColor: $standard_bgColor !default;
$dateChooser_navButton_color: #616161 !default;
$dateChooser_navButton_over_color: hsl($dateChooser_primary_hue + 2, 57%, 54%) !default;
// Header
$dateChooser_header_text_color: $standard_header_bgColor !default;
$dateChooser_header_bgColor: $standard_white !default;
// Cell
$dateChooser_cell_color: $standard_black !default;
$dateChooser_cell_bgColor: $standard_white !default;
$dateChooser_cell_border_radius: 3px !default;
$dateChooser_cell_over_color: $standard_white !default;
$dateChooser_cell_over_bgColor: $standard_header_bgColor !default;
$dateChooser_cell_disabled_color: $default_border_dark_color !default;
$dateChooser_cell_selected_bgColor: $standard_header_bgColor !default;
$dateChooser_cell_selected_color: $standard_white !default;
// Button
$dateChooser_bottom_button_font: $secondary_font !default;
$dateChooser_bottom_button_font_size: $button_font_size !default;
$dateChooser_bottom_button_color: $dateChooser_cell_over_color !default;
$dateChooser_bottom_button_bgColor: $button_normal_bgColor !default;
$dateChooser_bottom_button_border_color: $button_normal_bgColor !default;
$dateChooser_bottom_button_down_shadow_color: $general_button_focused_border_color !default;
$dateChooser_bottom_button_over_shadow_color: hsl($primary_hue - 9, 87%, 53%) !default;
$dateChooser_bottom_button_over_bgColor: $button_normal_bgColor !default;
$dateChooser_bottom_button_border_radius: $standard_button_border_radius !default;
// Other
$dateChooser_weekend_bgColor: $standard_white !default;

// ==== ColorPickers - Variables used for styling ColorPickers
// General
$colorPicker_border_color: $standard_widget_border_color !default;
$colorPicker_bgColor: $standard_white !default;
// Header
$colorPicker_header_font: $window_header_font !default;
$colorPicker_header_font_size: $window_header_font_size !default;
$colorPicker_header_bgColor: $secondary_header_bgColor !default;
$colorPicker_header_color: $navBar_header_color !default;
// Cell
$colorPicker_cell_bgColor: $secondary_header_bgColor !default;
$colorPicker_cell_border_color: $standard_border_color !default;
$colorPicker_cell_over_border_color: $standard_black !default;

// ==== Calendars - Variables used for styling Calendars
// General
$calendar_bgColor: $standard_white !default;
$calendar_font_size: $standard_font_size !default;
$calendar_border_color: $button_disabled_color !default;
$calendar_text_color: $standard_black !default;
$calendar_dark_bgColor: $standard_bgColor !default;
$calendar_month_otherDay_header_selected_bgColor: hsl($primary_hue - 6, 54%, 84%) !default;
$calendar_disabled_over_bgColor: hsl($primary_hue  + 1, 43%, 75%) !default;
$calendar_disabled_bgColor: $standard_bgColor !default;
$calendar_label_column_bgColor: $standard_bgColor !default;
$calendar_other_day_color: #454545 !default;
$calendar_day_header_font_color: $calendar_other_day_color !default;
// Event Canvas
$calendar_eventWindow_font_size: $standard_font_size !default;
$calendar_eventWindow_color: $standard_black !default;
$calendar_eventWindow_bgColor: hsl($secondary_hue - 6, 100%, 97%) !default;
$calendar_eventWindow_border_color: hsl($secondary_hue + 2, 66%, 87%) !default;
$calendar_eventWindow_header_bgColor: hsl($secondary_hue + 2, 68%, 89%) !default;
$calendar_eventWindow_header_color: hsl(0, 0%, 30%) !default;
$calendar_eventWindow_header_border_color: hsl($secondary_hue + 2, 68%, 89%) !default;
// Other Canvas
$calendar_indicatorCanvas_bgColor: #AA0000 !default;
$calendar_indicatorCanvas_color: $standard_white !default;
$calendar_zoneCanvas_bgColor: #9e9e9e !default;
$calendar_zoneCanvas_opacity: 0.5 !default;

// ==== FilterBuilder - Settings that affect FilterBuilder widgets
// BracketBorder
$filterBuilder_bracketBorder_hue: 214 !default;
$filterBuilder_bracketBorder_lightness: 0 !default;
$filterBuilder_bracketBorder_saturation: 0 !default;

// ==== Charting - Settings that affect Charts
// Fonts
$chart_font_size: $normal_font_size !default;
$chart_value_font_size: $standard_font_size !default;
// Colors
$scChart_border_color: $listGrid_border_color !default;
$chartBar1_gradient_color: #990000 !default;
$chartBar1_bgColor: #FF0000 !default;
$chartBar2_bgColor: #0000FF !default;
$chartBar3_bgColor: #00FF00 !default;
$chart_axis_title_color: $standard_blue !default;

// ==== Hover Canvas - Settings that affect the hover canvas
// Font
$hoverCanvas_font_size: $standard_font_size !default;
// Colors
$hoverCanvas_color: #363636 !default;
$hoverCanvas_bgColor: hsl($primary_hue  - 11, 100%, 97%) !default;
$hoverCanvas_border_color: $standard_header_bgColor !default;
// Other
$hoverCanvas_padding: 5px !default;

// ==== Miscellaneous - Miscellaneous variables
// Resize Thumb
$resize_thumb_gradient_color: $standard_white !default;
$resize_thumb_border_color: $standard_gray !default;
$resize_thumb_bgColor: #C9F4F8 !default;
// Property Sheets
$propsheet_bgColor: $standard_white !default;
// Other
$link_color: $standard_blue !default;
$sample_output_border: $standard_widget_border_color !default;
$layout_dropLine_bgColor: hsl($primary_hue+2, 100%, 73%) !default;

// ==== Showcase - Styles for the Isomorphic Showcases
// showcase standard
$showcase_EButton_bgColor: hsl($primary_hue  - 11, 74%, 58%) !default;
//<skin_default_variables
//>skin_header_doc

//THE COMMENT BELOW IS A NOTE THAT WILL APPEAR IN GENERATED .css, 
//IT DOES NOT APPLY TO THIS .scss FILE, SO YOU MAY EDIT IT.
/*============================================================
This CSS file is generated from the Flat series of skins

DO NOT edit this .css file directly, unless renamed to 
something other than skin_styles.css, since future SASS compiles
will overwrite that file.
==============================================================*/

/*============================================================
	"Flat" theme CSS styles
	Copyright 2001 and beyond, Isomorphic Software

	:: Contents ::
	
	1) General
			default text
            default border
			drop indicator
            hover canvas
	2) Buttons
			Button
			ImgButton
			StretchImgButton
	3) Menu
			MenuButton
	4) Window
			Dialog
    5) Layout
			drop line
			drag placeholder
			splitbar (resizebar)
			SplitPane
	6) TabSet
			tab titles
	7) SectionStack
			image SectionHeaders
			CSS SectionHeaders
	8) Forms
			general
			headerItem
			text items
			selectItem
			checkbox & radioButton
			ColorChooser
			DateChooser
	9) Slider & Rangebar		
	10) DetailViewer
	11) ListGrid
			parts
			headers
			cells
    12) ToolStrip
    12a) ToolStripGroup and IconButton
    13) Tools
    14) TileGrid
    15) Scrollbars
	------------
	internal/unused styles
============================================================*/
//<skin_header_doc


//>skin_base_styles

/*============================================================
	1) General
============================================================*/

[data-isc-overflow-style="none"] {
    -ms-overflow-style: none;
}
[data-isc-overflow-style="none"]::-webkit-scrollbar {
    display: none;
}

/* tweak the builtin browser focus-outline - make it 1px and the same color as focused formItems */
*:focus {
    outline-color: $formItem_focused_border_color;
    outline-style: solid;
    // this seems not to go below 2px in Chrome
    outline-width: $standard_border_width;
    // this might start to work one day
    outline-radius: 0px; 
}

/*custom hr*/
hr {
    border-top: $standard_border_width solid $standard_border_color; 
    border-left: none;
    border-right: none;
    border-bottom: none;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 6px;
}

ol,
ul {
    // Disable text blow-up of ordered and unordered lists on iPhone:
    // http://stackoverflow.com/questions/13811747/bizarre-result-on-safari-for-iphone-ol-li-a-or-ul-li-a
    -webkit-text-size-adjust: 100%;
}

.pageBackground {
    background-color: $standard_bgColor;
    color: $standard_color;
    font: {
        family: $primary_font; 
        size: $standard_font_size;
    }
}

/* default text */
.normal,
.normalFocused,
.normalDisabled {
    //@if $use_non_transparent_background {
    //    background-color: $standard_bgColor;
    //}
    color: $normal_font_color;
    font: {
        family: $primary_font; 
        size: $normal_font_size;
    }
}

.normalDisabled {
    color: hsl($button_primary_hue, 0%, 67%);
}

.defaultBorder {
    border: $standard_border_width solid $default_border_color;
}

/* drag outline */
.dragOutline {
    border: $standard_border_width dashed hsl($primary_hue + 1, 95%, 51%);
}

/* drop indicator */
.dropBorder {
    background-color: $standard_gray;
}

/* hover canvas  */
.canvasHover,
.gridHover,
.formHover {
    background-color: $hoverCanvas_bgColor;
    border: $standard_border_width solid $hoverCanvas_border_color;
    color: $hoverCanvas_color;
    font-family: $standard_hover_font;
    font-size: $hoverCanvas_font_size;
    padding: $hoverCanvas_padding;
}

/* group label */
.groupLabel {
    background-color: $standard_bgColor;
    color: $normal_font_color;
    font: {
        family: $primary_font; 
        size: $standard_font_size;
    }
    padding: {
        left: 5px; 
        right: 5px;
    }
}

/* RichTextEditor */
.richTextEditorBorder {
    border: $standard_border_width solid $rich_text_border_color;
}

.richTextEditorToolArea {
    border-bottom: $standard_border_width solid $rich_text_border_color;
}

.listPropertiesButtonLayoutBorder {
    border-top: $standard_border_width solid $rich_text_border_color;
}

.richTextEditor p {
    margin-top: 0px; 
    margin-bottom: 0px;
}

.linkText {
    //padding: 2px 9px;
    outline: none;
    vertical-align: middle;
    font-family: $primary_font;
    font-size: $formItem_font_size;
    @include border-radius(0px);
}

/*============================================================
    2) Button
		button.baseStyle
		buttonStrip.baseStyle
		buttonTable.baseButtonStyle
		listBar.labelStyle
		listGrid.headerBaseStyle (not in this skin)
============================================================*/
.button,
.buttonOver,
.buttonFocused,
.buttonFocusedOver,
.buttonDown,
.buttonFocusedDown,
.buttonSelected,
.buttonSelectedFocused,
.buttonSelectedDown,
.buttonSelectedFocusedDown,
.buttonSelectedOver,
.buttonSelectedFocusedOver,
.buttonDisabled,
.buttonSelectedDisabled, 

.buttonPending,
.buttonPendingOver,
.buttonPendingFocused,
.buttonPendingFocusedOver,
.buttonPendingDown,
.buttonPendingFocusedDown,
.buttonPendingSelected,
.buttonPendingSelectedFocused,
.buttonPendingSelectedDown,
.buttonPendingSelectedFocusedDown,
.buttonPendingSelectedOver,
.buttonPendingSelectedFocusedOver,
.buttonPendingDisabled,
.buttonPendingSelectedDisabled {
    background-color: $button_normal_bgColor;
    border: $button_normal_border;
    @include border-radius($button_border_radius);
    padding-left: 5px;
    padding-right: 5px;
    line-height: 18px;
    outline: 0px; 
    color: $button_normal_color;
    font-size: $button_font_size;
    font-family: $secondary_font;
}

/* Buttons */
.button:hover,
.buttonOver,
.buttonPendingOver {
    background-color: $button_over_bgColor;
    border: $button_over_border;
    @include box-shadow($button_over_shadow);
} 

.buttonFocusedOver,
.buttonPendingFocusedOver {
    border: $button_over_border;
    @include box-shadow($menuButton_focused_over_shadow);
}

.buttonPending,
.buttonPendingOver,
.buttonPendingFocused,
.buttonPendingFocusedOver,
.buttonPendingDown,
.buttonPendingFocusedDown,
.buttonPendingSelected,
.buttonPendingSelectedFocused,
.buttonPendingSelectedDown,
.buttonPendingSelectedFocusedDown,
.buttonPendingSelectedOver,
.buttonPendingSelectedFocusedOver,
.buttonPendingDisabled,
.buttonPendingSelectedDisabled {
    color: $pending_value_dark_color; 
}

.buttonDeselectedDisabled {
    color: $button_deselected_disabled_color;
    text-decoration: line-through;
}

/* CSS3 Mode */
.buttonRounded,
.buttonRoundedOver,
.buttonRoundedFocused,
.buttonRoundedFocusedOver,
.buttonRoundedDown,
.buttonRoundedFocusedDown,
.buttonRoundedSelected,
.buttonRoundedSelectedFocused,
.buttonRoundedSelectedDown,
.buttonRoundedSelectedFocusedDown,
.buttonRoundedSelectedOver,
.buttonRoundedSelectedFocusedOver,
.buttonRoundedDisabled,
.buttonRoundedSelectedDisabled,

.buttonRoundedPending,
.buttonRoundedPendingOver,
.buttonRoundedPendingFocused,
.buttonRoundedPendingFocusedOver,
.buttonRoundedPendingDown,
.buttonRoundedPendingFocusedDown,
.buttonRoundedPendingSelected,
.buttonRoundedPendingSelectedFocused,
.buttonRoundedPendingSelectedDown,
.buttonRoundedPendingSelectedFocusedDown,
.buttonRoundedPendingSelectedOver,
.buttonRoundedPendingSelectedFocusedOver,
.buttonRoundedPendingDisabled,
.buttonRoundedPendingSelectedDisabled,

.buttonRoundedDeselectedDisabled,
.filterOperatorIcon,
.filterOperatorIconOver,
.filterOperatorIconFocused,
.filterOperatorIconFocusedOver,
.filterOperatorIconDown {
    background-color: $button_normal_bgColor;
    @include border-radius(5px);
    border: $button_normal_border;
    padding: 5px 10px;
    outline: 0px; 
    color: $button_normal_color;
    font-size: $button_font_size;
    font-family: $secondary_font;
}


.buttonDisabled,
.buttonSelectedDisabled {
    color: $menuButton_disabled_color;
    background-color: $button_disabled_bgColor; 
    border: $button_disabled_border;
    font-weight: normal;
}

/* disabled styles */
.buttonRoundedDisabled,
.buttonRoundedSelectedDisabled,

.buttonRoundedPendingDisabled,
.buttonRoundedPendingSelectedDisabled,

.buttonRoundedDeselectedDisabled,
.filterOperatorIconDisabled {
    color: $menuButton_disabled_color;
    background-color: $menuButton_disabled_bgColor; 
    border: 2px solid $menuButton_disabled_border_color;
    font-weight: normal;
}

.buttonFocused,
.buttonSelectedFocused {
    background-color: $menuButton_focused_bgColor;
    border: $button_focused_border;
}

.buttonFocusedOver,
.buttonSelectedFocusedOver,
.buttonSelectedFocusedDown {
    background-color: $menuButton_focused_over_bgColor;
    border: $menuButton_focused_over_border;
    
}

/* focused styles */
.buttonRoundedFocused,
.buttonRoundedFocusedOver,
.buttonRoundedSelectedFocused,
.buttonRoundedSelectedFocusedOver,
.buttonRoundedSelectedFocusedDown,

.buttonRoundedPendingFocused,
.buttonRoundedPendingFocusedOver,
.buttonRoundedPendingSelectedFocused,
.buttonRoundedPendingSelectedFocusedOver,
.buttonRoundedPendingSelectedFocusedDown,
.filterOperatorIconFocused,
.filterOperatorIconFocusedOver,
.filterOperatorIconSelected,
.filterOperatorIconSelectedFocused,
.filterOperatorIconSelectedFocusedOver {
    border: 2px solid $general_button_focused_border_color;
}


/* over and focused styles */
.buttonRoundedOver,
.buttonRoundedFocusedOver,
.buttonRoundedSelectedFocused,
.buttonRoundedSelectedFocusedOver,

.buttonRoundedPendingOver,
.buttonRoundedPendingFocusedOver,
.buttonRoundedPendingSelectedFocused,
.buttonRoundedPendingSelectedFocusedOver,
.filterOperatorIconOver,
.filterOperatorIconFocusedOver,
.filterOperatorIconSelectedFocused,
.filterOperatorIconSelectedFocusedOver {
    @include box-shadow(0 0 0.2em 0.1em $general_button_focused_border_color); 
}

/* Down styles */

.buttonDown,
.buttonFocusedDown,
.buttonSelectedDown,
.buttonSelectedFocusedDown {
    background-color: $button_down_bgColor;
    outline: none;
    border: $menuButton_down_border;
    padding-left: 5px;
    padding-right: 5px;
    @include box-shadow($menuButton_down_glow); 
}

.buttonRoundedDown,
.buttonRoundedFocusedDown,
.buttonRoundedSelectedDown,
.buttonRoundedSelectedFocusedDown,

.buttonRoundedPendingDown,
.buttonRoundedPendingFocusedDown,
.buttonRoundedPendingSelectedDown,
.buttonRoundedPendingSelectedFocusedDown {
    outline: none;
    border: none; 
    @include box-shadow(inset 0 0 10px $button_focused_border_color);
}

/* pending styles */
.buttonRoundedPending,
.buttonRoundedPendingOver,
.buttonRoundedPendingFocused,
.buttonRoundedPendingFocusedOver,
.buttonRoundedPendingDown,
.buttonRoundedPendingFocusedDown,
.buttonRoundedPendingSelected,
.buttonRoundedPendingSelectedFocused,
.buttonRoundedPendingSelectedDown,
.buttonRoundedPendingSelectedFocusedDown,
.buttonRoundedPendingSelectedOver,
.buttonRoundedPendingSelectedFocusedOver {
    color: $pending_value_dark_color; 
}

.buttonRoundedDeselectedDisabled {
    color: $button_deselected_disabled_color;
    text-decoration: line-through;
}


/* ImgButton */
.imgButton,
.imgButtonOver,
.imgButtonSelected,
.imgButtonSelectedDisabled,
.imgButtonSelectedOver,
.imgButtonDown,
.imgButtonSelectedDown,
.imgButtonDisabled {
    font: {
		family: $primary_font; 
		size: $button_font_size;
	}
}

.imgButtonDisabled {
    color: hsl($button_primary_hue, 0%, 40%);
}

/* StretchImgButton */
.stretchImgButton,
.stretchImgButtonSelected,
.stretchImgButtonSelectedOver,
.stretchImgButtonOver,
.stretchImgButtonDown,
.stretchImgButtonSelectedDown,
.stretchImgButtonSelectedDisabled,
.stretchImgButtonDisabled,

.stretchImgButtonPending,
.stretchImgButtonPendingSelected,
.stretchImgButtonPendingSelectedOver,
.stretchImgButtonPendingOver,
.stretchImgButtonPendingDown,
.stretchImgButtonPendingSelectedDown,
.stretchImgButtonPendingSelectedDisabled,
.stretchImgButtonPendingDisabled {
    font: {
		family: $primary_font; 
		size: $button_font_size;
	}
}

.stretchImgButtonOver,
.stretchImgButtonPendingOver {
    font-weight: normal;
}

.stretchImgButtonDisabled,
.stretchImgButtonSelectedDisabled,
.stretchImgButtonPendingDisabled,
.stretchImgButtonPendingSelectedDisabled {
	color: hsl($button_primary_hue, 0%, 67%);
	font-weight: normal;
}

.stretchImgButtonPending,
.stretchImgButtonPendingSelected,
.stretchImgButtonPendingSelectedOver,
.stretchImgButtonPendingOver,
.stretchImgButtonPendingDown,
.stretchImgButtonPendingSelectedDown {
    color: $pending_value_color;
}

/* Button Title */
.buttonTitle,
.buttonTitleOver,
.buttonTitleDown,
.buttonTitleSelected,
.buttonTitleFocused,
.buttonTitleSelectedFocused,
.buttonTitleSelectedOver,
.buttonTitleFocusedOver,
.buttonTitleSelectedFocusedOver,
.buttonTitleSelectedDown,
.buttonTitleFocusedDown,
.buttonTitleSelectedFocusedDown,
.buttonTitleDisabled,
.buttonTitleSelectedDisabled {
	color: hsl($button_primary_hue, 0%, 0%);
    font: {
        family: $primary_font; 
        size: $button_font_size;
    }
}

.buttonTitleDisabled,
.buttonTitleSelectedDisabled {
	color: hsl($button_primary_hue, 0%, 67%);
	font: {
        weight: normal;
    }
}

/*============================================================
    3) Menus 
============================================================*/
.menuBorder {
    border: $standard_border_width solid $menuButton_border_color;
    @include box-shadow($menuButton_border_shadow);
}

.menuMain,
.menuMainRTL,
.menuFill,
.menuFillRTL {
    background-color: $menu_bgColor;
    background-repeat: repeat-y;
    background-attachment: scroll;
}

.gridBodyAnimated, // used when there is no icon field (e.g. Control > Menus > Custom Columns on iPhone).
.menuFillAnimated,
.menuFillRTLAnimated {
    @include single-transition(transform, 350ms);
}

.treeMenuBody {
	background: $menu_bgColor;
}

.menuTitleFieldDisabledDark {
    color: $menu_disabled_color;
}

.menuSelected,
.menuOver,
.menuSelectedOver,
.menuDisabled,
.menuDisabledDark,
.menuTitleField,
.menuTitleFieldDark,
.menuTitleFieldSelected,
.menuTitleFieldSelectedDark,
.menuTitleFieldOver,
.menuTitleFieldOverDark,
.menuTitleFieldSelectedOver,
.menuTitleFieldSelectedOverDark,
.menuTitleFieldDisabled,
.menuTitleFieldDisabledDark,
.menuIconField,
.menuIconFieldOver,
.menuIconFieldSelected,
.menuIconFieldSelectedOver,
.menuIconFieldDisabled,
.treeMenuSelected,
.treeMenuSelectedOver,
.treeMenuSelectedSelected,
.treeMenuSelectedSelectedOver {
    color: $menu_selected_color;
}

.menu,
.menuSelected,
.menuOver,
.menuSelectedOver,
.menuDisabled,
.menuDisabledDark {
    color: $menu_disabled_color; 
    font-family: $menu_font !important;
}

/* styles to be used by a parent when showing its submenu */
// brighten dark menu icons on rollover
@if $invert_menu_icons_on_rollover {
.menuIconFieldSelected img,
.menuSelected img,
.menuIconFieldOver img,
.menuOver img {
	filter: brightness(400%);
	-webkit-filter: brightness(400%);
	-moz-filter: brightness(400%);
	-o-filter: brightness(400%);
	-ms-filter: brightness(400%);
}
}

.menuSelected,
.menuTitleFieldSelected,
.menuIconFieldSelected {
    background-color: $menu_parent_over_bgColor;
    color: $menuButton_selected_color;
}

.menu,
.menuSelected,
.menuOver,
.menuSelectedOver,
.menuDisabled,
.menuDisabledDark,
.menuTitleField,
.menuTitleFieldDark,
.menuTitleFieldSelected,
.menuTitleFieldSelectedDark,
.menuTitleFieldOver,
.menuTitleFieldOverDark,
.menuTitleFieldSelectedOver,
.menuTitleFieldSelectedOverDark,
.menuTitleFieldDisabled,
.menuTitleFieldDisabledDark,
.menuIconField,
.menuIconFieldOver,
.menuIconFieldSelected,
.menuIconFieldSelectedOver,
.menuIconFieldDisabled,
.treeMenuSelected,
.treeMenuSelectedOver,
.treeMenuSelectedSelected,
.treeMenuSelectedSelectedOver {
    border: {
        bottom: $standard_border_width solid transparent;
        top: $standard_border_width solid transparent;
    }
    font: {
        family: $primary_font; 
        size: $menu_font_size;
    }
    padding: {
        bottom: 2px;
        top: 2px; 
    }
}

.menu,
.menuSelected {

}

.menuOver,
.menuOverDark,
.menuSelectedOver,
.menuSelectedOverDark,
.menuTitleFieldOver,
.menuTitleFieldOverDark,
.menuTitleFieldSelectedOver,
.menuTitleFieldSelectedOverDark,
.menuIconFieldOver,
.menuIconFieldOverDark,
.menuIconFieldSelectedOver,
.menuIconFieldSelectedOverDark,
.treeMenuSelected,
.treeMenuSelectedDark,
.treeMenuSelectedOver,
.treeMenuSelectedOverDark,
.treeMenuSelectedSelected,
.treeMenuSelectedSelectedOver {
    background-color: $menu_over_bgColor;
    color: $button_normal_color;
}

.menuTitleField,
.menuTitleFieldDark,
.menuTitleFieldSelected,
.menuTitleFieldSelectedDark,
.menuTitleFieldOver,
.menuTitleFieldOverDark,
.menuTitleFieldSelectedOver,
.menuTitleFieldSelectedOverDark,
.menuTitleFieldDisabled,
.menuTitleFieldDisabledDark {
	padding-left: 4px;
}

.menuIconField,
.menuIconFieldDark,
.menuIconFieldOver,
.menuIconFieldOverDark,
.menuIconFieldSelected,
.menuIconFieldSelectedDark,
.menuIconFieldSelectedOver,
.menuIconFieldSelectedOverDark,
.menuIconFieldDisabled {
	padding: {
        left: 17px; 
        right: 4px;
    }
}
.menuDisabled,
.menuDisabledDark,
.menuTitleFieldDisabled,
.menuTitleFieldDisabledDark,
.menuIconFieldDisabled {
    color: hsl($menuButton_hue, 0%, 67%);
}

/* menu header buttons */
.menuButton,
.menuButtonOver,
.menuButtonDown,
.menuButtonDisabled,
.menuButtonFocusedDown,
.menuButtonSelected,
.menuButtonSelectedDown,
.menuButtonSelectedOver,
.menuButtonSelectedDisabled,
.menuButtonPending,
.menuButtonPendingOver,
.menuButtonPendingDown,
.menuButtonPendingDisabled,
.menuButtonPendingFocused,
.menuButtonPendingFocusedDown,
.menuButtonPendingFocusedOver,
.menuButtonPendingSelected,
.menuButtonPendingSelectedDown,
.menuButtonPendingSelectedOver,
.menuButtonPendingSelectedDisabled,
.menuButtonFocusedOver,
.menuButtonFocused,
.menuButtonOpened,
.menuButtonOverOpened,
.menuButtonDownOpened,
.menuButtonFocusedOpened,
.menuButtonFocusedDownOpened,
.menuButtonFocusedOverOpened,
.menuButtonSelectedOpened,
.menuButtonSelectedDownOpened,
.menuButtonSelectedOverOpened {
    color: $menuButton_selected_color; 
    list-style-type: none;
    padding: $menuButton_padding;
    font-size: $menuButton_font_size;
    line-height: 18px;
    font-family: $menuButton_font;    
    @include border-radius($menuButton_border_radius);
}


.menuButton,
.menuButtonOver,
.menuButtonDown,
.menuButtonDisabled,
.menuButtonFocusedDown,
.menuButtonSelected,
.menuButtonSelectedDown,
.menuButtonSelectedOver,
.menuButtonSelectedDisabled,
.menuButtonPending,
.menuButtonPendingOver,
.menuButtonPendingDown,
.menuButtonPendingDisabled,
.menuButtonPendingFocused,
.menuButtonPendingFocusedDown,
.menuButtonPendingFocusedOver,
.menuButtonPendingSelected,
.menuButtonPendingSelectedDown,
.menuButtonPendingSelectedOver,
.menuButtonPendingSelectedDisabled {
    background-color: $button_normal_bgColor;
    border: $menuButton_normal_border;
}
.menuButtonFocusedOver {
    background-color: $menuButton_focused_over_bgColor;
    border: $menuButton_focused_over_border;
    @include border-radius($menuButton_border_radius);
    @if $show_button_outer_glow {
        @include box-shadow(0 0 5px $menuButton_focused_over_color);
    }
}
.menuButtonFocused {
    background-color: $menuButton_focused_bgColor;
    border: $menuButton_focused_border;
    @include border-radius($menuButton_border_radius);
}

.menuButtonDisabled,
.menuButtonSelectedDisabled,
.menuButtonPendingDisabled,
.menuButtonPendingSelectedDisabled {
    color: $menuButton_disabled_color;
    background-color: $menuButton_disabled_bgColor;
    border: 2px solid $menuButton_disabled_border_color;
}

.menuButtonOpened,
.menuButtonOverOpened,
.menuButtonDownOpened,
.menuButtonFocusedOpened,
.menuButtonFocusedDownOpened,
.menuButtonFocusedOverOpened,
.menuButtonSelectedOpened,
.menuButtonSelectedDownOpened,
.menuButtonSelectedOverOpened {
    background-color: $button_normal_bgColor;
    border: $menuButton_border;
    @include box-shadow($menuButton_opened_shadow);
}

.menuButtonDown,
.menuButtonFocusedDown,
.menuButtonSelectedDown {
    background-color: $menuButton_down_bgColor;
    border: $menuButton_down_border;
}

.menuButtonOver,
.menuButtonPendingOver {
    background-color: $menuButton_over_bgColor;
    @if $show_button_outer_glow {
        @include box-shadow(0 0 5px 1px $menuButton_standard_color); 
    }
    border: $menuButton_border;
}

.menuButtonDown,
.menuButtonFocusedDown,
.menuButtonSelected,
.menuButtonSelectedDown,
.menuButtonSelectedOver,
.menuButtonPendingDown,
.menuButtonPendingFocusedDown,
.menuButtonPendingFocusedOver,
.menuButtonPendingSelected,
.menuButtonPendingSelectedDown,
.menuButtonPendingSelectedOver {
    @include box-shadow($menuButton_down_glow);
    padding: $menuButton_padding;
    outline: none;
    border: $menuButton_down_border;
    background-color: $menuButton_focused_bgColor;
}

.menuButtonPending,
.menuButtonPendingOver,
.menuButtonPendingDown,
.menuButtonPendingFocused,
.menuButtonPendingFocusedDown,
.menuButtonPendingFocusedOver,
.menuButtonPendingSelected,
.menuButtonPendingSelectedDown,
.menuButtonPendingSelectedOver {
    color: $pending_value_dark_color;
}

/*============================================================
    4) Window
		window.styleName - windowBackground
		window.bodyStyle - windowBody
		window.headerStyle - windowHeader
		window.hiliteHeaderStyle - windowHeaderHilite
		window.headerLabelDefaults.styleName - windowHeaderText
		window.statusBarDefaults.styleName - windowStatusBar

	Dialog
		dialog.styleName - dialogBackground
		dialog.bodyStyle - dialogBody
		dialog.headerStyle - dialogHeader
		dialog.hiliteHeaderStyle - dialogHeaderHilite
		dialog.headerLabelDefaults.styleName - dialogHeaderText
============================================================*/

.modalMask {
    background-color: $standard_black;
}

/* Window and Dialog*/
.windowBackground,
.dialogBackground {
    border: $standard_border_width solid $window_border_color;
    @include box-shadow($window_shadow);
}

.windowBody,
.dialogBody {
    background: $window_body_bgColor;
    border-top: $standard_border_width solid $window_border_color;
}

.promptBody {
    border: solid 1px $window_border_color;
    border-top: none;
}

.windowHeader,
.windowHeaderHilite,
.dialogHeader,
.dialogHeaderHilite {
    padding-right: 10px;
    background: $window_header_bgColor;
}

.windowHeaderText,
.dialogHeaderText,
.dialogStatusBarText {
    background: $window_header_bgColor;
    color: $window_header_color;
    font-size: $window_header_font_size;
    font-weight: bold;
    line-height: 17px;
    padding-left: 10px;
    padding-right: 10px;
    font-family: $window_header_font;
}
.windowStatusBar,
.dialogStatusBar {
    background: $window_status_bgColor;
    border-top: $standard_border_width solid $window_border_color;
    color: $window_status_color;
    font-family: $primary_font;
    font-size: $window_status_font_size;
    padding: 7px;
}

/*============================================================
    5) Layout
============================================================*/

.layoutDropLine {
    background-color: $layout_dropLine_bgColor;
    border: none;
    pointer-events: none;
}

.layoutPlaceHolder {
    border: $standard_border_width solid $standard_black;
}

.hSplitbar,
.hSplitbarclosed,
.hSplitbarOver,
.hSplitbarOverclosed {
    background: $splitBar_bgColor;
    background-size: 100%; 
}

.hSplitbarDown {
    border: $standard_border_width solid adjust-color(hsl($splitBar_hue - 12, 57%, 46%), $saturation: $splitBar_saturation, $lightness: $splitBar_lightness);
}

.vSplitbar,
.vSplitbarclosed,
.vSplitbarOver,
.vSplitbarOverclosed {
    background: $splitBar_bgColor;
    background-size: 100%;
}

.vSplitbarDown {
    border: $standard_border_width solid adjust-color(hsl($splitBar_hue - 12, 57%, 46%), $saturation: $splitBar_saturation, $lightness: $splitBar_lightness);
}

.vSnapBar,
.vSnapBarOver {
}

.hSnapBar,
.hSnapBarOver {
}

.splitPaneSidePanel,
.splitPaneSidePanelOnScreen,
.splitPaneSidePanelOffScreen {
    border-right: $standard_border_width solid adjust-color(hsl($splitBar_hue - 12, 57%, 46%), $saturation: $splitBar_saturation, $lightness: $splitBar_lightness);
}
.splitPaneSidePanelRTL,
.splitPaneSidePanelOnScreenRTL,
.splitPaneSidePanelOffScreenRTL {
    border-left: $standard_border_width solid adjust-color(hsl($splitBar_hue - 12, 57%, 46%), $saturation: $splitBar_saturation, $lightness: $splitBar_lightness);
}

.splitPaneSidePanelOnScreen,
.splitPaneSidePanelOnScreenRTL,
.splitPaneSidePanelOffScreen,
.splitPaneSidePanelOffScreenRTL {
    @include single-transition(transform, 250ms);
}

.splitPaneSidePanelOnScreen,
.splitPaneSidePanelOnScreenRTL {
    /* make the slide in transition slightly longer */
    @include transition-duration(300ms);
}

.splitPanePagedPanelPagesContainerAnimated,
.navStackPagedPanelPagesContainerAnimated {
    @include single-transition(transform, $navBar_transition_duration);
}

.navBarHeaderPaneTitle,
.navBarHeaderPaneTitleDisabled,
.detailPaneTitle,
.detailPaneTitleDisabled,
.listPaneTitle,
.listPaneTitleDisabled {
    background-color: $navBar_bgColor;
    color: $navBar_header_color;
    font-family: $navBar_header_font;
    font-size: $navBar_header_font_size;
}

/*============================================================
    6) TabSet, tab scroller and tab picker
============================================================*/

.tabSetContainer {
    background-color: $tabSet_container_bgColor;
    border: $standard_border_width solid $tabSet_container_border_color;
    color: $tabSet_container_color;
    font: {
        family: $primary_font; 
        size: $tabSet_container_font_size;
    }
    outline: none;
}

.tabBar {
}

.tabBarTop {
    padding-top: 3px;
}

.tabBarLeft {
    padding-left: 5px;
}

.tabBarRight {
    padding-right: 5px;
}

.tabBarBottom {
    padding-bottom: 3px;
}

/* TabScroller */
.tabScrollerTopForwardDisabled,
.tabScrollerTopForward,
.tabScrollerTopForwardDown,
.tabScrollerTopBackDisabled,
.tabScrollerTopBack,
.tabScrollerTopBackDown,
.tabScrollerBottomForward,
.tabScrollerBottomForwardDown,
.tabScrollerBottomForwardDisabled,
.tabScrollerBottomBackDisabled,
.tabScrollerBottomBack,
.tabScrollerBottomBackDown,
.tabScrollerRightBackDisabled,
.tabScrollerRightBack,
.tabScrollerRightBackDown,
.tabScrollerRightForwardDisabled,
.tabScrollerRightForward,
.tabScrollerRightForwardDown,
.tabScrollerLeftBackDisabled,
.tabScrollerLeftBack,
.tabScrollerLeftBackDown,
.tabScrollerLeftForwardDisabled,
.tabScrollerLeftForward,
.tabScrollerLeftForwardDown {
    width: 22px;
    height: 22px;
    @include border-radius(3px);
    display: inline-block;
    outline: none;
    vertical-align: middle;
    margin: 0 auto;
    background: $tabSet_scroller_sprite_image no-repeat;
}

.tabScrollerTopBackDisabled,
.tabScrollerBottomBackDisabled,
.tabScrollerTopBack,
.tabScrollerBottomBack {
    background-position: -330px -3px;
}

.tabScrollerTopBackDown,
.tabScrollerBottomBackDown {
    background-position: -330px -81px;
}

.tabScrollerTopForwardDisabled,
.tabScrollerBottomForwardDisabled,
.tabScrollerTopForward,
.tabScrollerBottomForward {
    background-position: -359px -3px;
}


.tabScrollerTopForwardDown,
.tabScrollerBottomForwardDown {
    background-position: -359px -81px;
}

.tabScrollerLeftBackDisabled,
.tabScrollerRightBackDisabled,
.tabScrollerRightBack,
.tabScrollerLeftBack {
    background-position: -186px -3px;
}

.tabScrollerRightBackDown,
.tabScrollerLeftBackDown {
    background-position: -186px -81px;
}

.tabScrollerLeftForwardDisabled,
.tabScrollerRightForwardDisabled,
.tabScrollerRightForward,
.tabScrollerLeftForward {
    background-position: -158px -3px;
}

.tabScrollerRightForwardDown,
.tabScrollerLeftForwardDown {
    background-position: -158px -81px;
}

/* TabPicker */
.tabPickerDisabledtop,
.tabPickerDowntop,
.tabPickertop,
.tabPickerbottom,
.tabPickerDisabledbottom,
.tabPickerDownbottom,
.tabPickerDisabledright,
.tabPickerright,
.tabPickerDownright,
.tabPickerDisabledleft,
.tabPickerleft,
.tabPickerDownleft {
    width: 22px;
    height: 22px;
    background: $tabSet_picker_sprite_image no-repeat;
}

.tabPickerDisabledtop,
.tabPickertop {
    background-position: -158px -3px;
}

.tabPickerDowntop {
    background-position: -158px -81px;
}

.tabPickerDisabledbottom,
.tabPickerbottom {
    background-position: -186px -3px;
}

.tabPickerDownbottom {
    background-position: -186px -81px;
}

.tabPickerDisabledleft,
.tabPickerleft {
    background-position: -359px -3px;
}

.tabPickerDownleft {
    background-position: -359px -81px;
}

.tabPickerDisabledright,
.tabPickerright {
    background-position: -330px -3px;
}

.tabPickerDownright {
    background-position: -333px -81px;
}

/* tabButtons */

@each $tabStyle in tabButton, iconOnlyTabButton {
    @if $tabStyle == tabButton {
/*============================================================
    TabSet CSS tabs
		tabSet.simpleTabBaseStyle
============================================================*/
} @else {
/*============================================================
    TabSet CSS tabs
		tabSet.simpleTabIconOnlyBaseStyle
============================================================*/
}
/* styles for simple css-styled tabs*/
/* top */
.#{$tabStyle}Top,
.#{$tabStyle}TopOver,
.#{$tabStyle}TopDown,
.#{$tabStyle}TopFocusedDown,
.#{$tabStyle}TopFocused,
.#{$tabStyle}TopFocusedOver,
.#{$tabStyle}TopSelectedFocused,
.#{$tabStyle}TopSelectedFocusedOver,
.#{$tabStyle}TopSelectedFocusedDown,
.#{$tabStyle}TopSelected,
.#{$tabStyle}TopSelectedOver,
.#{$tabStyle}TopSelectedDown {
    color: $tabButton_color !important;
    font-size: $tabButton_font_size;
    font-family: $tabButton_font;
    border: $tabButton_border_width solid $tabButton_border_color;
    border-bottom: none;
    background: $tabButton_bgColor;
    @include border-radius(4px 4px 0px 0px);
    padding: 0px if($tabStyle == tabButton, 27px, 12px);
    text-decoration: none;
}

.#{$tabStyle}TopDown,
.#{$tabStyle}TopSelectedFocused,
.#{$tabStyle}TopSelectedFocusedOver,
.#{$tabStyle}TopSelectedFocusedDown,
.#{$tabStyle}TopSelectedOver,
.#{$tabStyle}TopSelectedDown,
.#{$tabStyle}TopSelected {
    color: $tabButton_selected_color !important;
    font-family: $tabButton_selected_font;
    border: $tabButton_border_width solid $tabButton_selected_border_color;
    border-bottom: none;
    background: $tabButton_selected_bgColor;
}

.#{$tabStyle}TopFocused,
.#{$tabStyle}TopFocusedOver,
.#{$tabStyle}TopSelectedFocused,
.#{$tabStyle}TopSelectedFocusedOver {
    border: $tabButton_border_width solid $tabButton_focused_border_color;
    border-bottom: none;
}

.#{$tabStyle}TopOver {
    border: $tabButton_border_width solid $tabButton_over_border_color;
    border-bottom: none;
}

.#{$tabStyle}TopSelectedOver {
    border: $tabButton_border_width solid $tabButton_selected_over_border_color;
    border-bottom: none;
}

.#{$tabStyle}TopFocusedOver,
.#{$tabStyle}TopOver,
.#{$tabStyle}TopSelectedFocusedOver,
.#{$tabStyle}TopSelectedOver {
    @include box-shadow($tabButton_over_shadow);
}

.#{$tabStyle}TopFocusedDown,
.#{$tabStyle}TopSelectedFocusedDown,
.#{$tabStyle}TopDown,
.#{$tabStyle}TopSelectedDown {
    outline: none;
    border: $tabButton_border_width solid $tabButton_focused_border_color;
    border-bottom: none;
    @include box-shadow($tabButton_top_down_shadow);
    
}

.#{$tabStyle}TopSelectedDisabled,
.#{$tabStyle}TopDisabled {
    color: $tabButton_disabled_color !important;
    font-size: $tabButton_font_size;
    font-family: $standard_tab_font;
    background: $tabButton_disabled_bgColor;
    @include border-radius(4px 4px 0px 0px);
    padding: 0px if($tabStyle == tabButton, 27px, 12px);
    text-decoration: none;
    margin-right: 3px;
}

/* bottom */
.#{$tabStyle}Bottom,
.#{$tabStyle}BottomOver,
.#{$tabStyle}BottomDown,
.#{$tabStyle}BottomFocusedDown,
.#{$tabStyle}BottomFocused,
.#{$tabStyle}BottomFocusedOver,
.#{$tabStyle}BottomSelectedFocused,
.#{$tabStyle}BottomSelectedFocusedOver,
.#{$tabStyle}BottomSelectedFocusedDown,
.#{$tabStyle}BottomSelected,
.#{$tabStyle}BottomSelectedOver,
.#{$tabStyle}BottomSelectedDown {
    color: $tabButton_color !important;
    font-size: $tabButton_font_size;
    font-family: $tabButton_selected_font;
    border: $tabButton_border_width solid $tabButton_border_color;
    border-top: none;
    background: $tabButton_bgColor;
    @include border-radius(0px 0px 5px 5px);
    padding: 0px if($tabStyle == tabButton, 27px, 12px);
    text-decoration: none;
    margin-right: 3px;
}

.#{$tabStyle}BottomDown,
.#{$tabStyle}BottomSelectedFocused,
.#{$tabStyle}BottomSelectedFocusedOver,
.#{$tabStyle}BottomSelectedFocusedDown,
.#{$tabStyle}BottomSelectedOver,
.#{$tabStyle}BottomSelectedDown,
.#{$tabStyle}BottomSelected {
    color: $tabButton_selected_color !important;
    font-family: $tabButton_selected_font;
    border: $tabButton_border_width solid $tabButton_selected_border_color;
    border-top: none;
    background: $tabButton_selected_bgColor;
}

.#{$tabStyle}BottomFocused,
.#{$tabStyle}BottomFocusedOver,
.#{$tabStyle}BottomSelectedFocused,
.#{$tabStyle}BottomSelectedFocusedOver {
    border: $tabButton_border_width solid $tabButton_focused_border_color;
    border-top: none;
}

.#{$tabStyle}BottomOver {
    border: $tabButton_border_width solid $tabButton_over_border_color;
    border-top: none;
}

.#{$tabStyle}BottomSelectedOver {
    border: $tabButton_border_width solid $tabButton_selected_over_border_color;
    border-top: none;
}

.#{$tabStyle}BottomFocusedOver,
.#{$tabStyle}BottomOver,
.#{$tabStyle}BottomSelectedFocusedOver,
.#{$tabStyle}BottomSelectedOver {
    @include box-shadow($tabButton_over_shadow);
}

.#{$tabStyle}BottomFocusedDown,
.#{$tabStyle}BottomSelectedFocusedDown,
.#{$tabStyle}BottomDown,
.#{$tabStyle}BottomSelectedDown {
    outline: none;
    border: $tabButton_border_width solid $tabButton_focused_border_color;
    border-top: none;
    @include box-shadow($tabButton_bottom_down_shadow);
}

.#{$tabStyle}BottomSelectedDisabled,
.#{$tabStyle}BottomDisabled {
    color: $tabButton_disabled_color !important;
    font-size: $tabButton_font_size;
    font-family: $standard_tab_font;
    background: $tabButton_disabled_bgColor;
    @include border-radius(0px 0px 5px 5px);
    padding: 0px if($tabStyle == tabButton, 27px, 12px);
    text-decoration: none;
    margin-right: 3px;
}


/* left */
.#{$tabStyle}Left,
.#{$tabStyle}LeftOver,
.#{$tabStyle}LeftDown,
.#{$tabStyle}LeftFocusedDown,
.#{$tabStyle}LeftFocused,
.#{$tabStyle}LeftFocusedOver,
.#{$tabStyle}LeftSelectedFocused,
.#{$tabStyle}LeftSelectedFocusedOver,
.#{$tabStyle}LeftSelectedFocusedDown,
.#{$tabStyle}LeftSelected,
.#{$tabStyle}LeftSelectedOver,
.#{$tabStyle}LeftSelectedDown {
    color: $tabButton_color !important;
    font-size: $tabButton_font_size;
    font-family: $tabButton_selected_font;
    border: $tabButton_border_width solid $tabButton_border_color;
    border-right: none;
    background: $tabButton_bgColor;
    @include border-radius(5px 0px 0px 5px);
    padding: if($tabStyle == tabButton, 10px, 12px) 0px;
    padding: 12px 0px;
    text-decoration: none;
    margin-right: 3px;
}

.#{$tabStyle}LeftDown,
.#{$tabStyle}LeftSelectedFocused,
.#{$tabStyle}LeftSelectedFocusedOver,
.#{$tabStyle}LeftSelectedFocusedDown,
.#{$tabStyle}LeftSelectedOver,
.#{$tabStyle}LeftSelectedDown,
.#{$tabStyle}LeftSelected {
    color: $tabButton_selected_color !important;
    font-family: $tabButton_selected_font;
    border: $tabButton_border_width solid $tabButton_selected_border_color;
    border-right: none;
    background: $tabButton_selected_bgColor;
}

.#{$tabStyle}LeftFocused,
.#{$tabStyle}LeftFocusedOver,
.#{$tabStyle}LeftSelectedFocused,
.#{$tabStyle}LeftSelectedFocusedOver {
    border: $tabButton_border_width solid $tabButton_focused_border_color;
    border-right: none;
}

.#{$tabStyle}LeftOver {
    border: $tabButton_border_width solid $tabButton_over_border_color;
    border-right: none;
}

.#{$tabStyle}LeftSelectedOver {
    border: $tabButton_border_width solid $tabButton_selected_over_border_color;
    border-right: none;
}

.#{$tabStyle}LeftFocusedOver,
.#{$tabStyle}LeftOver,
.#{$tabStyle}LeftSelectedFocusedOver,
.#{$tabStyle}LeftSelectedOver {
    @include box-shadow($tabButton_over_shadow);
}

.#{$tabStyle}LeftFocusedDown,
.#{$tabStyle}LeftSelectedFocusedDown,
.#{$tabStyle}LeftDown,
.#{$tabStyle}LeftSelectedDown {
    outline: none;
    border: $tabButton_border_width solid $tabButton_focused_border_color;
    border-right: none;
    @include box-shadow($tabButton_bottom_down_shadow);
}

.#{$tabStyle}LeftSelectedDisabled,
.#{$tabStyle}LeftDisabled {
    color: $tabButton_disabled_color !important;
    font-size: $tabButton_font_size;
    font-family: $standard_tab_font;
    background: $tabButton_disabled_bgColor;
    @include border-radius(5px 0px 0px 5px);
    padding: if($tabStyle == tabButton, 10px, 12px) 0px;
    text-decoration: none;
    margin-right: 3px;
}

/* right */
.#{$tabStyle}Right,
.#{$tabStyle}RightOver,
.#{$tabStyle}RightDown,
.#{$tabStyle}RightFocusedDown,
.#{$tabStyle}RightFocused,
.#{$tabStyle}RightFocusedOver,
.#{$tabStyle}RightSelectedFocused,
.#{$tabStyle}RightSelectedFocusedOver,
.#{$tabStyle}RightSelectedFocusedDown,
.#{$tabStyle}RightSelected,
.#{$tabStyle}RightSelectedOver,
.#{$tabStyle}RightSelectedDown {
    color: $tabButton_color !important;
    font-size: $tabButton_font_size;
    font-family: $tabButton_selected_font;
    border: $tabButton_border_width solid $tabButton_border_color;
    border-left: none;
    background: $tabButton_bgColor;
    @include border-radius(0px 5px 5px 0px);
    padding: if($tabStyle == tabButton, 10px, 12px) 0px;
    text-decoration: none;
    margin-right: 3px;
}

.#{$tabStyle}RightDown,
.#{$tabStyle}RightSelectedFocused,
.#{$tabStyle}RightSelectedFocusedOver,
.#{$tabStyle}RightSelectedFocusedDown,
.#{$tabStyle}RightSelectedOver,
.#{$tabStyle}RightSelectedDown,
.#{$tabStyle}RightSelected {
    color: $tabButton_selected_color !important;
    font-family: $tabButton_selected_font;
    border: $tabButton_border_width solid $tabButton_selected_border_color;
    border-left: none;
    background: $tabButton_selected_bgColor;
}

.#{$tabStyle}RightFocused,
.#{$tabStyle}RightFocusedOver,
.#{$tabStyle}RightSelectedFocused,
.#{$tabStyle}RightSelectedFocusedOver {
    border: $tabButton_border_width solid $tabButton_focused_border_color;
    border-left: none;
}

.#{$tabStyle}RightOver {
    border: $tabButton_border_width solid $tabButton_over_border_color;
    border-left: none;
}

.#{$tabStyle}RightSelectedOver {
    border: $tabButton_border_width solid $tabButton_selected_over_border_color;
    border-left: none;
}

.#{$tabStyle}RightFocusedOver,
.#{$tabStyle}RightOver,
.#{$tabStyle}RightSelectedFocusedOver,
.#{$tabStyle}RightSelectedOver {
    @include box-shadow($tabButton_over_shadow);
}

.#{$tabStyle}RightFocusedDown,
.#{$tabStyle}RightSelectedFocusedDown,
.#{$tabStyle}RightDown,
.#{$tabStyle}RightSelectedDown {
    outline: none;
    border: $tabButton_border_width solid $tabButton_focused_border_color;
    border-left: none;
    @include box-shadow($tabButton_bottom_down_shadow);
}

.#{$tabStyle}RightSelectedDisabled,
.#{$tabStyle}RightDisabled {
    color: $tabButton_disabled_color !important;
    font-size: $tabButton_font_size;
    font-family: $standard_tab_font;
    background: $tabButton_disabled_bgColor;
    @include border-radius(0px 5px 5px 0px);
    padding: if($tabStyle == tabButton, 10px, 12px) 0px;
    text-decoration: none;
    margin-right: 3px;
}

} // end @each $tabStyle


/*============================================================
    7) SectionStack and NavigationBar
============================================================*/

.sectionStack {
    border: $standard_border_width solid $sectionStack_border_color;
    border-top: none;
}

.sectionHeaderTitleopened, 
.sectionHeaderTitleclosed {
    color: $sectionHeader_color;
    font: {
        family: $primary_font;
        size: $sectionHeader_font_size;
    }
}
.sectionHeaderTitleDisabledopened, 
.sectionHeaderTitleDisabledclosed {
    color: $sectionHeader_disabled_text_color;
    font: {
        family: $primary_font; 
        size: $sectionHeader_font_size;
    }
}

.sectionHeaderopened, 
.sectionHeaderclosed,
.sectionHeaderDisabledopened,
.sectionHeaderDisabledclosed {
    background: $sectionHeader_bgColor;
    color: $sectionHeader_color;
    padding-left: $sectionHeader_padding_left;
    @if $sectionHeader_padding_right != false {
        padding-right: $sectionHeader_padding_right;
    }
    font: {
        family: $sectionHeader_font; 
        weight: bold;
        size: $sectionHeader_font_size;
    }
}

.sectionHeaderopened,
.sectionHeaderclosed {
    border-top: $standard_border_width solid $sectionStack_border_color;
    border-bottom: $standard_border_width solid $sectionStack_border_color;
    @include border-radius(0px);
    outline: none;
    margin-top: -1px !important;
}

.sectionHeaderDisabledopened,
.sectionHeaderDisabledclosed {
    background-color: $sectionHeader_disabled_bgColor;
    color: $sectionHeader_disabled_text_color;
    border-top: $standard_border_width solid $sectionHeader_disabled_border_color;
    border-bottom: $standard_border_width solid $sectionHeader_disabled_border_color;
    @include border-radius(0px);
}

/* NavigationBar parts */

.navToolbar {
    background: $navBar_bgColor;
    border: $standard_border_width solid $navBar_border_color;
    @include border-radius(0px);
    outline: none;
}

.navBarAddedFadeIn {
    @include single-transition(opacity, 0.5 * $navBar_transition_duration, $default-transition-function, 0.5 * $navBar_transition_duration);
}

.navBarRemovedFadeOut {
    @include single-transition(opacity, 0.5 * $navBar_transition_duration, $default-transition-function);
}

.navBarFadeIn {
    @include single-transition(opacity, (1 - $navBar_leftButton_icon_fadeInDelay_ratio) * $navBar_transition_duration, $default-transition-function, $navBar_leftButton_icon_fadeInDelay_ratio * $navBar_transition_duration);
}

.navBarFadeOut {
    @include single-transition(opacity, $navBar_leftButton_icon_fadeOutDuration_ratio * $navBar_transition_duration);
}

.navBarOldLeftButtonBack {
    @include transition-property(opacity, transform);
    @include transition-duration($navBar_title_fadeOutDuration_ratio * $navBar_transition_duration, $navBar_transition_duration);
}

.navBarNewLeftButtonBack,
.navBarNewLeftButtonForward {
    @include transition-property(opacity, transform);
    // Normally we want to start fading in the new left button only after the old title has
    // completely faded out, but this is a bit too long to wait when using CSS transitions;
    // we want there to be a brief period of time when the old and new left button titles are
    // simultaneously visible.
    // Multiply the $navBar_title_fadeOutDuration_ratio by a "fudge factor" to start the
    // new left button fade-in animation earlier.
    @include transition-duration((1 - $navBar_fudgeFactor * $navBar_title_fadeOutDuration_ratio) * $navBar_transition_duration, $navBar_transition_duration);
    @include transition-delay($navBar_fudgeFactor * $navBar_title_fadeOutDuration_ratio * $navBar_transition_duration, 0ms);
}

.navBarOldLeftButtonForward {
    @include transition-property(opacity, transform);
    @include transition-duration($navBar_leftButton_icon_fadeOutDuration_ratio * $navBar_transition_duration, $navBar_transition_duration);
}

.navBarOldTitleBack,
.navBarOldTitleForward {
    @include transition-property(opacity, transform);
    @include transition-duration($navBar_title_fadeOutDuration_ratio * $navBar_transition_duration, $navBar_transition_duration);
}

.navBarNewTitleBack,
.navBarNewTitleForward {
    @include transition-property(opacity, transform);
    @include transition-duration((1 - $navBar_fudgeFactor * $navBar_title_fadeInDelay_ratio) * $navBar_transition_duration, $navBar_transition_duration);
    @include transition-delay($navBar_fudgeFactor * $navBar_title_fadeInDelay_ratio * $navBar_transition_duration, 0ms);
}

.navButton,
.navButtonOver,
.navButtonFocused,
.navButtonFocusedOver,
.navButtonDown,
.navButtonFocusedDown,
.navButtonSelected,
.navButtonSelectedFocused,
.navButtonSelectedDown,
.navButtonSelectedFocusedDown,
.navButtonSelectedOver,
.navButtonSelectedFocusedOver,
.navButtonDisabled,
.navButtonSelectedDisabled,
.navBackButton,
.navBackButtonOver,
.navBackButtonFocused,
.navBackButtonFocusedOver,
.navBackButtonDown,
.navBackButtonFocusedDown,
.navBackButtonSelected,
.navBackButtonSelectedFocused,
.navBackButtonSelectedDown,
.navBackButtonSelectedFocusedDown,
.navBackButtonSelectedOver,
.navBackButtonSelectedFocusedOver,
.navBackButtonDisabled,
.navBackButtonSelectedDisabled,
.navForwardButton,
.navForwardButtonOver,
.navForwardButtonFocused,
.navForwardButtonFocusedOver,
.navForwardButtonDown,
.navForwardButtonFocusedDown,
.navForwardButtonSelected,
.navForwardButtonSelectedFocused,
.navForwardButtonSelectedDown,
.navForwardButtonSelectedFocusedDown,
.navForwardButtonSelectedOver,
.navForwardButtonSelectedFocusedOver,
.navForwardButtonDisabled,
.navForwardButtonSelectedDisabled {
    padding: 0px 10px 0px 7px !important;
    /* !important to override the cellpadding attribute */
    color: $formItem_color;
    @include border-radius(3px);
    font-family: $primary_font;
    font-size: $standard_header_font_size;
    line-height: 24px;
    border: $standard_border_width solid transparent;
    background-color: $navBar_bgColor;
} 

.navButtonDown,
.navButtonFocusedDown,
.navButtonSelectedDown,
.navButtonSelectedFocusedDown,
.navBackButtonDown,
.navBackButtonFocusedDown,
.navBackButtonSelectedDown,
.navBackButtonSelectedFocusedDown,
.navForwardButtonDown,
.navForwardButtonFocusedDown,
.navForwardButtonSelectedDown,
.navForwardButtonSelectedFocusedDown {
    background-color: $navButton_selected_bgColor;
    border: $standard_border_width solid $navButton_selected_border_color;
    color: $navButton_selected_color;
}

.navBarHeader {
    background-color: $navBar_bgColor;
    color: $navBar_header_color;
    font-family: $navBar_header_font;
    font-size: $navBar_header_font_size;
    font-weight: bold;
    /* !important to override the cellpadding attribute */
    //padding: 0px 10px 0px 7px !important;
    padding: 0px;
    //line-height: $navButton_line_height;
}

.navBackButton,
.navBackButtonOver,
.navBackButtonFocused,
.navBackButtonFocusedOver,
.navBackButtonFocusedDown,
.navBackButtonSelected,
.navBackButtonSelectedFocused,
.navBackButtonSelectedDown,
.navBackButtonSelectedFocusedDown,
.navBackButtonSelectedOver,
.navBackButtonSelectedFocusedOver,
.navBackButtonDisabled,
.navBackButtonSelectedDisabled {
    border: $standard_border_width solid transparent;
    padding: 0px 10px 0px 7px !important;
}

.navForwardButton,
.navForwardButtonOver,
.navForwardButtonFocused,
.navForwardButtonFocusedOver,
.navForwardButtonDown,
.navForwardButtonFocusedDown,
.navForwardButtonSelected,
.navForwardButtonSelectedFocused,
.navForwardButtonSelectedDown,
.navForwardButtonSelectedFocusedDown,
.navForwardButtonSelectedOver,
.navForwardButtonSelectedFocusedOver,
.navForwardButtonDisabled,
.navForwardButtonSelectedDisabled {
    padding: 0px 10px 0px 10px !important;
    border: $standard_border_width solid transparent;
}

.navForwardButtonOver,
.navBackButtonOver {
    border: $standard_border_width solid #929292;
}

.navItemHeader {
    color: $sectionHeader_color;
    font-family: $sectionHeader_font;
    font-size: $sectionHeader_font_size;
    background: $sectionHeader_bgColor;
    padding-left: $sectionHeader_padding_left;
    font-weight: bold;
    border-top: $standard_border_width solid $standard_widget_border_color;
    border-bottom: $standard_border_width solid $standard_widget_border_color;
    @include border-radius(0px);
    outline: none;
    margin-top: -1px !important;
}

/*============================================================
    8) Forms
============================================================*/

/* general form styles */
.formRow {}

.formTitle,
.formTitleRTL,
.formTitleFocused,
.formTitleFocusedRTL,
.formTitleDisabled,
.formTitleDisabledRTL,
.formTitleError,
.formTitleErrorRTL,
.formTitleErrorFocused,
.formTitleErrorFocusedRTL,
.formTitleErrorFocusedOver,
.formTitleErrorFocusedOverRTL,
.formTitleErrorDisabled,
.formTitleErrorDisabldRTL,
.formTitlePending,
.formTitlePendingRTL,
.formTitlePendingFocused,
.formTitlePendingFocusedRTL,
.formTitlePendingDisabled,
.formTitlePendingDisabledRTL,
.formTitlePendingError,
.formTitlePendingErrorRTL,

.formCell,
.formCellRTL,
.formCellFocused,
.formCellFocusedRTL,
.formCellDisabled,
.formCellDisabledRTL,
.formCellError,
.formCellErrorRTL,
.formCellErrorFocused,
.formCellErrorFocusedRTL,
.formCellErrorFocusedOver,
.formCellErrorFocusedOverRTL,
.formCellErrorDisabled,
.formCellErrorDisabledRTL,
.formCellPending,
.formCellPendingRTL,
.formCellPendingFocused,
.formCellPendingFocusedRTL,
.formCellPendingDisabled,
.formCellPendingDisabledRTL,
.formCellPendingError,
.formCellPendingErrorRTL {
    -webkit-text-size-adjust: 100%;
}

.formTitle,
.formTitleRTL,
.formTitleFocused,
.formTitleFocusedRTL,
.formTitleDisabled,
.formTitleDisabledRTL,
.formTitleError,
.formTitleErrorRTL,
.formTitleErrorFocused,
.formTitleErrorFocusedRTL,
.formTitleErrorFocusedOver,
.formTitleErrorFocusedOverRTL,
.formTitleErrorDisabled,
.formTitleErrorDisabldRTL,
.formTitlePending,
.formTitlePendingRTL,
.formTitlePendingFocused,
.formTitlePendingFocusedRTL,
.formTitlePendingDisabled,
.formTitlePendingDisabledRTL,
.formTitlePendingError,
.formTitlePendingErrorRTL,

.formCell,
.formCellRTL,
.formCellFocused,
.formCellFocusedRTL,
.formCellDisabled,
.formCellDisabledRTL,
.formCellError,
.formCellErrorRTL,
.formCellErrorDisabled,
.formCellErrorDisabledRTL,
.formCellPending,
.formCellPendingRTL,
.formCellPendingFocused,
.formCellPendingFocusedRTL,
.formCellPendingDisabled,
.formCellPendingDisabledRTL,
.formCellPendingError,
.formCellPendingErrorRTL,

.formHint,
.formHintRTL,
.formHintOver,
.formHintOverRTL,
.formHintDisabled,
.formHintDisabledRTL,

.headerItem,
.headerItemRTL,
.headerItemOver,
.headerItemOverRTL,
.headerItemDisabled,
.headerItemDisabledRTL,
.headerItemError,
.headerItemErrorRTL,

.nativeSelectItem,
.nativeSelectItemRTL,
.nativeSelectItemOver,
.nativeSelectItemOverRTL,
.nativeSelectItemFocused,
.nativeSelectItemFocusedRTL,
.nativeSelectItemFocusedOver,
.nativeSelectItemFocusedOverRTL,
.nativeSelectItemDisabled,
.nativeSelectItemDisabledRTL,
.nativeSelectItemError,
.nativeSelectItemErrorRTL,
.nativeSelectItemErrorOver,
.nativeSelectItemErrorOverRTL,
.nativeSelectItemErrorFocused,
.nativeSelectItemErrorFocusedRTL,
.nativeSelectItemErrorFocusedOver,
.nativeSelectItemErrorFocusedOverRTL,
.nativeSelectItemPending,
.nativeSelectItemPendingRTL,
.nativeSelectItemPendingFocused,
.nativeSelectItemPendingFocusedRTL,
.nativeSelectItemPendingDisabled,
.nativeSelectItemPendingDisabledRTL,
.nativeSelectItemPendingError,
.nativeSelectItemPendingErrorRTL,

.textItem,
.textItemRTL,
.textItemFocused,
.textItemFocusedRTL,
.textItemDisabled,
.textItemDisabledRTL,
.textItemError,
.textItemErrorRTL,
.textItemPending,
.textItemPendingRTL,
.textItemPendingFocused,
.textItemPendingFocusedRTL,
.textItemPendingDisabled,
.textItemPendingDisabledRTL,
.textItemPendingError,
.textItemPendingErrorRTL,
.textItemHint,
.textItemHintRTL,
.textItemDisabledHint,
.textItemDisabledHintRTL,

.uploadItem,
.uploadItemRTL,
.uploadItemFocused,
.uploadItemFocusedRTL,
.uploadItemDisabled,
.uploadItemDisabledRTL,
.uploadItemError,
.uploadItemErrorRTL,
.uploadItemPending,
.uploadItemPendingRTL,
.uploadItemPendingFocused,
.uploadItemPendingFocusedRTL,
.uploadItemPendingDisabled,
.uploadItemPendingDisabledRTL,
.uploadItemPendingError,
.uploadItemPendingErrorRTL,
.uploadItemHint,
.uploadItemHintRTL,
.uploadItemDisabledHint,
.uploadItemDisabledHintRTL,

.selectItemControl,
.selectItemControlRTL,
.selectItemControlFocused,
.selectItemControlFocusedRTL,
.selectItemControlDisabled,
.selectItemControlDisabledRTL,
.selectItemControlError,
.selectItemControlErrorRTL,
.selectItemControlPending,
.selectItemControlPendingRTL,
.selectItemControlPendingFocused,
.selectItemControlPendingFocusedRTL,
.selectItemControlPendingDisabled,
.selectItemControlPendingDisabledRTL,
.selectItemControlPendingError,
.selectItemControlPendingErrorRTL,

.selectItemText,
.selectItemTextRTL,
.selectItemTextFocused,
.selectItemTextFocusedRTL,
.selectItemTextDisabled,
.selectItemTextDisabledRTL,
.selectItemTextError,
.selectItemTextErrorRTL,
.selectItemTextPending,
.selectItemTextPendingRTL,
.selectItemTextPendingFocused,
.selectItemTextPendingFocusedRTL,
.selectItemTextPendingDisabled,
.selectItemTextPendingDisabledRTL,
.selectItemTextPendingError,
.selectItemTextPendingErrorRTL,
.selectItemTextHint,
.selectItemTextHintRTL,
.selectItemTextDisabledHint,
.selectItemTextDisabledHintRTL,

.comboBoxItemPendingText,
.comboBoxItemPendingTextRTL,

.pickerSearchBox,
.pickerSearchBoxRTL,
.pickerSearchBoxOver,
.pickerSearchBoxOverRTL,
.pickerSearchBoxFocused,
.pickerSearchBoxFocusedRTL,
.pickerSearchBoxFocusedOver,
.pickerSearchBoxFocusedOverRTL,
.pickerSearchBoxDisabled,
.pickerSearchBoxDisabledRTL,
.pickerSearchBoxError,
.pickerSearchBoxErrorRTL,
.pickerSearchBoxPending,
.pickerSearchBoxPendingRTL,
.pickerSearchBoxPendingFocused,
.pickerSearchBoxPendingFocusedRTL,
.pickerSearchBoxPendingDisabled,
.pickerSearchBoxPendingDisabledRTL,
.pickerSearchBoxPendingError,
.pickerSearchBoxPendingErrorRTL,
.pickerSearchBoxHint,
.pickerSearchBoxHintRTL,
.pickerSearchBoxDisabledHint,
.pickerSearchBoxDisabledHintRTL,

.pickListCell,
.pickListCellRTL,
.pickListCellOver,
.pickListCellOverRTL,
.pickListCellSelected,
.pickListCellSelectedRTL,
.pickListCellSelectedOver,
.pickListCellSelectedOverRTL,
.pickListCellDisabled,
.pickListCellDisabledRTL,
.pickListCellDark,
.pickListCellDarkRTL,
.pickListCellOverDark,
.pickListCellOverDarkRTL,
.pickListCellSelectedDark,
.pickListCellSelectedDarkRTL,
.pickListCellSelectedOverDark,
.pickListCellSelectedOverDarkRTL,
.pickListCellDisabledDark,
.pickListCellDisabledDarkRTL,
.pickListCellPending,
.pickListCellPendingRTL,
.pickListCellPendingOver,
.pickListCellPendingOverRTL,
.pickListCellPendingSelected,
.pickListCellPendingSelectedRTL,
.pickListCellPendingSelectedOver,
.pickListCellPendingSelectedOverRTL,
.pickListCellPendingDisabled,
.pickListCellPendingDisabledRTL,
.pickListCellPendingDark,
.pickListCellPendingDarkRTL,
.pickListCellPendingOverDark,
.pickListCellPendingOverDarkRTL,
.pickListCellPendingSelectedDark,
.pickListCellPendingSelectedDarkRTL,
.pickListCellPendingSelectedOverDark,
.pickListCellPendingSelectedOverDarkRTL,
.pickListCellPendingDisabledDark,
.pickListCellPendingDisabledDarkRTL,
.pickListCellDeselected,
.pickListCellDeselectedRTL,
.pickListCellDeselectedOver,
.pickListCellDeselectedOverRTL,
.pickListCellDeselectedSelected,
.pickListCellDeselectedSelectedRTL,
.pickListCellDeselectedSelectedOver,
.pickListCellDeselectedSelectedOverRTL,
.pickListCellDeselectedDisabled,
.pickListCellDeselectedDisabledRTL,
.pickListCellDeselectedDark,
.pickListCellDeselectedDarkRTL,
.pickListCellDeselectedOverDark,
.pickListCellDeselectedOverDarkRTL,
.pickListCellDeselectedSelectedDark,
.pickListCellDeselectedSelectedDarkRTL,
.pickListCellDeselectedSelectedOverDark,
.pickListCellDeselectedSelectedOverDarkRTL,
.pickListCellDeselectedDisabledDark,
.pickListCellDeselectedDisabledDarkRTL,

.tallPickListCell,
.tallPickListCellRTL,
.tallPickListCellOver,
.tallPickListCellOverRTL,
.tallPickListCellSelected,
.tallPickListCellSelectedRTL,
.tallPickListCellSelectedOver,
.tallPickListCellSelectedOverRTL,
.tallPickListCellDisabled,
.tallPickListCellDisabledRTL,
.tallPickListCellDark,
.tallPickListCellDarkRTL,
.tallPickListCellOverDark,
.tallPickListCellOverDarkRTL,
.tallPickListCellSelectedDark,
.tallPickListCellSelectedDarkRTL,
.tallPickListCellSelectedOverDark,
.tallPickListCellSelectedOverDarkRTL,
.tallPickListCellDisabledDark,
.tallPickListCellDisabledDarkRTL,
.tallPickListCellPending,
.tallPickListCellPendingRTL,
.tallPickListCellPendingOver,
.tallPickListCellPendingOverRTL,
.tallPickListCellPendingSelected,
.tallPickListCellPendingSelectedRTL,
.tallPickListCellPendingSelectedOver,
.tallPickListCellPendingSelectedOverRTL,
.tallPickListCellPendingDisabled,
.tallPickListCellPendingDisabledRTL,
.tallPickListCellPendingDark,
.tallPickListCellPendingDarkRTL,
.tallPickListCellPendingOverDark,
.tallPickListCellPendingOverDarkRTL,
.tallPickListCellPendingSelectedDark,
.tallPickListCellPendingSelectedDarkRTL,
.tallPickListCellPendingSelectedOverDark,
.tallPickListCellPendingSelectedOverDarkRTL,
.tallPickListCellPendingDisabledDark,
.tallPickListCellPendingDisabledDarkRTL,
.tallPickListCellDeselected,
.tallPickListCellDeselectedRTL,
.tallPickListCellDeselectedOver,
.tallPickListCellDeselectedOverRTL,
.tallPickListCellDeselectedSelected,
.tallPickListCellDeselectedSelectedRTL,
.tallPickListCellDeselectedSelectedOver,
.tallPickListCellDeselectedSelectedOverRTL,
.tallPickListCellDeselectedDisabled,
.tallPickListCellDeselectedDisabledRTL,
.tallPickListCellDeselectedDark,
.tallPickListCellDeselectedDarkRTL,
.tallPickListCellDeselectedOverDark,
.tallPickListCellDeselectedOverDarkRTL,
.tallPickListCellDeselectedSelectedDark,
.tallPickListCellDeselectedSelectedDarkRTL,
.tallPickListCellDeselectedSelectedOverDark,
.tallPickListCellDeselectedSelectedOverDarkRTL,
.tallPickListCellDeselectedDisabledDark,
.tallPickListCellDeselectedDisabledDarkRTL,

.labelAnchor,
.labelAnchorRTL,
.labelAnchorDisabled,
.labelAnchorDisabledRTL,
.labelAnchorError,
.labelAnchorErrorRTL,
.labelAnchorFocused,
.labelAnchorFocusedRTL {
    background-color: transparent;
    color: $form_value_color;
    font: {
        family: $primary_font;
        size: $standard_font_size;
    }
}

.staticTextItem,
.staticTextItemRTL,
.staticTextItemOver,
.staticTextItemOverRTL,
.staticTextItemFocused,
.staticTextItemFocusedRTL,
.staticTextItemFocusedOver,
.staticTextItemFocusedOverRTL,
.staticTextItemDisabled,
.staticTextItemDisabledRTL,
.staticTextItemError,
.staticTextItemErrorRTL,
.staticTextItemErrorOver,
.staticTextItemErrorOverRTL,
.staticTextItemErrorFocused,
.staticTextItemErrorFocusedRTL,
.staticTextItemErrorFocusedOver,
.staticTextItemErrorFocusedOverRTL,
.staticTextItemPending,
.staticTextItemPendingRTL,
.staticTextItemPendingOver,
.staticTextItemPendingOverRTL,
.staticTextItemPendingFocused,
.staticTextItemPendingFocusedRTL,
.staticTextItemPendingFocusedOver,
.staticTextItemPendingFocusedOverRTL,
.staticTextItemPendingDisabled,
.staticTextItemPendingDisabledRTL,
.staticTextItemPendingError,
.staticTextItemPendingErrorRTL {
    border: $standard_transparent_border;
    //padding: 2px 9px;
    background-color: transparent;
    color: $form_value_color;
    font: {
        family: $primary_font;
        size: $formItem_font_size;
    }
}

.pickListCell,
.pickListCellRTL,
.pickListCellOver,
.pickListCellOverRTL,
.pickListCellSelected,
.pickListCellSelectedRTL,
.pickListCellSelectedOver,
.pickListCellSelectedOverRTL,
.pickListCellDisabled,
.pickListCellDisabledRTL,
.pickListCellDark,
.pickListCellDarkRTL,
.pickListCellOverDark,
.pickListCellOverDarkRTL,
.pickListCellSelectedDark,
.pickListCellSelectedDarkRTL,
.pickListCellSelectedOverDark,
.pickListCellSelectedOverDarkRTL,
.pickListCellDisabledDark,
.pickListCellDisabledDarkRTL,
.pickListCellPending,
.pickListCellPendingRTL,
.pickListCellPendingOver,
.pickListCellPendingOverRTL,
.pickListCellPendingSelected,
.pickListCellPendingSelectedRTL,
.pickListCellPendingSelectedOver,
.pickListCellPendingSelectedOverRTL,
.pickListCellPendingDisabled,
.pickListCellPendingDisabledRTL,
.pickListCellPendingDark,
.pickListCellPendingDarkRTL,
.pickListCellPendingOverDark,
.pickListCellPendingOverDarkRTL,
.pickListCellPendingSelectedDark,
.pickListCellPendingSelectedDarkRTL,
.pickListCellPendingSelectedOverDark,
.pickListCellPendingSelectedOverDarkRTL,
.pickListCellPendingDisabledDark,
.pickListCellPendingDisabledDarkRTL,
.pickListCellDeselected,
.pickListCellDeselectedRTL,
.pickListCellDeselectedOver,
.pickListCellDeselectedOverRTL,
.pickListCellDeselectedSelected,
.pickListCellDeselectedSelectedRTL,
.pickListCellDeselectedSelectedOver,
.pickListCellDeselectedSelectedOverRTL,
.pickListCellDeselectedDisabled,
.pickListCellDeselectedDisabledRTL,
.pickListCellDeselectedDark,
.pickListCellDeselectedDarkRTL,
.pickListCellDeselectedOverDark,
.pickListCellDeselectedOverDarkRTL,
.pickListCellDeselectedSelectedDark,
.pickListCellDeselectedSelectedDarkRTL,
.pickListCellDeselectedSelectedOverDark,
.pickListCellDeselectedSelectedOverDarkRTL,
.pickListCellDeselectedDisabledDark,
.pickListCellDeselectedDisabledDarkRTL {
    /*padding: 7px 9px; this setting affects the checkbox in selects*/
    padding-bottom: 2px;
}

.roundedTextItem,
.roundedTextItemRTL,
.roundedTextItemFocused,
.roundedTextItemFocusedRTL,
.roundedTextItemDisabled,
.roundedTextItemDisabledRTL,
.roundedTextItemError,
.roundedTextItemErrorRTL,
.roundedTextItemPending,
.roundedTextItemPendingRTL,
.roundedTextItemPendingFocused,
.roundedTextItemPendingFocusedRTL,
.roundedTextItemPendingDisabled,
.roundedTextItemPendingDisabledRTL,
.roundedTextItemPendingError,
.roundedTextItemPendingErrorRTL,
.roundedTextItemHint,
.roundedTextItemHintRTL,
.roundedTextItemDisabledHint,
.roundedTextItemDisabledHintRTL {
    @include border-radius(4px);
}

.formTitle,
.formTitleRTL,
.formTitleFocused,
.formTitleFocusedRTL,
.formTitlePending,
.formTitlePendingRTL,
.formTitlePendingFocused,
.formTitlePendingFocusedRTL {
    color: $form_title_color;
}

.formTitleDisabled,
.formTitleDisabledRTL,
.formTitleErrorDisabled,
.formTitleErrorDisabledRTL,
.formTitlePendingDisabled,
.formTitlePendingDisabledRTL {
	color: $default_disabled_text_color;
}

.formTitleError,
.formTitleErrorRTL,
.formTitleErrorFocused,
.formTitleErrorFocusedRTL,
.formTitleErrorFocusedOver,
.formTitleErrorFocusedOverRTL,
.formTitleErrorDisabled,
.formTitleErrorDisabledRTL,
.formTitlePendingError,
.formTitlePendingErrorRTL {
    color: $formItem_error_color; 
    font-weight: bold; 
}

.formTitleErrorDisabled,
.formTitleErrorDisabledRTL {
	color: $default_disabled_text_color;
}

.formTitleDisabledError,
.formTitleDisabledErrorRTL {
	color: $default_disabled_text_color;
}

.formCellError,
.formCellErrorRTL,
.formCellPendingError,
.formCellPendingErrorRTL {
    color: $formItem_error_color; 
}

.formCellErrorDisabled,
.formCellErrorDisabledRTL {
    color: $default_disabled_text_color; 
}

.formHint,
.formHintRTL,
.formHintOver,
.formHintOverRTL,
.formHintDisabled,
.formHintDisabledRTL {
    color: $formItem_hint_color;
    padding: 3px;
}

/* Allow for nested forms to lie flush against the left-hand edge of the containing form */
.nestedFormContainer,
.nestedFormContainerFocused,
.nestedFormContainerDisabled,
.nestedFormContainerError {
    padding-left: 0px;
}
.nestedFormContainerRTL,
.nestedFormContainerFocusedRTL,
.nestedFormContainerDisabledRTL,
.nestedFormContainerErrorRTL {
    padding-right: 0px;
}

/* headerItem */
.headerItem,
.headerItemRTL,
.headerItemOver,
.headerItemOverRTL,
.headerItemDisabled,
.headerItemDisabledRTL,
.headerItemError,
.headerItemErrorRTL {
	color: $headerItem_color;
    font: {
        family: $primary_font; 
        size: $standard_header_font_size; 
        weight: bold;
    }
}

.nativeSelectItemRTL[multiple] {
    direction: ltr;
}
.nativeSelectItemRTL[multiple] > optgroup > option,
.nativeSelectItemRTL[multiple] > option {
    direction: rtl;
}

/* text-based items common props */
.textItem,
.textItemRTL,
.textItemFocused,
.textItemFocusedRTL,
.textItemDisabled,
.textItemDisabledRTL,
.textItemError,
.textItemErrorRTL,
.textItemPending,
.textItemPendingRTL,
.textItemPendingFocused,
.textItemPendingFocusedRTL,
.textItemPendingDisabled,
.textItemPendingDisabledRTL,
.textItemPendingError,
.textItemPendingErrorRTL,
.textItemHint,
.textItemHintRTL,
.textItemDisabledHint,
.textItemDisabledHintRTL,

.selectItemText,
.selectItemTextRTL,
.selectItemTextFocused,
.selectItemTextFocusedRTL,
.selectItemTextDisabled,
.selectItemTextDisabledRTL,
.selectItemTextError,
.selectItemTextErrorRTL,
.selectItemTextPending,
.selectItemTextPendingRTL,
.selectItemTextPendingFocused,
.selectItemTextPendingFocusedRTL,
.selectItemTextPendingDisabled,
.selectItemTextPendingDisabledRTL,
.selectItemTextPendingError,
.selectItemTextPendingErrorRTL,
.selectItemTextHint,
.selectItemTextHintRTL,
.selectItemTextDisabledHint,
.selectItemTextDisabledHintRTL,

.comboBoxItemPendingText,
.comboBoxItemPendingTextRTL,

.pickerSearchBox,
.pickerSearchBoxRTL,
.pickerSearchBoxOver,
.pickerSearchBoxOverRTL,
.pickerSearchBoxFocused,
.pickerSearchBoxFocusedRTL,
.pickerSearchBoxFocusedOver,
.pickerSearchBoxFocusedOverRTL,
.pickerSearchBoxDisabled,
.pickerSearchBoxDisabledRTL,
.pickerSearchBoxError,
.pickerSearchBoxErrorRTL,
.pickerSearchBoxPending,
.pickerSearchBoxPendingRTL,
.pickerSearchBoxPendingFocused,
.pickerSearchBoxPendingFocusedRTL,
.pickerSearchBoxPendingDisabled,
.pickerSearchBoxPendingDisabledRTL,
.pickerSearchBoxPendingError,
.pickerSearchBoxPendingErrorRTL,
.pickerSearchBoxHint,
.pickerSearchBoxHintRTL,
.pickerSearchBoxDisabledHint,
.pickerSearchBoxDisabledHintRTL {
    // Disable intrinsic margins in Chrome and Safari:
    // https://bugs.webkit.org/show_bug.cgi?id=107380
    margin: 0;

    background: $formItem_bgColor;
    border: $standard_border_width solid $default_border_color;
    @include border-radius(0px);
    color: $standard_color;
    padding: 4px 2px 4px 2px;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    -webkit-appearance: none;

    @include input-placeholder {
        // We use the same lightness as Bootstrap’s default placeholder color (HSL(0, 0%, 60%)).
        // See: http://getbootstrap.com/components/#input-groups-basic
        color: hsl(212, 53%, 60%);
        // Firefox 19+ applies an opacity of 0.4. Revert this.
        // https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-placeholder
        // https://bugzilla.mozilla.org/show_bug.cgi?id=556145
        opacity: 1;
        text-overflow: ellipsis;
    }
}

.uploadItem,
.uploadItemRTL,
.uploadItemFocused,
.uploadItemFocusedRTL,
.uploadItemDisabled,
.uploadItemDisabledRTL,
.uploadItemError,
.uploadItemErrorRTL,
.uploadItemPending,
.uploadItemPendingRTL,
.uploadItemPendingFocused,
.uploadItemPendingFocusedRTL,
.uploadItemPendingDisabled,
.uploadItemPendingDisabledRTL,
.uploadItemPendingError,
.uploadItemPendingErrorRTL,
.uploadItemHint,
.uploadItemHintRTL,
.uploadItemDisabledHint,
.uploadItemDisabledHintRTL {
    margin: 0;
    border: 0;
    padding: 0;
    // FIXME White background in IE10+
    // IE makes the background color gray by default. In IE9 and earlier, setting
    // the background to white will set the background color of the text box to
    // white, but this does not work in IE10+.
    // Setting the background to an all-white PNG image does not work, either.
    // http://stackoverflow.com/questions/29371245/how-to-set-the-background-color-of-a-file-input-in-ie10
    background: $uploadItem_bgColor;
    color: $standard_color;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    -webkit-appearance: none;

    // <input type="file"> does not support the placeholder attribute
    //@include input-placeholder {
    //    color: hsl(212, 53%, 60%);
    //    opacity: 1;
    //    text-overflow: ellipsis;
    //}
}

.comboBoxItemPendingText,
.selectItemText,
.selectItemTextFocused,
.selectItemTextDisabled,
.selectItemTextError,
.selectItemTextPending,
.selectItemTextPendingFocused,
.selectItemTextPendingDisabled,
.selectItemTextPendingError,
.selectItemTextHint,
.selectItemTextDisabledHint {
    border-right: 0;
}
.comboBoxItemPendingTextRTL,
.selectItemTextRTL,
.selectItemTextFocusedRTL,
.selectItemTextDisabledRTL,
.selectItemTextErrorRTL,
.selectItemTextPendingRTL,
.selectItemTextPendingFocusedRTL,
.selectItemTextPendingDisabledRTL,
.selectItemTextPendingErrorRTL,
.selectItemTextHintRTL,
.selectItemTextDisabledHintRTL {
    border-left: 0;
}

.textItem,
.textItemRTL,
.textItemPending,
.textItemPendingRTL,
.textItemHint,
.textItemHintRTL,
.pickerSearchBox,
.pickerSearchBoxRTL,
.pickerSearchBoxOver,
.pickerSearchBoxOverRTL,
.pickerSearchBoxPending,
.pickerSearchBoxPendingRTL,
.pickerSearchBoxHint,
.pickerSearchBoxHintRTL {
    border: {
        bottom: $standard_border_width solid $standard_border_color;
        left: $standard_border_width solid $standard_border_color;
        right: $standard_border_width solid $standard_border_color;
        top: $standard_border_width solid $default_border_color;
    }
}

.textItemDisabled,
.textItemDisabledRTL,
.textItemPendingDisabled,
.textItemPendingDisabledRTL,
.textItemDisabledHint,
.textItemDisabledHintRTL,
.selectItemTextDisabled,
.selectItemTextDisabledRTL,
.selectItemTextPendingDisabled,
.selectItemTextPendingDisabledRTL,
.selectItemTextDisabledHint,
.selectItemTextDisabledHintRTL,
.pickerSearchBoxDisabled,
.pickerSearchBoxDisabledRTL,
.pickerSearchBoxPendingDisabled,
.pickerSearchBoxPendingDisabledRTL,
.pickerSearchBoxDisabledHint,
.pickerSearchBoxDisabledHintRTL {
    background-color: $formItem_bgColor;
    border: $standard_border_width solid $default_border_color;
    color: $default_disabled_text_color;

    @include input-placeholder {
        color: $default_border_dark_color;
        opacity: 1;
        text-overflow: ellipsis;
    }
}

.nativeSelectItemDisabled,
.nativeSelectItemDisabledRTL,
.nativeSelectItemPendingDisabled,
.nativeSelectItemPendingDisabledRTL,

.staticTextItemDisabled,
.staticTextItemDisabledRTL,
.staticTextItemPendingDisabled,
.staticTextItemPendingDisabledRTL {
    color: $default_disabled_text_color;
}

.nativeSelectItemFocusedOver,
.nativeSelectItemFocusedOverRTL {
    @include box-shadow($formItem_focused_over_shadow);
}

// Override the text color of disabled SELECT options.
// Because the :disabled pseudo-class might not be supported by the browser, any selector list
// involving :disabled should be separated from other selectors or else the entire list will
// be skipped in browsers not supporting :disabled (http://www.w3.org/TR/CSS21/syndata.html#rule-sets ).
select:disabled,
optgroup:disabled,
option:disabled {
    color: $default_disabled_text_color;
}


select[disabled],
select[disabled] option {
    color: $default_disabled_text_color;
}

/* native select styles (for multi-select list) */
select:disabled {
    background-color: $formItem_disabled_bgColor;
}

select:hover {
    border-color: $formItem_over_border_color;
    @include box-shadow($formItem_over_shadow);
}
select:focus {
    outline: none;
    border-color: $select_item_lite_control_focused_border_color;
    background-color: $formItem_focused_bgColor;
    @include box-shadow($formItem_focused_shadow);
}
select:hover > focus {
    border-color: $formItem_focused_over_border_color;
    @include box-shadow($formItem_focused_over_shadow);
}

option:focus,
option:hover,
option:checked {
    background-color: $listGrid_cell_selected_bgColor !important;
    color: $listGrid_cell_selected_text_color !important;
}


.uploadItemDisabled,
.uploadItemDisabledRTL,
.uploadItemPendingDisabled,
.uploadItemPendingDisabledRTL,
.uploadItemDisabledHint,
.uploadItemDisabledHintRTL {
    color: $default_disabled_text_color;

    // <input type="file"> does not support the placeholder attribute
    //@include input-placeholder {
    //    color: $default_border_dark_color;
    //    opacity: 1;
    //    text-overflow: ellipsis;
    //}
}

.textItemHint,
.textItemHintRTL,
.selectItemTextHint,
.selectItemTextHintRTL,
.nativeDateItemInFieldHint,
.nativeDateItemInFieldHintRTL,
.nativeTimeItemInFieldHint,
.nativeTimeItemInFieldHintRTL,
.nativeDatetimeItemInFieldHint,
.nativeDatetimeItemInFieldHintRTL {
    color: $hint_text_color;
}

/* sprited ComboBoxItem picker */
.comboBoxItemPicker,
.comboBoxItemPickerOver,
.comboBoxItemPickerFocused,
.comboBoxItemPickerFocusedOver,
.comboBoxItemPickerDisabledrtl,
.comboBoxItemPickerrtl,
.comboBoxItemPickerOverrtl,
.comboBoxItemPickerFocusedrtl,
.comboBoxItemPickerFocusedOverrtl {
    display: inline-block;
    background-position: 0px 0px;
    background: $combobox_item_picker_icon no-repeat;
}

.comboBoxItemPickerOver,
.comboBoxItemPickerFocused,
.comboBoxItemPickerOverrtl,
.comboBoxItemPickerFocusedrtl {
   background: $combobox_item_picker_over_icon no-repeat;
}

.comboBoxItemPickerFocusedOver,
.comboBoxItemPickerFocusedOverrtl {
   background: $combobox_item_picker_focused_over_icon no-repeat;
}

.comboBoxItemPickerDisabled,
.comboBoxItemPickerDisabledrtl {
    display: inline-block;
    background-position: 0px 0px;
    background: $combobox_item_picker_disabled_icon no-repeat;
}

/* Minimalist appearance text based items. Includes ComboBoxItem, SelectItem and SpinnerItem */


/* Actual minimalist text */
.textItemLite,
.textItemLiteRTL,
.textItemLiteOver,
.textItemLiteOverRTL,
.textItemLiteFocused,
.textItemLiteFocusedRTL,
.textItemLiteFocusedOver,
.textItemLiteFocusedOverRTL,
.textItemLiteDisabled,
.textItemLiteDisabledRTL,
.textItemLiteError,
.textItemLiteErrorRTL,
.textItemLiteErrorOver,
.textItemLiteErrorOverRTL,
.textItemLiteErrorFocused,
.textItemLiteErrorFocusedRTL,
.textItemLiteErrorFocusedOver,
.textItemLiteErrorFocusedOverRTL,
.textItemLiteErrorDisabled,
.textItemLiteErrorDisabledRTL,
.textItemLitePending,
.textItemLitePendingRTL,
.textItemLitePendingOver,
.textItemLitePendingOverRTL,
.textItemLitePendingFocused,
.textItemLitePendingFocusedRTL,
.textItemLitePendingFocusedOver,
.textItemLitePendingFocusedOverRTL,
.textItemLitePendingDisabled,
.textItemLitePendingDisabledRTL,
.textItemLitePendingError,
.textItemLitePendingErrorRTL,
.textItemLiteHint,
.textItemLiteHintRTL,
.textItemLiteDisabledHint,
.textItemLiteDisabledHintRTL,

.staticTextItemLite,
.staticTextItemLiteRTL,
.staticTextItemLiteOver,
.staticTextItemLiteOverRTL,
.staticTextItemLiteFocused,
.staticTextItemLiteFocusedRTL,
.staticTextItemLiteFocusedOver,
.staticTextItemLiteFocusedOverRTL,
.staticTextItemLiteDisabled,
.staticTextItemLiteDisabledRTL,
.staticTextItemLiteError,
.staticTextItemLiteErrorRTL,
.staticTextItemLitePending,
.staticTextItemLitePendingRTL,
.staticTextItemLitePendingOver,
.staticTextItemLitePendingOverRTL,
.staticTextItemLitePendingFocused,
.staticTextItemLitePendingFocusedRTL,
.staticTextItemLitePendingFocusedOver,
.staticTextItemLitePendingFocusedOverRTL,
.staticTextItemLitePendingDisabled,
.staticTextItemLitePendingDisabledRTL,
.staticTextItemLitePendingError,
.staticTextItemLitePendingErrorRTL,
.staticTextItemLiteHint,
.staticTextItemLiteHintRTL,
.staticTextItemLiteDisabledHint,
.staticTextItemLiteDisabledHintRTL,

.selectItemLiteText,
.selectItemLiteTextRTL,
.selectItemLiteTextFocused,
.selectItemLiteTextFocusedRTL,
.selectItemLiteTextDisabled,
.selectItemLiteTextDisabledRTL,
.selectItemLiteTextError,
.selectItemLiteTextErrorRTL,
.selectItemLiteTextErrorFocused,
.selectItemLiteTextErrorFocusedRTL,
.selectItemLiteTextErrorDisabled,
.selectItemLiteTextErrorDisabledRTL,
.selectItemLiteTextPending,
.selectItemLiteTextPendingRTL,
.selectItemLiteTextPendingFocused,
.selectItemLiteTextPendingFocusedRTL,
.selectItemLiteTextPendingDisabled,
.selectItemLiteTextPendingDisabledRTL,
.selectItemLiteTextPendingError,
.selectItemLiteTextPendingErrorRTL,
.selectItemLiteTextHint,
.selectItemLiteTextHintRTL,
.selectItemLiteTextDisabledHint,
.selectItemLiteTextDisabledHintRTL,

.spinnerItemLiteText,
.spinnerItemLiteTextRTL,
.spinnerItemLiteTextOver,
.spinnerItemLiteTextOverRTL,
.spinnerItemLiteTextFocused,
.spinnerItemLiteTextFocusedRTL,
.spinnerItemLiteTextFocusedOver,
.spinnerItemLiteTextFocusedOverRTL,
.spinnerItemLiteTextDisabled,
.spinnerItemLiteTextDisabledRTL,
.spinnerItemLiteTextError,
.spinnerItemLiteTextErrorRTL,
.spinnerItemLiteTextPending,
.spinnerItemLiteTextPendingRTL,
.spinnerItemLiteTextPendingOver,
.spinnerItemLiteTextPendingOverRTL,
.spinnerItemLiteTextPendingFocused,
.spinnerItemLiteTextPendingFocusedRTL,
.spinnerItemLiteTextPendingFocusedOver,
.spinnerItemLiteTextPendingFocusedOverRTL,
.spinnerItemLiteTextPendingDisabled,
.spinnerItemLiteTextPendingDisabledRTL,
.spinnerItemLiteTextPendingError,
.spinnerItemLiteTextPendingErrorRTL,
.spinnerItemLiteTextHint,
.spinnerItemLiteTextHintRTL,
.spinnerItemLiteTextDisabledHint,
.spinnerItemLiteTextDisabledHintRTL,

.textAreaItemLite,
.textAreaItemLiteRTL,
.textAreaItemLiteOver,
.textAreaItemLiteOverRTL,
.textAreaItemLiteFocused,
.textAreaItemLiteFocusedRTL,
.textAreaItemLiteFocusedOver,
.textAreaItemLiteFocusedOverRTL,
.textAreaItemLiteDisabled,
.textAreaItemLiteDisabledRTL,
.textAreaItemLiteError,
.textAreaItemLiteErrorRTL,
.textAreaItemLiteErrorOver,
.textAreaItemLiteErrorOverRTL,
.textAreaItemLiteErrorFocused,
.textAreaItemLiteErrorFocusedRTL,
.textAreaItemLiteErrorFocusedOver,
.textAreaItemLiteErrorFocusedOverRTL,
.textAreaItemLiteErrorDisabled,
.textAreaItemLiteErrorDisabledRTL,
.textAreaItemLitePending,
.textAreaItemLitePendingRTL,
.textAreaItemLitePendingOver,
.textAreaItemLitePendingOverRTL,
.textAreaItemLitePendingFocused,
.textAreaItemLitePendingFocusedRTL,
.textAreaItemLitePendingFocusedOver,
.textAreaItemLitePendingFocusedOverRTL,
.textAreaItemLitePendingDisabled,
.textAreaItemLitePendingDisabledRTL,
.textAreaItemLitePendingError,
.textAreaItemLitePendingErrorRTL,
.textAreaItemLiteHint,
.textAreaItemLiteHintRTL,
.textAreaItemLiteDisabledHint,
.textAreaItemLiteDisabledHintRTL {
    color: $formItem_color;
    font-size: $formItem_font_size;
    padding: 2px 9px;
    outline: none;
    text-decoration: none;
    font: {
        family: $primary_font;
    }
    @include border-radius(0px);
}

/* suppress borders on selectItem text - border is applied to control element
   also zero out right-padding so we don't have unnecessary gap between text and
   the down-pointing chevron */
.spinnerItemLiteText,
.spinnerItemLiteTextRTL,
.spinnerItemLiteTextOver,
.spinnerItemLiteTextOverRTL,
.spinnerItemLiteTextFocused,
.spinnerItemLiteTextFocusedRTL,
.spinnerItemLiteTextFocusedOver,
.spinnerItemLiteTextFocusedOverRTL,
.spinnerItemLiteTextDisabled,
.spinnerItemLiteTextDisabledRTL,
.spinnerItemLiteTextError,
.spinnerItemLiteTextErrorRTL,
.spinnerItemLiteTextPending,
.spinnerItemLiteTextPendingRTL,
.spinnerItemLiteTextPendingFocused,
.spinnerItemLiteTextPendingFocusedRTL,
.spinnerItemLiteTextPendingDisabled,
.spinnerItemLiteTextPendingDisabledRTL,
.spinnerItemLiteTextPendingError,
.spinnerItemLiteTextPendingErrorRTL,
.spinnerItemLiteTextHint,
.spinnerItemLiteTextHintRTL,
.spinnerItemLiteTextDisabledHint,
.spinnerItemLiteTextDisabledHintRTL,

.selectItemLiteText,
.selectItemLiteTextRTL,
.selectItemLiteTextFocused,
.selectItemLiteTextFocusedRTL,
.selectItemLiteTextDisabled,
.selectItemLiteTextDisabledRTL,
.selectItemLiteTextError,
.selectItemLiteTextErrorRTL,
.selectItemLiteTextErrorFocused,
.selectItemLiteTextErrorFocusedRTL,
.selectItemLiteTextErrorDisabled,
.selectItemLiteTextErrorDisabledRTL,
.selectItemLiteTextPending,
.selectItemLiteTextPendingRTL,
.selectItemLiteTextPendingFocused,
.selectItemLiteTextPendingFocusedRTL,
.selectItemLiteTextPendingDisabled,
.selectItemLiteTextPendingDisabledRTL,
.selectItemLiteTextPendingError,
.selectItemLiteTextPendingErrorRTL,
.selectItemLiteTextHint,
.selectItemLiteTextHintRTL,
.selectItemLiteTextDisabledHint,
.selectItemLiteTextDisabledHintRTL {
    outline: none;
    border: 0px;
    padding-right: 0px;
    background-color: $transparent_background_from_rgba;
    background-color: $transparent_background_for_ie;
}

/* borders and padding for minimalist text-based items */
.textItemLite,
.textItemLiteRTL,
.textItemLiteFocused,
.textItemLiteFocusedRTL,
.textItemLiteDisabled,
.textItemLiteDisabledRTL,
.textItemLiteError,
.textItemLiteErrorRTL,
.textItemLiteErrorOver,
.textItemLiteErrorOverRTL,
.textItemLiteErrorFocused,
.textItemLiteErrorFocusedRTL,
.textItemLiteErrorFocusedOver,
.textItemLiteErrorFocusedOverRTL,
.textItemLiteErrorDisabled,
.textItemLiteErrorDisabledRTL,
.textItemLitePending,
.textItemLitePendingRTL,
.textItemLitePendingFocused,
.textItemLitePendingFocusedRTL,
.textItemLitePendingDisabled,
.textItemLitePendingDisabledRTL,
.textItemLitePendingError,
.textItemLitePendingErrorRTL,
.textItemLiteHint,
.textItemLiteHintRTL,
.textItemLiteDisabledHint,
.textItemLiteDisabledHintRTL,

.selectItemLiteControl,
.selectItemLiteControlRTL,
.selectItemLiteControlOver,
.selectItemLiteControlOverRTL,
.selectItemLiteControlFocused,
.selectItemLiteControlFocusedRTL,
.selectItemLiteControlFocusedOver,
.selectItemLiteControlFocusedOverRTL,
.selectItemLiteControlDisabled,
.selectItemLiteControlDisabledRTL,
.selectItemLiteControlError,
.selectItemLiteControlErrorRTL,
.selectItemLiteControlErrorOver,
.selectItemLiteControlErrorOverRTL,
.selectItemLiteControlErrorFocused,
.selectItemLiteControlErrorFocusedRTL,
.selectItemLiteControlErrorFocusedOver,
.selectItemLiteControlErrorFocusedOverRTL,
.selectItemLiteControlErrorDisabled,
.selectItemLiteControlErrorDisabledRTL,
.selectItemLiteControlPending,
.selectItemLiteControlPendingRTL,
.selectItemLiteControlPendingOver,
.selectItemLiteControlPendingOverRTL,
.selectItemLiteControlPendingFocused,
.selectItemLiteControlPendingFocusedRTL,
.selectItemLiteControlPendingFocusedOver,
.selectItemLiteControlPendingFocusedOverRTL,
.selectItemLiteControlPendingDisabled,
.selectItemLiteControlPendingDisabledRTL,
.selectItemLiteControlPendingError,
.selectItemLiteControlPendingErrorRTL,
.selectItemLiteControlHint,
.selectItemLiteControlHintRTL,
.selectItemLiteControlDisabledHint,
.selectItemLiteControlDisabledHintRTL,
 
.spinnerItemLiteControl,
.spinnerItemLiteControlRTL,
.spinnerItemLiteControlFocused,
.spinnerItemLiteControlFocusedRTL,
.spinnerItemLiteControlOver,
.spinnerItemLiteControlOverRTL,
.spinnerItemLiteControlFocusedOver,
.spinnerItemLiteControlFocusedOverRTL,
.spinnerItemLiteControlDisabled,
.spinnerItemLiteControlDisabledRTL,
.spinnerItemLiteControlError,
.spinnerItemLiteControlErrorRTL,
.spinnerItemLiteControlPending,
.spinnerItemLiteControlPendingRTL,
.spinnerItemLiteControlPendingFocused,
.spinnerItemLiteControlPendingFocusedRTL,
.spinnerItemLiteControlPendingOver,
.spinnerItemLiteControlPendingOverRTL,
.spinnerItemLiteControlPendingFocusedOver,
.spinnerItemLiteControlPendingFocusedOverRTL,
.spinnerItemLiteControlPendingDisabled,
.spinnerItemLiteControlPendingDisabledRTL,
.spinnerItemLiteControlPendingError,
.spinnerItemLiteControlPendingErrorRTL,
.spinnerItemLiteControlHint,
.spinnerItemLiteControlHintRTL,
.spinnerItemLiteControlDisabledHint,
.spinnerItemLiteControlDisabledHintRTL,

.nativeSelectItem,
.nativeSelectItemRTL,
.nativeSelectItemPending,
.nativeSelectItemPendingRTL,
.nativeSelectItemPendingFocused,
.nativeSelectItemPendingFocusedRTL,

.textAreaItemLite,
.textAreaItemLiteRTL,
.textAreaItemLiteFocused,
.textAreaItemLiteFocusedRTL,
.textAreaItemLiteDisabled,
.textAreaItemLiteDisabledRTL,
.textAreaItemLiteError,
.textAreaItemLiteErrorRTL,
.textAreaItemLiteErrorOver,
.textAreaItemLiteErrorOverRTL,
.textAreaItemLiteErrorFocused,
.textAreaItemLiteErrorFocusedRTL,
.textAreaItemLiteErrorFocusedOver,
.textAreaItemLiteErrorFocusedOverRTL,
.textAreaItemLiteErrorDisabled,
.textAreaItemLiteErrorDisabledRTL,
.textAreaItemLitePending,
.textAreaItemLitePendingRTL,
.textAreaItemLitePendingFocused,
.textAreaItemLitePendingFocusedRTL,
.textAreaItemLitePendingDisabled,
.textAreaItemLitePendingDisabledRTL,
.textAreaItemLitePendingError,
.textAreaItemLitePendingErrorRTL,
.textAreaItemLiteHint,
.textAreaItemLiteHintRTL,
.textAreaItemLiteDisabledHint,
.textAreaItemLiteDisabledHintRTL {
    border: $standard_border_width solid $formItem_border_color;
    //@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    background-color: $formItem_bgColor;
    @include border-radius(0px);
}

.spinnerItemLiteControlDisabled,
.spinnerItemLiteControlDisabledRTL {
    background-color: $spinner_lc_disabled_bgColor;
    border: $spinner_lc_disabled_border;
}
.spinnerItemLiteTextDisabled {
    color: $spinner_lc_disabled_text_color;
}

/* focused state */
.textItemLiteErrorFocused,
.textItemLiteErrorFocusedRTL,
.textItemLiteErrorFocusedOver,
.textItemLiteErrorFocusedOverRTL,
.textItemLiteFocused,
.textItemLiteFocusedRTL,
.textItemLiteFocusedOver,
.textItemLiteFocusedOverRTL,
.textItemLitePendingFocused,
.textItemLitePendingFocusedRTL,
.textItemLitePendingFocusedOver,
.textItemLitePendingFocusedOverRTL,

.selectItemLiteControlErrorFocused,
.selectItemLiteControlErrorFocusedRTL,
.selectItemLiteControlErrorFocusedOver,
.selectItemLiteControlErrorFocusedOverRTL,
.selectItemLiteControlFocused,
.selectItemLiteControlFocusedRTL,
.selectItemLiteControlFocusedOver,
.selectItemLiteControlFocusedOverRTL,
.selectItemLiteControlPendingFocused,
.selectItemLiteControlPendingFocusedRTL,
.selectItemLiteControlPendingFocusedOver,
.selectItemLiteControlPendingFocusedOverRTL,

.spinnerItemLiteControlFocused,
.spinnerItemLiteControlFocusedRTL,

.textAreaItemLiteErrorFocused,
.textAreaItemLiteErrorFocusedRTL,
.textAreaItemLiteErrorFocusedOver,
.textAreaItemLiteErrorFocusedOverRTL,
.textAreaItemLiteFocused,
.textAreaItemLiteFocusedRTL,
.textAreaItemLiteFocusedOver,
.textAreaItemLiteFocusedOverRTL,
.textAreaItemLitePendingFocused,
.textAreaItemLitePendingFocusedRTL,
.textAreaItemLitePendingFocusedOver,
.textAreaItemLitePendingFocusedOverRTL,

.formCellErrorFocused,
.formCellErrorFocusedOver


 {
    outline: none;
    border-color: $formItem_focused_border_color;
    background-color: $formItem_focused_bgColor;
    @include box-shadow($formItem_focused_shadow);
}

/* over state */
// No 'over' styling for selectItemLiteText - select has updateTextBoxOnOver:false
// by default
.textItemLiteOver,
.textItemLiteOverRTL,
.textItemLiteErrorOver,
.textItemLiteErrorOverRTL,
.textItemLiteErrorFocusedOver,
.textItemLiteErrorFocusedOverRTL,
.textItemLitePendingOver,
.textItemLitePendingOverRTL,
.textItemLitePendingFocusedOver,
.textItemLitePendingFocusedOverRTL,

.textAreaItemLiteOver,
.textAreaItemLiteOverRTL,
.textAreaItemLiteErrorOver,
.textAreaItemLiteErrorOverRTL,
.textAreaItemLitePendingOver,
.textAreaItemLitePendingOverRTL,
.textAreaItemLitePendingFocusedOver,
.textAreaItemLitePendingFocusedOverRTL,

.spinnerItemLiteControlOver,
.spinnerItemLiteControlOverRTL,
.spinnerItemLiteControlPendingOver,
.spinnerItemLiteControlPendingOverRTL,
.spinnerItemLiteControlPendingFocusedOver,
.spinnerItemLiteControlPendingFocusedOverRTL,

.selectItemLiteControlOver,
.selectItemLiteControlOverRTL,
.selectItemLiteControlErrorOver,
.selectItemLiteControlErrorOverRTL,
.selectItemLiteControlErrorFocusedOver,
.selectItemLiteControlErrorFocusedOverRTL,
.selectItemLiteControlPendingOver,
.selectItemLiteControlPendingOverRTL,
.selectItemLiteControlPendingFocusedOver,
.selectItemLiteControlPendingFocusedOverRTL,

.nativeSelectItemOver,
.nativeSelectItemOverRTL,
.nativeSelectItemErrorOver,
.nativeSelectItemErrorOverRTL,
.nativeSelectItemPendingOver,
.nativeSelectItemPendingOverRTL,
.nativeSelectItemPendingFocusedOver,
.nativeSelectItemPendingFocusedOverRTL

{
    @include box-shadow($formItem_over_shadow);
    border: $formItem_over_border;
    background-color: $formItem_over_bgColor;
    color: $form_value_color;
}

.spinnerItemLiteControlFocused,
.spinnerItemLiteControlFocusedRTL,

.selectItemLiteControlFocused,
.selectItemLiteControlFocusedRTL {
    outline: $select_item_lite_control_focused_outline;
    border-color: $select_item_lite_control_focused_border_color;
}

/* focused over */
.textItemLiteErrorFocusedOver,
.textItemLiteErrorFocusedOverRTL,
.textItemLiteFocusedOver,
.textItemLiteFocusedOverRTL,
.textItemLitePendingFocusedOver,
.textItemLitePendingFocusedOverRTL,

.textAreaItemLiteFocusedOver,
.textAreaItemLiteFocusedOverRTL,
.textAreaItemLiteErrorFocusedOver,
.textAreaItemLiteErrorFocusedOverRTL,
.textAreaItemLitePendingFocusedOver,
.textAreaItemLitePendingFocusedOverRTL,

.spinnerItemLiteControlFocusedOver,
.spinnerItemLiteControlFocusedOverRTL,
.spinnerItemLiteControlPendingFocusedOver,
.spinnerItemLiteControlPendingFocusedOverRTL,

.selectItemLiteControlFocusedOver,
.selectItemLiteControlFocusedOverRTL,
.selectItemLiteControlPendingFocusedOver,
.selectItemLiteControlPendingFocusedOverRTL,

.nativeSelectItemErrorFocusedOver,
.nativeSelectItemErrorFocusedOverRTL,

.formCellErrorFocusedOver

 {
    outline: $select_item_lite_control_focused_outline;
    @include box-shadow($formItem_focused_over_shadow);
    border: $standard_border_width solid $formItem_focused_over_border_color;
}


/* pending coloring */
.textItemLitePending,
.textItemLitePendingRTL,
.textItemLitePendingOver,
.textItemLitePendingOverRTL,
.textItemLitePendingFocused,
.textItemLitePendingFocusedRTL,
.textItemLitePendingFocusedOver,
.textItemLitePendingFocusedOverRTL,
.textItemLitePendingError,
.textItemLitePendingErrorRTL,

.selectItemLiteTextPending,
.selectItemLiteTextPendingRTL,
.selectItemLiteTextPendingFocused,
.selectItemLiteTextPendingFocusedRTL,
.selectItemLiteTextPendingError,
.selectItemLiteTextPendingErrorRTL,

.spinnerItemLiteTextPending,
.spinnerItemLiteTextPendingRTL,
.spinnerItemLiteTextPendingFocused,
.spinnerItemLiteTextPendingFocusedRTL,
.spinnerItemLiteTextPendingError,
.spinnerItemLiteTextPendingErrorRTL,

.textAreaItemLitePending,
.textAreaItemLitePendingRTL,
.textAreaItemLitePendingOver,
.textAreaItemLitePendingOverRTL,
.textAreaItemLitePendingFocused,
.textAreaItemLitePendingFocusedRTL,
.textAreaItemLitePendingFocusedOver,
.textAreaItemLitePendingFocusedOverRTL,
.textAreaItemLitePendingError,
.textAreaItemLitePendingErrorRTL {
    color: $pending_value_color;

    @include input-placeholder {
        color: $pending_value_color;
        opacity: 1;
        text-overflow: ellipsis;
    }
}

/* disabled styling */

.textItemLiteDisabled,
.textItemLiteDisabledRTL,
.textItemLitePendingDisabled,
.textItemLitePendingDisabledRTL,
.textItemLiteDisabledHint,
.textItemLiteDisabledHintRTL,
.textItemLiteErrorDisabled,
.textItemLiteErrorDisabledRTL,

.selectItemLiteControlDisabled,
.selectItemLiteControlDisabledRTL,
.selectItemLiteControlPendingDisabled,
.selectItemLiteControlPendingDisabledRTL,
.selectItemLiteControlDisabledHint,
.selectItemLiteControlDisabledHintRTL,
.selectItemLiteControlErrorDisabled,
.selectItemLiteControlErrorDisabledRTL,
.selectItemLiteControlErrorDisabledHint,
.selectItemLiteControlErrorDisabledHintRTL,
.spinnerItemLiteControlPendingDisabledRTL,
.spinnerItemLiteControlDisabledHint,
.spinnerItemLiteControlDisabledHintRTL,

.textAreaItemLiteDisabled,
.textAreaItemLiteDisabledRTL,
.textAreaItemLitePendingDisabled,
.textAreaItemLitePendingDisabledRTL,
.textAreaItemLiteDisabledHint,
.textAreaItemLiteDisabledHintRTL,
.textAreaItemLiteErrorDisabled,
.textAreaItemLiteErrorDisabledRTL,
.textAreaItemLiteErrorDisabledHint,
.textAreaItemLiteErrorDisabledHintRTL {
    background-color: $formItem_disabled_bgColor;
    border: $select_item_lite_control_disabled_border;
    color: $default_disabled_text_color;
}


.textItemLiteDisabled,
.textItemLiteDisabledRTL,
.textItemLitePendingDisabled,
.textItemLitePendingDisabledRTL,
.textItemLiteDisabledHint,
.textItemLiteDisabledHintRTL,
.textItemLiteErrorDisabled,
.textItemLiteErrorDisabledRTL,

.selectItemLiteTextDisabled,
.selectItemLiteTextDisabledRTL,
.selectItemLiteTextPendingDisabled,
.selectItemLiteTextPendingDisabledRTL,
.selectItemLiteTextDisabledHint,
.selectItemLiteTextDisabledHintRTL,
.selectItemLiteTextErrorDisabled,
.selectItemLiteTextErrorDisabledRTL,

.textAreaItemLiteDisabled,
.textAreaItemLiteDisabledRTL,
.textAreaItemLitePendingDisabled,
.textAreaItemLitePendingDisabledRTL,
.textAreaItemLiteDisabledHint,
.textAreaItemLiteDisabledHintRTL,
.textAreaItemLiteErrorDisabled,
.textAreaItemLiteErrorDisabledRTL {
    color: $default_disabled_text_color;
    @include input-placeholder {
        color: $default_border_dark_color;
        opacity: 1;
        text-overflow: ellipsis;
    }
}

/*  hint text color */
.textItemLiteHint,
.textItemLiteHintRTL,

.selectItemLiteTextHint,
.selectItemLiteTextHintRTL,

.spinnerItemLiteTextHint,
.spinnerItemLiteTextHintRTL,

.textAreaItemLiteHint,
.textAreaItemLiteHintRTL {
    color: $formItem_hint_color;
}

/* sprited minimalist Select / ComboBoxItem picker */

/* end of minimalist text-based item styling */

/* Spinner */
.spinnerItemIncreaseDisabled,
.spinnerItemIncrease,
.spinnerItemIncreaseOver,
.spinnerItemIncreaseFocused,
.spinnerItemIncreaseFocusedOver {
    background-image: $spinner_icon_sprite;
}
.spinnerItemIncreaseDisabledRTL,
.spinnerItemIncreaseRTL,
.spinnerItemIncreaseOverRTL,
.spinnerItemIncreaseFocusedRTL,
.spinnerItemIncreaseFocusedOverRTL {
    background-image: $spinner_icon_sprite_rtl;
}
.spinnerItemIncreaseDisabled,
.spinnerItemIncreaseDisabledRTL { background-position: $spinner_increase_icon_offset_disabled; }

.spinnerItemIncrease,
.spinnerItemIncreaseRTL { background-position: $spinner_increase_icon_offset; }
.spinnerItemIncreaseOver,
.spinnerItemIncreaseOverRTL,
.spinnerItemIncreaseFocused,
.spinnerItemIncreaseFocusedRTL,
.spinnerItemIncreaseFocusedOver,
.spinnerItemIncreaseFocusedOverRTL { background-position: $spinner_increase_icon_offset_over; }

.spinnerItemDecreaseDisabled,
.spinnerItemDecrease,
.spinnerItemDecreaseOver,
.spinnerItemDecreaseFocused,
.spinnerItemDecreaseFocusedOver {
    background-image: $spinner_icon_sprite;
}
.spinnerItemDecreaseDisabledRTL,
.spinnerItemDecreaseRTL,
.spinnerItemDecreaseOverRTL,
.spinnerItemDecreaseFocusedRTL,
.spinnerItemDecreaseFocusedOverRTL {
    background-image: $spinner_icon_sprite_rtl;
}
.spinnerItemDecreaseDisabled,
.spinnerItemDecreaseDisabledRTL { background-position: $spinner_decrease_icon_offset_disabled; }

.spinnerItemDecrease,
.spinnerItemDecreaseRTL { background-position: $spinner_decrease_icon_offset; }
.spinnerItemDecreaseOver,
.spinnerItemDecreaseOverRTL,
.spinnerItemDecreaseFocused,
.spinnerItemDecreaseFocusedRTL,
.spinnerItemDecreaseFocusedOver,
.spinnerItemDecreaseFocusedOverRTL { background-position: $spinner_decrease_icon_offset_over; }

/* unstacked spinners */
.unstackedSpinnerItemIncreaseDisabled {
    background: url("./images/DynamicForm/unstacked_spinner_plus_Disabled.png") no-repeat center;
}
.unstackedSpinnerItemIncreaseDisabledRTL {
    background: url("./images/DynamicForm/unstacked_spinner_plus_Disabled_rtl.png") no-repeat center;
}
.unstackedSpinnerItemIncreaseRTL,
.unstackedSpinnerItemIncreaseOverRTL {
    background: url("./images/DynamicForm/unstacked_spinner_plus_rtl.png") no-repeat center;
}
.unstackedSpinnerItemIncrease,
.unstackedSpinnerItemIncreaseOver {
    background: url("./images/DynamicForm/unstacked_spinner_plus.png") no-repeat center;
}
.unstackedSpinnerItemIncreaseFocused,
.unstackedSpinnerItemIncreaseFocusedOver {
    background: url("./images/DynamicForm/unstacked_spinner_plus_Focused.png") no-repeat center;
}
.unstackedSpinnerItemIncreaseFocusedRTL,
.unstackedSpinnerItemIncreaseFocusedOverRTL{
    background: url("./images/DynamicForm/unstacked_spinner_plus_Focused_rtl.png") no-repeat center;
}


.unstackedSpinnerItemDecreaseDisabled {
    background: url("./images/DynamicForm/unstacked_spinner_minus_Disabled.png") no-repeat center;
}
.unstackedSpinnerItemDecreaseDisabledRTL {
    background: url("./images/DynamicForm/unstacked_spinner_minus_Disabled_rtl.png") no-repeat center;
}
.unstackedSpinnerItemDecreaseRTL,
.unstackedSpinnerItemDecreaseOverRTL {
    background: url("./images/DynamicForm/unstacked_spinner_minus_rtl.png") no-repeat center;
}
.unstackedSpinnerItemDecrease,
.unstackedSpinnerItemDecreaseOver {
    background: url("./images/DynamicForm/unstacked_spinner_minus.png") no-repeat center;
}
.unstackedSpinnerItemDecreaseFocused,
.unstackedSpinnerItemDecreaseFocusedOver {
    background: url("./images/DynamicForm/unstacked_spinner_minus_Focused.png") no-repeat center;
}
.unstackedSpinnerItemDecreaseFocusedRTL,
.unstackedSpinnerItemDecreaseFocusedOverRTL{
    background: url("./images/DynamicForm/unstacked_spinner_minus_Focused_rtl.png") no-repeat center;
}


/* selectItem */
.selectItemTextFocused,
.selectItemTextFocusedRTL,
.selectItemTextPendingFocused,
.selectItemTextPendingFocusedRTL {
    border: $standard_border_width solid hsl($primary_hue + 2, 34%, 51%);
    color: $standard_color;
    -moz-outline-offset: -1;
}

.textItemFocused,
.textItemFocusedRTL,
.textItemPendingFocused,
.textItemPendingFocusedRTL,
.selectItemTextFocused,
.selectItemTextFocusedRTL,
.selectItemTextPendingFocused,
.selectItemTextPendingFocusedRTL,
.pickerSearchBoxFocused,
.pickerSearchBoxFocusedRTL,
.pickerSearchBoxPendingFocused,
.pickerSearchBoxPendingFocusedRTL {
    color: $standard_color;
	border: {
        bottom: $standard_border_width solid hsl($secondary_hue - 6, 54%, 84%);
        top: $standard_border_width solid hsl($secondary_hue + 2, 34%, 51%);
    }
    -moz-outline-offset: -1;
}

.textItemFocused,
.textItemPendingFocused,
.selectItemTextFocused,
.selectItemTextPendingFocused,
.pickerSearchBoxFocused,
.pickerSearchBoxPendingFocused {
    border: {
        left: $standard_border_width solid hsl($secondary_hue + 1, 63%, 83%);
        right: $standard_border_width solid hsl($secondary_hue - 2, 36%, 78%);
    }
}
.textItemFocusedRTL,
.textItemPendingFocusedRTL,
.selectItemTextFocusedRTL,
.selectItemTextPendingFocusedRTL,
.pickerSearchBoxFocusedRTL,
.pickerSearchBoxPendingFocusedRTL {
    border: {
        right: $standard_border_width solid hsl($secondary_hue + 1, 63%, 83%);
        left: $standard_border_width solid hsl($secondary_hue - 2, 36%, 78%);
    }
}

.selectItemText,
.selectItemTextRTL,
.selectItemTextFocused,
.selectItemTextFocusedRTL,
.selectItemTextDisabled,
.selectItemTextDisabledRTL,
.selectItemTextError,
.selectItemTextErrorRTL,
.selectItemTextPending,
.selectItemTextPendingRTL,
.selectItemTextPendingFocused,
.selectItemTextPendingFocusedRTL,
.selectItemTextPendingDisabled,
.selectItemTextPendingDisabledRTL,
.selectItemTextPendingError,
.selectItemTextPendingErrorRTL,
.selectItemTextHint,
.selectItemTextHintRTL,
.selectItemTextDisabledHint,
.selectItemTextDisabledHintRTL {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 2px;
    padding-right: 2px;
}

.selectItemText,
.selectItemTextPending,
.selectItemTextFocused,
.selectItemTextPendingFocused,
.selectItemTextDisabled,
.selectItemTextPendingDisabled,
.selectItemTextError,
.selectItemTextPendingError,
.selectItemTextHint,
.selectItemTextDisabledHint {
    border-right: 0;
}
.selectItemTextRTL,
.selectItemTextPendingRTL,
.selectItemTextFocusedRTL,
.selectItemTextPendingFocusedRTL,
.selectItemTextDisabledRTL,
.selectItemTextPendingDisabledRTL,
.selectItemTextErrorRTL,
.selectItemTextPendingErrorRTL,
.selectItemTextHintRTL,
.selectItemTextDisabledHintRTL {
    border-left: 0;
}

.selectItemPickerIcon,
.selectItemPickerIconOver,
.selectItemPickerIconRTL,
.selectItemPickerIconOverRTL,
.selectItemPickerIconFocused,
.selectItemPickerIconFocusedRTL,
.selectItemPickerIconDisabled,
.selectItemPickerIconDisabledRTL,
.selectItemPickerIconError,
.selectItemPickerIconErrorOver,
.selectItemPickerIconErrorRTL,
.selectItemPickerIconErrorOverRTL,
.selectItemPickerIconErrorFocused,
.selectItemPickerIconErrorFocusedRTL,
.selectItemPickerIconErrorFocusedOver,
.selectItemPickerIconErrorFocusedOverRTL {
    padding-left: 2px;
    padding-right: 2px;
}


.textItemPending,
.textItemPendingRTL,
.textItemPendingFocused,
.textItemPendingFocusedRTL,
.textItemPendingError,
.textItemPendingErrorRTL,

.selectItemControlPending,
.selectItemControlPendingRTL,
.selectItemControlPendingFocused,
.selectItemControlPendingFocusedRTL,
.selectItemControlPendingError,
.selectItemControlPendingErrorRTL,

.selectItemTextPending,
.selectItemTextPendingRTL,
.selectItemTextPendingFocused,
.selectItemTextPendingFocusedRTL,
.selectItemTextPendingError,
.selectItemTextPendingErrorRTL,

.comboBoxItemPendingText,
.comboBoxItemPendingTextRTL,

.pickerSearchBoxPending,
.pickerSearchBoxPendingRTL,
.pickerSearchBoxPendingFocused,
.pickerSearchBoxPendingFocusedRTL,
.pickerSearchBoxPendingError,
.pickerSearchBoxPendingErrorRTL {
    color: $pending_value_color;

    @include input-placeholder {
        color: $pending_value_color;
        opacity: 1;
        text-overflow: ellipsis;
    }
}

.pickListMenuAnimated,
.scrollingMenuAnimated {
    @include single-transition(transform, 350ms);
}

.pickListMenu {
    border: $pickList_menu_border;
}
.pickListMenuBody {
    background-color: $pickList_menu_bgColor;
    border-right: $pickList_menu_border;
}

.pickListCellSelected,
.pickListCellSelectedRTL,
.pickListCellSelectedDark,
.pickListCellSelectedDarkRTL,
.pickListCellPendingSelected,
.pickListCellPendingSelectedRTL,
.pickListCellPendingSelectedDark,
.pickListCellPendingSelectedDarkRTL,
.pickListCellDeselectedSelected,
.pickListCellDeselectedSelectedRTL,
.pickListCellDeselectedSelectedDark,
.pickListCellDeselectedSelectedDarkRTL {
    background: $pickList_selected_over_bgColor;
}

.pickListCellOver,
.pickListCellOverRTL,
.pickListCellOverDark,
.pickListCellOverDarkRTL,
.pickListCellPendingOver,
.pickListCellPendingOverRTL,
.pickListCellPendingOverDark,
.pickListCellPendingOverDarkRTL,
.pickListCellDeselectedOver,
.pickListCellDeselectedOverRTL,
.pickListCellDeselectedOverDark,
.pickListCellDeselectedOverDarkRTL {
    background: $pickList_cell_over_bgColor;
    border: none;
}

.pickListCellSelectedOver,
.pickListCellSelectedOverRTL,
.pickListCellSelectedOverDark,
.pickListCellSelectedOverDarkRTL,
.pickListCellPendingSelectedOver,
.pickListCellPendingSelectedOverRTL,
.pickListCellPendingSelectedOverDark,
.pickListCellPendingSelectedOverDarkRTL,
.pickListCellDeselectedSelectedOver,
.pickListCellDeselectedSelectedOverRTL,
.pickListCellDeselectedSelectedOverDark,
.pickListCellDeselectedSelectedOverDarkRTL {
    background: $pickList_selected_over_bgColor;
    border: none;
}

.tallPickListCell,
.tallPickListCellRTL,
.tallPickListCellDark,
.tallPickListCellDarkRTL,
.tallPickListCellPending,
.tallPickListCellPendingRTL,
.tallPickListCellPendingDark,
.tallPickListCellPendingDarkRTL,
.tallPickListCellDeselected,
.tallPickListCellDeselectedRTL,
.tallPickListCellDeselectedDark,
.tallPickListCellDeselectedDarkRTL {
    border: {
        bottom: $standard_border_width solid transparent;
        top: $standard_border_width solid transparent;
    }
}

// like .treeTallCellSelected
.tallPickListCellSelected,
.tallPickListCellSelectedRTL,
.tallPickListCellSelectedDark,
.tallPickListCellSelectedDarkRTL,
.tallPickListCellPendingSelected,
.tallPickListCellPendingSelectedRTL,
.tallPickListCellPendingSelectedDark,
.tallPickListCellPendingSelectedDarkRTL,
.tallPickListCellDeselectedSelected,
.tallPickListCellDeselectedSelectedRTL,
.tallPickListCellDeselectedSelectedDark,
.tallPickListCellDeselectedSelectedDarkRTL {
    background-color: hsl($secondary_hue, 100%, 92%);
    border: {
        bottom: $standard_border_width dotted hsl($secondary_hue + 7, 63%, 77%);
        top: $standard_border_width dotted hsl($secondary_hue + 7, 63%, 77%);
    }
}

// like .treeTallCellOver
.tallPickListCellOver,
.tallPickListCellOverRTL,
.tallPickListCellOverDark,
.tallPickListCellOverDarkRTL,
.tallPickListCellPendingOver,
.tallPickListCellPendingOverRTL,
.tallPickListCellPendingOverDark,
.tallPickListCellPendingOverDarkRTL,
.tallPickListCellDeselectedOver,
.tallPickListCellDeselectedOverRTL,
.tallPickListCellDeselectedOverDark,
.tallPickListCellDeselectedOverDarkRTL {
    background-color: $pickList_cell_over_bgColor;
    border: {
        bottom: $standard_border_width dotted $pickList_cell_over_border_color;
        top: $standard_border_width dotted $pickList_cell_over_border_color;
    }
}

// like .treeTallCellSelectedOver
.tallPickListCellSelectedOver,
.tallPickListCellSelectedOverRTL,
.tallPickListCellSelectedOverDark,
.tallPickListCellSelectedOverDarkRTL,
.tallPickListCellPendingSelectedOver,
.tallPickListCellPendingSelectedOverRTL,
.tallPickListCellPendingSelectedOverDark,
.tallPickListCellPendingSelectedOverDarkRTL,
.tallPickListCellDeselectedSelectedOver,
.tallPickListCellDeselectedSelectedOverRTL,
.tallPickListCellDeselectedSelectedOverDark,
.tallPickListCellDeselectedSelectedOverDarkRTL {
    background-color: hsl($secondary_hue + 2, 68%, 89%);
    border: {
        bottom: $standard_border_width dotted hsl($secondary_hue + 7, 63%, 77%);
        top: $standard_border_width dotted hsl($secondary_hue + 7, 63%, 77%);
    }
}

.pickListCellDisabled,
.pickListCellDisabledRTL,
.pickListCellDisabledDark,
.pickListCellDisabledDarkRTL,
.pickListCellPendingDisabled,
.pickListCellPendingDisabledRTL,
.pickListCellPendingDisabledDark,
.pickListCellPendingDisabledDarkRTL,
.pickListCellDeselectedDisabled,
.pickListCellDeselectedDisabledRTL,
.pickListCellDeselectedDisabledDark,
.pickListCellDeselectedDisabledDarkRTL,

.tallPickListCellDisabled,
.tallPickListCellDisabledRTL,
.tallPickListCellDisabledDark,
.tallPickListCellDisabledDarkRTL,
.tallPickListCellPendingDisabled,
.tallPickListCellPendingDisabledRTL,
.tallPickListCellPendingDisabledDark,
.tallPickListCellPendingDisabledDarkRTL,
.tallPickListCellDeselectedDisabled,
.tallPickListCellDeselectedDisabledRTL,
.tallPickListCellDeselectedDisabledDark,
.tallPickListCellDeselectedDisabledDarkRTL {
	background-color: $listGrid_cell_disabled_bgColor; 
	color: $pickList_cell_disabled_color;
}

.pickListCellDeselected,
.pickListCellDeselectedRTL,
.pickListCellDeselectedOver,
.pickListCellDeselectedOverRTL,
.pickListCellDeselectedSelected,
.pickListCellDeselectedSelectedRTL,
.pickListCellDeselectedSelectedOver,
.pickListCellDeselectedSelectedOverRTL,
.pickListCellDeselectedDisabled,
.pickListCellDeselectedDisabledRTL,
.pickListCellDeselectedDark,
.pickListCellDeselectedDarkRTL,
.pickListCellDeselectedOverDark,
.pickListCellDeselectedOverDarkRTL,
.pickListCellDeselectedSelectedDark,
.pickListCellDeselectedSelectedDarkRTL,
.pickListCellDeselectedSelectedOverDark,
.pickListCellDeselectedSelectedOverDarkRTL,
.pickListCellDeselectedDisabledDark,
.pickListCellDeselectedDisabledDarkRTL,

.tallPickListCellDeselected,
.tallPickListCellDeselectedRTL,
.tallPickListCellDeselectedOver,
.tallPickListCellDeselectedOverRTL,
.tallPickListCellDeselectedSelected,
.tallPickListCellDeselectedSelectedRTL,
.tallPickListCellDeselectedSelectedOver,
.tallPickListCellDeselectedSelectedOverRTL,
.tallPickListCellDeselectedDisabled,
.tallPickListCellDeselectedDisabledRTL,
.tallPickListCellDeselectedDark,
.tallPickListCellDeselectedDarkRTL,
.tallPickListCellDeselectedOverDark,
.tallPickListCellDeselectedOverDarkRTL,
.tallPickListCellDeselectedSelectedDark,
.tallPickListCellDeselectedSelectedDarkRTL,
.tallPickListCellDeselectedSelectedOverDark,
.tallPickListCellDeselectedSelectedOverDarkRTL,
.tallPickListCellDeselectedDisabledDark,
.tallPickListCellDeselectedDisabledDarkRTL {
    color: $pickList_cell_deselected_color;
    text-decoration: line-through;
}


/* checkbox and radioButton */
.labelAnchor,
.labelAnchorRTL,
.labelAnchorFocused,
.labelAnchorFocusedRTL,
.labelAnchorDisabled,
.labelAnchorDisabledRTL,
.labelAnchorError,
.labelAnchorErrorRTL,
.labelAnchorErrorOver,
.labelAnchorErrorOverRTL,
.labelAnchorErrorFocused,
.labelAnchorErrorFocusedRTL,
.labelAnchorErrorFocusedOver,
.labelAnchorErrorFocusedOverRTL,
.labelAnchorPending,
.labelAnchorPendingRTL,
.labelAnchorPendingOver,
.labelAnchorPendingOverRTL,
.labelAnchorPendingFocused,
.labelAnchorPendingFocusedRTL,
.labelAnchorPendingFocusedOver,
.labelAnchorPendingFocusedOverRTL,
.labelAnchorPendingDisabled,
.labelAnchorPendingDisabledRTL,
.labelAnchorPendingError,
.labelAnchorPendingErrorRTL,
.labelAnchorPendingErrorOver,
.labelAnchorPendingErrorOverRTL,
.labelAnchorPendingErrorFocused,
.labelAnchorPendingErrorFocusedRTL,
.labelAnchorPendingErrorFocusedOver,
.labelAnchorPendingErrorFocusedOverRTL {
    color: $standard_color; 
    font-family: $primary_font; 
    text-decoration: none;
    outline: none;
}

.pickListCellPending,
.pickListCellPendingRTL,
.pickListCellPendingOver,
.pickListCellPendingOverRTL,
.pickListCellPendingSelected,
.pickListCellPendingSelectedRTL,
.pickListCellPendingSelectedOver,
.pickListCellPendingSelectedOverRTL,
.pickListCellPendingDisabled,
.pickListCellPendingDisabledRTL,
.pickListCellPendingDark,
.pickListCellPendingDarkRTL,
.pickListCellPendingOverDark,
.pickListCellPendingOverDarkRTL,
.pickListCellPendingSelectedDark,
.pickListCellPendingSelectedDarkRTL,
.pickListCellPendingSelectedOverDark,
.pickListCellPendingSelectedOverDarkRTL,
.pickListCellPendingDisabledDark,
.pickListCellPendingDisabledDarkRTL,

.tallPickListCellPending,
.tallPickListCellPendingRTL,
.tallPickListCellPendingOver,
.tallPickListCellPendingOverRTL,
.tallPickListCellPendingSelected,
.tallPickListCellPendingSelectedRTL,
.tallPickListCellPendingSelectedOver,
.tallPickListCellPendingSelectedOverRTL,
.tallPickListCellPendingDisabled,
.tallPickListCellPendingDisabledRTL,
.tallPickListCellPendingDark,
.tallPickListCellPendingDarkRTL,
.tallPickListCellPendingOverDark,
.tallPickListCellPendingOverDarkRTL,
.tallPickListCellPendingSelectedDark,
.tallPickListCellPendingSelectedDarkRTL,
.tallPickListCellPendingSelectedOverDark,
.tallPickListCellPendingSelectedOverDarkRTL,
.tallPickListCellPendingDisabledDark,
.tallPickListCellPendingDisabledDarkRTL,

.labelAnchorPending,
.labelAnchorPendingOver,
.labelAnchorPendingRTL,
.labelAnchorPendingOverRTL,
.labelAnchorPendingFocused,
.labelAnchorPendingFocusedOver,
.labelAnchorPendingFocusedRTL,
.labelAnchorPendingFocusedOverRTL,
.labelAnchorPendingError,
.labelAnchorPendingErrorOver,
.labelAnchorPendingErrorRTL,
.labelAnchorPendingErrorOverRTL {
    color: $pending_value_color;
}

.labelAnchorDisabled,
.labelAnchorDisabledRTL,
.labelAnchorPendingDisabled,
.labelAnchorPendingDisabledRTL {
    color: $default_disabled_text_color;
}

/* checkbox styles */
/* Minimalist appearance for checkboxItems rendered into the listGrid filterEditor  */
.checkboxItemLite,
.checkboxItemLiteRTL,
.checkboxItemLiteOver,
.checkboxItemLiteOverRTL,
.checkboxItemLiteFocused,
.checkboxItemLiteFocusedRTL,
.checkboxItemLiteFocusedOver,
.checkboxItemLiteFocusedOverRTL,
.checkboxItemLiteDisabled,
.checkboxItemLiteDisabledRTL,
.checkboxItemLiteError,
.checkboxItemLiteErrorRTL,
.checkboxItemLitePending,
.checkboxItemLitePendingRTL,
.checkboxItemLitePendingFocused,
.checkboxItemLitePendingFocusedRTL,
.checkboxItemLitePendingDisabled,
.checkboxItemLitePendingDisabledRTL,
.checkboxItemLitePendingError,
.checkboxItemLitePendingErrorRTL,
.checkboxItemLiteHint,
.checkboxItemLiteHintRTL,
.checkboxItemLiteDisabledHint,
.checkboxItemLiteDisabledHintRTL {
    color: $formItem_color;
    font-size: $formItem_font_size;
    outline: none;
    text-decoration: none;
    text-align: left;
    font-family: $primary_font;
    @include border-radius(0px);
}

/* borders and padding for minimalist checkbox items */
.checkboxItemLite,
.checkboxItemLiteRTL,
.checkboxItemLiteOver,
.checkboxItemLiteOverRTL,
.checkboxItemLiteFocused,
.checkboxItemLiteFocusedRTL,
.checkboxItemLiteFocusedOver,
.checkboxItemLiteFocusedOverRTL,
.checkboxItemLiteDisabled,
.checkboxItemLiteDisabledRTL,
.checkboxItemLiteError,
.checkboxItemLiteErrorRTL,
.checkboxItemLitePending,
.checkboxItemLitePendingRTL,
.checkboxItemLitePendingFocused,
.checkboxItemLitePendingFocusedRTL,
.checkboxItemLitePendingDisabled,
.checkboxItemLitePendingDisabledRTL,
.checkboxItemLitePendingError,
.checkboxItemLitePendingErrorRTL,
.checkboxItemLiteHint,
.checkboxItemLiteHintRTL,
.checkboxItemLiteDisabledHint,
.checkboxItemLiteDisabledHintRTL {
    border: $standard_border_width solid $formItem_border_color;
    //@include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075));
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    background-color: white;
    @include border-radius(0px);
}

.checkboxTrueDisabled,
.checkboxTrue,
.checkboxTrueOver,
.checkboxTrueDown,
.checkboxFalseDisabled,
.checkboxFalse,
.checkboxFalseOver,
.checkboxFalseDown,
.checkboxPartialDisabled,
.checkboxPartial,
.checkboxPartialOver,
.checkboxPartialDown,
.checkboxUnsetDisabled,
.checkboxUnset,
.checkboxUnsetOver,
.checkboxUnsetDown {
    min-height: 25px;
    display: inline-block;
    background-position: 0px 0px;
}

.checkboxTrueDisabled {
    background: url(./images/DynamicForm/cb-checked-normal_Disabled.png) no-repeat;
    cursor: no-drop;
}

.checkboxTrue {
    background: url(./images/DynamicForm/cb-checked-normal.png) no-repeat;
}

.checkboxTrueOver {
    background: url(./images/DynamicForm/cb-checked-hover.png) no-repeat;
}

.checkboxTrueDown {
    background: url(./images/DynamicForm/cb-checked-focus.png) no-repeat;
}

.checkboxFalseDisabled {
    background: url(./images/DynamicForm/cb-uncheck-normal_Disabled.png) no-repeat;
    cursor: no-drop;
}

.checkboxFalse {
    background: url(./images/DynamicForm/cb-uncheck-normal.png) no-repeat;
}

.checkboxFalseOver {
    background: url(./images/DynamicForm/cb-uncheck-hover.png) no-repeat;
}

.checkboxFalseDown {
    background: url(./images/DynamicForm/cb-uncheck-focus.png) no-repeat;
}

.checkboxUnsetDisabled {
    background: url(./images/DynamicForm/cb-anything-normal_Disabled.png) no-repeat;
    cursor: no-drop;
}

.checkboxUnset {
    background: url(./images/DynamicForm/cb-anything-normal.png) no-repeat;
}

.checkboxUnsetOver {
    background: url(./images/DynamicForm/cb-anything-hover.png) no-repeat;
}

.checkboxUnsetDown {
    background: url(./images/DynamicForm/cb-anything-focus.png) no-repeat;
}

.checkboxPartialDisabled {
    background: url(./images/DynamicForm/cb-anything-normal_Disabled.png) no-repeat;
    cursor: no-drop;
}

.checkboxPartial {
    background: url(./images/DynamicForm/cb-anything-normal.png) no-repeat;
}

.checkboxPartialOver {
    background: url(./images/DynamicForm/cb-anything-hover.png) no-repeat;
}

.checkboxPartialDown {
    background: url(./images/DynamicForm/cb-anything-focus.png) no-repeat;
}


@if $radio_button_skinning == true {
.radioTrueDisabled,
.radioTrue,
.radioTrueOver,
.radioTrueFocused,
.radioTrueFocusedOver,
.radioFalseDisabled,
.radioFalse,
.radioFalseOver,
.radioFalseFocused,
.radioFalseFocusedOver,
.radioUnsetDisabled,
.radioUnset,
.radioUnsetFocused,
.radioUnsetFocusedOver,
.radioUnsetDown {
    min-height: 25px;
    display: inline-block;
    outline: none;
    background: url(./images/DynamicForm/radio-button.png) no-repeat;
}

.radioTrueDisabled {
    background-position: -6px -85px;
    cursor: no-drop;
}

.radioTrue {
    background-position: -6px -4px;
}

.radioTrueOver,
.radioTrueFocusedOver {
    background-position: -6px -31px;
}

.radioTrueFocused {
    background-position: -6px -58px;
}

.radioFalseDisabled {
    background-position: -35px -85px;
    cursor: no-drop;
}

.radioFalse {
    background-position: -35px -4px;
}

.radioFalseOver,
.radioFalseFocusedOver {
    background-position: -35px -31px;
}

.radioFalseFocused {
    background-position: -35px -58px;
}

.radioUnsetDisabled {
    background-position: -35px -85px;
    cursor: no-drop;
}

.radioUnset {
    background-position: -35px -4px;
}

.radioUnsetOver,
.radioUnsetFocusedOver {
    background-position: -35px -31px;
}

.radioUnsetFocused {
    background-position: -35px -58px;
}
}

/* FilterBuilder */
.bracketBorders {
    border: {
        bottom: $standard_border_width solid adjust-color(hsl($filterBuilder_bracketBorder_hue - 12, 57%, 46%), $saturation: $filterBuilder_bracketBorder_saturation, $lightness: $filterBuilder_bracketBorder_lightness);    
        left: $standard_border_width solid adjust-color(hsl($filterBuilder_bracketBorder_hue - 12, 57%, 46%), $saturation: $filterBuilder_bracketBorder_saturation, $lightness: $filterBuilder_bracketBorder_lightness);
        top: $standard_border_width solid adjust-color(hsl($filterBuilder_bracketBorder_hue - 12, 57%, 46%), $saturation: $filterBuilder_bracketBorder_saturation, $lightness: $filterBuilder_bracketBorder_lightness);
    }
}

.nativeDateItem,
.nativeDateItemFocused,
.nativeDateItemDisabled,
.nativeDateItemDisabledHint,
.nativeDateItemError,
.nativeDateItemHint,
.nativeTimeItem,
.nativeTimeItemFocused,
.nativeTimeItemDisabled,
.nativeTimeItemDisabledHint,
.nativeTimeItemError,
.nativeTimeItemHint,
.nativeDatetimeItem,
.nativeDatetimeItemFocused,
.nativeDatetimeItemDisabled,
.nativeDatetimeItemDisabledHint,
.nativeDatetimeItemError,
.nativeDatetimeItemHint {
    border: $standard_border_width solid $default_border_color;
    padding: 4px 2px 4px 2px;
    background: $transparent_background_from_rgba;
    background: $transparent_background_for_ie;
    color: transparent;
}

.nativeDateItem,
.nativeTimeItem,
.nativeDatetimeItem {
    // This is to fix a WebKit/Blink bug (seen in Chrome 27) where the focus ring is not
    // cleared after a date is picked from the popup calendar, or a time is entered, and a
    // different field is focused.
    outline: 0;
}

// http://firefromthefly.com/post/26301087384/webkit-calendar-indicator
// The color:transparent on the input[type=date] affects the down arrow icon color, so these
// styles are just to restore the down arrow icon.
.nativeDateItem,
.nativeDateItemFocused::-webkit-calendar-picker-indicator,
.nativeDateItemError::-webkit-calendar-picker-indicator,
.nativeDateItemHint::-webkit-calendar-picker-indicator,
.nativeTimeItem,
.nativeDatetimeItem,
.nativeDatetimeItemFocused::-webkit-calendar-picker-indicator,
.nativeDatetimeItemError::-webkit-calendar-picker-indicator,
.nativeDatetimeItemHint::-webkit-calendar-picker-indicator {
    color: black;
}

.nativeDateItemFocused,
.nativeTimeItemFocused,
.nativeDatetimeItemFocused {
    color: black;
}

.nativeDateItemInFieldHint,
.nativeDateItemInFieldHintDisabled,
.nativeTimeItemInFieldHint,
.nativeTimeItemInFieldHintDisabled,
.nativeDatetimeItemInFieldHint,
.nativeDatetimeItemInFieldHintDisabled {
    position: absolute;
    left: 0;
    display: inline-block;
    padding-right: 3px; // one extra pixel for the 1px right border
    padding-left: 3px; // one extra pixel for the 1px left border
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: -1;
}

.nativeDateItemInFieldHint,
.nativeDateItemInFieldHintDisabled,
.nativeDatetimeItemInFieldHint,
.nativeDatetimeItemInFieldHintDisabled {
    right: 30px; // This needs to be as wide as the widest native date item in-field controls
                 // of any supported browser. Currently, this is Chrome/Opera 15.
}

.nativeTimeItemInFieldHint,
.nativeTimeItemInFieldHintDisabled {
    right: 20px; // Opera 12's up and down buttons are wider than Chrome's in-field spinner.
}

.nativeDateItemDisabled,
.nativeDateItemDisabledHint::-webkit-calendar-picker-indicator,
.nativeDateItemInFieldHintDisabled,
.nativeTimeItemDisabled,
.nativeTimeItemInFieldHintDisabled,
.nativeDatetimeItemDisabled,
.nativeDatetimeItemDisabledHint::-webkit-calendar-picker-indicator,
.nativeDatetimeItemInFieldHintDisabled {
    color: $default_disabled_text_color;
}

.nativeDateItem,
.nativeDateItemHint,
.nativeTimeItem,
.nativeTimeItemHint,
.nativeDatetimeItem,
.nativeDatetimeItemHint {
    border: {
        bottom: $standard_border_width solid $standard_border_color;
        left: $standard_border_width solid $standard_border_color;
        right: $standard_border_width solid $standard_border_color;
        top: $standard_border_width solid $default_border_color;
    }
}

// https://code.google.com/p/chromium/issues/detail?id=259361
.nativeDateItemDisabled::-webkit-calendar-picker-indicator,
.nativeDateItemDisabledHint::-webkit-calendar-picker-indicator,
.nativeDatetimeItemDisabled::-webkit-calendar-picker-indicator,
.nativeDatetimeItemDisabledHint::-webkit-calendar-picker-indicator {
    background: none;
}

.pickerSearchBox,
.pickerSearchBoxRTL,
.pickerSearchBoxOver,
.pickerSearchBoxOverRTL,
.pickerSearchBoxFocused,
.pickerSearchBoxFocusedRTL,
.pickerSearchBoxFocusedOver,
.pickerSearchBoxFocusedOverRTL,
.pickerSearchBoxDisabled,
.pickerSearchBoxDisabledRTL,
.pickerSearchBoxDisabledHint,
.pickerSearchBoxDisabledHintRTL,
.pickerSearchBoxError,
.pickerSearchBoxErrorRTL,
.pickerSearchBoxHint,
.pickerSearchBoxHintRTL {
    @include border-radius(30px);
    padding: {
        top: 4px;
        right: 6px;
        bottom: 4px;
        left: 6px;
    }
    font-size: $normal_font_size;
}

/*============================================================
     DateChooser
============================================================*/
/* Defaults for all days and controls */
.dateChooserButton,
.dateChooserButtonOver,
.dateChooserButtonDown,
.dateChooserButtonDisabled,
.dateChooserButtonSelected,
.dateChooserButtonSelectedDown,
.dateChooserButtonSelectedOver,
.dateChooserButtonSelectedDisabled,
.dateChooserWeekendButton,
.dateChooserWeekendButtonOver,
.dateChooserWeekendButtonDown,
.dateChooserWeekendButtonDisabled,
.dateChooserWeekendButtonSelected,
.dateChooserWeekendButtonSelectedDown,
.dateChooserWeekendButtonSelectedOver,
.dateChooserWeekendButtonSelectedDisabled,
.dateChooserBottomButton,
.dateChooserBottomButtonOver,
.dateChooserBottomButtonDown,
.dateChooserBottomButtonSelected,
.dateChooserBottomButtonSelectedOver,
.dateChooserBottomButtonSelectedDown,
.dateChooserWeekday,
.dateChooserWeekdayOver,
.dateChooserWeekdayDown,
.dateChooserWeekdaySelected,
.dateChooserWeekdaySelectedOver,
.dateChooserWeekdaySelectedDown,
.dateChooserWeekdayDisabled,
.dateChooserWeekend,
.dateChooserWeekendOver,
.dateChooserWeekendDown,
.dateChooserWeekendSelected,
.dateChooserWeekendSelectedOver,
.dateChooserWeekendSelectedDown,
.dateChooserWeekendDisabled,
.dateChooserFiscalYearCell,
.dateChooserFiscalYearCellOver,
.dateChooserFiscalYearCellDown,
.dateChooserFiscalYearCellDisabled,
.dateChooserFiscalYearCellSelected,
.dateChooserFiscalYearCellSelectedDown,
.dateChooserFiscalYearCellSelectedOver,
.dateChooserFiscalYearCellSelectedDisabled,
.dateChooserWeekCell,
.dateChooserWeekCellOver,
.dateChooserWeekCellDown,
.dateChooserWeekCellDisabled,
.dateChooserWeekCellSelected,
.dateChooserWeekCellSelectedDown,
.dateChooserWeekCellSelectedOver,
.dateChooserWeekCellSelectedDisabled,
.dateChooserDisabledWeekday,
.dateChooserDisabledWeekdayOver,
.dateChooserDisabledWeekdayDown,
.dateChooserDisabledWeekdaySelected,
.dateChooserDisabledWeekdaySelectedDown,
.dateChooserDisabledWeekdaySelectedOver,
.dateChooserDisabledWeekend,
.dateChooserDisabledWeekendOver,
.dateChooserDisabledWeekendDown,
.dateChooserDisabledWeekendSelected,
.dateChooserDisabledWeekendSelectedDown,
.dateChooserDisabledWeekendSelectedOver,
.dateChooserSelectedWeek,
.dateChooserSelectedWeekOver,
.dateChooserSelectedWeekDown,
.dateChooserSelectedWeekDisabled,
.dateChooserSelectedWeekSelected,
.dateChooserSelectedWeekSelectedDown,
.dateChooserSelectedWeekSelectedOver,
.dateChooserSelectedWeekSelectedDisabled {
    background-color: $dateChooser_header_bgColor;
    color: $dateChooser_header_text_color;
    border: 2px solid $dateChooser_cell_bgColor;
    font: {
        family: $dateChooser_font; 
        size: $standard_font_size;
    }
}

.dateChooserNavButton,
.dateChooserNavButtonOver,
.dateChooserNavButtonDown,
.dateChooserNavButtonSelected,
.dateChooserNavButtonSelectedOver,
.dateChooserNavButtonSelectedDown,
.dateChooserNavButtonFocused,
.dateChooserNavButtonFocusedOver,
.dateChooserNavButtonFocusedDown,
.dateChooserNavButtonDisabled {
    background: $dateChooser_navButton_bgColor;
    color: $dateChooser_navButton_color;
    font: {
        family: $dateChooser_font; 
        size: $standard_font_size;
    }
}

/* year/month buttons */
.dateChooserNavButton,
.dateChooserNavButtonOver,
.dateChooserNavButtonDown,
.dateChooserNavButtonSelected,
.dateChooserNavButtonSelectedOver,
.dateChooserNavButtonSelectedDown,
.dateChooserNavButtonFocused,
.dateChooserNavButtonFocusedOver,
.dateChooserNavButtonFocusedDown {
    border: {
        bottom: 0px none;
        top: 0px none;
    }
    padding: 0px;
}

/* for all buttons, plus weekday headers (dateChooserButton) */
.dateChooserButton,
.dateChooserButtonOver,
.dateChooserButtonDown,
.dateChooserButtonSelected,
.dateChooserButtonSelectedOver,
.dateChooserButtonSelectedDown,
.dateChooserWeekendButton,
.dateChooserWeekendButtonOver,
.dateChooserWeekendButtonDown,
.dateChooserWeekendButtonSelected,
.dateChooserWeekendButtonSelectedOver,
.dateChooserWeekendButtonSelectedDown,
.dateChooserNavButton,
.dateChooserNavButtonOver,
.dateChooserNavButtonDown,
.dateChooserNavButtonSelected,
.dateChooserNavButtonSelectedOver,
.dateChooserNavButtonSelectedDown,
.dateChooserNavButtonFocused,
.dateChooserNavButtonFocusedOver,
.dateChooserNavButtonFocusedDown {
    font-weight: bold;
}
.dateChooserButton,
.dateChooserButtonOver,
.dateChooserButtonDown,
.dateChooserButtonSelected,
.dateChooserButtonSelectedOver,
.dateChooserButtonSelectedDown,
.dateChooserWeekendButton,
.dateChooserWeekendButtonOver,
.dateChooserWeekendButtonDown,
.dateChooserWeekendButtonSelected,
.dateChooserWeekendButtonSelectedOver,
.dateChooserWeekendButtonSelectedDown {
    color: $dateChooser_header_text_color;
}
.dateChooserNavButton,
.dateChooserNavButtonOver,
.dateChooserNavButtonDown,
.dateChooserNavButtonSelected,
.dateChooserNavButtonSelectedOver,
.dateChooserNavButtonSelectedDown,
.dateChooserNavButtonFocused,
.dateChooserNavButtonFocusedOver,
.dateChooserNavButtonFocusedDown {
    background-color: $dateChooser_navButton_bgColor;
    color: $dateChooser_navButton_color;
}

.dateChooserButtonOver,
.dateChooserButtonDown {
    color: $dateChooser_navButton_over_color;
	cursor: pointer;
}

.dateChooserWeekendButton,
.dateChooserWeekendButtonOver,
.dateChooserWeekendButtonDown,
.dateChooserWeekendButtonSelected,
.dateChooserWeekendButtonSelectedOver,
.dateChooserWeekendButtonSelectedDown,
.dateChooserDisabledWeekend,
.dateChooserDisabledWeekendOver,
.dateChooserDisabledWeekendDown,
.dateChooserDisabledWeekendSelected,
.dateChooserDisabledWeekendSelectedDown,
.dateChooserDisabledWeekendSelectedOver {
    background-color: $dateChooser_weekend_bgColor;
}

.dateChooserNavButton,
.dateChooserNavButtonOver,
.dateChooserNavButtonDown,
.dateChooserNavButtonSelected,
.dateChooserNavButtonSelectedOver,
.dateChooserNavButtonSelectedDown,
.dateChooserNavButtonFocused,
.dateChooserNavButtonFocusedOver,
.dateChooserNavButtonFocusedDown {
    cursor: pointer;
    padding: 2px;
}

.dateChooserNavButtonOver,
.dateChooserNavButtonDown,
.dateChooserNavButtonFocused,
.dateChooserNavButtonFocusedOver,
.dateChooserNavButtonFocusedDown {
    color: $dateChooser_navButton_over_color;
}

.dateChooserDisabledWeekday,
.dateChooserDisabledWeekdayOver,
.dateChooserDisabledWeekdayDown,
.dateChooserDisabledWeekdaySelected,
.dateChooserDisabledWeekdaySelectedDown,
.dateChooserDisabledWeekdaySelectedOver {
    color: $dateChooser_cell_disabled_color;
}

.dateChooserDisabledWeekend,
.dateChooserDisabledWeekendOver,
.dateChooserDisabledWeekendDown,
.dateChooserDisabledWeekendSelected,
.dateChooserDisabledWeekendSelectedDown,
.dateChooserDisabledWeekendSelectedOver {
  color: $dateChooser_cell_disabled_color;
  border: 2px solid $dateChooser_weekend_bgColor;
}

.dateChooserSelectedWeek,
.dateChooserSelectedWeekOver,
.dateChooserSelectedWeekDown,
.dateChooserSelectedWeekDisabled,
.dateChooserSelectedWeekSelected,
.dateChooserSelectedWeekSelectedDown,
.dateChooserSelectedWeekSelectedOver,
.dateChooserSelectedWeekSelectedDisabled {
    font-weight: bold;
}

/* Today, Cancel buttons */
.dateChooserBorderedBottomButton,
.dateChooserBorderedBottomButtonOver,
.dateChooserBorderedBottomButtonDown,
.dateChooserBorderedBottomButtonDisabled,
.dateChooserBorderedBottomButtonSelected,
.dateChooserBorderedBottomButtonSelectedOver,
.dateChooserBorderedBottomButtonSelectedDown,
.dateChooserBorderedBottomButtonFocused,
.dateChooserBorderedBottomButtonFocusedOver,
.dateChooserBorderedBottomButtonFocusedDown {
    color: $dateChooser_bottom_button_color;
    @include box-sizing(border-box);
    padding: 6px 10px !important; 
    width:98px;
    background: $dateChooser_bottom_button_bgColor;
    border: $standard_border_width solid $dateChooser_bottom_button_border_color;
    @include border-radius($dateChooser_bottom_button_border_radius);
    font: {
        family: $dateChooser_bottom_button_font; 
        size: $dateChooser_bottom_button_font_size;
    }
    letter-spacing: 0.5px;
}

.dateChooserBorderedBottomButtonSelectedDown,
.dateChooserBorderedBottomButtonFocusedDown,
.dateChooserBorderedBottomButtonDown {
    outline: none;
    @include box-shadow(inset 0 0 10px $dateChooser_bottom_button_down_shadow_color);
}
.dateChooserBorderedBottomButtonOver,
.dateChooserBorderedBottomButtonSelectedOver,
.dateChooserBorderedBottomButtonFocusedOver {
    @if $show_button_outer_glow {
        @include box-shadow(0 0 0.2em 0.1em $dateChooser_bottom_button_over_shadow_color);
    }
    background-color: $dateChooser_bottom_button_over_bgColor;
}

/* weekday and weekend cells */
.dateChooserWeekday,
.dateChooserWeekdayOver,
.dateChooserWeekdayDown,
.dateChooserWeekdaySelected,
.dateChooserWeekdaySelectedOver,
.dateChooserWeekdaySelectedDown,
.dateChooserWeekdayDisabled,
.dateChooserWeekend,
.dateChooserWeekendOver,
.dateChooserWeekendDown,
.dateChooserWeekendSelected,
.dateChooserWeekendSelectedOver,
.dateChooserWeekendSelectedDown,
.dateChooserWeekendDisabled {
    background-color: $dateChooser_cell_bgColor;
    border: 2px solid $dateChooser_cell_bgColor;
    color: $dateChooser_cell_color;
    cursor: pointer;
}

.dateChooserWeekdayDisabled,
.dateChooserWeekendDisabled {
	color: $dateChooser_cell_disabled_color; 
}

.dateChooserWeekend,
.dateChooserWeekendOver,
.dateChooserWeekendSelected,
.dateChooserWeekendDisabled {
    background-color: $dateChooser_weekend_bgColor;
    border: 2px solid $dateChooser_weekend_bgColor;
}

.dateChooserWeekdayOver,
.dateChooserWeekendOver {
    background: $dateChooser_cell_over_bgColor; 
    color: $dateChooser_cell_over_color; 
    @include border-radius($dateChooser_cell_border_radius);
}

/* selected/over date-cell styling */
.dateChooserWeekdaySelectedOver,
.dateChooserWeekendSelectedOver,
.dateChooserDisabledWeekdaySelectedOver,
.dateChooserDisabledWeekendSelectedOver {
    background: $dateChooser_cell_over_bgColor; 
    color: $dateChooser_cell_over_color; 
    @include border-radius($dateChooser_cell_border_radius);
}

.dateChooserWeekdaySelected,
.dateChooserWeekdayDown,
.dateChooserWeekdaySelectedDown,
.dateChooserWeekendSelected,
.dateChooserWeekendDown,
.dateChooserWeekendSelectedDown,
/* disabled selected/over date-cells */
.dateChooserDisabledWeekdayDown,
.dateChooserDisabledWeekdaySelected,
.dateChooserDisabledWeekdaySelectedDown,
.dateChooserDisabledWeekendDown,
.dateChooserDisabledWeekendSelected,
.dateChooserDisabledWeekendSelectedDown {
    background: $dateChooser_cell_selected_bgColor; 
    color: $dateChooser_cell_selected_color; 
    @include border-radius($dateChooser_cell_border_radius);
}

.dateChooserWeekdayDown,
.dateChooserWeekendDown {
	font-weight: normal;
}

/* year and month pop-up menus */
.dateChooserYearMenu,
.dateChooserMonthMenu,
.dateChooserWeekMenu {
    background-color: $dateChooser_bgColor;
    border: 2px solid $dateChooser_border_color;
}

/* CSS3 Mode
   Canvas border around calendar */
.dateChooserBorder {
    background-color: $dateChooser_bgColor; 
    border: $standard_border_width solid $dateChooser_border_color !important;
    @include box-shadow($dateChooser_shadow);
}

.dateChooserBorderTop {
    border-top: $standard_border_width solid $dateChooser_border_color;
}
.dateChooserBorderBottom {
    background-color: $dateChooser_navButton_bgColor; 
    border-bottom: $standard_border_width solid $dateChooser_border_color;
}

@if $dateChooser_nav_spriting != false {
/* Spriting for navigation arrows */
.dateChooserNavMonthBack,
.dateChooserNavMonthForward,
.dateChooserNavYearBack,
.dateChooserNavYearForward {
    width: 22px;
    height: 22px;
    @include border-radius(3px);
    display: inline-block;
    outline: none;
    vertical-align: middle;
    margin: 0 auto;
    background: $dateChooser_nav_sprite_image no-repeat;
}

.dateChooserNavMonthBack {
    background-position: -330px -3px;
}

.dateChooserNavMonthForward {
    background-position: -359px -3px;
}

.dateChooserNavYearBack {
    background-position: -301px -3px;
}

.dateChooserNavYearForward {
    background-position: -388px -3px;
}
}

/* ColorPicker styles */
.colorPickerHeader,
.colorPickerHilite {
    padding: 0px;
    padding-left: 10px;
    background: $colorPicker_header_bgColor;
}

.colorPicker {
    background: $colorPicker_bgColor;
    border: $standard_border_width solid $colorPicker_border_color;
    padding: 0px;
    margin: 0px;
}

.colorPickerBody {
    background: $colorPicker_bgColor;
    border-top: $standard_border_width solid $colorPicker_border_color;
}

.colorPickerInnerContent {
    padding-bottom: 5px;
}

.colorPickerButtonLayout {
    background: transparent;
    padding: 8px;
    border-top: $standard_border_width solid $colorPicker_border_color;
}

.colorPickerHeaderText {
    background: $colorPicker_header_bgColor;
    color: $colorPicker_header_color;
    font-size: $colorPicker_header_font_size;
    font-weight: bold;
    padding: 4px 8px;
    font-family: $colorPicker_header_font;
}

/* ColorChooser (ColorPicker) */
.colorChooserCell,
.colorChooserCellOver {
    @if $colorPicker_cell_bgColor != false {
        background-color: $colorPicker_cell_bgColor;
    }
    //color: $standard_color;
    border: $standard_border_width solid $colorPicker_cell_border_color;
}

.colorChooserCellOver {
    border: $standard_border_width solid $colorPicker_cell_over_border_color;
}


/*ListGrid EditorTypes*/
.textItemLiteEditorType,
.textItemLiteEditorTypeRTL,
.textItemLiteEditorTypeOver,
.textItemLiteEditorTypeOverRTL,
.textItemLiteEditorTypeFocused,
.textItemLiteEditorTypeFocusedRTL,
.textItemLiteEditorTypeFocusedOver,
.textItemLiteEditorTypeFocusedOverRTL,
.textItemLiteEditorTypeDisabled,
.textItemLiteEditorTypeDisabledRTL,
.textItemLiteEditorTypeError,
.textItemLiteEditorTypeErrorRTL,
.textItemLiteEditorTypePending,
.textItemLiteEditorTypePendingRTL,
.textItemLiteEditorTypePendingOver,
.textItemLiteEditorTypePendingOverRTL,
.textItemLiteEditorTypePendingFocused,
.textItemLiteEditorTypePendingFocusedRTL,
.textItemLiteEditorTypePendingFocusedOver,
.textItemLiteEditorTypePendingFocusedOverRTL,
.textItemLiteEditorTypePendingDisabled,
.textItemLiteEditorTypePendingDisabledRTL,
.textItemLiteEditorTypePendingError,
.textItemLiteEditorTypePendingErrorRTL,
.textItemLiteEditorTypeHint,
.textItemLiteEditorTypeHintRTL,
.textItemLiteEditorTypeDisabledHint,
.textItemLiteEditorTypeDisabledHintRTL {
    font-family: $formItem_edit_font;
    font-size: $normal_font_size;
    color: $formItem_color;
    padding: 0px 6px 0px;
    outline: none;
    text-decoration: none;
    text-align: left;
    
    /* borders and padding for minimalist text-based items */    
    border: $standard_border_width solid $formItem_border_color;
    //@include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075));
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    background-color: white;
    @include border-radius(0px);
}
/* focused state */
.textItemLiteEditorTypeFocused,
.textItemLiteEditorTypeFocusedRTL,
.textItemLiteEditorTypePendingFocused,
.textItemLiteEditorTypePendingFocusedRTL {
    outline: none;
    border-color: $formItem_focused_border_color;
    @include box-shadow(inset 0 0 5px 0 $formItem_focused_border_color);
}
.selectItemLiteTextEditorType,
.selectItemLiteTextEditorTypeRTL,
.selectItemLiteTextEditorTypeFocused,
.selectItemLiteTextEditorTypeFocusedRTL,
.selectItemLiteTextEditorTypeDisabled,
.selectItemLiteTextEditorTypeDisabledRTL,
.selectItemLiteTextEditorTypeError,
.selectItemLiteTextEditorTypeErrorRTL,
.selectItemLiteTextEditorTypePending,
.selectItemLiteTextEditorTypePendingRTL,
.selectItemLiteTextEditorTypePendingFocused,
.selectItemLiteTextEditorTypePendingFocusedRTL,
.selectItemLiteTextEditorTypePendingDisabled,
.selectItemLiteTextEditorTypePendingDisabledRTL,
.selectItemLiteTextEditorTypePendingError,
.selectItemLiteTextEditorTypePendingErrorRTL,
.selectItemLiteTextEditorTypeHint,
.selectItemLiteTextEditorTypeHintRTL,
.selectItemLiteTextEditorTypeDisabledHint,
.selectItemLiteTextEditorTypeDisabledHintRTL {
    outline: none;
    font-family: $formItem_edit_font;
    font-size: $normal_font_size;
    color: $formItem_color;
    padding: 0px 6px 0px;
    outline: none;
    text-decoration: none;
    text-align: left;
    @include border-radius(0px);
}
/* suppress borders on selectItem text - border is applied to control element
   also zero out right-padding so we don't have unnecessary gap between text and
   the down-pointing chevron */
.selectItemLiteTextEditorType,
.selectItemLiteTextEditorTypeRTL,
.selectItemLiteTextEditorTypeFocused,
.selectItemLiteTextEditorTypeFocusedRTL,
.selectItemLiteTextEditorTypeDisabled,
.selectItemLiteTextEditorTypeDisabledRTL,
.selectItemLiteTextEditorTypeError,
.selectItemLiteTextEditorTypeErrorRTL,
.selectItemLiteTextEditorTypePending,
.selectItemLiteTextEditorTypePendingRTL,
.selectItemLiteTextEditorTypePendingFocused,
.selectItemLiteTextEditorTypePendingFocusedRTL,
.selectItemLiteTextEditorTypePendingDisabled,
.selectItemLiteTextEditorTypePendingDisabledRTL,
.selectItemLiteTextEditorTypePendingError,
.selectItemLiteTextEditorTypePendingErrorRTL,
.selectItemLiteTextEditorTypeHint,
.selectItemLiteTextEditorTypeHintRTL,
.selectItemLiteTextEditorTypeDisabledHint,
.selectItemLiteTextEditorTypeDisabledHintRTL {
    outline: none;
    border: 0px;
    padding-right: 0px;
    background-color: $transparent_background_from_rgba;
    background-color: $transparent_background_for_ie;
} 

.selectItemLiteControlEditorType,
.selectItemLiteControlEditorTypeRTL,
.selectItemLiteControlEditorTypeFocused,
.selectItemLiteControlEditorTypeFocusedRTL,
.selectItemLiteControlEditorTypeOver,
.selectItemLiteControlEditorTypeOverRTL,
.selectItemLiteControlEditorTypeFocusedOver,
.selectItemLiteControlEditorTypeFocusedOverRTL,
.selectItemLiteControlEditorTypeError,
.selectItemLiteControlEditorTypeErrorRTL,
.selectItemLiteControlEditorTypePending,
.selectItemLiteControlEditorTypePendingRTL,
.selectItemLiteControlEditorTypePendingFocused,
.selectItemLiteControlEditorTypePendingFocusedRTL,
.selectItemLiteControlEditorTypePendingOver,
.selectItemLiteControlEditorTypePendingOverRTL,
.selectItemLiteControlEditorTypePendingFocusedOver,
.selectItemLiteControlEditorTypePendingFocusedOverRTL,
.selectItemLiteControlEditorTypePendingDisabled,
.selectItemLiteControlEditorTypePendingDisabledRTL,
.selectItemLiteControlEditorTypePendingError,
.selectItemLiteControlEditorTypePendingErrorRTL,
.selectItemLiteControlEditorTypeHint,
.selectItemLiteControlEditorTypeHintRTL {
    border: $standard_border_width solid $formItem_border_color;
    //@include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075));
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    background-color: white;
    @include border-radius(0px);
}
.selectItemLiteControlEditorTypeFocused,
.selectItemLiteControlEditorTypeFocusedRTL,
.selectItemLiteControlEditorTypeFocusedOver,
.selectItemLiteControlEditorTypeFocusedOverRTL,
.selectItemLiteControlEditorTypePendingFocused,
.selectItemLiteControlEditorTypePendingFocusedRTL,
.selectItemLiteControlEditorTypePendingFocusedOver,
.selectItemLiteControlEditorTypePendingFocusedOverRTL {
    outline: none;
    border-color: $formItem_focused_border_color;
    @include box-shadow(inset 0 0 5px 0 $formItem_focused_border_color);
    background-color: $formItem_focused_bgColor;
}

/* over state */
.textItemLiteControlEditorTypeOver,
.textItemLiteControlEditorTypeOverRTL,
.textItemLiteControlEditorTypeFocusedOver,
.textItemLiteControlEditorTypeFocusedOverRTL,
.textItemLiteControlEditorTypePendingOver,
.textItemLiteControlEditorTypePendingOverRTL,
.textItemLiteControlEditorTypePendingFocusedOver,
.textItemLiteControlEditorTypePendingFocusedOverRTL {
    @include box-shadow(0 0 5px $formItem_focused_border_color);
    border: $formItem_focused_border_color solid 1px;
}

.selectItemLiteControlEditorTypeOver,
.selectItemLiteControlEditorTypeOverRTL,
.selectItemLiteControlEditorTypeFocusedOver,
.selectItemLiteControlEditorTypeFocusedOverRTL,
.selectItemLiteControlEditorTypePendingOver,
.selectItemLiteControlEditorTypePendingOverRTL,
.selectItemLiteControlEditorTypePendingFocusedOver,
.selectItemLiteControlEditorTypePendingFocusedOverRTL {
    @include box-shadow(0 0 5px $formItem_focused_border_color);
    border: $formItem_focused_border_color solid 1px;
}



/*============================================================
	9) Slider & Rangebar
============================================================*/

/* Sliders */
/* slider and rangebar labels */
.sliderTitle,
.sliderRange,
.sliderRangeDisabled,
.sliderValue,
.sliderValueDisabled,
.rangebarTitle,
.rangebarRange,
.rangebarValue {
    color: $slider_range_color;
    font-family: $primary_font;
    font-size: $formItem_font_size;
}


.sliderRange {
    font-size: $formItem_font_size;
    font-weight: 400; 
}

.sliderTitle,
.rangebarTitle {
    color: $slider_title_color;
}

.sliderRange,
.rangebarRange {
    color: $slider_range_color;
}

.sliderRangeDisabled,
.sliderValueDisabled {
    color: $slider_range_disabled_color;
}

/* SliderTrack */

.hSliderTrack,
.vSliderTrack,
.hSliderTrackDisabled,
.vSliderTrackDisabled {
    background: $slider_track_bgColor;
    @include border-radius(10px);
    outline: none;
}

.hSliderTrackDisabled,
.vSliderTrackDisabled {
    background: $slider_track_disabled_bgColor;
}

/* Slider thumb */
.hSliderThumb,
.hSliderThumbtouch,
.hSliderThumbdown,
.hSliderThumbdowntouch,
.hSliderThumbDisabled,
.hSliderThumbDisabledtouch,
.vSliderThumb,
.vSliderThumbtouch,
.vSliderThumbdown,
.vSliderThumbdowntouch,
.vSliderThumbDisabled,
.vSliderThumbDisabledtouch {
    background: $slider_thumb_bgColor;
    @include border-radius(50px);
    width: 22px;
    height: 22px;
    border: $slider_thumb_outline;
    outline: none;
}

/* disabled thumb */
.hSliderThumbDisabled,
.hSliderThumbDisabledtouch,
.vSliderThumbDisabled,
.vSliderThumbDisabledtouch {
    background: $slider_thumb_disabled_bgColor;
    border: $slider_thumb_disabled_outline;
}

.hSliderThumbtouch,
.hSliderThumbdowntouch,
.vSliderThumbtouch,
.vSliderThumbdowntouch,
.hSliderThumbDisabledtouch,
.vSliderThumbDisabledtouch {
    @include border-radius(15px);
}

/* slider pointy arrows - start */

.sliderValue,
.sliderValueDisabled,
.vSliderValue,
.vSliderValueDisabled,
.hSliderValue,
.hSliderValueDisabled {
    color: $slider_value_color;
	position: absolute;
	background: $slider_value_bgColor;
	border: $standard_border_width solid $slider_value_border_color;
    @include border-radius(3px);
    //padding: 3px 3px 0px 3px;
    line-height: 14px;    
    text-align: center;
    display: inline-block;
    margin-top: 2px;
}


.vSliderValue:after, .vSliderValue:before,
.vSliderValueDisabled:after, .vSliderValueDisabled:before,
.hSliderValue:after, .hSliderValue:before,
.hSliderValueDisabled:after, .hSliderValueDisabled:before {
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.vSliderValue:after, .vSliderValue:before,
.vSliderValueDisabled:after, .vSliderValueDisabled:before {
	left: 100%;
	top: 50%;
}

.hSliderValue:after, .hSliderValue:before,
.hSliderValueDisabled:after, .hSliderValueDisabled:before {
	top: 100%;
	left: 50%;
}

@each $style in SliderValue, SliderValueDisabled {
    $border_color: $slider_value_border_color;
    @if $style == SliderValueDisabled {
        $border_color: $slider_value_disabled_border_color;
    }

.v#{$style}:after {
    border-left-color: $slider_value_arrow_hidden_border_color;
    border-width: 4px;
    margin-top: -4px;
}
.v#{$style}:before {
    border-left-color: $border_color;
    border-width: 5px;
    margin-top: -5px;
}

.h#{$style}:after {
    border-top-color: $slider_value_arrow_hidden_border_color;
    border-width: 4px;
    margin-left: -4px;
}
.h#{$style}:before {
    border-top-color: $border_color;
    border-width: 5px;
    margin-left: -5px;
}

} // @each $style

.sliderValueDisabled,
.vSliderValueDisabled,
.hSliderValueDisabled {
    border: $standard_border_width solid $slider_value_disabled_border_color;
    background: $slider_value_disabled_bgColor;
    color: $slider_value_disabled_color;
}

.vSliderValueDisabled:after {
    border-left-color: $slider_value_disabled_bgColor;
}
.hSliderValueDisabled:after {
    border-top-color: $slider_value_disabled_bgColor;
}

.sliderValueText,
.sliderValueTextDisabled,
.sliderValuePendingText,
.sliderValuePendingTextDisabled {
    color: $slider_range_color;
    font-family: $primary_font;
    font-size: $formItem_font_size;
    padding: 2px;
}

.sliderValuePendingText {
    color: $pending_value_color;
}

.sliderValueTextDisabled,
.sliderValuePendingTextDisabled {
    background: $slider_value_disabled_bgColor;
    color: $slider_value_disabled_color;
}

/* slider pointy arrows - end */

/* slider activeTrack */

.sliderTrackActive,
.hSliderTrackActive,
.vSliderTrackActive {
    background: $slider_activeTrack_bgColor;
    @include border-radius(10px);
}

.sliderTrackActiveDisabled,
.hSliderTrackActiveDisabled,
.vSliderTrackActiveDisabled {
    background: $slider_activeTrack_disabled_bgColor;
    @include border-radius(10px);
}

/* slider activeTrack - end */

/*============================================================
	10) DetailViewer
============================================================*/
.detailBlock {
    border: {
        left: $standard_border_width solid $detailViewer_border_color;
        top: $standard_border_width solid $detailViewer_border_color;
    }        
}

.detail,
.detailLabel,
.detailHeader {
    background-color: $detailViewer_bgColor;
    border: {
        bottom: $standard_border_width solid $detailViewer_border_color;
        right: $standard_border_width solid $detailViewer_border_color;
    }
    color: $detailViewer_color;
    font: {
        family: $detailViewer_font; 
        size: $detailViewer_font_size; 
    }
    -webkit-text-size-adjust: 100%;
}

.detailLabel {
	background-color: $detailViewer_label_bgColor;
    color: $detailViewer_color;
    font-weight: bold;
    text-align: right;
}

.detailHeader {
    background-color: hsl($primary_hue - 3, 100%, 87%);
    color: $detailViewer_color;
    font: {
        family: $detailViewer_font; 
        size: $standard_header_font_size; 
        weight: bold;
    }
}

/*============================================================
	11) ListGrid
============================================================*/

/*============================================================
	ListGrid parts
		styleName - listGrid
		headerBarStyle - headerBar
		bodyStyleName - gridBody
============================================================*/

.listGrid {
    border: $standard_border_width solid $listGrid_border_color;
}

.headerBar {
    background: {
        color: $listGrid_headerButton_bgColor;
        image: url(./images/ListGrid/header.png);
        repeat: repeat-x;
        position: bottom left;
        attachment: scroll;
    }
}

.gridBody {
    background-color: $listGrid_body_bgColor;
}

.alternateGridBody {
    background-color: $listGrid_body_bgColor;
}

.loadingDataMessage,
.offlineMessage,
.emptyMessage {
    color: $standard_color;
    font: {
        family: $primary_font; 
        size: $standard_font_size; 
    }
    padding: 11px;
}

.gridDragTracker {
    border: $standard_border_width dotted $standard_gray;
	color: $standard_color;
	font: {
        family: $primary_font; 
        size: $standard_font_size;
    }
    padding: 1px;
}

.dragLine {
    border-top: 2px dotted hsl($primary_hue + 2, 100%, 73%);
    pointer-events: none;
}

.dragLineVertical {
    border-right: 2px dotted hsl($primary_hue + 2, 100%, 73%);
    pointer-events: none;
}

.listTable {
}

/* for filterEditor */
.recordEditorCellDark,
.recordEditorCell {
    line-height: 22px;
    background-color: $standard_bgColor;
    color: $standard_color; 
    font: {
        family: $primary_font; 
        size: $standard_font_size; 
    }
}

/*============================================================
	ListGrid headers
		listGrid.headerBaseStyle - headerButton / imgHeaderButton (in skin)
		listGrid.headerDefaults.titleStyle - headerTitle (in skin)
		listGrid.sorterDefaults.titleStyle - headerTitle (in skin)

============================================================*/

/* imgHeaderButton - ListGrid column header buttons for image based
   headerButton - ListGrid column header buttons for css3 based */
   
/* ListGrid headerButtons - remove top and bottom padding to defeat a Button hack that can cause 
some LG header-titles to be vertically offset from other headers */
.headerButton,
.headerButtonSelected,
.headerButtonSelectedOver,
.headerButtonSelectedDown,
.headerButtonSelectedDisabled,
.headerButtonOver,
.headerButtonDown,
.headerButtonDisabled {
    padding-top: 0px; 
    padding-bottom: 0px;
    border-bottom: $listGrid_headerButton_border;
    @if $listGrid_show_cell_separators == true {
        border-bottom: $standard_border_width solid $listGrid_border_color;
        border-right: $standard_border_width solid $listGrid_border_color;
    }
}

/* ListGrid header span headerButtons */
.headerSpanButton,
.headerSpanButtonSelected,
.headerSpanButtonSelectedOver,
.headerSpanButtonSelectedDown,
.headerSpanButtonSelectedDisabled,
.headerSpanButtonOver,
.headerSpanButtonDown,
.headerSpanButtonDisabled {
    color: $listGrid_headerButton_color;
    font-family: $listGrid_headerButton_font;
    font-weight: bold;
    font-size: $listGrid_headerButton_font_size;
    background-color: $listGrid_headerButton_bgColor;
    letter-spacing: 0.3px;
    padding: 0px 0px 0px 3px;
    border-right: $standard_border_width solid $listGrid_headerSpan_border_color;
    border-bottom: $standard_border_width solid $listGrid_headerSpan_border_color;
}
.headerSpanButtonSelectedOver,
.headerSpanButtonOver {
    background-color: $listGrid_headerSpan_over_bgColor;
}
.headerSpanButtonSelected {
    background-color: $listGrid_headerButton_selected_bgColor;
    font-size: $listGrid_headerButton_font_size;
}
.headerSpanButtonDisabled {
    background-color: $listGrid_headerButton_disabled_bgColor; 
    color: $listGrid_headerButton_disabled_color;
}

/* ListGrid headerButtons when showing header spans - with separators */
.spannedHeaderButton,
.spannedHeaderButtonSelected,
.spannedHeaderButtonSelectedOver,
.spannedHeaderButtonSelectedDown,
.spannedHeaderButtonSelectedDisabled,
.spannedHeaderButtonOver,
.spannedHeaderButtonDown,
.spannedHeaderButtonDisabled {
    color: $listGrid_headerButton_color;
    background-color: $listGrid_headerButton_bgColor;
    font-weight: bold;
    font-size: $listGrid_headerButton_font_size;
    font-family: $listGrid_headerButton_font;
    letter-spacing: 0.3px;
    padding: 0px 0px 0px 3px;
    border-right: $standard_border_width solid $listGrid_headerSpan_border_color;
    @if $listGrid_show_header_bottom_border == true {
        border-bottom: $standard_border_width solid $listGrid_border_color;
    }
}
.spannedHeaderButtonSelectedOver,
.spannedHeaderButtonOver {
    background-color: $listGrid_headerSpan_over_bgColor;
}
.spannedHeaderButtonSelected {
    background-color: $listGrid_headerButton_selected_bgColor;
    font-size: $listGrid_headerButton_font_size;
}
.spannedHeaderButtonDisabled {
    background-color: $listGrid_headerButton_disabled_bgColor; 
    color: $listGrid_headerButton_disabled_color;
}
.spannedHeaderButtonSelectedDisabled {
    background-color: $listGrid_headerButton_disabled_bgColor; 
    color: $listGrid_headerButton_disabled_color;
}

.imgHeaderButton,
.headerButton,
.sorterButton {
    color: $listGrid_headerButton_color;
    background-color: $listGrid_headerButton_bgColor;
    font-family: $listGrid_headerButton_font;
    font-weight: bold;
    font-size: $listGrid_headerButton_font_size;
    letter-spacing: 0.3px;
    padding: 0px 0px 0px 3px;
    border-bottom: $listGrid_headerButton_border_bottom;
}

.imgHeaderButtonSelected,
.headerButtonSelected,
.sorterButtonSelected {
    color: $listGrid_headerButton_color;
    background-color: $listGrid_headerButton_selected_bgColor;
    font-weight: bold;
    font-size: $listGrid_headerButton_font_size;
    font-family: $listGrid_headerButton_font;
    letter-spacing: 0.3px;
    padding: 0px 0px 0px 3px;
}

.headerButtonDisabled,
.headerButtonSelectedDisabled,
.sorterButtonDisabled,
.sorterButtonSelectedDisabled {
/*
    @include background(linear-gradient(top,(
        adjust-color(hsl($listGrid_headerButton_disabled_hue + 1, 82%, 98%), $saturation: $listGrid_headerButton_disabled_saturation, $lightness: $listGrid_headerButton_disabled_lightness) 0%,
        adjust-color(hsl($listGrid_headerButton_disabled_hue - 6, 88%, 97%), $saturation: $listGrid_headerButton_disabled_saturation, $lightness: $listGrid_headerButton_disabled_lightness) 24%,
        adjust-color(hsl($listGrid_headerButton_disabled_hue - 6, 88%, 90%), $saturation: $listGrid_headerButton_disabled_saturation, $lightness: $listGrid_headerButton_disabled_lightness) 100%)) padding-box);
*/
}

.imgHeaderButtonDisabled,
.imgHeaderButtonSelectedDisabled,
.headerButtonDisabled,
.headerButtonSelectedDisabled,
.sorterButtonDisabled,
.sorterButtonSelectedDisabled {
    background-color: $listGrid_headerButton_disabled_bgColor; 
    color: $listGrid_headerButton_disabled_color;
    font-weight: bold;
    font-size: $listGrid_headerButton_font_size;
    font-family: $listGrid_headerButton_font;
    letter-spacing: 0.3px;
    padding: 0px 0px 0px 3px;
}

.imgHeaderButtonOver,
.imgHeaderButtonDown,
.headerButtonOver,
.headerButtonDown,
.sorterButtonOver,
.sorterButtonDown {
    color: $listGrid_cell_text_font_color;
    background-color: $listGrid_headerButton_over_bgColor;
    font-family: $listGrid_headerButton_font;
    font-weight: bold;
    font-size: $listGrid_headerButton_font_size;
    letter-spacing: 0.3px;
    padding: 0px 0px 0px 3px;
}

.imgHeaderButtonSelectedOver,
.imgHeaderButtonSelectedDown,
.headerButtonSelectedOver,
.headerButtonSelectedDown,
.sorterButtonSelectedOver,
.sorterButtonSelectedDown {
    color: $listGrid_cell_text_font_color;
    background-color: $listGrid_headerButton_selected_over_bgColor;
    font-family: $listGrid_headerButton_font; 
    font-weight: bold;
    font-size: $listGrid_headerButton_font_size; 
    letter-spacing: 0.3px;
    padding: 0px 0px 0px 3px;
}

.sorterButton,
.sorterButtonSelected,
.sorterButtonDisabled,
.sorterButtonSelectedDisabled,
.sorterButtonOver,
.sorterButtonDown,
.sorterButtonSelectedOver,
.sorterButtonSelectedDown {
    padding-right: 0;
    padding-left: 0;
}


/*=============================================================================================
    ...Rotated styles, parallel those of headerButton and similar above, but are intended for
    header buttons with rotated (vertical) titles, so must provide top and bottom padding.
==============================================================================================*/

.headerButtonRotated,
.headerButtonSelectedRotated,
.headerButtonSelectedOverRotated,
.headerButtonSelectedDownRotated,
.headerButtonSelectedDisabledRotated,
.headerButtonOverRotated,
.headerButtonDownRotated,
.headerButtonDisabledRotated {
    padding-top: 3px; 
    padding-bottom: 3px;
    border-bottom: $listGrid_headerButton_border;
    @if $listGrid_show_cell_separators == true {
        border-bottom: $standard_border_width solid $listGrid_border_color;
        border-right: $standard_border_width solid $listGrid_border_color;
    }
}

.spannedHeaderButtonRotated,
.spannedHeaderButtonSelectedRotated,
.spannedHeaderButtonSelectedOverRotated,
.spannedHeaderButtonSelectedDownRotated,
.spannedHeaderButtonSelectedDisabledRotated,
.spannedHeaderButtonOverRotated,
.spannedHeaderButtonDownRotated,
.spannedHeaderButtonDisabledRotated {
    color: $listGrid_headerButton_color;
    background-color: $listGrid_headerButton_bgColor;
    font-weight: bold;
    font-size: $listGrid_headerButton_font_size;
    font-family: $listGrid_headerButton_font;
    letter-spacing: 0.3px;
    padding: 3px 0px 3px 0px;
    border-right: $standard_border_width solid $listGrid_headerSpan_border_color;
    @if $listGrid_show_header_bottom_border == true {
        border-bottom: $standard_border_width solid $listGrid_border_color;
    }
}
.spannedHeaderButtonSelectedOverRotated,
.spannedHeaderButtonOverRotated {
    background-color: $listGrid_headerSpan_over_bgColor;
}
.spannedHeaderButtonSelectedRotated {
    background-color: $button_normal_bgColor;
    font-size: $listGrid_headerButton_font_size;
}
.spannedHeaderButtonDisabledRotated {
    background-color: $listGrid_headerButton_disabled_bgColor; 
    color: $listGrid_headerButton_disabled_color;
}
.spannedHeaderButtonSelectedDisabledRotated {
    background-color: $listGrid_headerButton_disabled_bgColor; 
    color: $listGrid_headerButton_disabled_color;
}

.imgHeaderButtonRotated,
.headerButtonRotated {
    color: $listGrid_headerButton_color;
    background-color: $listGrid_headerButton_bgColor;
    font-family: $listGrid_headerButton_font;
    font-weight: bold;
    font-size: $listGrid_headerButton_font_size;
    letter-spacing: 0.3px;
    padding: 3px 0px 3px 0px;
    border-bottom: $listGrid_headerButton_border_bottom;
}

.imgHeaderButtonSelectedRotated,
.headerButtonSelectedRotated {
    color: $listGrid_headerButton_color;
    background-color: $listGrid_headerButton_selected_bgColor;
    font-weight: bold;
    font-size: $listGrid_headerButton_font_size;
    font-family: $listGrid_headerButton_font;
    letter-spacing: 0.3px;
    padding: 3px 0px 3px 0px;
}

.headerButtonDisabledRotated,
.headerButtonSelectedDisabledRotated {
/*
    @include background(linear-gradient(top,(
        adjust-color(hsl($listGrid_headerButton_disabled_hue + 1, 82%, 98%), $saturation: $listGrid_headerButton_disabled_saturation, $lightness: $listGrid_headerButton_disabled_lightness) 0%,
        adjust-color(hsl($listGrid_headerButton_disabled_hue - 6, 88%, 97%), $saturation: $listGrid_headerButton_disabled_saturation, $lightness: $listGrid_headerButton_disabled_lightness) 24%,
        adjust-color(hsl($listGrid_headerButton_disabled_hue - 6, 88%, 90%), $saturation: $listGrid_headerButton_disabled_saturation, $lightness: $listGrid_headerButton_disabled_lightness) 100%)) padding-box);
*/
}

.imgHeaderButtonDisabledRotated,
.imgHeaderButtonSelectedDisabledRotated,
.headerButtonDisabledRotated,
.headerButtonSelectedDisabledRotated {
    background-color: $listGrid_headerButton_disabled_bgColor; 
    color: $listGrid_headerButton_disabled_color;
    font-weight: bold;
    font-size: $listGrid_headerButton_font_size;
    font-family: $listGrid_headerButton_font;
    letter-spacing: 0.3px;
    padding: 3px 0px 3px 0px;
}

.imgHeaderButtonOverRotated,
.imgHeaderButtonDownRotated,
.headerButtonOverRotated,
.headerButtonDownRotated {
    color: $listGrid_cell_text_font_color;
    background-color: $listGrid_headerButton_over_bgColor;
    font-family: $listGrid_headerButton_font;
    font-weight: bold;
    font-size: $listGrid_headerButton_font_size;
    letter-spacing: 0.3px;
    padding: 3px 0px 3px 0px;
}

.imgHeaderButtonSelectedOverRotated,
.imgHeaderButtonSelectedDownRotated,
.headerButtonSelectedOverRotated,
.headerButtonSelectedDownRotated {
    color: $listGrid_cell_text_font_color;
    background-color: $listGrid_headerButton_selected_over_bgColor;
    font-family: $listGrid_headerButton_font; 
    font-weight: bold;
    font-size: $listGrid_headerButton_font_size; 
    letter-spacing: 0.3px;
    padding: 3px 0px 3px 0px;
}


/* ListGrid column header titles */
.headerTitle,
.headerTitleOver,
.headerTitleDown,
.headerTitleSelected,
.headerTitleSelectedOver,
.headerTitleSelectedDown,
.headerTitleDisabled,
.headerTitleSelectedDisabled {
    color: $listGrid_headerTitle_color;
    font: {
        family: $primary_font; 
        size: $standard_font_size;
    }
    padding: {
        left: 4px; 
        right: 4px;
    }
}

.headerTitleDown,
.headerTitleSelected,
.headerTitleSelectedOver,
.headerTitleSelectedDown,
.headerTitleSelectedDisabled {
    color: $listGrid_headerTitle_color;
}

.headerTitleDisabled,
.headerTitleSelectedDisabled {
    color: $listGrid_headerButton_disabled_color;
}

/* for filterEditor */
.filterOperatorIcon,
.filterOperatorIconOver,
.filterOperatorIconFocused,
.filterOperatorIconFocusedOver,
.filterOperatorIconDown, 
.filterOperatorIconSelected,
.filterOperatorIconSelectedFocused,
.filterOperatorIconSelectedFocusedOver {
    font-family: $primary_font;
    font-size: $standard_small_font_size; 
    line-height: 14px;
    text-align: center;
    padding: 0px;
    margin: 0px;
}

/*============================================================
	ListGrid cells
		listGrid.baseStyle
============================================================*/

/*------------------------------------------------------------
		listGrid.baseStyle
------------------------------------------------------------*/
.cell,
.cellDark,
.cellOver,
.cellOverDark,
.cellSelected,
.cellSelectedDark,
.cellSelectedOver,
.cellSelectedOverDark,
.cellDeselected,
.cellDeselectedDark,
.cellDeselectedOver,
.cellDeselectedOverDark,
.cellPendingSelected,
.cellPendingSelectedOver,
.cellPendingSelectedOverDark,
.cellDisabled,
.cellDisabledDark,
.tallCell,
.tallCellDark,
.tallCellOver,
.tallCellOverDark,
.tallCellSelected,
.tallCellSelectedDark,
.tallCellSelectedOver,
.tallCellSelectedOverDark,
.tallCellDisabled,
.tallCellDisabledDark,
.gridSummaryCell,
.gridSummaryCellDisabled,
.recordSummaryCell,
.recordSummaryCellDark,
.recordSummaryCellOver,
.recordSummaryCellOverDark,
.recordSummaryCellSelected,
.recordSummaryCellSelectedDark,
.recordSummaryCellSelectedOver,
.recordSummaryCellSelectedOverDark,
.recordSummaryCellDisabled,
.recordSummaryCellDisabledDark,
.expansionCellCell,
.expansionCellCellDark,
.expansionCellCellOver,
.expansionCellCellOverDark,
.expansionCellCellSelected,
.expansionCellCellSelectedDark,
.expansionCellCellSelectedOver,
.expansionCellCellSelectedOverDark,
.expansionCellCellDisabled,
.expansionCellCellDisabledDark,
.specialCol,
.specialColOver,
.specialColSelected,
.specialColSelectedOver,
.specialColDisabled {
    background-color: $listGrid_cell_bgColor;
    font: {
        size: $listGrid_cell_font_size;
        family: $listGrid_cell_font;
    }
    color: $listGrid_cell_font_color;
    padding-left: 3px;
    border: none;
    @if $listGrid_show_row_separators == true {
        border-bottom: $standard_border_width solid $listGrid_border_color;
    } @else {
        border-bottom: $standard_transparent_border;
    }
    @if $listGrid_show_cell_separators == true {
        border-left: $standard_border_width solid transparent;
        border-right: $standard_border_width solid $listGrid_border_color;
    }
    text-overflow: ellipsis;
}

.specialCol,
.specialColOver,
.specialColSelected,
.specialColSelectedOver,
.specialColDisabled {
    background-color: $standard_bgColor;
	color: $standard_color;
    line-height: 22px;
}

.cellDark,
.recordSummaryCellDark {
    background-color: $listGrid_cell_dark_bgColor;
}

.gridSummaryCell,
.gridSummaryCellDisabled {
    background-color: $listGrid_summaryCell_bgColor;
    border: none;
    border-bottom: $standard_border_width solid $listGrid_summaryCell_border_color;
    border-top: $standard_border_width solid $listGrid_summaryCell_border_color; 
}

.cellOver,
.cellOverDark,
.cellDeselectedOver,
.cellDeselectedOverDark,
.specialColOver,
.recordSummaryCellOver,
.recordSummaryCellOverDark {
    background-color: $listGrid_cell_over_bgColor;
    color: $listGrid_cell_over_color;
    @if $listGrid_show_row_separators == true {
        border-bottom: $standard_border_width solid $listGrid_border_color;
    }
}

.tallCellDark {
	background-color: $standard_bgColor;
}

.tallCellOver,
.tallCellOverDark {
    background-color: $listGrid_cell_over_bgColor;
    color: $listGrid_cell_over_color;
}

.cellSelected,
.cellSelectedDark,
.cellPendingSelected,
.cellPendingSelectedDark,
.specialColSelected,
.recordSummaryCellSelected,
.recordSummaryCellSelectedDark {
    background: $listGrid_cell_selected_bgColor;
    color: $listGrid_cell_selected_text_color;
}
    
.tallCellSelected,
.tallCellSelectedDark {
    background: $listGrid_cell_selected_bgColor;
    color: $listGrid_cell_selected_text_color;
}

.cellSelectedOver,
.cellSelectedOverDark,
.cellPendingSelectedOver,
.cellPendingSelectedOverDark,
.specialColSelectedOver,
.recordSummaryCellSelectedOver,
.recordSummaryCellSelectedOverDark {    
    background-color: $listGrid_cell_selected_over_bgColor; 
    color: $listGrid_cell_selected_text_color;
    @if $listGrid_show_row_separators == true {
        border-bottom: $standard_border_width solid $listGrid_cell_selected_over_border_color;
    }
}

.tallCell,
.tallCellDark,
.tallCellOver,
.tallCellOverDark,
.tallCellSelected,
.tallCellSelectedDark,
.tallCellSelectedOver,
.tallCellSelectedOverDark,
.tallCellDisabled,
.tallCellDisabledDark {
    border-top: $standard_transparent_border;
}

.tallCellSelectedOver,
.tallCellSelectedOverDark {
    background-color: $listGrid_cell_selected_over_bgColor;
    color: $listGrid_cell_selected_text_color;
    @if $listGrid_show_row_separators == true {
        border-bottom: $standard_border_width solid $listGrid_cell_selected_over_border_color;
    }
}
 
.gridSummaryCell,
.gridSummaryCellDisabled {
    font-weight: bold;
    color: $listGrid_summaryCell_color;
}

.cellDisabled,
.cellDisabledDark,
.tallCellDisabled,
.tallCellDisabledDark,
.gridSummaryCellDisabled,
.specialColDisabled,
.recordSummaryCellDisabled,
.recordSummaryCellDisabledDark {
    background-color: $listGrid_cell_disabled_bgColor;
    cursor: not-allowed;
    color: $listGrid_cell_disabled_color;
}

/* ListGrid tallCellAlt (alternateField) styles */
.tallCellAlt,
.tallCellAltDark,
.tallCellAltOver,
.tallCellAltOverDark,
.tallCellAltSelected,
.tallCellAltSelectedDark,
.tallCellAltSelectedOver,
.tallCellAltSelectedOverDark,
.tallCellAltDisabled,
.tallCellAltDisabledDark {
    color: $listGrid_cell_font_color;
	font: {
        family: $listGrid_cell_font;
        size: $listGrid_cell_font_size;
    }
    text-overflow: ellipsis;
    padding-left: 3px;
}
.tallCellAltDark {
    background-color: $listGrid_cell_altCol_dark_bgColor;
    border: {
        bottom: $standard_border_width solid $listGrid_cell_altCol_dark_bgColor;
        top: $standard_border_width solid $listGrid_cell_altCol_dark_bgColor; 
    }
}
.tallCellAltOver,
.tallCellAltOverDark {
	background-color: $listGrid_cell_over_bgColor;
    color: $listGrid_cell_disabled_color;
    @if $listGrid_show_row_separators == true {
        border-bottom: $standard_border_width solid $listGrid_cell_over_bgColor;
        border-top: $standard_border_width solid $listGrid_cell_over_bgColor;
    }
} 
.tallCellAltSelected,
.tallCellAltSelectedDark,
.tallCellAltSelectedOver,
.tallCellAltSelectedOverDark {
    background-color: $listGrid_cell_selected_bgColor;
    color: $listGrid_cell_text_font_color;
    @if $listGrid_show_row_separators == true {
        border-bottom: $standard_border_width solid $listGrid_cell_selected_bgColor;
        border-top: $standard_border_width solid $listGrid_cell_selected_bgColor;
    }
}
.tallCellAltSelectedOver,
.tallCellAltSelectedOverDark {
    @include box-shadow(0 0 5px 0 $listGrid_headerButton_bgColor);
}
.tallCellAltDisabled,
.tallCellAltDisabledDark {
    background-color: $listGrid_cell_disabled_bgColor;
    @if $listGrid_show_row_separators == true {
        border-bottom: $standard_border_width solid $listGrid_cell_disabled_bgColor;
        border-top: $standard_border_width solid $listGrid_cell_disabled_bgColor;
    }
    cursor: not-allowed;
    color: $listGrid_cell_disabled_color;
}

/* alternate column styling in ListGrid */
.cellAltCol,
.cellDarkAltCol,
.cellOverAltCol,
.cellOverDarkAltCol,
.cellSelectedAltCol,
.cellSelectedDarkAltCol,
.cellSelectedOverAltCol,
.cellSelectedOverDarkAltCol,
.cellPendingSelectedAltCol,
.cellPendingSelectedDarkAltCol,
.cellPendingSelectedOverAltCol,
.cellPendingSelectedOverDarkAltCol,
.cellDeselectedAltCol,
.cellDeselectedDarkAltCol,
.cellDeselectedOverAltCol,
.cellDeselectedOverDarkAltCol,
.cellDisabledAltCol,
.cellDisabledDarkAltCol,
.recordSummaryCellSelectedAltCol,
.recordSummaryCellAltCol,
.recordSummaryCellSelectedDarkAltCol,
.recordSummaryCellDarkAltCol,
.recordSummaryCellOverDarkAltCol,
.recordSummaryCellOverAltCol,
.recordSummaryCellSelectedOverDarkAltCol,
.recordSummaryCellSelectedOverAltCol {
    font-size: $listGrid_cell_font_size;
    font-family: $listGrid_cell_font;
    color: $listGrid_cell_font_color;
    padding-left: 3px;
    text-overflow: ellipsis;
    border: none;
    @if $listGrid_show_row_separators == true {
        border-bottom: $standard_border_width solid $listGrid_border_color;
    } @else {
        border-bottom: $standard_transparent_border;
    }
}

.cellDisabledAltCol,
.cellDisabledDarkAltCol {
    background-color: $listGrid_cell_disabled_bgColor;
    cursor: not-allowed;
    color: $listGrid_cell_disabled_color;
}

.recordSummaryCellAltCol,
.cellAltCol {
    background-color: $listGrid_cell_altCol_bgColor;
}

.recordSummaryCellDarkAltCol,
.cellDarkAltCol {
    background-color: $listGrid_cell_altCol_dark_bgColor;
}

.recordSummaryCellOverDarkAltCol,
.recordSummaryCellOverAltCol,
.cellOverAltCol {
    font-size: $listGrid_cell_font_size;
    font-family: $listGrid_cell_font;
}

.recordSummaryCellOverDarkAltCol,
.recordSummaryCellOverAltCol,
.cellOverAltCol,
.cellOverDarkAltCol {
    background-color: $listGrid_cell_over_bgColor; 
    color: $listGrid_cell_over_color;
}

.cellSelectedAltCol,
.cellSelectedDarkAltCol,
.cellSelectedOverAltCol,
.cellSelectedOverDarkAltCol,
.cellPendingSelectedAltCol,
.cellPendingSelectedDarkAltCol,
.cellPendingSelectedOverAltCol,
.cellPendingSelectedOverDarkAltCol,
.recordSummaryCellSelectedAltCol,
.recordSummaryCellSelectedDarkAltCol,
.recordSummaryCellSelectedOverDarkAltCol,
.recordSummaryCellSelectedOverAltCol {
    background: $listGrid_cell_selected_bgColor;
    color: $listGrid_cell_selected_text_color;
}
.cellSelectedOverAltCol,
.cellSelectedOverDarkAltCol,
.cellPendingSelectedOverAltCol,
.cellPendingSelectedOverDarkAltCol {
    background: $listGrid_cell_selected_over_bgColor;
}

@if $listGrid_show_rollOver_glow == true {
/* ListGrid rollOverCanvas outer glow */
.gridSelectionOver {
    border: none;
    @include box-shadow(0 0 5px 0 $listGrid_cell_selected_over_glow_color);
}

/* TreeGrid rollOverCanvas outer glow */
.treeSelectionOver {
    border: none;
    @include box-shadow(0 0 5px 0 $treeGrid_cell_selected_over_glow_color);
}

/* CubeGrid rollOverCanvas outer glow */
.cubeSelectionOver {
    border: none;
    @include box-shadow(0 0 5px 0 $cubeGrid_cell_selected_over_glow_color);
}
}

/* ListGrid summary Dark*/
.gridSummaryCellAltCol,
.gridSummaryCellAltColDisabled,
.gridSummaryCellDark,
.gridSummaryCellDisabledDark {
    font: {
        size: $listGrid_summaryCell_font_size;
        family: $listGrid_cell_font;
    }
    text-overflow: ellipsis;
    background-color: $listGrid_summaryCell_disabled_bgColor;
    border: {
        bottom: $standard_border_width solid $listGrid_summaryCell_border_color;
        top: $standard_border_width solid $listGrid_summaryCell_border_color; 
    }
    font-weight: bold;
    color: $listGrid_summaryCell_dark_color;
    //color: $listGrid_summaryCell_color;
}
.gridSummaryCellAltColDisabled,
.gridSummaryCellDisabledDark {
    background-color: $listGrid_cell_disabled_bgColor;
    border: {
        bottom: $standard_border_width solid $listGrid_cell_disabled_bgColor;
        top: $standard_border_width solid $listGrid_cell_disabled_bgColor;
    }    
    cursor: not-allowed;
    color: $listGrid_cell_disabled_color;
}

.gridSummaryCellAltCol {
    font-weight: bold;
    color: $listGrid_summaryCell_color;
}

/* for grouping */
.groupNode,
.groupNodeOver {
    background-color: $listGrid_cell_bgColor;
    border: none;
    border-bottom: $standard_border_width solid $listGrid_groupNode_border_color;
    @if $listGrid_show_cell_separators == true {
        border-left: $standard_border_width solid transparent;
        border-right: $standard_border_width solid $listGrid_border_color;
    }
    color: $listGrid_groupNode_text_color;
    font: {
        family: $listGrid_cell_font;
        weight: bold;
        size: $listGrid_groupNode_font_size;
    }
    padding-left: 3px;
    padding-top: 1px;
    padding-bottom: 1px;
    text-overflow: ellipsis;
}

/*Tree styling*/
/*------------------------------------------------------------
		treeGrid.baseStyle
------------------------------------------------------------*/
.treeCell,
.treeCellDark,
.treeCellOver,
.treeCellOverDark,
.treeCellSelected,
.treeCellSelectedDark,
.treeCellSelectedOver,
.treeCellSelectedOverDark,
.treeCellDisabled,
.treeCellDisabledDark,
.treeTallCell,
.treeTallCellDark,
.treeTallCellOver,
.treeTallCellOverDark,
.treeTallCellSelected,
.treeTallCellSelectedDark,
.treeTallCellSelectedOver,
.treeTallCellSelectedOverDark,
.treeTallCellDisabled,
.treeTallCellDisabledDark {
    color: $treeGrid_cell_color;
	font: {
        family: $primary_font;
        size: $standard_font_size;
    }
    text-overflow: ellipsis;
}

.treeCellDark,
.treeTallCellDark {
	background-color: $standard_bgColor;
}


.treeCellOver,
.treeCellOverDark {
    background: $treeGrid_cell_over_bgColor;
    color: $treeGrid_cell_over_color;
}


.treeTallCellOver,
.treeTallCellOverDark {
    color: $treeGrid_cell_over_color;
    background: $treeGrid_cell_over_bgColor;   
}

.treeCellSelected,
.treeCellSelectedDark {
    color: $treeGrid_cell_selected_color;
    background-color: $treeGrid_cell_selected_bgColor;
}

.treeTallCellSelected,
.treeTallCellSelectedDark {
    color: $treeGrid_cell_selected_color;
    background-color: $treeGrid_cell_selected_bgColor;
}

.treeCellSelectedOver,
.treeCellSelectedOverDark {
    color: $treeGrid_cell_selected_color;
    background-color: $treeGrid_cell_selected_over_bgColor;
    @include box-shadow(0 0 5px $treeGrid_cell_selected_over_bgColor);
}

.treeTallCellSelectedOver,
.treeTallCellSelectedOverDark {
    color: $treeGrid_cell_selected_color;
    background-color: $treeGrid_cell_selected_over_bgColor;
    @include box-shadow(0 0 5px $treeGrid_cell_selected_over_bgColor);
}

.treeCellDisabled,
.treeCellDisabledDark,
.treeTallCellDisabled,
.treeTallCellDisabledDark {
	background-color: $formItem_bgColor;
	color: $default_disabled_text_color;
}

/* alternate column styling in TreeGrid */
.treeCellAltCol,
.treeCellDarkAltCol,
.treeCellOverAltCol,
.treeCellOverDarkAltCol,
.treeCellSelectedAltCol,
.treeCellSelectedOverAltCol,
.treeCellSelectedDarkAltCol,
.treeCellSelectedOverDarkAltCol,
.treeCellPendingSelectedAltCol,
.treeCellPendingSelectedDarkAltCol,
.treeCellPendingSelectedOverAltCol,
.treeCellPendingSelectedOverDarkAltCol,
.treeCellDeselectedAltCol,
.treeCellDeselectedDarkAltCol,
.treeCellDeselectedOverAltCol,
.treeCellDeselectedOverDarkAltCol,
.treeCellDisabledAltCol,
.treeCellDisabledDarkAltCol {
    font-size: $listGrid_cell_font_size;
    font-family: $listGrid_cell_font;
    color: $treeGrid_cell_color;
    padding-left: 3px;
    text-overflow: ellipsis;
    border: none;
    @if $listGrid_show_row_separators == true {
        border-bottom: $standard_border_width solid $listGrid_border_color;
    }
}

.treeCellDisabledAltCol,
.treeCellDisabledDarkAltCol {
    background-color: $listGrid_cell_disabled_bgColor;
    cursor: not-allowed;
    color: $listGrid_cell_disabled_color;
}

.treeCellAltCol {
    background-color: $listGrid_cell_altCol_bgColor;
}

.treeCellDarkAltCol {
    background-color: $listGrid_cell_altCol_dark_bgColor;
}

.treeCellOverAltCol,
.treeCellOverDarkAltCol {
    background-color: $treeGrid_cell_over_bgColor; 
    color: $treeGrid_cell_over_color;
}

.treeCellSelectedAltCol,
.treeCellSelectedDarkAltCol,
.treeCellSelectedOverAltCol,
.treeCellSelectedOverDarkAltCol,
.treeCellPendingSelectedAltCol,
.treeCellPendingSelectedDarkAltCol,
.treeCellPendingSelectedOverAltCol,
.treeCellPendingSelectedOverDarkAltCol {
    background-color: $treeGrid_cell_selected_bgColor;
    color: $treeGrid_cell_selected_color;
}
.treeCellSelectedOverAltCol,
.treeCellSelectedOverDarkAltCol,
.treeCellPendingSelectedOverAltCol,
.treeCellPendingSelectedOverDarkAltCol {
    background-color: $listGrid_cell_selected_over_bgColor;
}


/* Field builders (Formula/Summary) */
.sampleOutput {
    border: 2px solid $sample_output_border;
    padding: 3px; 
}

/* Multi-sort - sort-index appearing next to sort-arrows in field headers */
.sortNumeral {
    font-size: $listGrid_sortNumeral_font_size;
    vertical-align: top;
}

/*============================================================
	12) ToolStrip
============================================================*/


/* ToolStrip */
.toolStrip {
    background-color: $toolStrip_bgColor;
    border: $standard_border_width solid $toolStrip_border_color;
    padding: 4px;
    padding-left: 6px;
}

.vToolStrip {
    background-color: $toolStrip_bgColor;
    border: $standard_border_width solid $toolStrip_border_color;
    padding: 4px;
}

.ribbonBar {
    background-color: $ribbonBar_bgColor;
    border: $standard_border_width solid $ribbonBar_border_color;
    @include box-shadow($ribbonBar_shadow);
    padding: 10px;
}

.toolStripVertical {
    background-color: $toolStrip_bgColor;
    background-image: url(images/ToolStrip/background_vertical.png);
    border: $standard_border_width solid $toolStrip_border_color;
}

/* tool strip button */
.toolStripButton,
.toolStripButtonOver,
.toolStripButtonFocused,
.toolStripButtonFocusedOver,
.toolStripButtonDown,
.toolStripButtonFocusedDown,
.toolStripButtonSelected,
.toolStripButtonSelectedFocused,
.toolStripButtonSelectedDown,
.toolStripButtonSelectedFocusedDown,
.toolStripButtonSelectedOver,
.toolStripButtonSelectedFocusedOver,
.toolStripButtonDisabled,
.toolStripButtonSelectedDisabled,
.toolStripButtonOpened,
.toolStripButtonOverOpened,
.toolStripButtonDownOpened,
.toolStripButtonFocusedOpened,
.toolStripButtonFocusedDownOpened,
.toolStripButtonFocusedOverOpened,
.toolStripButtonSelectedOpened,
.toolStripButtonSelectedDownOpened,
.toolStripButtonSelectedOverOpened {
    border: $standard_border_width solid transparent;
    @include border-radius(0px);
    color: $standard_color;
    font-size: $button_font_size;
    font-family: $toolStripButton_font;
    padding: 3px 4px 3px 4px;
}

.toolStripButtonDown {
    outline: none;
}

.toolStripButtonDisabled {
    background-color: $toolStripButton_disabled_bgColor;
    border: $standard_border_width solid transparent;
}

.toolStripButtonDisabled,
.toolStripButtonSelectedDisabled {
    color: $button_disabled_color;
    font-weight: normal;
}

.toolStripButtonOpened,
.toolStripButtonOverOpened,
.toolStripButtonDownOpened,
.toolStripButtonFocusedOpened,
.toolStripButtonFocusedDownOpened,
.toolStripButtonFocusedOverOpened,
.toolStripButtonSelectedOpened,
.toolStripButtonSelectedDownOpened,
.toolStripButtonSelectedOverOpened,
.toolStripButtonFocused,
.toolStripButtonFocusedOver,
.toolStripButtonSelectedFocused,
.toolStripButtonSelectedFocusedOver,
.toolStripButtonSelectedFocusedDown {
    border: $standard_border_width solid $toolStripButton_border_color;
}

.toolStripButtonOver,
.toolStripButtonFocusedOver,
.toolStripButtonSelectedFocused,
.toolStripButtonSelectedFocusedOver,
.toolStripButtonOpened,
.toolStripButtonOverOpened,
.toolStripButtonDownOpened,
.toolStripButtonFocusedOpened,
.toolStripButtonFocusedDownOpened,
.toolStripButtonFocusedOverOpened,
.toolStripButtonSelectedOpened,
.toolStripButtonSelectedDownOpened,
.toolStripButtonSelectedOverOpened {
    background-color: $toolStripButton_over_bgColor;
    border: $standard_border_width solid $toolStripButton_over_border_color;
}

.toolStripButtonDown,
.toolStripButtonFocusedDown,
.toolStripButtonSelectedDown,
.toolStripButtonSelectedFocusedDown,
.toolStripButtonOpened,
.toolStripButtonOverOpened,
.toolStripButtonDownOpened,
.toolStripButtonFocusedOpened,
.toolStripButtonFocusedDownOpened,
.toolStripButtonFocusedOverOpened,
.toolStripButtonSelectedOpened,
.toolStripButtonSelectedDownOpened,
.toolStripButtonSelectedOverOpened {
    background-color: $toolStripButton_selected_bgColor;
    color: $toolStripButton_color;
}

.toolStripButtonSelected,
.toolStripButtonSelectedFocused,
.toolStripButtonSelectedOver,
.toolStripButtonSelectedFocusedOver,
.toolStripButtonSelectedDisabled {
    background-color: $toolStripButton_selected_bgColor;
    color: $toolStripButton_color;
    border: $standard_border_width solid $toolStripButton_selected_border_color;
}


/*============================================================
   12a) ToolStripGroup and IconButton
==============================================================*/
.toolStripGroup,
.toolStripGroupOver,
.toolStripGroupSelected,
.toolStripGroupSelectedDisabled,
.toolStripGroupSelectedOver,
.toolStripGroupDown,
.toolStripGroupSelectedDown,
.toolStripGroupDisabled {
    background: $standard_white;
    border: $standard_border_width solid $toolStrip_border_color;
    padding: 0px;
}

.ribbonGroup,
.ribbonGroupOver,
.ribbonGroupSelected,
.ribbonGroupSelectedDisabled,
.ribbonGroupSelectedOver,
.ribbonGroupDown,
.ribbonGroupSelectedDown,
.ribbonGroupDisabled {
    background: $ribbonBar_bgColor;
    border: $standard_border_width solid $ribbonBar_border_color;
    padding: 0px;
    @include box-shadow($ribbonGroup_shadow);
}

.toolStripGroupTitle,
.toolStripGroupTitleOver,
.toolStripGroupTitleSelected,
.toolStripGroupTitleSelectedDisabled,
.toolStripGroupTitleSelectedOver,
.toolStripGroupTitleDown,
.toolStripGroupTitleSelectedDown,
.toolStripGroupTitleDisabled {
    background-color: $toolStripGroup_bgColor;
    border: none;
    border-bottom: $standard_border_width solid $toolStripGroup_border_color;
    color: $toolStripGroup_color;
    font-family: $toolStripGroup_font;
    font-size: $toolStripGroup_font_size;
    font-weight: 500;
    padding: 8px 10px 8px 10px;
}

/* Ribbon */
.iconButton,
.iconButtonOver,
.iconButtonDown,
.iconButtonFocused,
.iconButtonFocusedOver,
.iconButtonFocusedDown,
.iconButtonSelected,
.iconButtonSelectedFocused,
.iconButtonSelectedDown,
.iconButtonSelectedFocusedDown,
.iconButtonSelectedOver,
.iconButtonSelectedFocusedOver,
.iconButtonDisabled,
.iconButtonSelectedDisabled {
    background-color: $iconButton_bgColor;
    border: $standard_border_width solid $iconButton_border_color;
    @include border-radius($iconButton_border_radius);
    padding: 3px;
    font-family: $iconButton_font;
    font-size: $iconButton_font_size;
    color: $iconButton_color;
}

.iconButtonOver,
.iconButtonDown {
    background-color: $iconButton_over_bgColor;
    border: $standard_border_width solid $iconButton_border_over_color;
}

.iconButtonSelected,
.iconButtonSelectedOver,
.iconButtonFocused,
.iconButtonFocusedOver,
.iconButtonSelectedFocusedOver {
    background-color: $iconButton_over_bgColor;
    border: $standard_border_width solid $iconButton_border_selected_color;
}

.iconButtonSelected,
.iconButtonSelectedFocused,
.iconButtonSelectedDown,
.iconButtonSelectedFocusedDown,
.iconButtonSelectedFocusedOver {
    background-color: $iconButton_over_bgColor;
}

.iconButtonSelectedOver {
    border: $standard_border_width solid $iconButton_border_selected_color;
}

.iconButtonDisabled {
    color: $button_disabled_color;
}

/* IconButton icon and menuIcon styles - used for spacing top and bottom of the title in v-buttons */
.iconButtonHIcon {
    vertical-align: middle;
}
.iconButtonHMenuIcon {
    vertical-align: middle; 
    border: $standard_border_width solid transparent; 
    @include border-radius($iconButton_menu_icon_border_radius);
}

.iconButtonVIcon {
    vertical-align: middle;
    margin-bottom: 6px;
}
.iconButtonVMenuIcon {
    vertical-align: middle; 
    border: $standard_border_width solid transparent; 
    @include border-radius($iconButton_menu_icon_border_radius);
    margin-top: 6px;
}

/*============================================================
	13) Tools
============================================================*/
.resizeThumb {
    border: $standard_border_width solid $resize_thumb_border_color;
    background-color: $resize_thumb_bgColor;
    @include background-image(linear-gradient($resize_thumb_gradient_color, $resize_thumb_bgColor, $resize_thumb_gradient_color));
}

.cornerResizeThumb {
    @include border-radius(5px);
}

/*============================================================
   14) TileGrid
==============================================================*/

.tileGrid {
    border: $standard_border_width solid $standard_border_color;
}

.tileValue,
.tileValueDown,
.tileValueSelected,
.tileValueOver,
.tileValueSelectedOver,
.tileValueSelectedDown {
    font-size: $tileGrid_simpleTile_font_size; 
    text-overflow: ellipsis;   
}

.tileValueOver {
    color: $standard_color;
}

.tileValueSelected {
    color: $standard_color;
}

.tileValueSelectedOver {
    color: $standard_color;
}

.simpleTile, 
.simpleTileOver,
.simpleTileSelected,
.simpleTileSelectedOver {
    font-size: $tileGrid_simpleTile_font_size;
    padding: 3px    
}

.simpleTile {
    border: $standard_border_width solid transparent;
    
}
.simpleTileOver {
    background: {
        color: $tileGrid_simpleTile_over_bgColor;
    }
    border: $standard_border_width solid $tileGrid_simpleTile_over_border_color;
}

.simpleTileSelected,
.simpleTileSelectedOver {
    background: {
        color: $tileGrid_simpleTile_selected_bgColor;
    }
    border: $standard_border_width solid $tileGrid_simpleTile_selected_border_color;
}

/*============================================================
	15) Scrollbars
============================================================*/
/* CSS3 Mode */

.vScrollStartDisabled,
.vScrollStart,
.vScrollStartOver,
.vScrollStartDown {
    background-image: url(./images/Scrollbar/vscroll_sprite.png);
    background-position: -16px 0px;
}
.vScrollStartDisabled { background-position: 0px 0px; }
.vScrollStartOver { background-position: $scrollbar_vertical_start_over_xpos 0px; }
.vScrollStartDown { background-position: $scrollbar_vertical_start_down_xpos 0px; }

.vScrollTrackStretchDisabled,
.vScrollTrackStretch,
.vScrollTrackStretchOver,
.vScrollTrackStretchDown {
    background-image: url(./images/Scrollbar/vscroll_sprite.png);
    background-repeat: repeat-y;
    background-position: -80px 0px;
}
.vScrollTrackStretchDisabled { background-position: -64px 0px; }
.vScrollTrackStretchOver { background-position: -96px 0px; }
.vScrollTrackStretchDown { background-position: -112px 0px; }

.vScrollEndDisabled,
.vScrollEnd,
.vScrollEndOver,
.vScrollEndDown {
    background-image: url(./images/Scrollbar/vscroll_sprite.png);
    background-position: -16px -18px;
}
.vScrollEndDisabled { background-position: 0px -18px; }
.vScrollEndOver { background-position: $scrollbar_vertical_end_over_xpos -18px; }
.vScrollEndDown { background-position: $scrollbar_vertical_end_down_xpos -18px; }

.vScrollCornerDisabled,
.vScrollCorner,
.vScrollCornerOver,
.vScrollCornerDown {
    background-image: url(./images/Scrollbar/vscroll_sprite.png);
    background-position: 0px -40px;
}

.vScrollThumbStartDisabled,
.vScrollThumbStart,
.vScrollThumbStartOver,
.vScrollThumbStartDown {
    background-image: url(./images/Scrollbar/vscroll_sprite.png);
    background-position: -16px -36px;
}
.vScrollThumbStartDisabled { background-position: 0px -36px; }
.vScrollThumbStartOver { background-position: -32px -36px; }
.vScrollThumbStartDown { background-position: -48px -36px; }

.vScrollThumbStretchDisabled,
.vScrollThumbStretch,
.vScrollThumbStretchOver,
.vScrollThumbStretchDown {
    background-image: url(./images/Scrollbar/vscroll_sprite.png);
    background-repeat: repeat-y;
    background-position: -144px 0px;
}
.vScrollThumbStretchDisabled { background-position: -128px 0px; }
.vScrollThumbStretchOver { background-position: -160px 0px; }
.vScrollThumbStretchDown { background-position: -176px 0px; }

.vScrollThumbEndDisabled,
.vScrollThumbEnd,
.vScrollThumbEndOver,
.vScrollThumbEndDown {
    background-image: url(./images/Scrollbar/vscroll_sprite.png);
    background-position: -16px -38px;
}
.vScrollThumbEndDisabled { background-position: 0px -38px; }
.vScrollThumbEndOver { background-position: -32px -38px; }
.vScrollThumbEndDown { background-position: -48px -38px; }

.vScrollThumbGripDisabled,
.vScrollThumbGrip,
.vScrollThumbGripOver,
.vScrollThumbGripDown {
    @if ($show_scroll_thumb_grip == true) {
        background-image: url(./images/Scrollbar/vscroll_sprite.png);
    }
}


.hScrollStartDisabled,
.hScrollStart,
.hScrollStartOver,
.hScrollStartDown {
    background-image: url(./images/Scrollbar/hscroll_sprite.png);
    background-position: 0px -16px;
}
.hScrollStartDisabled { background-position: 0px 0px; }
.hScrollStartOver { background-position: 0px $scrollbar_horizontal_start_over_ypos; }
.hScrollStartDown { background-position: 0px $scrollbar_horizontal_start_down_ypos; }

.hScrollTrackStretchDisabled,
.hScrollTrackStretch,
.hScrollTrackStretchOver,
.hScrollTrackStretchDown {
    background-image: url(./images/Scrollbar/hscroll_sprite.png);
    background-repeat: repeat-x;
    background-position: 0px -80px;
}
.hScrollTrackStretchDisabled { background-position: 0px -64px; }
.hScrollTrackStretchOver { background-position: 0px -96px; }
.hScrollTrackStretchDown { background-position: 0px -112px; }

.hScrollEndDisabled,
.hScrollEnd,
.hScrollEndOver,
.hScrollEndDown {
    background-image: url(./images/Scrollbar/hscroll_sprite.png);
    background-position: -18px -16px;
}
.hScrollEndDisabled { background-position: -18px 0px; }
.hScrollEndOver { background-position: -18px $scrollbar_horizontal_end_over_ypos; }
.hScrollEndDown { background-position: -18px $scrollbar_horizontal_end_down_ypos; }

.hScrollCornerDisabled,
.hScrollCorner,
.hScrollCornerOver,
.hScrollCornerDown {
    background-image: url(./images/Scrollbar/hscroll_sprite.png);
    background-position: -40px 0px;
}

.hScrollThumbStartDisabled,
.hScrollThumbStart,
.hScrollThumbStartOver,
.hScrollThumbStartDown {
    background-image: url(./images/Scrollbar/hscroll_sprite.png);
    background-position: -36px -16px;
}
.hScrollThumbStartDisabled { background-position: -36px 0px; }
.hScrollThumbStartOver { background-position: -36px -32px; }
.hScrollThumbStartDown { background-position: -36px -48px; }

.hScrollThumbStretchDisabled,
.hScrollThumbStretch,
.hScrollThumbStretchOver,
.hScrollThumbStretchDown {
    background-image: url(./images/Scrollbar/hscroll_sprite.png);
    background-repeat: repeat-x;
    background-position: 0px -144px;
}
.hScrollThumbStretchDisabled { background-position: 0px -128px; }
.hScrollThumbStretchOver { background-position: 0px -160px; }
.hScrollThumbStretchDown { background-position: 0px -176px; }

.hScrollThumbEndDisabled,
.hScrollThumbEnd,
.hScrollThumbEndOver,
.hScrollThumbEndDown {
    background-image: url(./images/Scrollbar/hscroll_sprite.png);
    background-position: -38px -16px;
}
.hScrollThumbEndDisabled { background-position: -38px 0px; }
.hScrollThumbEndOver { background-position: -38px -32px; }
.hScrollThumbEndDown { background-position: -38px -48px; }

.hScrollThumbGripDisabled,
.hScrollThumbGrip,
.hScrollThumbGripOver,
.hScrollThumbGripDown {
    @if ($show_scroll_thumb_grip == true) {
        background-image: url(./images/Scrollbar/hscroll_sprite.png);
    }
}

/* track and thumb */
.hScrollTrack {
    background: $scrollTrack_bgColor;
}
.hScrollTrackDown {
    background: $default_border_dark_color;
}
.hScrollTrackOver {
    background: $scrollTrack_over_bgColor;
}
.hScrollTrackDisabled {
    @include background($scrollTrack_disabled_background padding-box);
}

.vScrollTrack {
    background: $scrollTrack_bgColor;
}
.vScrollTrackDown {
    background: $scrollTrack_down_bgColor;
}
.vScrollTrackOver {
    background: $scrollTrack_over_bgColor; 
}
.vScrollTrackDisabled {
    @include background($scrollTrack_disabled_background padding-box);
}

.vScrollThumb,
.vScrollThumbOver { 
    background-image: url(./images/Scrollbar/vscroll_sprite.png);
}
.vScrollThumb { background-position: -136px 0px; }
.vScrollThumbOver { background-position: -120px 0px; }

.vScrollThumbGripDisabled { background-position: -16px -40px; }
.vScrollThumbGrip { background-position: -26px -40px; }
.vScrollThumbGripOver { background-position: -26px -40px; }
.vScrollThumbGripDown { background-position: -26px -40px; }

.hScrollThumb,
.hScrollThumbOver { 
    background-image: url(./images/Scrollbar/hscroll_sprite.png);
}
.hScrollThumb { background-position: 0px -131px; }
.hScrollThumbOver { background-position: 0px -118px; }

.hScrollThumbGripDisabled { background-position: -40px -16px; }
.hScrollThumbGrip { background-position: -40px -26px; }
.hScrollThumbGripOver { background-position: -40px -26px; }
.hScrollThumbGripDown { background-position: -40px -26px; }

/* CSS3 Mode */

/*IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII

	Styles below this comment are not used by default in this skin

IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII*/

/*============================================================
    TabSet CSS tabs
		tabSet.simpleTabBaseStyle
============================================================*/
/* styles for simple css-styled tabs*/

/*IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII

	Styles below this comment are used by optional modules only

IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII
IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII*/

/*============================================================
	CubeGrid - Analytics Module only
		cubeGrid.baseStyle - cubeCell
		headerGrid.baseStyle - rowHeader
		reportHeaderBar.button.baseStyle - rowHeader
		reportHeaderBar.button.baseStyle - innerHeader/colHeader
		reportHeaderBar.button.baseStyle - rowHeaderLabel
		reportHeaderBar.button.baseStyle - colHeaderLabel
============================================================*/
.cubeGridBody {}
.cubeCell {
    background-color: $cubeGrid_cell_bgColor;
    border-left: none; 
    border-top: none; 
    border-right: $standard_border_width solid $cubeGrid_cell_border_color;
    border-bottom: $standard_border_width solid $cubeGrid_cell_border_color;
    font: {
        family: $cubeGrid_font; 
        size: $cubeGrid_font_size; 
    }
    color: $cubeGrid_cell_font_color;
    text-overflow: ellipsis;
}

.cubeCellDark {
    background-color: $cubeGrid_cell_dark_bgColor;
    border-left: none; 
    border-top: none; 
    border-right: $standard_border_width solid $cubeGrid_cell_border_color;
    border-bottom: $standard_border_width solid $cubeGrid_cell_border_color;
    font: {
        family: $cubeGrid_font; 
        size: $cubeGrid_font_size; 
    }
    color: $cubeGrid_cell_font_color; 
    text-overflow: ellipsis;
}

.cubeCellDisabled {
    background-color: $cubeGrid_cell_bgColor; 
    border-left: none; 
    border-top: none; 
    border-right: $standard_border_width solid $cubeGrid_cell_border_color;
    border-bottom: $standard_border_width solid $cubeGrid_cell_border_color;
    font: {
        family: $cubeGrid_font; 
        size: $cubeGrid_font_size; 
    }
    color: $cubeGrid_cell_disabled_color; 
    text-overflow: ellipsis;
}

/* partial styles */ 
.cubeCellOver {
    color: $cubeGrid_cell_over_color;
    background: $cubeGrid_cell_over_bgColor;
}
.cubeCellSelected {
    color: $cubeGrid_cell_selected_color;
    background: $cubeGrid_cell_selected_bgColor;
}
.cubeCellSelectedOver {
    color: $cubeGrid_cell_selected_over_color;
    background: $cubeGrid_cell_selected_over_bgColor;
}

/* row headers */
    .rowHeader,
    .rowHeaderOver,
    .rowHeaderDisabled,
    .rowHeaderSelected,
    .rowHeaderSelectedDown,
    .rowHeaderSelectedOver,
    .rowHeaderSelectedDisabled {
        font-family: $cubeGrid_font;
        font-size: $cubeGrid_font_size;
        color: $cubeGrid_header_color;
    }
    .rowHeader {
        background-color: $cubeGrid_header_bgColor;
        border-left: none; 
        border-top: none; 
        border-right: $standard_border_width solid white;
        border-bottom: $standard_border_width solid white;
    }
    .rowHeaderOver {
        color: $cubeGrid_header_color;
        background-color: $cubeGrid_header_over_bgColor;
        border-right: $standard_border_width solid white;
        border-bottom: $standard_border_width solid white;
    }
    .rowHeaderDown {
    }
    .rowHeaderDisabled {
        color: $cubeGrid_header_disabled_color;
        background-color: $cubeGrid_header_disabled_bgColor;
    }
    .rowHeaderSelected,
    .rowHeaderSelectedDown,
    .rowHeaderSelectedOver {
        color: $cubeGrid_header_color;
        background-color: $cubeGrid_header_selected_bgColor;
        border-left: none;
        border-top: none;
        border-right: $standard_border_width solid white;
        border-bottom: $standard_border_width solid white;
    }
    .rowHeaderSelectedDown,
    .rowHeaderSelectedOver {
        background-color: $cubeGrid_header_selected_down_bgColor;
    }
    .rowHeaderSelectedDisabled {
        color: $cubeGrid_header_disabled_color;
        background-color: $cubeGrid_header_selected_disabled_bgColor;
    }    

/* row label */
    .rowHeaderLabel,
    .rowHeaderLabelOver,
    .rowHeaderLabelDisabled,
    .rowHeaderLabelSelected,
    .rowHeaderLabelSelectedDown,
    .rowHeaderLabelSelectedOver,
    .rowHeaderLabelSelectedDisabled {
        font-family: $cubeGrid_header_font;
        font-size: $cubeGrid_headerLabel_font_size;
        color: $cubeGrid_headerLabel_color;
    }
    .rowHeaderLabel {
        background-color: $cubeGrid_headerLabel_bgColor;
        border-left: none; 
        border-top: none; 
        border-right: $standard_border_width solid $cubeGrid_header_border_color;
        border-bottom: $standard_border_width solid $cubeGrid_header_border_color;
    }
    .rowHeaderLabelOver {
        background-color: $cubeGrid_header_over_bgColor;
    }
    .rowHeaderLabelDown,
    .rowHeaderLabelSelected {
        background-color: $cubeGrid_headerLabel_selected_bgColor;
        border-left: none; 
        border-top: none; 
        border-right: $standard_border_width solid $cubeGrid_header_border_color;
        border-bottom: $standard_border_width solid $cubeGrid_header_border_color;
    }
    .rowHeaderLabelSelectedDown,
    .rowHeaderLabelSelectedOver {
        background-color: $cubeGrid_header_selected_over_bgColor;
    }    
    .rowHeaderLabelDisabled,
    .rowHeaderLabelSelectedDisabled {
        color: $cubeGrid_header_disabled_color;
        background-color: $cubeGrid_header_disabled_bgColor;
    }
						
/* column headers */
    .colHeader,
    .colHeaderOver,
    .colHeaderDisabled,
    .colHeaderSelected,
    .colHeaderSelectedDown,
    .colHeaderSelectedOver,
    .colHeaderSelectedDisabled {
        font-family: $cubeGrid_header_font;
        font-size: $cubeGrid_headerLabel_font_size;
        color: $cubeGrid_header_color;
    }
    .colHeader {
        background-color: $cubeGrid_header_bgColor;
        border-left: none; 
        border-top: none; 
        border-right: $standard_border_width solid $cubeGrid_header_border_color;
        border-bottom: $standard_border_width solid $cubeGrid_header_border_color;
    }
    .colHeaderOver {
        color: $cubeGrid_header_color;
        background-color: $cubeGrid_header_over_bgColor;
        border-right: $standard_border_width solid $cubeGrid_header_border_color;
        border-bottom: $standard_border_width solid $cubeGrid_header_border_color;
    }
    .colHeaderDown {
    }
    .colHeaderSelected {
        color: $cubeGrid_header_color;
        background-color: $cubeGrid_header_selected_bgColor;
        border-left: none;
        border-top: none;
        border-right: $standard_border_width solid $cubeGrid_header_border_color;
        border-bottom: $standard_border_width solid $cubeGrid_header_border_color;
    }
    .colHeaderSelectedDown,
    .colHeaderSelectedOver {
        color: $cubeGrid_header_selected_over_color;
        background-color: $cubeGrid_header_selected_down_bgColor;
        border-left: none;
        border-top: none;
        border-right: $standard_border_width solid $cubeGrid_header_border_color;
        border-bottom: $standard_border_width solid $cubeGrid_header_border_color;
    }
    .colHeaderDisabled {
        color: $cubeGrid_header_disabled_color;
        background-color: $cubeGrid_header_disabled_bgColor;
    }
    .colHeaderSelectedDisabled {
        color: $cubeGrid_header_disabled_color;
        background-color: $cubeGrid_header_selected_disabled_bgColor;
    }    

/* column label */
    .colHeaderLabel,
    .colHeaderLabelDown,
    .colHeaderLabelOver,
    .colHeaderLabelDisabled,
    .colHeaderLabelSelected,
    .colHeaderLabelSelectedDown,
    .colHeaderLabelSelectedOver,
    .colHeaderLabelSelectedDisabled {
        font-family: $cubeGrid_header_font;
        font-size: $cubeGrid_headerLabel_font_size;
        font-weight: bold;
        color: $cubeGrid_headerLabel_color;
    }
    .colHeaderLabel {
        background-color: $cubeGrid_headerLabel_bgColor;
        border-left: none; 
        border-top: none; 
        border-right: $standard_border_width solid $cubeGrid_header_border_color;
        border-bottom: $standard_border_width solid $cubeGrid_header_border_color;
    }
    .colHeaderLabelOver {
        background-color: $cubeGrid_header_over_bgColor;
    }
    .colHeaderLabelDown,
    .colHeaderLabelSelected {
        background-color: $cubeGrid_headerLabel_selected_bgColor;
    }   
    .colHeaderLabelSelectedDown,
    .colHeaderLabelSelectedOver {
        background-color: $cubeGrid_header_selected_over_bgColor;
    }   
    .colHeaderLabelDisabled,
    .colHeaderLabelSelectedDisabled {
        color: $cubeGrid_header_disabled_color;
        background-color: $cubeGrid_header_disabled_bgColor;
    }

/* inner header */
    .innerHeader,
    .innerHeaderOver ,
    .innerHeaderDown,
    .innerHeaderDisabled,
    .innerHeaderSelected,
    .innerHeaderSelectedDown,
    .innerHeaderSelectedOver,
    .innerHeaderSelectedDisabled {
        font-family: $cubeGrid_font;
        font-size: $cubeGrid_innerHeader_font_size;
        color: $cubeGrid_innerHeader_color;
        background-color: $cubeGrid_innerHeader_bgColor; 
        border-left: none; 
        border-top: $cubeGrid_innerHeader_top_border;
        border-right: $standard_border_width solid $cubeGrid_innerHeader_border_color;
        border-bottom: $standard_border_width solid $cubeGrid_innerHeader_border_color;
    }
    .innerHeaderOver {
        background-color: $cubeGrid_header_over_bgColor;
    }
    .innerHeaderDisabled {
        color: $cubeGrid_header_disabled_color;
        background-color: $cubeGrid_header_disabled_bgColor;
    }
    .innerHeaderSelected {
        color: $cubeGrid_header_color;
        background-color: $cubeGrid_header_selected_bgColor;
    }
    .innerHeaderDown,
    .innerHeaderSelectedDown,
    .innerHeaderSelectedOver {
        color: $cubeGrid_header_color;
        background-color: $cubeGrid_header_selected_down_bgColor;
    }
    .innerHeaderSelectedDisabled {
        color: $cubeGrid_header_disabled_color;
        background-color: $cubeGrid_header_disabled_bgColor;
    }


/*============================================================
	BarChart
	internal, charting/visualization module only
		styleName - chart
		barStyle - chartBar
		others are currently fixed
============================================================*/
.scChart { 
    border-left: $standard_border_width solid $scChart_border_color;
    border-right: $standard_border_width solid $scChart_border_color;
    border-bottom: $standard_border_width solid $scChart_border_color;
    border-top: $standard_border_width solid $scChart_border_color;
}

.chart { 
    background-color: $default_border_dark_color;
}

.chartTitle {
    color: $standard_color;
    font: {
        family: $primary_font;
        size: $standard_header_font_size;
        weight: bold;
    }
    text-align: center
}

.chartAxisTitle {
    color: $chart_axis_title_color; 
    font: {
        family: $primary_font;
        size: $chart_font_size;
        weight: bold;
    }
}

.chartValueTitle {
    color: $standard_color;
    font: {
        family: $primary_font;
        size: $chart_value_font_size;
    }
}

.chartTotal {
    background-color: linen;
    color: $standard_color;
    font: {
        family: $primary_font;
        size: $chart_font_size;
    }
}

.chartBody {
    background-color: $standard_border_color;
    border: {
        left: $standard_border_width solid $standard_color;
        right: $standard_border_width solid $standard_color;
        top: $standard_border_width dashed $standard_blue;
    }
}   

.chartBar1 {
    background-color: $chartBar1_bgColor;
    @include background-image(linear-gradient(left, ($chartBar1_gradient_color 0%, $chartBar1_bgColor 100%)));
}

.chartBar2 {
    background-color: $chartBar2_bgColor;
    @include background-image(linear-gradient(left, ($chartBar1_gradient_color 0%, $chartBar2_bgColor 100%)));
}

.chartBar3 {
    background-color: $chartBar3_bgColor;
    @include background-image(linear-gradient(left, ($chartBar1_gradient_color 0%, $chartBar3_bgColor 100%)));
}


/*============================================================
	Printing
        printHeader - general print style for header elements including:
        - ListGrid header cells
        - SectionStack headers
============================================================*/
.printHeader {
    border: $standard_border_width solid $standard_color;
    font: {
        family: $primary_font; 
        size: $standard_font_size;    
        weight: bold;
    }
}

/*============================================================
	Calendar
============================================================*/
/* Calendar headerBar */
.calendarHeaderBar {
    background-color: $listGrid_headerButton_bgColor;
    border-right: $standard_border_width solid $listGrid_headerSpan_border_color;
}
.calendar,
.calendarOver,
.calendarDisabled,
.calendarDisabledDark,
.calendarDisabledOver,
.calendarDisabledOverDark,
.calendarWorkday,
.calendarWorkdayOver,
.calendarWorkdaySelected,
.calendarWorkdayDisabled,
.calendarWorkdayDisabledOver,
.calendarDark,
.calendarOverDark,
.calendarCellSelected {
    background-color: $calendar_bgColor;
    border: $standard_border_width solid transparent;
    border: {
        bottom: $standard_border_width solid $calendar_border_color; 
        right: $standard_border_width solid $calendar_border_color;
    }
    color: $calendar_text_color;
    font: {
        family: $primary_font; 
        size: $calendar_font_size;
    }
}

.calendarWorkdayDisabled,
.calendarDisabled,
.calendarDisabledDark,
.calendarDisabledOver,
.calendarDisabledOverDark {
    background-color: $calendar_disabled_bgColor;    
}
.calendarDark {
    background-color: $calendar_dark_bgColor;    
}
.calendarWorkday {
    background-color: $secondary_header_bgColor;
}

.calendarOver,
.calendarOverDark {
    background-color: hsl($secondary_hue, 93%, 88%);
    border: {
        bottom: $standard_border_width solid $calendar_border_color; 
        right: $standard_border_width solid $calendar_border_color;
    }
    color: $calendar_text_color;
    font: {
        family: $primary_font;
        size: $calendar_font_size;
    }
}

.calendarWorkdaySelected,
.calendarCellSelected {
    background-color: $default_border_dark_color; 
    border: {
        bottom: $standard_border_width solid $calendar_border_color; 
        right: $standard_border_width solid $calendar_border_color;
    }
    color: $calendar_text_color;
    font: {
        family: $primary_font;
        size: $calendar_font_size;
    }
}

.labelColumn,
.labelColumnDark,
.labelColumnOver,
.labelColumnOverDark {
    background-color: $calendar_label_column_bgColor;
    border: $standard_border_width solid transparent;
    border: {
        bottom: $standard_border_width solid $calendar_border_color; 
        right: $standard_border_width solid $calendar_border_color;
    }
    color: $calendar_text_color;
    font: {
        family: $primary_font;
        size: $calendar_font_size;
    }
}

.labelColumnOver,
.labelColumnOverDark, 
.calendarDisabledOver,
.calendarDisabledOverDark {
  background-color: $calendar_disabled_over_bgColor;
    border: {
        bottom: $standard_border_width solid $calendar_border_color; 
        right: $standard_border_width solid $calendar_border_color;
    }
}

/* ----month---- */
/* calMonthDayHeader and Body */
.calMonthDayHeader,
.calMonthDayHeaderDark {
    background-color: $calendar_dark_bgColor;
    border: {
        bottom: $standard_border_width solid $calendar_border_color; 
        right: $standard_border_width solid $calendar_border_color;
    }
    color: $calendar_text_color;
    font: {
        family: $primary_font;
        size: $calendar_font_size;
    }
}

.calMonthDayHeaderOver,
.calMonthDayHeaderOverDark,
.calMonthDayHeaderSelected,
.calMonthDayHeaderSelectedDark,
.calMonthDayHeaderSelectedOver,
.calMonthDayHeaderSelectedOverDark {
    background-color: hsl($primary_hue - 6, 54%, 84%);
    border: {
        bottom: $standard_border_width solid $calendar_border_color; 
        right: $standard_border_width solid $calendar_border_color;
    }
    color: $calendar_day_header_font_color;
    font: {
        family: $primary_font;
        size: $calendar_font_size;
    }
}
.calMonthDayHeaderDisabled,
.calMonthDayHeaderDisabledOver {
    background-color: $standard_bgColor;
    border: {
        bottom: $standard_border_width solid $calendar_border_color; 
        right: $standard_border_width solid $calendar_border_color;
    }
    color: $calendar_text_color;
    font: {
        family: $primary_font;
        size: $calendar_font_size;
    }
}

.calMonthDayBody,
.calMonthDayBodyDark {
    background-color: $calendar_bgColor;
    border: {
        bottom: $standard_border_width solid $calendar_border_color; 
        right: $standard_border_width solid $calendar_border_color;
    }
    color: $calendar_text_color;
    font: {
        family: $primary_font;
        size: $calendar_font_size;
    }
}

.calMonthDayBodyOver,
.calMonthDayBodyOverDark,
.calMonthDayBodySelected,
.calMonthDayBodySelectedDark,
.calMonthDayBodySelectedOver,
.calMonthDayBodySelectedOverDark {
    background-color: hsl($primary_hue - 6, 54%, 84%);
    border: {
        bottom: $standard_border_width solid $calendar_border_color;
        right: $standard_border_width solid $calendar_border_color;
    }
    color: $calendar_text_color;
    font: {
        family: $primary_font;
        size: $calendar_font_size;
    }
}

.calMonthDayBodyDisabled,
.calMonthDayBodyDisabledOver {
    background-color: $calendar_dark_bgColor;
    border: {
        bottom: $standard_border_width solid $calendar_border_color; 
        right: $standard_border_width solid $calendar_border_color;
    }
    color: $calendar_text_color;
    font: {
        family: $primary_font;
        size: $calendar_font_size;
    }
}

/* calMonthOtherDayHeader and Body */
.calMonthOtherDayHeader,
.calMonthOtherDayHeaderDark {
    background-color: $calendar_border_color;
    border: {
        bottom: $standard_border_width solid $calendar_border_color; 
        right: $standard_border_width solid $calendar_border_color;
    }
    color: $calendar_day_header_font_color;
    font: {
        family: $primary_font; 
        size: $calendar_font_size;
    }
}

.calMonthOtherDayHeaderSelected,
.calMonthOtherDayHeaderSelectedOver,
.calMonthOtherDayHeaderOver,
.calMonthOtherDayHeaderOverDark {
    background-color: $calendar_month_otherDay_header_selected_bgColor;
    border: {
        bottom: $standard_border_width solid $calendar_border_color; 
        right: $standard_border_width solid $calendar_border_color;
    }
    color: $calendar_day_header_font_color;
    font: {
        family: $primary_font; 
        size: $calendar_font_size;
    }
}

.calMonthOtherDayBody,
.calMonthOtherDayBodyDark, 
.calMonthOtherDayBodyDisabled, 
.calMonthOtherDayBodyDisabledOver{
    background-color: $standard_bgColor;
    border: {
        bottom: $standard_border_width solid $calendar_border_color; 
        right: $standard_border_width solid $calendar_border_color;
    }
    color: $calendar_text_color;
    font: {
        family: $primary_font; 
        size: $calendar_font_size;
    }
}

.calMonthOtherDayBodyOver,
.calMonthOtherDayBodyOverDark {
    background-color: hsl($primary_hue - 6, 54%, 84%);
    border: {
        bottom: $standard_border_width solid $calendar_border_color; 
        right: $standard_border_width solid $calendar_border_color;
    }
    color: $calendar_text_color;
    font: {
        family: $primary_font; 
        size: $calendar_font_size;
    }
}

/* calMonthOtherDayBlank */
.calMonthOtherDayBlank,
.calMonthOtherDayBlankDark, 
.calMonthOtherDayBlankOver,
.calMonthOtherDayBlankOverDark,
.calMonthOtherDayBlankSelected,
.calMonthOtherDayBlankSelectedDark,
.calMonthOtherDayBlankSelectedOver,
.calMonthOtherDayBlankSelectedOverDark {
    background-color: $standard_bgColor;
    border: {
        bottom: $standard_border_width solid $calendar_border_color; 
        right: $standard_border_width solid $calendar_border_color;
    }
    color: $calendar_other_day_color;
    font: {
        family: $primary_font; 
        size: $calendar_font_size;
    }
}

/* calMonthEventLink */
a.calMonthEventLink:link {
    color: $link_color; 
    text-decoration: none;
}

a.calMonthEventLink:visited {
    color: $link_color;
    text-decoration: none;
}

a.calMonthEventLink:hover {
    color: $link_color;
    text-decoration: underline;
}

a.calMonthEventLink:active {
    color: $link_color;
    text-decoration: none;
}

/* ----event window---- */
.eventWindow,
.eventWindowSelected {
    background-color: $calendar_eventWindow_bgColor;
    border: $standard_border_width solid $calendar_eventWindow_border_color;
    font: {
        family: $primary_font; 
        size: $calendar_eventWindow_font_size;
    }
    padding: 1px;
    outline: none;
}

.eventWindowSelected {
    border: $standard_border_width solid $standard_header_bgColor;
}

.eventWindowHeader,
.eventWindowHeaderSelected {
    position: absolute;
    left: 0px; 
    right: 0px;
    top: 0px;
    height: auto;
    background-color: $calendar_eventWindow_header_bgColor; 
    color: $calendar_eventWindow_header_color; 
    border: $standard_border_width solid $calendar_eventWindow_header_border_color; 
    font: {
        family: $primary_font; 
        size: $calendar_eventWindow_font_size;
    }
    padding: 2px 2px 0px 2px;
}

.eventWindowBody,
.eventWindowBodySelected {
    position: absolute;
    left: 0px; 
    right: 0px;
    bottom: 0px;
    vertical-align: top;
    background-color: $calendar_eventWindow_bgColor;
    color: $calendar_eventWindow_color;
    font: {
        family: $primary_font; 
        size: $calendar_eventWindow_font_size;
    }
    padding: 2px 2px 2px 2px;
}

.eventWindowGripper,
.eventWindowLabel {
    background-color: $calendar_eventWindow_header_bgColor; 
    color: $calendar_eventWindow_header_color; 
    border: $standard_border_width solid $calendar_eventWindow_header_border_color; 
    font: {
        family: $primary_font; 
        size: $calendar_eventWindow_font_size;
    }
    padding: 2px 2px 0px 2px;
}

.eventWindowResizer {
    border: {
        bottom: $standard_border_width solid $calendar_bgColor;
        top: $standard_border_width solid $calendar_bgColor;
    }
}


/* --- ZoneCanvas --- */

.zoneCanvas {
    background-color: $calendar_zoneCanvas_bgColor;
    opacity: $calendar_zoneCanvas_opacity;
}

.zoneCanvasHeader,
.zoneCanvasGripper,
.zoneCanvasLabel {
    display: inline-block;
    color: $standard_white;
    background-color: $standard_gray;
    left: 0px; 
    bottom: 0px;
}


/* --- IndicatorCanvas --- */

.indicatorCanvas {
    background-color: $calendar_indicatorCanvas_bgColor;
}

.indicatorCanvasHeader,
.indicatorCanvasGripper,
.indicatorCanvasLabel {
    display: inline-block;
    color: $calendar_indicatorCanvas_color;
    background-color: $calendar_indicatorCanvas_bgColor;
    font: {
        family: $primary_font; 
        size: $calendar_font_size;
    }
}

/* make all grippers rounded */
.eventWindowGripper,
.indicatorCanvasGripper,
.zoneCanvasGripper {
    @include border-radius(5px);
    padding: 0px;
    margin: 0px;
}

/* show a border around floating labels */
.eventWindowLabel,
.zoneCanvasLabel,
.indicatorCanvasLabel {
    border: $standard_border_width solid black;
}

.eventDragCanvas {
  border: 1px dashed red;
}

/*============================================================
	PropertySheet
	internal, used by Visual SmartClient tools
        propertySheet.autoChildDefaults.cellStyle - propSheetValue
        propertySheet.autoChildDefaults.titleStyle - propSheetTitle
        propertySheet.TextItemDefaults.textBoxStyle - propSheetField
        propertySheet.SelectItemDefaults.controlStyle - propSheetSelectControl
        propertySheet.ColorItemDefaults.textBoxStyle - propSheetField
        propertySheet.HeaderItemDefaults.textBoxStyle - propSheetHeading
        propertySheet.SectionHeaderItemDefaults.cellStyle - propSheetSectionItemCell
============================================================*/

.propSheetValue,
.propSheetValueFocused,
.propSheetValueDisabled {
    border: {
        bottom: $standard_border_width solid $default_border_color;
        right: $standard_border_width solid $default_border_color;
    }
    font: {
        family: $primary_font;
        size: $standard_font_size;
    }
    margin: 0px;
    padding: 0px;
}

.propSheetTitle,
.propSheetTitleFocused,
.propSheetTitleDisabled {
    background-color: $standard_border_color;
    border: {
        bottom: $standard_border_width solid $default_border_color;
        right: $standard_border_width solid $default_border_color;
    }
    font: {
        family: $primary_font;
        size: $standard_font_size;
    }
    padding: {
        left: 4px;
        right: 4px;
    }
}

.propSheetTitleError,
.propSheetValueError {
    background-color: hsl($primary_hue + 9, 57%, 88%);
    color: hsl($primary_hue - 2, 53%, 27%); 
    font: {
        family: $primary_font; 
        size: $standard_font_size; 
    }
}

.propSheetField,
.propSheetFieldDisabled {
    background-color: $propsheet_bgColor;
    border: 0px;
    font: {
        family: $primary_font;
        size: $standard_font_size;
    }
    margin-top: 3px;
    padding: {
        bottom: 0px;
        top: 0px;
        left: 4px;
        right: 4px;
    }
}

.propSheetHeading,
.propSheetHeadingDisabled {
    background-color: $listGrid_border_color;
    border-bottom: $standard_border_width solid $default_border_color;
    color: $standard_color;
    font: {
        family: $primary_font;
        size: $standard_font_size;
        weight: bold;
    }
    padding: 4px;
}

.propSheetSelectControl,
.propSheetSelectControlFocused,
.propSheetSelectControlDisabled {
    padding: {
        left: 3px;
        right: 3px;
    }
}

.propSheetSectionItemCell,
.propSheetSectionItemDisabled {

}

//<skin_base_styles
