/* AutoComplete */

/* Custom css */

#vista{
    font-family: 'exodemibold' !important;
    text-transform: uppercase !important;
}

ul.autocomplete
{
	margin: -2px 0 0 0;
	padding: 0;
	list-style: none;
	border-top: none;
	border-right: 1px solid #b2b2b2;
	border-bottom: 1px solid #b2b2b2;
	border-left: 1px solid #b2b2b2;
	border-radius: 0 0 5px 5px;

	background: #fff;
	font: 10px Verdana;

	box-shadow: inset 3px 0 3px rgba(0,0,0,0.1);
	-moz-box-shadow: inset 3px 0 3px rgba(0,0,0,0.1);
	-webkit-box-shadow: inset 3px 0 3px rgba(0,0,0,0.1);
}

ul.autocomplete a
{
	display: block;
	text-decoration: none;
	color: #000;
	padding: 2px;
	outline: none;
}

ul.autocomplete a.selected
{
	background: #e0e0e0;
}

ul.autocomplete a span
{
	font-weight: bold;
}

ul.autocomplete li.title
{
	padding: 4px 2px;
	font-weight: bold;
	background: #cfcfcf;
	border-bottom: 1px solid #9f9f9f;
}

/* End AutoComplete */

#overlay img
{
	border: 0;
}

a:link
{
	color: #000;
}

.overlayContent
{
	z-index: 91;
	background-color: #fff;
	display: none;
	position: absolute;
	width: 500px;
	top: 50px;
	left: 50px;
	height: 400px;
	border: 2px solid #000;
	padding: 10px;
}

body
{
	background-color: #666;
	margin: 0;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 12px;
	color: #333;
}

table
{
	border-collapse: collapse;
	border-spacing: 0;
}

table td
{
	vertical-align: top;
	color: #000;
	line-height: 16px;
	padding: 0;
}

input, select, textarea
{
	padding: 1px;
	margin: 1px !important;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 11px;
}

.AdminMenu a
{
	color: #fff;
}

.AdminMenuSelected
{
	font-weight: bold;
}

.AdminMenuSelected a
{
	color: #a0c696;
}

.FontSmall
{
	color: #000;
	line-height: 16px;
}

.FontBold
{
	color: #000;
	line-height: 16px;
	font-weight: bold;
}

.FontSubMenu
{
	color: #000;
	text-align: right;
	padding-right: 10px;
}

.FontSubMenuCords
{
	color: #000;
	padding-left: 10px;
}

.ContainerHeader
{
	background-image: url(../../Images/header_bg.jpg);
	background-color: #7f7e7f; /*#466f93;*/
	color: #fff;
	font-weight: bold;
	padding: 2px 2px 2px 5px;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
}

.ContainerHeaderIndex
{
	background-image: url(../../Images/blue_index_bg.jpg); /*background-image: url(../../Images/header_index_bg.jpg);*/
	background-color: #466f93; /*#7f7e7f;*/
	color: #fff;
	font-weight: bold;
	font-size: 12px;
	padding: 2px 2px 2px 5px;
	border: 1px solid #fff;
}

.ContainerHeaderTabs
{
	background-image: url(../../Images/header_bg.jpg);
	background-color: #7f7e7f; /*#466f93;*/
	color: #fff;
	font-weight: bold;
	padding: 0 2px;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
}

.ContainerHeaderTabLeftSel
{
	background-image: url(../../Images/tabs/blueh_tab_left_sel_trans.png);
	width: 4px;
	height: 20px;
}

.ContainerHeaderTabBgSel
{
	background-image: url(../../Images/tabs/blueh_tab_bg_sel_trans.png);
	height: 8px; /*20px;*/
	cursor: pointer;
	line-height: 0;
	padding: 12px 5px 0 5px;
}

.ContainerHeaderTabRightSel
{
	background-image: url(../../Images/tabs/blueh_tab_right_sel_trans.png);
	width: 4px;
	height: 20px;
}

.ContainerHeaderTabRightXSel
{
	background-image: url(../../Images/tabs/blueh_tab_right_x_sel_trans.png);
	width: 10px;
	height: 20px;
}

.ContainerHeaderTabLeft
{
	background-image: url(../../Images/tabs/blueh_tab_left_trans.png);
	width: 4px;
	height: 20px;
}

.ContainerHeaderTabBg
{
	background-image: url(../../Images/tabs/blueh_tab_bg_trans.png);
	height: 8px; /*20px;*/
	cursor: pointer;
	line-height: 0;
	padding: 12px 5px 0 5px;
	font-weight: lighter;
}

.ContainerHeaderTabRight
{
	background-image: url(../../Images/tabs/blueh_tab_right_trans.png);
	width: 4px;
	height: 20px;
}

.ContainerHeaderTabRightX
{
	background-image: url(../../Images/tabs/blueh_tab_right_x_trans.png);
	width: 10px;
	height: 20px;
}

.ContainerHeaderSettings
{
	background-image: url(../../Images/header_bg.jpg);
	background-color: #7f7e7f; /*#466f93;*/
	color: #fff;
	font-weight: bold;
	padding: 2px;
	border-right: 1px solid #fff;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
}

.ContainerHeaderSettingsInside
{
	background-image: url(../../Images/header_bg.jpg);
	background-color: #7f7e7f; /*#466f93;*/
	color: #fff;
	font-weight: bold;
	padding: 2px;
	border-top: 1px solid #fff;
}

.ContainerBody
{
	background-color: #b4bbbf;
	color: #000;
	margin: 0;
	border: 1px solid #fff;
	padding: 0;
}

.ContainerHeader td
{
	color: #fff;
	font-weight: bold;
}

.ContainerHeader a:Hover
{
	text-decoration: none;
}

.ContainerHeader a
{
	color: #fff;
}

.HeaderItemStyle
{
	color: #000;
	font-weight: bold;
	line-height: 16px;
}

.HeaderItemStyle a
{
	color: #000;
}

.ItemStyle
{
	background-color: #f9f9f9;
	color: #000;
	line-height: 16px;
}

.ItemStyle td
{
	padding: 2px;
}

.ItemStyle a
{
	color: #000;
}


.AlternatingItemStyle
{
	background-color: #f1f1f1;
	color: #000;
	line-height: 16px;
}

.AlternatingItemStyle td
{
	padding: 2px;
}

.AlternatingItemStyle a
{
	color: #000;
}

.UserDetailsHeader
{
	width: 100%;
	border-bottom: 1px solid #000;
	font-weight: bold;
	color: #fff;
	background: #466f93;
}

.UserDetailsHeader a
{
	color: #fff;
}

.SelectedStyle
{
	width: 100%;
	background-color: #a0c696;
	font-weight: bold;
	color: #000;
}

.SelectedStyle td
{
	padding: 2px;
}

.SelectedStyle a
{
	font-weight: bold;
	color: #000;
}

.menu-control
{
	background: #395976;
	background-image: url(../../Images/blue_menu_bg.jpg);
	margin: 0;
	border-bottom: 1px solid #fff;
}

.submenu-control
{
	margin: 0;
	border-bottom: 1px solid #fff;
	background: #dcdcdc; /*#b4bbbf;*/
}

.Tab
{
	/*background: #395976;*/
	color: #fff;
	font-weight: bold;
	padding: 2px 10px;
}

.Tab:hover
{
	background: #466f93;
	color: #fff;
	font-weight: bold;
	padding: 2px 10px;
}

.Tab a
{
	color: #fff;
}

.TabSelected
{
	background: #283f54;
	color: #fff;
	font-weight: bold;
	padding: 2px 10px;
}

