diff --git a/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/beans/GUIExtensibleObject.java b/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/beans/GUIExtensibleObject.java
index fa96e9ea5..8af981b11 100644
--- a/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/beans/GUIExtensibleObject.java
+++ b/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/beans/GUIExtensibleObject.java
@@ -56,7 +56,7 @@ public List<GUIAttribute> getAttributes() {
 	}
 
 	public List<String> getAttributeNames() {
-		return attributes.stream().map(att -> att.getName()).collect(Collectors.toList());
+		return attributes.stream().map(att -> att.getName()).collect(Collectors.toUnmodifiableList());
 	}
 
 	public void setAttributes(List<GUIAttribute> attributes) {
diff --git a/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/beans/GUIIncrementalArchive.java b/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/beans/GUIIncrementalArchive.java
index cb973a38f..299555549 100644
--- a/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/beans/GUIIncrementalArchive.java
+++ b/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/beans/GUIIncrementalArchive.java
@@ -84,7 +84,7 @@ public void setId(long id) {
 	}
 
 	public List<Long> getTemplateIds() {
-		return templates.stream().map(t -> t.getId()).collect(Collectors.toList());
+		return templates.stream().map(t -> t.getId()).collect(Collectors.toUnmodifiableList());
 	}
 
 	public Long getAosManagerId() {
diff --git a/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/controllers/ReadingRequestController.java b/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/controllers/ReadingRequestController.java
index 8fc0fd496..55f3cb2f0 100644
--- a/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/controllers/ReadingRequestController.java
+++ b/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/controllers/ReadingRequestController.java
@@ -80,7 +80,7 @@ public List<GUIReadingRequest> getUnconfirmedReadings(long docId) {
 	public List<Long> getUnconfirmedReadingIds(long docId) {
 		List<Long> readingIds = new ArrayList<>();
 		if (isReadingConfirmRequired(docId)) {
-			readingIds = unconfirmedReadings.get(docId).stream().map(r -> r.getId()).collect(Collectors.toList());
+			readingIds = unconfirmedReadings.get(docId).stream().map(r -> r.getId()).collect(Collectors.toUnmodifiableList());
 		}
 		return readingIds;
 	}
diff --git a/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/log/EventPanel.java b/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/log/EventPanel.java
index 418f16d60..bcd683078 100644
--- a/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/log/EventPanel.java
+++ b/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/log/EventPanel.java
@@ -119,4 +119,29 @@ public void info(String message, String detail) {
 	public void cleanLabel() {
 		statusLabel.setContents("");
 	}
+
+	@Override
+	public int hashCode() {
+		final int prime = 31;
+		int result = super.hashCode();
+		result = prime * result + ((statusLabel == null) ? 0 : statusLabel.hashCode());
+		return result;
+	}
+
+	@Override
+	public boolean equals(Object obj) {
+		if (this == obj)
+			return true;
+		if (!super.equals(obj))
+			return false;
+		if (getClass() != obj.getClass())
+			return false;
+		EventPanel other = (EventPanel) obj;
+		if (statusLabel == null) {
+			if (other.statusLabel != null)
+				return false;
+		} else if (!statusLabel.equals(other.statusLabel))
+			return false;
+		return true;
+	}
 }
\ No newline at end of file
diff --git a/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/log/MessagesWindow.java b/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/log/MessagesWindow.java
index c260a1c6d..a7c9ceb8f 100644
--- a/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/log/MessagesWindow.java
+++ b/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/log/MessagesWindow.java
@@ -93,4 +93,29 @@ public void addEvent(GUIEvent event) {
 	public static MessagesWindow get() {
 		return instance;
 	}
+
+	@Override
+	public int hashCode() {
+		final int prime = 31;
+		int result = super.hashCode();
+		result = prime * result + ((grid == null) ? 0 : grid.hashCode());
+		return result;
+	}
+
+	@Override
+	public boolean equals(Object obj) {
+		if (this == obj)
+			return true;
+		if (!super.equals(obj))
+			return false;
+		if (getClass() != obj.getClass())
+			return false;
+		MessagesWindow other = (MessagesWindow) obj;
+		if (grid == null) {
+			if (other.grid != null)
+				return false;
+		} else if (!grid.equals(other.grid))
+			return false;
+		return true;
+	}
 }
\ No newline at end of file
diff --git a/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/util/ItemFactory.java b/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/util/ItemFactory.java
index 65b742495..02e9574d3 100644
--- a/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/util/ItemFactory.java
+++ b/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/util/ItemFactory.java
@@ -2026,7 +2026,7 @@ public static TextAreaItem newTextAreaItemForAutomation(String name, String valu
 	private static void appendAutomationEditorIcon(FormItem item, ChangedHandler handler, boolean withHtmlEditor) {
 		FormItemIcon editAutomation = new FormItemIcon();
 		editAutomation.setName("editautomation");
-		editAutomation.setSrc("[SKIN]/java.png");
+		editAutomation.setSrc("[SKIN]/java.svg");
 		editAutomation.setPrompt(I18N.message("openautomationeditor"));
 		editAutomation.addFormItemClickHandler(click -> new AutomationItemEditor(item, handler).show());
 
diff --git a/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/widgets/Avatar.java b/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/widgets/Avatar.java
index 12f608b80..8e9e5c68f 100644
--- a/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/widgets/Avatar.java
+++ b/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/widgets/Avatar.java
@@ -186,4 +186,26 @@ public void onSuccess(Void result) {
 			});
 		}
 	}
-}
+
+	@Override
+	public int hashCode() {
+		final int prime = 31;
+		int result = super.hashCode();
+		result = prime * result + (int) (userId ^ (userId >>> 32));
+		return result;
+	}
+
+	@Override
+	public boolean equals(Object obj) {
+		if (this == obj)
+			return true;
+		if (!super.equals(obj))
+			return false;
+		if (getClass() != obj.getClass())
+			return false;
+		Avatar other = (Avatar) obj;
+		if (userId != other.userId)
+			return false;
+		return true;
+	}
+}
\ No newline at end of file
diff --git a/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/widgets/CronExpressionComposer.java b/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/widgets/CronExpressionComposer.java
index 612ad3a7b..b4201070f 100644
--- a/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/widgets/CronExpressionComposer.java
+++ b/logicaldoc-gui/src/main/java/com/logicaldoc/gui/common/client/widgets/CronExpressionComposer.java
@@ -633,4 +633,29 @@ private void generateHourly() {
 			vm.getItem(EXPRESSION).setValue("0 " + m + " " + h + DEFAULT_CRON_END_EXPRESSION);
 		}
 	}
+
+	@Override
+	public int hashCode() {
+		final int prime = 31;
+		int result = super.hashCode();
+		result = prime * result + ((sourceItem == null) ? 0 : sourceItem.hashCode());
+		return result;
+	}
+
+	@Override
+	public boolean equals(Object obj) {
+		if (this == obj)
+			return true;
+		if (!super.equals(obj))
+			return false;
+		if (getClass() != obj.getClass())
+			return false;
+		CronExpressionComposer other = (CronExpressionComposer) obj;
+		if (sourceItem == null) {
+			if (other.sourceItem != null)
+				return false;
+		} else if (!sourceItem.equals(other.sourceItem))
+			return false;
+		return true;
+	}
 }
\ No newline at end of file
diff --git a/logicaldoc-gui/src/main/java/com/logicaldoc/gui/frontend/client/impex/archives/IncrementalSettingsPanel.java b/logicaldoc-gui/src/main/java/com/logicaldoc/gui/frontend/client/impex/archives/IncrementalSettingsPanel.java
index 826f7db7a..fd3787cbf 100644
--- a/logicaldoc-gui/src/main/java/com/logicaldoc/gui/frontend/client/impex/archives/IncrementalSettingsPanel.java
+++ b/logicaldoc-gui/src/main/java/com/logicaldoc/gui/frontend/client/impex/archives/IncrementalSettingsPanel.java
@@ -69,7 +69,7 @@ public IncrementalSettingsPanel(GUIIncrementalArchive incremental, ChangedHandle
 		templates = ItemFactory.newTemplateSelector(false, null);
 		templates.addChangedHandler(changedHandler);
 		templates.setValues(incremental.getTemplateIds().stream().map(id -> Long.toString(id))
-				.collect(Collectors.toList()).toArray(new String[0]));
+				.collect(Collectors.toUnmodifiableList()).toArray(new String[0]));
 
 		form.setFields(prefix, frequency, folderSelector, templates);
 
diff --git a/logicaldoc-gui/src/main/java/com/logicaldoc/gui/frontend/client/reports/LastChangesReport.java b/logicaldoc-gui/src/main/java/com/logicaldoc/gui/frontend/client/reports/LastChangesReport.java
index 9ee176781..9e3a9980a 100644
--- a/logicaldoc-gui/src/main/java/com/logicaldoc/gui/frontend/client/reports/LastChangesReport.java
+++ b/logicaldoc-gui/src/main/java/com/logicaldoc/gui/frontend/client/reports/LastChangesReport.java
@@ -4,7 +4,6 @@
 import java.util.Arrays;
 import java.util.Date;
 import java.util.List;
-import java.util.Map;
 
 import com.google.gwt.user.client.rpc.AsyncCallback;
 import com.logicaldoc.gui.common.client.Feature;
