/* 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\GridList.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 {
	height: 100%;
	/*activate the GPU for compositing each page */
  	-webkit-transform: translate3d(0, 0, 0);
  	z-index: 1;
}
.enyo-gridlist-row {
	display: inline-block;
	background-color: #000;
	width: auto;
	height: auto;
	overflow: hidden;
	vertical-align: top;
	border: 0;
	padding: 0;
	margin: 0 auto;
  	/* TODO: Investigate if these properties cause scrolling performance issues */
  	/*
  	-webkit-border-radius: 5px;
	border-radius: 5px;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 2px 3px rgba(0,0,0,0.5);
	-ms-box-shadow: 0 2px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
	*/
}
.enyo-gridlist-dummy {
	display:inline-block;
	width:auto;
	height:auto;
	z-index: -1;
}

/* 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 {
	text-align: center;
	font-size: 10pt;
	z-index: 10;
	padding-top: 10px;
	width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	color: #fff;
}
.enyo-gridlist-imageitem.disabled {
	opacity: 0.4;
	filter: alpha(opacity=40);
}


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


/* source\components\component.css */



.bsftDrawerKnobOpen{
    cursor: hand; 
    cursor: pointer;
    text-align:right;
    width:16px; 
    height:16px; 
}
.bsftDrawerKnobCloseOuterBox{
      height: 30px !important;
	  display: table-cell;
	  position: relative;
	  vertical-align: middle;
}
.bsftDrawerKnobClose{
      cursor: hand; 
      cursor: pointer;
	  width: 12px;
	  height: 8px;
	  padding-right: 15px;
	  padding-top: 10px;
	  float:right;
}
.bsftDrawerTitleOpen{
    cursor: hand; 
    cursor: pointer;
    font-size: 12px;
    color: #ADADAD;
    font-weight: 500;
    margin-left: 5px;
    display: inline;
}

.bsftDrawerHeader{
	height: 34px !important;
    width: 100%;
    vertical-align: middle;
    display: table;
    border-width: 0px 0px 2px 0px;
}

.bsftDrawerTitleCloseOuterBox{
    display: table-cell;
    position: relative;
    padding-top: 10px;
    height: 32px !important;
}

.bsftDrawerTitleClose{
    cursor: hand; 
    cursor: pointer;
    font-size: 13px;
    color: #323232;
    margin-left: 8px;
    border-bottom: 0px;
    font-weight: 500;
    text-transform: capitalize;
    display: inline;
}

.bsftDrawerTitleActive{
    text-decoration: none;
    border-bottom: 1px solid #40C8AB;
}

.bsftContentPane{
    color: white;
    font-size: 12px;
    width: 100%;
    padding: 8px 8px 12px 8px;
}

.bsftContentPaneItems{
/*     padding: 10px; */
/*     border: 1px solid #2B2B2B; */
}

.bsftDesktopShareDrawer{
    background-color: #FFFFFF;
}

/* source\style\stylesheet.css */

/***************************************************
 * Created on Mon Jan 14 15:32:43 GMT 2013 by:
 *
 * Copyright 2013 Broadsoft
 * http://www.broadsoft.com
 ***************************************************/


.callControl {
  display: none;
  position: relative;
  left: 0px;
  top: 0;
  height: 75px;
  color: #666666; 
  font-family:arial;
  font-size: 18px;
  font-weight: bold;
}

.callControl input {
  background: #666666; 
  border-bottom: 1px solid #333;
  border-left: 1px solid #000;
  border-right: 1px solid #333;
  border-top: 1px solid #000;
  color: #FFFFFF; 
  border-radius: 3px;
  font-family:arial;
  font-size: 16px;
  padding: 6px 6px 4px;
  width: 250px;
}

.main {
  position: relative;
  top: 0px;
  left: 0px;
  width:100%;
}
.client.r1280x720 {
    width:1280px;
}
.client.r960x720 {
    width:960px;
}
.client.r640x360, .client.r640x480 {
    width:640px;
}
.client.r320x180, .client.r320x240 {
    width:320px;
}

.main:-webkit-full-screen-ancestor:not(iframe) {
    position:absolute !important;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    width:100%;
    height:100%;
}

.video {
    position:relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: auto;
}

.widescreen .video {
    padding-bottom:56.25%;
}
.standard .video {
    padding-bottom:75%;
}

.video:-webkit-full-screen {
    position: absolute;
    height: 100%;
    border: none;
    z-index: 1;
}

.remoteVideo {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: #191414; 
}

.localVideo {
    display: none;
    position: absolute;
    top: auto;
    right: 30px;
    left: auto;
    bottom: -20px;
    width: 25%;
    height: 25%;
    background-color: #241D1D;
/*     box-shadow: 0px 0px 0px #999999; */
    z-index: 99;
    border-radius: 6px;
    border: 1px;
}
.cgcDockerPanel  .localVideo {
	right: 1% !important;
    bottom: 1% !important;
}

:-webkit-full-screen .remoteVideo {
    z-index: 1;
}
:-webkit-full-screen .localVideo {
  z-index: 2;
}
:-webkit-full-screen .remoteVideo, :-webkit-full-screen .localVideo {
    border: none;
    border-radius: 0;
}