.TabSelected:hover
{
	background: #466f93;
	color: #fff;
	font-weight: bold;
	padding: 2px 10px;
}

.TabSelected a
{
	color: #fff;
}

.FormViewItem
{
	background-color: #f9f9f9;
	color: #000;
	line-height: 16px;
}

.FormViewItem a
{
	color: #000;
}

.FormViewItem tbody td
{
	padding: 2px;
}

.WizardItemStyle
{
	background-color: #f9f9f9;
	color: #000;
	font-size: 11px;
}

.WizardItemStyle a
{
	color: #000;
}

.WizardHeaderStyle
{
	background-color: #fff; /*#a0c696;*/
	font-weight: bold;
	line-height: 16px;
	padding: 5px;
	height: 20px;
}

.WizardHeaderStyle a
{
	color: #000;
}

.Menue
{
	border: 1px solid #000;
	color: #000;
	line-height: 16px;
	position: absolute;
	z-index: 300;
	display: none;
	padding: 2px 2px 2px 2px;
	background: #fff;
	filter: alpha(Opacity=75);
	opacity: .75;
}

.Menue a
{
	color: #000;
	font-weight: bold;
}

.Menue a:Hover
{
	background-color: #d1e8ea;
	text-decoration: none;
}


/* child of #desktopTitlebar */
#pnlToolbar table td {
	vertical-align: middle;
	font-family: Tahoma, Geneva, sans-serif;
    	font-size: 12px;
    	text-transform: capitalize;
	/* could almost add "padding-left: 10px;"" also */
}

.LoginWindow
{
	margin-left: auto;
	margin-right: auto;
	width: 300px;
	border-collapse: collapse;
	border-spacing: 0;
	background-color: #466f93;
}

.DeleteIcon
{
	background-image: url('../../images/remove_icon.gif');
	width: 12px;
	height: 12px;
	cursor: pointer;
	background-repeat: no-repeat;
	margin-top: 3px;
}

.OnlineIcon
{
	background-image: url('../../images/icons/green.gif');
	/*width: 16px;*/
	height: 16px;
	background-repeat: no-repeat;
	background-position: center;
}

.PendingIcon
{
	background-image: url('../../images/icons/yellow.gif');
	/*width: 16px;*/
	height: 16px;
	background-repeat: no-repeat;
        background-position: center;
}

.OfflineIcon
{
	background-image: url('../../images/icons/red.gif');
	/*width: 16px;*/
	height: 16px;
	background-repeat: no-repeat;
	background-position: center;
}

.NeverSeenIcon
{
	background-image: url('../../images/icons/gray.gif');
	/*width: 16px;*/
	height: 16px;
	background-repeat: no-repeat;
	background-position: center;
}

/* actual background-color is set programatically */
.UserColorIndicatorIcon
{
	width: 5px;
	height: 5px;
	margin-top: 6px;
	margin-left: 0px;
	font-size: 1px;
}

.LocalizationTranslatedColorIndicatorIcon
{
	width: 10px;
	height: 10px;
	margin-top: 6px;
	font-size: 1px;
	background-repeat:no-repeat;
	background-size:10px 10px;
	background-position:left top;
	background-image: url('../../images/icons/translated.png');
}

.LocalizationNotTranslatedColorIndicatorIcon
{
	width: 10px;
	height: 10px;
	margin-top: 6px;
	font-size: 1px;
	background-repeat:no-repeat;
	background-size:10px 10px;
	background-position:left top;
	background-image: url('../../images/icons/not_translated.png');
}

.LocalizationTranslationIndicatorHeader
{
	width: 10px;
}

.LocalizationLocationHeader
{
	width: 80px;
}

.LocalizationCustomTranslation
{
	width: calc(100% - 35px);
	width: -moz-calc(100% - 35px);
	width: -webkit-calc(100% - 35px);
	width: -o-calc(100% - 35px);
}

/* deprecated(?) */
.tabSettingsSelected
{
	background-color: #f9f9f9;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	border-bottom: 1px solid #f9f9f9;
	width: 10px;
	padding: 0 5px 0 0;
	white-space: nowrap;
	overflow: visible;
}

.contentHidden
{
	/*visibility: hidden;*/
	display: none;
}

.contentDisplay
{
	visibility: visible;
	display: block;
}

.tabSettingsUnselected
{
	border: 1px solid #000;
	background-color: #999;
	width: 10px;
	padding: 0 5px 0 0;
	white-space: nowrap;
	overflow: visible;
}

.deviceTbl
{
	margin: 0;
	padding: 0;
	border-collapse: collapse;
}

.deviceTblOdd
{
	background-color: #f9f9f9;
	white-space: nowrap;
	padding: 0 20px 0 0;
}

.deviceTblEven
{
	background-color: #e5e5e5;
	white-space: nowrap;
	padding: 0 20px 0 0;
}

/* Custom Map CSS */

.zoomControl
{
	top: 0;
	left: 0;
	background-color: #000;
	filter: alpha(Opacity=72);
	opacity: .72;
	padding: 3px;
}

.zoomControl #zoomIn
{
	width: 35px;
	height: 35px;
	background-image: url(../../images/mapcontrol/custom_map_zin.gif);
	margin-bottom: 5px;
}

.zoomControl #zoomOut
{
	width: 35px;
	height: 35px;
	background-image: url(../../images/mapcontrol/custom_map_zout.gif);
}

/* Styles Accordion control */

.AccordionStep
{
	width: 100%;
	margin: 0;
	padding: 0;
	border-collapse: collapse;
	background-image: url(../../WebControls/Images/EventRuleSetup/bg.jpg);
	height: 29px;
}

.AccordionStepError
{
	width: 100%;
	margin: 0;
	padding: 0;
	border-collapse: collapse;
	background-image: url(../../webcontrols/Images/EventRuleSetup/bg_red.jpg);
	height: 29px;
}

.AccordionStepWarn
{
	width: 100%;
	margin: 0;
	padding: 0;
	border-collapse: collapse;
	background-image: url(../../webcontrols/Images/EventRuleSetup/bg_yellow.jpg);
	height: 29px;
}

.accordion-panel-txt
{
	font-weight: bold;
	color: #fff;
	line-height: 20px;
}

.accordion-col-txt
{
	font-size: 14px;
	color: #385976;
	line-height: 20px;
	padding: 2px 0;
	text-decoration: none;
}

.accordion-col-txt-bold
{
	font-size: 14px;
	font-weight: bold;
	color: #385976;
	line-height: 20px;
	padding: 2px 0;
}

.accordion-col-txt-inactive
{
	font-size: 14px;
	color: #acacac;
	line-height: 20px;
	padding: 2px 0;
}

.accordion-col-txt-cont
{
	color: #385976;
	line-height: 20px;
	padding: 2px 0;
}

.accordion-col-bottom
{
	padding: 0;
	margin: 0;
	border-collapse: collapse;
	height: 1px;
	width: 100%;
	background-color: #cfcfcf;
}

.accordion-note-field
{
	width: 100%;
	margin: 0;
	padding: 0;
	text-indent: 20px;
	border-collapse: collapse;
	background-color: #a9a9a9;
	background-image: url(../../webcontrols/Images/EventRuleSetup/bg_note.jpg);
	background-position: top;
	background-repeat: repeat-x;
}

.accordion-note-txt
{
	color: #fff;
	line-height: 18px;
}

.accordion-varning-icon
{
	vertical-align: bottom;
	padding: 1px 10px;
}

.accordion-value-td
{
	width: 120px;
	vertical-align: top;
}

.accordion-arrow-img
{
	border: 0;
	padding: 0 5px 0 0;
}

