@charset "UTF-8";
/*============================================================
This CSS file is generated from the Flat series of skins

DO NOT edit this .css file directly unless renamed, since 
future compass compiles will overwrite it.
==============================================================*/
/* This file is loaded by browsers, but also passed to the SmartClient server, which uses the
   "Flying Saucer" JAR to export a page in PDF format.  Therefore, we must declare @font-face in
   way that's compatible with both use cases, and as optimal as possible for all browsers.
   
   Multiple src: declarations can be made in a single #font-face declaration, but only the last
   one that can be parsed will take effect.  The src: declarations aren't merged and the browser
   doesn't even check font format support when choosing a src: line - it just uses the last one
   that can be parsed.

   We can list multiple font formats and their corresponding font files in a single src:
   declaration, but that's not supported by IE8, or by the "Flying Saucer" JAR.  So the
   approach taken below is:
   - We want IE8 to load eot fonts, because that's all that it supports, but we don't want
     "Flying Saucer" JAR to attempt to load eot fonts.  So add a ttf/otf font as the first
     src: declaration, and then the eot font second with a trailing \9; that trailing magic
     means that line can only be loaded by IE7-9.  (IE9 can parse the final src: declaration
     containing local() so it won't attempt to load the eot font.)
   - The final src: declaration will list various font resources in the order that we'd like
     them used.  Browsers will use the first one in that list that they support.  All supported
     browsers but IE8 and the "Flying Saucer" JAR on the server should parse and load this
     final declaration.  It's ordered to put woff2/woff fonts first as they're smaller files.

   https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
   https://www.paulirish.com/2010/font-face-gotchas/#smiley
   http://stackoverflow.com/questions/8004765/css-9-in-width-property
   https://msdn.microsoft.com/en-us/library/ms530757(v=vs.85).aspx

   *** IMPORTANT when adding/removing @font-face declarations ***
   The set of font families declared below in @font-face declarations MUST match those passed
   to Fontloader.loadCustomFonts() near the bottom of load_skin.js, or a bug will be created:
   - If a new @font-face declaration is added here, but the font family not added in
     load_skin.js, then the loading of that font won't be tracked and canvii sizes may be wrong.
   - If a @font-face declaration is removed here, but the font family not removed from
     load_skin.js, we'll try to load it and fail, which may delay the size correction logic for
     the remaining @font-face fonts until FontLoader times out and reports a load failure.
*/
@font-face {
  font-family: 'Roboto-Light-Vivid';
  /* src: local("☺"); - force UTF-8 */
  src: url("../../system/helpers/fonts/Roboto/Roboto-Light-Vivid.woff2") format("woff2"), url("../../system/helpers/fonts/Roboto/Roboto-Light-Vivid.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
/*============================================================
	"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) RibbonBar, RibbonGroup and RibbonButton
    13) Tools
    14) TileGrid
    15) Scrollbars
    16) ToggleSwitch
	------------
	internal/unused 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: #3db271;
  outline-radius: 0px;
}

/*custom hr*/
hr {
  border: none;
  border-top: 1px solid #d0d0d0;
  color: #d0d0d0;
  margin: 0px;
}

ol,
ul {
  -webkit-text-size-adjust: 100%;
}

.pageBackground {
  background-color: #ffffff;
  color: #444444;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
}

/* default text */
.normal,
.normalFocused,
.normalDisabled {
  background-color: transparent;
  color: #444444;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.normalDisabled {
  color: #ababab;
}

body {
  background-color: transparent;
}

.defaultBorder {
  border: 1px solid #d0d0d0;
}

/* drag outline */
.dragOutline {
  border: 2px dashed #3db271;
}

/* drop indicator */
.dropBorder {
  background-color: #808080;
}

/* hover canvas  */
.canvasHover,
.gridHover,
.formHover,
.asyncErrorHover {
  background-color: #ffffff;
  color: #444444;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  padding: 8px 12px 8px 12px;
  border: 1px solid #3db271;
  border-radius: 2px;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
  transition: none;
}

.asyncErrorHover {
  border-color: #e34e42;
}

.largeHover {
  background-color: #3a4a53;
  color: #ffffff;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 14px;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 0 5px #3a4a53;
}

.hoverPinLabel {
  background-color: #3a4a53;
  color: #ffffff;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 0 5px #3a4a53;
}

/* group label */
.groupLabel {
  background-color: #ffffff;
  color: #444444;
  border: none;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  padding: 0px 5px 0px 5px;
}

/* canvas pointer */
.pointerUp {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 29px solid #ffffff;
}

.pointerDown {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 14px solid transparent;
  border-top: 29px solid #ffffff;
}

.pointerRight {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 29px solid #ffffff;
}

.pointerLeft {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 14px solid transparent;
  border-right: 29px solid #ffffff;
}

/* RichTextEditor */
.richTextEditorBorder {
  border: 1px solid #d0d0d0;
}

.richTextEditorToolArea {
  background-color: #f0f0f0;
  border-bottom: 1px solid #d0d0d0;
}

.richTextEditorEditArea {
  background-color: #ffffff;
  color: #5b5b5b;
}

.listPropertiesButtonLayoutBorder {
  border-top: 1px solid #d0d0d0;
}

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

.link,
.linkOver,
.linkDown,
.linkFocused,
.linkFocusedOver,
.linkFocusedDown,
.linkDisabled,
.linkText,
.linkTextOver,
.linkTextDown,
.linkTextFocused,
.linkTextFocusedOver,
.linkTextFocusedDown,
.linkTextDisabled {
  position: "relative";
  outline: none;
  vertical-align: middle;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  border-radius: 2px;
  color: #0000EE;
}

.linkDisabled,
.linkTextDisabled {
  -webkit-text-fill-color: #ababab;
  color: #ababab;
}

.linkTextOver,
.linkText:hover {
  color: #0000EE;
}

.linkTextDown,
.linkText:active {
  color: #EE0000;
}

.linkTextFocused,
.linkTextFocusedDown,
.linkText:focus,
.linkTextFocused:focus,
.linkTextFocusedDown:focus {
  color: #EE0000;
}

.linkText:visited {
  color: #551A8B;
}

/*============================================================
    2) Buttons - two variants, .button and .secondaryButton
		button.baseStyle
		buttonStrip.baseStyle
		buttonTable.baseButtonStyle
		listBar.labelStyle
		listGrid.headerBaseStyle (not in this skin)
============================================================*/
.button, .button:hover,
.buttonOver,
.buttonFocused,
.buttonFocusedOver,
.buttonDown,
.buttonFocusedDown,
.buttonSelected,
.buttonSelectedFocused,
.buttonSelectedDown,
.buttonSelectedFocusedDown,
.buttonSelectedOver,
.buttonSelectedFocusedOver,
.buttonDisabled,
.buttonSelectedDisabled,
.buttonDeselectedDisabled {
  background-color: #3db271;
  border: none;
  border-radius: 2px;
  padding: 0px 5px;
  vertical-align: middle;
  outline: 0px;
  color: #ffffff;
  font-size: 11px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-weight: normal;
  opacity: 1;
  background-image: linear-gradient(to bottom, #3db271 0%, #38a37e 100%);
  transition: opacity 0.2s;
}

/* Over styles */
.button:hover,
.buttonOver {
  color: #ffffff;
  background-color: #3db271;
  border: none;
  opacity: 0.9;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  transition: color 0.2s, background-color, opacity;
}

/* selected styles */
.buttonSelected {
  color: #ffffff;
  background-color: #3db271;
  opacity: 1;
  border: none;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
}

/* focused styles */
.buttonFocused,
.buttonSelectedFocused {
  color: #ffffff;
  background-color: #3db271;
  opacity: 0.9;
  border: none;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
}

/* focusedOver styles */
.buttonFocusedOver,
.buttonSelectedFocusedOver {
  color: #ffffff;
  background-color: #3db271;
  border: none;
  opacity: 0.9;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
}

/* Down styles */
.buttonDown,
.buttonFocusedDown,
.buttonSelectedDown,
.buttonSelectedFocusedDown {
  color: #ffffff;
  background-color: #3db271;
  border: none;
  opacity: 0.7;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
}

/* disabled styles */
.buttonDisabled,
.buttonSelectedDisabled {
  color: #ffffff;
  background-color: #9cd1bf;
  border: none;
  opacity: 1;
  background-image: none;
}

.buttonDeselectedDisabled {
  color: #a8a8a8;
  text-decoration: line-through;
}

/* pending styles - used in conjunction with .buttonItem */
.buttonPending,
.buttonPendingOver,
.buttonPendingFocused,
.buttonPendingFocusedOver,
.buttonPendingDown,
.buttonPendingFocusedDown,
.buttonPendingSelected,
.buttonPendingSelectedFocused,
.buttonPendingSelectedDown,
.buttonPendingSelectedFocusedDown,
.buttonPendingSelectedOver,
.buttonPendingSelectedFocusedOver,
.buttonPendingOpened,
.buttonPendingOverOpened,
.buttonPendingDisabled,
.buttonPendingSelectedDisabled,
.buttonDeselectedDisabled {
  color: #981c65;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  background-color: #3db271;
  border: none;
  border-radius: 2px;
  padding: 0px 5px;
  vertical-align: middle;
  outline: 0px;
  opacity: 1;
  background-image: linear-gradient(to bottom, #3db271 0%, #38a37e 100%);
  transition: opacity 0.2s;
}

.buttonDeselectedDisabled {
  color: #a8a8a8;
  background-color: #9cd1bf;
  text-decoration: line-through;
}

/* Over styles */
.buttonPendingOver,
.buttonPendingOverOpened {
  background-color: #3db271;
  border: none;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  opacity: 0.9;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  transition: color 0.2s, background-color, opacity;
}

/* disabled styles */
.buttonPendingDisabled,
.buttonPendingSelectedDisabled {
  color: #dc3e9b;
  background-color: #9cd1bf;
  border: none;
  opacity: 1;
  background-image: none;
}

/* secondary button */
.secondaryButton,
.secondaryButtonOver,
.secondaryButtonFocused,
.secondaryButtonFocusedOver,
.secondaryButtonDown,
.secondaryButtonFocusedDown,
.secondaryButtonSelected,
.secondaryButtonSelectedFocused,
.secondaryButtonSelectedDown,
.secondaryButtonSelectedFocusedDown,
.secondaryButtonSelectedOver,
.secondaryButtonSelectedFocusedOver,
.secondaryButtonDisabled,
.secondaryButtonSelectedDisabled,
.secondaryButtonDeselectedDisabled {
  background-color: #787878;
  border: 2px solid #787878;
  border-radius: 2px;
  padding: 0px 5px;
  vertical-align: middle;
  outline: 0px;
  color: #ffffff;
  font-size: 11px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-weight: normal;
  opacity: 1;
  background-image: none;
  transition: opacity 0.2s;
}

/* Over styles */
.secondaryButton:hover,
.secondaryButtonOver {
  color: #ffffff;
  background-color: #919191;
  border: 2px solid #919191;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  opacity: 1;
  transition: color 0.2s, background-color, opacity;
}

/* selected styles */
.secondaryButtonSelected {
  color: #ffffff;
  background-color: #919191;
  border: 2px solid #5e5e5e;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
  opacity: 1;
}

/* focused styles */
.secondaryButtonFocused,
.secondaryButtonSelectedFocused {
  color: #ffffff;
  background-color: #ababab;
  border: 2px solid #5e5e5e;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  opacity: 1;
}

/* focusedOver styles */
.secondaryButtonFocusedOver,
.secondaryButtonSelectedFocusedOver {
  color: #ffffff;
  background-color: #ababab;
  border: 2px solid #383838;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  opacity: 1;
}

/* Down styles */
.secondaryButtonDown,
.secondaryButtonFocusedDown,
.secondaryButtonSelectedDown,
.secondaryButtonSelectedFocusedDown {
  color: #ffffff;
  background-color: #2b2b2b;
  border: 2px solid #5e5e5e;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
  opacity: 1;
}

/* disabled styles */
.secondaryButtonDisabled,
.secondaryButtonSelectedDisabled {
  color: #ababab;
  background-color: #f7f7f7;
  border: 2px solid #dadada;
  opacity: 1;
  background-image: none;
}

.secondaryButtonDeselectedDisabled {
  color: #a8a8a8;
  text-decoration: line-through;
}

/* pending styles - used in conjunction with .secondaryButtonItem */
.secondaryButtonPending,
.secondaryButtonPendingOver,
.secondaryButtonPendingFocused,
.secondaryButtonPendingFocusedOver,
.secondaryButtonPendingDown,
.secondaryButtonPendingFocusedDown,
.secondaryButtonPendingSelected,
.secondaryButtonPendingSelectedFocused,
.secondaryButtonPendingSelectedDown,
.secondaryButtonPendingSelectedFocusedDown,
.secondaryButtonPendingSelectedOver,
.secondaryButtonPendingSelectedFocusedOver,
.secondaryButtonPendingOpened,
.secondaryButtonPendingOverOpened,
.secondaryButtonPendingDisabled,
.secondaryButtonPendingSelectedDisabled,
.secondaryButtonDeselectedDisabled {
  color: #981c65;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  background-color: #787878;
  border: 2px solid #787878;
  border-radius: 2px;
  padding: 0px 5px;
  vertical-align: middle;
  outline: 0px;
}

.secondaryButtonDeselectedDisabled {
  color: #a8a8a8;
  background-color: #f7f7f7;
  text-decoration: line-through;
}

/* Over styles */
.secondaryButtonPendingOver,
.secondaryButtonPendingOverOpened {
  background-color: #919191;
  border: 2px solid #919191;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
}

/* disabled styles */
.secondaryButtonPendingDisabled,
.secondaryButtonPendingSelectedDisabled {
  color: #ababab;
  background-color: #f7f7f7;
  border: 2px solid #dadada;
}

/* Button-styles, with fonts applicable for buttons used as components of FormItems */
.buttonItem,
.buttonItemOver,
.buttonItemFocused,
.buttonItemFocusedOver,
.buttonItemDown,
.buttonItemFocusedDown,
.buttonItemSelected,
.buttonItemSelectedFocused,
.buttonItemSelectedDown,
.buttonItemSelectedFocusedDown,
.buttonItemSelectedOver,
.buttonItemSelectedFocusedOver,
.buttonItemDisabled,
.buttonItemOpened,
.buttonItemOverOpened,
.buttonItemSelectedDisabled,
.buttonItemDeselectedDisabled {
  background-color: #3db271;
  border: none;
  border-radius: 2px;
  padding: 0px 5px;
  vertical-align: middle;
  outline: 0px;
  color: #ffffff;
  font-size: 12px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  opacity: 1;
  background-image: linear-gradient(to bottom, #3db271 0%, #38a37e 100%);
  transition: opacity 0.2s;
}

/* Over styles */
.buttonItem:hover,
.buttonItemOver {
  color: #ffffff;
  background-color: #3db271;
  border: none;
  opacity: 0.9;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  transition: color 0.2s, background-color, opacity;
  fill: #ffffff;
  stroke: #ffffff;
}

/* focused styles */
.buttonItemFocused,
.buttonItemSelectedFocused {
  color: #ffffff;
  background-color: #3db271;
  border: none;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  opacity: 0.9;
  fill: #ffffff;
  stroke: #ffffff;
}

/* focusedOver styles */
.buttonItemFocusedOver,
.buttonItemSelectedFocusedOver {
  color: #ffffff;
  background-color: #3db271;
  border: none;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  opacity: 0.9;
}

/* Down styles */
.buttonItemDown,
.buttonItemFocusedDown,
.buttonItemSelectedDown,
.buttonItemSelectedFocusedDown {
  color: #ffffff;
  background-color: #3db271;
  border: none;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
  opacity: 0.7;
}

/* disabled styles */
.buttonItemDisabled,
.buttonItemSelectedDisabled {
  color: #ffffff;
  background-color: #9cd1bf;
  border: none;
  opacity: 1;
  background-image: none;
}

.buttonItemDeselectedDisabled {
  color: #a8a8a8;
  text-decoration: line-through;
}

/* ImgButton */
.imgButton,
.imgButtonOver,
.imgButtonSelected,
.imgButtonSelectedDisabled,
.imgButtonSelectedOver,
.imgButtonDown,
.imgButtonSelectedDown,
.imgButtonDisabled {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
}

/* StretchImgButton */
.stretchImgButton,
.stretchImgButtonSelected,
.stretchImgButtonSelectedOver,
.stretchImgButtonOver,
.stretchImgButtonDown,
.stretchImgButtonSelectedDown,
.stretchImgButtonSelectedDisabled,
.stretchImgButtonDisabled,
.stretchImgButtonPending,
.stretchImgButtonPendingSelected,
.stretchImgButtonPendingSelectedOver,
.stretchImgButtonPendingOver,
.stretchImgButtonPendingDown,
.stretchImgButtonPendingSelectedDown,
.stretchImgButtonPendingSelectedDisabled,
.stretchImgButtonPendingDisabled {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: normal;
}

.stretchImgButtonDisabled,
.stretchImgButtonSelectedDisabled,
.stretchImgButtonPendingDisabled,
.stretchImgButtonPendingSelectedDisabled {
  color: #ffffff;
}

.stretchImgButtonPending,
.stretchImgButtonPendingSelected,
.stretchImgButtonPendingSelectedOver,
.stretchImgButtonPendingOver,
.stretchImgButtonPendingDown,
.stretchImgButtonPendingSelectedDown {
  color: #0066CC;
}

/* Button Title */
.buttonTitle,
.buttonTitleOver,
.buttonTitleDown,
.buttonTitleSelected,
.buttonTitleSelectedOver,
.buttonTitleSelectedDown,
.buttonTitleSelectedFocused,
.buttonTitleSelectedFocusedOver,
.buttonTitleSelectedFocusedDown,
.buttonTitleSelectedDisabled,
.buttonTitleFocused,
.buttonTitleFocusedOver,
.buttonTitleFocusedDown,
.buttonTitleDisabled,
.buttonTitleOpened,
.buttonTitleOpenedOver {
  color: #ffffff;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: 0px;
}

/*============================================================
    3) Menus 
============================================================*/
.menuBorder {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.03);
  border-radius: 2px;
}

/* menuTable class, applied to the <table> element in Menu-grids */
/* in menus, for TD elements that contain an HR, allow the table-level cellpadding to be 
   modified - left/right 0px will clobber HTML cellpadding on the <table>, so the HRs fill 
   the table-width */
.menuTable td:has(hr) {
  padding: 0px 2px;
}

.menuMain,
.menuMainRTL,
.menuFill,
.menuFillRTL {
  background-repeat: repeat-y;
  background-attachment: scroll;
  border-radius: 2px;
  padding: 0px;
}

.gridBodyAnimated,
.menuFillAnimated,
.menuFillRTLAnimated {
  transition: transform 350ms;
}

.treeMenuBody {
  background-color: #ffffff;
}

/* menu styles */
.menu,
.menuOver,
.menuOverDark,
.menuSelected,
.menuSelectedOver,
.menuSelectedOverDark,
.menuDisabled,
.menuDisabledDark,
.treeMenuSelected,
.treeMenuSelectedDark,
.treeMenuSelectedOver,
.treeMenuSelectedOverDark {
  background-color: #ffffff;
  color: #5b5b5b;
  border-bottom: 1px solid transparent;
  border-top: 1px solid transparent;
  vertical-align: middle;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  transition: background-color 0.2s;
  padding: 0px 2px;
}

/* styles to be used by a parent when showing its submenu */
.menuIconFieldSelected img,
.menuSelected img,
.menuIconFieldOver img,
.menuOver img {
  filter: brightness(100%);
}

/* over styles */
.menuOver,
.menuOverDark,
.menuSelectedOver,
.menuSelectedOverDark,
.treeMenuSelected,
.treeMenuSelectedDark,
.treeMenuSelectedOver,
.treeMenuSelectedOverDark,
.treeMenuSelectedSelected,
.treeMenuSelectedSelectedOver {
  background-color: #f5f8fa;
  color: #5b5b5b;
}

/* selected */
.menuSelected {
  background-color: #f0f0f0;
  color: #5b5b5b;
}

/* selectedOver */
.menuSelectedOver,
.menuSelectedOverDark {
  background-color: #f0f0f0;
  color: #5b5b5b;
}

/* disabled style */
.menuDisabled,
.menuDisabledDark {
  color: #999999;
}

/* menuTitleField */
.menuTitleField,
.menuTitleFieldDark,
.menuTitleFieldSelected,
.menuTitleFieldSelectedDark,
.menuTitleFieldOver,
.menuTitleFieldOverDark,
.menuTitleFieldSelectedOver,
.menuTitleFieldSelectedOverDark,
.menuTitleFieldDisabled,
.menuTitleFieldDisabledDark {
  background-color: #ffffff;
  color: #5b5b5b;
  border-bottom: 1px solid transparent;
  border-top: 1px solid transparent;
  vertical-align: middle;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  padding: 0px 0px 0px 4px;
  transition: background-color 0.2s;
}

.menuTitleFieldOver,
.menuTitleFieldOverDark,
.menuTitleFieldSelectedOver,
.menuTitleFieldSelectedOverDark {
  background-color: #f5f8fa;
  color: #5b5b5b;
}

.menuTitleFieldSelected {
  background-color: #f0f0f0;
  color: #5b5b5b;
}

.menuTitleFieldDisabled,
.menuTitleFieldDisabledDark {
  color: #999999;
}

/* menuIconField */
.menuIconField,
.menuIconFieldDark,
.menuIconFieldOver,
.menuIconFieldOverDark,
.menuIconFieldSelected,
.menuIconFieldSelectedDark,
.menuIconFieldSelectedOver,
.menuIconFieldSelectedOverDark,
.menuIconFieldDisabled {
  background-color: #ffffff;
  vertical-align: middle;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  border-bottom: 1px solid transparent;
  border-top: 1px solid transparent;
  vertical-align: middle;
  padding: 0px 1px 0px 12px;
  border-radius: 2px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  color: #778D87;
  transition: background-color 0.2s;
}

.menuIconFieldOver,
.menuIconFieldOverDark,
.menuIconFieldSelected,
.menuIconFieldSelectedDark,
.menuIconFieldSelectedOver,
.menuIconFieldSelectedOverDark {
  background-color: #f5f8fa;
  color: #778D87;
}

.menuIconFieldSelected,
.menuIconFieldSelectedDark {
  background-color: #f0f0f0;
  color: #778D87;
}

.menuIconFieldDisabled,
.menuIconFieldDisabledDark {
  color: #ababab;
}

/* menuKeyField */
.menuKeyField,
.menuKeyFieldDark,
.menuKeyFieldOver,
.menuKeyFieldOverDark,
.menuKeyFieldSelected,
.menuKeyFieldSelectedDark,
.menuKeyFieldSelectedOver,
.menuKeyFieldSelectedOverDark,
.menuKeyFieldDisabled {
  border-bottom: 1px solid transparent;
  border-top: 1px solid transparent;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  background-color: #ffffff;
  color: #5b5b5b;
  padding: 0px 2px;
  vertical-align: middle;
  border-radius: 0px;
  transition: background-color 0.2s;
}

.menuKeyFieldOver,
.menuKeyFieldOverDark,
.menuKeyFieldSelectedOver,
.menuKeyFieldSelectedOverDark {
  background-color: #f5f8fa;
  color: #5b5b5b;
}

.menuKeyFieldSelected,
.menuKeyFieldSelectedDark {
  background-color: #f0f0f0;
  color: #5b5b5b;
}

.menuKeyFieldDisabled,
.menuKeyFieldDisabledDark {
  color: #999999;
}

/* menuSubmenuField */
.menuSubmenuField,
.menuSubmenuFieldDark,
.menuSubmenuFieldOver,
.menuSubmenuFieldOverDark,
.menuSubmenuFieldSelected,
.menuSubmenuFieldSelectedDark,
.menuSubmenuFieldSelectedOver,
.menuSubmenuFieldSelectedOverDark,
.menuSubmenuFieldDisabled {
  background-color: #ffffff;
  color: #5b5b5b;
  vertical-align: middle;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  border-bottom: 1px solid transparent;
  border-top: 1px solid transparent;
  padding: 0px 9px 0px 0px;
  vertical-align: middle;
  border-radius: 2px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  transition: background-color 0.2s;
}

.menuSubmenuFieldOver,
.menuSubmenuFieldOverDark,
.menuSubmenuFieldSelectedOver,
.menuSubmenuFieldSelectedOverDark {
  background-color: #f5f8fa;
  color: #5b5b5b;
}

.menuSubmenuFieldSelected,
.menuSubmenuFieldSelectedDark {
  background-color: #f0f0f0;
  color: #5b5b5b;
}

.menuSubmenuFieldDisabled,
.menuSubmenuFieldDisabledDark {
  color: #999999;
}

/* menu buttons */
.menuButton,
.menuButtonOver,
.menuButtonDown,
.menuButtonFocused,
.menuButtonFocusedOver,
.menuButtonFocusedDown,
.menuButtonSelected,
.menuButtonSelectedDown,
.menuButtonSelectedOver,
.menuButtonSelectedDisabled,
.menuButtonSelectedFocused,
.menuButtonSelectedFocusedDown,
.menuButtonSelectedFocusedOver,
.menuButtonDisabled,
.menuButtonPending,
.menuButtonPendingOpened,
.menuButtonPendingOver,
.menuButtonPendingOverOpened,
.menuButtonPendingDown,
.menuButtonPendingDisabled,
.menuButtonPendingFocused,
.menuButtonPendingFocusedDown,
.menuButtonPendingFocusedOver,
.menuButtonPendingSelected,
.menuButtonPendingSelectedDown,
.menuButtonPendingSelectedOver,
.menuButtonPendingSelectedDisabled,
.menuButtonOpened,
.menuButtonOverOpened,
.menuButtonDownOpened,
.menuButtonFocusedOpened,
.menuButtonFocusedDownOpened,
.menuButtonFocusedOverOpened,
.menuButtonSelectedOpened,
.menuButtonSelectedDownOpened,
.menuButtonSelectedOverOpened {
  color: #ffffff;
  background-color: #3db271;
  border: none;
  border-radius: 2px;
  list-style-type: none;
  padding: 0px 2px 0px 5px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  vertical-align: middle;
  opacity: 1;
  background-image: linear-gradient(to bottom, #3db271 0%, #38a37e 100%);
  transition: opacity 0.2s;
  outline: none;
}

/* over style */
.menuButtonOver,
.menuButtonPendingOver {
  color: #ffffff;
  background-color: #3db271;
  border: none;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  opacity: 0.9;
  transition: color 0.2s, background-color, opacity;
}

/* focused style */
.menuButtonFocused,
.menuButtonPendingFocused {
  color: #ffffff;
  background-color: #3db271;
  border: 2px solid #369f65;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  opacity: 0.9;
}

/* focused over style */
.menuButtonFocusedOver,
.menuButtonSelectedOver,
.menuButtonSelectedFocusedOver {
  color: #ffffff;
  background-color: #3db271;
  border: initial;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  opacity: 0.9;
}

/* down style */
.menuButtonDown,
.menuButtonFocusedDown,
.menuButtonSelectedDown,
.menuButtonSelectedFocusedDown {
  color: #ffffff;
  background-color: #3db271;
  border: initial;
  opacity: 1;
}

.menuButtonDown,
.menuButtonFocusedDown,
.menuButtonSelected,
.menuButtonSelectedDown,
.menuButtonSelectedOver,
.menuButtonPendingDown,
.menuButtonPendingFocusedDown,
.menuButtonPendingFocusedOver,
.menuButtonPendingSelected,
.menuButtonPendingSelectedDown,
.menuButtonPendingSelectedOver {
  color: #ffffff;
  background-color: #3db271;
  border: initial;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
  outline: none;
}

/* opened style */
.menuButtonOpened,
.menuButtonPendingOpened,
.menuButtonPendingOverOpened,
.menuButtonOverOpened,
.menuButtonDownOpened,
.menuButtonFocusedOpened,
.menuButtonFocusedDownOpened,
.menuButtonFocusedOverOpened,
.menuButtonSelectedOpened,
.menuButtonSelectedDownOpened,
.menuButtonSelectedOverOpened {
  color: #ffffff;
  background-color: #3db271;
  border: initial;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  opacity: 1;
}

/* disabled style */
.menuButtonDisabled,
.menuButtonSelectedDisabled,
.menuButtonPendingDisabled,
.menuButtonPendingSelectedDisabled {
  color: #ffffff;
  background-color: #9cd1bf;
  border: none;
  opacity: 1;
  background-image: none;
}

/* pending style */
.menuButtonPending,
.menuButtonPendingOpened,
.menuButtonPendingOver,
.menuButtonPendingOverOpened,
.menuButtonPendingDown,
.menuButtonPendingFocused,
.menuButtonPendingFocusedDown,
.menuButtonPendingFocusedOver,
.menuButtonPendingSelected,
.menuButtonPendingSelectedDown,
.menuButtonPendingSelectedOver {
  color: #981c65;
}

/* textMenuButton - lightweight menuButton - text and icon only, no background/border, etc */
.textMenuButton,
.textMenuButtonOver,
.textMenuButtonDown,
.textMenuButtonFocused,
.textMenuButtonFocusedOver,
.textMenuButtonFocusedDown,
.textMenuButtonSelected,
.textMenuButtonSelectedDown,
.textMenuButtonSelectedOver,
.textMenuButtonSelectedDisabled,
.textMenuButtonSelectedFocused,
.textMenuButtonSelectedFocusedDown,
.textMenuButtonSelectedFocusedOver,
.textMenuButtonDisabled {
  color: #444444;
  background-color: transparent;
  border: none;
  padding: 0px 2px 0px 5px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  transition: opacity 0.2s;
}

.textMenuButtonFocused {
  color: blue;
}

.textMenuButtonOver,
.textMenuButtonFocusedOver,
.textMenuButtonSelectedOver,
.textMenuButtonSelectedFocusedOver {
  color: #3db271;
}

.textMenuButtonDown,
.textMenuButtonFocusedDown,
.textMenuButtonSelectedDown,
.textMenuButtonSelectedFocusedDown {
  color: #308c59;
}

.textMenuButtonDisabled {
  color: #ababab;
}

/*============================================================
    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: #000000;
}

/* Window and Dialog*/
.windowBackground {
  border: 1px solid #d0d0d0;
  background-color: #ffffff;
  box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.05);
  border-radius: 2px;
}

.windowBody {
  background-color: #ffffff;
  padding: 0px 2px 2px 2px;
  border-radius: 2px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.promptBody {
  border: 1px solid #d0d0d0;
  border-top: none;
}

.windowHeader,
.windowHeaderHilite {
  padding: 0px;
  background-color: #3db271;
  background-image: linear-gradient(to bottom, #3db271 0%, #38a37e 100%);
  border-radius: 2px;
  /* this is necessary to float the ::after separator outside the header and ignore it's radius */
  position: relative;
  color: #ffffff;
}

/* draw a separator that looks like a bottom-border on the window-header, but can float outside 
   of it, ignores it's radius and can be sized as required */
.windowHeader::after,
.windowHeaderHilite::after {
  content: '';
  position: absolute;
  /* v-offset from header-bottom, and x-offset (indent) from the left and right - defaults are 0 */
  bottom: 0;
  left: 0px;
  right: 0px;
  /* use border-bottom to draw the line */
  border: none;
  border-bottom: 1px solid #d0d0d0;
  border-radius: 0px;
  z-index: 1;
}

.windowHeaderText {
  color: #ffffff;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  line-height: 17px;
  padding: 0px 0px 0px 5px;
}

.windowHeaderIcon {
  padding: 0px 0px 0px 5px;
  color: #ffffff;
}

.windowStatusBar {
  background-color: #ffffff;
  border-top: 1px solid #d0d0d0;
  color: #3db271;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  padding: 7px;
}

/* Dialog styles */
.dialogBackground {
  border: 1px solid #d0d0d0;
  background-color: #ffffff;
  box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.05);
  border-radius: 2px;
  position: relative;
}

.dialogBody {
  background-color: #ffffff;
  padding: 0px 2px 2px 2px;
  border-radius: 2px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.dialogHeader,
.dialogHeaderHilite {
  padding: 0px;
  background-color: #3db271;
  background-image: linear-gradient(to bottom, #3db271 0%, #38a37e 100%);
  border-radius: 2px;
  /* this is necessary to float the ::after separator outside the header and ignore it's radius */
  position: relative;
}

/* draw a separator that looks like a bottom-border on the dialog-header, but can float outside 
   of it, ignores it's radius and can be sized as required */
.dialogHeader::after,
.dialogHeaderHilite::after {
  content: '';
  position: absolute;
  /* v-offset from header-bottom, and x-offset (indent) from the left and right - defaults are 0 */
  bottom: 0;
  left: 0px;
  right: 0px;
  /* use border-bottom to draw the line */
  border: none;
  border-bottom: 1px solid #d0d0d0;
  border-radius: 0px;
  z-index: 1;
}

.dialogHeaderText {
  color: #ffffff;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  line-height: 17px;
  padding: 0px 0px 0px 5px;
}

.dialogStatusBar {
  background-color: #ffffff;
  border-top: 1px solid #d0d0d0;
  color: #3db271;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  padding: 7px;
}

.dialogToolbar {
  background-color: transparent;
  border: none;
}

/*============================================================
    5) Layout
============================================================*/
.layoutDropLine {
  background-color: #3db271;
  border: none;
  pointer-events: none;
}

.layoutPlaceHolder {
  border: 1px solid #d0d0d0;
}

.hSplitbar,
.hSplitbarclosed,
.hSplitbarOver,
.hSplitbarOverclosed {
  background-color: #f0f0f0;
  background-size: 100%;
}

.hSplitbarDown {
  border: 1px solid #d0d0d0;
}

.vSplitbar,
.vSplitbarclosed,
.vSplitbarOver,
.vSplitbarOverclosed {
  background-color: #f0f0f0;
  background-size: 100%;
}

.vSplitbarDown {
  border: 1px solid #d0d0d0;
}

.splitPaneSidePanel,
.splitPaneSidePanelOnScreen,
.splitPaneSidePanelOffScreen {
  border-right: 1px solid #d0d0d0;
}

.splitPaneSidePanelRTL,
.splitPaneSidePanelOnScreenRTL,
.splitPaneSidePanelOffScreenRTL {
  border-left: 1px solid #d0d0d0;
}

.splitPaneSidePanelOnScreen,
.splitPaneSidePanelOnScreenRTL,
.splitPaneSidePanelOffScreen,
.splitPaneSidePanelOffScreenRTL {
  transition: transform 250ms;
}

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

.splitPanePagedPanelPagesContainerAnimated,
.navStackPagedPanelPagesContainerAnimated {
  transition: transform 450ms;
}

.navBarHeaderPaneTitle,
.navBarHeaderPaneTitleDisabled,
.detailPaneTitle,
.detailPaneTitleDisabled,
.listPaneTitle,
.listPaneTitleDisabled {
  background-color: #f0f0f0;
  color: #616161;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 15px;
}

/*============================================================
    6) TabSet, tab scroller and tab picker
============================================================*/
.tabSetContainer {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  color: #444444;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  outline: none;
}

.tabScroller {
  background-color: #f9fbf9;
}

.tabBar,
.tabBarTop,
.tabBarLeft,
.tabBarBottom,
.tabBarRight {
  background-color: transparent;
  background-image: initial;
  padding: 5px 0px;
}

.tabBarTop {
  padding-top: 3px;
}

.tabBarLeft {
  padding-left: 5px;
}

.tabBarRight {
  padding-right: 5px;
}

.tabBarBottom {
  padding-bottom: 3px;
}

.tabBarBaseLine {
  background-color: #9C9C9C;
}

/*
.tabsetControlsLayout {
    background-color: $standard_bgColor;
    border: 1px solid red;
}
.tabsetControlsImg,
.tabsetControlsImgOver {
    background-color: $standard_bgColor;
}

.tabsetControlsImgOver {
    background-color: lightblue;
}
*/
/* 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;
  border-radius: 3px;
  display: inline-block;
  outline: none;
  vertical-align: middle;
  margin: 0 auto;
  background: url("images/TabSet/controls-btn.png") no-repeat;
  background-color: #f9fbf9;
}

.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: url("images/TabSet/controls-btn.png") no-repeat;
  background-color: #f9fbf9;
  outline: none;
}

.tabPickerDisabledtop,
.tabPickertop {
  background-position: -161px -7px;
}

.tabPickerDowntop {
  background-position: -161px -80px;
}

.tabPickerDisabledbottom,
.tabPickerbottom {
  background-position: -189px -7px;
}

.tabPickerDownbottom {
  background-position: -189px -80px;
}

.tabPickerDisabledleft,
.tabPickerleft {
  background-position: -361px -6px;
}

.tabPickerDownleft {
  background-position: -361px -85px;
}

.tabPickerDisabledright,
.tabPickerright {
  background-position: -332px -6px;
}

.tabPickerDownright {
  background-position: -332px -85px;
}

/* tabSetControlIcon - prev/next/picker icons */
.tabControlIcon,
.tabControlIconOver,
.tabControlIconDown,
.tabControlIcontop,
.tabControlIconOvertop,
.tabControlIconDowntop,
.tabControlIconleft,
.tabControlIconOverleft,
.tabControlIconDownleft,
.tabControlIconbottom,
.tabControlIconOverbottom,
.tabControlIconDownbottom,
.tabControlIconright,
.tabControlIconOverright,
.tabControlIconDownright {
  background-color: #f9fbf9;
  color: #778D87;
  outline: none;
}

.tabControlIconOver,
.tabControlIconOvertop,
.tabControlIconOverleft,
.tabControlIconOverbottom,
.tabControlIconOverright {
  background-color: #f5f8fa;
  color: #3db271;
}

.tabControlIconDown,
.tabControlIconDowntop,
.tabControlIconDownleft,
.tabControlIconDownbottom,
.tabControlIconDownright {
  background-color: #f0f0f0;
  color: #308c59;
}

/* tabControlLayout - contains the prev/next/picker icons */
.tabControlLayout {
  background-color: #f9fbf9;
  padding: 0px;
  border-radius: 4px;
  border: 1px solid #e9e9e9;
  outline: none;
}

/* tabHighlight */
.tabHighlight,
.tabHighlightOver,
.tabHighlightDown,
.tabHighlightFocused,
.tabHighlightFocusedOver,
.tabHighlightFocusedDown,
.tabHighlightSelected,
.tabHighlightSelectedOver,
.tabHighlightSelectedDown,
.tabHighlightSelectedFocused,
.tabHighlightSelectedFocusedOver,
.tabHighlightSelectedFocusedDown,
.tabHighlightSelectedFocusedDisabled,
.tabHighlightSelectedDisabled,
.tabHighlightDisabled {
  background-color: grey;
  border: none;
  border-radius: 2px;
}

.tabHighlightOver {
  background-color: grey;
}

.tabHighlightSelectedOver {
  background-color: grey;
}

.tabHighlightFocusedOver {
  background-color: grey;
}

.tabHighlightSelectedFocusedOver {
  background-color: grey;
}

.tabHighlightDown {
  background-color: grey;
}

.tabHighlightSelectedDown {
  background-color: grey;
}

.tabHighlightFocusedDown {
  background-color: grey;
}

.tabHighlightSelectedFocusedDown {
  background-color: grey;
}

.tabHighlightSelected {
  background-color: grey;
}

.tabHighlightFocused {
  background-color: grey;
}

.tabHighlightSelectedFocused {
  background-color: grey;
}

.tabHighlightSelectedDisabled,
.tabHighlightDisabled {
  background-color: grey;
}

/* tabButtons */
/*============================================================
    TabSet CSS tabs
		tabSet.simpleTabBaseStyle
============================================================*/
/* styles for simple css-styled tabs*/
.tabButtonTop,
.tabButtonTopOver,
.tabButtonTopDown,
.tabButtonTopFocused,
.tabButtonTopFocusedOver,
.tabButtonTopFocusedDown,
.tabButtonTopSelected,
.tabButtonTopSelectedOver,
.tabButtonTopSelectedDown,
.tabButtonTopSelectedFocused,
.tabButtonTopSelectedFocusedOver,
.tabButtonTopSelectedFocusedDown,
.tabButtonTopSelectedDisabled,
.tabButtonTopDisabled {
  font-size: 12px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-weight: 500;
  color: #444444;
  background-color: transparent;
  border: 3px solid transparent;
  border-bottom: 0px solid transparent;
  border-top: 0px solid transparent;
  border-radius: 0px 0px 0px 0px;
  padding: 0px 27px;
  text-decoration: none;
  background-image: initial;
  opacity: 1;
  transition: opacity 0.2s;
  border-image: linear-gradient(to top, transparent, transparent) 1 100%;
  outline: none;
}

.tabButtonTopOver {
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #a7e1c1;
  border-bottom: 0px solid transparent;
  border-top: 0px solid #a7e1c1;
  opacity: 0.9;
  transition: color 0.2s, background-color, opacity;
  box-shadow: none;
}

.tabButtonTopSelected {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 0px solid #a7e1c1;
  opacity: 1;
  border-image: none 1 100%;
}

.tabButtonTopSelectedOver {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 0px solid #a7e1c1;
  border-image: none 1 100%;
  box-shadow: none;
}

.tabButtonTopSelectedFocused {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 0px solid #a7e1c1;
}

.tabButtonTopFocused {
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 0px solid #a7e1c1;
}

.tabButtonTopFocusedOver {
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 0px solid #a7e1c1;
  box-shadow: none;
}

.tabButtonTopSelectedFocusedOver {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 0px solid #a7e1c1;
  border-image: none 1 100%;
  box-shadow: none;
}

.tabButtonTopDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 0px solid #a7e1c1;
}

.tabButtonTopSelectedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 0px solid #a7e1c1;
}

.tabButtonTopFocusedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 0px solid #a7e1c1;
}

.tabButtonTopSelectedFocusedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 0px solid #a7e1c1;
}

.tabButtonTopDisabled,
.tabButtonTopSelectedDisabled {
  color: #ababab;
  background-color: transparent;
  border: 3px solid #dadada;
  margin-right: 3px;
  border-bottom: 0px solid transparent;
  border-top: 0px solid transparent;
}

.tabButtonBottom,
.tabButtonBottomOver,
.tabButtonBottomDown,
.tabButtonBottomFocused,
.tabButtonBottomFocusedOver,
.tabButtonBottomFocusedDown,
.tabButtonBottomSelected,
.tabButtonBottomSelectedOver,
.tabButtonBottomSelectedDown,
.tabButtonBottomSelectedFocused,
.tabButtonBottomSelectedFocusedOver,
.tabButtonBottomSelectedFocusedDown,
.tabButtonBottomSelectedDisabled,
.tabButtonBottomDisabled {
  font-size: 12px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-weight: 500;
  color: #444444;
  background-color: transparent;
  border: 3px solid transparent;
  border-top: 0px solid transparent;
  border-bottom: 0px solid transparent;
  border-radius: 0px 0px 0px 0px;
  padding: 0px 27px;
  text-decoration: none;
  background-image: initial;
  opacity: 1;
  transition: opacity 0.2s;
  border-image: linear-gradient(to top, transparent, transparent) 1 100%;
  outline: none;
}

.tabButtonBottomOver {
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #a7e1c1;
  border-top: 0px solid transparent;
  border-bottom: 0px solid #a7e1c1;
  opacity: 0.9;
  transition: color 0.2s, background-color, opacity;
  box-shadow: none;
}

.tabButtonBottomSelected {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 0px solid #a7e1c1;
  opacity: 1;
  border-image: none 1 100%;
}

.tabButtonBottomSelectedOver {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 0px solid #a7e1c1;
  border-image: none 1 100%;
  box-shadow: none;
}

.tabButtonBottomSelectedFocused {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 0px solid #a7e1c1;
}

.tabButtonBottomFocused {
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 0px solid #a7e1c1;
}

.tabButtonBottomFocusedOver {
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 0px solid #a7e1c1;
  box-shadow: none;
}

.tabButtonBottomSelectedFocusedOver {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 0px solid #a7e1c1;
  border-image: none 1 100%;
  box-shadow: none;
}

.tabButtonBottomDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 0px solid #a7e1c1;
}

.tabButtonBottomSelectedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 0px solid #a7e1c1;
}

.tabButtonBottomFocusedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 0px solid #a7e1c1;
}

.tabButtonBottomSelectedFocusedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 0px solid #a7e1c1;
}

.tabButtonBottomDisabled,
.tabButtonBottomSelectedDisabled {
  color: #ababab;
  background-color: transparent;
  border: 3px solid #dadada;
  margin-right: 3px;
  border-top: 0px solid transparent;
  border-bottom: 0px solid transparent;
}

.tabButtonLeft,
.tabButtonLeftOver,
.tabButtonLeftDown,
.tabButtonLeftFocused,
.tabButtonLeftFocusedOver,
.tabButtonLeftFocusedDown,
.tabButtonLeftSelected,
.tabButtonLeftSelectedOver,
.tabButtonLeftSelectedDown,
.tabButtonLeftSelectedFocused,
.tabButtonLeftSelectedFocusedOver,
.tabButtonLeftSelectedFocusedDown,
.tabButtonLeftSelectedDisabled,
.tabButtonLeftDisabled {
  font-size: 12px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-weight: 500;
  color: #444444;
  background-color: transparent;
  border: 3px solid transparent;
  border-right: 0px solid transparent;
  border-left: 0px solid transparent;
  border-radius: 0px 0px 0px 0px;
  padding: 10px 0px;
  text-decoration: none;
  background-image: initial;
  opacity: 1;
  transition: opacity 0.2s;
  border-image: linear-gradient(to top, transparent, transparent) 100% 1;
  outline: none;
}

.tabButtonLeftOver {
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #a7e1c1;
  border-right: 0px solid transparent;
  border-left: 0px solid #a7e1c1;
  opacity: 0.9;
  transition: color 0.2s, background-color, opacity;
  box-shadow: none;
}

.tabButtonLeftSelected {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 0px solid #a7e1c1;
  opacity: 1;
  border-image: none 100% 1;
}

.tabButtonLeftSelectedOver {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 0px solid #a7e1c1;
  border-image: none 100% 1;
  box-shadow: none;
}

.tabButtonLeftSelectedFocused {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 0px solid #a7e1c1;
}

.tabButtonLeftFocused {
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 0px solid #a7e1c1;
}

.tabButtonLeftFocusedOver {
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 0px solid #a7e1c1;
  box-shadow: none;
}

.tabButtonLeftSelectedFocusedOver {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 0px solid #a7e1c1;
  border-image: none 100% 1;
  box-shadow: none;
}

.tabButtonLeftDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 0px solid #a7e1c1;
}

.tabButtonLeftSelectedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 0px solid #a7e1c1;
}

.tabButtonLeftFocusedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 0px solid #a7e1c1;
}

.tabButtonLeftSelectedFocusedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 0px solid #a7e1c1;
}

.tabButtonLeftDisabled,
.tabButtonLeftSelectedDisabled {
  color: #ababab;
  background-color: transparent;
  border: 3px solid #dadada;
  margin-right: 3px;
  border-right: 0px solid transparent;
  border-left: 0px solid transparent;
}

.tabButtonRight,
.tabButtonRightOver,
.tabButtonRightDown,
.tabButtonRightFocused,
.tabButtonRightFocusedOver,
.tabButtonRightFocusedDown,
.tabButtonRightSelected,
.tabButtonRightSelectedOver,
.tabButtonRightSelectedDown,
.tabButtonRightSelectedFocused,
.tabButtonRightSelectedFocusedOver,
.tabButtonRightSelectedFocusedDown,
.tabButtonRightSelectedDisabled,
.tabButtonRightDisabled {
  font-size: 12px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-weight: 500;
  color: #444444;
  background-color: transparent;
  border: 3px solid transparent;
  border-left: 0px solid transparent;
  border-right: 0px solid transparent;
  border-radius: 0px 0px 0px 0px;
  padding: 10px 0px;
  text-decoration: none;
  background-image: initial;
  opacity: 1;
  transition: opacity 0.2s;
  border-image: linear-gradient(to top, transparent, transparent) 100% 1;
  outline: none;
}

.tabButtonRightOver {
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #a7e1c1;
  border-left: 0px solid transparent;
  border-right: 0px solid #a7e1c1;
  opacity: 0.9;
  transition: color 0.2s, background-color, opacity;
  box-shadow: none;
}

.tabButtonRightSelected {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 0px solid #a7e1c1;
  opacity: 1;
  border-image: none 100% 1;
}

.tabButtonRightSelectedOver {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 0px solid #a7e1c1;
  border-image: none 100% 1;
  box-shadow: none;
}

.tabButtonRightSelectedFocused {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 0px solid #a7e1c1;
}

.tabButtonRightFocused {
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 0px solid #a7e1c1;
}

.tabButtonRightFocusedOver {
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 0px solid #a7e1c1;
  box-shadow: none;
}

.tabButtonRightSelectedFocusedOver {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 0px solid #a7e1c1;
  border-image: none 100% 1;
  box-shadow: none;
}

.tabButtonRightDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 0px solid #a7e1c1;
}

.tabButtonRightSelectedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 0px solid #a7e1c1;
}

.tabButtonRightFocusedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 0px solid #a7e1c1;
}

.tabButtonRightSelectedFocusedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 0px solid #a7e1c1;
}

.tabButtonRightDisabled,
.tabButtonRightSelectedDisabled {
  color: #ababab;
  background-color: transparent;
  border: 3px solid #dadada;
  margin-right: 3px;
  border-left: 0px solid transparent;
  border-right: 0px solid transparent;
}

/*============================================================
    TabSet CSS tabs
		tabSet.simpleTabIconOnlyBaseStyle
============================================================*/
/* styles for simple css-styled tabs*/
.iconOnlyTabButtonTop,
.iconOnlyTabButtonTopOver,
.iconOnlyTabButtonTopDown,
.iconOnlyTabButtonTopFocused,
.iconOnlyTabButtonTopFocusedOver,
.iconOnlyTabButtonTopFocusedDown,
.iconOnlyTabButtonTopSelected,
.iconOnlyTabButtonTopSelectedOver,
.iconOnlyTabButtonTopSelectedDown,
.iconOnlyTabButtonTopSelectedFocused,
.iconOnlyTabButtonTopSelectedFocusedOver,
.iconOnlyTabButtonTopSelectedFocusedDown,
.iconOnlyTabButtonTopSelectedDisabled,
.iconOnlyTabButtonTopDisabled {
  font-size: 12px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-weight: 500;
  color: #444444;
  background-color: transparent;
  border: 3px solid transparent;
  border-bottom: 0px solid transparent;
  border-top: 0px solid transparent;
  border-radius: 0px 0px 0px 0px;
  padding: 0px 12px;
  text-decoration: none;
  background-image: initial;
  opacity: 1;
  transition: opacity 0.2s;
  border-image: linear-gradient(to top, transparent, transparent) 1 100%;
  outline: none;
}

.iconOnlyTabButtonTopOver {
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #a7e1c1;
  border-bottom: 0px solid transparent;
  border-top: 0px solid #a7e1c1;
  opacity: 0.9;
  transition: color 0.2s, background-color, opacity;
  box-shadow: none;
}

.iconOnlyTabButtonTopSelected {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 0px solid #a7e1c1;
  opacity: 1;
  border-image: none 1 100%;
}

.iconOnlyTabButtonTopSelectedOver {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 0px solid #a7e1c1;
  border-image: none 1 100%;
  box-shadow: none;
}

.iconOnlyTabButtonTopSelectedFocused {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 0px solid #a7e1c1;
}

.iconOnlyTabButtonTopFocused {
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 0px solid #a7e1c1;
}

.iconOnlyTabButtonTopFocusedOver {
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 0px solid #a7e1c1;
  box-shadow: none;
}

.iconOnlyTabButtonTopSelectedFocusedOver {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 0px solid #a7e1c1;
  border-image: none 1 100%;
  box-shadow: none;
}

.iconOnlyTabButtonTopDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 0px solid #a7e1c1;
}

.iconOnlyTabButtonTopSelectedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 0px solid #a7e1c1;
}

.iconOnlyTabButtonTopFocusedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 0px solid #a7e1c1;
}

.iconOnlyTabButtonTopSelectedFocusedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 0px solid #a7e1c1;
}

.iconOnlyTabButtonTopDisabled,
.iconOnlyTabButtonTopSelectedDisabled {
  color: #ababab;
  background-color: transparent;
  border: 3px solid #dadada;
  margin-right: 3px;
  border-bottom: 0px solid transparent;
  border-top: 0px solid transparent;
}

.iconOnlyTabButtonBottom,
.iconOnlyTabButtonBottomOver,
.iconOnlyTabButtonBottomDown,
.iconOnlyTabButtonBottomFocused,
.iconOnlyTabButtonBottomFocusedOver,
.iconOnlyTabButtonBottomFocusedDown,
.iconOnlyTabButtonBottomSelected,
.iconOnlyTabButtonBottomSelectedOver,
.iconOnlyTabButtonBottomSelectedDown,
.iconOnlyTabButtonBottomSelectedFocused,
.iconOnlyTabButtonBottomSelectedFocusedOver,
.iconOnlyTabButtonBottomSelectedFocusedDown,
.iconOnlyTabButtonBottomSelectedDisabled,
.iconOnlyTabButtonBottomDisabled {
  font-size: 12px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-weight: 500;
  color: #444444;
  background-color: transparent;
  border: 3px solid transparent;
  border-top: 0px solid transparent;
  border-bottom: 0px solid transparent;
  border-radius: 0px 0px 0px 0px;
  padding: 0px 12px;
  text-decoration: none;
  background-image: initial;
  opacity: 1;
  transition: opacity 0.2s;
  border-image: linear-gradient(to top, transparent, transparent) 1 100%;
  outline: none;
}

.iconOnlyTabButtonBottomOver {
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #a7e1c1;
  border-top: 0px solid transparent;
  border-bottom: 0px solid #a7e1c1;
  opacity: 0.9;
  transition: color 0.2s, background-color, opacity;
  box-shadow: none;
}

.iconOnlyTabButtonBottomSelected {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 0px solid #a7e1c1;
  opacity: 1;
  border-image: none 1 100%;
}

.iconOnlyTabButtonBottomSelectedOver {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 0px solid #a7e1c1;
  border-image: none 1 100%;
  box-shadow: none;
}

.iconOnlyTabButtonBottomSelectedFocused {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 0px solid #a7e1c1;
}

.iconOnlyTabButtonBottomFocused {
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 0px solid #a7e1c1;
}

.iconOnlyTabButtonBottomFocusedOver {
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 0px solid #a7e1c1;
  box-shadow: none;
}

.iconOnlyTabButtonBottomSelectedFocusedOver {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 0px solid #a7e1c1;
  border-image: none 1 100%;
  box-shadow: none;
}

.iconOnlyTabButtonBottomDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 0px solid #a7e1c1;
}

.iconOnlyTabButtonBottomSelectedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 0px solid #a7e1c1;
}

.iconOnlyTabButtonBottomFocusedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 0px solid #a7e1c1;
}

.iconOnlyTabButtonBottomSelectedFocusedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 0px solid #a7e1c1;
}

.iconOnlyTabButtonBottomDisabled,
.iconOnlyTabButtonBottomSelectedDisabled {
  color: #ababab;
  background-color: transparent;
  border: 3px solid #dadada;
  margin-right: 3px;
  border-top: 0px solid transparent;
  border-bottom: 0px solid transparent;
}

.iconOnlyTabButtonLeft,
.iconOnlyTabButtonLeftOver,
.iconOnlyTabButtonLeftDown,
.iconOnlyTabButtonLeftFocused,
.iconOnlyTabButtonLeftFocusedOver,
.iconOnlyTabButtonLeftFocusedDown,
.iconOnlyTabButtonLeftSelected,
.iconOnlyTabButtonLeftSelectedOver,
.iconOnlyTabButtonLeftSelectedDown,
.iconOnlyTabButtonLeftSelectedFocused,
.iconOnlyTabButtonLeftSelectedFocusedOver,
.iconOnlyTabButtonLeftSelectedFocusedDown,
.iconOnlyTabButtonLeftSelectedDisabled,
.iconOnlyTabButtonLeftDisabled {
  font-size: 12px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-weight: 500;
  color: #444444;
  background-color: transparent;
  border: 3px solid transparent;
  border-right: 0px solid transparent;
  border-left: 0px solid transparent;
  border-radius: 0px 0px 0px 0px;
  padding: 12px 0px;
  text-decoration: none;
  background-image: initial;
  opacity: 1;
  transition: opacity 0.2s;
  border-image: linear-gradient(to top, transparent, transparent) 100% 1;
  outline: none;
}

.iconOnlyTabButtonLeftOver {
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #a7e1c1;
  border-right: 0px solid transparent;
  border-left: 0px solid #a7e1c1;
  opacity: 0.9;
  transition: color 0.2s, background-color, opacity;
  box-shadow: none;
}

.iconOnlyTabButtonLeftSelected {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 0px solid #a7e1c1;
  opacity: 1;
  border-image: none 100% 1;
}

.iconOnlyTabButtonLeftSelectedOver {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 0px solid #a7e1c1;
  border-image: none 100% 1;
  box-shadow: none;
}

.iconOnlyTabButtonLeftSelectedFocused {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 0px solid #a7e1c1;
}

.iconOnlyTabButtonLeftFocused {
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 0px solid #a7e1c1;
}

.iconOnlyTabButtonLeftFocusedOver {
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 0px solid #a7e1c1;
  box-shadow: none;
}

.iconOnlyTabButtonLeftSelectedFocusedOver {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 0px solid #a7e1c1;
  border-image: none 100% 1;
  box-shadow: none;
}

.iconOnlyTabButtonLeftDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 0px solid #a7e1c1;
}

.iconOnlyTabButtonLeftSelectedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 0px solid #a7e1c1;
}

.iconOnlyTabButtonLeftFocusedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 0px solid #a7e1c1;
}

.iconOnlyTabButtonLeftSelectedFocusedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 0px solid #a7e1c1;
}

.iconOnlyTabButtonLeftDisabled,
.iconOnlyTabButtonLeftSelectedDisabled {
  color: #ababab;
  background-color: transparent;
  border: 3px solid #dadada;
  margin-right: 3px;
  border-right: 0px solid transparent;
  border-left: 0px solid transparent;
}

.iconOnlyTabButtonRight,
.iconOnlyTabButtonRightOver,
.iconOnlyTabButtonRightDown,
.iconOnlyTabButtonRightFocused,
.iconOnlyTabButtonRightFocusedOver,
.iconOnlyTabButtonRightFocusedDown,
.iconOnlyTabButtonRightSelected,
.iconOnlyTabButtonRightSelectedOver,
.iconOnlyTabButtonRightSelectedDown,
.iconOnlyTabButtonRightSelectedFocused,
.iconOnlyTabButtonRightSelectedFocusedOver,
.iconOnlyTabButtonRightSelectedFocusedDown,
.iconOnlyTabButtonRightSelectedDisabled,
.iconOnlyTabButtonRightDisabled {
  font-size: 12px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-weight: 500;
  color: #444444;
  background-color: transparent;
  border: 3px solid transparent;
  border-left: 0px solid transparent;
  border-right: 0px solid transparent;
  border-radius: 0px 0px 0px 0px;
  padding: 12px 0px;
  text-decoration: none;
  background-image: initial;
  opacity: 1;
  transition: opacity 0.2s;
  border-image: linear-gradient(to top, transparent, transparent) 100% 1;
  outline: none;
}

.iconOnlyTabButtonRightOver {
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #a7e1c1;
  border-left: 0px solid transparent;
  border-right: 0px solid #a7e1c1;
  opacity: 0.9;
  transition: color 0.2s, background-color, opacity;
  box-shadow: none;
}

.iconOnlyTabButtonRightSelected {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 0px solid #a7e1c1;
  opacity: 1;
  border-image: none 100% 1;
}

.iconOnlyTabButtonRightSelectedOver {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 0px solid #a7e1c1;
  border-image: none 100% 1;
  box-shadow: none;
}

.iconOnlyTabButtonRightSelectedFocused {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 0px solid #a7e1c1;
}

.iconOnlyTabButtonRightFocused {
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 0px solid #a7e1c1;
}

.iconOnlyTabButtonRightFocusedOver {
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 0px solid #a7e1c1;
  box-shadow: none;
}

.iconOnlyTabButtonRightSelectedFocusedOver {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 0px solid #a7e1c1;
  border-image: none 100% 1;
  box-shadow: none;
}

.iconOnlyTabButtonRightDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 0px solid #a7e1c1;
}

.iconOnlyTabButtonRightSelectedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 0px solid #a7e1c1;
}

.iconOnlyTabButtonRightFocusedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 0px solid #a7e1c1;
}

.iconOnlyTabButtonRightSelectedFocusedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #38a37e;
  background-color: transparent;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 0px solid #a7e1c1;
}

.iconOnlyTabButtonRightDisabled,
.iconOnlyTabButtonRightSelectedDisabled {
  color: #ababab;
  background-color: transparent;
  border: 3px solid #dadada;
  margin-right: 3px;
  border-left: 0px solid transparent;
  border-right: 0px solid transparent;
}

/*============================================================
    TabSet CSS tabs
		tabSet.simpleTabIconOnlyBaseStyle
============================================================*/
/* styles for simple css-styled tabs*/
.secondaryTabButtonTop,
.secondaryTabButtonTopOver,
.secondaryTabButtonTopDown,
.secondaryTabButtonTopFocused,
.secondaryTabButtonTopFocusedOver,
.secondaryTabButtonTopFocusedDown,
.secondaryTabButtonTopSelected,
.secondaryTabButtonTopSelectedOver,
.secondaryTabButtonTopSelectedDown,
.secondaryTabButtonTopSelectedFocused,
.secondaryTabButtonTopSelectedFocusedOver,
.secondaryTabButtonTopSelectedFocusedDown,
.secondaryTabButtonTopSelectedDisabled,
.secondaryTabButtonTopDisabled {
  font-size: 11px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #3db271;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 3px solid #3db271;
  border-radius: 0px 0px 0px 0px;
  padding: 0px 12px;
  text-decoration: none;
  background-image: linear-gradient(to bottom, #3db271 0%, #38a37e 100%);
  opacity: 1;
  transition: opacity 0.2s;
  border-image: linear-gradient(to top, transparent, transparent) 1 100%;
  outline: none;
}

.secondaryTabButtonTopOver {
  color: #ffffff;
  background-color: #3db271;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 3px solid #3db271;
  opacity: 0.9;
  transition: color 0.2s, background-color, opacity;
  box-shadow: none;
}

.secondaryTabButtonTopSelected {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #5bc78b;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 3px solid #3db271;
  opacity: 1;
  border-image: none 1 100%;
}

.secondaryTabButtonTopSelectedOver {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #5bc78b;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 3px solid #3db271;
  border-image: none 1 100%;
  box-shadow: none;
}

.secondaryTabButtonTopSelectedFocused {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #48c07e;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 3px solid #3db271;
}

.secondaryTabButtonTopFocused {
  color: #ffffff;
  background-color: #48c07e;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 3px solid #3db271;
}

.secondaryTabButtonTopFocusedOver {
  color: #ffffff;
  background-color: #3db271;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 3px solid #3db271;
  box-shadow: none;
}

.secondaryTabButtonTopSelectedFocusedOver {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #ffffff;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 3px solid #3db271;
  border-image: none 1 100%;
  box-shadow: none;
}

.secondaryTabButtonTopDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #48c07e;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 3px solid #3db271;
}

.secondaryTabButtonTopSelectedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #48c07e;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 3px solid #3db271;
}

.secondaryTabButtonTopFocusedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #48c07e;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 3px solid #3db271;
}

.secondaryTabButtonTopSelectedFocusedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #48c07e;
  border: 3px solid #3db271;
  border-bottom: 0px solid transparent;
  border-top: 3px solid #3db271;
}

.secondaryTabButtonTopDisabled,
.secondaryTabButtonTopSelectedDisabled {
  color: #ffffff;
  background-color: #9cd1bf;
  border: 3px solid #dadada;
  margin-right: 3px;
  border-bottom: 0px solid transparent;
  border-top: 3px solid #3db271;
}

.secondaryTabButtonBottom,
.secondaryTabButtonBottomOver,
.secondaryTabButtonBottomDown,
.secondaryTabButtonBottomFocused,
.secondaryTabButtonBottomFocusedOver,
.secondaryTabButtonBottomFocusedDown,
.secondaryTabButtonBottomSelected,
.secondaryTabButtonBottomSelectedOver,
.secondaryTabButtonBottomSelectedDown,
.secondaryTabButtonBottomSelectedFocused,
.secondaryTabButtonBottomSelectedFocusedOver,
.secondaryTabButtonBottomSelectedFocusedDown,
.secondaryTabButtonBottomSelectedDisabled,
.secondaryTabButtonBottomDisabled {
  font-size: 11px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #3db271;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 3px solid #3db271;
  border-radius: 0px 0px 0px 0px;
  padding: 0px 12px;
  text-decoration: none;
  background-image: linear-gradient(to bottom, #3db271 0%, #38a37e 100%);
  opacity: 1;
  transition: opacity 0.2s;
  border-image: linear-gradient(to top, transparent, transparent) 1 100%;
  outline: none;
}

.secondaryTabButtonBottomOver {
  color: #ffffff;
  background-color: #3db271;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 3px solid #3db271;
  opacity: 0.9;
  transition: color 0.2s, background-color, opacity;
  box-shadow: none;
}

.secondaryTabButtonBottomSelected {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #5bc78b;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 3px solid #3db271;
  opacity: 1;
  border-image: none 1 100%;
}

.secondaryTabButtonBottomSelectedOver {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #5bc78b;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 3px solid #3db271;
  border-image: none 1 100%;
  box-shadow: none;
}

.secondaryTabButtonBottomSelectedFocused {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #48c07e;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 3px solid #3db271;
}

.secondaryTabButtonBottomFocused {
  color: #ffffff;
  background-color: #48c07e;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 3px solid #3db271;
}

.secondaryTabButtonBottomFocusedOver {
  color: #ffffff;
  background-color: #3db271;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 3px solid #3db271;
  box-shadow: none;
}

.secondaryTabButtonBottomSelectedFocusedOver {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #ffffff;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 3px solid #3db271;
  border-image: none 1 100%;
  box-shadow: none;
}

.secondaryTabButtonBottomDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #48c07e;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 3px solid #3db271;
}

.secondaryTabButtonBottomSelectedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #48c07e;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 3px solid #3db271;
}

.secondaryTabButtonBottomFocusedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #48c07e;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 3px solid #3db271;
}

.secondaryTabButtonBottomSelectedFocusedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #48c07e;
  border: 3px solid #3db271;
  border-top: 0px solid transparent;
  border-bottom: 3px solid #3db271;
}

.secondaryTabButtonBottomDisabled,
.secondaryTabButtonBottomSelectedDisabled {
  color: #ffffff;
  background-color: #9cd1bf;
  border: 3px solid #dadada;
  margin-right: 3px;
  border-top: 0px solid transparent;
  border-bottom: 3px solid #3db271;
}

.secondaryTabButtonLeft,
.secondaryTabButtonLeftOver,
.secondaryTabButtonLeftDown,
.secondaryTabButtonLeftFocused,
.secondaryTabButtonLeftFocusedOver,
.secondaryTabButtonLeftFocusedDown,
.secondaryTabButtonLeftSelected,
.secondaryTabButtonLeftSelectedOver,
.secondaryTabButtonLeftSelectedDown,
.secondaryTabButtonLeftSelectedFocused,
.secondaryTabButtonLeftSelectedFocusedOver,
.secondaryTabButtonLeftSelectedFocusedDown,
.secondaryTabButtonLeftSelectedDisabled,
.secondaryTabButtonLeftDisabled {
  font-size: 11px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #3db271;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 3px solid #3db271;
  border-radius: 0px 0px 0px 0px;
  padding: 12px 0px;
  text-decoration: none;
  background-image: linear-gradient(to bottom, #3db271 0%, #38a37e 100%);
  opacity: 1;
  transition: opacity 0.2s;
  border-image: linear-gradient(to top, transparent, transparent) 100% 1;
  outline: none;
}

.secondaryTabButtonLeftOver {
  color: #ffffff;
  background-color: #3db271;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 3px solid #3db271;
  opacity: 0.9;
  transition: color 0.2s, background-color, opacity;
  box-shadow: none;
}

.secondaryTabButtonLeftSelected {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #5bc78b;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 3px solid #3db271;
  opacity: 1;
  border-image: none 100% 1;
}

.secondaryTabButtonLeftSelectedOver {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #5bc78b;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 3px solid #3db271;
  border-image: none 100% 1;
  box-shadow: none;
}

.secondaryTabButtonLeftSelectedFocused {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #48c07e;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 3px solid #3db271;
}

.secondaryTabButtonLeftFocused {
  color: #ffffff;
  background-color: #48c07e;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 3px solid #3db271;
}

.secondaryTabButtonLeftFocusedOver {
  color: #ffffff;
  background-color: #3db271;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 3px solid #3db271;
  box-shadow: none;
}

.secondaryTabButtonLeftSelectedFocusedOver {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #ffffff;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 3px solid #3db271;
  border-image: none 100% 1;
  box-shadow: none;
}

.secondaryTabButtonLeftDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #48c07e;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 3px solid #3db271;
}

.secondaryTabButtonLeftSelectedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #48c07e;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 3px solid #3db271;
}

.secondaryTabButtonLeftFocusedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #48c07e;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 3px solid #3db271;
}

.secondaryTabButtonLeftSelectedFocusedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #48c07e;
  border: 3px solid #3db271;
  border-right: 0px solid transparent;
  border-left: 3px solid #3db271;
}

.secondaryTabButtonLeftDisabled,
.secondaryTabButtonLeftSelectedDisabled {
  color: #ffffff;
  background-color: #9cd1bf;
  border: 3px solid #dadada;
  margin-right: 3px;
  border-right: 0px solid transparent;
  border-left: 3px solid #3db271;
}

.secondaryTabButtonRight,
.secondaryTabButtonRightOver,
.secondaryTabButtonRightDown,
.secondaryTabButtonRightFocused,
.secondaryTabButtonRightFocusedOver,
.secondaryTabButtonRightFocusedDown,
.secondaryTabButtonRightSelected,
.secondaryTabButtonRightSelectedOver,
.secondaryTabButtonRightSelectedDown,
.secondaryTabButtonRightSelectedFocused,
.secondaryTabButtonRightSelectedFocusedOver,
.secondaryTabButtonRightSelectedFocusedDown,
.secondaryTabButtonRightSelectedDisabled,
.secondaryTabButtonRightDisabled {
  font-size: 11px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #ffffff;
  background-color: #3db271;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 3px solid #3db271;
  border-radius: 0px 0px 0px 0px;
  padding: 12px 0px;
  text-decoration: none;
  background-image: linear-gradient(to bottom, #3db271 0%, #38a37e 100%);
  opacity: 1;
  transition: opacity 0.2s;
  border-image: linear-gradient(to top, transparent, transparent) 100% 1;
  outline: none;
}

.secondaryTabButtonRightOver {
  color: #ffffff;
  background-color: #3db271;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 3px solid #3db271;
  opacity: 0.9;
  transition: color 0.2s, background-color, opacity;
  box-shadow: none;
}

.secondaryTabButtonRightSelected {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #5bc78b;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 3px solid #3db271;
  opacity: 1;
  border-image: none 100% 1;
}

.secondaryTabButtonRightSelectedOver {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #5bc78b;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 3px solid #3db271;
  border-image: none 100% 1;
  box-shadow: none;
}

.secondaryTabButtonRightSelectedFocused {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #48c07e;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 3px solid #3db271;
}

.secondaryTabButtonRightFocused {
  color: #ffffff;
  background-color: #48c07e;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 3px solid #3db271;
}

.secondaryTabButtonRightFocusedOver {
  color: #ffffff;
  background-color: #3db271;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 3px solid #3db271;
  box-shadow: none;
}

.secondaryTabButtonRightSelectedFocusedOver {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #ffffff;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 3px solid #3db271;
  border-image: none 100% 1;
  box-shadow: none;
}

.secondaryTabButtonRightDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #48c07e;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 3px solid #3db271;
}

.secondaryTabButtonRightSelectedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #48c07e;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 3px solid #3db271;
}

.secondaryTabButtonRightFocusedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #48c07e;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 3px solid #3db271;
}

.secondaryTabButtonRightSelectedFocusedDown {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ffffff;
  background-color: #48c07e;
  border: 3px solid #3db271;
  border-left: 0px solid transparent;
  border-right: 3px solid #3db271;
}

.secondaryTabButtonRightDisabled,
.secondaryTabButtonRightSelectedDisabled {
  color: #ffffff;
  background-color: #9cd1bf;
  border: 3px solid #dadada;
  margin-right: 3px;
  border-left: 0px solid transparent;
  border-right: 3px solid #3db271;
}

/* tabButtonLite - simple tabButton with no borders, only modifies color/background-color with state */
.tabButtonLiteLeft,
.tabButtonLiteLeftOver,
.tabButtonLiteLeftDown,
.tabButtonLiteLeftFocused,
.tabButtonLiteLeftFocusedOver,
.tabButtonLiteLeftFocusedDown,
.tabButtonLiteLeftSelected,
.tabButtonLiteLeftSelectedOver,
.tabButtonLiteLeftSelectedDown,
.tabButtonLiteLeftSelectedFocused,
.tabButtonLiteLeftSelectedFocusedOver,
.tabButtonLiteLeftSelectedFocusedDown,
.tabButtonLiteLeftSelectedDisabled,
.tabButtonLiteLeftDisabled {
  font-size: 11px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #444444;
  background-color: #ffffff;
  border: none;
}

/* tabButtonLite over */
.tabButtonLiteLeftOver,
.tabButtonLiteLeftFocusedOver,
.tabButtonLiteLeftSelectedOver,
.tabButtonLiteLeftSelectedFocusedOver {
  color: #444444;
  background-color: #3db271;
}

/* tabButtonLite down */
.tabButtonLiteLeftDown,
.tabButtonLiteLeftFocusedDown,
.tabButtonLiteLeftSelectedDown,
.tabButtonLiteLeftSelectedFocusedDown {
  color: #444444;
  background-color: #55c580;
}

/* tabButtonLite focused */
.tabButtonLiteLeftFocused,
.tabButtonLiteLeftSelectedFocused {
  color: #444444;
}

/* tabButtonLite selected */
.tabButtonLiteLeftSelected {
  background-color: #55c580;
}

/* tabButtonLite selectedFocused */
.tabButtonLiteLeftSelectedFocused {
  background-color: #55c580;
}

/* tabButtonLite right */
.tabButtonLiteRight,
.tabButtonLiteRightOver,
.tabButtonLiteRightDown,
.tabButtonLiteRightFocused,
.tabButtonLiteRightFocusedOver,
.tabButtonLiteRightFocusedDown,
.tabButtonLiteRightSelected,
.tabButtonLiteRightSelectedOver,
.tabButtonLiteRightSelectedDown,
.tabButtonLiteRightSelectedFocused,
.tabButtonLiteRightSelectedFocusedOver,
.tabButtonLiteRightSelectedFocusedDown,
.tabButtonLiteRightSelectedDisabled,
.tabButtonLiteRightDisabled {
  font-size: 11px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #444444;
  background-color: #ffffff;
  border: none;
}

/* tabButtonLite right over */
.tabButtonLiteRightOver,
.tabButtonLiteRightFocusedOver,
.tabButtonLiteRightSelectedOver,
.tabButtonLiteRightSelectedFocusedOver {
  color: #444444;
  background-color: #3db271;
}

/* tabButtonLite right down */
.tabButtonLiteRightDown,
.tabButtonLiteRightFocusedDown,
.tabButtonLiteRightSelectedDown,
.tabButtonLiteRightSelectedFocusedDown {
  color: #444444;
  background-color: #55c580;
}

/* tabButtonLite right focused */
.tabButtonLiteRightFocused,
.tabButtonLiteRightSelectedFocused {
  color: #444444;
}

/* tabButtonLite right selected */
.tabButtonLiteRightSelected {
  background-color: #55c580;
}

/* tabButtonLite right selectedFocused */
.tabButtonLiteRightSelectedFocused {
  background-color: #55c580;
}

/*============================================================
    7) SectionStack and NavigationBar
============================================================*/
.sectionStack {
  border: 1px solid #d0d0d0;
  border-top: none;
  background-color: transparent;
  border-radius: 2px;
}

