diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html
index ebe53b368f..3bd6138da6 100644
--- a/platform/commonUI/browse/res/templates/browse-object.html
+++ b/platform/commonUI/browse/res/templates/browse-object.html
@@ -42,9 +42,8 @@
         </div>
     </div>
 
-    <div class='object-holder abs vscroll'>
-        <mct-representation key="representation.selected.key"
-                            mct-object="representation.selected.key && domainObject">
-        </mct-representation>
-    </div>
+    <mct-representation key="representation.selected.key"
+                        mct-object="representation.selected.key && domainObject"
+                        class="abs object-holder">
+    </mct-representation>
 </span>
diff --git a/platform/commonUI/browse/res/templates/create/create-button.html b/platform/commonUI/browse/res/templates/create/create-button.html
index 67a0294111..a7b4ad96e5 100644
--- a/platform/commonUI/browse/res/templates/create/create-button.html
+++ b/platform/commonUI/browse/res/templates/create/create-button.html
@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <div class="menu-element wrapper" ng-controller="ClickAwayController as createController">
-    <div class="s-menu major create-btn" ng-click="createController.toggle()">
+    <div class="s-menu-btn major create-btn" ng-click="createController.toggle()">
 		<span class="ui-symbol icon type-icon">&#x2b;</span>
 		<span class="title-label">Create</span>
     </div>
diff --git a/platform/commonUI/edit/res/templates/edit-object.html b/platform/commonUI/edit/res/templates/edit-object.html
index c2089781a4..71dc233a82 100644
--- a/platform/commonUI/edit/res/templates/edit-object.html
+++ b/platform/commonUI/edit/res/templates/edit-object.html
@@ -30,12 +30,11 @@
                          structure="toolbar.structure"
                          ng-model="toolbar.state">
             </mct-toolbar>
-            <div class='holder abs object-holder work-area'>
-                <mct-representation key="representation.selected.key"
-                                    toolbar="toolbar"
-                                    mct-object="representation.selected.key && domainObject">
-                </mct-representation>
-            </div>
+            <mct-representation key="representation.selected.key"
+                                toolbar="toolbar"
+                                mct-object="representation.selected.key && domainObject"
+                                class="holder abs object-holder work-area">
+            </mct-representation>
         </div>
         <mct-splitter></mct-splitter>
         <div
diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss
index 78c7c916dd..918ace8c0f 100644
--- a/platform/commonUI/general/res/sass/_constants.scss
+++ b/platform/commonUI/general/res/sass/_constants.scss
@@ -45,6 +45,7 @@ $ueEditToolBarH: 25px;
 $ueBrowseLeftPaneW: 25%;
 $ueEditLeftPaneW: 75%;
 $treeSearchInputBarH: 25px;
+$ueTimeControlH: (33px, 20px, 20px);
 // Overlay
 $ovrTopBarH: 60px;
 $ovrFooterH: 30px;
diff --git a/platform/commonUI/general/res/sass/_global.scss b/platform/commonUI/general/res/sass/_global.scss
index 3f23938715..45b868922b 100644
--- a/platform/commonUI/general/res/sass/_global.scss
+++ b/platform/commonUI/general/res/sass/_global.scss
@@ -40,11 +40,11 @@
 
 /************************** HTML ENTITIES */
 a {
-	color: #ccc;
+	color: $colorA;
 	cursor: pointer;
 	text-decoration: none;
 	&:hover {
-		color: #fff;
+		color: $colorAHov;
 	}
 }
 
@@ -125,6 +125,14 @@ mct-container {
 	text-align: center;
 }
 
+.scrolling {
+	overflow: auto;
+}
+
+.vscroll {
+	overflow-y: auto;
+}
+
 .no-margin {
 	margin: 0;
 }
diff --git a/platform/commonUI/general/res/sass/_icons.scss b/platform/commonUI/general/res/sass/_icons.scss
index 1f6ec7a34e..1208b3e7cf 100644
--- a/platform/commonUI/general/res/sass/_icons.scss
+++ b/platform/commonUI/general/res/sass/_icons.scss
@@ -29,6 +29,9 @@
 }
 
 .ui-symbol {
+	&.type-icon {
+		color: $colorObjHdrIc;
+	}
 	&.icon {
 		color: $colorKey;
 		&.alert {
@@ -41,6 +44,9 @@
 			font-size: 1.65em;
 		}
 	}
+	&.icon-calendar:after {
+		content: "\e605";
+	}
 }
 
 .bar .ui-symbol {
@@ -52,7 +58,7 @@
 	display: inline-block;
 }
 
-.s-menu .invoke-menu,
+.s-menu-btn .invoke-menu,
 .icon.major .invoke-menu {
 	margin-left: $interiorMarginSm;
 }
diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss
index d0b08491b7..070bf29e73 100644
--- a/platform/commonUI/general/res/sass/_mixins.scss
+++ b/platform/commonUI/general/res/sass/_mixins.scss
@@ -347,9 +347,10 @@
     /* This doesn't work on an element inside an element with absolute positioning that has height: auto */
     //position: relative;
     top: 50%;