/* Styles VTabs control */

.VTabs
{
	/* padding: 0; */
	display: table;
	width: 100%;
	height: 100%;
}

.VTabs ul.VTabsList
{
	display: table-cell;
	vertical-align: top;
	width: 200px;
	height: 100%;
	list-style-type: none;
	padding: 0;

	/*filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#33000000', endColorstr='#00ffffff');*/
	background-image: -moz-linear-gradient(left, rgba(0,0,0,0.2) 0%, transparent 100%);
	background-image: linear-gradient(left, rgba(0,0,0,0.2) 0%, transparent 100%);
	background-image: -o-linear-gradient(left, rgba(0,0,0,0.2) 0%, transparent 100%);
	background-image: -moz-linear-gradient(left, rgba(0,0,0,0.2) 0%, transparent 100%);
	background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.2) 0%, transparent 100%);
	background-image: -ms-linear-gradient(left, rgba(0,0,0,0.2) 0%, transparent 100%);

	background-image: -webkit-gradient(
	linear,
	left center,
	right center,
	color-stop(0, rgba(0,0,0,0.2)),
	color-stop(1, transparent)
	);

	background-size: 5px 100%;
	background-position: 100% 0%;
	background-repeat: repeat-y;
	padding-right: 5px;
	position: relative;
	z-index: 2;
}

.VTabs ul.VTabsList > li
{
	cursor: pointer;
	padding: 5px 20px;
	font-size:12px;
	color:#333;
	text-shadow: 0 1px 0 #FFF;

	border-bottom: 1px solid #c9cdd0;

	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
	background-image: linear-gradient(top, rgb(255,255,255) 0%, rgb(237,237,237) 100%);
	background-image: -o-linear-gradient(top, rgb(255,255,255) 0%, rgb(237,237,237) 100%);
	background-image: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(237,237,237) 100%);
	background-image: -webkit-linear-gradient(top, rgb(255,255,255) 0%, rgb(237,237,237) 100%);
	background-image: -ms-linear-gradient(top, rgb(255,255,255) 0%, rgb(237,237,237) 100%);

	background-image: -webkit-gradient(
	linear,
	right top,
	right bottom,
	color-stop(0, rgb(255,255,255)),
	color-stop(1, rgb(237,237,237))
	);
}

.VTabsActiveTab
{
	padding-bottom: 15px !important;
}

.VTabs ul.VTabsList > li.VTabsAlert
{
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eccfd0', endColorstr='#ffe0e1') !important;
	background-image: linear-gradient(bottom, rgb(236,207,208) 0%, rgb(255,224,225) 100%) !important;
	background-image: -o-linear-gradient(bottom, rgb(236,207,208) 0%, rgb(255,224,225) 100%) !important;
	background-image: -moz-linear-gradient(bottom, rgb(236,207,208) 0%, rgb(255,224,225) 100%) !important;
	background-image: -webkit-linear-gradient(bottom, rgb(236,207,208) 0%, rgb(255,224,225) 100%) !important;
	background-image: -ms-linear-gradient(bottom, rgb(236,207,208) 0%, rgb(255,224,225) 100%) !important;

	background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, rgb(236,207,208)),
	color-stop(1, rgb(255,224,225))
	) !important;
}

.VTabs ul.VTabsList > li.VTabsAlert.VTabsActiveTab:after {
	content:url(../../Images/tab_arrow_alert.png) !important;
}

.VTabs ul.VTabsList > li a
{
	text-decoration: none;
	color: #333;
}

.VTabsActiveTab > a
{
	font-weight: bold;
	position: relative;
	top: 5px; /* half the extra bottom padding */
}

.VTabsActiveTab:after {
	float: right;
	position: relative;
	content:url(../../Images/tab_arrow.png);
	right: -27px; /* - (image width + padding) */
}

.VTabs div.VTabsPanel
{
	display: table-cell;
	z-index: 1;
	position: relative;
	left: -5px;
}

/* Event Control Styles */

.EventExpressionRow
{
	background: #f1f1f1;
}

.AltEventExpressionRow
{
	background: #e7e7e7;
	margin-top: 1px;
}

.WizardContent
{
	white-space: nowrap;
	padding: 2px;
}

/* Context Menu */

div.contextMenu ul
{
	margin: 0;
	position: absolute;
	list-style: none;
	display: none;
	font-weight: bold;
	padding: 2px;
	border: 1px solid #3f3f3f;
	background: #fff url(../../../CommonScripts/mocha-ui/themes/vt_default/images/bg-dropdown.gif) repeat-y;
	width: 184px;
	z-index: 8000;
	line-height: 16px;
}

div.contextMenu a
{
	display: block;
	outline: none;
}

div.contextMenu ul li a
{
	text-decoration: none;
	position: relative;
	padding: 1px 9px 1px 25px;
	width: 150px;
	color: #3f3f3f;
	font-weight: normal;
}

div.contextMenu ul li ul
{
	/*Used to create scrollable submenu in context menu*/
	max-height: 80vh;
	overflow-y: auto;
	overflow-x: hidden;
}

div.contextMenu ul li a:hover
{
	text-decoration: none;
	background: #666;
	color: #fff;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

div.contextMenu ul li a.arrow-right, div.contextMenu ul li a:hover.arrow-right
{
	background-image: url(../../../CommonScripts/mocha-ui/themes/vt_default/images/arrow-right.gif);
	background-repeat: no-repeat;
	background-position: right center;
}

div.contextMenu li ul
{
	margin: -20px 0 0 183px;
}

div.contextMenu a.tick_check
{
	background: url(../../../CommonScripts/mocha-ui/themes/vt_default/images/checked_icon.gif) 3px center no-repeat;
}

div.contextMenu a.radio
{
	background: url(../../../CommonScripts/mocha-ui/themes/vt_default/images/radio_icon.gif) 5px center no-repeat;
}

div.contextMenu li:hover
{
	position: static;
}

.divider
{
	margin-top: 2px;
	padding-top: 3px;
	border-top: 1px solid #ebebeb;
}

/* HACK to remove SiteAdmin styles of reused control */

fieldset
{
	border: 0;
	padding: 0;
	margin: 0;
}

legend
{
	display: none;
}

.divRowDivider
{
	/*border-bottom: dotted thin #999;*/ /*padding: 5px 0 8px 0;*/
	overflow: hidden;
}

.divColLeft
{
	float: left;
	white-space: normal; /*margin-right:10px;*/
	width: 150px;
}

.divColRight
{
	float: left;
}

.label
{
	font-weight: bold;
}

/* Context specific help icon */

.ContextHelp
{
	background: url(../../Images/help_icon.png) top left no-repeat;
	width: 16px;
	height: 16px;
	cursor: help;
}

.right
{
	float: right;
}

.dom_marker
{
	position: absolute;
	z-index: 998;
}

.dom_marker_label
{
	background-color: #efefef;
	border: 1px solid #000;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	font: bold 10px verdana,arial,sans serif;
	padding: 1px;
}

/* typical use for popups, calendar, clock etc */
.box-shadow
{
	box-shadow: 8px 8px 14px rgba(0,0,0,0.5);
	-moz-box-shadow: 8px 8px 14px rgba(0,0,0,0.5);
	-webkit-box-shadow: 8px 8px 14px rgba(0,0,0,0.5);
}

/* typical use to get depth in panels, map view for example. */
.inner-box-shadow
{
	box-shadow: inset 8px 8px 14px rgba(0,0,0,0.5);
	-moz-box-shadow: inset 8px 8px 14px rgba(0,0,0,0.5);
	-webkit-box-shadow: inset 8px 8px 14px rgba(0,0,0,0.5);
}



#desktopNavbar ul
{
	box-shadow: 2px 5px 12px rgba(0,0,0,.6);
	-moz-box-shadow: 0 8px 12px rgba(0,0,0,.6);
	-webkit-box-shadow: 0 8px 12px rgba(0,0,0,.6);
}


.popup-menu
{
	position: absolute;
	z-index: 999;
	background: #F9F9F9; /* same as .ItemStyle */
	border: 1px solid #777;
	overflow: auto;
	cursor: default;
}

.popup-menu table tbody tr td
{
	padding: 2px 5px 0px 2px;
}

.popup-menu table tbody tr:hover
{
	background: #466f93; /* same color as clockrow */
}

.popup-menu-sort-handle
{
	background-image: url(../../Images/MapControl/drag_bar.jpg);
	cursor: move; /* todo: alignments and padding etc */
}

.popup-menu table tbody tr.drag-indicator
{
	border-bottom: 1px solid #5e7688;
}

/* --- */

/* todo: rename "toolbar"? generic functionality */
.mapToolBar
{
	position: absolute;
	background: #FFF;
	padding: 1px 4px; /* z-index is set programatically based on container  */
	border: solid 1px #868686;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	box-shadow: 0px 0px 3px rgba(0,0,0,0.6);
	-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.6);
}

