
/* lib\layout\contextual\source\ContextualLayout.css */

/* ContextualLayout.css - popup positioning and border radius adjustments */

/*for popups above activator*/
.vertical.above {
  top: auto;
  margin-top:-10px;
  bottom: 100%;
  margin-bottom: 10px;
}
/*for popups below activator*/
.vertical.below {
  margin-top:10px;
}
/*for popups on the left of the activator*/
.right.horizontal {
  margin-left: -11px;
}
/*for popups on the right of the activator*/
.left.horizontal {
  margin-left: 10px;
}
/*corners*/
/*vertical top corners*/
/*for popups on the left of the activator*/
.vertical.right.corner {
  margin-left: 0px;
}
/*for popups on the right of the activator*/
.vertical.left.corner {
  margin-left: 0px;
}
.vertical.below.left.corner {
  border-top-right-radius: 0px;
}
.vertical.below.right.corner {
  border-top-left-radius: 0px;
}
/*vertical bottom corners*/
.left.above.corner {
  border-bottom-right-radius: 0px;
}
.right.above.corner {
  border-bottom-left-radius: 0px;
}
/*horizontal bottom corners*/
.left.low.corner {
  border-bottom-left-radius: 0px;
}
.right.low.corner {
  border-bottom-right-radius: 0px;
}
/*horizontal top corners*/
.left.high.corner {
  border-top-left-radius: 0px;
}
.right.high.corner {
  border-top-right-radius: 0px;
}

/* lib\layout\fittable\source\FittableLayout.css */

.enyo-fittable-rows-layout {
	position: relative;
}

.enyo-fittable-rows-layout > * {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	/* float when not stretched */
	float: left;
	clear: both;
}

/* non-floating when stretched */
.enyo-fittable-rows-layout.enyo-stretch > * {
	float: none;
	clear: none;
}