@@ -306,43 +305,38 @@ public void onDraw() {
 	 * @return an array of select items
 	 */
 	public SelectItem[] getEventTypes() {
-		List<SelectItem> items = new ArrayList<>();
-		return items.toArray(new SelectItem[0]);
+		return new ArrayList<>().toArray(new SelectItem[0]);
 	}
 
-	@SuppressWarnings("unchecked")
 	private void onSearch() {
 		histories.setData();
-
-		final Map<String, Object> values = vm.getValues();
-
 		if (Boolean.FALSE.equals(vm.validate()))
 			return;
 
-		List<String> eventValues = getEvents(values);
+		List<String> eventValues = getEvents();
 
-		Long userId = getUserId(values);
+		Long userId = getUserId();
 
 		Date fromValue = null;
-		if (values.get(FROM_DATE) != null)
-			fromValue = (Date) values.get(FROM_DATE);
+		if (vm.getValue(FROM_DATE) != null)
+			fromValue = (Date) vm.getValue(FROM_DATE);
 		Date tillValue = null;
-		if (values.get(TILL_DATE) != null)
-			tillValue = (Date) values.get(TILL_DATE);
+		if (vm.getValue(TILL_DATE) != null)
+			tillValue = (Date) vm.getValue(TILL_DATE);
 
 		String sid = null;
-		if (values.get("sid") != null)
-			sid = (String) values.get("sid");
+		if (vm.getValue("sid") != null)
+			sid = vm.getValueAsString("sid");
 
-		int displayMaxValue = getDisplayMax(values);
+		int displayMaxValue = getDisplayMax();
 
 		doSearch(eventValues, userId, fromValue, tillValue, sid, displayMaxValue);
 	}
 
-	private List<String> getEvents(final Map<String, Object> values) {
+	private List<String> getEvents() {
 		String[] eventValues = new String[0];
-		if (values.get(EVENT) != null) {
-			String buf = values.get(EVENT).toString().trim().toLowerCase();
+		if (vm.getValue(EVENT) != null) {
+			String buf = vm.getValueAsString(EVENT).trim().toLowerCase();
 			buf = buf.replace('[', ' ');
 			buf = buf.replace(']', ' ');
 			buf = buf.replace(" ", "");
@@ -351,24 +345,24 @@ private List<String> getEvents(final Map<String, Object> values) {
 		return Arrays.asList(eventValues);
 	}
 
-	private Long getUserId(final Map<String, Object> values) {
+	private Long getUserId() {
 		Long userId = null;
-		if (values.get("user") != null) {
-			if (values.get("user") instanceof Long longVal)
+		if (vm.getValue("user") != null) {
+			if (vm.getValue("user") instanceof Long longVal)
 				userId = longVal;
 			else
-				userId = Long.parseLong(values.get("user").toString());
+				userId = Long.parseLong(vm.getValueAsString("user"));
 		}
 		return userId;
 	}
 
-	private int getDisplayMax(final Map<String, Object> values) {
+	private int getDisplayMax() {
 		int displayMaxValue = 0;
-		if (values.get(DISPLAYMAX) != null) {
-			if (values.get(DISPLAYMAX) instanceof Integer intVal)
+		if (vm.getValue(DISPLAYMAX) != null) {
+			if (vm.getValue(DISPLAYMAX) instanceof Integer intVal)
 				displayMaxValue = intVal;
 			else
-				displayMaxValue = Integer.parseInt((String) values.get(DISPLAYMAX));
+				displayMaxValue = Integer.parseInt(vm.getValueAsString(DISPLAYMAX));
 		}
 		return displayMaxValue;
 	}
diff --git a/logicaldoc-gui/war/footer.jsp b/logicaldoc-gui/war/footer.jsp
index 20ecd77ff..d72d813fc 100644
--- a/logicaldoc-gui/war/footer.jsp
+++ b/logicaldoc-gui/war/footer.jsp
@@ -1,4 +1,6 @@
 <%@ page language="java" contentType="text/html; charset=UTF-8"
 	pageEncoding="UTF-8"%>
 
+	
+	<link REL="STYLESHEET" HREF="<%=MODULE%>/sc/skins/<%=SKIN%>/style.css" TYPE="text/css" />	
 </html>
\ No newline at end of file
diff --git a/logicaldoc-gui/war/frontend.jsp b/logicaldoc-gui/war/frontend.jsp
index a38de391e..556b92966 100644
--- a/logicaldoc-gui/war/frontend.jsp
+++ b/logicaldoc-gui/war/frontend.jsp
@@ -20,7 +20,4 @@
 
 <%@ include file="body.jsp" %>
 
-<!-- Make sure custom stype is last loaded -->
-<link REL="STYLESHEET" HREF="<%=MODULE%>/sc/skins/<%=SKIN%>/style.css" TYPE="text/css" />
-
 <%@ include file="footer.jsp" %>
diff --git a/logicaldoc-gui/war/header.jsp b/logicaldoc-gui/war/header.jsp
index 01248cfa0..107da250d 100644
--- a/logicaldoc-gui/war/header.jsp
+++ b/logicaldoc-gui/war/header.jsp
@@ -127,7 +127,6 @@ body {
 
 <link href="./fontawesome/css/all.min.css" rel="stylesheet">
 
-<link REL="STYLESHEET" HREF="<%=MODULE%>/sc/skins/<%=SKIN%>/style.css" TYPE="text/css" />
 <link id="favicon" rel="shortcut icon" type="image/png" href='' />
 <script type="text/javascript">		
 	// Determine what skin file to load
diff --git a/logicaldoc-gui/war/skin-Shiva/style.css b/logicaldoc-gui/war/skin-Shiva/style.css
index 15c796269..164b8b845 100644
--- a/logicaldoc-gui/war/skin-Shiva/style.css
+++ b/logicaldoc-gui/war/skin-Shiva/style.css
@@ -486,393 +486,5354 @@
 /* 
  * Shiva overrides 
  */
+ 
+/*
+ * Color replacements:
+ * 
+ * #3db271 => #3d97b2
+ * #78a380 => #789ea3
+ * #96b89d => #96b8b6
+ * #5e8a66 => #5e8a8a
+ * #3f5c45 => #3f5c5a
+ * #354d39 => #354d4c
+ * #38a37e => #3881a3
+ * /
+ 
+
+@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/RobotoLight/Roboto-Light-Vivid.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+/*
+.recordEditorCell table[class^="textItemLite"],
+.recordEditorCell input[class^="textItemLite"],
+.recordEditorCell table[class^="selectItemLiteControl"],
+.recordEditorCell input[class^="selectItemLiteControl"],
+.recordEditorCell table[class^="gridActionButton"],
+.recordEditorCell input[class^="gridActionButton"],
+.recordEditorCell td[class^="gridActionButton"],
+.recordEditorCellAltCol table[class^="textItemLite"],
+.recordEditorCellAltCol input[class^="textItemLite"],
+.recordEditorCellAltCol table[class^="selectItemLiteControl"],
+.recordEditorCellAltCol input[class^="selectItemLiteControl"],
+.recordEditorCellAltCol table[class^="gridActionButton"],
+.recordEditorCellAltCol input[class^="gridActionButton"],
+.recordEditorCellAltCol td[class^="gridActionButton"] {
+    border: 0px;
+    border-right: $formItem_border;
+    border-radius: 0px;
+}
+*/
+/*============================================================
+	"Flat" theme CSS styles
+	Copyright 2001 and beyond, Isomorphic Software
 
-.button, .button:hover, .buttonOver, .buttonFocused, .buttonFocusedOver, .buttonDown, .buttonFocusedDown, .buttonSelected, .buttonSelectedFocused, .buttonSelectedDown, .buttonSelectedFocusedDown, .buttonSelectedOver, .buttonSelectedFocusedOver, .buttonDisabled, .buttonSelectedDisabled, .buttonDeselectedDisabled {
-	background-color: transparent;
-	border: medium;
-	border-radius: 2px;
-	padding: 0px 5px;
-	vertical-align: middle;
-	outline: 0px;
-	color: rgb(255, 255, 255);
-	font-size: 11px;
-	font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
-	font-weight: normal;
-	opacity: 1;
-	background-size: 100%;
-	background-image: linear-gradient(#3d7bb2 0%, #2d5e8a 100%);
-	transition: opacity 0.2s;
+	:: 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) TogleeSwitch
+	------------
+	internal/unused styles
+============================================================*/
+/*============================================================
+	1) General
+============================================================*/
+[data-isc-overflow-style="none"] {
+  -ms-overflow-style: none;
 }
 
-.tabButtonTopSelected {
-	font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
-	color: rgb(0, 173, 213);
-	background-color: transparent;
-	border-width: 0px 3px;
-	border-style: solid;
-	border-color: rgb(167, 236, 252) rgb(61, 123, 178) #4788b800;
-	opacity: 1;
-	border-image: 1 100%;
+[data-isc-overflow-style="none"]::-webkit-scrollbar {
+  display: none;
 }
 
-.tabButtonTopOver {
-  color: #9ac9ed;
-  background-color: transparent;
-  border: 3px solid #a7cae1;
-  border-bottom: 0px solid transparent;
-  border-top: 0px solid #a7cae1;
-  opacity: 0.9;
-  transition: color 0.2s, background-color, opacity;
-  -moz-box-shadow: none;
-  -webkit-box-shadow: none;
-  box-shadow: none;
+/* tweak the builtin browser focus-outline - make it 1px and the same color as focused formItems */
+*:focus {
+  outline-color: #3db271;
+  outline-radius: 0px;
 }
 
-.tabButtonTopSelected {
-	font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
-	color: #1b91c0;
-	background-color: transparent;
-	border: 3px solid #2e9bc6;
-	border-bottom: 0px solid transparent;
-	border-top: 0px solid #2e9bc6;
-	opacity: 1;
-	border-image: none 1 100%;
+/*custom hr*/
+hr {
+  border: none;
+  border-top: 1px solid #d0d0d0;
+  color: #d0d0d0;
+  margin: 0px;
 }
 
-.tabButtonTopSelectedOver {
+ol,
+ul {
+  -webkit-text-size-adjust: 100%;
+}
+
+.pageBackground {
+  background-color: #ffffff;
+  color: #444444;
   font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
-  color: #9ac9ed;
+  font-size: 11px;
+}
+
+/* default text */
+.normal,
+.normalFocused,
+.normalDisabled {
   background-color: transparent;
-  border: 3px solid #a7c4e1;
-  border-bottom: 0px solid transparent;
-  border-top: 0px solid #a7e1c1;
-  border-image: none 1 100%;
-  -moz-box-shadow: none;
-  -webkit-box-shadow: none;
-  box-shadow: none;
+  color: #444444;
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  font-size: 12px;
 }
 
-.treeConnectorSvg, .treeConnectorSvgOver, .treeConnectorSvgDown, .treeConnectorSvgSelected, .treeConnectorSvgDisabled {
-	color: rgb(59, 111, 178);
-	fill: rgb(224, 224, 224);
+.normalDisabled {
+  color: #ababab;
 }
 
-.tabButtonTopSelectedFocused {
-  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
-  color: #9ac9ed;
+body {
   background-color: transparent;
-  border: 3px solid #3d7bb2;
-  border-bottom: 0px solid transparent;
-  border-top: 0px solid #a7e1c1;
 }
 
-.tabButtonTopFocused {
-  color: #9ac9ed;
-  background-color: transparent;
-  border: 3px solid #3d7bb2;
-  border-bottom: 0px solid transparent;
-  border-top: 0px solid #a7e1c1;
+.defaultBorder {
+  border: 1px solid #d0d0d0;
 }
 
-.tabButtonTopFocusedOver {
-  color: #9ac9ed;
-  background-color: transparent;
-  border: 3px solid #3d7bb2;
-  border-bottom: 0px solid transparent;
-  border-top: 0px solid #a7e1c1;
-  -moz-box-shadow: none;
-  -webkit-box-shadow: none;
-  box-shadow: none;
+/* drag outline */
+.dragOutline {
+  border: 2px dashed #3d97b2;
 }
 
-.tabButtonTopSelectedFocusedOver {
-  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
-  color: #9ac9ed;
-  background-color: transparent;
-  border: 3px solid #3d7bb2;
-  border-bottom: 0px solid transparent;
-  border-top: 0px solid #a7e1c1;
-  border-image: none 1 100%;
-  -moz-box-shadow: none;
-  -webkit-box-shadow: none;
-  box-shadow: none;
+/* drop indicator */
+.dropBorder {
+  background-color: #808080;
 }
 
-.tabButtonTopDown {
+/* hover canvas  */
+.canvasHover,
+.gridHover,
+.formHover,
+.asyncErrorHover {
+  background-color: #ffffff;
+  color: #444444;
   font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
-  color: #9ac9ed;
-  background-color: transparent;
-  border: 3px solid #3d7bb2;
-  border-bottom: 0px solid transparent;
-  border-top: 0px solid #a7e1c1;
+  font-size: 11px;
+  padding: 8px 12px 8px 12px;
+  border: 1px solid #3d97b2;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
+  transition: none;
 }
 
-.tabButtonTopSelectedDown {
+.asyncErrorHover {
+  border-color: #e34e42;
+}
+
+.largeHover {
+  background-color: #3a4a53;
+  color: #ffffff;
   font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
-  color: #9ac9ed;
-  background-color: transparent;
-  border: 3px solid #3d7bb2;
-  border-bottom: 0px solid transparent;
-  border-top: 0px solid #a7e1c1;
+  font-size: 14px;
+  padding: 10px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-box-shadow: 0 0 5px #3a4a53;
+  -webkit-box-shadow: 0 0 5px #3a4a53;
+  box-shadow: 0 0 5px #3a4a53;
 }
 
-.tabButtonTopFocusedDown {
+.hoverPinLabel {
+  background-color: #3a4a53;
+  color: #ffffff;
   font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
-  color: #9ac9ed;
-  background-color: transparent;
-  border: 3px solid #3d7bb2;
-  border-bottom: 0px solid transparent;
-  border-top: 0px solid #a7e1c1;
+  font-size: 11px;
+  padding: 10px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+  -moz-box-shadow: 0 0 5px #3a4a53;
+  -webkit-box-shadow: 0 0 5px #3a4a53;
+  box-shadow: 0 0 5px #3a4a53;
 }
 
-.tabButtonTopSelectedFocusedDown {
+/* group label */
+.groupLabel {
+  background-color: #ffffff;
+  color: #444444;
+  border: none;
   font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
-  color: #9ac9ed;
-  background-color: transparent;
-  border: 3px solid #3d7bb2;
-  border-bottom: 0px solid transparent;
-  border-top: 0px solid #a7e1c1;
+  font-size: 11px;
+  padding: 0px 5px 0px 5px;
 }
 
-.headerBar {
-	background-color: transparent;
-	background-size: 100%;
-	background-image: linear-gradient(rgb(255, 255, 255) 0%, rgb(246, 248, 250) 100%);
-	border-top: 2px solid rgb(61, 123, 178);
-	border-bottom: 2px solid rgb(56, 118, 163);
-	border-radius: 0px;
+/* canvas pointer */
+.pointerUp {
+  width: 0;
+  height: 0;
+  border-left: 15px solid transparent;
+  border-right: 14px solid transparent;
+  border-bottom: 29px solid #ffffff;
 }
 
-.svgCheckbox {
-  color: #3d7bb2;
-  transition: color, background-color 0.1s ease-in-out;
+.pointerDown {
+  width: 0;
+  height: 0;
+  border-left: 15px solid transparent;
+  border-right: 14px solid transparent;
+  border-top: 29px solid #ffffff;
 }
 
-.svgRadio {
-  color: #3d7bb2;
-  transition: color, background-color 0.1s ease-in-out;
+.pointerRight {
+  width: 0;
+  height: 0;
+  border-top: 15px solid transparent;
+  border-bottom: 14px solid transparent;
+  border-left: 29px solid #ffffff;
 }
 
-.toggleSwitchOn {
-  border: 1px solid #cdd5db;
-  background-color: #3d7bb2;
+.pointerLeft {
+  width: 0;
+  height: 0;
+  border-top: 15px solid transparent;
+  border-bottom: 14px solid transparent;
+  border-right: 29px solid #ffffff;
 }
 
-.dialogHeader,
-.dialogHeaderHilite {
-  padding: 0px;
-  background-color: #3d7bb2;
-  background-image: linear-gradient(to bottom, #3d7bb2 0%, #2d5e8a 100%);
+/* 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 {
+  outline: none;
+  vertical-align: middle;
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  font-size: 12.58px;
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
   border-radius: 2px;
-  /* this is necessary to float the ::after separator outside the header and ignore it's radius */
-  position: relative;
+  color: #0000EE;
 }
 
-.windowHeader, 
-.windowHeaderHilite {
-	padding: 0px;
-	background-color: #3d7bb2;
-	background-image: linear-gradient(to bottom, #3d7bb2 0%, #2d5e8a 100%);
-	-moz-border-radius: 2px;
-	-webkit-border-radius: 2px;
-	border-radius: 2px;
-	position: relative;
-	color: #ffffff;
-}
-
-.buttonItem, .buttonItemOver, .buttonItemFocused, .buttonItemFocusedOver, .buttonItemDown, .buttonItemFocusedDown, .buttonItemSelected, .buttonItemSelectedFocused, .buttonItemSelectedDown, .buttonItemSelectedFocusedDown, .buttonItemSelectedOver, .buttonItemSelectedFocusedOver, .buttonItemDisabled, .buttonItemOpened, .buttonItemOverOpened, .buttonItemSelectedDisabled, .buttonItemDeselectedDisabled {
-	background-color: transparent;
-	border: none;
-	-moz-border-radius: 2px;
-	-webkit-border-radius: 2px;
-	border-radius: 2px;
-	padding: 0px 5px;
-	vertical-align: middle;
-	outline: 0px;
-	color: #ffffff;
-	font-size: 12.58px;
-	font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
-	opacity: 1;
-	background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNkYjI3MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM4YTM3ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-	background-size: 100%;
-	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3d7bb2), color-stop(100%, #2d5e8a));
-	background-image: -moz-linear-gradient(top, #3d7bb2 0%, #2d5e8a 100%);
-	background-image: -webkit-linear-gradient(top, #3d7bb2 0%, #2d5e8a 100%);
-	background-image: linear-gradient(to bottom, #3d7bb2 0%, #2d5e8a 100%);
-	transition: opacity 0.2s;
+.linkDisabled,
+.linkTextDisabled {
+  -webkit-text-fill-color: #ababab;
+  color: #ababab;
 }
 
-.calendarHeaderBar {
-	background-color: transparent;
-	border-right: medium;
-	border-top: 2px solid #3d7bb2;
-	border-bottom: 2px solid #2d5e8a;
+.linkTextOver,
+.linkText:hover {
+  color: #0000EE;
 }
 
-.dateChooserButton,
-.dateChooserButtonOver,
-.dateChooserButtonDown,
-.dateChooserButtonDisabled,
-.dateChooserButtonSelected,
-.dateChooserButtonSelectedOver,
-.dateChooserButtonSelectedDown,
-.dateChooserButtonSelectedDisabled {
-  background-color: #f0f0f0;
-  color: #3d7bb2;
-  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
-  font-size: 11px;
-  font-weight: bold;
-  border: none;
-  transition: background-color 0.2s;
+.linkTextDown,
+.linkText:active {
+  color: #EE0000;
 }
 
-.dateChooserButtonOver,
-.dateChooserButtonDown {
-  color: #3d7bb2;
-  cursor: pointer;
+.linkTextFocused,
+.linkTextFocusedDown,
+.linkText:focus,
+.linkTextFocused:focus,
+.linkTextFocusedDown:focus {
+  color: #EE0000;
 }
 
-.dateChooserBottomButton,
-.dateChooserBottomButtonOver,
-.dateChooserBottomButtonDown,
-.dateChooserBottomButtonDisabled,
-.dateChooserBottomButtonSelected,
-.dateChooserBottomButtonSelectedOver,
-.dateChooserBottomButtonSelectedDown,
-.dateChooserBottomButtonSelectedDisabled {
-  background-color: #f0f0f0;
-  color: #3d7bb2;
-  border: 0px solid #ffffff;
-  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+.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: transparent;
+  border: none;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  padding: 0px 5px;
+  vertical-align: middle;
+  outline: 0px;
+  color: #ffffff;
   font-size: 11px;
-  transition: background-color 0.2s;
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  font-weight: normal;
+  opacity: 1;
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNkYjI3MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM4YTM3ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  background-size: 100%;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3d97b2), color-stop(100%, #3881a3));
+  background-image: -moz-linear-gradient(top, #3d97b2 0%, #3881a3 100%);
+  background-image: -webkit-linear-gradient(top, #3d97b2 0%, #3881a3 100%);
+  background-image: linear-gradient(to bottom, #3d97b2 0%, #3881a3 100%);
+  transition: opacity 0.2s;
 }
 
-.dateChooserFiscalYearCellSelected {
+/* Over styles */
+.button:hover,
+.buttonOver {
   color: #ffffff;
-  background-color: #3d7bb2;
+  background-color: transparent;
+  border: none;
+  opacity: 0.9;
+  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  transition: color 0.2s, background-color, opacity;
 }
 
-.dateChooserWeekCellOver,
-.dateChooserWeekCellDown,
-.dateChooserWeekCellSelectedOver,
-.dateChooserWeekCellSelectedDown {
+/* selected styles */
+.buttonSelected {
   color: #ffffff;
-  background-color: #3d7bb2;
+  background-color: transparent;
+  opacity: 1;
+  border: none;
+  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
 }
 
-.dateChooserWeekCellSelected {
+/* focused styles */
+.buttonFocused,
+.buttonSelectedFocused {
   color: #ffffff;
-  background-color: #3d7bb2;
+  background-color: transparent;
+  opacity: 0.9;
+  border: none;
+  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
 }
 
-.dateChooserWeekdayOver {
-  background-color: #3d7bb2;
+/* focusedOver styles */
+.buttonFocusedOver,
+.buttonSelectedFocusedOver {
   color: #ffffff;
+  background-color: transparent;
+  border: none;
+  opacity: 0.9;
+  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
 }
 
-/* selected/over date-cell styling */
-.dateChooserWeekdaySelectedOver {
-  background-color: #3d7bb2;
+/* Down styles */
+.buttonDown,
+.buttonFocusedDown,
+.buttonSelectedDown,
+.buttonSelectedFocusedDown {
   color: #ffffff;
-  border: 0px solid #3d7bb2;
+  background-color: transparent;
+  border: none;
+  opacity: 0.7;
+  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
+  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
 }
 
-.dateChooserWeekdaySelected,
-.dateChooserWeekdayDown,
-.dateChooserWeekdaySelectedDown {
-  background-color: #3d7bb2;
+/* disabled styles */
+.buttonDisabled,
+.buttonSelectedDisabled {
   color: #ffffff;
+  background-color: #9CD1BF;
+  border: none;
+  opacity: 1;
+  background-image: none;
 }
 
-.dateChooserWeekdaySelected {
-  background-color: #3d7bb2;
+.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: 12.58px;
+  background-color: transparent;
+  border: none;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  padding: 0px 5px;
+  vertical-align: middle;
+  outline: 0px;
+  opacity: 1;
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNkYjI3MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM4YTM3ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  background-size: 100%;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3d97b2), color-stop(100%, #3881a3));
+  background-image: -moz-linear-gradient(top, #3d97b2 0%, #3881a3 100%);
+  background-image: -webkit-linear-gradient(top, #3d97b2 0%, #3881a3 100%);
+  background-image: linear-gradient(to bottom, #3d97b2 0%, #3881a3 100%);
+  transition: opacity 0.2s;
+}
+
+.buttonDeselectedDisabled {
+  color: #a8a8a8;
+  background-color: #9CD1BF;
+  text-decoration: line-through;
+}
+
+/* Over styles */
+.buttonPendingOver,
+.buttonPendingOverOpened {
+  background-color: transparent;
+  border: none;
+  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  opacity: 0.9;
+  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  transition: color 0.2s, background-color, opacity;
+}
+
+/* disabled styles */
+.buttonPendingDisabled,
+.buttonPendingSelectedDisabled {
   color: #ffffff;
-  border: 0px solid #3d7bb2;
+  background-color: #9CD1BF;
+  border: none;
+  opacity: 1;
 }
 
-.dateChooserWeekendOver {
-  background-color: #3d7bb2;
+/* secondary button */
+.secondaryButton,
+.secondaryButtonOver,
+.secondaryButtonFocused,
+.secondaryButtonFocusedOver,
+.secondaryButtonDown,
+.secondaryButtonFocusedDown,
+.secondaryButtonSelected,
+.secondaryButtonSelectedFocused,
+.secondaryButtonSelectedDown,
+.secondaryButtonSelectedFocusedDown,
+.secondaryButtonSelectedOver,
+.secondaryButtonSelectedFocusedOver,
+.secondaryButtonDisabled,
+.secondaryButtonSelectedDisabled,
+.secondaryButtonDeselectedDisabled {
+  background-color: #789ea3;
+  border: 2px solid #789ea3;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  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;
 }
 
-/* selected/over date-cell styling */
-.dateChooserWeekendSelectedOver {
-  background-color: #3d7bb2;
+/* Over styles */
+.secondaryButton:hover,
+.secondaryButtonOver {
   color: #ffffff;
-  border: 0px solid #3d7bb2;
+  background-color: #96b8b6;
+  border: 2px solid #96b8b6;
+  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  opacity: 1;
+  transition: color 0.2s, background-color, opacity;
 }
 
-.dateChooserWeekendSelected,
-.dateChooserWeekendDown,
-.dateChooserWeekendSelectedDown {
-  background-color: #3d7bb2;
+/* selected styles */
+.secondaryButtonSelected {
   color: #ffffff;
+  background-color: #96b8b6;
+  border: 2px solid #5e8a66;
+  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
+  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
+  opacity: 1;
 }
 
-.dateChooserWeekendSelected {
-  background-color: #3d7bb2;
+/* focused styles */
+.secondaryButtonFocused,
+.secondaryButtonSelectedFocused {
   color: #ffffff;
-  border: 0px solid #3d7bb2;
+  background-color: #5e8a8a;
+  border: 2px solid #5e8a8a;
+  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  opacity: 1;
 }
 
-.dateChooserNavButtonOver,
-.dateChooserNavButtonDown,
-.dateChooserNavButtonFocused,
-.dateChooserNavButtonFocusedOver,
-.dateChooserNavButtonFocusedDown {
-  color: #3d7bb2;
-  background: #f0f0f0;
+/* focusedOver styles */
+.secondaryButtonFocusedOver,
+.secondaryButtonSelectedFocusedOver {
+  color: #ffffff;
+  background-color: #b5ccb9;
+  border: 2px solid #3f5c5a;
+  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  opacity: 1;
 }
 
-.dateChooserNavButtonSelected,
-.dateChooserNavButtonSelectedOver {
-  color: #3d7bb2;
-  background: #f0f0f0;
+/* Down styles */
+.secondaryButtonDown,
+.secondaryButtonFocusedDown,
+.secondaryButtonSelectedDown,
+.secondaryButtonSelectedFocusedDown {
+  color: #ffffff;
+  background-color: #354d4c;
+  border: 2px solid #5e8a8a;
+  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
+  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
+  opacity: 1;
 }
 
-.dateChooserNavButtonSelectedFocused,
-.dateChooserNavButtonSelectedFocusedOver,
-.dateChooserNavButtonSelectedFocusedDown {
-  color: #3d7bb2;
-  background: #f0f0f0;
+/* disabled styles */
+.secondaryButtonDisabled,
+.secondaryButtonSelectedDisabled {
+  color: #ababab;
+  background-color: white;
+  border: 2px solid #dadada;
+  opacity: 1;
+  background-image: none;
 }
 
-.colorPickerHeader,
-.colorPickerHilite {
-  padding: 0px;
-  background-color: #3d7bb2;
-  border-radius: 0px;
+.secondaryButtonDeselectedDisabled {
+  color: #a8a8a8;
+  text-decoration: line-through;
 }
 
-.calendarHeaderBar {
-  background-color: transparent;
-  border-right: none;
-  border-top: 2px solid #3d7bb2;
-  border-bottom: 2px solid #2d5e8ae;
+/* 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: 12.58px;
+  background-color: #789ea3;
+  border: 2px solid #789ea3;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  padding: 0px 5px;
+  vertical-align: middle;
+  outline: 0px;
 }
 
-.calMonthDayHeaderSelected,
-.calMonthDayHeaderSelectedDark,
-.calMonthDayHeaderSelectedOver,
-.calMonthDayHeaderSelectedOverDark,
-.calMonthDayHeaderSelectedDisabled {
-  background-color: #7fc1fa;
-  color: #454545;
+.secondaryButtonDeselectedDisabled {
+  color: #a8a8a8;
+  background-color: white;
+  text-decoration: line-through;
 }
 
-.calMonthDayBodySelected,
-.calMonthDayBodySelectedDark,
-.calMonthDayBodySelectedOver,
-.calMonthDayBodySelectedOverDark,
-.calMonthDayBodySelectedDisabled {
-  background-color: #84c3fa;
+/* Over styles */
+.secondaryButtonPendingOver,
+.secondaryButtonPendingOverOpened {
+  background-color: #96b8b6;
+  border: 2px solid #96b8b6;
+  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
 }
 
-.textItemLiteErrorFocused,
-.textItemLiteErrorFocusedRTL,
+/* disabled styles */
+.secondaryButtonPendingDisabled,
+.secondaryButtonPendingSelectedDisabled {
+  color: #ababab;
+  background-color: white;
+  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: transparent;
+  border: none;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  padding: 0px 5px;
+  vertical-align: middle;
+  outline: 0px;
+  color: #ffffff;
+  font-size: 12.58px;
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  opacity: 1;
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNkYjI3MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM4YTM3ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  background-size: 100%;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3d97b2), color-stop(100%, #3881a3));
+  background-image: -moz-linear-gradient(top, #3d97b2 0%, #3881a3 100%);
+  background-image: -webkit-linear-gradient(top, #3d97b2 0%, #3881a3 100%);
+  background-image: linear-gradient(to bottom, #3d97b2 0%, #3881a3 100%);
+  transition: opacity 0.2s;
+}
+
+/* Over styles */
+.buttonItem:hover,
+.buttonItemOver {
+  color: #ffffff;
+  background-color: transparent;
+  border: none;
+  opacity: 0.9;
+  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  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: transparent;
+  border: none;
+  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  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: transparent;
+  border: none;
+  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  opacity: 0.9;
+}
+
+/* Down styles */
+.buttonItemDown,
+.buttonItemFocusedDown,
+.buttonItemSelectedDown,
+.buttonItemSelectedFocusedDown {
+  color: #ffffff;
+  background-color: transparent;
+  border: none;
+  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
+  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
+  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;
+}
+
+.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: 12.58px;
+  padding: 0px;
+}
+
+/*============================================================
+    3) Menus 
+============================================================*/
+.menuBorder {
+  background-color: #ffffff;
+  border: 1px solid #d0d0d0;
+  -moz-box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.03);
+  -webkit-box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.03);
+  box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.03);
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+}
+
+.menuMain,
+.menuMainRTL,
+.menuFill,
+.menuFillRTL {
+  background-repeat: repeat-y;
+  background-attachment: scroll;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  padding: 0px;
+}
+
+.gridBodyAnimated,
+.menuFillAnimated,
+.menuFillRTLAnimated {
+  -moz-transition: -moz-transform 350ms;
+  -o-transition: -o-transform 350ms;
+  -webkit-transition: -webkit-transform 350ms;
+  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%);
+  -webkit-filter: brightness(100%);
+  -moz-filter: brightness(100%);
+  -o-filter: brightness(100%);
+  -ms-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;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  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;
+  -moz-border-radius: 0px;
+  -webkit-border-radius: 0px;
+  border-radius: 0px;
+}
+
+.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 2px;
+  vertical-align: middle;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
+.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: transparent;
+  border: none;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  list-style-type: none;
+  padding: 2px 0px 0px 8px;
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  font-size: 11px;
+  vertical-align: middle;
+  opacity: 1;
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNkYjI3MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM4YTM3ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  background-size: 100%;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3d97b2), color-stop(100%, #3881a3));
+  background-image: -moz-linear-gradient(top, #3d97b2 0%, #3881a3 100%);
+  background-image: -webkit-linear-gradient(top, #3d97b2 0%, #3881a3 100%);
+  background-image: linear-gradient(to bottom, #3d97b2 0%, #3881a3 100%);
+  transition: opacity 0.2s;
+  outline: none;
+}
+
+/* over style */
+.menuButtonOver,
+.menuButtonPendingOver {
+  color: #ffffff;
+  background-color: transparent;
+  border: none;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  opacity: 0.9;
+  transition: color 0.2s, background-color, opacity;
+}
+
+/* focused style */
+.menuButtonFocused,
+.menuButtonPendingFocused {
+  color: #ffffff;
+  background-color: transparent;
+  border: 2px solid #369f65;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  opacity: 0.9;
+}
+
+/* focused over style */
+.menuButtonFocusedOver,
+.menuButtonSelectedOver,
+.menuButtonSelectedFocusedOver {
+  color: #ffffff;
+  background-color: transparent;
+  border: initial;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  opacity: 0.9;
+}
+
+/* down style */
+.menuButtonDown,
+.menuButtonFocusedDown,
+.menuButtonSelectedDown,
+.menuButtonSelectedFocusedDown {
+  color: #ffffff;
+  background-color: transparent;
+  border: initial;
+  opacity: 1;
+}
+
+.menuButtonDown,
+.menuButtonFocusedDown,
+.menuButtonSelected,
+.menuButtonSelectedDown,
+.menuButtonSelectedOver,
+.menuButtonPendingDown,
+.menuButtonPendingFocusedDown,
+.menuButtonPendingFocusedOver,
+.menuButtonPendingSelected,
+.menuButtonPendingSelectedDown,
+.menuButtonPendingSelectedOver {
+  color: #ffffff;
+  background-color: transparent;
+  border: initial;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  outline: none;
+}
+
+/* opened style */
+.menuButtonOpened,
+.menuButtonPendingOpened,
+.menuButtonPendingOverOpened,
+.menuButtonOverOpened,
+.menuButtonDownOpened,
+.menuButtonFocusedOpened,
+.menuButtonFocusedDownOpened,
+.menuButtonFocusedOverOpened,
+.menuButtonSelectedOpened,
+.menuButtonSelectedDownOpened,
+.menuButtonSelectedOverOpened {
+  color: #ffffff;
+  background-color: transparent;
+  border: initial;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  opacity: 1;
+}
+
+/* disabled style */
+.menuButtonDisabled,
+.menuButtonSelectedDisabled,
+.menuButtonPendingDisabled,
+.menuButtonPendingSelectedDisabled {
+  color: #ffffff;
+  background-color: #9CD1BF;
+  border: 2px solid #dadada;
+  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: 2px 0px 0px 8px;
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  font-size: 12px;
+  transition: opacity 0.2s;
+}
+
+.textMenuButtonFocused {
+  color: blue;
+}
+
+.textMenuButtonOver,
+.textMenuButtonFocusedOver,
+.textMenuButtonSelectedOver,
+.textMenuButtonSelectedFocusedOver {
+  color: #3d97b2;
+}
+
+.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;
+  -moz-box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.05);
+  -webkit-box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.05);
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+}
+
+.windowBody {
+  background-color: #ffffff;
+  padding: 0px 2px 2px 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 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: #3d97b2;
+  background-image: linear-gradient(to bottom, #3d97b2 0%, #3881a3 100%);
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  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: transparent;
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  font-size: 11px;
+  padding: 7px;
+}
+
+/* Dialog styles */
+.dialogBackground {
+  border: 1px solid #d0d0d0;
+  background-color: #ffffff;
+  -moz-box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.05);
+  -webkit-box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.05);
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  position: relative;
+}
+
+.dialogBody {
+  background-color: #ffffff;
+  padding: 0px 2px 2px 2px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  font-size: 12px;
+}
+
+.dialogHeader,
+.dialogHeaderHilite {
+  padding: 0px;
+  background-color: #3d97b2;
+  background-image: linear-gradient(to bottom, #3d97b2 0%, #3881a3 100%);
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  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: transparent;
+  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: #3d97b2;
+  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 {
+  -moz-transition: -moz-transform 250ms;
+  -o-transition: -o-transform 250ms;
+  -webkit-transition: -webkit-transform 250ms;
+  transition: transform 250ms;
+}
+
+.splitPaneSidePanelOnScreen,
+.splitPaneSidePanelOnScreenRTL {
+  /* make the slide in transition slightly longer */
+  -moz-transition-duration: 300ms;
+  -o-transition-duration: 300ms;
+  -webkit-transition-duration: 300ms;
+  transition-duration: 300ms;
+}
+
+.splitPanePagedPanelPagesContainerAnimated,
+.navStackPagedPanelPagesContainerAnimated {
+  -moz-transition: -moz-transform 450ms;
+  -o-transition: -o-transform 450ms;
+  -webkit-transition: -webkit-transform 450ms;
+  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;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  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: #3d97b2;
+}
+
+.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, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)) 1 100%;
+  outline: none;
+}
+
+.tabButtonTopOver {
+  color: #3881a3;
+  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;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.tabButtonTopSelected {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  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: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-bottom: 0px solid transparent;
+  border-top: 0px solid #a7e1c1;
+  border-image: none 1 100%;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.tabButtonTopSelectedFocused {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-bottom: 0px solid transparent;
+  border-top: 0px solid #a7e1c1;
+}
+
+.tabButtonTopFocused {
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-bottom: 0px solid transparent;
+  border-top: 0px solid #a7e1c1;
+}
+
+.tabButtonTopFocusedOver {
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-bottom: 0px solid transparent;
+  border-top: 0px solid #a7e1c1;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.tabButtonTopSelectedFocusedOver {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-bottom: 0px solid transparent;
+  border-top: 0px solid #a7e1c1;
+  border-image: none 1 100%;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.tabButtonTopDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-bottom: 0px solid transparent;
+  border-top: 0px solid #a7e1c1;
+}
+
+.tabButtonTopSelectedDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-bottom: 0px solid transparent;
+  border-top: 0px solid #a7e1c1;
+}
+
+.tabButtonTopFocusedDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-bottom: 0px solid transparent;
+  border-top: 0px solid #a7e1c1;
+}
+
+.tabButtonTopSelectedFocusedDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  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, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)) 1 100%;
+  outline: none;
+}
+
+.tabButtonBottomOver {
+  color: #3881a3;
+  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;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.tabButtonBottomSelected {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  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: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-top: 0px solid transparent;
+  border-bottom: 0px solid #a7e1c1;
+  border-image: none 1 100%;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.tabButtonBottomSelectedFocused {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-top: 0px solid transparent;
+  border-bottom: 0px solid #a7e1c1;
+}
+
+.tabButtonBottomFocused {
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-top: 0px solid transparent;
+  border-bottom: 0px solid #a7e1c1;
+}
+
+.tabButtonBottomFocusedOver {
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-top: 0px solid transparent;
+  border-bottom: 0px solid #a7e1c1;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.tabButtonBottomSelectedFocusedOver {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-top: 0px solid transparent;
+  border-bottom: 0px solid #a7e1c1;
+  border-image: none 1 100%;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.tabButtonBottomDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-top: 0px solid transparent;
+  border-bottom: 0px solid #a7e1c1;
+}
+
+.tabButtonBottomSelectedDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-top: 0px solid transparent;
+  border-bottom: 0px solid #a7e1c1;
+}
+
+.tabButtonBottomFocusedDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-top: 0px solid transparent;
+  border-bottom: 0px solid #a7e1c1;
+}
+
+.tabButtonBottomSelectedFocusedDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  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, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)) 100% 1;
+  outline: none;
+}
+
+.tabButtonLeftOver {
+  color: #3881a3;
+  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;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.tabButtonLeftSelected {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  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: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-right: 0px solid transparent;
+  border-left: 0px solid #a7e1c1;
+  border-image: none 100% 1;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.tabButtonLeftSelectedFocused {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-right: 0px solid transparent;
+  border-left: 0px solid #a7e1c1;
+}
+
+.tabButtonLeftFocused {
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-right: 0px solid transparent;
+  border-left: 0px solid #a7e1c1;
+}
+
+.tabButtonLeftFocusedOver {
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-right: 0px solid transparent;
+  border-left: 0px solid #a7e1c1;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.tabButtonLeftSelectedFocusedOver {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-right: 0px solid transparent;
+  border-left: 0px solid #a7e1c1;
+  border-image: none 100% 1;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.tabButtonLeftDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-right: 0px solid transparent;
+  border-left: 0px solid #a7e1c1;
+}
+
+.tabButtonLeftSelectedDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-right: 0px solid transparent;
+  border-left: 0px solid #a7e1c1;
+}
+
+.tabButtonLeftFocusedDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-right: 0px solid transparent;
+  border-left: 0px solid #a7e1c1;
+}
+
+.tabButtonLeftSelectedFocusedDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  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, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)) 100% 1;
+  outline: none;
+}
+
+.tabButtonRightOver {
+  color: #3881a3;
+  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;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.tabButtonRightSelected {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  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: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-left: 0px solid transparent;
+  border-right: 0px solid #a7e1c1;
+  border-image: none 100% 1;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.tabButtonRightSelectedFocused {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-left: 0px solid transparent;
+  border-right: 0px solid #a7e1c1;
+}
+
+.tabButtonRightFocused {
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-left: 0px solid transparent;
+  border-right: 0px solid #a7e1c1;
+}
+
+.tabButtonRightFocusedOver {
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-left: 0px solid transparent;
+  border-right: 0px solid #a7e1c1;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.tabButtonRightSelectedFocusedOver {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-left: 0px solid transparent;
+  border-right: 0px solid #a7e1c1;
+  border-image: none 100% 1;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.tabButtonRightDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-left: 0px solid transparent;
+  border-right: 0px solid #a7e1c1;
+}
+
+.tabButtonRightSelectedDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-left: 0px solid transparent;
+  border-right: 0px solid #a7e1c1;
+}
+
+.tabButtonRightFocusedDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-left: 0px solid transparent;
+  border-right: 0px solid #a7e1c1;
+}
+
+.tabButtonRightSelectedFocusedDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  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, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)) 1 100%;
+  outline: none;
+}
+
+.iconOnlyTabButtonTopOver {
+  color: #3881a3;
+  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;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.iconOnlyTabButtonTopSelected {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  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: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-bottom: 0px solid transparent;
+  border-top: 0px solid #a7e1c1;
+  border-image: none 1 100%;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.iconOnlyTabButtonTopSelectedFocused {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-bottom: 0px solid transparent;
+  border-top: 0px solid #a7e1c1;
+}
+
+.iconOnlyTabButtonTopFocused {
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-bottom: 0px solid transparent;
+  border-top: 0px solid #a7e1c1;
+}
+
+.iconOnlyTabButtonTopFocusedOver {
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-bottom: 0px solid transparent;
+  border-top: 0px solid #a7e1c1;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.iconOnlyTabButtonTopSelectedFocusedOver {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-bottom: 0px solid transparent;
+  border-top: 0px solid #a7e1c1;
+  border-image: none 1 100%;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.iconOnlyTabButtonTopDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-bottom: 0px solid transparent;
+  border-top: 0px solid #a7e1c1;
+}
+
+.iconOnlyTabButtonTopSelectedDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-bottom: 0px solid transparent;
+  border-top: 0px solid #a7e1c1;
+}
+
+.iconOnlyTabButtonTopFocusedDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-bottom: 0px solid transparent;
+  border-top: 0px solid #a7e1c1;
+}
+
+.iconOnlyTabButtonTopSelectedFocusedDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  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, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)) 1 100%;
+  outline: none;
+}
+
+.iconOnlyTabButtonBottomOver {
+  color: #3881a3;
+  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;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.iconOnlyTabButtonBottomSelected {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  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: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-top: 0px solid transparent;
+  border-bottom: 0px solid #a7e1c1;
+  border-image: none 1 100%;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.iconOnlyTabButtonBottomSelectedFocused {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-top: 0px solid transparent;
+  border-bottom: 0px solid #a7e1c1;
+}
+
+.iconOnlyTabButtonBottomFocused {
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-top: 0px solid transparent;
+  border-bottom: 0px solid #a7e1c1;
+}
+
+.iconOnlyTabButtonBottomFocusedOver {
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-top: 0px solid transparent;
+  border-bottom: 0px solid #a7e1c1;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.iconOnlyTabButtonBottomSelectedFocusedOver {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-top: 0px solid transparent;
+  border-bottom: 0px solid #a7e1c1;
+  border-image: none 1 100%;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.iconOnlyTabButtonBottomDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-top: 0px solid transparent;
+  border-bottom: 0px solid #a7e1c1;
+}
+
+.iconOnlyTabButtonBottomSelectedDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-top: 0px solid transparent;
+  border-bottom: 0px solid #a7e1c1;
+}
+
+.iconOnlyTabButtonBottomFocusedDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-top: 0px solid transparent;
+  border-bottom: 0px solid #a7e1c1;
+}
+
+.iconOnlyTabButtonBottomSelectedFocusedDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  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, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)) 100% 1;
+  outline: none;
+}
+
+.iconOnlyTabButtonLeftOver {
+  color: #3881a3;
+  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;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.iconOnlyTabButtonLeftSelected {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  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: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-right: 0px solid transparent;
+  border-left: 0px solid #a7e1c1;
+  border-image: none 100% 1;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.iconOnlyTabButtonLeftSelectedFocused {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-right: 0px solid transparent;
+  border-left: 0px solid #a7e1c1;
+}
+
+.iconOnlyTabButtonLeftFocused {
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-right: 0px solid transparent;
+  border-left: 0px solid #a7e1c1;
+}
+
+.iconOnlyTabButtonLeftFocusedOver {
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-right: 0px solid transparent;
+  border-left: 0px solid #a7e1c1;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.iconOnlyTabButtonLeftSelectedFocusedOver {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-right: 0px solid transparent;
+  border-left: 0px solid #a7e1c1;
+  border-image: none 100% 1;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.iconOnlyTabButtonLeftDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-right: 0px solid transparent;
+  border-left: 0px solid #a7e1c1;
+}
+
+.iconOnlyTabButtonLeftSelectedDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-right: 0px solid transparent;
+  border-left: 0px solid #a7e1c1;
+}
+
+.iconOnlyTabButtonLeftFocusedDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-right: 0px solid transparent;
+  border-left: 0px solid #a7e1c1;
+}
+
+.iconOnlyTabButtonLeftSelectedFocusedDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  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, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)) 100% 1;
+  outline: none;
+}
+
+.iconOnlyTabButtonRightOver {
+  color: #3881a3;
+  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;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.iconOnlyTabButtonRightSelected {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  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: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-left: 0px solid transparent;
+  border-right: 0px solid #a7e1c1;
+  border-image: none 100% 1;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.iconOnlyTabButtonRightSelectedFocused {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-left: 0px solid transparent;
+  border-right: 0px solid #a7e1c1;
+}
+
+.iconOnlyTabButtonRightFocused {
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-left: 0px solid transparent;
+  border-right: 0px solid #a7e1c1;
+}
+
+.iconOnlyTabButtonRightFocusedOver {
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-left: 0px solid transparent;
+  border-right: 0px solid #a7e1c1;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.iconOnlyTabButtonRightSelectedFocusedOver {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-left: 0px solid transparent;
+  border-right: 0px solid #a7e1c1;
+  border-image: none 100% 1;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.iconOnlyTabButtonRightDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-left: 0px solid transparent;
+  border-right: 0px solid #a7e1c1;
+}
+
+.iconOnlyTabButtonRightSelectedDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-left: 0px solid transparent;
+  border-right: 0px solid #a7e1c1;
+}
+
+.iconOnlyTabButtonRightFocusedDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  border-left: 0px solid transparent;
+  border-right: 0px solid #a7e1c1;
+}
+
+.iconOnlyTabButtonRightSelectedFocusedDown {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  color: #3881a3;
+  background-color: transparent;
+  border: 3px solid #3d97b2;
+  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;
+}
+
+/* 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;
+}
+
+.tabButtonLiteLeftOver,
+.tabButtonLiteLeftFocusedOver,
+.tabButtonLiteLeftSelectedOver,
+.tabButtonLiteLeftSelectedFocusedOver {
+  color: #444444;
+  background-color: #3d97b2;
+}
+
+.tabButtonLiteLeftDown,
+.tabButtonLiteLeftFocusedDown,
+.tabButtonLiteLeftSelectedDown,
+.tabButtonLiteLeftSelectedFocusedDown {
+  color: #444444;
+  background-color: #55c580;
+}
+
+.tabButtonLiteLeftFocused,
+.tabButtonLiteLeftSelectedFocused {
+  color: #444444;
+}
+
+.tabButtonLiteLeftSelected {
+  background-color: #55c580;
+}
+
+.tabButtonLiteLeftSelectedFocused {
+  background-color: #55c580;
+}
+
+.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;
+}
+
+.tabButtonLiteRightOver,
+.tabButtonLiteRightFocusedOver,
+.tabButtonLiteRightSelectedOver,
+.tabButtonLiteRightSelectedFocusedOver {
+  color: #444444;
+  background-color: #3d97b2;
+}
+
+.tabButtonLiteRightDown,
+.tabButtonLiteRightFocusedDown,
+.tabButtonLiteRightSelectedDown,
+.tabButtonLiteRightSelectedFocusedDown {
+  color: #444444;
+  background-color: #55c580;
+}
+
+.tabButtonLiteRightFocused,
+.tabButtonLiteRightSelectedFocused {
+  color: #444444;
+}
+
+.tabButtonLiteRightSelected {
+  background-color: #55c580;
+}
+
+.tabButtonLiteRightSelectedFocused {
+  background-color: #55c580;
+}
+
+/*============================================================
+    7) SectionStack and NavigationBar
+============================================================*/
+.sectionStack {
+  border: 1px solid #d0d0d0;
+  border-top: none;
+  background-color: transparent;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+}
+
+.sectionHeaderTitleopened,
+.sectionHeaderTitleclosed {
+  background-color: #f0f0f0;
+  color: #616161;
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  font-size: 12.58px;
+}
+
+.sectionHeaderTitleOveropened,
+.sectionHeaderTitleOverclosed {
+  color: #616161;
+  background-color: #f0f0f0;
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  font-size: 12.58px;
+}
+
+.sectionHeaderTitleDisabledopened,
+.sectionHeaderTitleDisabledclosed {
+  background-color: #f0f0f0;
+  color: #ababab;
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  font-size: 12.58px;
+}
+
+.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: 12.58px;
+  font-weight: bold;
+  border-top: 1px solid #d0d0d0;
+  border-bottom: 1px solid #d0d0d0;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  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;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  outline: none;
+}
+
+.navBarAddedFadeIn {
+  -moz-transition: opacity 225ms 225ms;
+  -o-transition: opacity 225ms 225ms;
+  -webkit-transition: opacity 225ms;
+  -webkit-transition-delay: 225ms;
+  transition: opacity 225ms 225ms;
+}
+
+.navBarRemovedFadeOut {
+  -moz-transition: opacity 225ms;
+  -o-transition: opacity 225ms;
+  -webkit-transition: opacity 225ms;
+  transition: opacity 225ms;
+}
+
+.navBarFadeIn {
+  -moz-transition: opacity 315ms 135ms;
+  -o-transition: opacity 315ms 135ms;
+  -webkit-transition: opacity 315ms;
+  -webkit-transition-delay: 135ms;
+  transition: opacity 315ms 135ms;
+}
+
+.navBarFadeOut {
+  -moz-transition: opacity 315ms;
+  -o-transition: opacity 315ms;
+  -webkit-transition: opacity 315ms;
+  transition: opacity 315ms;
+}
+
+.navBarOldLeftButtonBack {
+  -moz-transition-property: opacity, -moz-transform;
+  -o-transition-property: opacity, -o-transform;
+  -webkit-transition-property: opacity, -webkit-transform;
+  transition-property: opacity, transform;
+  -moz-transition-duration: 180ms, 450ms;
+  -o-transition-duration: 180ms, 450ms;
+  -webkit-transition-duration: 180ms, 450ms;
+  transition-duration: 180ms, 450ms;
+}
+
+.navBarNewLeftButtonBack,
+.navBarNewLeftButtonForward {
+  -moz-transition-property: opacity, -moz-transform;
+  -o-transition-property: opacity, -o-transform;
+  -webkit-transition-property: opacity, -webkit-transform;
+  transition-property: opacity, transform;
+  -moz-transition-duration: 337.5ms, 450ms;
+  -o-transition-duration: 337.5ms, 450ms;
+  -webkit-transition-duration: 337.5ms, 450ms;
+  transition-duration: 337.5ms, 450ms;
+  -moz-transition-delay: 112.5ms, 0ms;
+  -o-transition-delay: 112.5ms, 0ms;
+  -webkit-transition-delay: 112.5ms, 0ms;
+  transition-delay: 112.5ms, 0ms;
+}
+
+.navBarOldLeftButtonForward {
+  -moz-transition-property: opacity, -moz-transform;
+  -o-transition-property: opacity, -o-transform;
+  -webkit-transition-property: opacity, -webkit-transform;
+  transition-property: opacity, transform;
+  -moz-transition-duration: 315ms, 450ms;
+  -o-transition-duration: 315ms, 450ms;
+  -webkit-transition-duration: 315ms, 450ms;
+  transition-duration: 315ms, 450ms;
+}
+
+.navBarOldTitleBack,
+.navBarOldTitleForward {
+  -moz-transition-property: opacity, -moz-transform;
+  -o-transition-property: opacity, -o-transform;
+  -webkit-transition-property: opacity, -webkit-transform;
+  transition-property: opacity, transform;
+  -moz-transition-duration: 180ms, 450ms;
+  -o-transition-duration: 180ms, 450ms;
+  -webkit-transition-duration: 180ms, 450ms;
+  transition-duration: 180ms, 450ms;
+}
+
+.navBarNewTitleBack,
+.navBarNewTitleForward {
+  -moz-transition-property: opacity, -moz-transform;
+  -o-transition-property: opacity, -o-transform;
+  -webkit-transition-property: opacity, -webkit-transform;
+  transition-property: opacity, transform;
+  -moz-transition-duration: 365.625ms, 450ms;
+  -o-transition-duration: 365.625ms, 450ms;
+  -webkit-transition-duration: 365.625ms, 450ms;
+  transition-duration: 365.625ms, 450ms;
+  -moz-transition-delay: 84.375ms, 0ms;
+  -o-transition-delay: 84.375ms, 0ms;
+  -webkit-transition-delay: 84.375ms, 0ms;
+  transition-delay: 84.375ms, 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;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  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;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  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;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  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: 12.58px;
+  background-color: #f0f0f0;
+  padding-left: 0px 0px 0px 10px;
+  font-weight: bold;
+  border-top: 1px solid #d0d0d0;
+  border-bottom: 1px solid #d0d0d0;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  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;
+  -moz-box-shadow: 0 0 5px #f0f0f0;
+  -webkit-box-shadow: 0 0 5px #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: 12.58px;
+  padding: 0px 0px 0px 0px;
+}
+
+/* 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: 12.58px;
+  padding: 0px 0px 0px 0px;
+}
+
+/* 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: 12.58px;
+  padding: 0px 0px 0px 0px;
+}
+
+/* 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: 12.58px;
+  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: 12.58px;
+  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: 12.58px;
+  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: 12.58px;
+}
+
+.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: #5b5b5b;
+  border-color: #3d97b2;
+  background-color: #ffffff;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+.formCellErrorFocusedOver {
+  outline: none;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border: 1px solid #3d97b2;
+}
+
+/* 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: 12.58px;
+  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: 12.58px;
+}
+
+.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: 12.58px;
+}
+
+.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: 12.58px;
+}
+
+.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: $formItem_value_error_color;
+}
+*/
+.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;
+}
+
+/* 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 {
+  margin: 0;
+  background-color: #ffffff;
+  border: 1px solid #cdd5db;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  color: #5b5b5b;
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  font-size: 12.58px;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  -webkit-appearance: none;
+  padding: 0px 6px 0px 6px;
+}
+.pickerSearchBox:-moz-placeholder,
+.pickerSearchBoxRTL:-moz-placeholder,
+.pickerSearchBoxOver:-moz-placeholder,
+.pickerSearchBoxOverRTL:-moz-placeholder,
+.pickerSearchBoxFocused:-moz-placeholder,
+.pickerSearchBoxFocusedRTL:-moz-placeholder,
+.pickerSearchBoxFocusedOver:-moz-placeholder,
+.pickerSearchBoxFocusedOverRTL:-moz-placeholder,
+.pickerSearchBoxDisabled:-moz-placeholder,
+.pickerSearchBoxDisabledRTL:-moz-placeholder,
+.pickerSearchBoxError:-moz-placeholder,
+.pickerSearchBoxErrorRTL:-moz-placeholder,
+.pickerSearchBoxPending:-moz-placeholder,
+.pickerSearchBoxPendingRTL:-moz-placeholder,
+.pickerSearchBoxPendingFocused:-moz-placeholder,
+.pickerSearchBoxPendingFocusedRTL:-moz-placeholder,
+.pickerSearchBoxPendingDisabled:-moz-placeholder,
+.pickerSearchBoxPendingDisabledRTL:-moz-placeholder,
+.pickerSearchBoxPendingError:-moz-placeholder,
+.pickerSearchBoxPendingErrorRTL:-moz-placeholder,
+.pickerSearchBoxHint:-moz-placeholder,
+.pickerSearchBoxHintRTL:-moz-placeholder,
+.pickerSearchBoxDisabledHint:-moz-placeholder,
+.pickerSearchBoxDisabledHintRTL:-moz-placeholder {
+  color: #cccccc;
+  opacity: 1;
+  text-overflow: ellipsis;
+}
+.pickerSearchBox::-moz-placeholder,
+.pickerSearchBoxRTL::-moz-placeholder,
+.pickerSearchBoxOver::-moz-placeholder,
+.pickerSearchBoxOverRTL::-moz-placeholder,
+.pickerSearchBoxFocused::-moz-placeholder,
+.pickerSearchBoxFocusedRTL::-moz-placeholder,
+.pickerSearchBoxFocusedOver::-moz-placeholder,
+.pickerSearchBoxFocusedOverRTL::-moz-placeholder,
+.pickerSearchBoxDisabled::-moz-placeholder,
+.pickerSearchBoxDisabledRTL::-moz-placeholder,
+.pickerSearchBoxError::-moz-placeholder,
+.pickerSearchBoxErrorRTL::-moz-placeholder,
+.pickerSearchBoxPending::-moz-placeholder,
+.pickerSearchBoxPendingRTL::-moz-placeholder,
+.pickerSearchBoxPendingFocused::-moz-placeholder,
+.pickerSearchBoxPendingFocusedRTL::-moz-placeholder,
+.pickerSearchBoxPendingDisabled::-moz-placeholder,
+.pickerSearchBoxPendingDisabledRTL::-moz-placeholder,
+.pickerSearchBoxPendingError::-moz-placeholder,
+.pickerSearchBoxPendingErrorRTL::-moz-placeholder,
+.pickerSearchBoxHint::-moz-placeholder,
+.pickerSearchBoxHintRTL::-moz-placeholder,
+.pickerSearchBoxDisabledHint::-moz-placeholder,
+.pickerSearchBoxDisabledHintRTL::-moz-placeholder {
+  color: #cccccc;
+  opacity: 1;
+  text-overflow: ellipsis;
+}
+.pickerSearchBox:-ms-input-placeholder,
+.pickerSearchBoxRTL:-ms-input-placeholder,
+.pickerSearchBoxOver:-ms-input-placeholder,
+.pickerSearchBoxOverRTL:-ms-input-placeholder,
+.pickerSearchBoxFocused:-ms-input-placeholder,
+.pickerSearchBoxFocusedRTL:-ms-input-placeholder,
+.pickerSearchBoxFocusedOver:-ms-input-placeholder,
+.pickerSearchBoxFocusedOverRTL:-ms-input-placeholder,
+.pickerSearchBoxDisabled:-ms-input-placeholder,
+.pickerSearchBoxDisabledRTL:-ms-input-placeholder,
+.pickerSearchBoxError:-ms-input-placeholder,
+.pickerSearchBoxErrorRTL:-ms-input-placeholder,
+.pickerSearchBoxPending:-ms-input-placeholder,
+.pickerSearchBoxPendingRTL:-ms-input-placeholder,
+.pickerSearchBoxPendingFocused:-ms-input-placeholder,
+.pickerSearchBoxPendingFocusedRTL:-ms-input-placeholder,
+.pickerSearchBoxPendingDisabled:-ms-input-placeholder,
+.pickerSearchBoxPendingDisabledRTL:-ms-input-placeholder,
+.pickerSearchBoxPendingError:-ms-input-placeholder,
+.pickerSearchBoxPendingErrorRTL:-ms-input-placeholder,
+.pickerSearchBoxHint:-ms-input-placeholder,
+.pickerSearchBoxHintRTL:-ms-input-placeholder,
+.pickerSearchBoxDisabledHint:-ms-input-placeholder,
+.pickerSearchBoxDisabledHintRTL:-ms-input-placeholder {
+  color: #cccccc;
+  opacity: 1;
+  text-overflow: ellipsis;
+}
+.pickerSearchBox::-webkit-input-placeholder,
+.pickerSearchBoxRTL::-webkit-input-placeholder,
+.pickerSearchBoxOver::-webkit-input-placeholder,
+.pickerSearchBoxOverRTL::-webkit-input-placeholder,
+.pickerSearchBoxFocused::-webkit-input-placeholder,
+.pickerSearchBoxFocusedRTL::-webkit-input-placeholder,
+.pickerSearchBoxFocusedOver::-webkit-input-placeholder,
+.pickerSearchBoxFocusedOverRTL::-webkit-input-placeholder,
+.pickerSearchBoxDisabled::-webkit-input-placeholder,
+.pickerSearchBoxDisabledRTL::-webkit-input-placeholder,
+.pickerSearchBoxError::-webkit-input-placeholder,
+.pickerSearchBoxErrorRTL::-webkit-input-placeholder,
+.pickerSearchBoxPending::-webkit-input-placeholder,
+.pickerSearchBoxPendingRTL::-webkit-input-placeholder,
+.pickerSearchBoxPendingFocused::-webkit-input-placeholder,
+.pickerSearchBoxPendingFocusedRTL::-webkit-input-placeholder,
+.pickerSearchBoxPendingDisabled::-webkit-input-placeholder,
+.pickerSearchBoxPendingDisabledRTL::-webkit-input-placeholder,
+.pickerSearchBoxPendingError::-webkit-input-placeholder,
+.pickerSearchBoxPendingErrorRTL::-webkit-input-placeholder,
+.pickerSearchBoxHint::-webkit-input-placeholder,
+.pickerSearchBoxHintRTL::-webkit-input-placeholder,
+.pickerSearchBoxDisabledHint::-webkit-input-placeholder,
+.pickerSearchBoxDisabledHintRTL::-webkit-input-placeholder {
+  color: #cccccc;
+  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;
+}
+.pickerSearchBoxDisabled:-moz-placeholder,
+.pickerSearchBoxDisabledRTL:-moz-placeholder,
+.pickerSearchBoxPendingDisabled:-moz-placeholder,
+.pickerSearchBoxPendingDisabledRTL:-moz-placeholder,
+.pickerSearchBoxDisabledHint:-moz-placeholder,
+.pickerSearchBoxDisabledHintRTL:-moz-placeholder {
+  color: #cccccc;
+  opacity: 1;
+  text-overflow: ellipsis;
+}
+.pickerSearchBoxDisabled::-moz-placeholder,
+.pickerSearchBoxDisabledRTL::-moz-placeholder,
+.pickerSearchBoxPendingDisabled::-moz-placeholder,
+.pickerSearchBoxPendingDisabledRTL::-moz-placeholder,
+.pickerSearchBoxDisabledHint::-moz-placeholder,
+.pickerSearchBoxDisabledHintRTL::-moz-placeholder {
+  color: #cccccc;
+  opacity: 1;
+  text-overflow: ellipsis;
+}
+.pickerSearchBoxDisabled:-ms-input-placeholder,
+.pickerSearchBoxDisabledRTL:-ms-input-placeholder,
+.pickerSearchBoxPendingDisabled:-ms-input-placeholder,
+.pickerSearchBoxPendingDisabledRTL:-ms-input-placeholder,
+.pickerSearchBoxDisabledHint:-ms-input-placeholder,
+.pickerSearchBoxDisabledHintRTL:-ms-input-placeholder {
+  color: #cccccc;
+  opacity: 1;
+  text-overflow: ellipsis;
+}
+.pickerSearchBoxDisabled::-webkit-input-placeholder,
+.pickerSearchBoxDisabledRTL::-webkit-input-placeholder,
+.pickerSearchBoxPendingDisabled::-webkit-input-placeholder,
+.pickerSearchBoxPendingDisabledRTL::-webkit-input-placeholder,
+.pickerSearchBoxDisabledHint::-webkit-input-placeholder,
+.pickerSearchBoxDisabledHintRTL::-webkit-input-placeholder {
+  color: #cccccc;
+  opacity: 1;
+  text-overflow: ellipsis;
+}
+
+.pickerSearchBoxFocused,
+.pickerSearchBoxFocusedRTL,
+.pickerSearchBoxPendingFocused,
+.pickerSearchBoxPendingFocusedRTL {
+  color: #5b5b5b;
+  border-bottom: 1px solid #3d97b2;
+  border-top: 1px solid #3d97b2;
+  -moz-outline-offset: -1;
+}
+
+.pickerSearchBoxFocused,
+.pickerSearchBoxPendingFocused {
+  border-left: 1px solid #3d97b2;
+  border-right: 1px solid #3d97b2;
+}
+
+.pickerSearchBoxFocusedRTL,
+.pickerSearchBoxPendingFocusedRTL {
+  border-right: 1px solid #3d97b2;
+  border-left: 1px solid #3d97b2;
+}
+
+.pickerSearchBoxPending,
+.pickerSearchBoxPendingRTL,
+.pickerSearchBoxPendingFocused,
+.pickerSearchBoxPendingFocusedRTL,
+.pickerSearchBoxPendingError,
+.pickerSearchBoxPendingErrorRTL {
+  color: #0066CC;
+}
+.pickerSearchBoxPending:-moz-placeholder,
+.pickerSearchBoxPendingRTL:-moz-placeholder,
+.pickerSearchBoxPendingFocused:-moz-placeholder,
+.pickerSearchBoxPendingFocusedRTL:-moz-placeholder,
+.pickerSearchBoxPendingError:-moz-placeholder,
+.pickerSearchBoxPendingErrorRTL:-moz-placeholder {
+  color: #0066CC;
+  opacity: 1;
+  text-overflow: ellipsis;
+}
+.pickerSearchBoxPending::-moz-placeholder,
+.pickerSearchBoxPendingRTL::-moz-placeholder,
+.pickerSearchBoxPendingFocused::-moz-placeholder,
+.pickerSearchBoxPendingFocusedRTL::-moz-placeholder,
+.pickerSearchBoxPendingError::-moz-placeholder,
+.pickerSearchBoxPendingErrorRTL::-moz-placeholder {
+  color: #0066CC;
+  opacity: 1;
+  text-overflow: ellipsis;
+}
+.pickerSearchBoxPending:-ms-input-placeholder,
+.pickerSearchBoxPendingRTL:-ms-input-placeholder,
+.pickerSearchBoxPendingFocused:-ms-input-placeholder,
+.pickerSearchBoxPendingFocusedRTL:-ms-input-placeholder,
+.pickerSearchBoxPendingError:-ms-input-placeholder,
+.pickerSearchBoxPendingErrorRTL:-ms-input-placeholder {
+  color: #0066CC;
+  opacity: 1;
+  text-overflow: ellipsis;
+}
+.pickerSearchBoxPending::-webkit-input-placeholder,
+.pickerSearchBoxPendingRTL::-webkit-input-placeholder,
+.pickerSearchBoxPendingFocused::-webkit-input-placeholder,
+.pickerSearchBoxPendingFocusedRTL::-webkit-input-placeholder,
+.pickerSearchBoxPendingError::-webkit-input-placeholder,
+.pickerSearchBoxPendingErrorRTL::-webkit-input-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: 12.58px;
+  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 {
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  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;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+select:focus {
+  outline: none;
+  border-color: #3d97b2;
+  background-color: #ffffff;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+select:hover > focus {
+  border-color: #3d97b2;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  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,
+.selectItemPickerIconError,
+.selectItemPickerIconErrorOver,
+.selectItemPickerIconErrorRTL,
+.selectItemPickerIconErrorOverRTL,
+.selectItemPickerIconErrorFocused,
+.selectItemPickerIconErrorFocusedRTL,
+.selectItemPickerIconErrorFocusedOver,
+.selectItemPickerIconErrorFocusedOverRTL {
+  border-left: none;
+  color: #778D87;
+  outline-width: 0px;
+}
+
+.selectItemPickerIconOver,
+.selectItemPickerIconOverRTL,
+.selectItemPickerIconErrorFocusedOver,
+.selectItemPickerIconErrorFocusedOverRTL {
+  color: #3d97b2;
+}
+
+.selectItemPickerIconDisabled,
+.selectItemPickerIconDisabledRTL {
+  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: 12.58px;
+  padding: 0px 3px;
+  outline: none;
+  text-decoration: none;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  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 */
+.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 {
+  color: #5b5b5b;
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  font-size: 12.58px;
+  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;
+}
+
+.selectItemLiteTextHintError,
+.selectItemLiteTextHintErrorRTL {
+  color: #cccccc;
+}
+
+.selectItemLiteTextPending,
+.selectItemLiteTextPendingRTL,
+.selectItemLiteTextPendingFocused,
+.selectItemLiteTextPendingFocusedRTL,
+.selectItemLiteTextPendingError,
+.selectItemLiteTextPendingErrorRTL,
+.selectItemLiteTextPendingErrorFocused,
+.selectItemLiteTextPendingErrorFocusedRTL {
+  color: #0066CC;
+}
+.selectItemLiteTextPending:-moz-placeholder,
+.selectItemLiteTextPendingRTL:-moz-placeholder,
+.selectItemLiteTextPendingFocused:-moz-placeholder,
+.selectItemLiteTextPendingFocusedRTL:-moz-placeholder,
+.selectItemLiteTextPendingError:-moz-placeholder,
+.selectItemLiteTextPendingErrorRTL:-moz-placeholder,
+.selectItemLiteTextPendingErrorFocused:-moz-placeholder,
+.selectItemLiteTextPendingErrorFocusedRTL:-moz-placeholder {
+  color: #0066CC;
+  opacity: 1;
+  text-overflow: ellipsis;
+}
+.selectItemLiteTextPending::-moz-placeholder,
+.selectItemLiteTextPendingRTL::-moz-placeholder,
+.selectItemLiteTextPendingFocused::-moz-placeholder,
+.selectItemLiteTextPendingFocusedRTL::-moz-placeholder,
+.selectItemLiteTextPendingError::-moz-placeholder,
+.selectItemLiteTextPendingErrorRTL::-moz-placeholder,
+.selectItemLiteTextPendingErrorFocused::-moz-placeholder,
+.selectItemLiteTextPendingErrorFocusedRTL::-moz-placeholder {
+  color: #0066CC;
+  opacity: 1;
+  text-overflow: ellipsis;
+}
+.selectItemLiteTextPending:-ms-input-placeholder,
+.selectItemLiteTextPendingRTL:-ms-input-placeholder,
+.selectItemLiteTextPendingFocused:-ms-input-placeholder,
+.selectItemLiteTextPendingFocusedRTL:-ms-input-placeholder,
+.selectItemLiteTextPendingError:-ms-input-placeholder,
+.selectItemLiteTextPendingErrorRTL:-ms-input-placeholder,
+.selectItemLiteTextPendingErrorFocused:-ms-input-placeholder,
+.selectItemLiteTextPendingErrorFocusedRTL:-ms-input-placeholder {
+  color: #0066CC;
+  opacity: 1;
+  text-overflow: ellipsis;
+}
+.selectItemLiteTextPending::-webkit-input-placeholder,
+.selectItemLiteTextPendingRTL::-webkit-input-placeholder,
+.selectItemLiteTextPendingFocused::-webkit-input-placeholder,
+.selectItemLiteTextPendingFocusedRTL::-webkit-input-placeholder,
+.selectItemLiteTextPendingError::-webkit-input-placeholder,
+.selectItemLiteTextPendingErrorRTL::-webkit-input-placeholder,
+.selectItemLiteTextPendingErrorFocused::-webkit-input-placeholder,
+.selectItemLiteTextPendingErrorFocusedRTL::-webkit-input-placeholder {
+  color: #0066CC;
+  opacity: 1;
+  text-overflow: ellipsis;
+}
+
+.selectItemLiteTextDisabled,
+.selectItemLiteTextDisabledRTL,
+.selectItemLiteTextPendingDisabled,
+.selectItemLiteTextPendingDisabledRTL,
+.selectItemLiteTextDisabledHint,
+.selectItemLiteTextDisabledHintRTL,
+.selectItemLiteTextErrorDisabled,
+.selectItemLiteTextErrorDisabledRTL {
+  -webkit-text-fill-color: #ababab;
+  color: #ababab;
+  background-color: #fafafa;
+}
+.selectItemLiteTextDisabled:-moz-placeholder,
+.selectItemLiteTextDisabledRTL:-moz-placeholder,
+.selectItemLiteTextPendingDisabled:-moz-placeholder,
+.selectItemLiteTextPendingDisabledRTL:-moz-placeholder,
+.selectItemLiteTextDisabledHint:-moz-placeholder,
+.selectItemLiteTextDisabledHintRTL:-moz-placeholder,
+.selectItemLiteTextErrorDisabled:-moz-placeholder,
+.selectItemLiteTextErrorDisabledRTL:-moz-placeholder {
+  -webkit-text-fill-color: #ababab;
+  color: #ababab;
+  opacity: 1;
+  text-overflow: ellipsis;
+}
+.selectItemLiteTextDisabled::-moz-placeholder,
+.selectItemLiteTextDisabledRTL::-moz-placeholder,
+.selectItemLiteTextPendingDisabled::-moz-placeholder,
+.selectItemLiteTextPendingDisabledRTL::-moz-placeholder,
+.selectItemLiteTextDisabledHint::-moz-placeholder,
+.selectItemLiteTextDisabledHintRTL::-moz-placeholder,
+.selectItemLiteTextErrorDisabled::-moz-placeholder,
+.selectItemLiteTextErrorDisabledRTL::-moz-placeholder {
+  -webkit-text-fill-color: #ababab;
+  color: #ababab;
+  opacity: 1;
+  text-overflow: ellipsis;
+}
+.selectItemLiteTextDisabled:-ms-input-placeholder,
+.selectItemLiteTextDisabledRTL:-ms-input-placeholder,
+.selectItemLiteTextPendingDisabled:-ms-input-placeholder,
+.selectItemLiteTextPendingDisabledRTL:-ms-input-placeholder,
+.selectItemLiteTextDisabledHint:-ms-input-placeholder,
+.selectItemLiteTextDisabledHintRTL:-ms-input-placeholder,
+.selectItemLiteTextErrorDisabled:-ms-input-placeholder,
+.selectItemLiteTextErrorDisabledRTL:-ms-input-placeholder {
+  -webkit-text-fill-color: #ababab;
+  color: #ababab;
+  opacity: 1;
+  text-overflow: ellipsis;
+}
+.selectItemLiteTextDisabled::-webkit-input-placeholder,
+.selectItemLiteTextDisabledRTL::-webkit-input-placeholder,
+.selectItemLiteTextPendingDisabled::-webkit-input-placeholder,
+.selectItemLiteTextPendingDisabledRTL::-webkit-input-placeholder,
+.selectItemLiteTextDisabledHint::-webkit-input-placeholder,
+.selectItemLiteTextDisabledHintRTL::-webkit-input-placeholder,
+.selectItemLiteTextErrorDisabled::-webkit-input-placeholder,
+.selectItemLiteTextErrorDisabledRTL::-webkit-input-placeholder {
+  -webkit-text-fill-color: #ababab;
+  color: #ababab;
+  opacity: 1;
+  text-overflow: ellipsis;
+}
+
+.selectItemLiteTextHint,
+.selectItemLiteTextHintRTL {
+  color: #cccccc;
+}
+
+/* SelectItem text */
+.selectItemLiteTextError,
+.selectItemLiteTextErrorRTL,
+.selectItemLiteTextErrorOver,
+.selectItemLiteTextErrorOverRTL,
+.selectItemLiteTextErrorOverHint,
+.selectItemLiteTextErrorOverHintRTL,
+.selectItemLiteTextErrorFocused,
+.selectItemLiteTextErrorFocusedRTL,
+.selectItemLiteTextErrorFocusedHint,
+.selectItemLiteTextErrorFocusedHintRTL,
+.selectItemLiteTextErrorFocusedOver,
+.selectItemLiteTextErrorFocusedOverRTL,
+.selectItemLiteTextErrorFocusedOverHint,
+.selectItemLiteTextErrorFocusedOverHintRTL,
+.selectItemLiteTextErrorHint,
+.selectItemLiteTextErrorHintRTL,
+.selectItemLiteTextErrorDisabled,
+.selectItemLiteTextErrorDisabledRTL {
+  border: none;
+  color: #5b5b5b;
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  font-size: 12.58px;
+  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;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  background-color: #ffffff;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  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 {
+  border: 1px solid #cdd5db;
+  padding: 0px 0px 0px 3px;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  transition: border-color ease-in-out 0.2s, box-shadow ease-in-out 0.2s;
+  background-color: #ffffff;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  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 {
+  border: 1px solid #cdd5db;
+  padding: 0px 0px 0px 3px;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  transition: border-color ease-in-out 0.2s, box-shadow ease-in-out 0.2s;
+  background-color: #ffffff;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+}
+
+/* focused state */
+.textItemLiteErrorFocused,
+.textItemLiteErrorFocusedRTL,
 .textItemLiteErrorFocusedOver,
 .textItemLiteErrorFocusedOverRTL,
 .textItemLiteFocused,
@@ -908,65 +5869,7581 @@
 .textAreaItemLitePendingFocusedOver,
 .textAreaItemLitePendingFocusedOverRTL {
   outline: none;
-  color: #5b5b5b;
-  border-color: #3d7bb2;
+  color: #5b5b5b;
+  border-color: #3d97b2;
+  background-color: #ffffff;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+/* 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,
+.nativeSelectItemOver,
+.nativeSelectItemOverRTL,
+.nativeSelectItemErrorOver,
+.nativeSelectItemErrorOverRTL,
+.nativeSelectItemPendingOver,
+.nativeSelectItemPendingOverRTL,
+.nativeSelectItemPendingFocusedOver,
+.nativeSelectItemPendingFocusedOverRTL {
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border: 1px solid #cdd5db;
+  background-color: #ffffff;
+  color: #5b5b5b;
+}
+
+.selectItemLiteControlFocused,
+.selectItemLiteControlFocusedRTL {
+  outline: none;
+  border-color: #3d97b2;
+}
+
+/* focused over */
+.textItemLiteErrorFocusedOver,
+.textItemLiteErrorFocusedOverRTL,
+.textItemLiteFocusedOver,
+.textItemLiteFocusedOverRTL,
+.textItemLitePendingFocusedOver,
+.textItemLitePendingFocusedOverRTL,
+.textAreaItemLiteFocusedOver,
+.textAreaItemLiteFocusedOverRTL,
+.textAreaItemLiteErrorFocusedOver,
+.textAreaItemLiteErrorFocusedOverRTL,
+.textAreaItemLitePendingFocusedOver,
+.textAreaItemLitePendingFocusedOverRTL,
+.selectItemLiteControlFocusedOver,
+.selectItemLiteControlFocusedOverRTL,
+.selectItemLiteControlPendingFocusedOver,
+.selectItemLiteControlPendingFocusedOverRTL,
+.nativeSelectItemErrorFocusedOver,
+.nativeSelectItemErrorFocusedOverRTL {
+  outline: none;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border: 1px solid #3d97b2;
+}
+
+/* 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;
+}
+.textItemLitePending:-moz-placeholder,
+.textItemLitePendingRTL:-moz-placeholder,
+.textItemLitePendingOver:-moz-placeholder,
+.textItemLitePendingOverRTL:-moz-placeholder,
+.textItemLitePendingFocused:-moz-placeholder,
+.textItemLitePendingFocusedRTL:-moz-placeholder,
+.textItemLitePendingFocusedOver:-moz-placeholder,
+.textItemLitePendingFocusedOverRTL:-moz-placeholder,
+.textItemLitePendingError:-moz-placeholder,
+.textItemLitePendingErrorOver:-moz-placeholder,
+.textItemLitePendingErrorRTL:-moz-placeholder,
+.textItemLitePendingErrorOverRTL:-moz-placeholder,
+.textItemLitePendingErrorFocused:-moz-placeholder,
+.textItemLitePendingErrorFocusedOver:-moz-placeholder,
+.textItemLitePendingErrorFocusedRTL:-moz-placeholder,
+.textItemLitePendingErrorFocusedOverRTL:-moz-placeholder,
+.textAreaItemLitePending:-moz-placeholder,
+.textAreaItemLitePendingRTL:-moz-placeholder,
+.textAreaItemLitePendingOver:-moz-placeholder,
+.textAreaItemLitePendingOverRTL:-moz-placeholder,
+.textAreaItemLitePendingFocused:-moz-placeholder,
+.textAreaItemLitePendingFocusedRTL:-moz-placeholder,
+.textAreaItemLitePendingFocusedOver:-moz-placeholder,
+.textAreaItemLitePendingFocusedOverRTL:-moz-placeholder,
+.textAreaItemLitePendingError:-moz-placeholder,
+.textAreaItemLitePendingErrorOver:-moz-placeholder,
+.textAreaItemLitePendingErrorRTL:-moz-placeholder,
+.textAreaItemLitePendingErrorOverRTL:-moz-placeholder,
+.textAreaItemLitePendingErrorFocused:-moz-placeholder,
+.textAreaItemLitePendingErrorFocusedRTL:-moz-placeholder,
+.textAreaItemLitePendingErrorFocusedOver:-moz-placeholder,
+.textAreaItemLitePendingErrorFocusedOverRTL:-moz-placeholder {
+  color: #0066CC;
+  opacity: 1;
+  text-overflow: ellipsis;
+}
+.textItemLitePending::-moz-placeholder,
+.textItemLitePendingRTL::-moz-placeholder,
+.textItemLitePendingOver::-moz-placeholder,
+.textItemLitePendingOverRTL::-moz-placeholder,
+.textItemLitePendingFocused::-moz-placeholder,
+.textItemLitePendingFocusedRTL::-moz-placeholder,
+.textItemLitePendingFocusedOver::-moz-placeholder,
+.textItemLitePendingFocusedOverRTL::-moz-placeholder,
+.textItemLitePendingError::-moz-placeholder,
+.textItemLitePendingErrorOver::-moz-placeholder,
+.textItemLitePendingErrorRTL::-moz-placeholder,
+.textItemLitePendingErrorOverRTL::-moz-placeholder,
+.textItemLitePendingErrorFocused::-moz-placeholder,
+.textItemLitePendingErrorFocusedOver::-moz-placeholder,
+.textItemLitePendingErrorFocusedRTL::-moz-placeholder,
+.textItemLitePendingErrorFocusedOverRTL::-moz-placeholder,
+.textAreaItemLitePending::-moz-placeholder,
+.textAreaItemLitePendingRTL::-moz-placeholder,
+.textAreaItemLitePendingOver::-moz-placeholder,
+.textAreaItemLitePendingOverRTL::-moz-placeholder,
+.textAreaItemLitePendingFocused::-moz-placeholder,
+.textAreaItemLitePendingFocusedRTL::-moz-placeholder,
+.textAreaItemLitePendingFocusedOver::-moz-placeholder,
+.textAreaItemLitePendingFocusedOverRTL::-moz-placeholder,
+.textAreaItemLitePendingError::-moz-placeholder,
+.textAreaItemLitePendingErrorOver::-moz-placeholder,
+.textAreaItemLitePendingErrorRTL::-moz-placeholder,
+.textAreaItemLitePendingErrorOverRTL::-moz-placeholder,
+.textAreaItemLitePendingErrorFocused::-moz-placeholder,
+.textAreaItemLitePendingErrorFocusedRTL::-moz-placeholder,
+.textAreaItemLitePendingErrorFocusedOver::-moz-placeholder,
+.textAreaItemLitePendingErrorFocusedOverRTL::-moz-placeholder {
+  color: #0066CC;
+  opacity: 1;
+  text-overflow: ellipsis;
+}
+.textItemLitePending:-ms-input-placeholder,
+.textItemLitePendingRTL:-ms-input-placeholder,
+.textItemLitePendingOver:-ms-input-placeholder,
+.textItemLitePendingOverRTL:-ms-input-placeholder,
+.textItemLitePendingFocused:-ms-input-placeholder,
+.textItemLitePendingFocusedRTL:-ms-input-placeholder,
+.textItemLitePendingFocusedOver:-ms-input-placeholder,
+.textItemLitePendingFocusedOverRTL:-ms-input-placeholder,
+.textItemLitePendingError:-ms-input-placeholder,
+.textItemLitePendingErrorOver:-ms-input-placeholder,
+.textItemLitePendingErrorRTL:-ms-input-placeholder,
+.textItemLitePendingErrorOverRTL:-ms-input-placeholder,
+.textItemLitePendingErrorFocused:-ms-input-placeholder,
+.textItemLitePendingErrorFocusedOver:-ms-input-placeholder,
+.textItemLitePendingErrorFocusedRTL:-ms-input-placeholder,
+.textItemLitePendingErrorFocusedOverRTL:-ms-input-placeholder,
+.textAreaItemLitePending:-ms-input-placeholder,
+.textAreaItemLitePendingRTL:-ms-input-placeholder,
+.textAreaItemLitePendingOver:-ms-input-placeholder,
+.textAreaItemLitePendingOverRTL:-ms-input-placeholder,
+.textAreaItemLitePendingFocused:-ms-input-placeholder,
+.textAreaItemLitePendingFocusedRTL:-ms-input-placeholder,
+.textAreaItemLitePendingFocusedOver:-ms-input-placeholder,
+.textAreaItemLitePendingFocusedOverRTL:-ms-input-placeholder,
+.textAreaItemLitePendingError:-ms-input-placeholder,
+.textAreaItemLitePendingErrorOver:-ms-input-placeholder,
+.textAreaItemLitePendingErrorRTL:-ms-input-placeholder,
+.textAreaItemLitePendingErrorOverRTL:-ms-input-placeholder,
+.textAreaItemLitePendingErrorFocused:-ms-input-placeholder,
+.textAreaItemLitePendingErrorFocusedRTL:-ms-input-placeholder,
+.textAreaItemLitePendingErrorFocusedOver:-ms-input-placeholder,
+.textAreaItemLitePendingErrorFocusedOverRTL:-ms-input-placeholder {
+  color: #0066CC;
+  opacity: 1;
+  text-overflow: ellipsis;
+}
+.textItemLitePending::-webkit-input-placeholder,
+.textItemLitePendingRTL::-webkit-input-placeholder,
+.textItemLitePendingOver::-webkit-input-placeholder,
+.textItemLitePendingOverRTL::-webkit-input-placeholder,
+.textItemLitePendingFocused::-webkit-input-placeholder,
+.textItemLitePendingFocusedRTL::-webkit-input-placeholder,
+.textItemLitePendingFocusedOver::-webkit-input-placeholder,
+.textItemLitePendingFocusedOverRTL::-webkit-input-placeholder,
+.textItemLitePendingError::-webkit-input-placeholder,
+.textItemLitePendingErrorOver::-webkit-input-placeholder,
+.textItemLitePendingErrorRTL::-webkit-input-placeholder,
+.textItemLitePendingErrorOverRTL::-webkit-input-placeholder,
+.textItemLitePendingErrorFocused::-webkit-input-placeholder,
+.textItemLitePendingErrorFocusedOver::-webkit-input-placeholder,
+.textItemLitePendingErrorFocusedRTL::-webkit-input-placeholder,
+.textItemLitePendingErrorFocusedOverRTL::-webkit-input-placeholder,
+.textAreaItemLitePending::-webkit-input-placeholder,
+.textAreaItemLitePendingRTL::-webkit-input-placeholder,
+.textAreaItemLitePendingOver::-webkit-input-placeholder,
+.textAreaItemLitePendingOverRTL::-webkit-input-placeholder,
+.textAreaItemLitePendingFocused::-webkit-input-placeholder,
+.textAreaItemLitePendingFocusedRTL::-webkit-input-placeholder,
+.textAreaItemLitePendingFocusedOver::-webkit-input-placeholder,
+.textAreaItemLitePendingFocusedOverRTL::-webkit-input-placeholder,
+.textAreaItemLitePendingError::-webkit-input-placeholder,
+.textAreaItemLitePendingErrorOver::-webkit-input-placeholder,
+.textAreaItemLitePendingErrorRTL::-webkit-input-placeholder,
+.textAreaItemLitePendingErrorOverRTL::-webkit-input-placeholder,
+.textAreaItemLitePendingErrorFocused::-webkit-input-placeholder,
+.textAreaItemLitePendingErrorFocusedRTL::-webkit-input-placeholder,
+.textAreaItemLitePendingErrorFocusedOver::-webkit-input-placeholder,
+.textAreaItemLitePendingErrorFocusedOverRTL::-webkit-input-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,
+.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;
+}
+.textItemLiteDisabled:-moz-placeholder,
+.textItemLiteDisabledRTL:-moz-placeholder,
+.textItemLitePendingDisabled:-moz-placeholder,
+.textItemLitePendingDisabledRTL:-moz-placeholder,
+.textItemLiteDisabledHint:-moz-placeholder,
+.textItemLiteDisabledHintRTL:-moz-placeholder,
+.textItemLiteErrorDisabled:-moz-placeholder,
+.textItemLiteErrorDisabledRTL:-moz-placeholder,
+.textAreaItemLiteDisabled:-moz-placeholder,
+.textAreaItemLiteDisabledRTL:-moz-placeholder,
+.textAreaItemLitePendingDisabled:-moz-placeholder,
+.textAreaItemLitePendingDisabledRTL:-moz-placeholder,
+.textAreaItemLiteDisabledHint:-moz-placeholder,
+.textAreaItemLiteDisabledHintRTL:-moz-placeholder,
+.textAreaItemLiteErrorDisabled:-moz-placeholder,
+.textAreaItemLiteErrorDisabledRTL:-moz-placeholder {
+  -webkit-text-fill-color: #ababab;
+  color: #ababab;
+  opacity: 1;
+  text-overflow: ellipsis;
+}
+.textItemLiteDisabled::-moz-placeholder,
+.textItemLiteDisabledRTL::-moz-placeholder,
+.textItemLitePendingDisabled::-moz-placeholder,
+.textItemLitePendingDisabledRTL::-moz-placeholder,
+.textItemLiteDisabledHint::-moz-placeholder,
+.textItemLiteDisabledHintRTL::-moz-placeholder,
+.textItemLiteErrorDisabled::-moz-placeholder,
+.textItemLiteErrorDisabledRTL::-moz-placeholder,
+.textAreaItemLiteDisabled::-moz-placeholder,
+.textAreaItemLiteDisabledRTL::-moz-placeholder,
+.textAreaItemLitePendingDisabled::-moz-placeholder,
+.textAreaItemLitePendingDisabledRTL::-moz-placeholder,
+.textAreaItemLiteDisabledHint::-moz-placeholder,
+.textAreaItemLiteDisabledHintRTL::-moz-placeholder,
+.textAreaItemLiteErrorDisabled::-moz-placeholder,
+.textAreaItemLiteErrorDisabledRTL::-moz-placeholder {
+  -webkit-text-fill-color: #ababab;
+  color: #ababab;
+  opacity: 1;
+  text-overflow: ellipsis;
+}
+.textItemLiteDisabled:-ms-input-placeholder,
+.textItemLiteDisabledRTL:-ms-input-placeholder,
+.textItemLitePendingDisabled:-ms-input-placeholder,
+.textItemLitePendingDisabledRTL:-ms-input-placeholder,
+.textItemLiteDisabledHint:-ms-input-placeholder,
+.textItemLiteDisabledHintRTL:-ms-input-placeholder,
+.textItemLiteErrorDisabled:-ms-input-placeholder,
+.textItemLiteErrorDisabledRTL:-ms-input-placeholder,
+.textAreaItemLiteDisabled:-ms-input-placeholder,
+.textAreaItemLiteDisabledRTL:-ms-input-placeholder,
+.textAreaItemLitePendingDisabled:-ms-input-placeholder,
+.textAreaItemLitePendingDisabledRTL:-ms-input-placeholder,
+.textAreaItemLiteDisabledHint:-ms-input-placeholder,
+.textAreaItemLiteDisabledHintRTL:-ms-input-placeholder,
+.textAreaItemLiteErrorDisabled:-ms-input-placeholder,
+.textAreaItemLiteErrorDisabledRTL:-ms-input-placeholder {
+  -webkit-text-fill-color: #ababab;
+  color: #ababab;
+  opacity: 1;
+  text-overflow: ellipsis;
+}
+.textItemLiteDisabled::-webkit-input-placeholder,
+.textItemLiteDisabledRTL::-webkit-input-placeholder,
+.textItemLitePendingDisabled::-webkit-input-placeholder,
+.textItemLitePendingDisabledRTL::-webkit-input-placeholder,
+.textItemLiteDisabledHint::-webkit-input-placeholder,
+.textItemLiteDisabledHintRTL::-webkit-input-placeholder,
+.textItemLiteErrorDisabled::-webkit-input-placeholder,
+.textItemLiteErrorDisabledRTL::-webkit-input-placeholder,
+.textAreaItemLiteDisabled::-webkit-input-placeholder,
+.textAreaItemLiteDisabledRTL::-webkit-input-placeholder,
+.textAreaItemLitePendingDisabled::-webkit-input-placeholder,
+.textAreaItemLitePendingDisabledRTL::-webkit-input-placeholder,
+.textAreaItemLiteDisabledHint::-webkit-input-placeholder,
+.textAreaItemLiteDisabledHintRTL::-webkit-input-placeholder,
+.textAreaItemLiteErrorDisabled::-webkit-input-placeholder,
+.textAreaItemLiteErrorDisabledRTL::-webkit-input-placeholder {
+  -webkit-text-fill-color: #ababab;
+  color: #ababab;
+  opacity: 1;
+  text-overflow: ellipsis;
+}
+
+/*  hint text color */
+.textItemLiteHint,
+.textItemLiteHintRTL,
+.textAreaItemLiteHint,
+.textAreaItemLiteHintRTL {
+  color: #cccccc;
+}
+
+.textItemLiteError,
+.textItemLiteErrorRTL,
+.textItemLiteErrorOver,
+.textItemLiteErrorOverRTL,
+.textItemLiteErrorFocused,
+.textItemLiteErrorFocusedRTL,
+.textItemLiteErrorFocusedOver,
+.textItemLiteErrorFocusedOverRTL,
+.textItemLiteErrorDisabled,
+.textItemLiteErrorDisabledRTL,
+.nativeSelectItemLiteError,
+.nativeSelectItemLiteErrorRTL,
+.nativeSelectItemLiteErrorOver,
+.nativeSelectItemLiteErrorOverRTL,
+.nativeSelectItemLiteErrorFocused,
+.nativeSelectItemLiteErrorFocusedRTL,
+.nativeSelectItemLiteErrorFocusedOver,
+.nativeSelectItemLiteErrorFocusedOverRTL,
+.nativeSelectItemLiteErrorDisabled,
+.nativeSelectItemLiteErrorDisabledRTL,
+.textAreaItemLiteError,
+.textAreaItemLiteErrorRTL,
+.textAreaItemLiteErrorOver,
+.textAreaItemLiteErrorOverRTL,
+.textAreaItemLiteErrorFocused,
+.textAreaItemLiteErrorFocusedRTL,
+.textAreaItemLiteErrorFocusedOver,
+.textAreaItemLiteErrorFocusedOverRTL,
+.textAreaItemLiteErrorDisabled,
+.textAreaItemLiteErrorDisabledRTL {
+  color: #5b5b5b;
+}
+.textItemLiteError:-moz-placeholder,
+.textItemLiteErrorRTL:-moz-placeholder,
+.textItemLiteErrorOver:-moz-placeholder,
+.textItemLiteErrorOverRTL:-moz-placeholder,
+.textItemLiteErrorFocused:-moz-placeholder,
+.textItemLiteErrorFocusedRTL:-moz-placeholder,
+.textItemLiteErrorFocusedOver:-moz-placeholder,
+.textItemLiteErrorFocusedOverRTL:-moz-placeholder,
+.textItemLiteErrorDisabled:-moz-placeholder,
+.textItemLiteErrorDisabledRTL:-moz-placeholder,
+.nativeSelectItemLiteError:-moz-placeholder,
+.nativeSelectItemLiteErrorRTL:-moz-placeholder,
+.nativeSelectItemLiteErrorOver:-moz-placeholder,
+.nativeSelectItemLiteErrorOverRTL:-moz-placeholder,
+.nativeSelectItemLiteErrorFocused:-moz-placeholder,
+.nativeSelectItemLiteErrorFocusedRTL:-moz-placeholder,
+.nativeSelectItemLiteErrorFocusedOver:-moz-placeholder,
+.nativeSelectItemLiteErrorFocusedOverRTL:-moz-placeholder,
+.nativeSelectItemLiteErrorDisabled:-moz-placeholder,
+.nativeSelectItemLiteErrorDisabledRTL:-moz-placeholder,
+.textAreaItemLiteError:-moz-placeholder,
+.textAreaItemLiteErrorRTL:-moz-placeholder,
+.textAreaItemLiteErrorOver:-moz-placeholder,
+.textAreaItemLiteErrorOverRTL:-moz-placeholder,
+.textAreaItemLiteErrorFocused:-moz-placeholder,
+.textAreaItemLiteErrorFocusedRTL:-moz-placeholder,
+.textAreaItemLiteErrorFocusedOver:-moz-placeholder,
+.textAreaItemLiteErrorFocusedOverRTL:-moz-placeholder,
+.textAreaItemLiteErrorDisabled:-moz-placeholder,
+.textAreaItemLiteErrorDisabledRTL:-moz-placeholder {
+  color: #5b5b5b;
+  opacity: 1;
+  text-overflow: ellipsis;
+}
+.textItemLiteError::-moz-placeholder,
+.textItemLiteErrorRTL::-moz-placeholder,
+.textItemLiteErrorOver::-moz-placeholder,
+.textItemLiteErrorOverRTL::-moz-placeholder,
+.textItemLiteErrorFocused::-moz-placeholder,
+.textItemLiteErrorFocusedRTL::-moz-placeholder,
+.textItemLiteErrorFocusedOver::-moz-placeholder,
+.textItemLiteErrorFocusedOverRTL::-moz-placeholder,
+.textItemLiteErrorDisabled::-moz-placeholder,
+.textItemLiteErrorDisabledRTL::-moz-placeholder,
+.nativeSelectItemLiteError::-moz-placeholder,
+.nativeSelectItemLiteErrorRTL::-moz-placeholder,
+.nativeSelectItemLiteErrorOver::-moz-placeholder,
+.nativeSelectItemLiteErrorOverRTL::-moz-placeholder,
+.nativeSelectItemLiteErrorFocused::-moz-placeholder,
+.nativeSelectItemLiteErrorFocusedRTL::-moz-placeholder,
+.nativeSelectItemLiteErrorFocusedOver::-moz-placeholder,
+.nativeSelectItemLiteErrorFocusedOverRTL::-moz-placeholder,
+.nativeSelectItemLiteErrorDisabled::-moz-placeholder,
+.nativeSelectItemLiteErrorDisabledRTL::-moz-placeholder,
+.textAreaItemLiteError::-moz-placeholder,
+.textAreaItemLiteErrorRTL::-moz-placeholder,
+.textAreaItemLiteErrorOver::-moz-placeholder,
+.textAreaItemLiteErrorOverRTL::-moz-placeholder,
+.textAreaItemLiteErrorFocused::-moz-placeholder,
+.textAreaItemLiteErrorFocusedRTL::-moz-placeholder,
+.textAreaItemLiteErrorFocusedOver::-moz-placeholder,
+.textAreaItemLiteErrorFocusedOverRTL::-moz-placeholder,
+.textAreaItemLiteErrorDisabled::-moz-placeholder,
+.textAreaItemLiteErrorDisabledRTL::-moz-placeholder {
+  color: #5b5b5b;
+  opacity: 1;
+  text-overflow: ellipsis;
+}
+.textItemLiteError:-ms-input-placeholder,
+.textItemLiteErrorRTL:-ms-input-placeholder,
+.textItemLiteErrorOver:-ms-input-placeholder,
+.textItemLiteErrorOverRTL:-ms-input-placeholder,
+.textItemLiteErrorFocused:-ms-input-placeholder,
+.textItemLiteErrorFocusedRTL:-ms-input-placeholder,
+.textItemLiteErrorFocusedOver:-ms-input-placeholder,
+.textItemLiteErrorFocusedOverRTL:-ms-input-placeholder,
+.textItemLiteErrorDisabled:-ms-input-placeholder,
+.textItemLiteErrorDisabledRTL:-ms-input-placeholder,
+.nativeSelectItemLiteError:-ms-input-placeholder,
+.nativeSelectItemLiteErrorRTL:-ms-input-placeholder,
+.nativeSelectItemLiteErrorOver:-ms-input-placeholder,
+.nativeSelectItemLiteErrorOverRTL:-ms-input-placeholder,
+.nativeSelectItemLiteErrorFocused:-ms-input-placeholder,
+.nativeSelectItemLiteErrorFocusedRTL:-ms-input-placeholder,
+.nativeSelectItemLiteErrorFocusedOver:-ms-input-placeholder,
+.nativeSelectItemLiteErrorFocusedOverRTL:-ms-input-placeholder,
+.nativeSelectItemLiteErrorDisabled:-ms-input-placeholder,
+.nativeSelectItemLiteErrorDisabledRTL:-ms-input-placeholder,
+.textAreaItemLiteError:-ms-input-placeholder,
+.textAreaItemLiteErrorRTL:-ms-input-placeholder,
+.textAreaItemLiteErrorOver:-ms-input-placeholder,
+.textAreaItemLiteErrorOverRTL:-ms-input-placeholder,
+.textAreaItemLiteErrorFocused:-ms-input-placeholder,
+.textAreaItemLiteErrorFocusedRTL:-ms-input-placeholder,
+.textAreaItemLiteErrorFocusedOver:-ms-input-placeholder,
+.textAreaItemLiteErrorFocusedOverRTL:-ms-input-placeholder,
+.textAreaItemLiteErrorDisabled:-ms-input-placeholder,
+.textAreaItemLiteErrorDisabledRTL:-ms-input-placeholder {
+  color: #5b5b5b;
+  opacity: 1;
+  text-overflow: ellipsis;
+}
+.textItemLiteError::-webkit-input-placeholder,
+.textItemLiteErrorRTL::-webkit-input-placeholder,
+.textItemLiteErrorOver::-webkit-input-placeholder,
+.textItemLiteErrorOverRTL::-webkit-input-placeholder,
+.textItemLiteErrorFocused::-webkit-input-placeholder,
+.textItemLiteErrorFocusedRTL::-webkit-input-placeholder,
+.textItemLiteErrorFocusedOver::-webkit-input-placeholder,
+.textItemLiteErrorFocusedOverRTL::-webkit-input-placeholder,
+.textItemLiteErrorDisabled::-webkit-input-placeholder,
+.textItemLiteErrorDisabledRTL::-webkit-input-placeholder,
+.nativeSelectItemLiteError::-webkit-input-placeholder,
+.nativeSelectItemLiteErrorRTL::-webkit-input-placeholder,
+.nativeSelectItemLiteErrorOver::-webkit-input-placeholder,
+.nativeSelectItemLiteErrorOverRTL::-webkit-input-placeholder,
+.nativeSelectItemLiteErrorFocused::-webkit-input-placeholder,
+.nativeSelectItemLiteErrorFocusedRTL::-webkit-input-placeholder,
+.nativeSelectItemLiteErrorFocusedOver::-webkit-input-placeholder,
+.nativeSelectItemLiteErrorFocusedOverRTL::-webkit-input-placeholder,
+.nativeSelectItemLiteErrorDisabled::-webkit-input-placeholder,
+.nativeSelectItemLiteErrorDisabledRTL::-webkit-input-placeholder,
+.textAreaItemLiteError::-webkit-input-placeholder,
+.textAreaItemLiteErrorRTL::-webkit-input-placeholder,
+.textAreaItemLiteErrorOver::-webkit-input-placeholder,
+.textAreaItemLiteErrorOverRTL::-webkit-input-placeholder,
+.textAreaItemLiteErrorFocused::-webkit-input-placeholder,
+.textAreaItemLiteErrorFocusedRTL::-webkit-input-placeholder,
+.textAreaItemLiteErrorFocusedOver::-webkit-input-placeholder,
+.textAreaItemLiteErrorFocusedOverRTL::-webkit-input-placeholder,
+.textAreaItemLiteErrorDisabled::-webkit-input-placeholder,
+.textAreaItemLiteErrorDisabledRTL::-webkit-input-placeholder {
+  color: #5b5b5b;
+  opacity: 1;
+  text-overflow: ellipsis;
+}
+
+/* error */
+.textItemLiteError,
+.textItemLiteErrorRTL,
+.nativeSelectItemLiteError,
+.nativeSelectItemLiteErrorRTL,
+.textAreaItemLiteError,
+.textAreaItemLiteErrorRTL,
+.selectItemLiteControlError,
+.selectItemLiteControlErrorRTL {
+  border: 1px solid #cdd5db;
+}
+
+/* error Over */
+.textItemLiteErrorOver,
+.textItemLiteErrorOverRTL,
+.nativeSelectItemLiteErrorOver,
+.nativeSelectItemLiteErrorOverRTL,
+.textAreaItemLiteErrorOver,
+.textAreaItemLiteErrorOverRTL,
+.selectItemLiteControlErrorOver,
+.selectItemLiteControlErrorOverRTL {
+  border: 1px solid #cdd5db;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+/* error Focused */
+.textItemLiteErrorFocused,
+.textItemLiteErrorFocusedRTL,
+.nativeSelectItemLiteErrorFocused,
+.nativeSelectItemLiteErrorFocusedRTL,
+.textAreaItemLiteErrorFocused,
+.textAreaItemLiteErrorFocusedRTL,
+.selectItemLiteControlErrorFocused
+.selectItemLiteControlErrorFocusedRTL {
+  border: 1px solid #cdd5db;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+/* error FocusedOver */
+.textItemLiteErrorFocusedOver,
+.textItemLiteErrorFocusedOverRTL,
+.nativeSelectItemLiteErrorFocusedOver,
+.nativeSelectItemLiteErrorFocusedOverRTL,
+.textAreaItemLiteErrorFocusedOver,
+.textAreaItemLiteErrorFocusedOverRTL,
+.selectItemLiteControlErrorFocusedOver,
+.selectItemLiteControlErrorFocusedOverRTL {
+  border: 1px solid #cdd5db;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+/* 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;
+  -moz-border-radius: 0px 0px 0px 0px;
+  -webkit-border-radius: 0px;
+  border-radius: 0px 0px 0px 0px;
+  outline: none;
+}
+
+.progressbarDisabled,
+.progressbarSelectedDisabled {
+  background-color: #cccccc;
+  color: #ffffff;
+  border: 1px solid #d0d0d0;
+  -moz-border-radius: 0px 0px 0px 0px;
+  -webkit-border-radius: 0px;
+  border-radius: 0px 0px 0px 0px;
+  outline: none;
+}
+
+/* the percentage-done */
+.progressbarProgress,
+.progressbarProgressOver,
+.progressbarProgressDown,
+.progressbarProgressSelected {
+  background-color: #3d97b2;
+  border: none;
+  -moz-border-radius: 0px 0px 0px 0px;
+  -webkit-border-radius: 0px;
+  border-radius: 0px 0px 0px 0px;
+  outline: none;
+}
+
+.progressbarProgressDisabled,
+.progressbarProgressSelectedDisabled {
+  background-color: #d0d0d0;
+  color: #ffffff;
+  border: none;
+  -moz-border-radius: 0px 0px 0px 0px;
+  -webkit-border-radius: 0px;
+  border-radius: 0px 0px 0px 0px;
+  outline: none;
+}
+
+.progressbarTitle,
+.progressbarTitleDisabled {
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  -moz-border-radius: 0px 0px 0px 0px;
+  -webkit-border-radius: 0px;
+  border-radius: 0px 0px 0px 0px;
+  font-size: 12.58px;
+  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;
+  border-left: none;
+  color: #778D87;
+}
+
+.unstackedSpinnerIconOver,
+.unstackedSpinnerIconDown,
+.unstackedSpinnerIconFocused,
+.unstackedSpinnerIconFocusedOver {
+  color: #3d97b2;
+}
+
+.unstackedSpinnerIconDisabled {
+  border-left: none;
+  color: #ababab;
+}
+
+/* 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 {
+  -moz-transition: -moz-transform 350ms;
+  -o-transition: -o-transform 350ms;
+  -webkit-transition: -webkit-transform 350ms;
+  transition: transform 350ms;
+}
+
+.pickListMenu {
+  border: 1px solid #d0d0d0;
+  padding: 0px;
+  background-color: #ffffff;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+}
+
+.pickListMenuBody {
+  background-color: #ffffff;
+  border-right: 1px solid #d0d0d0;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+}
+
+.pickListCellSelected,
+.pickListCellSelectedRTL,
+.pickListCellSelectedDark,
+.pickListCellSelectedDarkRTL,
+.pickListCellPendingSelected,
+.pickListCellPendingSelectedRTL,
+.pickListCellPendingSelectedDark,
+.pickListCellPendingSelectedDarkRTL,
+.pickListCellDeselectedSelected,
+.pickListCellDeselectedSelectedRTL,
+.pickListCellDeselectedSelectedDark,
+.pickListCellDeselectedSelectedDarkRTL {
+  background-color: #f0f0f0;
+}
+
+.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: 12.58px;
+  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: 12.58px;
+  text-decoration: none;
+  text-align: left;
+  outline: none;
+  color: #5b5b5b;
+  /* borders and padding for minimalist checkbox items */
+  border: 1px solid #cdd5db;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  transition: border-color ease-in-out 0.2s, box-shadow ease-in-out 0.2s;
+  background-color: #ffffff;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  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: 12.58px;
+}
+
+.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;
+}
+
+/* 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: #3d97b2;
+  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: #3d97b2;
+  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: #3d97b2;
+  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: #3d97b2;
+}
+
+.dateChooserFiscalYearCellSelected {
+  color: #ffffff;
+  background-color: #3d97b2;
+}
+
+/* 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: #3d97b2;
+}
+
+.dateChooserWeekCellSelected {
+  color: #ffffff;
+  background-color: #3d97b2;
+}
+
+/* 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: #3d97b2;
+}
+
+.dateChooserSelectedWeekSelected {
+  color: #ffffff;
+  background-color: #3d97b2;
+}
+
+/* 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;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  transition: background-color 0.2s;
+}
+
+.dateChooserWeekdayOver {
+  background-color: #3d97b2;
+  color: #ffffff;
+}
+
+/* selected/over date-cell styling */
+.dateChooserWeekdaySelectedOver {
+  background-color: #3d97b2;
+  color: #ffffff;
+  border: 0px solid #3d97b2;
+}
+
+.dateChooserWeekdaySelected,
+.dateChooserWeekdayDown,
+.dateChooserWeekdaySelectedDown {
+  background-color: #3d97b2;
+  color: #ffffff;
+}
+
+.dateChooserWeekdaySelected {
+  background-color: #3d97b2;
+  color: #ffffff;
+  border: 0px solid #3d97b2;
+}
+
+.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;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  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;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  transition: background-color 0.2s;
+}
+
+.dateChooserWeekendOver {
+  background-color: #3d97b2;
+  color: #ffffff;
+}
+
+/* selected/over date-cell styling */
+.dateChooserWeekendSelectedOver {
+  background-color: #3d97b2;
+  color: #ffffff;
+  border: 0px solid #3d97b2;
+}
+
+.dateChooserWeekendSelected,
+.dateChooserWeekendDown,
+.dateChooserWeekendSelectedDown {
+  background-color: #3d97b2;
+  color: #ffffff;
+}
+
+.dateChooserWeekendSelected {
+  background-color: #3d97b2;
+  color: #ffffff;
+  border: 0px solid #3d97b2;
+}
+
+.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;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  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: #3d97b2;
+  background-color: #ffffff;
+}
+
+.dateChooserMenuItemDown,
+.dateChooserMenuItemSelected {
+  color: #3d97b2;
+  background-color: #ffffff;
+}
+
+.dateChooserMenuItemDisabled,
+.dateChooserMenuItemSelectedDisabled {
+  color: #ababab;
+  background-color: #ffffff;
+}
+
+/* CSS3 Mode
+   Canvas border around calendar */
+.dateChooserBorder {
+  background-color: #ffffff;
+  border: 1px solid #d0d0d0;
+  -moz-box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.05);
+  -webkit-box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.05);
+  outline: none;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+}
+
+.dateChooserBorderTop {
+  border-top: 1px solid #d0d0d0;
+}
+
+/* applied to the navigation-layout at the top of the DateChooser */
+.dateChooserBorderBottom {
+  background-color: #f0f0f0;
+  -moz-border-radius: 0px;
+  -webkit-border-radius: 0px;
+  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;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  border-bottom: none;
+  border-top: none;
+  cursor: pointer;
+  opacity: 1;
+  transition: background-color 0.2s;
+}
+
+.dateChooserNavButtonOver,
+.dateChooserNavButtonDown,
+.dateChooserNavButtonFocused,
+.dateChooserNavButtonFocusedOver,
+.dateChooserNavButtonFocusedDown {
+  color: #3d97b2;
+  background: #f0f0f0;
+}
+
+.dateChooserNavButtonSelected,
+.dateChooserNavButtonSelectedOver {
+  color: #3d97b2;
+  background: #f0f0f0;
+}
+
+.dateChooserNavButtonSelectedFocused,
+.dateChooserNavButtonSelectedFocusedOver,
+.dateChooserNavButtonSelectedFocusedDown {
+  color: #3d97b2;
+  background: #f0f0f0;
+}
+
+.dateChooserNavButtonDisabled,
+.dateChooserNavButtonSelectedDisabled {
+  cursor: inherit;
+  opacity: 0.7;
+}
+
+/* Spriting for navigation arrows */
+.dateChooserNavMonthBack,
+.dateChooserNavMonthForward,
+.dateChooserNavYearBack,
+.dateChooserNavYearForward {
+  width: 22px;
+  height: 22px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  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;
+  -moz-box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.05);
+  -webkit-box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.05);
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+}
+
+.colorPickerHeader,
+.colorPickerHilite {
+  padding: 0px;
+  background-color: #3d97b2;
+  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: #3d97b2;
+  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: 12.58px;
+  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: 12.58px;
+  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;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  transition: border-color ease-in-out 0.2s, box-shadow ease-in-out 0.2s;
+  background-color: #ffffff;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+}
+
+/* focused state */
+.textItemLiteEditorTypeFocused,
+.textItemLiteEditorTypeFocusedRTL,
+.textItemLiteEditorTypePendingFocused,
+.textItemLiteEditorTypePendingFocusedRTL {
+  outline: none;
+  border-color: #3d97b2;
+  -moz-box-shadow: inset 0 0 5px 0 #3d97b2;
+  -webkit-box-shadow: inset 0 0 5px 0 #3d97b2;
+  box-shadow: inset 0 0 5px 0 #3d97b2;
+}
+
+/* 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: 12.58px;
+  color: #5b5b5b;
+  padding-right: 0px;
+  outline: none;
+  text-decoration: none;
+  text-align: left;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  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;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+}
+
+.selectItemLiteControlEditorTypeFocused,
+.selectItemLiteControlEditorTypeFocusedRTL,
+.selectItemLiteControlEditorTypeFocusedOver,
+.selectItemLiteControlEditorTypeFocusedOverRTL,
+.selectItemLiteControlEditorTypeErrorFocused,
+.selectItemLiteControlEditorTypeErrorFocusedRTL,
+.selectItemLiteControlEditorTypeErrorFocusedOver,
+.selectItemLiteControlEditorTypeErrorFocusedOverRTL,
+.selectItemLiteControlEditorTypePendingFocused,
+.selectItemLiteControlEditorTypePendingFocusedRTL,
+.selectItemLiteControlEditorTypePendingFocusedOver,
+.selectItemLiteControlEditorTypePendingFocusedOverRTL {
+  outline: none;
+  border-color: #3d97b2;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  background-color: #ffffff;
+}
+
+/* over state */
+.textItemLiteEditorTypeOver,
+.textItemLiteEditorTypeOverRTL,
+.textItemLiteEditorTypePendingOver,
+.textItemLiteEditorTypePendingOverRTL {
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border: 1px solid #cdd5db;
+}
+
+.selectItemLiteControlEditorTypeOver,
+.selectItemLiteControlEditorTypeOverRTL,
+.selectItemLiteControlEditorTypeErrorOver,
+.selectItemLiteControlEditorTypeErrorRTL,
+.selectItemLiteControlEditorTypePendingOver,
+.selectItemLiteControlEditorTypePendingOverRTL {
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  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;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border: 1px solid #3d97b2;
+}
+
+/* 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: $formItem_value_error_color;
+    @include input-placeholder {
+        color: $formItem_value_error_color;
+        opacity: $formItem_opacity;
+        text-overflow: ellipsis;
+    }
+}
+
+.textItemLiteEditorTypeError,
+.textItemLiteEditorTypeErrorRTL,
+
+.nativeSelectItemLiteEditorTypeError,
+.nativeSelectItemLiteEditorTypeErrorRTL,
+
+.textAreaItemLiteEditorTypeError,
+.textAreaItemLiteEditorTypeErrorRTL {
+    border: $formItem_error_border;
+}
+
+
+/*============================================================
+	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: 12.58px;
+  line-height: 12.58px;
+}
+
+.sliderRange {
+  font-weight: 400;
+}
+
+.sliderTitle,
+.rangebarTitle {
+  color: #4d4d4d;
+}
+
+.sliderRangeDisabled,
+.sliderValueDisabled {
+  color: #ababab;
+}
+
+/* SliderTrack */
+.hSliderTrack,
+.vSliderTrack,
+.hSliderTrackOver,
+.vSliderTrackOver,
+.hSliderTrackDown,
+.vSliderTrackDown,
+.hSliderTrackDisabled,
+.vSliderTrackDisabled {
+  background-color: #e6e6e6;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  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: #3881a3;
+  -moz-border-radius: 15px;
+  -webkit-border-radius: 15px;
+  border-radius: 15px;
+  border: none;
+  outline: none;
+}
+
+/* disabled thumb */
+.hSliderThumbDisabled,
+.hSliderThumbDisabledtouch,
+.vSliderThumbDisabled,
+.vSliderThumbDisabledtouch {
+  background-color: #9e9e9e;
+  border: none;
+}
+
+.hSliderThumbtouch,
+.hSliderThumbdowntouch,
+.vSliderThumbtouch,
+.vSliderThumbdowntouch,
+.hSliderThumbDisabledtouch,
+.vSliderThumbDisabledtouch {
+  -moz-border-radius: 15px;
+  -webkit-border-radius: 15px;
+  border-radius: 15px;
+}
+
+/* slider pointy arrows - start */
+.sliderValue,
+.sliderValueOver,
+.sliderValueDisabled,
+.vSliderValue,
+.vSliderValueOver,
+.vSliderValueDisabled,
+.hSliderValue,
+.hSliderValueOver,
+.hSliderValueDisabled {
+  color: #333b41;
+  position: absolute;
+  background-color: #ffffff;
+  border: 1px solid #cdd5db;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  line-height: 14px;
+  text-align: center;
+  display: inline-block;
+  margin-top: 2px;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  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;
+}
+
+.vSliderValue:after, .vSliderValue:before,
+.vSliderValueOver:after, .vSliderValueOver:before,
+.vSliderValueDisabled:after, .vSliderValueDisabled:before {
+  left: 100%;
+  top: 50%;
+}
+
+.hSliderValue:after, .hSliderValue:before,
+.hSliderValueOver:after, .hSliderValueOver:before,
+.hSliderValueDisabled:after, .hSliderValueDisabled:before {
+  top: 100%;
+  left: 50%;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.sliderValueDisabled,
+.vSliderValueDisabled,
+.hSliderValueDisabled {
+  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: 12.58px;
+  padding: 2px;
+  background-color: transparent;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  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;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  border-radius: 10px;
+}
+
+.sliderTrackActiveOver,
+.hSliderTrackActiveOver,
+.vSliderTrackActiveOver {
+  background-color: #a7e1c1;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  border-radius: 10px;
+}
+
+.sliderTrackActiveDisabled,
+.hSliderTrackActiveDisabled,
+.vSliderTrackActiveDisabled {
+  background-color: #d0d0d0;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  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;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+}
+
+.headerBar {
+  background-color: transparent;
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y2ZjhmYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  background-size: 100%;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f6f8fa));
+  background-image: -moz-linear-gradient(top, #ffffff 0%, #f6f8fa 100%);
+  background-image: -webkit-linear-gradient(top, #ffffff 0%, #f6f8fa 100%);
+  background-image: linear-gradient(to bottom, #ffffff 0%, #f6f8fa 100%);
+  border-top: 2px solid #3d97b2;
+  border-bottom: 2px solid #3881a3;
+  border-radius: 0px;
+}
+
+.headerBarDisabled {
+  background-color: transparent;
+  border-top: 2px solid #3d97b2;
+  border-bottom: 2px solid #3881a3;
+  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: #3d97b2;
+}
+
+.gridActionButtonDisabled {
+  color: #ababab;
+  background-color: #fafafa;
+}
+
+/* end grid Action (filter) button */
+.gridTableRow {
+  padding: 0px;
+}
+
+.gridBody {
+  background-color: #ffffff;
+  background-image: none;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+}
+
+.gridBodyDisabled {
+  background-color: #f9f9f9;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+}
+
+.alternateGridBody {
+  background-color: #ffffff;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  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 #3d97b2;
+  pointer-events: none;
+}
+
+.dragLineVertical {
+  border-right: 2px dashed #3d97b2;
+  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: transparent;
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzNkYjI3MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM4YTM3ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  background-size: 100%;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3d97b2), color-stop(100%, #3881a3));
+  background-image: -moz-linear-gradient(top, #3d97b2 0%, #3881a3 100%);
+  background-image: -webkit-linear-gradient(top, #3d97b2 0%, #3881a3 100%);
+  background-image: linear-gradient(to bottom, #3d97b2 0%, #3881a3 100%);
+  border: none;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  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: transparent;
+  border: none;
+  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  opacity: 0.9;
+}
+
+/* focused styles */
+.filterOperatorIconFocused,
+.filterOperatorIconSelectedFocused {
+  color: #ffffff;
+  background-color: transparent;
+  border: none;
+  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  opacity: 1;
+}
+
+/* focusedOver styles */
+.filterOperatorIconFocusedOver,
+.filterOperatorIconSelectedOver,
+.filterOperatorIconSelectedFocusedOver {
+  color: #ffffff;
+  background-color: transparent;
+  border: none;
+  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  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:after {
+  content: "";
+  position: absolute;
+  right: 0px;
+  top: 25%;
+  width: 1px;
+  height: 50%;
+  background-color: #d0d0d0;
+}
+
+.spannedHeaderButtonTable:after {
+  content: "";
+  position: absolute;
+  right: 0px;
+  top: 25%;
+  width: 1px;
+  height: 50%;
+  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;
+  font-size: 12px;
+}
+
+.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: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y2ZjhmYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  background-size: 100%;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #f6f8fa));
+  background-image: -moz-linear-gradient(top, #ffffff 0%, #f6f8fa 100%);
+  background-image: -webkit-linear-gradient(top, #ffffff 0%, #f6f8fa 100%);
+  background-image: linear-gradient(to bottom, #ffffff 0%, #f6f8fa 100%);
+  border-top: 2px solid #3d97b2;
+  border-bottom: 2px solid #3881a3;
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  font-weight: bold;
+  font-size: 12px;
+  letter-spacing: 0.3px;
+}
+
+.sorterButtonOver,
+.sorterButtonDown {
+  color: #3d97b2;
+  background-color: rgba(31, 23, 18, 0);
+}
+
+.sorterButtonSelected {
+  color: #3d97b2;
+  background-color: transparent;
+}
+
+.sorterButtonSelectedOver,
+.sorterButtonSelectedDown {
+  color: #3d97b2;
+  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: transparent;
+  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;
+}
+
+.cellOver,
+.cellOverAsync,
+.cellOverAsyncError,
+.cellOverDark,
+.cellOverDarkAsync,
+.cellOverDarkAsyncError,
+.cellDeselectedOver,
+.cellDeselectedOverDark,
+.recordSummaryCellOver,
+.recordSummaryCellOverAsync,
+.recordSummaryCellOverAsyncError,
+.recordSummaryCellOverDark,
+.recordSummaryCellOverDarkAsync,
+.recordSummaryCellOverDarkAsyncError {
+  background-color: #f5f8fa;
+  color: #5b5b5b;
+}
+
+.cellSelected,
+.cellSelectedAsync,
+.cellSelectedAsyncError,
+.cellSelectedDark,
+.cellSelectedDarkAsync,
+.cellSelectedDarkAsyncError,
+.cellPendingSelected,
+.cellPendingSelectedDark,
+.recordSummaryCellSelected,
+.recordSummaryCellSelectedAsync,
+.recordSummaryCellSelectedAsyncError,
+.recordSummaryCellSelectedDark,
+.recordSummaryCellSelectedDarkAsync,
+.recordSummaryCellSelectedDarkAsyncError {
+  background-color: #f0f0f0;
+  color: #5b5b5b;
+}
+
+.cellSelectedOver,
+.cellSelectedOverAsync,
+.cellSelectedOverAsyncError,
+.cellSelectedOverDark,
+.cellSelectedOverDarkAsync,
+.cellSelectedOverDarkAsyncError,
+.cellPendingSelectedOver,
+.cellPendingSelectedOverDark,
+.recordSummaryCellSelectedOver,
+.recordSummaryCellSelectedOverAsync,
+.recordSummaryCellSelectedOverAsyncError,
+.recordSummaryCellSelectedOverDark,
+.recordSummaryCellSelectedOverDarkAsync,
+.recordSummaryCellSelectedOverDarkAsyncError {
+  background-color: #f0f0f0;
+  color: #5b5b5b;
+}
+
+.cellDisabled,
+.cellDisabledAsync,
+.cellDisabledAsyncError,
+.cellDisabledDark,
+.cellDisabledDarkAsync,
+.cellDisabledDarkAsyncError,
+.recordSummaryCellDisabled,
+.recordSummaryCellDisabledAsync,
+.recordSummaryCellDisabledAsyncError,
+.recordSummaryCellDisabledDark,
+.recordSummaryCellDisabledDarkAsync,
+.recordSummaryCellDisabledDarkAsyncError {
+  background-color: #f9f9f9;
+  cursor: not-allowed;
+  color: #ababab;
+}
+
+.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;
+}
+
+.cellOverAltCol,
+.cellOverAltColAsync,
+.cellOverAltColAsyncError,
+.cellOverDarkAltCol,
+.cellOverDarkAltColAsync,
+.cellOverDarkAltColAsyncError,
+.cellDeselectedOver,
+.cellDeselectedOverDark,
+.recordSummaryCellOverAltCol,
+.recordSummaryCellOverAltColAsync,
+.recordSummaryCellOverAltColAsyncError,
+.recordSummaryCellOverDarkAltCol,
+.recordSummaryCellOverDarkAltColAsync,
+.recordSummaryCellOverDarkAltColAsyncError {
+  background-color: #f5f8fa;
+  color: #5b5b5b;
+}
+
+.cellSelectedAltCol,
+.cellSelectedAltColAsync,
+.cellSelectedAltColAsyncError,
+.cellSelectedDarkAltCol,
+.cellSelectedDarkAltColAsync,
+.cellSelectedDarkAltColAsyncError,
+.cellPendingSelectedAltCol,
+.cellPendingSelectedDarkAltCol,
+.recordSummaryCellSelectedAltCol,
+.recordSummaryCellSelectedAltColAsync,
+.recordSummaryCellSelectedAltColAsyncError,
+.recordSummaryCellSelectedDarkAltCol,
+.recordSummaryCellSelectedDarkAltColAsync,
+.recordSummaryCellSelectedDarkAltColAsyncError {
+  background-color: #f0f0f0;
+  color: #5b5b5b;
+}
+
+.cellSelectedOverAltCol,
+.cellSelectedOverAltColAsync,
+.cellSelectedOverAltColAsyncError,
+.cellSelectedOverDarkAltCol,
+.cellSelectedOverDarkAltColAsync,
+.cellSelectedOverDarkAltColAsyncError,
+.cellPendingSelectedOverAltCol,
+.cellPendingSelectedOverDarkAltCol,
+.recordSummaryCellSelectedOverAltCol,
+.recordSummaryCellSelectedOverAltColAsync,
+.recordSummaryCellSelectedOverAltColAsyncError,
+.recordSummaryCellSelectedOverDarkAltCol,
+.recordSummaryCellSelectedOverDarkAltColAsync,
+.recordSummaryCellSelectedOverDarkAltColAsyncError {
+  background-color: #f0f0f0;
+  color: #5b5b5b;
+}
+
+.cellDisabledAltCol,
+.cellDisabledAltColAsync,
+.cellDisabledAltColAsyncError,
+.cellDisabledDarkAltCol,
+.cellDisabledDarkAltColAsync,
+.cellDisabledDarkAltColAsyncError,
+.recordSummaryCellDisabledAltCol,
+.recordSummaryCellDisabledAltColAsync,
+.recordSummaryCellDisabledAltColAsyncError,
+.recordSummaryCellDisabledDarkAltCol,
+.recordSummaryCellDisabledDarkAltColAsync,
+.recordSummaryCellDisabledDarkAltColAsyncError {
+  background-color: #f9f9f9;
+  cursor: not-allowed;
+  color: #ababab;
+}
+
+.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;
+}
+
+/* rounded grid-cells - these are additional to regular grid-cell styling */
+.gridFirstCell {
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+
+.gridLastCell {
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
+/* ListGrid rollOverCanvas outer glow */
+.gridSelectionOver {
+  border: none;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+/* TreeGrid rollOverCanvas outer glow */
+.treeSelectionOver {
+  border: none;
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+/* CubeGrid rollOverCanvas outer glow */
+.cubeSelectionOver {
+  border: none;
+  -moz-box-shadow: 0 0 5px 0 none;
+  -webkit-box-shadow: 0 0 5px 0 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: 12.5px;
+  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: #3d97b2;
+  fill: #e0e0e0;
+  padding: 0px;
+  margin: 0px;
+  border: 0;
+}
+
+.treeConnectorSvgDisabled {
+  color: #3d97b2;
+  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;
+  -moz-box-shadow: 0 0 5px #f0f0f0;
+  -webkit-box-shadow: 0 0 5px #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: 1px solid #e8ebed;
+  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;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  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;
+}
+
+.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: #f5f8fa;
+  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: #f0f0f0;
+  color: #3881a3;
+  opacity: 1;
+}
+
+.toolStripButtonSelected,
+.toolStripButtonSelectedFocused,
+.toolStripButtonSelectedOver,
+.toolStripButtonSelectedFocusedOver,
+.toolStripButtonSelectedDisabled {
+  background-color: #f0f0f0;
+  color: #3881a3;
+  border: 1px solid transparent;
+  opacity: 1;
+}
+
+/*===================================================================================
+   12a) RibbonBar, and RibbonGroup / RibbonButton (nee ToolStripGroup and IconButton)
+===================================================================================*/
+.ribbonBar {
+  background-color: #ffffff;
+  border: 1px solid #d0d0d0;
+  -moz-box-shadow: #fafcff 0 1px 0 inset;
+  -webkit-box-shadow: #fafcff 0 1px 0 inset;
+  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;
+  -moz-box-shadow: 3px 3px 5px 2px #f3f3f3;
+  -webkit-box-shadow: 3px 3px 5px 2px #f3f3f3;
+  box-shadow: 3px 3px 5px 2px #f3f3f3;
+  -moz-border-radius: 0px;
+  -webkit-border-radius: 0px;
+  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: 15.5px;
+  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;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  padding: 0px 3px;
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  font-size: 13.5px;
+  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;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  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;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  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 {
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  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: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2UzZTNlMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  background-size: 100%;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e3e3e3));
+  background-image: -moz-linear-gradient(top, #ffffff 0%, #e3e3e3 100%);
+  background-image: -webkit-linear-gradient(top, #ffffff 0%, #e3e3e3 100%);
+  background-image: linear-gradient(to bottom, #ffffff 0%, #e3e3e3 100%);
+  border: 1px solid #d0d0d0;
+}
+
+.simpleTileSelected,
+.simpleTileSelectedOver {
+  background-color: #fafafa;
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2UzZTNlMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  background-size: 100%;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e3e3e3));
+  background-image: -moz-linear-gradient(top, #ffffff 0%, #e3e3e3 100%);
+  background-image: -webkit-linear-gradient(top, #ffffff 0%, #e3e3e3 100%);
+  background-image: linear-gradient(to bottom, #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-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: #3d97b2;
+}
+
+.vScrollStartDown {
+  background-position: -48px 0px;
+  color: #3d97b2;
+}
+
+.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: #3d97b2;
+}
+
+.vScrollEndDown {
+  background-position: -48px -18px;
+  color: #3d97b2;
+}
+
+.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: 10px;
+  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: #3881a3;
+}
+
+.toggleSwitchOffDisabled,
+.toggleSwitchOnDisabled {
+  border-radius: 10px;
+  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: 10px;
+  border: #d0d0d0;
+  transition: background-color 0.1s ease-in-out;
+}
+
+.toggleSwitchThumbOff {
+  /* Styles for the off state of the toggle switch */
+  background-color: #ffffff;
+  border-radius: 10px;
+  border: #d0d0d0;
+}
+
+.toggleSwitchThumbOn {
+  /* Styles for the on state of the toggle switch thumb */
+  background-color: #ffffff;
+  border-radius: 10px;
+  border: #d0d0d0;
+}
+
+.toggleSwitchThumbDisabled,
+.toggleSwitchThumbOffDisabled,
+.toggleSwitchThumbOnDisabled {
+  /* Styles for the off state of the toggle switch */
+  border-radius: 10px;
+  border: #d0d0d0;
+  background-color: #ffffff;
+}
+
+.svgCheckbox {
+  color: #3d97b2;
+  transition: color, background-color 0.1s ease-in-out;
+}
+
+.svgRadio {
+  color: #3d97b2;
+  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: 12.58px;
+  vertical-align: middle;
+  text-decoration: none;
+  outline-width: 0px;
+  padding: 0px 1px 0px 2px;
+}
+
+.radioAnchorPending,
+.radioAnchorPendingOver,
+.radioAnchorPendingFocused,
+.radioAnchorPendingFocusedOver,
+.radioAnchorPendingDisabled,
+.radioAnchorPendingError,
+.radioAnchorPendingErrorOver,
+.radioAnchorPendingErrorFocused,
+.radioAnchorPendingErrorFocusedOver {
+  color: #0066CC;
+}
+
+/*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: #444444;
+  background-color: transparent;
+  border: 1px solid #d0d0d0;
+  border-left: none;
+  border-top: none;
+}
+
+.rowHeaderOver {
+  color: #444444;
+  background-color: rgba(31, 23, 18, 0);
+}
+
+.rowHeaderSelected,
+.rowHeaderSelectedDown,
+.rowHeaderDown {
+  color: #444444;
+  background-color: transparent;
+}
+
+.rowHeaderSelectedOver {
+  color: #ffffff;
+  background-color: rgba(31, 23, 18, 0);
+}
+
+.rowHeaderDisabled,
+.rowHeaderSelectedDisabled {
+  color: #ababab;
+  background-color: transparent;
+  border: 1px solid #d0d0d0;
+  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: 13px;
+  color: #444444;
+  background-color: transparent;
+  border: 1px solid #d0d0d0;
+  border-left: none;
+  border-top: none;
+}
+
+.rowHeaderLabelOver {
+  color: #444444;
+  background-color: rgba(31, 23, 18, 0);
+}
+
+.rowHeaderLabelSelected,
+.rowHeaderLabelSelectedDown,
+.rowHeaderLabelDown {
+  color: #444444;
+  background-color: transparent;
+}
+
+.rowHeaderLabelSelectedOver {
+  color: #ffffff;
+  background-color: #ffffff;
+}
+
+.rowHeaderLabelDisabled,
+.rowHeaderLabelSelectedDisabled {
+  color: #ababab;
+  background-color: transparent;
+  border: 1px solid #d0d0d0;
+  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: #444444;
+  background-color: transparent;
+  border: 1px solid #d0d0d0;
+  border-left: none;
+  border-top: none;
+}
+
+.colHeaderOver {
+  color: #444444;
+  background-color: rgba(31, 23, 18, 0);
+}
+
+.colHeaderSelected,
+.colHeaderSelectedDown,
+.colHeaderDown {
+  color: #444444;
+  background-color: transparent;
+}
+
+.colHeaderSelectedOver {
+  color: #ffffff;
+  background-color: rgba(31, 23, 18, 0);
+}
+
+.colHeaderDisabled,
+.colHeaderSelectedDisabled {
+  color: #ababab;
+  background-color: transparent;
+  border: 1px solid #d0d0d0;
+  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: 13px;
+  color: #444444;
+  background-color: transparent;
+  border: 1px solid #d0d0d0;
+  border-left: none;
+  border-top: none;
+}
+
+.colHeaderLabelOver {
+  color: #444444;
+  background-color: rgba(31, 23, 18, 0);
+}
+
+.colHeaderLabelSelected,
+.colHeaderLabelSelectedDown,
+.colHeaderLabelDown {
+  color: #444444;
+  background-color: transparent;
+}
+
+.colHeaderLabelSelectedOver {
+  color: #444444;
+  background-color: transparent;
+}
+
+.colHeaderLabelDisabled,
+.colHeaderLabelSelectedDisabled {
+  color: #ababab;
+  background-color: transparent;
+  border: 1px solid #d0d0d0;
+  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 #3d97b2;
+  border-bottom: 2px solid #3881a3;
+}
+
+.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 #3881a3;
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  font-size: 11px;
+  padding: 1px;
+  outline: none;
+  border-radius: 4px;
+}
+
+.eventWindowSelected {
+  border: 1px solid #3d97b2;
+}
+
+.eventWindowHeader,
+.eventWindowHeaderSelected {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  top: 0px;
+  height: auto;
+  background-color: #3881a3;
+  color: #ffffff;
+  border: 1px solid #3881a3;
+  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: #3881a3;
+  color: #ffffff;
+  border: 1px solid #3881a3;
+  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: #3d97b2;
+}
+
+/* == 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: #3881a3;
+  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;
+}
+
+.zoneCanvasHeader,
+.zoneCanvasGripper,
+.zoneCanvasLabel {
+  display: inline-block;
+  color: #ffffff;
+  background-color: #9e9e9e;
+  left: 0px;
+  bottom: 0px;
+}
+
+/* --- 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 {
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  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
+============================================================*/
+.propSheetValue,
+.propSheetValueFocused,
+.propSheetValueDisabled {
+  border-bottom: 1px solid #d0d0d0;
+  border-right: 1px solid #d0d0d0;
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  font-size: 11px;
+  margin: 0px 2px 0px 0px;
+  padding: 1px 2px 0px 2px;
+}
+
+.propSheetTitle,
+.propSheetTitleFocused,
+.propSheetTitleDisabled {
+  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;
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+.propSheetTitleError,
+.propSheetValueError {
+  background-color: #c5e480;
+  color: #8f2227;
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  font-size: 11px;
+}
+
+.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;
+}
+
+/*============================================================
+	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: 12.58px;
+  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;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+}
+
+.processElementInvalid {
+  border: 1px solid #ff0000;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+}
+
+.processElementNew,
+.processElementNewFocused,
+.processElementNewDisabled {
+  border: 1px dashed blue;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  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: 12.58px;
+}
+
+/*============================================================
+    Notifications
+============================================================*/
+.notifyWarn,
+.notifyError,
+.notifyMessage,
+.notifyWarnRTL,
+.notifyErrorRTL,
+.notifyMessageRTL {
+  color: #ffffff;
+  font-family: Roboto-Light-Vivid, Arial, Helvetica, sans-serif;
+  font-size: 14px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+}
+
+.notifyWarn,
+.notifyError,
+.notifyMessage {
+  padding: 10px 45px 10px 10px;
+}
+
+.notifyWarnRTL,
+.notifyErrorRTL,
+.notifyMessageRTL {
+  padding: 10px 10px 10px 45px;
+}
+
+.notifyWarn,
+.notifyWarnRTL {
+  background-color: #ea9039;
+  -moz-box-shadow: 0px 0px 5px #ea9039;
+  -webkit-box-shadow: 0px 0px 5px #ea9039;
+  box-shadow: 0px 0px 5px #ea9039;
+}
+
+.notifyError,
+.notifyErrorRTL {
+  background-color: #e34e42;
+  -moz-box-shadow: 0px 0px 5px #e34e42;
+  -webkit-box-shadow: 0px 0px 5px #e34e42;
+  box-shadow: 0px 0px 5px #e34e42;
+}
+
+.notifyMessage,
+.notifyMessageRTL {
+  background-color: #394a51;
+  -moz-box-shadow: 0px 0px 5px #394a51;
+  -webkit-box-shadow: 0px 0px 5px #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;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  -moz-box-shadow: 0px 0px 25px 0 #bfbfbf;
+  -webkit-box-shadow: 0px 0px 25px 0 #bfbfbf;
+  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: transparent;
+  background-image: linear-gradient(to bottom, #3d97b2 0%, #3881a3 100%);
+  border: 2px solid transparent;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  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: transparent;
+  border: 2px solid transparent;
+  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  opacity: 0.9;
+}
+
+/* focused styles */
+.tourButtonFocused,
+.tourButtonSelectedFocused {
+  color: #ffffff;
+  background-color: rgba(8, 0, 0, 0);
+  border: 2px solid #288736;
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;
+  opacity: 0.9;
 }
 
-.selectItemLiteControlFocused,
-.selectItemLiteControlFocusedRTL {
-  outline: none;
-  border-color: #3d7bb2;
+/* focusedOver styles */
+.tourButtonFocusedOver,
+.tourButtonSelectedFocusedOver {
+  color: #ffffff;
+  background-color: rgba(8, 0, 0, 0);
+  border: 2px solid #003760;
+  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
+  opacity: 0.9;
 }
 
-.textItemLiteErrorFocusedOver,
-.textItemLiteErrorFocusedOverRTL,
-.textItemLiteFocusedOver,
-.textItemLiteFocusedOverRTL,
-.textItemLitePendingFocusedOver,
-.textItemLitePendingFocusedOverRTL,
-.textAreaItemLiteFocusedOver,
-.textAreaItemLiteFocusedOverRTL,
-.textAreaItemLiteErrorFocusedOver,
-.textAreaItemLiteErrorFocusedOverRTL,
-.textAreaItemLitePendingFocusedOver,
-.textAreaItemLitePendingFocusedOverRTL,
-.selectItemLiteControlFocusedOver,
-.selectItemLiteControlFocusedOverRTL,
-.selectItemLiteControlPendingFocusedOver,
-.selectItemLiteControlPendingFocusedOverRTL,
-.nativeSelectItemErrorFocusedOver,
-.nativeSelectItemErrorFocusedOverRTL {
+/* Down styles */
+.tourButtonDown,
+.tourButtonFocusedDown,
+.tourButtonSelectedDown,
+.tourButtonSelectedFocusedDown {
+  color: #ffffff;
+  background-color: transparent;
+  border: 2px solid #369f65;
+  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
+  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
+  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,
+.iconDisabled,
+.icondrop {
+  color: #778D87;
+  vertical-align: middle;
+  transition: color 0.2s;
+}
+
+.iconOver,
+.iconFocusedOver,
+.iconSelectedOver,
+.iconSelectedFocusedOver {
+  color: #3d97b2;
+}
+
+.iconDown,
+.iconFocusedDown,
+.iconSelectedDown,
+.iconSelectedFocusedDown {
+  color: #308c59;
+}
+
+.iconFocused,
+.iconSelectedFocused {
+  color: #3d97b2;
+}
+
+.iconSelected {
+  color: #308c59;
+}
+
+.icondrop {
+  color: #3d97b2;
+}
+
+.iconDisabled,
+.iconSelectedDisabled {
+  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;
+}
+
+/* .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: #3d97b2;
+}
+
+.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: #3d97b2;
+}
+
+.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: 12.58px;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+  border: 1px solid #d8dde5;
   outline: none;
-  -moz-box-shadow: none;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-  border: 1px solid #3d7bb2;
+  text-decoration: none;
 }
 
-.tabControlIconOver,
-.tabControlIconOvertop,
-.tabControlIconOverleft,
-.tabControlIconOverbottom,
-.tabControlIconOverright {
-  background-color: #f5f8fa;
-  color: #3d7bb2;
+.loginButton,
+.loginButtonOver,
+.loginButtonFocused,
+.loginButtonFocusedOver,
+.loginButtonDown,
+.loginButtonFocusedDown {
+  border: none;
+  background-color: #3a66c7;
+  color: #ffffff;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-family: system-ui, Arial, Helvetica, sans-serif;
+  background-image: linear-gradient(to bottom, #3d97b2 0%, #3881a3 100%);
+  transform: opacity 0.2s;
 }
 
-*:focus {
-  outline-color: #3d7bb2;
-  outline-radius: 0px;
+.loginButtonOver,
+.loginButtonFocused,
+.loginButtonFocusedOver,
+.loginButtonDown,
+.loginButtonFocusedDown {
+  background-color: #232852;
 }
 
-div.windowHeader div.normal span  {
-	color: rgb(222,222,222);
-	font-family: RobotoLight;
-	font-size: 12px;
+/* doc viewer */
+.docHover {
+  border: 1px solid #3d97b2;
+  background-color: #ffffff;
+  color: #444444;
+  padding: 8px 12px 8px 12px;
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  font-family: Verdana,Bitstream Vera Sans,sans-serif;
+  font-size: 11px;
 }
 
-/* 
- * End of Shiva overrides 
- */
\ No newline at end of file
+.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;
+}
+
+/* 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, rgba(0, 0, 0, 0) 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%;
+  }
+}
+:root {
+    /*
+    --scrollbars: #b5bfc7;
+    --scrollbars-over: #cdd6dc;
+
+    --icon_color: #b1bcc4;
+    --icon_over_color: #3d97b2;
+    --icon-stroke: #b1bcc4;
+    --icon-strokewidth: 1.4px;
+
+    --icon-rulesbackground: #ffffff;
+
+    --picker-icon-width: 15px;
+    --second-level-tab-icon: #959fa6;
+    --third-level-tab-icon: #9ea9b0;
+    --text-light: #999999;
+    --text-medium: #666666;
+    --text-dark: #444444;
+    
+    --iscMaterialIconColor: #778D87;
+    --iscMaterialIconOverColor: #3d97b2;
+    */
+}
+
+/* *** ScrollBars */
+/*-----Buttons-----*/
+/*-----Bars-----*/
+/*
+.verticalScrollThumb{
+    border-radius: 2px;
+    position: relative;
+}
+.verticalScrollThumb:before {
+    content: "";
+    height: 100%;
+    position: absolute;
+    display: block;
+    width: $scrollThumb_breadth;
+    background-color: var($scrollThumb_bgColor);
+    transition: background-color $transition_normal_speed;
+    border-radius: $scrollThumb_radius;
+
+    left: 50%; 
+    transform: translateX(-50%); 
+}
+
+.verticalScrollThumbOver:before {
+    content: "";
+    height: 100%;
+    position: absolute;
+    display: block;
+    width: $scrollThumb_breadth;
+    background-color: var($scrollThumb_over_bgColor);
+    transition: background-color $transition_normal_speed;
+    border-radius: $scrollThumb_radius;
+
+    left: 50%; 
+    transform: translateX(-50%); 
+}
+
+.horizontalScrollThumb:before {
+    content: "";
+    height: $scrollThumb_breadth;
+    position: absolute;
+    display: block;
+    width: 100%;
+    background-color: var($scrollThumb_bgColor);
+    transition: background-color $transition_normal_speed;
+    border-radius: $scrollThumb_radius;
+
+    top: 50%; 
+    transform: translateY(-50%); 
+}
+
+.horizontalScrollThumbOver:before {
+    content: "";
+    height: $scrollThumb_breadth;
+    position: absolute;
+    display: block;
+    width: 100%;
+    background-color: var($scrollThumb_over_bgColor);
+    transition: background-color $transition_normal_speed;
+    border-radius: $scrollThumb_radius;
+
+    top: 50%; 
+    transform: translateY(-50%); 
+}
+
+.verticalScrollTrack,
+.horizontalScrollTrack {
+    background-color: transparent;
+}
+
+*/
+/* end Scrollbars */
+.headerButtonTreeField,
+.headerButtonTreeFieldDisabled,
+.headerButtonTreeFieldOver,
+.headerButtonTreeFieldDown,
+.headerButtonTreeFieldSelectedOver,
+.headerButtonTreeFieldSelectedDown {
+  background: linear-gradient(to bottom, #ffffff 0%, #f6f8fa 100%) transparent;
+  color: #444444;
+  font-size: 14px;
+  padding: 0px 0px 0px 28px;
+  border-top: 2px solid #3d97b2;
+  border-bottom: 2px solid #3881a3;
+}
+
+/* svg */
+svg {
+  display: inline-block;
+}
+
+.sectionHeader {
+  line-height: 18px;
+  font-size: 15px;
+  color: #444444;
+}
+
+.sectionHeader > svg {
+  vertical-align: middle;
+}
+
+/* BEGIN html5UploadItem */
+.html5UploadItem {
+  font-size: 1.25rem;
+  /* 20 */
+  position: relative;
+  padding: 40px 20px;
+  text-align: center;
+  background-image: -webkit-linear-gradient(top, #fbfbfb 0%, #ebe8e5 100%);
+  background-image: -moz-linear-gradient(top, #fbfbfb 0%, #ebe8e5 100%);
+  background-image: -ms-linear-gradient(top, #fbfbfb 0%, #ebe8e5 100%);
+  background-image: linear-gradient(to bottom, #fbfbfb 0%, #ebe8e5 100%);
+  outline: 2px dashed #979797;
+  outline-offset: -10px;
+  -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
+  transition: outline-offset .15s ease-in-out, background-color .15s linear;
+}
+
+.html5UploadItem.has-advanced-upload {
+  outline: 2px dashed #979797;
+  outline-offset: -10px;
+  -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
+  transition: outline-offset .15s ease-in-out, background-color .15s linear;
+}
+
+.html5UploadItem.is-dragover {
+  outline-offset: -20px;
+  outline-color: #979797;
+}
+
+.html5UploadItem__dragndrop,
+.html5UploadItem__icon {
+  display: none;
+}
+
+.html5UploadItem.has-advanced-upload .html5UploadItem__dragndrop {
+  display: inline;
+}
+
+.html5UploadItem.has-advanced-upload .html5UploadItem__icon {
+  width: 100%;
+  height: 80px;
+  fill: #f09c35;
+  display: block;
+  margin-bottom: 40px;
+}
+
+.html5UploadItem.is-uploading .html5UploadItem__input,
+.html5UploadItem.is-success .html5UploadItem__input,
+.html5UploadItem.is-error .html5UploadItem__input {
+  visibility: hidden;
+}
+
+.html5UploadItem__uploading,
+.html5UploadItem__success,
+.html5UploadItem__error {
+  display: none;
+}
+
+.html5UploadItem.is-uploading .html5UploadItem__uploading,
+.html5UploadItem.is-success .html5UploadItem__success,
+.html5UploadItem.is-error .html5UploadItem__error {
+  display: block;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  left: 0;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+.html5UploadItem__uploading {
+  font-style: italic;
+}
+
+.html5UploadItem__success {
+  -webkit-animation: appear-from-inside .25s ease-in-out;
+  animation: appear-from-inside .25s ease-in-out;
+}
+
+@-webkit-keyframes appear-from-inside {
+  from {
+    -webkit-transform: translateY(-50%) scale(0);
+  }
+  75% {
+    -webkit-transform: translateY(-50%) scale(1.1);
+  }
+  to {
+    -webkit-transform: translateY(-50%) scale(1);
+  }
+}
+@keyframes appear-from-inside {
+  from {
+    transform: translateY(-50%) scale(0);
+  }
+  75% {
+    transform: translateY(-50%) scale(1.1);
+  }
+  to {
+    transform: translateY(-50%) scale(1);
+  }
+}
+.html5UploadItem__file {
+  width: 0.1px;
+  height: 0.1px;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: -1;
+}
+
+.html5UploadItem__file + label {
+  max-width: 80%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  display: inline-block;
+  overflow: hidden;
+}
+
+.html5UploadItem__file + label:hover strong,
+.html5UploadItem__file:focus + label strong,
+.html5UploadItem__file.has-focus + label strong {
+  color: #f09c35;
+}
+
+.html5UploadItem__file:focus + label,
+.html5UploadItem__file.has-focus + label {
+  outline: 1px dotted #000;
+  outline: -webkit-focus-ring-color auto 5px;
+}
+
+.html5UploadItem__file + label * {
+  /* pointer-events: none; */
+  /* in case of FastClick lib use */
+}
+
+.uploadFormButtonCell,
+.uploadFormButtonCellDisabled {
+  background-color: #ebe8e5;
+}
+
+.uploadFormHtml5UploadCell,
+.uploadFormHtml5UploadCellDisabled {
+  padding: 0;
+}
+
+/* END html5UploadItem */
+.expansion .headerButton,
+.expansion .sorterButton {
+  background: none;
+  color: #444444;
+  font-size: 14px;
+  padding: 0px 0px 0px 3px;
+  border-bottom: 1px solid #3d97b2;
+  border-top: none;
+}
+
+.recordEditorCell {
+  background: none;
+}
+
+.filterEditor .SelectItem {
+  border: none;
+}
+
+.sorterButton,
+.sorterButtonSelected,
+.sorterButtonDisabled,
+.sorterButtonSelectedDisabled,
+.sorterButtonOver,
+.sorterButtonDown,
+.sorterButtonSelectedOver,
+.sorterButtonSelectedDown {
+  border-top: 2px solid #3d97b2;
+  border-bottom: 2px solid #3881a3;
+}
+
+/* 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, rgba(0, 0, 0, 0) 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%;
+  }
+}