.mapToolBar img
{
	margin: 0px;
	padding: 0px;
	cursor: pointer;
}

/* the buttons */
.mapTool {
	/* opacity: 0.8; */
}

.mapTool:hover {
	/* todo: can we make it like greenish via filters or something? */
	/*opacity: 1;	*/
}

/* test. for indicating pressed state */
.mapTool.active {
	/* .. */
}



/* -- */

.bubble
{
	width: 190px;
	position: relative;
	padding: 7px 10px;
	margin: 1em 0 3em;
	background: #FFF;
	border: solid 1px #818181;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px; /* same as class .box-shadow + inset */
	box-shadow: 8px 8px 14px rgba(0,0,0,0.5), inset 0px 2px 1px #FFF;
	-moz-box-shadow: 8px 8px 14px rgba(0,0,0,0.5), inset 0px 2px 1px #FFF;
	-webkit-box-shadow: 8px 8px 14px rgba(0,0,0,0.5), inset 0px 2px 1px #FFF;
	background-image: linear-gradient(bottom, rgb(255,255,255) 30%, rgb(227,227,227) 93%);
	background-image: -o-linear-gradient(bottom, rgb(255,255,255) 30%, rgb(227,227,227) 93%);
	background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 30%, rgb(227,227,227) 93%);
	background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 30%, rgb(227,227,227) 93%);
	background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 30%, rgb(227,227,227) 93%);
	background-image: -webkit-gradient( 		linear, 		left bottom, 		left top, 		color-stop(0.3, rgb(255,255,255)), 		color-stop(0.93, rgb(227,227,227)) 	);
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 10px;
	color: #000;
}

/* background for ':after' below, the edges and "shadow" */
.bubble:before
{
	content: "";
	position: absolute;
	bottom: -21px; /* value = - border-top-width - border-bottom-width */
	left: 25px; /* controls horizontal position */
	border-width: 20px 20px 0;
	border-style: solid;
	border-color: #818181 transparent; /* reduce the damage in FF3.0 */
	display: block;
	width: 0;
}

.bubble:after
{
	content: "";
	position: absolute;
	bottom: -19px; /* value = - border-top-width - border-bottom-width */
	left: 25px; /* controls horizontal position */
	border-width: 20px 20px 0;
	border-style: solid;
	border-color: #fff transparent; /* reduce the damage in FF3.0 */
	display: block;
	width: 0;
}



.bubbleClose
{
	background: #FFF;
	width: 14px;
	height: 13px;
	float: right;
	padding-top: 1px;
	margin: -2px -4px 0 0;
	cursor: pointer;
	font-family: Tahoma, Geneva, sans-serif;
	font-weight: bold;
	font-size: 10px;
	text-align: center;
	color: #000;
	border: solid 1px #666;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	background-image: linear-gradient(bottom, rgb(207,207,207) 0%, rgb(255,255,255) 48%);
	background-image: -o-linear-gradient(bottom, rgb(207,207,207) 0%, rgb(255,255,255) 48%);
	background-image: -moz-linear-gradient(bottom, rgb(207,207,207) 0%, rgb(255,255,255) 48%);
	background-image: -webkit-linear-gradient(bottom, rgb(207,207,207) 0%, rgb(255,255,255) 48%);
	background-image: -ms-linear-gradient(bottom, rgb(207,207,207) 0%, rgb(255,255,255) 48%);
	background-image: -webkit-gradient( 		linear, 		left bottom, 		left top, 		color-stop(0, rgb(207,207,207)), 		color-stop(0.48, rgb(255,255,255)) 	);
	-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.4), inset 0px -1px 0px #ffffff;
	-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.4), inset 0px -1px 0px #ffffff;
	box-shadow: 0px 0px 3px rgba(0,0,0,0.4), inset 0px -1px 0px #ffffff;
}


/* from http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting */
.unselectable
{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* manage workspace table */
#_manageWSTable thead tr
{
	font-weight: bold;
	text-align: center;
}
/* alternating rows */
#_manageWSTable tbody tr:nth-child(odd)
{
	background-color: #f5f7f9;
	padding: 0px;
}
/* todo: lock to bottom of container? */
#saveWSSettingsButton
{
	margin: 5px 5px 5px 5px;
}



/*  experiment */

/*
 * nice to reduce size and visiblity of scrollbars if possible
 * todo: more overloads?
 * todo: disabled now due to some odd effects in floating elements
 */
/*
::-webkit-scrollbar {
	width: 9px;
	height: 9px;
}

::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);
	-webkit-border-radius: 2px;
}

::-webkit-scrollbar-thumb
{
	-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);
	-webkit-border-radius: 2px;
}
*/



/* -- infocontrol. todo: move to separate css */

.InfoControl table
{
	border-collapse: collapse; /* -> cellspacing=0*/ /*table-layout: auto;*/ /* todo: allow wrap? */
}

.InfoControl td
{
	white-space: nowrap;
}


.InfoControl
{
	padding: 5px;
}

.InfoControl thead th
{
	text-align: left;
}

.InfoControl tbody tr:nth-child(odd)
{
	background-color: #f5f7f9; /*padding: 0px;*/ /*?*/
}


/* v2.1 test */

.bubble ul
{
	list-style: none;
	margin: 0;
	padding: 0;
}

.bubble li:first-child
{
	font-weight: bold;
}

.bubble li
{
	padding: 0 0 7px 0;
	margin: 0;
}

/* from Markus's new styling */
.InfoCtrl2ToolBar
{
	width: 100%;
	height: 32px;
	padding: 7px 0 0 0;
	background: #ececec;
	font-family: verdana;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ececec', endColorstr='#ffffff');
	background-image: linear-gradient(bottom, rgb(236,236,236) 0%, rgb(255,255,255) 79%);
	background-image: -o-linear-gradient(bottom, rgb(236,236,236) 0%, rgb(255,255,255) 79%);
	background-image: -moz-linear-gradient(bottom, rgb(236,236,236) 0%, rgb(255,255,255) 79%);
	background-image: -webkit-linear-gradient(bottom, rgb(236,236,236) 0%, rgb(255,255,255) 79%);
	background-image: -ms-linear-gradient(bottom, rgb(236,236,236) 0%, rgb(255,255,255) 79%);
	background-image: -webkit-gradient( 		linear, 		left bottom, 		left top, 		color-stop(0, rgb(236,236,236)), 		color-stop(0.79, rgb(255,255,255)) 	);
}

.InfoCtrl2Wrapper
{
	background: #f5f7f9;
	border-top: 1px solid #d4d4d4;
	border-right: none;
	border-bottom: 1px solid #d4d4d4;
	border-left: none;
	display: table;
	width: 100%;
}

#InfoCtrl2Floater
{
	min-width: 640px;
	overflow: hidden;
}

.InfoCtrl2
{
	width: 100%;
}

.InfoCtrl2 TR
{
	/*background: #f5f7f9;*/
}

.InfoCtrl2 TR:hover
{
	background: #CCC !important;
}

.InfoCtrl2 TD
{
	padding: 7px 0 7px 10px;
	line-height: 10px;
	text-shadow: 0px 1px 0px #ffffff; /*cursor:url(images/metal_hand.png),url(myBall.cur),auto;*/
}

#infoControlUserImageContainer
{
	float: left;
}

.alignLeft
{
	padding-left: 14px;
	float: left;
}

.alignRight
{
	padding-right: 14px;
	float: right;
}

/* end infocontrol */


/* Panels */

.toolbar
{
	width: 100%;
	/*height: 32px;*/
	display: inline-block;
	padding: 7px 0 7px 0;
	background: #ececec;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ececec', endColorstr='#ffffff');
	background-image: -webkit-linear-gradient(bottom, rgb(236,236,236) 0%, rgb(255,255,255) 79%);
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(236,236,236)), color-stop(0.79, rgb(255,255,255)));
	background-image: -moz-linear-gradient(bottom, rgb(236,236,236) 0%, rgb(255,255,255) 79%);
	background-image: -o-linear-gradient(bottom, rgb(236,236,236) 0%, rgb(255,255,255) 79%);
	background-image: -ms-linear-gradient(bottom, rgb(236,236,236) 0%, rgb(255,255,255) 79%);
	background-image: linear-gradient(bottom, rgb(236,236,236) 0%, rgb(255,255,255) 79%);
	clear: both;
}