/* setting to enforce margin collapsing */
/* NOTE: rows cannot have margin left/right */
.enyo-fittable-rows-layout.enyo-stretch.enyo-margin-expand > * {
	float: left;
	clear: both;
	width: 100%;
	/* note: harsh resets */
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.enyo-fittable-columns-layout {
	position: relative;
	text-align: left;
	white-space: nowrap;
}

.enyo-locale-right-to-left .enyo-fittable-columns-layout {
	text-align: right;
}

.enyo-fittable-columns-layout.enyo-center,
.enyo-locale-right-to-left .enyo-fittable-columns-layout.enyo-center {
	text-align: center;
}

.enyo-fittable-columns-layout > * {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	vertical-align: top;
	display: inline-block;
	white-space: normal;
}

.enyo-fittable-columns-layout > table {
	display: inline-table;
}

.enyo-fittable-columns-layout.enyo-tool-decorator > * {
	vertical-align: middle;
}

/* repair clobbered white-space setting for pre, code */
.enyo-fittable-columns-layout > pre, .enyo-fittable-columns-layout > code {
	white-space: pre;
}

.enyo-fittable-columns-layout > .enyo-fittable-columns-layout, .enyo-fittable-columns-layout > .onyx-toolbar-inline {
	white-space: nowrap;
}

/* NOTE: columns cannot have margin top/bottom */
.enyo-fittable-columns-layout.enyo-stretch > * {
	height: 100%;
	/* note: harsh resets */
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.enyo-locale-right-to-left .enyo-fittable-columns-layout {
	direction: rtl;
	text-align: right;
}
.enyo-locale-right-to-left .enyo-fittable-columns-layout.force-left-to-right {
	direction: ltr;
	text-align: left;
}


/* lib\layout\list\source\List.css */

.enyo-list {
	position: relative;
}

.enyo-list-port {
	overflow: hidden;
	position: relative;
}

.enyo-list-holdingarea {
	position: absolute;
	left: 0;
	right: 0;
}

.enyo-list-port.horizontal {
	white-space: nowrap;
	width:  1000000px;
	height: 1000000px;
}

.enyo-list-port.vertical {
	height: 1000000px;
}

.enyo-list-page {
	position: absolute;
	left: 0;
}

.enyo-locale-right-to-left .enyo-list-page {
	left: auto;
	right: 0;
}

.enyo-list-page.vertical {
	left: 0;
	right: 0;
}

.enyo-list-holdingarea {
	top: -10000px;
}

.enyo-pinned-list-placeholder {
	border: 1px solid red;
	position: absolute;
	top: 0; left: 0;
	z-index: 1000;
	background: transparent;
	overflow: hidden;
}

.enyo-pinned-list-placeholder button {
	width: 100px; height: 100%;
	position: absolute;
	top: 0; right: 0;
}

.enyo-list-reorder-container {
	position: absolute;
	top: 0; left: 0;
	z-index: 1000;
	background: transparent;
	overflow: hidden;
}

.enyo-animatedTopAndLeft {
	-webkit-transition: top 0.1s linear, left 0.1s linear;
	-moz-transition: top 0.1s linear, left 0.1s linear;
	-o-transition: top 0.1s linear, left 0.1s linear;
	transition: top 0.1s linear, left 0.1s linear;
}

/* lib\layout\list\source\PulldownList.css */

.enyo-list-pulldown {
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
}

.enyo-puller {
	position: relative;
	height: 50px;
	font-size: 22px;
	color: #444;
	padding: 20px 0 0px 34px;
}

.enyo-puller-text {
	position: absolute;
	left: 80px;
	top: 22px;
}

.enyo-puller-arrow {
	position: relative;
	background: #444;
	width: 7px;
	height: 28px;
	transition: transform 0.3s;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	-o-transition: -o-transform 0.3s;
	-ms-transition: -ms-transform 0.3s;
}

.enyo-puller-arrow:after {
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	border: 10px solid transparent;
	border-bottom-color: #444;
	bottom: 100%;
	left: 50%;
	margin-left: -10px;
}

.enyo-puller-arrow-up {
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
}

.enyo-puller-arrow-down {
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
}

/* lib\layout\list\source\GridListImageItem.css */

/*
	Put anything you reference with "url()" in ../assets/
	This way, you can minify your application, and just remove the "source" folder for production
*/
.enyo-gridlist-imageitem {
	width: 100%;
	height: 100%;
	color: #fff;
}
.enyo-gridlist-imageitem img {
	display: block;
	width: 100%;
}
.enyo-gridlist-imageitem >.caption,
.enyo-gridlist-imageitem >.sub-caption {
	font-size: 10pt;
	z-index: 10;
	padding-top: 10px;
	width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	color: #fff;
}
.enyo-gridlist-imageitem.centered > .caption,
.enyo-gridlist-imageitem.centered > .sub-caption {
	text-align: center;
}
.enyo-gridlist-imageitem.disabled {
	opacity: 0.4;
	filter: alpha(opacity=40);
}

.enyo-gridlist-imageitem.sized-image.use-caption.use-subcaption {
	padding-bottom: 50px;
}
.enyo-gridlist-imageitem.sized-image.use-caption,
.enyo-gridlist-imageitem.sized-image.use-subcaption {
	padding-bottom: 25px;
}
.enyo-gridlist-imageitem.sized-image > .image {
	width: 100%;
	height: 100%;
}
.enyo-gridlist-imageitem.sized-image.use-caption.use-subcaption > .caption {
	position: absolute;
	bottom: 22px;
}
.enyo-gridlist-imageitem.sized-image > .caption {
	position: absolute;
	bottom: 0;
}
.enyo-gridlist-imageitem.sized-image > .sub-caption {
	position: absolute;
	bottom: 0;
}


/* lib\layout\panels\source\arrangers\Arranger.css */

.enyo-arranger {
	position: relative;
	overflow: hidden;
}

.enyo-arranger.enyo-fit {
	position: absolute;
}

.enyo-arranger > * {
	position: absolute;
	left: 0;
	top: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.enyo-arranger-fit > * {
	/* override any width/height set on panels */
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
}


/* lib\layout\panels\source\Panels.css */

.enyo-panels {
}

.enyo-panels-fit-narrow {
}

.enyo-panels-fit-narrow > * {
	min-width: 100%;
	max-width: 100%;
}


/* lib\layout\tree\source\Node.css */

.enyo-node {
	cursor: default;
	padding: 4px;
}

.enyo-node img {
	vertical-align: middle;
	padding-right: 6px;
}

.enyo-node-box {
	overflow: hidden;
}

.enyo-node-client {
	position: relative;
}

.enyo-animate .enyo-node-box, .enyo-animate .enyo-node-client {
	-ms-transition-property: height, top;
	-ms-transition-duration: 0.2s, 0.2s;
	-moz-transition-property: height, top;
	-moz-transition-duration: 0.2s, 0.2s;
	-o-transition-property: height, top;
	-o-transition-duration: 0.2s, 0.2s;
	-webkit-transition-property: height, top;
	-webkit-transition-duration: 0.2s, 0.2s;
	transition-property: height, top;
	transition-duration: 0.2s, 0.2s;
}


/* lib\layout\imageview\source\ImageViewPin.css */


.pinDebug {
	background:yellow;
	border:1px solid yellow;
}

/* lib\onyx\css\onyx.less */

/* Onyx default parameters defined here */
/* Paths */
/* application importing Onyx Less files will have to override this  */
/* variable. Otherwise, Onyx image load will fail with a 404 error  */
/* Fonts */
/* ---------------------------------------*/
/* Text Colors */
/* ---------------------------------------*/
/* Background Colors */
/* ---------------------------------------*/
/* Border Radius */
/* ---------------------------------------*/
/* Padding */
/* ---------------------------------------*/
/* Icon Sizes */
/* ---------------------------------------*/
/* Disabled Opacity */
/* ---------------------------------------*/
/* Gradient Overlays */
/* ---------------------------------------*/
/* Images */
/* ---------------------------------------*/
/* Onyx rules defined here */
/* onyx-classes.less - combined CSS (less) files for all released Onyx controls
   into single onyx.less file to avoid IE bug that allows
   a maximum of 31 style sheets to be loaded before silently failing */
.onyx {
  color: #333333;
  font-family: 'Helvetica Neue', 'Nimbus Sans L', Arial, sans-serif;
  font-size: 20px;
  cursor: default;
  background-color: #eaeaea;
  /* remove automatic tap highlight color */

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* prevent IE from inheriting line-height for these elements */
.onyx button,
.onyx label,
.onyx input {
  line-height: normal;
}
.onyx-selected {
  background-color: #c4e3fe;
}
/* LESS pre-calculations */
/* Individual Widget CSS */
/* Icon.css */
.onyx-icon,
.onyx-icon-toggle {
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: middle;
}
.onyx-icon.onyx-icon-button.active,
.onyx-icon.onyx-icon-button.pressed,
.onyx-icon-toggle.active {
  background-position: 0 -32px;
}
.onyx-icon.disabled {
  opacity: 0.4;
  filter: alpha(opacity=40);
}
/* Button.css */
.onyx-button {
  outline: 0;
  color: #292929;
  font-size: 16px;
  text-align: center;
  white-space: nowrap;
  margin: 0;
  padding: 6px 18px;
  overflow: hidden;
  border-radius: 3px;
  /* for IE8 */

  border: 1px solid #707070;
  border: 1px solid rgba(15, 15, 15, 0.2);
  /*
		The border and the gradient interact in a strange way that
		causes the bottom-border (top if the gradient is aligned top)
		to be lighter than other borders.
		We can fix it by using the darker bottom border below, but
		then there are a few rogue pixels that end up very dark.
	*/

  /* border-bottom: 1px solid rgba(15, 15, 15, 0.5); */

  box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.2);
  background: #e1e1e1 url('../lib/onyx/images/gradient.png') repeat-x bottom;
  background-size: contain;
  /**/

  text-overflow: ellipsis;
  /* the following cause arcane problems on IE */

  /*
	min-width: 14px;
	min-height: 20px;
	*/

}
/*
	IE8 can't handle these selectors in tandem:
	.onyx-button.active, .onyx-button:active:not([disabled]) {

	the effect is as if .onyx-button.active doesn't exist
*/
.onyx-button.active,
.onyx-button.pressed {
  background-image: url('../lib/onyx/images/gradient-invert.png');
  background-position: top;
  border-top: 1px solid rgba(15, 15, 15, 0.6);
  box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.1);
}
.onyx-button[disabled] {
  opacity: 0.4;
  filter: alpha(opacity=40);
}
.onyx-button > img {
  padding: 0px 3px;
}
/* Remove the focused inner-border style in Firefox (Windows) */
.onyx-button::-moz-focus-inner {
  border: 0;
}
/* Checkbox.css */
.onyx-checkbox {
  cursor: pointer;
  height: 32px;
  width: 32px;
  background: url('../lib/onyx/images/checkbox.png') no-repeat;
  /* reset for ? */

  margin: 0px;
  /* these entries cause toggle-button and checkbox to line up properly*/

  display: inline-block;
  vertical-align: middle;
}
.onyx-checkbox[checked] {
  background-position: 0px -32px;
}
.onyx-checkbox[disabled] {
  opacity: 0.4;
}
/* Grabber.css */
.onyx-grabber {
  background: url('../lib/onyx/images/grabbutton.png') no-repeat center;
  width: 23px;
  height: 27px;
}
/* Popup.css */
.onyx-popup {
  font-size: 16px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 6px;
  color: #ffffff;
  background: #4c4c4c url('../lib/onyx/images/gradient.png') repeat-x 0 bottom;
}
.onyx-popup-decorator {
  position: relative;
}
/* Groupbox.css */
.onyx-groupbox > * {
  display: block;
  /*box-shadow: inset 0px 1px 1px rgba(255,255,255,0.5);*/

  border-color: #aaaaaa;
  border-style: solid;
  border-width: 0 1px 1px 1px;
  /*padding: 10px;*/

  /* reset styles that make 'item' look bad if they happen to be there */

  border-radius: 0;
  margin: 0;
  font-size: 16px;
}
/* needed for MathJax support */
.onyx-groupbox > script {
  display: none;
}
.onyx-groupbox > *:first-child {
  border-top-color: #aaaaaa;
  border-width: 1px;
  border-radius: 4px 4px 0 0;
}
.onyx-groupbox > *:last-child {
  border-radius: 0 0 4px 4px;
}
.onyx-groupbox > *:first-child:last-child {
  border-radius: 4px;
}
.onyx-groupbox-header {
  padding: 2px 10px;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
  /**/

  background-color: #4c4c4c;
  border: none;
  background: #4c4c4c url('../lib/onyx/images/gradient.png') repeat-x 0 10px;
}
.onyx-groupbox .onyx-input-decorator {
  display: block;
}
.onyx-groupbox > .onyx-input-decorator {
  border-color: #aaaaaa;
  border-width: 0 1px 1px 1px;
  border-radius: 0;
}
.onyx-groupbox > .onyx-input-decorator:first-child {
  border-width: 1px;
  border-radius: 4px 4px 0 0;
}
.onyx-groupbox > .onyx-input-decorator:last-child {
  border-radius: 0 0 4px 4px;
}
.onyx-groupbox > .onyx-input-decorator:first-child:last-child {
  border-radius: 4px;
}
/* Input.css */
.onyx-input-decorator {
  padding: 6px 8px 10px 8px;
  border-radius: 3px;
  border: 1px solid;
  border-color: rgba(0, 0, 0, 0.1);
  margin: 0;
}
.onyx-input-decorator.onyx-focused {
  box-shadow: inset 0px 1px 4px rgba(0, 0, 0, 0.3);
  border-color: rgba(0, 0, 0, 0.3);
  background-color: #ffffff;
}
.onyx-input-decorator.onyx-disabled {
  /* FIXME: needed to color a disabled input placeholder. */

  /*-webkit-text-fill-color: #888;*/

  opacity: 0.4;
  filter: alpha(opacity=40);
}
.onyx-input-decorator > input {
  /* reset */

  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: transparent;
  background-image: none;
  font-size: 16px;
  box-shadow: none;
  /* FIXME: hack for styling reset on Android */

  /* -webkit-appearance: caret;*/

}
.onyx-input-decorator.onyx-focused > input {
  cursor: text;
}
.onyx-input-decorator.onyx-disabled > input {
  cursor: default;
}
/* Menu.css */
.onyx-menu,
.onyx.onyx-menu {
  min-width: 160px;
  top: 100%;
  left: 0;
  margin-top: 2px;
  padding: 3px 0;
  border-radius: 3px;
}
.onyx-menu.onyx-menu-up {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 2px;
}
.onyx-toolbar .onyx-menu {
  margin-top: 11px;
  border-radius: 0 0 3px 3px;
}
.onyx-toolbar .onyx-menu.onyx-menu-up {
  margin-top: 0;
  margin-bottom: 10px;
  border-radius: 3px 3px 0 0;
}
.onyx-menu-item {
  display: block;
  padding: 10px;
}
.onyx-menu-item:hover {
  background: #284152;
}
.onyx-menu-divider,
.onyx-menu-divider:hover {
  margin: 6px 0;
  padding: 0;
  border-bottom: 1px solid #aaa;
}
.onyx-menu-label {
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  user-select: none;
  opacity: 0.4;
  filter: alpha(opacity=40);
}
.onyx-menu-label:hover {
  background: none;
}
/* customize a toolbar to support menus */
.onyx-menu-toolbar,
.onyx-toolbar.onyx-menu-toolbar {
  position: relative;
  z-index: 10;
  overflow: visible;
}
/* Submenu.css */
.onyx-submenu {
  background: rgba(0, 0, 0, 0.25) url('../lib/onyx/images/gradient-invert.png') repeat-x 0 top;
}
/* Picker.css */
.onyx-picker-decorator .onyx-button {
  padding: 10px 18px;
}
.onyx-picker {
  top: 0;
  margin-top: -3px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  color: black;
  background: #e1e1e1;
}
.onyx-picker.onyx-menu-up {
  top: auto;
  bottom: 0;
  margin-top: 3px;
  margin-bottom: -3px;
}
.onyx-picker .onyx-menu-item {
  text-align: center;
}
.onyx-picker .onyx-menu-item:hover {
  background-color: transparent;
}
.onyx-picker .onyx-menu-item.selected,
.onyx-picker .onyx-menu-item.active,
.onyx-picker .onyx-menu-item:active:hover {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #cde7fe;
  box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.2);
}
.onyx-picker .onyx-menu-item {
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.onyx-picker:not(.onyx-flyweight-picker) .onyx-menu-item:first-child,
.onyx-flyweight-picker :first-child > .onyx-menu-item {
  border-top: none;
}
.onyx-picker:not(.onyx-flyweight-picker) .onyx-menu-item:last-child,
.onyx-flyweight-picker :last-child > .onyx-menu-item {
  border-bottom: none;
}
/* TextArea.css */
.onyx-input-decorator > textarea {
  /* reset */

  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: transparent;
  background-image: none;
  font-size: 16px;
  box-shadow: none;
  /* Remove scrollbars and resize handle */

  resize: none;
  overflow: auto;
  /* FIXME: hack for styling reset on Android */

  /* -webkit-appearance: caret;*/

}
.onyx-input-decorator.onyx-focused > textarea {
  cursor: text;
}
.onyx-input-decorator.onyx-disabled > textarea {
  cursor: default;
}
.onyx-textarea {
  /* need >=50px for scrollbar to be usable on mac */

  min-height: 50px;
}
/* RichText.css */
.onyx-input-decorator > .onyx-richtext {
  /* reset */

  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: transparent;
  background-image: none;
  font-size: 16px;
  min-height: 20px;
  min-width: 100px;
  box-shadow: none;
  /* FIXME: hack for styling reset on Android */

  /* -webkit-appearance: caret;*/

}
.onyx-input-decorator.onyx-focused > .onyx-richtext {
  cursor: text;
}
.onyx-input-decorator.onyx-disabled > .onyx-richtext {
  cursor: default;
}
/* RadioButton.css */
.onyx-radiobutton {
  padding: 8px 12px;
  margin: 0;
  outline: 0;
  font-size: 16px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  text-align: center;
  /**/

  background: #e7e7e7 url('../lib/onyx/images/gradient.png') repeat-x bottom;
  /* IE8 */

  border: 1px solid #333333;
  border: 1px solid rgba(15, 15, 15, 0.2);
  /* turn off right-border in a way IE8 ignores, because IE8 does not support :last-child */

  border-right-color: rgba(0, 0, 0, 0);
  box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.2);
}
.onyx-radiobutton:first-child {
  border-radius: 3px 0 0 3px;
}
.onyx-radiobutton:last-child {
  border-radius: 0px 3px 3px 0px;
  /* IE8 */

  border-right: 1px solid #333333;
  border-right: 1px solid rgba(15, 15, 15, 0.2);
}
.onyx-radiobutton.active {
  color: #ffffff;
  background: #0091f2 url('../lib/onyx/images/gradient-invert.png') repeat-x top;
  border-top: 1px solid rgba(15, 15, 15, 0.6);
  box-shadow: inset 1px 2px 2px rgba(0, 0, 0, 0.2);
}
/* Scrim.css */
.onyx-scrim {
  z-index: 1;
  /*
		note: by using pointer-events we allow tapping on scrim
		while it is fading out; however, this requires any showing classes
		to set pointer events to auto or scrim will not function as expected.
	*/

  pointer-events: none;
}
.onyx-scrim.onyx-scrim-translucent {
  pointer-events: auto;
  background-color: #000000;
  opacity: 0.65;
  filter: alpha(opacity=65);
}
.onyx-scrim.onyx-scrim-transparent {
  pointer-events: auto;
  background: transparent;
}
/* TabButton.css */
.onyx-radiobutton.onyx-tabbutton {
  padding: 8px 34px;
  font-size: 20px;
  border-radius: 0px;
}
/* TabBar.css */
.onyx-tab-bar {
  width: 100%;
  z-index: 10;
  background-color: #cacaca;
  padding-top: 1px;
}
.onyx-tab-bar-scroller {
  padding-top: 2px;
}
.onyx-tab-bar-scroller > .enyo-thumb {
  border: 0px;
}
.onyx-tab-wrapper {
  padding: 3px 0px 3px 0px;
}
.onyx-tab-line {
  position: relative;
  margin-top: -0.1em;
  border-top: 1px solid #646464;
  z-index: 2;
}
.onyx-tab-rug {
  position: relative;
  padding: 0.3em;
  background-color: #cacaca;
  z-index: 4;
}
/* TabBarItem.css */
.onyx-tab-item {
  display: inline;
  position: relative;
  border: 1px solid #646464;
  margin: 0px 2px 0px 2px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  background-color: #b1b1b1;
  z-index: 1;
  padding-top: 0.2em;
  padding-bottom: 0.7em ;
  vertical-align: baseline;
}
.onyx-tab-item.active {
  border-bottom: 1px solid #cacaca;
  background-color: #cacaca;
  z-index: 3;
  padding-top: 0.3em;
}
.onyx-tab-item:hover {
  background-color: #cacaca;
}
.onyx-tab-item button {
  overflow: hidden;
  margin: 3px;
  border: 1px solid transparent;
  background-color: transparent ;
}
.onyx-tab-item-dissolve {
  display: inline-block;
  height: 90%;
  width: 2em;
  top: 2px;
  right: 19px;
  position: absolute;
  background: linear-gradient(to right, #b1b1b1 0%, rgba(177, 177, 177, 0) 100%);
  /* W3C */

  background: -moz-linear-gradient(right, #b1b1b1 0%, rgba(177, 177, 177, 0) 100%);
  /* FF3.6+ */

  background: -webkit-linear-gradient(left, rgba(177, 177, 177, 0), #b1b1b1);
  /* Chrome10+,Safari5.1+ */

  background: -webkit-gradient(linear, right top, left top, color-stop(0%, #b1b1b1), color-stop(100%, rgba(177, 177, 177, 0)));
  /* Chrome,Safari4+ */

  background: -o-linear-gradient(left, #b1b1b1 0%, rgba(177, 177, 177, 0) 100%);
  /* Opera 11.10+ */

  background: -ms-linear-gradient(left, rgba(177, 177, 177, 0) 0%, #b1b1b1 100%);
  /* IE10+ */

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00b1b1b1, endColorstr=#ffb1b1b1, GradientType=1);
  /* IE6-9 */

}
.onyx-tab-item-dissolve.active {
  background: linear-gradient(to right, #cacaca 0%, rgba(202, 202, 202, 0) 100%);
  /* W3C */

  background: -moz-linear-gradient(right, #cacaca 0%, rgba(202, 202, 202, 0) 100%);
  /* FF3.6+ */

  background: -webkit-linear-gradient(left, rgba(202, 202, 202, 0), #cacaca);
  /* Chrome10+,Safari5.1+ */

  background: -webkit-gradient(linear, right top, left top, color-stop(0%, #cacaca), color-stop(100%, rgba(202, 202, 202, 0)));
  /* Chrome,Safari4+ */

  background: -o-linear-gradient(left, #cacaca 0%, rgba(202, 202, 202, 0) 100%);
  /* Opera 11.10+ */

  background: -ms-linear-gradient(left, rgba(202, 202, 202, 0) 0%, #cacaca 100%);
  /* IE10+ */

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00cacaca, endColorstr=#ffcacaca, GradientType=1);
  /* IE6-9 */

}
.onyx-tab-item-hovered {
  background: linear-gradient(to right, #cacaca 0%, rgba(202, 202, 202, 0) 100%);
  /* W3C */

  background: -moz-linear-gradient(right, #cacaca 0%, rgba(202, 202, 202, 0) 100%);
  /* FF3.6+ */

  background: -webkit-linear-gradient(left, rgba(202, 202, 202, 0), #cacaca);
  /* Chrome10+,Safari5.1+ */

  background: -webkit-gradient(linear, right top, left top, color-stop(0%, #cacaca), color-stop(100%, rgba(202, 202, 202, 0)));
  /* Chrome,Safari4+ */

  background: -o-linear-gradient(left, #cacaca 0%, rgba(202, 202, 202, 0) 100%);
  /* Opera 11.10+ */

  background: -ms-linear-gradient(left, rgba(202, 202, 202, 0) 0%, #cacaca 100%);
  /* IE10+ */

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00cacaca, endColorstr=#ffcacaca, GradientType=1);
  /* IE6-9 */

}
.onyx-tab-item-close {
  display: inline-block;
  margin-right: 3px;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-image: url('../lib/onyx/images/close-inactive.png');
}
.onyx-tab-item-close:hover {
  background-image: url('../lib/onyx/images/close-active.png');
}
/* ToggleButton.css */
.onyx-toggle-button {
  display: inline-block;
  height: 32px;
  line-height: 32px;
  min-width: 64px;
  vertical-align: middle;
  text-align: center;
  /* */

  border-radius: 3px;
  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.4);
  background: #8bba3d url('../lib/onyx/images/gradient-invert.png') repeat-x bottom;
  background-size: auto 100%;
  /* label */

  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
}
.onyx-toggle-button.off {
  background-color: #b1b1b1 !important;
}
.onyx-toggle-button-knob {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 1px;
  border-radius: 3px;
  background: #f6f6f6 url('../lib/onyx/images/gradient.png') repeat-x;
  background-size: auto 100%;
}
.onyx-toggle-button .onyx-toggle-button-knob {
  box-shadow: -1px 0px 4px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  float: right;
}
.onyx-toggle-button.off .onyx-toggle-button-knob {
  box-shadow: 1px 0px 4px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  float: left;
}
.onyx-toggle-button.disabled,
.onyx-icon-button.disabled {
  opacity: 0.4;
  filter: alpha(opacity=40);
}
.onyx-toggle-content {
  min-width: 32px;
  padding: 0 6px;
}
.onyx-toggle-content.empty {
  padding: 0;
}
.onyx-toggle-content.off {
  float: right;
}
.onyx-toggle-content.on {
  float: left;
}
/* Toolbar.css */
.onyx-toolbar {
  /*
		line-height is unreliable for centering, instead
		use vertical-align: middle to align
		elements along a common centerline and use
		padding to fill out the space.
	*/

  padding: 9px 8px 10px 8px;
  border: 1px solid #3A3A3A;
  background: #4c4c4c url('../lib/onyx/images/gradient.png') repeat-x 0 bottom;
  background-size: contain;
  color: #ffffff;
  /**/

  white-space: nowrap;
  overflow-y: visible;
  font-size: 20px;
}
.onyx-toolbar-inline > *,
.enyo-fittable-columns-layout.onyx-toolbar-inline > * {
  display: inline-block;
  vertical-align: middle;
  margin: 4px 6px 5px;
  box-sizing: border-box;
}
/* needed for MathJax support */
.onyx-toolbar-inline > script,
.enyo-fittable-columns-layout.onyx-toolbar-inline > script {
  display: none;
}
.onyx-toolbar .onyx-icon-button {
  margin: 3px 2px 1px;
}
.onyx-toolbar .onyx-button {
  color: #f2f2f2;
  background-color: #555656;
  border-color: rgba(15, 15, 15, 0.5);
  margin-top: 0;
  margin-bottom: 0;
  height: 36px;
}
.onyx-toolbar .onyx-input-decorator {
  margin: 1px 3px;
  box-shadow: inset 0px 1px 4px rgba(0, 0, 0, 0.1);
  background-color: rgba(0, 0, 0, 0.1);
  padding: 0px 6px 5px 6px;
}
.onyx-toolbar .onyx-input-decorator.onyx-focused {
  box-shadow: inset 0px 1px 4px rgba(0, 0, 0, 0.3);
  background-color: #ffffff;
}
.onyx-toolbar .onyx-input-decorator .onyx-input {
  color: #e5e5e5;
  font-size: 14px;
}
.onyx-toolbar .onyx-input-decorator .onyx-input:focus {
  color: #000000;
}
.onyx-toolbar .onyx-input-decorator .onyx-input:focus::-webkit-input-placeholder {
  color: #dddddd;
}
/* Tooltip.css */
.onyx-tooltip {
  z-index: 20;
  left: 0;
  padding: 4px 6px;
  margin-top: 4px;
  margin-left: -6px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: #ffffff;
  background: #216593 url('../lib/onyx/images/gradient.png') repeat-x 0 bottom;
  border-radius: 3px;
  white-space: nowrap;
}
/*move the tooltip over to the right when displaying the right arrow so it aligns better with the decorator*/
.onyx-tooltip.right-arrow {
  left: 30px;
}
/*prep the left & right arrows using before & after - left arrow uses before & right arrow uses after*/
.onyx-tooltip::before {
  content: '';
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  position: absolute;
  top: -6px;
  left: 16px;
}
.onyx-tooltip::after {
  content: '';
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  position: absolute;
  top: -6px;
  margin-left: -12px;
}
/*The following 3 rules handle the left & right arrows when the tooltip is displayed below the activator*/
.onyx-tooltip.below {
  top: 100%;
}
.onyx-tooltip.below.right-arrow::after {
  border-bottom: 6px solid #1D587F;
  top: -6px;
}
.onyx-tooltip.below.left-arrow::before {
  border-bottom: 6px solid #1D587F;
  top: -6px;
}
/*The following 3 rules handle the left & right arrows when the tooltip is displayed above the activator*/
.onyx-tooltip.above {
  top: -100%;
}
.onyx-tooltip.above.right-arrow::after {
  content: '';
  border-top: 6px solid #1D587F;
  top: 100%;
}
.onyx-tooltip.above.left-arrow::before {
  content: '';
  border-top: 6px solid #1D587F;
  top: 100%;
}
/* ProgressBar.css */
.onyx-progress-bar {
  margin: 8px;
  height: 8px;
  border: 1px solid rgba(15, 15, 15, 0.2);
  border-radius: 3px;
  background: #b8b8b8 url('../lib/onyx/images/gradient-invert.png') repeat-x;
  background-size: auto 100%;
}
.onyx-progress-bar-bar {
  height: 100%;
  border-radius: 3px;
  background: #58abef url('../lib/onyx/images/gradient.png') repeat-x;
  background-size: auto 100%;
}
.onyx-progress-bar-bar.striped {
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
}
.onyx-progress-bar-bar.striped.animated {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
  -moz-animation: progress-bar-stripes 2s linear infinite;
  -o-animation: progress-bar-stripes 2s linear infinite;
  animation: progress-bar-stripes 2s linear infinite;
}
@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 40px 0;
  }
}
@-moz-keyframes progress-bar-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 40px 0;
  }
}
@-o-keyframes progress-bar-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 40px 0;
  }
}
@keyframes progress-bar-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 40px 0;
  }
}
/* ProgressButton.css */
.onyx-progress-button {
  position: relative;
  height: 36px;
  line-height: 36px;
  color: #f1f1f1;
  font-size: 16px;
  text-overflow: ellipsis;
}
.onyx-progress-button-bar {
  height: 36px;
}
.onyx-progress-button-icon {
  display: inline-block;
  position: absolute;
  top: 2px;
  right: 0;
}
.onyx-progress-button-client {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  right: 36px;
  margin-left: 8px;
}
.onyx-progress-button-client > * {
  display: inline-block;
}
/* needed for MathJax support */
.onyx-progress-button-client > script {
  display: none;
}
/* Slider.css */
.onyx-slider {
  position: relative;
  margin: 8px 20px;
}
.onyx-slider-taparea {
  position: absolute;
  top: -11px;
  height: 28px;
  width: 100%;
}
.onyx-slider-knob {
  position: relative;
  height: 40px;
  width: 40px;
  background: url('../lib/onyx/images/slider-handle.png') left top no-repeat;
  margin: -23px -20px;
}
.onyx-slider-knob.active,
.onyx-slider-knob.pressed {
  background-position: 0 -40px;
}
/* RangeSlider.css */
.onyx-range-slider-knob {
  top: -17px;
}
.onyx-range-slider-label {
  position: relative;
  top: -18px;
  text-align: center;
  white-space: nowrap;
}
/* Item.css */
.onyx-item {
  padding: 14px;
}
.onyx-highlight,
.onyx-highlight.onyx-swipeable-item-content {
  background-color: #dedfdf;
}
.enyo-selected,
.enyo-selected.onyx-swipeable-item-content {
  background-color: #c4e3fe;
}
.onyx-item.onyx-swipeable-item {
  overflow: hidden;
  padding: 0;
}
.onyx-swipeable-item-content {
  background-color: #eaeaea;
  box-sizing: border-box;
  padding: 18px 6px;
  min-height: 40px;
}
/* Spinner.css */
.onyx-spinner {
  width: 59px;
  height: 58px;
  display: inline-block;
  background: url('../lib/onyx/images/spinner-dark.gif') no-repeat 0 0;
}
.onyx-spinner.onyx-light {
  background: url('../lib/onyx/images/spinner-light.gif') no-repeat 0 0;
}
/* MoreToolbar.css */
.onyx-more-toolbar {
  overflow: visible;
  position: relative;
  z-index: 10;
}
.onyx-more-toolbar.active {
  z-index: 11;
}
.onyx-more-menu {
  left: auto;
  right: 0px;
  min-width: 0;
}
.onyx-more-toolbar .onyx-more-menu > * {
  float: right;
  clear: both;
  margin: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
}
.onyx-more-button {
  background-image: url('../lib/onyx/images/more.png');
  width: 32px;
  height: 32px;
}
/* DatePicker.css */
.onyx-datepicker-month {
  min-width: 75px;
}
.onyx-datepicker-day {
  min-width: 60px;
}
.onyx-datepicker-year {
  min-width: 70px;
}
/* TimePicker.css */
.onyx-timepicker-hour {
  min-width: 60px;
}
.onyx-timepicker-minute {
  min-width: 60px;
}
.onyx-timepicker-ampm {
  min-width: 60px;
}
/* ButtonColors.css */
.onyx-button.onyx-blue {
  background-color: #35A8EE;
  color: #F2F2F2;
}
.onyx-button.onyx-affirmative {
  background-color: #91BA07;
  color: #F2F2F2;
}
.onyx-button.onyx-negative {
  background-color: #C51616;
  color: #F2F2F2;
}
.onyx-button.onyx-dark {
  background-color: #555656;
  color: #F2F2F2;
}
.onyx-button.onyx-light {
  background-color: #cacaca;
  color: #2F2F2F;
}
/* ContextualPopup.css */
.onyx-contextual-popup-title {
  font-weight: bold;
  padding: 24px 32px 0px;
}
.onyx-contextual-popup-scroller {
  padding: 24px 32px;
}
.onyx-contextual-popup-action-buttons {
  display: inline-block;
  width: 100%;
  text-align: center;
}
.onyx-contextual-popup-action-button {
  margin-left: 5px;
  margin-right: 5px;
}
.onyx-contextual-popup,
.onyx.onyx-contextual-popup {
  font-size: 16px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 6px;
  color: #ffffff;
  background: #4c4c4c;
}
/*setup the nub*/
.onyx-contextual-popup::after {
  content: '';
  position: absolute;
  top: -10px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
/*for popups above activator*/
.onyx-contextual-popup.vertical.above {
  top: auto;
  margin-top: -10px;
  bottom: 100%;
  margin-bottom: 10px;
}
/*for popups below activator*/
.onyx-contextual-popup.vertical.below {
  margin-top: 10px;
}
/*for popups on the left of the activator*/
.onyx-contextual-popup.right.horizontal {
  margin-left: -11px;
}
/*for popups on the right of the activator*/
.onyx-contextual-popup.left.horizontal {
  margin-left: 10px;
}
/*nub positioning*/
/*horizontally centered nub*/
.onyx-contextual-popup.vertical::after {
  position: absolute;
  left: 45%;
  border-bottom: 10px solid #4c4c4c;
  border-top: none;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
/*nub near horizontal left*/
.onyx-contextual-popup.vertical.right::after {
  left: 0%;
  margin-left: 20px;
}
/*nub near horizontal right*/
.onyx-contextual-popup.vertical.left::after {
  left: 100%;
  margin-left: -55px;
}
/*downward facing nub*/
.onyx-contextual-popup.vertical.above::after {
  top: 100%;
  border-top: 10px solid #4c4c4c;
  border-bottom: none;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
.onyx-contextual-popup.vertical.below.right::after {
  top: 0%;
  margin-top: -10px;
  border-bottom: 10px solid #4c4c4c;
  border-left: 10px solid transparent;
}
.onyx-contextual-popup.vertical.below.left::after {
  top: 0%;
  margin-top: -10px;
  border-right: 10px solid transparent;
}
/*nub positioning for left/right popups*/
/*vertically centered nub for popups on left of activator*/
.onyx-contextual-popup.right::after {
  left: 100%;
  top: 47%;
  margin-right: 20px;
  border-left: 10px solid #4C4C4C;
}
/*nub near vertical top for popups on left of activator*/
.onyx-contextual-popup.right.high::after {
  top: 35px;
  border-left: 10px solid #4C4C4C;
}
/*nub near vertical bottom for popups on left of activator*/
.onyx-contextual-popup.right.low::after {
  top: 100%;
  margin-top: -55px;
  border-left: 10px solid #4C4C4C;
}
/*vertically centered nub for popups on right of activator*/
.onyx-contextual-popup.left::after {
  left: 0%;
  margin-left: -20px;
  top: 45%;
  border-right: 10px solid #4C4C4C;
}
/*nub near vertical top for popups on right of activator*/
.onyx-contextual-popup.left.high::after {
  top: 35px;
  border-right: 10px solid #4C4C4C;
}
/*nub near vertical bottom for popups on right of activator*/
.onyx-contextual-popup.left.low::after {
  top: 100%;
  margin-top: -55px;
  border-right: 10px solid #4C4C4C;
}
/*corners*/
/*vertical top corners*/
/*for popups on the left of the activator*/
.onyx-contextual-popup.vertical.right.corner {
  margin-left: 0px;
}
/*for popups on the right of the activator*/
.onyx-contextual-popup.vertical.left.corner {
  margin-left: 0px;
}
.onyx-contextual-popup.vertical.below.left.corner {
  border-top-right-radius: 0px;
}
.onyx-contextual-popup.vertical.below.right.corner {
  border-top-left-radius: 0px;
}
.onyx-contextual-popup.vertical.below.left.corner::after {
  top: 0%;
  left: 100%;
  margin-top: -10px;
  margin-left: -19px;
  border-right: 10px solid #4c4c4c;
  border-top: 10px solid transparent;
}
.onyx-contextual-popup.vertical.below.right.corner::after {
  top: 0%;
  left: 0%;
  margin-left: -1px;
  border-left: 10px solid #4c4c4c;
  border-top: 10px solid transparent;
}
/*vertical bottom corners*/
.onyx-contextual-popup.left.above.corner {
  border-bottom-right-radius: 0px;
}
.onyx-contextual-popup.right.above.corner {
  border-bottom-left-radius: 0px;
}
.onyx-contextual-popup.vertical.left.above.corner::after {
  top: 100%;
  margin-left: -19px;
  border-right: 10px solid #4C4C4C;
  border-bottom: 10px solid transparent;
  border-top: none;
}
.onyx-contextual-popup.vertical.right.above.corner::after {
  top: 100%;
  left: 0%;
  margin-left: -1px;
  border-left: 10px solid #4c4c4c;
  border-bottom: 10px solid transparent;
  border-top: none;
}
/*horizontal bottom corners*/
.onyx-contextual-popup.left.low.corner {
  border-bottom-left-radius: 0px;
}
.onyx-contextual-popup.right.low.corner {
  border-bottom-right-radius: 0px;
}
.onyx-contextual-popup.left.low.corner::after {
  top: 100%;
  left: 0%;
  margin-top: -19px;
  margin-left: -12px;
  border-bottom: 10px solid #4c4c4c;
  border-right: 10px solid #4c4c4c;
}
.onyx-contextual-popup.right.low.corner::after {
  top: 100%;
  left: 100%;
  margin-top: -19px;
  border-bottom: 10px solid#4c4c4c;
  border-left: none;
}
/*horizontal top corners*/
.onyx-contextual-popup.left.high.corner {
  border-top-left-radius: 0px;
}
.onyx-contextual-popup.right.high.corner {
  border-top-right-radius: 0px;
}
.onyx-contextual-popup.left.high.corner::after {
  top: 0%;
  left: 0%;
  margin-top: -1px;
  margin-left: -12px;
  border-top: 10px solid #4C4C4C;
  border-bottom: none;
}
.onyx-contextual-popup.right.high.corner::after {
  top: 0%;
  left: 100%;
  margin-top: -1px;
  margin-left: -9px;
  border-top: 10px solid #4C4C4C;
  border-bottom: none;
}
/* some default colors */
.onyx-dark {
  background-color: #555656;
}
.onyx-light {
  background-color: #cacaca;
}
.onyx-green {
  background-color: #91BA07;
}
.onyx-red {
  background-color: #C51616;
}
.onyx-blue {
  background-color: #35A8EE;
}


/* lib\mochi\css\mochi.less */

/* Mochi default parameters defined here */
/* Fonts */
/* ---------------------------------------*/
/* Text Colors */
/* ---------------------------------------*/
/* Background Colors */
/* ---------------------------------------*/
/* Disabled Opacity */
/* ---------------------------------------*/
/* Spinner */
/* ---------------------------------------*/
/* Mochi rules defined here */
/* mochi-classes.less - combined CSS (less) files for all released mochi controls
   into single mochi.less file to avoid IE bug that allows
   a maximum of 31 style sheets to be loaded before silently failing */
/* Import font styles */
/* due to licensing, we have the open-source Lato as a fallback when Prelude is
   not available. However,  */
@font-face {
  font-family: "Mochi Light";
  src: local("☺"), url('../lib/mochi/fonts/PreludeWGL/PreludeWGL-Light.woff') format("woff"), url('../lib/mochi/fonts/PreludeWGL/PreludeWGL-Light.ttf') format("truetype"), url('../lib/mochi/fonts/lato-light.woff') format("woff"), url('../lib/mochi/fonts/lato-light.ttf') format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Mochi Medium";
  src: local("☺"), url('../lib/mochi/fonts/PreludeWGL/PreludeWGL-Medium.woff') format("woff"), url('../lib/mochi/fonts/PreludeWGL/PreludeWGL-Medium.ttf') format("truetype"), url('../lib/mochi/fonts/lato-regular.woff') format("woff"), url('../lib/mochi/fonts/lato-regular.ttf') format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Mochi Medium";
  src: local("☺"), url('../lib/mochi/fonts/PreludeWGL/PreludeWGL-MediumItalic.woff') format("woff"), url('../lib/mochi/fonts/PreludeWGL/PreludeWGL-MediumItalic.ttf') format("truetype"), url('../lib/mochi/fonts/lato-italic.woff') format("woff"), url('../lib/mochi/fonts/lato-italic.ttf') format("truetype");
  font-style: italic;
}
@font-face {
  font-family: "Mochi Bold Italic";
  src: local("☺"), url('../lib/mochi/fonts/PreludeWGL/PreludeWGL-BoldItalic.woff') format("woff"), url('../lib/mochi/fonts/PreludeWGL/PreludeWGL-BoldItalic.ttf') format("truetype"), url('../lib/mochi/fonts/lato-bolditalic.woff') format("woff"), url('../lib/mochi/fonts/lato-bolditalic.ttf') format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Mochi Condensed Med";
  src: local("☺"), url('../lib/mochi/fonts/PreludeCondensed-Medium.woff') format("woff"), url('../lib/mochi/fonts/PreludeCondensed-Medium.ttf') format("truetype"), url('../lib/mochi/fonts/lato-regular.woff') format("woff"), url('../lib/mochi/fonts/lato-regular.ttf') format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Mochi Med Oblique";
  src: local("☺"), url('../lib/mochi/fonts/Prelude-MediumOblique.woff') format("woff"), url('../lib/mochi/fonts/Prelude-MediumOblique.ttf') format("truetype"), url('../lib/mochi/fonts/lato-italic.woff') format("woff"), url('../lib/mochi/fonts/lato-italic.ttf') format("truetype");
  font-weight: normal;
  font-style: oblique;
}
@font-face {
  font-family: "Mochi Bold";
  src: local("☺"), url('../lib/mochi/fonts/Prelude-Bold.woff') format("woff"), url('../lib/mochi/fonts/Prelude-bold.ttf') format("truetype"), url('../lib/mochi/fonts/lato-bold.woff') format("woff"), url('../lib/mochi/fonts/lato-bold.ttf') format("truetype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Mochi Bold Oblique";
  src: local("☺"), url('../lib/mochi/fonts/Prelude-BoldOblique.woff') format("woff"), url('../lib/mochi/fonts/Prelude-boldOblique.ttf') format("truetype"), url('../lib/mochi/fonts/lato-bolditalic.woff') format("woff"), url('../lib/mochi/fonts/lato-bolditalic.ttf') format("truetype");
  font-weight: bold;
  font-style: oblique;
}
/* Prevent browser's default focus treatment (at least in Chrome) */
:focus {
  outline: none;
}
.mochi {
  color: #333333;
  font-family: "Mochi Bold Oblique";
  font-size: 20px;
  cursor: default;
  background-color: #f5f5f5;
  box-shadow: inset 0 0 169px rgba(0, 0, 0, 0.3);
  /* remove automatic tap highlight color */

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* prevent IE from inheriting line-height for these elements */
.mochi button,
.mochi label,
.mochi input {
  line-height: normal;
}
.mochi-selected {
  background-color: #c4e3fe;
}
/* style that removes transition effects from elements */
.mochi-no-animate {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}
.mochi-item {
  font-family: "Mochi Med Oblique";
  font-size: 14px;
  color: #323232;
  font-style: oblique;
}
.mochi-toolbar-inline > * {
  display: inline-block;
  vertical-align: middle;
  margin: 4px 6px 5px;
  box-sizing: border-box;
}
/* LESS pre-calculations */
/* Individual Widget CSS */
/* Badge.css */
.mochi-badge {
  padding: 8px 0 8px 0;
  min-width: 40px;
  width: auto;
  text-align: center;
  vertical-align: middle;
}
.mochi-badge-inner {
  font-family: "Mochi Bold Italic";
  font-size: 12pt;
  height: 24px;
  line-height: 24px;
  min-width: 24px;
  width: auto;
  text-align: center;
  vertical-align: middle;
}
.mochi-badge-inner.oval {
  -webkit-border-radius: 8px;
  /* Safari, Chrome */

  -moz-border-radius: 8px;
  /* Firefox */

  border-radius: 8px;
  /* CSS3 */

  padding-left: 8px;
  padding-right: 8px;
}
.mochi-badge-inner.round {
  -webkit-border-radius: 16px;
  /* Safari, Chrome */

  -moz-border-radius: 16px;
  /* Firefox */

  border-radius: 16px;
  /* CSS3 */

  padding: 0px;
}
/* Button.css */
.mochi-button {
  position: relative;
  border-width: 0px;
  margin: 0px;
  padding: 0px;
  background-color: transparent;
  white-space: nowrap;
}
.mochi-button:focus {
  outline: none;
}
.mochi-button::-moz-focus-inner {
  border: 0px;
}
.mochi-button-bar {
  position: absolute;
  top: 35px;
  left: 0px;
  height: 1px;
  width: 0px;
  background-color: #69cdff;
}
.mochi-button > .mochi-button-bar {
  background-color: transparent;
  -webkit-transition: background-color 0.2s linear;
  -moz-transition: background-color 0.2s linear;
  -o-transition: background-color 0.2s linear;
  -ms-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
}
.mochi-button:active:hover:not([disabled]) > .mochi-button-bar {
  background-color: #69cdff;
}
.mochi-button.active > .mochi-button-bar {
  background-color: #69cdff;
}
.mochi-button.disabled {
  opacity: 0.4;
}
.mochi-button-warning > .mochi-button-base {
  color: #ff4a4a;
}
.mochi-button:active:hover:not([disabled]).mochi-button-warning > .mochi-button-bar {
  background-color: #ff4a4a;
}
.mochi-button.active.mochi-button-warning > .mochi-button-bar {
  background-color: #ff4a4a;
}
.mochi-button > .mochi-button-base {
  margin: 0px 6px;
  padding: 0px;
  height: 40px;
  line-height: 40px;
  vertical-align: middle;
}
.mochi-view-select-button > .mochi-button-base {
  height: 34px;
  line-height: 34px;
  vertical-align: middle;
}
.mochi-button-base {
  display: inline-block;
  font-family: "Mochi Bold Oblique";
  font-size: 14px;
  color: #323232;
  font-style: oblique;
  font-weight: bold;
  border-width: 0px;
  background-color: transparent;
  letter-spacing: normal;
  margin: 2px;
  padding: 1px 0px;
  white-space: nowrap;
  overflow: hidden;
  height: 28px;
  -webkit-transition: letter-spacing 0.1s ease-in-out;
  -moz-transition: letter-spacing 0.1s ease-in-out;
  -o-transition: letter-spacing 0.1s ease-in-out;
  -ms-transition: letter-spacing 0.1s ease-in-out;
  transition: letter-spacing 0.1s ease-in-out;
}
/* ButtonDecorator.css */
.mochi-button-decorator {
  font-family: "Mochi Bold";
  font-size: 30px;
  color: #4b4b4b;
  font-weight: bold;
  display: inline-block;
  vertical-align: top;
}
.mochi-button-decorator-bookened {
  vertical-align: top;
  margin: 0px;
  padding: 0px;
}
.mochi-button > .mochi-button-decorator-left {
  padding: 0px 0px 0px 4px;
  /* Iffy method - prevents flickering in Chrome */

  /*
	-webkit-transition: padding 0.1s ease-in-out;
	-moz-transition: padding 0.1s ease-in-out;
	-o-transition: padding 0.1s ease-in-out;
	-ms-transition: padding 0.1s ease-in-out;
	transition: padding 0.1s ease-in-out;
	*/

  /* Preferred method */

  -webkit-transition: -webkit-transform 0.1s ease-in-out;
  -moz-transition: -moz-transform 0.1s ease-in-out;
  -o-transition: -o-transform 0.1s ease-in-out;
  -ms-transition: -ms-transform 0.1s ease-in-out;
  transition: transform 0.1s ease-in-out;
}
.mochi-button:active:hover:not([disabled]) > .mochi-button-decorator-left {
  -webkit-transform: translateX(-4px);
  -moz-transform: translateX(-4px);
  -o-transform: translateX(-4px);
  -ms-transform: translateX(-4px);
  transform: translateX(-4px);
}
.mochi-button > .mochi-button-decorator-right {
  padding: 0px 4px 0px 0px;
  /* Iffy method - prevents flickering in Chrome */

  /*
	-webkit-transition: padding 0.1s ease-in-out;
	-moz-transition: padding 0.1s ease-in-out;
	-o-transition: padding 0.1s ease-in-out;
	-ms-transition: padding 0.1s ease-in-out;
	transition: padding 0.1s ease-in-out;
	*/

  /* Preferred method */

  -webkit-transition: -webkit-transform 0.1s ease-in-out;
  -moz-transition: -moz-transform 0.1s ease-in-out;
  -o-transition: -o-transform 0.1s ease-in-out;
  -ms-transition: -ms-transform 0.1s ease-in-out;
  transition: transform 0.1s ease-in-out;
}
.mochi-button:active:hover:not([disabled]) > .mochi-button-decorator-right {
  -webkit-transform: translateX(4px);
  -moz-transform: translateX(4px);
  -o-transform: translateX(4px);
  -ms-transform: translateX(4px);
  transform: translateX(4px);
}
/* Icon.css & IconButton.css */
.mochi-icon {
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: 0 0px;
}
.mochi-icon-button-item {
  display: inline-block;
  margin: 2px;
  padding: 1px 0px;
  width: 34px;
  height: 34px;
  border-width: 0px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center center;
}
.mochi-icon-button-item:active:hover:not([disabled]) > .mochi-icon {
  background-position: 0 -24px;
}
.mochi-icon-button-item.disabled {
  opacity: 0.4;
}
.mochi-icon-button {
  position: relative;
  border-width: 0px;
  margin: 0px;
  padding: 0px;
  height: 40px;
  width: 40px;
  background-color: transparent;
}
.mochi-icon-button > .mochi-button-bar {
  background-color: transparent;
  -webkit-transition: background-color 0.2s linear;
  -moz-transition: background-color 0.2s linear;
  -o-transition: background-color 0.2s linear;
  -ms-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
}
.mochi-icon-button:active:hover:not([disabled]) > .mochi-button-bar {
  background-color: #69cdff;
}
.mochi-icon-button.active > .mochi-button-bar {
  background-color: #69cdff;
}
.mochi-icon-button.disabled {
  opacity: 0.4;
}
.mochi-icon-button-bar {
  top: 38px;
}
/* ViewSelector */
.mochi-view-select-button {
  position: relative;
  margin: 0px;
  padding: 0px;
}
.mochi-view-select-button > .mochi-button-base:active:hover:not([disabled]) {
  letter-spacing: 2px;
}
.mochi-view-select-button > .mochi-button-base[disabled] {
  opacity: 0.4;
}
/* RadioButton.css */
.mochi-radio-button {
  cursor: pointer;
  height: 22px;
  width: 22px;
  margin: 0px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 13px;
  border: 2px solid #646464;
}
.mochi-radio-button-animate {
  -webkit-transition: background-color 0.1s linear;
  -moz-transition: background-color 0.1s linear;
  -o-transition: background-color 0.1s linear;
  transition: background-color 0.1s linear;
}
.mochi-radio-button.disabled {
  border-color: #a2a2a2;
}
/* Checkbox.css */
.mochi-checkbox {
  cursor: pointer;
  height: 22px;
  width: 22px;
  margin: 0px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 13px;
  border: 2px solid #646464;
}
.mochi-checkbox[checked] {
  background: url('../lib/mochi/images/checkbox.png') no-repeat;
  padding: 2px;
  border-width: 0px;
}
.mochi-checkbox-animate {
  -webkit-transition: background-color 0.1s linear;
  -moz-transition: background-color 0.1s linear;
  -o-transition: background-color 0.1s linear;
  transition: background-color 0.1s linear;
}
.mochi-checkbox.disabled {
  opacity: 0.4;
}
/* Input.css */
.mochi-input-decorator > input {
  /* reset */

  margin: 0px;
  padding: 0px;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: transparent;
  box-shadow: none;
  /* FIXME: hack for styling reset on Android */

  /* -webkit-appearance: caret;*/

  font-size: 14px;
  font-family: "Mochi Medium";
  color: #4b4b4b;
  font-style: italic;
}
.mochi-input-decorator.mochi-focused > input {
  cursor: text;
}
.mochi-input-decorator.mochi-disabled > input {
  cursor: default;
}
.mochi-input-decorator > input::-webkit-input-placeholder {
  color: #7d7d7d;
}
.mochi-input-decorator > input:-moz-placeholder {
  color: #7d7d7d;
}
/* IE10 */
.mochi-input-decorator > input:-ms-input-placeholder {
  color: #7d7d7d;
}
.mochi-input-animate {
  -webkit-transition: border-color 0.1s linear;
  -moz-transition: border-color 0.1s linear;
  -o-transition: border-color 0.1s linear;
  transition: border-color 0.1s linear;
}
/* InputDecorator.css */
.mochi-input-decorator {
  padding: 1px 8px 5px 8px;
  border-radius: 16px;
  border: 1px solid;
  border-color: #a2a2a2;
  background-color: white;
  margin: 0;
}
.mochi-input-decorator.mochi-focused {
  border-color: #69cdff;
}
.mochi-input-decorator.mochi-disabled {
  /* FIXME: needed to color a disabled input placeholder. */

  /*-webkit-text-fill-color: #888;*/

  opacity: 0.4;
}
/* RichText.css */
.mochi-input-decorator > .mochi-richtext {
  margin: 0px;
  padding: 0px;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: transparent;
  box-shadow: none;
  /* FIXME: hack for styling reset on Android */

  /* -webkit-appearance: caret;*/

  font-size: 14px;
  font-family: "Mochi Medium";
  color: #4b4b4b;
  font-style: italic;
}
.mochi-input-decorator.mochi-focused > .mochi-richtext {
  cursor: text;
}
.mochi-input-decorator.mochi-disabled > .mochi-richtext {
  cursor: default;
}
/* Pasting rich text adds <p> tag with a margin-top value of 16px */
.mochi-richtext > p {
  margin-top: 0px;
}
/* ProgressBar.css */
.mochi-progress-bar {
  height: 1px;
  min-width: 128px;
  background-color: #a2a2a2;
}
.mochi-progress-bar-bar {
  height: 100%;
  background-color: #69cdff;
}
/* ProgressText.css */
.mochi-progress-text {
  margin: 24px 16px 0px;
  font-size: 12px;
  color: #a2a2a2;
  font-family: "Mochi Med Oblique";
  font-style: oblique;
}
.mochi-progress-text-box {
  position: relative;
  height: 24px;
  overflow: hidden;
}
.mochi-progress-text-underwear {
  position: absolute;
  display: inline-block;
  color: #a2a2a2;
  line-height: 12px;
}
.mochi-progress-text-outerwear {
  position: absolute;
  display: inline-block;
  color: #69cdff;
  line-height: 12px;
  overflow: hidden;
  white-space: nowrap;
}
/* Slider.css */
.mochi-slider {
  position: relative;
  margin: 10px 20px;
}
.mochi-slider-taparea {
  position: absolute;
  top: -16px;
  height: 32px;
  width: 100%;
}
.mochi-slider-knob {
  position: relative;
  height: 16px;
  width: 16px;
  border-radius: 8px;
  margin: -8px -9px;
  background-color: #69cdff;
}
.mochi-slider-knob.active,
.mochi-slider-knob:active:hover {
  height: 36px;
  width: 36px;
  border-radius: 18px;
  margin: -18px -20px;
}
.mochi-slider-popup {
  position: absolute;
  display: block;
  z-index: 20;
  left: 0px;
  top: 0px;
  width: 62px;
  height: 37px;
  padding-left: 4px;
}
.mochi-slider-popup-label {
  position: absolute;
  top: 1px;
  width: 60px;
  height: 32px;
  white-space: nowrap;
  font-family: "Mochi Medium";
  color: #fff;
  text-align: center;
  line-height: 32px;
  vertical-align: middle;
  font-size: 14px;
}
.mochi-slider-popup.above {
  top: -56px;
}
/* below is commented out pending HI approval */
/*
.mochi-slider-popup.below {
	top: 25px;
}
*/
/* Spinner.css */
.mochi-spinner {
  width: 52px;
  height: 52px;
  display: inline-block;
  background: url('../lib/mochi/images/spinner-dark.gif') no-repeat 0 0;
}
.mochi-spinner.mochi-light {
  background: url('../lib/mochi/images/spinner-light.gif') no-repeat 0 0;
}
.mochi-spinner.mochi-large {
  width: 100%;
  background: url('../lib/mochi/images/spinner-large-dark.gif') no-repeat 0 0;
}
.mochi-spinner.mochi-large.mochi-light {
  width: 100%;
  background: url('../lib/mochi/images/spinner-large-light.gif') no-repeat 0 0;
}
/* TextArea.css */
.mochi-input-decorator > textarea {
  margin: 10px 0px 6px;
  padding: 0;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: transparent;
  box-shadow: none;
  /* Remove scrollbars and resize handle */

  resize: none;
  overflow: auto;
  /* FIXME: hack for styling reset on Android */

  /* -webkit-appearance: caret;*/

  font-size: 14px;
  font-family: "Mochi Medium";
  color: #4b4b4b;
  font-style: italic;
}
.mochi-input-decorator.mochi-focused > textarea {
  cursor: text;
}
.mochi-input-decorator.mochi-disabled > textarea {
  cursor: default;
}
.mochi-textarea {
  /* need >=50px for scrollbar to be usable on mac */

  min-height: 50px;
}
textarea::-webkit-scrollbar {
  width: 4px;
}
textarea::-webkit-scrollbar-track-piece {
  margin-top: 4px;
  margin-bottom: 0px;
  background-color: #fff;
  -webkit-border-radius: 10px;
}
textarea::-webkit-scrollbar-thumb:vertical {
  height: 10px;
  background-color: #7d7d7d;
  -webkit-border-radius: 10px;
}
/* ToggleButton.css */
.mochi-toggle-button {
  display: inline-block;
  height: 24px;
  line-height: 24px;
  min-width: 48px;
  vertical-align: middle;
  border-radius: 12px;
  background-size: auto 100%;
  color: white;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
}
.mochi-toggle-button-knob {
  position: relative;
  width: 20px;
  height: 20px;
  margin: 2px;
  border-radius: 10px;
  background-color: white;
  left: 0px;
  overflow: hidden;
}
.mochi-toggle-button.disabled {
  opacity: 0.4;
  filter: alpha(opacity=40);
}
.mochi-toggle-animate {
  -webkit-transition: background-color 0.1s linear;
  -moz-transition: background-color 0.1s linear;
  -o-transition: background-color 0.1s linear;
  transition: background-color 0.1s linear;
}
/* Header.css */
.mochi-header {
  height: 64px;
  padding: 0px 32px;
  white-space: nowrap;
}
.mochi-header-content {
  font-family: "Mochi Light";
  font-size: 36px;
  line-height: 32px;
  color: #4b4b4b;
  padding-top: 30px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  vertical-align: text-bottom;
}
.mochi-header-controls {
  display: inline-block;
  vertical-align: bottom;
  padding-top: 2px;
}
.mochi-header-controls-first {
  padding-left: 56px;
}
.mochi-header-controls > * {
  display: inline-block;
  white-space: nowrap;
}
/* Subheader.css */
.mochi-subheader {
  height: 56px;
  padding: 0px 32px;
  white-space: nowrap;
}
.mochi-subheader-content {
  font-family: "Mochi Medium";
  font-size: 18px;
  font-style: italic;
  color: #323232;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  /* 56px height */

  line-height: 26px;
  padding-top: 30px;
}
/* Collapsable.css */
.mochi-collapsable-header {
  font-family: "Mochi Medium";
  font-size: 18px;
  font-weight: bold;
  font-style: italic;
  color: #323232;
  padding: 0 32px 0 32px;
}
.mochi-collapsable-item {
  font-family: "Mochi Medium";
  font-size: 14px;
  font-weight: bold;
  font-style: italic;
  color: #4b4b4b;
  padding: 0 0 48px 32px;
}
.mochi-collapsable-footer {
  height: 16px;
  border-top: 0px transparent;
  border-bottom: 1px solid #CCCCCC;
  border-radius: 32px;
  background-color: #F5F5F5;
}
.mochi-contextual-popup-title {
  font-weight: bold;
  padding: 24px 32px 0px;
}
.mochi-contextual-popup-scroller {
  padding: 24px 32px;
}
.mochi-contextual-popup-action-buttons {
  display: inline-block;
  width: 100%;
  text-align: center;
}
.mochi-contextual-popup,
.mochi.mochi-contextual-popup {
  font-size: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.44);
  border: 2px solid #646464;
  border-radius: 24px;
  padding: 6px;
  color: #4b4b4b;
  background-color: #ffffff;
  min-width: 150px;
  margin-top: 2px;
}
/*setup the nub*/
.mochi-contextual-popup::after {
  content: '';
  position: absolute;
}
/*for popups above activator*/
.mochi-contextual-popup.vertical.above {
  top: auto;
  margin-top: -10px;
  bottom: 100%;
  margin-bottom: 10px;
}
/*for popups below activator*/
.mochi-contextual-popup.vertical.below {
  margin-top: 20px;
}
/*for popups on the left of the activator*/
.mochi-contextual-popup.right.horizontal {
  margin-left: -11px;
}
/*for popups on the right of the activator*/
.mochi-contextual-popup.left.horizontal {
  margin-left: 10px;
}
/****nub positioning for vertical popups****/
/*horizontally centered nub*/
.mochi-contextual-popup.vertical::after {
  content: '';
  position: absolute;
  top: -20px;
  left: 34%;
  width: 71px;
  height: 20px;
  background: transparent url('../lib/mochi/images/contextual-popup-nubs/up.png') no-repeat;
}
/*nub near horizontal left*/
.mochi-contextual-popup.vertical.right::after {
  left: 0%;
  margin-left: 20px;
}
/*nub near horizontal right*/
.mochi-contextual-popup.vertical.left::after {
  left: 100%;
  margin-left: -90px;
}
/*downward facing nub*/
.mochi-contextual-popup.vertical.above::after {
  top: 100%;
  width: 71px;
  height: 20px;
  background: transparent url('../lib/mochi/images/contextual-popup-nubs/down.png') no-repeat;
}
.mochi-contextual-popup.vertical.below.right::after {
  top: 0%;
  margin-top: -20px;
  width: 71px;
  height: 20px;
  background: transparent url('../lib/mochi/images/contextual-popup-nubs/up.png') no-repeat;
}
.mochi-contextual-popup.vertical.below.left::after {
  top: 0%;
  margin-top: -20px;
  width: 71px;
  height: 20px;
  background: transparent url('../lib/mochi/images/contextual-popup-nubs/up.png') no-repeat;
}
/****nub positioning for left/right popups****/
/*vertically centered nub for popups on left of activator*/
.mochi-contextual-popup.right::after {
  left: 100%;
  top: 35%;
  width: 20px;
  height: 71px;
  background: transparent url('../lib/mochi/images/contextual-popup-nubs/right.png') no-repeat;
}
/*nub near vertical top for popups on left of activator*/
.mochi-contextual-popup.right.high::after {
  top: 25px;
}
/*nub near vertical bottom for popups on left of activator*/
.mochi-contextual-popup.right.low::after {
  top: 100%;
  margin-top: -100px;
}
/*vertically centered nub for popups on right of activator*/
.mochi-contextual-popup.left::after {
  left: 0%;
  width: 20px;
  height: 71px;
  margin-left: -20px;
  top: 35%;
  background: transparent url('../lib/mochi/images/contextual-popup-nubs/left.png') no-repeat;
}
/*nub near vertical top for popups on right of activator*/
.mochi-contextual-popup.left.high::after {
  top: 25px;
}
/*nub near vertical bottom for popups on right of activator*/
.mochi-contextual-popup.left.low::after {
  top: 100%;
  margin-top: -100px;
}
/*********************corners********************/
/*vertical top corners*/
/*for popups on the left of the activator*/
.mochi-contextual-popup.vertical.right.corner {
  margin-left: 0px;
}
/*for popups on the right of the activator*/
.mochi-contextual-popup.vertical.left.corner {
  margin-left: 0px;
}
.mochi-contextual-popup.vertical.below.left.corner {
  border-top-right-radius: 0px;
}
.mochi-contextual-popup.vertical.below.right.corner {
  border-top-left-radius: 0px;
}
.mochi-contextual-popup.vertical.below.left.corner::after {
  top: 0%;
  left: 100%;
  margin-top: -14px;
  margin-left: -30px;
  width: 71px;
  height: 20px;
  background: transparent url('../lib/mochi/images/contextual-popup-nubs/top-right-corner-up.png') no-repeat;
}
.mochi-contextual-popup.vertical.below.right.corner::after {
  top: 0%;
  left: 0%;
  width: 71px;
  height: 20px;
  margin-left: -2px;
  margin-top: -14px;
  background: transparent url('../lib/mochi/images/contextual-popup-nubs/top-left-corner-up.png') no-repeat;
}
/*vertical bottom corners*/
.mochi-contextual-popup.left.above.corner {
  border-bottom-right-radius: 0px;
}
.mochi-contextual-popup.right.above.corner {
  border-bottom-left-radius: 0px;
}
.mochi-contextual-popup.vertical.left.above.corner::after {
  top: 100%;
  margin-left: -30px;
  width: 71px;
  height: 20px;
  background: transparent url('../lib/mochi/images/contextual-popup-nubs/bottom-right-corner-down.png') no-repeat;
}
.mochi-contextual-popup.vertical.right.above.corner::after {
  top: 100%;
  left: 0%;
  margin-left: -2px;
  background: transparent url('../lib/mochi/images/contextual-popup-nubs/bottom-left-corner-down.png') no-repeat;
}
/*horizontal bottom corners*/
.mochi-contextual-popup.left.low.corner {
  border-bottom-left-radius: 0px;
}
.mochi-contextual-popup.right.low.corner {
  border-bottom-right-radius: 0px;
}
.mochi-contextual-popup.left.low.corner::after {
  top: 100%;
  left: 0%;
  margin-top: -30px;
  margin-left: -14px;
  background: transparent url('../lib/mochi/images/contextual-popup-nubs/bottom-left-corner-left.png') no-repeat;
}
.mochi-contextual-popup.right.low.corner::after {
  top: 100%;
  left: 100%;
  margin-top: -30px;
  background: transparent url('../lib/mochi/images/contextual-popup-nubs/bottom-right-corner-right.png') no-repeat;
}
/*horizontal top corners*/
.mochi-contextual-popup.left.high.corner {
  border-top-left-radius: 0px;
}
.mochi-contextual-popup.right.high.corner {
  border-top-right-radius: 0px;
}
.mochi-contextual-popup.left.high.corner::after {
  top: 0%;
  left: 0%;
  margin-top: -2px;
  margin-left: -14px;
  background: transparent url('../lib/mochi/images/contextual-popup-nubs/top-left-corner-left.png') no-repeat;
}
.mochi-contextual-popup.right.high.corner::after {
  top: 0%;
  left: 100%;
  margin-top: -2px;
  background: transparent url('../lib/mochi/images/contextual-popup-nubs/top-right-corner-right.png') no-repeat;
}
/* ContextualPopupDecorator.css */
.mochi-contextual-popup-decorator {
  position: relative;
}
/* List.css */
.mochi-list-scroll-fade {
  position: absolute;
  text-align: center;
  display: inline-block;
  height: 4px;
  width: 100%;
}
.mochi-list-scroll-fade.top {
  top: 0;
}
.mochi-list-scroll-fade.bottom {
  bottom: 0;
}
.mochi-list-scroll-fade-row {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  height: 1px;
}
.mochi-list-scroll-fade-row.row-1 {
  background-image: -webkit-gradient(linear, 0 0, 100% 100%, from(rgba(255, 255, 255, 0)), color-stop(0.5, #c5c5c5), to(rgba(255, 255, 255, 0)));
  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), #c5c5c5, rgba(255, 255, 255, 0));
  background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), #c5c5c5, rgba(255, 255, 255, 0));
  background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0), #c5c5c5, rgba(255, 255, 255, 0));
  background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0), #c5c5c5, rgba(255, 255, 255, 0));
  background-image: linear-gradient(left, rgba(255, 255, 255, 0), #c5c5c5, rgba(255, 255, 255, 0));
  width: 100%;
}
.mochi-list-scroll-fade-row.row-2 {
  background-image: -webkit-gradient(linear, 0 0, 100% 100%, from(rgba(255, 255, 255, 0)), color-stop(0.5, #d5d5d5), to(rgba(255, 255, 255, 0)));
  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), #d5d5d5, rgba(255, 255, 255, 0));
  background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), #d5d5d5, rgba(255, 255, 255, 0));
  background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0), #d5d5d5, rgba(255, 255, 255, 0));
  background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0), #d5d5d5, rgba(255, 255, 255, 0));
  background-image: linear-gradient(left, rgba(255, 255, 255, 0), #d5d5d5, rgba(255, 255, 255, 0));
  width: 95%;
}
.mochi-list-scroll-fade-row.row-3 {
  background-image: -webkit-gradient(linear, 0 0, 100% 100%, from(rgba(255, 255, 255, 0)), color-stop(0.5, #e5e5e5), to(rgba(255, 255, 255, 0)));
  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), #e5e5e5, rgba(255, 255, 255, 0));
  background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), #e5e5e5, rgba(255, 255, 255, 0));
  background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0), #e5e5e5, rgba(255, 255, 255, 0));
  background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0), #e5e5e5, rgba(255, 255, 255, 0));
  background-image: linear-gradient(left, rgba(255, 255, 255, 0), #e5e5e5, rgba(255, 255, 255, 0));
  width: 85%;
}
.mochi-list-scroll-fade-row.row-4 {
  background-image: -webkit-gradient(linear, 0 0, 100% 100%, from(rgba(255, 255, 255, 0)), color-stop(0.5, #f5f5f5), to(rgba(255, 255, 255, 0)));
  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), #f5f5f5, rgba(255, 255, 255, 0));
  background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), #f5f5f5, rgba(255, 255, 255, 0));
  background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0), #f5f5f5, rgba(255, 255, 255, 0));
  background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0), #f5f5f5, rgba(255, 255, 255, 0));
  background-image: linear-gradient(left, rgba(255, 255, 255, 0), #f5f5f5, rgba(255, 255, 255, 0));
  width: 65%;
}
/* ListHeader.css */
.mochi-list-header {
  font-family: "Mochi Medium";
  font-size: 18pt;
  font-weight: bold;
  font-style: italic;
  color: #323232;
  padding: 0 32px 0 32px;
}
/* ListHeader.css */
.mochi-list-header {
  font-family: "Mochi Medium";
  font-size: 18px;
  font-weight: bold;
  font-style: italic;
  color: #323232;
  padding: 0 32px 0 32px;
}
/* ListItem.css */
.mochi-list-item {
  font-family: "Mochi Medium";
  font-size: 14px;
  font-weight: bold;
  font-style: italic;
  color: #4b4b4b;
  padding: 0 0 48px 32px;
}
.mochi-highlight {
  background-image: -webkit-gradient(linear, 0 0, 100% 100%, from(rgba(255, 255, 255, 0)), color-stop(0.5, #f5f5f5), to(rgba(255, 255, 255, 0)));
  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), #f5f5f5, rgba(255, 255, 255, 0));
  background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), #f5f5f5, rgba(255, 255, 255, 0));
  background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0), #f5f5f5, rgba(255, 255, 255, 0));
  background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0), #f5f5f5, rgba(255, 255, 255, 0));
  background-image: linear-gradient(left, rgba(255, 255, 255, 0), #f5f5f5, rgba(255, 255, 255, 0));
}
.mochi-highlight-border {
  position: absolute;
  height: 4px;
  margin: 0 112px;
  line-height: 4px;
}
.mochi-highlight-border:before,
.mochi-highlight-border:after {
  content: ' ';
  width: 112px;
  height: 4px;
  position: absolute;
  background-repeat: no-repeat;
}
.mochi-highlight-border.top {
  background: url('../lib/mochi/images/list/SmallSelectedItem/SmallSelectedListItem_TopMiddle.png') repeat-x;
}
.mochi-highlight-border.top:before {
  left: -112px;
  background-image: url('../lib/mochi/images/list/SmallSelectedItem/SmallSelectedListItem_TopLeftFade.png');
}
.mochi-highlight-border.top:after {
  right: -112px;
  background-image: url('../lib/mochi/images/list/SmallSelectedItem/SmallSelectedListItem_TopRightFade.png');
}
.mochi-highlight-border.bottom {
  background: url('../lib/mochi/images/list/SmallSelectedItem/SmallSelectedListItem_BottomMiddle.png') repeat-x;
}
.mochi-highlight-border.bottom:before {
  left: -112px;
  background-image: url('../lib/mochi/images/list/SmallSelectedItem/SmallSelectedListItem_BottomLeftFade.png');
}
.mochi-highlight-border.bottom:after {
  right: -112px;
  background-image: url('../lib/mochi/images/list/SmallSelectedItem/SmallSelectedListItem_BottomRightFade.png');
}
/* wide lists, ie width >= 640px */
.mochi-highlight-border.large {
  position: absolute;
  height: 4px;
  margin: 0 320px;
  line-height: 4px;
}
.mochi-highlight-border.large:before,
.mochi-highlight-border.large:after {
  content: ' ';
  width: 320px;
  height: 4px;
  position: absolute;
  background-repeat: no-repeat;
}
.mochi-highlight-border.large.top {
  background: url('../lib/mochi/images/list/LargeSelectedItem/LargeSelectedListItem_TopMiddle.png') repeat-x;
}
.mochi-highlight-border.top.large:before {
  left: -320px;
  background-image: url('../lib/mochi/images/list/LargeSelectedItem/LargeSelectedListItem_TopLeftFade.png');
}
.mochi-highlight-border.top.large:after {
  right: -320px;
  background-image: url('../lib/mochi/images/list/LargeSelectedItem/LargeSelectedListItem_TopRightFade.png');
}
.mochi-highlight-border.bottom.large {
  background: url('../lib/mochi/images/list/LargeSelectedItem/LargeSelectedListItem_BottomMiddle.png') repeat-x;
}
.mochi-highlight-border.bottom.large:before {
  left: -320px;
  background-image: url('../lib/mochi/images/list/LargeSelectedItem/LargeSelectedListItem_BottomLeftFade.png');
}
.mochi-highlight-border.bottom.large:after {
  right: -320px;
  background-image: url('../lib/mochi/images/list/LargeSelectedItem/LargeSelectedListItem_BottomRightFade.png');
}
/* Panels.css */
.mochi-panels > * {
  /* 320px width, plus the 45px overlap */

  /* May need to modify this */

  width: 365px;
  padding-right: 45px;
  background-color: #f5f5f5;
  /* box-shadow: inset 0 0 169px rgba(0, 0, 0, 0.3); */

  border-left: 1px solid #ccc;
  border-top-left-radius: 45px;
}
.mochi-base-panel > *:first-child {
  border-top-left-radius: 0px;
  padding-right: 0px;
}
/*
	Put anything you reference with "url()" in ../assets/
	This way, you can minify your application, and just remove the "source" folder for production
*/
.mochi-gridlist {
  background: #ccc;
  font-family: "Mochi Light";
}
.mochi-gridlist-imageitem {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.mochi-gridlist-imageitem.selected {
  background: orange;
  padding: 3px;
  /*Offset the right and bottom padding by adding negative top and left margin*/

  margin-left: -3px;
  margin-top: -3px;
}
.mochi-gridlist-imageitem img {
  width: 100%;
  height: 100%;
}
.mochi-gridlist-imageitem .caption {
  font-family: "Mochi Light";
  font-weight: bold;
  text-align: center;
  font-size: 10pt;
  text-transform: uppercase;
  z-index: 10;
  padding-top: 10px;
  color: #555;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 30px;
  overflow: hidden;
  bottom: 30px;
  position: relative;
  color: #fff;
}


/* lib\moonstone\css\moonstone-dark.less */

/* Moonstone colors defined here */
/* Moonstone Dark Theme */
/*toggle */
/* Disabled Opacity */
/* ---------------------------------------*/
/* Moonstone default parameters defined here */
/* App */
/* ---------------------------------------*/
/* Icon Font */
/* ---------------------------------------*/
/* Font Sizes */
/* Other Font Properties */
/* Body text line heights must be speified in px, since moon.ExpandableText requires precise line measurement */
/* Images */
/* ---------------------------------------*/
/* Icon Sizes */
/* ---------------------------------------*/
/* Spotlight */
/* ---------------------------------------*/
/* Button */
/* ---------------------------------------*/
/* Header */
/* ---------------------------------------*/
/* Input */
/* ---------------------------------------*/
/* Pickers */
/* ---------------------------------------*/
/* Expandable Pickers */
/* ---------------------------------------*/
/* Expandable Text */
/* ---------------------------------------*/
/* Slider Knob */
/* ---------------------------------------*/
/* Items */
/* ---------------------------------------*/
/* Divider */
/* Breadcrumb */
/* ---------------------------------------*/
/* Spinner */
/* ---------------------------------------*/
/* ToggleSwitch */
/* ---------------------------------------*/
/* Tooltip */
/* ---------------------------------------*/
/* IntegerPicker */
/* ---------------------------------------*/
/* Grid Dimensions */
/* ---------------------------------------*/
/* ObjectActionDecorator */
/* ---------------------------------------*/
/* Video Player */
/* ---------------------------------------*/
/* Caret */
/* ---------------------------------------*/
/* ContextualPopupButton */
/* ---------------------------------------*/
/* Panel */
/* ----------------------------------------*/
/* Moonstone rules defined here */
/* Import font styles */
/* ----- SYSTEM FONT NAMES ------ */
/* ----- MISO ------ */
@font-face {
  font-family: "Moonstone Miso";
  src: local("LG Display-Light");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Moonstone Miso";
  src: local("Moon Miso Medium"), url('../lib/moonstone/fonts/miso/miso-regular.ttf') format("truetype"), url('../lib/moonstone/fonts/miso/miso-regular.woff') format("woff");
  font-weight: normal;
  font-style: normal;
  unicode-range: U+0D, U+20-7E, U+A1-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+192, U+2C6, U+2DC, U+3C6, U+2013-2014, U+2018-201A, U+201C, U+201D, U+201E, U+2020-2022, U+2026, U+2030, U+2039, U+203A, U+20AC, U+2122;
}
@font-face {
  font-family: "Moonstone Miso Bold";
  src: local("LG Display-Regular");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Moonstone Miso Bold";
  src: local("Moon Miso Bold"), url('../lib/moonstone/fonts/miso/miso-bold.ttf') format("truetype"), url('../lib/moonstone/fonts/miso/miso-bold.woff') format("woff");
  font-weight: normal;
  font-style: normal;
  unicode-range: U+0D, U+20-7E, U+A1-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+192, U+2C6, U+2DC, U+3C6, U+2013-2014, U+2018-201A, U+201C, U+201D, U+201E, U+2020-2022, U+2026, U+2030, U+2039, U+203A, U+20AC, U+2122;
}
@font-face {
  font-family: "Moonstone Miso Light";
  src: local("LG Display-Light");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Moonstone Miso Light";
  src: local("Moon Miso Light"), url('../lib/moonstone/fonts/miso/miso-light.ttf') format("truetype"), url('../lib/moonstone/fonts/miso/miso-light.woff') format("woff");
  font-weight: normal;
  font-style: normal;
  unicode-range: U+0D, U+20-7E, U+A1-FF, U+131, U+141-142, U+152-153, U+160-161, U+178, U+17D-17E, U+192, U+2C6, U+2DC, U+3C6, U+2013-2014, U+2018-201A, U+201C, U+201D, U+201E, U+2020-2022, U+2026, U+2030, U+2039, U+203A, U+20AC, U+2122;
}
/* ----- Museo Sans ------ */
@font-face {
  font-family: "MuseoSans";
  src: local("LG Display-Light");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "MuseoSans";
  src: local("Moon Museo Sans Medium"), url('../lib/moonstone/fonts/MuseoSans/Museo SansDemiBold.ttf') format("truetype"), url('../lib/moonstone/fonts/MuseoSans/Museo SansDemiBold.woff') format("woff");
  font-weight: normal;
  font-style: normal;
  unicode-range: U+20-7E, U+A0-17F, U+192, U+218-21B, U+2C6-2C7, U+2D8-2DD, U+3BC, U+1E9E, U+2009, U+2013-2014, U+2018-201A, U+201C, U+201D, U+201E, U+2020-2022, U+2026, U+2030, U+2039, U+203A, U+2044, U+2070, U+2074-2079, U+2080-2089, U+20AC, U+2122, U+2212, U+221E, U+2248, U+2260, U+2264-2265, U+FB00-FB04;
}
@font-face {
  font-family: "MuseoSans 100";
  src: local("LG Display-Light");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "MuseoSans 100";
  src: local("Moon Museo Sans Thin"), url('../lib/moonstone/fonts/MuseoSans/Museo SansLight.ttf') format("truetype"), url('../lib/moonstone/fonts/MuseoSans/Museo SansLight.woff') format("woff");
  font-weight: normal;
  font-style: normal;
  unicode-range: U+20-7E, U+A0-17F, U+192, U+218-21B, U+2C6-2C7, U+2D8-2DD, U+3BC, U+1E9E, U+2009, U+2013-2014, U+2018-201A, U+201C, U+201D, U+201E, U+2020-2022, U+2026, U+2030, U+2039, U+203A, U+2044, U+2070, U+2074-2079, U+2080-2089, U+20AC, U+2122, U+2212, U+221E, U+2248, U+2260, U+2264-2265, U+FB00-FB04;
}
@font-face {
  font-family: "MuseoSans 300";
  src: local("LG Display-Light");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "MuseoSans 300";
  src: local("Moon Museo Sans Light"), url('../lib/moonstone/fonts/MuseoSans/Museo SansNormal.ttf') format("truetype"), url('../lib/moonstone/fonts/MuseoSans/Museo SansNormal.woff') format("woff");
  font-weight: normal;
  font-style: normal;
  unicode-range: U+20-7E, U+A0-17F, U+192, U+218-21B, U+2C6-2C7, U+2D8-2DD, U+3BC, U+1E9E, U+2009, U+2013-2014, U+2018-201A, U+201C, U+201D, U+201E, U+2020-2022, U+2026, U+2030, U+2039, U+203A, U+2044, U+2070, U+2074-2079, U+2080-2089, U+20AC, U+2122, U+2212, U+221E, U+2248, U+2260, U+2264-2265, U+FB00-FB04;
}
@font-face {
  font-family: "MuseoSans 500";
  src: local("LG Display-Light");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "MuseoSans 500";
  src: local("Moon Museo Sans Medium"), url('../lib/moonstone/fonts/MuseoSans/Museo SansDemiBold.ttf') format("truetype"), url('../lib/moonstone/fonts/MuseoSans/Museo SansDemiBold.woff') format("woff");
  font-weight: normal;
  font-style: normal;
  unicode-range: U+20-7E, U+A0-17F, U+192, U+218-21B, U+2C6-2C7, U+2D8-2DD, U+3BC, U+1E9E, U+2009, U+2013-2014, U+2018-201A, U+201C, U+201D, U+201E, U+2020-2022, U+2026, U+2030, U+2039, U+203A, U+2044, U+2070, U+2074-2079, U+2080-2089, U+20AC, U+2122, U+2212, U+221E, U+2248, U+2260, U+2264-2265, U+FB00-FB04;
}
@font-face {
  font-family: "MuseoSans 500 Italic";
  src: local("LG Display-Light");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "MuseoSans 500 Italic";
  src: local("Moon Museo Medium Italic"), url('../lib/moonstone/fonts/MuseoSans/Museo SansDemiBoldItalic.ttf') format("truetype"), url('../lib/moonstone/fonts/MuseoSans/Museo SansDemiBoldItalic.woff') format("woff");
  font-weight: normal;
  font-style: normal;
  unicode-range: U+20-7E, U+A0-17F, U+192, U+218-21B, U+2C6-2C7, U+2D8-2DD, U+3BC, U+1E9E, U+2009, U+2013-2014, U+2018-201A, U+201C, U+201D, U+201E, U+2020-2022, U+2026, U+2030, U+2039, U+203A, U+2044, U+2070, U+2074-2079, U+2080-2089, U+20AC, U+2122, U+2212, U+221E, U+2248, U+2260, U+2264-2265, U+FB00-FB04;
}
@font-face {
  font-family: "MuseoSans 700";
  src: local("LG Display-Regular");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "MuseoSans 700";
  src: local("Moon Museo Sans Bold"), url('../lib/moonstone/fonts/MuseoSans/Museo SansBold.ttf') format("truetype"), url('../lib/moonstone/fonts/MuseoSans/Museo SansBold.woff') format("woff");
  font-weight: normal;
  font-style: normal;
  unicode-range: U+20-7E, U+A0-17F, U+192, U+218-21B, U+2C6-2C7, U+2D8-2DD, U+3BC, U+1E9E, U+2009, U+2013-2014, U+2018-201A, U+201C, U+201D, U+201E, U+2020-2022, U+2026, U+2030, U+2039, U+203A, U+2044, U+2070, U+2074-2079, U+2080-2089, U+20AC, U+2122, U+2212, U+221E, U+2248, U+2260, U+2264-2265, U+FB00-FB04;
}
@font-face {
  font-family: "MuseoSans 700 Italic";
  src: local("LG Display-Regular");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "MuseoSans 700 Italic";
  src: local("Moon Museo Sans Bold Italic"), url('../lib/moonstone/fonts/MuseoSans/Museo SansBoldItalic.ttf') format("truetype"), url('../lib/moonstone/fonts/MuseoSans/Museo SansBoldItalic.woff') format("woff");
  font-weight: normal;
  font-style: normal;
  unicode-range: U+20-7E, U+A0-17F, U+192, U+218-21B, U+2C6-2C7, U+2D8-2DD, U+3BC, U+1E9E, U+2009, U+2013-2014, U+2018-201A, U+201C, U+201D, U+201E, U+2020-2022, U+2026, U+2030, U+2039, U+203A, U+2044, U+2070, U+2074-2079, U+2080-2089, U+20AC, U+2122, U+2212, U+221E, U+2248, U+2260, U+2264-2265, U+FB00-FB04;
}
@font-face {
  font-family: "MuseoSans 900";
  src: local("LG Display-Regular");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "MuseoSans 900";
  src: local("Moon Museo Sans Black"), url('../lib/moonstone/fonts/MuseoSans/Museo SansBlack.ttf') format("truetype"), url('../lib/moonstone/fonts/MuseoSans/Museo SansBlack.woff') format("woff");
  font-weight: normal;
  font-style: normal;
  unicode-range: U+20-7E, U+A0-17F, U+192, U+218-21B, U+2C6-2C7, U+2D8-2DD, U+3BC, U+1E9E, U+2009, U+2013-2014, U+2018-201A, U+201C, U+201D, U+201E, U+2020-2022, U+2026, U+2030, U+2039, U+203A, U+2044, U+2070, U+2074-2079, U+2080-2089, U+20AC, U+2122, U+2212, U+221E, U+2248, U+2260, U+2264-2265, U+FB00-FB04;
}
@font-face {
  font-family: "MuseoSans 900 Italic";
  src: local("LG Display-Regular");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "MuseoSans 900 Italic";
  src: local("Moon Museo Sans Black Italic"), url('../lib/moonstone/fonts/MuseoSans/Museo SansBlackItalic.ttf') format("truetype"), url('../lib/moonstone/fonts/MuseoSans/Museo SansBlackItalic.woff') format("woff");
  font-weight: normal;
  font-style: normal;
  unicode-range: U+20-7E, U+A0-17F, U+192, U+218-21B, U+2C6-2C7, U+2D8-2DD, U+3BC, U+1E9E, U+2009, U+2013-2014, U+2018-201A, U+201C, U+201D, U+201E, U+2020-2022, U+2026, U+2030, U+2039, U+203A, U+2044, U+2070, U+2074-2079, U+2080-2089, U+20AC, U+2122, U+2212, U+221E, U+2248, U+2260, U+2264-2265, U+FB00-FB04;
}
/* ----- Moonstone ------ */
@font-face {
  font-family: "Moonstone Icons";
  src: local("Moonstone "), url('../lib/moonstone/fonts/moonstone.ttf') format("truetype"), url('../lib/moonstone/fonts/moonstone.woff') format("woff");
  font-weight: normal;
  font-style: normal;
}
/* ----- LG Display ------ */
@font-face {
  font-family: "Moonstone LG Display";
  src: local("LG Display-Light");
  font-weight: normal;
  font-style: normal;/* We want "LG Display" to map to the bold variant, since that was originally the only option */
}
@font-face {
  font-family: "Moonstone LG Display Bold";
  src: local("LG Display-Regular");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Moonstone LG Display Light";
  src: local("LG Display-Light");
  font-weight: normal;
  font-style: normal;
}
/* Import grid classes/mixins */
/* ------- Horizontal Dimensioning (columns) ------- */
.moon-1h {
  width: 60px;
}
.moon-2h {
  width: 140px;
}
.moon-3h {
  width: 220px;
}
.moon-4h {
  width: 300px;
}
.moon-5h {
  width: 380px;
}
.moon-6h {
  width: 460px;
}
.moon-7h {
  width: 540px;
}
.moon-8h {
  width: 620px;
}
.moon-9h {
  width: 700px;
}
.moon-10h {
  width: 780px;
}
.moon-11h {
  width: 860px;
}
.moon-12h {
  width: 940px;
}
.moon-13h {
  width: 1020px;
}
.moon-14h {
  width: 1100px;
}
.moon-15h {
  width: 1180px;
}
.moon-16h {
  width: 1260px;
}
.moon-17h {
  width: 1340px;
}
.moon-18h {
  width: 1420px;
}
.moon-19h {
  width: 1500px;
}
.moon-20h {
  width: 1580px;
}
/* ------- Vertical Dimensioning (columns) ------- */
.moon-1v {
  height: 40px;
}
.moon-2v {
  height: 80px;
}
.moon-3v {
  height: 120px;
}
.moon-4v {
  height: 160px;
}
.moon-5v {
  height: 200px;
}
.moon-6v {
  height: 240px;
}
.moon-7v {
  height: 280px;
}
.moon-8v {
  height: 320px;
}
.moon-9v {
  height: 360px;
}
.moon-10v {
  height: 400px;
}
.moon-11v {
  height: 440px;
}
.moon-12v {
  height: 480px;
}
.moon-13v {
  height: 520px;
}
.moon-14v {
  height: 560px;
}
.moon-15v {
  height: 600px;
}
.moon-16v {
  height: 640px;
}
.moon-17v {
  height: 680px;
}
.moon-18v {
  height: 720px;
}
.moon-19v {
  height: 760px;
}
.moon-20v {
  height: 800px;
}
.moon-21v {
  height: 840px;
}
.moon-22v {
  height: 880px;
}
.moon-23v {
  height: 920px;
}
.moon-24v {
  height: 960px;
}
.moon-25v {
  height: 1000px;
}
.moon-26v {
  height: 1040px;
}
/* Prevent browser's default focus treatment (at least in Chrome) */
:focus {
  outline: none;
}
/* Common classes applicable to multiple controls */
.moon {
  font-family: "MuseoSans 700";
  font-size: 30px;
  letter-spacing: 0;
  padding: 20px;
  color: #a6a6a6;
  background-color: #000000;
}
.enyo-locale-right-to-left .moon {
  direction: rtl;
}
.moon-divider-border {
  border-bottom: 2px solid #a6a6a6;
}
.moon-neutral-divider-border {
  border-bottom: 2px solid #ffffff;
}
/* Text definitions */
.moon-header-font {
  font-family: "Moonstone Miso";
}
.moon-superscript {
  font-size: 24px;
  vertical-align: top;
  margin: 0px 0px 0px 2px;
  padding: 0px;
}
.moon-pre-text {
  font-size: 24px;
  vertical-align: top;
  height: 48px;
  line-height: 24px;
  margin: 12px 2px 8px 0px;
  padding: 0px;
}
.moon-large-text {
  font-size: 48px;
  vertical-align: top;
  height: 48px;
  margin: 0px;
  padding: 0px;
}
.moon-header-text {
  font-family: "Moonstone Miso";
  font-size: 126px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: normal;
  -webkit-font-kerning: normal;
}
.moon-sub-header-text {
  font-family: "MuseoSans 700";
  font-size: 30px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  color: #a6a6a6;
}
.moon-super-header-text {
  font-family: "Moonstone Miso";
  font-size: 32px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: normal;
  -webkit-font-kerning: normal;
}
.moon-popup-header-text {
  font-family: "Moonstone Miso";
  font-size: 73px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: normal;
  -webkit-font-kerning: normal;
}
.moon-divider-text {
  font-family: "MuseoSans 700 Italic";
  font-size: 22px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  color: #a6a6a6;
}
.moon-body-text {
  font-family: "MuseoSans 300";
  font-size: 26px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  color: #a6a6a6;
  line-height: 32px;
}
.moon-body-text a:link {
  color: #cf0652;
  text-decoration: none;
}
.moon-body-text a:visited {
  color: #cf0652;
  text-decoration: none;
}
.moon-body-text a:hover {
  color: #cf0652;
  text-decoration: none;
}
.moon-body-text a:active {
  color: #cf0652;
  text-decoration: none;
}
.moon-body-large-text {
  font-size: 28px;
  line-height: 40px;
}
.moon-bold-text {
  font-family: "MuseoSans 900";
  font-size: 26px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  color: #a6a6a6;
  line-height: 32px;
}
.moon-bold-text a:link {
  color: #cf0652;
  text-decoration: none;
}
.moon-bold-text a:visited {
  color: #cf0652;
  text-decoration: none;
}
.moon-bold-text a:hover {
  color: #cf0652;
  text-decoration: none;
}
.moon-bold-text a:active {
  color: #cf0652;
  text-decoration: none;
}
.moon-body-text-spacing {
  margin: 0 10px 40px 10px;
}
.moon-large-button-text {
  font-family: "Moonstone Miso Bold";
  font-size: 33px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: normal;
  -webkit-font-kerning: normal;
}
.moon-small-button-text {
  font-family: "Moonstone Miso Bold";
  font-size: 27px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: normal;
  -webkit-font-kerning: normal;
}
.moon-icon-text {
  font-family: "Moonstone Icons";
  font-size: 72px;
  color: #ffffff;
}
.enyo-locale-non-latin {
  /* All/Medium weighted classes */

  /* Light weighted classes */

  /* Bold weighted classes */

}
.enyo-locale-non-latin .moon,
.enyo-locale-non-latin .moon input,
.enyo-locale-non-latin .moon textarea,
.enyo-locale-non-latin .moon button,
.enyo-locale-non-latin .moon-superscript,
.enyo-locale-non-latin .moon-pre-text,
.enyo-locale-non-latin .moon-large-text,
.enyo-locale-non-latin .moon-header-text,
.enyo-locale-non-latin .moon-header-font,
.enyo-locale-non-latin .moon-popup-header-text,
.enyo-locale-non-latin .moon-sub-header-text,
.enyo-locale-non-latin .moon-super-header-text,
.enyo-locale-non-latin .moon-divider-text,
.enyo-locale-non-latin .moon-body-text,
.enyo-locale-non-latin .moon-bold-text,
.enyo-locale-non-latin .moon-large-button-text,
.enyo-locale-non-latin .moon-small-button-text {
  font-family: "Moonstone LG Display";
}
.enyo-locale-non-latin .moon-body-text,
.enyo-locale-non-latin .moon-superscript,
.enyo-locale-non-latin .moon-pre-text {
  font-family: "Moonstone LG Display Light";
}
.enyo-locale-non-latin .moon-sub-header-text,
.enyo-locale-non-latin .moon-divider-text,
.enyo-locale-non-latin .moon-bold-text,
.enyo-locale-non-latin .moon-large-button-text,
.enyo-locale-non-latin .moon-small-button-text {
  font-family: "Moonstone LG Display Bold";
}
.enyo-locale-non-latin .moon {
  font-size: 30px;
}
.enyo-locale-non-latin .moon-superscript {
  font-size: 24px;
}
.enyo-locale-non-latin .moon-pre-text {
  font-size: 24px;
}
.enyo-locale-non-latin .moon-large-text {
  font-size: 48px;
}
.enyo-locale-non-latin .moon-header-text {
  font-size: 114px;
  line-height: 1.5em;
}
.enyo-locale-non-latin .moon-popup-header-text {
  font-size: 65px;
}
.enyo-locale-non-latin .moon-sub-header-text {
  font-size: 30px;
}
.enyo-locale-non-latin .moon-super-header-text {
  font-size: 32px;
}
.enyo-locale-non-latin .moon-divider-text {
  font-size: 28px;
  font-style: normal;
}
.enyo-locale-non-latin .moon-body-text {
  font-size: 26px;
  line-height: 32px;
}
.enyo-locale-non-latin .moon-body-large-text {
  font-size: 28px;
  line-height: 40px;
}
.enyo-locale-non-latin .moon-bold-text {
  font-size: 26px;
  line-height: 32px;
}
.enyo-locale-non-latin .moon-large-button-text {
  font-size: 36px;
  font-weight: normal;
}
.enyo-locale-non-latin .moon-small-button-text {
  font-size: 27px;
  font-weight: normal;
}
.border-box {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
/* LESS pre-calculations */
/* Individual widget CSS */
/* Icon.css */
.moon-icon,
.moon-icon-toggle {
  width: 45px;
  height: 45px;
  background-position: center -15px;
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: middle;
  margin: 9px 14px;
  font-family: "Moonstone", "Moonstone Icons";
  font-size: 90px;
  line-height: 45px;
  text-align: center;
  position: relative;
  color: #a6a6a6;
}
.moon-icon.small,
.moon-icon-toggle.small {
  background-position: center -9px;
  width: 32px;
  height: 32px;
  font-size: 64px;
  line-height: 32px;
}
.moon-icon.small > .small-icon-tap-area,
.moon-icon-toggle.small > .small-icon-tap-area {
  position: absolute;
  top: -14px;
  bottom: -14px;
  left: -14px;
  right: -14px;
}
.spotlight .moon-icon {
  color: #ffffff;
}
.disabled .moon-icon,
.moon-icon.disabled {
  opacity: 0.6;
  filter: alpha(opacity=60);
}
/* moonstone-icons.css */
.moon-icon-arrowlargeup:after {
  content: "\0F0002";
}
.moon-icon-arrowlargedown:after {
  content: "\0F0001";
}
.moon-icon-arrowlargeleft:after {
  content: "\0F0003";
}
.moon-icon-arrowlargeright:after {
  content: "\0F0004";
}
.moon-icon-arrowsmallup:after {
  content: "\0F0005";
}
.moon-icon-arrowsmalldown:after {
  content: "\0F0006";
}
.moon-icon-arrowsmallleft:after {
  content: "\0F0007";
}
.moon-icon-arrowsmallright:after {
  content: "\0F0008";
}
.moon-icon-closex:after {
  content: "\0F0009";
}
.moon-icon-check:after {
  content: "\0F000A";
}
.moon-icon-search:after {
  content: "\0F000B";
}
.moon-icon-drawer:after {
  content: "\0F0000";
}
.moon-icon-fullscreen:after {
  content: "\0F0012";
}
.moon-icon-circle:after {
  content: "\0F0013";
}
.moon-icon-stop:after {
  content: "\0F0014";
}
.moon-icon-play:after {
  content: "\0F0015";
}
.moon-icon-pause:after {
  content: "\0F0016";
}
.moon-icon-forward:after {
  content: "\0F0017";
}
.moon-icon-backward:after {
  content: "\0F0018";
}
.moon-icon-skipforward:after {
  content: "\0F0019";
}
.moon-icon-skipbackward:after {
  content: "\0F001A";
}
.moon-icon-pauseforward:after {
  content: "\0F001B";
}
.moon-icon-pausebackward:after {
  content: "\0F001C";
}
.moon-icon-pausejumpforward:after {
  content: "\0F001D";
}
.moon-icon-pausejumpbackward:after {
  content: "\0F001E";
}
.moon-icon-jumpforward:after {
  content: "\0F001F";
}
.moon-icon-jumpbackward:after {
  content: "\0F0020";
}
.moon-icon-arrowextend:after {
  content: "\0F0021";
}
.moon-icon-arrowshrink:after {
  content: "\0F0022";
}
.moon-icon-exitfullscreen:after {
  content: "\0F0011";
}
/* IconButton.css */
.moon-icon-button {
  color: #a6a6a6;
  box-sizing: border-box;
  width: 85px;
  height: 85px;
  border-radius: 42.5px;
  background-color: #404040;
  background-size: 75px 150px;
  border: 5px solid transparent;
  background-position: center 0;
  margin: 0 10px;
  line-height: 75px;
}
.moon-icon-button.small {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background-size: 50px 100px;
  background-position: center 0;
  line-height: 50px;
}
.moon-icon-button.hover:hover:not(.disabled),
.moon-icon-button.spotlight {
  color: #ffffff;
  background-color: #cf0652;
  background-position: center -75px;
}
.moon-icon-button.hover:hover:not(.disabled).small,
.moon-icon-button.spotlight.small {
  background-position: center -50px;
}
.moon-icon-button.active:not(.spotlight),
.moon-icon-button:active,
.moon-icon-button.pressed,
.moon-icon-button.pressed.spotlight,
.moon-icon-button.hover:hover:not(.disabled).active,
.moon-icon-button.hover:hover:not(.disabled):active {
  color: #a6a6a6;
  background-color: #404040;
  background-position: center 0;
  border-color: #cf0652;
}
.moon-icon-button.disabled,
.moon-icon-button.disabled:active {
  border-color: transparent;
}
.moon-icon-button.no-background:not(.spotlight),
.moon-icon-button.no-background.active:not(.spotlight),
.moon-icon-button.no-background:active,
.moon-icon-button.no-background.pressed,
.moon-icon-button.no-background.pressed.spotlight,
.moon-icon-button.no-background.active.hover:hover,
.moon-icon-button.no-background:active.hover:hover {
  background-color: transparent;
}
.moon-marquee {
  width: auto;
  text-overflow: ellipsis;
  white-space: pre !important;
  overflow: hidden;
  text-align: left;
}
.moon-marquee span {
  pointer-events: none !important;
}
.moon-marquee .moon-marquee-text-wrapper {
  width: 100%;
  pointer-events: none;
  width: auto;
  overflow: hidden;
}
.moon-marquee .moon-marquee-text {
  pointer-events: none;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  white-space: pre !important;
  transition-property: transform;
  -moz-transition-property: transform;
  -webkit-transition-property: -webkit-transform;
  -o-transition-property: transform;
  transition-timing-function: linear;
  -webkit-transition-timing-function: linear;
}
.moon-marquee .animate-marquee {
  text-overflow: clip;
  overflow: visible;
}
.enyo-locale-right-to-left .moon-marquee {
  text-align: right;
}
.moon-simple-picker {
  display: inline-block;
  max-width: 350px;
  box-sizing: border-box;
  padding: 0 70px;
  position: relative;
  height: 60px;
  vertical-align: middle;
}
.moon-simple-picker.block {
  display: block;
}
.moon-simple-picker-button {
  position: absolute;
  top: 0;
  padding: 0;
  margin: 0;
}
.moon-simple-picker-client-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}
.moon-simple-picker-client {
  white-space: nowrap;
}
.moon-simple-picker-client .moon-marquee {
  text-align: center;
}
.moon-simple-picker-client.animated {
  -webkit-transition: -webkit-transform ease-out 0.3s;
  -moz-transition: -moz-transform ease-out 0.3s;
  -o-transition: -o-transform ease-out 0.3s;
  transition: transform ease-out 0.3s;
}
.moon-simple-picker-client > * {
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  width: 100%;
  line-height: 60px;
  height: 60px;
  color: #a6a6a6;
  white-space: nowrap;
  text-align: center;
}
.moon-simple-picker-client.disabled,
.moon-simple-picker-button[disabled] {
  opacity: 0.6;
  filter: alpha(opacity=60);
  background-color: transparent;
}
.moon-simple-picker-button.left {
  left: 0;
  margin-right: 10px;
}
.moon-simple-picker-button.right {
  right: 0;
  margin-left: 10px;
}
.moon-simple-integer-picker {
  white-space: nowrap;
  font-family: "MuseoSans 700";
  font-size: 30px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  color: #a6a6a6;
  position: relative;
  display: table-cell;
  vertical-align: middle;
  height: 60px;
  border-radius: 30px;
}
.enyo-locale-non-latin .moon-simple-integer-picker {
  font-family: "Moonstone LG Display";
  font-family: "Moonstone LG Display Bold";
  font-size: 30px;
}
.moon-simple-integer-picker > * {
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
}
.moon-simple-integer-picker.spotlight {
  background: #cf0652;
}
.moon-simple-integer-picker.spotlight .moon-simple-integer-picker-item {
  color: #ffffff;
}
.moon-simple-integer-picker.spotlight .moon-simple-integer-picker-button {
  color: #ffffff;
}
.moon-simple-integer-picker-button {
  border-radius: 30px;
  border: 0;
  background: inherit;
  padding: 0;
  margin: 0;
  text-align: center;
  vertical-align: middle;
  z-index: 2;
  color: #a6a6a6;
  background-repeat: no-repeat;
  background-position: center 0;
}
.moon-simple-integer-picker-button.moon-icon.small {
  width: 60px;
  height: 100%;
}
.spotlight .moon-simple-integer-picker-button {
  /* Hover while not Pressed state */

}
.spotlight .moon-simple-integer-picker-button.moon-icon {
  color: #ffffff;
}
.spotlight .moon-simple-integer-picker-button.moon-icon-arrowsmallleft:not(.pressed):after {
  content: "\0F0003";
}
.spotlight .moon-simple-integer-picker-button.moon-icon-arrowsmallright:not(.pressed):after {
  content: "\0F0004";
}
.enyo-locale-right-to-left .moon-simple-integer-picker-button {
  /* Default RTL state */

}
.enyo-locale-right-to-left .moon-simple-integer-picker-button.moon-icon-arrowsmallleft:after {
  content: "\0F0008";
}
.enyo-locale-right-to-left .moon-simple-integer-picker-button.moon-icon-arrowsmallright:after {
  content: "\0F0007";
}
.enyo-locale-right-to-left .spotlight .moon-simple-integer-picker-button {
  /* Hover while not Pressed state */

}
.enyo-locale-right-to-left .spotlight .moon-simple-integer-picker-button.moon-icon-arrowsmallleft:not(.pressed):after {
  content: "\0F0004";
}
.enyo-locale-right-to-left .spotlight .moon-simple-integer-picker-button.moon-icon-arrowsmallright:not(.pressed):after {
  content: "\0F0003";
}
.moon-simple-integer-picker-client {
  padding: 0;
  margin: 0;
  border: 0;
  height: 36px;
}
.moon-simple-integer-picker-item {
  font-family: "MuseoSans 700";
  font-size: 30px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  color: #a6a6a6;
  display: table;
  white-space: nowrap;
  text-align: center;
  padding: 0 8px;
  width: auto;
}
.enyo-locale-non-latin .moon-simple-integer-picker-item {
  font-family: "Moonstone LG Display";
  font-family: "Moonstone LG Display Bold";
  font-size: 30px;
}
.moon-simple-integer-picker.disabled,
.moon-simple-integer-picker-button[disabled] {
  cursor: default;
  opacity: 0.6;
  filter: alpha(opacity=60);
}
/* Button shadow overlay */
.moon-scroll-picker-overlay-container-left {
  z-index: 1;
  position: relative;
  height: 100%;
}
.moon-scroll-picker-overlay-left {
  position: absolute;
  width: 30px;
  height: 100%;
  border-width: 30px;
  border-radius: 30px;
  border-left-width: 30px;
  border-left-style: solid;
  border-left-color: rgba(0, 0, 0, 0.13);
}
.enyo-locale-right-to-left .moon-scroll-picker-overlay-left {
  border-right-width: 30px;
  border-right-style: solid;
  border-left-width: 0px;
  border-left-style: none;
  border-right-color: rgba(0, 0, 0, 0.13);
  right: 0px;
}
.moon-scroll-picker-overlay-left-border {
  position: absolute;
  width: 30px;
  height: 100%;
  border-width: 30px;
  border-radius: 30px;
  border-left-width: 30px;
  border-left-style: solid;
  border-left-color: #cf0652;
  left: 6px;
}
.enyo-locale-right-to-left .moon-scroll-picker-overlay-left-border {
  border-right-width: 30px;
  border-right-style: solid;
  border-left-width: 0px;
  border-left-style: none;
  border-right-color: #cf0652;
  left: 0px;
  right: 6px;
}
.moon-scroll-picker-overlay-container-right {
  z-index: 1;
  position: relative;
  height: 100%;
}
.moon-scroll-picker-overlay-right {
  position: absolute;
  width: 30px;
  height: 100%;
  border-width: 30px;
  border-radius: 30px;
  border-right-width: 30px;
  border-right-style: solid;
  border-right-color: rgba(0, 0, 0, 0.13);
  right: 0px;
}
.enyo-locale-right-to-left .moon-scroll-picker-overlay-right {
  border-left-width: 30px;
  border-left-style: solid;
  border-right-width: 0px;
  border-right-style: none;
  border-left-color: rgba(0, 0, 0, 0.13);
}
.moon-scroll-picker-overlay-right-border {
  position: absolute;
  width: 30px;
  height: 100%;
  border-width: 30px;
  border-radius: 30px;
  border-right-width: 30px;
  border-right-style: solid;
  border-right-color: #cf0652;
  right: 6px;
}
.enyo-locale-right-to-left .moon-scroll-picker-overlay-right-border {
  border-left-width: 30px;
  border-left-style: solid;
  border-right-width: 0px;
  border-right-style: none;
  border-left-color: #cf0652;
  right: -6px;
}
.spotlight .moon-simple-integer-picker-button {
  background-position: center -50px;
}
/* Checkbox.css */
.moon-checkbox {
  cursor: pointer;
  width: 24px;
  height: 32px;
  text-align: center;
}
.moon-checkbox[checked]:after {
  font-family: "Moonstone Icons";
  font-size: 64px;
  content: "\0F000A";
  color: #a6a6a6;
}
.spotlight .moon-checkbox[checked]:after {
  color: #ffffff;
}
.moon-divider {
  border-bottom: 2px solid #a6a6a6;
  margin: 0px 10px 20px 10px;
  text-transform: capitalize;
  padding-bottom: 3px;
}
.moon-neutral .moon-divider {
  border-bottom: 2px solid #ffffff;
}
.moon-checkbox-item {
  position: relative;
}
.moon-checkbox-item .moon-checkbox {
  position: absolute;
  top: 10px;
  right: 10px;
}
.moon-checkbox-item .moon-checkbox-item-label-wrapper {
  height: 1.2em;
  margin-right: 32px;
}
.moon-checkbox-item.left-handed .moon-checkbox {
  left: 10px;
}
.moon-checkbox-item.left-handed .moon-checkbox-item-label-wrapper {
  margin-right: 0px;
  margin-left: 32px;
}
.moon-neutral .moon-checkbox[checked]:after {
  color: #ffffff;
}
/* Special treatment inside of ExpandablePicker (checkbox nudged up) */
.moon-expandable-picker .moon-checkbox-item .moon-checkbox {
  top: 10px;
}
/* this is a fix for TV only - left-side of letter cut off in list-action item drawer*/
.moon-list-actions-drawer-client .moon-checkbox-item .moon-checkbox-item-label-wrapper {
  padding-left: 2px;
}
/* Right to left */
.enyo-locale-right-to-left .moon-checkbox-item .moon-checkbox {
  left: 10px;
  right: auto;
}
.enyo-locale-right-to-left .moon-checkbox-item .moon-checkbox-item-label-wrapper {
  margin-left: 32px;
  margin-right: 0px;
}
.enyo-locale-right-to-left .moon-checkbox-item.left-handed .moon-checkbox {
  left: auto;
  right: 10px;
}
.enyo-locale-right-to-left .moon-checkbox-item.left-handed .moon-checkbox-item-label-wrapper {
  margin-right: 32px;
  margin-left: 0px;
}
/* ToggleSwitch.css */
.moon-checkbox.moon-toggle-switch {
  border-radius: 16.5px;
  width: 65px;
  height: 33px;
  line-height: 33px;
  background-color: #404040;
  font-family: "Moonstone Icons";
  font-size: 65px;
  overflow: hidden;
  text-align: left;
}
.moon-checkbox.moon-toggle-switch:after {
  color: #a6a6a6;
  content: "\0F0013";
  margin-left: 5px;
}
.moon-checkbox.moon-toggle-switch[checked] {
  background-color: #ffffff;
}
.moon-checkbox.moon-toggle-switch[checked]:after {
  color: #cf0652;
  margin-left: 37px;
}
.moon-checkbox.moon-toggle-switch[disabled] {
  background-color: #404040;
}
.moon-checkbox.moon-toggle-switch[disabled]:after {
  color: #a6a6a6;
}
.moon-checkbox.moon-toggle-switch.animated {
  -webkit-transition: background-color 0.2s;
}
.moon-checkbox.moon-toggle-switch.animated:after {
  -webkit-transition: color 0.2s, margin-left 0.2s;
}
.moon-toggle-item {
  display: block;
  position: relative;
}
.moon-toggle-item .moon-checkbox.moon-toggle-switch {
  top: 11px;
  /* To override top:10px set by .moon-checkbox-item .moon-checkbox so the indicator vertically middle align */

}
.moon-toggle-item .moon-toggle-item-label-wrapper {
  margin-right: 75px;
}
.enyo-locale-right-to-left .moon-toggle-item .moon-toggle-item-label-wrapper {
  margin-left: 75px;
  margin-right: 0px;
}
/* Toggle.css */
.moon-button.moon-toggle-button {
  text-align: center;
  position: relative;
  padding-right: 62px;
}
.moon-button.moon-toggle-button:after {
  position: absolute;
  content: "";
  top: 27.5px;
  right: 22px;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background-color: #4d4d4d;
  border: solid 2px #ffffff;
}
.moon-button.moon-toggle-button[disabled] {
  border: 5px solid transparent;
}
.moon-button.moon-toggle-button[disabled]:after {
  background-color: #252525;
  border: solid 2px #6d6c6c;
}
.moon-button.moon-toggle-button.moon-toggle-button-on {
  border: solid 5px #cf0652;
}
.moon-button.moon-toggle-button.moon-toggle-button-on:after {
  background-color: #cf0652;
  border: solid 2px #ffffff;
}
.moon-button.moon-toggle-button.small {
  padding-right: 60px;
}
.moon-button.moon-toggle-button.small:after {
  top: 15px;
  right: 20px;
}
.enyo-locale-right-to-left .moon-button.moon-toggle-button {
  padding-right: 22px;
  padding-left: 62px;
}
.enyo-locale-right-to-left .moon-button.moon-toggle-button:after {
  left: 22px;
  right: auto;
}
.enyo-locale-right-to-left .moon-button.moon-toggle-button.small {
  padding-right: 20px;
  padding-left: 60px;
}
.enyo-locale-right-to-left .moon-button.moon-toggle-button.small:after {
  left: 20px;
  right: auto;
}
/* Item.css */
.moon-item {
  font-family: "MuseoSans 700";
  font-size: 30px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  color: #a6a6a6;
  border-width: 0 0;
  border-left-color: transparent;
  border-left-style: solid;
  line-height: 1.2em;
  padding: 10px;
  vertical-align: top;
  position: relative;
}
.moon-item.allow-wrap {
  white-space: normal !important;
}
.enyo-locale-non-latin .moon-item {
  font-family: "Moonstone LG Display";
  font-family: "Moonstone LG Display Bold";
  font-size: 30px;
}
.moon-item.disabled {
  cursor: default;
  opacity: 0.6;
  filter: alpha(opacity=60);
}
.moon-item.spotlight {
  background-color: #cf0652;
  color: #ffffff;
}
/* SelectableItem.css */
.moon-selectable-item-indicator {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: #cf0652;
  display: none;
  position: absolute;
  left: 10px;
  top: 17px;
}
.enyo-locale-right-to-left .moon-selectable-item-indicator {
  left: auto;
  right: 10px;
}
.moon-selectable-item.selected .moon-selectable-item-indicator {
  display: inline-block;
}
.moon-selectable-item.spotlight .moon-selectable-item-indicator {
  background-color: #fff;
}
.moon-selectable-item.selected .moon-selectable-item-client {
  padding-left: 32px;
}
.enyo-locale-right-to-left .moon-selectable-item.selected .moon-selectable-item-client {
  padding-left: 0;
  padding-right: 32px;
}
/* Special treatment inside of ExpandablePicker (indented, nudged up) */
.moon-expandable-picker .moon-selectable-item {
  padding-left: 42px;
}
.enyo-locale-right-to-left .moon-expandable-picker .moon-selectable-item {
  padding-left: 10px;
  padding-right: 42px;
}
.moon-expandable-list-item .moon-selectable-item-indicator {
  top: 15px;
}
.moon-expandable-picker .moon-selectable-item-indicator {
  left: 42px;
}
.enyo-locale-right-to-left .moon-expandable-picker .moon-selectable-item-indicator {
  left: auto;
  right: 42px;
}
/* Button */
.moon-button {
  height: 85px;
  line-height: 75px;
  border-radius: 9999px;
  background-color: #404040;
  border: 5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  width: auto;
  min-width: 85px;
  max-width: 302px;
  padding: 0 22px;
  margin: 0 10px;
  color: #a6a6a6;
}
.moon-button > * {
  text-align: center;
}
.moon-neutral .moon-button {
  color: #4b4b4b;
  background-color: #ffffff;
}
.moon-neutral .moon-button * {
  color: #4b4b4b;
}
.moon-neutral .moon-button[disabled] * {
  color: #4d4d4d;
}
.moon-neutral .moon-button.spotlight * {
  color: #ffffff;
}
.moon-button.small {
  height: 60px;
  min-width: 60px;
  line-height: 50px;
  padding: 0 20px;
  position: relative;
  overflow: visible;
}
.moon-button.min-width {
  min-width: 180px;
}
.moon-button.small.min-width {
  min-width: 130px;
}
.moon-button.small > .small-button-tap-area {
  position: absolute;
  top: -14px;
  bottom: -14px;
  left: -14px;
  right: -14px;
}
/* Need 100% width for marquee in button */
.moon-button .moon-marquee {
  width: 100%;
  vertical-align: top;
  text-align: center;
}
/*
	IE8 can't handle these selectors in tandem:
	.moon-button.active, .moon-button:active:not([disabled]) {

	the effect is as if .moon-button.active doesn't exist
*/
.moon-button.active,
.moon-button.pressed,
.moon-button.spotlight.pressed,
.moon-button.spotlight:active,
.moon-button.small.spotlight.pressed {
  border: 5px solid #cf0652;
  background-color: #404040;
  color: #a6a6a6;
}
.moon-button:active:hover:not([disabled]) {
  border: 5px solid #cf0652;
  background-color: #404040;
}
.moon-button.spotlight {
  background-color: #cf0652;
  color: #ffffff;
}
.moon-button[disabled] {
  cursor: default;
  color: #4d4d4d;
  background-color: #262626;
}
.moon-neutral .moon-button.active,
.moon-neutral .moon-button.pressed,
.moon-neutral .moon-button.spotlight.pressed,
.moon-neutral .moon-button.spotlight:active,
.moon-neutral .moon-button.small.spotlight.pressed {
  border: 5px solid #cf0652;
  background-color: #ffffff;
}
.moon-neutral .moon-button.active *,
.moon-neutral .moon-button.pressed *,
.moon-neutral .moon-button.spotlight.pressed *,
.moon-neutral .moon-button.spotlight:active *,
.moon-neutral .moon-button.small.spotlight.pressed * {
  color: #4b4b4b;
}
/* Caption Decorator */
.moon-button-caption-decorator {
  display: inline-block;
  vertical-align: top;
  position: relative;
}
.moon-button-caption-decorator .moon-caption {
  display: inline-block;
}
.moon-caption-client {
  display: inline-block;
}
.moon-caption-client > * {
  display: block;
  margin: auto;
}
/* Caption Decorator - Left/Right Captions */
.moon-button-caption-decorator .moon-caption.left,
.moon-button-caption-decorator .moon-caption.right {
  height: 85px;
  line-height: 85px;
}
.moon-button-caption-decorator .moon-caption.left {
  float: left;
  padding-right: 10px;
  text-align: left;
}
.moon-button-caption-decorator .moon-caption.right {
  float: right;
  padding-left: 10px;
  text-align: right;
}
/* Caption Decorator - Top/Bottom Captions */
.moon-button-caption-decorator .moon-caption.top,
.moon-button-caption-decorator .moon-caption.bottom {
  display: block;
  text-align: center;
}
.moon-button-caption-decorator .moon-caption.top {
  padding-bottom: 4px;
}
.moon-button-caption-decorator .moon-caption.bottom {
  padding-top: 4px;
}
/* Caption Decorator - Show On Focus Captions */
.moon-button-caption-decorator.showOnFocus .moon-caption {
  position: absolute;
  z-index: 2;
  white-space: nowrap;
  float: none;
  padding: 0px;
  margin: 0px;
  display: none;
}
.moon-button-caption-decorator.showOnFocus.spotlight .moon-caption {
  display: block;
}
.moon-button-caption-decorator.showOnFocus .moon-caption.top {
  margin-bottom: 4px;
}
.moon-button-caption-decorator.showOnFocus .moon-caption.right {
  margin-left: 10px;
}
.moon-button-caption-decorator.showOnFocus .moon-caption.bottom {
  margin-top: 4px;
}
.moon-button-caption-decorator.showOnFocus .moon-caption.left {
  margin-right: 10px;
}
/* Radio Item */
.moon-radio-item {
  display: inline-block;
}
.moon-radio-item .moon-selectable-item-client {
  max-width: 250px;
  padding: 0 10px 0 32px;
}
.enyo-locale-right-to-left .moon-radio-item {
  text-align: right;
}
/* Indicator */
.moon-selectable-item-indicator.moon-radio-item-indicator {
  display: inline-block;
  background-color: #fff;
  left: 10px;
  top: 15px;
}
.enyo-locale-right-to-left .moon-selectable-item-indicator.moon-radio-item-indicator {
  left: auto;
  right: 10px;
}
.moon-selectable-item-indicator.moon-radio-item-indicator .moon-radio-item-indicator-center-dot {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  top: 2px;
  left: 2px;
  background-color: #4d4d4d;
}
.moon-selectable-item.selected .moon-selectable-item-indicator.moon-radio-item-indicator .moon-radio-item-indicator-center-dot {
  background-color: #cf0652;
}
.enyo-locale-right-to-left .moon-radio-item .moon-selectable-item-client,
.enyo-locale-right-to-left .moon-radio-item.selected .moon-selectable-item-client {
  padding: 0 32px 0 10px;
}
/* Radio Item */
.moon-radio-item-group {
  position: relative;
  margin: 0 10px;
  padding: 0;
}
.moon-radio-item-group .moon-button {
  font-family: "MuseoSans 700";
  font-size: 30px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  display: inline-block;
  border-width: 0px;
  background-color: transparent;
  letter-spacing: normal;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  line-height: normal;
  color: #a6a6a6;
  margin: 0px 37px 33px 0px;
  padding: 3px 0px 2px 0px;
  text-transform: none;
  min-width: 0px;
}
.enyo-locale-non-latin .moon-radio-item-group .moon-button {
  font-family: "Moonstone LG Display";
  font-family: "Moonstone LG Display Bold";
  font-size: 30px;
}
.moon-radio-item-group .moon-button[disabled] {
  cursor: default;
  color: #4d4d4d;
}
.moon-radio-item-group .moon-button.spotlight,
.moon-radio-item-group .moon-button.spotlight:active {
  border: none;
  color: #cf0652;
}
.enyo-locale-right-to-left .moon-radio-item-group .moon-button.spotlight {
  border-right: 21px solid #cf0652;
  border-left: 0;
}
/* ExpandableListItem Header*/
.moon-expandable-list-item-header {
  margin-bottom: 0px;
  box-sizing: border-box;
  max-width: 100%;
}
.moon-expandable-list-header.moon-expandable-picker-header:after {
  top: 12px;
}
/* Client Items */
.moon-expandable-list-item.open .moon-expandable-list-item-client {
  margin-bottom: 10px;
}
.moon-expandable-list-item-client .moon-item {
  font-family: "MuseoSans 300";
  font-size: 26px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  color: #a6a6a6;
  line-height: 32px;
}
.moon-expandable-list-item-client .moon-item a:link {
  color: #cf0652;
  text-decoration: none;
}
.moon-expandable-list-item-client .moon-item a:visited {
  color: #cf0652;
  text-decoration: none;
}
.moon-expandable-list-item-client .moon-item a:hover {
  color: #cf0652;
  text-decoration: none;
}
.moon-expandable-list-item-client .moon-item a:active {
  color: #cf0652;
  text-decoration: none;
}
.enyo-locale-non-latin .moon-expandable-list-item-client .moon-item {
  font-family: "Moonstone LG Display";
  font-family: "Moonstone LG Display Light";
  font-size: 26px;
  line-height: 32px;
}
.moon-expandable-list-item-client .moon-item.spotlight {
  color: #ffffff;
}
.moon-expandable-list-item-client .moon-item:last-child {
  margin-bottom: 0px;
}
.moon-expandable-list-item-client.indented {
  padding-left: 42px;
}
.enyo-locale-right-to-left .moon-expandable-list-item-client.indented {
  padding-left: 0;
  padding-right: 42px;
}
/* Header Expandable */
.moon-expandable-picker-header {
  margin: 0px;
  display: inline-block;
  padding-right: 42px;
  position: relative;
}
.moon-expandable-picker-header:after {
  position: absolute;
  top: 2px;
  right: 11px;
  font-family: "Moonstone Icons";
  content: "\0F0001";
  font-size: 48px;
  line-height: 32px;
}
.moon-expandable-picker-header.spotlight {
  color: #ffffff;
}
.enyo-locale-right-to-left .moon-expandable-picker-header {
  padding-left: 42px;
  padding-right: 10px;
}
.enyo-locale-right-to-left .moon-expandable-picker-header:after {
  left: 11px;
  right: auto;
}
/* Header Open */
.moon-expandable-list-item.open .moon-expandable-picker-header:after {
  content: "\0F0002";
}
/* Current Value */
.moon-expandable-picker-current-value {
  font-family: "MuseoSans 300";
  font-size: 26px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  line-height: 32px;
  color: #a6a6a6;
  margin: 0px;
}
.moon-expandable-picker-current-value a:link {
  color: #cf0652;
  text-decoration: none;
}
.moon-expandable-picker-current-value a:visited {
  color: #cf0652;
  text-decoration: none;
}
.moon-expandable-picker-current-value a:hover {
  color: #cf0652;
  text-decoration: none;
}
.moon-expandable-picker-current-value a:active {
  color: #cf0652;
  text-decoration: none;
}
.enyo-locale-right-to-left .moon-expandable-picker-current-value {
  padding-left: 0;
}
.moon-expandable-list-item .spotlight .moon-expandable-picker-current-value {
  color: #ffffff;
}
.enyo-locale-non-latin .moon-expandable-picker-current-value {
  font-family: "Moonstone LG Display";
  font-family: "Moonstone LG Display Light";
  font-size: 26px;
  line-height: 32px;
}
/* Help Text */
.moon-expandable-picker-help-text {
  color: #a6a6a6;
}
.moon-header {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  color: #a6a6a6;
  height: 360px;
  border-top: 2px solid #505050;
  border-bottom: 6px solid #404040;
  position: relative;
  max-width: 100%;
  padding: 0 0 10px 0px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: top left;
  margin: 0 10px;
}
.moon-neutral .moon-header {
  border-top: 2px solid #ffffff;
  border-bottom: 6px solid #ffffff;
}
.moon-header.full-bleed {
  padding-left: 20px;
  padding-right: 20px;
  border-top-color: transparent;
  border-bottom-color: transparent;
}
/* Title Above */
.moon-header-title-above.no-border {
  border: none;
}
.moon-header-title-above {
  margin-top: 5px;
  height: 1.2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Main Title */
.moon-header-title-wrapper {
  position: relative;
}
.moon-header-title {
  font-family: "Moonstone Miso";
  font-size: 126px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: normal;
  -webkit-font-kerning: normal;
  line-height: normal;
  height: 155px;
}
.enyo-locale-non-latin .moon-header-title {
  font-family: "Moonstone LG Display";
  font-size: 114px;
  line-height: 1.5em;
}
/* Special override for Japanese font (LG Display_JP) which, as of 07-Feb-2014 
   has a taller baseline. This corrects both Header and InputHeader. 2014-02-24
   Please remove the line-height rule below if this font file is changed. */
.enyo-locale-non-latin.enyo-locale-ja .moon-header-title,
.enyo-locale-non-latin.enyo-locale-ja .moon-input-header .moon-input-header-input-decorator > .moon-input {
  line-height: 1.25em;
}
.moon-header-title .moon-marquee-text {
  white-space: nowrap;
}
/* Title Below */
.moon-header-title-below {
  position: relative;
  font-family: "MuseoSans 700";
  font-size: 30px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  color: #a6a6a6;
  height: 44px;
}
.enyo-locale-non-latin .moon-header-title-below {
  font-family: "Moonstone LG Display";
  font-family: "Moonstone LG Display Bold";
  font-size: 30px;
}
/* Sub Title Below */
.moon-header-sub-title-below {
  position: relative;
  font-family: "MuseoSans 300";
  font-size: 26px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  color: #a6a6a6;
  line-height: 32px;
  height: 44px;
}
.moon-header-sub-title-below a:link {
  color: #cf0652;
  text-decoration: none;
}
.moon-header-sub-title-below a:visited {
  color: #cf0652;
  text-decoration: none;
}
.moon-header-sub-title-below a:hover {
  color: #cf0652;
  text-decoration: none;
}
.moon-header-sub-title-below a:active {
  color: #cf0652;
  text-decoration: none;
}
.enyo-locale-non-latin .moon-header-sub-title-below {
  font-family: "Moonstone LG Display";
  font-family: "Moonstone LG Display Light";
  font-size: 26px;
  line-height: 32px;
}
/* Header Client */
.moon-header-client {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  text-align: right;
  /* fallback in case text-align:end isn't supported */

  text-align: end;
  /* CSS3 for RTL support */

}
.full-bleed .moon-header-client {
  left: 20px;
  right: 20px;
}
.moon-header-client > * {
  text-align: left;
  /* fallback in case text-align:start isn't supported */

  text-align: start;
  /* CSS3 for RTL support */

}
.moon-header-client > .moon-button,
.moon-header-client > .moon-icon {
  text-align: center;
  /* Overrides the text-align property  for button */

}
/* Medium Header */
.moon-header.moon-medium-header {
  height: 240px;
}
.moon-medium-header .moon-header-title-above {
  height: 0;
  opacity: 0;
  margin-top: 0;
}
.moon-medium-header .moon-header-title {
  line-height: normal;
}
.enyo-locale-non-latin .moon-medium-header .moon-header-title {
  line-height: 1.5em;
}
.moon-medium-header .moon-header-title-wrapper {
  padding-left: 0;
  box-sizing: border-box;
  max-height: 155px;
}
.enyo-locale-right-to-left .moon-medium-header .moon-header-title-wrapper {
  padding-right: 0;
}
.moon-medium-header .moon-header-title-below {
  max-height: 40px;
}
.moon-medium-header .moon-header-sub-title-below {
  max-height: 40px;
}
.hidden-title .moon-header-title,
.hidden-title .moon-header-title-below,
.hidden-title .moon-header-sub-title-below {
  opacity: 0;
}
/* Small Header */
.moon-header.moon-small-header {
  height: 112px;
}
.moon-small-header .moon-header-title-above {
  height: 0;
  opacity: 0;
  margin-top: 0;
}
.moon-small-header .moon-header-title {
  line-height: normal;
  font-size: 60px;
  height: 84px;
}
.enyo-locale-non-latin .moon-small-header .moon-header-title {
  line-height: 1.5em;
}
.moon-small-header .moon-header-title-wrapper {
  padding-left: 0;
  padding-top: 26px;
  box-sizing: border-box;
  max-height: 88px;
}
.enyo-locale-right-to-left .moon-small-header .moon-header-title-wrapper {
  padding-right: 0;
}
.moon-small-header .moon-header-title-below {
  height: 0;
  opacity: 0;
  margin-top: 0;
}
.moon-small-header .moon-header-sub-title-below {
  height: 0;
  opacity: 0;
  margin-top: 0;
}
.moon-header-left {
  float: left;
}
.enyo-locale-right-to-left .moon-header-left {
  float: right;
}
/*
	Put anything you reference with "url()" in ../assets/
	This way, you can minify your application, and just remove the "source" folder for production
*/
.moon-gridlist-imageitem {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-clip: padding-box;
  border: 5px solid transparent;
}
.moon-gridlist-imageitem .caption,
.moon-gridlist-imageitem .sub-caption {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.moon-gridlist-imageitem .caption {
  font-family: "MuseoSans 700";
  font-size: 30px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  color: #a6a6a6;
}
.moon-gridlist-imageitem .sub-caption {
  font-family: "MuseoSans 300";
  font-size: 26px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  line-height: 32px;
  color: #a6a6a6;
  line-height: 1.25em;
  height: 1.25em;
  vertical-align: bottom;
}
.moon-gridlist-imageitem .sub-caption a:link {
  color: #cf0652;
  text-decoration: none;
}
.moon-gridlist-imageitem .sub-caption a:visited {
  color: #cf0652;
  text-decoration: none;
}
.moon-gridlist-imageitem .sub-caption a:hover {
  color: #cf0652;
  text-decoration: none;
}
.moon-gridlist-imageitem .sub-caption a:active {
  color: #cf0652;
  text-decoration: none;
}
.moon-gridlist-imageitem.selected {
  border: 5px solid #404040;
  background-color: #404040;
}
.moon-gridlist-imageitem.selected .caption,
.moon-gridlist-imageitem.selected .sub-caption {
  color: #ffffff;
}
.moon-gridlist-imageitem.spotlight {
  border: 5px solid #cf0652;
  background-color: #cf0652;
}
.moon-gridlist-imageitem.spotlight .caption,
.moon-gridlist-imageitem.spotlight .sub-caption {
  color: #ffffff;
}
.moon-gridlist-imageitem.sized-image.use-caption,
.moon-gridlist-imageitem.sized-image.use-subcaption {
  padding-bottom: 40px;
}
.moon-gridlist-imageitem.sized-image > .caption,
.moon-gridlist-imageitem.sized-image > .sub-caption {
  position: absolute;
  bottom: 0;
}
.moon-gridlist-imageitem.sized-image.use-caption.use-subcaption {
  padding-bottom: 80px;
}
.moon-gridlist-imageitem.sized-image.use-caption.use-subcaption > .caption {
  position: absolute;
  bottom: 35px;
}
.enyo-locale-non-latin .moon-gridlist-imageitem .caption {
  font-family: "Moonstone LG Display";
  font-family: "Moonstone LG Display Bold";
  font-size: 30px;
}
.enyo-locale-non-latin .moon-gridlist-imageitem .sub-caption {
  font-family: "Moonstone LG Display";
  font-family: "Moonstone LG Display Light";
  font-size: 26px;
  line-height: 32px;
}
/* Scroller Page Controls */
.moon-icon-button.moon-paging-button {
  position: absolute;
  z-index: 150;
  margin: 0;
}
.moon-icon-button.moon-paging-button.top {
  top: 0px;
}
.moon-icon-button.moon-paging-button.right {
  right: 0px;
}
.moon-icon-button.moon-paging-button.bottom {
  bottom: 0px;
}
.moon-icon-button.moon-paging-button.left {
  left: 0px;
}
.moon-neutral .moon-icon-button.moon-paging-button.disabled {
  color: #ffffff;
}
/* IntegerPicker.css */
.moon-scroll-picker-container {
  display: inline-block;
  position: relative;
  text-align: center;
}
.moon-scroll-picker {
  height: 94px;
  border-top: solid 30px transparent;
  border-bottom: solid 30px transparent;
  border-radius: 45px;
}
.spotlight .moon-scroll-picker {
  background: #cf0652;
  color: #ffffff;
}
.moon-scroll-picker-item {
  white-space: nowrap;
  padding: 0 5px 2px 5px;
  min-width: 50px;
  height: 94px;
  line-height: 94px;
  text-align: center;
  background: transparent;
}
.moon-scroll-picker-overlay-container {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 30px;
  font-family: "Moonstone Icons";
}
.moon-scroll-picker-overlay-container.top {
  top: 0;
}
.moon-scroll-picker-overlay-container.top-image:after {
  content: "\0F0005";
  font-size: 68px;
  line-height: 38px;
}
.moon-scroll-picker-overlay-container.bottom {
  bottom: 0;
}
.moon-scroll-picker-overlay-container.bottom-image:after {
  content: "\0F0006";
  font-size: 68px;
  line-height: 26px;
}
.spotlight .moon-scroll-picker-overlay-container {
  color: #ffffff;
}
.spotlight .moon-scroll-picker-overlay-container.top-image:after {
  content: "\0F0002";
  line-height: 42px;
}
.spotlight .moon-scroll-picker-overlay-container.bottom-image:after {
  content: "\0F0001";
  line-height: 22px;
}
.selected .moon-scroll-picker-overlay {
  position: absolute;
  height: 35px;
  width: 100%;
  background-color: #cf0652;
}
.selected .moon-scroll-picker-overlay.top {
  top: 0;
  border-top: solid 6px rgba(0, 0, 0, 0.2);
  border-radius: 45px 45px 0 0;
}
.selected .moon-scroll-picker-overlay.top:after {
  content: "\0F0005";
  font-size: 68px;
  line-height: 30px;
}
.selected .moon-scroll-picker-overlay.bottom {
  bottom: 0;
  border-bottom: solid 6px rgba(0, 0, 0, 0.2);
  border-radius: 0 0 45px 45px;
}
.selected .moon-scroll-picker-overlay.bottom:after {
  content: "\0F0006";
  font-size: 68px;
  line-height: 42px;
}
.moon-scroll-picker-taparea {
  position: absolute;
  top: -9px;
  right: -9px;
  bottom: -9px;
  left: -9px;
}
/* DatePicker.css */
.moon-date-picker-wrap {
  min-width: 100px;
  text-align: center;
  margin: 10px 0;
  vertical-align: top;
}
.moon-date-picker-wrap.year {
  min-width: 120px;
}
.moon-date-picker-label {
  text-align: center;
  padding: 20px 10px;
  white-space: nowrap;
}
/* Time/date pickers should always be arranged left-to-right according to the order of the formatter */
.moon-date-picker-client {
  direction: ltr;
}
/* Input.css */
.moon-input {
  font-family: "MuseoSans 300";
  font-size: 26px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  color: #a6a6a6;
  line-height: 32px;
  margin: 0px;
  padding: 0px;
  border: none;
  outline: none;
  cursor: pointer;
  background: transparent;
  box-shadow: none;
  color: #4b4b4b;
}
.moon-input a:link {
  color: #cf0652;
  text-decoration: none;
}
.moon-input a:visited {
  color: #cf0652;
  text-decoration: none;
}
.moon-input a:hover {
  color: #cf0652;
  text-decoration: none;
}
.moon-input a:active {
  color: #cf0652;
  text-decoration: none;
}
.moon-input::selection {
  color: #ffffff;
  background-color: #cf0652;
}
.enyo-locale-non-latin .moon-input {
  font-family: "Moonstone LG Display";
  font-family: "Moonstone LG Display Light";
  font-size: 26px;
  line-height: 32px;
}
.enyo-locale-non-latin.enyo-locale-th .moon-input {
  font-size: 24px;
  line-height: 52px;
}
.moon-neutral .moon-input {
  color: #4b4b4b;
}
.moon-input-decorator.moon-focused .moon-input {
  cursor: text;
}
.moon-input-decorator.moon-disabled .moon-input {
  cursor: default;
}
.moon-input-decorator > input::-webkit-input-placeholder {
  color: #868686;
}
.moon-input-decorator > input:-moz-placeholder {
  color: #868686;
}
/* IE10 */
.moon-input-decorator > input:-ms-input-placeholder {
  color: #868686;
}
/* InputDecorator.css */
.moon-input-decorator:not(.moon-input-header-input-decorator) {
  font-family: "MuseoSans 700 Italic";
  font-size: 22px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  color: #a6a6a6;
  margin: 5px;
  padding: 9px 30px;
  border-radius: 34px;
  border: 5px solid transparent;
  background-color: #ffffff;
  box-sizing: border-box;
}
.enyo-locale-non-latin .moon-input-decorator:not(.moon-input-header-input-decorator) {
  padding: 5px 30px 9px;
}
.enyo-locale-non-latin.enyo-locale-th .moon-input-decorator:not(.moon-input-header-input-decorator) {
  padding: 1px 30px;
  height: 60px;
}
.moon-textarea-decorator {
  font-family: "MuseoSans 700 Italic";
  font-size: 22px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  color: #a6a6a6;
  margin: 5px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 5px solid transparent;
  background-color: #ffffff;
  box-sizing: border-box;
}
.enyo-locale-non-latin .moon-input-decorator:not(.moon-input-header-input-decorator),
.enyo-locale-non-latin .moon-textarea-decorator {
  font-family: "Moonstone LG Display";
  font-family: "Moonstone LG Display Bold";
  font-size: 28px;
  font-style: normal;
}
.moon-input-decorator:not(.moon-input-header-input-decorator).spotlight,
.moon-textarea-decorator.spotlight {
  border: 5px solid #cf0652;
}
.moon-input-decorator.moon-disabled,
.moon-textarea-decorator.moon-disabled {
  opacity: 0.6;
}
.moon-input-decorator:not(.moon-input-header-input-decorator).moon-focused,
.moon-textarea-decorator.moon-focused {
  border: 5px solid #a6a6a6;
}
.moon-expandable-input .moon-input-decorator:not(.moon-input-header-input-decorator) {
  margin: 5px 0;
}
/* ProgressBar.css */
.moon-progress-bar {
  position: relative;
  margin: 50px 20px;
  height: 10px;
  background-color: #262626;
  min-width: 128px;
}
.moon-progress-bg-bar {
  height: 100%;
  background-color: #a6a6a6;
  position: absolute;
  top: 0;
}
.moon-progress-bar-bar {
  height: 100%;
  background-color: #ffffff;
  position: absolute;
  top: 0;
}
/* RTL classes */
.moon-progress-bar-rtl .moon-progress-bar-bar {
  float: right;
}
.moon-slider-taparea {
  position: absolute;
  top: -14px;
  height: 32px;
  width: 100%;
}
.moon-slider-knob,
.moon-slider-knob.disabled:active:hover {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  position: absolute;
  height: 60px;
  width: 60px;
  border-radius: 30px;
  margin: -30px;
  background-color: #4d4d4d;
  top: 3px;
}
.moon-slider-knob.active,
.moon-slider-knob.spotselect,
.moon-slider-knob:active:hover {
  height: 86px;
  width: 86px;
  border-radius: 43px;
  margin: -43px;
}
.moon-slider.spotlight > .moon-progress-bar-bar {
  background-color: #cf0652;
}
.moon-slider.spotlight > .moon-slider-knob {
  background-color: #cf0652;
}
.moon-slider.spotlight > .moon-slider-knob.spotselect {
  height: 60px;
  width: 60px;
  border-radius: 30px;
  margin: -30px;
  background-color: #4d4d4d;
  border: 5px solid #cf0652;
}
.moon-slider.disabled {
  cursor: default;
  opacity: 0.6;
  filter: alpha(opacity=60);
}
.moon-progress-bar.moon-slider {
  margin: 60px 45px !important;
}
.moon-slider-popup {
  position: absolute;
  display: block;
  white-space: nowrap;
  z-index: 20;
  left: 50%;
  direction: ltr;
}
.moon-slider-popup.moon-slider-popup-flip-h {
  left: auto;
  right: 50%;
}
.moon-slider-popup-left {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
}
.moon-slider-popup-center {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 0px 0 0 0;
  padding: 0;
  z-index: 21;
}
.enyo-locale-right-to-left .moon-slider-popup-center {
  direction: rtl;
}
.moon-slider-popup-right {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 0;
  padding: 0;
}
.moon-slider-popup-label {
  font-family: "Moonstone Miso Bold";
  font-size: 33px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: normal;
  -webkit-font-kerning: normal;
  white-space: nowrap;
  color: #ffffff;
  text-align: center;
}
.enyo-locale-non-latin .moon-slider-popup-label {
  font-family: "Moonstone LG Display";
  font-family: "Moonstone LG Display Bold";
  font-size: 36px;
  font-weight: normal;
  font-size: 30px;
}
.enyo-locale-non-latin .moon-slider-popup-label {
  font-family: "Moonstone LG Display";
}
.moon-slider-popup-flip-h {
  transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
}
.moon-slider-focus {
  background-color: #cf0652;
}
.moon-slider-nofocus {
  background-color: #ffffff;
}
/* RichText.css */
.moon-richtext {
  font-family: "MuseoSans 300";
  font-size: 26px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  color: #a6a6a6;
  line-height: 32px;
  margin: 0px;
  padding: 0px;
  border: none;
  outline: none;
  cursor: pointer;
  background: transparent;
  box-shadow: none;
  height: 96px;
  width: 300px;
  color: #4b4b4b;
}
.moon-richtext a:link {
  color: #cf0652;
  text-decoration: none;
}
.moon-richtext a:visited {
  color: #cf0652;
  text-decoration: none;
}
.moon-richtext a:hover {
  color: #cf0652;
  text-decoration: none;
}
.moon-richtext a:active {
  color: #cf0652;
  text-decoration: none;
}
.moon-richtext::selection {
  color: #ffffff;
  background-color: #cf0652;
}
.enyo-locale-non-latin .moon-richtext {
  font-family: "Moonstone LG Display";
  font-family: "Moonstone LG Display Light";
  font-size: 26px;
  line-height: 32px;
}
.moon-textarea-decorator > .moon-richtext {
  resize: none;
  overflow: auto;
  background-image: none;
  box-shadow: none;
  text-transform: none;
  /* FIXME: hack for styling reset on Android */

  /* -webkit-appearance: caret;*/

}
.moon-textarea-decorator.moon-focused .moon-richtext {
  cursor: text;
}
.moon-textarea-decorator.moon-disabled .moon-richtext {
  cursor: default;
}
.moon-textarea-decorator .moon-richtext:focus::-webkit-scrollbar {
  width: 4px;
}
.moon-textarea-decorator .moon-richtext:focus::-webkit-scrollbar-track-piece {
  margin-top: 4px;
  margin-bottom: 0px;
  background-color: #ffffff;
  -webkit-border-radius: 10px;
}
.moon-textarea-decorator .moon-richtext:focus::-webkit-scrollbar-thumb:vertical {
  height: 10px;
  background-color: #a6a6a6;
  -webkit-border-radius: 10px;
}
/* ContextualPopupButton.css */
.moon-button.contextual-popup-button {
  padding-right: 50px;
  position: relative;
}
.moon-button.contextual-popup-button:after {
  position: absolute;
  right: 10px;
  font-family: "Moonstone Icons";
  content: "\0F0008";
  font-size: 58px;
  line-height: 75px;
  color: #cf0652;
}
.moon-button.contextual-popup-button.small:after {
  line-height: 50px;
}
.moon-button.contextual-popup-button.spotlight {
  color: #ffffff;
}
.moon-button.contextual-popup-button.spotlight:after {
  color: #ffffff;
}
.moon-button.contextual-popup-button.pressed,
.moon-button.contextual-popup-button:active {
  color: #a6a6a6;
}
.moon-button.contextual-popup-button.pressed:after,
.moon-button.contextual-popup-button:active:after {
  color: #cf0652;
}
.moon-button.contextual-popup-button[disabled] {
  color: #4d4d4d;
}
.moon-button.contextual-popup-button[disabled]:after {
  color: #4d4d4d;
}
.enyo-locale-right-to-left .moon-button.contextual-popup-button {
  padding-left: 50px;
  padding-right: 22px;
}
.enyo-locale-right-to-left .moon-button.contextual-popup-button:after {
  left: 10px;
  right: auto;
  content: "\0F0007";
}
.enyo-locale-right-to-left .moon-button.contextual-popup-button.small {
  padding-right: 20px;
}
/* ContextualPopupDecorator.css */
.moon-contextual-popup-decorator {
  position: relative;
  display: inline-block;
}
.moon-contextual-popup-decorator.block {
  display: block;
}
/* ContextualPopup */
.moon-contextual-popup,
.enyo.moon-contextual-popup {
  min-height: 100px;
  min-width: 100px;
  border-radius: 16px;
  border: 5px solid rgba(0, 0, 0, 0.5);
  color: #ffffff;
  padding: 20px;
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  background-color: #686868;
}
.moon-contextual-popup.reserve-close,
.enyo.moon-contextual-popup.reserve-close {
  padding-right: 70px;
}
.enyo-locale-right-to-left .moon-contextual-popup {
  direction: rtl;
}
.enyo-locale-right-to-left .moon-contextual-popup.reserve-close {
  padding-right: 20px;
  padding-left: 70px;
}
/* Vertical Popups */
/* Vertical Popups that display below their activator */
.moon-contextual-popup.vertical.below {
  margin-top: 22px;
}
/* Vertical popups that display above their activator */
.moon-contextual-popup.vertical.above {
  margin-top: -22px;
}
/* Horizontal Popups */
/* Horizontal popups that display to the right of their activator */
.moon-contextual-popup.right.horizontal {
  margin-left: -28px;
}
/* Horizontal popups that display to the left of their activator */
.moon-contextual-popup.left.horizontal {
  margin-left: 20px;
}
/* Nub */
.moon-contextual-popup::after {
  content: '';
  position: absolute;
  width: 46px;
  height: 46px;
  background-color: transparent;
  background-repeat: no-repeat;
}
/* Up/Down-pointing nubs */
.moon-contextual-popup.below::after,
.moon-contextual-popup.above::after {
  left: 50%;
}
.moon-contextual-popup.below::after {
  top: 9px;
  margin: -36px 0px 0px -23px;
  background-image: url('../lib/moonstone/images/DarkTheme_Icons/ContextualMenu_Up.png');
}
.moon-contextual-popup.above::after {
  top: 100%;
  margin-top: -4px;
  background-image: url('../lib/moonstone/images/DarkTheme_Icons/ContextualMenu_Down.png');
}
/* Left/Right-pointing nubs */
.moon-contextual-popup.left::after,
.moon-contextual-popup.right::after {
  top: 50%;
  margin-top: -20px;
}
.moon-contextual-popup.right::after {
  left: 100%;
  background-image: url('../lib/moonstone/images/DarkTheme_Icons/ContextualMenu_Right.png');
}
.moon-contextual-popup.left::after {
  left: 0%;
  margin-left: -27px;
  background-image: url('../lib/moonstone/images/DarkTheme_Icons/ContextualMenu_Left.png');
}
/* Low nubs */
.moon-contextual-popup.left.low::after,
.moon-contextual-popup.right.low::after {
  top: 76%;
}
/* High nubs */
.moon-contextual-popup.left.high::after,
.moon-contextual-popup.right.high::after {
  top: 50px;
}
/* Bottom right corner nub */
.moon-contextual-popup.left.above::after {
  top: 100%;
  left: 90%;
  margin: 0px 0px 0px -32px;
  background-image: url('../lib/moonstone/images/DarkTheme_Icons/ContextualMenu_Down.png');
}
/* Bottom left corner nub */
.moon-contextual-popup.right.above::after {
  top: 100%;
  left: 10%;
  margin: 0px;
  background-image: url('../lib/moonstone/images/DarkTheme_Icons/ContextualMenu_Down.png');
}
/* Top right corner nub */
.moon-contextual-popup.left.below::after {
  top: 0%;
  left: 90%;
  margin-top: -27px;
  background-image: url('../lib/moonstone/images/DarkTheme_Icons/ContextualMenu_Up.png');
}
/* Top left corner nub */
.moon-contextual-popup.right.below::after {
  top: 9px;
  left: 20%;
  margin-top: -36px;
  background-image: url('../lib/moonstone/images/DarkTheme_Icons/ContextualMenu_Up.png');
}
.moon-contextual-popup-client {
  height: 100%;
  overflow: hidden;
}
/* TextArea.css */
.moon-textarea {
  font-family: "MuseoSans 300";
  font-size: 26px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  color: #a6a6a6;
  line-height: 32px;
  margin: 0px;
  padding: 0px;
  border: none;
  outline: none;
  cursor: pointer;
  background: transparent;
  box-shadow: none;
  height: 96px;
  width: 300px;
  color: #4b4b4b;
}
.moon-textarea a:link {
  color: #cf0652;
  text-decoration: none;
}
.moon-textarea a:visited {
  color: #cf0652;
  text-decoration: none;
}
.moon-textarea a:hover {
  color: #cf0652;
  text-decoration: none;
}
.moon-textarea a:active {
  color: #cf0652;
  text-decoration: none;
}
.moon-textarea::selection {
  color: #ffffff;
  background-color: #cf0652;
}
.enyo-locale-non-latin .moon-textarea {
  font-family: "Moonstone LG Display";
  font-family: "Moonstone LG Display Light";
  font-size: 26px;
  line-height: 32px;
}
.moon-textarea-decorator > .moon-textarea {
  /* Remove scrollbars and resize handle */

  resize: none;
  overflow: auto;
  /* FIXME: hack for styling reset on Android */

  /* -webkit-appearance: caret;*/

}
.moon-textarea-decorator.moon-focused .moon-textarea {
  cursor: text;
}
.moon-textarea-decorator.moon-disabled .moon-textarea {
  cursor: default;
}
.moon-textarea-decorator .moon-textarea:focus::-webkit-scrollbar {
  width: 4px;
}
.moon-textarea-decorator .moon-textarea:focus::-webkit-scrollbar-track-piece {
  margin-top: 4px;
  margin-bottom: 0px;
  background-color: #ffffff;
  -webkit-border-radius: 10px;
}
.moon-textarea-decorator .moon-textarea:focus::-webkit-scrollbar-thumb:vertical {
  height: 10px;
  background-color: #a6a6a6;
  -webkit-border-radius: 10px;
}
/* List Actions */
.moon-list-actions {
  position: relative;
  display: inline-block;
  overflow: visible;
}
.moon-list-actions .moon-icon-button {
  margin: 0;
}
.list-actions-drawer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.moon-header .list-actions-drawer {
  top: -2px;
  bottom: -6px;
}
/* Close button */
.moon-icon-button.moon-list-actions-close {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 2;
}
.enyo-locale-right-to-left .moon-icon-button.moon-list-actions-close {
  right: auto;
  left: 10px;
}
/* Scroller */
.moon-list-actions-scroller {
  margin: 20px;
  margin-right: 80px;
  padding: 0px;
  z-index: 1;
}
.enyo-locale-right-to-left .moon-list-actions-scroller {
  margin-right: 10px;
  margin-left: 80px;
}
/* Action menu */
.moon-list-actions-menu {
  display: inline-block;
  vertical-align: top;
  width: 300px;
  min-width: 300px;
  /* Do not change - used in JS */

  float: right;
  box-sizing: border-box;
}
.enyo-locale-right-to-left .moon-list-actions-menu {
  float: left;
}
.moon-list-actions-drawer.proportional-width.stacked .moon-list-actions-menu {
  width: 100% !important;
}
.moon-list-actions-drawer.stacked .moon-list-actions-menu {
  margin-bottom: 20px;
  clear: both;
}
/* Drawer */
.moon-list-actions-drawer {
  overflow: hidden;
  z-index: 1;
}
.moon-list-actions-drawer-client {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform: translateZ(0) translateY(100%);
}
.moon-list-actions-drawer-client.open {
  -webkit-transform: translateZ(0) translateY(0);
}
.moon-list-actions-drawer-client.animated {
  -webkit-transition: -webkit-transform 0.225s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.moon-medium-header .moon-list-actions-drawer-client,
.moon-small-header .moon-list-actions-drawer-client {
  -webkit-transform: translateZ(0) translateY(-100%);
}
.moon-medium-header .moon-list-actions-drawer-client.open,
.moon-small-header .moon-list-actions-drawer-client.open {
  -webkit-transform: translateZ(0) translateY(0);
}
.moon-list-actions.stacked .enyo-fittable-rows-layout > * {
  height: auto !important;
}
.moon-panels .moon-header .moon-list-actions-drawer {
  pointer-events: none;
}
/* Labeled Text Item */
.moon-labeledtextitem {
  min-width: 336px;
  height: 194px;
  overflow: hidden;
  margin: 0px;
}
/* Label */
.moon-labeledtextitem .label {
  font-family: "MuseoSans 700";
  font-size: 30px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  color: #a6a6a6;
  border-top: 2px solid #a6a6a6;
  margin: 0px 0px 3px 0px;
  padding: 6px 0px 0px 0px;
}
.enyo-locale-non-latin .moon-labeledtextitem .label {
  font-family: "Moonstone LG Display";
  font-family: "Moonstone LG Display Bold";
  font-size: 30px;
}
.spotlight.moon-labeledtextitem .label,
.spotlight .moon-labeledtextitem .label {
  border-top-color: #ffffff;
  color: #ffffff;
}
/* Text */
.moon-labeledtextitem .text {
  font-family: "MuseoSans 300";
  font-size: 26px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  color: #a6a6a6;
  line-height: 32px;
  text-transform: none;
  margin: 0px;
  padding: 0px;
}
.moon-labeledtextitem .text a:link {
  color: #cf0652;
  text-decoration: none;
}
.moon-labeledtextitem .text a:visited {
  color: #cf0652;
  text-decoration: none;
}
.moon-labeledtextitem .text a:hover {
  color: #cf0652;
  text-decoration: none;
}
.moon-labeledtextitem .text a:active {
  color: #cf0652;
  text-decoration: none;
}
.enyo-locale-non-latin .moon-labeledtextitem .text {
  font-family: "Moonstone LG Display";
  font-family: "Moonstone LG Display Light";
  font-size: 26px;
  line-height: 32px;
}
.spotlight.moon-labeledtextitem .text,
.spotlight .moon-labeledtextitem .text {
  color: #ffffff;
}
.enyo-locale-non-latin .moon-labeledtextitem .text {
  font-family: "Moonstone LG Display";
}
.moon-imageitem {
  display: block;
  clear: both;
  min-width: 536px;
  margin-top: 0px;
  padding-top: 0px;
  height: 204px;
  overflow: hidden;
}
.moon-imageitem img {
  width: 136px;
  height: 194px;
  padding: 0px;
  margin: 10px 64px 10px 0px;
  display: inline-block;
  float: left;
}
.moon-imageitem.align-right img {
  float: right;
  margin-right: 0px;
  margin-left: 64px;
}
/* Spinner.css */
@-webkit-keyframes spinBall {
  0% {
    -webkit-transform: rotateZ(13deg);
  }
  /* Slow down toward the top */
  15% {
    -webkit-transform: rotateZ(160deg);
  }
  25% {
    -webkit-transform: rotateZ(200deg);
  }
  30% {
    -webkit-transform: rotateZ(225deg);
  }
  /* Speed back up as the ball falls */
  /* Impact at last ball */
  33% {
    -webkit-transform: rotateZ(321deg);
  }
  39%,
  67% {
    -webkit-transform: rotateZ(347deg);
  }
  /* Small bounce forward */
  72% {
    -webkit-transform: rotateZ(383deg);
  }
  79%,
  100% {
    -webkit-transform: rotateZ(373deg);
  }
}
@-webkit-keyframes spinBall2 {
  /* Small bounce forward */
  0% {
    -webkit-transform: rotateZ(347deg);
  }
  5% {
    -webkit-transform: rotateZ(383deg);
  }
  12%,
  33% {
    -webkit-transform: rotateZ(373deg);
  }
  33.01% {
    -webkit-transform: rotateZ(13deg);
  }
  /* Slow down toward the top */
  48% {
    -webkit-transform: rotateZ(160deg);
  }
  58% {
    -webkit-transform: rotateZ(200deg);
  }
  63% {
    -webkit-transform: rotateZ(225deg);
  }
  /* Speed back up as the ball falls */
  /* Impact at last ball */
  67% {
    -webkit-transform: rotateZ(321deg);
  }
  72%,
  100% {
    -webkit-transform: rotateZ(347deg);
  }
}
@-webkit-keyframes spinBall3 {
  /* Impact at last ball */
  0%,
  100% {
    -webkit-transform: rotateZ(321deg);
  }
  5%,
  33% {
    -webkit-transform: rotateZ(347deg);
  }
  /* Small bounce forward */
  38% {
    -webkit-transform: rotateZ(383deg);
  }
  45%,
  66% {
    -webkit-transform: rotateZ(373deg);
  }
  66.01% {
    -webkit-transform: rotateZ(13deg);
  }
  /* Slow down toward the top */
  81% {
    -webkit-transform: rotateZ(160deg);
  }
  91% {
    -webkit-transform: rotateZ(200deg);
  }
  97% {
    -webkit-transform: rotateZ(225deg);
  }
  /* Speed back up as the ball falls */
}
@-webkit-keyframes propellerBall {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(360deg);
  }
}
@-webkit-keyframes propellerBall2 {
  0% {
    -webkit-transform: rotateZ(120deg);
  }
  100% {
    -webkit-transform: rotateZ(480deg);
  }
}
@-webkit-keyframes propellerBall3 {
  0% {
    -webkit-transform: rotateZ(240deg);
  }
  100% {
    -webkit-transform: rotateZ(600deg);
  }
}
.moon-spinner {
  min-height: 73px;
  min-width: 73px;
  line-height: 73px;
  position: relative;
  display: inline-block;
  color: #ffffff;
  background-color: #4d4d4d;
  border-radius: 42.5px;
  margin: 0 10px;
}
.moon-spinner > * {
  display: inline-block;
}
.moon-spinner.moon-spinner-transparent-background {
  background-color: transparent;
}
.moon-spinner.content {
  padding: 6px;
}
.moon-spinner.content .moon-spinner-client {
  max-width: 400px;
}
.moon-spinner.running .moon-spinner-ball {
  -webkit-animation-play-state: running;
}
.moon-spinner .moon-spinner-ball-decorator {
  position: relative;
  width: 73px;
  height: 73px;
  float: left;
}
.moon-spinner .moon-spinner-ball {
  position: absolute;
  text-align: center;
  font-size: 90%;
  line-height: 0.4em;
  -webkit-animation: none 1.83s linear infinite;
  -webkit-animation-play-state: paused;
  height: 15%;
  width: 15%;
  left: 42.5%;
  bottom: 15%;
  -webkit-transform-origin: center -133.33333333333331%;
}
.moon-spinner .moon-spinner-ball:after {
  content: "\0F0013";
  font-family: "Moonstone Icons";
}
.moon-spinner .moon-spinner-ball1 {
  -webkit-animation-name: spinBall;
  color: #69cdff;
  -webkit-transform: rotateZ(13deg);
}
.moon-spinner .moon-spinner-ball2 {
  -webkit-animation-name: spinBall2;
  color: #ff4a4a;
  -webkit-transform: rotateZ(347deg);
}
.moon-spinner .moon-spinner-ball3 {
  -webkit-animation-name: spinBall3;
  color: #ffb80d;
  -webkit-transform: rotateZ(321deg);
}
.moon-spinner .moon-spinner-client {
  float: left;
  line-height: 73px;
  margin: 0 2.6ex 0 0;
}
.enyo-locale-right-to-left .moon-spinner .moon-spinner-ball-decorator {
  float: right;
}
.enyo-locale-right-to-left .moon-spinner .moon-spinner-client {
  float: right;
  margin-left: 2.6ex;
  margin-right: 0;
}
.moon-panel {
  -webkit-transform: scale3d(1, 1, 1);
  overflow: hidden;
  padding: 0;
  padding: 20px 10px;
  height: 100%;
}
.moon-panel.enyo-fit {
  height: auto;
}
.moon-panel-viewport {
  -webkit-transform: scale3d(1, 1, 1);
  overflow: hidden;
  position: relative;
}
.moon-panel-content-wrapper {
  -webkit-transform: scale3d(1, 1, 1);
  z-index: 2;
  box-sizing: border-box;
}
.moon-panel-body {
  overflow: hidden;
  position: relative;
  padding-top: 10px;
}
/* Breadcrumb */
.moon-panel-breadcrumb {
  -webkit-transform: scale3d(1, 1, 1);
  width: 230px;
  height: 370px;
  position: absolute;
  top: 0px;
  left: 0px;
}
.moon-panel-breadcrumb-viewport {
  -webkit-transform: scale3d(1, 1, 1);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  overflow: hidden;
}
.moon-panel-small-header-wrapper {
  -webkit-transform: scale3d(1, 1, 1);
  margin: 10px 0 0 0;
  position: absolute;
  bottom: 10px;
  left: 0;
  height: 360px;
  width: 100%;
  padding: 0 10px 10px 10px;
  box-sizing: border-box;
}
.moon-panel-small-header {
  margin-top: 25px;
  color: #a6a6a6;
  display: block;
  overflow: hidden;
  padding: 0px;
}
.spotlight .moon-panel-small-header {
  color: #ffffff;
}
.moon-panel-small-header-title-above {
  color: #a6a6a6;
  border-top: 2px solid #ffffff;
  padding-top: 5px;
}
.spotlight .moon-panel-small-header-title-above {
  color: #ffffff;
}
.moon-panel .moon-panel-small-header-wrapper.spotlight {
  background: #cf0652;
  color: #ffffff;
}
.moon-panel .moon-panel-small-header-wrapper.spotlight .moon-panel-small-header-title-above {
  border-top: 2px solid transparent;
}
/* Activity Panels Overrides */
.moon-panels.activity .moon-panel {
  padding: 0;
}
.moon-panels.activity .moon-panel-small-header-title-above {
  border-top: 2px solid #505050;
}
.moon-panels.activity .moon-panel-small-header,
.moon-panels.activity .moon-panel-small-header-title-above {
  color: #a6a6a6;
}
.moon-panels.activity .moon-panel-small-header-wrapper.spotlight .moon-panel-small-header,
.moon-panels.activity .moon-panel-small-header-wrapper.spotlight .moon-panel-small-header-title-above {
  color: #ffffff;
}
/* AlwaysViewing Overrides */
.moon-panels.always-viewing .moon-panel {
  padding: 0;
}
.moon-panels.always-viewing .moon-panel-small-header,
.moon-panels.always-viewing .moon-panel-small-header-title-above {
  color: #ffffff;
}
/* Panel animations */
@-webkit-keyframes panel-outer {
  0% {
    -webkit-transform: translateZ(0) translateY(-100%);
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
  }
}
@-webkit-keyframes panel-inner {
  0% {
    -webkit-transform: translateZ(0) translateY(100%);
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
  }
}
@-webkit-keyframes breadcrumb-outer {
  0% {
    -webkit-transform: translateZ(0) translateY(0%);
  }
  36%,
  100% {
    -webkit-transform: translateZ(0) translateY(100%);
  }
}
@-webkit-keyframes breadcrumb-inner {
  0% {
    -webkit-transform: translateZ(0) translateY(0%);
  }
  36%,
  100% {
    -webkit-transform: translateZ(0) translateY(-100%);
  }
}
.moon-panel .moon-panel-viewport,
.moon-panel .moon-panel-content-wrapper,
.moon-panel .moon-panel-breadcrumb-viewport,
.moon-panel .moon-panel-small-header-wrapper {
  -webkit-transform: translateZ(0);
  -webkit-animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;
}
.moon-panel.growing .moon-panel-viewport,
.moon-panel.shrinking .moon-panel-viewport {
  -webkit-animation-name: panel-outer;
}
.moon-panel.growing .moon-panel-breadcrumb-viewport,
.moon-panel.shrinking .moon-panel-breadcrumb-viewport {
  -webkit-animation-name: breadcrumb-outer;
}
.moon-panel.growing .moon-panel-content-wrapper,
.moon-panel.shrinking .moon-panel-content-wrapper {
  -webkit-animation-name: panel-inner;
}
.moon-panel.growing .moon-panel-small-header-wrapper,
.moon-panel.shrinking .moon-panel-small-header-wrapper {
  -webkit-animation-name: breadcrumb-inner;
}
.moon-panel.growing .moon-panel-viewport,
.moon-panel.growing .moon-panel-content-wrapper,
.moon-panel.growing .moon-panel-breadcrumb-viewport,
.moon-panel.growing .moon-panel-small-header-wrapper {
  -webkit-animation-duration: 0.4s;
}
.moon-panel.shrinking .moon-panel-viewport,
.moon-panel.shrinking .moon-panel-content-wrapper,
.moon-panel.shrinking .moon-panel-breadcrumb-viewport,
.moon-panel.shrinking .moon-panel-small-header-wrapper {
  -webkit-animation-duration: 0.5s;
  -webkit-animation-direction: reverse;
}
.moon-panel.shrunken .moon-panel-viewport {
  -webkit-transform: translateZ(0) translateY(-101%);
}
.moon-panel.shrunken .moon-panel-content-wrapper {
  -webkit-transform: translateZ(0) translateY(101%);
}
.moon-panel:not(.shrunken) .moon-panel-breadcrumb-viewport {
  -webkit-transform: translateZ(0) translateY(101%);
}
.moon-panel:not(.shrunken) .moon-panel-small-header-wrapper {
  -webkit-transform: translateZ(0) translateY(-101%);
}
/* Panels */
.moon-panels.activity,
.moon-panels.always-viewing {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px 10px;
  overflow: visible;
  -webkit-transform: translate3d(0, 0, 0);
  pointer-events: none;
}
.moon-panels.activity *,
.moon-panels.always-viewing * {
  pointer-events: auto;
}
.moon-panels.activity .moon-panel,
.moon-panels.always-viewing .moon-panel {
  height: auto;
  margin: 0;
}
/* Scrim */
.moon-panels .moon-panels-background-scrim {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s linear;
  -webkit-transition: opacity 0.5s linear;
  -moz-transition: opacity 0.5s linear;
  -webkit-transform: translateZ(0);
}
.moon-panels-background-scrim.visible {
  opacity: 0.2;
}
.moon-panels-panel-scrim {
  position: absolute;
  left: 0;
  width: 0;
  height: 100%;
}
.moon-panels.activity .moon-panels-panel-scrim {
  left: 0;
  width: 100%;
  background-color: #000000;
  background-position: bottom 20px left 20px;
  background-repeat: no-repeat;
  background-size: 210px;
}
.moon-panels.always-viewing .moon-panels-panel-scrim {
  left: 50%;
  width: 50%;
  background-color: rgba(0, 0, 0, 0.75);
}
/* Show/Hide Handle */
.moon-panels-handle-wrapper {
  position: absolute;
  height: 100%;
  left: auto;
  right: -130px;
  width: 130px;
  z-index: 100;
}
.moon-panels-handle {
  position: absolute;
  left: -10px;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #4b4b4b;
  background-image: url('../lib/moonstone/images/DarkTheme_Icons/carat-white-left.png');
  -webkit-transform: translate3d(0, 0, 0);
  transition: -webkit-transform 0.2s linear, opacity 0.2s linear;
  opacity: 1;
}
.moon-panels-handle-wrapper.spotlight .moon-panels-handle {
  background-color: #cf0652;
  -webkit-transform: translate3d(-120px, 0, 0);
}
.moon-panels-handle.right {
  background-image: url('../lib/moonstone/images/DarkTheme_Icons/caret-white-right.png');
}
.moon-panels-handle-wrapper.hidden {
  display: none;
}
.moon-panels-handle.stashed {
  opacity: 0;
}
/* Header Accordion*/
.moon-accordion .moon-expandable-list-item-header {
  display: inline-block;
  padding-right: 42px;
}
.enyo-locale-right-to-left .moon-accordion .moon-expandable-list-item-header {
  padding-right: 0;
  padding-left: 42px;
}
.moon-accordion .moon-accordion-header-wrapper {
  height: 1.2em;
}
/* Calendar.css */
.moon-calendar-picker {
  display: inline-block;
  text-align: center;
  width: 616px;
  background-color: #686868;
  border-radius: 16px;
  margin: 0px 20px;
  padding: 20px 0px;
}
.moon-calendar-picker .moon-simple-picker {
  max-width: 250px;
}
.moon-calendar-picker-block {
  display: inline-block;
}
.moon-neutral .moon-calendar-picker-day-base {
  display: inline-block;
  width: 60px;
  color: #a2a2a2;
  margin: 10px;
}
.moon-calendar-picker-day {
  font-family: "MuseoSans 700";
  font-size: 30px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  color: #a6a6a6;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.enyo-locale-non-latin .moon-calendar-picker-day {
  font-family: "Moonstone LG Display";
  font-family: "Moonstone LG Display Bold";
  font-size: 30px;
}
.moon-calendar-picker-month {
  float: left;
  margin: 0px 0px 0px 30px;
}
.moon-calendar-picker-year {
  float: right;
  margin: 0px 30px 0px 0px;
}
.moon-calendar-picker-days {
  display: inline-block;
}
.moon-calendar-picker-dates {
  margin: 30px 0px 0px 0px;
}
.moon-calendar-picker-date {
  font-family: "MuseoSans 700";
  font-size: 30px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  color: #a6a6a6;
  width: 60px;
  min-width: 60px;
  line-height: 60px;
  border: 0px;
  border-radius: 9999px;
  background: inherit;
  color: #ffffff;
  padding: 0px;
  margin: 10px;
  text-align: center;
  vertical-align: middle;
}
.enyo-locale-non-latin .moon-calendar-picker-date {
  font-family: "Moonstone LG Display";
  font-family: "Moonstone LG Display Bold";
  font-size: 30px;
}
.moon-calendar-picker-date.moon-button.small {
  font-family: "MuseoSans 700";
  font-size: 30px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  color: #a6a6a6;
  color: #ffffff;
  padding: 0px;
}
.enyo-locale-non-latin .moon-calendar-picker-date.moon-button.small {
  font-family: "Moonstone LG Display";
  font-family: "Moonstone LG Display Bold";
  font-size: 30px;
}
.moon-calendar-picker-date-shadow.moon-button.small {
  color: #a2a2a2;
}
.moon-calendar-picker-date-shadow.moon-button.small.spotlight {
  color: #ffffff;
}
.moon-calendar-picker .moon-simple-picker-item {
  color: #ffffff;
}
.moon-calendar-picker-date.moon-button.small.active,
.moon-calendar-picker-date.moon-button.small.pressed,
.moon-calendar-picker-date.moon-button.small.spotlight.pressed,
.moon-calendar-picker-date.moon-button:active:hover:not([disabled]) {
  color: #ffffff;
  background-color: #cf0652;
  border: 0px;
}
.moon-calendar-picker .moon-simple-picker-client > * {
  color: #ffffff;
}
/* Table.css */
/*.moon-table {
	padding-right: 2em;
	box-sizing: border-box;
}*/
.moon-table-row.spotlight {
  background-color: #cf0652;
}
/* TODO: Support for disabled table rows? */
.moon-table-cell {
  padding-right: 2em;
  white-space: nowrap;
}
.moon-input-header-input-decorator {
  margin: -1px 0px 0px;
  padding: 0px;
  border: 0px;
  width: 100%;
  box-sizing: border-box;
  background-color: transparent;
}
.moon-input-header .moon-input-header-input-decorator > .moon-input {
  font-family: "Moonstone Miso";
  font-size: 126px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: normal;
  -webkit-font-kerning: normal;
  margin: 0px;
  padding-left: 1px;
  padding-right: 1px;
  display: inline-block;
  box-sizing: border-box;
  line-height: 1em;
  color: #a6a6a6;
  width: 100%;
  text-overflow: ellipsis;
}
.enyo-locale-non-latin .moon-input-header .moon-input-header-input-decorator > .moon-input {
  font-family: "Moonstone LG Display";
  font-size: 114px;
  line-height: 1.5em;
}
.moon-input-header .moon-input.moon-header-title {
  position: static;
}
.moon-input-header .moon-input.moon-header-title::-webkit-input-placeholder {
  color: #333333;
  margin-top: 15px;
  line-height: 1.25em;
}
.enyo-locale-non-latin .moon-input-header .moon-input.moon-header-title::-webkit-input-placeholder {
  line-height: 1.5em;
}
.moon-input-header-input-decorator.spotlight .moon-input::-webkit-input-placeholder {
  color: #ffffff;
}
.moon-input-header-input-decorator.spotlight > .moon-input {
  background-color: #cf0652;
  color: #ffffff;
}
.moon-input-header-input-decorator.spotlight.moon-focused > .moon-input {
  background: none;
}
.moon-input-header-input-decorator.spotlight.moon-focused > .moon-input::-webkit-input-placeholder {
  color: #333333;
}
.moon-drawer-handle {
  max-width: 250px;
  text-align: start;
}
.moon-drawer-partial-client {
  padding: 40px 20px 20px;
}
.moon-drawer-client {
  padding: 20px;
}
/* Drawers.css */
.moon-drawers-handles {
  text-align: center;
  padding: 45px 0 10px;
}
.moon-drawers-activator-wrapper {
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
  z-index: 100;
}
.moon-drawers-activator {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  height: 22px;
  background-color: #404040;
  z-index: 100;
}
.moon-drawers-activator:after {
  content: "\0F0006";
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: -5px;
  display: block;
  border-bottom-left-radius: 36px;
  border-bottom-right-radius: 36px;
  height: 36px;
  width: 60px;
  background-color: #404040;
  top: 10px;
  text-align: center;
  font-family: "Moonstone Icons";
  font-size: 50px;
  line-height: 36px;
  overflow: hidden;
}
.moon-drawers-activator.open:after {
  content: "\0F0005";
}
/* The activator & nub are white when a drawer is open */
.moon-drawers-activator.drawer-open {
  background-color: #ffffff;
}
.drawer-open .moon-drawers-activator:after {
  background-color: #ffffff;
}
/* Activator is spotlight focused */
.spotlight .moon-drawers-activator {
  background-color: #cf0652;
}
.spotlight .moon-drawers-activator:after,
.spotlight .moon-drawers-activator.open:after {
  color: #ffffff;
  background-color: #cf0652;
}
.moon-drawers-handle-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.moon-drawers-handle {
  display: inline-block;
  vertical-align: top;
}
.moon-drawers-drawer-container {
  position: relative;
}
.moon-drawers-client {
  position: relative;
  height: 100%;
  width: 100%;
}
/* If a video player or other controls are behind the drawers, let events pass straight through to them. */
.moon-drawers > * {
  pointer-events: all;
}
.moon-drawers,
.moon-drawers-client {
  pointer-events: none;
}
/* Scrim.css */
.moon-scrim {
  z-index: 1;
  /*
		note: by using pointer-events we allow tapping on scrim
		while it is fading out; however, this requires any showing classes
		to set pointer events to auto or scrim will not function as expected.
	*/

  pointer-events: none;
}
.moon-scrim.moon-scrim-translucent {
  pointer-events: auto;
  background-color: #000000;
  opacity: 0.3;
  filter: alpha(opacity=30);
}
.moon-scrim.moon-scrim-transparent {
  pointer-events: auto;
  background: transparent;
}
/* Popup.css */
.moon-popup {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 40px;
  box-sizing: border-box;
  overflow: hidden;
}
.moon-popup.animate {
  -webkit-transition: -webkit-transform 0.4s ease;
}
.moon-popup.reserve-close {
  padding-right: 70px;
}
.moon-popup-close {
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 0 0;
  color: #ffffff;
  position: absolute;
  right: 10px;
  width: 32px;
  height: 32px;
  top: 10px;
  margin: 0;
}
.moon-popup-close.spotlight {
  background-color: #cf0652;
}
.moon-icon.moon-popup-close {
  position: absolute;
}
.moon-icon.moon-popup-close.active,
.moon-icon.moon-popup-close.pressed,
.moon-icon.moon-popup-close.spotlight.pressed,
.moon-icon.moon-popup-close.spotlight:active {
  background-color: #cf0652;
  color: #ffffff;
}
.enyo-locale-right-to-left .moon-popup.reserve-close {
  padding-right: 40px;
  padding-left: 70px;
}
.enyo-locale-right-to-left .moon-popup-close {
  right: auto;
  left: 10px;
}
/* Dialog.css */
.moon-dialog {
  padding: 24px 40px 40px;
}
.moon-dialog-title {
  margin-bottom: 10px;
}
.moon-dialog-sub-title {
  font-size: 24px;
}
.moon-dialog-content {
  margin: 0px 0px 0px;
}
.moon-dialog-divider {
  padding-bottom: 0px;
  border-bottom-width: 2px;
  margin: 20px 0px 20px;
}
.moon-dialog-client {
  padding: 36px 0px 0px;
}
.moon-dialog-client > * {
  margin-left: 20px;
}
.moon-tooltip {
  z-index: 20;
  height: 68px;
}
.moon-tooltip-label {
  font-family: "Moonstone Miso Bold";
  font-size: 27px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: normal;
  -webkit-font-kerning: normal;
  height: 59px;
  line-height: 59px;
  white-space: nowrap;
  color: #ffffff;
  text-align: center;
  padding: 0px 24px;
  background-color: #4d4d4d;
}
.enyo-locale-non-latin .moon-tooltip-label {
  font-family: "Moonstone LG Display";
  font-family: "Moonstone LG Display Bold";
  font-size: 27px;
  font-weight: normal;
}
.moon-tooltip.below > .moon-tooltip-label {
  margin: 9px 0px 0px;
}
.moon-tooltip.above > .moon-tooltip-label {
  margin: 0px 0px 9px;
}
.moon-tooltip-label:before {
  position: absolute;
  content: "";
  width: 84px;
  height: 60px;
}
/* .above .left-arrow nub shape */
.moon-tooltip.above.left-arrow .moon-tooltip-label {
  border-radius: 34px 34px 34px 0px;
}
.moon-tooltip.above.left-arrow .moon-tooltip-label:before {
  top: 29px;
  left: -2px;
  border-top: 29px solid #4d4d4d;
  clip: rect(30px, 24px, 38px, 2px);
  border-radius: 9999px;
}
/* .above .right-arrow nub shape */
.moon-tooltip.above.right-arrow .moon-tooltip-label {
  border-radius: 34px 34px 0px 34px;
}
.moon-tooltip.above.right-arrow .moon-tooltip-label:before {
  top: 29px;
  right: -2px;
  border-top: 29px solid #4d4d4d;
  clip: rect(30px, 82px, 38px, 56px);
  border-radius: 9999px;
}
/* .below .left-arrow nub shape */
.moon-tooltip.below.left-arrow .moon-tooltip-label {
  border-radius: 0 34px 34px 34px;
}
.moon-tooltip.below.left-arrow .moon-tooltip-label:before {
  top: -50px;
  left: -2px;
  border-bottom: 29px solid #4d4d4d;
  clip: rect(2px, 24px, 60px, 2px);
  border-radius: 9999px;
}
/* .below .right-arrow nub shape */
.moon-tooltip.below.right-arrow .moon-tooltip-label {
  border-radius: 34px 0px 34px 34px;
}
.moon-tooltip.below.right-arrow .moon-tooltip-label:before {
  top: -50px;
  right: -2px;
  border-bottom: 29px solid #4d4d4d;
  clip: rect(2px, 82px, 60px, 56px);
  border-radius: 9999px;
}
/* AudioPlayback.css */
.moon-audio-playback {
  background-color: #333333;
  font-size: 30px;
}
.moon-audio-playback-track-icon {
  position: relative;
  top: 6px;
  left: 4px;
  width: 128px;
  height: 128px;
  background: transparent url() no-repeat 0px 0px;
  display: inline-block;
}
.moon-audio-playback-playtime {
  font-size: 20px;
}
.moon-audio-track-info,
.moon-audio-control-buttons > * {
  display: inline-block;
  top: 6px;
}
.moon-audio-play-time {
  width: 80px;
  font-size: 20px;
  padding-top: 72px;
}
.moon-audio-play-time.left {
  text-align: left;
}
.moon-audio-play-time.right {
  text-align: right;
}
.moon-audio-track-count.right {
  float: right;
}
.moon-audio-track-info {
  width: 40%;
  padding: 0 10px;
}
.enyo-locale-right-to-left .moon-audio-track-info {
  text-align: right;
  direction: rtl;
}
.moon-audio-top {
  height: 65px;
  padding-top: 15px;
}
/* AudioPlayback styles for IconButton */
.moon-audio-icon-button {
  background-color: #808080;
  margin: 8px 4px;
}
.moon-audio-icon-button.left {
  float: left;
}
.moon-audio-icon-button.right {
  float: right;
}
/* AudioPlayback styles for Slider */
.moon-audio-slider-container {
  padding-top: 10px;
}
.moon-audio-slider.spotlight > .moon-slider-knob {
  background-color: #cf0652;
}
.moon-audio-slider > .moon-slider-knob,
.moon-audio-slider > .moon-slider-knob.disabled:active:hover {
  height: 30px;
  width: 30px;
  border-radius: 15px;
  margin: -13px -16px;
  background-color: #808080;
}
.moon-audio-slider > .moon-slider-knob.active,
.moon-audio-slider > .moon-slider-knob.spotselect,
.moon-audio-slider > .moon-slider-knob:active:hover {
  height: 34px;
  width: 34px;
  border-radius: 17px;
  margin: -15px -18px;
  background-color: #808080;
}
.moon-audio-slider.moon-progress-bar {
  background-color: #cccccc;
  margin: 0px;
  top: 10px;
}
.moon-audio-slider > .moon-progress-bar-bar {
  background-color: #666666;
}
/* AudioPlayback styles for queue */
.moon-audio-playback-queue {
  margin: 0px 40px;
}
/* AudioPlayback styles for queue list items */
.moon-audio-queue-list {
  height: 100px;
  padding: 12px 16px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}
.moon-audio-queue-list-selected {
  background-color: #999999;
  border-color: #666666;
}
.moon-audio-queue-list > * {
  display: inline-block;
  vertical-align: middle;
}
.moon-audio-queue-album-art {
  width: 80px;
  height: 80px;
  background: transparent none no-repeat 0px 0px;
  padding-right: 10px;
}
.enyo-locale-right-to-left .moon-audio-queue-album-art {
  padding-right: 0;
  padding-left: 10px;
}
.moon-video-transport-slider {
  height: 80px;
  background-color: #323232;
}
.moon-video-transport-slider .moon-slider-popup.above {
  padding-left: 0px;
}
/* ----- Knob ---- */
.moon-video-transport-slider-knob,
.moon-video-transport-slider-knob.disabled:active:hover,
.moon-video-transport-slider-knob.active,
.moon-video-transport-slider-knob.spotselect,
.moon-video-transport-slider-knob:active:hover {
  position: absolute;
  height: 6px;
  width: 6px;
  border-radius: 3px;
  margin: -3px;
  top: 20px;
  pointer-events: none;
}
.moon-video-transport-slider-knob {
  background: transparent;
  color: transparent;
}
.moon-video-transport-slider.visible .moon-video-transport-slider-knob,
.moon-video-transport-slider.visible .moon-video-transport-slider-knob.disabled:active:hover {
  background-color: #fff;
}
/* ---- Bar ---- */
.moon-video-transport-slider-bar-bar {
  height: 100%;
  background-color: #cf0652;
  position: absolute;
  top: 0;
}
.moon-video-transport-slider-bg-bar {
  height: 100%;
  background-color: #4b4b4b;
  position: absolute;
  top: 0;
}
.moon-video-transport-slider-taparea {
  position: absolute;
  height: 100%;
  width: 100%;
}
.moon-video-transport-slider-popup-label {
  font-family: "Moonstone Miso Bold";
  font-size: 33px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: normal;
  -webkit-font-kerning: normal;
  white-space: nowrap;
  color: #4b4b4b;
  vertical-align: top;
}
.enyo-locale-non-latin .moon-video-transport-slider-popup-label {
  font-family: "Moonstone LG Display";
  font-family: "Moonstone LG Display Bold";
  font-size: 36px;
  font-weight: normal;
}
.moon-video-transport-slider-popup-label > * {
  display: inline-block;
}
.moon-video-transport-slider-indicator-wrapper {
  height: 82px;
  top: 0;
  position: absolute;
}
.moon-video-transport-slider-indicator-wrapper.start {
  left: 0px;
}
.moon-video-transport-slider-indicator-wrapper.end {
  right: 0px;
}
.moon-video-transport-slider-indicator-bar-left {
  position: absolute;
  left: 49.5%;
  top: 25px;
  width: 2px;
  height: 30px;
  background-color: #ffffff;
}
.moon-video-transport-slider-indicator-bar-right {
  position: absolute;
  left: 49.5%;
  top: 25px;
  width: 2px;
  height: 30px;
  background-color: #ffffff;
}
.moon-video-transport-slider-indicator-text {
  position: absolute;
  width: 100%;
  height: 30px;
  top: 23px;
  font-size: 30px;
  font-family: "Moonstone Miso";
  font-weight: bold;
  color: #ffffff;
  text-align: left;
  left: 55%;
}
.enyo-locale-non-latin .moon-video-transport-slider-indicator-text {
  font-family: "Moonstone LG Display";
}
.enyo-locale-right-to-left .moon-video-transport-slider-indicator-text {
  direction: rtl;
}
.moon-video-player {
  position: relative;
  display: inline-block;
  background-color: #000000;
}
.moon-video-player:not(.enyo-fullscreen) {
  margin: 0 10px;
}
.moon-video-player-container {
  display: block;
  margin: 0;
  height: 100%;
  width: 100%;
}
.moon-video-player-video {
  position: absolute;
  display: block;
  margin: 0px auto;
  height: 100%;
  width: 100%;
}
.moon-video-player-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -36.5px;
  margin-left: -36.5px;
}
/* Fullscreen CSS */
:-webkit-full-screen.moon-video-player {
  position: static !important;
  display: block !important;
  margin: 0;
}
:-webkit-full-screen.moon-video-player .moon-video-player-video {
  position: static;
}
:-moz-full-screen.moon-video-player {
  position: static !important;
  display: block !important;
  margin: 0;
}
:-moz-full-screen.moon-video-player .moon-video-player-video {
  position: static;
}
:-ms-full-screen.moon-video-player {
  position: static !important;
  display: block !important;
  margin: 0;
}
:-ms-full-screen.moon-video-player .moon-video-player-video {
  position: static;
}
:-o-full-screen.moon-video-player {
  position: static !important;
  display: block !important;
  margin: 0;
}
:-o-full-screen.moon-video-player .moon-video-player-video {
  position: static;
}
:full-screen.moon-video-player {
  position: static !important;
  display: block !important;
  margin: 0;
}
:full-screen.moon-video-player .moon-video-player-video {
  position: static;
}
.moon-video-inline-control {
  position: relative;
  width: 100%;
  height: 80px;
  background-color: #252525;
}
.moon-video-inline-control .moon-video-inline-control-play-pause {
  position: absolute;
  bottom: 10px;
  left: 10px;
}
.moon-video-inline-control .moon-video-inline-control-fullscreen {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.moon-video-inline-control-text {
  font-family: "Moonstone Miso";
  position: absolute;
  bottom: 20px;
  left: 100px;
  background-color: transparent;
  color: #ffffff;
  font-size: 32px;
}
.moon-video-inline-control-text > * {
  display: inline;
}
.moon-video-inline-control-progress {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 0%;
  height: 80px;
  background-color: #cf0652;
  transition: width 0.1s linear;
  -webkit-transition: width 0.1s linear;
  -moz-transition: width 0.1s linear;
}
.moon-video-inline-control-bgprogress {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 0%;
  height: 80px;
  background-color: #393939;
  transition: width 0.1s linear;
  -webkit-transition: width 0.1s linear;
  -moz-transition: width 0.1s linear;
}
.moon-video-inline-control .moon-icon-button {
  color: #ffffff;
  background-color: transparent;
}
.moon-video-inline-control .moon-icon-button.active,
.moon-video-inline-control .moon-icon-button.pressed,
.moon-video-inline-control .moon-icon-button.spotlight.pressed,
.moon-video-inline-control .moon-icon-button.spotlight:active {
  color: #393939;
  background-color: #ffffff;
  background-position: 0px -50px;
}
.moon-video-inline-control .moon-icon-button.spotlight {
  color: #393939;
  background-color: #ffffff;
  background-position: 0px -50px;
}
/* --- Fullscreen control --- */
.moon-video-fullscreen-control {
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.1);
  transition: background-color 0.1s linear;
  -webkit-transition: background-color 0.1s linear;
  -moz-transition: background-color 0.1s linear;
}
.moon-video-fullscreen-control.scrim {
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0);
}
/* ---- Header info styling ---- */
.moon-video-player-header {
  width: 100%;
  font-family: "MuseoSans 700";
  font-size: 30px;
  letter-spacing: 0;
  color: #ffffff;
  padding: 15px 0 0 0;
  direction: ltr;
}
.moon-video-player-header .moon-clock-hour,
.moon-video-player-header .moon-clock-top,
.moon-video-player-header .moon-clock-meridiem,
.moon-video-player-header .moon-clock-bottom {
  color: #ffffff;
}
.moon-video-player-header .moon-clock-divider {
  background-color: #ffffff;
}
.moon-video-player-header.enyo-fittable-columns-layout > * {
  margin: 0;
}
.moon-video-player-header.always {
  display: block;
}
/* --- Fullscreen Player Controls --- */
.moon-video-player-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0);
  direction: ltr;
}
.moon-video-player-controls {
  height: 85px;
  margin-bottom: 30px;
}
.enyo-fittable-columns-layout.moon-video-player-controls {
  direction: ltr;
  text-align: left;
}
.moon-video-player-controls-container > * {
  width: 100%;
}
.moon-video-player-more-controls {
  border-left: 2px solid white;
  padding-left: 5px;
}
.moon-video-player-more-controls > * {
  vertical-align: middle;
}
.enyo-locale-right-to-left .moon-video-player-more-controls > * {
  direction: rtl;
}
.moon-video-player-premium-placeholder-left {
  width: 210px;
  height: 85px;
  padding-left: 90px;
}
.moon-video-player-premium-placeholder-right {
  width: 210px;
  height: 85px;
  padding-left: 5px;
}
/* --- Buttons --- */
.moon-video-fullscreen-control .moon-icon-button {
  width: 85px;
  height: 85px;
  border-radius: 0;
  border: 0px;
  background-color: transparent;
  background-position: 0px 0px;
  background-size: 85px 170px;
  color: #ffffff;
  line-height: 85px;
}
.moon-icon-playpause-font-style {
  font-size: 220px;
}
.moon-icon-video-main-control-font-style {
  font-size: 190px;
}
/* this style is used for the two side controls and placeholders */
.moon-icon-button.moon-icon-video-round-controls-style {
  color: #000000;
  background-color: #ffffff;
  border-radius: 9999px;
}
.moon-icon-button.moon-icon-video-more-controls-font-style {
  font-size: 112px;
}
.moon-video-fullscreen-control .moon-icon.moon-icon-button.active,
.moon-video-fullscreen-control .moon-icon.moon-icon-button:active,
.moon-video-fullscreen-control .moon-icon.moon-icon-button.pressed,
.moon-video-fullscreen-control .moon-icon.moon-icon-button.spotlight,
.moon-video-fullscreen-control .moon-icon.moon-icon-button.spotlight.pressed,
.moon-video-fullscreen-control .moon-icon.moon-icon-button.spotlight:active {
  background-position: 0 -85px;
  border: 0px;
  background-color: transparent;
  color: #cf0652;
}
.moon-video-fullscreen-control .moon-icon.moon-icon-button.active.moon-icon-video-round-controls-style,
.moon-video-fullscreen-control .moon-icon.moon-icon-button:active.moon-icon-video-round-controls-style,
.moon-video-fullscreen-control .moon-icon.moon-icon-button.pressed.moon-icon-video-round-controls-style,
.moon-video-fullscreen-control .moon-icon.moon-icon-button.spotlight.moon-icon-video-round-controls-style,
.moon-video-fullscreen-control .moon-icon.moon-icon-button.spotlight.pressed.moon-icon-video-round-controls-style,
.moon-video-fullscreen-control .moon-icon.moon-icon-button.spotlight:active.moon-icon-video-round-controls-style {
  color: #ffffff;
  background-color: #cf0652;
}
.moon-video-player-control-buttons.disabled > * {
  pointer-events: none;
}
/* ---- Equal space margin on fullscreen player control buttons ---- */
.moon-video-fullscreen-control .moon-video-player-control-buttons {
  white-space: nowrap;
  text-align: center;
}
.moon-video-fullscreen-control .moon-video-player-control-buttons > * {
  margin: 0 40px;
}
.moon-video-fullscreen-control .moon-video-player-control-buttons > :first-child {
  margin-left: 0;
}
.moon-video-fullscreen-control .moon-video-player-control-buttons > :last-child {
  margin-right: 0;
}
/* ---- Slider container styling ---- */
.moon-video-player-slider-container {
  padding: 90px 0 0 0;
  height: 80px;
}
.moon-video-player-slider-container .moon-slider {
  margin: 0 0 0 !important;
}
/* Feedback area */
.moon-video-player-feedback {
  margin-right: 15px;
}
.enyo-locale-right-to-left .moon-video-player-feedback {
  direction: rtl;
}
.moon-video-feedback-text {
  display: inline-block;
  color: #cf0652;
  margin: 0;
}
.moon-icon.moon-video-feedback-icon-left,
.moon-icon.moon-video-feedback-icon-right {
  display: inline-block;
  width: 32px;
  margin: 0 0 0 15px;
  /* margin-right is inherited from moon-video-player-feedback */

  color: #cf0652;
  font-size: 124px;
  line-height: 26px;
  /* use line-height to middle align the icon, the defaut 32px from moon-icon will make it too low */

}
.moon-video-player-feedback .moon-icon.small {
  background-position: center -3px;
}
.moon-icon.moon-video-feedback-icon-left {
  margin-left: 0;
  margin-right: 15px;
}
.moon-icon.moon-video-feedback-icon-left.moon-icon-pausejumpbackward {
  width: 37px;
}
.moon-icon.moon-video-feedback-icon-right.moon-icon-play {
  font-size: 72px;
  width: 22px;
}
.moon-icon.moon-video-feedback-icon-right.moon-icon-pause {
  font-size: 72px;
  width: 22px;
}
.moon-icon.moon-video-feedback-icon-right.moon-icon-pausejumpforward {
  width: 37px;
}
.moon-video-player-feedback .moon-icon.small > .small-icon-tap-area {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.enyo-locale-non-latin .moon-video-feedback-icon-left,
.enyo-locale-non-latin .moon-video-feedback-icon-right {
  margin-bottom: 2px;
}
.moon-video-info-header {
  display: inline-block;
  vertical-align: top;
  max-width: 1100px;
}
.moon-video-player-info-datetime {
  font-size: 32px;
  margin-bottom: 32px;
  white-space: nowrap;
}
.moon-video-player-info-title {
  font-size: 126px;
  margin-bottom: 0;
  white-space: nowrap;
  -webkit-font-kerning: normal;
  font-kerning: normal;
}
.enyo-locale-non-latin .moon-video-player-info-title {
  line-height: 1.5em;
  /* Clip the title box by just a bit to help it fit better */

  height: 1.4em;
}
.moon-video-player-info-subtitle {
  font-family: "MuseoSans 700";
  font-size: 30px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  color: #a6a6a6;
  color: #ffffff;
  margin-bottom: 22px;
  white-space: nowrap;
}
.enyo-locale-non-latin .moon-video-player-info-subtitle {
  font-family: "Moonstone LG Display";
  font-family: "Moonstone LG Display Bold";
  font-size: 30px;
  color: #ffffff;
}
.moon-video-player-info-subsubtitle {
  font-family: "MuseoSans 300";
  font-size: 26px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  color: #a6a6a6;
  line-height: 32px;
  font-style: italic;
  color: #ffffff;
  display: inline-block;
  white-space: normal;
  max-width: 1200px;
  margin-bottom: 10px;
}
.moon-video-player-info-subsubtitle a:link {
  color: #cf0652;
  text-decoration: none;
}
.moon-video-player-info-subsubtitle a:visited {
  color: #cf0652;
  text-decoration: none;
}
.moon-video-player-info-subsubtitle a:hover {
  color: #cf0652;
  text-decoration: none;
}
.moon-video-player-info-subsubtitle a:active {
  color: #cf0652;
  text-decoration: none;
}
.enyo-locale-non-latin .moon-video-player-info-subsubtitle {
  font-family: "Moonstone LG Display";
  font-family: "Moonstone LG Display Light";
  font-size: 26px;
  line-height: 32px;
  color: #ffffff;
}
.moon-video-player-info-description {
  font-family: "MuseoSans 300";
  font-size: 26px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  color: #a6a6a6;
  line-height: 32px;
  color: #ffffff;
  white-space: normal;
  margin-bottom: 25px;
  -webkit-line-clamp: 3;
  display: -webkit-inline-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  max-height: 96px;
}
.moon-video-player-info-description a:link {
  color: #cf0652;
  text-decoration: none;
}
.moon-video-player-info-description a:visited {
  color: #cf0652;
  text-decoration: none;
}
.moon-video-player-info-description a:hover {
  color: #cf0652;
  text-decoration: none;
}
.moon-video-player-info-description a:active {
  color: #cf0652;
  text-decoration: none;
}
.enyo-locale-non-latin .moon-video-player-info-description {
  font-family: "Moonstone LG Display";
  font-family: "Moonstone LG Display Light";
  font-size: 26px;
  line-height: 32px;
  color: #ffffff;
}
.moon-video-player-info-client {
  display: inline-block;
  margin: 0 0 10px 20px;
}
.enyo-locale-right-to-left .moon-video-player-info-client {
  margin: 0 20px 10px 0;
}
.moon-video-player-info-client > * {
  display: inline-block;
  margin: 0 5px;
}
.moon-channelinfo {
  display: inline-block;
  vertical-align: top;
  text-align: right;
  white-space: normal;
  max-width: 800px;
}
.moon-channelinfo .moon-marquee {
  text-align: right;
}
.moon-video-player-channel-info-badges > * {
  margin: 3px 0 3px 20px;
}
.moon-video-player-channel-info-no {
  font-family: "Moonstone Miso";
  font-size: 126px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: normal;
  -webkit-font-kerning: normal;
  white-space: nowrap;
}
.enyo-locale-non-latin .moon-video-player-channel-info-no {
  line-height: 1.5em;
  /* Clip the title box by just a bit to help it fit better */

  height: 1.4em;
}
.moon-video-player-channel-info-name {
  font-family: "MuseoSans 700";
  font-size: 30px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  color: #a6a6a6;
  color: #ffffff;
  margin-bottom: 22px;
  white-space: nowrap;
}
.enyo-locale-non-latin .moon-video-player-channel-info-name {
  font-family: "Moonstone LG Display";
}
.moon-video-player-info-icon {
  font-family: "MuseoSans 700";
  font-size: 30px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  color: #a6a6a6;
  font-size: 20px;
  background-color: #ffffff;
  color: #000000;
  border-radius: 5px;
  text-align: center;
  white-space: nowrap;
  padding: 3px 9px;
  display: inline-block;
}
.enyo-locale-non-latin .moon-video-player-info-icon {
  font-family: "Moonstone LG Display";
}
.moon-video-player-info-redicon {
  background-color: #fe4a4b;
  color: #ffffff;
  margin-top: 13px;
}
.moon-background-wrapper {
  position: absolute;
  overflow: hidden;
  width: 100%;
}
.moon-background-wrapper-client-content {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.moon-background-wrapper-client-content.bg {
  background-color: #000000;
}
.moon-background-wrapper-client-content:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
}
.moon-background-wrapper-client-content.left {
  padding: 0 30px 0 70px;
}
.moon-background-wrapper-client-content.left:after {
  left: 100%;
  bottom: 0;
  border-bottom: solid 1000px transparent;
  border-left: solid 170px #000000;
}
.moon-background-wrapper-client-content.right {
  padding: 0 30px 0 0;
  float: right;
}
.moon-background-wrapper-client-content.right:after {
  right: 100%;
  top: 0;
  border-top: solid 1000px transparent;
  border-right: solid 170px #000000;
}
.moon-background-wrapper-client-content > * {
  display: inline-block;
  margin: 0 30px;
}
.enyo-locale-right-to-left .moon-background-wrapper-client-content > * {
  direction: rtl;
}
.moon-clock {
  display: block;
  vertical-align: top;
  width: auto;
}
.moon-clock-hour {
  vertical-align: center;
  display: inline-block;
  margin-right: 15px;
  color: #ffffff;
}
.moon-clock-right {
  display: inline-block;
  position: relative;
  top: 5px;
}
.moon-clock-top {
  color: #ffffff;
  vertical-align: bottom;
  display: inline-block;
  line-height: 60px;
  white-space: nowrap;
  font-size: 61px;
  line-height: 62px;
  line-height: 96px;
  height: 72px;
}
.moon-clock-meridiem {
  font-family: "MuseoSans 900";
  font-size: 26px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  color: #a6a6a6;
  line-height: 32px;
  color: #ffffff;
  display: inline-block;
  text-transform: none;
  margin-left: 10px;
  font-size: 24px;
}
.moon-clock-meridiem a:link {
  color: #cf0652;
  text-decoration: none;
}
.moon-clock-meridiem a:visited {
  color: #cf0652;
  text-decoration: none;
}
.moon-clock-meridiem a:hover {
  color: #cf0652;
  text-decoration: none;
}
.moon-clock-meridiem a:active {
  color: #cf0652;
  text-decoration: none;
}
.moon-clock-bottom {
  color: #ffffff;
  text-transform: none;
  white-space: normal;
  vertical-align: top;
  display: inline-block;
  height: 28px;
  width: 100%;
}
.moon-clock-divider {
  height: 2px;
  width: 100%;
  margin: 5px 0;
  background-color: #ffffff;
}
.moon-clock-right.mini {
  padding: 20px 0;
}
.moon-clock-right.mini > .moon-clock-divider {
  background-color: transparent;
  height: 6px;
}
.moon-clock-right.mini > .moon-clock-top {
  font-size: 65px;
  text-align: right;
}
.moon-clock-right.mini > .moon-clock-bottom {
  font-size: 28px;
  text-align: right;
}
.moon-scroller-client-wrapper,
.moon-scroller-viewport {
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}
/* CSS for moon.ScrollStrategy */
.matrix-scroll-client {
  width: auto;
  height: auto;
  overflow: visible;
}
.matrix3dsurface {
  -webkit-transform-origin: center center;
  transform-origin: center center;
  -webkit-transform-style: flat;
  transform-style: flat;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
  -webkit-user-select: none;
}
.moon-scroller-client-wrapper.v-scroll-enabled {
  padding-right: 70px;
}
.enyo-locale-right-to-left .moon-scroller-client-wrapper.v-scroll-enabled {
  padding-right: 0;
  padding-left: 70px;
}
.moon-scroller-client-wrapper.h-scroll-enabled {
  padding-bottom: 60px;
}
/* Default states for horizontal and vertical scrollbars */
.moon-scroller-v-column,
.moon-scroller-h-column {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.1s linear;
  -moz-transition: opacity 0.1s linear;
  -webkit-transition: opacity 0.1s linear;
  transform: translateZ(1px);
  -o-transform: translateZ(1px);
  -ms-transform: translateZ(1px);
  -moz-transform: translateZ(1px);
  -webkit-transform: translateZ(1px);
}
/* Flip the horizontal scroller for RTL mode */
.enyo-locale-right-to-left .moon-scroller-h-column {
  -webkit-transform: translateZ(1px) scale(-1);
}
/* Toggle opacity with .visible class */
.moon-scroller-v-column.visible,
.moon-scroller-h-column.visible {
  opacity: 1;
}
/* Toggle opacity when enabled */
.moon-scroller-v-column.v-scroll-enabled,
.moon-scroller-h-column.h-scroll-enabled {
  visibility: visible;
}
/* Default position for vertical scrollbar */
.moon-scroller-v-column {
  top: 0px;
  bottom: 0px;
  right: 10px;
  width: 60px;
}
.enyo-locale-right-to-left .moon-scroller-v-column {
  right: auto;
  left: 10px;
}
/* Default position for horizontal scrollbar */
.moon-scroller-h-column {
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 60px;
}
/* Shorten vertical column when horizontal column is enabled */
.moon-scroller-v-column.h-scroll-enabled {
  bottom: 60px;
}
/* Shorten horizontal column when vertical column is enabled */
.moon-scroller-h-column.v-scroll-enabled {
  right: 60px;
}
.enyo-locale-right-to-left .moon-scroller-h-column.v-scroll-enabled {
  right: 0;
  left: 60px;
}
.moon-scroller-thumb-container {
  position: absolute;
}
.moon-scroller-hthumb-container {
  left: 60px;
  right: 60px;
  bottom: 0px;
  height: 60px;
}
.moon-scroller-vthumb-container {
  top: 60px;
  bottom: 60px;
  right: 0px;
  width: 60px;
}
.moon-expandable-input .moon-input-decorator {
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
  margin-bottom: 10px;
}
.moon-expandable-input .moon-input {
  width: 100%;
}
.enyo-locale-non-latin.enyo-locale-th .moon-expandable-input .moon-expandable-picker-current-value {
  line-height: 54px;
}
.moon-highlight-text-highlighted {
  color: #cf0652;
}
.moon-item.spotlight .moon-highlight-text-highlighted {
  color: #3a0217;
}
/* ObjectActionDecorator */
.moon-objaction.vertical {
  display: inline-block;
  text-align: center;
}
.moon-objaction.vertical .moon-objaction-actions {
  opacity: 0;
  text-align: center;
  padding: 0 10px;
  box-sizing: border-box;
}
.moon-objaction.vertical .moon-objaction-actions.stretch > * {
  width: 100%;
}
.moon-objaction.horizontal {
  display: block;
}
.moon-objaction.horizontal .moon-objaction-client {
  display: table-cell;
  width: 100%;
  padding-right: 10px;
}
.moon-objaction.horizontal .moon-objaction-actions {
  display: table-cell;
  opacity: 0;
  white-space: nowrap;
  vertical-align: middle;
  padding-right: 10px;
}
.enyo-locale-right-to-left .moon-objaction-client.horizontal .moon-objaction-client {
  padding-right: auto;
  padding-left: 10px;
}
.moon-objaction.vertical .moon-objaction-client .moon-item.spotlight {
  background-color: transparent;
}
.moon-objaction.vertical .moon-objaction-client .moon-item > img {
  padding: 10px;
}
.moon-objaction.vertical .moon-objaction-client .moon-item.spotlight > img {
  background-color: #cf0652;
}
/* FormCheckbox.css */
.moon-item.moon-formcheckbox-item {
  background: none;
  padding: 0 0 0 10px;
  margin-bottom: 10px;
}
.moon-item.moon-formcheckbox-item .moon-checkbox {
  position: absolute;
  top: 5px;
  left: 10px;
  width: 42px;
  height: 42px;
  border-radius: 9999px;
  background-color: #404040;
  line-height: 42px;
}
.moon-item.moon-formcheckbox-item .moon-checkbox-item-label-wrapper {
  padding: 8px 10px;
  margin-left: 42px;
}
.enyo-locale-right-to-left .moon-item.moon-formcheckbox-item {
  padding: 0 10px 0 0;
}
.enyo-locale-right-to-left .moon-item.moon-formcheckbox-item .moon-checkbox-item-label-wrapper {
  margin-left: auto;
  margin-right: 52px;
}
.enyo-locale-right-to-left .moon-item.moon-formcheckbox-item .moon-checkbox {
  right: 10px;
}
.moon-formcheckbox-item.spotlight .moon-checkbox {
  background-color: #cf0652;
}
.moon-formcheckbox-item.spotlight .moon-checkbox-item-label-wrapper {
  color: #a6a6a6;
}
.selection-enabled .moon-selection-overlay-support.spotlight .moon-selection-overlay-support-scrim,
.selection-enabled .moon-selection-overlay-support .spotlight.selected .moon-selection-overlay-support-scrim,
.selection-enabled .moon-selection-overlay-support.selected .moon-selection-overlay-support-scrim {
  display: block;
  visibility: hidden;
}
.selection-enabled .moon-selection-overlay-support.selected .moon-icon-button {
  color: #a6a6a6;
  background-color: #404040;
  background-position: center 0;
  border-color: #cf0652;
  background-color: #ffffff;
  border-color: #ffffff;
  background-position: 0 -50px;
  visibility: visible;
}
.selection-enabled .moon-selection-overlay-support .moon-icon.moon-icon-button,
.selection-enabled .moon-selection-overlay-support .moon-icon.moon-icon-button.active,
.selection-enabled .moon-selection-overlay-support .moon-icon.moon-icon-button:active,
.selection-enabled .moon-selection-overlay-support .moon-icon.moon-icon-button.pressed,
.selection-enabled .moon-selection-overlay-support .moon-icon.moon-icon-button.spotlight.pressed,
.selection-enabled .moon-selection-overlay-support .moon-icon.moon-icon-button.spotlight:active {
  background-color: #ffffff;
  border-color: #ffffff;
}
.moon-selection-overlay-support-scrim {
  display: none;
  z-index: 100000;
}
.moon-selection-overlay-support-scrim .moon-selection-overlay-support-checkbox {
  position: absolute;
  margin-top: -30px;
  margin-left: -30px;
}
.enyo-locale-right-to-left .moon-selection-overlay-support-scrim .moon-selection-overlay-support-checkbox {
  margin-left: initial;
  margin-right: -30px;
}
.moon-thumb {
  -webkit-transform-origin: 0px 0px;
  border: none;
  background: #a6a6a6;
  width: 4px;
  height: 4px;
  border-radius: 0;
}
.moon-neutral .moon-thumb {
  background: #ffffff;
}
.moon-scroller-hthumb,
.moon-scroller-vthumb {
  transition: opacity 0.1s linear;
  -moz-transition: opacity 0.1s linear;
  -webkit-transition: opacity 0.1s linear;
}
.moon-scroller-hthumb {
  bottom: 28px;
}
.moon-scroller-vthumb {
  right: 28px;
}
.moon-scroller-hthumb.hidden,
.moon-scroller-vthumb.hidden {
  opacity: 0;
}
.moon-image {
  display: inline-block;
  margin: 0 10px;
}
.moon-image.has-children {
  position: relative;
  overflow: hidden;
}
.moon-image > .enyo-image {
  display: block;
  width: 100%;
  height: 100%;
}
.moon-image-client {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #6d6d6d;
  padding: 8px;
  overflow: hidden;
  display: block;
}
.moon-image.show-on-spotlight .moon-image-client {
  display: none;
}
.spotlight .moon-image.show-on-spotlight .moon-image-client {
  display: block;
}
.moon-image-badge {
  font-family: "Moonstone Icons";
  font-size: 72px;
  color: #ffffff;
  background-position: center center;
  position: relative;
  bottom: 15px;
}
.spotlight .moon-image-badge {
  top: 3px;
}
/* ExpandableText */
.moon-expandable-text {
  overflow: hidden;
}
.moon-expandable-text .moon-expandable-text-content {
  margin: 0 10px;
  display: -webkit-inline-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}
.moon-expandable-text .moon-expandable-text-button {
  font-family: "MuseoSans 300";
  font-size: 26px;
  font-weight: normal;
  font-style: normal;
  letter-spacing: 0;
  color: #a6a6a6;
  line-height: 32px;
  float: right;
  display: inline-block;
  padding-right: 42px;
  position: relative;
}
.moon-expandable-text .moon-expandable-text-button a:link {
  color: #cf0652;
  text-decoration: none;
}
.moon-expandable-text .moon-expandable-text-button a:visited {
  color: #cf0652;
  text-decoration: none;
}
.moon-expandable-text .moon-expandable-text-button a:hover {
  color: #cf0652;
  text-decoration: none;
}
.moon-expandable-text .moon-expandable-text-button a:active {
  color: #cf0652;
  text-decoration: none;
}
.moon-expandable-text .moon-expandable-text-button:after {
  position: absolute;
  top: 10px;
  right: 11px;
  font-family: "Moonstone Icons";
  content: "\0F0002";
  font-size: 48px;
}
.moon-expandable-text .moon-expandable-text-button.spotlight {
  color: #ffffff;
}
.moon-expandable-text .moon-expandable-text-button.collapsed:after {
  content: "\0F0001";
}
.moon-expandable-text .moon-expandable-text-button.hidden {
  display: none;
}
.enyo-locale-non-latin .moon-expandable-text .moon-expandable-text-button {
  font-family: "Moonstone LG Display";
  font-family: "Moonstone LG Display Light";
  font-size: 26px;
  line-height: 32px;
}
.enyo-locale-non-latin .moon-expandable-text .moon-expandable-text-button:after {
  top: 11px;
}
.enyo-locale-right-to-left .moon-expandable-text .moon-expandable-text-button {
  float: left;
  padding-left: 42px;
  padding-right: 10px;
}
.enyo-locale-right-to-left .moon-expandable-text .moon-expandable-text-button:after {
  left: 11px;
  right: auto;
}
.moon-body-text-control {
  text-align: left;
}
.enyo-locale-right-to-left .moon-body-text-control {
  text-align: right;
}
.moon-icon-exitfullscreen.moon-icon-exitfullscreen-font-style {
  font-size: 100px;
  line-height: 85px;
}
/* Put this at the end because we want these to take precedence over others */
.moon-neutral {
  background-color: #686868;
  color: #ededed;
}
.moon-neutral * {
  color: #ffffff;
}
.moon-light-gray {
  background-color: #ededed;
  color: #4b4b4b;
}
.moon-light-gray * {
  color: #4b4b4b;
}
/* -------------------------- */
/* Standard horizontal spacing */
/* -------------------------- */
.moon-hspacing {
  white-space: nowrap;
}
.moon-hspacing > * {
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px;
}
.moon-hspacing.top > * {
  vertical-align: top;
}
.moon-hspacing > :first-child {
  margin-left: 0;
}
.enyo-locale-right-to-left .moon-hspacing > :first-child {
  margin-left: 10px;
  margin-right: 0;
}
.moon-hspacing > :last-child {
  margin-right: 0;
}
.enyo-locale-right-to-left .moon-hspacing > :last-child {
  margin-right: 10px;
  margin-left: 0;
}
/* -------------------------- */
/* Standard vertical spacing */
/* -------------------------- */
.moon-vspacing > * {
  display: block;
  margin: 10px 0;
}
.moon-vspacing > :first-child {
  margin-top: 0;
}
.moon-vspacing > :last-child {
  margin-bottom: 0;
}
/* -------------------------- */
/* Variable vertical spacing  */
/* -------------------------- */
.moon-vspacing-s > .moon-item:not(.moon-formcheckbox-item),
.moon-vspacing-s > .moon-expandable-list-item:not(.open) .moon-item,
.moon-vspacing-s > .moon-expandable-list-item.open {
  padding-bottom: 10px;
}
.moon-vspacing-s > .moon-button,
.moon-vspacing-s > .moon-input-decorator,
.moon-vspacing-s > .moon-formcheckbox-item {
  margin-top: 5px;
  margin-bottom: 10px;
}
.moon-vspacing-m > .moon-item:not(.moon-formcheckbox-item),
.moon-vspacing-m > .moon-expandable-list-item:not(.open) .moon-item,
.moon-vspacing-m > .moon-expandable-list-item.open {
  padding-bottom: 20px;
}
.moon-vspacing-m > .moon-button,
.moon-vspacing-m > .moon-input-decorator,
.moon-vspacing-m > .moon-formcheckbox-item {
  margin-top: 10px;
  margin-bottom: 20px;
}
.moon-vspacing-l > .moon-item:not(.moon-formcheckbox-item),
.moon-vspacing-l > .moon-expandable-list-item:not(.open) .moon-item,
.moon-vspacing-l > .moon-expandable-list-item.open {
  padding-bottom: 40px;
}
.moon-vspacing-l > .moon-button,
.moon-vspacing-l > .moon-input-decorator,
.moon-vspacing-l > .moon-formcheckbox-item {
  margin-top: 20px;
  margin-bottom: 40px;
}


/* lib\spotlight\css\spotlight.css */


.spotlight-highlight {
	position:absolute;
	text-align:center;
	font-size:16px;
	font-weight:bold;
	pointer-events:none;
}

.spotlight-current-item {
	background-color:rgba(255,100,100,0.9);
}

.spotlight-adjacent-item {
	background-color:rgba(100,100,255,0.9);
}

/* lib\arrangers\MoreArrangers.css */

.more-arrangers-perspective {
	-webkit-perspective: 2000px;
}

.more-arrangers-bfhidden > * {
	-webkit-backface-visibility: hidden;
}


/* lib\flotr\flotr.css */

.flotr-tabs-group{
	border-top:1px solid #999
}

.flotr-tab{
	border:1px solid #666;
	border-top:none;
	margin:0 3px;
	padding:1px 4px;
	cursor:pointer;
	-moz-border-radius:0 0 4px 4px;
	-webkit-border-bottom-left-radius:4px;
	-webkit-border-bottom-right-radius:4px;
	border-radius:0 0 4px 4px;
	opacity:.5;
	-moz-opacity:.5
}

.flotr-tab.selected{
	background:#ddd;
	opacity:1;
	-moz-opacity:1
}

.flotr-tab:hover{
	background:#ccc
}

.flotr-datagrid-container{
	border:1px solid #999;
	border-bottom:none;
	background:#fff
}

.flotr-datagrid{
	border-collapse:collapse;
	border-spacing:0
}

.flotr-datagrid td,.flotr-datagrid th{
	border:1px solid #ccc;
	padding:1px 3px;
	min-width:2em
}

.flotr-datagrid tr:hover,.flotr-datagrid col.hover{
	background:#f3f3f3
}

.flotr-datagrid tr:hover th,.flotr-datagrid th.hover{
	background:#999;
	color:#fff
}

.flotr-datagrid th{
	text-align:left;
	background:#e3e3e3;
	border:2px outset #fff
}

.flotr-datagrid-toolbar{
	padding:1px;
	border-bottom:1px solid #ccc;
	background:#f9f9f9
}

.flotr-datagrid td:hover{
	background:#ccc
}

.flotr-datagrid .first-row th{
	text-align:center
}


/* source\controls\toaster\slideable3d.css */

.fill-forwards {
	-webkit-animation-fill-mode: forwards;
}



/* source\controls\toaster\toaster.css */

.toaster {
	position: absolute;
	min-width: 50px;
	min-height: 50px;
	font-size: 16px;
	/*box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);*/
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	padding: 6px;
	color: #ffffff;
  	background: #4c4c4c url('../assets/gradient.png') repeat-x 0 bottom;
}

.toaster.top {
	top:0;
	border-radius: 5px;
}

.toaster.right {
	right: 0;
	left: auto;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.toaster.bottom {
	top: auto;
	bottom: 0;
	border-radius: 5px;
}

.toaster.left {
	left: 0;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

.toaster.full-radius {
	border-radius: 5px;
}

/* source\controls\dragview.css */

.drag-view {
	border:none;
	border-width:5px;
	border-style:ridge;

	background-color: white;
}
.drag-view.dragable {
	position: absolute;
}

.drag-popup-fade {
	opacity: 0;
	-webkit-transition: opacity 0.75s ease;
	-moz-transition: opacity 0.5s ease;
	-o-transition: opacity 0.5s ease;
	-ms-transition: opacity 0.5s ease;
	transition: opacity 0.75s ease;
}

.drag-popup-fade-in {
	opacity: 1;
}

.drag-popup-minimize-transition {
	-webkit-transition: opacity, -webkit-transform 0.75s ease;
	-moz-transition: opacity 0.5s ease;
	-o-transition: opacity 0.5s ease;
	-ms-transition: opacity 0.5s ease;
	transition: opacity, transform 0.75s ease;
}

.drag-popup-minimize {
	-webkit-transform: scale3d(0,0,0) translate3d(-1000px, 3000px, 0);
	-webkit-transform-origin: left bottom;
}
/*@onyx-radiobutton-active-background: #0091F2;
@onyx-radiobutton-background: #E7E7E7;*/
/* RadioButton.css */
.window-select-button {
	padding-right: 8px;
	padding-left: 8px;
	padding-top: 3px;
	padding-bottom: 3px;
	margin: 0;
	outline: 0;
	height: 40px;
	vertical-align: top;
	/**/
	color: black;
	/**/
	background: #E7E7E7 url('../lib/onyx/images/gradient.png') repeat-x bottom;

	box-shadow: inset 1px 1px 0px rgba(255, 255, 255, 0.2);
}

.window-select-button-header {
	display: block;
	font-size: 14pt;
	text-shadow: 0 1px 1px rgba(0,0,0,0.2);
	text-align: center;
}

.window-select-button-footer {
	font-size: 10pt;
	text-align: center;
	display: block;
}

.window-select-button:first-child {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.window-select-button:last-child {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

.window-select-button.active {
	color: white;
	background: #0091F2 url('../lib/onyx/images/gradient-invert.png') repeat-x top;
	box-shadow: inset 1px 2px 2px rgba(0, 0, 0, 0.2);
}

/* source\style\main.less */

/*
+    App-specific LESS/CSS would go here, but to make your
+    application easier to maintain, you should try to
+    minimize the use of custom CSS.
+*/
.onyx-toolbar {
  background-color: #CACCCC;
}
.moon-spinner .moon-spinner-ball:after {
  content: "0" !important;
}
.onyx-menu-item {
  padding: 0;
  min-height: 40px;
}
.bold-label {
  font-weight: bold;
}
.main-toolbar {
  background-image: url('../assets/toolbar.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.main-view {
  color: black;
  overflow: hidden;
  background-image: url('../assets/back.png');
}
.main-view-button {
  width: 400px;
  max-width: 400px;
}
.menu-item-content {
  width: 140px;
  margin-left: 5px;
  padding-top: 10px;
  font-weight: bold;
}
.menu-item-icon {
  width: 50px;
  height: 50px;
  margin-left: 2px;
}
.app-dialog-header {
  font-size: 18pt;
  font-weight: bold;
}
.app-dialog-content {
  font-size: 12pt;
  width: 100%;
  text-align: center;
}
.onyx-item {
  color: black;
  border-top: 1px solid gray;
  border-bottom: 1px solid black;
}
.onyx-item.grid-item {
  border: 1px solid gray;
  border-radius: 3px;
  text-align: center;
  padding: 5px;
}
.onyx-popup {
  color: black;
  background: white;
}
.popBack {
  background: url('../assets/popback.png');
  width: 155px;
  color: black !important;
  height: 125px;
  border: 5px solid black;
  border-radius: 0;
  border-top-right-radius: 15px !important;
  border-bottom-right-radius: 15px !important;
}
.popBack2 {
  background: url('../assets/popback.png');
  width: 80px;
  height: 80px;
  color: black !important;
  border: 5px solid black;
  border-radius: 0;
  border-top-right-radius: 15px !important;
  border-bottom-right-radius: 15px !important;
}
.mochi-header-content {
  font-size: 20pt;
  text-transform: none;
}
.packs-layout-list-item {
  width: 15px;
  height: 15px;
}
.highlight-text-black {
  color: black;
  font-weight: bold;
  font-size: 16pt;
}
.highlight-text-green {
  color: #19A347;
  font-weight: bold;
  font-size: 16pt;
}
.highlight-text-red {
  color: #FF3333;
  font-weight: bold;
  font-size: 16pt;
}
.selected {
  background-color: #E6B800;
}
.red-text {
  color: #FF3333;
}
.green-text {
  color: #19A347;
}
.results-table-cell {
  border: 1px solid gray;
  padding: 3px;
  margin: 1px;
  width: 64px;
  font-size: 10pt;
}
.results-table-cell.header {
  font-weight: bold;
}
.sticks-text-size {
  width: 70px;
  margin-top: 5px;
  margin-right: 10px;
}
.view-select-min-width {
  min-width: 100px;
}
.stick-layout-spacer {
  display: inline-block;
  border: 1px solid black;
  /*height: 70px;
	width:15px;*/

}
.stick-layout {
  text-align: center;
}
.stick-layout-labels {
  margin-right: 5px;
  text-align: center;
  font-weight: bold;
  font-size: 80%;
}
.stick-layout-labels.large {
  font-size: 90%;
}
.stick-layout-spacer.red {
  background-color: #FF3333;
  background-image: url('../assets/hex32.png');
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}
.stick-layout-spacer.green {
  background-color: #19A347;
  background-image: url('../assets/square32.png');
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}
.stick-layout-cell {
  display: inline-block;
  border: 1px solid black;
  /*height: 64px;
	width:90px;*/

  vertical-align: top;
  margin-top: 3px;
  text-align: center;
}
@keyframes pulse {
  0% {
    -moz-transform: scale3d(0.9, 0.9, 0);
    -ms-transform: scale3d(0.9, 0.9, 0);
    -o-transform: scale3d(0.9, 0.9, 0);
    -webkit-transform: scale3d(0.9, 0.9, 0);
    transform: scale3d(0.9, 0.9, 0);
  }
  50% {
    -moz-transform: scale3d(1.4, 1.4, 0);
    -ms-transform: scale3d(1.4, 1.4, 0);
    -o-transform: scale3d(1.4, 1.4, 0);
    -webkit-transform: scale3d(1.4, 1.4, 0);
    transform: scale3d(1.4, 1.4, 0);
  }
  100% {
    -moz-transform: scale3d(0.9, 0.9, 0);
    -ms-transform: scale3d(0.9, 0.9, 0);
    -o-transform: scale3d(0.9, 0.9, 0);
    -webkit-transform: scale3d(0.9, 0.9, 0);
    transform: scale3d(0.9, 0.9, 0);
  }
}
@-webkit-keyframes pulse {
  0% {
    -moz-transform: scale3d(0.9, 0.9, 0);
    -ms-transform: scale3d(0.9, 0.9, 0);
    -o-transform: scale3d(0.9, 0.9, 0);
    -webkit-transform: scale3d(0.9, 0.9, 0);
    transform: scale3d(0.9, 0.9, 0);
  }
  50% {
    -moz-transform: scale3d(1.4, 1.4, 0);
    -ms-transform: scale3d(1.4, 1.4, 0);
    -o-transform: scale3d(1.4, 1.4, 0);
    -webkit-transform: scale3d(1.4, 1.4, 0);
    transform: scale3d(1.4, 1.4, 0);
  }
  100% {
    -moz-transform: scale3d(0.9, 0.9, 0);
    -ms-transform: scale3d(0.9, 0.9, 0);
    -o-transform: scale3d(0.9, 0.9, 0);
    -webkit-transform: scale3d(0.9, 0.9, 0);
    transform: scale3d(0.9, 0.9, 0);
  }
}
.pulse-popup {
  -webkit-animation: pulse 3s infinite ease-in-out;
  animation: pulse 3s infinite ease-in-out;
}
.imageListBack {
  height: 80px;
  width: 80px;
  background: url('../assets/imageback.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.imageListBack.selected {
  height: 80px;
  width: 80px;
  background: url('../assets/imagebackselected.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.exitCustomButton {
  width: 60px;
  height: 60px;
  background: url('../assets/exitcustom.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.exitCustomButtonClick {
  width: 60px;
  height: 60px;
  background: url('../assets/exitcustomclick.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.viewOnlyButton {
  width: 60px;
  height: 56px;
  background: url('../assets/viewonly.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.viewOnlyButtonClick {
  width: 60px;
  height: 56px;
  background: url('../assets/viewonlyclick.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.tagBuilderButton {
  width: 55px;
  height: 55px;
  background: url('../assets/tagbuilder.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.tagBuilderButtonClick {
  width: 55px;
  height: 55px;
  background: url('../assets/tagbuilderclick.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.addButtonPhone {
  width: 34px;
  height: 36px;
  background: url('../assets/add.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.addButtonPhoneClick {
  width: 34px;
  height: 36px;
  background: url('../assets/addclick.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.addButtonTouchpad {
  width: 40px;
  height: 42px;
  background: url('../assets/add.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.addButtonTouchpadClick {
  width: 40px;
  height: 42px;
  background: url('../assets/addclick.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
/*.undoButtonPhone {
	width: 56px;
  	height: 56px;
  	background: url('../assets/undo.png') 0 0 no-repeat;
  	background-size: 100% 100%;


}

.undoButtonPhoneClick {
	width: 56px;
  	height: 56px;
  	background: url('../assets/undoclick.png') 0 0 no-repeat;
  	background-size: 100% 100%;


}*/
.undoButtonTouchpad {
  width: 56px;
  height: 56px;
  background: url('../assets/undo.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.undoButtonTouchpadClick {
  width: 56px;
  height: 56px;
  background: url('../assets/undoclick.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.floaterbuttonclick {
  background: white;
  width: 35px;
  height: 35px;
}
.editButtonPhone {
  position: relative;
  left: -5px;
  top: 5px;
  width: 42px;
  height: 40px;
  background: url('../assets/edit.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.editButtonPhoneClick {
  position: relative;
  left: -5px;
  top: 5px;
  width: 42px;
  height: 40px;
  background: url('../assets/editclick.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.editButtonTouchpad {
  width: 38px;
  height: 38px;
  background: url('../assets/edit.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.editButtonTouchpadClick {
  width: 38px;
  height: 38px;
  background: url('../assets/editclick.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.showFilterButton {
  width: 31px;
  height: 45px;
  background: url('../assets/showfilter.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.showFilterButtonClick {
  width: 31px;
  height: 45px;
  background: url('../assets/showfilterclick.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.hideFilterButton {
  width: 31px;
  height: 45px;
  background: url('../assets/hidefilter.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.hideFilterButtonClick {
  width: 31px;
  height: 45px;
  background: url('../assets/hidefilterclick.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.checkButtonPhone {
  position: relative;
  top: 5px;
  width: 44px;
  height: 42px;
  background: url('../assets/check.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.checkButtonPhoneClick {
  position: relative;
  top: 5px;
  width: 44px;
  height: 42px;
  background: url('../assets/checkclick.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.checkButtonTouchpad {
  width: 50px;
  height: 50px;
  background: url('../assets/check.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.checkButtonTouchpadClick {
  width: 50px;
  height: 50px;
  background: url('../assets/checkclick.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.checkOff {
  width: 55px;
  height: 55px;
  background: url('../assets/checkoff.png') 0 0 no-repeat;
  background-size: 100% 100%;
}
.checkOn {
  width: 55px;
  height: 55px;
  background: url('../assets/checkon.png') 0 0 no-repeat;
  background-size: 100% 100%;
}


/* source\style\healthmeter.less */

.listBack {
  background-image: url('../assets/100p.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.listBack100 {
  background-image: url('../assets/100p.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.listBack97 {
  background-image: url('../assets/97p.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.listBack95 {
  background-image: url('../assets/95p.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.listBack90 {
  background-image: url('../assets/90p.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.listBack85 {
  background-image: url('../assets/85p.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.listBack80 {
  background-image: url('../assets/80p.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.listBack75 {
  background-image: url('../assets/75p.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.listBack70 {
  background-image: url('../assets/70p.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.listBack65 {
  background-image: url('../assets/65p.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.listBack60 {
  background-image: url('../assets/60p.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.listBack55 {
  background-image: url('../assets/55p.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.listBack50 {
  background-image: url('../assets/50p.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.listBack45 {
  background-image: url('../assets/45p.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.listBack40 {
  background-image: url('../assets/40p.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.listBack35 {
  background-image: url('../assets/35p.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.listBack30 {
  background-image: url('../assets/30p.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.listBack25 {
  background-image: url('../assets/25p.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.listBack20 {
  background-image: url('../assets/20p.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.listBack15 {
  background-image: url('../assets/15p.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.listBack10 {
  background-image: url('../assets/10p.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.listBack5 {
  background-image: url('../assets/5p.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.listBack0 {
  background-image: url('../assets/0p.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
@media all and (min-width: 500px), (min-height: 600px) {
  .listBack {
    background-image: url('../assets/100.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .listBack100 {
    background-image: url('../assets/100.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .listBack97 {
    background-image: url('../assets/97.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .listBack95 {
    background-image: url('../assets/95.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .listBack90 {
    background-image: url('../assets/90.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .listBack85 {
    background-image: url('../assets/85.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .listBack80 {
    background-image: url('../assets/80.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .listBack75 {
    background-image: url('../assets/75.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .listBack70 {
    background-image: url('../assets/70.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .listBack65 {
    background-image: url('../assets/65.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .listBack60 {
    background-image: url('../assets/60.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .listBack55 {
    background-image: url('../assets/55.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .listBack50 {
    background-image: url('../assets/50.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .listBack45 {
    background-image: url('../assets/45.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .listBack40 {
    background-image: url('../assets/40.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .listBack35 {
    background-image: url('../assets/35.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .listBack30 {
    background-image: url('../assets/30.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .listBack25 {
    background-image: url('../assets/25.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .listBack20 {
    background-image: url('../assets/20.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .listBack15 {
    background-image: url('../assets/15.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .listBack10 {
    background-image: url('../assets/10.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .listBack5 {
    background-image: url('../assets/5.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .listBack0 {
    background-image: url('../assets/0.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}


/* source\style\chorelist.less */

.list-back {
  padding: 8px;
  background-image: url('../assets/touchback.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.list-back.custom {
  background-image: url('../assets/touchbackcustom.png');
}
.list-back.tag-mode {
  background-image: url('../assets/touchbackcustomtagmode.png');
}
.list-back.past-due {
  background-image: url('../assets/touchbackpastdue.png');
}
.tagLineBack {
  height: 60px;
  width: 100%;
  background: url('../assets/tagline.png') 0 0 no-repeat;
  background-size: 100% 100%;
}