.videoBar {
  display: none;
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 40px;
  background: black;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#404040', endColorstr='#000000',GradientType=0 );
  background-image: -ms-linear-gradient(center top , #404040, #000000);
  background-image: linear-gradient(to bottom, #404040, #000000);
  background-image: -webkit-linear-gradient(#404040, #000000);
  background-image: -moz-linear-gradient(top, #404040, #000000);
  border-radius: 4px;
  border: 2px solid #DDDDDD;
  box-shadow: 0px 0px 10px #000000;
  margin-top:5px;
}

:-webkit-full-screen .videoBar {
  position: absolute;
  z-index: 5;
  top:auto;
  bottom:0px;
  width: auto;
  height: 40px;
  background-color: #474343;
  border-radius: 4px;
  border: 2px solid #DDDDDD;
  box-shadow: 0px 0px 10px #999999;
}

/* Default size for all icons */

.icon-call, .icon-hangup, .icon-fullScreenExpand, .icon-fullScreenContract, .icon-selfViewDisable, .icon-selfViewEnable, .icon-muteAudio, .icon-unmuteAudio, .icon-link, .icon-dialpadShow, .icon-dialpadHide, .icon-quality1, .icon-quality2, .icon-quality3, .icon-quality4, .icon-settings, .icon-ok, .icon-history, .icon-trash, .icon-left, .icon-right, .icon-transfer, .icon-hold, .icon-resume {
  font-family: 'Exario-Icon-Fonts';
  speak: none;
  text-decoration: none;
  margin: 0 0.35em 0 0;
  font-size: 25px;
}

/* Call Button */

.call {
  display: none;
  position: absolute;
  z-index: 10;
  top: 25px;
  left: 265px;
}

.icon-call:before {
  content: "\e00e";
  color: #3B9E3B;
}

.icon-call:hover:before {
  content: "\e00e";
  color: #EFA233;
}

/* Hangup Button */
.icon-hangup:before {
  content: "\e00f";
  color: #FF0000;
}

.icon-hangup:hover:before {
  content: "\e00f";
  color: #EFA233;
}

/* needed for wizard integration */
.hangup, .fullScreen, .selfView, .muteAudioIcon, .dialpadIcon, .messages {
  top: 0;
  left: 0;
}

.videoBar .icon {
  display: none;
  z-index: 10;
  margin: 0px 2.5px;
  position: absolute;
}

.videoBar .table {
    height:100%;
    margin: 6px;
}
.videoBar .cell {
    position:relative;
    top:0px;
    left:0px;
    width: 35px;
}

.icon-fullScreenExpand:before {
  content: "\e002";
  color: #FFFFFF;
}

.icon-fullScreenExpand:hover:before {
  content: "\e002";
  color: #EFA233;
}

/* FullScreen Contract Button */
.icon-fullScreenContract:before {
  content: "\e003";
  color: #FFFFFF;
}

.icon-fullScreenContract:hover:before {
  content: "\e003";
  color: #EFA233;
}

/* Self View Disable Button */
.icon-selfViewDisable:before {
  content: "\e00a";
  color: #FFFFFF;
}

.icon-selfViewDisable:hover:before {
  content: "\e00a";
  color: #EFA233;
}

/* Self View Enable Button */
.icon-selfViewEnable:before {
  content: "\e00d";
  color: #EFA233;
}

.icon-selfViewEnable:hover:before {
  content: "\e00d";
  color: #EFA233;
}

/* Mute Audio Button */
.icon-muteAudio:before {
  content: "\e008";
  color: #FFFFFF;
}

.icon-muteAudio:hover:before {
  content: "\e008";
  color: #EFA233;
}

/* Unmute Audio Button */
.icon-unmuteAudio:before {
  content: "\e009";
  color: #EFA233;
}

.icon-unmuteAudio:hover:before {
  content: "\e009";
  color: #EFA233;
}

/* Dialpad Show Button */
.icon-dialpadShow:before {
  content: "\e010";
  color: #FFFFFF;
}

.icon-dialpadShow:hover:before {
  content: "\e010";
  color: #EFA233;
}

/* Dialpad Hide Button */
.icon-dialpadHide:before {
  content: "\e010";
  color: #EFA233;
}

.icon-dialpadHide:hover:before {
  content: "\e010";
  color: #EFA233;
}

/* Dialpad Hide Button */
.quality1 {
  display: none;
  position: absolute;
  z-index: 10;
  top: 13px;
  left: 15px;
}

.icon-quality1:before {
  content: "\e007";
  color: #00FF00;
  opacity: .4;
}

.quality2 {
  display: none;
  position: absolute;
  z-index: 10;
  top: 13px;
  left: 15px;
}

.icon-quality2:before {
  content: "\e006";
  color: #FFFF00;
  opacity: .4;
}

.quality3 {
  display: none;
  position: absolute;
  z-index: 10;
  top: 13px;
  left: 15px;
}

.icon-quality3:before {
  content: "\e005";
  color: #FF9900;
  opacity: .4;
}

.quality4 {
  display: none;
  position: absolute;
  z-index: 10;
  top: 13px;
  left: 15px;
}

.icon-quality4:before {
  content: "\e004";
  color: #FF0000;
  opacity: .4;
}

/* Settings Button */
.icon-settings:before {
  content: "\e00c";
  color: #FFFFFF;
  opacity: .4;
}

.icon-settings:hover:before {
  content: "\e00c";
  color: #EFA233;
}

/* Ok Button */
.icon-ok:before {
  content: "\e011";
  color: #00FF00;
}

.icon-ok:hover:before {
  content: "\e011";
  color: #EFA233;
}

/* History Button */
.history {
  display: none;
  position: absolute;
  z-index: 10;
  top: 6px;
  right: 60px;
}

.icon-history:before {
  content: "\e012";
  color: #FFFFFF;
  opacity: .4;
}

.icon-history:hover:before {
  content: "\e012";
  color: #EFA233;
}

/* Trash Button */
.icon-trash:before {
  content: "\e013";
  color: #FF0000;
}

.icon-trash:hover:before {
  content: "\e013";
  color: #EFA233;
}

/* Left Button */
.icon-left:before {
  content: "\e000";
  color: #00FF00;
}

.icon-left:hover:before {
  content: "\e000";
  color: #EFA233;
}

/* Right Button */
.icon-right:before {
  content: "\e001";
  color: #00FF00;
}

.icon-right:hover:before {
  content: "\e001";
  color: #EFA233;
}

/* Transfer Button */
.icon-transfer:before {
  content: "\e014";
  color: #FFFFFF;
}

.icon-transfer:hover:before {
  content: "\e014";
  color: #EFA233;
}

/* Hold Button */
.icon-hold:before {
  content: "\e015";
  color: #FFFFFF;
}

.icon-hold:hover:before {
  content: "\e015";
  color: #EFA233;
}

/* Resume Button */
.icon-resume:before {
  content: "\e016";
  color: #FFFFFF;
}

.icon-resume:hover:before {
  content: "\e016";
  color: #EFA233;
}

.button:active {
  color: #EFA233;
  background: -webkit-gradient(linear, left top, right bottom, from(#7CDD07), to(#FAA51A));
  background: linear-gradient(to bottom left, #7CDD07, #FAA51A);
}

.button:hover {
  box-shadow: 0px 0px 10px #999;
}

.icon-link:before {
  content: "\e00b";
}

/* Incoming Call Popup */
.callPopup, .reInvitePopup, .transferPopup, .callHistoryDetails {
  display: none;
  background: #333333;
  padding: 10px;
  border: 2px solid #DDDDDD;
  float: left;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  box-shadow: 0px 0px 10px #999999;
  border-radius: 3px;
  font-size: 14px;
  line-height: 18px;
  z-index: 100;
}

.callPopup, .reInvitePopup {
    width:170px;
    height:137px;
}
.transferPopup {
    color: white;
    width:280px;
    height:60px;
}

.transferTarget {
    width: 200px;
}

.popup .actions {
    text-align:right;
}
.popup .title {
    font-weight: bold;
    font-size: 16px;
    color: white;
}
.callPopup span {
  color: #999999;
  font-size: 22px;
}

.ui-widget-content.ui-dialog {
  display: none;
  color: #999999;
  font-size: 22px;
  background: #333333;
  padding: 10px;
  border: 2px solid #DDDDDD;
  box-shadow: 0px 0px 10px #999999;
  border-radius: 3px;
  z-index: 99;
}

.no-close .ui-dialog-titlebar-close {
  display: none;
}

.settingsPopup {
  display: none;
  background: #333333;
  padding: 2px;
  border: 2px solid #DDDDDD;
  position: absolute;
  top: 5px;
  left: 5px;
  overflow-x: hidden;
  overflow-y: scroll;
  width: 435;
  height: 180;
  box-shadow: 0px 0px 10px #999999;
  border-radius: 3px;
  font-size: 20px;
  line-height: 28px;
  z-index: 99;
}

/* Settings Popup */
.settingsPopup span {
  color: #999999;
  font-size: 20px;
}

.settingsPopup [type="checkbox"] {
  width: 18;
  height: 18;
}

.settingsPopup .short {
    width: 36px;
}
/* Auth Button */
.authPopup {
  display: none;
  background: #333333;
  padding: 10px;
  border: 2px solid #DDDDDD;
  float: left;
  position: fixed;
  top: 50%;
  left: 50%;
  box-shadow: 0px 0px 10px #999999;
  border-radius: 3px;
  font-size: 14px;
  line-height: 18px;
}

.authPopup span {
  color: #999999;
  font-size: 14px;
  line-height: 18px;
}

.authPopup input {
  background: #666666;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #000000;
  border-right: 1px solid #333333;
  border-top: 1px solid #000000;
  color: #FFFFFF;
  border-radius: 3px;
  font-family: arial;
  font-size: 16px;
  padding: 6px 6px 4px;
  width: 200px;
}

.authPopup button {
  border-color: #999999;
  border-width: 1px;
  border-radius: 4px;
  color: #333333;
  cursor: pointer;
  padding: 6px 6px 4px;
  margin-top: 10px;
  font-size: 12px;
  width: 214px;
}

.authPopup .alert {
  font-size: 20px;
  text-align: center;
  color: #FF0000;
}

.dialpad {
  display: none;
  position: absolute;
  z-index: 20;
  bottom: 50px;
  right: 5px;
  top:auto;
  left:auto;
  letter-spacing: 5px;
}

.dialpad button {
  color: #333333;
  opacity: 0.8;
  font-family:arial;
  font-size: 20px;
  width: 30px;
  border-color: #000000;
  border-width: 1px;
  border-radius: 4px;
  border-spacing: 5em;
  font-weight: bold;
  line-height: 30px;
  margin: .1em;
  border-top-style: outset;
  cursor: pointer;
}

.dialpad button:active {
  color: #EFA233;
  background: -webkit-gradient(linear, left top, left bottom, from(#F47A20), to(#FAA51A));
  background: linear-gradient(to left bottom, #F47A20, #FAA51A);
}

.dialpad button:hover {
  box-shadow: 1px 1px 20px #999999;
}

.connected-icon {
  display: none;
  position: absolute;
  top: 13px;
  right: 5px;
}

.registered-icon {
  display: none;
  position: absolute;
  top: 13px;
  right: 40px;
}

.timer {
  display: none;
  position:absolute;
  top: 3px;
  left: 0px;
  width: 100%;
  text-align: center;
  font-family: arial;
  font-size: 16px;
  color: #FFFFFF;
}

.messages {
  position: absolute;
  bottom: 55px;
  left:0px;
  width: 100%;
  text-align: center;
  font-family:arial;
  font-size: 20px;
}

.normal {
  color: #999999;
}

.success {
  color: #00FF00;
}

.warning {
  color: #FFFF00;
}

.alert {
  color: #FF0000;
}

.callHistory {
  display: none;
  position: absolute;
  top: 88px;
  left: 378px;
  width: 265px;
  height: 420px;
  background-color: #191414;
  border-radius: 4px;
  border: 2px solid #DDDDDD;
  box-shadow: 0px 0px 10px #999999;
}

.callHistory .historyDestination {
  position: absolute;
  color: #0082FF;
  left: 10px;
  font-family:arial;
  font-size: 18px;
  text-decoration: none;
}

.callHistory .historyDirection {
  position: absolute;
  color: #0082FF;
  left: 205px;
  font-family:arial;
  font-size: 18px;
}

.callHistory .historyDate {
  position: absolute;
  color: #0082FF;
  left: 20px;
  font-family:arial;
  font-size: 10px;
}

.callHistory .historyLength {
  position: absolute;
  color: #0082FF;
  left: 205px;
  font-family:arial;
  font-size: 10px;
}

.callHistory .rowSpace {
  padding: .5em;
}

.historyBack {
  display: none;
  position: absolute;
  top: 385;
  left: 5px;
}

.historyClose {
  position: absolute;
  top: 385;
  left: 80px;
}

.historyClear {
  position: absolute;
  top: 385;
  left: 155px;
}

.historyForward {
  display: none;
  position: absolute;
  top: 385;
  right: 5px;
}

.callStats {
  display: none;
  position: absolute;
	top: 10px;
  color: #666666;
	left: 660px;
	width: 400px;
  padding: 2px;
	border-radius: 4px;
	border: 2px solid #DDDDDD;
	box-shadow: 0px 0px 10px #999999;
}

.callStats .statsVideo {
  position: absolute;
  white-space: pre-wrap;
  color: #0082FF;
  left: 10px;
  font-family:arial;
  font-size: 18px;
  text-decoration: none;
}

.callStats .statsAudio {
  position: absolute;
  white-space: pre-wrap;
  color: #0082FF;
  left: 260px;
  float: left;
  font-family:arial;
  font-size: 18px;
  text-decoration: none;
}

.unsupported {
  position: absolute;
  top: 240px;
  left: 30px;
  width: 600px;
  background-color: #191414;
  text-align: center;
  display:none;
  color: white;
  z-index: 10;
}

.stats-table-container, .stats-graph-sub-container {
    display: none;
}

.stats0-selected .kiloBitsSentPerSecond-video,
.stats1-selected .kiloBitsSentPerSecond-audio,
.stats2-selected .kiloBitsReceivedPerSecond-video,
.stats3-selected .kiloBitsReceivedPerSecond-audio,
.stats4-selected .packetsLost-video,
.stats5-selected .packetsLostPer-video,
.stats6-selected .packetsLost-audio,
.stats7-selected .packetsLostPer-audio,
.stats8-selected .googFrameRateSent-video,
.stats9-selected .googFrameRateReceived-video,
.stats10-selected .audioOutputLevel-audio,
.stats11-selected .audioInputLevel-audio,
.stats12-selected .googFrameWidthReceived-video,
.stats13-selected .googFrameHeightReceived-video,
.stats14-selected .googFrameWidthSent-video,
.stats15-selected .googFrameHeightSent-video,
.stats16-selected .googRtt-audio,
.stats17-selected .googJitterReceived-audio {
    display: block;
}

.client .table {
    display: table;
    width:100%;
}
.client .fixed {
    table-layout: fixed;
}
.client .collapse {
    border-collapse: collapse;
}

.client .cell {
    display: table-cell;
}

.client .heading {
    display: table-row;
    font-weight: bold;
}

.client .row {
    display: table-row;
    margin: 0;
}
.client .row:before, .client .row:after {
    display: none;
}

.client .group {
    display: table-row-group;
}

.stats-graph-sub-container canvas {
    width: 100%;
}

.resolutionSubType{
    display:none;
}

.client .fadeable{
    opacity: 0;
    display: block;
    z-index: -1;
}

.holdAndAnswerButton, .dropAndAnswerButton, .acceptIncomingCall {
    display:none;
}

.started .holdAndAnswerButton,
.started .dropAndAnswerButton,
.client:not(.started) .acceptIncomingCall {
    display:inline-block;
}

.enable-mute.unmuted.started .muteAudioIcon,
.enable-mute.muted.started .unmuteAudioIcon,
.enable-full-screen.full-screen-contracted .fullScreenExpand,
.enable-full-screen.full-screen-expanded .fullScreenContract,
.enable-self-view.self-view-enabled .selfViewDisable,
.enable-self-view.self-view-disabled .selfViewEnable,
.enable-self-view.self-view-enabled .localVideo,
.enable-settings .settings,
.enable-dialpad.dialpad-shown .dialpadIconHide,
.enable-dialpad.dialpad-hidden .dialpadIconShow,
.started .hangup, .calling .hangup,
.enable-call-control.connected .call,
.enable-transfer.started .transfer,
.enable-timer.started .timer,
.client:not(.held).enable-hold.started .hold,
.enable-hold.started.held .resume
{
    transition: all 1s linear;
    opacity: 1;
    z-index: 20;
}
.enable-transfer.started.transfer-visible .transferPopup,
.client:not(.disconnected).auth-visible .authPopup,
.reInvite .reInvitePopup,
.enable-dialpad.dialpad-shown .dialpad,
.enable-settings.settings-shown .settingsPopup,
.incomingCall .callPopup{
    transition: all 1s linear;
    opacity: 1;
    z-index: 100;
}
.enable-mute.connected .muteAudioIcon, .enable-mute.disconnected .muteAudioIcon,
.enable-mute.connected .unmuteAudioIcon, .enable-mute.disconnected .unmuteAudioIcon,
.enable-mute.muted .muteAudioIcon, .enable-mute.unmuted .unmuteAudioIcon,
.enable-full-screen.full-screen-expanded .fullScreenExpand,
.enable-full-screen.full-screen-contracted .fullScreenContract,
.enable-self-view.self-view-disabled .selfViewDisable,
.enable-self-view.self-view-enabled .selfViewEnable,
.enable-self-view.self-view-disabled .localVideo,
.enable-settings.settings-hidden .settingsPopup,
.enable-dialpad.dialpad-hidden .dialpadIconHide,
.enable-dialpad.dialpad-shown .dialpadIconShow,
.enable-dialpad.dialpad-hidden .dialpad,
.connected .hangup, .disconnected .hangup,
.client:not(.connected) .call,
.enable-transfer.connected .transfer, .enable-transfer.disconnected .transfer,
.enable-transfer.transfer-hidden .transferPopup,
.client.disconnected .authPopup, .client.auth-hidden .authPopup,
.reInvite-done .reInvitePopup,
.client.held .hold, .client:not(.started) .hold,
.client:not(.held) .resume, .client:not(.started) .resume,
.client:not(.started) .timer
{
    transition: all 1s linear;
    opacity: 0;
    z-index: -1;
}
.client:not(.enable-mute) .cell-muteAudio,
.client:not(.enable-transfer) .cell-transfer,
.client:not(.enable-hold) .cell-hold,
.client:not(.enable-timer) .cell-timer,
.client:not(.enable-full-screen) .cell-fullScreen,
.client:not(.enable-self-view) .cell-selfView,
.client:not(.enable-settings) .cell-settings,
.client:not(.enable-dialpad) .cell-dialpad
{
    display:none !important;
}
.historyRowSample {
    display: none;
}
.callHistoryDetails {
    width: 150px;
    height: 190px;
    background: white;
}
.historyDetailsClose {
    text-align: right;
    margin-top: 10px;
}
.historyDetailsClose .icon-ok{
    margin:0px;
}
.callHistory .actions {
    margin-top:10px;
}
.history-row {
    cursor: pointer;
}
.historyCallLink {
    text-align: left;
}
.view-audioOnly .video, .view-audioOnly .fullScreenExpand, .view-audioOnly .fullScreenContract,
.view-audioOnly .selfViewDisable, .view-audioOnly .selfViewEnable, .view-audioOnly .quality1,
.view-audioOnly .quality2, .view-audioOnly .quality3, .view-audioOnly .quality4,
.view-audioOnly .cell-fullScreen, .view-audioOnly .cell-selfView{
    display:none !important;
}
.client.view-audioOnly, .view-audioOnly .videoBar {
    display: inline-block;
    width: auto;
}
.view-audioOnly .videoBar .table{
    table-layout: auto;
    width: auto;
}
.view-audioOnly .cell-hangup {
    width:35px !important;
}
.view-audioOnly .timer {
    position: relative;
    margin-right: 10px;
}
.view-audioOnly .dialpad {
    top: 60px;
    left: 0;
}


.onyx-radiobutton.active {
	color: #000000;
	text-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
	background: #ffffff;
	border-top: 0px solid rgba(15, 15, 15, 0.6);
	box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0.2);
}

#client{
	margin: auto !important;
}

/* source\style\cgc.css */


@CHARSET "ISO-8859-1";

body{
	overflow: auto !important;
	width: 100%;
	height: 100%;
	font-family: 'Roboto', -apple-system, Arial, Helvetica, sans-serif !important;
	background-color: #FFFFFF;
	cursor: default;
}

input, textarea, select, button {
	font-family: 'Roboto', -apple-system, Arial, Helvetica, sans-serif !important;
}

/* Chrome grammarly start */
grammarly-ghost{
	display: none !important;
}
html > div{
	display: none !important;
}
/* Chrome grammarly end */

.cgcHide{
    display : none !important;
}
.cgcShow{
    display : inline-flex !important;
}
.cgcFloatRight{
	float: right !important;
}
.cgcFloatLeft{
	float: left !important;
}
.cgcFontNormal{
    font-weight: normal;
}
.cgcFontBold{
	font-weight: bold
}
.cgcBorderNone{
	border: none !important;
}
.cgcFlexRowReverse{
    flex-direction: row-reverse;
}
.cgcFlexShrinkNone{
	flex-shrink: 0 !important;
}
.cgcFlexGrowFull{
	flex-grow: 1 !important;
}
.cgcFullHeight{
	height: 100% !important;
}
.cgcFullWidth{
	width: 100% !important;
}
.cgcPostionRelative{
	position: relative;
}
.cgcFontTransparent{
	color: transparent !important;
}
.cgcDisabled{
	pointer-events: none;
    opacity: 0.5;
}
.bsftDisabledBG{
	cursor: default !important;
    opacity: 0.5;
}
.cgcDisplayInline{
	display: inline-block;
}
.cgcTextEllipsis{
	text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.bsftMediumFont{
	font-weight: 500;
}
.bsftFontRobotoRegular{
	font-weight: 400;
}
.bsftFontRobotoLightItalic{
	font-weight: 300;
	font-style: italic;
}
.bsftFontRobtoCondensed{
	font-family: 'Roboto Condensed', 'Roboto', -apple-system, Arial, Helvetica, sans-serif;
	font-weight: 400;
}
.cgcInvisible{
    visibility: hidden !important;
}

.cgcViewControl{
    overflow:auto;
    height: 100%;
    width: 100%;
}

.cgcPopuBackground{
	width: 100%;
	height: 100%;
	background: #000000;
	opacity: 0.5;
	z-index: 30;
    position: fixed;
    top: 0px;
    left: 0px;
    cursor: default !important;
}

.cgcWelcomePopup {
	max-width: 713px;
	z-index: 31;
}

.cgcWelcomeScreenContainer{
    padding: 24px 40px 24px 40px;
	border-radius: 10px;
}

.cgcWelcomeScreenHeaderBox{
	height: auto;
    width: 100%;
    border-width: 0px 0px 1px 0px;
    text-align: center;
}

.cgcWelcomeScreenHeader {
    font-size: 30px;
}

.cgcWelcomeScreenHeaderDesc{
	padding: 10px 0px;
}

.cgcWelcomeScreenHeaderDescColor{
	color: #475561 !important;
}

.cgcWelcomeScreenItem {
    height: auto;
    width: 100%;
    display: flex;
    box-sizing: border-box;
    flex-direction: row;
    padding: 15px 10px 20px 0px;
    border-width: 0px 0px 1px 0px;
}

.cgcWelcomeScreenItemImgBox{
	flex-shrink: 0;
    width: 100px;
    text-align: center;
}
.cgcWelcomeScreenItemImg {
    height: 33px;
    width: 47px;
    flex-shrink: 0;
}

.cgcWelcomeScreenItemImgTitle {
	font-size: 15px;
    width: auto;
    padding-top: 5px;
}
.bsftWelcomeScreenDesc{
	font-size: 14px;
}
.bsftWelcomeScreenDesc>font{
	font-weight: 600;
}

.cgcWelcomeScreenButtonBox {
    padding-top: 24px;
    height: 39px;
    width: 100%;
    text-align: center;
}

.cgcWelcomeScreenButton {
    height: 100%;
    width: 240px;
    border-radius: 6px;
    border: none !important;
    font-size: 16px;
    outline: none;
    background-image: none !important;
}

.cgcErrorItem{
    width: 99%;
    left: 10px;
    height : auto;
    position: static;
    font-size: 12px;
}

.cgcChatItemInfo{
    height: auto;
    left: 10px;
    position: static;
    font-size: 12px;
}
.cgcChatDefaultAvatar{
    height: 44px !important;
    width: 44px !important;
    float: left;
    border-radius: 50%;
    background-color: #FFFFFF;
    font-size: 22px;
    line-height: 40px;
    text-align: center;
    text-transform: lowercase;
    border: 1px;
    margin-right: 20px;
    flex-shrink: 0;
}
.cgcChatAvatarImgBox{
    height: 44px;
    width: 44px;
    float: left;
    margin-right: 20px;
    flex-shrink: 0;
}
.cgcChatAvatarImg{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* .cgcChatEmptyAvatar{ */
/*     display : none; */
/*     height: 28px !important; */
/*     width: 29px; */
/*     float: right; */
/*     margin-left: 10px; */
/* } */

.cgcChatMessageUser{
    display: flex;
    margin-top: 8px;
    width:100%;
}

.cgcTextSize{
    padding: 0px !important;
    padding-left: 10px !important;
    font-size: 18px !important;
    text-align: left !important;
}

.cgcChatSenderMainDiv{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    width: 100%;
}

.cgcChatReceiverMainDiv{
    display: flex;
    width: 100%;
}

.cgcChatbubbleSeperator{
	padding-top: 20px !important;
}

.cgcChatSenderTime {
    float: left;
    width: auto;
    position: absolute;
    top: calc(50% - 7px);
    left: 0px;
    color: rgb(170, 170, 170);
    font-size: 14px;
    line-height: 14px;
}
.cgcChatContentDiv {
    display: inline-block;
    width: 100%;
    position: relative;
}
.cgcMessageContent {
    text-align: left;
    padding: 16px;
}
.cgcOutgoingChatTheme {
    background-color: #35AFF9;
    border: 1px solid #35AFF9;
}
.cgcChatReceiverMessage {
    float: left !important;
    width: auto;
    max-width: 484px !important;
    box-sizing: border-box;
}
.cgcChatSenderMessage {
    float: right !important;
    width: auto;
    max-width: 484px !important;
    box-sizing: border-box;
}
.cgcChatSenderFirstMessage {
    color: rgb(255, 255, 255);
    border-radius: 24px 24px 0px;
}
.cgcChatReceiverFirstMessage{
    border-radius: 24px 24px 24px 0px;
}
.cgcChatSenderMiddleMessage {
    color: rgb(255, 255, 255);
    border-radius: 24px 0px 0px 24px;
}
.cgcChatReceiverMiddleMessage {
    color: rgb(51, 51, 51);
    border-radius: 0px 24px 24px 0px;
}
.cgcChatReceiverLastMessage {
    color: rgb(51, 51, 51);
    border-radius: 0px 24px 24px;
}
.cgcChatSenderLastMessage {
    border-radius: 24px 0px 24px 24px;
}
.cgcChatNoContentWOAvatar {
    height: 44px;
    width: 44px;
    margin-right: 20px;
    float: left !important;
}
.cgcChatItemSenderDetails{
    font-weight: 500;
    width: auto;
    line-height: 16px;
    text-align: left;
    font-size: 14px;
    margin-left: 80px;
    padding-bottom: 4px;
}

.cgcCollaborateGuestClient{
    width:100%;
    height:100%;
}

.cgcAlternativeNumberPopup{
    border-radius: 5px;
    font-size:70%;
    padding: 13px; 
    max-height: 150px;
    height: auto; 
    max-width:280px;
    width:auto;
    overflow-y:auto;
}

.cgcAlternativeNumberPopupBox{
   	padding: 5px;
    border-radius: 4px;
    border-width: 3px 0px 0px;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.8);
}

.cgcAlternativeNumberPopup:before1 {
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% - 7px);
    border-style: solid;
    border-width: 0px 13px 15px;
    display: block;
    width: 0;
    z-index: 0;
}

.cgcAlternativeNumberPopup:after {
    top: 5px;
    content: "";
    position: absolute;
    left: calc(50% - 7px);
    border-style: solid;
    border-width: 0 7px 8px;
    display: block;
    width: 0;
    z-index: 0;
    transform-origin: 0 0;
    transform: rotate(0deg);
}

.cgcAlternativeNumberHeader{
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    height: 15px;
    padding: 5px;	
}

.cgcAlternativeNumberBody{
    padding: 5px;	
}

.cgcAlternativeNumberRecord{
    padding: 5px 0px;	
}

.cgcLoginHeader{
    font-size: 19px;
    padding-bottom: 8px;
    text-align: center;
}

.cgcRoomHeader{
    font-size: 15px;
    text-align: center;
}
.cgcLoginPageLabel{
	color: #646464 !important;
}
.cgcLoginInputSeparator{
	height: 4px;
}
.cgcRoomHeaderSeparator{
	height: 20px;
}
.cgcTimeoutLoginBox{
    display: inline-block;
    width: auto !important;
    padding-right: 50%;
    padding-top: 10px;
}
.cgcLeaderProfileContainer{
	height: 48px !important;
    position: relative;
}
.cgcLeaderProfileInnerBox{
	height: 36px;
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}
.cgcLeaderAvatar{
	background-color: #FFFFFF;
    flex-shrink: 0;
    height: 32px;
    width: 32px;
    margin-left: 8px;
    margin-top: 2px;
    border-radius: 50%;
    box-shadow: 0px 0px 0px 2px #FFFFFF;
}
.cgcLeaderDefaultAvatar{
    background-color: #FFFFFF;
    flex-shrink: 0;
    height: 30px;
    width: 30px;
    line-height: 30px;
    font-size: 18px;
    text-transform: lowercase;
    text-align: center;
    margin-top: 2px;
    margin-left: 8px;
    border-radius: 50%;
    border-width: 1px;
    border-style: solid;
    box-shadow: 0px 0px 0px 2px #FFFFFF;
}
.cgcLeaderRoomInfoBox{
	display: flex;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 8px;
    white-space: pre;
    max-width: calc(100% - 52px);
    line-height: 36px
}
.cgcLeaderRoomInfoBoxTitle{
    font-size: 15px;
    white-space: pre;
    width: auto;
    height: 100%;
    max-width: 100%;
}

.cgcGuestProfile{
	max-width: 305px;
	white-space: nowrap;
	overflow: hidden;
	vertical-align: middle;
	display: table-cell;
	text-overflow: ellipsis;
	padding-left:8px;
}

.cgcGuestYou{
    vertical-align: middle;
	padding-left: 5px;
	display: table-cell;
}

.cgcChatItemHeaderTime{
    font-size:13px; 
    border-bottom: 1px black;
    display: inline;
    height:initial;
}

.cgcChatLeftsideTime{
    float: left !important;
    margin-right: 15px;
}

.cgcChatRightsideTime{
    float: right !important;
    margin-left: 15px;
}

.cgcGuestRole{
    padding-left: 5px;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 285px;
	overflow: hidden;
	vertical-align: middle;
	display: table-cell;
}

.cgcDockerPanelVideoBackground{
	background:rgb(194, 192, 192);
	text-align: -webkit-center;
	width:100%;
	height: 100%;
}

.cgcViewPanelVideoContainer{
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
}

.cgcVideoPanel{
    height:270px !important;
    width:100%;
    padding:0px;
    max-height:276px
}

.cgcStatusPageBox{
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	text-align:center;
}

.cgcJoinPage{
    text-align: center;
    width: 100%;
    flex-grow: 1;
    margin-bottom: 80px;
}

.cgcJoinPage > div:not(.cgcLoginOuterBox){
	margin: 0px 10px;
}

.cgcJoinPageOuterBox{
    background: #ffffff;
    padding-top: 40px;
    min-height: 328px !important;
    height: auto !important;
    width: 328px !important;
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    border: 1px;
    position: relative;
}
.cgcJoinPageBrowserNotificationMsg{
	height: 110px;
	max-height: 110px;
}
.cgcPostLoginBrowserNotificationMsg{
	height: auto;
}
.cgcBrowserNotificationMsg{
    border-width: 0px 0px 0px 5px;
    padding-left: 10px;
    min-height: 24px;
    font-size: 13px;
    line-height: 24px;
    font-style: normal;
}

.cgcJoinPageHeader{
/* 	width: 100%; */
/*     height:110px; */
}

.cgcJoinPageLogoOuterBox{
    text-align: center;
    height: 56px;
}

.cgcJoinPageLogo{
    max-width: 100% !important;
    max-height: 100% !important;
    text-align: center;
}

.cgcLogoSeperator{
    height : 20px;
}

.cgcLoginBox{
	flex-grow: 1;
    display: -webkit-box;
	-webkit-box-pack: center;
	-webkit-box-align: center;
}

.cgcJoinPageFooterBox {
    margin-top: 30px;
    margin-bottom: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 0px;
}

.cgcJoinPageFooterLogo{
    align-self: center;
    height: 18px;
}

.cgcAppVersion{
	text-align: center;
    font-size: 10px;
    font-weight: 900;
    padding-top: 5px;
    height: 15px !important;
}

.cgcWaitForLeaderAcceptanceWidget{
    text-align: left;
    padding-left: 268px;
}

.cgcApploadingimgBox{
    width: 60px !important;
    height: 60px !important;
    padding-top: 28px;
    padding-bottom: 8px;
    text-align: center;
    margin: auto;
}

.cgcApploadingimg{
    width: 48px !important;
    height: 48px !important;
    display: block;
    margin: auto;
    text-align:center;
}

.cgcSigninProgress{
    display: inline-block;
    width: 100%;
    float: left;
    color: black;
}

.cgcStatusMessageBox{
	margin-top: 28px;
    font-size: 15px;
    text-align: center;
}

.cgcStatusProgressInfoMessageBox{
    font-size: 15px;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}

.cgcStatusProgressWarningMessageBox{
    font-size: 15px;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}

.cgcStatusDismissedMessageBox {
	margin-top: 40px;
}

.cgcStatusDismissedMessage {
	font-size: 15px;
	margin-bottom: 8px;
}

.cgcLoginDeclinedRoomHeader{
    font-size: 19px;
    text-align: center;
    margin-top: 8px;
}

.cgcStatusUnSupportedBrowerMessageBox{
	margin: 36px;
    font-size: 15px;
    font-weight: normal;
    text-align: center;
}

.cgcViewPanelHeaderButtons{
    text-align:right;
    display: table-cell;
    width: auto !important;
    float: right;
}

.cgcChatimg{
    height: 13px;
    width: 16px;
}
.cgcParticipantAvatarContainer{
	width: 36px !important;
    vertical-align: middle;
    height: 36px !important;
}
.cgcParticipantAvatar{
	height: 36px;
	width: 36px;
	border-radius: 50%;
}
.cgcParticipantDefaultAvatar{
    background-color: #FFFFFF;
    height: 34px;
    width: 34px;
    line-height: 34px;
    font-size: 18px;
    text-transform: lowercase;
    text-align: center;
    border-radius: 50%;
    border-width: 1px;
    border-style: solid;
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%)
}
.cgcParticipantContent{
	border-right: 1px solid lightgrey;
	color: #666666;
	font-size: 13px;
   	padding: 8px 8px 0px 8px;
   	position: relative;
}

.cgcParticipantYou{
	height: 52px;
	line-height:52px;
	vertical-align:middle;
   	border-width: 0px 0px 1px 0px;
}

.cgcDockerNavicationContent{
	height: 100%;
}

.cgcAccordionItems{
    height:auto;
    max-height: 100% !important;
    background-color: #ffffff;
}

.cgcChatPanelContainter{
    padding-top:2px;
}

.cgcHeaderParticipants{
    height: 100%;
    max-height: 100% !important;
}

.cgcParticipantPopup{
    top: 5%;
    left: 78%;
    height: auto;
    max-height: 230px;
    width: 250px;
    float:right;
    border: 1px solid #2C92B3;
    background-color: #FFFFFF;
}

.cgcChatHeader{
    background-color: #2C92B3;
    height: 30px;
}

.cgcMuteButtonHeader {
    cursor: pointer;
    height:32px;
    vertical-align: middle;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
    margin-right:6px;
    border: 0px;
}

.cgcFullScreenImg{
    cursor: hand; 
    cursor: pointer;
    height: 25px !important;
    width: 20px;
    padding-right: 5px;
    padding-top: 9px;
}

.cgcFullScreenLabelOff{
    vertical-align: middle;
    cursor: pointer;
    height: auto;
    width: auto;
    border: 0px;
}

.cgcViewPanelInnerContainer{
	border-width: 0px 1px 0px 0px;
	position: relative;
}

.cgcHeaderStyle{
    display: none !important;
    width: 100%;
    font-size: 18px;
    height:30px !important;
    background-repeat:no-repeat;
}

.cgcPendingBox{
    width: 100%;
    text-align: center;
    color: white;
    padding-top:20px;
    background-color:#2C92B3;
    height: auto !important;
}

.cgcFooterInnerbox{
    margin: 0 auto;
    text-align: right;
}

.cgcCompanyLogo{
    text-align: right;
    margin: 0 auto;
    width: 80px;
    height: 0px;
    padding-bottom: 1%;
}

.cgcParticipantsLogo{
    cursor: hand; 
    cursor: pointer;
    display: block;
	margin: 0 auto;
	width: 16px;
	height: 16px;
}

.videoBar {
	display: none;
	height: 0px;
	border: 0px solid #DDDDDD;
}

.cgcCallItemsAdd{
    background-color: #FCD9B6;
}

.cgcCallItemsEven{
    background-color: #EBEBEB;  
}

.cgcWebRTCPanel{
    height: auto !important;
    padding: 0px;
    display: flex;
    flex-direction: row;
}

.cgcCallButtonDiv{
    width: 80% !important;
}

.cgcBasePanel{
    width:100%; 
    height: 100%;
    display: flex;
}

.cgcDockerPanel{
    width: 359px;
    min-width:359px;
    max-width:359px; 
    height: 100%;
    -webkit-user-select: none;  
	-moz-user-select: none;    
	-ms-user-select: none;      
	user-select: none;
}

.cgcViewPanel{
    /* background: white; */
/*     width:100% !important; */
    height: 100%; 
    border-width: 3px 0px 0px 0px;
}

.cgcConnectorShareButton{
	width: 89px;
	padding: 8px 0px 0px 0px;
    cursor: pointer;
    position: relative;
}

.cgcConnectorButton {
	width: 89px;
	padding: 8px 0px 0px 0px;
    cursor: pointer;
    position: relative;
    margin-right: 1px;
}
.cgcFullScreenIconBox {
    padding: 0px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: auto;
    display: flex;
    background: #000000;
}
.cgcConnectorButtonHoverCover{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
}
.cgcConnectorButtonIconBox {
    padding: 0px;
    width: 47px;
    height: 33px;
    margin: auto;
    display: flex;
}
.cgcConnectorButtonIcon{
    height: 33px;
    width: 47px;
    margin: auto;
}
.cgcFullScreenButtonIcon{
    margin: auto;
    height: 15px;
    width: 15px;
}
.cgcFullScreenButtonFSIcon{
    margin: auto;
    height: 100%;
    width: 100%;
    opacity: 0.5;
}
.cgcConnectorButtonIconTitle{
    font-size: 9px;
    line-height: 10px;
    text-align: center;
    padding-top: 8px;
    padding-bottom: 6px;
    border-width: 0px 0px 2px 0px;
    height: 10px;
    border-style: solid;
    border-color: transparent;
    width: 100%;
}
.cgcConnectorButtonTooltip {
	visibility: hidden;
    display: inline-table;
    width: auto;
    max-width: 100%;
    text-align: center;
    padding: 2px 5px;
    position: absolute;
    z-index: 1;
    margin: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    font-size: 10px;
}

.cgcConnectorButton:hover .cgcConnectorButtonTooltipVisble {
	animation: showEffect 1.0s forwards;
}
@keyframes showEffect {
    99% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

.cgcLeftPannelDefaultColor {
    background-color: #0F0D0E;
}

 .cgcChatScrollerLeft {
/* 	padding-left: 5px !important; */
}

 .cgcChatScrollerRight {
/* 	padding-left: 20px !important; */
/*     padding-right: 20px !important; */
}

.cgcChatScroller{
	border:none;
}

.cgcChatScrollerMac{
	border:none; 
	overflow-x: hidden !important;
	overflow-y: auto !important;
}

.cgcChatScrollerNonMac{
	border:none; 
	overflow-x: hidden !important;
	overflow-y: hidden !important;
	font-size: 0px;
}

.cgcChatContentPane {
	word-break: break-word;
    max-width: 832px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5px;
   	padding-left: 20px !important;
    padding-right: 20px !important;
}

.cgcChatBubbleLink{
	word-break: break-all;
}

.cgcPadding{
    padding:2px;
}

.cgcChatItemMessage{
    height: initial;
	font-size: 14px;
	white-space: pre-wrap;
	word-wrap: break-word;
	width: 100%;
}

.cgcLoggedUserWidget{
    border-bottom:1px solid #FF9016;
    padding:4px;
    min-height:60px; 
    max-height:145px
}

.cgcVedioPanelBorder{
    border-bottom:1px solid #FF9016;
}

.cgcContactPanelBorder{
    border-bottom:1px solid #FF9016;
}

.cgcContactPanelMac{
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.cgcContactPanelNonMac{
    overflow: hidden !important;
}

.cgcLoginPageLogoChrome{
    content: url('../branding/assets/bsft_logo_128x128.png');
}

.cgcLoginPageLogoNetscape{
    background: url('../branding/assets/bsft_logo_128x128.png') no-repeat;
}

.cgcLoginPageLogoSafari{
    content: url('../branding/assets/bsft_logo_128x128.png');
}

.cgcLoginPageLogoFirefox{
    background: url('../branding/assets/bsft_logo_128x128.png') no-repeat;
}

.cgcJoinButtonBox{
    padding-top: 24px;
    height: 39px;
}

.cgcJoinButton{
    height: 100%;
    width: 240px;
    border-radius: 6px;
    border: none !important;
    font-size: 16px;
    background-image: none !important;
}

.cgcTabHeading{
    padding-top: 5px !important;
    height: calc(100% - 5px);
    float: left;
}

.cgcVideoTabHeading{
    text-align: left;
    text-shadow: none;
    font-size: 13px !important;
    padding: 0px 8px !important;
    height: 26px !important;
    line-height: 32px;
    background-color: #FFFFFF !important;
    width: auto !important;
    margin-top: 5px;
    box-sizing: border-box;
}

.cgcParticipantsCount{
    font-size: 13px;
    font-weight: normal;
    border-radius: 13px;
    min-width: 16px;
    margin-left: 4px;
    margin-top: 5px;
    text-align: center;
    height: 16px;
    line-height: 13px;
    width: auto;
    display: inherit;
    box-sizing: border-box;
    padding: 2px 4px;
}

.cgcParticipantDetails{
    overflow: hidden;
    border-width: 0px 0px 1px 0px;
    width: 100%;
    height: 51px;
    line-height: 51px;
    vertical-align: middle;
    margin: auto;
}

.cgcParticipantPhoto{
    height:28px;
    width:28px
}

.cgcParticipantRecord{
    padding-left: 8px;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 305px;
	overflow: hidden;
	display: table-cell;
}

.cgcCallMeContent{
    height : 20px;
    padding-left: 2px;
    padding-top: 5px;
}

.cgcParticipantToolTip{
    border-bottom: 1px solid #E3E7EA;
    background: #FFFFFF;
    font-size:85%;
    color:black; 
    min-width:50px;
    max-width:300px;
    white-space: pre-wrap;
    word-wrap:break-word;
}

.onyx-tooltip.below.left-arrow::before{
    border-bottom: 0px solid #E6E6E6;
    top:-6px;
}

.cgcProfileDetails{
    font-size:100%;
    margin : 4px 0 4px 0;
    float: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;  
    width:100%;
    padding:2px;
}

.cgcProfileToolTip{
    border-bottom: 1px solid #E3E7EA;
    background: #FFFFFF;
    font-size:85%;
    color:black; 
    min-width:50px;
    max-width:300px;
    white-space: pre-wrap;
    left:2px;
    word-wrap:break-word;
}

.cgcDialInfoWidget{
	color:#CCCCCC;
	font-size:12px;
	width:auto;
	display: inline-block;
}

.cgcDialInOption{
	padding-bottom:10px;
	padding-top:10px;
	color:#CCCCCC;
	font-size:12px;
	width:auto;
	display: inline-block;
}

.cgcCallMeNowLabel{
    color: #CCCCCC;
    font-size: 13px;
    height: 13px;
    margin-bottom: 8px;
}

.cgcCallMeLable{
	color: #474747;
    font-size: 14px;
    margin-bottom: 4px;
    margin-left: 4px;
    min-height: 18px
}

.cgcCallMeInputText{
	width: 100%;
	cursor: text !important;
	font-size: 14px !important;
	line-height: 14px;
    height: 14px !important;
    color:#000000;
}

.cgcDialInfoLabel{
   	color: #666666;
	font-size: 12px;
	font-weight: bold;
}

.cgcDialInfo{
    font-size:70%;
    padding-left:2px;
    max-width:290px;
}

.cgcDialInOptionBox{
	display: flex;
	align-items: center;
}
.cgcDialInOptionLabel{
   	font-size: 13px;
   	line-height: 13px;
    height: 13px;
    padding-right: 10px;
    
}
.cgcDialInNumber{
    margin-top: 4px;
    font-size: 14px;
    color: #474747;
}
.cgcDialInExtensionLabelSeperator{
	margin-top: 8px;
	margin-left: 4px;
    display: flex;
    align-items: baseline;
}
.cgcDialInExtensionLabel{
	font-size: 13px;
    white-space: pre;
}
.cgcDialInExtensionNumber{
	font-size: 14px;
	color: #474747;
}

.cgcLoggedInUserWidget{
    min-height:60px; 
    max-height:140px
}

.cgcCallMeWidget{
    color:#B5B5B5;
    font-size:12px;
    width:100%;
    margin-top: 12px;
}

.cgcCallMeNumberTextContainer{
	margin-left: 4px;
}
.cgcCallMeNumberText{
    cursor: text;
    margin-right:10px;
    min-width:170px;
    height: 32px !important;
    box-shadow: none !important;
    border: 1px solid #E8E8E8;
    border-radius: 4px;
    padding: 8px 8px 8px 8px !important;
}

/* .cgcCallMeNumberActiveTextBorder{ */
/*     border: 2px solid #0099cc !important; */
/*     box-shadow: 0.5px 0.5px 0.5px 0.5px #0099cc !important; */
/* } */

.cgcCallMeImgWidget{
    padding:0px;
}

.cgcCallMeImage{
    cursor: pointer;
    height : 26px;
}

.cgcCallMeContentHide{
    height: 100%;
}

.cgcCallMeContentShow{
    height : auto;
}

.cgcConferencePanel{
    border: 0px solid;
    padding:0px;
/*     background-color: #1B1A1A; */
/*     max-height:400px; */
    width:100%;
}

.cgcDockerPanelSideBar{
    cursor: pointer;
    height : 12px;
    width: 10px;
    text-align: right;
    vertical-align: text-top;
}

.cgcStatusPanel{
    height : 16px;
    width : 100%;
    max-height : 16px;
}

.cgcFullScreenOn{
    cursor: pointer;
    width : 6px;
    height : 12px;
    vertical-align: text-top;
}

.AlternativeExpandContainer{
	display: flex;
}

.cgcAlternativeExpand{
    cursor: hand;
	cursor: pointer;
	width: 12px !important;
	height: 8px !important;
}

.cgcChatPanel{
    min-height:100%;
    min-width:100%;
    display: inline-block;
    max-height:100%;
    max-width:100%;
    -webkit-user-select: text;  
	-moz-user-select: text;    
	-ms-user-select: text;      
	user-select: text;
    user-select: text;
}

.cgcChatPanelHeader{
  height: 15px;
  width: 100%;
}

.cgcChatPanelFooter{
	height:8px;
	width:100%
}

.cgcChatItemSenderHeader{
    margin-top:2px;
    padding-top:8px;
}

.cgcLoginOuterBox{
    display: inline-block;
}

.cgcLoginInputBox{
    height: 39px;
    text-align: center;
}

.cgcLoginFirstAndLastNameText{
    height: 37px;
    width: 100%;
    font-size: 15px !important;
}

 .cgcLoginFirstAndLastNameText::-ms-clear {
    display: none;
}

.cgcLoginFirstAndLastNameText:-ms-input-placeholder{
	color: #C1C1C1 !important;
	font-size: 15px !important;
}

/* .cgcLoginFirstAndLastNameTextColor{ */
/*     color: #333333; */
/*     font-size: 15px !important; */
/* } */

.cgcRecaptchaBox{
    height: 100%;
    display: inline-block;
}

.cgcFirstandLastNameText{
    background-color: #ffffff;
    width: 232px;
    height: 37px;
    padding: 0px;
    padding-left: 6px;
    border: 1px solid #E8E8E8;
    border-radius: 6px;
    box-shadow: none !important;
}

/* .cgcFirstandLastNameActiveTextBorder{ */
/*     border-color: #0099cc !important; */
/*     box-shadow: 0.5px 0.5px 0.5px 0.5px #0099cc !important; */
/* } */

.cgcFullScreenPanelOn{
    width : 10px;
    height : 12px;
}

.cgcFullScreenPanelOff{
    width : 8px;
    height : 100%;
    border-right:3px solid #E6E6E6
}

.cgcDialInfoImage{
    cursor: hand; 
    cursor: pointer;
    height: 30px !important;
    width: 6px;
    padding-top: 10px;
    padding-bottom: 10px;
    float: right;
}

.cgcProfileBar{
    height: 32px;
    max-height:32px;
    min-height:32px;
	text-align: left;
	font-size: 12px;
	padding-left: 5px;
/* 	background-color: #000000; */
/* 	color: #B5B5B5; */
	vertical-align: middle;
	line-height: 32px;
	text-overflow: ellipsis;
	overflow: hidden;
	 white-space: nowrap;
}

.cgcDialInfoImageHide{
    cursor: hand; 
    cursor: pointer;
    width: 12px !important;
    height: 20px !important;
    padding-bottom: 10px;
    padding-top: 5px;
    padding-right: 2px;
    float: right;
}

.cgcCallMeImgNowButton{
    cursor: hand; 
    cursor: pointer;
    padding: 5px 20px;
    font-size: 14px;
    color: #FFFFFF !important;
    height: 32px !important;
	width: auto;
	max-width:100px;
	min-width:64px;
	border-radius: 5px;
	border: 0px !important;
	box-shadow: none !important;
	background-image: none !important;
	
}

.cgcStatusPage{
    background:white; 
    text-align: center;
    margin-top:100px;
    height:10px
}

.cgcUserPanelHeader{
    padding: 5px;
    width: 30px !important;
    height: 30px !important;
}

.cgcUserPanel{
    border-radius: 2px;
    width: auto !important;
    height: 18px;
    background-color: #FF9016;
    margin-top: 5px;
}

.cgcCaptchaErrorBorderDiv{
    display: inline-block;
    max-width:345px;
}

.cgcCaptchaErrorLabel{
	font-size: 15px;
    border-radius: 5px;
    font-weight: bold;
    display: table-caption;
    width: 300px;
}

.cgcInfoAndErrorDiv{
	display: flex;
	box-sizing: border-box;
	margin-left: 80px;
}

.cgcLoginTimeoutErrorBox{
    text-align: center;
    text-align: -webkit-center;
}

.cgcLoginTimeoutError{
    width: 230px;
    font-size: 15px;
    margin-top: 28px;
    margin-bottom: 16px;
    margin-left: auto;
    margin-right: auto;
}

/* .cgcBrowserSupportErrorPanel {
    padding: 10px;
    font-size: 15px;
    width: 100%;
    display:inline;
    display: -ms-grid;
    text-align: center;
} */

.cgcErrorPanel{
    font-size: 15px !important;
    border-radius: 5px;
    width: 265px;
}

.cgcInfoPanel{
	font-size: 15px;
	border-radius: 5px;
	color: #000000;
	width: 253px;
}

.cgcViewPanelComponentContainer{
	height:100%;
}

.cgcChatMessagePopupContent{
    font-size: 16px;
    padding-left: 15px;
	padding-right: 15px;
    min-width: 240px ;
    max-width:calc(100% - 20px);
    word-wrap: break-word;
    text-overflow:ellipsis;
    overflow: hidden;
    float: left;
    position: relative;
}

.cgcChatMessagePopup{
    overflow: hidden;
    left: 0%;
    color: #FFFFFF;
    max-height: 115px;
    height: auto;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    bottom: 11px;
    z-index: 1;
    padding-top: 14px;
    padding-bottom: 14px;
    margin-left: 9px;
}

.cgcChatContainer {
	min-width: 80%;
}

.cgcChatContainer {
	min-width: 80%;
}

/* .cgcChatContentFirstStyle { */
/*     position: relative; */
/*     padding-left: 8px !important; */
/* 	padding: 5px; */
/* 	margin-right: 50px; */
/* 	margin-left: 12px; */
/* 	border: 2px solid #EFEFEF; */
/* 	display: inline-block; */
/* 	color: #333; */
/* 	-moz-border-radius: 10px !important; */
/* 	border-radius: 3px; */
/* 	max-width: 80%; */
/* } */

/* .cgcChatContentFirstStyle:before { */
/* 	  bottom: auto !important; */
/* 	  left: -9px; */
/* 	  border-width: 0px 9px 10px 0px; */
/* 	  border-color: transparent #EFEFEF; */
/* 	  content: ""; */
/* 	  position: absolute; */
/* 	  border-style: solid; */
/* 	  display: block; */
/* 	  margin-top: -7.2px; */
/* 	  top: 5.4px; */
/* } */

/* .cgcChatContentFirstStyle:after { */
/*       top: 8.2px; */
/* 	  bottom: auto; */
/* 	  left: -4.5px; */
/* 	  border-width: 0px 9px 10px 0px; */
/* 	  content: ""; */
/* 	  position: absolute; */
/* 	  display: block; */
/* 	  border-style: solid; */
/* 	  margin-top: -8.2px; */
/* } */

/* .cgcChatContentOtherStyle { */
/*     font-size: 13px; */
/* 	white-space: pre-wrap; */
/* 	word-wrap: break-word; */
/* 	margin-left: 40px; */
/* 	max-width: 80%; */
/* 	margin-right: 2%; */
/* 	border: 2px solid #EFEFEF; */
/* 	display: inline-block; */
/* 	border-radius: 3px; */
/* 	padding-left: 8px !important; */
/* 	padding: 5px; */
/* } */

/* .cgcChatInnerBox{ */
/* 	margin-top: 0.1px; */
/* 	width: 100%; */
/* } */

/* .cgcChatDetails{ */
/* 	padding-top: 10px; */
/* 	font-size: 11px; */
/* } */

.cgcOuterBoxRight {
  	height: 71px;
  	border: 1px solid #E4E4E4;
  	width: 100%;
  	background-color: #F0F0F0;
}
.cgcOuterBoxLeft {
     position: relative;
  height: 100px;
  width: 100%;
}

.cgcChatBoxLeft {
	border-width: 2px 0px 0px 0px;
  	width: 100%;
  	height: auto !important;
}

.cgcChatBoxRight {
	border-width: 2px 0px 0px 0px;
}

.chatEntryBoxLeft:-ms-input-placeholder{
	font-size: 13px;
}

.chatEntryBoxLeft::-webkit-resizer{ 
    border: 0px solid rgba(0,0,0,0); 
}

.chatEntryBoxLeft {
    width: 100%;
    box-sizing: border-box;
    line-height: 20px;
    border: 0px;
    font-family: 'Roboto', -apple-system, Arial, Helvetica, sans-serif !important;
    overflow: hidden;
    outline: none;
    resize: none;
    min-height: 36px !important;
    height: 36px;
    max-height: 14em;
    padding: 8px;
    display: block;
}

.chatEntryBoxRight::-webkit-input-placeholder{
	font-size: 13px !important;
	color: #C1C1C1;
}

.chatEntryBoxRight:-ms-input-placeholder{
	font-size: 13px !important;
	color: #C1C1C1;
}

.chatEntryBoxRight::-webkit-resizer{ 
    border: 0px solid rgba(0,0,0,0); 
}

.chatEntryBoxRight{
	border: 0px !important;
	font-size: 13px;
	color: #333333;
	bottom: 0px;
	line-height: 20px;
	outline: none;
	width: 100%;
	overflow: hidden;
	font-family: 'Roboto', -apple-system, Arial, Helvetica, sans-serif !important;
	resize: none;
	height: 36px;
	min-height: 36px;
	max-height: 8em;
	padding: 8px;
	box-sizing: border-box;
	display: block;
}

.chatEntryBoxFullInnerBorder{
    box-shadow: inset 0 0 1px 1px #0099cc;
}

.chatEntryBoxTopInnerBorder{
/*     border-top:1px solid #0099cc !important; */
}

.cgcHeaderBarStyle{
    width: 100%;
    height:9% !important;
    background-repeat:no-repeat;
}

.cgcProfilePanel{
    width: 100%;
    padding-left: 55px;
    padding-bottom:0px;
    padding-top:10px;
}

.cgcNavigationButton{
    text-align: left;
    text-shadow: none;
    font-size: 13px !important;
    padding: 0px 8px !important;
    /* border: 0px !important; */
    height: 31px !important;
    line-height: 31px;
    background-color: #FFFFFF !important;
    width: auto !important;
}

.cgcDockerNavicationHeader{
    border-width: 0px 0px 2px 0px;
    height: 34px;
} 

.cgcNavigationEnabled{
    height: 32px !important;
    width: 100%;
    border-width: 0px  0px 2px 0px;
}

.cgcDeactive{
    border: 0px !important;
    background-color: #FFFFFF;
    background: #FFFFFF;
    height: 31px !important;
}

.cgcActiveNavigator{
    border-width: 0px 0px 3px 0px !important;
    height: 34px !important;
}

.cgcViewPanelHeader{
    height:32px;
    line-height:32px;
    vertical-align:middle;
}

.cgcViewPanelHeaderFullScreenOffScreenShare{
    height: 42px;
    vertical-align: middle;
    padding: 6px;
}

.cgcViewPanelHeaderFullScreenOffVideo{
    height: 42px;
    vertical-align: middle;
    padding: 6px;
}


.cgcViewPanelHeaderFullScreenOnScreenShare{
    height: 42px;
    padding: 6px;
}

.cgcViewPanelHeaderFullScreenOnVideo{
    height: 42px;
    vertical-align: middle;
    padding: 6px;
}

.cgcChatPanelBorderColor{
/*     border : 1px solid #E5E6E7 ; */
}

.cgcVideoPanelBorder{
/*     border-top : 16px solid #3a3a3a; */
/*     border-left:15px solid #3a3a3a; */
/*     border-right:15px solid #3a3a3a; */
/*     border-bottom:16px solid #3a3a3a; */
}

.cgcVideoPanelBackground{
	background-color:#3A3A3A;
}

.cgcScreenPanelBorder{
/*     border-top : 16px solid #3a3a3a; */
/*     border-left:15px solid #3a3a3a; */
/*     border-right:15px solid #3a3a3a; */
/*     border-bottom:16px solid #3a3a3a; */
}

.cgcScreenPanelBackground{
	background-color:#3A3A3A;
}

.cgcRemoteVideoContainer {
	background-color: #000000;
	position: relative;
	margin: auto !important;
	height: 0px;
	width: 0px;
}
.cgcRemoteVideo {
	position: absolute;
	background-color: #000000;
	height: 100%;
	width:100%;
	border: none;
}

.cgcLocalVideo {
    position: absolute;
    top: auto;
    right: 30px;
    left: auto;
    bottom: -20px;
     height: 25%;
    max-width: 25%;
    background-color: #000000;
    z-index: 99;
    border-radius: 6px;
    border: 1px;
}

.cgcVideoPanel .cgcLocalVideo{
	bottom: 10px;
	right: 10px;
}

.cgcSelfView{
    cursor: hand;
	cursor: pointer;
	width: 24px;
	height: 24px;
	z-index: 20;
	position: absolute;
	right: 5px;
	left: auto;
	top: 5px;
	display: block;
}

.cgcDialBackground{
    background-color:#FFFFFF;
}

/* .cgcParticipantMessageBackground{ */
/*     background-color:#FFF1E2; */
/* } */

.cgcGuestMessageBackground{
    background-color:#FFFFFF;
}

.cgcChatInfoBackground{
    min-height: 16px;
    font-size: 12px;
}

.cgcChatErrorBackground{
    padding: 6px 15px;
    height: 16px;
    font-size: 16px;
}

.cgcChatUserInfo{
    vertical-align: top;
}

.cgcChatInfo{
    vertical-align: baseline;
}

.cgcDesktopShareImgButton{
    cursor: hand; 
    cursor: pointer;
    padding: 1px;
    font-weight: bold;
    font-size: 11px;
    height: 24px !important;
	width: 54px;
	max-width:54px;
	min-width:24px;
	border-radius: 12px;
	border: 0px !important;
	box-shadow: none !important;
	background-image: none !important;
	
}

/* .cgcDesktopSharePanel{ */
/*     border: 0px solid; */
/*     padding:0px; */
/*     background-color: #1B1A1A; */
/*     max-height:400px; */
/*     width:275px; */
/* } */

.cgcDesktopSharePopup{
    padding: 25px;
    vertical-align: middle !important;
    border: 1px;
    border-radius: 6px;
    width: 210px;
    position: absolute;
    z-index: 21 !important;
    display: flex;
    flex-direction: column;
}

.cgcDesktopSharePopupIcon{
	margin-bottom: 15px;
    width: 36px;
    height: 36px;
    align-self: center;
}

.cgcDesktopSharePopupText{
    font-size: 12px;
    border-bottom: 0px;
    font-weight: 500;
    display: inline;
    margin-bottom: 25px;
}

.cgcDesktopSharePopupButton{
    cursor: pointer;
    padding: 1px;
    font-size: 11px;
    height: 24px !important;
    width: 54px;
    max-width: 54px;
    min-width: 24px;
    border-radius: 4px;
    border-width: 1px;
    box-shadow: none !important;
    background-image: none !important;
    top: 175px;
}

.cgcShareButtonHoverCover{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    border-radius: 4px;
}

.scrollbar-macosx > .scroll-element,
.scrollbar-macosx > .scroll-element div
{
	background: none;
	border: none;
	margin: 0;
	padding: 0;
	position: absolute;
	z-index: 10;
}
 
.scrollbar-macosx > .scroll-element div {
	display: block;
	height: 100%;
	left: 0;
	top: 0;
	width: 100%;
}
 
.scrollbar-macosx > .scroll-element .scroll-element_track { 
	display: none; 
}
.scrollbar-macosx > .scroll-element .scroll-bar {
	background-color: #6C6E71;
	display: block;
	 
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	 
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	 
	-webkit-transition: opacity 0.2s linear;
	-moz-transition: opacity 0.2s linear;
	-o-transition: opacity 0.2s linear;
	-ms-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
}
.scrollbar-macosx:hover > .scroll-element .scroll-bar,
.scrollbar-macosx > .scroll-element.scroll-draggable .scroll-bar {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity=70);
	opacity: 0.7;
}
 
 
.scrollbar-macosx > .scroll-element.scroll-x {
	bottom: 0px;
	height: 0px;
	left: 0;
	min-width: 100%;
	overflow: visible;
	width: 100%;
}
 
.scrollbar-macosx > .scroll-element.scroll-y {
	height: 100%;
	min-height: 100%;
	right: 0px;
	top: 0;
	width: 0px;
}
 
/* scrollbar height/width & offset from container borders */
.scrollbar-macosx > .scroll-element.scroll-x .scroll-bar { 
	height: 7px; min-width: 10px; top: -9px; 
}

.scrollbar-macosx > .scroll-element.scroll-y .scroll-bar { 
	left: -9px; min-height: 10px; width: 7px; 
}
 
.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_outer { 
	left: 2px; 
}

.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_size { 
	left: -4px; 
}
 
.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_outer { 
	top: 2px; 
}

.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_size { 
	top: -4px; 
}
 
/* update scrollbar offset if both scrolls are visible */
.scrollbar-macosx > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { 
	left: -11px; 
}

.scrollbar-macosx > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { 
	top: -11px; 
}


/***************************************************
 * The Customize CSS Classes in starts from here.
 ***************************************************/
.bsftPrimaryBackground{
	background-color: #2dbd9b !important;
}
.bsftPrimaryButton{
	background-color: #2DBD9B !important;
}
.bsftPrimaryButton[disabled]{
	opacity: 0.5 !important;
}
.bsftPrimarySeparator{
	border-color: #2DBD9B !important;
	border-style: solid;
}
.bsftPrimaryButtonReverse{
	color: #FFFFFF !important;
}
.bsftCallControlsBackground{
	background-color: #F0F0F0 !important;
}
.bsftChatBackground{
	background-color: #f8f8f8 !important;
}
.bsftIncomingChatBalloon{
	background-Color: #FFFFFF !important;	
}
.bsftOutgoingChatBalloon{
	background-Color: #627789 !important;	
}
.bsftIcon{
	color: #2d2d2d;
}
.bsftSelectedIcon{
	color: #2dbd9b !important;
}
.bsftSymbolicRed{
	Color: #FF3347 !important;
}
/* .bsftHoverBackground { */
/* 	background-Color: #000000 !important; */
/* 	opacity: 0.1; */
/* } */
.bsftHoverBackground {
	background-Color: #000000 !important;
	opacity: 0;
}
:not(.bsftDisabledBG) > .bsftHoverBackground:hover {
	opacity: 0.1 !important;
}
.active > .bsftHoverBackground {
	opacity: 0.1 !important;
}
.active > .bsftHoverBackground:hover {
	opacity: 0.2 !important;
}

.bsftShareButtonHoverBackground{
	background-Color: #000000 !important;
	opacity: 0;
}
.bsftShareButtonHoverBackground:hover,
.active > .bsftShareButtonHoverBackground{
	opacity: 0.15 !important;
}

.bsftDimmedText:-ms-input-placeholder{
	color: #b4b4b4 !important;
}
.bsftDimmedText::-webkit-input-placeholder {
	color: #b4b4b4 !important;
}

 .bsftDimmedText::-ms-clear {
    display: none;
}

.bsftPrimaryText{
	color: #FFFFFF !important;
}
.bsftCallBackground{
	background-Color: #0D2C3E !important;
}
.bsftHeaders{
	color: #323232 !important;
}
.bsftIncomingChatText{
	color: #323232 !important;
}
.bsftOutgoingChatText{
	color: #FFFFFF !important;
}
.bsftChatPrimaryText{
	color: #2BAA85 !important;
}
.bsftChatSecondaryText{
	color: #b4b4b4 !important;
}
.bsftSeparators{
	border-color: #dcdcdc !important;
	border-style: solid;
}
.bsftInputBoxBorder{
	border-color: #dcdcdc !important;
	border-style: solid;
}
/* .bsftInputFieldOutline{ */
/*     outline-color: #c4e8dd !important; */
/*     outline-style: solid; */
/* } */
.onyx-input-decorator.onyx-focused.bsftInputFieldOutline{
	border-color: #c4e8dd !important;
    border-style: solid;
}
.bsftAppNotification{
    border-style: solid;
    border-color: #FFDA00 !important;
}
.bsftAppNotificationBackground{
	background-color: #F8F8F8 !important;
}
.bsftAppNotificationText{
	color: #323232 !important;
}
.bsftBadgeText{
	color: #323232 !important;
}
.bsftBadgeBackground{
	background-color: #DCDCDC !important;
}
/* .bsftAccentText{ */
/* 	color: #2BAA85 !important; */
/* } */
.bsftAccentText > a{
	color: #2BAA85 !important;
}
.bsftAccentText > a {
	text-decoration: none !important;
	outline: none;
}

.bsftWelcomeScreenDesc > a {
	color: #475561 !important;
	outline: none;
}

.bsftTooltipBackground{
	background-color: #323232 !important;
}
.bsftTooltipText{
	color: #ffffff !important;
}

.bsftVersionText{
	color: #969696 !important;
}

.bsftPrimaryContentText{
	color: #333333 !important;
}

.bsftContentBackground{
	background-color: #FFFFFF !important;
}

.bsftTertiaryContentText{
	color: #C0C0C0 !important;
}

.bsftChatErrorFontColor{
    color:#FF0000;
}

.bsftAlternateDialInNumbersPopup:after{
    border-color: #2DBD9B transparent;
}

.bsftAlternateDialInNumbersPopupBackground{
    background-color: #FFFFFF; 
}

.bsftWelcomeScreenPopupBackground{
	background-color: #FFFFFF;
}

.bsftSharePopupBackground{
	background-color: #F0F0F0;
}

.bsftPrimaryButtonBorder{
	border-color: #2DBD9B !important;
	border-style: solid;
}

.bsftDefaultAvatarBorder{
	border-color: #2DBD9B !important;
	border-style: solid;
}

.bsftDesktopSharePopupCancleBtn{
	background-color: #FFFFFF;
}
/***************************************************
 * The Customize CSS Classes ends here.
 ***************************************************/

/* source\style\jquery.scrollbar.css */

/*************** SCROLLBAR BASE CSS ***************/

.scroll-wrapper {
    overflow: hidden !important;
    padding: 0 !important;
    position: relative;
}

.scroll-wrapper > .scroll-content {
    border: none !important;
    box-sizing: content-box !important;
    height: auto;
    left: 0;
    margin: 0;
    max-height: none !important;
    max-width: none !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    padding: 0;
    position: relative !important;
    top: 0;
    width: auto !important;
}

.scroll-wrapper > .scroll-content::-webkit-scrollbar {
    height: 0;
    width: 0;
}

.scroll-element {
    display: none;
}
.scroll-element, .scroll-element div {
    box-sizing: content-box;
}

.scroll-element.scroll-x.scroll-scrollx_visible,
.scroll-element.scroll-y.scroll-scrolly_visible {
    display: block;
}

.scroll-element .scroll-bar,
.scroll-element .scroll-arrow {
    cursor: default;
}

.scroll-textarea {
    border: 1px solid #cccccc;
    border-top-color: #999999;
}
.scroll-textarea > .scroll-content {
    overflow: hidden !important;
}
.scroll-textarea > .scroll-content > textarea {
    border: none !important;
    box-sizing: border-box;
    height: 100% !important;
    margin: 0;
    max-height: none !important;
    max-width: none !important;
    overflow: hidden !important;
    outline: none;
    padding: 2px;
    position: relative !important;
    top: 0;
    width: 100% !important;
}
.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
    height: 0;
    width: 0;
}




/*************** SIMPLE INNER SCROLLBAR ***************/

.scrollbar-inner > .scroll-element,
.scrollbar-inner > .scroll-element div
{
    border: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 10;
}

.scrollbar-inner > .scroll-element div {
    display: block;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}

.scrollbar-inner > .scroll-element.scroll-x {
    bottom: 2px;
    height: 8px;
    left: 0;
    width: 100%;
    display:none;
}

.scrollbar-inner > .scroll-element.scroll-y {
    height: 100%;
    right: 2px;
    top: 0;
    width: 8px;
}

.scrollbar-inner > .scroll-element .scroll-element_outer {
    overflow: hidden;
}

.scrollbar-inner > .scroll-element .scroll-element_outer,
.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);
    opacity: 0.4;
}

.scrollbar-inner > .scroll-element .scroll-element_track { background-color: #c2c2c2; }
.scrollbar-inner > .scroll-element .scroll-bar { background-color: #919191; }
.scrollbar-inner > .scroll-element:hover .scroll-bar { background-color: #666666; }
.scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar { background-color: #666666; }


/* update scrollbar offset if both scrolls are visible */

.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -12px; }
.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -12px; }


.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -12px; }
.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -12px; }
.scroll-element.scroll-x {
    display: none !important;
}