.alignLeft
{
	float: left;
	padding-left: 7px;
}

.alignRight
{
	float: right;
	padding-right: 7px;
}

.alignLeft input[type="button"], .alignLeft input[type="submit"], .alignRight input[type="button"], .alignRight input[type="submit"]
{
	height: 24px;
}

.valignBottom
{
	position: absolute;
	bottom: 0;
	left: 0;
}

.topBorder
{
	border-top: 1px solid #c3c3c3;
}

.bottomBorder
{
	border-bottom: 1px solid #c3c3c3;
}

.content
{
	/* overflow: auto; */
	overflow: hidden !important;
}

/* Modal windows */

.modalWindowOverlay
{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 20001;
}

.modalWindowContainer
{
	display: block;
	position: absolute;
	z-index: 20002;
	min-width: 300px;
	max-width: 500px;
}

.modalWindowHeader
{
	height: 25px;
}

.modalWindowHeader h3
{
	color: #fff;
}

.modalWindowHeader img
{
	vertical-align: bottom;
	margin-right: 3px;
}

.modalWindowHeader .mochaWindowButton
{
	margin: 5px 10px 0 0;
}

.modalWindowContent
{
	padding: 10px;
}

.modalWindowButtons
{
	float: right;
	margin: 10px 0;
}

.modalWindowButtons input
{
	height: 22px;
	padding: 2px 5px;
	margin: 0 2px;
}

/* Forms */

.form ul, .form dl
{
	margin: 0;
}

.form dt
{
	float: left;
	clear: left;
	position: relative;
	padding: 7px;
	font-size: 12px;
	font-weight: bold;
	text-shadow: 0 1px 0 #fff;
}

.form dd
{
	clear: right;
	margin: 0;
	padding: 7px 7px 7px 175px;
	background: #fff;
	border-bottom: 1px solid #e3e3e3;
}

.form dd:nth-of-type(odd)
{
	background: #f5f7f9;
}

.form dd div
{
	margin: 2px 0 0 0;
	line-height: 10px;
	font-style: italic;
	color: #999;
}

.form dd ul
{
	list-style: none;
	padding-left: 0;
}

/* Validation */

.form dd input.error, .form dd input[type="text"].error, .form dd input[type="password"].error, .form dd input[type="number"].error, .form dd textarea.error
{
	background-color: #ffcbcb !important;
	-moz-box-shadow: inset 1px 3px 5px #e3b5b6 !important;
	-webkit-box-shadow: inset 1px 3px 1px #e3b5b6 !important;
	box-shadow: inset 1px 3px 5px #e3b5b6 !important;
}

.form dd textarea.error
{
	vertical-align: middle;
}

.form dd label.error
{
	margin-left: 20px;
}

div.error
{
	background: #ffcbcb;
	background-image: linear-gradient(bottom, rgb(236,188,188) 0%, rgb(255,203,203) 79%);
	background-image: -o-linear-gradient(bottom, rgb(236,188,188) 0%, rgb(255,203,203) 79%);
	background-image: -moz-linear-gradient(bottom, rgb(236,188,188) 0%, rgb(255,203,203) 79%);
	background-image: -webkit-linear-gradient(bottom, rgb(236,188,188) 0%, rgb(255,203,203) 79%);
	background-image: -ms-linear-gradient(bottom, rgb(236,188,188) 0%, rgb(255,203,203) 79%);
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(236,188,188)), color-stop(0.79, rgb(255,203,203)));
}

.form dd input.warning, .form dd input[type="text"].warning, .form dd input[type="password"].warning
{
	background-color: #fff7bf;
}

div.warning
{
	background: #fff7bf;
	background-image: linear-gradient(bottom, rgb(236,228,177) 0%, rgb(255,248,191) 79%);
	background-image: -o-linear-gradient(bottom, rgb(236,228,177) 0%, rgb(255,248,191) 79%);
	background-image: -moz-linear-gradient(bottom, rgb(236,228,177) 0%, rgb(255,248,191) 79%);
	background-image: -webkit-linear-gradient(bottom, rgb(236,228,177) 0%, rgb(255,248,191) 79%);
	background-image: -ms-linear-gradient(bottom, rgb(236,228,177) 0%, rgb(255,248,191) 79%);
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(236,228,177)), color-stop(0.79, rgb(255,248,191)));
}

/* Accordion */

.accordionHeader
{
	padding: 5px 7px;
	background: #ececec;
	background-image: -webkit-linear-gradient(bottom, rgb(236,236,236) 0%, rgb(255,255,255) 79%);
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(236,236,236)), color-stop(0.79, rgb(255,255,255)));
	background-image: -moz-linear-gradient(bottom, rgb(236,236,236) 0%, rgb(255,255,255) 79%);
	background-image: -o-linear-gradient(bottom, rgb(236,236,236) 0%, rgb(255,255,255) 79%);
	background-image: -ms-linear-gradient(bottom, rgb(236,236,236) 0%, rgb(255,255,255) 79%);
	background-image: linear-gradient(bottom, rgb(236,236,236) 0%, rgb(255,255,255) 79%);
	border-bottom: 1px solid #e3e3e3;
	clear: both;
	font-size: 12px;
	color: #999;
}

.accordionHeaderActive
{
	padding: 9px 7px;
	color: #333;
	font-weight: bold;
}

.accordionHeader span.accordionSummary
{
	font-size: 10px;
}

.accordionHeader img.accordionToggle
{
	margin-right: 5px;
}

.accordionHeader img.error
{
	vertical-align: bottom;
	margin-left: 10px;
}