.sectionHeaderTitleopened,
.sectionHeaderTitleclosed {
  background-color: #f0f0f0;
  color: #616161;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.sectionHeaderTitleOveropened,
.sectionHeaderTitleOverclosed {
  color: #616161;
  background-color: #f0f0f0;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.sectionHeaderTitleDisabledopened,
.sectionHeaderTitleDisabledclosed {
  background-color: #f0f0f0;
  color: #ababab;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.sectionHeaderopened,
.sectionHeaderclosed,
.sectionHeaderDisabledopened,
.sectionHeaderDisabledclosed,
.sectionHeaderOveropened,
.sectionHeaderOverclosed,
.sectionHeaderDownopened,
.sectionHeaderDownclosed {
  background-color: #f0f0f0;
  color: #616161;
  padding: 0px 0px 0px 10px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  border-top: 1px solid #d0d0d0;
  border-bottom: 1px solid #d0d0d0;
  border-radius: 2px;
  outline: none;
}

.sectionHeaderOveropened,
.sectionHeaderOverclosed {
  background-color: #f0f0f0;
  color: #616161;
}

.sectionHeaderDownopened,
.sectionHeaderDownclosed {
  background-color: #f0f0f0;
  color: #616161;
}

.sectionHeaderDisabledopened,
.sectionHeaderDisabledclosed {
  background-color: #f0f0f0;
  opacity: 1;
  color: #ababab;
  border-top: 1px solid #dadada;
  border-bottom: 1px solid #dadada;
}

/* NavigationBar parts */
.navToolbar {
  background-color: #f0f0f0;
  border: 1px solid #d0d0d0;
  border-radius: 2px;
  outline: none;
}

.navBarAddedFadeIn {
  transition: opacity calc(0.5 * 450ms) calc(0.5 * 450ms);
}

.navBarRemovedFadeOut {
  transition: opacity calc(0.5 * 450ms);
}

.navBarFadeIn {
  transition: opacity calc((1 - 0.3) * 450ms) calc(0.3 * 450ms);
}

.navBarFadeOut {
  transition: opacity calc(0.7 * 450ms);
}

.navBarOldLeftButtonBack {
  transition-property: opacity, transform;
  transition-duration: calc(0.4 * 450ms), 450ms;
}

.navBarNewLeftButtonBack,
.navBarNewLeftButtonForward {
  transition-property: opacity, transform;
  transition-duration: calc((1 - 0.625 * 0.4) * 450ms), 450ms;
  transition-delay: calc(0.625 * 0.4 * 450ms), 0ms;
}

.navBarOldLeftButtonForward {
  transition-property: opacity, transform;
  transition-duration: calc(0.7 * 450ms), 450ms;
}

.navBarOldTitleBack,
.navBarOldTitleForward {
  transition-property: opacity, transform;
  transition-duration: calc(0.4 * 450ms), 450ms;
}

.navBarNewTitleBack,
.navBarNewTitleForward {
  transition-property: opacity, transform;
  transition-duration: calc((1 - 0.625 * 0.3) * 450ms), 450ms;
  transition-delay: calc(0.625 * 0.3 * 450ms), 0ms;
}

.navButton,
.navButtonOver,
.navButtonFocused,
.navButtonFocusedOver,
.navButtonDown,
.navButtonFocusedDown,
.navButtonSelected,
.navButtonSelectedFocused,
.navButtonSelectedDown,
.navButtonSelectedFocusedDown,
.navButtonSelectedOver,
.navButtonSelectedFocusedOver,
.navButtonDisabled,
.navButtonSelectedDisabled {
  /* !important to override the cellpadding attribute */
  padding: 0px 10px 0px 7px !important;
  color: #444444;
  border-radius: 3px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 24px;
  border: 1px solid transparent;
  background-color: #f0f0f0;
}

.navButtonDown,
.navButtonFocusedDown,
.navButtonSelectedDown,
.navButtonSelectedFocusedDown {
  background-color: #616161;
  border: 1px solid #929292;
  color: #f0f0f0;
}

.navButtonOver,
.navButtonFocusedOver {
  border: 1px solid #929292;
}

.navButtonDisabled,
.navForwardButtonSelectedDisabled {
  background-color: #f0f0f0;
  color: #ababab;
}

.navBarHeader {
  background-color: #f0f0f0;
  color: #616161;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: bold;
  /* !important to override the cellpadding attribute */
  padding: 0px;
}

.navBackButton,
.navBackButtonOver,
.navBackButtonDown,
.navBackButtonFocused,
.navBackButtonFocusedOver,
.navBackButtonFocusedDown,
.navBackButtonSelected,
.navBackButtonSelectedFocused,
.navBackButtonSelectedDown,
.navBackButtonSelectedFocusedDown,
.navBackButtonSelectedOver,
.navBackButtonSelectedFocusedOver,
.navBackButtonDisabled,
.navBackButtonSelectedDisabled {
  /* !important to override the cellpadding attribute */
  padding: 0px 10px 0px 7px !important;
  color: #444444;
  border-radius: 3px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 24px;
  border: 1px solid transparent;
  background-color: #f0f0f0;
}

.navBackButtonDown,
.navBackButtonFocusedDown,
.navBackButtonSelectedDown,
.navBackButtonSelectedFocusedDown {
  background-color: #616161;
  border: 1px solid #929292;
  color: #f0f0f0;
}

.navBackButtonOver,
.navBackButtonFocusedOver {
  border: 1px solid #929292;
}

.navBackButtonDisabled,
.navBackButtonSelectedDisabled {
  background-color: #f0f0f0;
  color: #ababab;
}

.navForwardButton,
.navForwardButtonOver,
.navForwardButtonFocused,
.navForwardButtonFocusedOver,
.navForwardButtonDown,
.navForwardButtonFocusedDown,
.navForwardButtonSelected,
.navForwardButtonSelectedFocused,
.navForwardButtonSelectedDown,
.navForwardButtonSelectedFocusedDown,
.navForwardButtonSelectedOver,
.navForwardButtonSelectedFocusedOver,
.navForwardButtonDisabled,
.navForwardButtonSelectedDisabled {
  /* !important to override the cellpadding attribute */
  padding: 0px 10px 0px 10px !important;
  color: #444444;
  border-radius: 3px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 24px;
  border: 1px solid transparent;
  background-color: #f0f0f0;
}

.navForwardButtonDown,
.navForwardButtonFocusedDown,
.navForwardButtonSelectedDown,
.navForwardButtonSelectedFocusedDown {
  background-color: #616161;
  border: 1px solid #929292;
  color: #f0f0f0;
}

.navForwardButtonOver,
.navForwardButtonFocusedOver {
  border: 1px solid #929292;
}

.navForwardButtonDisabled,
.navForwardButtonSelectedDisabled {
  background-color: #f0f0f0;
  color: #ababab;
}

/* NavPanel styling */
/* navPanel, navPanelBody, navItem, navItemHeader, navDeck */
.navPanel {
  border: 1px solid #d0d0d0;
}

.navPanelBody {
  background-color: #ffffff;
}

.navItemHeader {
  color: #616161;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  background-color: #f0f0f0;
  padding-left: 0px 0px 0px 10px;
  font-weight: bold;
  border-top: 1px solid #d0d0d0;
  border-bottom: 1px solid #d0d0d0;
  border-radius: 2px;
  outline: none;
}

.navDeck {
  color: #444444;
  background-color: #ffffff;
}

/* NavPanel navGrid styling */
/*----------------------------------------------------------------------
   navPanel.navItemBaseStyle - navItem - customized version of .treeCell
------------------------------------------------------------------------*/
.navItem,
.navItemDark,
.navItemOver,
.navItemOverDark,
.navItemSelected,
.navItemSelectedDark,
.navItemSelectedOver,
.navItemSelectedOverDark,
.navItemDisabled,
.navItemDisabledDark {
  background-color: #ffffff;
  color: #5b5b5b;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-overflow: ellipsis;
  padding: 0px 3px 0px 3px;
}

.navItemDark {
  background-color: #fafafa;
}

.navItemOver,
.navItemOverDark {
  background-color: #f5f8fa;
  color: #5b5b5b;
}

.navItemSelected,
.navItemSelectedDark {
  color: #5b5b5b;
  background-color: #f0f0f0;
}

.navItemSelectedOver,
.navItemSelectedOverDark {
  color: #5b5b5b;
  background-color: #f0f0f0;
  box-shadow: 0 0 5px #f0f0f0;
}

.navItemDisabled,
.navItemDisabledDark {
  background-color: #f9f9f9;
  color: #ababab;
}

/* alternate column styling in navItem */
.navItemAltCol,
.navItemDarkAltCol,
.navItemOverAltCol,
.navItemOverDarkAltCol,
.navItemSelectedAltCol,
.navItemSelectedOverAltCol,
.navItemSelectedDarkAltCol,
.navItemSelectedOverDarkAltCol,
.navItemPendingSelectedAltCol,
.navItemPendingSelectedDarkAltCol,
.navItemPendingSelectedOverAltCol,
.navItemPendingSelectedOverDarkAltCol,
.navItemDeselectedAltCol,
.navItemDeselectedDarkAltCol,
.navItemDeselectedOverAltCol,
.navItemDeselectedOverDarkAltCol,
.navItemDisabledAltCol,
.navItemDisabledDarkAltCol {
  font-size: 12px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #5b5b5b;
  text-overflow: ellipsis;
  border: none;
  border-bottom: 1px solid #e8ebed;
  padding: 0px 3px 0px 3px;
}

.navItemDisabledAltCol,
.navItemDisabledDarkAltCol {
  background-color: #f9f9f9;
  cursor: not-allowed;
  color: #ababab;
}

.navItemAltCol {
  background-color: #fafafa;
}

.navItemDarkAltCol {
  background-color: whitesmoke;
}

.navItemOverAltCol,
.navItemOverDarkAltCol {
  background-color: #f5f8fa;
  color: #5b5b5b;
}

.navItemSelectedAltCol,
.navItemSelectedDarkAltCol,
.navItemSelectedOverAltCol,
.navItemSelectedOverDarkAltCol,
.navItemPendingSelectedAltCol,
.navItemPendingSelectedDarkAltCol,
.navItemPendingSelectedOverAltCol,
.navItemPendingSelectedOverDarkAltCol {
  background-color: #f0f0f0;
  color: #5b5b5b;
}

.navItemSelectedOverAltCol,
.navItemSelectedOverDarkAltCol,
.navItemPendingSelectedOverAltCol,
.navItemPendingSelectedOverDarkAltCol {
  background-color: #f0f0f0;
}

/*============================================================
    8) Forms
============================================================*/
/* general form styles */
.form {
  background-color: transparent;
  border: none;
  border-radius: 0px;
  padding: 0px;
  color: #444444;
}

.formDisabled {
  color: #ababab;
}

/* formTitle styles */
.formTitle,
.formTitleRTL,
.formTitleOver,
.formTitleOverRTL,
.formTitleFocused,
.formTitleFocusedRTL,
.formTitleFocusedOver,
.formTitleFocusedOverRTL,
.formTitleDisabled,
.formTitleDisabledRTL {
  -webkit-text-size-adjust: 100%;
  background-color: transparent;
  color: #444444;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: 2px 2px;
}

/* formTitle pending styles */
.formTitlePending,
.formTitlePendingRTL,
.formTitlePendingOver,
.formTitlePendingOverRTL,
.formTitlePendingFocused,
.formTitlePendingFocusedRTL,
.formTitlePendingFocusedOver,
.formTitlePendingFocusedOverRTL,
.formTitlePendingDisabled,
.formTitlePendingDisabledRTL,
.formTitlePendingError,
.formTitlePendingErrorRTL,
.formTitlePendingErrorFocused,
.formTitlePendingErrorFocusedRTL,
.formTitlePendingErrorFocusedOver,
.formTitlePendingErrorFocusedOverRTL {
  -webkit-text-size-adjust: 100%;
  background-color: transparent;
  color: #444444;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: 2px 2px;
}

/* formTitle error styles */
.formTitleError,
.formTitleErrorRTL,
.formTitleErrorFocused,
.formTitleErrorFocusedRTL,
.formTitleErrorFocusedOver,
.formTitleErrorFocusedOverRTL,
.formTitleErrorDisabled,
.formTitleErrorDisabledRTL,
.formTitlePendingError,
.formTitlePendingErrorRTL,
.formTitlePendingErrorFocused,
.formTitlePendingErrorFocusedRTL,
.formTitlePendingErrorFocusedOver,
.formTitlePendingErrorFocusedOverRTL {
  -webkit-text-size-adjust: 100%;
  background-color: transparent;
  color: #8f2227;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: 2px 2px;
}

/* formTitle disabled styles */
.formTitleDisabled,
.formTitleDisabledRTL,
.formTitleErrorDisabled,
.formTitleErrorDisabledRTL,
.formTitleDisabledError,
.formTitleDisabledErrorRTL,
.formTitlePendingDisabled,
.formTitlePendingDisabledRTL {
  -webkit-text-fill-color: #ababab;
  color: #ababab;
}

/* end formTitle */
/* formTitleVertical styles */
.formTitleVertical,
.formTitleVerticalRTL,
.formTitleVerticalOver,
.formTitleVerticalOverRTL,
.formTitleVerticalFocused,
.formTitleVerticalFocusedRTL,
.formTitleVerticalFocusedOver,
.formTitleVerticalFocusedOverRTL,
.formTitleVerticalDisabled,
.formTitleVerticalDisabledRTL {
  -webkit-text-size-adjust: 100%;
  background-color: transparent;
  color: #444444;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: 4px 0px 2px 0px;
}

/* formTitleVertical pending styles */
.formTitleVerticalPending,
.formTitleVerticalPendingRTL,
.formTitleVerticalPendingOver,
.formTitleVerticalPendingOverRTL,
.formTitleVerticalPendingFocused,
.formTitleVerticalPendingFocusedRTL,
.formTitleVerticalPendingFocusedOver,
.formTitleVerticalPendingFocusedOverRTL,
.formTitleVerticalPendingDisabled,
.formTitleVerticalPendingDisabledRTL,
.formTitleVerticalPendingError,
.formTitleVerticalPendingErrorRTL {
  -webkit-text-size-adjust: 100%;
  background-color: transparent;
  color: #444444;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: 4px 0px 2px 0px;
}

/* formTitleVertical error styles */
.formTitleVerticalError,
.formTitleVerticalErrorRTL,
.formTitleVerticalErrorFocused,
.formTitleVerticalErrorFocusedRTL,
.formTitleVerticalErrorFocusedOver,
.formTitleVerticalErrorFocusedOverRTL,
.formTitleVerticalErrorDisabled,
.formTitleVerticalErrorDisabledRTL,
.formTitleVerticalPendingError,
.formTitleVerticalPendingErrorRTL {
  -webkit-text-size-adjust: 100%;
  background-color: transparent;
  color: #8f2227;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: 4px 0px 2px 0px;
}

/* formTitleVertical disabled styles */
.formTitleVerticalDisabled,
.formTitleVerticalDisabledRTL,
.formTitleVerticalErrorDisabled,
.formTitleVerticalErrorDisabledRTL,
.formTitleVerticalDisabledError,
.formTitleVerticalDisabledErrorRTL,
.formTitleVerticalPendingDisabled,
.formTitleVerticalPendingDisabledRTL {
  -webkit-text-fill-color: #ababab;
  color: #ababab;
}

/* end formTitle */
/* formCell styles */
.formCell,
.formCellRTL,
.formCellOver,
.formCellOverRTL,
.formCellFocused,
.formCellFocusedRTL,
.formCellFocusedOver,
.formCellFocusedOverRTL,
.formCellDisabled,
.formCellDisabledRTL,
.formCellError,
.formCellErrorRTL,
.formCellErrorOver,
.formCellErrorOverRTL,
.formCellErrorFocused,
.formCellErrorFocusedRTL,
.formCellErrorFocusedOver,
.formCellErrorFocusedOverRTL,
.formCellErrorDisabled,
.formCellErrorDisabledRTL,
.formCellPending,
.formCellPendingRTL,
.formCellPendingOver,
.formCellPendingOverRTL,
.formCellPendingFocused,
.formCellPendingFocusedRTL,
.formCellPendingFocusedOver,
.formCellPendingFocusedOverRTL,
.formCellPendingDisabled,
.formCellPendingDisabledRTL,
.formCellPendingError,
.formCellPendingErrorRTL,
.formCellPendingErrorFocused,
.formCellPendingErrorFocusedRTL,
.formCellPendingErrorFocusedOver,
.formCellPendingErrorFocusedOverRTL {
  -webkit-text-size-adjust: 100%;
  background-color: transparent;
  color: #444444;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.formCellError,
.formCellErrorRTL,
.formCellPendingError,
.formCellPendingErrorRTL,
.formCellPendingErrorFocused,
.formCellPendingErrorFocusedRTL,
.formCellPendingErrorFocusedOver,
.formCellPendingErrorFocusedOverRTL {
  color: #8f2227;
}

.formCellDisabled,
.formCellDisabledRTL,
.formCellErrorDisabled,
.formCellErrorDisabledRTL,
.formCellPendingDisabled,
.formCellPendingDisabledRTL {
  -webkit-text-fill-color: #ababab;
  color: #ababab;
}

.formCellErrorFocused,
.formCellErrorFocusedOver {
  outline: none;
  color: #8f2227;
  border-color: #3db271;
  box-shadow: none;
}

.formCellErrorFocusedOver {
  outline: none;
  box-shadow: none;
  border: 1px solid #3db271;
}

/* end formCell */
/* formHint styles */
.formHint,
.formHintRTL,
.formHintOver,
.formHintOverRTL,
.formHintDisabled,
.formHintDisabledRTL,
.formHintError,
.formHintErrorRTL,
.formHintErrorOver,
.formHintErrorOverRTL,
.formHintErrorDisabled,
.formHintErrorDisabledRTL {
  background-color: transparent;
  color: #cccccc;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: 0px 3px 0px 3px;
}

.formHintError,
.formHintErrorRTL,
.formHintErrorOver,
.formHintErrorOverRTL,
.formHintErrorDisabled,
.formHintErrorDisabledRTL {
  color: #cccccc;
}

/* formHint disabled */
.formHintDisabled,
.formHintDisabledRTL,
.formHintErrorDisabled,
.formHintErrorDisabledRTL {
  color: #ababab;
}

/* end formHint */
/* headerItem */
.headerItem,
.headerItemRTL,
.headerItemOver,
.headerItemOverRTL,
.headerItemDisabled,
.headerItemDisabledRTL,
.headerItemError,
.headerItemErrorRTL {
  color: #4d4d4d;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  background-color: transparent;
}

/* end headerItem */
.nativeSelectItem,
.nativeSelectItemRTL,
.nativeSelectItemOver,
.nativeSelectItemOverRTL,
.nativeSelectItemFocused,
.nativeSelectItemFocusedRTL,
.nativeSelectItemFocusedOver,
.nativeSelectItemFocusedOverRTL,
.nativeSelectItemDisabled,
.nativeSelectItemDisabledRTL,
.nativeSelectItemError,
.nativeSelectItemErrorRTL,
.nativeSelectItemErrorOver,
.nativeSelectItemErrorOverRTL,
.nativeSelectItemErrorFocused,
.nativeSelectItemErrorFocusedRTL,
.nativeSelectItemErrorFocusedOver,
.nativeSelectItemErrorFocusedOverRTL,
.nativeSelectItemPending,
.nativeSelectItemPendingRTL,
.nativeSelectItemPendingOver,
.nativeSelectItemPendingOverRTL,
.nativeSelectItemPendingFocused,
.nativeSelectItemPendingFocusedRTL,
.nativeSelectItemPendingFocusedOver,
.nativeSelectItemPendingFocusedOverRTL,
.nativeSelectItemPendingDisabled,
.nativeSelectItemPendingDisabledRTL,
.nativeSelectItemPendingError,
.nativeSelectItemPendingErrorRTL {
  padding: 3px 1px;
  background-color: transparent;
  color: #5b5b5b;
  outline: none;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.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 {
  padding-right: 3px;
  background-color: transparent;
  color: #5b5b5b;
  outline: none;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.staticTextItemLite,
.staticTextItemLiteRTL,
.staticTextItemLiteOver,
.staticTextItemLiteOverRTL,
.staticTextItemLiteFocused,
.staticTextItemLiteFocusedRTL,
.staticTextItemLiteFocusedOver,
.staticTextItemLiteFocusedOverRTL,
.staticTextItemLiteDisabled,
.staticTextItemLiteDisabledRTL,
.staticTextItemLiteError,
.staticTextItemLiteErrorRTL,
.staticTextItemLiteErrorOver,
.staticTextItemLiteErrorOverRTL,
.staticTextItemLiteErrorFocused,
.staticTextItemLiteErrorFocusedRTL,
.staticTextItemLiteErrorFocusedOver,
.staticTextItemLiteErrorFocusedOverRTL,
.staticTextItemLitePending,
.staticTextItemLitePendingRTL,
.staticTextItemLitePendingOver,
.staticTextItemLitePendingOverRTL,
.staticTextItemLitePendingFocused,
.staticTextItemLitePendingFocusedRTL,
.staticTextItemLitePendingFocusedOver,
.staticTextItemLitePendingFocusedOverRTL,
.staticTextItemLitePendingDisabled,
.staticTextItemLitePendingDisabledRTL,
.staticTextItemLitePendingError,
.staticTextItemLitePendingErrorRTL,
.staticTextItemLitePendingErrorOver,
.staticTextItemLitePendingErrorOverRTL,
.staticTextItemLitePendingErrorFocused,
.staticTextItemLitePendingErrorFocusedRTL,
.staticTextItemLitePendingErrorFocusedOver,
.staticTextItemLitePendingErrorFocusedOverRTL {
  border: 1px solid transparent;
  padding: 0px 3px;
  background-color: transparent;
  color: #5b5b5b;
  outline: none;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.staticTextItemLitePending,
.staticTextItemLitePendingRTL,
.staticTextItemLitePendingOver,
.staticTextItemLitePendingOverRTL,
.staticTextItemLitePendingFocused,
.staticTextItemLitePendingFocusedRTL,
.staticTextItemLitePendingFocusedOver,
.staticTextItemLitePendingFocusedOverRTL,
.staticTextItemLitePendingDisabled,
.staticTextItemLitePendingDisabledRTL,
.staticTextItemLitePendingError,
.staticTextItemLitePendingErrorRTL,
.staticTextItemLitePendingErrorOver,
.staticTextItemLitePendingErrorOverRTL,
.staticTextItemLitePendingErrorFocused,
.staticTextItemLitePendingErrorFocusedRTL,
.staticTextItemLitePendingErrorFocusedOver,
.staticTextItemLitePendingErrorFocusedOverRTL {
  color: #0066CC;
}

.staticTextItemLiteError,
.staticTextItemLiteErrorRTL,
.staticTextItemLiteErrorOver,
.staticTextItemLiteErrorOverRTL,
.staticTextItemLiteErrorFocused,
.staticTextItemLiteErrorFocusedRTL,
.staticTextItemLiteErrorFocusedOver,
.staticTextItemLiteErrorFocusedOverRTL {
  color: #5b5b5b;
}

.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 {
  background-color: #ffffff;
  color: #5b5b5b;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  /*padding: 7px 9px; this setting affects the checkbox in selects*/
  /* padding-bottom: $pickList_cell_padding; */
  padding: 2px 1px 2px 3px;
}

/* style that can be used for the checkbox cell in pickLists to control padding */
.pickListCheckboxCell,
.pickListCheckboxCellOver,
.pickListCheckboxCellSelected,
.pickListCheckboxCellSelectedOver,
.pickListCheckboxCellSelectedDisabled,
.pickListCheckboxCellDisabled {
  background-color: #ffffff;
  padding: 2px 1px 2px 3px;
  border: none;
}

.pickListCheckboxCellOver {
  background-color: #f5f8fa;
}

.pickListCheckboxCellSelected {
  background-color: #f5f8fa;
}

.pickListCheckboxCellSelectedOver {
  background-color: #f0f0f0;
}

.pickListCheckboxCellDisabled,
.pickListCheckboxCellSelectedDisabled {
  background-color: #f9f9f9;
}

/* 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;
}

.nativeSelectItemRTL[multiple] {
  direction: ltr;
}

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

/* pickerSearchBox - used by ComboBoxItems that fill their container */
.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-color: #ffffff;
  border: 1px solid #cdd5db;
  border-radius: 3px;
  color: #5b5b5b;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  -webkit-appearance: none;
  padding: 0px 6px 0px 6px;
}

/* Placeholder styles extracted from @include input-placeholder (base group) */
.pickerSearchBox::placeholder,
.pickerSearchBoxRTL::placeholder,
.pickerSearchBoxOver::placeholder,
.pickerSearchBoxOverRTL::placeholder,
.pickerSearchBoxFocused::placeholder,
.pickerSearchBoxFocusedRTL::placeholder,
.pickerSearchBoxFocusedOver::placeholder,
.pickerSearchBoxFocusedOverRTL::placeholder,
.pickerSearchBoxDisabled::placeholder,
.pickerSearchBoxDisabledRTL::placeholder,
.pickerSearchBoxError::placeholder,
.pickerSearchBoxErrorRTL::placeholder,
.pickerSearchBoxPending::placeholder,
.pickerSearchBoxPendingRTL::placeholder,
.pickerSearchBoxPendingFocused::placeholder,
.pickerSearchBoxPendingFocusedRTL::placeholder,
.pickerSearchBoxPendingDisabled::placeholder,
.pickerSearchBoxPendingDisabledRTL::placeholder,
.pickerSearchBoxPendingError::placeholder,
.pickerSearchBoxPendingErrorRTL::placeholder,
.pickerSearchBoxHint::placeholder,
.pickerSearchBoxHintRTL::placeholder,
.pickerSearchBoxDisabledHint::placeholder,
.pickerSearchBoxDisabledHintRTL::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%); */
  color: #cccccc;
  /* 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;
}

.pickerSearchBoxDisabled,
.pickerSearchBoxDisabledRTL,
.pickerSearchBoxPendingDisabled,
.pickerSearchBoxPendingDisabledRTL,
.pickerSearchBoxDisabledHint,
.pickerSearchBoxDisabledHintRTL {
  background-color: #fafafa;
  border: 1px solid #cdd5db;
  -webkit-text-fill-color: #ababab;
  color: #ababab;
}

.pickerSearchBoxFocused,
.pickerSearchBoxFocusedRTL,
.pickerSearchBoxPendingFocused,
.pickerSearchBoxPendingFocusedRTL {
  color: #5b5b5b;
  border-bottom: 1px solid #3db271;
  border-top: 1px solid #3db271;
  -moz-outline-offset: -1;
}

.pickerSearchBoxFocused,
.pickerSearchBoxPendingFocused {
  border-left: 1px solid #3db271;
  border-right: 1px solid #3db271;
}

.pickerSearchBoxFocusedRTL,
.pickerSearchBoxPendingFocusedRTL {
  border-right: 1px solid #3db271;
  border-left: 1px solid #3db271;
}

/* Placeholder styles extracted from @include input-placeholder (disabled group) */
.pickerSearchBoxDisabled::placeholder,
.pickerSearchBoxDisabledRTL::placeholder,
.pickerSearchBoxPendingDisabled::placeholder,
.pickerSearchBoxPendingDisabledRTL::placeholder,
.pickerSearchBoxDisabledHint::placeholder,
.pickerSearchBoxDisabledHintRTL::placeholder {
  color: #cccccc;
  opacity: 1;
  text-overflow: ellipsis;
}

.pickerSearchBoxPending,
.pickerSearchBoxPendingRTL,
.pickerSearchBoxPendingFocused,
.pickerSearchBoxPendingFocusedRTL,
.pickerSearchBoxPendingError,
.pickerSearchBoxPendingErrorRTL {
  color: #0066CC;
}

/* Placeholder styles extracted from @include input-placeholder (pending group) */
.pickerSearchBoxPending::placeholder,
.pickerSearchBoxPendingRTL::placeholder,
.pickerSearchBoxPendingFocused::placeholder,
.pickerSearchBoxPendingFocusedRTL::placeholder,
.pickerSearchBoxPendingError::placeholder,
.pickerSearchBoxPendingErrorRTL::placeholder {
  color: #0066CC;
  opacity: 1;
  text-overflow: ellipsis;
}

/* end pickerSearchBox */
/* uploadItem - only select parts can be styled */
.uploadItem,
.uploadItemRTL,
.uploadItemOver,
.uploadItemOverRTL,
.uploadItemFocused,
.uploadItemFocusedRTL,
.uploadItemFocusedOver,
.uploadItemFocusedOverRTL,
.uploadItemDisabled,
.uploadItemDisabledRTL,
.uploadItemError,
.uploadItemErrorRTL,
.uploadItemErrorOver,
.uploadItemErrorOverRTL,
.uploadItemErrorFocused,
.uploadItemErrorFocusedRTL,
.uploadItemErrorFocusedOver,
.uploadItemErrorFocusedOverRTL,
.uploadItemPending,
.uploadItemPendingRTL,
.uploadItemPendingOver,
.uploadItemPendingOverRTL,
.uploadItemPendingFocused,
.uploadItemPendingFocusedRTL,
.uploadItemPendingFocusedOver,
.uploadItemPendingFocusedOverRTL,
.uploadItemPendingDisabled,
.uploadItemPendingDisabledRTL,
.uploadItemPendingError,
.uploadItemPendingErrorRTL,
.uploadItemHint,
.uploadItemHintRTL,
.uploadItemDisabledHint,
.uploadItemDisabledHintRTL {
  background-color: transparent;
  background-color: #ffffff;
  color: #5b5b5b;
  border: none;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: 0px;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  -webkit-appearance: none;
  margin: 0;
}

.uploadItemDisabled,
.uploadItemDisabledRTL,
.uploadItemPendingDisabled,
.uploadItemPendingDisabledRTL,
.uploadItemDisabledHint,
.uploadItemDisabledHintRTL {
  -webkit-text-fill-color: #ababab;
  color: #ababab;
}

.nativeSelectItemDisabled,
.nativeSelectItemDisabledRTL,
.nativeSelectItemPendingDisabled,
.nativeSelectItemPendingDisabledRTL,
.staticTextItemDisabled,
.staticTextItemDisabledRTL,
.staticTextItemPendingDisabled,
.staticTextItemPendingDisabledRTL {
  -webkit-text-fill-color: #ababab;
  color: #ababab;
}

.nativeSelectItemFocusedOver,
.nativeSelectItemFocusedOverRTL {
  box-shadow: none;
}

select:disabled,
optgroup:disabled,
option:disabled {
  -webkit-text-fill-color: #ababab;
  color: #ababab;
}

select[disabled],
select[disabled] option {
  -webkit-text-fill-color: #ababab;
  color: #ababab;
}

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

select:hover {
  border-color: #cdd5db;
  box-shadow: none;
}

select:focus {
  outline: none;
  border-color: #3db271;
  background-color: #ffffff;
  box-shadow: none;
}

select:hover > focus {
  border-color: #3db271;
  box-shadow: none;
}

option:focus,
option:hover,
option:checked {
  background-color: #f0f0f0 !important;
  color: #5b5b5b !important;
}

/* selectItemPickerIcon */
.selectItemPickerIcon,
.selectItemPickerIconOver,
.selectItemPickerIconRTL,
.selectItemPickerIconOverRTL,
.selectItemPickerIconFocused,
.selectItemPickerIconFocusedRTL,
.selectItemPickerIconDisabled,
.selectItemPickerIconDisabledRTL {
  border-left: none;
  color: #778D87;
  outline-width: 0px;
}

.selectItemPickerIconOver,
.selectItemPickerIconOverRTL {
  color: #3db271;
}

.selectItemPickerIconDisabled,
.selectItemPickerIconDisabledRTL {
  background-color: #fafafa;
  color: #ababab;
}

/* selectItem pickerIcon Error styles */
.selectItemPickerIconError,
.selectItemPickerIconErrorRTL,
.selectItemPickerIconErrorOver,
.selectItemPickerIconErrorOverRTL,
.selectItemPickerIconErrorFocused,
.selectItemPickerIconErrorFocusedRTL,
.selectItemPickerIconErrorFocusedOver,
.selectItemPickerIconErrorFocusedOverRTL,
.selectItemPickerIconErrorDisabled,
.selectItemPickerIconErrorDisabledRTL {
  border-left: none;
  color: #778D87;
  outline-width: 0px;
}

.selectItemPickerIconErrorOver,
.selectItemPickerIconErrorOverRTL,
.selectItemPickerIconErrorFocusedOver,
.selectItemPickerIconErrorFocusedOverRTL {
  color: #3db271;
}

.selectItemPickerIconErrorFocused,
.selectItemPickerIconErrorFocusedRTL {
  color: #3db271;
}

.selectItemPickerIconErrorDisabled,
.selectItemPickerIconErrorDisabledRTL {
  background-color: #fafafa;
  color: #ababab;
}

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

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

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

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

.comboBoxItemPickerError,
.comboBoxItemPickerErrorOver,
.comboBoxItemPickerErrorFocused,
.comboBoxItemPickerErrorFocusedOver,
.comboBoxItemPickerErrorrtl,
.comboBoxItemPickerErrorOverrtl,
.comboBoxItemPickerErrorFocusedrtl,
.comboBoxItemPickerErrorFocusedOver {
  display: inline-block;
  background-position: 0px 0px;
  background: none 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,
.textItemLitePendingErrorOver,
.textItemLitePendingErrorRTL,
.textItemLitePendingErrorOverRTL,
.textItemLitePendingErrorFocused,
.textItemLitePendingErrorFocusedOver,
.textItemLitePendingErrorFocusedRTL,
.textItemLitePendingErrorFocusedOverRTL,
.textItemLiteHint,
.textItemLiteHintRTL,
.textItemLiteDisabledHint,
.textItemLiteDisabledHintRTL,
.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,
.textAreaItemLitePendingErrorOver,
.textAreaItemLitePendingErrorRTL,
.textAreaItemLitePendingErrorOverRTL,
.textAreaItemLitePendingErrorFocused,
.textAreaItemLitePendingErrorFocusedRTL,
.textAreaItemLitePendingErrorFocusedOver,
.textAreaItemLitePendingErrorFocusedOverRTL,
.textAreaItemLiteHint,
.textAreaItemLiteHintRTL,
.textAreaItemLiteDisabledHint,
.textAreaItemLiteDisabledHintRTL {
  color: #5b5b5b;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: 0px 3px;
  outline: none;
  text-decoration: none;
  border-radius: 2px;
  transition: border-color ease-in-out 0.2s, box-shadow ease-in-out 0.2s;
}

/* 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

   dataQuestionItemText is for AIDataQuestionItem
   */
.selectItemLiteText,
.selectItemLiteTextRTL,
.selectItemLiteTextFocused,
.selectItemLiteTextFocusedRTL,
.selectItemLiteTextDisabled,
.selectItemLiteTextDisabledRTL,
.selectItemLiteTextError,
.selectItemLiteTextErrorRTL,
.selectItemLiteTextErrorFocused,
.selectItemLiteTextErrorFocusedRTL,
.selectItemLiteTextErrorDisabled,
.selectItemLiteTextErrorDisabledRTL,
.selectItemLiteTextPending,
.selectItemLiteTextPendingRTL,
.selectItemLiteTextPendingFocused,
.selectItemLiteTextPendingFocusedRTL,
.selectItemLiteTextPendingDisabled,
.selectItemLiteTextPendingDisabledRTL,
.selectItemLiteTextPendingError,
.selectItemLiteTextPendingErrorRTL,
.selectItemLiteTextPendingErrorFocused,
.selectItemLiteTextPendingErrorFocusedRTL,
.selectItemLiteTextHint,
.selectItemLiteTextHintRTL,
.selectItemLiteTextDisabledHint,
.selectItemLiteTextDisabledHintRTL,
.dataQuestionItemText,
.dataQuestionItemTextRTL,
.dataQuestionItemTextFocused,
.dataQuestionItemTextFocusedRTL,
.dataQuestionItemTextDisabled,
.dataQuestionItemTextDisabledRTL,
.dataQuestionItemTextError,
.dataQuestionItemTextErrorRTL,
.dataQuestionItemTextErrorFocused,
.dataQuestionItemTextErrorFocusedRTL,
.dataQuestionItemTextErrorDisabled,
.dataQuestionItemTextErrorDisabledRTL,
.dataQuestionItemTextPending,
.dataQuestionItemTextPendingRTL,
.dataQuestionItemTextPendingFocused,
.dataQuestionItemTextPendingFocusedRTL,
.dataQuestionItemTextPendingDisabled,
.dataQuestionItemTextPendingDisabledRTL,
.dataQuestionItemTextPendingError,
.dataQuestionItemTextPendingErrorRTL,
.dataQuestionItemTextPendingErrorFocused,
.dataQuestionItemTextPendingErrorFocusedRTL,
.dataQuestionItemTextHint,
.dataQuestionItemTextHintRTL,
.dataQuestionItemTextDisabledHint,
.dataQuestionItemTextDisabledHintRTL {
  color: #5b5b5b;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-decoration: none;
  outline: none;
  border: none;
  padding-left: 0px;
  padding-right: 0px;
  padding: 0px;
  background-color: rgba(255, 255, 255, 0);
  background-color: \9 transparent;
}

.dataQuestionItemText,
.dataQuestionItemTextRTL,
.dataQuestionItemTextFocused,
.dataQuestionItemTextFocusedRTL,
.dataQuestionItemTextDisabled,
.dataQuestionItemTextDisabledRTL,
.dataQuestionItemTextError,
.dataQuestionItemTextErrorRTL,
.dataQuestionItemTextErrorFocused,
.dataQuestionItemTextErrorFocusedRTL,
.dataQuestionItemTextErrorDisabled,
.dataQuestionItemTextErrorDisabledRTL,
.dataQuestionItemTextPending,
.dataQuestionItemTextPendingRTL,
.dataQuestionItemTextPendingFocused,
.dataQuestionItemTextPendingFocusedRTL,
.dataQuestionItemTextPendingDisabled,
.dataQuestionItemTextPendingDisabledRTL,
.dataQuestionItemTextPendingError,
.dataQuestionItemTextPendingErrorRTL,
.dataQuestionItemTextPendingErrorFocused,
.dataQuestionItemTextPendingErrorFocusedRTL,
.dataQuestionItemTextHint,
.dataQuestionItemTextHintRTL,
.dataQuestionItemTextDisabledHint,
.dataQuestionItemTextDisabledHintRTL {
  font-size: 15px;
}

.selectItemLiteTextHintError,
.selectItemLiteTextHintErrorRTL,
.dataQuestionItemTextHintError,
.dataQuestionItemTextHintErrorRTL {
  color: #cccccc;
}

.selectItemLiteTextPending,
.selectItemLiteTextPendingRTL,
.selectItemLiteTextPendingFocused,
.selectItemLiteTextPendingFocusedRTL,
.selectItemLiteTextPendingError,
.selectItemLiteTextPendingErrorRTL,
.selectItemLiteTextPendingErrorFocused,
.selectItemLiteTextPendingErrorFocusedRTL,
.dataQuestionItemTextPending,
.dataQuestionItemTextPendingRTL,
.dataQuestionItemTextPendingFocused,
.dataQuestionItemTextPendingFocusedRTL,
.dataQuestionItemTextPendingError,
.dataQuestionItemTextPendingErrorRTL,
.dataQuestionItemTextPendingErrorFocused,
.dataQuestionItemTextPendingErrorFocusedRTL {
  color: #0066CC;
}

/* Placeholder styles extracted from @include input-placeholder (pending group) */
.selectItemLiteTextPending::placeholder,
.selectItemLiteTextPendingRTL::placeholder,
.selectItemLiteTextPendingFocused::placeholder,
.selectItemLiteTextPendingFocusedRTL::placeholder,
.selectItemLiteTextPendingError::placeholder,
.selectItemLiteTextPendingErrorRTL::placeholder,
.selectItemLiteTextPendingErrorFocused::placeholder,
.selectItemLiteTextPendingErrorFocusedRTL::placeholder,
.dataQuestionItemTextPending::placeholder,
.dataQuestionItemTextPendingRTL::placeholder,
.dataQuestionItemTextPendingFocused::placeholder,
.dataQuestionItemTextPendingFocusedRTL::placeholder,
.dataQuestionItemTextPendingError::placeholder,
.dataQuestionItemTextPendingErrorRTL::placeholder,
.dataQuestionItemTextPendingErrorFocused::placeholder,
.dataQuestionItemTextPendingErrorFocusedRTL::placeholder {
  color: #0066CC;
  opacity: 1;
  text-overflow: ellipsis;
}

.selectItemLiteTextDisabled,
.selectItemLiteTextDisabledRTL,
.selectItemLiteTextPendingDisabled,
.selectItemLiteTextPendingDisabledRTL,
.selectItemLiteTextDisabledHint,
.selectItemLiteTextDisabledHintRTL,
.selectItemLiteTextErrorDisabled,
.selectItemLiteTextErrorDisabledRTL,
.dataQuestionItemTextDisabled,
.dataQuestionItemTextDisabledRTL,
.dataQuestionItemTextPendingDisabled,
.dataQuestionItemTextPendingDisabledRTL,
.dataQuestionItemTextDisabledHint,
.dataQuestionItemTextDisabledHintRTL,
.dataQuestionItemTextErrorDisabled,
.dataQuestionItemTextErrorDisabledRTL {
  -webkit-text-fill-color: #ababab;
  color: #ababab;
  background-color: #fafafa;
}

/* Placeholder styles extracted from @include input-placeholder (disabled group) */
.selectItemLiteTextDisabled::placeholder,
.selectItemLiteTextDisabledRTL::placeholder,
.selectItemLiteTextPendingDisabled::placeholder,
.selectItemLiteTextPendingDisabledRTL::placeholder,
.selectItemLiteTextDisabledHint::placeholder,
.selectItemLiteTextDisabledHintRTL::placeholder,
.selectItemLiteTextErrorDisabled::placeholder,
.selectItemLiteTextErrorDisabledRTL::placeholder,
.dataQuestionItemTextDisabled::placeholder,
.dataQuestionItemTextDisabledRTL::placeholder,
.dataQuestionItemTextPendingDisabled::placeholder,
.dataQuestionItemTextPendingDisabledRTL::placeholder,
.dataQuestionItemTextDisabledHint::placeholder,
.dataQuestionItemTextDisabledHintRTL::placeholder,
.dataQuestionItemTextErrorDisabled::placeholder,
.dataQuestionItemTextErrorDisabledRTL::placeholder {
  -webkit-text-fill-color: #ababab;
  color: #ababab;
  opacity: 1;
  text-overflow: ellipsis;
}

.selectItemLiteTextHint,
.selectItemLiteTextHintRTL,
.dataQuestionItemTextHint,
.dataQuestionItemTextHintRTL {
  color: #cccccc;
}

/* SelectItem text */
.selectItemLiteTextError,
.selectItemLiteTextErrorRTL,
.selectItemLiteTextErrorOver,
.selectItemLiteTextErrorOverRTL,
.selectItemLiteTextErrorOverHint,
.selectItemLiteTextErrorOverHintRTL,
.selectItemLiteTextErrorFocused,
.selectItemLiteTextErrorFocusedRTL,
.selectItemLiteTextErrorFocusedHint,
.selectItemLiteTextErrorFocusedHintRTL,
.selectItemLiteTextErrorFocusedOver,
.selectItemLiteTextErrorFocusedOverRTL,
.selectItemLiteTextErrorFocusedOverHint,
.selectItemLiteTextErrorFocusedOverHintRTL,
.selectItemLiteTextErrorHint,
.selectItemLiteTextErrorHintRTL,
.selectItemLiteTextErrorDisabled,
.selectItemLiteTextErrorDisabledRTL,
.dataQuestionItemTextError,
.dataQuestionItemTextErrorRTL,
.dataQuestionItemTextErrorOver,
.dataQuestionItemTextErrorOverRTL,
.dataQuestionItemTextErrorOverHint,
.dataQuestionItemTextErrorOverHintRTL,
.dataQuestionItemTextErrorFocused,
.dataQuestionItemTextErrorFocusedRTL,
.dataQuestionItemTextErrorFocusedHint,
.dataQuestionItemTextErrorFocusedHintRTL,
.dataQuestionItemTextErrorFocusedOver,
.dataQuestionItemTextErrorFocusedOverRTL,
.dataQuestionItemTextErrorFocusedOverHint,
.dataQuestionItemTextErrorFocusedOverHintRTL,
.dataQuestionItemTextErrorHint,
.dataQuestionItemTextErrorHintRTL,
.dataQuestionItemTextErrorDisabled,
.dataQuestionItemTextErrorDisabledRTL {
  border: none;
  color: #5b5b5b;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 13px;
  outline: none;
  text-decoration: none;
}

/* 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,
.textItemLitePendingErrorOver,
.textItemLitePendingErrorRTL,
.textItemLitePendingErrorOverRTL,
.textItemLitePendingErrorFocused,
.textItemLitePendingErrorFocusedOver,
.textItemLitePendingErrorFocusedRTL,
.textItemLitePendingErrorFocusedOverRTL,
.textItemLiteHint,
.textItemLiteHintRTL,
.textItemLiteDisabledHint,
.textItemLiteDisabledHintRTL,
.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,
.textAreaItemLitePendingErrorOver,
.textAreaItemLitePendingErrorRTL,
.textAreaItemLitePendingErrorOverRTL,
.textAreaItemLitePendingErrorFocused,
.textAreaItemLitePendingErrorFocusedRTL,
.textAreaItemLitePendingErrorFocusedOver,
.textAreaItemLitePendingErrorFocusedOverRTL,
.textAreaItemLiteHint,
.textAreaItemLiteHintRTL,
.textAreaItemLiteDisabledHint,
.textAreaItemLiteDisabledHintRTL {
  border: 1px solid #cdd5db;
  box-shadow: none;
  background-color: #ffffff;
  border-radius: 2px;
  transition: border-color ease-in-out 0.2s, box-shadow ease-in-out 0.2s;
}

/* selectItemLiteControl */
.selectItemLiteControl,
.selectItemLiteControlOver,
.selectItemLiteControlFocused,
.selectItemLiteControlFocusedOver,
.selectItemLiteControlDisabled,
.selectItemLiteControlError,
.selectItemLiteControlErrorOver,
.selectItemLiteControlErrorFocused,
.selectItemLiteControlErrorFocusedOver,
.selectItemLiteControlErrorDisabled,
.selectItemLiteControlPending,
.selectItemLiteControlPendingOver,
.selectItemLiteControlPendingFocused,
.selectItemLiteControlPendingFocusedOver,
.selectItemLiteControlPendingDisabled,
.selectItemLiteControlPendingError,
.selectItemLiteControlPendingErrorOver,
.selectItemLiteControlPendingErrorFocused,
.selectItemLiteControlPendingErrorFocusedOver,
.selectItemLiteControlHint,
.selectItemLiteControlDisabledHint,
.dataQuestionItemControl,
.dataQuestionItemControlOver,
.dataQuestionItemControlFocused,
.dataQuestionItemControlFocusedOver,
.dataQuestionItemControlDisabled,
.dataQuestionItemControlError,
.dataQuestionItemControlErrorOver,
.dataQuestionItemControlErrorFocused,
.dataQuestionItemControlErrorFocusedOver,
.dataQuestionItemControlErrorDisabled,
.dataQuestionItemControlPending,
.dataQuestionItemControlPendingOver,
.dataQuestionItemControlPendingFocused,
.dataQuestionItemControlPendingFocusedOver,
.dataQuestionItemControlPendingDisabled,
.dataQuestionItemControlPendingError,
.dataQuestionItemControlPendingErrorOver,
.dataQuestionItemControlPendingErrorFocused,
.dataQuestionItemControlPendingErrorFocusedOver,
.dataQuestionItemControlHint,
.dataQuestionItemControlDisabledHint {
  border: 1px solid #cdd5db;
  padding: 0px 0px 0px 3px;
  box-shadow: none;
  transition: border-color ease-in-out 0.2s, box-shadow ease-in-out 0.2s;
  background-color: #ffffff;
  border-radius: 2px;
}

/* selectItemLiteControl RTL - icon padding, basically */
.selectItemLiteControlRTL,
.selectItemLiteControlOverRTL,
.selectItemLiteControlFocusedRTL,
.selectItemLiteControlFocusedOverRTL,
.selectItemLiteControlDisabledRTL,
.selectItemLiteControlErrorRTL,
.selectItemLiteControlErrorOverRTL,
.selectItemLiteControlErrorFocusedRTL,
.selectItemLiteControlErrorFocusedOverRTL,
.selectItemLiteControlErrorDisabledRTL,
.selectItemLiteControlPendingRTL,
.selectItemLiteControlPendingOverRTL,
.selectItemLiteControlPendingFocusedRTL,
.selectItemLiteControlPendingFocusedOverRTL,
.selectItemLiteControlPendingDisabledRTL,
.selectItemLiteControlPendingErrorRTL,
.selectItemLiteControlPendingErrorOverRTL,
.selectItemLiteControlPendingErrorFocusedRTL,
.selectItemLiteControlPendingErrorFocusedOverRTL,
.selectItemLiteControlHintRTL,
.selectItemLiteControlDisabledHintRTL,
.dataQuestionItemControlRTL,
.dataQuestionItemControlOverRTL,
.dataQuestionItemControlFocusedRTL,
.dataQuestionItemControlFocusedOverRTL,
.dataQuestionItemControlDisabledRTL,
.dataQuestionItemControlErrorRTL,
.dataQuestionItemControlErrorOverRTL,
.dataQuestionItemControlErrorFocusedRTL,
.dataQuestionItemControlErrorFocusedOverRTL,
.dataQuestionItemControlErrorDisabledRTL,
.dataQuestionItemControlPendingRTL,
.dataQuestionItemControlPendingOverRTL,
.dataQuestionItemControlPendingFocusedRTL,
.dataQuestionItemControlPendingFocusedOverRTL,
.dataQuestionItemControlPendingDisabledRTL,
.dataQuestionItemControlPendingErrorRTL,
.dataQuestionItemControlPendingErrorOverRTL,
.dataQuestionItemControlPendingErrorFocusedRTL,
.dataQuestionItemControlPendingErrorFocusedOverRTL,
.dataQuestionItemControlHintRTL,
.dataQuestionItemControlDisabledHintRTL {
  border: 1px solid #cdd5db;
  padding: 0px 0px 0px 3px;
  box-shadow: none;
  transition: border-color ease-in-out 0.2s, box-shadow ease-in-out 0.2s;
  background-color: #ffffff;
  border-radius: 2px;
}

.dataQuestionItemControl,
.dataQuestionItemControlOver,
.dataQuestionItemControlFocused,
.dataQuestionItemControlFocusedOver,
.dataQuestionItemControlDisabled,
.dataQuestionItemControlError,
.dataQuestionItemControlErrorOver,
.dataQuestionItemControlErrorFocused,
.dataQuestionItemControlErrorFocusedOver,
.dataQuestionItemControlErrorDisabled,
.dataQuestionItemControlPending,
.dataQuestionItemControlPendingOver,
.dataQuestionItemControlPendingFocused,
.dataQuestionItemControlPendingFocusedOver,
.dataQuestionItemControlPendingDisabled,
.dataQuestionItemControlPendingError,
.dataQuestionItemControlPendingErrorOver,
.dataQuestionItemControlPendingErrorFocused,
.dataQuestionItemControlPendingErrorFocusedOver,
.dataQuestionItemControlHint,
.dataQuestionItemControlDisabledHint,
.dataQuestionItemControlRTL,
.dataQuestionItemControlOverRTL,
.dataQuestionItemControlFocusedRTL,
.dataQuestionItemControlFocusedOverRTL,
.dataQuestionItemControlDisabledRTL,
.dataQuestionItemControlErrorRTL,
.dataQuestionItemControlErrorOverRTL,
.dataQuestionItemControlErrorFocusedRTL,
.dataQuestionItemControlErrorFocusedOverRTL,
.dataQuestionItemControlErrorDisabledRTL,
.dataQuestionItemControlPendingRTL,
.dataQuestionItemControlPendingOverRTL,
.dataQuestionItemControlPendingFocusedRTL,
.dataQuestionItemControlPendingFocusedOverRTL,
.dataQuestionItemControlPendingDisabledRTL,
.dataQuestionItemControlPendingErrorRTL,
.dataQuestionItemControlPendingErrorOverRTL,
.dataQuestionItemControlPendingErrorFocusedRTL,
.dataQuestionItemControlPendingErrorFocusedOverRTL,
.dataQuestionItemControlHintRTL,
.dataQuestionItemControlDisabledHintRTL {
  border-radius: 20px / 30%;
  background-color: color-mix(in srgb, #3db271, white 90%);
  padding: 0px 5px;
}

/* 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,
.dataQuestionItemControlErrorFocused,
.dataQuestionItemControlErrorFocusedRTL,
.dataQuestionItemControlErrorFocusedOver,
.dataQuestionItemControlErrorFocusedOverRTL,
.dataQuestionItemControlFocused,
.dataQuestionItemControlFocusedRTL,
.dataQuestionItemControlFocusedOver,
.dataQuestionItemControlFocusedOverRTL,
.dataQuestionItemControlPendingFocused,
.dataQuestionItemControlPendingFocusedRTL,
.dataQuestionItemControlPendingFocusedOver,
.dataQuestionItemControlPendingFocusedOverRTL,
.textAreaItemLiteErrorFocused,
.textAreaItemLiteErrorFocusedRTL,
.textAreaItemLiteErrorFocusedOver,
.textAreaItemLiteErrorFocusedOverRTL,
.textAreaItemLiteFocused,
.textAreaItemLiteFocusedRTL,
.textAreaItemLiteFocusedOver,
.textAreaItemLiteFocusedOverRTL,
.textAreaItemLitePendingFocused,
.textAreaItemLitePendingFocusedRTL,
.textAreaItemLitePendingFocusedOver,
.textAreaItemLitePendingFocusedOverRTL {
  outline: none;
  color: #5b5b5b;
  border-color: #3db271;
  background-color: #ffffff;
  box-shadow: none;
}

.dataQuestionItemControlErrorFocused,
.dataQuestionItemControlErrorFocusedRTL,
.dataQuestionItemControlErrorFocusedOver,
.dataQuestionItemControlErrorFocusedOverRTL,
.dataQuestionItemControlFocused,
.dataQuestionItemControlFocusedRTL,
.dataQuestionItemControlFocusedOver,
.dataQuestionItemControlFocusedOverRTL,
.dataQuestionItemControlPendingFocused,
.dataQuestionItemControlPendingFocusedRTL,
.dataQuestionItemControlPendingFocusedOver,
.dataQuestionItemControlPendingFocusedOverRTL {
  background-color: color-mix(in srgb, #3db271, white 92%);
}

/* over state */
.textItemLiteOver,
.textItemLiteOverRTL,
.textItemLiteErrorOver,
.textItemLiteErrorOverRTL,
.textItemLiteErrorFocusedOver,
.textItemLiteErrorFocusedOverRTL,
.textItemLitePendingOver,
.textItemLitePendingOverRTL,
.textItemLitePendingFocusedOver,
.textItemLitePendingFocusedOverRTL,
.textAreaItemLiteOver,
.textAreaItemLiteOverRTL,
.textAreaItemLiteErrorOver,
.textAreaItemLiteErrorOverRTL,
.textAreaItemLitePendingOver,
.textAreaItemLitePendingOverRTL,
.textAreaItemLitePendingFocusedOver,
.textAreaItemLitePendingFocusedOverRTL,
.selectItemLiteControlOver,
.selectItemLiteControlOverRTL,
.selectItemLiteControlErrorOver,
.selectItemLiteControlErrorOverRTL,
.selectItemLiteControlErrorFocusedOver,
.selectItemLiteControlErrorFocusedOverRTL,
.selectItemLiteControlPendingOver,
.selectItemLiteControlPendingOverRTL,
.selectItemLiteControlPendingFocusedOver,
.selectItemLiteControlPendingFocusedOverRTL,
.dataQuestionItemControlOver,
.dataQuestionItemControlOverRTL,
.dataQuestionItemControlErrorOver,
.dataQuestionItemControlErrorOverRTL,
.dataQuestionItemControlErrorFocusedOver,
.dataQuestionItemControlErrorFocusedOverRTL,
.dataQuestionItemControlPendingOver,
.dataQuestionItemControlPendingOverRTL,
.dataQuestionItemControlPendingFocusedOver,
.dataQuestionItemControlPendingFocusedOverRTL,
.nativeSelectItemOver,
.nativeSelectItemOverRTL,
.nativeSelectItemErrorOver,
.nativeSelectItemErrorOverRTL,
.nativeSelectItemPendingOver,
.nativeSelectItemPendingOverRTL,
.nativeSelectItemPendingFocusedOver,
.nativeSelectItemPendingFocusedOverRTL {
  box-shadow: none;
  border: 1px solid #cdd5db;
  background-color: #ffffff;
  color: #5b5b5b;
}

.dataQuestionItemControlOver,
.dataQuestionItemControlOverRTL,
.dataQuestionItemControlErrorOver,
.dataQuestionItemControlErrorOverRTL,
.dataQuestionItemControlErrorFocusedOver,
.dataQuestionItemControlErrorFocusedOverRTL,
.dataQuestionItemControlPendingOver,
.dataQuestionItemControlPendingOverRTL,
.dataQuestionItemControlPendingFocusedOver,
.dataQuestionItemControlPendingFocusedOverRTL {
  background-color: color-mix(in srgb, #3db271, white 92%);
}

.selectItemLiteControlFocused,
.selectItemLiteControlFocusedRTL,
.dataQuestionItemControlFocused,
.dataQuestionItemControlFocusedRTL {
  outline: none;
  border-color: #3db271;
}

/* focused over */
.textItemLiteErrorFocusedOver,
.textItemLiteErrorFocusedOverRTL,
.textItemLiteFocusedOver,
.textItemLiteFocusedOverRTL,
.textItemLitePendingFocusedOver,
.textItemLitePendingFocusedOverRTL,
.textAreaItemLiteFocusedOver,
.textAreaItemLiteFocusedOverRTL,
.textAreaItemLiteErrorFocusedOver,
.textAreaItemLiteErrorFocusedOverRTL,
.textAreaItemLitePendingFocusedOver,
.textAreaItemLitePendingFocusedOverRTL,
.selectItemLiteControlFocusedOver,
.selectItemLiteControlFocusedOverRTL,
.selectItemLiteControlPendingFocusedOver,
.selectItemLiteControlPendingFocusedOverRTL,
.dataQuestionItemControlFocusedOver,
.dataQuestionItemControlFocusedOverRTL,
.dataQuestionItemControlPendingFocusedOver,
.dataQuestionItemControlPendingFocusedOverRTL,
.nativeSelectItemErrorFocusedOver,
.nativeSelectItemErrorFocusedOverRTL {
  outline: none;
  box-shadow: none;
  border: 1px solid #3db271;
}

/* pending coloring */
.textItemLitePending,
.textItemLitePendingRTL,
.textItemLitePendingOver,
.textItemLitePendingOverRTL,
.textItemLitePendingFocused,
.textItemLitePendingFocusedRTL,
.textItemLitePendingFocusedOver,
.textItemLitePendingFocusedOverRTL,
.textItemLitePendingError,
.textItemLitePendingErrorOver,
.textItemLitePendingErrorRTL,
.textItemLitePendingErrorOverRTL,
.textItemLitePendingErrorFocused,
.textItemLitePendingErrorFocusedOver,
.textItemLitePendingErrorFocusedRTL,
.textItemLitePendingErrorFocusedOverRTL,
.textAreaItemLitePending,
.textAreaItemLitePendingRTL,
.textAreaItemLitePendingOver,
.textAreaItemLitePendingOverRTL,
.textAreaItemLitePendingFocused,
.textAreaItemLitePendingFocusedRTL,
.textAreaItemLitePendingFocusedOver,
.textAreaItemLitePendingFocusedOverRTL,
.textAreaItemLitePendingError,
.textAreaItemLitePendingErrorOver,
.textAreaItemLitePendingErrorRTL,
.textAreaItemLitePendingErrorOverRTL,
.textAreaItemLitePendingErrorFocused,
.textAreaItemLitePendingErrorFocusedRTL,
.textAreaItemLitePendingErrorFocusedOver,
.textAreaItemLitePendingErrorFocusedOverRTL {
  color: #0066CC;
}

/* Placeholder styles extracted from @include input-placeholder */
.textItemLitePending::placeholder,
.textItemLitePendingRTL::placeholder,
.textItemLitePendingOver::placeholder,
.textItemLitePendingOverRTL::placeholder,
.textItemLitePendingFocused::placeholder,
.textItemLitePendingFocusedRTL::placeholder,
.textItemLitePendingFocusedOver::placeholder,
.textItemLitePendingFocusedOverRTL::placeholder,
.textItemLitePendingError::placeholder,
.textItemLitePendingErrorOver::placeholder,
.textItemLitePendingErrorRTL::placeholder,
.textItemLitePendingErrorOverRTL::placeholder,
.textItemLitePendingErrorFocused::placeholder,
.textItemLitePendingErrorFocusedOver::placeholder,
.textItemLitePendingErrorFocusedRTL::placeholder,
.textItemLitePendingErrorFocusedOverRTL::placeholder,
.textAreaItemLitePending::placeholder,
.textAreaItemLitePendingRTL::placeholder,
.textAreaItemLitePendingOver::placeholder,
.textAreaItemLitePendingOverRTL::placeholder,
.textAreaItemLitePendingFocused::placeholder,
.textAreaItemLitePendingFocusedRTL::placeholder,
.textAreaItemLitePendingFocusedOver::placeholder,
.textAreaItemLitePendingFocusedOverRTL::placeholder,
.textAreaItemLitePendingError::placeholder,
.textAreaItemLitePendingErrorOver::placeholder,
.textAreaItemLitePendingErrorRTL::placeholder,
.textAreaItemLitePendingErrorOverRTL::placeholder,
.textAreaItemLitePendingErrorFocused::placeholder,
.textAreaItemLitePendingErrorFocusedRTL::placeholder,
.textAreaItemLitePendingErrorFocusedOver::placeholder,
.textAreaItemLitePendingErrorFocusedOverRTL::placeholder {
  color: #0066CC;
  opacity: 1;
  text-overflow: ellipsis;
}

/* pending-value text in multi-selects */
.selectItemLiteMultiValuePending {
  color: #0066CC;
}

.selectItemLiteMultiValuePendingDisabled {
  -webkit-text-fill-color: #ababab;
  color: #ababab;
}

/* disabled styling */
.textItemLiteDisabled,
.textItemLiteDisabledRTL,
.textItemLitePendingDisabled,
.textItemLitePendingDisabledRTL,
.textItemLiteDisabledHint,
.textItemLiteDisabledHintRTL,
.textItemLiteErrorDisabled,
.textItemLiteErrorDisabledRTL,
.selectItemLiteControlDisabled,
.selectItemLiteControlDisabledRTL,
.selectItemLiteControlPendingDisabled,
.selectItemLiteControlPendingDisabledRTL,
.selectItemLiteControlDisabledHint,
.selectItemLiteControlDisabledHintRTL,
.selectItemLiteControlErrorDisabled,
.selectItemLiteControlErrorDisabledRTL,
.selectItemLiteControlErrorDisabledHint,
.selectItemLiteControlErrorDisabledHintRTL,
.dataQuestionItemControlDisabled,
.dataQuestionItemControlDisabledRTL,
.dataQuestionItemControlPendingDisabled,
.dataQuestionItemControlPendingDisabledRTL,
.dataQuestionItemControlDisabledHint,
.dataQuestionItemControlDisabledHintRTL,
.dataQuestionItemControlErrorDisabled,
.dataQuestionItemControlErrorDisabledRTL,
.dataQuestionItemControlErrorDisabledHint,
.dataQuestionItemControlErrorDisabledHintRTL,
.textAreaItemLiteDisabled,
.textAreaItemLiteDisabledRTL,
.textAreaItemLitePendingDisabled,
.textAreaItemLitePendingDisabledRTL,
.textAreaItemLiteDisabledHint,
.textAreaItemLiteDisabledHintRTL,
.textAreaItemLiteErrorDisabled,
.textAreaItemLiteErrorDisabledRTL,
.textAreaItemLiteErrorDisabledHint,
.textAreaItemLiteErrorDisabledHintRTL {
  background-color: #fafafa;
  border: 1px solid #d7dce4;
  -webkit-text-fill-color: #ababab;
  color: #ababab;
}

.textItemLiteDisabled,
.textItemLiteDisabledRTL,
.textItemLitePendingDisabled,
.textItemLitePendingDisabledRTL,
.textItemLiteDisabledHint,
.textItemLiteDisabledHintRTL,
.textItemLiteErrorDisabled,
.textItemLiteErrorDisabledRTL,
.textAreaItemLiteDisabled,
.textAreaItemLiteDisabledRTL,
.textAreaItemLitePendingDisabled,
.textAreaItemLitePendingDisabledRTL,
.textAreaItemLiteDisabledHint,
.textAreaItemLiteDisabledHintRTL,
.textAreaItemLiteErrorDisabled,
.textAreaItemLiteErrorDisabledRTL {
  -webkit-text-fill-color: #ababab;
  color: #ababab;
  background-color: #fafafa;
}

/* Placeholder styles extracted from @include input-placeholder */
.textItemLiteDisabled::placeholder,
.textItemLiteDisabledRTL::placeholder,
.textItemLitePendingDisabled::placeholder,
.textItemLitePendingDisabledRTL::placeholder,
.textItemLiteDisabledHint::placeholder,
.textItemLiteDisabledHintRTL::placeholder,
.textItemLiteErrorDisabled::placeholder,
.textItemLiteErrorDisabledRTL::placeholder,
.textAreaItemLiteDisabled::placeholder,
.textAreaItemLiteDisabledRTL::placeholder,
.textAreaItemLitePendingDisabled::placeholder,
.textAreaItemLitePendingDisabledRTL::placeholder,
.textAreaItemLiteDisabledHint::placeholder,
.textAreaItemLiteDisabledHintRTL::placeholder,
.textAreaItemLiteErrorDisabled::placeholder,
.textAreaItemLiteErrorDisabledRTL::placeholder {
  -webkit-text-fill-color: #ababab;
  color: #ababab;
  opacity: 1;
  text-overflow: ellipsis;
}

/*  hint text color */
.textItemLiteHint,
.textItemLiteHintRTL,
.textAreaItemLiteHint,
.textAreaItemLiteHintRTL {
  color: #cccccc;
}

/* error state - normal only */
.textItemLiteError,
.textItemLiteErrorRTL,
.textItemLiteErrorOver,
.textItemLiteErrorOverRTL,
.textItemLiteErrorFocused,
.textItemLiteErrorFocusedRTL,
.textItemLiteErrorFocusedOver,
.textItemLiteErrorFocusedOverRTL,
.nativeSelectItemLiteError,
.nativeSelectItemLiteErrorRTL,
.nativeSelectItemLiteErrorOver,
.nativeSelectItemLiteErrorOverRTL,
.nativeSelectItemLiteErrorFocused,
.nativeSelectItemLiteErrorFocusedRTL,
.nativeSelectItemLiteErrorFocusedOver,
.nativeSelectItemLiteErrorFocusedOverRTL,
.textAreaItemLiteError,
.textAreaItemLiteErrorRTL,
.textAreaItemLiteErrorOver,
.textAreaItemLiteErrorOverRTL,
.textAreaItemLiteErrorFocused,
.textAreaItemLiteErrorFocusedRTL,
.textAreaItemLiteErrorFocusedOver,
.textAreaItemLiteErrorFocusedOverRTL {
  color: #5b5b5b;
  background-color: #ffffff;
}

/* Placeholder styles extracted from @include input-placeholder */
.textItemLiteError::placeholder,
.textItemLiteErrorRTL::placeholder,
.textItemLiteErrorOver::placeholder,
.textItemLiteErrorOverRTL::placeholder,
.textItemLiteErrorFocused::placeholder,
.textItemLiteErrorFocusedRTL::placeholder,
.textItemLiteErrorFocusedOver::placeholder,
.textItemLiteErrorFocusedOverRTL::placeholder,
.nativeSelectItemLiteError::placeholder,
.nativeSelectItemLiteErrorRTL::placeholder,
.nativeSelectItemLiteErrorOver::placeholder,
.nativeSelectItemLiteErrorOverRTL::placeholder,
.nativeSelectItemLiteErrorFocused::placeholder,
.nativeSelectItemLiteErrorFocusedRTL::placeholder,
.nativeSelectItemLiteErrorFocusedOver::placeholder,
.nativeSelectItemLiteErrorFocusedOverRTL::placeholder,
.textAreaItemLiteError::placeholder,
.textAreaItemLiteErrorRTL::placeholder,
.textAreaItemLiteErrorOver::placeholder,
.textAreaItemLiteErrorOverRTL::placeholder,
.textAreaItemLiteErrorFocused::placeholder,
.textAreaItemLiteErrorFocusedRTL::placeholder,
.textAreaItemLiteErrorFocusedOver::placeholder,
.textAreaItemLiteErrorFocusedOverRTL::placeholder {
  color: #5b5b5b;
  opacity: 1;
  text-overflow: ellipsis;
}

/* error */
.textItemLiteError,
.textItemLiteErrorRTL,
.nativeSelectItemLiteError,
.nativeSelectItemLiteErrorRTL,
.textAreaItemLiteError,
.textAreaItemLiteErrorRTL,
.selectItemLiteControlError,
.selectItemLiteControlErrorRTL,
.dataQuestionItemControlError,
.dataQuestionItemControlErrorRTL {
  border: 1px solid #cdd5db;
  background-color: #ffffff;
}

/* error Over */
.textItemLiteErrorOver,
.textItemLiteErrorOverRTL,
.nativeSelectItemLiteErrorOver,
.nativeSelectItemLiteErrorOverRTL,
.textAreaItemLiteErrorOver,
.textAreaItemLiteErrorOverRTL,
.selectItemLiteControlErrorOver,
.selectItemLiteControlErrorOverRTL,
.dataQuestionItemControlErrorOver,
.dataQuestionItemControlErrorOverRTL {
  border: 1px solid #cdd5db;
  box-shadow: none;
  background-color: #ffffff;
}

/* error Focused */
.textItemLiteErrorFocused,
.textItemLiteErrorFocusedRTL,
.nativeSelectItemLiteErrorFocused,
.nativeSelectItemLiteErrorFocusedRTL,
.textAreaItemLiteErrorFocused,
.textAreaItemLiteErrorFocusedRTL,
.selectItemLiteControlErrorFocused,
.selectItemLiteControlErrorFocusedRTL,
.dataQuestionItemControlErrorFocused,
.dataQuestionItemControlErrorFocusedRTL {
  border: 1px solid #3db271;
  box-shadow: none;
  background-color: #ffffff;
}

/* error FocusedOver */
.textItemLiteErrorFocusedOver,
.textItemLiteErrorFocusedOverRTL,
.nativeSelectItemLiteErrorFocusedOver,
.nativeSelectItemLiteErrorFocusedOverRTL,
.textAreaItemLiteErrorFocusedOver,
.textAreaItemLiteErrorFocusedOverRTL,
.selectItemLiteControlErrorFocusedOver,
.selectItemLiteControlErrorFocusedOverRTL,
.dataQuestionItemControlErrorFocusedOver,
.dataQuestionItemControlErrorFocusedOverRTL {
  border: 1px solid #3db271;
  box-shadow: none;
  background-color: #ffffff;
}

/* sprited minimalist Select / ComboBoxItem picker */
/* end of minimalist text-based item styling */
/* overlay that shows a little corner-triangle in widgets with unsaved changes */
.pendingMarker {
  position: relative;
}

.pendingMarker::before {
  position: absolute;
  content: "";
  top: 1px;
  left: 1px;
  width: 0px;
  height: 0px;
  border-top: 4px solid #981c65;
  border-left: 4px solid #981c65;
  border-bottom: 4px solid transparent;
  border-right: 4px solid transparent;
}

/* Progressbar */
.progressbar,
.progressbarOver,
.progressbarDown,
.progressbarSelected {
  background-color: #cccccc;
  border: 1px solid #d0d0d0;
  border-radius: 0px 0px 0px 0px;
  outline: none;
}

.progressbarDisabled,
.progressbarSelectedDisabled {
  background-color: #cccccc;
  color: #ffffff;
  border: 1px solid #d0d0d0;
  border-radius: 0px 0px 0px 0px;
  outline: none;
}

/* the percentage-done */
.progressbarProgress,
.progressbarProgressOver,
.progressbarProgressDown,
.progressbarProgressSelected {
  background-color: #3db271;
  border: none;
  border-radius: 0px 0px 0px 0px;
  outline: none;
}

.progressbarProgressDisabled,
.progressbarProgressSelectedDisabled {
  background-color: #d0d0d0;
  color: #ffffff;
  border: none;
  border-radius: 0px 0px 0px 0px;
  outline: none;
}

.progressbarTitle,
.progressbarTitleDisabled {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  border-radius: 0px 0px 0px 0px;
  font-size: 12px;
  color: #ffffff;
  padding: 4px 4px 4px 4px;
}

.progressbarTitleDisabled {
  color: #ffffff;
}

/* Spinner */
.spinnerItemIncrease,
.spinnerItemIncreaseOver,
.spinnerItemIncreaseFocused,
.spinnerItemIncreaseFocusedOver,
.spinnerItemIncreaseDisabled {
  background-image: url(./images/DynamicForm/spinner_control_sprite_transparent.png);
}

.spinnerItemIncreaseRTL,
.spinnerItemIncreaseOverRTL,
.spinnerItemIncreaseFocusedRTL,
.spinnerItemIncreaseFocusedOverRTL,
.spinnerItemIncreaseDisabledRTL {
  background-image: url(./images/DynamicForm/spinner_control_sprite_transparent_rtl.png);
}

.spinnerItemIncreaseDisabled,
.spinnerItemIncreaseDisabledRTL {
  background-position: -16px 18px;
}

.spinnerItemIncrease,
.spinnerItemIncreaseRTL {
  background-position: 0px 18px;
}

.spinnerItemIncreaseOver,
.spinnerItemIncreaseOverRTL,
.spinnerItemIncreaseFocused,
.spinnerItemIncreaseFocusedRTL,
.spinnerItemIncreaseFocusedOver,
.spinnerItemIncreaseFocusedOverRTL {
  background-position: -31px 18px;
}

.spinnerItemDecrease,
.spinnerItemDecreaseOver,
.spinnerItemDecreaseFocused,
.spinnerItemDecreaseFocusedOver,
.spinnerItemDecreaseDisabled {
  background-image: url(./images/DynamicForm/spinner_control_sprite_transparent.png);
}

.spinnerItemDecreaseRTL,
.spinnerItemDecreaseOverRTL,
.spinnerItemDecreaseFocusedRTL,
.spinnerItemDecreaseFocusedOverRTL,
.spinnerItemDecreaseDisabledRTL {
  background-image: url(./images/DynamicForm/spinner_control_sprite_transparent_rtl.png);
}

.spinnerItemDecreaseDisabled,
.spinnerItemDecreaseDisabledRTL {
  background-position: -16px -4px;
}

.spinnerItemDecrease,
.spinnerItemDecreaseRTL {
  background-position: 0px -4px;
}

.spinnerItemDecreaseOver,
.spinnerItemDecreaseOverRTL,
.spinnerItemDecreaseFocused,
.spinnerItemDecreaseFocusedRTL,
.spinnerItemDecreaseFocusedOver,
.spinnerItemDecreaseFocusedOverRTL {
  background-position: -31px -4px;
}

/* unstacked spinners */
.unstackedSpinnerIcon,
.unstackedSpinnerIconOver,
.unstackedSpinnerIconDown,
.unstackedSpinnerIconFocused,
.unstackedSpinnerIconFocusedOver,
.unstackedSpinnerIconDisabled {
  border: 1px solid #cdd5db;
  background-color: #ffffff;
  border-left: none;
  color: #778D87;
}

.unstackedSpinnerIconOver,
.unstackedSpinnerIconDown,
.unstackedSpinnerIconFocused,
.unstackedSpinnerIconFocusedOver {
  border: 1px solid #cdd5db;
  border-left: none;
  color: #3db271;
  background-color: #ffffff;
}

.unstackedSpinnerIconDisabled {
  border: 1px solid #d7dce4;
  border-left: none;
  color: #ababab;
  background-color: #fafafa;
}

/* Error state styles */
.unstackedSpinnerIconError,
.unstackedSpinnerIconErrorOver,
.unstackedSpinnerIconErrorDown,
.unstackedSpinnerIconErrorFocused,
.unstackedSpinnerIconErrorFocusedOver,
.unstackedSpinnerIconErrorDisabled {
  border: 1px solid #cdd5db;
  border-left: none;
  color: #778D87;
  background-color: #ffffff;
}

.unstackedSpinnerIconErrorOver,
.unstackedSpinnerIconErrorDown,
.unstackedSpinnerIconErrorFocused,
.unstackedSpinnerIconErrorFocusedOver {
  border: 1px solid #cdd5db;
  border-left: none;
  color: #3db271;
  background-color: #ffffff;
}

.unstackedSpinnerIconErrorDisabled {
  border: 1px solid #d7dce4;
  border-left: none;
  color: #ababab;
  background-color: #fafafa;
}

/* separate styles for each unstacked icon */
.unstackedSpinnerItemIncrease,
.unstackedSpinnerItemIncreaseOver {
  background: #ffffff url("images/DynamicForm/unstacked_spinner_plus.png") no-repeat center;
  border: 1px solid #cdd5db;
  border-left: none;
}

.unstackedSpinnerItemIncreaseFocused,
.unstackedSpinnerItemIncreaseFocusedOver {
  background: #ffffff url("images/DynamicForm/unstacked_spinner_plus_Focused.png") no-repeat center;
  border: 1px solid #cdd5db;
  border-left: none;
}

.unstackedSpinnerItemIncreaseFocusedRTL,
.unstackedSpinnerItemIncreaseFocusedOverRTL {
  background: #ffffff url("images/DynamicForm/unstacked_spinner_plus_Focused_rtl.png") no-repeat center;
  border: 1px solid #cdd5db;
  border-right: none;
}

.unstackedSpinnerItemIncreaseDisabled {
  background: #fafafa url("images/DynamicForm/unstacked_spinner_plus_Disabled.png") no-repeat center;
  border: 1px solid #d7dce4;
  border-left: none;
}

.unstackedSpinnerItemIncreaseDisabledRTL {
  background: #fafafa url("images/DynamicForm/unstacked_spinner_plus_Disabled_rtl.png") no-repeat center;
  border: 1px solid #d7dce4;
  border-right: none;
}

.unstackedSpinnerItemIncreaseRTL,
.unstackedSpinnerItemIncreaseOverRTL {
  background: #ffffff url("images/DynamicForm/unstacked_spinner_plus_rtl.png") no-repeat center;
  border: 1px solid #cdd5db;
  border-right: none;
}

.unstackedSpinnerItemDecreaseDisabled {
  background: #fafafa url("images/DynamicForm/unstacked_spinner_minus_Disabled.png") no-repeat center;
  border: 1px solid #d7dce4;
  border-left: none;
}

.unstackedSpinnerItemDecreaseDisabledRTL {
  background: #fafafa url("images/DynamicForm/unstacked_spinner_minus_Disabled_rtl.png") no-repeat center;
  border: 1px solid #d7dce4;
  border-right: none;
}

.unstackedSpinnerItemDecreaseRTL,
.unstackedSpinnerItemDecreaseOverRTL {
  background: #ffffff url("images/DynamicForm/unstacked_spinner_minus_rtl.png") no-repeat center;
  border: 1px solid #cdd5db;
  border-right: none;
}

.unstackedSpinnerItemDecrease,
.unstackedSpinnerItemDecreaseOver {
  background: #ffffff url("images/DynamicForm/unstacked_spinner_minus.png") no-repeat center;
  border: 1px solid #cdd5db;
  border-left: none;
}

.unstackedSpinnerItemDecreaseFocused,
.unstackedSpinnerItemDecreaseFocusedOver {
  background: #ffffff url("images/DynamicForm/unstacked_spinner_minus_Focused.png") no-repeat center;
  border: 1px solid #cdd5db;
  border-left: none;
}

.unstackedSpinnerItemDecreaseFocusedRTL,
.unstackedSpinnerItemDecreaseFocusedOverRTL {
  background: #ffffff url("images/DynamicForm/unstacked_spinner_minus_Focused_rtl.png") no-repeat center;
  border: 1px solid #cdd5db;
  border-right: none;
}

.spinnerItemIcon,
.spinnerItemIconOver,
.spinnerItemIconFocused,
.spinnerItemIconFocusedOver,
.spinnerItemIconDisabled {
  outline: none;
}

.pickListMenuAnimated,
.scrollingMenuAnimated {
  transition: transform 350ms;
}

.pickListMenu {
  border: 1px solid #d0d0d0;
  padding: 0px;
  background-color: #ffffff;
  box-shadow: none;
  border-radius: 2px;
}

.pickListMenuBody {
  background-color: #ffffff;
  border-right: none;
  border-radius: 2px;
}

.pickListCellSelected,
.pickListCellSelectedRTL,
.pickListCellSelectedDark,
.pickListCellSelectedDarkRTL,
.pickListCellPendingSelected,
.pickListCellPendingSelectedRTL,
.pickListCellPendingSelectedDark,
.pickListCellPendingSelectedDarkRTL,
.pickListCellDeselectedSelected,
.pickListCellDeselectedSelectedRTL,
.pickListCellDeselectedSelectedDark,
.pickListCellDeselectedSelectedDarkRTL {
  background-color: #f5f8fa;
}

.pickListCellOver,
.pickListCellOverRTL,
.pickListCellOverDark,
.pickListCellOverDarkRTL,
.pickListCellPendingOver,
.pickListCellPendingOverRTL,
.pickListCellPendingOverDark,
.pickListCellPendingOverDarkRTL,
.pickListCellDeselectedOver,
.pickListCellDeselectedOverRTL,
.pickListCellDeselectedOverDark,
.pickListCellDeselectedOverDarkRTL {
  background-color: #f5f8fa;
  border: none;
}

.pickListCellSelectedOver,
.pickListCellSelectedOverRTL,
.pickListCellSelectedOverDark,
.pickListCellSelectedOverDarkRTL,
.pickListCellPendingSelectedOver,
.pickListCellPendingSelectedOverRTL,
.pickListCellPendingSelectedOverDark,
.pickListCellPendingSelectedOverDarkRTL,
.pickListCellDeselectedSelectedOver,
.pickListCellDeselectedSelectedOverRTL,
.pickListCellDeselectedSelectedOverDark,
.pickListCellDeselectedSelectedOverDarkRTL {
  background-color: #f0f0f0;
  border: none;
}

.pickListCellDisabled,
.pickListCellDisabledRTL,
.pickListCellDisabledDark,
.pickListCellDisabledDarkRTL,
.pickListCellPendingDisabled,
.pickListCellPendingDisabledRTL,
.pickListCellPendingDisabledDark,
.pickListCellPendingDisabledDarkRTL,
.pickListCellDeselectedDisabled,
.pickListCellDeselectedDisabledRTL,
.pickListCellDeselectedDisabledDark,
.pickListCellDeselectedDisabledDarkRTL {
  background-color: #f9f9f9;
  color: #ababab;
}

.pickListCellDeselected,
.pickListCellDeselectedRTL,
.pickListCellDeselectedOver,
.pickListCellDeselectedOverRTL,
.pickListCellDeselectedSelected,
.pickListCellDeselectedSelectedRTL,
.pickListCellDeselectedSelectedOver,
.pickListCellDeselectedSelectedOverRTL,
.pickListCellDeselectedDisabled,
.pickListCellDeselectedDisabledRTL,
.pickListCellDeselectedDark,
.pickListCellDeselectedDarkRTL,
.pickListCellDeselectedOverDark,
.pickListCellDeselectedOverDarkRTL,
.pickListCellDeselectedSelectedDark,
.pickListCellDeselectedSelectedDarkRTL,
.pickListCellDeselectedSelectedOverDark,
.pickListCellDeselectedSelectedOverDarkRTL,
.pickListCellDeselectedDisabledDark,
.pickListCellDeselectedDisabledDarkRTL {
  color: #a8a8a8;
  text-decoration: line-through;
}

/* checkbox and radioButton */
/* labelAnchor - title text for checkBox and radio */
.labelAnchor,
.labelAnchorRTL,
.labelAnchorOver,
.labelAnchorOverRTL,
.labelAnchorFocused,
.labelAnchorFocusedRTL,
.labelAnchorFocusedOver,
.labelAnchorFocusedOverRTL,
.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 {
  background-color: transparent;
  color: #5b5b5b;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  vertical-align: middle;
  text-decoration: none;
  outline: none;
  padding: 0px 1px 0px 2px;
}

.pickListCellPending,
.pickListCellPendingRTL,
.pickListCellPendingOver,
.pickListCellPendingOverRTL,
.pickListCellPendingSelected,
.pickListCellPendingSelectedRTL,
.pickListCellPendingSelectedOver,
.pickListCellPendingSelectedOverRTL,
.pickListCellPendingDisabled,
.pickListCellPendingDisabledRTL,
.pickListCellPendingDark,
.pickListCellPendingDarkRTL,
.pickListCellPendingOverDark,
.pickListCellPendingOverDarkRTL,
.pickListCellPendingSelectedDark,
.pickListCellPendingSelectedDarkRTL,
.pickListCellPendingSelectedOverDark,
.pickListCellPendingSelectedOverDarkRTL,
.pickListCellPendingDisabledDark,
.pickListCellPendingDisabledDarkRTL {
  color: #0066CC;
}

.labelAnchorPending,
.labelAnchorPendingOver,
.labelAnchorPendingRTL,
.labelAnchorPendingOverRTL,
.labelAnchorPendingFocused,
.labelAnchorPendingFocusedOver,
.labelAnchorPendingFocusedRTL,
.labelAnchorPendingFocusedOverRTL,
.labelAnchorPendingError,
.labelAnchorPendingErrorOver,
.labelAnchorPendingErrorRTL,
.labelAnchorPendingErrorOverRTL {
  color: #0066CC;
}

.labelAnchorDisabled,
.labelAnchorDisabledRTL,
.labelAnchorPendingDisabled,
.labelAnchorPendingDisabledRTL {
  -webkit-text-fill-color: #ababab;
  color: #ababab;
}

/* 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 {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-decoration: none;
  text-align: left;
  outline: none;
  color: #5b5b5b;
  /* borders and padding for minimalist checkbox items */
  border: 1px solid #cdd5db;
  box-shadow: none;
  transition: border-color ease-in-out 0.2s, box-shadow ease-in-out 0.2s;
  background-color: #ffffff;
  border-radius: 2px;
}

.checkboxTrueDisabled,
.checkboxTrue,
.checkboxTrueOver,
.checkboxTrueDown,
.checkboxFalseDisabled,
.checkboxFalse,
.checkboxFalseOver,
.checkboxFalseDown,
.checkboxPartialDisabled,
.checkboxPartial,
.checkboxPartialOver,
.checkboxPartialDown,
.checkboxUnsetDisabled,
.checkboxUnset,
.checkboxUnsetOver,
.checkboxUnsetDown {
  display: inline-block;
  vertical-align: middle;
  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;
}

.radioTrueDisabled,
.radioTrue,
.radioTrueOver,
.radioTrueFocused,
.radioTrueFocusedOver,
.radioFalseDisabled,
.radioFalse,
.radioFalseOver,
.radioFalseFocused,
.radioFalseFocusedOver,
.radioUnsetDisabled,
.radioUnset,
.radioUnsetOver,
.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;
}

/* Native[Date/Time/Datetime]Item */
.nativeDateItem,
.nativeDateItemFocused,
.nativeDateItemDisabled,
.nativeDateItemDisabledHint,
.nativeDateItemError,
.nativeDateItemHint,
.nativeTimeItem,
.nativeTimeItemFocused,
.nativeTimeItemDisabled,
.nativeTimeItemDisabledHint,
.nativeTimeItemError,
.nativeTimeItemHint,
.nativeDatetimeItem,
.nativeDatetimeItemFocused,
.nativeDatetimeItemDisabled,
.nativeDatetimeItemDisabledHint,
.nativeDatetimeItemError,
.nativeDatetimeItemHint {
  border: 1px solid #cdd5db;
  padding: 4px 2px 4px 2px;
  background: rgba(255, 255, 255, 0);
  background: \9 transparent;
  color: transparent;
}

.nativeDateItem,
.nativeTimeItem,
.nativeDatetimeItem {
  outline: 0;
}

.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: #5b5b5b;
}

.nativeDateItemFocused,
.nativeTimeItemFocused,
.nativeDatetimeItemFocused {
  color: #5b5b5b;
}

.nativeDateItemInFieldHint,
.nativeDateItemInFieldHintDisabled,
.nativeTimeItemInFieldHint,
.nativeTimeItemInFieldHintDisabled,
.nativeDatetimeItemInFieldHint,
.nativeDatetimeItemInFieldHintDisabled {
  color: #cccccc;
  position: absolute;
  left: 0;
  display: inline-block;
  padding-right: 0px 3px 0px 3px;
  padding-left: 0px 3px 0px 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: -1;
}

.nativeDateItemInFieldHint,
.nativeDateItemInFieldHintDisabled,
.nativeDatetimeItemInFieldHint,
.nativeDatetimeItemInFieldHintDisabled {
  right: 30px;
}

.nativeTimeItemInFieldHint,
.nativeTimeItemInFieldHintDisabled {
  right: 20px;
}

.nativeDateItemDisabled,
.nativeDateItemDisabledHint::-webkit-calendar-picker-indicator,
.nativeDateItemInFieldHintDisabled,
.nativeTimeItemDisabled,
.nativeTimeItemInFieldHintDisabled,
.nativeDatetimeItemDisabled,
.nativeDatetimeItemDisabledHint::-webkit-calendar-picker-indicator,
.nativeDatetimeItemInFieldHintDisabled {
  -webkit-text-fill-color: #ababab;
  color: #ababab;
}

.nativeDateItem,
.nativeDateItemHint,
.nativeTimeItem,
.nativeTimeItemHint,
.nativeDatetimeItem,
.nativeDatetimeItemHint {
  border: 1px solid #cdd5db;
}

.buttonItemTitle,
.buttonItemTitleOver,
.buttonItemTitleDown,
.buttonItemTitleSelected,
.buttonItemTitleFocused,
.buttonItemTitleSelectedFocused,
.buttonItemTitleSelectedOver,
.buttonItemTitleFocusedOver,
.buttonItemTitleSelectedFocusedOver,
.buttonItemTitleSelectedDown,
.buttonItemTitleFocusedDown,
.buttonItemTitleSelectedFocusedDown,
.buttonItemTitleDisabled,
.buttonItemTitleSelectedDisabled {
  color: #ffffff;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.buttonItemTitleDisabled,
.buttonItemTitleSelectedDisabled {
  color: #ffffff;
}

.nativeDateItemDisabled::-webkit-calendar-picker-indicator,
.nativeDateItemDisabledHint::-webkit-calendar-picker-indicator,
.nativeDatetimeItemDisabled::-webkit-calendar-picker-indicator,
.nativeDatetimeItemDisabledHint::-webkit-calendar-picker-indicator {
  background: none;
}

/* FilterBuilder */
.bracketBorders {
  border: 1px solid #d0d0d0;
  border-right: none;
}

.filterBuilderTitleCell {
  background-color: #f9f9f9;
  font-size: 12px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #5b5b5b;
  padding: 2px 3px 2px 3px;
  border: none;
  border-bottom: 1px solid #e8ebed;
  border-right: none;
  text-overflow: ellipsis;
  cursor: not-allowed;
}

.filterBuilderTitleCellDisabled {
  background-color: #f9f9f9;
  font-size: 12px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ababab;
  padding: 2px 3px 2px 3px;
  border: none;
  border-bottom: 1px solid #e8ebed;
  border-right: none;
  text-overflow: ellipsis;
  cursor: not-allowed;
}

.ruleScopeSelectionTitleCell {
  background-color: #f9f9f9;
  font-size: 12px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #5b5b5b;
  padding: 0px 3px 0px 0px;
  text-overflow: ellipsis;
  border: none;
  border-bottom: none;
  border-right: none;
}

.ruleScopeSelectionTitleCellSource {
  background-color: #f9f9f9;
  font-size: 12px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #ababab;
  padding: 0px 3px 0px 0px;
  text-overflow: ellipsis;
  border: none;
  border-bottom: none;
  border-right: none;
}

/* style to apply to a resize-overlay used by widgets during resize-animations */
.resizeWireFrame {
  border: 1px solid #b7b7b7;
}

/* style for the complex editor shown by MultiPickerItem */
.multiPickerLayout {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
}

/*============================================================
     DateChooser
============================================================*/
.dateGridHeaderBar {
  background: transparent;
}

.dateGridBody {
  background: #ffffff;
  border: none;
  border-radius: 0px;
  padding: 0px;
}

.dateChooserHeader {
  background: #f0f0f0;
  padding: 0px;
  border-radius: 0px;
}

/* this is an extra class for the Today's date in Datechoosers */
/* dateChooserButton - this is actually used for the header-buttons in the DateGrid - note 
   that dateChooserWeekendButton controls the header-buttons for weekend days */
.dateChooserButton,
.dateChooserButtonOver,
.dateChooserButtonDown,
.dateChooserButtonDisabled,
.dateChooserButtonSelected,
.dateChooserButtonSelectedOver,
.dateChooserButtonSelectedDown,
.dateChooserButtonSelectedDisabled {
  background-color: #f0f0f0;
  color: #444444;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  border: none;
  transition: background-color 0.2s;
}

.dateChooserButtonOver,
.dateChooserButtonDown {
  color: #3db271;
  cursor: pointer;
}

.dateChooserButtonDisabled {
  color: #cccccc;
}

/* for dateChooser weekend grid-headers */
.dateChooserWeekendButton,
.dateChooserWeekendButtonOver,
.dateChooserWeekendButtonDown,
.dateChooserWeekendButtonDisabled,
.dateChooserWeekendButtonSelected,
.dateChooserWeekendButtonSelectedDown,
.dateChooserWeekendButtonSelectedOver,
.dateChooserWeekendButtonSelectedDisabled {
  background-color: #f0f0f0;
  color: #5b5b5b;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  transition: background-color 0.2s;
}

.dateChooserWeekendButtonOver,
.dateChooserWeekendButtonDown {
  background-color: #f0f0f0;
  color: #5b5b5b;
  cursor: pointer;
}

.dateChooserWeekendButtonDisabled {
  color: #cccccc;
}

/* bottom buttons */
.dateChooserBottomButton,
.dateChooserBottomButtonOver,
.dateChooserBottomButtonDown,
.dateChooserBottomButtonDisabled,
.dateChooserBottomButtonSelected,
.dateChooserBottomButtonSelectedOver,
.dateChooserBottomButtonSelectedDown,
.dateChooserBottomButtonSelectedDisabled {
  background-color: #f0f0f0;
  color: #444444;
  border: 0px solid #ffffff;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  transition: background-color 0.2s;
}

/* specialCol fields - fiscalYear and week */
.dateChooserFiscalYearCell,
.dateChooserFiscalYearCellOver,
.dateChooserFiscalYearCellDown,
.dateChooserFiscalYearCellDisabled,
.dateChooserFiscalYearCellSelected,
.dateChooserFiscalYearCellSelectedDown,
.dateChooserFiscalYearCellSelectedOver,
.dateChooserFiscalYearCellSelectedDisabled {
  color: #5b5b5b;
  background-color: #ffffff;
  border: 0px solid #ffffff;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  border-radius: 3px;
}

.dateChooserFiscalYearCellOver,
.dateChooserFiscalYearCellDown,
.dateChooserFiscalYearCellSelectedOver,
.dateChooserFiscalYearCellSelectedDown {
  color: #ffffff;
  background-color: #3db271;
}

.dateChooserFiscalYearCellSelected {
  color: #ffffff;
  background-color: #3db271;
}

.dateChooserFiscalYearCellDisabled {
  color: #cccccc;
}

/* specialCol - weekCell */
.dateChooserWeekCell,
.dateChooserWeekCellOver,
.dateChooserWeekCellDown,
.dateChooserWeekCellDisabled,
.dateChooserWeekCellSelected,
.dateChooserWeekCellSelectedDown,
.dateChooserWeekCellSelectedOver,
.dateChooserWeekCellSelectedDisabled {
  color: #5b5b5b;
  background-color: #ffffff;
  border: 0px solid #ffffff;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  border-radius: 3px;
  transition: background-color 0.2s;
}

.dateChooserWeekCellOver,
.dateChooserWeekCellDown,
.dateChooserWeekCellSelectedOver,
.dateChooserWeekCellSelectedDown {
  color: #ffffff;
  background-color: #3db271;
}

.dateChooserWeekCellSelected {
  color: #ffffff;
  background-color: #3db271;
}

/* selected week cells in the*/
.dateChooserSelectedWeek,
.dateChooserSelectedWeekOver,
.dateChooserSelectedWeekDown,
.dateChooserSelectedWeekDisabled,
.dateChooserSelectedWeekSelected,
.dateChooserSelectedWeekSelectedDown,
.dateChooserSelectedWeekSelectedOver,
.dateChooserSelectedWeekSelectedDisabled {
  background-color: #ffffff;
  color: #5b5b5b;
  border: 0px solid #ffffff;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  transition: background-color 0.2s;
}

.dateChooserSelectedWeekOver,
.dateChooserSelectedWeekDown,
.dateChooserSelectedWeekSelectedOver,
.dateChooserSelectedWeekSelectedDown {
  color: #ffffff;
  background-color: #3db271;
}

.dateChooserSelectedWeekSelected {
  color: #ffffff;
  background-color: #3db271;
}

/* weekday cells */
.dateChooserWeekday,
.dateChooserWeekdayOver,
.dateChooserWeekdayDown,
.dateChooserWeekdaySelected,
.dateChooserWeekdaySelectedOver,
.dateChooserWeekdaySelectedDown,
.dateChooserWeekdayDisabled,
.dateChooserWeekdaySelectedDisabled {
  background-color: #ffffff;
  border: 0px solid #ffffff;
  color: #5b5b5b;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  cursor: pointer;
  border-radius: 3px;
  transition: background-color 0.2s;
}

.dateChooserWeekdayOver {
  background-color: #3db271;
  color: #ffffff;
}

/* selected/over date-cell styling */
.dateChooserWeekdaySelectedOver {
  background-color: #3db271;
  color: #ffffff;
  border: 0px solid #3db271;
}

.dateChooserWeekdaySelected,
.dateChooserWeekdayDown,
.dateChooserWeekdaySelectedDown {
  background-color: #3db271;
  color: #ffffff;
}

.dateChooserWeekdaySelected {
  background-color: #3db271;
  color: #ffffff;
  border: 0px solid #3db271;
}

.dateChooserWeekdayDisabled {
  color: #cccccc;
}

/* dateChooser disabled weekday cells */
.dateChooserDisabledWeekday,
.dateChooserDisabledWeekdayOver,
.dateChooserDisabledWeekdayDown,
.dateChooserDisabledWeekdaySelected,
.dateChooserDisabledWeekdaySelectedDown,
.dateChooserDisabledWeekdaySelectedOver {
  color: #cccccc;
  border: 0px solid #ffffff;
  background-color: #ffffff;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  transition: background-color 0.2s;
}

.dateChooserDisabledWeekdaySelected,
.dateChooserDisabledWeekdaySelectedDown,
.dateChooserDisabledWeekdaySelectedOver {
  background-color: #f9f9f9;
  color: #5b5b5b;
  border-radius: 3px;
}

/* end dateChooser disabled weekday cells */
/* dateChooser weekend grid-cells */
.dateChooserWeekend,
.dateChooserWeekendOver,
.dateChooserWeekendDown,
.dateChooserWeekendSelected,
.dateChooserWeekendSelectedOver,
.dateChooserWeekendSelectedDown,
.dateChooserWeekendDisabled,
.dateChooserWeekendSelectedDisabled {
  background-color: #f0f0f0;
  color: #5b5b5b;
  border: 0px solid #f0f0f0;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  cursor: pointer;
  border-radius: 3px;
  transition: background-color 0.2s;
}

.dateChooserWeekendOver {
  background-color: #3db271;
  color: #ffffff;
}

/* selected/over date-cell styling */
.dateChooserWeekendSelectedOver {
  background-color: #3db271;
  color: #ffffff;
  border: 0px solid #3db271;
}

.dateChooserWeekendSelected,
.dateChooserWeekendDown,
.dateChooserWeekendSelectedDown {
  background-color: #3db271;
  color: #ffffff;
}

.dateChooserWeekendSelected {
  background-color: #3db271;
  color: #ffffff;
  border: 0px solid #3db271;
}

.dateChooserWeekendDisabled {
  color: #cccccc;
}

/* dateChooser disabled weekend cells */
.dateChooserDisabledWeekend,
.dateChooserDisabledWeekendOver,
.dateChooserDisabledWeekendDown,
.dateChooserDisabledWeekendSelected,
.dateChooserDisabledWeekendSelectedDown,
.dateChooserDisabledWeekendSelectedOver {
  color: #cccccc;
  border: 0px solid #f0f0f0;
  background-color: #f0f0f0;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  transition: background-color 0.2s;
}

.dateChooserDisabledWeekendDown,
.dateChooserDisabledWeekendSelected,
.dateChooserDisabledWeekendSelectedDown {
  background-color: #f9f9f9;
  color: #5b5b5b;
  border-radius: 3px;
}

/* end dateChooser disabled weekend cells */
/* year, month and week pop-up menus */
.dateChooserYearMenu,
.dateChooserMonthMenu,
.dateChooserWeekMenu {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  border-radius: 2px;
  box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.05);
  padding: 4px;
  transition: background-color 0.2s;
}

/* cells in the popup menus */
.dateChooserMenuItem,
.dateChooserMenuItemOver,
.dateChooserMenuItemDown,
.dateChooserMenuItemSelected,
.dateChooserMenuItemSelectedOver,
.dateChooserMenuItemDisabled {
  color: #444444;
  background-color: #ffffff;
  border: none;
  border-radius: 2px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  padding: 4px;
  transition: background-color 0.2s;
}

.dateChooserMenuItemOver,
.dateChooserMenuItemSelectedOver {
  color: #3db271;
  background-color: #ffffff;
}

.dateChooserMenuItemDown,
.dateChooserMenuItemSelected {
  color: #3db271;
  background-color: #ffffff;
}

.dateChooserMenuItemDisabled,
.dateChooserMenuItemSelectedDisabled {
  color: #ababab;
  background-color: #ffffff;
}

/* CSS3 Mode
   Canvas border around calendar */
.dateChooserBorder {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.05);
  outline: none;
  border-radius: 2px;
}

.dateChooserBorderTop {
  border-top: 1px solid #d0d0d0;
}

/* applied to the navigation-layout at the top of the DateChooser */
.dateChooserBorderBottom {
  background-color: #f0f0f0;
  border-radius: 0px;
}

/* draw a separator that looks like a bottom-border on the dialog-header, but can float outside 
   of it, ignores it's radius and can be sized as required */
.dateChooserBorderBottom::after {
  content: '';
  position: absolute;
  /* v-offset from header-bottom, and x-offset (indent) from the left and right - defaults are 0 */
  bottom: 0;
  left: 0px;
  right: 0px;
  /* use border-bottom to draw the line */
  border: none;
  border-bottom: 1px solid #d0d0d0;
  border-radius: 0px;
  z-index: 1;
}

/* DateChooser navigation buttons, next/previous year/month, etc, across the top of the chooser */
.dateChooserNavButton,
.dateChooserNavButtonOver,
.dateChooserNavButtonDown,
.dateChooserNavButtonSelected,
.dateChooserNavButtonSelectedOver,
.dateChooserNavButtonSelectedDown,
.dateChooserNavButtonSelectedFocused,
.dateChooserNavButtonSelectedFocusedOver,
.dateChooserNavButtonSelectedFocusedDown,
.dateChooserNavButtonFocused,
.dateChooserNavButtonFocusedOver,
.dateChooserNavButtonFocusedDown,
.dateChooserNavButtonDisabled,
.dateChooserNavButtonSelectedDisabled {
  background-color: #f0f0f0;
  color: #616161;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  padding: 2px;
  border-radius: 3px;
  border-bottom: none;
  border-top: none;
  cursor: pointer;
  opacity: 1;
  transition: background-color 0.2s;
}

.dateChooserNavButtonOver,
.dateChooserNavButtonDown,
.dateChooserNavButtonFocused,
.dateChooserNavButtonFocusedOver,
.dateChooserNavButtonFocusedDown {
  color: #3db271;
  background: #f0f0f0;
}

.dateChooserNavButtonSelected,
.dateChooserNavButtonSelectedOver {
  color: #3db271;
  background: #f0f0f0;
}

.dateChooserNavButtonSelectedFocused,
.dateChooserNavButtonSelectedFocusedOver,
.dateChooserNavButtonSelectedFocusedDown {
  color: #3db271;
  background: #f0f0f0;
}

.dateChooserNavButtonDisabled,
.dateChooserNavButtonSelectedDisabled {
  cursor: inherit;
  opacity: 0.7;
}

/* Spriting for navigation arrows */
.dateChooserNavMonthBack,
.dateChooserNavMonthForward,
.dateChooserNavYearBack,
.dateChooserNavYearForward {
  width: 22px;
  height: 22px;
  border-radius: 3px;
  display: inline-block;
  outline: none;
  vertical-align: middle;
  margin: 0 auto;
  background: none no-repeat;
}

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

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

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

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

.pickerIcon {
  color: #5b5b5b;
  background-color: #ffffff;
  border: none;
  padding: 0px 0px 0px 2px;
  border-radius: 2px;
  outline-width: 0px;
}

/* ColorPicker styles */
.colorPicker {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  padding: 0px;
  margin: 0px;
  box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.05);
  border-radius: 2px;
}

.colorPickerHeader,
.colorPickerHilite {
  padding: 0px;
  background-color: #3db271;
  border-radius: 0px;
}

/* draw a separator that looks like a bottom-border on the dialog-header, but can float outside 
   of it, ignores it's radius and can be sized as required */
.colorPickerHeader::after,
.colorPickerHeaderHilite::after {
  content: '';
  position: absolute;
  /* v-offset from header-bottom, and x-offset (indent) from the left and right - defaults are 0 */
  bottom: 0;
  left: 0px;
  right: 0px;
  /* use border-bottom to draw the line */
  border: none;
  border-bottom: 1px solid #d0d0d0;
  border-radius: 0px;
  z-index: 1;
}

.colorPickerBody {
  background-color: #ffffff;
  border-radius: 0px;
}

.colorPickerInnerContent {
  padding: 0px 0px 5px 0px;
}

.colorPickerButtonLayout {
  background: transparent;
  padding: 8px;
  border-top: 1px solid #d0d0d0;
  border-radius: 2px;
}

.colorPickerHeaderText {
  background-color: #3db271;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  padding: 4px 8px 4px 8px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
}

/* ColorPicker swatch  */
.colorPickerSwatchImage,
.colorPickerSwatchImageOver,
.colorPickerSwatchImageDown,
.colorPickerSwatchImageDisabled {
  background-color: #f0f0f0;
  border: 1px solid #cdd5db;
  border-radius: 2px;
}

.colorPickerSwatchImageDisabled {
  border: 1px solid #d7dce4;
}

/* ColorPicker opacity canvas */
.colorPickerOpacityBox {
  background-color: #ffffff;
  border: 1px solid #cdd5db;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: 0px 3px;
  border-radius: 2px;
}

/* ColorChooser (ColorPicker) */
.colorChooserCell,
.colorChooserCellOver,
.colorChooserCellDown,
.colorChooserCellDisabled {
  background-color: #f0f0f0;
  border: 1px solid #d0d0d0;
  border-radius: 2px;
  transition: color 0.2s, background-color, opacity;
}

.colorChooserCellDisabled {
  border: 1px solid #d7dce4;
}

.colorChooserCellOver,
.colorChooserCellDown {
  border: 1px solid #000000;
}

/*ListGrid EditorTypes*/
.textItemLiteEditorType,
.textItemLiteEditorTypeRTL,
.textItemLiteEditorTypeOver,
.textItemLiteEditorTypeOverRTL,
.textItemLiteEditorTypeFocused,
.textItemLiteEditorTypeFocusedRTL,
.textItemLiteEditorTypeFocusedOver,
.textItemLiteEditorTypeFocusedOverRTL,
.textItemLiteEditorTypeDisabled,
.textItemLiteEditorTypeDisabledRTL,
.textItemLiteEditorTypeError,
.textItemLiteEditorTypeErrorRTL,
.textItemLiteEditorTypeErrorOver,
.textItemLiteEditorTypeErrorOverRTL,
.textItemLiteEditorTypeErrorFocused,
.textItemLiteEditorTypeErrorFocusedRTL,
.textItemLiteEditorTypeErrorFocusedOver,
.textItemLiteEditorTypeErrorFocusedOverRTL,
.textItemLiteEditorTypePending,
.textItemLiteEditorTypePendingRTL,
.textItemLiteEditorTypePendingOver,
.textItemLiteEditorTypePendingOverRTL,
.textItemLiteEditorTypePendingFocused,
.textItemLiteEditorTypePendingFocusedRTL,
.textItemLiteEditorTypePendingFocusedOver,
.textItemLiteEditorTypePendingFocusedOverRTL,
.textItemLiteEditorTypePendingDisabled,
.textItemLiteEditorTypePendingDisabledRTL,
.textItemLiteEditorTypePendingError,
.textItemLiteEditorTypePendingErrorRTL,
.textItemLiteEditorTypeHint,
.textItemLiteEditorTypeHintRTL,
.textItemLiteEditorTypeDisabledHint,
.textItemLiteEditorTypeDisabledHintRTL {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #5b5b5b;
  padding: 0px 2px 0px 2px;
  outline: none;
  text-decoration: none;
  text-align: left;
  /* borders and padding for minimalist text-based items */
  border: 1px solid #cdd5db;
  box-shadow: none;
  transition: border-color ease-in-out 0.2s, box-shadow ease-in-out 0.2s;
  background-color: #ffffff;
  border-radius: 2px;
}

/* focused state */
.textItemLiteEditorTypeFocused,
.textItemLiteEditorTypeFocusedRTL,
.textItemLiteEditorTypePendingFocused,
.textItemLiteEditorTypePendingFocusedRTL {
  outline: none;
  border-color: #3db271;
  box-shadow: inset 0 0 5px 0 #3db271;
}

/* 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,
.selectItemLiteTextEditorTypeErrorOver,
.selectItemLiteTextEditorTypeErrorOverRTL,
.selectItemLiteTextEditorTypeErrorFocused,
.selectItemLiteTextEditorTypeErrorFocusedRTL,
.selectItemLiteTextEditorTypeErrorFocusedOver,
.selectItemLiteTextEditorTypeErrorFocusedOverRTL,
.selectItemLiteTextEditorTypePending,
.selectItemLiteTextEditorTypePendingRTL,
.selectItemLiteTextEditorTypePendingFocused,
.selectItemLiteTextEditorTypePendingFocusedRTL,
.selectItemLiteTextEditorTypePendingDisabled,
.selectItemLiteTextEditorTypePendingDisabledRTL,
.selectItemLiteTextEditorTypePendingError,
.selectItemLiteTextEditorTypePendingErrorRTL,
.selectItemLiteTextEditorTypeHint,
.selectItemLiteTextEditorTypeHintRTL,
.selectItemLiteTextEditorTypeDisabledHint,
.selectItemLiteTextEditorTypeDisabledHintRTL {
  background-color: rgba(255, 255, 255, 0);
  background-color: \9 transparent;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #5b5b5b;
  padding-right: 0px;
  outline: none;
  text-decoration: none;
  text-align: left;
  border-radius: 2px;
  border: 0px;
}

.selectItemLiteControlEditorType,
.selectItemLiteControlEditorTypeRTL,
.selectItemLiteControlEditorTypeFocused,
.selectItemLiteControlEditorTypeFocusedRTL,
.selectItemLiteControlEditorTypeOver,
.selectItemLiteControlEditorTypeOverRTL,
.selectItemLiteControlEditorTypeFocusedOver,
.selectItemLiteControlEditorTypeFocusedOverRTL,
.selectItemLiteControlEditorTypeError,
.selectItemLiteControlEditorTypeErrorRTL,
.selectItemLiteControlEditorTypeErrorOver,
.selectItemLiteControlEditorTypeErrorOverRTL,
.selectItemLiteControlEditorTypeErrorFocused,
.selectItemLiteControlEditorTypeErrorFocusedRTL,
.selectItemLiteControlEditorTypeErrorFocusedOver,
.selectItemLiteControlEditorTypeErrorFocusedOverRTL,
.selectItemLiteControlEditorTypePending,
.selectItemLiteControlEditorTypePendingRTL,
.selectItemLiteControlEditorTypePendingFocused,
.selectItemLiteControlEditorTypePendingFocusedRTL,
.selectItemLiteControlEditorTypePendingOver,
.selectItemLiteControlEditorTypePendingOverRTL,
.selectItemLiteControlEditorTypePendingFocusedOver,
.selectItemLiteControlEditorTypePendingFocusedOverRTL,
.selectItemLiteControlEditorTypePendingDisabled,
.selectItemLiteControlEditorTypePendingDisabledRTL,
.selectItemLiteControlEditorTypePendingError,
.selectItemLiteControlEditorTypePendingErrorRTL,
.selectItemLiteControlEditorTypeHint,
.selectItemLiteControlEditorTypeHintRTL {
  border: 1px solid #cdd5db;
  transition: border-color ease-in-out 0.2s, box-shadow ease-in-out 0.2s;
  background-color: #ffffff;
  border-radius: 2px;
}

.selectItemLiteControlEditorTypeFocused,
.selectItemLiteControlEditorTypeFocusedRTL,
.selectItemLiteControlEditorTypeFocusedOver,
.selectItemLiteControlEditorTypeFocusedOverRTL,
.selectItemLiteControlEditorTypeErrorFocused,
.selectItemLiteControlEditorTypeErrorFocusedRTL,
.selectItemLiteControlEditorTypeErrorFocusedOver,
.selectItemLiteControlEditorTypeErrorFocusedOverRTL,
.selectItemLiteControlEditorTypePendingFocused,
.selectItemLiteControlEditorTypePendingFocusedRTL,
.selectItemLiteControlEditorTypePendingFocusedOver,
.selectItemLiteControlEditorTypePendingFocusedOverRTL {
  outline: none;
  border-color: #3db271;
  box-shadow: none;
  background-color: #ffffff;
}

/* over state */
.textItemLiteEditorTypeOver,
.textItemLiteEditorTypeOverRTL,
.textItemLiteEditorTypePendingOver,
.textItemLiteEditorTypePendingOverRTL {
  box-shadow: none;
  border: 1px solid #cdd5db;
}

.selectItemLiteControlEditorTypeOver,
.selectItemLiteControlEditorTypeOverRTL,
.selectItemLiteControlEditorTypeErrorOver,
.selectItemLiteControlEditorTypeErrorRTL,
.selectItemLiteControlEditorTypePendingOver,
.selectItemLiteControlEditorTypePendingOverRTL {
  box-shadow: none;
  border: 1px solid #cdd5db;
}

/* focused over */
.textItemLiteEditorTypeErrorFocusedOver,
.textItemLiteEditorTypeErrorFocusedOverRTL,
.textItemLiteEditorTypeFocusedOver,
.textItemLiteEditorTypeFocusedOverRTL,
.textItemLiteEditorTypePendingFocusedOver,
.textItemLiteEditorTypePendingFocusedOverRTL,
.textAreaItemLiteEditorTypeFocusedOver,
.textAreaItemLiteEditorTypeFocusedOverRTL,
.textAreaItemLiteEditorTypeErrorFocusedOver,
.textAreaItemLiteEditorTypeErrorFocusedOverRTL,
.textAreaItemLiteEditorTypePendingFocusedOver,
.textAreaItemLiteEditorTypePendingFocusedOverRTL,
.selectItemLiteEditorTypeControlFocusedOver,
.selectItemLiteEditorTypeControlFocusedOverRTL,
.selectItemLiteEditorTypeControlPendingFocusedOver,
.selectItemLiteEditorTypeControlPendingFocusedOverRTL,
.nativeSelectItemErrorFocusedOver,
.nativeSelectItemErrorFocusedOverRTL {
  outline: none;
  box-shadow: none;
  border: 1px solid #3db271;
}

/* error state */
.textItemLiteEditorTypeError,
.textItemLiteEditorTypeErrorRTL,
.textItemLiteEditorTypeErrorOver,
.textItemLiteEditorTypeErrorOverRTL,
.textItemLiteEditorTypeErrorFocused,
.textItemLiteEditorTypeErrorFocusedRTL,
.textItemLiteEditorTypeErrorFocusedOver,
.textItemLiteEditorTypeErrorFocusedOverRTL,
.textItemLiteEditorTypeErrorDisabled,
.textItemLiteEditorTypeErrorDisabledRTL,
.nativeSelectItemLiteEditorTypeError,
.nativeSelectItemLiteEditorTypeErrorRTL,
.nativeSelectItemLiteEditorTypeErrorOver,
.nativeSelectItemLiteEditorTypeErrorOverRTL,
.nativeSelectItemLiteEditorTypeErrorFocused,
.nativeSelectItemLiteEditorTypeErrorFocusedRTL,
.nativeSelectItemLiteEditorTypeErrorFocusedOver,
.nativeSelectItemLiteEditorTypeErrorFocusedOverRTL,
.nativeSelectItemLiteEditorTypeErrorDisabled,
.nativeSelectItemLiteEditorTypeErrorDisabledRTL,
.textAreaItemLiteEditorTypeError,
.textAreaItemLiteEditorTypeErrorRTL,
.textAreaItemLiteEditorTypeErrorOver,
.textAreaItemLiteEditorTypeErrorOverRTL,
.textAreaItemLiteEditorTypeErrorFocused,
.textAreaItemLiteEditorTypeErrorFocusedRTL,
.textAreaItemLiteEditorTypeErrorFocusedOver,
.textAreaItemLiteEditorTypeErrorFocusedOverRTL,
.textAreaItemLiteEditorTypeErrorDisabled,
.textAreaItemLiteEditorTypeErrorDisabledRTL {
  color: #5b5b5b;
}

/* Placeholder styles extracted from @include input-placeholder */
.textItemLiteEditorTypeError::placeholder,
.textItemLiteEditorTypeErrorRTL::placeholder,
.textItemLiteEditorTypeErrorOver::placeholder,
.textItemLiteEditorTypeErrorOverRTL::placeholder,
.textItemLiteEditorTypeErrorFocused::placeholder,
.textItemLiteEditorTypeErrorFocusedRTL::placeholder,
.textItemLiteEditorTypeErrorFocusedOver::placeholder,
.textItemLiteEditorTypeErrorFocusedOverRTL::placeholder,
.textItemLiteEditorTypeErrorDisabled::placeholder,
.textItemLiteEditorTypeErrorDisabledRTL::placeholder,
.nativeSelectItemLiteEditorTypeError::placeholder,
.nativeSelectItemLiteEditorTypeErrorRTL::placeholder,
.nativeSelectItemLiteEditorTypeErrorOver::placeholder,
.nativeSelectItemLiteEditorTypeErrorOverRTL::placeholder,
.nativeSelectItemLiteEditorTypeErrorFocused::placeholder,
.nativeSelectItemLiteEditorTypeErrorFocusedRTL::placeholder,
.nativeSelectItemLiteEditorTypeErrorFocusedOver::placeholder,
.nativeSelectItemLiteEditorTypeErrorFocusedOverRTL::placeholder,
.nativeSelectItemLiteEditorTypeErrorDisabled::placeholder,
.nativeSelectItemLiteEditorTypeErrorDisabledRTL::placeholder,
.textAreaItemLiteEditorTypeError::placeholder,
.textAreaItemLiteEditorTypeErrorRTL::placeholder,
.textAreaItemLiteEditorTypeErrorOver::placeholder,
.textAreaItemLiteEditorTypeErrorOverRTL::placeholder,
.textAreaItemLiteEditorTypeErrorFocused::placeholder,
.textAreaItemLiteEditorTypeErrorFocusedRTL::placeholder,
.textAreaItemLiteEditorTypeErrorFocusedOver::placeholder,
.textAreaItemLiteEditorTypeErrorFocusedOverRTL::placeholder,
.textAreaItemLiteEditorTypeErrorDisabled::placeholder,
.textAreaItemLiteEditorTypeErrorDisabledRTL::placeholder {
  color: #5b5b5b;
  opacity: 1;
  text-overflow: ellipsis;
}

.textItemLiteEditorTypeError,
.textItemLiteEditorTypeErrorRTL,
.nativeSelectItemLiteEditorTypeError,
.nativeSelectItemLiteEditorTypeErrorRTL,
.textAreaItemLiteEditorTypeError,
.textAreaItemLiteEditorTypeErrorRTL {
  border: 1px solid #cdd5db;
}

/*============================================================
	9) Slider & Rangebar
============================================================*/
/* Sliders */
.slider {
  padding: 1px 0px 1px 0px;
}

/* slider and rangebar labels */
.sliderTitle,
.sliderTitleOver,
.sliderRange,
.sliderRangeOver,
.sliderRangeDisabled,
.sliderValue,
.sliderValueOver,
.sliderValueDisabled,
.rangebarTitle,
.rangebarRange,
.rangebarValue {
  color: #5b5b5b;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 12px;
}

.sliderRange {
  font-weight: 400;
}

.sliderTitle,
.rangebarTitle {
  color: #4d4d4d;
}

.sliderRangeDisabled,
.sliderValueDisabled {
  color: #ababab;
}

/* SliderTrack */
.hSliderTrack,
.vSliderTrack,
.hSliderTrackOver,
.vSliderTrackOver,
.hSliderTrackDown,
.vSliderTrackDown,
.hSliderTrackDisabled,
.vSliderTrackDisabled {
  background-color: #e6e6e6;
  border-radius: 10px;
  outline: none;
}

.hSliderTrackDisabled,
.vSliderTrackDisabled {
  background-color: #e6e6e6;
}

/* Slider thumb */
.hSliderThumb,
.hSliderThumbOver,
.hSliderThumbtouch,
.hSliderThumbdown,
.hSliderThumbdowntouch,
.hSliderThumbDisabled,
.hSliderThumbDisabledtouch,
.vSliderThumb,
.vSliderThumbOver,
.vSliderThumbtouch,
.vSliderThumbdown,
.vSliderThumbdowntouch,
.vSliderThumbDisabled,
.vSliderThumbDisabledtouch {
  background-color: #38a37e;
  border-radius: 15px;
  border: none;
  outline: none;
}

/* disabled thumb */
.hSliderThumbDisabled,
.hSliderThumbDisabledtouch,
.vSliderThumbDisabled,
.vSliderThumbDisabledtouch {
  background-color: #9e9e9e;
  border: none;
}

.hSliderThumbtouch,
.hSliderThumbdowntouch,
.vSliderThumbtouch,
.vSliderThumbdowntouch,
.hSliderThumbDisabledtouch,
.vSliderThumbDisabledtouch {
  border-radius: 15px;
}

/* slider pointy arrows - start */
.sliderValue,
.sliderValueOver,
.sliderValueDisabled,
.sliderValueDisabledOver,
.vSliderValue,
.vSliderValueOver,
.vSliderValueDisabled,
.vSliderValueDisabledOver,
.hSliderValue,
.hSliderValueOver,
.hSliderValueDisabled,
.hSliderValueDisabledOver {
  color: #333b41;
  position: absolute;
  background-color: #ffffff;
  border: 1px solid #cdd5db;
  border-radius: 3px;
  line-height: 14px;
  text-align: center;
  display: inline-block;
  margin-top: 2px;
  box-shadow: none;
  padding: 2px;
}

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

/* custom property - to position the pointy-arrow accurately - it defaults to 50% and you can 
   change it directly on the handle of a given slider's valueLabel layout at runtime to move 
   the arrow around 
--isc-sliderValueArrowOffset: 50%;
*/
.vSliderValue:after, .vSliderValue:before,
.vSliderValueOver:after, .vSliderValueOver:before,
.vSliderValueDisabled:after, .vSliderValueDisabled:before,
.vSliderValueDisabledOver:after, .vSliderValueDisabledOver:before {
  left: 100%;
  top: var(--isc-sliderValueArrowOffset, 50%);
}

.hSliderValue:after, .hSliderValue:before,
.hSliderValueOver:after, .hSliderValueOver:before,
.hSliderValueDisabled:after, .hSliderValueDisabled:before,
.hSliderValueDisabledOver:after, .hSliderValueDisabledOver:before {
  top: 100%;
  left: var(--isc-sliderValueArrowOffset, 50%);
}

/* SliderValue */
.vSliderValue:after {
  border-left-color: #ffffff;
  border-width: 4px;
  margin-top: -4px;
}

.vSliderValue:before {
  border-left-color: #cdd5db;
  border-width: 5px;
  margin-top: -5px;
}

.hSliderValue:after {
  border-top-color: #ffffff;
  border-width: 4px;
  margin-left: -4px;
}

.hSliderValue:before {
  border-top-color: #cdd5db;
  border-width: 5px;
  margin-left: -5px;
}

/* SliderValueOver */
.vSliderValueOver:after {
  border-left-color: #ffffff;
  border-width: 4px;
  margin-top: -4px;
}

.vSliderValueOver:before {
  border-left-color: #cdd5db;
  border-width: 5px;
  margin-top: -5px;
}

.hSliderValueOver:after {
  border-top-color: #ffffff;
  border-width: 4px;
  margin-left: -4px;
}

.hSliderValueOver:before {
  border-top-color: #cdd5db;
  border-width: 5px;
  margin-left: -5px;
}

/* SliderValueDisabled */
.vSliderValueDisabled:after {
  border-left-color: #e6e6e6;
  border-width: 4px;
  margin-top: -4px;
}

.vSliderValueDisabled:before {
  border-left-color: #cdd5db;
  border-width: 5px;
  margin-top: -5px;
}

.hSliderValueDisabled:after {
  border-top-color: #e6e6e6;
  border-width: 4px;
  margin-left: -4px;
}

.hSliderValueDisabled:before {
  border-top-color: #cdd5db;
  border-width: 5px;
  margin-left: -5px;
}

/* SliderValueDisabledOver */
.vSliderValueDisabledOver:after {
  border-left-color: #e6e6e6;
  border-width: 4px;
  margin-top: -4px;
}

.vSliderValueDisabledOver:before {
  border-left-color: #cdd5db;
  border-width: 5px;
  margin-top: -5px;
}

.hSliderValueDisabledOver:after {
  border-top-color: #e6e6e6;
  border-width: 4px;
  margin-left: -4px;
}

.hSliderValueDisabledOver:before {
  border-top-color: #cdd5db;
  border-width: 5px;
  margin-left: -5px;
}

.sliderValueDisabled,
.vSliderValueDisabled,
.hSliderValueDisabled,
.sliderValueDisabledOver,
.vSliderValueDisabledOver,
.hSliderValueDisabledOver {
  border: 1px solid #cdd5db;
  background-color: #e6e6e6;
  color: #9e9e9e;
}

.vSliderValueDisabled:after {
  border-left-color: #e6e6e6;
}

.hSliderValueDisabled:after {
  border-top-color: #e6e6e6;
}

/* sliderValue text */
.sliderValueText,
.sliderValueTextOver,
.sliderValueTextDisabled,
.sliderValuePendingText,
.sliderValuePendingTextOver,
.sliderValuePendingTextDisabled {
  color: #333b41;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: 2px;
  background-color: transparent;
  border-radius: 3px;
}

.sliderValuePendingText {
  color: #0066CC;
}

.sliderValueTextDisabled,
.sliderValuePendingTextDisabled {
  background-color: #e6e6e6;
  color: #9e9e9e;
}

/* slider pointy arrows - end */
/* slider activeTrack */
.sliderTrackActive,
.sliderTrackActiveDown,
.hSliderTrackActive,
.hSliderTrackActiveDown,
.vSliderTrackActive,
.vSliderTrackActiveDown {
  background-color: #a7e1c1;
  border-radius: 10px;
}

.sliderTrackActiveOver,
.hSliderTrackActiveOver,
.vSliderTrackActiveOver {
  background-color: #a7e1c1;
  border-radius: 10px;
}

.sliderTrackActiveDisabled,
.hSliderTrackActiveDisabled,
.vSliderTrackActiveDisabled {
  background-color: #d0d0d0;
  border-radius: 10px;
}

/* slider activeTrack - end */
/*============================================================
	10) DetailViewer
============================================================*/
.detailBlock {
  border-left: 1px solid #d0d0d0;
  border-top: 1px solid #d0d0d0;
}

.detail,
.detailLabel,
.detailHeader {
  background-color: #e5ff8d;
  border-bottom: 1px solid #d0d0d0;
  border-right: 1px solid #d0d0d0;
  color: #5b5b5b;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  -webkit-text-size-adjust: 100%;
}

.detailLabel {
  background-color: #fafafa;
  color: #5b5b5b;
  font-weight: bold;
  text-align: right;
}

.detailHeader {
  background-color: #b3e88d;
  color: #5b5b5b;
  font-size: 14px;
  font-weight: bold;
}

/*============================================================
	11) ListGrid
============================================================*/
/*============================================================
	ListGrid parts
		styleName - listGrid
		headerBarStyle - headerBar
		bodyStyleName - gridBody
============================================================*/
.listGrid {
  padding: 0px;
  background: #ffffff;
  border: 1px solid #d0d0d0;
  border-radius: 2px;
}

.headerBar {
  background-color: transparent;
  background-image: linear-gradient(to bottom, white 0%, #f6f8fa 100%);
  border-top: 2px solid #3db271;
  border-bottom: 2px solid #38a37e;
  border-radius: 0px;
}

.headerBarDisabled {
  background-color: transparent;
  border-top: 2px solid #3db271;
  border-bottom: 2px solid #38a37e;
  border-radius: 0px;
}

/* grid Action (filter) button */
.gridActionButton,
.gridActionButtonOver,
.gridActionButtonDown,
.gridActionButtonFocused,
.gridActionButtonSelected,
.gridActionButtonSelectedOver,
.gridActionButtonSelectedDown,
.gridActionButtonDisabled {
  background-color: #ffffff;
  color: #778D87;
  border: none;
}

.gridActionButtonOver,
.gridActionButtonDown,
.gridActionButtonFocused,
.gridActionButtonSelected,
.gridActionButtonSelectedOver,
.gridActionButtonSelectedDown {
  color: #3db271;
}

.gridActionButtonDisabled {
  color: #ababab;
  background-color: #fafafa;
}

/* end grid Action (filter) button */
.gridTableRow {
  padding: 0px;
}

.gridBody {
  background-color: #ffffff;
  background-image: none;
  border-radius: 2px;
  padding: 0px;
}

.gridBodyDisabled {
  background-color: #f9f9f9;
  border-radius: 2px;
}

.alternateGridBody {
  background-color: #ffffff;
  border-radius: 2px;
}

/* Hide scrollbars in WebKit browsers (Chrome, Safari, etc.) */
.hiddenScrollbars::-webkit-scrollbar {
  display: none;
}

.visibleScrollbars::-webkit-scrollbar {
  display: block;
}

/* Hide scrollbars in other browsers (IE10+ and Firefox) */
.hiddenScrollbars {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.visibleScrollbars {
  -ms-overflow-style: auto;
  scrollbar-width: auto;
}

.loadingDataMessage,
.offlineMessage,
.emptyMessage {
  color: #444444;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: 11px;
}

.gridDragTracker {
  background-color: #ffffff;
  border: 1px dotted #d0d0d0;
  color: #5b5b5b;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  padding: 1px;
}

.dragLine {
  border-top: 2px dashed #3db271;
  pointer-events: none;
}

.dragLineVertical {
  border-right: 2px dashed #3db271;
  pointer-events: none;
}

/* applied to the body of ListGrids */
/* recordEditor */
.recordEditorCell,
.recordEditorCellAltCol,
.recordEditorCellDark,
.recordEditorCellAltColDark,
.recordEditorCellDisabled {
  line-height: 22px;
  background-color: #ffffff;
  color: #444444;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  margin: 0px;
  padding: 0px;
}

.recordEditorCellDisabled {
  background-color: transparent;
  color: #ababab;
}

/* operatorIcon in ListGrid filterEditor */
.filterOperatorIcon,
.filterOperatorIconOver,
.filterOperatorIconFocused,
.filterOperatorIconFocusedOver,
.filterOperatorIconDown,
.filterOperatorIconSelected,
.filterOperatorIconSelectedOver,
.filterOperatorIconSelectedFocused,
.filterOperatorIconSelectedFocusedOver,
.filterOperatorIconSelectedDisabled,
.filterOperatorIconDisabled {
  color: #ffffff;
  background-color: #3db271;
  background-image: linear-gradient(to bottom, #3db271 0%, #38a37e 100%);
  border: none;
  border-radius: 5px;
  text-align: center;
  padding: 0px;
  margin: 0px 0px 0px 2px;
  outline: 0px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 9px;
  font-weight: normal;
  opacity: 1;
}

/* over styles */
.filterOperatorIconOver,
.filterOperatorIconSelectedOver {
  color: #ffffff;
  background-color: #3db271;
  border: none;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  opacity: 0.9;
}

/* focused styles */
.filterOperatorIconFocused,
.filterOperatorIconSelectedFocused {
  color: #ffffff;
  background-color: #3db271;
  border: none;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  opacity: 1;
}

/* focusedOver styles */
.filterOperatorIconFocusedOver,
.filterOperatorIconSelectedOver,
.filterOperatorIconSelectedFocusedOver {
  color: #ffffff;
  background-color: #3db271;
  border: none;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  opacity: 0.9;
}

/* disabled style */
.filterOperatorIconDisabled,
.filterOperatorIconSelectedDisabled {
  color: #ffffff;
  background-color: #9cd1bf;
  border: none;
  opacity: 1;
}

/*============================================================
	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 */
/* header/spannedHeaderButtonTable classes float a right-border-like separator :after LG 
   headerButtons and spans, rather than showing a regular border - means the separator can be 
   less than headerButton-height, unlike a border
*/
.headerButtonTable,
.headerButtonTableOver,
.spannedHeaderButtonTable,
.spannedHeaderButtonTableOver {
  position: relative;
}

.headerButtonTable:after,
.headerButtonTableOver:after,
.spannedHeaderButtonTable:after,
.spannedHeaderButtonTableOver:after {
  /* use the property if it's set, fall back to "" otherwise:  "" shows the separator, 
     setting it to none on the style-handle hides it */
  content: var(--isc-header-separator-content, "");
  /* positioning */
  position: absolute;
  right: 0px;
  top: 25%;
  width: 1px;
  height: 50%;
  /* color */
  background-color: #d0d0d0;
}

/* END partial right-separator for header-buttons */
/* 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: 0px 0px 0px 3px;
  padding-top: 0px;
  padding-bottom: 0px;
  border-right: none;
  vertical-align: middle;
  color: #444444;
  background-color: transparent;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 0.3px;
  border-radius: 0px;
  border-top: none;
  border-bottom: none;
}

.headerButtonOver,
.headerButtonDown {
  color: #444444;
  background-color: rgba(31, 23, 18, 0);
}

.headerButtonSelected {
  color: #444444;
  background-color: transparent;
}

.headerButtonSelectedOver,
.headerButtonSelectedDown {
  color: #444444;
  background-color: rgba(31, 23, 18, 0);
}

.headerButtonDisabled,
.headerButtonSelectedDisabled {
  background-color: transparent;
  color: #ababab;
}

/* ListGrid header span headerButtons */
.headerSpanButton,
.headerSpanButtonSelected,
.headerSpanButtonSelectedOver,
.headerSpanButtonSelectedDown,
.headerSpanButtonSelectedDisabled,
.headerSpanButtonOver,
.headerSpanButtonDown,
.headerSpanButtonDisabled {
  color: #444444;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 12px;
  background-color: transparent;
  letter-spacing: 0.3px;
  padding: 0px 0px 0px 3px;
  border-right: none;
  border-top: none;
  border-bottom: 1px solid #d0d0d0;
}

.headerSpanButtonSelectedOver,
.headerSpanButtonOver {
  background-color: rgba(31, 23, 18, 0);
}

.headerSpanButtonSelected {
  background-color: transparent;
}

.headerSpanButtonDisabled {
  background-color: transparent;
  color: #ababab;
}

/* ListGrid headerButtons when showing header spans - with separators */
.spannedHeaderButton,
.spannedHeaderButtonSelected,
.spannedHeaderButtonSelectedOver,
.spannedHeaderButtonSelectedDown,
.spannedHeaderButtonSelectedDisabled,
.spannedHeaderButtonOver,
.spannedHeaderButtonDown,
.spannedHeaderButtonDisabled {
  color: #444444;
  background-color: transparent;
  font-weight: bold;
  font-size: 12px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  letter-spacing: 0.3px;
  padding: 0px 0px 0px 3px;
  border-right: none;
  border-bottom: none;
  border-radius: 0px;
}

.spannedHeaderButtonSelectedOver,
.spannedHeaderButtonOver {
  background-color: rgba(31, 23, 18, 0);
}

.spannedHeaderButtonSelected {
  background-color: transparent;
}

.spannedHeaderButtonDisabled {
  background-color: transparent;
  color: #ababab;
}

.spannedHeaderButtonSelectedDisabled {
  background-color: transparent;
  color: #ababab;
}

.imgHeaderButton,
.imgHeaderButtonOver,
.imgHeaderButtonDown,
.imgHeaderButtonDisabled,
.imgHeaderButtonSelected,
.imgHeaderButtonSelectedOver,
.imgHeaderButtonSelectedDown,
.imgHeaderButtonSelectedDisabled {
  color: #444444;
  background-color: transparent;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 0.3px;
  padding: 0px 0px 0px 3px;
  border-top: none;
  border-bottom: none;
}

.imgHeaderButtonOver,
.imgHeaderButtonDown {
  color: #444444;
  background-color: rgba(31, 23, 18, 0);
}

.imgHeaderButtonSelected {
  color: #444444;
  background-color: transparent;
}

.imgHeaderButtonSelectedOver,
.imgHeaderButtonSelectedDown {
  color: #444444;
  background-color: rgba(31, 23, 18, 0);
}

.imgHeaderButtonDisabled,
.imgHeaderButtonSelectedDisabled {
  background-color: transparent;
  color: #ababab;
}

/* ListGrid headerMenuButton - remove top and bottom padding to defeat a Button hack that can cause 
some LG header-titles to be vertically offset from other headers */
.headerMenuButton,
.headerMenuButtonOver,
.headerMenuButtonDown,
.headerMenuButtonSelected,
.headerMenuButtonSelectedOver,
.headerMenuButtonSelectedDown,
.headerMenuButtonSelectedDisabled,
.headerMenuButtonDisabled {
  color: #444444;
  background-color: transparent;
  border-radius: 0px;
  vertical-align: middle;
}

.headerMenuButtonOver,
.headerMenuButtonSelectedOver {
  color: #444444;
  background-color: rgba(31, 23, 18, 0);
}

.headerMenuButtonDown,
.headerMenuButtonSelected,
.headerMenuButtonSelectedDown {
  color: #444444;
  background-color: transparent;
}

.headerMenuButtonDisabled,
.headerMenuButtonSelectedDisabled {
  color: #ababab;
  background-color: transparent;
}

/* ListGrid sorterButton */
.sorterButton,
.sorterButtonOver,
.sorterButtonDown,
.sorterButtonSelected,
.sorterButtonSelectedOver,
.sorterButtonSelectedDown,
.sorterButtonSelectedDisabled,
.sorterButtonDisabled {
  color: #778D87;
  background-color: transparent;
  padding: 0px;
  background-image: linear-gradient(to bottom, white 0%, #f6f8fa 100%);
  border-top: 2px solid #3db271;
  border-bottom: 2px solid #38a37e;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 0.3px;
}

.sorterButtonOver,
.sorterButtonDown {
  color: #3db271;
  background-color: rgba(31, 23, 18, 0);
}

.sorterButtonSelected {
  color: #3db271;
  background-color: transparent;
}

.sorterButtonSelectedOver,
.sorterButtonSelectedDown {
  color: #3db271;
  background-color: rgba(31, 23, 18, 0);
}

.sorterButtonDisabled,
.sorterButtonSelectedDisabled {
  background-color: transparent;
  color: #ababab;
}

/*=============================================================================================
    ...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: 3px 0px 3px 0px;
  border-right: none;
  border-top: none;
  border-bottom: none;
}

.spannedHeaderButtonRotated,
.spannedHeaderButtonSelectedRotated,
.spannedHeaderButtonSelectedOverRotated,
.spannedHeaderButtonSelectedDownRotated,
.spannedHeaderButtonSelectedDisabledRotated,
.spannedHeaderButtonOverRotated,
.spannedHeaderButtonDownRotated,
.spannedHeaderButtonDisabledRotated {
  color: #444444;
  background-color: transparent;
  font-weight: bold;
  font-size: 12px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  letter-spacing: 0.3px;
  padding: 3px 0px 3px 0px;
  border-right: 1px solid #d0d0d0;
  border-bottom: none;
}

.spannedHeaderButtonSelectedOverRotated,
.spannedHeaderButtonOverRotated {
  background-color: rgba(31, 23, 18, 0);
}

.spannedHeaderButtonSelectedRotated {
  background-color: #3db271;
  font-size: 12px;
}

.spannedHeaderButtonDisabledRotated {
  background-color: transparent;
  color: #ababab;
}

.spannedHeaderButtonSelectedDisabledRotated {
  background-color: transparent;
  color: #ababab;
}

.imgHeaderButtonRotated,
.headerButtonRotated {
  color: #444444;
  background-color: transparent;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 0.3px;
  padding: 3px 0px 3px 0px;
  border-top: none;
  border-bottom: none;
}

.imgHeaderButtonSelectedRotated,
.headerButtonSelectedRotated {
  color: #444444;
  background-color: transparent;
  font-weight: bold;
  font-size: 12px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  letter-spacing: 0.3px;
  padding: 3px 0px 3px 0px;
  border-top: none;
  border-bottom: none;
}

.imgHeaderButtonDisabledRotated,
.imgHeaderButtonSelectedDisabledRotated,
.headerButtonDisabledRotated,
.headerButtonSelectedDisabledRotated {
  background-color: transparent;
  color: #ababab;
  font-weight: bold;
  font-size: 12px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  letter-spacing: 0.3px;
  padding: 3px 0px 3px 0px;
  border-top: none;
  border-bottom: none;
}

.imgHeaderButtonOverRotated,
.imgHeaderButtonDownRotated,
.headerButtonOverRotated,
.headerButtonDownRotated {
  color: #444444;
  background-color: rgba(31, 23, 18, 0);
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 0.3px;
  padding: 3px 0px 3px 0px;
  border-top: none;
  border-bottom: none;
}

.imgHeaderButtonSelectedOverRotated,
.imgHeaderButtonSelectedDownRotated,
.headerButtonSelectedOverRotated,
.headerButtonSelectedDownRotated {
  color: #444444;
  background-color: rgba(31, 23, 18, 0);
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 0.3px;
  padding: 3px 0px 3px 0px;
  border-top: none;
  border-bottom: none;
}

/* ListGrid column header titles */
.headerTitle,
.headerTitleOver,
.headerTitleDown,
.headerTitleSelected,
.headerTitleSelectedOver,
.headerTitleSelectedDown,
.headerTitleDisabled,
.headerTitleSelectedDisabled {
  color: #444444;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding-left: 4px;
  padding-right: 4px;
}

.headerTitleDown,
.headerTitleSelected,
.headerTitleSelectedOver,
.headerTitleSelectedDown,
.headerTitleSelectedDisabled {
  color: #444444;
}

.headerTitleDisabled,
.headerTitleSelectedDisabled {
  color: #ababab;
}

/*============================================================
	ListGrid cells
		listGrid.baseStyle
============================================================*/
/*------------------------------------------------------------
		listGrid.baseStyle
------------------------------------------------------------*/
.cell,
.cellAsync,
.cellAsyncError,
.cellDark,
.cellDarkAsync,
.cellDarkAsyncError,
.cellOver,
.cellOverAsync,
.cellOverAsyncError,
.cellOverDark,
.cellOverDarkAsync,
.cellOverDarkAsyncError,
.cellSelected,
.cellSelectedAsync,
.cellSelectedAsyncError,
.cellSelectedDark,
.cellSelectedDarkAsync,
.cellSelectedDarkAsyncError,
.cellSelectedOver,
.cellSelectedOverAsync,
.cellSelectedOverAsyncError,
.cellSelectedOverDark,
.cellSelectedOverDarkAsync,
.cellSelectedOverDarkAsyncError,
.cellDeselected,
.cellDeselectedDark,
.cellDeselectedOver,
.cellDeselectedOverDark,
.cellPendingSelected,
.cellPendingSelectedOver,
.cellPendingSelectedOverDark,
.cellDisabled,
.cellDisabledAsync,
.cellDisabledAsyncError,
.cellDisabledDark,
.cellDisabledDarkAsync,
.cellDisabledDarkAsyncError,
.recordSummaryCell,
.recordSummaryCellAsync,
.recordSummaryCellAsyncError,
.recordSummaryCellDark,
.recordSummaryCellDarkAsync,
.recordSummaryCellDarkAsyncError,
.recordSummaryCellOver,
.recordSummaryCellOverAsync,
.recordSummaryCellOverAsyncError,
.recordSummaryCellOverDark,
.recordSummaryCellOverDarkAsync,
.recordSummaryCellOverDarkAsyncError,
.recordSummaryCellSelected,
.recordSummaryCellSelectedAsync,
.recordSummaryCellSelectedAsyncError,
.recordSummaryCellSelectedDark,
.recordSummaryCellSelectedDarkAsync,
.recordSummaryCellSelectedDarkAsyncError,
.recordSummaryCellSelectedOver,
.recordSummaryCellSelectedOverAsync,
.recordSummaryCellSelectedOverAsyncError,
.recordSummaryCellSelectedOverDark,
.recordSummaryCellSelectedOverDarkAsync,
.recordSummaryCellSelectedOverDarkAsyncError,
.recordSummaryCellDisabled,
.recordSummaryCellDisabledAsync,
.recordSummaryCellDisabledAsyncError,
.recordSummaryCellDisabledDark,
.recordSummaryCellDisabledDarkAsync,
.recordSummaryCellDisabledDarkAsyncError,
.expansionCellCell,
.expansionCellCellDark,
.expansionCellCellOver,
.expansionCellCellOverDark,
.expansionCellCellSelected,
.expansionCellCellSelectedDark,
.expansionCellCellSelectedOver,
.expansionCellCellSelectedOverDark,
.expansionCellCellDisabled,
.expansionCellCellDisabledDark {
  background-color: #ffffff;
  font-size: 12px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #5b5b5b;
  padding: 2px 3px 2px 3px;
  border: none;
  border-bottom: 1px solid #e8ebed;
  border-right: none;
  text-overflow: ellipsis;
  transition: background-color 0.2s;
}

.cellAsync,
.cellDarkAsync,
.cellOverAsync,
.cellOverDarkAsync,
.cellSelectedAsync,
.cellSelectedDarkAsync,
.cellSelectedOverAsync,
.cellSelectedOverDarkAsync,
.cellDisabledAsync,
.cellDisabledDarkAsync,
.recordSummaryCellAsync,
.recordSummaryCellDarkAsync,
.recordSummaryCellOverAsync,
.recordSummaryCellOverDarkAsync,
.recordSummaryCellSelectedAsync,
.recordSummaryCellSelectedDarkAsync,
.recordSummaryCellSelectedOverAsync,
.recordSummaryCellSelectedOverDarkAsync,
.recordSummaryCellDisabledAsync,
.recordSummaryCellDisabledDarkAsync {
  background: url("images/loadingSmall.gif") 3px center no-repeat #ffffff;
  /* Prefer to use `background-origin: content-box` in browsers that support it, rather than
     a hard-coded 3px for the left padding amount. The second <visual-box> (meaning
     `background-clip: border-box`) is needed so that the background-color fills the whole cell. */
  background: url("images/loadingSmall.gif") left center no-repeat content-box border-box #ffffff;
}

.cellDark,
.cellDarkAsync,
.cellDarkAsyncError,
.recordSummaryCellDark,
.recordSummaryCellDarkAsync,
.recordSummaryCellDarkAsyncError {
  background-color: #fafafa;
  border-bottom-color: #e8ebed;
}

.cellOver,
.cellOverAsync,
.cellOverAsyncError,
.cellOverDark,
.cellOverDarkAsync,
.cellOverDarkAsyncError,
.cellDeselectedOver,
.cellDeselectedOverDark,
.recordSummaryCellOver,
.recordSummaryCellOverAsync,
.recordSummaryCellOverAsyncError,
.recordSummaryCellOverDark,
.recordSummaryCellOverDarkAsync,
.recordSummaryCellOverDarkAsyncError {
  background-color: #f5f8fa;
  color: #5b5b5b;
  border-bottom-color: #e8ebed;
}

.cellSelected,
.cellSelectedAsync,
.cellSelectedAsyncError,
.cellSelectedDark,
.cellSelectedDarkAsync,
.cellSelectedDarkAsyncError,
.cellPendingSelected,
.cellPendingSelectedDark,
.recordSummaryCellSelected,
.recordSummaryCellSelectedAsync,
.recordSummaryCellSelectedAsyncError,
.recordSummaryCellSelectedDark,
.recordSummaryCellSelectedDarkAsync,
.recordSummaryCellSelectedDarkAsyncError {
  background-color: #f0f0f0;
  color: #5b5b5b;
  border-bottom-color: #e8ebed;
}

.cellSelectedOver,
.cellSelectedOverAsync,
.cellSelectedOverAsyncError,
.cellSelectedOverDark,
.cellSelectedOverDarkAsync,
.cellSelectedOverDarkAsyncError,
.cellPendingSelectedOver,
.cellPendingSelectedOverDark,
.recordSummaryCellSelectedOver,
.recordSummaryCellSelectedOverAsync,
.recordSummaryCellSelectedOverAsyncError,
.recordSummaryCellSelectedOverDark,
.recordSummaryCellSelectedOverDarkAsync,
.recordSummaryCellSelectedOverDarkAsyncError {
  background-color: #f0f0f0;
  color: #5b5b5b;
  border-bottom-color: #e8ebed;
}

.cellDisabled,
.cellDisabledAsync,
.cellDisabledAsyncError,
.cellDisabledDark,
.cellDisabledDarkAsync,
.cellDisabledDarkAsyncError,
.recordSummaryCellDisabled,
.recordSummaryCellDisabledAsync,
.recordSummaryCellDisabledAsyncError,
.recordSummaryCellDisabledDark,
.recordSummaryCellDisabledDarkAsync,
.recordSummaryCellDisabledDarkAsyncError {
  background-color: #f9f9f9;
  cursor: not-allowed;
  color: #ababab;
  border-bottom-color: #e8ebed;
}

.cellDisabledAsync,
.cellDisabledDarkAsync,
.recordSummaryCellDisabledAsync,
.recordSummaryCellDisabledDarkAsync {
  background-image: url("images/loadingSmallFrozen.gif");
}

.cellAsyncError,
.cellDarkAsyncError,
.cellOverAsyncError,
.cellOverDarkAsyncError,
.cellSelectedAsyncError,
.cellSelectedDarkAsyncError,
.cellSelectedOverAsyncError,
.cellSelectedOverDarkAsyncError,
.cellDisabledAsyncError,
.cellDisabledDarkAsyncError,
.recordSummaryCellAsyncError,
.recordSummaryCellDarkAsyncError,
.recordSummaryCellOverAsyncError,
.recordSummaryCellOverDarkAsyncError,
.recordSummaryCellSelectedAsyncError,
.recordSummaryCellSelectedDarkAsyncError,
.recordSummaryCellSelectedOverAsyncError,
.recordSummaryCellSelectedOverDarkAsyncError,
.recordSummaryCellDisabledAsyncError,
.recordSummaryCellDisabledDarkAsyncError {
  font-weight: bold;
  color: red;
}

.cellDisabledAsyncError,
.cellDisabledDarkAsyncError,
.recordSummaryCellDisabledAsyncError,
.recordSummaryCellDisabledDarkAsyncError {
  color: #c99;
}

/* alternate column styling in ListGrid */
.cellAltCol,
.cellAltColAsync,
.cellAltColAsyncError,
.cellDarkAltCol,
.cellDarkAltColAsync,
.cellDarkAltColAsyncError,
.cellOverAltCol,
.cellOverAltColAsync,
.cellOverAltColAsyncError,
.cellOverDarkAltCol,
.cellOverDarkAltColAsync,
.cellOverDarkAltColAsyncError,
.cellSelectedAltCol,
.cellSelectedAltColAsync,
.cellSelectedAltColAsyncError,
.cellSelectedOverAltCol,
.cellSelectedOverAltColAsync,
.cellSelectedOverAltColAsyncError,
.cellSelectedDarkAltCol,
.cellSelectedDarkAltColAsync,
.cellSelectedDarkAltColAsyncError,
.cellSelectedOverDarkAltCol,
.cellSelectedOverDarkAltColAsync,
.cellSelectedOverDarkAltColAsyncError,
.cellDeselectedAltColAltCol,
.cellDeselectedDarkAltCol,
.cellDeselectedOverAltCol,
.cellDeselectedOverDarkAltCol,
.cellPendingSelectedAltCol,
.cellPendingSelectedDarkAltCol,
.cellPendingSelectedOverAltCol,
.cellPendingSelectedOverDarkAltCol,
.cellDisabledAltCol,
.cellDisabledAltColAsync,
.cellDisabledAltColAsyncError,
.cellDisabledDarkAltCol,
.cellDisabledDarkAltColAsync,
.cellDisabledDarkAltColAsyncError,
.recordSummaryCellAltCol,
.recordSummaryCellAltColAsync,
.recordSummaryCellAltColAsyncError,
.recordSummaryCellDarkAltCol,
.recordSummaryCellDarkAltColAsync,
.recordSummaryCellDarkAltColAsyncError,
.recordSummaryCellOverAltCol,
.recordSummaryCellOverAltColAsync,
.recordSummaryCellOverAltColAsyncError,
.recordSummaryCellOverDarkAltCol,
.recordSummaryCellOverDarkAltColAsync,
.recordSummaryCellOverDarkAltColAsyncError,
.recordSummaryCellSelectedAltCol,
.recordSummaryCellSelectedAltColAsync,
.recordSummaryCellSelectedAltColAsyncError,
.recordSummaryCellSelectedDarkAltCol,
.recordSummaryCellSelectedDarkAltColAsync,
.recordSummaryCellSelectedDarkAltColAsyncError,
.recordSummaryCellSelectedOverAltCol,
.recordSummaryCellSelectedOverAltColAsync,
.recordSummaryCellSelectedOverAltColAsyncError,
.recordSummaryCellSelectedOverDarkAltCol,
.recordSummaryCellSelectedOverDarkAltColAsync,
.recordSummaryCellSelectedOverDarkAltColAsyncError,
.recordSummaryCellDisabledAltCol,
.recordSummaryCellDisabledAltColAsync,
.recordSummaryCellDisabledAltColAsyncError,
.recordSummaryCellDisabledDarkAltCol,
.recordSummaryCellDisabledDarkAltColAsync,
.recordSummaryCellDisabledDarkAltColAsyncError {
  background-color: #fafafa;
  font-size: 12px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #5b5b5b;
  padding: 2px 3px 2px 3px;
  text-overflow: ellipsis;
  border: none;
  border-bottom: 1px solid #e8ebed;
  border-right: none;
}

.cellAltColAsync,
.cellDarkAltColAsync,
.cellOverAltColAsync,
.cellOverDarkAltColAsync,
.cellSelectedAltColAsync,
.cellSelectedOverAltColAsync,
.cellSelectedDarkAltColAsync,
.cellSelectedOverDarkAltColAsync,
.cellDisabledAltColAsync,
.cellDisabledDarkAltColAsync,
.recordSummaryCellAltColAsync,
.recordSummaryCellDarkAltColAsync,
.recordSummaryCellOverAltColAsync,
.recordSummaryCellOverDarkAltColAsync,
.recordSummaryCellSelectedAltColAsync,
.recordSummaryCellSelectedDarkAltColAsync,
.recordSummaryCellSelectedOverAltColAsync,
.recordSummaryCellSelectedOverDarkAltColAsync,
.recordSummaryCellDisabledAltColAsync,
.recordSummaryCellDisabledDarkAltColAsync {
  background: url("images/loadingSmall.gif") 3px center no-repeat #fafafa;
  background: url("images/loadingSmall.gif") left center no-repeat content-box border-box #fafafa;
}

.cellDarkAltCol,
.cellDarkAltColAsync,
.cellDarkAltColAsyncError,
.recordSummaryCellDarkAltCol,
.recordSummaryCellDarkAltColAsync,
.recordSummaryCellDarkAltColAsyncError {
  background-color: whitesmoke;
  border-bottom-color: #e8ebed;
}

.cellOverAltCol,
.cellOverAltColAsync,
.cellOverAltColAsyncError,
.cellOverDarkAltCol,
.cellOverDarkAltColAsync,
.cellOverDarkAltColAsyncError,
.cellDeselectedOver,
.cellDeselectedOverDark,
.recordSummaryCellOverAltCol,
.recordSummaryCellOverAltColAsync,
.recordSummaryCellOverAltColAsyncError,
.recordSummaryCellOverDarkAltCol,
.recordSummaryCellOverDarkAltColAsync,
.recordSummaryCellOverDarkAltColAsyncError {
  background-color: #f5f8fa;
  color: #5b5b5b;
  border-bottom-color: #e8ebed;
}

.cellSelectedAltCol,
.cellSelectedAltColAsync,
.cellSelectedAltColAsyncError,
.cellSelectedDarkAltCol,
.cellSelectedDarkAltColAsync,
.cellSelectedDarkAltColAsyncError,
.cellPendingSelectedAltCol,
.cellPendingSelectedDarkAltCol,
.recordSummaryCellSelectedAltCol,
.recordSummaryCellSelectedAltColAsync,
.recordSummaryCellSelectedAltColAsyncError,
.recordSummaryCellSelectedDarkAltCol,
.recordSummaryCellSelectedDarkAltColAsync,
.recordSummaryCellSelectedDarkAltColAsyncError {
  background-color: #f0f0f0;
  color: #5b5b5b;
  border-bottom-color: #e8ebed;
}

.cellSelectedOverAltCol,
.cellSelectedOverAltColAsync,
.cellSelectedOverAltColAsyncError,
.cellSelectedOverDarkAltCol,
.cellSelectedOverDarkAltColAsync,
.cellSelectedOverDarkAltColAsyncError,
.cellPendingSelectedOverAltCol,
.cellPendingSelectedOverDarkAltCol,
.recordSummaryCellSelectedOverAltCol,
.recordSummaryCellSelectedOverAltColAsync,
.recordSummaryCellSelectedOverAltColAsyncError,
.recordSummaryCellSelectedOverDarkAltCol,
.recordSummaryCellSelectedOverDarkAltColAsync,
.recordSummaryCellSelectedOverDarkAltColAsyncError {
  background-color: #f0f0f0;
  color: #5b5b5b;
  border-bottom-color: #e8ebed;
}

.cellDisabledAltCol,
.cellDisabledAltColAsync,
.cellDisabledAltColAsyncError,
.cellDisabledDarkAltCol,
.cellDisabledDarkAltColAsync,
.cellDisabledDarkAltColAsyncError,
.recordSummaryCellDisabledAltCol,
.recordSummaryCellDisabledAltColAsync,
.recordSummaryCellDisabledAltColAsyncError,
.recordSummaryCellDisabledDarkAltCol,
.recordSummaryCellDisabledDarkAltColAsync,
.recordSummaryCellDisabledDarkAltColAsyncError {
  background-color: #f9f9f9;
  cursor: not-allowed;
  color: #ababab;
  border-bottom-color: #e8ebed;
}

.cellDisabledAltColAsync,
.cellDisabledDarkAltColAsync,
.recordSummaryCellDisabledAltColAsync,
.recordSummaryCellDisabledDarkAltColAsync {
  background-image: url("images/loadingSmallFrozen.gif");
}

.cellAltColAsyncError,
.cellDarkAltColAsyncError,
.cellOverAltColAsyncError,
.cellOverDarkAltColAsyncError,
.cellSelectedAltColAsyncError,
.cellSelectedDarkAltColAsyncError,
.cellSelectedOverAltColAsyncError,
.cellSelectedOverDarkAltColAsyncError,
.cellDisabledAltColAsyncError,
.cellDisabledDarkAltColAsyncError,
.recordSummaryCellAltColAsyncError,
.recordSummaryCellDarkAltColAsyncError,
.recordSummaryCellOverAltColAsyncError,
.recordSummaryCellOverDarkAltColAsyncError,
.recordSummaryCellSelectedAltColAsyncError,
.recordSummaryCellSelectedDarkAltColAsyncError,
.recordSummaryCellSelectedOverAltColAsyncError,
.recordSummaryCellSelectedOverDarkAltColAsyncError,
.recordSummaryCellDisabledAltColAsyncError,
.recordSummaryCellDisabledDarkAltColAsyncError {
  font-weight: bold;
  color: red;
}

.cellDisabledAltColAsyncError,
.cellDisabledDarkAltColAsyncError,
.recordSummaryCellDisabledAltColAsyncError,
.recordSummaryCellDisabledDarkAltColAsyncError {
  color: #c99;
}

/* separate row-separator colors by state */
.cellDark,
.cellDarkAsync,
.cellDarkAsyncError,
.cellDarkAltCol,
.cellDarkAltColAsync,
.cellDarkAltColAsyncError {
  border-bottom-color: #e8ebed;
}

.cellOverDark,
.cellOverDarkAsync,
.cellOverDarkAsyncError,
.cellOverDarkAltCol,
.cellOverDarkAltColAsync,
.cellOverDarkAltColAsyncError {
  border-bottom-color: #e8ebed;
}

.cellSelectedDark,
.cellSelectedDarkAltCol,
.cellSelectedDarkAsync,
.cellSelectedDarkAsyncError {
  border-bottom-color: #e8ebed;
}

.cellSelectedOverDark,
.cellSelectedOverDarkAsync,
.cellSelectedOverDarkAsyncError,
.cellSelectedOverDarkAltCol,
.cellSelectedOverDarkAltColAsync,
.cellSelectedOverDarkAltColAsyncError {
  border-bottom-color: #e8ebed;
}

.cellDeselectedDark,
.cellDeselectedOverDark,
.cellDeselectedDarkAltCol,
.cellDeselectedOverDarkAltCol {
  border-bottom-color: #e8ebed;
}

.cellPendingSelectedOverDark,
.cellPendingSelectedDarkAltCol,
.cellPendingSelectedOverDarkAltCol {
  border-bottom-color: #e8ebed;
}

.cellDisabledDark,
.cellDisabledDarkAsync,
.cellDisabledDarkAsyncError,
.cellDisabledDarkAltCol,
.cellDisabledDarkAltColAsync,
.cellDisabledDarkAltColAsyncError {
  border-bottom-color: #e8ebed;
}

.recordSummaryCellDark,
.recordSummaryCellDarkAsync,
.recordSummaryCellDarkAsyncError,
.recordSummaryCellDarkAltCol,
.recordSummaryCellDarkAltColAsync,
.recordSummaryCellDarkAltColAsyncError {
  border-bottom-color: #e8ebed;
}

.recordSummaryCellOverDark,
.recordSummaryCellOverDarkAsync,
.recordSummaryCellOverDarkAsyncError,
.recordSummaryCellOverDarkAltCol,
.recordSummaryCellOverDarkAltColAsync,
.recordSummaryCellOverDarkAltColAsyncError {
  border-bottom-color: #e8ebed;
}

.recordSummaryCellSelectedDark,
.recordSummaryCellSelectedDarkAsync,
.recordSummaryCellSelectedDarkAsyncError,
.recordSummaryCellSelectedDarkAltCol,
.recordSummaryCellSelectedDarkAltColAsync,
.recordSummaryCellSelectedDarkAltColAsyncError {
  border-bottom-color: #e8ebed;
}

.recordSummaryCellSelectedOverDark,
.recordSummaryCellSelectedOverDarkAsync,
.recordSummaryCellSelectedOverDarkAsyncError,
.recordSummaryCellSelectedOverDarkAltCol,
.recordSummaryCellSelectedOverDarkAltColAsync,
.recordSummaryCellSelectedOverDarkAltColAsyncError {
  border-bottom-color: #e8ebed;
}

.recordSummaryCellDisabledDark,
.recordSummaryCellDisabledDarkAsync,
.recordSummaryCellDisabledDarkAsyncError,
.recordSummaryCellDisabledDarkAltCol,
.recordSummaryCellDisabledDarkAltColAsync,
.recordSummaryCellDisabledDarkAltColAsyncError {
  border-bottom-color: #e8ebed;
}

/* rounded grid-cells - these are additional to regular grid-cell styling */
.gridFirstCell {
  border-radius: 2px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}

.gridLastCell {
  border-radius: 2px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

/* ListGrid rollOverCanvas outer glow */
.gridSelectionOver {
  border: none;
  box-shadow: none;
}

/* TreeGrid rollOverCanvas outer glow */
.treeSelectionOver {
  border: none;
  box-shadow: none;
}

/* CubeGrid rollOverCanvas outer glow */
.cubeSelectionOver {
  border: none;
  box-shadow: 0 0 5px 0 none;
}

/* Grid Summary cells */
.gridSummaryCell,
.gridSummaryCellDark,
.gridSummaryCellAltCol,
.gridSummaryCellDisabled,
.gridSummaryCellDisabledDark,
.gridSummaryCellDisabledAltCol {
  color: #5b5b5b;
  background-color: rgba(160, 79, 28, 0);
  font-size: 12px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-weight: bold;
  border: none;
  border-bottom: 1px solid transparent;
  border-top: 1px solid transparent;
  padding: 2px 3px 2px 3px;
  text-overflow: ellipsis;
}

/* Grid Summary Disabled */
.gridSummaryCellDisabled,
.gridSummaryCellDisabledDark,
.gridSummaryCellDisabledAltCol {
  color: #ababab;
  background-color: #f9f9f9;
  border-bottom: 1px solid #f9f9f9;
  border-top: 1px solid #f9f9f9;
  cursor: not-allowed;
}

/* Grid Summary Dark */
.gridSummaryCellDark,
.gridSummaryCellDisabledDark {
  color: #585858;
}

/* end Grid Summary */
/* for grouping */
.groupNode,
.groupNodeDark,
.groupNodeAltCol,
.groupNodeDarkAltCol,
.groupNodeOver,
.groupNodeOverDark,
.groupNodeOverAltCol,
.groupNodeOverDarkAltCol,
.groupNodeSelected,
.groupNodeSelectedDark,
.groupNodeSelectedAltCol,
.groupNodeSelectedDarkAltCol,
.groupNodeSelectedOver,
.groupNodeSelectedOverDark,
.groupNodeSelectedOverAltCol,
.groupNodeSelectedOverDarkAltCol,
.groupNodeDisabled,
.groupNodeDisabledDark,
.groupNodeDisabledAltCol,
.groupNodeDisabledDarkAltCol {
  background-color: #ffffff;
  border: none;
  border-bottom: 1px solid #8c8c8c;
  color: #005f1f;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 12px;
  padding: 1px 1px 1px 3px;
  text-overflow: ellipsis;
}

.groupNodeOver,
.groupNodeOverDark,
.groupNodeOverAltCol,
.groupNodeOverDarkAltCol {
  background-color: #f5f8fa;
  color: #5b5b5b;
  border-bottom: 1px solid #8c8c8c;
}

.groupNodeSelected,
.groupNodeSelectedDark,
.groupNodeSelectedAltCol,
.groupNodeSelectedDarkAltCol {
  background-color: #f0f0f0;
  color: #5b5b5b;
  border-bottom: 1px solid #8c8c8c;
}

.groupNodeSelectedOver,
.groupNodeSelectedOverDark,
.groupNodeSelectedOverAltCol,
.groupNodeSelectedOverDarkAltCol {
  background-color: #f0f0f0;
  color: #5b5b5b;
  border-bottom: 1px solid #8c8c8c;
}

.groupNodeDisabled,
.groupNodeDisabledDark,
.groupNodeDisabledAltCol,
.groupNodeDisabledDarkAltCol {
  background-color: #f9f9f9;
  cursor: not-allowed;
  color: #ababab;
}

/* specialCol styles - used for LG special columns, like row-numbers */
.specialCol,
.specialColOver,
.specialColSelected,
.specialColSelectedOver,
.specialColDisabled {
  background-color: #fafafa;
  color: #5b5b5b;
  line-height: 22px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  padding: 2px 3px 2px 3px;
  border: none;
  border-bottom: 1px solid #e8ebed;
  border-right: none;
  text-overflow: ellipsis;
  transition: background-color 0.2s;
}

.specialColOver {
  background-color: #f5f8fa;
  color: #5b5b5b;
  border-bottom: 1px solid #e8ebed;
}

.specialColSelected {
  background-color: #f0f0f0;
  color: #5b5b5b;
}

.specialColSelectedOver {
  background-color: #f0f0f0;
  color: #5b5b5b;
}

.specialColDisabled {
  background-color: #f9f9f9;
  cursor: not-allowed;
  color: #ababab;
}

/* end of specialCol styles */
/* special style for showing cell-content in the link-color - bit of overkill */
.linkCell,
.linkCellDark,
.linkCellOver,
.linkCellOverDark,
.linkCellSelected,
.linkCellSelectedDark,
.linkCellSelectedOver,
.linkCellSelectedOverDark,
.linkCellDeselected,
.linkCellDeselectedDark,
.linkCellDeselectedOver,
.linkCellDeselectedOverDark,
.linkCellPendingSelected,
.linkCellPendingSelectedOver,
.linkCellPendingSelectedOverDark,
.linkCellDisabled,
.linkCellDisabledDark {
  background-color: #ffffff;
  font-size: 12px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #0000EE;
  padding: 2px 3px 2px 3px;
  border: none;
  border-bottom: 1px solid #e8ebed;
  border-right: none;
  text-overflow: ellipsis;
}

.linkCellDark {
  background-color: #fafafa;
}

.linkCellOver,
.linkCellOverDark,
.linkCellDeselectedOver,
.linkCellDeselectedOverDark {
  background-color: #f5f8fa;
  color: #5b5b5b;
  border-bottom: 1px solid #e8ebed;
}

.linkCellSelected,
.linkCellSelectedDark,
.linkCellPendingSelected,
.linkCellPendingSelectedDark {
  background-color: #f0f0f0;
  color: #5b5b5b;
}

.linkCellSelectedOver,
.linkCellSelectedOverDark,
.linkCellPendingSelectedOver,
.linkCellPendingSelectedOverDark {
  background-color: #f0f0f0;
  color: #5b5b5b;
}

.linkCellDisabled,
.linkCellDisabledDark {
  background-color: #f9f9f9;
  cursor: not-allowed;
  color: #ababab;
}

/* alternate column-styling for linkCell cells in ListGrid */
.linkCellAltCol,
.linkCellDarkAltCol,
.linkCellOverAltCol,
.linkCellOverDarkAltCol,
.linkCellSelectedAltCol,
.linkCellSelectedOverAltCol,
.linkCellSelectedDarkAltCol,
.linkCellSelectedOverDarkAltCol,
.linkCellPendingSelectedAltCol,
.linkCellPendingSelectedDarkAltCol,
.linkCellPendingSelectedOverAltCol,
.linkCellPendingSelectedOverDarkAltCol,
.linkCellDeselectedAltCol,
.linkCellDeselectedDarkAltCol,
.linkCellDeselectedOverAltCol,
.linkCellDeselectedOverDarkAltCol,
.linkCellDisabledAltCol,
.linkCellDisabledDarkAltCol {
  font-size: 12px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #0000EE;
  padding: 2px 3px 2px 3px;
  text-overflow: ellipsis;
  border: none;
  border-bottom: 1px solid #e8ebed;
  border-right: none;
}

.linkCellDisabledAltCol,
.linkCellDisabledDarkAltCol {
  background-color: #f9f9f9;
  cursor: not-allowed;
  color: #ababab;
}

.linkCellAltCol {
  background-color: #fafafa;
}

.linkCellDarkAltCol {
  background-color: whitesmoke;
}

.linkCellOverAltCol {
  font-size: 12px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
}

.linkCellOverAltCol,
.linkCellOverDarkAltCol {
  background-color: #f5f8fa;
  color: #5b5b5b;
}

.linkCellSelectedAltCol,
.linkCellSelectedDarkAltCol,
.linkCellSelectedOverAltCol,
.linkCellSelectedOverDarkAltCol,
.linkCellPendingSelectedAltCol,
.linkCellPendingSelectedDarkAltCol,
.linkCellPendingSelectedOverAltCol,
.linkCellPendingSelectedOverDarkAltCol {
  background-color: #f0f0f0;
  color: #5b5b5b;
}

.linkCellSelectedOverAltCol,
.linkCellSelectedOverDarkAltCol,
.linkCellPendingSelectedOverAltCol,
.linkCellPendingSelectedOverDarkAltCol {
  background-color: #f0f0f0;
}

/* end linkCell */
/*Tree styling*/
.treeGrid {
  border: 1px solid #d0d0d0;
}

.treeBody {
  background-color: #ffffff;
}

/* color for the +/- icons in tree-grid connectors - works with SVG symbols and font-icons */
.treeConnectorSvg,
.treeConnectorSvgOver,
.treeConnectorSvgDown,
.treeConnectorSvgSelected,
.treeConnectorSvgDisabled {
  color: #3db271;
  fill: #e0e0e0;
  padding: 0px;
  margin: 0px;
  border: 0;
}

.treeConnectorSvgDisabled {
  color: #3db271;
  fill: #e0e0e0;
}

/*------------------------------------------------------------
		treeGrid.baseStyle
------------------------------------------------------------*/
.treeCell,
.treeCellDark,
.treeCellOver,
.treeCellOverDark,
.treeCellSelected,
.treeCellSelectedDark,
.treeCellSelectedOver,
.treeCellSelectedOverDark,
.treeCellDisabled,
.treeCellDisabledDark {
  background-color: #ffffff;
  color: #5b5b5b;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-overflow: ellipsis;
  padding: 0px 3px 0px 0px;
  border: none;
  border-bottom: none;
  border-right: none;
  transition: background-color 0.2s;
}

.treeCellDark {
  background-color: #fafafa;
}

.treeCellOver,
.treeCellOverDark {
  background-color: #f5f8fa;
  color: #5b5b5b;
}

.treeCellSelected,
.treeCellSelectedDark {
  color: #5b5b5b;
  background-color: #f0f0f0;
}

.treeCellSelectedOver,
.treeCellSelectedOverDark {
  color: #5b5b5b;
  background-color: #f0f0f0;
  box-shadow: 0 0 5px #f0f0f0;
}

.treeCellDisabled,
.treeCellDisabledDark {
  background-color: #f9f9f9;
  color: #ababab;
}

/* 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: 12px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  color: #5b5b5b;
  text-overflow: ellipsis;
  border: none;
  border-bottom: none;
  padding: 0px 3px 0px 0px;
}

.treeCellDisabledAltCol,
.treeCellDisabledDarkAltCol {
  background-color: #f9f9f9;
  cursor: not-allowed;
  color: #ababab;
}

.treeCellAltCol {
  background-color: #fafafa;
}

.treeCellDarkAltCol {
  background-color: whitesmoke;
}

.treeCellOverAltCol,
.treeCellOverDarkAltCol {
  background-color: #f5f8fa;
  color: #5b5b5b;
}

.treeCellSelectedAltCol,
.treeCellSelectedDarkAltCol,
.treeCellSelectedOverAltCol,
.treeCellSelectedOverDarkAltCol,
.treeCellPendingSelectedAltCol,
.treeCellPendingSelectedDarkAltCol,
.treeCellPendingSelectedOverAltCol,
.treeCellPendingSelectedOverDarkAltCol {
  background-color: #f0f0f0;
  color: #5b5b5b;
}

.treeCellSelectedOverAltCol,
.treeCellSelectedOverDarkAltCol,
.treeCellPendingSelectedOverAltCol,
.treeCellPendingSelectedOverDarkAltCol {
  background-color: #f0f0f0;
}

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

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

/*============================================================
	12) ToolStrip
============================================================*/
/* ToolStrip */
.toolStrip {
  background-color: #f0f0f0;
  border: 1px solid #d0d0d0;
  padding: 4px 4px 4px 6px;
}

.vToolStrip {
  background-color: #f0f0f0;
  border: 1px solid #d0d0d0;
  padding: 4px;
}

.toolStripVertical {
  background-color: #f0f0f0;
  border: 1px solid #d0d0d0;
}

/* 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: 1px solid transparent;
  border-radius: 2px;
  color: #5b5b5b;
  background-color: transparent;
  opacity: 1;
  font-size: 11px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  padding: 2px 4px 2px 4px;
  background-image: none;
  transition: opacity 0.2s;
  outline: none;
}

.toolStripButtonDown {
  outline: none;
  opacity: 1;
}

.toolStripButtonDisabled {
  background-color: transparent;
  border: 1px solid transparent;
  opacity: 1;
}

.toolStripButtonDisabled,
.toolStripButtonSelectedDisabled {
  color: #ababab;
  font-weight: normal;
}

.toolStripButtonOpened,
.toolStripButtonOverOpened,
.toolStripButtonDownOpened,
.toolStripButtonFocusedOpened,
.toolStripButtonFocusedDownOpened,
.toolStripButtonFocusedOverOpened,
.toolStripButtonSelectedOpened,
.toolStripButtonSelectedDownOpened,
.toolStripButtonSelectedOverOpened,
.toolStripButtonFocused,
.toolStripButtonFocusedOver,
.toolStripButtonSelectedFocused,
.toolStripButtonSelectedFocusedOver,
.toolStripButtonSelectedFocusedDown {
  border: 1px solid transparent;
}

.toolStripButtonOver,
.toolStripButtonFocusedOver,
.toolStripButtonSelectedFocused,
.toolStripButtonSelectedFocusedOver,
.toolStripButtonOpened,
.toolStripButtonOverOpened,
.toolStripButtonDownOpened,
.toolStripButtonFocusedOpened,
.toolStripButtonFocusedDownOpened,
.toolStripButtonFocusedOverOpened,
.toolStripButtonSelectedOpened,
.toolStripButtonSelectedDownOpened,
.toolStripButtonSelectedOverOpened {
  background-color: #e0e0e0;
  border: 1px solid transparent;
  color: #5b5b5b;
  opacity: 1;
  transition: color 0.2s, background-color, opacity;
}

.toolStripButtonDown,
.toolStripButtonFocusedDown,
.toolStripButtonSelectedDown,
.toolStripButtonSelectedFocusedDown,
.toolStripButtonOpened,
.toolStripButtonOverOpened,
.toolStripButtonDownOpened,
.toolStripButtonFocusedOpened,
.toolStripButtonFocusedDownOpened,
.toolStripButtonFocusedOverOpened,
.toolStripButtonSelectedOpened,
.toolStripButtonSelectedDownOpened,
.toolStripButtonSelectedOverOpened {
  background-color: #d0d0d0;
  color: #38a37e;
  opacity: 1;
}

.toolStripButtonSelected,
.toolStripButtonSelectedFocused,
.toolStripButtonSelectedOver,
.toolStripButtonSelectedFocusedOver,
.toolStripButtonSelectedDisabled {
  background-color: #d0d0d0;
  color: #38a37e;
  border: 1px solid transparent;
  opacity: 1;
}

/*===================================================================================
   12a) RibbonBar, and RibbonGroup / RibbonButton (nee ToolStripGroup and IconButton)
===================================================================================*/
.ribbonBar {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  box-shadow: #fafcff 0 1px 0 inset;
  padding: 10px;
}

/* RibbonGroup */
.ribbonGroup,
.ribbonGroupOver,
.ribbonGroupSelected,
.ribbonGroupSelectedDisabled,
.ribbonGroupSelectedOver,
.ribbonGroupDown,
.ribbonGroupSelectedDown,
.ribbonGroupDisabled {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  padding: 0px;
  box-shadow: 3px 3px 5px 2px #f3f3f3;
  border-radius: 0px;
}

/* RibbonGroup title style */
.ribbonGroupTitle,
.ribbonGroupTitleOver,
.ribbonGroupTitleSelected,
.ribbonGroupTitleSelectedDisabled,
.ribbonGroupTitleSelectedOver,
.ribbonGroupTitleDown,
.ribbonGroupTitleSelectedDown,
.ribbonGroupTitleDisabled {
  background-color: #f0f0f0;
  color: #616161;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 10px 8px 10px;
  border: none;
  border-bottom: 1px solid #d0d0d0;
}

/* RibbonButton */
.ribbonButton,
.ribbonButtonOver,
.ribbonButtonDown,
.ribbonButtonFocused,
.ribbonButtonFocusedOver,
.ribbonButtonFocusedDown,
.ribbonButtonSelected,
.ribbonButtonSelectedFocused,
.ribbonButtonSelectedDown,
.ribbonButtonSelectedFocusedDown,
.ribbonButtonSelectedOver,
.ribbonButtonSelectedFocusedOver,
.ribbonButtonDisabled,
.ribbonButtonSelectedDisabled {
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 0px 3px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 13px;
  vertical-align: middle;
  color: #4d4d4d;
}

.ribbonButtonOver,
.ribbonButtonDown {
  background-color: #fafafa;
  border: 1px solid #d0d0d0;
}

.ribbonButtonSelected,
.ribbonButtonSelectedOver,
.ribbonButtonFocused,
.ribbonButtonFocusedOver,
.ribbonButtonSelectedFocused,
.ribbonButtonSelectedFocusedOver {
  background-color: #fafafa;
  border: 1px solid #1c9d6f;
}

.ribbonButtonSelected,
.ribbonButtonSelectedFocused,
.ribbonButtonSelectedDown,
.ribbonButtonSelectedFocusedDown,
.ribbonButtonSelectedFocusedOver {
  background-color: #fafafa;
}

.ribbonButtonSelectedOver {
  border: 1px solid #1c9d6f;
}

.ribbonButtonDisabled {
  color: #ababab;
}

/* RibbonButton icon and menuIcon styles - used for spacing top and bottom of the title in v-buttons */
.ribbonButtonHIcon {
  vertical-align: middle;
  /* apply a default color, in case the icons are SVG that can be styled */
  color: #778D87;
}

.ribbonButtonHMenuIcon {
  vertical-align: middle;
  border: 1px solid transparent;
  border-radius: 3px;
  /* apply a default color, in case the icons are SVG that can be styled */
  color: #778D87;
}

.ribbonButtonVIcon {
  vertical-align: middle;
  margin-bottom: 5px;
  /* apply a default color, in case the icons are SVG that can be styled */
  color: #778D87;
}

.ribbonButtonVMenuIcon {
  vertical-align: middle;
  border: 1px solid transparent;
  border-radius: 3px;
  margin-top: 3px;
  /* apply a default color, in case the icons are SVG that can be styled */
  color: #778D87;
}

/*============================================================
	13) Tools
============================================================*/
.resizeThumb {
  border: 1px solid gray;
  background-color: #bfff86;
  background-image: none;
}

.cornerResizeThumb {
  border-radius: 5px;
}

/*============================================================
   14) TileGrid
==============================================================*/
.tileGrid {
  border: 1px solid #d0d0d0;
}

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

.tileValueOver {
  color: #444444;
}

.tileValueSelected {
  color: #444444;
}

.tileValueSelectedOver {
  color: #444444;
}

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

.simpleTile {
  border: 1px solid transparent;
}

.simpleTileOver {
  background-color: #fafafa;
  background-image: linear-gradient(top, #ffffff 0%, #e3e3e3 100%);
  border: 1px solid #d0d0d0;
}

.simpleTileSelected,
.simpleTileSelectedOver {
  background-color: #fafafa;
  background-image: linear-gradient(top, #ffffff 0%, #e3e3e3 100%);
  border: 1px solid #d0d0d0;
}

/*============================================================
	15) Scrollbars
============================================================*/
/* CSS3 Mode using images from a sprite - see below for horizontal/verticalScrollbar which use 
   pseudo-elements to show a separate element, that can be styled just with variables */
/* FireFox shows builtin auto-hiding scrollbars and all we can do is set the thumb-color to match
    the skin - there's no other control right now - you can only make the thumb width "thin", "auto"
    or "none" - you can't control the actual thumb-width, or radius or any other CSS details for 
    builtin scrollers in FF.  In other browsers, there is partial support for pseudo classes like 
    ::webkit-scrollbar-track/thumb[:hover], for example.
*/
* {
  /* skin's thumb-color, transparent track */
  scrollbar-color: #b5bfc7 transparent;
}

.scrollbar {
  background: #ffffff;
}

.scrollCorner,
.scrollCornerDown,
.scrollCornerOver {
  background-color: transparent;
  background-image: none;
}

.vScrollStartDisabled,
.vScrollStart,
.vScrollStartOver,
.vScrollStartDown {
  background-image: none;
  background-position: -16px 0px;
  border-left: none;
  border-right: none;
  color: #778D87;
}

.vScrollStartDisabled {
  background-position: 0px 0px;
  color: #ababab;
}

.vScrollStartOver {
  background-position: -32px 0px;
  color: #3db271;
}

.vScrollStartDown {
  background-position: -48px 0px;
  color: #3db271;
}

.vScrollTrackStretchDisabled,
.vScrollTrackStretch,
.vScrollTrackStretchOver,
.vScrollTrackStretchDown {
  background-image: none;
  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: none;
  background-position: -16px -18px;
  border-left: none;
  border-right: none;
  color: #778D87;
}

.vScrollEndDisabled {
  background-position: 0px -18px;
  color: #ababab;
}

.vScrollEndOver {
  background-position: -32px -18px;
  color: #3db271;
}

.vScrollEndDown {
  background-position: -48px -18px;
  color: #3db271;
}

.vScrollCornerDisabled,
.vScrollCorner,
.vScrollCornerOver,
.vScrollCornerDown {
  background-image: none;
  background-position: 0px -40px;
}

.vScrollThumbStartDisabled,
.vScrollThumbStart,
.vScrollThumbStartOver,
.vScrollThumbStartDown {
  background-image: none;
  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: none;
  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: none;
  background-position: -16px -38px;
}

.vScrollThumbEndDisabled {
  background-position: 0px -38px;
}

.vScrollThumbEndOver {
  background-position: -32px -38px;
}

.vScrollThumbEndDown {
  background-position: -48px -38px;
}

.vScrollThumbGripDisabled,
.vScrollThumbGrip,
.vScrollThumbGripOver,
.vScrollThumbGripDown {
  background-image: none;
}

.hScrollStartDisabled,
.hScrollStart,
.hScrollStartOver,
.hScrollStartDown {
  background-image: none;
  background-position: 0px -16px;
  border-top: none;
  border-bottom: none;
  border-left: none;
}

.hScrollStartDisabled {
  background-position: 0px 0px;
}

.hScrollStartOver {
  background-position: 0px -32px;
}

.hScrollStartDown {
  background-position: 0px -48px;
}

.hScrollTrackStretchDisabled,
.hScrollTrackStretch,
.hScrollTrackStretchOver,
.hScrollTrackStretchDown {
  background-image: none;
  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: none;
  background-position: -18px -16px;
  border-top: none;
  border-bottom: none;
  border-right: none;
}

.hScrollEndDisabled {
  background-position: -18px 0px;
}

.hScrollEndOver {
  background-position: -18px -32px;
}

.hScrollEndDown {
  background-position: -18px -48px;
}

.hScrollCornerDisabled,
.hScrollCorner,
.hScrollCornerOver,
.hScrollCornerDown {
  background-image: none;
  background-position: -40px 0px;
}

.hScrollThumbStartDisabled,
.hScrollThumbStart,
.hScrollThumbStartOver,
.hScrollThumbStartDown {
  background-image: none;
  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: none;
  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: none;
  background-position: -38px -16px;
}

.hScrollThumbEndDisabled {
  background-position: -38px 0px;
}

.hScrollThumbEndOver {
  background-position: -38px -32px;
}

.hScrollThumbEndDown {
  background-position: -38px -48px;
}

.hScrollThumbGripDisabled,
.hScrollThumbGrip,
.hScrollThumbGripOver,
.hScrollThumbGripDown {
  background-image: none;
}

/* track and thumb */
.hScrollTrack {
  background-color: #b5bfc7;
  border-top: none;
  border-bottom: none;
}

.hScrollTrackDown {
  background-color: #949ea6;
  border-top: none;
  border-bottom: none;
}

.hScrollTrackOver {
  background-color: #cdd6dc;
}

.hScrollTrackDisabled {
  background: #bac4cc;
  border-top: none;
  border-bottom: none;
}

.vScrollTrack {
  background-color: #b5bfc7;
  border-left: none;
  border-right: none;
}

.vScrollTrackDown {
  background-color: #949ea6;
  border-left: none;
  border-right: none;
}

.vScrollTrackOver {
  background-color: #cdd6dc;
  border-left: none;
  border-right: none;
}

.vScrollTrackDisabled {
  background: #bac4cc;
  border-left: none;
  border-right: none;
}

.vScrollThumb,
.vScrollThumbOver {
  background-image: none;
}

.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: none;
}

.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;
}

/* MinimalScrollbar track and thumb */
.minimalScrollTrackLight {
  background-color: transparent;
}

.minimalScrollTrackDark {
  background-color: transparent;
}

.minimalScrollTrackLightInteractive {
  background-color: rgba(169, 169, 169, 0.3);
}

.minimalScrollTrackDarkInteractive {
  background-color: rgba(211, 211, 211, 0.3);
}

.minimalScrollThumbLight,
.minimalScrollThumbLightInteractive {
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.4);
}

.minimalScrollThumbDark,
.minimalScrollThumbDarkInteractive {
  border-radius: 2px;
  background-color: rgba(0, 0, 0, 0.4);
}

/*----- CSS Thumbs using pseudo-classes -----*/
/* *** pseudo-element ScrollBars - you can style breadth, radius and stateful colors with variables
   -- note that these don't work in FireFox, which shows builtin auto-hiding scrollers - see code 
   above, which sets only the thumb/scroll-icon color in the default state - that's all you can do 
   right now 
*/
.verticalScrollThumb {
  border-radius: 2px;
  position: relative;
}

.verticalScrollThumb:before,
.verticalScrollThumbOver:before,
.verticalScrollThumbDown:before,
.verticalScrollThumbDisabled:before {
  content: "";
  height: 100%;
  position: absolute;
  display: block;
  width: 6px;
  background-color: #b5bfc7;
  transition: background-color 0.2s;
  border-radius: 4px;
  left: 50%;
  /* Move the pseudo-element to the center of the container */
  transform: translateX(-50%);
  /* Offset it to truly center it */
}

.verticalScrollThumbOver:before {
  background-color: #cdd6dc;
}

.verticalScrollThumbDown:before {
  background-color: #cdd6dc;
}

.verticalScrollThumbDisabled:before {
  background-color: #ababab;
}

.horizontalScrollThumb:before,
.horizontalScrollThumbOver:before,
.horizontalScrollThumbDown:before,
.horizontalScrollThumbDisabled:before {
  content: "";
  height: 6px;
  position: absolute;
  display: block;
  width: 100%;
  background-color: #b5bfc7;
  transition: background-color 0.2s;
  border-radius: 4px;
  top: 50%;
  /* Move the pseudo-element to the center of the container */
  transform: translateY(-50%);
  /* Offset it to truly center it */
}

.horizontalScrollThumbOver:before {
  background-color: #cdd6dc;
}

.horizontalScrollThumbDown:before {
  background-color: #cdd6dc;
}

.horizontalScrollThumbDisabled:before {
  background-color: #ababab;
}

.verticalScrollTrack,
.horizontalScrollTrack {
  background-color: transparent;
}

/* end pseudo-element Scrollbars */
/*============================================================
    16) ToggleSwitch
============================================================*/
.toggleSwitch,
.toggleSwitchOff,
.toggleSwitchOn {
  /* General styles for the toggle switch */
  border: 1px solid #cdd5db;
  border-radius: 15px;
  background-color: #e6e6e6;
  transition: background-color 0.1s ease-in-out;
}

.toggleSwitchOff {
  /* Styles for the off state of the toggle switch */
  border: 1px solid #cdd5db;
  background-color: #e6e6e6;
}

.toggleSwitchOn {
  /* Styles for the on state of the toggle switch */
  border: 1px solid #cdd5db;
  background-color: #38a37e;
}

.toggleSwitchOffDisabled,
.toggleSwitchOnDisabled {
  border-radius: 15px;
  border: 1px solid #cdd5db;
  background-color: #e6e6e6;
  transition: background-color 0.1s ease-in-out;
}

.toggleSwitchThumb,
.toggleSwitchThumbOff,
.toggleSwitchThumbOn {
  /* Styles for the states of the toggle switch thumb */
  background-color: #ffffff;
  border-radius: 15px;
  border: 1px solid #d0d0d0;
  transition: background-color 0.1s ease-in-out;
  box-sizing: border-box;
}

.toggleSwitchThumbOff {
  /* Styles for the off state of the toggle switch */
  background-color: #ffffff;
  border-radius: 15px;
  border: 1px solid #d0d0d0;
}

.toggleSwitchThumbOn {
  /* Styles for the on state of the toggle switch thumb */
  background-color: #ffffff;
  border-radius: 15px;
  border: 1px solid #d0d0d0;
}

.toggleSwitchThumbDisabled,
.toggleSwitchThumbOffDisabled,
.toggleSwitchThumbOnDisabled {
  /* Styles for the off state of the toggle switch */
  border-radius: 15px;
  border: 1px solid #d0d0d0;
  background-color: #ffffff;
}

/* GradientEditor */
.gradientEditor {
  background-color: #ffffff;
  color: #5b5b5b;
  border: 1px solid #d0d0d0;
}

.gradientTemplateLayout {
  background-color: #ffffff;
  color: #5b5b5b;
  border: 1px solid #d0d0d0;
}

.svgCheckbox {
  color: #3db271;
  transition: color, background-color 0.1s ease-in-out;
}

.svgRadio {
  color: #3db271;
  transition: color, background-color 0.1s ease-in-out;
}

.radioAnchor,
.radioAnchorOver,
.radioAnchorFocused,
.radioAnchorFocusedOver,
.radioAnchorDisabled,
.radioAnchorError,
.radioAnchorErrorOver,
.radioAnchorErrorFocused,
.radioAnchorErrorFocusedOver,
.radioAnchorPending,
.radioAnchorPendingOver,
.radioAnchorPendingFocused,
.radioAnchorPendingFocusedOver,
.radioAnchorPendingDisabled,
.radioAnchorPendingError,
.radioAnchorPendingErrorOver,
.radioAnchorPendingErrorFocused,
.radioAnchorPendingErrorFocusedOver {
  color: #5b5b5b;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  vertical-align: middle;
  text-decoration: none;
  outline-width: 0px;
  padding: 0px 1px 0px 2px;
}

/* pending */
.radioAnchorPending,
.radioAnchorPendingOver,
.radioAnchorPendingFocused,
.radioAnchorPendingFocusedOver,
.radioAnchorPendingDisabled {
  color: #0066CC;
}

/* error */
.radioAnchorError,
.radioAnchorErrorOver,
.radioAnchorErrorFocused,
.radioAnchorErrorFocusedOver,
.radioAnchorPendingError,
.radioAnchorPendingErrorOver,
.radioAnchorPendingErrorFocused,
.radioAnchorPendingErrorFocusedOver {
  color: #8f2227;
}

/*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
============================================================*/
.cubeCell,
.cubeCellOver,
.cubeCellSelected,
.cubeCellSelectedOver,
.cubeCellDark,
.cubeCellDisabled {
  background-color: #ffffff;
  border: none;
  border-right: 1px solid #d0d0d0;
  border-bottom: 1px solid #d0d0d0;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #5b5b5b;
  text-overflow: ellipsis;
  transition: background-color 0.2s;
}

.cubeCellDark {
  background-color: #fafafa;
  color: #5b5b5b;
}

.cubeCellDisabled {
  color: #ababab;
}

/* partial styles */
.cubeCellOver {
  color: #5b5b5b;
  background-color: #f5f8fa;
}

.cubeCellSelected {
  color: #5b5b5b;
  background-color: #55c580;
}

.cubeCellSelectedOver {
  color: #5b5b5b;
  background-color: #f0f0f0;
}

/* row headers */
.rowHeader,
.rowHeaderOver,
.rowHeaderDown,
.rowHeaderDisabled,
.rowHeaderSelected,
.rowHeaderSelectedDown,
.rowHeaderSelectedOver,
.rowHeaderSelectedDisabled {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #ffffff;
  background-color: #3db271;
  border: 1px solid #ffffff;
  border-left: none;
  border-top: none;
}

.rowHeaderOver {
  color: #ffffff;
  background-color: #48c07e;
}

.rowHeaderSelected,
.rowHeaderSelectedDown,
.rowHeaderDown {
  color: #ffffff;
  background-color: #369f65;
}

.rowHeaderSelectedOver {
  color: #ffffff;
  background-color: #48c07e;
}

.rowHeaderDisabled,
.rowHeaderSelectedDisabled {
  color: #ababab;
  background-color: transparent;
  border: 1px solid #ffffff;
  border-left: none;
  border-top: none;
}

/* row header label (above the rowHeaders, on the left) */
.rowHeaderLabel,
.rowHeaderLabelOver,
.rowHeaderLabelDown,
.rowHeaderLabelDisabled,
.rowHeaderLabelSelected,
.rowHeaderLabelSelectedDown,
.rowHeaderLabelSelectedOver,
.rowHeaderLabelSelectedDisabled {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #ffffff;
  background-color: #369f65;
  border: 1px solid #ffffff;
  border-left: none;
  border-top: none;
}

.rowHeaderLabelOver {
  color: #ffffff;
  background-color: #48c07e;
}

.rowHeaderLabelSelected,
.rowHeaderLabelSelectedDown,
.rowHeaderLabelDown {
  color: #ffffff;
  background-color: #278441;
}

.rowHeaderLabelSelectedOver {
  color: #ffffff;
  background-color: #ffffff;
}

.rowHeaderLabelDisabled,
.rowHeaderLabelSelectedDisabled {
  color: #ababab;
  background-color: transparent;
  border: 1px solid #ffffff;
  border-left: none;
  border-top: none;
}

/* column headers */
.colHeader,
.colHeaderOver,
.colHeaderDown,
.colHeaderDisabled,
.colHeaderSelected,
.colHeaderSelectedDown,
.colHeaderSelectedOver,
.colHeaderSelectedDisabled {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #ffffff;
  background-color: #3db271;
  border: 1px solid #ffffff;
  border-left: none;
  border-top: none;
}

.colHeaderOver {
  color: #ffffff;
  background-color: #48c07e;
}

.colHeaderSelected,
.colHeaderSelectedDown,
.colHeaderDown {
  color: #ffffff;
  background-color: #369f65;
}

.colHeaderSelectedOver {
  color: #ffffff;
  background-color: #48c07e;
}

.colHeaderDisabled,
.colHeaderSelectedDisabled {
  color: #ababab;
  background-color: transparent;
  border: 1px solid #ffffff;
  border-left: none;
  border-top: none;
}

/* col header label (to the left of the upper-most col-headers, above the grid) */
.colHeaderLabel,
.colHeaderLabelOver,
.colHeaderLabelDown,
.colHeaderLabelDisabled,
.colHeaderLabelSelected,
.colHeaderLabelSelectedDown,
.colHeaderLabelSelectedOver,
.colHeaderLabelSelectedDisabled {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #ffffff;
  background-color: #369f65;
  border: 1px solid #ffffff;
  border-left: none;
  border-top: none;
}

.colHeaderLabelOver {
  color: #ffffff;
  background-color: #48c07e;
}

.colHeaderLabelSelected,
.colHeaderLabelSelectedDown,
.colHeaderLabelDown {
  color: #ffffff;
  background-color: #278441;
}

.colHeaderLabelSelectedOver {
  color: #ffffff;
  background-color: #278441;
}

.colHeaderLabelDisabled,
.colHeaderLabelSelectedDisabled {
  color: #ababab;
  background-color: transparent;
  border: 1px solid #ffffff;
  border-left: none;
  border-top: none;
}

/* inner header */
.innerHeader,
.innerHeaderOver,
.innerHeaderDown,
.innerHeaderDisabled,
.innerHeaderSelected,
.innerHeaderSelectedDown,
.innerHeaderSelectedOver,
.innerHeaderSelectedDisabled {
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #3f3f3f;
  background-color: #e6e6e6;
  border: 1px solid #d0d0d0;
  border-left: none;
}

.innerHeaderOver {
  color: #3f3f3f;
  background-color: #e6e6e6;
}

.innerHeaderSelected,
.innerHeaderSelectedDown,
.innerHeaderDown {
  color: #3f3f3f;
  background-color: #e6e6e6;
}

.innerHeaderSelectedOver {
  color: #3f3f3f;
  background-color: #e6e6e6;
}

.innerHeaderDisabled,
.innerHeaderSelectedDisabled {
  color: #ababab;
  background-color: transparent;
}

/*============================================================
	BarChart
	internal, charting/visualization module only
		styleName - chart
		barStyle - chartBar
		others are currently fixed
============================================================*/
.scChart {
  border: 1px solid #d0d0d0;
}

.chart {
  background-color: #cccccc;
}

.chartTitle {
  color: #444444;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

.chartAxisTitle {
  color: #000b8d;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
}

.chartValueTitle {
  color: #444444;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
}

.chartTotal {
  background-color: linen;
  color: #444444;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.chartBody {
  background-color: #d0d0d0;
  border-left: 1px solid #d0d0d0;
  border-right: 1px solid #d0d0d0;
  border-top: 1px dashed #0000FF;
}

.chartBar1 {
  background-color: #FF0000;
  background-image: none;
}

.chartBar2 {
  background-color: #0000FF;
  background-image: none;
}

.chartBar3 {
  background-color: #00FF00;
  background-image: none;
}

/*============================================================
	Printing
        printHeader - general print style for header elements including:
        - ListGrid header cells
        - SectionStack headers
============================================================*/
.printHeader {
  border: 1px solid #d0d0d0;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
}

/*============================================================
	Calendar
============================================================*/
/* Calendar headerBar */
.calendarHeaderBar {
  background-color: transparent;
  border-right: none;
  border-top: 2px solid #3db271;
  border-bottom: 2px solid #38a37e;
}

.calendarHeaderBarDisabled {
  background-color: transparent;
}

/* Calendar date cells */
.calendar,
.calendarOver,
.calendarSelected,
.calendarSelectedOver,
.calendarDisabled,
.calendarDisabledOver,
.calendarDisabledSelected {
  background-color: #ffffff;
  border: 1px solid transparent;
  border-bottom: 1px solid #d0d0d0;
  border-right: 1px solid #d0d0d0;
  color: #444444;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
}

/* normal cell Over state */
.calendarOver,
.calendarDisabledOver {
  background-color: #f5f8fa;
  color: #5b5b5b;
}

.calendarSelected {
  background-color: #f0f0f0;
  color: #5b5b5b;
}

.calendarSelectedOver {
  background-color: #f0f0f0;
  color: #5b5b5b;
}

.calendarDisabled {
  background-color: #fafafa;
}

.calendarDisabledSelected {
  background-color: #e1e1e1;
}

/* calendar dark - for alternate row/col styles */
.calendarDark,
.calendarOverDark,
.calendarSelectedDark,
.calendarSelectedOverDark,
.calendarDisabledDark,
.calendarDisabledOverDark,
.calendarDisabledSelectedDark {
  background-color: #f0f0f0;
  border: 1px solid transparent;
  border-bottom: 1px solid #d0d0d0;
  border-right: 1px solid #d0d0d0;
  color: #444444;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
}

.calendarSelectedDark {
  background-color: #f0f0f0;
  color: #5b5b5b;
}

.calendarSelectedOverDark {
  background-color: #f0f0f0;
  color: #5b5b5b;
}

.calendarDisabledDark {
  background-color: #fafafa;
}

.calendarDisabledSelectedDark {
  background-color: #e1e1e1;
}

/* drag-select canvas */
.calendarCellSelected {
  background-color: #cccccc;
  border: 1px solid transparent;
  border-bottom: 1px solid #d0d0d0;
  border-right: 1px solid #d0d0d0;
  color: #444444;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
}

/* Calendar cells that fall in the defined work-day */
.calendarWorkday,
.calendarWorkdayOver,
.calendarWorkdaySelected,
.calendarWorkdaySelectedOver,
.calendarWorkdayDisabled,
.calendarWorkdayDisabledOver {
  background-color: #f0f0f0;
  border: 1px solid transparent;
  border-bottom: 1px solid #d0d0d0;
  border-right: 1px solid #d0d0d0;
  color: #444444;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
}

.calendarWorkdaySelected {
  background-color: #cccccc;
}

.calendarWorkdayDisabled {
  background-color: #fafafa;
}

/* Calendar labelColumn - used for day/weekView time-column and Timeline-laneField */
.labelColumn,
.labelColumnDark,
.labelColumnOver,
.labelColumnOverDark,
.labelColumnSelected,
.labelColumnSelectedOver,
.labelColumnSelectedDark,
.labelColumnSelectedOverDark,
.labelColumnDisabled,
.labelColumnDisabledDark,
.labelColumnDisabledSelected,
.labelColumnDisabledSelectedDark {
  background-color: #fafafa;
  color: #444444;
  border: 1px solid transparent;
  border-bottom: 1px solid #d0d0d0;
  border-right: 1px solid #d0d0d0;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
}

.labelColumnOver,
.labelColumnOverDark,
.labelColumnSelected,
.labelColumnSelectedDark,
.labelColumnSelectedOver,
.labelColumnSelectedOverDark {
  background-color: #f0f0f0;
  color: #5b5b5b;
}

.labelColumnDisabled,
.labelColumnDisabledDark {
  background-color: #f9f9f9;
  color: #ababab;
}

.labelColumnDisabledSelected,
.labelColumnDisabledSelectedDark {
  background-color: #e1e1e1;
  color: #444444;
}

/* ---- monthView ---- */
/* calMonthDayHeader */
.calMonthDayHeader,
.calMonthDayHeaderDark,
.calMonthDayHeaderOver,
.calMonthDayHeaderOverDark,
.calMonthDayHeaderSelected,
.calMonthDayHeaderSelectedDark,
.calMonthDayHeaderSelectedOver,
.calMonthDayHeaderSelectedOverDark,
.calMonthDayHeaderSelectedDisabled,
.calMonthDayHeaderDisabled {
  background-color: #f0f0f0;
  border-bottom: 1px solid #d0d0d0;
  border-right: 1px solid #d0d0d0;
  color: #444444;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
}

.calMonthDayHeaderOver,
.calMonthDayHeaderOverDark {
  background-color: #b6e37a;
  color: #454545;
}

.calMonthDayHeaderSelected,
.calMonthDayHeaderSelectedDark,
.calMonthDayHeaderSelectedOver,
.calMonthDayHeaderSelectedOverDark,
.calMonthDayHeaderSelectedDisabled {
  background-color: #b6e37a;
  color: #454545;
}

/* end calMonthDayHeader */
/* calMonthDayBody */
.calMonthDayBody,
.calMonthDayBodyDark,
.calMonthDayBodyOver,
.calMonthDayBodyOverDark,
.calMonthDayBodySelected,
.calMonthDayBodySelectedDark,
.calMonthDayBodySelectedOver,
.calMonthDayBodySelectedOverDark,
.calMonthDayBodySelectedDisabled,
.calMonthDayBodyDisabled {
  background-color: #ffffff;
  border-bottom: 1px solid #d0d0d0;
  border-right: 1px solid #d0d0d0;
  color: #444444;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
}

.calMonthDayBodySelected,
.calMonthDayBodySelectedDark,
.calMonthDayBodySelectedOver,
.calMonthDayBodySelectedOverDark,
.calMonthDayBodySelectedDisabled {
  background-color: #b6e37a;
}

.calMonthDayBodyDisabled {
  background-color: #fafafa;
}

/* end calMonthDayBody */
/* calMonthOtherDayHeader and Body */
.calMonthOtherDayHeader,
.calMonthOtherDayHeaderOver,
.calMonthOtherDayHeaderSelected,
.calMonthOtherDayHeaderSelectedOver,
.calMonthOtherDayHeaderSelectedDisabled,
.calMonthOtherDayHeaderDisabled {
  background-color: #d0d0d0;
  border-bottom: 1px solid #d0d0d0;
  border-right: 1px solid #d0d0d0;
  color: #454545;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
}

.calMonthOtherDayHeaderOver,
.calMonthOtherDayHeaderSelected,
.calMonthOtherDayHeaderSelectedOver {
  background-color: #b6e37a;
}

.calMonthOtherDayBody,
.calMonthOtherDayBodyDark,
.calMonthOtherDayBodyDisabled {
  background-color: #f0f0f0;
  border-bottom: 1px solid #d0d0d0;
  border-right: 1px solid #d0d0d0;
  color: #444444;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
}

.calMonthOtherDayBodyOver,
.calMonthOtherDayBodyOverDark {
  background-color: #b6e37a;
  border-bottom: 1px solid #d0d0d0;
  border-right: 1px solid #d0d0d0;
  color: #444444;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
}

/* end calMonthOtherDayHeader and Body */
/* calMonthOtherDayBlank */
.calMonthOtherDayBlank,
.calMonthOtherDayBlankDark,
.calMonthOtherDayBlankOver,
.calMonthOtherDayBlankOverDark,
.calMonthOtherDayBlankSelected,
.calMonthOtherDayBlankSelectedDark,
.calMonthOtherDayBlankSelectedOver,
.calMonthOtherDayBlankSelectedOverDark,
.calMonthOtherDayBlankSelectedDisabled,
.calMonthOtherDayBlankDisabled {
  background-color: #ffffff;
  border-bottom: 1px solid #d0d0d0;
  border-right: 1px solid #d0d0d0;
  color: #454545;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
}

/* calMonthEventLink */
a.calMonthEventLink:link {
  color: #0000EE;
  text-decoration: none;
}

a.calMonthEventLink:visited {
  color: #0000EE;
  text-decoration: none;
}

a.calMonthEventLink:hover {
  color: #0000EE;
  text-decoration: underline;
}

a.calMonthEventLink:active {
  color: #0000EE;
  text-decoration: none;
}

/* Calendar Column Layouts - VLayouts used to stack eventCanvases in a day column */
.calendarColumnLayout,
.calendarColumnLayoutOver,
.calendarColumnLayoutDown,
.calendarColumnLayoutSelected {
  background-color: #ffffff;
  border-right: 1px solid #d0d0d0;
  opacity: 1;
}

/* ----event window---- */
.eventWindow,
.eventWindowSelected {
  background-color: #72cfaf;
  border: 1px solid #38a37e;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  padding: 1px;
  outline: none;
  border-radius: 4px;
}

.eventWindowSelected {
  border: 1px solid #3db271;
}

.eventWindowHeader,
.eventWindowHeaderSelected {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  height: auto;
  background-color: #38a37e;
  color: #ffffff;
  border: 1px solid #38a37e;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  padding: 2px 2px 2px 2px;
  border-radius: 4px;
}

.eventWindowBody,
.eventWindowBodySelected {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  vertical-align: top;
  background-color: #72cfaf;
  color: #ffffff;
  border: none;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  padding: 2px 2px 2px 2px;
  border-radius: 0px;
}

.eventWindowGripper,
.eventWindowLabel {
  background-color: #38a37e;
  color: #ffffff;
  border: 1px solid #38a37e;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  padding: 2px 2px 2px 2px;
  border-radius: 4px;
}

.eventWindowResizer {
  border-bottom: 1px solid #ffffff;
  border-top: 1px solid #ffffff;
}

/* Leading/Trailing date-lines, shown either side of events in Timelines */
.eventLine {
  background-color: #3db271;
}

/* == styles for long-events == */
.longEventsLayout {
  background-color: #ffffff;
  border-bottom: 1px solid #d0d0d0;
}

/* ---- eventCanvas styles---- */
.longEvent,
.longEventSelected {
  background-color: #72cfaf;
  border: none;
  padding: 0px;
  outline: none;
  border-radius: 4px;
}

.longEventHeader,
.longEventHeaderSelected {
  background-color: #38a37e;
  color: #ffffff;
  border: none;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  padding: 0px 10px;
  vertical-align: middle;
  display: flex !important;
  align-items: center !important;
  border-radius: 4px;
}

.longEventBody,
.longEventBodySelected {
  background-color: #72cfaf;
  color: #ffffff;
  border: none;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  padding: 2px 2px 2px 2px;
  border-radius: 4px;
}

/* pointy-ends for Calendar long-events that extend beyond the range*/
/* arrow on the right */
.longEventRightEnd {
  position: relative;
  clip-path: polygon(0 0, calc(100% - 0.5em) 0, 100% 50%, calc(100% - 0.5em) 100%, 0 100%);
}

/* arrow on the left */
.longEventLeftEnd {
  position: relative;
  clip-path: polygon(0.5em 0, 100% 0, 100% 100%, 0.5em 100%, 0 50%);
}

.longEventBothEnds {
  position: relative;
  clip-path: polygon(0.5em 0, calc(100% - 0.5em) 0, 100% 50%, calc(100% - 0.5em) 100%, 0.5em 100%, 0 50%);
}

/* --- ZoneCanvas --- */
.zoneCanvas {
  background-color: #9e9e9e;
  opacity: 0.5;
  color: #ffffff;
}

.zoneCanvasHeader,
.zoneCanvasGripper,
.zoneCanvasLabel {
  display: inline-block;
  color: #ffffff;
  background-color: #9e9e9e;
  left: 0px;
  bottom: 0px;
}

.zoneCanvasBody {
  display: inline-block;
  color: #ffffff;
  background-color: #9e9e9e;
}

/* --- IndicatorCanvas --- */
.indicatorCanvas {
  background-color: #AA0000;
}

.indicatorCanvasHeader,
.indicatorCanvasGripper,
.indicatorCanvasLabel {
  display: inline-block;
  color: #ffffff;
  background-color: #AA0000;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
}

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

/* show a border around floating labels */
.eventWindowLabel,
.zoneCanvasLabel,
.indicatorCanvasLabel {
  border: 1px solid #d0d0d0;
}

.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
============================================================*/
/* cellStyle for values in PropertySheets */
.propSheetValue,
.propSheetValueFocused,
.propSheetValueDisabled,
.propSheetValueError,
.propSheetValueErrorFocused {
  border-bottom: 1px solid #d0d0d0;
  border-right: 1px solid #d0d0d0;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  margin: 0px -4px 0px 0px;
  padding: 0px;
}

.propSheetValueError,
.propSheetValueErrorFocused {
  background-color: #c5e480;
  color: #8f2227;
}

/* title-cell for PropertySheet fields - has colors and borders but not */
.propSheetTitleCell,
.propSheetTitleCellFocused,
.propSheetTitleCellDisabled,
.propSheetTitleCellError,
.propSheetTitleCellErrorFocused {
  background-color: #f0f0f0;
  border-bottom: 1px solid #d0d0d0;
  border-right: 1px solid #d0d0d0;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #444444;
}

.propSheetTitleCellError,
.propSheetTitleCellErrorFocused {
  background-color: #c5e480;
  color: #8f2227;
}

/* title-text for PropertySheet fields - font/size and padding - borders are on the cell */
.propSheetTitle,
.propSheetTitleFocused,
.propSheetTitleDisabled,
.propSheetTitleError {
  border: none;
  padding-left: 4px;
  padding-right: 4px;
  color: #444444;
}

.propSheetTitleError {
  color: #8f2227;
}

.propSheetField,
.propSheetFieldDisabled {
  background-color: #ffffff;
  border: 0px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  margin-top: 3px;
  padding: 4px 0px 4px 0px;
}

.propSheetHeading,
.propSheetHeadingDisabled {
  background-color: #d0d0d0;
  border-bottom: 1px solid #d0d0d0;
  color: #444444;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  padding: 4px;
}

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

.propSheetSectionItemCell,
.propSheetSectionItemDisabled {
  padding: 4px;
}

/*============================================================
	PaletteTreeCell
	internal, used by Visual SmartClient tools
============================================================*/
.paletteTreeCell,
.paletteTreeCellDark,
.paletteTreeCellOver,
.paletteTreeCellOverDark,
.paletteTreeCellSelected,
.paletteTreeCellSelectedDark,
.paletteTreeCellSelectedOver,
.paletteTreeCellSelectedOverDark,
.paletteTreeCellDisabled,
.paletteTreeCellDisabledDark,
.paletteTreeTallCell,
.paletteTreeTallCellDark,
.paletteTreeTallCellOver,
.paletteTreeTallCellOverDark,
.paletteTreeTallCellSelected,
.paletteTreeTallCellSelectedDark,
.paletteTreeTallCellSelectedOver,
.paletteTreeTallCellSelectedOverDark,
.paletteTreeTallCellDisabled,
.paletteTreeTallCellDisabledDark {
  color: #737373;
  background-color: #f0f0f0;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
  vertical-align: middle;
  text-overflow: ellipsis;
  padding: 0px 0px 0px 10px;
  border: none;
  border-bottom: none;
  border-right: none;
}

/*============================================================
    Workflow Editor
============================================================*/
.processElement,
.processElementFocused,
.processElementDisabled,
.processElementInvalid,
.processElementNew,
.processElementNewFocused,
.processElementNewDisabled {
  color: #444444;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.processElement,
.processElementFocused,
.processElementDisabled {
  border: 1px solid #808080;
  border-radius: 2px;
}

.processElementInvalid {
  border: 1px solid #ff0000;
  border-radius: 2px;
}

.processElementNew,
.processElementNewFocused,
.processElementNewDisabled {
  border: 1px dashed blue;
  border-radius: 2px;
}

.processElementDisabled,
.processElementNewDisabled {
  -webkit-text-fill-color: #ababab;
  color: #ababab;
}

.processElementHeader {
  background-color: #f0f0f0;
  border: none;
  border-bottom: 1px solid #dddddd;
}

.processElementHeaderLabel {
  background-color: #f0f0f0;
  color: #616161;
  top: 50%;
  transform: translateY(10%);
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 12px;
}

/*============================================================
    Notifications
============================================================*/
.notifyWarn,
.notifyError,
.notifyMessage,
.notifyWarnRTL,
.notifyErrorRTL,
.notifyMessageRTL {
  color: #ffffff;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 14px;
  border-radius: 2px;
}

.notifyWarn,
.notifyError,
.notifyMessage {
  padding: 10px 45px 10px 10px;
}

.notifyWarnRTL,
.notifyErrorRTL,
.notifyMessageRTL {
  padding: 10px 10px 10px 45px;
}

.notifyWarn,
.notifyWarnRTL {
  background-color: #ea9039;
  box-shadow: 0px 0px 5px #ea9039;
}

.notifyError,
.notifyErrorRTL {
  background-color: #e34e42;
  box-shadow: 0px 0px 5px #e34e42;
}

.notifyMessage,
.notifyMessageRTL {
  background-color: #394a51;
  box-shadow: 0px 0px 5px #394a51;
}

.notifyWarnActionLink,
.notifyErrorActionLink,
.notifyMessageActionLink {
  padding: 0;
  border: none;
  font: inherit;
  cursor: pointer;
  background: none;
}

.notifyWarnActionLink,
.notifyWarnActionLink:link,
.notifyWarnActionLink:hover,
.notifyWarnActionLink:visited {
  color: #4F140E;
}

.notifyErrorActionLink,
.notifyErrorActionLink:link,
.notifyErrorActionLink:hover,
.notifyErrorActionLink:visited {
  color: #F39C12;
}

.notifyMessageActionLink,
.notifyMessageActionLink:link,
.notifyMessageActionLink:hover,
.notifyMessageActionLink:visited {
  color: #2aa369;
}

/*============================================================
    Tour
============================================================*/
/* Note that Tour styles do no default from standard values
   so that the output is independent of the current skin */
/* Window */
.tourWindowBackground {
  background-color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 3px;
  box-shadow: 0px 0px 25px 0 #bfbfbf;
}

.tourWindowBody {
  background-color: #ffffff;
  padding: 2px 2px 2px 2px;
}

.tourWindowTitle {
  color: #595959;
  font-size: 16px;
  font-weight: bold;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  padding-bottom: 4px;
}

.tourWindowContents {
  color: #7f7f7f;
  font-size: 14px;
  font-weight: normal;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  margin: 0;
}

.tourPointerUp {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 29px solid #ffffff;
}

.tourPointerDown {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 14px solid transparent;
  border-top: 29px solid #ffffff;
}

.tourPointerRight {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 29px solid #ffffff;
}

.tourPointerLeft {
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 14px solid transparent;
  border-right: 29px solid #ffffff;
}

.tourButton,
.tourButtonOver,
.tourButtonFocused,
.tourButtonFocusedOver,
.tourButtonDown,
.tourButtonFocusedDown,
.tourButtonSelected,
.tourButtonSelectedFocused,
.tourButtonSelectedDown,
.tourButtonSelectedFocusedDown,
.tourButtonSelectedOver,
.tourButtonSelectedFocusedOver,
.tourButtonDisabled,
.tourButtonSelectedDisabled,
.tourButtonPending,
.tourButtonPendingOver,
.tourButtonPendingFocused,
.tourButtonPendingFocusedOver,
.tourButtonPendingDown,
.tourButtonPendingFocusedDown,
.tourButtonPendingSelected,
.tourButtonPendingSelectedFocused,
.tourButtonPendingSelectedDown,
.tourButtonPendingSelectedFocusedDown,
.tourButtonPendingSelectedOver,
.tourButtonPendingSelectedFocusedOver,
.tourButtonPendingDisabled,
.tourButtonPendingSelectedDisabled,
.tourButtonDeselectedDisabled {
  background-color: #3db271;
  background-image: linear-gradient(to bottom, #3db271 0%, #38a37e 100%);
  border: 2px solid #3db271;
  border-radius: 2px;
  padding-left: 5px;
  padding-right: 5px;
  line-height: 18px;
  outline: 0px;
  color: #ffffff;
  font-size: 12px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-weight: normal;
  opacity: 1;
}

/* Over styles */
.tourButton:hover,
.tourButtonOver,
.tourButtonPendingOver {
  color: #ffffff;
  background-color: #3db271;
  border: 2px solid #3db271;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  opacity: 0.9;
}

/* focused styles */
.tourButtonFocused,
.tourButtonSelectedFocused {
  color: #ffffff;
  background-color: #45a453;
  border: 2px solid #288736;
  box-shadow: none;
  opacity: 0.9;
}

/* focusedOver styles */
.tourButtonFocusedOver,
.tourButtonSelectedFocusedOver {
  color: #ffffff;
  background-color: #45a453;
  border: 2px solid #003760;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  opacity: 0.9;
}

/* Down styles */
.tourButtonDown,
.tourButtonFocusedDown,
.tourButtonSelectedDown,
.tourButtonSelectedFocusedDown {
  color: #ffffff;
  background-color: #3db271;
  border: 2px solid #369f65;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
  opacity: 0.7;
}

/* disabled styles */
.tourButtonDisabled,
.tourButtonSelectedDisabled,
.tourButtonPendingDisabled,
.tourButtonPendingSelectedDisabled {
  color: #ffffff;
  background-color: #9cd1bf;
  border: 2px solid #dadada;
  opacity: 1;
}

.tourButtonDeselectedDisabled {
  color: #a8a8a8;
  text-decoration: line-through;
  opacity: 1;
}

/* pending styles */
.tourButtonPending,
.tourButtonPendingOver,
.tourButtonPendingFocused,
.tourButtonPendingFocusedOver,
.tourButtonPendingDown,
.tourButtonPendingFocusedDown,
.tourButtonPendingSelected,
.tourButtonPendingSelectedFocused,
.tourButtonPendingSelectedDown,
.tourButtonPendingSelectedFocusedDown,
.tourButtonPendingSelectedOver,
.tourButtonPendingSelectedFocusedOver,
.tourButtonPendingSelectedDisabled {
  color: #981c65;
}

.tourLinkButton,
.tourLinkButtonOver,
.tourLinkButtonFocused,
.tourLinkButtonFocusedOver,
.tourLinkButtonDown,
.tourLinkButtonFocusedDown,
.tourLinkButtonSelected,
.tourLinkButtonSelectedFocused,
.tourLinkButtonSelectedDown,
.tourLinkButtonSelectedFocusedDown,
.tourLinkButtonSelectedOver,
.tourLinkButtonSelectedFocusedOver,
.tourLinkButtonDisabled,
.tourLinkButtonSelectedDisabled,
.tourLinkButtonPending,
.tourLinkButtonPendingOver,
.tourLinkButtonPendingFocused,
.tourLinkButtonPendingFocusedOver,
.tourLinkButtonPendingDown,
.tourLinkButtonPendingFocusedDown,
.tourLinkButtonPendingSelected,
.tourLinkButtonPendingSelectedFocused,
.tourLinkButtonPendingSelectedDown,
.tourLinkButtonPendingSelectedFocusedDown,
.tourLinkButtonPendingSelectedOver,
.tourLinkButtonPendingSelectedFocusedOver,
.tourLinkButtonPendingDisabled,
.tourLinkButtonPendingSelectedDisabled,
.tourLinkButtonDeselectedDisabled {
  background-color: transparent;
  padding-left: 5px;
  padding-right: 5px;
  line-height: 18px;
  outline: 0px;
  color: #bfbfbf;
  font-size: 14px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-weight: normal;
}

.tourProgress {
  background-color: #d5d5d5;
}

.tourPercent {
  color: #d5d5d5;
  font-size: 16px;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-weight: normal;
}

/*============================================================
    Application
============================================================*/
.pageTitle,
.pageTitleFocused,
.pageTitleDisabled,
.pageTitleOver {
  background-color: transparent;
  color: #5b5b5b;
  border: 1px solid transparent;
  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
  font-size: 18px;
}

.pageTitleDisabled {
  -webkit-text-fill-color: #ababab;
  color: #ababab;
}

/* general icons */
/* .icon series applies colors appropriate for use on the skin's background-color - this is 
   used automatically by font-icons and by SVG symbols that set "fill" or "stroke" to the 
   special value "currentColor", which inherits the current CSS color
*/
.icon,
.iconOver,
.iconDown,
.iconFocused,
.iconFocusedOver,
.iconFocusedDown,
.iconSelected,
.iconSelectedOver,
.iconSelectedDown,
.iconSelectedFocused,
.iconSelectedFocusedOver,
.iconSelectedFocusedDown,
.iconSelectedDisabled,
.iconDisabled,
.icondrop {
  color: #778D87;
  vertical-align: middle;
  transition: color 0.2s;
  background-color: transparent;
}

.iconOver,
.iconFocusedOver,
.iconSelectedOver,
.iconSelectedFocusedOver {
  color: #3db271;
  background-color: transparent;
}

.iconDown,
.iconFocusedDown,
.iconSelectedDown,
.iconSelectedFocusedDown {
  color: #308c59;
  background-color: transparent;
}

.iconFocused,
.iconSelectedFocused {
  color: #3db271;
  background-color: transparent;
}

.iconSelected {
  color: #308c59;
  background-color: transparent;
}

.icondrop {
  color: #3db271;
  background-color: transparent;
}

.iconDisabled,
.iconSelectedDisabled {
  color: #ababab;
  background-color: transparent;
}

/* iconError variants */
.iconError,
.iconErrorOver,
.iconErrorDown,
.iconErrorFocused,
.iconErrorFocusedOver,
.iconErrorFocusedDown,
.iconErrorSelected,
.iconErrorSelectedOver,
.iconErrorSelectedDown,
.iconErrorSelectedFocused,
.iconErrorSelectedFocusedOver,
.iconErrorSelectedFocusedDown,
.iconErrorSelectedDisabled,
.iconErrorDisabled,
.iconErrordrop {
  color: #778D87;
  vertical-align: middle;
  transition: color 0.2s;
}

.iconErrorOver,
.iconErrorFocusedOver,
.iconErrorSelectedOver,
.iconErrorSelectedFocusedOver {
  color: #3db271;
}

.iconErrorDown,
.iconErrorFocusedDown,
.iconErrorSelectedDown,
.iconErrorSelectedFocusedDown {
  color: #308c59;
}

.iconErrorFocused,
.iconErrorSelectedFocused {
  color: #3db271;
}

.iconErrorSelected {
  color: #308c59;
}

.iconErrordrop {
  color: #3db271;
}

.iconErrorDisabled,
.iconErrorSelectedDisabled {
  color: #ababab;
}

/* .headerIcon series applies colors appropriate for use on the background-color of 
   Window-headers, for example, in this skin
*/
.headerIcon,
.headerIconOver,
.headerIconDown,
.headerIconFocused,
.headerIconFocusedOver,
.headerIconFocusedDown,
.headerIconSelected,
.headerIconSelectedOver,
.headerIconSelectedDown,
.headerIconSelectedFocused,
.headerIconSelectedFocusedOver,
.headerIconSelectedFocusedDown,
.headerIconDisabled {
  color: #e6e6e6;
  vertical-align: middle;
  transition: color 0.2s;
}

.headerIconOver,
.headerIconFocusedOver,
.headerIconSelectedOver,
.headerIconSelectedFocusedOver {
  color: white;
}

.headerIconDown,
.headerIconFocusedDown,
.headerIconSelectedDown,
.headerIconSelectedFocusedDown {
  color: #f2f2f2;
}

.headerIconFocused,
.headerIconSelectedFocused {
  color: white;
}

.headerIconSelected {
  color: #f2f2f2;
}

.headerIconDisabled,
.headerIconSelectedDisabled {
  color: #ababab;
}

/* .dynamicIcon series applies colors appropriate for stressing that a given icon performs some
   kind of action
*/
.dynamicIcon,
.dynamicIconOver,
.dynamicIconDown,
.dynamicIconFocused,
.dynamicIconFocusedOver,
.dynamicIconFocusedDown,
.dynamicIconSelected,
.dynamicIconSelectedOver,
.dynamicIconSelectedDown,
.dynamicIconSelectedFocused,
.dynamicIconSelectedFocusedOver,
.dynamicIconSelectedFocusedDown,
.dynamicIconDisabled {
  color: #0089FF;
  vertical-align: middle;
  transition: color 0.2s;
}

.dynamicIconOver,
.dynamicIconFocusedOver,
.dynamicIconSelectedOver,
.dynamicIconSelectedFocusedOver {
  color: #0089FF;
}

.dynamicIconDown,
.dynamicIconFocusedDown,
.dynamicIconSelectedDown,
.dynamicIconSelectedFocusedDown {
  color: #0089FF;
}

.dynamicIconFocused,
.dynamicIconSelectedFocused {
  color: #0089FF;
}

.dynamicIconSelected {
  color: #0089FF;
}

.dynamicIconDisabled,
.dynamicIconSelectedDisabled {
  color: #0089FF;
}

.voiceAssistIcon,
.voiceAssistIconOver,
.voiceAssistIconDisabled {
  background-color: #55c580;
  color: #444444;
}

.spinElement {
  animation: spin 1.5s linear infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
/* styles for the AI log-window, which shows the steps the AI is taking */
.aiLogWindowBody {
  background-color: black;
  /* include color so that SVGs in content would get the same color as surrounding text */
  color: #ffe6b3;
}

.aiLogMessage {
  background-color: black;
  color: #ffe6b3;
  font: "Courier New", Courier, monospace;
}

/* blinking cursor to indicate waiting for the AI to respond */
.aiLogEndIndicator {
  background-color: black;
  color: #ffe6b3;
  font: "Courier New", Courier, monospace;
  animation: blink 1s step-start infinite;
}

/* blink animation - toggle opacity between 1 and 0 */
@keyframes blink {
  50% {
    opacity: 0;
  }
}
/* simple blink class */
.blinkElement {
  animation: blink 1s step-start infinite;
}

/* .svgIcon series sets fill and stroke-related settings - this class is not likely to be 
    terribly useful, unless all icons using it are designed in the same way (all styled or 
    unstyled and all using the same fills and/or stroke-details (if strokes are 
    used, stroke-width in particular is very unlikely to be uniform across all icons in a set).
    Happily, all the commercial SVG sets we've tested use a single compound <path> designed 
    for a "fill", and have no fill-color set inline in the SVG.  In this case, each 
    <symbol> can be given fill="currentColor", and then you can style them with CSS color, via 
    the ".icon" / ".headerIcon" series.
*/
.svgIcon,
.svgIconOver,
.svgIconDown,
.svgIconDisabled {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #778D87;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

.svgIconOver {
  fill: none;
  stroke: #3db271;
}

.svgIconDown {
  fill: none;
  stroke: #308c59;
}

.svgIconDisabled {
  fill: none;
  stroke: #ababab;
}

.svgHilight,
.svgHilightOver,
.svgHilightDown,
.svgHilightDisabled {
  fill: none;
  stroke: #778D87;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

.svgHilightOver {
  fill: none;
  stroke: #3db271;
}

.svgHilightDown {
  fill: none;
  stroke: #308c59;
}

.svgHilightDisabled {
  fill: none;
  stroke: #ababab;
}

/* login / relogin window*/
.loginForm {
  padding: 15px;
}

.loginItemTitle,
.loginItemTitleFocused {
  color: #444444;
  font-size: 14px;
  font-family: Arial, sans-serif, Arial, Helvetica, sans-serif;
  padding-bottom: 6px;
}

.loginErrorLabel,
.loginErrorLabelOver {
  color: #ff0000;
  font-size: 14px;
  font-family: Arial, sans-serif, Arial, Helvetica, sans-serif;
  padding-bottom: 6px;
}

.loginTextItemLite,
.loginTextItemLiteSelected,
.loginTextItemLiteOver,
.loginTextItemLiteSelectedFocused,
.loginTextItemLiteFocused,
.loginTextItemLiteFocusedOver {
  padding: 0px 3px;
  color: #5b5b5b;
  background-color: #ffffff;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid #d8dde5;
  outline: none;
  text-decoration: none;
}

.loginButton,
.loginButtonOver,
.loginButtonFocused,
.loginButtonFocusedOver,
.loginButtonDown,
.loginButtonFocusedDown {
  border: none;
  background-color: #3a66c7;
  color: #ffffff;
  border-radius: 4px;
  font-size: 11px;
  font-family: system-ui, Arial, Helvetica, sans-serif;
  background-image: linear-gradient(to bottom, #3db271 0%, #38a37e 100%);
  transform: opacity 0.2s;
}

.loginButtonOver,
.loginButtonFocused,
.loginButtonFocusedOver,
.loginButtonDown,
.loginButtonFocusedDown {
  background-color: #232852;
}

/* doc viewer */
.docHover {
  border: 1px solid #3db271;
  background-color: #ffffff;
  color: #444444;
  padding: 8px 12px 8px 12px;
  border-radius: 2px;
  font-family: Verdana,Bitstream Vera Sans,sans-serif;
  font-size: 11px;
}

.docLink:link {
  color: #0000EE;
}

.docLink:visited {
  color: #551A8B;
}

.docLink:active {
  color: #EE0000;
}

.docLink:hover {
  color: #0000EE;
}

.docMethod {
  color: blue;
}

.docAttribute {
  color: green;
}

.docParameter {
  color: black;
}

.docOptionalParameter {
  color: gray;
}

/* svg */
svg {
  display: inline-block;
}

/* Async background animation for regular and alternate column */
.cellAsync,
.cellDarkAsync,
.cellOverAsync,
.cellOverDarkAsync,
.cellSelectedAsync,
.cellSelectedDarkAsync,
.cellSelectedOverAsync,
.cellSelectedOverDarkAsync,
.cellDisabledAsync,
.cellDisabledDarkAsync,
.recordSummaryCellAsync,
.recordSummaryCellDarkAsync,
.recordSummaryCellOverAsync,
.recordSummaryCellOverDarkAsync,
.recordSummaryCellSelectedAsync,
.recordSummaryCellSelectedDarkAsync,
.recordSummaryCellSelectedOverAsync,
.recordSummaryCellSelectedOverDarkAsync,
.recordSummaryCellDisabledAsync,
.recordSummaryCellDisabledDarkAsync,
.cellAltColAsync,
.cellDarkAltColAsync,
.cellOverAltColAsync,
.cellOverDarkAltColAsync,
.cellSelectedAltColAsync,
.cellSelectedOverAltColAsync,
.cellSelectedDarkAltColAsync,
.cellSelectedOverDarkAltColAsync,
.cellDisabledAltColAsync,
.cellDisabledDarkAltColAsync,
.recordSummaryCellAltColAsync,
.recordSummaryCellDarkAltColAsync,
.recordSummaryCellOverAltColAsync,
.recordSummaryCellOverDarkAltColAsync,
.recordSummaryCellSelectedAltColAsync,
.recordSummaryCellSelectedDarkAltColAsync,
.recordSummaryCellSelectedOverAltColAsync,
.recordSummaryCellSelectedOverDarkAltColAsync,
.recordSummaryCellDisabledAltColAsync,
.recordSummaryCellDisabledDarkAltColAsync {
  background-image: linear-gradient(to right, transparent 0%, #a7e1c1 100%);
  background-size: 250% 100%;
  background-origin: border-box;
  animation: isc-listGrid_cell_bg-move 5s infinite linear;
}

.cellDisabledAsync,
.cellDisabledDarkAsync,
.recordSummaryCellDisabledAsync,
.recordSummaryCellDisabledDarkAsync,
.cellDisabledAltColAsync,
.cellDisabledDarkAltColAsync,
.recordSummaryCellDisabledAltColAsync,
.recordSummaryCellDisabledDarkAltColAsync {
  animation: none;
}

@keyframes isc-listGrid_cell_bg-move {
  0%, 100% {
    background-position: 0%;
  }
  50% {
    background-position: 100%;
  }
}
/* END Async background animation */