-    -webkit-transform: translateY(-50%);
-    -ms-transform: translateY(-50%);
-    transform: translateY(-50%);
+	@include webkitProp(transform, translateY(-50%));
+    //-webkit-transform: translateY(-50%);
+    //-ms-transform: translateY(-50%);
+    //transform: translateY(-50%);
 }
 
 @mixin verticalCenterBlock($holderH, $itemH) {
@@ -389,7 +390,7 @@
 }
 
 @mixin test($c: #ffcc00, $a: 0.2) {
-    background-color: rgba($c, $a);
+    background-color: rgba($c, $a) !important;
 }
 
 @mixin tmpBorder($c: #ffcc00, $a: 0.75) {
diff --git a/platform/commonUI/general/res/sass/_views.scss b/platform/commonUI/general/res/sass/_views.scss
index ef83e3c29b..96c78f1dd2 100644
--- a/platform/commonUI/general/res/sass/_views.scss
+++ b/platform/commonUI/general/res/sass/_views.scss
@@ -10,9 +10,6 @@
 	&.fixed {
 		font-size: 0.8em;
 	}
-	&.scrolling {
-		overflow: auto;
-	}
 	.controls,
 	label,
 	.inline-block {
diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index af967d6ef3..f5dc2e102f 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -205,7 +205,7 @@ label.checkbox.custom {
 	}
 }
 
-.s-menu label.checkbox.custom {
+.s-menu-btn label.checkbox.custom {
 	margin-left: 5px;
 }
 
@@ -295,49 +295,155 @@ label.checkbox.custom {
 
 .slider {
 	$knobH: 100%; //14px;
-	$knobW: 12px;
-	$slotH: 50%;
 	.slot {
 		//		@include border-radius($basicCr * .75);
-		@include sliderTrack();
-		height: $slotH;
+		//@include sliderTrack();
 		width: auto;
 		position: absolute;
-		top: ($knobH - $slotH) / 2;
+		top: 0;
 		right: 0;
-		bottom: auto;
+		bottom: 0;
 		left: 0;
 	}
 	.knob {
-		@include btnSubtle();
-		@include controlGrippy(rgba(black, 0.3), vertical, 1px, solid);
-		cursor: ew-resize;
+		//@include btnSubtle();
+		//@include controlGrippy(rgba(black, 0.3), vertical, 1px, solid);
+		@include trans-prop-nice-fade(.25s);
+		background-color: $sliderColorKnob;
+		&:hover {
+			background-color: $sliderColorKnobHov;
+		}
 		position: absolute;
 		height: $knobH;
-		width: $knobW;
+		width: $sliderKnobW;
 		top: 0;
 		auto: 0;
 		bottom: auto;
 		left: auto;
-		&:before {
-			top: 1px;
-			bottom: 3px;
-			left: ($knobW / 2) - 1;
-		}
-
+	}
+	.knob-l {
+		@include border-left-radius($sliderKnobW);
+		cursor: w-resize;
+	}
+	.knob-r {
+		@include border-right-radius($sliderKnobW);
+		cursor: e-resize;
 	}
 	.range {
-		background: rgba($colorKey, 0.6);
+		@include trans-prop-nice-fade(.25s);
+		background-color: $sliderColorRange;
 		cursor: ew-resize;
 		position: absolute;
-		top: 0;
+		top: 0; //$tbOffset;
 		right: auto;
 		bottom: 0;
 		left: auto;
 		height: auto;
 		width: auto;
 		&:hover {
-			background: rgba($colorKey, 0.7);
+			background-color: $sliderColorRangeHov;
+		}
+	}
+}
+
+/******************************************************** DATETIME PICKER */
+.l-datetime-picker {
+	$r1H: 15px;
+	@include user-select(none);
+	font-size: 0.8rem;
+	padding: $interiorMarginLg !important;
+	width: 230px;
+	.l-month-year-pager {
+		$pagerW: 20px;
+		//@include test();
+		font-size: 0.8rem;
+		height: $r1H;
+		margin-bottom: $interiorMargin;
+		position: relative;
+		.pager,
+		.val {
+			//@include test(red);
+			@extend .abs;
+		}
+		.pager {
+			width: $pagerW;
+			@extend .ui-symbol;
+			&.prev {
+				right: auto;
+				&:before {
+					content: "\3c";
+				}
+			}
+			&.next {
+				left: auto;
+				text-align: right;
+				&:before {
+					content: "\3e";
+				}
+			}
+		}
+		.val {
+			text-align: center;
+			left: $pagerW + $interiorMargin;
+			right: $pagerW + $interiorMargin;
+		}
+	}
+	.l-calendar,
+	.l-time-selects {
+		border-top: 1px solid $colorInteriorBorder
+	}
+	.l-time-selects {
+		line-height: $formInputH;
+	}
+}
+
+/******************************************************** CALENDAR */
+.l-calendar {
+	$colorMuted: pushBack($colorMenuFg, 30%);
+	ul.l-cal-row {
+		@include display-flex;
+		@include flex-flow(row nowrap);
+		margin-top: 1px;
+		&:first-child {
+			margin-top: 0;
+		}
+		li {
+			@include flex(1 0);
+			//@include test();
+			margin-left: 1px;
+			padding: $interiorMargin;
+			text-align: center;
+			&:first-child {
+				margin-left: 0;
+			}
+		}
+		&.l-header li {
+			color: $colorMuted;
+		}
+		&.l-body li {
+			@include trans-prop-nice(background-color, .25s);
+			cursor: pointer;
+			&.in-month {
+				background-color: $colorCalCellInMonthBg;
+			}
+			.sub {
+				color: $colorMuted;
+				font-size: 0.8em;
+			}
+			&.selected {
+				background: $colorCalCellSelectedBg;
+				color: $colorCalCellSelectedFg;
+				.sub {
+					color: inherit;
+				}
+			}
+			&:hover {
+				background-color: $colorCalCellHovBg;
+				color: $colorCalCellHovFg;
+				.sub {
+					color: inherit;
+				}
+			}
 		}
 	}
 }
diff --git a/platform/commonUI/general/res/sass/controls/_menus.scss b/platform/commonUI/general/res/sass/controls/_menus.scss
index d9aecfd1c8..49693b3c59 100644
--- a/platform/commonUI/general/res/sass/controls/_menus.scss
+++ b/platform/commonUI/general/res/sass/controls/_menus.scss
@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /******************************************************** MENU BUTTONS */
-.s-menu {
+.s-menu-btn {
 	// Formerly .btn-menu
 	@extend .s-btn;
 	span.l-click-area {
@@ -62,186 +62,192 @@
 
 /******************************************************** MENUS THEMSELVES */
 .menu-element {
-	$bg: $colorMenuBg;
-	$fg: $colorMenuFg;
-	$ic: $colorMenuIc;
 	cursor: pointer;
 	position: relative;
-	.menu {
-		@include border-radius($basicCr);
-		@include containerSubtle($bg, $fg);
-		@include boxShdw($shdwMenu);
-		@include txtShdw($shdwMenuText);
-		display: block; // set to block via jQuery
-		padding: $interiorMarginSm 0;
-		position: absolute;
-		z-index: 10;
-		ul {
-			@include menuUlReset();
-			li {
-				@include box-sizing(border-box);
-				border-top: 1px solid lighten($bg, 20%);
-				color: pullForward($bg, 60%);
-				line-height: $menuLineH;
-				padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
-				position: relative;
-				white-space: nowrap;
-				&:first-child {
-					border: none;
-				}
-				&:hover {
-					background: $colorMenuHovBg;
-					color: $colorMenuHovFg;
-					.icon {
-						color: $colorMenuHovIc;
-					}
-				}
-				.type-icon {
-					left: $interiorMargin * 2;
-				}
-			}
-		}
-	}
+}
 
-	.menu,
-	.context-menu,
-	.super-menu {
-		pointer-events: auto;
-		ul li {
-			//padding-left: 25px;
-			a {
-				color: $fg;
-			}
-			.icon {
-				color: $ic;
-			}
-			.type-icon {
-				left: $interiorMargin;
-			}
-			&:hover .icon {
-				//color: lighten($ic, 5%);
-			}
-		}
-	}
+.s-menu {
+	@include border-radius($basicCr);
+	@include containerSubtle($colorMenuBg, $colorMenuFg);
+	@include boxShdw($shdwMenu);
+	@include txtShdw($shdwMenuText);
+	padding: $interiorMarginSm 0;
+}
 
-	.checkbox-menu {
-		// Used in search dropdown in tree
-		@extend .context-menu;
-		ul li {
-			padding-left: 50px;
-			.checkbox {
-				$d: 0.7rem;
-				position: absolute;
-				left: $interiorMargin;
-				top: ($menuLineH - $d) / 1.5;
-				em {
-					height: $d;
-					width: $d;
-					&:before {
-						font-size: 7px !important;// $d/2;
-						height: $d;
-						width: $d;
-						line-height: $d;
-					}
-				}
-			}
-			.type-icon {
-				left: 25px;
-			}
-		}
-	}
-
-	.super-menu {
-		$w: 500px;
-		$h: $w - 20;
-		$plw: 50%;
-		$prw: 50%;
-		display: block;
-		width: $w;
-		height: $h;
-		.contents {
-			@include absPosDefault($interiorMargin);
-		}
-		.pane {
+.menu {
+	@extend .s-menu;
+	display: block;
+	position: absolute;
+	z-index: 10;
+	ul {
+		@include menuUlReset();
+		li {
 			@include box-sizing(border-box);
-			&.left {
-				//@include test();
-				border-right: 1px solid pullForward($colorMenuBg, 10%);
-				left: 0;
-				padding-right: $interiorMargin;
-				right: auto;
-				width: $plw;
-				overflow-x: hidden;
-				overflow-y: auto;
-				ul {
-					li {
-						@include border-radius($controlCr);
-						padding-left: 30px;
-						border-top: none;
-					}
+			border-top: 1px solid lighten($colorMenuBg, 20%);
+			color: pullForward($colorMenuBg, 60%);
+			line-height: $menuLineH;
+			padding: $interiorMarginSm $interiorMargin * 2 $interiorMarginSm ($interiorMargin * 2) + $treeTypeIconW;
+			position: relative;
+			white-space: nowrap;
+			&:first-child {
+				border: none;
+			}
+			&:hover {
+				background: $colorMenuHovBg;
+				color: $colorMenuHovFg;
+				.icon {
+					color: $colorMenuHovIc;
 				}
 			}
-			&.right {
-				//@include test(red);
-				left: auto;
-				right: 0;
-				padding: $interiorMargin * 5;
-				width: $prw;
+			.type-icon {
+				left: $interiorMargin * 2;
 			}
 		}
-		.menu-item-description {
-			.desc-area {
-				&.icon {
-					$h: 150px;
-					color: $colorCreateMenuLgIcon;
-					position: relative;
-					font-size: 8em;
-					left: 0;
-					height: $h;
-					line-height: $h;
-					margin-bottom: $interiorMargin * 5;
-					text-align: center;
-				}
-				&.title {
-					color: $colorCreateMenuText;
-					font-size: 1.2em;
-					margin-bottom: 0.5em;
-				}
-				&.description {
-					//color: lighten($bg, 30%);
-					color: $colorCreateMenuText;
-					font-size: 0.8em;
-					line-height: 1.5em;
-				}
-			}
-		}
-	}
-	.context-menu {
-		font-size: 0.80rem;
 	}
 }
 
-.context-menu-holder {
-	pointer-events: none;
+.menu,
+.context-menu,
+.super-menu {
+	pointer-events: auto;
+	ul li {
+		//padding-left: 25px;
+		a {
+			color: $colorMenuFg;
+		}
+		.icon {
+			color: $colorMenuIc;
+		}
+		.type-icon {
+			left: $interiorMargin;
+		}
+		&:hover .icon {
+			//color: lighten($colorMenuIc, 5%);
+		}
+	}
+}
+
+.checkbox-menu {
+	// Used in search dropdown in tree
+	@extend .context-menu;
+	ul li {
+		padding-left: 50px;
+		.checkbox {
+			$d: 0.7rem;
+			position: absolute;
+			left: $interiorMargin;
+			top: ($menuLineH - $d) / 1.5;
+			em {
+				height: $d;
+				width: $d;
+				&:before {
+					font-size: 7px !important;// $d/2;
+					height: $d;
+					width: $d;
+					line-height: $d;
+				}
+			}
+		}
+		.type-icon {
+			left: 25px;
+		}
+	}
+}
+
+.super-menu {
+	$w: 500px;
+	$h: $w - 20;
+	$plw: 50%;
+	$prw: 50%;
+	display: block;
+	width: $w;
+	height: $h;
+	.contents {
+		@include absPosDefault($interiorMargin);
+	}
+	.pane {
+		@include box-sizing(border-box);
+		&.left {
+			//@include test();
+			border-right: 1px solid pullForward($colorMenuBg, 10%);
+			left: 0;
+			padding-right: $interiorMargin;
+			right: auto;
+			width: $plw;
+			overflow-x: hidden;
+			overflow-y: auto;
+			ul {
+				li {
+					@include border-radius($controlCr);
+					padding-left: 30px;
+					border-top: none;
+				}
+			}
+		}
+		&.right {
+			//@include test(red);
+			left: auto;
+			right: 0;
+			padding: $interiorMargin * 5;
+			width: $prw;
+		}
+	}
+	.menu-item-description {
+		.desc-area {
+			&.icon {
+				$h: 150px;
+				color: $colorCreateMenuLgIcon;
+				position: relative;
+				font-size: 8em;
+				left: 0;
+				height: $h;
+				line-height: $h;
+				margin-bottom: $interiorMargin * 5;
+				text-align: center;
+			}
+			&.title {
+				color: $colorCreateMenuText;
+				font-size: 1.2em;
+				margin-bottom: 0.5em;
+			}
+			&.description {
+				//color: lighten($colorMenuBg, 30%);
+				color: $colorCreateMenuText;
+				font-size: 0.8em;
+				line-height: 1.5em;
+			}
+		}
+	}
+}
+.context-menu {
+	font-size: 0.80rem;
+}
+
+.context-menu-holder,
+.menu-holder {
 	position: absolute;
-	height: 200px;
-	width: 170px;
 	z-index: 70;
 	.context-menu-wrapper {
 		position: absolute;
 		height: 100%;
 		width: 100%;
-		.context-menu {
-		}
 	}
-	&.go-left .context-menu {
+	&.go-left .context-menu,
+	&.go-left .menu {
 		right: 0;
 	}
-	&.go-up .context-menu {
+	&.go-up .context-menu,
+	&.go-up .menu {
 		bottom: 0;
 	}
 }
 
+.context-menu-holder {
+	pointer-events: none;
+	height: 200px;
+	width: 170px;
+}
+
 .btn-bar.right .menu,
 .menus-to-left .menu {
 	left: auto;
diff --git a/platform/commonUI/general/res/sass/controls/_time-controller.scss b/platform/commonUI/general/res/sass/controls/_time-controller.scss
index 6991617ae7..2167518494 100644
--- a/platform/commonUI/general/res/sass/controls/_time-controller.scss
+++ b/platform/commonUI/general/res/sass/controls/_time-controller.scss
@@ -1,13 +1,28 @@
-.l-time-controller {
-	$inputTxtW: 90px;
-	$knobW: 9px;
-	$r1H: 20px;
-	$r2H: 30px;
-	$r3H: 10px;
+@mixin toiLineHovEffects() {
+	//@include pulse(.25s);
+	&:before,
+	&:after {
+		background-color: $timeControllerToiLineColorHov;
+	}
+}
 
-	position: relative;
-	margin: $interiorMarginLg 0;
-	min-width: 400px;
+.l-time-controller-visible {
+
+}
+
+.l-time-controller {
+	$minW: 400px;
+	$knobHOffset: 0px;
+	$knobM: ($sliderKnobW + $knobHOffset) * -1;
+	$rangeValPad: $interiorMargin;
+	$rangeValOffset: $sliderKnobW;
+	//$knobCr: $sliderKnobW;
+	$timeRangeSliderLROffset: 130px + $sliderKnobW + $rangeValOffset;
+	$r1H: nth($ueTimeControlH,1);
+	$r2H: nth($ueTimeControlH,2);
+	$r3H: nth($ueTimeControlH,3);
+
+	//height: $r1H + $r2H + $r3H + ($interiorMargin * 2);
 
 	.l-time-range-inputs-holder,
 	.l-time-range-slider {
@@ -18,55 +33,118 @@
 	.l-time-range-slider-holder,
 	.l-time-range-ticks-holder
 	{
-		margin-bottom: $interiorMargin;
-		position: relative;
+		//@include test();
+		@include absPosDefault(0, visible);
+		@include box-sizing(border-box);
+		min-width: $minW;
+		top: auto;
 	}
 	.l-time-range-slider,
 	.l-time-range-ticks {
 		//@include test(red, 0.1);
 		@include absPosDefault(0, visible);
+		left: $timeRangeSliderLROffset; right: $timeRangeSliderLROffset;
 	}
 
 	.l-time-range-inputs-holder {
-		height: $r1H;
-	}
-
-	.l-time-range-slider,
-	.l-time-range-ticks {
-		left: $inputTxtW; right: $inputTxtW;
-
+		//@include test(red);
+		height: $r1H; bottom: $r2H + $r3H + ($interiorMarginSm * 2);
+		padding-top: $interiorMargin;
+		border-top: 1px solid $colorInteriorBorder;
+		.type-icon {
+			font-size: 120%;
+			vertical-align: middle;
+		}
+		.l-time-range-input,
+		.l-time-range-inputs-elem {
+			margin-right: $interiorMargin;
+			.lbl {
+				color: $colorPlotLabelFg;
+			}
+			.ui-symbol.icon {
+				font-size: 11px;
+				width: 11px;
+			}
+		}
 	}
 
 	.l-time-range-slider-holder {
-		height: $r2H;
+		//@include test(green);
+		height: $r2H; bottom: $r3H + ($interiorMarginSm * 1);
 		.range-holder {
 			@include box-shadow(none);
 			background: none;
 			border: none;
-			height: 75%;
+			.range {
+				.toi-line {
+					$myC: $timeControllerToiLineColor;
+					$myW: 8px;
+					@include transform(translateX(50%));
+					position: absolute;
+					//@include test();
+					top: 0; right: 0; bottom: 0px; left: auto;
+					width: $myW;
+					height: auto;
+					z-index: 2;
+					&:before,
+					&:after {
+						background-color: $myC;
+						content: "";
+						position: absolute;
+					}
+					&:before {
+						// Vert line
+						top: 0; right: auto; bottom: -10px; left: floor($myW/2) - 1;
+						width: 2px;
+						//top: 0; right: 3px; bottom: 0; left: 3px;
+					}
+					&:after {
+						// Circle element
+						@include border-radius($myW);
+						@include transform(translateY(-50%));
+						top: 50%; right: 0; bottom: auto; left: 0;
+						width: auto;
+						height: $myW;
+					}
+				}
+				&:hover .toi-line {
+					@include toiLineHovEffects;
+				}
+			}
+		}
+		&:not(:active) {
+			//@include test(#ff00cc);
+			.knob,
+			.range {
+				@include transition-property(left, right);
+				@include transition-duration(500ms);
+				@include transition-timing-function(ease-in-out);
+			}
 		}
 	}
 
 	.l-time-range-ticks-holder {
 		height: $r3H;
 		.l-time-range-ticks {
-			border-top: 1px solid $colorInteriorBorder;
+			border-top: 1px solid $colorTick;
 			.tick {
-				background-color: $colorInteriorBorder;
+				background-color: $colorTick;
 				border:none;
+				height: 5px;
 				width: 1px;
 				margin-left: -1px;
+				position: absolute;
 				&:first-child {
 					margin-left: 0;
 				}
 				.l-time-range-tick-label {
-					color: lighten($colorInteriorBorder, 20%);
+					@include webkitProp(transform, translateX(-50%));
+					color: $colorPlotLabelFg;
+					display: inline-block;
 					font-size: 0.7em;
 					position: absolute;
-					margin-left: -0.5 * $tickLblW;
-					text-align: center;
-					top: $r3H;
-					width: $tickLblW;
+					top: 8px;
+					white-space: nowrap;
 					z-index: 2;
 				}
 			}
@@ -74,31 +152,47 @@
 	}
 
 	.knob {
-		width: $knobW;
+		z-index: 2;
 		.range-value {
-			$w: 75px;
-			//@include test();
+			//@include test($sliderColorRange);
+			@include trans-prop-nice-fade(.25s);
+			padding: 0 $rangeValOffset;
 			position: absolute;
-			top: 50%;
-			margin-top: -7px; // Label is 13px high
+			height: $r2H;
+			line-height: $r2H;
 			white-space: nowrap;
-			width: $w;
 		}
 		&:hover .range-value {
-			color: $colorKey;
+			color: $sliderColorKnobHov;
 		}
 		&.knob-l {
-			margin-left: $knobW / -2;
+			//@include border-bottom-left-radius($knobCr); // MOVED TO _CONTROLS.SCSS
+			margin-left: $knobM;
 			.range-value {
 				text-align: right;
-				right: $knobW + $interiorMargin;
+				right: $rangeValOffset;
 			}
 		}
 		&.knob-r {
-			margin-right: $knobW / -2;
+			//@include border-bottom-right-radius($knobCr);
+			margin-right: $knobM;
 			.range-value {
-				left: $knobW + $interiorMargin;
+				left: $rangeValOffset;
+			}
+			&:hover + .range-holder .range .toi-line {
+				@include toiLineHovEffects;
 			}
 		}
 	}
+}
+
+//.slot.range-holder {
+//	background-color: $sliderColorRangeHolder;
+//}
+
+.s-time-range-val {
+	//@include test();
+	@include border-radius($controlCr);
+	background-color: $colorInputBg;
+	padding: 1px 1px 0 $interiorMargin;
 }
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/forms/_datetime.scss b/platform/commonUI/general/res/sass/forms/_datetime.scss
index 8378fdbabd..dbfacdeb0a 100644
--- a/platform/commonUI/general/res/sass/forms/_datetime.scss
+++ b/platform/commonUI/general/res/sass/forms/_datetime.scss
@@ -19,39 +19,44 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
+@mixin complexFieldHolder($myW) {
+	width: $myW + $interiorMargin;
+	input[type="text"] {
+		width: $myW;
+	}
+}
+
 .complex.datetime {
 	span {
 		display: inline-block;
 		margin-right: $interiorMargin;
 	}
-	
+
+/*
 	.field-hints,
 	.fields {
 	}
+
 	
 	.field-hints {
-		
+
 	}
-	
+	*/
+
 	.fields {
 		margin-top: $interiorMarginSm 0;
 		padding: $interiorMarginSm 0;
 	}
 	
 	.date {
-		$myW: 80px;
-		width: $myW + $interiorMargin;
-		input {
-			width: $myW;
-		}
-		
+		@include complexFieldHolder(80px);
+	}
+
+	.time.md {
+		@include complexFieldHolder(60px);
 	}
 	
 	.time.sm {
-		$myW: 40px;
-		width: $myW + $interiorMargin;
-		input {
-			width: $myW;
-		}
+		@include complexFieldHolder(40px);
 	}
 }
\ No newline at end of file
diff --git a/platform/commonUI/general/res/sass/forms/_selects.scss b/platform/commonUI/general/res/sass/forms/_selects.scss
index 2eda20dd6c..027678369c 100644
--- a/platform/commonUI/general/res/sass/forms/_selects.scss
+++ b/platform/commonUI/general/res/sass/forms/_selects.scss
@@ -21,10 +21,13 @@
  *****************************************************************************/
 .select {
 	@include btnSubtle($colorSelectBg);
-	margin: 0 0 2px 2px; // Needed to avoid dropshadow from being clipped by parent containers
+    @if $shdwBtns != none {
+	    margin: 0 0 2px 0; // Needed to avoid dropshadow from being clipped by parent containers
+    }
 	padding: 0 $interiorMargin;
     overflow: hidden;
 	position: relative;
+    line-height: $formInputH;
 	select {
 		@include appearance(none);
 		@include box-sizing(border-box);
@@ -40,11 +43,8 @@
 	}
 	&:after {
 		@include contextArrow();
+		pointer-events: none;
 		color: rgba($colorSelectFg, percentToDecimal($contrastInvokeMenuPercent));
-		//content:"v";
-		//display: block;
-		//font-family: 'symbolsfont';
-		//pointer-events: none;
 		position: absolute;
 		right: $interiorMargin; top: 0;
 	}
diff --git a/platform/commonUI/general/res/sass/lists/_tabular.scss b/platform/commonUI/general/res/sass/lists/_tabular.scss
index 161e7511a8..559f7324a4 100644
--- a/platform/commonUI/general/res/sass/lists/_tabular.scss
+++ b/platform/commonUI/general/res/sass/lists/_tabular.scss
@@ -40,6 +40,11 @@ table {
 	thead, .thead {
 		border-bottom: 1px solid $colorTabHeaderBorder;
 	}
+
+	&:not(.fixed-header) tr th {
+		background-color: $colorTabHeaderBg;
+	}
+
 	tbody, .tbody {
 		display: table-row-group;
 		tr, .tr {
@@ -64,7 +69,6 @@ table {
 			display: table-cell;
 		}
 		th, .th {
-			background-color: $colorTabHeaderBg;
 			border-left: 1px solid $colorTabHeaderBorder;
 			color: $colorTabHeaderFg;
 			padding: $tabularTdPadLR $tabularTdPadLR;
@@ -143,7 +147,7 @@ table {
 				position: absolute;
 				width: 100%;
 				height: $tabularHeaderH;
-				background: rgba(#fff, 0.15);
+				background-color: $colorTabHeaderBg;
 			}
 		}
 		tbody, .tbody {
diff --git a/platform/commonUI/general/res/sass/plots/_plots-main.scss b/platform/commonUI/general/res/sass/plots/_plots-main.scss
index 67acb46e28..c1ce9fa920 100644
--- a/platform/commonUI/general/res/sass/plots/_plots-main.scss
+++ b/platform/commonUI/general/res/sass/plots/_plots-main.scss
@@ -89,7 +89,7 @@ $plotDisplayArea: ($legendH + $interiorMargin, 0, $xBarH + $interiorMargin, $yBa
 	.gl-plot-label,
 	.l-plot-label {
 		//		@include test(yellow);
-		color: lighten($colorBodyFg, 20%);
+		color: $colorPlotLabelFg;
 		position: absolute;
 		text-align: center;
 //		text-transform: uppercase;
diff --git a/platform/commonUI/general/res/sass/user-environ/_frame.scss b/platform/commonUI/general/res/sass/user-environ/_frame.scss
index d8b27d7690..d1a38d4018 100644
--- a/platform/commonUI/general/res/sass/user-environ/_frame.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss
@@ -47,7 +47,7 @@
 	}
 	&.frame-template {
 		.s-btn,
-		.s-menu {
+		.s-menu-btn {
 			height: $ohH;
 			line-height: $ohH;
 			padding: 0 $interiorMargin;
@@ -56,7 +56,7 @@
 			}
 		}
 
-		.s-menu:after {
+		.s-menu-btn:after {
 			font-size: 8px;
 		}
 
diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss
index 4661c47214..bdfe716be3 100644
--- a/platform/commonUI/general/res/sass/user-environ/_layout.scss
+++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss
@@ -30,21 +30,21 @@
 }
 
 .holder-all {
-	$myM: 0; // $interiorMarginSm;
-	top: $myM;
-	right: $myM;
-	bottom: $myM;
-	left: $myM;
+    $myM: 0; // $interiorMarginSm;
+    top: $myM;
+    right: $myM;
+    bottom: $myM;
+    left: $myM;
 }
 
 .browse-area,
 .edit-area,
 .editor {
-	position: absolute;
+    position: absolute;
 }
 
 .editor {
-	@include border-radius($basicCr * 1.5);
+    @include border-radius($basicCr * 1.5);
 }
 
 .contents {
@@ -68,8 +68,8 @@
         margin-right: $interiorMargin;
     }
     &.abs {
-	    text-wrap: none;
-	    white-space: nowrap;
+        text-wrap: none;
+        white-space: nowrap;
         &.left,
         .left {
             width: 45%;
@@ -95,51 +95,51 @@
 }
 
 .user-environ {
-	.browse-area,
-	.edit-area,
-	.editor {
-		top: $bodyMargin + $ueTopBarH + ($interiorMargin);
-		right: $bodyMargin;
-		bottom: $ueFooterH + $bodyMargin;
-		left: $bodyMargin;
-	}
+    .browse-area,
+    .edit-area,
+    .editor {
+        top: $bodyMargin + $ueTopBarH + ($interiorMargin);
+        right: $bodyMargin;
+        bottom: $ueFooterH + $bodyMargin;
+        left: $bodyMargin;
+    }
 
-	.browse-area,
-	.edit-area {
-		> .contents {
-			left: 0;
-			right: 0;
-		}
-	}
+    .browse-area,
+    .edit-area {
+        > .contents {
+            left: 0;
+            right: 0;
+        }
+    }
 
-	.edit-area {
-		$tbH: $btnToolbarH + $interiorMargin;
-		top: $bodyMargin + $ueTopBarEditH + ($interiorMargin);
-		.tool-bar {
-			bottom: auto;
-			height: $tbH;
-			line-height: $btnToolbarH;
-		}
-		.work-area {
-			top: $tbH + $interiorMargin * 2;
-		}
-	}
+    .edit-area {
+        $tbH: $btnToolbarH + $interiorMargin;
+        top: $bodyMargin + $ueTopBarEditH + ($interiorMargin);
+        .tool-bar {
+            bottom: auto;
+            height: $tbH;
+            line-height: $btnToolbarH;
+        }
+        .work-area {
+            top: $tbH + $interiorMargin * 2;
+        }
+    }
 
-	.ue-bottom-bar {
+    .ue-bottom-bar {
         //@include absPosDefault($bodyMargin);
-		@include absPosDefault(0);// New status bar design
-		top: auto;
-		height: $ueFooterH;
-		.status-holder {
-			//right: $ueAppLogoW + $bodyMargin; New status bar design
-			z-index: 1;
-		}
-		.app-logo {
-			left: auto;
-			width: $ueAppLogoW;
-			z-index: 2;
-		}
-	}
+        @include absPosDefault(0); // New status bar design
+        top: auto;
+        height: $ueFooterH;
+        .status-holder {
+            //right: $ueAppLogoW + $bodyMargin; New status bar design
+            z-index: 1;
+        }
+        .app-logo {
+            left: auto;
+            width: $ueAppLogoW;
+            z-index: 2;
+        }
+    }
 }
 
 .cols {
@@ -225,89 +225,91 @@
     }
 }
 
-
-
 .pane {
     position: absolute;
     &.treeview.left {
-	    .create-btn-holder {
-		    bottom: auto; top: 0;
-		    height: $ueTopBarH;
-		    .wrapper.menu-element {
-			    position: absolute;
-			    bottom: $interiorMargin;
-		    }
-	    }
-	    .search-holder {
-		    top: $ueTopBarH + $interiorMarginLg;
-	    }
-	    .tree-holder {
-		    overflow: auto;
-			top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin;
-	    }
+        .create-btn-holder {
+            bottom: auto;
+            top: 0;
+            height: $ueTopBarH;
+            .wrapper.menu-element {
+                position: absolute;
+                bottom: $interiorMargin;
+            }
+        }
+        .search-holder {
+            top: $ueTopBarH + $interiorMarginLg;
+        }
+        .tree-holder {
+            overflow: auto;
+            top: $ueTopBarH + $interiorMarginLg + $treeSearchInputBarH + $interiorMargin;
+        }
     }
     &.items {
         .object-browse-bar {
-	        .left.abs,
-	        .right.abs {
-		        top: auto;
-	        }
-            //.left.abs {
-            //    @include tmpBorder(green);
-            //}
-            //.right.abs {
-            //    @include tmpBorder(red);
-            //}
-        }
-        .object-holder {
-            top: $ueTopBarH + $interiorMarginLg;
+            .left.abs,
+            .right.abs {
+                top: auto;
+            }
         }
     }
-	.object-holder {
-		overflow: auto;
-	}
 }
 
 .split-layout {
-	&.horizontal {
-		// Slides up and down
-		>.pane {
-//			@include test();
-			margin-top: $interiorMargin;
-			&:first-child {
-				margin-top: 0;
-			}
-		}
-	}
-	&.vertical {
-		// Slides left and right
-		>.pane {
-//            @include test();
-			margin-left: $interiorMargin;
-			>.holder {
-				left: 0;
-				right: 0;
-			}
-			&:first-child {
-				margin-left: 0;
-				.holder {
-					right: $interiorMarginSm;
-				}
-			}
-		}
+    &.horizontal {
+        // Slides up and down
+        > .pane {
+            //			@include test();
+            margin-top: $interiorMargin;
+            &:first-child {
+                margin-top: 0;
+            }
+        }
+    }
+    &.vertical {
+        // Slides left and right
+        > .pane {
+            //            @include test();
+            margin-left: $interiorMargin;
+            > .holder {
+                left: 0;
+                right: 0;
+            }
+            &:first-child {
+                margin-left: 0;
+                .holder {
+                    right: $interiorMarginSm;
+                }
+            }
+        }
 
-	}
+    }
+}
+
+.object-holder {
+    overflow: hidden; // Contained objects need to handle their own overflow now
+    top: $ueTopBarH + $interiorMarginLg;
+    > ng-include {
+        @include absPosDefault(0, auto);
+    }
+    &.l-controls-visible {
+        &.l-time-controller-visible {
+            > ng-include {
+                bottom: nth($ueTimeControlH,1) + nth($ueTimeControlH,2) +nth($ueTimeControlH,3) + ($interiorMargin * 3);
+            }
+        }
+    }
 }
 
 .object-browse-bar .s-btn,
 .top-bar .buttons-main .s-btn,
-.top-bar .s-menu,
+.top-bar .s-menu-btn,
 .tool-bar .s-btn,
-.tool-bar .s-menu {
-	$h: $btnToolbarH;
-	height: $h;
-	line-height: $h;
-	vertical-align: top;
+.tool-bar .s-menu-btn {
+    $h: $btnToolbarH;
+    height: $h;
+    line-height: $h;
+    vertical-align: top;
 }
 
 .object-browse-bar,
@@ -318,33 +320,29 @@
 }
 
 .object-browse-bar {
-	//@include test(blue);
-	@include absPosDefault(0, visible);
-	@include box-sizing(border-box);
-	height: $ueTopBarH;
-	line-height: $ueTopBarH;
-	white-space: nowrap;
+    //@include test(blue);
+    @include absPosDefault(0, visible);
+    @include box-sizing(border-box);
+    height: $ueTopBarH;
+    line-height: $ueTopBarH;
+    white-space: nowrap;
 
-	.left {
-		padding-right: $interiorMarginLg * 2;
-		.l-back {
-			display: inline-block;
-			float: left;
-			margin-right: $interiorMarginLg;
-		}
-	}
+    .left {
+        padding-right: $interiorMarginLg * 2;
+        .l-back {
+            display: inline-block;
+            float: left;
+            margin-right: $interiorMarginLg;
+        }
+    }
 }
 
 .l-flex {
-	@include webkitVal('display', 'flex');
-	@include webkitProp('flex-flow', 'row nowrap');
-	.left {
-		//@include test(red);
-		@include webkitProp(flex, '1 1 0');
-		padding-right: $interiorMarginLg;
-	}
-}
-
-.vscroll {
-    overflow-y: auto;
-}
+    @include webkitVal('display', 'flex');
+    @include webkitProp('flex-flow', 'row nowrap');
+    .left {
+        //@include test(red);
+        @include webkitProp(flex, '1 1 0');
+        padding-right: $interiorMarginLg;
+    }
+}
\ No newline at end of file
diff --git a/platform/commonUI/general/res/templates/controls/datetime-picker.html b/platform/commonUI/general/res/templates/controls/datetime-picker.html
index dd774588d6..bca8064b74 100644
--- a/platform/commonUI/general/res/templates/controls/datetime-picker.html
+++ b/platform/commonUI/general/res/templates/controls/datetime-picker.html
@@ -20,42 +20,47 @@
  at runtime from the About dialog for additional information.
 -->
 
-<div ng-controller="DateTimePickerController">
-    <div style="vertical-align: top; display: inline-block">
-        <div style="text-align: center;">
-            <a ng-click="changeMonth(-1)">&lt;</a>
-            {{month}} {{year}}
-            <a ng-click="changeMonth(1)">&gt;</a>
-        </div>
-        <div>
-            <table>
-                <tr>
-                    <th ng-repeat="day in ['Su','Mo','Tu','We','Th','Fr','Sa']">
-                        {{day}}
-                    </th>
-                </tr>
-                <tr ng-repeat="row in table">
-                    <td style="text-align: center;"
-                        ng-repeat="cell in row"
-                        ng-click="select(cell)"
-                        ng-class='{
-                                  disabled: !isSelectable(cell),
-                                  test: isSelected(cell)
-                                  }'>
-                        <div>{{cell.day}}</div>
-                        <div style="font-size: 80%">{{cell.dayOfYear}}</div>
-                    </td>
-                </tr>
-            </table>
-        </div>
-    </div>
-    <div style="vertical-align: top; display: inline-block"
-         ng-repeat="key in ['hours', 'minutes', 'seconds']"
-         ng-if="options[key]">
-        <div>{{nameFor(key)}}</div>
-        <select size="10"
-                ng-model="time[key]"
-                ng-options="i for i in optionsFor(key)">
-        </select>
-    </div>
+<div ng-controller="DateTimePickerController" class="l-datetime-picker s-datetime-picker s-menu">
+	<div class="holder">
+		<div class="l-month-year-pager">
+			<a class="pager prev" ng-click="changeMonth(-1)"></a>
+			<span class="val">{{month}} {{year}}</span>
+			<a class="pager next" ng-click="changeMonth(1)"></a>
+		</div>
+		<div class="l-calendar">
+			<ul class="l-cal-row l-header">
+				<li ng-repeat="day in ['Su','Mo','Tu','We','Th','Fr','Sa']">{{day}}</li>
+			</ul>
+			<ul class="l-cal-row l-body" ng-repeat="row in table">
+				<li ng-repeat="cell in row"
+					ng-click="select(cell)"
+					ng-class='{ "in-month": isInCurrentMonth(cell), selected: isSelected(cell) }'>
+					<div class="prime">{{cell.day}}</div>
+					<div class="sub">{{cell.dayOfYear}}</div>
+				</li>
+			</ul>
+		</div>
+	</div>
+	<div class="l-time-selects complex datetime"
+			ng-show="options">
+		<div class="field-hints">
+			<span class="hint time md"
+				  ng-repeat="key in ['hours', 'minutes', 'seconds']"
+				  ng-if="options[key]">
+				{{nameFor(key)}}
+			</span>
+		</div>
+		<div>
+			<span class="field control time md"
+				  ng-repeat="key in ['hours', 'minutes', 'seconds']"
+				  ng-if="options[key]">
+				<div class='form-control select'>
+					<select size="1"
+							ng-model="time[key]"
+							ng-options="i for i in optionsFor(key)">
+					</select>
+				</div>
+			</span>
+		</div>
+	</div>
 </div>
diff --git a/platform/commonUI/general/res/templates/controls/switcher.html b/platform/commonUI/general/res/templates/controls/switcher.html
index c47263ddf2..5e849f8657 100644
--- a/platform/commonUI/general/res/templates/controls/switcher.html
+++ b/platform/commonUI/general/res/templates/controls/switcher.html
@@ -21,7 +21,7 @@
 -->
 <span ng-controller="ViewSwitcherController">
     <div
-	    class="view-switcher menu-element s-menu"
+	    class="view-switcher menu-element s-menu-btn"
 	    ng-if="view.length > 1"
 	    ng-controller="ClickAwayController as toggle"
 	    >
diff --git a/platform/commonUI/general/res/templates/controls/time-controller.html b/platform/commonUI/general/res/templates/controls/time-controller.html
index b223513859..61a4feedb8 100644
--- a/platform/commonUI/general/res/templates/controls/time-controller.html
+++ b/platform/commonUI/general/res/templates/controls/time-controller.html
@@ -19,78 +19,84 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-
+<!-- MINE -->
 <div class="l-time-controller" ng-controller="TimeRangeController">
-    <div class="l-time-range-inputs-holder">
-        Start: {{startOuterText}}
-        <span ng-controller="ToggleController as t">
-            <a class="ui-symbol" ng-click="t.toggle()">p</a>
-            <mct-popup ng-if="t.isActive()">
-                <div style="background: #222;"
-                     mct-click-elsewhere="t.setState(false)">
-                    <mct-control key="'datetime-picker'"
-                                 ng-model="ngModel.outer"
-                                 field="'start'"
-                                 options="{ hours: true }">
-                    </mct-control>
-                </div>
-            </mct-popup>
-        </span>
+	<div class="l-time-range-inputs-holder">
+		<span class="l-time-range-inputs-elem ui-symbol type-icon">&#x43;</span>
+	    <span class="l-time-range-input" ng-controller="ToggleController as t1">
+	        <!--<span class="lbl">Start</span>-->
+		    <span class="s-btn time-range-start" ng-click="t1.toggle()">
+		        <span class="val">{{startOuterText}}</span>
+	            <a class="ui-symbol icon icon-calendar"></a>
+	            <mct-popup ng-if="t1.isActive()">
+		            <div mct-click-elsewhere="t1.setState(false)">
+			            <mct-control key="'datetime-picker'"
+			                         ng-model="ngModel.outer"
+			                         field="'start'"
+			                         options="{ hours: true }">
+			            </mct-control>
+		            </div>
+	            </mct-popup>
+		    </span>
+	    </span>
 
-        End: {{endOuterText}}
-        <span ng-controller="ToggleController as t2">
-            <a class="ui-symbol" ng-click="t2.toggle()">p</a>
-            <mct-popup ng-if="t2.isActive()">
-                <div style="background: #222;"
-                     mct-click-elsewhere="t2.setState(false)">
-                    <mct-control key="'datetime-picker'"
-                                 ng-model="ngModel.outer"
-                                 field="'end'"
-                                 options="{ hours: true }">
-                    </mct-control>
-                </div>
-            </mct-popup>
-        </span>
+		<span class="l-time-range-inputs-elem lbl">to</span>
 
+	    <span class="l-time-range-input" ng-controller="ToggleController as t2">
+	        <!--<span class="lbl">End</span>-->
+		    <span class="s-btn l-time-range-input" ng-click="t2.toggle()">
+			    <span class="val">{{endOuterText}}</span>
+	            <a class="ui-symbol icon icon-calendar"></a>
+	            <mct-popup ng-if="t2.isActive()">
+		            <div mct-click-elsewhere="t2.setState(false)">
+			            <mct-control key="'datetime-picker'"
+			                         ng-model="ngModel.outer"
+			                         field="'end'"
+			                         options="{ hours: true }">
+			            </mct-control>
+		            </div>
+	            </mct-popup>
+		    </span>&nbsp;
+	    </span>
+	</div>
 
-    </div>
+	<div class="l-time-range-slider-holder">
+		<div class="l-time-range-slider">
+			<div class="slider"
+			     mct-resize="spanWidth = bounds.width">
+				<div class="knob knob-l"
+				     mct-drag-down="startLeftDrag()"
+				     mct-drag="leftDrag(delta[0])"
+				     ng-style="{ left: startInnerPct }">
+					<div class="range-value">{{startInnerText}}</div>
+				</div>
+				<div class="knob knob-r"
+				     mct-drag-down="startRightDrag()"
+				     mct-drag="rightDrag(delta[0])"
+				     ng-style="{ right: endInnerPct }">
+					<div class="range-value">{{endInnerText}}</div>
+				</div>
+				<div class="slot range-holder">
+					<div class="range"
+					     mct-drag-down="startMiddleDrag()"
+					     mct-drag="middleDrag(delta[0])"
+					     ng-style="{ left: startInnerPct, right: endInnerPct}">
+						<div class="toi-line"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
 
-    <div class="l-time-range-slider-holder">
-        <div class="l-time-range-slider">
-            <div class="slider"
-                 mct-resize="spanWidth = bounds.width">
-                <div class="slot range-holder">
-                    <div class="range"
-                         mct-drag-down="startMiddleDrag()"
-                         mct-drag="middleDrag(delta[0])"
-                         ng-style="{ left: startInnerPct, right: endInnerPct}">
-                    </div>
-                </div>
-                <div class="knob knob-l"
-                     mct-drag-down="startLeftDrag()"
-                     mct-drag="leftDrag(delta[0])"
-                     ng-style="{ left: startInnerPct }">
-                    <div class="range-value">{{startInnerText}}</div>
-                </div>
-                <div class="knob knob-r"
-                     mct-drag-down="startRightDrag()"
-                     mct-drag="rightDrag(delta[0])"
-                     ng-style="{ right: endInnerPct }">
-                    <div class="range-value">{{endInnerText}}</div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <div class="l-time-range-ticks-holder">
-        <div class="l-time-range-ticks">
-            <div
-                ng-repeat="tick in ticks"
-                ng-style="{ left: $index * (100 / (ticks.length - 1)) + '%' }"
-                class="tick tick-x"
-                >
-                <span class="l-time-range-tick-label">{{tick}}</span>
-            </div>
-        </div>
-    </div>
-</div>
+	<div class="l-time-range-ticks-holder">
+		<div class="l-time-range-ticks">
+			<div
+				ng-repeat="tick in ticks"
+				ng-style="{ left: $index * (100 / (ticks.length - 1)) + '%' }"
+				class="tick tick-x"
+				>
+				<span class="l-time-range-tick-label">{{tick}}</span>
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file
diff --git a/platform/commonUI/general/src/controllers/DateTimePickerController.js b/platform/commonUI/general/src/controllers/DateTimePickerController.js
index 11214d9357..ac07d77553 100644
--- a/platform/commonUI/general/src/controllers/DateTimePickerController.js
+++ b/platform/commonUI/general/src/controllers/DateTimePickerController.js
@@ -138,7 +138,7 @@ define(
                 $scope.ngModel[$scope.field] = m.valueOf();
             }
 
-            $scope.isSelectable = function (cell) {
+            $scope.isInCurrentMonth = function (cell) {
                 return cell.month === month;
             };
 
diff --git a/platform/commonUI/general/src/controllers/TimeRangeController.js b/platform/commonUI/general/src/controllers/TimeRangeController.js
index ac111ab1a9..c979f03a47 100644
--- a/platform/commonUI/general/src/controllers/TimeRangeController.js
+++ b/platform/commonUI/general/src/controllers/TimeRangeController.js
@@ -26,7 +26,9 @@ define(
     function (moment) {
         "use strict";
 
-        var DATE_FORMAT = "YYYY-MM-DD HH:mm:ss";
+        var
+				DATE_FORMAT = "YYYY-MM-DD HH:mm:ss",
+				TICK_SPACING_PX = 150;
 
         /**
          * @memberof platform/commonUI/general
@@ -59,8 +61,7 @@ define(
             }
 
             function updateSpanWidth(w) {
-                // Space about 100px apart
-                tickCount = Math.max(Math.floor(w / 100), 2);
+                tickCount = Math.max(Math.floor(w / TICK_SPACING_PX), 2);
                 updateTicks();
             }
 
diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
index 6eb39c0b0a..4950c5b6c2 100644
--- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css
+++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
@@ -247,7 +247,7 @@ a.disabled {
 
 /* line 42, ../../../../general/res/sass/_effects.scss */
 .test {
-  background-color: rgba(255, 204, 0, 0.2); }
+  background-color: rgba(255, 204, 0, 0.2) !important; }
 
 @-moz-keyframes pulse {
   0% {
@@ -314,7 +314,7 @@ a.disabled {
   font-weight: normal;
   font-style: normal; }
 /* line 37, ../../../../general/res/sass/_global.scss */
-.ui-symbol {
+.ui-symbol, .l-datetime-picker .l-month-year-pager .pager {
   font-family: 'symbolsfont'; }
 
 /************************** HTML ENTITIES */
@@ -373,7 +373,8 @@ mct-container {
   display: block; }
 
 /* line 97, ../../../../general/res/sass/_global.scss */
-.abs, .s-menu span.l-click-area {
+.abs, .l-datetime-picker .l-month-year-pager .pager,
+.l-datetime-picker .l-month-year-pager .val, .s-menu-btn span.l-click-area {
   position: absolute;
   top: 0;
   right: 0;
@@ -403,21 +404,29 @@ mct-container {
   text-align: center; }
 
 /* line 128, ../../../../general/res/sass/_global.scss */
+.scrolling {
+  overflow: auto; }
+
+/* line 132, ../../../../general/res/sass/_global.scss */
+.vscroll {
+  overflow-y: auto; }
+
+/* line 136, ../../../../general/res/sass/_global.scss */
 .no-margin {
   margin: 0; }
 
-/* line 132, ../../../../general/res/sass/_global.scss */
+/* line 140, ../../../../general/res/sass/_global.scss */
 .ds {
   -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; }
 
-/* line 136, ../../../../general/res/sass/_global.scss */
+/* line 144, ../../../../general/res/sass/_global.scss */
 .hide,
 .hidden {
   display: none !important; }
 
-/* line 141, ../../../../general/res/sass/_global.scss */
+/* line 149, ../../../../general/res/sass/_global.scss */
 .sep {
   color: rgba(255, 255, 255, 0.2); }
 
@@ -443,7 +452,8 @@ mct-container {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* line 26, ../../../../general/res/sass/_about.scss */
-.l-about.abs, .s-menu span.l-about.l-click-area {
+.l-about.abs, .l-datetime-picker .l-month-year-pager .l-about.pager,
+.l-datetime-picker .l-month-year-pager .l-about.val, .s-menu-btn span.l-about.l-click-area {
   overflow: auto; }
 /* line 31, ../../../../general/res/sass/_about.scss */
 .l-about .l-logo-holder {
@@ -493,7 +503,7 @@ mct-container {
   .s-about .s-logo-openmctweb {
     background-image: url("../../../../general/res/images/logo-openmctweb-shdw.svg"); }
   /* line 81, ../../../../general/res/sass/_about.scss */
-  .s-about .s-btn, .s-about .s-menu {
+  .s-about .s-btn, .s-about .s-menu-btn {
     line-height: 2em; }
   /* line 85, ../../../../general/res/sass/_about.scss */
   .s-about .l-licenses-software .l-license-software {
@@ -534,7 +544,8 @@ mct-container {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* line 24, ../../../../general/res/sass/_text.scss */
-.abs.l-standalone, .s-menu span.l-standalone.l-click-area {
+.abs.l-standalone, .l-datetime-picker .l-month-year-pager .l-standalone.pager,
+.l-datetime-picker .l-month-year-pager .l-standalone.val, .s-menu-btn span.l-standalone.l-click-area {
   padding: 5% 20%; }
 
 /* line 29, ../../../../general/res/sass/_text.scss */
@@ -596,46 +607,52 @@ mct-container {
     border-right: 5px solid transparent; }
 
 /* line 32, ../../../../general/res/sass/_icons.scss */
-.ui-symbol.icon {
+.ui-symbol.type-icon, .l-datetime-picker .l-month-year-pager .type-icon.pager {
+  color: #cccccc; }
+/* line 35, ../../../../general/res/sass/_icons.scss */
+.ui-symbol.icon, .l-datetime-picker .l-month-year-pager .icon.pager {
   color: #0099cc; }
-  /* line 34, ../../../../general/res/sass/_icons.scss */
-  .ui-symbol.icon.alert {
+  /* line 37, ../../../../general/res/sass/_icons.scss */
+  .ui-symbol.icon.alert, .l-datetime-picker .l-month-year-pager .icon.alert.pager {
     color: #ff3c00; }
-    /* line 36, ../../../../general/res/sass/_icons.scss */
-    .ui-symbol.icon.alert:hover {
+    /* line 39, ../../../../general/res/sass/_icons.scss */
+    .ui-symbol.icon.alert:hover, .l-datetime-picker .l-month-year-pager .icon.alert.pager:hover {
       color: #ff8a66; }
-  /* line 40, ../../../../general/res/sass/_icons.scss */
-  .ui-symbol.icon.major {
+  /* line 43, ../../../../general/res/sass/_icons.scss */
+  .ui-symbol.icon.major, .l-datetime-picker .l-month-year-pager .icon.major.pager {
     font-size: 1.65em; }
+/* line 47, ../../../../general/res/sass/_icons.scss */
+.ui-symbol.icon-calendar:after, .l-datetime-picker .l-month-year-pager .icon-calendar.pager:after {
+  content: "\e605"; }
 
-/* line 46, ../../../../general/res/sass/_icons.scss */
-.bar .ui-symbol {
+/* line 52, ../../../../general/res/sass/_icons.scss */
+.bar .ui-symbol, .bar .l-datetime-picker .l-month-year-pager .pager, .l-datetime-picker .l-month-year-pager .bar .pager {
   display: inline-block; }
 
-/* line 50, ../../../../general/res/sass/_icons.scss */
+/* line 56, ../../../../general/res/sass/_icons.scss */
 .invoke-menu {
   text-shadow: none;
   display: inline-block; }
 
-/* line 55, ../../../../general/res/sass/_icons.scss */
-.s-menu .invoke-menu,
+/* line 61, ../../../../general/res/sass/_icons.scss */
+.s-menu-btn .invoke-menu,
 .icon.major .invoke-menu {
   margin-left: 3px; }
 
-/* line 60, ../../../../general/res/sass/_icons.scss */
+/* line 66, ../../../../general/res/sass/_icons.scss */
 .menu .type-icon,
 .tree-item .type-icon,
 .super-menu.menu .type-icon {
   position: absolute; }
 
-/* line 70, ../../../../general/res/sass/_icons.scss */
+/* line 76, ../../../../general/res/sass/_icons.scss */
 .l-icon-link:before {
   content: "\f4"; }
 
-/* line 74, ../../../../general/res/sass/_icons.scss */
+/* line 80, ../../../../general/res/sass/_icons.scss */
 .l-icon-alert {
   display: none !important; }
-  /* line 76, ../../../../general/res/sass/_icons.scss */
+  /* line 82, ../../../../general/res/sass/_icons.scss */
   .l-icon-alert:before {
     color: #ff3c00;
     content: "!"; }
@@ -1254,7 +1271,7 @@ mct-container {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* line 25, ../../../../general/res/sass/controls/_buttons.scss */
-.s-btn, .s-menu {
+.s-btn, .s-menu-btn {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
@@ -1269,23 +1286,23 @@ mct-container {
   padding: 0 7.5px;
   font-size: 0.7rem; }
   /* line 35, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn .icon, .s-menu .icon {
+  .s-btn .icon, .s-menu-btn .icon {
     font-size: 0.8rem;
     color: #0099cc; }
   /* line 40, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn .title-label, .s-menu .title-label {
+  .s-btn .title-label, .s-menu-btn .title-label {
     vertical-align: top; }
   /* line 44, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.lg, .lg.s-menu {
+  .s-btn.lg, .lg.s-menu-btn {
     font-size: 1rem; }
   /* line 48, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.sm, .sm.s-menu {
+  .s-btn.sm, .sm.s-menu-btn {
     padding: 0 5px; }
   /* line 52, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.vsm, .vsm.s-menu {
+  .s-btn.vsm, .vsm.s-menu-btn {
     padding: 0 2.5px; }
   /* line 56, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.major, .major.s-menu {
+  .s-btn.major, .major.s-menu-btn {
     background-color: #0099cc;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
@@ -1312,19 +1329,19 @@ mct-container {
     -o-transition: background, 0.25s;
     -webkit-transition: background, 0.25s;
     transition: background, 0.25s;
-    text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; }
+    text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; }
     /* line 272, ../../../../general/res/sass/_mixins.scss */
-    .s-btn.major .icon, .major.s-menu .icon {
+    .s-btn.major .icon, .major.s-menu-btn .icon {
       color: #fff; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
       /* line 277, ../../../../general/res/sass/_mixins.scss */
-      .s-btn.major:not(.disabled):hover, .major.s-menu:not(.disabled):hover {
+      .s-btn.major:not(.disabled):hover, .major.s-menu-btn:not(.disabled):hover {
         background: linear-gradient(#1ac6ff, #00bfff); }
         /* line 279, ../../../../general/res/sass/_mixins.scss */
-        .s-btn.major:not(.disabled):hover > .icon, .major.s-menu:not(.disabled):hover > .icon {
+        .s-btn.major:not(.disabled):hover > .icon, .major.s-menu-btn:not(.disabled):hover > .icon {
           color: white; } }
   /* line 62, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn:not(.major), .s-menu:not(.major) {
+  .s-btn:not(.major), .s-menu-btn:not(.major) {
     background-color: #454545;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
@@ -1351,22 +1368,22 @@ mct-container {
     -o-transition: background, 0.25s;
     -webkit-transition: background, 0.25s;
     transition: background, 0.25s;
-    text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; }
+    text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; }
     /* line 272, ../../../../general/res/sass/_mixins.scss */
-    .s-btn:not(.major) .icon, .s-menu:not(.major) .icon {
+    .s-btn:not(.major) .icon, .s-menu-btn:not(.major) .icon {
       color: #0099cc; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
       /* line 277, ../../../../general/res/sass/_mixins.scss */
-      .s-btn:not(.major):not(.disabled):hover, .s-menu:not(.major):not(.disabled):hover {
+      .s-btn:not(.major):not(.disabled):hover, .s-menu-btn:not(.major):not(.disabled):hover {
         background: linear-gradient(#6b6b6b, #5e5e5e); }
         /* line 279, ../../../../general/res/sass/_mixins.scss */
-        .s-btn:not(.major):not(.disabled):hover > .icon, .s-menu:not(.major):not(.disabled):hover > .icon {
+        .s-btn:not(.major):not(.disabled):hover > .icon, .s-menu-btn:not(.major):not(.disabled):hover > .icon {
           color: #33ccff; } }
   /* line 71, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.pause-play .icon:before, .pause-play.s-menu .icon:before {
+  .s-btn.pause-play .icon:before, .pause-play.s-menu-btn .icon:before {
     content: "\0000F1"; }
   /* line 74, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.pause-play.paused, .pause-play.paused.s-menu {
+  .s-btn.pause-play.paused, .pause-play.paused.s-menu-btn {
     background-color: #c56f01;
     -moz-border-radius: 3px;
     -webkit-border-radius: 3px;
@@ -1393,19 +1410,19 @@ mct-container {
     -o-transition: background, 0.25s;
     -webkit-transition: background, 0.25s;
     transition: background, 0.25s;
-    text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; }
+    text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; }
     /* line 272, ../../../../general/res/sass/_mixins.scss */
-    .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu .icon {
+    .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu-btn .icon {
       color: #fff; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
       /* line 277, ../../../../general/res/sass/_mixins.scss */
-      .s-btn.pause-play.paused:not(.disabled):hover, .pause-play.paused.s-menu:not(.disabled):hover {
+      .s-btn.pause-play.paused:not(.disabled):hover, .pause-play.paused.s-menu-btn:not(.disabled):hover {
         background: linear-gradient(#fe9815, #f88c01); }
         /* line 279, ../../../../general/res/sass/_mixins.scss */
-        .s-btn.pause-play.paused:not(.disabled):hover > .icon, .pause-play.paused.s-menu:not(.disabled):hover > .icon {
+        .s-btn.pause-play.paused:not(.disabled):hover > .icon, .pause-play.paused.s-menu-btn:not(.disabled):hover > .icon {
           color: white; } }
     /* line 76, ../../../../general/res/sass/controls/_buttons.scss */
-    .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu .icon {
+    .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu-btn .icon {
       -moz-animation-name: pulse;
       -webkit-animation-name: pulse;
       animation-name: pulse;
@@ -1422,23 +1439,23 @@ mct-container {
       -webkit-animation-timing-function: ease-in-out;
       animation-timing-function: ease-in-out; }
       /* line 78, ../../../../general/res/sass/controls/_buttons.scss */
-      .s-btn.pause-play.paused .icon :before, .pause-play.paused.s-menu .icon :before {
+      .s-btn.pause-play.paused .icon :before, .pause-play.paused.s-menu-btn .icon :before {
         content: "\0000EF"; }
   /* line 86, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.show-thumbs .icon:before, .show-thumbs.s-menu .icon:before {
+  .s-btn.show-thumbs .icon:before, .show-thumbs.s-menu-btn .icon:before {
     content: "\000039"; }
 
 /* line 92, ../../../../general/res/sass/controls/_buttons.scss */
 .l-btn-set {
   font-size: 0; }
   /* line 98, ../../../../general/res/sass/controls/_buttons.scss */
-  .l-btn-set .s-btn, .l-btn-set .s-menu {
+  .l-btn-set .s-btn, .l-btn-set .s-menu-btn {
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
     border-radius: 0;
     margin-left: 1px; }
   /* line 104, ../../../../general/res/sass/controls/_buttons.scss */
-  .l-btn-set .first .s-btn, .l-btn-set .first .s-menu {
+  .l-btn-set .first .s-btn, .l-btn-set .first .s-menu-btn {
     -moz-border-radius-topleft: 3px;
     -webkit-border-top-left-radius: 3px;
     border-top-left-radius: 3px;
@@ -1447,7 +1464,7 @@ mct-container {
     border-bottom-left-radius: 3px;
     margin-left: 0; }
   /* line 111, ../../../../general/res/sass/controls/_buttons.scss */
-  .l-btn-set .last .s-btn, .l-btn-set .last .s-menu {
+  .l-btn-set .last .s-btn, .l-btn-set .last .s-menu-btn {
     -moz-border-radius-topright: 3px;
     -webkit-border-top-right-radius: 3px;
     border-top-right-radius: 3px;
@@ -1456,7 +1473,7 @@ mct-container {
     border-bottom-right-radius: 3px; }
 
 /* line 118, ../../../../general/res/sass/controls/_buttons.scss */
-.paused:not(.s-btn):not(.s-menu) {
+.paused:not(.s-btn):not(.s-menu-btn) {
   border-color: #c56f01 !important;
   color: #c56f01 !important; }
 
@@ -1744,7 +1761,7 @@ label.checkbox.custom {
     margin-left: 0; }
 
 /* line 208, ../../../../general/res/sass/controls/_controls.scss */
-.s-menu label.checkbox.custom {
+.s-menu-btn label.checkbox.custom {
   margin-left: 5px; }
 
 /* line 213, ../../../../general/res/sass/controls/_controls.scss */
@@ -1831,119 +1848,72 @@ label.checkbox.custom {
       opacity: 1; } }
 
 /******************************************************** SLIDERS */
-/* line 300, ../../../../general/res/sass/controls/_controls.scss */
+/* line 298, ../../../../general/res/sass/controls/_controls.scss */
 .slider .slot {
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
-  -webkit-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
-  box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
-  background-color: rgba(0, 0, 0, 0.4);
-  height: 50%;
   width: auto;
   position: absolute;
-  top: 25%;
+  top: 0;
   right: 0;
-  bottom: auto;
+  bottom: 0;
   left: 0; }
-/* line 311, ../../../../general/res/sass/controls/_controls.scss */
+/* line 308, ../../../../general/res/sass/controls/_controls.scss */
 .slider .knob {
-  background-color: #333;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  color: #999;
-  display: inline-block;
-  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzMzMzMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-  background-size: 100%;
-  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #404040), color-stop(100%, #333333));
-  background-image: -moz-linear-gradient(#404040, #333333);
-  background-image: -webkit-linear-gradient(#404040, #333333);
-  background-image: linear-gradient(#404040, #333333);
-  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-  -moz-user-select: -moz-none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-  -moz-transition: background, 0.25s;
-  -o-transition: background, 0.25s;
-  -webkit-transition: background, 0.25s;
-  transition: background, 0.25s;
-  text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
-  cursor: ew-resize;
+  -moz-transition-property: visibility, opacity, background-color, border-color;
+  -o-transition-property: visibility, opacity, background-color, border-color;
+  -webkit-transition-property: visibility, opacity, background-color, border-color;
+  transition-property: visibility, opacity, background-color, border-color;
+  -moz-transition-duration: 0.25s;
+  -o-transition-duration: 0.25s;
+  -webkit-transition-duration: 0.25s;
+  transition-duration: 0.25s;
+  -moz-transition-timing-function: ease-in-out;
+  -o-transition-timing-function: ease-in-out;
+  -webkit-transition-timing-function: ease-in-out;
+  transition-timing-function: ease-in-out;
+  background-color: rgba(0, 153, 204, 0.6);
   position: absolute;
   height: 100%;
-  width: 12px;
+  width: 10px;
   top: 0;
   auto: 0;
   bottom: auto;
   left: auto; }
-  /* line 272, ../../../../general/res/sass/_mixins.scss */
-  .slider .knob .icon {
-    color: #0099cc; }
-  @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-    /* line 277, ../../../../general/res/sass/_mixins.scss */
-    .slider .knob:not(.disabled):hover {
-      background: linear-gradient(#595959, #4d4d4d); }
-      /* line 279, ../../../../general/res/sass/_mixins.scss */
-      .slider .knob:not(.disabled):hover > .icon {
-        color: #33ccff; } }
-  /* line 159, ../../../../general/res/sass/_mixins.scss */
-  .slider .knob:before {
-    -moz-transition-property: "border-color";
-    -o-transition-property: "border-color";
-    -webkit-transition-property: "border-color";
-    transition-property: "border-color";
-    -moz-transition-duration: 0.75s;
-    -o-transition-duration: 0.75s;
-    -webkit-transition-duration: 0.75s;
-    transition-duration: 0.75s;
-    -moz-transition-timing-function: ease-in-out;
-    -o-transition-timing-function: ease-in-out;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-timing-function: ease-in-out;
-    content: '';
-    display: block;
-    height: auto;
-    pointer-events: none;
-    position: absolute;
-    z-index: 2;
-    border-left: 1px solid rgba(0, 0, 0, 0.3);
-    left: 2px;
-    bottom: 5px;
-    top: 5px; }
-  /* line 181, ../../../../general/res/sass/_mixins.scss */
-  .slider .knob:not(.disabled):hover:before {
-    -moz-transition-property: "border-color";
-    -o-transition-property: "border-color";
-    -webkit-transition-property: "border-color";
-    transition-property: "border-color";
-    -moz-transition-duration: 25ms;
-    -o-transition-duration: 25ms;
-    -webkit-transition-duration: 25ms;
-    transition-duration: 25ms;
-    -moz-transition-timing-function: ease-in-out;
-    -o-transition-timing-function: ease-in-out;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-timing-function: ease-in-out;
-    border-color: #0099cc; }
-  /* line 322, ../../../../general/res/sass/controls/_controls.scss */
-  .slider .knob:before {
-    top: 1px;
-    bottom: 3px;
-    left: 5px; }
-/* line 329, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 313, ../../../../general/res/sass/controls/_controls.scss */
+  .slider .knob:hover {
+    background-color: #0099cc; }
+/* line 324, ../../../../general/res/sass/controls/_controls.scss */
+.slider .knob-l {
+  -moz-border-radius-topleft: 10px;
+  -webkit-border-top-left-radius: 10px;
+  border-top-left-radius: 10px;
+  -moz-border-radius-bottomleft: 10px;
+  -webkit-border-bottom-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+  cursor: w-resize; }
+/* line 328, ../../../../general/res/sass/controls/_controls.scss */
+.slider .knob-r {
+  -moz-border-radius-topright: 10px;
+  -webkit-border-top-right-radius: 10px;
+  border-top-right-radius: 10px;
+  -moz-border-radius-bottomright: 10px;
+  -webkit-border-bottom-right-radius: 10px;
+  border-bottom-right-radius: 10px;
+  cursor: e-resize; }
+/* line 332, ../../../../general/res/sass/controls/_controls.scss */
 .slider .range {
-  background: rgba(0, 153, 204, 0.6);
+  -moz-transition-property: visibility, opacity, background-color, border-color;
+  -o-transition-property: visibility, opacity, background-color, border-color;
+  -webkit-transition-property: visibility, opacity, background-color, border-color;
+  transition-property: visibility, opacity, background-color, border-color;
+  -moz-transition-duration: 0.25s;
+  -o-transition-duration: 0.25s;
+  -webkit-transition-duration: 0.25s;
+  transition-duration: 0.25s;
+  -moz-transition-timing-function: ease-in-out;
+  -o-transition-timing-function: ease-in-out;
+  -webkit-transition-timing-function: ease-in-out;
+  transition-timing-function: ease-in-out;
+  background-color: rgba(0, 153, 204, 0.3);
   cursor: ew-resize;
   position: absolute;
   top: 0;
@@ -1952,13 +1922,119 @@ label.checkbox.custom {
   left: auto;
   height: auto;
   width: auto; }
-  /* line 339, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 343, ../../../../general/res/sass/controls/_controls.scss */
   .slider .range:hover {
-    background: rgba(0, 153, 204, 0.7); }
+    background-color: rgba(0, 153, 204, 0.5); }
+
+/******************************************************** DATETIME PICKER */
+/* line 350, ../../../../general/res/sass/controls/_controls.scss */
+.l-datetime-picker {
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+  font-size: 0.8rem;
+  padding: 10px !important;
+  width: 230px; }
+  /* line 356, ../../../../general/res/sass/controls/_controls.scss */
+  .l-datetime-picker .l-month-year-pager {
+    font-size: 0.8rem;
+    height: 15px;
+    margin-bottom: 5px;
+    position: relative; }
+    /* line 368, ../../../../general/res/sass/controls/_controls.scss */
+    .l-datetime-picker .l-month-year-pager .pager {
+      width: 20px; }
+      /* line 371, ../../../../general/res/sass/controls/_controls.scss */
+      .l-datetime-picker .l-month-year-pager .pager.prev {
+        right: auto; }
+        /* line 373, ../../../../general/res/sass/controls/_controls.scss */
+        .l-datetime-picker .l-month-year-pager .pager.prev:before {
+          content: "\3c"; }
+      /* line 377, ../../../../general/res/sass/controls/_controls.scss */
+      .l-datetime-picker .l-month-year-pager .pager.next {
+        left: auto;
+        text-align: right; }
+        /* line 380, ../../../../general/res/sass/controls/_controls.scss */
+        .l-datetime-picker .l-month-year-pager .pager.next:before {
+          content: "\3e"; }
+    /* line 385, ../../../../general/res/sass/controls/_controls.scss */
+    .l-datetime-picker .l-month-year-pager .val {
+      text-align: center;
+      left: 25px;
+      right: 25px; }
+  /* line 391, ../../../../general/res/sass/controls/_controls.scss */
+  .l-datetime-picker .l-calendar,
+  .l-datetime-picker .l-time-selects {
+    border-top: 1px solid rgba(153, 153, 153, 0.1); }
+  /* line 395, ../../../../general/res/sass/controls/_controls.scss */
+  .l-datetime-picker .l-time-selects {
+    line-height: 22px; }
+
+/******************************************************** CALENDAR */
+/* line 403, ../../../../general/res/sass/controls/_controls.scss */
+.l-calendar ul.l-cal-row {
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-flow: row nowrap;
+  flex-flow: row nowrap;
+  margin-top: 1px; }
+  /* line 407, ../../../../general/res/sass/controls/_controls.scss */
+  .l-calendar ul.l-cal-row:first-child {
+    margin-top: 0; }
+  /* line 410, ../../../../general/res/sass/controls/_controls.scss */
+  .l-calendar ul.l-cal-row li {
+    -webkit-flex: 1 0;
+    flex: 1 0;
+    margin-left: 1px;
+    padding: 5px;
+    text-align: center; }
+    /* line 416, ../../../../general/res/sass/controls/_controls.scss */
+    .l-calendar ul.l-cal-row li:first-child {
+      margin-left: 0; }
+  /* line 420, ../../../../general/res/sass/controls/_controls.scss */
+  .l-calendar ul.l-cal-row.l-header li {
+    color: #b3b3b3; }
+  /* line 423, ../../../../general/res/sass/controls/_controls.scss */
+  .l-calendar ul.l-cal-row.l-body li {
+    -moz-transition-property: background-color;
+    -o-transition-property: background-color;
+    -webkit-transition-property: background-color;
+    transition-property: background-color;
+    -moz-transition-duration: 0.25s;
+    -o-transition-duration: 0.25s;
+    -webkit-transition-duration: 0.25s;
+    transition-duration: 0.25s;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    cursor: pointer; }
+    /* line 426, ../../../../general/res/sass/controls/_controls.scss */
+    .l-calendar ul.l-cal-row.l-body li.in-month {
+      background-color: #616161; }
+    /* line 429, ../../../../general/res/sass/controls/_controls.scss */
+    .l-calendar ul.l-cal-row.l-body li .sub {
+      color: #b3b3b3;
+      font-size: 0.8em; }
+    /* line 433, ../../../../general/res/sass/controls/_controls.scss */
+    .l-calendar ul.l-cal-row.l-body li.selected {
+      background: #006080;
+      color: #cccccc; }
+      /* line 436, ../../../../general/res/sass/controls/_controls.scss */
+      .l-calendar ul.l-cal-row.l-body li.selected .sub {
+        color: inherit; }
+    /* line 440, ../../../../general/res/sass/controls/_controls.scss */
+    .l-calendar ul.l-cal-row.l-body li:hover {
+      background-color: #0099cc;
+      color: #fff; }
+      /* line 443, ../../../../general/res/sass/controls/_controls.scss */
+      .l-calendar ul.l-cal-row.l-body li:hover .sub {
+        color: inherit; }
 
 /******************************************************** BROWSER ELEMENTS */
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 348, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 454, ../../../../general/res/sass/controls/_controls.scss */
   ::-webkit-scrollbar {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -1973,7 +2049,7 @@ label.checkbox.custom {
     height: 10px;
     width: 10px; }
 
-  /* line 357, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 463, ../../../../general/res/sass/controls/_controls.scss */
   ::-webkit-scrollbar-thumb {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRkNGQ0ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -1987,7 +2063,7 @@ label.checkbox.custom {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box; }
-    /* line 366, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 472, ../../../../general/res/sass/controls/_controls.scss */
     ::-webkit-scrollbar-thumb:hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlNWU1ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -1996,7 +2072,7 @@ label.checkbox.custom {
       background-image: -webkit-linear-gradient(#5e5e5e, #525252 20px);
       background-image: linear-gradient(#5e5e5e, #525252 20px); }
 
-  /* line 371, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 477, ../../../../general/res/sass/controls/_controls.scss */
   ::-webkit-scrollbar-corner {
     background: rgba(0, 0, 0, 0.4); } }
 /*****************************************************************************
@@ -2055,13 +2131,13 @@ label.checkbox.custom {
  *****************************************************************************/
 /******************************************************** MENU BUTTONS */
 /* line 31, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu .icon {
+.s-menu-btn .icon {
   font-size: 120%; }
 /* line 35, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu .title-label {
+.s-menu-btn .title-label {
   margin-left: 3px; }
 /* line 39, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu:after {
+.s-menu-btn:after {
   text-shadow: none;
   content: '\76';
   display: inline-block;
@@ -2070,14 +2146,14 @@ label.checkbox.custom {
   vertical-align: top;
   color: rgba(255, 255, 255, 0.2); }
 /* line 46, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu.create-btn .title-label {
+.s-menu-btn.create-btn .title-label {
   font-size: 1rem; }
 /* line 54, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu .menu {
+.s-menu-btn .menu {
   left: 0;
   text-align: left; }
   /* line 57, ../../../../general/res/sass/controls/_menus.scss */
-  .s-menu .menu .ui-symbol.icon {
+  .s-menu-btn .menu .ui-symbol.icon, .s-menu-btn .menu .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .s-menu-btn .menu .icon.pager {
     width: 12px; }
 
 /******************************************************** MENUS THEMSELVES */
@@ -2085,300 +2161,429 @@ label.checkbox.custom {
 .menu-element {
   cursor: pointer;
   position: relative; }
-  /* line 70, ../../../../general/res/sass/controls/_menus.scss */
-  .menu-element .menu {
-    -moz-border-radius: 2px;
-    -webkit-border-radius: 2px;
-    border-radius: 2px;
-    background-color: #6e6e6e;
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    color: white;
-    display: inline-block;
-    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdhN2E3YSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzZlNmU2ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-    background-size: 100%;
-    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7a7a7a), color-stop(100%, #6e6e6e));
-    background-image: -moz-linear-gradient(#7a7a7a, #6e6e6e);
-    background-image: -webkit-linear-gradient(#7a7a7a, #6e6e6e);
-    background-image: linear-gradient(#7a7a7a, #6e6e6e);
-    -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
-    text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
-    display: block;
-    padding: 3px 0;
-    position: absolute;
-    z-index: 10; }
-    /* line 79, ../../../../general/res/sass/controls/_menus.scss */
-    .menu-element .menu ul {
+
+/* line 69, ../../../../general/res/sass/controls/_menus.scss */
+.s-menu, .menu {
+  -moz-border-radius: 2px;
+  -webkit-border-radius: 2px;
+  border-radius: 2px;
+  background-color: #6e6e6e;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: white;
+  display: inline-block;
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdhN2E3YSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzZlNmU2ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
+  background-size: 100%;
+  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7a7a7a), color-stop(100%, #6e6e6e));
+  background-image: -moz-linear-gradient(#7a7a7a, #6e6e6e);
+  background-image: -webkit-linear-gradient(#7a7a7a, #6e6e6e);
+  background-image: linear-gradient(#7a7a7a, #6e6e6e);
+  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px;
+  text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
+  padding: 3px 0; }
+
+/* line 77, ../../../../general/res/sass/controls/_menus.scss */
+.menu {
+  display: block;
+  position: absolute;
+  z-index: 10; }
+  /* line 82, ../../../../general/res/sass/controls/_menus.scss */
+  .menu ul {
+    margin: 0;
+    padding: 0; }
+    /* line 329, ../../../../general/res/sass/_mixins.scss */
+    .menu ul li {
+      list-style-type: none;
       margin: 0;
       padding: 0; }
-      /* line 329, ../../../../general/res/sass/_mixins.scss */
-      .menu-element .menu ul li {
-        list-style-type: none;
-        margin: 0;
-        padding: 0; }
-      /* line 81, ../../../../general/res/sass/controls/_menus.scss */
-      .menu-element .menu ul li {
-        -moz-box-sizing: border-box;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        border-top: 1px solid #a1a1a1;
-        color: white;
-        line-height: 1.5rem;
-        padding: 3px 10px 3px 30px;
-        position: relative;
-        white-space: nowrap; }
-        /* line 89, ../../../../general/res/sass/controls/_menus.scss */
-        .menu-element .menu ul li:first-child {
-          border: none; }
-        /* line 92, ../../../../general/res/sass/controls/_menus.scss */
-        .menu-element .menu ul li:hover {
-          background: #878787;
-          color: #fff; }
-          /* line 95, ../../../../general/res/sass/controls/_menus.scss */
-          .menu-element .menu ul li:hover .icon {
-            color: #fff; }
-        /* line 99, ../../../../general/res/sass/controls/_menus.scss */
-        .menu-element .menu ul li .type-icon {
-          left: 10px; }
-  /* line 106, ../../../../general/res/sass/controls/_menus.scss */
-  .menu-element .menu,
-  .menu-element .context-menu,
-  .menu-element .checkbox-menu,
-  .menu-element .super-menu {
-    pointer-events: auto; }
-    /* line 112, ../../../../general/res/sass/controls/_menus.scss */
-    .menu-element .menu ul li a,
-    .menu-element .context-menu ul li a,
-    .menu-element .checkbox-menu ul li a,
-    .menu-element .super-menu ul li a {
-      color: white; }
-    /* line 115, ../../../../general/res/sass/controls/_menus.scss */
-    .menu-element .menu ul li .icon,
-    .menu-element .context-menu ul li .icon,
-    .menu-element .checkbox-menu ul li .icon,
-    .menu-element .super-menu ul li .icon {
-      color: #24c8ff; }
-    /* line 118, ../../../../general/res/sass/controls/_menus.scss */
-    .menu-element .menu ul li .type-icon,
-    .menu-element .context-menu ul li .type-icon,
-    .menu-element .checkbox-menu ul li .type-icon,
-    .menu-element .super-menu ul li .type-icon {
-      left: 5px; }
-  /* line 130, ../../../../general/res/sass/controls/_menus.scss */
-  .menu-element .checkbox-menu ul li {
-    padding-left: 50px; }
-    /* line 132, ../../../../general/res/sass/controls/_menus.scss */
-    .menu-element .checkbox-menu ul li .checkbox {
-      position: absolute;
-      left: 5px;
-      top: 0.53333rem; }
-      /* line 137, ../../../../general/res/sass/controls/_menus.scss */
-      .menu-element .checkbox-menu ul li .checkbox em {
-        height: 0.7rem;
-        width: 0.7rem; }
-        /* line 140, ../../../../general/res/sass/controls/_menus.scss */
-        .menu-element .checkbox-menu ul li .checkbox em:before {
-          font-size: 7px !important;
-          height: 0.7rem;
-          width: 0.7rem;
-          line-height: 0.7rem; }
-    /* line 148, ../../../../general/res/sass/controls/_menus.scss */
-    .menu-element .checkbox-menu ul li .type-icon {
-      left: 25px; }
-  /* line 154, ../../../../general/res/sass/controls/_menus.scss */
-  .menu-element .super-menu {
-    display: block;
-    width: 500px;
-    height: 480px; }
-    /* line 162, ../../../../general/res/sass/controls/_menus.scss */
-    .menu-element .super-menu .contents {
-      overflow: hidden;
-      position: absolute;
-      top: 5px;
-      right: 5px;
-      bottom: 5px;
-      left: 5px;
-      width: auto;
-      height: auto; }
-    /* line 165, ../../../../general/res/sass/controls/_menus.scss */
-    .menu-element .super-menu .pane {
+    /* line 84, ../../../../general/res/sass/controls/_menus.scss */
+    .menu ul li {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
-      box-sizing: border-box; }
-      /* line 167, ../../../../general/res/sass/controls/_menus.scss */
-      .menu-element .super-menu .pane.left {
-        border-right: 1px solid #878787;
-        left: 0;
-        padding-right: 5px;
-        right: auto;
-        width: 50%;
-        overflow-x: hidden;
-        overflow-y: auto; }
-        /* line 177, ../../../../general/res/sass/controls/_menus.scss */
-        .menu-element .super-menu .pane.left ul li {
-          -moz-border-radius: 3px;
-          -webkit-border-radius: 3px;
-          border-radius: 3px;
-          padding-left: 30px;
-          border-top: none; }
-      /* line 184, ../../../../general/res/sass/controls/_menus.scss */
-      .menu-element .super-menu .pane.right {
-        left: auto;
-        right: 0;
-        padding: 25px;
-        width: 50%; }
-    /* line 194, ../../../../general/res/sass/controls/_menus.scss */
-    .menu-element .super-menu .menu-item-description .desc-area.icon {
+      box-sizing: border-box;
+      border-top: 1px solid #a1a1a1;
       color: white;
+      line-height: 1.5rem;
+      padding: 3px 10px 3px 30px;
       position: relative;
-      font-size: 8em;
-      left: 0;
-      height: 150px;
-      line-height: 150px;
-      margin-bottom: 25px;
-      text-align: center; }
-    /* line 205, ../../../../general/res/sass/controls/_menus.scss */
-    .menu-element .super-menu .menu-item-description .desc-area.title {
-      color: white;
-      font-size: 1.2em;
-      margin-bottom: 0.5em; }
-    /* line 210, ../../../../general/res/sass/controls/_menus.scss */
-    .menu-element .super-menu .menu-item-description .desc-area.description {
-      color: white;
-      font-size: 0.8em;
-      line-height: 1.5em; }
-  /* line 219, ../../../../general/res/sass/controls/_menus.scss */
-  .menu-element .context-menu, .menu-element .checkbox-menu {
-    font-size: 0.80rem; }
+      white-space: nowrap; }
+      /* line 92, ../../../../general/res/sass/controls/_menus.scss */
+      .menu ul li:first-child {
+        border: none; }
+      /* line 95, ../../../../general/res/sass/controls/_menus.scss */
+      .menu ul li:hover {
+        background: #878787;
+        color: #fff; }
+        /* line 98, ../../../../general/res/sass/controls/_menus.scss */
+        .menu ul li:hover .icon {
+          color: #fff; }
+      /* line 102, ../../../../general/res/sass/controls/_menus.scss */
+      .menu ul li .type-icon {
+        left: 10px; }
 
-/* line 224, ../../../../general/res/sass/controls/_menus.scss */
-.context-menu-holder {
-  pointer-events: none;
+/* line 109, ../../../../general/res/sass/controls/_menus.scss */
+.menu,
+.context-menu,
+.checkbox-menu,
+.super-menu {
+  pointer-events: auto; }
+  /* line 115, ../../../../general/res/sass/controls/_menus.scss */
+  .menu ul li a,
+  .context-menu ul li a,
+  .checkbox-menu ul li a,
+  .super-menu ul li a {
+    color: white; }
+  /* line 118, ../../../../general/res/sass/controls/_menus.scss */
+  .menu ul li .icon,
+  .context-menu ul li .icon,
+  .checkbox-menu ul li .icon,
+  .super-menu ul li .icon {
+    color: #24c8ff; }
+  /* line 121, ../../../../general/res/sass/controls/_menus.scss */
+  .menu ul li .type-icon,
+  .context-menu ul li .type-icon,
+  .checkbox-menu ul li .type-icon,
+  .super-menu ul li .type-icon {
+    left: 5px; }
+
+/* line 133, ../../../../general/res/sass/controls/_menus.scss */
+.checkbox-menu ul li {
+  padding-left: 50px; }
+  /* line 135, ../../../../general/res/sass/controls/_menus.scss */
+  .checkbox-menu ul li .checkbox {
+    position: absolute;
+    left: 5px;
+    top: 0.53333rem; }
+    /* line 140, ../../../../general/res/sass/controls/_menus.scss */
+    .checkbox-menu ul li .checkbox em {
+      height: 0.7rem;
+      width: 0.7rem; }
+      /* line 143, ../../../../general/res/sass/controls/_menus.scss */
+      .checkbox-menu ul li .checkbox em:before {
+        font-size: 7px !important;
+        height: 0.7rem;
+        width: 0.7rem;
+        line-height: 0.7rem; }
+  /* line 151, ../../../../general/res/sass/controls/_menus.scss */
+  .checkbox-menu ul li .type-icon {
+    left: 25px; }
+
+/* line 157, ../../../../general/res/sass/controls/_menus.scss */
+.super-menu {
+  display: block;
+  width: 500px;
+  height: 480px; }
+  /* line 165, ../../../../general/res/sass/controls/_menus.scss */
+  .super-menu .contents {
+    overflow: hidden;
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    bottom: 5px;
+    left: 5px;
+    width: auto;
+    height: auto; }
+  /* line 168, ../../../../general/res/sass/controls/_menus.scss */
+  .super-menu .pane {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box; }
+    /* line 170, ../../../../general/res/sass/controls/_menus.scss */
+    .super-menu .pane.left {
+      border-right: 1px solid #878787;
+      left: 0;
+      padding-right: 5px;
+      right: auto;
+      width: 50%;
+      overflow-x: hidden;
+      overflow-y: auto; }
+      /* line 180, ../../../../general/res/sass/controls/_menus.scss */
+      .super-menu .pane.left ul li {
+        -moz-border-radius: 3px;
+        -webkit-border-radius: 3px;
+        border-radius: 3px;
+        padding-left: 30px;
+        border-top: none; }
+    /* line 187, ../../../../general/res/sass/controls/_menus.scss */
+    .super-menu .pane.right {
+      left: auto;
+      right: 0;
+      padding: 25px;
+      width: 50%; }
+  /* line 197, ../../../../general/res/sass/controls/_menus.scss */
+  .super-menu .menu-item-description .desc-area.icon {
+    color: white;
+    position: relative;
+    font-size: 8em;
+    left: 0;
+    height: 150px;
+    line-height: 150px;
+    margin-bottom: 25px;
+    text-align: center; }
+  /* line 208, ../../../../general/res/sass/controls/_menus.scss */
+  .super-menu .menu-item-description .desc-area.title {
+    color: white;
+    font-size: 1.2em;
+    margin-bottom: 0.5em; }
+  /* line 213, ../../../../general/res/sass/controls/_menus.scss */
+  .super-menu .menu-item-description .desc-area.description {
+    color: white;
+    font-size: 0.8em;
+    line-height: 1.5em; }
+
+/* line 222, ../../../../general/res/sass/controls/_menus.scss */
+.context-menu, .checkbox-menu {
+  font-size: 0.80rem; }
+
+/* line 226, ../../../../general/res/sass/controls/_menus.scss */
+.context-menu-holder,
+.menu-holder {
   position: absolute;
-  height: 200px;
-  width: 170px;
   z-index: 70; }
   /* line 230, ../../../../general/res/sass/controls/_menus.scss */
-  .context-menu-holder .context-menu-wrapper {
+  .context-menu-holder .context-menu-wrapper,
+  .menu-holder .context-menu-wrapper {
     position: absolute;
     height: 100%;
     width: 100%; }
-  /* line 237, ../../../../general/res/sass/controls/_menus.scss */
-  .context-menu-holder.go-left .context-menu, .context-menu-holder.go-left .menu-element .checkbox-menu, .menu-element .context-menu-holder.go-left .checkbox-menu {
+  /* line 235, ../../../../general/res/sass/controls/_menus.scss */
+  .context-menu-holder.go-left .context-menu, .context-menu-holder.go-left .checkbox-menu, .context-menu-holder.go-left .menu,
+  .menu-holder.go-left .context-menu,
+  .menu-holder.go-left .checkbox-menu,
+  .menu-holder.go-left .menu {
     right: 0; }
-  /* line 240, ../../../../general/res/sass/controls/_menus.scss */
-  .context-menu-holder.go-up .context-menu, .context-menu-holder.go-up .menu-element .checkbox-menu, .menu-element .context-menu-holder.go-up .checkbox-menu {
+  /* line 239, ../../../../general/res/sass/controls/_menus.scss */
+  .context-menu-holder.go-up .context-menu, .context-menu-holder.go-up .checkbox-menu, .context-menu-holder.go-up .menu,
+  .menu-holder.go-up .context-menu,
+  .menu-holder.go-up .checkbox-menu,
+  .menu-holder.go-up .menu {
     bottom: 0; }
 
 /* line 245, ../../../../general/res/sass/controls/_menus.scss */
+.context-menu-holder {
+  pointer-events: none;
+  height: 200px;
+  width: 170px; }
+
+/* line 251, ../../../../general/res/sass/controls/_menus.scss */
 .btn-bar.right .menu,
 .menus-to-left .menu {
   left: auto;
   right: 0;
   width: auto; }
 
-/* line 1, ../../../../general/res/sass/controls/_time-controller.scss */
-.l-time-controller {
-  position: relative;
-  margin: 10px 0;
-  min-width: 400px; }
-  /* line 12, ../../../../general/res/sass/controls/_time-controller.scss */
-  .l-time-controller .l-time-range-inputs-holder,
-  .l-time-controller .l-time-range-slider {
-    font-size: 0.8em; }
-  /* line 17, ../../../../general/res/sass/controls/_time-controller.scss */
-  .l-time-controller .l-time-range-inputs-holder,
-  .l-time-controller .l-time-range-slider-holder,
-  .l-time-controller .l-time-range-ticks-holder {
-    margin-bottom: 5px;
-    position: relative; }
-  /* line 24, ../../../../general/res/sass/controls/_time-controller.scss */
-  .l-time-controller .l-time-range-slider,
-  .l-time-controller .l-time-range-ticks {
-    overflow: visible;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    width: auto;
-    height: auto; }
-  /* line 30, ../../../../general/res/sass/controls/_time-controller.scss */
-  .l-time-controller .l-time-range-inputs-holder {
-    height: 20px; }
-  /* line 34, ../../../../general/res/sass/controls/_time-controller.scss */
-  .l-time-controller .l-time-range-slider,
-  .l-time-controller .l-time-range-ticks {
-    left: 90px;
-    right: 90px; }
-  /* line 40, ../../../../general/res/sass/controls/_time-controller.scss */
-  .l-time-controller .l-time-range-slider-holder {
-    height: 30px; }
-    /* line 42, ../../../../general/res/sass/controls/_time-controller.scss */
-    .l-time-controller .l-time-range-slider-holder .range-holder {
-      -moz-box-shadow: none;
-      -webkit-box-shadow: none;
-      box-shadow: none;
-      background: none;
-      border: none;
-      height: 75%; }
-  /* line 50, ../../../../general/res/sass/controls/_time-controller.scss */
-  .l-time-controller .l-time-range-ticks-holder {
-    height: 10px; }
-    /* line 52, ../../../../general/res/sass/controls/_time-controller.scss */
-    .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks {
-      border-top: 1px solid rgba(153, 153, 153, 0.1); }
-      /* line 54, ../../../../general/res/sass/controls/_time-controller.scss */
-      .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick {
-        background-color: rgba(153, 153, 153, 0.1);
-        border: none;
-        width: 1px;
-        margin-left: -1px; }
-        /* line 59, ../../../../general/res/sass/controls/_time-controller.scss */
-        .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick:first-child {
-          margin-left: 0; }
-        /* line 62, ../../../../general/res/sass/controls/_time-controller.scss */
-        .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick .l-time-range-tick-label {
-          color: rgba(204, 204, 204, 0.1);
-          font-size: 0.7em;
-          position: absolute;
-          margin-left: -25px;
-          text-align: center;
-          top: 10px;
-          width: 50px;
-          z-index: 2; }
-  /* line 76, ../../../../general/res/sass/controls/_time-controller.scss */
-  .l-time-controller .knob {
-    width: 9px; }
-    /* line 78, ../../../../general/res/sass/controls/_time-controller.scss */
-    .l-time-controller .knob .range-value {
+/* line 27, ../../../../general/res/sass/controls/_time-controller.scss */
+.l-time-controller .l-time-range-inputs-holder,
+.l-time-controller .l-time-range-slider {
+  font-size: 0.8em; }
+/* line 32, ../../../../general/res/sass/controls/_time-controller.scss */
+.l-time-controller .l-time-range-inputs-holder,
+.l-time-controller .l-time-range-slider-holder,
+.l-time-controller .l-time-range-ticks-holder {
+  overflow: visible;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: auto;
+  height: auto;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  min-width: 400px;
+  top: auto; }
+/* line 42, ../../../../general/res/sass/controls/_time-controller.scss */
+.l-time-controller .l-time-range-slider,
+.l-time-controller .l-time-range-ticks {
+  overflow: visible;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: auto;
+  height: auto;
+  left: 150px;
+  right: 150px; }
+/* line 49, ../../../../general/res/sass/controls/_time-controller.scss */
+.l-time-controller .l-time-range-inputs-holder {
+  height: 33px;
+  bottom: 46px;
+  padding-top: 5px;
+  border-top: 1px solid rgba(153, 153, 153, 0.1); }
+  /* line 54, ../../../../general/res/sass/controls/_time-controller.scss */
+  .l-time-controller .l-time-range-inputs-holder .type-icon {
+    font-size: 120%;
+    vertical-align: middle; }
+  /* line 58, ../../../../general/res/sass/controls/_time-controller.scss */
+  .l-time-controller .l-time-range-inputs-holder .l-time-range-input,
+  .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem {
+    margin-right: 5px; }
+    /* line 61, ../../../../general/res/sass/controls/_time-controller.scss */
+    .l-time-controller .l-time-range-inputs-holder .l-time-range-input .lbl,
+    .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .lbl {
+      color: #666666; }
+    /* line 64, ../../../../general/res/sass/controls/_time-controller.scss */
+    .l-time-controller .l-time-range-inputs-holder .l-time-range-input .ui-symbol.icon, .l-time-controller .l-time-range-inputs-holder .l-time-range-input .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-input .icon.pager,
+    .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .ui-symbol.icon,
+    .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .l-datetime-picker .l-month-year-pager .icon.pager,
+    .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .icon.pager {
+      font-size: 11px;
+      width: 11px; }
+/* line 71, ../../../../general/res/sass/controls/_time-controller.scss */
+.l-time-controller .l-time-range-slider-holder {
+  height: 20px;
+  bottom: 23px; }
+  /* line 74, ../../../../general/res/sass/controls/_time-controller.scss */
+  .l-time-controller .l-time-range-slider-holder .range-holder {
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    background: none;
+    border: none; }
+    /* line 79, ../../../../general/res/sass/controls/_time-controller.scss */
+    .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line {
+      -moz-transform: translateX(50%);
+      -ms-transform: translateX(50%);
+      -webkit-transform: translateX(50%);
+      transform: translateX(50%);
       position: absolute;
-      top: 50%;
-      margin-top: -7px;
-      white-space: nowrap;
-      width: 75px; }
-    /* line 87, ../../../../general/res/sass/controls/_time-controller.scss */
-    .l-time-controller .knob:hover .range-value {
-      color: #0099cc; }
-    /* line 90, ../../../../general/res/sass/controls/_time-controller.scss */
-    .l-time-controller .knob.knob-l {
-      margin-left: -4.5px; }
-      /* line 92, ../../../../general/res/sass/controls/_time-controller.scss */
-      .l-time-controller .knob.knob-l .range-value {
-        text-align: right;
-        right: 14px; }
-    /* line 97, ../../../../general/res/sass/controls/_time-controller.scss */
-    .l-time-controller .knob.knob-r {
-      margin-right: -4.5px; }
-      /* line 99, ../../../../general/res/sass/controls/_time-controller.scss */
-      .l-time-controller .knob.knob-r .range-value {
-        left: 14px; }
+      top: 0;
+      right: 0;
+      bottom: 0px;
+      left: auto;
+      width: 8px;
+      height: auto;
+      z-index: 2; }
+      /* line 89, ../../../../general/res/sass/controls/_time-controller.scss */
+      .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before, .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after {
+        background-color: #00c2ff;
+        content: "";
+        position: absolute; }
+      /* line 95, ../../../../general/res/sass/controls/_time-controller.scss */
+      .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before {
+        top: 0;
+        right: auto;
+        bottom: -10px;
+        left: 3px;
+        width: 2px; }
+      /* line 101, ../../../../general/res/sass/controls/_time-controller.scss */
+      .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after {
+        -moz-border-radius: 8px;
+        -webkit-border-radius: 8px;
+        border-radius: 8px;
+        -moz-transform: translateY(-50%);
+        -ms-transform: translateY(-50%);
+        -webkit-transform: translateY(-50%);
+        transform: translateY(-50%);
+        top: 50%;
+        right: 0;
+        bottom: auto;
+        left: 0;
+        width: auto;
+        height: 8px; }
+    /* line 3, ../../../../general/res/sass/controls/_time-controller.scss */
+    .l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:before, .l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:after {
+      background-color: #fff; }
+  /* line 117, ../../../../general/res/sass/controls/_time-controller.scss */
+  .l-time-controller .l-time-range-slider-holder:not(:active) .knob,
+  .l-time-controller .l-time-range-slider-holder:not(:active) .range {
+    -moz-transition-property: left, right;
+    -o-transition-property: left, right;
+    -webkit-transition-property: left, right;
+    transition-property: left, right;
+    -moz-transition-duration: 500ms;
+    -o-transition-duration: 500ms;
+    -webkit-transition-duration: 500ms;
+    transition-duration: 500ms;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out; }
+/* line 126, ../../../../general/res/sass/controls/_time-controller.scss */
+.l-time-controller .l-time-range-ticks-holder {
+  height: 20px; }
+  /* line 128, ../../../../general/res/sass/controls/_time-controller.scss */
+  .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks {
+    border-top: 1px solid rgba(255, 255, 255, 0.2); }
+    /* line 130, ../../../../general/res/sass/controls/_time-controller.scss */
+    .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick {
+      background-color: rgba(255, 255, 255, 0.2);
+      border: none;
+      height: 5px;
+      width: 1px;
+      margin-left: -1px;
+      position: absolute; }
+      /* line 137, ../../../../general/res/sass/controls/_time-controller.scss */
+      .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick:first-child {
+        margin-left: 0; }
+      /* line 140, ../../../../general/res/sass/controls/_time-controller.scss */
+      .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick .l-time-range-tick-label {
+        transform: translateX(-50%);
+        -webkit-transform: translateX(-50%);
+        color: #666666;
+        display: inline-block;
+        font-size: 0.7em;
+        position: absolute;
+        top: 8px;
+        white-space: nowrap;
+        z-index: 2; }
+/* line 154, ../../../../general/res/sass/controls/_time-controller.scss */
+.l-time-controller .knob {
+  z-index: 2; }
+  /* line 156, ../../../../general/res/sass/controls/_time-controller.scss */
+  .l-time-controller .knob .range-value {
+    -moz-transition-property: visibility, opacity, background-color, border-color;
+    -o-transition-property: visibility, opacity, background-color, border-color;
+    -webkit-transition-property: visibility, opacity, background-color, border-color;
+    transition-property: visibility, opacity, background-color, border-color;
+    -moz-transition-duration: 0.25s;
+    -o-transition-duration: 0.25s;
+    -webkit-transition-duration: 0.25s;
+    transition-duration: 0.25s;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    padding: 0 10px;
+    position: absolute;
+    height: 20px;
+    line-height: 20px;
+    white-space: nowrap; }
+  /* line 165, ../../../../general/res/sass/controls/_time-controller.scss */
+  .l-time-controller .knob:hover .range-value {
+    color: #0099cc; }
+  /* line 168, ../../../../general/res/sass/controls/_time-controller.scss */
+  .l-time-controller .knob.knob-l {
+    margin-left: -10px; }
+    /* line 171, ../../../../general/res/sass/controls/_time-controller.scss */
+    .l-time-controller .knob.knob-l .range-value {
+      text-align: right;
+      right: 10px; }
+  /* line 176, ../../../../general/res/sass/controls/_time-controller.scss */
+  .l-time-controller .knob.knob-r {
+    margin-right: -10px; }
+    /* line 179, ../../../../general/res/sass/controls/_time-controller.scss */
+    .l-time-controller .knob.knob-r .range-value {
+      left: 10px; }
+    /* line 3, ../../../../general/res/sass/controls/_time-controller.scss */
+    .l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:before, .l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:after {
+      background-color: #fff; }
+
+/* line 193, ../../../../general/res/sass/controls/_time-controller.scss */
+.s-time-range-val {
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  background-color: rgba(255, 255, 255, 0.1);
+  padding: 1px 1px 0 5px; }
 
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
@@ -2672,11 +2877,12 @@ textarea {
   -o-transition: background, 0.25s;
   -webkit-transition: background, 0.25s;
   transition: background, 0.25s;
-  text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
-  margin: 0 0 2px 2px;
+  text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
+  margin: 0 0 2px 0;
   padding: 0 5px;
   overflow: hidden;
-  position: relative; }
+  position: relative;
+  line-height: 22px; }
   /* line 272, ../../../../general/res/sass/_mixins.scss */
   .select .icon {
     color: #0099cc; }
@@ -2687,7 +2893,7 @@ textarea {
       /* line 279, ../../../../general/res/sass/_mixins.scss */
       .select:not(.disabled):hover > .icon {
         color: #33ccff; } }
-  /* line 28, ../../../../general/res/sass/forms/_selects.scss */
+  /* line 31, ../../../../general/res/sass/forms/_selects.scss */
   .select select {
     -moz-appearance: none;
     -webkit-appearance: none;
@@ -2700,10 +2906,10 @@ textarea {
     border: none !important;
     padding: 4px 25px 2px 0px;
     width: 120%; }
-    /* line 37, ../../../../general/res/sass/forms/_selects.scss */
+    /* line 40, ../../../../general/res/sass/forms/_selects.scss */
     .select select option {
       margin: 5px 0; }
-  /* line 41, ../../../../general/res/sass/forms/_selects.scss */
+  /* line 44, ../../../../general/res/sass/forms/_selects.scss */
   .select:after {
     text-shadow: none;
     content: '\76';
@@ -2711,6 +2917,7 @@ textarea {
     font-family: 'symbolsfont';
     margin-left: 3px;
     vertical-align: top;
+    pointer-events: none;
     color: rgba(153, 153, 153, 0.2);
     position: absolute;
     right: 5px;
@@ -2772,7 +2979,7 @@ textarea {
 .channel-selector .btns-add-remove {
   margin-top: 150px; }
   /* line 39, ../../../../general/res/sass/forms/_channel-selector.scss */
-  .channel-selector .btns-add-remove .s-btn, .channel-selector .btns-add-remove .s-menu {
+  .channel-selector .btns-add-remove .s-btn, .channel-selector .btns-add-remove .s-menu-btn {
     display: block;
     margin-bottom: 5px;
     text-align: center; }
@@ -2798,26 +3005,44 @@ textarea {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 23, ../../../../general/res/sass/forms/_datetime.scss */
-.complex.datetime span {
-  display: inline-block;
-  margin-right: 5px; }
-/* line 36, ../../../../general/res/sass/forms/_datetime.scss */
-.complex.datetime .fields {
-  margin-top: 3px 0;
-  padding: 3px 0; }
-/* line 41, ../../../../general/res/sass/forms/_datetime.scss */
-.complex.datetime .date {
-  width: 85px; }
-  /* line 44, ../../../../general/res/sass/forms/_datetime.scss */
-  .complex.datetime .date input {
-    width: 80px; }
-/* line 50, ../../../../general/res/sass/forms/_datetime.scss */
-.complex.datetime .time.sm {
-  width: 45px; }
-  /* line 53, ../../../../general/res/sass/forms/_datetime.scss */
-  .complex.datetime .time.sm input {
-    width: 40px; }
+/* line 29, ../../../../general/res/sass/forms/_datetime.scss */
+.complex.datetime {
+  /*
+  	.field-hints,
+  	.fields {
+  	}
+  
+  	
+  	.field-hints {
+  
+  	}
+  	*/ }
+  /* line 30, ../../../../general/res/sass/forms/_datetime.scss */
+  .complex.datetime span {
+    display: inline-block;
+    margin-right: 5px; }
+  /* line 46, ../../../../general/res/sass/forms/_datetime.scss */
+  .complex.datetime .fields {
+    margin-top: 3px 0;
+    padding: 3px 0; }
+  /* line 51, ../../../../general/res/sass/forms/_datetime.scss */
+  .complex.datetime .date {
+    width: 85px; }
+    /* line 24, ../../../../general/res/sass/forms/_datetime.scss */
+    .complex.datetime .date input[type="text"] {
+      width: 80px; }
+  /* line 55, ../../../../general/res/sass/forms/_datetime.scss */
+  .complex.datetime .time.md {
+    width: 65px; }
+    /* line 24, ../../../../general/res/sass/forms/_datetime.scss */
+    .complex.datetime .time.md input[type="text"] {
+      width: 60px; }
+  /* line 59, ../../../../general/res/sass/forms/_datetime.scss */
+  .complex.datetime .time.sm {
+    width: 45px; }
+    /* line 24, ../../../../general/res/sass/forms/_datetime.scss */
+    .complex.datetime .time.sm input[type="text"] {
+      width: 40px; }
 
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
@@ -2929,8 +3154,10 @@ span.req {
   .t-filter input.t-filter-input:not(.ng-dirty) + .t-a-clear {
     display: none; }
 /* line 42, ../../../../general/res/sass/forms/_filter.scss */
-.filter .icon.ui-symbol,
-.t-filter .icon.ui-symbol {
+.filter .icon.ui-symbol, .filter .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .filter .icon.pager,
+.t-filter .icon.ui-symbol,
+.t-filter .l-datetime-picker .l-month-year-pager .icon.pager,
+.l-datetime-picker .l-month-year-pager .t-filter .icon.pager {
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
@@ -2941,12 +3168,16 @@ span.req {
   padding: 0px 5px;
   vertical-align: middle; }
   /* line 50, ../../../../general/res/sass/forms/_filter.scss */
-  .filter .icon.ui-symbol:hover,
-  .t-filter .icon.ui-symbol:hover {
+  .filter .icon.ui-symbol:hover, .filter .l-datetime-picker .l-month-year-pager .icon.pager:hover, .l-datetime-picker .l-month-year-pager .filter .icon.pager:hover,
+  .t-filter .icon.ui-symbol:hover,
+  .t-filter .l-datetime-picker .l-month-year-pager .icon.pager:hover,
+  .l-datetime-picker .l-month-year-pager .t-filter .icon.pager:hover {
     background: rgba(255, 255, 255, 0.1); }
 /* line 54, ../../../../general/res/sass/forms/_filter.scss */
-.filter .s-a-clear.ui-symbol,
-.t-filter .s-a-clear.ui-symbol {
+.filter .s-a-clear.ui-symbol, .filter .l-datetime-picker .l-month-year-pager .s-a-clear.pager, .l-datetime-picker .l-month-year-pager .filter .s-a-clear.pager,
+.t-filter .s-a-clear.ui-symbol,
+.t-filter .l-datetime-picker .l-month-year-pager .s-a-clear.pager,
+.l-datetime-picker .l-month-year-pager .t-filter .s-a-clear.pager {
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
@@ -2970,8 +3201,10 @@ span.req {
   text-align: center;
   z-index: 5; }
   /* line 74, ../../../../general/res/sass/forms/_filter.scss */
-  .filter .s-a-clear.ui-symbol:hover,
-  .t-filter .s-a-clear.ui-symbol:hover {
+  .filter .s-a-clear.ui-symbol:hover, .filter .l-datetime-picker .l-month-year-pager .s-a-clear.pager:hover, .l-datetime-picker .l-month-year-pager .filter .s-a-clear.pager:hover,
+  .t-filter .s-a-clear.ui-symbol:hover,
+  .t-filter .l-datetime-picker .l-month-year-pager .s-a-clear.pager:hover,
+  .l-datetime-picker .l-month-year-pager .t-filter .s-a-clear.pager:hover {
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
     opacity: 0.6;
     background-color: #0099cc; }
@@ -3053,33 +3286,49 @@ span.req {
 .bar .icon.major {
   margin-right: 5px; }
 /* line 70, ../../../../general/res/sass/user-environ/_layout.scss */
-.bar.abs, .s-menu span.bar.l-click-area {
+.bar.abs, .l-datetime-picker .l-month-year-pager .bar.pager,
+.l-datetime-picker .l-month-year-pager .bar.val, .s-menu-btn span.bar.l-click-area {
   text-wrap: none;
   white-space: nowrap; }
   /* line 73, ../../../../general/res/sass/user-environ/_layout.scss */
-  .bar.abs.left, .s-menu span.bar.left.l-click-area,
+  .bar.abs.left, .l-datetime-picker .l-month-year-pager .bar.left.pager,
+  .l-datetime-picker .l-month-year-pager .bar.left.val, .s-menu-btn span.bar.left.l-click-area,
   .bar.abs .left,
-  .s-menu span.bar.l-click-area .left {
+  .l-datetime-picker .l-month-year-pager .bar.pager .left,
+  .l-datetime-picker .l-month-year-pager .bar.val .left,
+  .s-menu-btn span.bar.l-click-area .left {
     width: 45%;
     right: auto; }
   /* line 78, ../../../../general/res/sass/user-environ/_layout.scss */
-  .bar.abs.right, .s-menu span.bar.right.l-click-area,
+  .bar.abs.right, .l-datetime-picker .l-month-year-pager .bar.right.pager,
+  .l-datetime-picker .l-month-year-pager .bar.right.val, .s-menu-btn span.bar.right.l-click-area,
   .bar.abs .right,
-  .s-menu span.bar.l-click-area .right {
+  .l-datetime-picker .l-month-year-pager .bar.pager .right,
+  .l-datetime-picker .l-month-year-pager .bar.val .right,
+  .s-menu-btn span.bar.l-click-area .right {
     width: 45%;
     left: auto;
     text-align: right; }
     /* line 83, ../../../../general/res/sass/user-environ/_layout.scss */
-    .bar.abs.right .icon.major, .s-menu span.bar.right.l-click-area .icon.major,
+    .bar.abs.right .icon.major, .l-datetime-picker .l-month-year-pager .bar.right.pager .icon.major,
+    .l-datetime-picker .l-month-year-pager .bar.right.val .icon.major, .s-menu-btn span.bar.right.l-click-area .icon.major,
     .bar.abs .right .icon.major,
-    .s-menu span.bar.l-click-area .right .icon.major {
+    .l-datetime-picker .l-month-year-pager .bar.pager .right .icon.major,
+    .l-datetime-picker .l-month-year-pager .bar.val .right .icon.major,
+    .s-menu-btn span.bar.l-click-area .right .icon.major {
       margin-left: 15px; }
   /* line 89, ../../../../general/res/sass/user-environ/_layout.scss */
-  .bar.abs .l-flex .left, .s-menu span.bar.l-click-area .l-flex .left,
+  .bar.abs .l-flex .left, .l-datetime-picker .l-month-year-pager .bar.pager .l-flex .left,
+  .l-datetime-picker .l-month-year-pager .bar.val .l-flex .left, .s-menu-btn span.bar.l-click-area .l-flex .left,
   .bar.abs .l-flex .right,
-  .s-menu span.bar.l-click-area .l-flex .right, .bar.abs.l-flex .left, .s-menu span.bar.l-flex.l-click-area .left,
+  .l-datetime-picker .l-month-year-pager .bar.pager .l-flex .right,
+  .l-datetime-picker .l-month-year-pager .bar.val .l-flex .right,
+  .s-menu-btn span.bar.l-click-area .l-flex .right, .bar.abs.l-flex .left, .l-datetime-picker .l-month-year-pager .bar.l-flex.pager .left,
+  .l-datetime-picker .l-month-year-pager .bar.l-flex.val .left, .s-menu-btn span.bar.l-flex.l-click-area .left,
   .bar.abs.l-flex .right,
-  .s-menu span.bar.l-flex.l-click-area .right {
+  .l-datetime-picker .l-month-year-pager .bar.l-flex.pager .right,
+  .l-datetime-picker .l-month-year-pager .bar.l-flex.val .right,
+  .s-menu-btn span.bar.l-flex.l-click-area .right {
     width: auto; }
 
 /* line 98, ../../../../general/res/sass/user-environ/_layout.scss */
@@ -3197,76 +3446,94 @@ span.req {
     min-height: 50px;
     height: 30%; }
 
-/* line 230, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 228, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane {
   position: absolute; }
-  /* line 233, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 231, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.treeview.left .create-btn-holder {
     bottom: auto;
     top: 0;
     height: 24px; }
-    /* line 236, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 235, ../../../../general/res/sass/user-environ/_layout.scss */
     .pane.treeview.left .create-btn-holder .wrapper.menu-element {
       position: absolute;
       bottom: 5px; }
-  /* line 241, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 240, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.treeview.left .search-holder {
     top: 34px; }
-  /* line 244, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 243, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.treeview.left .tree-holder {
     overflow: auto;
     top: 64px; }
-  /* line 251, ../../../../general/res/sass/user-environ/_layout.scss */
-  .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .s-menu span.left.l-click-area, .s-menu .pane.items .object-browse-bar span.left.l-click-area,
+  /* line 250, ../../../../general/res/sass/user-environ/_layout.scss */
+  .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.pager, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.pager,
+  .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.val,
+  .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.val, .pane.items .object-browse-bar .s-menu-btn span.left.l-click-area, .s-menu-btn .pane.items .object-browse-bar span.left.l-click-area,
   .pane.items .object-browse-bar .right.abs,
-  .pane.items .object-browse-bar .s-menu span.right.l-click-area,
-  .s-menu .pane.items .object-browse-bar span.right.l-click-area {
+  .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .right.pager,
+  .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .right.pager,
+  .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .right.val,
+  .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .right.val,
+  .pane.items .object-browse-bar .s-menu-btn span.right.l-click-area,
+  .s-menu-btn .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
-  /* line 262, ../../../../general/res/sass/user-environ/_layout.scss */
-  .pane.items .object-holder {
-    top: 34px; }
-  /* line 266, ../../../../general/res/sass/user-environ/_layout.scss */
-  .pane .object-holder {
-    overflow: auto; }
 
-/* line 274, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 261, ../../../../general/res/sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
   margin-top: 5px; }
-  /* line 277, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 264, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout.horizontal > .pane:first-child {
     margin-top: 0; }
-/* line 284, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 271, ../../../../general/res/sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 287, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 274, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 291, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 278, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 293, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 280, ../../../../general/res/sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 3px; }
 
-/* line 302, ../../../../general/res/sass/user-environ/_layout.scss */
-.object-browse-bar .s-btn, .object-browse-bar .s-menu,
+/* line 289, ../../../../general/res/sass/user-environ/_layout.scss */
+.object-holder {
+  overflow: hidden;
+  top: 34px; }
+  /* line 292, ../../../../general/res/sass/user-environ/_layout.scss */
+  .object-holder > ng-include {
+    overflow: auto;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: auto;
+    height: auto; }
+  /* line 297, ../../../../general/res/sass/user-environ/_layout.scss */
+  .object-holder.l-controls-visible.l-time-controller-visible > ng-include {
+    bottom: 88px; }
+
+/* line 304, ../../../../general/res/sass/user-environ/_layout.scss */
+.object-browse-bar .s-btn, .object-browse-bar .s-menu-btn,
 .top-bar .buttons-main .s-btn,
-.top-bar .buttons-main .s-menu,
-.top-bar .s-menu,
+.top-bar .buttons-main .s-menu-btn,
+.top-bar .s-menu-btn,
 .tool-bar .s-btn,
-.tool-bar .s-menu,
-.tool-bar .s-menu {
+.tool-bar .s-menu-btn,
+.tool-bar .s-menu-btn {
   height: 25px;
   line-height: 25px;
   vertical-align: top; }
 
-/* line 315, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 317, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar .view-switcher,
 .top-bar .view-switcher {
   margin-right: 20px; }
 
-/* line 320, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 322, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar {
   overflow: visible;
   position: absolute;
@@ -3282,42 +3549,27 @@ span.req {
   height: 24px;
   line-height: 24px;
   white-space: nowrap; }
-  /* line 328, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 330, ../../../../general/res/sass/user-environ/_layout.scss */
   .object-browse-bar .left {
     padding-right: 20px; }
-    /* line 330, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 332, ../../../../general/res/sass/user-environ/_layout.scss */
     .object-browse-bar .left .l-back {
       display: inline-block;
       float: left;
       margin-right: 10px; }
 
-/*.object-holder {
-    .s-btn {
-        //background: red !important;
-        $h: 16px;
-        height: $h;
-        line-height: $h;
-        > span {
-            font-size: 0.7rem;
-        }
-    }
-}*/
-/* line 350, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 340, ../../../../general/res/sass/user-environ/_layout.scss */
 .l-flex {
   display: flex;
   display: -webkit-flex;
   flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap; }
-  /* line 353, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 343, ../../../../general/res/sass/user-environ/_layout.scss */
   .l-flex .left {
     flex: 1 1 0;
     -webkit-flex: 1 1 0;
     padding-right: 10px; }
 
-/* line 360, ../../../../general/res/sass/user-environ/_layout.scss */
-.vscroll {
-  overflow-y: auto; }
-
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -3663,13 +3915,15 @@ span.req {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* line 23, ../../../../general/res/sass/search/_search.scss */
-.abs.search-holder, .s-menu span.search-holder.l-click-area {
+.abs.search-holder, .l-datetime-picker .l-month-year-pager .search-holder.pager,
+.l-datetime-picker .l-month-year-pager .search-holder.val, .s-menu-btn span.search-holder.l-click-area {
   height: 25px;
   bottom: 0;
   top: 23px;
   z-index: 5; }
   /* line 27, ../../../../general/res/sass/search/_search.scss */
-  .abs.search-holder.active, .s-menu span.search-holder.active.l-click-area {
+  .abs.search-holder.active, .l-datetime-picker .l-month-year-pager .search-holder.active.pager,
+  .l-datetime-picker .l-month-year-pager .search-holder.active.val, .s-menu-btn span.search-holder.active.l-click-area {
     height: auto;
     bottom: 0; }
 
@@ -3940,14 +4194,14 @@ span.req {
   height: 30px;
   text-align: right; }
   /* line 67, ../../../../general/res/sass/overlay/_overlay.scss */
-  .overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu {
+  .overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu-btn {
     font-size: 95%;
     height: 30px;
     line-height: 30px;
     margin-left: 5px;
     padding: 0 15px; }
     /* line 69, ../../../../general/res/sass/overlay/_overlay.scss */
-    .overlay .bottom-bar .s-btn:not(.major), .overlay .bottom-bar .s-menu:not(.major) {
+    .overlay .bottom-bar .s-btn:not(.major), .overlay .bottom-bar .s-menu-btn:not(.major) {
       background-color: gray;
       -moz-border-radius: 3px;
       -webkit-border-radius: 3px;
@@ -3974,16 +4228,16 @@ span.req {
       -o-transition: background, 0.25s;
       -webkit-transition: background, 0.25s;
       transition: background, 0.25s;
-      text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; }
+      text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; }
       /* line 272, ../../../../general/res/sass/_mixins.scss */
-      .overlay .bottom-bar .s-btn:not(.major) .icon, .overlay .bottom-bar .s-menu:not(.major) .icon {
+      .overlay .bottom-bar .s-btn:not(.major) .icon, .overlay .bottom-bar .s-menu-btn:not(.major) .icon {
         color: #fff; }
       @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
         /* line 277, ../../../../general/res/sass/_mixins.scss */
-        .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover {
+        .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover, .overlay .bottom-bar .s-menu-btn:not(.major):not(.disabled):hover {
           background: linear-gradient(#a6a6a6, #999999); }
           /* line 279, ../../../../general/res/sass/_mixins.scss */
-          .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover > .icon {
+          .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu-btn:not(.major):not(.disabled):hover > .icon {
             color: white; } }
 /* line 85, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay .contents.l-dialog {
@@ -4322,12 +4576,14 @@ ul.tree {
   .frame.child-frame.panel:hover {
     border-color: rgba(179, 179, 179, 0.1); }
 /* line 32, ../../../../general/res/sass/user-environ/_frame.scss */
-.frame > .object-header.abs, .s-menu .frame > span.object-header.l-click-area {
+.frame > .object-header.abs, .l-datetime-picker .l-month-year-pager .frame > .object-header.pager,
+.l-datetime-picker .l-month-year-pager .frame > .object-header.val, .s-menu-btn .frame > span.object-header.l-click-area {
   font-size: 0.75em;
   height: 16px;
   line-height: 16px; }
 /* line 38, ../../../../general/res/sass/user-environ/_frame.scss */
-.frame > .object-holder.abs, .s-menu .frame > span.object-holder.l-click-area {
+.frame > .object-holder.abs, .l-datetime-picker .l-month-year-pager .frame > .object-holder.pager,
+.l-datetime-picker .l-month-year-pager .frame > .object-holder.val, .s-menu-btn .frame > span.object-holder.l-click-area {
   top: 21px; }
 /* line 41, ../../../../general/res/sass/user-environ/_frame.scss */
 .frame .contents {
@@ -4336,17 +4592,17 @@ ul.tree {
   bottom: 5px;
   left: 5px; }
 /* line 49, ../../../../general/res/sass/user-environ/_frame.scss */
-.frame.frame-template .s-btn, .frame.frame-template .s-menu,
-.frame.frame-template .s-menu {
+.frame.frame-template .s-btn, .frame.frame-template .s-menu-btn,
+.frame.frame-template .s-menu-btn {
   height: 16px;
   line-height: 16px;
   padding: 0 5px; }
   /* line 54, ../../../../general/res/sass/user-environ/_frame.scss */
-  .frame.frame-template .s-btn > span, .frame.frame-template .s-menu > span,
-  .frame.frame-template .s-menu > span {
+  .frame.frame-template .s-btn > span, .frame.frame-template .s-menu-btn > span,
+  .frame.frame-template .s-menu-btn > span {
     font-size: 0.65rem; }
 /* line 59, ../../../../general/res/sass/user-environ/_frame.scss */
-.frame.frame-template .s-menu:after {
+.frame.frame-template .s-menu-btn:after {
   font-size: 8px; }
 /* line 63, ../../../../general/res/sass/user-environ/_frame.scss */
 .frame.frame-template .view-switcher {
@@ -4407,7 +4663,9 @@ ul.tree {
 .edit-mode .top-bar .buttons-main {
   white-space: nowrap; }
   /* line 52, ../../../../general/res/sass/user-environ/_top-bar.scss */
-  .edit-mode .top-bar .buttons-main.abs, .edit-mode .top-bar .s-menu span.buttons-main.l-click-area, .s-menu .edit-mode .top-bar span.buttons-main.l-click-area {
+  .edit-mode .top-bar .buttons-main.abs, .edit-mode .top-bar .l-datetime-picker .l-month-year-pager .buttons-main.pager, .l-datetime-picker .l-month-year-pager .edit-mode .top-bar .buttons-main.pager,
+  .edit-mode .top-bar .l-datetime-picker .l-month-year-pager .buttons-main.val,
+  .l-datetime-picker .l-month-year-pager .edit-mode .top-bar .buttons-main.val, .edit-mode .top-bar .s-menu-btn span.buttons-main.l-click-area, .s-menu-btn .edit-mode .top-bar span.buttons-main.l-click-area {
     bottom: auto;
     left: auto; }
 
@@ -4722,37 +4980,41 @@ table {
   table thead,
   table .thead {
     border-bottom: 1px solid #333; }
-  /* line 43, ../../../../general/res/sass/lists/_tabular.scss */
+  /* line 44, ../../../../general/res/sass/lists/_tabular.scss */
+  .tabular:not(.fixed-header) tr th,
+  table:not(.fixed-header) tr th {
+    background-color: rgba(255, 255, 255, 0.1); }
+  /* line 48, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular tbody, .tabular .tbody,
   table tbody,
   table .tbody {
     display: table-row-group; }
-    /* line 46, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 51, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular tbody tr:hover, .tabular tbody .tr:hover, .tabular .tbody tr:hover, .tabular .tbody .tr:hover,
     table tbody tr:hover,
     table tbody .tr:hover,
     table .tbody tr:hover,
     table .tbody .tr:hover {
       background: rgba(128, 128, 128, 0.1); }
-  /* line 51, ../../../../general/res/sass/lists/_tabular.scss */
+  /* line 56, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular tr, .tabular .tr,
   table tr,
   table .tr {
     display: table-row; }
-    /* line 53, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 58, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular tr:first-child .td, .tabular .tr:first-child .td,
     table tr:first-child .td,
     table .tr:first-child .td {
       border-top: none; }
-    /* line 57, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 62, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular tr.group-header td, .tabular tr.group-header .td, .tabular .tr.group-header td, .tabular .tr.group-header .td,
     table tr.group-header td,
     table tr.group-header .td,
     table .tr.group-header td,
     table .tr.group-header .td {
-      background-color: #404040;
-      color: #a6a6a6; }
-    /* line 63, ../../../../general/res/sass/lists/_tabular.scss */
+      background-color: rgba(242, 242, 242, 0.1);
+      color: #8c8c8c; }
+    /* line 68, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular tr th, .tabular tr .th, .tabular tr td, .tabular tr .td, .tabular .tr th, .tabular .tr .th, .tabular .tr td, .tabular .tr .td,
     table tr th,
     table tr .th,
@@ -4763,26 +5025,25 @@ table {
     table .tr td,
     table .tr .td {
       display: table-cell; }
-    /* line 66, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 71, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular tr th, .tabular tr .th, .tabular .tr th, .tabular .tr .th,
     table tr th,
     table tr .th,
     table .tr th,
     table .tr .th {
-      background-color: #4d4d4d;
       border-left: 1px solid #333;
-      color: #b3b3b3;
+      color: #999;
       padding: 5px 5px;
       white-space: nowrap;
       vertical-align: middle; }
-      /* line 73, ../../../../general/res/sass/lists/_tabular.scss */
+      /* line 77, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular tr th:first-child, .tabular tr .th:first-child, .tabular .tr th:first-child, .tabular .tr .th:first-child,
       table tr th:first-child,
       table tr .th:first-child,
       table .tr th:first-child,
       table .tr .th:first-child {
         border-left: none; }
-      /* line 77, ../../../../general/res/sass/lists/_tabular.scss */
+      /* line 81, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular tr th.sort.sort:after, .tabular tr .th.sort.sort:after, .tabular .tr th.sort.sort:after, .tabular .tr .th.sort.sort:after,
       table tr th.sort.sort:after,
       table tr .th.sort.sort:after,
@@ -4794,21 +5055,21 @@ table {
         content: "\ed";
         display: inline-block;
         margin-left: 3px; }
-      /* line 85, ../../../../general/res/sass/lists/_tabular.scss */
+      /* line 89, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular tr th.sort.sort.desc:after, .tabular tr .th.sort.sort.desc:after, .tabular .tr th.sort.sort.desc:after, .tabular .tr .th.sort.sort.desc:after,
       table tr th.sort.sort.desc:after,
       table tr .th.sort.sort.desc:after,
       table .tr th.sort.sort.desc:after,
       table .tr .th.sort.sort.desc:after {
         content: "\ec"; }
-      /* line 89, ../../../../general/res/sass/lists/_tabular.scss */
+      /* line 93, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular tr th.sortable, .tabular tr .th.sortable, .tabular .tr th.sortable, .tabular .tr .th.sortable,
       table tr th.sortable,
       table tr .th.sortable,
       table .tr th.sortable,
       table .tr .th.sortable {
         cursor: pointer; }
-    /* line 93, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 97, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular tr td, .tabular tr .td, .tabular .tr td, .tabular .tr .td,
     table tr td,
     table tr .td,
@@ -4820,21 +5081,21 @@ table {
       padding: 3px 5px;
       word-wrap: break-word;
       vertical-align: top; }
-      /* line 100, ../../../../general/res/sass/lists/_tabular.scss */
+      /* line 104, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular tr td.numeric, .tabular tr .td.numeric, .tabular .tr td.numeric, .tabular .tr .td.numeric,
       table tr td.numeric,
       table tr .td.numeric,
       table .tr td.numeric,
       table .tr .td.numeric {
         text-align: right; }
-      /* line 103, ../../../../general/res/sass/lists/_tabular.scss */
+      /* line 107, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular tr td.s-cell-type-value, .tabular tr .td.s-cell-type-value, .tabular .tr td.s-cell-type-value, .tabular .tr .td.s-cell-type-value,
       table tr td.s-cell-type-value,
       table tr .td.s-cell-type-value,
       table .tr td.s-cell-type-value,
       table .tr .td.s-cell-type-value {
         text-align: right; }
-        /* line 105, ../../../../general/res/sass/lists/_tabular.scss */
+        /* line 109, ../../../../general/res/sass/lists/_tabular.scss */
         .tabular tr td.s-cell-type-value .l-cell-contents, .tabular tr .td.s-cell-type-value .l-cell-contents, .tabular .tr td.s-cell-type-value .l-cell-contents, .tabular .tr .td.s-cell-type-value .l-cell-contents,
         table tr td.s-cell-type-value .l-cell-contents,
         table tr .td.s-cell-type-value .l-cell-contents,
@@ -4845,23 +5106,23 @@ table {
           border-radius: 2px;
           padding-left: 5px;
           padding-right: 5px; }
-  /* line 121, ../../../../general/res/sass/lists/_tabular.scss */
+  /* line 125, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular.filterable tbody, .tabular.filterable .tbody,
   table.filterable tbody,
   table.filterable .tbody {
     top: 44px; }
-  /* line 124, ../../../../general/res/sass/lists/_tabular.scss */
+  /* line 128, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular.filterable input[type="text"],
   table.filterable input[type="text"] {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     width: 100%; }
-  /* line 130, ../../../../general/res/sass/lists/_tabular.scss */
+  /* line 134, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular.fixed-header,
   table.fixed-header {
     height: 100%; }
-    /* line 132, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 136, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular.fixed-header thead, .tabular.fixed-header .thead,
     .tabular.fixed-header tbody tr, .tabular.fixed-header .tbody .tr,
     table.fixed-header thead,
@@ -4870,12 +5131,12 @@ table {
     table.fixed-header .tbody .tr {
       display: table;
       table-layout: fixed; }
-    /* line 137, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 141, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular.fixed-header thead, .tabular.fixed-header .thead,
     table.fixed-header thead,
     table.fixed-header .thead {
       width: calc(100% - 10px); }
-      /* line 139, ../../../../general/res/sass/lists/_tabular.scss */
+      /* line 143, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular.fixed-header thead:before, .tabular.fixed-header .thead:before,
       table.fixed-header thead:before,
       table.fixed-header .thead:before {
@@ -4885,8 +5146,8 @@ table {
         position: absolute;
         width: 100%;
         height: 22px;
-        background: rgba(255, 255, 255, 0.15); }
-    /* line 149, ../../../../general/res/sass/lists/_tabular.scss */
+        background-color: rgba(255, 255, 255, 0.1); }
+    /* line 153, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular.fixed-header tbody, .tabular.fixed-header .tbody,
     table.fixed-header tbody,
     table.fixed-header .tbody {
@@ -4901,7 +5162,7 @@ table {
       top: 22px;
       display: block;
       overflow-y: scroll; }
-  /* line 157, ../../../../general/res/sass/lists/_tabular.scss */
+  /* line 161, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular.t-event-messages td, .tabular.t-event-messages .td,
   table.t-event-messages td,
   table.t-event-messages .td {
@@ -4988,7 +5249,7 @@ table {
   /* line 89, ../../../../general/res/sass/plots/_plots-main.scss */
   .gl-plot .gl-plot-label,
   .gl-plot .l-plot-label {
-    color: #cccccc;
+    color: #666666;
     position: absolute;
     text-align: center; }
     /* line 97, ../../../../general/res/sass/plots/_plots-main.scss */
@@ -5273,9 +5534,6 @@ table {
   .l-view-section.fixed {
     font-size: 0.8em; }
   /* line 13, ../../../../general/res/sass/_views.scss */
-  .l-view-section.scrolling {
-    overflow: auto; }
-  /* line 16, ../../../../general/res/sass/_views.scss */
   .l-view-section .controls,
   .l-view-section label,
   .l-view-section .inline-block {
@@ -5338,7 +5596,7 @@ table {
     -o-transition: background, 0.25s;
     -webkit-transition: background, 0.25s;
     transition: background, 0.25s;
-    text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
+    text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
     box-sizing: border-box;
     cursor: pointer;
     float: left;
@@ -5487,7 +5745,7 @@ table {
       -o-transition: background, 0.25s;
       -webkit-transition: background, 0.25s;
       transition: background, 0.25s;
-      text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px;
+      text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px;
       color: #80dfff; }
       /* line 272, ../../../../general/res/sass/_mixins.scss */
       .items-holder .item.grid-item.selected .icon {
@@ -5640,7 +5898,7 @@ table {
 .autoflow {
   font-size: 0.75rem; }
   /* line 32, ../../../../general/res/sass/_autoflow.scss */
-  .autoflow:hover .l-autoflow-header .s-btn.change-column-width, .autoflow:hover .l-autoflow-header .change-column-width.s-menu {
+  .autoflow:hover .l-autoflow-header .s-btn.change-column-width, .autoflow:hover .l-autoflow-header .change-column-width.s-menu-btn {
     -moz-transition-property: visibility, opacity, background-color, border-color;
     -o-transition-property: visibility, opacity, background-color, border-color;
     -webkit-transition-property: visibility, opacity, background-color, border-color;
@@ -5664,7 +5922,7 @@ table {
     .autoflow .l-autoflow-header span {
       vertical-align: middle; }
     /* line 48, ../../../../general/res/sass/_autoflow.scss */
-    .autoflow .l-autoflow-header .s-btn.change-column-width, .autoflow .l-autoflow-header .change-column-width.s-menu {
+    .autoflow .l-autoflow-header .s-btn.change-column-width, .autoflow .l-autoflow-header .change-column-width.s-menu-btn {
       -moz-transition-property: visibility, opacity, background-color, border-color;
       -o-transition-property: visibility, opacity, background-color, border-color;
       -webkit-transition-property: visibility, opacity, background-color, border-color;
@@ -5941,7 +6199,7 @@ table {
   left: 0;
   z-index: 1; }
   /* line 22, ../../../../general/res/sass/features/_time-display.scss */
-  .l-time-display.l-timer .l-elem.l-value .ui-symbol.direction {
+  .l-time-display.l-timer .l-elem.l-value .ui-symbol.direction, .l-time-display.l-timer .l-elem.l-value .l-datetime-picker .l-month-year-pager .direction.pager, .l-datetime-picker .l-month-year-pager .l-time-display.l-timer .l-elem.l-value .direction.pager {
     font-size: 0.8em; }
 /* line 26, ../../../../general/res/sass/features/_time-display.scss */
 .l-time-display.l-timer:hover .l-elem.l-value {
diff --git a/platform/commonUI/themes/espresso/res/sass/_constants.scss b/platform/commonUI/themes/espresso/res/sass/_constants.scss
index cbc9a67e0a..e6106d049c 100644
--- a/platform/commonUI/themes/espresso/res/sass/_constants.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_constants.scss
@@ -7,12 +7,14 @@ $colorKey: #0099cc;
 $colorKeySelectedBg: #005177;
 $colorKeyFg: #fff;
 $colorInteriorBorder: rgba($colorBodyFg, 0.1);
+$colorA: #ccc;
+$colorAHov: #fff;
 $contrastRatioPercent: 7%;
 $basicCr: 2px;
 $controlCr: 3px;
 $smallCr: 2px;
 
-// Buttons
+// Buttons and Controls
 $colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent); //
 $colorBtnFg: $colorBodyFg;
 $colorBtnMajorBg: $colorKey;
@@ -20,6 +22,18 @@ $colorBtnMajorFg: $colorKeyFg;
 $colorBtnIcon: $colorKey;
 $colorInvokeMenu: #fff;
 $contrastInvokeMenuPercent: 20%;
+$shdwBtns: rgba(black, 0.2) 0 1px 2px;
+$sliderColorBase: $colorKey;
+$sliderColorRangeHolder: rgba(black, 0.1);
+$sliderColorRange: rgba($sliderColorBase, 0.3);
+$sliderColorRangeHov: rgba($sliderColorBase, 0.5);
+$sliderColorKnob: rgba($sliderColorBase, 0.6);
+$sliderColorKnobHov: $sliderColorBase;
+$sliderColorRangeValHovBg: rgba($sliderColorBase, 0.1);
+$sliderColorRangeValHovFg: $colorKeyFg;
+$sliderKnobW: nth($ueTimeControlH,2)/2;
+$timeControllerToiLineColor: #00c2ff;
+$timeControllerToiLineColorHov: #fff;
 
 // General Colors
 $colorAlt1: #ffc700;
@@ -34,6 +48,7 @@ $colorFormSectionHeader: rgba(#000, 0.2);
 $colorInvokeMenu: #fff;
 $colorObjHdrTxt: $colorBodyFg;
 $colorObjHdrIc: pullForward($colorObjHdrTxt, 20%);
+$colorTick: rgba(white, 0.2);
 
 // Menu colors
 $colorMenuBg: pullForward($colorBodyBg, 23%);
@@ -99,16 +114,17 @@ $colorItemBgSelected: $colorKey;
 $colorTabBorder: pullForward($colorBodyBg, 10%);
 $colorTabBodyBg: darken($colorBodyBg, 10%);
 $colorTabBodyFg: lighten($colorTabBodyBg, 40%);
-$colorTabHeaderBg: lighten($colorBodyBg, 10%);
-$colorTabHeaderFg: lighten($colorTabHeaderBg, 40%);
+$colorTabHeaderBg: rgba(white, 0.1); // lighten($colorBodyBg, 10%);
+$colorTabHeaderFg: $colorBodyFg; //lighten($colorTabHeaderBg, 40%);
 $colorTabHeaderBorder: $colorBodyBg;
 
 // Plot
 $colorPlotBg: rgba(black, 0.1);
 $colorPlotFg: $colorBodyFg;
-$colorPlotHash: rgba(white, 0.2);
+$colorPlotHash: $colorTick;
 $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
+$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
 
 // Tree
 $colorItemTreeIcon: $colorKey;
@@ -139,5 +155,12 @@ $colorGrippyInteriorHover: $colorKey;
 // Mobile
 $colorMobilePaneLeft: darken($colorBodyBg, 5%);
 
+// Datetime Picker
+$colorCalCellHovBg: $colorKey;
+$colorCalCellHovFg: $colorKeyFg;
+$colorCalCellSelectedBg: $colorItemTreeSelectedBg;
+$colorCalCellSelectedFg: $colorItemTreeSelectedFg;
+$colorCalCellInMonthBg: pushBack($colorMenuBg, 5%);
+
 // About Screen
 $colorAboutLink: #84b3ff;
\ No newline at end of file
diff --git a/platform/commonUI/themes/espresso/res/sass/_mixins.scss b/platform/commonUI/themes/espresso/res/sass/_mixins.scss
index cf19f56e2a..385b41a079 100644
--- a/platform/commonUI/themes/espresso/res/sass/_mixins.scss
+++ b/platform/commonUI/themes/espresso/res/sass/_mixins.scss
@@ -1,13 +1,13 @@
 @mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) {
 	@include containerBase($bg, $fg);
 	@include background-image(linear-gradient(lighten($bg, 5%), $bg));
-	@include boxShdwSubtle();
+	@include boxShdw($shdwBtns);
 }
 
-@mixin btnSubtle($bg: $colorBodyBg, $bgHov: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
+	@mixin btnSubtle($bg: $colorBodyBg, $bgHov: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
 	@include containerSubtle($bg, $fg);
 	@include btnBase($bg, linear-gradient(lighten($bg, 15%), lighten($bg, 10%)), $fg, $ic);
-	@include text-shadow(rgba(black, 0.3) 0 1px 1px);
+	@include text-shadow($shdwItemText);
 }
 
 @function pullForward($c: $colorBodyBg, $p: 20%) {
diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css
index 3a819210eb..2650b2b90b 100644
--- a/platform/commonUI/themes/snow/res/css/theme-snow.css
+++ b/platform/commonUI/themes/snow/res/css/theme-snow.css
@@ -247,7 +247,7 @@ a.disabled {
 
 /* line 42, ../../../../general/res/sass/_effects.scss */
 .test {
-  background-color: rgba(255, 204, 0, 0.2); }
+  background-color: rgba(255, 204, 0, 0.2) !important; }
 
 @-moz-keyframes pulse {
   0% {
@@ -314,18 +314,18 @@ a.disabled {
   font-weight: normal;
   font-style: normal; }
 /* line 37, ../../../../general/res/sass/_global.scss */
-.ui-symbol {
+.ui-symbol, .l-datetime-picker .l-month-year-pager .pager {
   font-family: 'symbolsfont'; }
 
 /************************** HTML ENTITIES */
 /* line 42, ../../../../general/res/sass/_global.scss */
 a {
-  color: #ccc;
+  color: #999;
   cursor: pointer;
   text-decoration: none; }
   /* line 46, ../../../../general/res/sass/_global.scss */
   a:hover {
-    color: #fff; }
+    color: #0099cc; }
 
 /* line 51, ../../../../general/res/sass/_global.scss */
 body, html {
@@ -373,7 +373,8 @@ mct-container {
   display: block; }
 
 /* line 97, ../../../../general/res/sass/_global.scss */
-.abs, .s-menu span.l-click-area {
+.abs, .l-datetime-picker .l-month-year-pager .pager,
+.l-datetime-picker .l-month-year-pager .val, .s-menu-btn span.l-click-area {
   position: absolute;
   top: 0;
   right: 0;
@@ -403,21 +404,29 @@ mct-container {
   text-align: center; }
 
 /* line 128, ../../../../general/res/sass/_global.scss */
+.scrolling {
+  overflow: auto; }
+
+/* line 132, ../../../../general/res/sass/_global.scss */
+.vscroll {
+  overflow-y: auto; }
+
+/* line 136, ../../../../general/res/sass/_global.scss */
 .no-margin {
   margin: 0; }
 
-/* line 132, ../../../../general/res/sass/_global.scss */
+/* line 140, ../../../../general/res/sass/_global.scss */
 .ds {
   -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px;
   box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; }
 
-/* line 136, ../../../../general/res/sass/_global.scss */
+/* line 144, ../../../../general/res/sass/_global.scss */
 .hide,
 .hidden {
   display: none !important; }
 
-/* line 141, ../../../../general/res/sass/_global.scss */
+/* line 149, ../../../../general/res/sass/_global.scss */
 .sep {
   color: rgba(255, 255, 255, 0.2); }
 
@@ -443,7 +452,8 @@ mct-container {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* line 26, ../../../../general/res/sass/_about.scss */
-.l-about.abs, .s-menu span.l-about.l-click-area {
+.l-about.abs, .l-datetime-picker .l-month-year-pager .l-about.pager,
+.l-datetime-picker .l-month-year-pager .l-about.val, .s-menu-btn span.l-about.l-click-area {
   overflow: auto; }
 /* line 31, ../../../../general/res/sass/_about.scss */
 .l-about .l-logo-holder {
@@ -493,7 +503,7 @@ mct-container {
   .s-about .s-logo-openmctweb {
     background-image: url("../../../../general/res/images/logo-openmctweb-shdw.svg"); }
   /* line 81, ../../../../general/res/sass/_about.scss */
-  .s-about .s-btn, .s-about .s-menu {
+  .s-about .s-btn, .s-about .s-menu-btn {
     line-height: 2em; }
   /* line 85, ../../../../general/res/sass/_about.scss */
   .s-about .l-licenses-software .l-license-software {
@@ -534,7 +544,8 @@ mct-container {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* line 24, ../../../../general/res/sass/_text.scss */
-.abs.l-standalone, .s-menu span.l-standalone.l-click-area {
+.abs.l-standalone, .l-datetime-picker .l-month-year-pager .l-standalone.pager,
+.l-datetime-picker .l-month-year-pager .l-standalone.val, .s-menu-btn span.l-standalone.l-click-area {
   padding: 5% 20%; }
 
 /* line 29, ../../../../general/res/sass/_text.scss */
@@ -596,46 +607,52 @@ mct-container {
     border-right: 5px solid transparent; }
 
 /* line 32, ../../../../general/res/sass/_icons.scss */
-.ui-symbol.icon {
+.ui-symbol.type-icon, .l-datetime-picker .l-month-year-pager .type-icon.pager {
+  color: #b3b3b3; }
+/* line 35, ../../../../general/res/sass/_icons.scss */
+.ui-symbol.icon, .l-datetime-picker .l-month-year-pager .icon.pager {
   color: #0099cc; }
-  /* line 34, ../../../../general/res/sass/_icons.scss */
-  .ui-symbol.icon.alert {
+  /* line 37, ../../../../general/res/sass/_icons.scss */
+  .ui-symbol.icon.alert, .l-datetime-picker .l-month-year-pager .icon.alert.pager {
     color: #ff3c00; }
-    /* line 36, ../../../../general/res/sass/_icons.scss */
-    .ui-symbol.icon.alert:hover {
+    /* line 39, ../../../../general/res/sass/_icons.scss */
+    .ui-symbol.icon.alert:hover, .l-datetime-picker .l-month-year-pager .icon.alert.pager:hover {
       color: #ff8a66; }
-  /* line 40, ../../../../general/res/sass/_icons.scss */
-  .ui-symbol.icon.major {
+  /* line 43, ../../../../general/res/sass/_icons.scss */
+  .ui-symbol.icon.major, .l-datetime-picker .l-month-year-pager .icon.major.pager {
     font-size: 1.65em; }
+/* line 47, ../../../../general/res/sass/_icons.scss */
+.ui-symbol.icon-calendar:after, .l-datetime-picker .l-month-year-pager .icon-calendar.pager:after {
+  content: "\e605"; }
 
-/* line 46, ../../../../general/res/sass/_icons.scss */
-.bar .ui-symbol {
+/* line 52, ../../../../general/res/sass/_icons.scss */
+.bar .ui-symbol, .bar .l-datetime-picker .l-month-year-pager .pager, .l-datetime-picker .l-month-year-pager .bar .pager {
   display: inline-block; }
 
-/* line 50, ../../../../general/res/sass/_icons.scss */
+/* line 56, ../../../../general/res/sass/_icons.scss */
 .invoke-menu {
   text-shadow: none;
   display: inline-block; }
 
-/* line 55, ../../../../general/res/sass/_icons.scss */
-.s-menu .invoke-menu,
+/* line 61, ../../../../general/res/sass/_icons.scss */
+.s-menu-btn .invoke-menu,
 .icon.major .invoke-menu {
   margin-left: 3px; }
 
-/* line 60, ../../../../general/res/sass/_icons.scss */
+/* line 66, ../../../../general/res/sass/_icons.scss */
 .menu .type-icon,
 .tree-item .type-icon,
 .super-menu.menu .type-icon {
   position: absolute; }
 
-/* line 70, ../../../../general/res/sass/_icons.scss */
+/* line 76, ../../../../general/res/sass/_icons.scss */
 .l-icon-link:before {
   content: "\f4"; }
 
-/* line 74, ../../../../general/res/sass/_icons.scss */
+/* line 80, ../../../../general/res/sass/_icons.scss */
 .l-icon-alert {
   display: none !important; }
-  /* line 76, ../../../../general/res/sass/_icons.scss */
+  /* line 82, ../../../../general/res/sass/_icons.scss */
   .l-icon-alert:before {
     color: #ff3c00;
     content: "!"; }
@@ -1251,7 +1268,7 @@ mct-container {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* line 25, ../../../../general/res/sass/controls/_buttons.scss */
-.s-btn, .s-menu {
+.s-btn, .s-menu-btn {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
@@ -1266,23 +1283,23 @@ mct-container {
   padding: 0 7.5px;
   font-size: 0.7rem; }
   /* line 35, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn .icon, .s-menu .icon {
+  .s-btn .icon, .s-menu-btn .icon {
     font-size: 0.8rem;
     color: #0099cc; }
   /* line 40, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn .title-label, .s-menu .title-label {
+  .s-btn .title-label, .s-menu-btn .title-label {
     vertical-align: top; }
   /* line 44, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.lg, .lg.s-menu {
+  .s-btn.lg, .lg.s-menu-btn {
     font-size: 1rem; }
   /* line 48, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.sm, .sm.s-menu {
+  .s-btn.sm, .sm.s-menu-btn {
     padding: 0 5px; }
   /* line 52, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.vsm, .vsm.s-menu {
+  .s-btn.vsm, .vsm.s-menu-btn {
     padding: 0 2.5px; }
   /* line 56, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.major, .major.s-menu {
+  .s-btn.major, .major.s-menu-btn {
     background-color: #0099cc;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
@@ -1302,17 +1319,17 @@ mct-container {
     transition: background, 0.25s;
     text-shadow: none; }
     /* line 272, ../../../../general/res/sass/_mixins.scss */
-    .s-btn.major .icon, .major.s-menu .icon {
+    .s-btn.major .icon, .major.s-menu-btn .icon {
       color: #fff; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
       /* line 277, ../../../../general/res/sass/_mixins.scss */
-      .s-btn.major:not(.disabled):hover, .major.s-menu:not(.disabled):hover {
+      .s-btn.major:not(.disabled):hover, .major.s-menu-btn:not(.disabled):hover {
         background: deepskyblue; }
         /* line 279, ../../../../general/res/sass/_mixins.scss */
-        .s-btn.major:not(.disabled):hover > .icon, .major.s-menu:not(.disabled):hover > .icon {
+        .s-btn.major:not(.disabled):hover > .icon, .major.s-menu-btn:not(.disabled):hover > .icon {
           color: white; } }
   /* line 62, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn:not(.major), .s-menu:not(.major) {
+  .s-btn:not(.major), .s-menu-btn:not(.major) {
     background-color: #969696;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
@@ -1332,20 +1349,20 @@ mct-container {
     transition: background, 0.25s;
     text-shadow: none; }
     /* line 272, ../../../../general/res/sass/_mixins.scss */
-    .s-btn:not(.major) .icon, .s-menu:not(.major) .icon {
+    .s-btn:not(.major) .icon, .s-menu-btn:not(.major) .icon {
       color: #eee; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
       /* line 277, ../../../../general/res/sass/_mixins.scss */
-      .s-btn:not(.major):not(.disabled):hover, .s-menu:not(.major):not(.disabled):hover {
+      .s-btn:not(.major):not(.disabled):hover, .s-menu-btn:not(.major):not(.disabled):hover {
         background: #0099cc; }
         /* line 279, ../../../../general/res/sass/_mixins.scss */
-        .s-btn:not(.major):not(.disabled):hover > .icon, .s-menu:not(.major):not(.disabled):hover > .icon {
+        .s-btn:not(.major):not(.disabled):hover > .icon, .s-menu-btn:not(.major):not(.disabled):hover > .icon {
           color: white; } }
   /* line 71, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.pause-play .icon:before, .pause-play.s-menu .icon:before {
+  .s-btn.pause-play .icon:before, .pause-play.s-menu-btn .icon:before {
     content: "\0000F1"; }
   /* line 74, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.pause-play.paused, .pause-play.paused.s-menu {
+  .s-btn.pause-play.paused, .pause-play.paused.s-menu-btn {
     background-color: #ff9900;
     -moz-border-radius: 4px;
     -webkit-border-radius: 4px;
@@ -1365,17 +1382,17 @@ mct-container {
     transition: background, 0.25s;
     text-shadow: none; }
     /* line 272, ../../../../general/res/sass/_mixins.scss */
-    .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu .icon {
+    .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu-btn .icon {
       color: #fff; }
     @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
       /* line 277, ../../../../general/res/sass/_mixins.scss */
-      .s-btn.pause-play.paused:not(.disabled):hover, .pause-play.paused.s-menu:not(.disabled):hover {
+      .s-btn.pause-play.paused:not(.disabled):hover, .pause-play.paused.s-menu-btn:not(.disabled):hover {
         background: #ffad33; }
         /* line 279, ../../../../general/res/sass/_mixins.scss */
-        .s-btn.pause-play.paused:not(.disabled):hover > .icon, .pause-play.paused.s-menu:not(.disabled):hover > .icon {
+        .s-btn.pause-play.paused:not(.disabled):hover > .icon, .pause-play.paused.s-menu-btn:not(.disabled):hover > .icon {
           color: white; } }
     /* line 76, ../../../../general/res/sass/controls/_buttons.scss */
-    .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu .icon {
+    .s-btn.pause-play.paused .icon, .pause-play.paused.s-menu-btn .icon {
       -moz-animation-name: pulse;
       -webkit-animation-name: pulse;
       animation-name: pulse;
@@ -1392,23 +1409,23 @@ mct-container {
       -webkit-animation-timing-function: ease-in-out;
       animation-timing-function: ease-in-out; }
       /* line 78, ../../../../general/res/sass/controls/_buttons.scss */
-      .s-btn.pause-play.paused .icon :before, .pause-play.paused.s-menu .icon :before {
+      .s-btn.pause-play.paused .icon :before, .pause-play.paused.s-menu-btn .icon :before {
         content: "\0000EF"; }
   /* line 86, ../../../../general/res/sass/controls/_buttons.scss */
-  .s-btn.show-thumbs .icon:before, .show-thumbs.s-menu .icon:before {
+  .s-btn.show-thumbs .icon:before, .show-thumbs.s-menu-btn .icon:before {
     content: "\000039"; }
 
 /* line 92, ../../../../general/res/sass/controls/_buttons.scss */
 .l-btn-set {
   font-size: 0; }
   /* line 98, ../../../../general/res/sass/controls/_buttons.scss */
-  .l-btn-set .s-btn, .l-btn-set .s-menu {
+  .l-btn-set .s-btn, .l-btn-set .s-menu-btn {
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
     border-radius: 0;
     margin-left: 1px; }
   /* line 104, ../../../../general/res/sass/controls/_buttons.scss */
-  .l-btn-set .first .s-btn, .l-btn-set .first .s-menu {
+  .l-btn-set .first .s-btn, .l-btn-set .first .s-menu-btn {
     -moz-border-radius-topleft: 4px;
     -webkit-border-top-left-radius: 4px;
     border-top-left-radius: 4px;
@@ -1417,7 +1434,7 @@ mct-container {
     border-bottom-left-radius: 4px;
     margin-left: 0; }
   /* line 111, ../../../../general/res/sass/controls/_buttons.scss */
-  .l-btn-set .last .s-btn, .l-btn-set .last .s-menu {
+  .l-btn-set .last .s-btn, .l-btn-set .last .s-menu-btn {
     -moz-border-radius-topright: 4px;
     -webkit-border-top-right-radius: 4px;
     border-top-right-radius: 4px;
@@ -1426,7 +1443,7 @@ mct-container {
     border-bottom-right-radius: 4px; }
 
 /* line 118, ../../../../general/res/sass/controls/_buttons.scss */
-.paused:not(.s-btn):not(.s-menu) {
+.paused:not(.s-btn):not(.s-menu-btn) {
   border-color: #ff9900 !important;
   color: #ff9900 !important; }
 
@@ -1714,7 +1731,7 @@ label.checkbox.custom {
     margin-left: 0; }
 
 /* line 208, ../../../../general/res/sass/controls/_controls.scss */
-.s-menu label.checkbox.custom {
+.s-menu-btn label.checkbox.custom {
   margin-left: 5px; }
 
 /* line 213, ../../../../general/res/sass/controls/_controls.scss */
@@ -1801,103 +1818,72 @@ label.checkbox.custom {
       opacity: 1; } }
 
 /******************************************************** SLIDERS */
-/* line 300, ../../../../general/res/sass/controls/_controls.scss */
+/* line 298, ../../../../general/res/sass/controls/_controls.scss */
 .slider .slot {
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -moz-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
-  -webkit-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
-  box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px;
-  background-color: rgba(0, 0, 0, 0.1);
-  height: 50%;
   width: auto;
   position: absolute;
-  top: 25%;
+  top: 0;
   right: 0;
-  bottom: auto;
+  bottom: 0;
   left: 0; }
-/* line 311, ../../../../general/res/sass/controls/_controls.scss */
+/* line 308, ../../../../general/res/sass/controls/_controls.scss */
 .slider .knob {
-  background-color: #969696;
-  -moz-border-radius: 4px;
-  -webkit-border-radius: 4px;
-  border-radius: 4px;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  color: #fff;
-  display: inline-block;
-  -moz-user-select: -moz-none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-  -moz-transition: background, 0.25s;
-  -o-transition: background, 0.25s;
-  -webkit-transition: background, 0.25s;
-  transition: background, 0.25s;
-  text-shadow: none;
-  cursor: ew-resize;
+  -moz-transition-property: visibility, opacity, background-color, border-color;
+  -o-transition-property: visibility, opacity, background-color, border-color;
+  -webkit-transition-property: visibility, opacity, background-color, border-color;
+  transition-property: visibility, opacity, background-color, border-color;
+  -moz-transition-duration: 0.25s;
+  -o-transition-duration: 0.25s;
+  -webkit-transition-duration: 0.25s;
+  transition-duration: 0.25s;
+  -moz-transition-timing-function: ease-in-out;
+  -o-transition-timing-function: ease-in-out;
+  -webkit-transition-timing-function: ease-in-out;
+  transition-timing-function: ease-in-out;
+  background-color: rgba(0, 153, 204, 0.5);
   position: absolute;
   height: 100%;
-  width: 12px;
+  width: 10px;
   top: 0;
   auto: 0;
   bottom: auto;
   left: auto; }
-  /* line 272, ../../../../general/res/sass/_mixins.scss */
-  .slider .knob .icon {
-    color: #eee; }
-  /* line 159, ../../../../general/res/sass/_mixins.scss */
-  .slider .knob:before {
-    -moz-transition-property: "border-color";
-    -o-transition-property: "border-color";
-    -webkit-transition-property: "border-color";
-    transition-property: "border-color";
-    -moz-transition-duration: 0.75s;
-    -o-transition-duration: 0.75s;
-    -webkit-transition-duration: 0.75s;
-    transition-duration: 0.75s;
-    -moz-transition-timing-function: ease-in-out;
-    -o-transition-timing-function: ease-in-out;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-timing-function: ease-in-out;
-    content: '';
-    display: block;
-    height: auto;
-    pointer-events: none;
-    position: absolute;
-    z-index: 2;
-    border-left: 1px solid rgba(0, 0, 0, 0.3);
-    left: 2px;
-    bottom: 5px;
-    top: 5px; }
-  /* line 181, ../../../../general/res/sass/_mixins.scss */
-  .slider .knob:not(.disabled):hover:before {
-    -moz-transition-property: "border-color";
-    -o-transition-property: "border-color";
-    -webkit-transition-property: "border-color";
-    transition-property: "border-color";
-    -moz-transition-duration: 25ms;
-    -o-transition-duration: 25ms;
-    -webkit-transition-duration: 25ms;
-    transition-duration: 25ms;
-    -moz-transition-timing-function: ease-in-out;
-    -o-transition-timing-function: ease-in-out;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-timing-function: ease-in-out;
-    border-color: #fcfcfc; }
-  /* line 322, ../../../../general/res/sass/controls/_controls.scss */
-  .slider .knob:before {
-    top: 1px;
-    bottom: 3px;
-    left: 5px; }
-/* line 329, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 313, ../../../../general/res/sass/controls/_controls.scss */
+  .slider .knob:hover {
+    background-color: rgba(0, 153, 204, 0.7); }
+/* line 324, ../../../../general/res/sass/controls/_controls.scss */
+.slider .knob-l {
+  -moz-border-radius-topleft: 10px;
+  -webkit-border-top-left-radius: 10px;
+  border-top-left-radius: 10px;
+  -moz-border-radius-bottomleft: 10px;
+  -webkit-border-bottom-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+  cursor: w-resize; }
+/* line 328, ../../../../general/res/sass/controls/_controls.scss */
+.slider .knob-r {
+  -moz-border-radius-topright: 10px;
+  -webkit-border-top-right-radius: 10px;
+  border-top-right-radius: 10px;
+  -moz-border-radius-bottomright: 10px;
+  -webkit-border-bottom-right-radius: 10px;
+  border-bottom-right-radius: 10px;
+  cursor: e-resize; }
+/* line 332, ../../../../general/res/sass/controls/_controls.scss */
 .slider .range {
-  background: rgba(0, 153, 204, 0.6);
+  -moz-transition-property: visibility, opacity, background-color, border-color;
+  -o-transition-property: visibility, opacity, background-color, border-color;
+  -webkit-transition-property: visibility, opacity, background-color, border-color;
+  transition-property: visibility, opacity, background-color, border-color;
+  -moz-transition-duration: 0.25s;
+  -o-transition-duration: 0.25s;
+  -webkit-transition-duration: 0.25s;
+  transition-duration: 0.25s;
+  -moz-transition-timing-function: ease-in-out;
+  -o-transition-timing-function: ease-in-out;
+  -webkit-transition-timing-function: ease-in-out;
+  transition-timing-function: ease-in-out;
+  background-color: rgba(0, 153, 204, 0.2);
   cursor: ew-resize;
   position: absolute;
   top: 0;
@@ -1906,13 +1892,119 @@ label.checkbox.custom {
   left: auto;
   height: auto;
   width: auto; }
-  /* line 339, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 343, ../../../../general/res/sass/controls/_controls.scss */
   .slider .range:hover {
-    background: rgba(0, 153, 204, 0.7); }
+    background-color: rgba(0, 153, 204, 0.4); }
+
+/******************************************************** DATETIME PICKER */
+/* line 350, ../../../../general/res/sass/controls/_controls.scss */
+.l-datetime-picker {
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+  font-size: 0.8rem;
+  padding: 10px !important;
+  width: 230px; }
+  /* line 356, ../../../../general/res/sass/controls/_controls.scss */
+  .l-datetime-picker .l-month-year-pager {
+    font-size: 0.8rem;
+    height: 15px;
+    margin-bottom: 5px;
+    position: relative; }
+    /* line 368, ../../../../general/res/sass/controls/_controls.scss */
+    .l-datetime-picker .l-month-year-pager .pager {
+      width: 20px; }
+      /* line 371, ../../../../general/res/sass/controls/_controls.scss */
+      .l-datetime-picker .l-month-year-pager .pager.prev {
+        right: auto; }
+        /* line 373, ../../../../general/res/sass/controls/_controls.scss */
+        .l-datetime-picker .l-month-year-pager .pager.prev:before {
+          content: "\3c"; }
+      /* line 377, ../../../../general/res/sass/controls/_controls.scss */
+      .l-datetime-picker .l-month-year-pager .pager.next {
+        left: auto;
+        text-align: right; }
+        /* line 380, ../../../../general/res/sass/controls/_controls.scss */
+        .l-datetime-picker .l-month-year-pager .pager.next:before {
+          content: "\3e"; }
+    /* line 385, ../../../../general/res/sass/controls/_controls.scss */
+    .l-datetime-picker .l-month-year-pager .val {
+      text-align: center;
+      left: 25px;
+      right: 25px; }
+  /* line 391, ../../../../general/res/sass/controls/_controls.scss */
+  .l-datetime-picker .l-calendar,
+  .l-datetime-picker .l-time-selects {
+    border-top: 1px solid rgba(102, 102, 102, 0.2); }
+  /* line 395, ../../../../general/res/sass/controls/_controls.scss */
+  .l-datetime-picker .l-time-selects {
+    line-height: 22px; }
+
+/******************************************************** CALENDAR */
+/* line 403, ../../../../general/res/sass/controls/_controls.scss */
+.l-calendar ul.l-cal-row {
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-flow: row nowrap;
+  flex-flow: row nowrap;
+  margin-top: 1px; }
+  /* line 407, ../../../../general/res/sass/controls/_controls.scss */
+  .l-calendar ul.l-cal-row:first-child {
+    margin-top: 0; }
+  /* line 410, ../../../../general/res/sass/controls/_controls.scss */
+  .l-calendar ul.l-cal-row li {
+    -webkit-flex: 1 0;
+    flex: 1 0;
+    margin-left: 1px;
+    padding: 5px;
+    text-align: center; }
+    /* line 416, ../../../../general/res/sass/controls/_controls.scss */
+    .l-calendar ul.l-cal-row li:first-child {
+      margin-left: 0; }
+  /* line 420, ../../../../general/res/sass/controls/_controls.scss */
+  .l-calendar ul.l-cal-row.l-header li {
+    color: #999999; }
+  /* line 423, ../../../../general/res/sass/controls/_controls.scss */
+  .l-calendar ul.l-cal-row.l-body li {
+    -moz-transition-property: background-color;
+    -o-transition-property: background-color;
+    -webkit-transition-property: background-color;
+    transition-property: background-color;
+    -moz-transition-duration: 0.25s;
+    -o-transition-duration: 0.25s;
+    -webkit-transition-duration: 0.25s;
+    transition-duration: 0.25s;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    cursor: pointer; }
+    /* line 426, ../../../../general/res/sass/controls/_controls.scss */
+    .l-calendar ul.l-cal-row.l-body li.in-month {
+      background-color: #f2f2f2; }
+    /* line 429, ../../../../general/res/sass/controls/_controls.scss */
+    .l-calendar ul.l-cal-row.l-body li .sub {
+      color: #999999;
+      font-size: 0.8em; }
+    /* line 433, ../../../../general/res/sass/controls/_controls.scss */
+    .l-calendar ul.l-cal-row.l-body li.selected {
+      background: #1ac6ff;
+      color: #fcfcfc; }
+      /* line 436, ../../../../general/res/sass/controls/_controls.scss */
+      .l-calendar ul.l-cal-row.l-body li.selected .sub {
+        color: inherit; }
+    /* line 440, ../../../../general/res/sass/controls/_controls.scss */
+    .l-calendar ul.l-cal-row.l-body li:hover {
+      background-color: #0099cc;
+      color: #fff; }
+      /* line 443, ../../../../general/res/sass/controls/_controls.scss */
+      .l-calendar ul.l-cal-row.l-body li:hover .sub {
+        color: inherit; }
 
 /******************************************************** BROWSER ELEMENTS */
 @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
-  /* line 348, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 454, ../../../../general/res/sass/controls/_controls.scss */
   ::-webkit-scrollbar {
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -1927,7 +2019,7 @@ label.checkbox.custom {
     height: 10px;
     width: 10px; }
 
-  /* line 357, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 463, ../../../../general/res/sass/controls/_controls.scss */
   ::-webkit-scrollbar-thumb {
     background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzg5ODk4OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkN2Q3ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
     background-size: 100%;
@@ -1941,7 +2033,7 @@ label.checkbox.custom {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box; }
-    /* line 366, ../../../../general/res/sass/controls/_controls.scss */
+    /* line 472, ../../../../general/res/sass/controls/_controls.scss */
     ::-webkit-scrollbar-thumb:hover {
       background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYWNlNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwOTljYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
       background-size: 100%;
@@ -1950,7 +2042,7 @@ label.checkbox.custom {
       background-image: -webkit-linear-gradient(#00ace6, #0099cc 20px);
       background-image: linear-gradient(#00ace6, #0099cc 20px); }
 
-  /* line 371, ../../../../general/res/sass/controls/_controls.scss */
+  /* line 477, ../../../../general/res/sass/controls/_controls.scss */
   ::-webkit-scrollbar-corner {
     background: rgba(0, 0, 0, 0.1); } }
 /*****************************************************************************
@@ -2009,13 +2101,13 @@ label.checkbox.custom {
  *****************************************************************************/
 /******************************************************** MENU BUTTONS */
 /* line 31, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu .icon {
+.s-menu-btn .icon {
   font-size: 120%; }
 /* line 35, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu .title-label {
+.s-menu-btn .title-label {
   margin-left: 3px; }
 /* line 39, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu:after {
+.s-menu-btn:after {
   text-shadow: none;
   content: '\76';
   display: inline-block;
@@ -2024,14 +2116,14 @@ label.checkbox.custom {
   vertical-align: top;
   color: rgba(255, 255, 255, 0.4); }
 /* line 46, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu.create-btn .title-label {
+.s-menu-btn.create-btn .title-label {
   font-size: 1rem; }
 /* line 54, ../../../../general/res/sass/controls/_menus.scss */
-.s-menu .menu {
+.s-menu-btn .menu {
   left: 0;
   text-align: left; }
   /* line 57, ../../../../general/res/sass/controls/_menus.scss */
-  .s-menu .menu .ui-symbol.icon {
+  .s-menu-btn .menu .ui-symbol.icon, .s-menu-btn .menu .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .s-menu-btn .menu .icon.pager {
     width: 12px; }
 
 /******************************************************** MENUS THEMSELVES */
@@ -2039,294 +2131,423 @@ label.checkbox.custom {
 .menu-element {
   cursor: pointer;
   position: relative; }
-  /* line 70, ../../../../general/res/sass/controls/_menus.scss */
-  .menu-element .menu {
-    -moz-border-radius: 4px;
-    -webkit-border-radius: 4px;
-    border-radius: 4px;
-    background-color: white;
-    -moz-border-radius: 4px;
-    -webkit-border-radius: 4px;
-    border-radius: 4px;
-    -moz-box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    color: #4d4d4d;
-    display: inline-block;
-    -moz-box-shadow: rgba(0, 0, 0, 0.5) 0 1px 5px;
-    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 1px 5px;
-    box-shadow: rgba(0, 0, 0, 0.5) 0 1px 5px;
-    text-shadow: none;
-    display: block;
-    padding: 3px 0;
-    position: absolute;
-    z-index: 10; }
-    /* line 79, ../../../../general/res/sass/controls/_menus.scss */
-    .menu-element .menu ul {
+
+/* line 69, ../../../../general/res/sass/controls/_menus.scss */
+.s-menu, .menu {
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+  background-color: white;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: #4d4d4d;
+  display: inline-block;
+  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0 1px 5px;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 1px 5px;
+  box-shadow: rgba(0, 0, 0, 0.5) 0 1px 5px;
+  text-shadow: none;
+  padding: 3px 0; }
+
+/* line 77, ../../../../general/res/sass/controls/_menus.scss */
+.menu {
+  display: block;
+  position: absolute;
+  z-index: 10; }
+  /* line 82, ../../../../general/res/sass/controls/_menus.scss */
+  .menu ul {
+    margin: 0;
+    padding: 0; }
+    /* line 329, ../../../../general/res/sass/_mixins.scss */
+    .menu ul li {
+      list-style-type: none;
       margin: 0;
       padding: 0; }
-      /* line 329, ../../../../general/res/sass/_mixins.scss */
-      .menu-element .menu ul li {
-        list-style-type: none;
-        margin: 0;
-        padding: 0; }
-      /* line 81, ../../../../general/res/sass/controls/_menus.scss */
-      .menu-element .menu ul li {
-        -moz-box-sizing: border-box;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        border-top: 1px solid white;
-        color: #666666;
-        line-height: 1.5rem;
-        padding: 3px 10px 3px 30px;
-        position: relative;
-        white-space: nowrap; }
-        /* line 89, ../../../../general/res/sass/controls/_menus.scss */
-        .menu-element .menu ul li:first-child {
-          border: none; }
-        /* line 92, ../../../../general/res/sass/controls/_menus.scss */
-        .menu-element .menu ul li:hover {
-          background: #e6e6e6;
-          color: #4d4d4d; }
-          /* line 95, ../../../../general/res/sass/controls/_menus.scss */
-          .menu-element .menu ul li:hover .icon {
-            color: #0099cc; }
-        /* line 99, ../../../../general/res/sass/controls/_menus.scss */
-        .menu-element .menu ul li .type-icon {
-          left: 10px; }
-  /* line 106, ../../../../general/res/sass/controls/_menus.scss */
-  .menu-element .menu,
-  .menu-element .context-menu,
-  .menu-element .checkbox-menu,
-  .menu-element .super-menu {
-    pointer-events: auto; }
-    /* line 112, ../../../../general/res/sass/controls/_menus.scss */
-    .menu-element .menu ul li a,
-    .menu-element .context-menu ul li a,
-    .menu-element .checkbox-menu ul li a,
-    .menu-element .super-menu ul li a {
-      color: #4d4d4d; }
-    /* line 115, ../../../../general/res/sass/controls/_menus.scss */
-    .menu-element .menu ul li .icon,
-    .menu-element .context-menu ul li .icon,
-    .menu-element .checkbox-menu ul li .icon,
-    .menu-element .super-menu ul li .icon {
-      color: #0099cc; }
-    /* line 118, ../../../../general/res/sass/controls/_menus.scss */
-    .menu-element .menu ul li .type-icon,
-    .menu-element .context-menu ul li .type-icon,
-    .menu-element .checkbox-menu ul li .type-icon,
-    .menu-element .super-menu ul li .type-icon {
-      left: 5px; }
-  /* line 130, ../../../../general/res/sass/controls/_menus.scss */
-  .menu-element .checkbox-menu ul li {
-    padding-left: 50px; }
-    /* line 132, ../../../../general/res/sass/controls/_menus.scss */
-    .menu-element .checkbox-menu ul li .checkbox {
-      position: absolute;
-      left: 5px;
-      top: 0.53333rem; }
-      /* line 137, ../../../../general/res/sass/controls/_menus.scss */
-      .menu-element .checkbox-menu ul li .checkbox em {
-        height: 0.7rem;
-        width: 0.7rem; }
-        /* line 140, ../../../../general/res/sass/controls/_menus.scss */
-        .menu-element .checkbox-menu ul li .checkbox em:before {
-          font-size: 7px !important;
-          height: 0.7rem;
-          width: 0.7rem;
-          line-height: 0.7rem; }
-    /* line 148, ../../../../general/res/sass/controls/_menus.scss */
-    .menu-element .checkbox-menu ul li .type-icon {
-      left: 25px; }
-  /* line 154, ../../../../general/res/sass/controls/_menus.scss */
-  .menu-element .super-menu {
-    display: block;
-    width: 500px;
-    height: 480px; }
-    /* line 162, ../../../../general/res/sass/controls/_menus.scss */
-    .menu-element .super-menu .contents {
-      overflow: hidden;
-      position: absolute;
-      top: 5px;
-      right: 5px;
-      bottom: 5px;
-      left: 5px;
-      width: auto;
-      height: auto; }
-    /* line 165, ../../../../general/res/sass/controls/_menus.scss */
-    .menu-element .super-menu .pane {
+    /* line 84, ../../../../general/res/sass/controls/_menus.scss */
+    .menu ul li {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
-      box-sizing: border-box; }
-      /* line 167, ../../../../general/res/sass/controls/_menus.scss */
-      .menu-element .super-menu .pane.left {
-        border-right: 1px solid #e6e6e6;
-        left: 0;
-        padding-right: 5px;
-        right: auto;
-        width: 50%;
-        overflow-x: hidden;
-        overflow-y: auto; }
-        /* line 177, ../../../../general/res/sass/controls/_menus.scss */
-        .menu-element .super-menu .pane.left ul li {
-          -moz-border-radius: 4px;
-          -webkit-border-radius: 4px;
-          border-radius: 4px;
-          padding-left: 30px;
-          border-top: none; }
-      /* line 184, ../../../../general/res/sass/controls/_menus.scss */
-      .menu-element .super-menu .pane.right {
-        left: auto;
-        right: 0;
-        padding: 25px;
-        width: 50%; }
-    /* line 194, ../../../../general/res/sass/controls/_menus.scss */
-    .menu-element .super-menu .menu-item-description .desc-area.icon {
-      color: #0099cc;
+      box-sizing: border-box;
+      border-top: 1px solid white;
+      color: #666666;
+      line-height: 1.5rem;
+      padding: 3px 10px 3px 30px;
       position: relative;
-      font-size: 8em;
-      left: 0;
-      height: 150px;
-      line-height: 150px;
-      margin-bottom: 25px;
-      text-align: center; }
-    /* line 205, ../../../../general/res/sass/controls/_menus.scss */
-    .menu-element .super-menu .menu-item-description .desc-area.title {
-      color: #666;
-      font-size: 1.2em;
-      margin-bottom: 0.5em; }
-    /* line 210, ../../../../general/res/sass/controls/_menus.scss */
-    .menu-element .super-menu .menu-item-description .desc-area.description {
-      color: #666;
-      font-size: 0.8em;
-      line-height: 1.5em; }
-  /* line 219, ../../../../general/res/sass/controls/_menus.scss */
-  .menu-element .context-menu, .menu-element .checkbox-menu {
-    font-size: 0.80rem; }
+      white-space: nowrap; }
+      /* line 92, ../../../../general/res/sass/controls/_menus.scss */
+      .menu ul li:first-child {
+        border: none; }
+      /* line 95, ../../../../general/res/sass/controls/_menus.scss */
+      .menu ul li:hover {
+        background: #e6e6e6;
+        color: #4d4d4d; }
+        /* line 98, ../../../../general/res/sass/controls/_menus.scss */
+        .menu ul li:hover .icon {
+          color: #0099cc; }
+      /* line 102, ../../../../general/res/sass/controls/_menus.scss */
+      .menu ul li .type-icon {
+        left: 10px; }
 
-/* line 224, ../../../../general/res/sass/controls/_menus.scss */
-.context-menu-holder {
-  pointer-events: none;
+/* line 109, ../../../../general/res/sass/controls/_menus.scss */
+.menu,
+.context-menu,
+.checkbox-menu,
+.super-menu {
+  pointer-events: auto; }
+  /* line 115, ../../../../general/res/sass/controls/_menus.scss */
+  .menu ul li a,
+  .context-menu ul li a,
+  .checkbox-menu ul li a,
+  .super-menu ul li a {
+    color: #4d4d4d; }
+  /* line 118, ../../../../general/res/sass/controls/_menus.scss */
+  .menu ul li .icon,
+  .context-menu ul li .icon,
+  .checkbox-menu ul li .icon,
+  .super-menu ul li .icon {
+    color: #0099cc; }
+  /* line 121, ../../../../general/res/sass/controls/_menus.scss */
+  .menu ul li .type-icon,
+  .context-menu ul li .type-icon,
+  .checkbox-menu ul li .type-icon,
+  .super-menu ul li .type-icon {
+    left: 5px; }
+
+/* line 133, ../../../../general/res/sass/controls/_menus.scss */
+.checkbox-menu ul li {
+  padding-left: 50px; }
+  /* line 135, ../../../../general/res/sass/controls/_menus.scss */
+  .checkbox-menu ul li .checkbox {
+    position: absolute;
+    left: 5px;
+    top: 0.53333rem; }
+    /* line 140, ../../../../general/res/sass/controls/_menus.scss */
+    .checkbox-menu ul li .checkbox em {
+      height: 0.7rem;
+      width: 0.7rem; }
+      /* line 143, ../../../../general/res/sass/controls/_menus.scss */
+      .checkbox-menu ul li .checkbox em:before {
+        font-size: 7px !important;
+        height: 0.7rem;
+        width: 0.7rem;
+        line-height: 0.7rem; }
+  /* line 151, ../../../../general/res/sass/controls/_menus.scss */
+  .checkbox-menu ul li .type-icon {
+    left: 25px; }
+
+/* line 157, ../../../../general/res/sass/controls/_menus.scss */
+.super-menu {
+  display: block;
+  width: 500px;
+  height: 480px; }
+  /* line 165, ../../../../general/res/sass/controls/_menus.scss */
+  .super-menu .contents {
+    overflow: hidden;
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    bottom: 5px;
+    left: 5px;
+    width: auto;
+    height: auto; }
+  /* line 168, ../../../../general/res/sass/controls/_menus.scss */
+  .super-menu .pane {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box; }
+    /* line 170, ../../../../general/res/sass/controls/_menus.scss */
+    .super-menu .pane.left {
+      border-right: 1px solid #e6e6e6;
+      left: 0;
+      padding-right: 5px;
+      right: auto;
+      width: 50%;
+      overflow-x: hidden;
+      overflow-y: auto; }
+      /* line 180, ../../../../general/res/sass/controls/_menus.scss */
+      .super-menu .pane.left ul li {
+        -moz-border-radius: 4px;
+        -webkit-border-radius: 4px;
+        border-radius: 4px;
+        padding-left: 30px;
+        border-top: none; }
+    /* line 187, ../../../../general/res/sass/controls/_menus.scss */
+    .super-menu .pane.right {
+      left: auto;
+      right: 0;
+      padding: 25px;
+      width: 50%; }
+  /* line 197, ../../../../general/res/sass/controls/_menus.scss */
+  .super-menu .menu-item-description .desc-area.icon {
+    color: #0099cc;
+    position: relative;
+    font-size: 8em;
+    left: 0;
+    height: 150px;
+    line-height: 150px;
+    margin-bottom: 25px;
+    text-align: center; }
+  /* line 208, ../../../../general/res/sass/controls/_menus.scss */
+  .super-menu .menu-item-description .desc-area.title {
+    color: #666;
+    font-size: 1.2em;
+    margin-bottom: 0.5em; }
+  /* line 213, ../../../../general/res/sass/controls/_menus.scss */
+  .super-menu .menu-item-description .desc-area.description {
+    color: #666;
+    font-size: 0.8em;
+    line-height: 1.5em; }
+
+/* line 222, ../../../../general/res/sass/controls/_menus.scss */
+.context-menu, .checkbox-menu {
+  font-size: 0.80rem; }
+
+/* line 226, ../../../../general/res/sass/controls/_menus.scss */
+.context-menu-holder,
+.menu-holder {
   position: absolute;
-  height: 200px;
-  width: 170px;
   z-index: 70; }
   /* line 230, ../../../../general/res/sass/controls/_menus.scss */
-  .context-menu-holder .context-menu-wrapper {
+  .context-menu-holder .context-menu-wrapper,
+  .menu-holder .context-menu-wrapper {
     position: absolute;
     height: 100%;
     width: 100%; }
-  /* line 237, ../../../../general/res/sass/controls/_menus.scss */
-  .context-menu-holder.go-left .context-menu, .context-menu-holder.go-left .menu-element .checkbox-menu, .menu-element .context-menu-holder.go-left .checkbox-menu {
+  /* line 235, ../../../../general/res/sass/controls/_menus.scss */
+  .context-menu-holder.go-left .context-menu, .context-menu-holder.go-left .checkbox-menu, .context-menu-holder.go-left .menu,
+  .menu-holder.go-left .context-menu,
+  .menu-holder.go-left .checkbox-menu,
+  .menu-holder.go-left .menu {
     right: 0; }
-  /* line 240, ../../../../general/res/sass/controls/_menus.scss */
-  .context-menu-holder.go-up .context-menu, .context-menu-holder.go-up .menu-element .checkbox-menu, .menu-element .context-menu-holder.go-up .checkbox-menu {
+  /* line 239, ../../../../general/res/sass/controls/_menus.scss */
+  .context-menu-holder.go-up .context-menu, .context-menu-holder.go-up .checkbox-menu, .context-menu-holder.go-up .menu,
+  .menu-holder.go-up .context-menu,
+  .menu-holder.go-up .checkbox-menu,
+  .menu-holder.go-up .menu {
     bottom: 0; }
 
 /* line 245, ../../../../general/res/sass/controls/_menus.scss */
+.context-menu-holder {
+  pointer-events: none;
+  height: 200px;
+  width: 170px; }
+
+/* line 251, ../../../../general/res/sass/controls/_menus.scss */
 .btn-bar.right .menu,
 .menus-to-left .menu {
   left: auto;
   right: 0;
   width: auto; }
 
-/* line 1, ../../../../general/res/sass/controls/_time-controller.scss */
-.l-time-controller {
-  position: relative;
-  margin: 10px 0;
-  min-width: 400px; }
-  /* line 12, ../../../../general/res/sass/controls/_time-controller.scss */
-  .l-time-controller .l-time-range-inputs-holder,
-  .l-time-controller .l-time-range-slider {
-    font-size: 0.8em; }
-  /* line 17, ../../../../general/res/sass/controls/_time-controller.scss */
-  .l-time-controller .l-time-range-inputs-holder,
-  .l-time-controller .l-time-range-slider-holder,
-  .l-time-controller .l-time-range-ticks-holder {
-    margin-bottom: 5px;
-    position: relative; }
-  /* line 24, ../../../../general/res/sass/controls/_time-controller.scss */
-  .l-time-controller .l-time-range-slider,
-  .l-time-controller .l-time-range-ticks {
-    overflow: visible;
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    width: auto;
-    height: auto; }
-  /* line 30, ../../../../general/res/sass/controls/_time-controller.scss */
-  .l-time-controller .l-time-range-inputs-holder {
-    height: 20px; }
-  /* line 34, ../../../../general/res/sass/controls/_time-controller.scss */
-  .l-time-controller .l-time-range-slider,
-  .l-time-controller .l-time-range-ticks {
-    left: 90px;
-    right: 90px; }
-  /* line 40, ../../../../general/res/sass/controls/_time-controller.scss */
-  .l-time-controller .l-time-range-slider-holder {
-    height: 30px; }
-    /* line 42, ../../../../general/res/sass/controls/_time-controller.scss */
-    .l-time-controller .l-time-range-slider-holder .range-holder {
-      -moz-box-shadow: none;
-      -webkit-box-shadow: none;
-      box-shadow: none;
-      background: none;
-      border: none;
-      height: 75%; }
-  /* line 50, ../../../../general/res/sass/controls/_time-controller.scss */
-  .l-time-controller .l-time-range-ticks-holder {
-    height: 10px; }
-    /* line 52, ../../../../general/res/sass/controls/_time-controller.scss */
-    .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks {
-      border-top: 1px solid rgba(102, 102, 102, 0.2); }
-      /* line 54, ../../../../general/res/sass/controls/_time-controller.scss */
-      .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick {
-        background-color: rgba(102, 102, 102, 0.2);
-        border: none;
-        width: 1px;
-        margin-left: -1px; }
-        /* line 59, ../../../../general/res/sass/controls/_time-controller.scss */
-        .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick:first-child {
-          margin-left: 0; }
-        /* line 62, ../../../../general/res/sass/controls/_time-controller.scss */
-        .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick .l-time-range-tick-label {
-          color: rgba(153, 153, 153, 0.2);
-          font-size: 0.7em;
-          position: absolute;
-          margin-left: -25px;
-          text-align: center;
-          top: 10px;
-          width: 50px;
-          z-index: 2; }
-  /* line 76, ../../../../general/res/sass/controls/_time-controller.scss */
-  .l-time-controller .knob {
-    width: 9px; }
-    /* line 78, ../../../../general/res/sass/controls/_time-controller.scss */
-    .l-time-controller .knob .range-value {
+/* line 27, ../../../../general/res/sass/controls/_time-controller.scss */
+.l-time-controller .l-time-range-inputs-holder,
+.l-time-controller .l-time-range-slider {
+  font-size: 0.8em; }
+/* line 32, ../../../../general/res/sass/controls/_time-controller.scss */
+.l-time-controller .l-time-range-inputs-holder,
+.l-time-controller .l-time-range-slider-holder,
+.l-time-controller .l-time-range-ticks-holder {
+  overflow: visible;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: auto;
+  height: auto;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  min-width: 400px;
+  top: auto; }
+/* line 42, ../../../../general/res/sass/controls/_time-controller.scss */
+.l-time-controller .l-time-range-slider,
+.l-time-controller .l-time-range-ticks {
+  overflow: visible;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: auto;
+  height: auto;
+  left: 150px;
+  right: 150px; }
+/* line 49, ../../../../general/res/sass/controls/_time-controller.scss */
+.l-time-controller .l-time-range-inputs-holder {
+  height: 33px;
+  bottom: 46px;
+  padding-top: 5px;
+  border-top: 1px solid rgba(102, 102, 102, 0.2); }
+  /* line 54, ../../../../general/res/sass/controls/_time-controller.scss */
+  .l-time-controller .l-time-range-inputs-holder .type-icon {
+    font-size: 120%;
+    vertical-align: middle; }
+  /* line 58, ../../../../general/res/sass/controls/_time-controller.scss */
+  .l-time-controller .l-time-range-inputs-holder .l-time-range-input,
+  .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem {
+    margin-right: 5px; }
+    /* line 61, ../../../../general/res/sass/controls/_time-controller.scss */
+    .l-time-controller .l-time-range-inputs-holder .l-time-range-input .lbl,
+    .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .lbl {
+      color: #999999; }
+    /* line 64, ../../../../general/res/sass/controls/_time-controller.scss */
+    .l-time-controller .l-time-range-inputs-holder .l-time-range-input .ui-symbol.icon, .l-time-controller .l-time-range-inputs-holder .l-time-range-input .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-input .icon.pager,
+    .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .ui-symbol.icon,
+    .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .l-datetime-picker .l-month-year-pager .icon.pager,
+    .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .icon.pager {
+      font-size: 11px;
+      width: 11px; }
+/* line 71, ../../../../general/res/sass/controls/_time-controller.scss */
+.l-time-controller .l-time-range-slider-holder {
+  height: 20px;
+  bottom: 23px; }
+  /* line 74, ../../../../general/res/sass/controls/_time-controller.scss */
+  .l-time-controller .l-time-range-slider-holder .range-holder {
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    background: none;
+    border: none; }
+    /* line 79, ../../../../general/res/sass/controls/_time-controller.scss */
+    .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line {
+      -moz-transform: translateX(50%);
+      -ms-transform: translateX(50%);
+      -webkit-transform: translateX(50%);
+      transform: translateX(50%);
       position: absolute;
-      top: 50%;
-      margin-top: -7px;
-      white-space: nowrap;
-      width: 75px; }
-    /* line 87, ../../../../general/res/sass/controls/_time-controller.scss */
-    .l-time-controller .knob:hover .range-value {
-      color: #0099cc; }
-    /* line 90, ../../../../general/res/sass/controls/_time-controller.scss */
-    .l-time-controller .knob.knob-l {
-      margin-left: -4.5px; }
-      /* line 92, ../../../../general/res/sass/controls/_time-controller.scss */
-      .l-time-controller .knob.knob-l .range-value {
-        text-align: right;
-        right: 14px; }
-    /* line 97, ../../../../general/res/sass/controls/_time-controller.scss */
-    .l-time-controller .knob.knob-r {
-      margin-right: -4.5px; }
-      /* line 99, ../../../../general/res/sass/controls/_time-controller.scss */
-      .l-time-controller .knob.knob-r .range-value {
-        left: 14px; }
+      top: 0;
+      right: 0;
+      bottom: 0px;
+      left: auto;
+      width: 8px;
+      height: auto;
+      z-index: 2; }
+      /* line 89, ../../../../general/res/sass/controls/_time-controller.scss */
+      .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before, .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after {
+        background-color: #666;
+        content: "";
+        position: absolute; }
+      /* line 95, ../../../../general/res/sass/controls/_time-controller.scss */
+      .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before {
+        top: 0;
+        right: auto;
+        bottom: -10px;
+        left: 3px;
+        width: 2px; }
+      /* line 101, ../../../../general/res/sass/controls/_time-controller.scss */
+      .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after {
+        -moz-border-radius: 8px;
+        -webkit-border-radius: 8px;
+        border-radius: 8px;
+        -moz-transform: translateY(-50%);
+        -ms-transform: translateY(-50%);
+        -webkit-transform: translateY(-50%);
+        transform: translateY(-50%);
+        top: 50%;
+        right: 0;
+        bottom: auto;
+        left: 0;
+        width: auto;
+        height: 8px; }
+    /* line 3, ../../../../general/res/sass/controls/_time-controller.scss */
+    .l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:before, .l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:after {
+      background-color: #0052b5; }
+  /* line 117, ../../../../general/res/sass/controls/_time-controller.scss */
+  .l-time-controller .l-time-range-slider-holder:not(:active) .knob,
+  .l-time-controller .l-time-range-slider-holder:not(:active) .range {
+    -moz-transition-property: left, right;
+    -o-transition-property: left, right;
+    -webkit-transition-property: left, right;
+    transition-property: left, right;
+    -moz-transition-duration: 500ms;
+    -o-transition-duration: 500ms;
+    -webkit-transition-duration: 500ms;
+    transition-duration: 500ms;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out; }
+/* line 126, ../../../../general/res/sass/controls/_time-controller.scss */
+.l-time-controller .l-time-range-ticks-holder {
+  height: 20px; }
+  /* line 128, ../../../../general/res/sass/controls/_time-controller.scss */
+  .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks {
+    border-top: 1px solid rgba(0, 0, 0, 0.2); }
+    /* line 130, ../../../../general/res/sass/controls/_time-controller.scss */
+    .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick {
+      background-color: rgba(0, 0, 0, 0.2);
+      border: none;
+      height: 5px;
+      width: 1px;
+      margin-left: -1px;
+      position: absolute; }
+      /* line 137, ../../../../general/res/sass/controls/_time-controller.scss */
+      .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick:first-child {
+        margin-left: 0; }
+      /* line 140, ../../../../general/res/sass/controls/_time-controller.scss */
+      .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick .l-time-range-tick-label {
+        transform: translateX(-50%);
+        -webkit-transform: translateX(-50%);
+        color: #999999;
+        display: inline-block;
+        font-size: 0.7em;
+        position: absolute;
+        top: 8px;
+        white-space: nowrap;
+        z-index: 2; }
+/* line 154, ../../../../general/res/sass/controls/_time-controller.scss */
+.l-time-controller .knob {
+  z-index: 2; }
+  /* line 156, ../../../../general/res/sass/controls/_time-controller.scss */
+  .l-time-controller .knob .range-value {
+    -moz-transition-property: visibility, opacity, background-color, border-color;
+    -o-transition-property: visibility, opacity, background-color, border-color;
+    -webkit-transition-property: visibility, opacity, background-color, border-color;
+    transition-property: visibility, opacity, background-color, border-color;
+    -moz-transition-duration: 0.25s;
+    -o-transition-duration: 0.25s;
+    -webkit-transition-duration: 0.25s;
+    transition-duration: 0.25s;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    padding: 0 10px;
+    position: absolute;
+    height: 20px;
+    line-height: 20px;
+    white-space: nowrap; }
+  /* line 165, ../../../../general/res/sass/controls/_time-controller.scss */
+  .l-time-controller .knob:hover .range-value {
+    color: rgba(0, 153, 204, 0.7); }
+  /* line 168, ../../../../general/res/sass/controls/_time-controller.scss */
+  .l-time-controller .knob.knob-l {
+    margin-left: -10px; }
+    /* line 171, ../../../../general/res/sass/controls/_time-controller.scss */
+    .l-time-controller .knob.knob-l .range-value {
+      text-align: right;
+      right: 10px; }
+  /* line 176, ../../../../general/res/sass/controls/_time-controller.scss */
+  .l-time-controller .knob.knob-r {
+    margin-right: -10px; }
+    /* line 179, ../../../../general/res/sass/controls/_time-controller.scss */
+    .l-time-controller .knob.knob-r .range-value {
+      left: 10px; }
+    /* line 3, ../../../../general/res/sass/controls/_time-controller.scss */
+    .l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:before, .l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:after {
+      background-color: #0052b5; }
+
+/* line 193, ../../../../general/res/sass/controls/_time-controller.scss */
+.s-time-range-val {
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+  background-color: #fff;
+  padding: 1px 1px 0 5px; }
 
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
@@ -2612,14 +2833,14 @@ textarea {
   -webkit-transition: background, 0.25s;
   transition: background, 0.25s;
   text-shadow: none;
-  margin: 0 0 2px 2px;
   padding: 0 5px;
   overflow: hidden;
-  position: relative; }
+  position: relative;
+  line-height: 22px; }
   /* line 272, ../../../../general/res/sass/_mixins.scss */
   .select .icon {
     color: #eee; }
-  /* line 28, ../../../../general/res/sass/forms/_selects.scss */
+  /* line 31, ../../../../general/res/sass/forms/_selects.scss */
   .select select {
     -moz-appearance: none;
     -webkit-appearance: none;
@@ -2632,10 +2853,10 @@ textarea {
     border: none !important;
     padding: 4px 25px 2px 0px;
     width: 120%; }
-    /* line 37, ../../../../general/res/sass/forms/_selects.scss */
+    /* line 40, ../../../../general/res/sass/forms/_selects.scss */
     .select select option {
       margin: 5px 0; }
-  /* line 41, ../../../../general/res/sass/forms/_selects.scss */
+  /* line 44, ../../../../general/res/sass/forms/_selects.scss */
   .select:after {
     text-shadow: none;
     content: '\76';
@@ -2643,6 +2864,7 @@ textarea {
     font-family: 'symbolsfont';
     margin-left: 3px;
     vertical-align: top;
+    pointer-events: none;
     color: rgba(102, 102, 102, 0.4);
     position: absolute;
     right: 5px;
@@ -2704,7 +2926,7 @@ textarea {
 .channel-selector .btns-add-remove {
   margin-top: 150px; }
   /* line 39, ../../../../general/res/sass/forms/_channel-selector.scss */
-  .channel-selector .btns-add-remove .s-btn, .channel-selector .btns-add-remove .s-menu {
+  .channel-selector .btns-add-remove .s-btn, .channel-selector .btns-add-remove .s-menu-btn {
     display: block;
     margin-bottom: 5px;
     text-align: center; }
@@ -2730,26 +2952,44 @@ textarea {
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-/* line 23, ../../../../general/res/sass/forms/_datetime.scss */
-.complex.datetime span {
-  display: inline-block;
-  margin-right: 5px; }
-/* line 36, ../../../../general/res/sass/forms/_datetime.scss */
-.complex.datetime .fields {
-  margin-top: 3px 0;
-  padding: 3px 0; }
-/* line 41, ../../../../general/res/sass/forms/_datetime.scss */
-.complex.datetime .date {
-  width: 85px; }
-  /* line 44, ../../../../general/res/sass/forms/_datetime.scss */
-  .complex.datetime .date input {
-    width: 80px; }
-/* line 50, ../../../../general/res/sass/forms/_datetime.scss */
-.complex.datetime .time.sm {
-  width: 45px; }
-  /* line 53, ../../../../general/res/sass/forms/_datetime.scss */
-  .complex.datetime .time.sm input {
-    width: 40px; }
+/* line 29, ../../../../general/res/sass/forms/_datetime.scss */
+.complex.datetime {
+  /*
+  	.field-hints,
+  	.fields {
+  	}
+  
+  	
+  	.field-hints {
+  
+  	}
+  	*/ }
+  /* line 30, ../../../../general/res/sass/forms/_datetime.scss */
+  .complex.datetime span {
+    display: inline-block;
+    margin-right: 5px; }
+  /* line 46, ../../../../general/res/sass/forms/_datetime.scss */
+  .complex.datetime .fields {
+    margin-top: 3px 0;
+    padding: 3px 0; }
+  /* line 51, ../../../../general/res/sass/forms/_datetime.scss */
+  .complex.datetime .date {
+    width: 85px; }
+    /* line 24, ../../../../general/res/sass/forms/_datetime.scss */
+    .complex.datetime .date input[type="text"] {
+      width: 80px; }
+  /* line 55, ../../../../general/res/sass/forms/_datetime.scss */
+  .complex.datetime .time.md {
+    width: 65px; }
+    /* line 24, ../../../../general/res/sass/forms/_datetime.scss */
+    .complex.datetime .time.md input[type="text"] {
+      width: 60px; }
+  /* line 59, ../../../../general/res/sass/forms/_datetime.scss */
+  .complex.datetime .time.sm {
+    width: 45px; }
+    /* line 24, ../../../../general/res/sass/forms/_datetime.scss */
+    .complex.datetime .time.sm input[type="text"] {
+      width: 40px; }
 
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
@@ -2861,8 +3101,10 @@ span.req {
   .t-filter input.t-filter-input:not(.ng-dirty) + .t-a-clear {
     display: none; }
 /* line 42, ../../../../general/res/sass/forms/_filter.scss */
-.filter .icon.ui-symbol,
-.t-filter .icon.ui-symbol {
+.filter .icon.ui-symbol, .filter .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .filter .icon.pager,
+.t-filter .icon.ui-symbol,
+.t-filter .l-datetime-picker .l-month-year-pager .icon.pager,
+.l-datetime-picker .l-month-year-pager .t-filter .icon.pager {
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px;
@@ -2873,12 +3115,16 @@ span.req {
   padding: 0px 5px;
   vertical-align: middle; }
   /* line 50, ../../../../general/res/sass/forms/_filter.scss */
-  .filter .icon.ui-symbol:hover,
-  .t-filter .icon.ui-symbol:hover {
+  .filter .icon.ui-symbol:hover, .filter .l-datetime-picker .l-month-year-pager .icon.pager:hover, .l-datetime-picker .l-month-year-pager .filter .icon.pager:hover,
+  .t-filter .icon.ui-symbol:hover,
+  .t-filter .l-datetime-picker .l-month-year-pager .icon.pager:hover,
+  .l-datetime-picker .l-month-year-pager .t-filter .icon.pager:hover {
     background: rgba(255, 255, 255, 0.1); }
 /* line 54, ../../../../general/res/sass/forms/_filter.scss */
-.filter .s-a-clear.ui-symbol,
-.t-filter .s-a-clear.ui-symbol {
+.filter .s-a-clear.ui-symbol, .filter .l-datetime-picker .l-month-year-pager .s-a-clear.pager, .l-datetime-picker .l-month-year-pager .filter .s-a-clear.pager,
+.t-filter .s-a-clear.ui-symbol,
+.t-filter .l-datetime-picker .l-month-year-pager .s-a-clear.pager,
+.l-datetime-picker .l-month-year-pager .t-filter .s-a-clear.pager {
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px;
@@ -2902,8 +3148,10 @@ span.req {
   text-align: center;
   z-index: 5; }
   /* line 74, ../../../../general/res/sass/forms/_filter.scss */
-  .filter .s-a-clear.ui-symbol:hover,
-  .t-filter .s-a-clear.ui-symbol:hover {
+  .filter .s-a-clear.ui-symbol:hover, .filter .l-datetime-picker .l-month-year-pager .s-a-clear.pager:hover, .l-datetime-picker .l-month-year-pager .filter .s-a-clear.pager:hover,
+  .t-filter .s-a-clear.ui-symbol:hover,
+  .t-filter .l-datetime-picker .l-month-year-pager .s-a-clear.pager:hover,
+  .l-datetime-picker .l-month-year-pager .t-filter .s-a-clear.pager:hover {
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
     opacity: 0.6;
     background-color: #0099cc; }
@@ -2985,33 +3233,49 @@ span.req {
 .bar .icon.major {
   margin-right: 5px; }
 /* line 70, ../../../../general/res/sass/user-environ/_layout.scss */
-.bar.abs, .s-menu span.bar.l-click-area {
+.bar.abs, .l-datetime-picker .l-month-year-pager .bar.pager,
+.l-datetime-picker .l-month-year-pager .bar.val, .s-menu-btn span.bar.l-click-area {
   text-wrap: none;
   white-space: nowrap; }
   /* line 73, ../../../../general/res/sass/user-environ/_layout.scss */
-  .bar.abs.left, .s-menu span.bar.left.l-click-area,
+  .bar.abs.left, .l-datetime-picker .l-month-year-pager .bar.left.pager,
+  .l-datetime-picker .l-month-year-pager .bar.left.val, .s-menu-btn span.bar.left.l-click-area,
   .bar.abs .left,
-  .s-menu span.bar.l-click-area .left {
+  .l-datetime-picker .l-month-year-pager .bar.pager .left,
+  .l-datetime-picker .l-month-year-pager .bar.val .left,
+  .s-menu-btn span.bar.l-click-area .left {
     width: 45%;
     right: auto; }
   /* line 78, ../../../../general/res/sass/user-environ/_layout.scss */
-  .bar.abs.right, .s-menu span.bar.right.l-click-area,
+  .bar.abs.right, .l-datetime-picker .l-month-year-pager .bar.right.pager,
+  .l-datetime-picker .l-month-year-pager .bar.right.val, .s-menu-btn span.bar.right.l-click-area,
   .bar.abs .right,
-  .s-menu span.bar.l-click-area .right {
+  .l-datetime-picker .l-month-year-pager .bar.pager .right,
+  .l-datetime-picker .l-month-year-pager .bar.val .right,
+  .s-menu-btn span.bar.l-click-area .right {
     width: 45%;
     left: auto;
     text-align: right; }
     /* line 83, ../../../../general/res/sass/user-environ/_layout.scss */
-    .bar.abs.right .icon.major, .s-menu span.bar.right.l-click-area .icon.major,
+    .bar.abs.right .icon.major, .l-datetime-picker .l-month-year-pager .bar.right.pager .icon.major,
+    .l-datetime-picker .l-month-year-pager .bar.right.val .icon.major, .s-menu-btn span.bar.right.l-click-area .icon.major,
     .bar.abs .right .icon.major,
-    .s-menu span.bar.l-click-area .right .icon.major {
+    .l-datetime-picker .l-month-year-pager .bar.pager .right .icon.major,
+    .l-datetime-picker .l-month-year-pager .bar.val .right .icon.major,
+    .s-menu-btn span.bar.l-click-area .right .icon.major {
       margin-left: 15px; }
   /* line 89, ../../../../general/res/sass/user-environ/_layout.scss */
-  .bar.abs .l-flex .left, .s-menu span.bar.l-click-area .l-flex .left,
+  .bar.abs .l-flex .left, .l-datetime-picker .l-month-year-pager .bar.pager .l-flex .left,
+  .l-datetime-picker .l-month-year-pager .bar.val .l-flex .left, .s-menu-btn span.bar.l-click-area .l-flex .left,
   .bar.abs .l-flex .right,
-  .s-menu span.bar.l-click-area .l-flex .right, .bar.abs.l-flex .left, .s-menu span.bar.l-flex.l-click-area .left,
+  .l-datetime-picker .l-month-year-pager .bar.pager .l-flex .right,
+  .l-datetime-picker .l-month-year-pager .bar.val .l-flex .right,
+  .s-menu-btn span.bar.l-click-area .l-flex .right, .bar.abs.l-flex .left, .l-datetime-picker .l-month-year-pager .bar.l-flex.pager .left,
+  .l-datetime-picker .l-month-year-pager .bar.l-flex.val .left, .s-menu-btn span.bar.l-flex.l-click-area .left,
   .bar.abs.l-flex .right,
-  .s-menu span.bar.l-flex.l-click-area .right {
+  .l-datetime-picker .l-month-year-pager .bar.l-flex.pager .right,
+  .l-datetime-picker .l-month-year-pager .bar.l-flex.val .right,
+  .s-menu-btn span.bar.l-flex.l-click-area .right {
     width: auto; }
 
 /* line 98, ../../../../general/res/sass/user-environ/_layout.scss */
@@ -3129,76 +3393,94 @@ span.req {
     min-height: 50px;
     height: 30%; }
 
-/* line 230, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 228, ../../../../general/res/sass/user-environ/_layout.scss */
 .pane {
   position: absolute; }
-  /* line 233, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 231, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.treeview.left .create-btn-holder {
     bottom: auto;
     top: 0;
     height: 24px; }
-    /* line 236, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 235, ../../../../general/res/sass/user-environ/_layout.scss */
     .pane.treeview.left .create-btn-holder .wrapper.menu-element {
       position: absolute;
       bottom: 5px; }
-  /* line 241, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 240, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.treeview.left .search-holder {
     top: 34px; }
-  /* line 244, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 243, ../../../../general/res/sass/user-environ/_layout.scss */
   .pane.treeview.left .tree-holder {
     overflow: auto;
     top: 64px; }
-  /* line 251, ../../../../general/res/sass/user-environ/_layout.scss */
-  .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .s-menu span.left.l-click-area, .s-menu .pane.items .object-browse-bar span.left.l-click-area,
+  /* line 250, ../../../../general/res/sass/user-environ/_layout.scss */
+  .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.pager, .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.pager,
+  .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .left.val,
+  .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .left.val, .pane.items .object-browse-bar .s-menu-btn span.left.l-click-area, .s-menu-btn .pane.items .object-browse-bar span.left.l-click-area,
   .pane.items .object-browse-bar .right.abs,
-  .pane.items .object-browse-bar .s-menu span.right.l-click-area,
-  .s-menu .pane.items .object-browse-bar span.right.l-click-area {
+  .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .right.pager,
+  .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .right.pager,
+  .pane.items .object-browse-bar .l-datetime-picker .l-month-year-pager .right.val,
+  .l-datetime-picker .l-month-year-pager .pane.items .object-browse-bar .right.val,
+  .pane.items .object-browse-bar .s-menu-btn span.right.l-click-area,
+  .s-menu-btn .pane.items .object-browse-bar span.right.l-click-area {
     top: auto; }
-  /* line 262, ../../../../general/res/sass/user-environ/_layout.scss */
-  .pane.items .object-holder {
-    top: 34px; }
-  /* line 266, ../../../../general/res/sass/user-environ/_layout.scss */
-  .pane .object-holder {
-    overflow: auto; }
 
-/* line 274, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 261, ../../../../general/res/sass/user-environ/_layout.scss */
 .split-layout.horizontal > .pane {
   margin-top: 5px; }
-  /* line 277, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 264, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout.horizontal > .pane:first-child {
     margin-top: 0; }
-/* line 284, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 271, ../../../../general/res/sass/user-environ/_layout.scss */
 .split-layout.vertical > .pane {
   margin-left: 5px; }
-  /* line 287, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 274, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane > .holder {
     left: 0;
     right: 0; }
-  /* line 291, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 278, ../../../../general/res/sass/user-environ/_layout.scss */
   .split-layout.vertical > .pane:first-child {
     margin-left: 0; }
-    /* line 293, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 280, ../../../../general/res/sass/user-environ/_layout.scss */
     .split-layout.vertical > .pane:first-child .holder {
       right: 3px; }
 
-/* line 302, ../../../../general/res/sass/user-environ/_layout.scss */
-.object-browse-bar .s-btn, .object-browse-bar .s-menu,
+/* line 289, ../../../../general/res/sass/user-environ/_layout.scss */
+.object-holder {
+  overflow: hidden;
+  top: 34px; }
+  /* line 292, ../../../../general/res/sass/user-environ/_layout.scss */
+  .object-holder > ng-include {
+    overflow: auto;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: auto;
+    height: auto; }
+  /* line 297, ../../../../general/res/sass/user-environ/_layout.scss */
+  .object-holder.l-controls-visible.l-time-controller-visible > ng-include {
+    bottom: 88px; }
+
+/* line 304, ../../../../general/res/sass/user-environ/_layout.scss */
+.object-browse-bar .s-btn, .object-browse-bar .s-menu-btn,
 .top-bar .buttons-main .s-btn,
-.top-bar .buttons-main .s-menu,
-.top-bar .s-menu,
+.top-bar .buttons-main .s-menu-btn,
+.top-bar .s-menu-btn,
 .tool-bar .s-btn,
-.tool-bar .s-menu,
-.tool-bar .s-menu {
+.tool-bar .s-menu-btn,
+.tool-bar .s-menu-btn {
   height: 25px;
   line-height: 25px;
   vertical-align: top; }
 
-/* line 315, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 317, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar .view-switcher,
 .top-bar .view-switcher {
   margin-right: 20px; }
 
-/* line 320, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 322, ../../../../general/res/sass/user-environ/_layout.scss */
 .object-browse-bar {
   overflow: visible;
   position: absolute;
@@ -3214,42 +3496,27 @@ span.req {
   height: 24px;
   line-height: 24px;
   white-space: nowrap; }
-  /* line 328, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 330, ../../../../general/res/sass/user-environ/_layout.scss */
   .object-browse-bar .left {
     padding-right: 20px; }
-    /* line 330, ../../../../general/res/sass/user-environ/_layout.scss */
+    /* line 332, ../../../../general/res/sass/user-environ/_layout.scss */
     .object-browse-bar .left .l-back {
       display: inline-block;
       float: left;
       margin-right: 10px; }
 
-/*.object-holder {
-    .s-btn {
-        //background: red !important;
-        $h: 16px;
-        height: $h;
-        line-height: $h;
-        > span {
-            font-size: 0.7rem;
-        }
-    }
-}*/
-/* line 350, ../../../../general/res/sass/user-environ/_layout.scss */
+/* line 340, ../../../../general/res/sass/user-environ/_layout.scss */
 .l-flex {
   display: flex;
   display: -webkit-flex;
   flex-flow: row nowrap;
   -webkit-flex-flow: row nowrap; }
-  /* line 353, ../../../../general/res/sass/user-environ/_layout.scss */
+  /* line 343, ../../../../general/res/sass/user-environ/_layout.scss */
   .l-flex .left {
     flex: 1 1 0;
     -webkit-flex: 1 1 0;
     padding-right: 10px; }
 
-/* line 360, ../../../../general/res/sass/user-environ/_layout.scss */
-.vscroll {
-  overflow-y: auto; }
-
 /*****************************************************************************
  * Open MCT Web, Copyright (c) 2014-2015, United States Government
  * as represented by the Administrator of the National Aeronautics and Space
@@ -3595,13 +3862,15 @@ span.req {
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 /* line 23, ../../../../general/res/sass/search/_search.scss */
-.abs.search-holder, .s-menu span.search-holder.l-click-area {
+.abs.search-holder, .l-datetime-picker .l-month-year-pager .search-holder.pager,
+.l-datetime-picker .l-month-year-pager .search-holder.val, .s-menu-btn span.search-holder.l-click-area {
   height: 25px;
   bottom: 0;
   top: 23px;
   z-index: 5; }
   /* line 27, ../../../../general/res/sass/search/_search.scss */
-  .abs.search-holder.active, .s-menu span.search-holder.active.l-click-area {
+  .abs.search-holder.active, .l-datetime-picker .l-month-year-pager .search-holder.active.pager,
+  .l-datetime-picker .l-month-year-pager .search-holder.active.val, .s-menu-btn span.search-holder.active.l-click-area {
     height: auto;
     bottom: 0; }
 
@@ -3863,14 +4132,14 @@ span.req {
   height: 30px;
   text-align: right; }
   /* line 67, ../../../../general/res/sass/overlay/_overlay.scss */
-  .overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu {
+  .overlay .bottom-bar .s-btn, .overlay .bottom-bar .s-menu-btn {
     font-size: 95%;
     height: 30px;
     line-height: 30px;
     margin-left: 5px;
     padding: 0 15px; }
     /* line 69, ../../../../general/res/sass/overlay/_overlay.scss */
-    .overlay .bottom-bar .s-btn:not(.major), .overlay .bottom-bar .s-menu:not(.major) {
+    .overlay .bottom-bar .s-btn:not(.major), .overlay .bottom-bar .s-menu-btn:not(.major) {
       background-color: #969696;
       -moz-border-radius: 4px;
       -webkit-border-radius: 4px;
@@ -3890,14 +4159,14 @@ span.req {
       transition: background, 0.25s;
       text-shadow: none; }
       /* line 272, ../../../../general/res/sass/_mixins.scss */
-      .overlay .bottom-bar .s-btn:not(.major) .icon, .overlay .bottom-bar .s-menu:not(.major) .icon {
+      .overlay .bottom-bar .s-btn:not(.major) .icon, .overlay .bottom-bar .s-menu-btn:not(.major) .icon {
         color: #fff; }
       @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) {
         /* line 277, ../../../../general/res/sass/_mixins.scss */
-        .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover {
+        .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover, .overlay .bottom-bar .s-menu-btn:not(.major):not(.disabled):hover {
           background: #7d7d7d; }
           /* line 279, ../../../../general/res/sass/_mixins.scss */
-          .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu:not(.major):not(.disabled):hover > .icon {
+          .overlay .bottom-bar .s-btn:not(.major):not(.disabled):hover > .icon, .overlay .bottom-bar .s-menu-btn:not(.major):not(.disabled):hover > .icon {
             color: white; } }
 /* line 85, ../../../../general/res/sass/overlay/_overlay.scss */
 .overlay .contents.l-dialog {
@@ -4235,12 +4504,14 @@ ul.tree {
   .frame.child-frame.panel:hover {
     border-color: rgba(128, 128, 128, 0.2); }
 /* line 32, ../../../../general/res/sass/user-environ/_frame.scss */
-.frame > .object-header.abs, .s-menu .frame > span.object-header.l-click-area {
+.frame > .object-header.abs, .l-datetime-picker .l-month-year-pager .frame > .object-header.pager,
+.l-datetime-picker .l-month-year-pager .frame > .object-header.val, .s-menu-btn .frame > span.object-header.l-click-area {
   font-size: 0.75em;
   height: 16px;
   line-height: 16px; }
 /* line 38, ../../../../general/res/sass/user-environ/_frame.scss */
-.frame > .object-holder.abs, .s-menu .frame > span.object-holder.l-click-area {
+.frame > .object-holder.abs, .l-datetime-picker .l-month-year-pager .frame > .object-holder.pager,
+.l-datetime-picker .l-month-year-pager .frame > .object-holder.val, .s-menu-btn .frame > span.object-holder.l-click-area {
   top: 21px; }
 /* line 41, ../../../../general/res/sass/user-environ/_frame.scss */
 .frame .contents {
@@ -4249,17 +4520,17 @@ ul.tree {
   bottom: 5px;
   left: 5px; }
 /* line 49, ../../../../general/res/sass/user-environ/_frame.scss */
-.frame.frame-template .s-btn, .frame.frame-template .s-menu,
-.frame.frame-template .s-menu {
+.frame.frame-template .s-btn, .frame.frame-template .s-menu-btn,
+.frame.frame-template .s-menu-btn {
   height: 16px;
   line-height: 16px;
   padding: 0 5px; }
   /* line 54, ../../../../general/res/sass/user-environ/_frame.scss */
-  .frame.frame-template .s-btn > span, .frame.frame-template .s-menu > span,
-  .frame.frame-template .s-menu > span {
+  .frame.frame-template .s-btn > span, .frame.frame-template .s-menu-btn > span,
+  .frame.frame-template .s-menu-btn > span {
     font-size: 0.65rem; }
 /* line 59, ../../../../general/res/sass/user-environ/_frame.scss */
-.frame.frame-template .s-menu:after {
+.frame.frame-template .s-menu-btn:after {
   font-size: 8px; }
 /* line 63, ../../../../general/res/sass/user-environ/_frame.scss */
 .frame.frame-template .view-switcher {
@@ -4320,7 +4591,9 @@ ul.tree {
 .edit-mode .top-bar .buttons-main {
   white-space: nowrap; }
   /* line 52, ../../../../general/res/sass/user-environ/_top-bar.scss */
-  .edit-mode .top-bar .buttons-main.abs, .edit-mode .top-bar .s-menu span.buttons-main.l-click-area, .s-menu .edit-mode .top-bar span.buttons-main.l-click-area {
+  .edit-mode .top-bar .buttons-main.abs, .edit-mode .top-bar .l-datetime-picker .l-month-year-pager .buttons-main.pager, .l-datetime-picker .l-month-year-pager .edit-mode .top-bar .buttons-main.pager,
+  .edit-mode .top-bar .l-datetime-picker .l-month-year-pager .buttons-main.val,
+  .l-datetime-picker .l-month-year-pager .edit-mode .top-bar .buttons-main.val, .edit-mode .top-bar .s-menu-btn span.buttons-main.l-click-area, .s-menu-btn .edit-mode .top-bar span.buttons-main.l-click-area {
     bottom: auto;
     left: auto; }
 
@@ -4635,29 +4908,33 @@ table {
   table thead,
   table .thead {
     border-bottom: 1px solid #fcfcfc; }
-  /* line 43, ../../../../general/res/sass/lists/_tabular.scss */
+  /* line 44, ../../../../general/res/sass/lists/_tabular.scss */
+  .tabular:not(.fixed-header) tr th,
+  table:not(.fixed-header) tr th {
+    background-color: #e3e3e3; }
+  /* line 48, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular tbody, .tabular .tbody,
   table tbody,
   table .tbody {
     display: table-row-group; }
-    /* line 46, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 51, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular tbody tr:hover, .tabular tbody .tr:hover, .tabular .tbody tr:hover, .tabular .tbody .tr:hover,
     table tbody tr:hover,
     table tbody .tr:hover,
     table .tbody tr:hover,
     table .tbody .tr:hover {
       background: rgba(51, 51, 51, 0.1); }
-  /* line 51, ../../../../general/res/sass/lists/_tabular.scss */
+  /* line 56, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular tr, .tabular .tr,
   table tr,
   table .tr {
     display: table-row; }
-    /* line 53, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 58, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular tr:first-child .td, .tabular .tr:first-child .td,
     table tr:first-child .td,
     table .tr:first-child .td {
       border-top: none; }
-    /* line 57, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 62, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular tr.group-header td, .tabular tr.group-header .td, .tabular .tr.group-header td, .tabular .tr.group-header .td,
     table tr.group-header td,
     table tr.group-header .td,
@@ -4665,7 +4942,7 @@ table {
     table .tr.group-header .td {
       background-color: #efefef;
       color: #404040; }
-    /* line 63, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 68, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular tr th, .tabular tr .th, .tabular tr td, .tabular tr .td, .tabular .tr th, .tabular .tr .th, .tabular .tr td, .tabular .tr .td,
     table tr th,
     table tr .th,
@@ -4676,26 +4953,25 @@ table {
     table .tr td,
     table .tr .td {
       display: table-cell; }
-    /* line 66, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 71, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular tr th, .tabular tr .th, .tabular .tr th, .tabular .tr .th,
     table tr th,
     table tr .th,
     table .tr th,
     table .tr .th {
-      background-color: #e3e3e3;
       border-left: 1px solid #fcfcfc;
       color: #333333;
       padding: 5px 5px;
       white-space: nowrap;
       vertical-align: middle; }
-      /* line 73, ../../../../general/res/sass/lists/_tabular.scss */
+      /* line 77, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular tr th:first-child, .tabular tr .th:first-child, .tabular .tr th:first-child, .tabular .tr .th:first-child,
       table tr th:first-child,
       table tr .th:first-child,
       table .tr th:first-child,
       table .tr .th:first-child {
         border-left: none; }
-      /* line 77, ../../../../general/res/sass/lists/_tabular.scss */
+      /* line 81, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular tr th.sort.sort:after, .tabular tr .th.sort.sort:after, .tabular .tr th.sort.sort:after, .tabular .tr .th.sort.sort:after,
       table tr th.sort.sort:after,
       table tr .th.sort.sort:after,
@@ -4707,21 +4983,21 @@ table {
         content: "\ed";
         display: inline-block;
         margin-left: 3px; }
-      /* line 85, ../../../../general/res/sass/lists/_tabular.scss */
+      /* line 89, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular tr th.sort.sort.desc:after, .tabular tr .th.sort.sort.desc:after, .tabular .tr th.sort.sort.desc:after, .tabular .tr .th.sort.sort.desc:after,
       table tr th.sort.sort.desc:after,
       table tr .th.sort.sort.desc:after,
       table .tr th.sort.sort.desc:after,
       table .tr .th.sort.sort.desc:after {
         content: "\ec"; }
-      /* line 89, ../../../../general/res/sass/lists/_tabular.scss */
+      /* line 93, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular tr th.sortable, .tabular tr .th.sortable, .tabular .tr th.sortable, .tabular .tr .th.sortable,
       table tr th.sortable,
       table tr .th.sortable,
       table .tr th.sortable,
       table .tr .th.sortable {
         cursor: pointer; }
-    /* line 93, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 97, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular tr td, .tabular tr .td, .tabular .tr td, .tabular .tr .td,
     table tr td,
     table tr .td,
@@ -4733,21 +5009,21 @@ table {
       padding: 3px 5px;
       word-wrap: break-word;
       vertical-align: top; }
-      /* line 100, ../../../../general/res/sass/lists/_tabular.scss */
+      /* line 104, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular tr td.numeric, .tabular tr .td.numeric, .tabular .tr td.numeric, .tabular .tr .td.numeric,
       table tr td.numeric,
       table tr .td.numeric,
       table .tr td.numeric,
       table .tr .td.numeric {
         text-align: right; }
-      /* line 103, ../../../../general/res/sass/lists/_tabular.scss */
+      /* line 107, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular tr td.s-cell-type-value, .tabular tr .td.s-cell-type-value, .tabular .tr td.s-cell-type-value, .tabular .tr .td.s-cell-type-value,
       table tr td.s-cell-type-value,
       table tr .td.s-cell-type-value,
       table .tr td.s-cell-type-value,
       table .tr .td.s-cell-type-value {
         text-align: right; }
-        /* line 105, ../../../../general/res/sass/lists/_tabular.scss */
+        /* line 109, ../../../../general/res/sass/lists/_tabular.scss */
         .tabular tr td.s-cell-type-value .l-cell-contents, .tabular tr .td.s-cell-type-value .l-cell-contents, .tabular .tr td.s-cell-type-value .l-cell-contents, .tabular .tr .td.s-cell-type-value .l-cell-contents,
         table tr td.s-cell-type-value .l-cell-contents,
         table tr .td.s-cell-type-value .l-cell-contents,
@@ -4758,23 +5034,23 @@ table {
           border-radius: 3px;
           padding-left: 5px;
           padding-right: 5px; }
-  /* line 121, ../../../../general/res/sass/lists/_tabular.scss */
+  /* line 125, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular.filterable tbody, .tabular.filterable .tbody,
   table.filterable tbody,
   table.filterable .tbody {
     top: 44px; }
-  /* line 124, ../../../../general/res/sass/lists/_tabular.scss */
+  /* line 128, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular.filterable input[type="text"],
   table.filterable input[type="text"] {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     width: 100%; }
-  /* line 130, ../../../../general/res/sass/lists/_tabular.scss */
+  /* line 134, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular.fixed-header,
   table.fixed-header {
     height: 100%; }
-    /* line 132, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 136, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular.fixed-header thead, .tabular.fixed-header .thead,
     .tabular.fixed-header tbody tr, .tabular.fixed-header .tbody .tr,
     table.fixed-header thead,
@@ -4783,12 +5059,12 @@ table {
     table.fixed-header .tbody .tr {
       display: table;
       table-layout: fixed; }
-    /* line 137, ../../../../general/res/sass/lists/_tabular.scss */
+    /* line 141, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular.fixed-header thead, .tabular.fixed-header .thead,
     table.fixed-header thead,
     table.fixed-header .thead {
       width: calc(100% - 10px); }
-      /* line 139, ../../../../general/res/sass/lists/_tabular.scss */
+      /* line 143, ../../../../general/res/sass/lists/_tabular.scss */
       .tabular.fixed-header thead:before, .tabular.fixed-header .thead:before,
       table.fixed-header thead:before,
       table.fixed-header .thead:before {
@@ -4798,8 +5074,8 @@ table {
         position: absolute;
         width: 100%;
         height: 22px;
-        background: rgba(255, 255, 255, 0.15); }
-    /* line 149, ../../../../general/res/sass/lists/_tabular.scss */
+        background-color: #e3e3e3; }
+    /* line 153, ../../../../general/res/sass/lists/_tabular.scss */
     .tabular.fixed-header tbody, .tabular.fixed-header .tbody,
     table.fixed-header tbody,
     table.fixed-header .tbody {
@@ -4814,7 +5090,7 @@ table {
       top: 22px;
       display: block;
       overflow-y: scroll; }
-  /* line 157, ../../../../general/res/sass/lists/_tabular.scss */
+  /* line 161, ../../../../general/res/sass/lists/_tabular.scss */
   .tabular.t-event-messages td, .tabular.t-event-messages .td,
   table.t-event-messages td,
   table.t-event-messages .td {
@@ -5186,9 +5462,6 @@ table {
   .l-view-section.fixed {
     font-size: 0.8em; }
   /* line 13, ../../../../general/res/sass/_views.scss */
-  .l-view-section.scrolling {
-    overflow: auto; }
-  /* line 16, ../../../../general/res/sass/_views.scss */
   .l-view-section .controls,
   .l-view-section label,
   .l-view-section .inline-block {
@@ -5528,7 +5801,7 @@ table {
 .autoflow {
   font-size: 0.75rem; }
   /* line 32, ../../../../general/res/sass/_autoflow.scss */
-  .autoflow:hover .l-autoflow-header .s-btn.change-column-width, .autoflow:hover .l-autoflow-header .change-column-width.s-menu {
+  .autoflow:hover .l-autoflow-header .s-btn.change-column-width, .autoflow:hover .l-autoflow-header .change-column-width.s-menu-btn {
     -moz-transition-property: visibility, opacity, background-color, border-color;
     -o-transition-property: visibility, opacity, background-color, border-color;
     -webkit-transition-property: visibility, opacity, background-color, border-color;
@@ -5552,7 +5825,7 @@ table {
     .autoflow .l-autoflow-header span {
       vertical-align: middle; }
     /* line 48, ../../../../general/res/sass/_autoflow.scss */
-    .autoflow .l-autoflow-header .s-btn.change-column-width, .autoflow .l-autoflow-header .change-column-width.s-menu {
+    .autoflow .l-autoflow-header .s-btn.change-column-width, .autoflow .l-autoflow-header .change-column-width.s-menu-btn {
       -moz-transition-property: visibility, opacity, background-color, border-color;
       -o-transition-property: visibility, opacity, background-color, border-color;
       -webkit-transition-property: visibility, opacity, background-color, border-color;
@@ -5829,7 +6102,7 @@ table {
   left: 0;
   z-index: 1; }
   /* line 22, ../../../../general/res/sass/features/_time-display.scss */
-  .l-time-display.l-timer .l-elem.l-value .ui-symbol.direction {
+  .l-time-display.l-timer .l-elem.l-value .ui-symbol.direction, .l-time-display.l-timer .l-elem.l-value .l-datetime-picker .l-month-year-pager .direction.pager, .l-datetime-picker .l-month-year-pager .l-time-display.l-timer .l-elem.l-value .direction.pager {
     font-size: 0.8em; }
 /* line 26, ../../../../general/res/sass/features/_time-display.scss */
 .l-time-display.l-timer:hover .l-elem.l-value {
@@ -5856,5 +6129,5 @@ table {
   vertical-align: top; }
 
 /* line 3, ../sass/_controls.scss */
-.s-btn.major .title-label, .major.s-menu .title-label {
+.s-btn.major .title-label, .major.s-menu-btn .title-label {
   text-transform: uppercase; }
diff --git a/platform/commonUI/themes/snow/res/sass/_constants.scss b/platform/commonUI/themes/snow/res/sass/_constants.scss
index 61d76cebb8..e24d0d8b5a 100644
--- a/platform/commonUI/themes/snow/res/sass/_constants.scss
+++ b/platform/commonUI/themes/snow/res/sass/_constants.scss
@@ -7,12 +7,14 @@ $colorKey: #0099cc;
 $colorKeySelectedBg: $colorKey;
 $colorKeyFg: #fff;
 $colorInteriorBorder: rgba($colorBodyFg, 0.2);
+$colorA: #999;
+$colorAHov: $colorKey;
 $contrastRatioPercent: 40%;
 $basicCr: 4px;
 $controlCr: $basicCr;
 $smallCr: 3px;
 
-// Buttons
+// Buttons and Controls
 $colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
 $colorBtnFg: #fff;
 $colorBtnMajorBg: $colorKey;
@@ -20,6 +22,18 @@ $colorBtnMajorFg: $colorKeyFg;
 $colorBtnIcon: #eee;
 $colorInvokeMenu: #000;
 $contrastInvokeMenuPercent: 40%;
+$shdwBtns: none;
+$sliderColorBase: $colorKey;
+$sliderColorRangeHolder: rgba(black, 0.07);
+$sliderColorRange: rgba($sliderColorBase, 0.2);
+$sliderColorRangeHov: rgba($sliderColorBase, 0.4);
+$sliderColorKnob: rgba($sliderColorBase, 0.5);
+$sliderColorKnobHov: rgba($sliderColorBase, 0.7);
+$sliderColorRangeValHovBg: $sliderColorRange; //rgba($sliderColorBase, 0.1);
+$sliderColorRangeValHovFg: $colorBodyFg;
+$sliderKnobW: nth($ueTimeControlH,2)/2;
+$timeControllerToiLineColor: $colorBodyFg;
+$timeControllerToiLineColorHov: #0052b5;
 
 // General Colors
 $colorAlt1: #ff6600;
@@ -32,6 +46,7 @@ $colorGridLines: rgba(#000, 0.05);
 $colorInvokeMenu: #fff;
 $colorObjHdrTxt: $colorBodyFg;
 $colorObjHdrIc: pushBack($colorObjHdrTxt, 30%);
+$colorTick: rgba(black, 0.2);
 
 // Menu colors
 $colorMenuBg: pushBack($colorBodyBg, 10%);
@@ -104,9 +119,10 @@ $colorTabHeaderBorder: $colorBodyBg;
 // Plot
 $colorPlotBg: rgba(black, 0.05);
 $colorPlotFg: $colorBodyFg;
-$colorPlotHash: rgba(black, 0.2);
+$colorPlotHash: $colorTick;
 $stylePlotHash: dashed;
 $colorPlotAreaBorder: $colorInteriorBorder;
+$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
 
 // Tree
 $colorItemTreeIcon: $colorKey;
@@ -137,5 +153,12 @@ $colorGrippyInteriorHover: $colorBodyBg;
 // Mobile
 $colorMobilePaneLeft: darken($colorBodyBg, 2%);
 
+// Datetime Picker, Calendar
+$colorCalCellHovBg: $colorKey;
+$colorCalCellHovFg: $colorKeyFg;
+$colorCalCellSelectedBg: $colorItemTreeSelectedBg;
+$colorCalCellSelectedFg: $colorItemTreeSelectedFg;
+$colorCalCellInMonthBg: pullForward($colorMenuBg, 5%);
+
 // About Screen
 $colorAboutLink: #84b3ff;
\ No newline at end of file
diff --git a/platform/commonUI/themes/snow/res/sass/_mixins.scss b/platform/commonUI/themes/snow/res/sass/_mixins.scss
index 2ff7fb2690..e8ab65d5f1 100644
--- a/platform/commonUI/themes/snow/res/sass/_mixins.scss
+++ b/platform/commonUI/themes/snow/res/sass/_mixins.scss
@@ -1,5 +1,6 @@
 @mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
 	@include containerBase($bg, $fg);
+	@include boxShdw($shdwBtns);
 }
 
 @mixin btnSubtle($bg: $colorBtnBg, $bgHov: none, $fg: $colorBtnFg, $ic: $colorBtnIcon) {
diff --git a/platform/features/conductor/src/ConductorRepresenter.js b/platform/features/conductor/src/ConductorRepresenter.js
index ae6fdf2665..9f9c6a291f 100644
--- a/platform/features/conductor/src/ConductorRepresenter.js
+++ b/platform/features/conductor/src/ConductorRepresenter.js
@@ -28,13 +28,8 @@ define(
 
         var CONDUCTOR_HEIGHT = "100px",
             TEMPLATE = [
-                '<div style=',
-                '"position: absolute; bottom: 0; width: 100%; ',
-                'overflow: hidden; ',
-                'height: ' + CONDUCTOR_HEIGHT + '">',
                 "<mct-include key=\"'time-controller'\" ng-model='conductor'>",
-                "</mct-include>",
-                '</div>'
+                "</mct-include>"
             ].join(''),
             THROTTLE_MS = 200,
             GLOBAL_SHOWING = false;
@@ -141,8 +136,7 @@ define(
                 this.conductorElement =
                     this.$compile(TEMPLATE)(this.conductorScope());
                 this.element.after(this.conductorElement[0]);
-                this.element.addClass('abs');
-                this.element.css('bottom', CONDUCTOR_HEIGHT);
+                this.element.addClass('l-controls-visible l-time-controller-visible');
                 GLOBAL_SHOWING = true;
             }
         };
diff --git a/platform/features/layout/res/templates/layout.html b/platform/features/layout/res/templates/layout.html
index ca3a359dba..1811f35236 100644
--- a/platform/features/layout/res/templates/layout.html
+++ b/platform/features/layout/res/templates/layout.html
@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div style="width: 100%; height: 100%;"
+<div class="l-layout"
      ng-controller="LayoutController as controller">
 
     <div class='frame child-frame panel abs'
diff --git a/platform/features/pages/res/iframe.html b/platform/features/pages/res/iframe.html
index a1a1c5ccae..ba4fa67c73 100644
--- a/platform/features/pages/res/iframe.html
+++ b/platform/features/pages/res/iframe.html
@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="abs l-iframe">
+<div class="l-iframe abs">
 <iframe ng-controller="EmbeddedPageController as ctl"
         ng-src="{{ctl.trust(model.url)}}">
 </iframe>
diff --git a/platform/features/plot/res/templates/plot.html b/platform/features/plot/res/templates/plot.html
index 3a689d460a..0a17de15cf 100644
--- a/platform/features/plot/res/templates/plot.html
+++ b/platform/features/plot/res/templates/plot.html
@@ -119,7 +119,7 @@
                     <span class="ui-symbol icon">I</span>
                 </a>
 
-                <div class="menu-element s-menu menus-to-left"
+                <div class="menu-element s-menu-btn menus-to-left"
                      ng-if="plot.getModeOptions().length > 1"
                      ng-controller="ClickAwayController as toggle">
 
diff --git a/platform/forms/res/templates/controls/color.html b/platform/forms/res/templates/controls/color.html
index 903b30d064..178a3bfd75 100644
--- a/platform/forms/res/templates/controls/color.html
+++ b/platform/forms/res/templates/controls/color.html
@@ -20,7 +20,7 @@
  at runtime from the About dialog for additional information.
 -->
 <div
-	class="t-btn l-btn s-btn s-icon-btn s-menu menu-element t-color-palette"
+	class="t-btn l-btn s-btn s-icon-btn s-menu-btn menu-element t-color-palette"
     ng-controller="ClickAwayController as toggle"
 	>
 
diff --git a/platform/forms/res/templates/controls/menu-button.html b/platform/forms/res/templates/controls/menu-button.html
index eb517c45e3..dc7ab9e14c 100644
--- a/platform/forms/res/templates/controls/menu-button.html
+++ b/platform/forms/res/templates/controls/menu-button.html
@@ -19,7 +19,7 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<div class="s-menu menu-element"
+<div class="s-menu-btn menu-element"
      ng-controller="ClickAwayController as toggle">
 
     <span class="l-click-area" ng-click="toggle.toggle()"></span>