.accordionDescription
{
	background: #ccc;
	background-image: linear-gradient(bottom, rgb(204,204,204) 84%, rgb(180,180,180) 100%);
	background-image: -o-linear-gradient(bottom, rgb(204,204,204) 84%, rgb(180,180,180) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(204,204,204) 84%, rgb(180,180,180) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(204,204,204) 84%, rgb(180,180,180) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(204,204,204) 84%, rgb(180,180,180) 100%);
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.84, rgb(204,204,204)), color-stop(1, rgb(180,180,180)));
	color: #555;
	padding: 5px 7px;
	font-size: 10px;
}

.accordionContent
{
	overflow: auto;
	position: relative;
}

/* Search field */

.searchContainer
{
	width: 205px !important;
}

.searchFieldContainer, .searchBtnContainer
{
	float: left !important;
}

.searchField
{
	width: 124px !important;
	height: 20px !important;
	margin: 0px !important;
	padding: 1px 15px 1px 3px !important;

	border: solid 1px #b2b2b2 !important;
	-webkit-border-radius: 5px 0px 0px 5px !important;
	-moz-border-radius: 5px 0px 0px 5px !important;
	border-radius: 5px 0px 0px 5px !important;

	-webkit-box-shadow: inset 1px 3px 5px #e1e1e1 !important;
	-moz-box-shadow: inset 1px 3px 5px #e1e1e1 !important;
	box-shadow: inset 1px 3px 5px #e1e1e1 !important;
}

.searchBtn
{
	width: 29px !important;
	height: 24px !important;
	margin: -8px 0px 0px 0px !important;

	background: #F0F0F0 url(../../Images/search_icon.png) no-repeat 7px 4px ;

	border-top: solid 1px #b2b2b2 !important;
	border-right: solid 1px #b2b2b2 !important;
	border-bottom: solid 1px #b2b2b2 !important;
	border-left: none !important;

	-moz-border-radius: 0px 5px 5px 0px !important;
	-webkit-border-radius:  0px 5px 5px 0px !important;
	border-radius: 0px 5px 5px 0px !important;

	-moz-box-shadow: inset 1px 1px 0px #FFF !important;
	-webkit-box-shadow: inset 1px 1px 0px #FFF !important;
	box-shadow: inset 1px 1px 0px #FFF !important;
	cursor: pointer !important;
}

.searchBtn:hover {
	background: #eaeaea url(../../Images/search_icon.png) no-repeat 7px 4px;
	-moz-box-shadow: inset -1px -1px 0px #FFF,inset 1px 1px 0px rgba(0,0,0,0.1);
	-webkit-box-shadow: inset -1px -1px 0px #FFF,inset 1px 1px 0px rgba(0,0,0,0.1);
	box-shadow: inset -1px -1px 0px #FFF,inset 1px 1px 0px rgba(0,0,0,0.1);
}

.searchBtn:active {
	background: #eaeaea url(../../Images/search_icon.png) no-repeat 8px 5px;
	-moz-box-shadow: inset -1px -1px 0px #FFF,inset 2px 2px 2px rgba(0,0,0,0.2);
	-webkit-box-shadow: inset -1px -1px 0px #FFF,inset 2px 2px 2px rgba(0,0,0,0.2);
	box-shadow: inset -1px -1px 0px #FFF,inset 2px 2px 2px rgba(0,0,0,0.2);
}

.searchCancelBtn {
	visibility: hidden;
	background: #093;
	width: 8px;
	height: 8px;
	position: relative;
	left: 130px;
	top: -15px;
	cursor: pointer;
}

.searchDownBtn {
	width: 24px;
	height: 24px;
	margin: -8px 0px 0px 4px;

	background: #F0F0F0 url(../../Images/down_btn_icon.png) no-repeat 5px 8px;

	border: solid 1px #b2b2b2;

	-moz-border-radius: 5px;
	-webkit-border-radius:  5px;
	border-radius: 5px;

	-moz-box-shadow: inset 1px 1px 0px #FFF;
	-webkit-box-shadow: inset 1px 1px 0px #FFF;
	box-shadow: inset 1px 1px 0px #FFF;
	cursor: pointer;
}

.searchDownBtn:hover {
	background: #eaeaea url(../../Images/down_btn_icon.png) no-repeat 5px 8px;
	-moz-box-shadow: inset -1px -1px 0px #FFF,inset 1px 1px 0px rgba(0,0,0,0.1);
	-webkit-box-shadow: inset -1px -1px 0px #FFF,inset 1px 1px 0px rgba(0,0,0,0.1);
	box-shadow: inset -1px -1px 0px #FFF,inset 1px 1px 0px rgba(0,0,0,0.1);
}

.searchDownBtn:active {
	background: #eaeaea url(../../Images/down_btn_icon.png) no-repeat 6px 9px;
	-moz-box-shadow: inset -1px -1px 0px #FFF,inset 2px 2px 2px rgba(0,0,0,0.2);
	-webkit-box-shadow: inset -1px -1px 0px #FFF,inset 2px 2px 2px rgba(0,0,0,0.2);
	box-shadow: inset -1px -1px 0px #FFF,inset 2px 2px 2px rgba(0,0,0,0.2);
}

/* Admin */
input.designer
{
	float: right;
}

.form dd input[type="text"], .form dd input[type="password"], .form dd input[type="number"]
{
	background: #fff;
	width: 200px;
	height: 17px;
	padding: 1px 1px 1px 3px;
	border: solid 1px #b2b2b2;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: inset 1px 3px 5px #e1e1e1;
	-webkit-box-shadow: inset 1px 3px 5px #e1e1e1;
	box-shadow: inset 1px 3px 5px #e1e1e1;
}

.form dd input[disabled]
{
	border: solid 1px #E6E6E6;
	-moz-box-shadow: inset 1px 3px 5px #f4f4f4;
	-webkit-box-shadow: inset 1px 3px 1px #f4f4f4;
	box-shadow: inset 1px 3px 5px #f4f4f4;
	color: #999;
}

.form dd textarea[disabled] {
	background:#FFF;

	Padding: 1px 1px 1px 3px;

	border:solid 1px #E6E6E6;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

	-moz-box-shadow:inset 1px 3px 5px #f4f4f4;
	-webkit-box-shadow:inset 1px 3px 1px #f4f4f4;
	box-shadow:inset 1px 3px 5px #f4f4f4;

	color:#999;
}

.form dd textarea {
	background:#fff;
	width:90%;
	height:55px;
	Padding: 1px 1px 1px 3px;
	
	border:solid 1px #b2b2b2;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;

	-moz-box-shadow:inset 1px 3px 5px #e1e1e1;
	-webkit-box-shadow:inset 1px 3px 1px #e1e1e1;
	box-shadow:inset 1px 3px 5px #e1e1e1;
}

.textFieldSearch
{
	background: url(../../images/textfield_search_icon.png) no-repeat 190px 2px !important;
}


.tableFixedLayout
{
	table-layout: fixed !important;
}

.tableFixedLayout tbody td
{
	text-overflow: ellipsis !important;
	overflow: hidden !important;
	white-space: nowrap !important;
}

.tableEventRules .colWarning, .tableEventRules .colLive
{
	width: 12%;
}

.tableUserSelector .colCheckbox, .tableTagSelector .colCheckbox
{
	width: 35px;
}

.tableUserSelector .colSearch, .tableTagSelector .colSearch
{
	width: 25px;
}

.tableTagManager .name, .tableViewManager .name
{
	width: 30%;
}

.tableDeviceMappers .colDeviceName
{
	width: 25%;
}

/* used for "old address" */
.LastKnownAddress
{
	font-style: italic;
	color: #666;
}

.overviewBorder
{
	border-bottom: 1px solid #e3e3e3;
}

.overviewContent A
{
	color: #5684B0;
}

.overviewText
{
	padding-left: 10px;
}

.overviewPadding
{
	padding-top: 5px;
	padding-bottom: 5px;
}

DL.overview DT
{
	float: left;
	clear: left;
	position: relative;
	left: 10px;
	width: 100px;
	font-weight: bold;
}

DL.overview DD
{
	clear: right;
}

UL.overview
{
	padding-left: 10px;
	list-style-type: none;
}

TABLE.overview TD
{
	padding-left: 10px;
}

TABLE.overview TD.bold
{
	font-weight: bold;
}

.privilegeOverview
{
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 10px;
}

.privilegeOverview UL
{
	padding-left: 10px;
}

.privilegeOverview UL LI
{
	font-weight: bold;
	line-height: 14px;
	list-style-type: none;
}

.privilegeOverview UL LI SPAN
{
	font-weight: normal;
	padding-left: 10px;
	color: #666;
	font-style: italic;
}

.privilegeOverview UL LI SPAN A
{
	color: #83a4bd;
}

.privilegeOverview UL LI UL
{
	margin-bottom: 5px;
	padding-left: 15px;
	color: #666;
}

.privilegeOverview UL LI UL LI
{
	font-weight: 100 !important;
}

/* from Really Simply Colorpicker. https://github.com/laktek/really-simple-color-picker */

div.colorPicker-picker {
	width: 44px;
	height:14px;
	padding-top:5px;
	border:solid 1px #b2b2b2;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;

	-moz-box-shadow:inset 1px 1px 2px rgba(0,0,0,0.2);
	-webkit-box-shadow:inset 1px 1px 2px rgba(0,0,0,0.2);
	box-shadow:inset 1px 1px 2px rgba(0,0,0,0.2);
	cursor:pointer;
	float:left;
}

div.colorPicker-icon {
  width: 16px;
  height: 16px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  float: left;
}

div.colorPicker-palette {
	position: absolute;
	margin-top: 0px;
	margin-left: 10px;
	width: 160px;
	height: 70px;
	padding: 5px 1px;
	background: #FFF;
	background-image: linear-gradient(bottom, rgb(219,219,219) 0%, rgb(255,255,255) 20%);
	background-image: -o-linear-gradient(bottom, rgb(219,219,219) 0%, rgb(255,255,255) 20%);
	background-image: -moz-linear-gradient(bottom, rgb(219,219,219) 0%, rgb(255,255,255) 20%);
	background-image: -webkit-linear-gradient(bottom, rgb(219,219,219) 0%, rgb(255,255,255) 20%);
	background-image: -ms-linear-gradient(bottom, rgb(219,219,219) 0%, rgb(255,255,255) 20%);
	background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(219,219,219)), color-stop(0.2, rgb(255,255,255)) );
	border: none;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow: 0px 0px 13px #000000;
	-webkit-box-shadow: 0px 0px 13px #000000;
	box-shadow: 0px 0px 13px #000000;
	z-index: 9999;
}

div.colorPicker-swatch:hover {
		-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.5);
		-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.5);
		box-shadow:inset 1px 1px 1px rgba(0,0,0,0.5);
		cursor:pointer;
}

div.colorPicker_hexWrap {width: 100%; float:left; display:none }
div.colorPicker_hexWrap label {font-size: 95%; color: #2F2F2F; margin: 5px 2px; width: 25%; display:none}
div.colorPicker_hexWrap input {margin: 5px 2px; padding: 0; font-size: 95%; border: 1px solid #000; width: 65%; display:none}

div.colorPicker-swatch {
	width: 10px;
	height: 10px;
	float: left;
}
/* --- */

#dockNotificationArea
{
	position: absolute;
	top: 2px;
	right: 20px;
	z-index: 2;
}

.dockNotificationIcon
{
	/*
	width: 9px;
	height: 9px;
	padding: 2px 2px 4px 4px;
	*/
	display:inline-block;
	padding:1px 5px 1px 4px;

	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: inset -2px -2px 3px rgba(0,0,0,0.29);
	-webkit-box-shadow: inset -2px -2px 3px rgba(0,0,0,0.29);
	box-shadow: inset -2px -2px 3px rgba(0,0,0,0.29);
	float: left;
	margin-right: 5px;
	cursor: pointer;
	border: 1px solid #757575;
	background: #a0a0a0;
	color: #676767;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}

.dockNotificationIcon.active
{
	border: 1px solid #000;
	background:#00ff06;
	color: #333;
}

#dockNotificationItems
{
	width: 280px;
	border: solid 1px #b0afaf;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: inset 2px 2px 1px #ffffff, inset -2px 2px 1px #ffffff, 0px 0px 5px rgba(0,0,0,0.39);
	-webkit-box-shadow: inset 2px 2px 1px #ffffff, inset -2px 2px 1px #ffffff,0px 0px 5px rgba(0,0,0,0.39);
	box-shadow: inset 2px 2px 1px #ffffff, inset -2px 2px 1px #ffffff, 0px 0px 5px rgba(0,0,0,0.39);
	background: #fff;
	background-image: linear-gradient(bottom, rgb(255,255,255) 0%, rgb(237,237,237) 100%);
	background-image: -o-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(237,237,237) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(237,237,237) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(237,237,237) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(237,237,237) 100%);
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(237,237,237)));
	position: absolute;
	bottom: 21px;
}

#dockNotificationItems ul
{
	list-style: none;
	margin: 0px;
	padding: 0px 5px 3px 5px;
}

#dockNotificationItems li
{
	padding: 4px 0px;
	border-bottom: solid 1px #d8d8d8;
	cursor: pointer;
}

#dockNotificationItems li:hover
{
	background: rgba(0,0,0,0.2)
	/*background: rgba(153,153,153,0.1);*/
}

#dockNotificationItems li.active
{
	font-weight: bold;
	background: rgba(161,238,188,0.5);
}

#dockNotificationItems li.active:hover
{
	background: rgba(161,238,188,0.7) !important;
}

#dockNotificationItems .pending
{
	background: rgba(255,255,155,0.5);
}

#dockNotificationItems .pending:hover
{
	background: rgba(255,255,155,0.7) !important;
}

/* Drop-down list */

button.dropDownList
{
	text-align: left;
}

button.dropDownList:after
{
	content: url(../../Images/down_btn_icon.png);
	width: 12px;
	height: 10px;
	margin: 0 0 0 10px;
	position: relative;
	top: 3px;
	float: right;
}

ul.dropDownList
{
	position: absolute;
	z-index: 999;
	border: solid 1px #bfbfbf;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	background: #fff;
	-moz-box-shadow: 0px 3px 10px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0px 3px 10px rgba(0,0,0,0.5);
	box-shadow: 0px 3px 10px rgba(0,0,0,0.5);
	list-style: none;
	padding-left: 0;
}

ul.dropDownList.yScroll
{
	overflow-y: auto;
	max-height: 300px;
}

ul.dropDownList li
{
	padding: 0;
}

ul.dropDownList li a
{
	text-decoration: none;
	color: #333;
	display: block;
	padding: 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

ul.dropDownList li a:hover
{
	background: #f5f7f9;
}

/* Multi-select */

div.multiselect ul {
	list-style:none;
	padding:0px;
	margin:0px;
	vertical-align:top;
	display:inline;
}

div.multiselect ul li {
	display:inline-block;
	*display:inline;
	*zoom:1;
	padding: 2px 0px 2px 5px;
	margin: 0px 2px;

	/* font */
	font-family:Tahoma, Geneva, sans-serif;
	font-size:11px;
	color:#686868;

	/* border radius */
	border:none 5px #000000;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;

	/* gradient */
	background-image:linear-gradient(bottom, rgb(228,228,228) 24%, rgb(237,237,237) 62%);
	background-image:-o-linear-gradient(bottom, rgb(228,228,228) 24%, rgb(237,237,237) 62%);
	background-image:-moz-linear-gradient(bottom, rgb(228,228,228) 24%, rgb(237,237,237) 62%);
	background-image:-webkit-linear-gradient(bottom, rgb(228,228,228) 24%, rgb(237,237,237) 62%);
	background-image:-ms-linear-gradient(bottom, rgb(228,228,228) 24%, rgb(237,237,237) 62%);
	background-image:-webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.24, rgb(228,228,228)),
		color-stop(0.62, rgb(237,237,237))
	);

	/* box shadow */
	-moz-box-shadow:inset 0px 1px 1px rgba(0,0,0,0.28), 0px 1px 0px #FFF;
	-webkit-box-shadow:inset 0px 1px 1px rgba(0,0,0,0.28), 0px 1px 0px #FFF;
	box-shadow:inset 0px 1px 1px rgba(0,0,0,0.28), 0px 1px 0px #FFF;

	cursor:pointer;
}

div.multiselect ul li div {
	display:inline-block;
	*display:inline;
	*zoom:1;
	margin:3px 4px 0 15px;
	height:8px;
	width:8px;
	background:url(../../Images/close.png);
}

div.multiselect ul li.arrow {
	cursor:pointer;
}

div.multiselect ul li.arrow div {
	margin:4px 4px 0 5px;
	height:7px;
	width:9px;
	background:url(../../Images/arrows.png);
}

div.multiselect button {
	height:17px;
	vertical-align:top;
}

/* Event timeline */

.timeline-container :focus {
	outline: none; /* Remove Chrome outline */
}

#eventPanelTimeContainer {
	position: absolute;
	bottom: -5px;
	*bottom: 0;
	left: 50%;
	/*width: 200px;
	margin-left: -100px;*/
	padding: 1px 0;
	text-align: center;
	color: #666;

	z-index: 99;

	border-bottom: 1px solid #aaaaaa;
	*border-bottom: none;

	background-color: #ffffff;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F8F8F8', endColorstr='#ffffff');
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F4F4F4), color-stop(1, #e7e7e7));
	background-image: -o-linear-gradient(bottom, #F4F4F4 0%, #e7e7e7 100%);
	background-image: -moz-linear-gradient(bottom, #F4F4F4 0%, #e7e7e7 100%);
	background-image: -webkit-linear-gradient(bottom, #F4F4F4 0%, #e7e7e7 100%);
	background-image: -ms-linear-gradient(bottom, #F4F4F4 0%, #e7e7e7 100%);
	background-image: linear-gradient(to bottom, #F4F4F4 0%, #e7e7e7 100%);

	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 0 0 6px 6px;
}

/* Slide button */

.slideBtnContainer {
	display:inline-block;
	*display:inline;
	*zoom:1;
	vertical-align:top;
	margin-top:-5px;
}

.slideBtnLeft, .slideBtnMid, .slideBtnRight {
	height:31px;
	display:inline-block;
	*display:inline;
	*zoom:1;
	line-height:31px;
	vertical-align:top;
	cursor:pointer;
	text-align:center;
	text-transform:uppercase;
	font-size:8pt;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}

.slideBtnContainer.redBtn .slideBtnLeft {
	width:13px;
	background:url(../../Images/slide_red_left.png);
}

.slideBtnContainer.redBtn .slideBtnMid {
	background:url(../../Images/slide_red_bg.png);
	color:#7b2124;
	min-width:60px;
	text-shadow:0px 0px 3px rgba(116,17,22,0.9);
}

.slideBtnContainer.redBtn .slideBtnRight {
	width:40px;
	background:url(../../Images/slide_red_right.png);
}

.slideBtnContainer.greenBtn .slideBtnLeft {
	width:40px;
	background:url(../../Images/slide_green_left.png);
}

.slideBtnContainer.greenBtn .slideBtnMid {
	background:url(../../Images/slide_green_bg.png);
	color:#0b6d12;
	min-width:60px;
	text-shadow:0px 0px 3px rgba(11,109,18,0.9);
}

.slideBtnContainer.greenBtn .slideBtnRight {
	width:13px;
	background:url(../../Images/slide_green_right.png);
}

.bucket_list {
	width:60px !important;
}

.bucket_list a {
	width:26px !important;
}

/*  Bucket */

.vehicle_list_bucket_decorator {
	border-radius: 3px;
	padding:0px 5px 0px 2px;
	display: inline;
}

.vehicle_list_bucket_decorator_blue {
	background: #bdd6ff;
}

.vehicle_list_bucket_decorator_green {
	background: #a1ff9f;
}

.vehicle_list_bucket_decorator_red {
	background: #ffbdbd;
}

.vehicle_list_bucket_decorator_yellow {
	background: #f5e299;
}

#geofence-control td {
	padding: 1px 5px 0 0;
}

#geofence-control input {
	vertical-align: middle;
}

/* Chart Type Selector */

.chartTypeSelector {
	float: left; 
	margin: 0px 2px; 
	padding: 2px 3px; 
	text-align: center;
}

.chartTypeSelectorSelected {
	background-color: #c9eed6;
	border: solid 1px #aceec3;
	border-radius: 3px;
}

.chartTypeImage {
	background-position: center;
	background-repeat: no-repeat; 
	width: 60px; 
	height: 40px; 
}

/* Color Picker */
.predefinedColorBox {
	cursor: pointer; 
	/* margin: 2px 0px 10px 0px; */
	border-radius: 3px;
	width: 25px; 
	height: 20px; 
	float: left; 
}

/* Mapped Field Popup Selector */

.popupMappedFieldPanel {
	background-color: #FFFFFF; 
	border: solid 1px black; 
	width: 200px; 
	max-height: 100px; 
	overflow-x: auto;
}

.popupMappedFieldItem {
	padding: 2px 1px;
}

.popupMappedFieldItem:hover {
	color: #FFFFFF;
	background-color: #1E90FF;
}

.slick-viewport .grid-canvas div.FatPointTrackRow
{
	background-color: #fffadb;
}

.slick-viewport .grid-canvas div.FatPointTrackRow.odd
{
	background-color: #fbf7d8;
}

.slick-viewport .grid-canvas div.greenBackground
{
	background-color: #DFF5E6;
}

.slick-viewport .grid-canvas div.greenBackground.odd
{
	background-color: #C9EED6;
}

.slick-viewport .grid-canvas div.redBackground
{
	background-color: #F6BDCB;
}

.slick-viewport .grid-canvas div.redBackground.odd
{
	background-color: #F4ACBE;
}

.slick-viewport .grid-canvas div.yellowBackground
{
	background-color: rgba(255, 237, 163, 0.75);
}

.slick-viewport .grid-canvas div.yellowBackground.odd
{
	background-color: rgba(245, 229, 159, 0.75);
}

.slick-viewport .grid-canvas div.tableAlignCenter
{
	text-align: center;
}

.slick-viewport .grid-canvas div.tableAlignRight
{
	text-align: right;
}

.slick-viewport .grid-canvas div.tableLeftPadding
{
	padding-left: 10px;
}

.slick-viewport .grid-canvas div.InvalidTrackPoint
{
	font-style: italic;
	color: #666;
}