/******************************************************************************/
/*  Beo fonts defs */

@font-face 
{ 
	font-family: BeoFont; 
	src: url("../fonts/BeoFont.eot"); /* IE9 Compat Modes */
	src: url("../fonts/BeoFont.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
	     url("../fonts/BeoFont.woff2") format('woff2'), /* Super Modern Browsers */
	     url("../fonts/BeoFont.woff") format('woff'), /* Pretty Modern Browsers */
	     url("../fonts/BeoFont.ttf") format('truetype'), /* Safari, Android, iOS */
	     url("../fonts/BeoFont.svg#BeoFont") format('svg'); /* Legacy iOS */

}

@font-face 
{
	font-family: BeoFont Bold;
	src: url("../fonts/BeoFontBold.eot"); /* IE9 Compat Modes */
	src: url("../fonts/BeoFontBold.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
	     url("../fonts/BeoFontBold.woff2") format('woff2'), /* Super Modern Browsers */
	     url("../fonts/BeoFontBold.woff") format('woff'), /* Pretty Modern Browsers */
	     url("../fonts/BeoFontBold.ttf") format('truetype'), /* Safari, Android, iOS */
	     url("../fonts/BeoFontBold.svg#BeoFontBold-Regular") format('svg'); /* Legacy iOS */
}

@font-face
{
	font-family: BeoIcons;
	src: url("../fonts/BeoIcons.eot"); /* IE9 Compat Modes */
	src: url("../fonts/BeoIcons.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
	     url("../fonts/BeoIcons.woff2") format('woff2'), /* Super Modern Browsers */
	     url("../fonts/BeoIcons.woff") format('woff'), /* Pretty Modern Browsers */
	     url("../fonts/BeoIcons.ttf") format('truetype'), /* Safari, Android, iOS */
	     url("../fonts/BeoIcons.svg#BeoIconsv203") format('svg'); /* Legacy iOS */
}

/******************************************************************************/
/* Fonts presets */

* {
	color: #aaaaaa;	
	font-family: Arial Unicode MS, Sans-Serif; 
	font-size: 12px;
}

body.iPhoneView,
body.iPhoneView * {
	color: #ffffff;
}


body.PCView .lowlighted {
	color: #666666;
}

body.PCView .middlelighted {
	color: #a0a0a0;
}

body.iPhoneView .lowlighted {
	color: #999999;
}

body.iPhoneView .middlelighted {
	color: #aaaaaa;
}

.fontBold {
	font-weight: bold;
}


/******************************************************************************/
/* generic definitions for all documents */

body {
	padding: 0px;
	margin: 0px;	
}

body {
	background-color: black;
}

* {
}

html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

/******************************************************************************/
/* remove apperance of rouded corners on buttons/texts inputs of safari (iOS iPad) browsers */

input {
    -webkit-appearance: none;
    -webkit-border-radius:0;
    border-radius:0;
}

/******************************************************************************/
/* custom scrollbars */

*::-webkit-scrollbar-track	{ border-radius: 3px; background-color: #444; -webkit-box-shadow: inset 0 0 4px #000; }
*::-webkit-scrollbar-thumb  { border-radius: 3px; background-color: #CCC; -webkit-box-shadow: inset 0 0 2px #000; }
body.iPhoneView	*::-webkit-scrollbar { width: 18px; }
body.PCView		*::-webkit-scrollbar { width: 12px; }

/******************************************************************************/
/* fix for: "Fonts become bold when changing orientation" on iOS Safari */

html * {
	-webkit-font-smoothing: subpixel-antialiased;
}

body.PCView .auxElementTurning3DAcceleration {
	/* turned ON only in PC or Tabled devices */
	-webkit-transform: translate3d(0,0,0);
}

/******************************************************************************/
/* iPhoneView or PCView or mobileDevice or desktopDevice only content */

body.iPhoneView .PCView-only {
	display: none !important;
}

body.PCView .iPhoneView-only {
	display: none !important;
}

body.desktopDevice .mobileDevice-only {
	display: none !important;
}

body.mobileDevice .desktopDevice-only {
	display: none !important;
}

/*******************************************************************************
* CSS3 special effects (declared first than concrete styling) */

/* navigation .. */

@keyframes animMenu {
	from	{ transform: scale(0.98, 0.97) translate(-2px, 0px); opacity: 0.33; }
}
@-webkit-keyframes animMenu {
	from	{ -webkit-transform: scale(0.98, 0.98) translate(-2px, 0px); opacity: 0.33; }
}

.iPhoneView #nav ul.selected ,
.PCView #nav ul {
	animation: animMenu 0.25s;
	-webkit-animation: animMenu 0.25s;
}

/* nav title  */

@keyframes animMenuTitle {
	0%	{ opacity: 0; }
	20%	{ opacity: 0; }
}
@-webkit-keyframes animMenuTitle {
	0%	{ opacity: 0; }
	20%	{ opacity: 0; }
}

#header .menuTitle span {
	animation: animMenuTitle  0.25s;
	-webkit-animation: animMenuTitle  0.25s;
}

/* page body (after header) */

@keyframes animPageBody {
    from	{ transform:translate(7px, 0px); opacity: 0.5; }
}
@-webkit-keyframes animPageBody {
    from	{ -webkit-transform: translate(7px, 0px); opacity: 0.5; }
}

#header ~ *:not(#nav) {
	animation: animPageBody 0.4s;
	animation-timing-function: cubic-bezier(0.050, 0.315, 0.010, 1);
	-webkit-animation: animPageBody 0.4s;
	-webkit-animation-timing-function: cubic-bezier(0.050, 0.315, 0.010, 1);
}

/* page pc title */

@keyframes animPageTitle {
    0%   { opacity: 0.0; }
}
@-webkit-keyframes animPageTitle {
    0%   { opacity: 0.0; }
}

.PCView .Bo-page-title {
	animation: animPageTitle 0.8s;
	-webkit-animation: animPageTitle 0.8s;
}

/* popups */

@keyframes animPopups {
	from	{ transform: scale(0.94, 0.94); opacity: 0.25; }
}
@-webkit-keyframes animPopups {
	from	{ -webkit-transform: scale(0.94, 0.94); opacity: 0.25; }
}

.Bo-popup-container .frame ,
#jsAlert_popup ,
#jsConfirm_popup {
	animation: animPopups 0.35s;
	animation-timing-function: cubic-bezier(0.000, 0.000, 0.000, 1.000);
	-webkit-animation: animPopups 0.35s;
	-webkit-animation-timing-function: cubic-bezier(0.000, 0.000, 0.000, 1.000);
}

/******************************************************************************/
/* Styling of an Input elements (shared between index and pages) ...          */
/******************************************************************************/

/******************************************************************************/
/* Text/Password/Options Input */

body.PCView .Bo-form input[type=text] ,
body.PCView .Bo-form input[type=time] ,
body.PCView .Bo-form input[type=date] ,
body.PCView .Bo-form input[type=number] ,
body.PCView .Bo-form input[type=password] ,
body.PCView .Bo-datetime-wrapper .displayField ,
body.PCView .Bo-dropdown-wrapper .displayField {
	background-position: center;
	background-image: url('../images/bgInput.png');
	background-repeat: no-repeat;
	background-size: 100% 100%; /* png size 144px 20px */
	width: 138px; /* png width - padding */
	height: 16px; /* png height - padding */
	border-width: 0px;
	padding: 2px 1px 2px 5px;
	float: left;
}

body.PCView .Bo-form input[type=text]:hover ,
body.PCView .Bo-form input[type=date]:hover ,
body.PCView .Bo-form input[type=time]:hover ,
body.PCView .Bo-form input[type=number]:hover ,
body.PCView .Bo-form input[type=password]:hover ,
body.PCView .Bo-datetime-wrapper .displayField:hover ,
body.PCView .Bo-dropdown-wrapper .displayField:hover {
	background-image: url('../images/bgInputHover.png');
}
body.PCView .Bo-form input[type=text]:disabled ,
body.PCView .Bo-form input[type=date]:disabled ,
body.PCView .Bo-form input[type=time]:disabled ,
body.PCView .Bo-form input[type=number]:disabled ,
body.PCView .Bo-form input[type=password]:disabled ,
body.PCView .Bo-datetime-wrapper.disabled .displayField ,
body.PCView .Bo-dropdown-wrapper.disabled .displayField {
	background-image: url('../images/bgInputDisabled.png');
	color: #4C4C4C;
}
body.PCView .Bo-datetime-wrapper.disabled .displayField span ,
body.PCView .Bo-dropdown-wrapper.disabled .displayField span {
	color: #4C4C4C;
}
body.PCView .Bo-form input[type=text]::selection ,
body.PCView .Bo-form input[type=date]::selection ,
body.PCView .Bo-form input[type=time]::selection ,
body.PCView .Bo-form input[type=number]::selection ,
body.PCView .Bo-form input[type=password]::selection ,
body.PCView .Bo-datetime-wrapper .displayField::selection ,
body.PCView .Bo-dropdown-wrapper .displayField::selection ,
body.PCView .Bo-form input[type=text]::-moz-selection ,
body.PCView .Bo-form input[type=date]::-moz-selection ,
body.PCView .Bo-form input[type=time]::-moz-selection ,
body.PCView .Bo-form input[type=number]::-moz-selection ,
body.PCView .Bo-form input[type=password]::-moz-selection ,
body.PCView .Bo-datetime-wrapper .displayField::-moz-selection ,
body.PCView .Bo-dropdown-wrapper .displayField::-moz-selection {
	background: #FFFFFF;
	color: #000000;
}

body.iPhoneView .Bo-form input[type=text] ,
body.iPhoneView .Bo-form input[type=date] ,
body.iPhoneView .Bo-form input[type=time] ,
body.iPhoneView .Bo-form input[type=number] ,
body.iPhoneView .Bo-form input[type=password] ,
body.iPhoneView .Bo-datetime-wrapper .displayField ,
body.iPhoneView .Bo-dropdown-wrapper .displayField {
	background-color: #262626;
	width: 118px; /* 125 - 7px padding */
	height: 30px; /* 36 - 5px padding */
	line-height: 34px;
	border-width: 0px;
	padding: 4px 0px 2px 7px;
	float: left;
}

body.iPhoneView .Bo-form input[type=text]:disabled ,
body.iPhoneView .Bo-form input[type=date]:disabled ,
body.iPhoneView .Bo-form input[type=time]:disabled ,
body.iPhoneView .Bo-form input[type=number]:disabled ,
body.iPhoneView .Bo-form input[type=password]:disabled ,
body.iPhoneView .Bo-datetime-wrapper.disabled .displayField ,
body.iPhoneView .Bo-dropdown-wrapper.disabled .displayField {
	background-color: #0B0B0B;
	color: #4C4C4C;
}
body.iPhoneView .Bo-datetime-wrapper.disabled .displayField span ,
body.iPhoneView .Bo-dropdown-wrapper.disabled .displayField span {
	color: #4C4C4C;
}

body.iPhoneView .Bo-form .Bo-iphone-multiline input[type=text] ,
body.iPhoneView .Bo-form .Bo-iphone-multiline input[type=date] ,
body.iPhoneView .Bo-form .Bo-iphone-multiline input[type=time] ,
body.iPhoneView .Bo-form .Bo-iphone-multiline input[type=number] ,
body.iPhoneView .Bo-form .Bo-iphone-multiline input[type=password] ,
body.iPhoneView .Bo-form .Bo-iphone-multiline .Bo-datetime-wrapper .displayField ,
body.iPhoneView .Bo-form .Bo-iphone-multiline .Bo-dropdown-wrapper .displayField {
	/* inherits all from :not(.Bo-iphone-multiline) */
	width: 263px; /* 270 - 7px padding */
}

/* remove bordered image on PCView and border on iPhoneView + sets simple bg color */
/* DO NOT group, moz will not interpret the rules when find just ONE with :read-only ! */
body .Bo-form input[type=text]:read-only ,
body .Bo-form input[type=date]:read-only ,
body .Bo-form input[type=time]:read-only ,
body .Bo-form input[type=number]:read-only ,
body .Bo-form input[type=password]:read-only {
	background-image: none !important; /* important because of :hover */
	background-color: #262626;
	border-color: transparent !important; /* important because of iPhoneView border specificity */
}
body .Bo-form input[type=text]:-moz-read-only ,
body .Bo-form input[type=date]:-moz-read-only ,
body .Bo-form input[type=time]:-moz-read-only ,
body .Bo-form input[type=number]:-moz-read-only ,
body .Bo-form input[type=password]:-moz-read-only {
	background-image: none !important; /* important because of :hover */
	background-color: #262626;
	border-color: transparent !important; /* important because of iPhoneView border specificity */
}
body .Bo-datetime-wrapper.read-only .displayField ,
body .Bo-dropdown-wrapper.read-only .displayField {
	background-image: none !important; /* important because of :hover */
	background-color: #262626;
	border-color: transparent !important; /* important because of iPhoneView border specificity */
}

/* combination of disabled and readonly, note: iPhoneView has already changed bg color when disabled */
/* also DO NOT group */
body.PCView .Bo-form input[type=text]:read-only:disabled ,
body.PCView .Bo-form input[type=date]:read-only:disabled ,
body.PCView .Bo-form input[type=time]:read-only:disabled ,
body.PCView .Bo-form input[type=number]:read-only:disabled  ,
body.PCView .Bo-form input[type=password]:read-only:disabled {
	background-color: #0B0B0B;
}
body.PCView .Bo-form input[type=text]:-moz-read-only:disabled ,
body.PCView .Bo-form input[type=date]:-moz-read-only:disabled ,
body.PCView .Bo-form input[type=time]:-moz-read-only:disabled ,
body.PCView .Bo-form input[type=number]:-moz-read-only:disabled  ,
body.PCView .Bo-form input[type=password]:-moz-read-only:disabled {
	background-color: #0B0B0B;
}
body.PCView .Bo-datetime-wrapper.read-only.disabled .displayField ,
body.PCView .Bo-dropdown-wrapper.read-only.disabled .displayField {
	background-color: #0B0B0B;
}

/******************************************************************************/
/* Text/Password/Options Input - on left side to label/button */

body.PCView .Bo-form .Bo-input-left input[type=text]:first-child ,
body.PCView .Bo-form .Bo-input-left input[type=date]:first-child ,
body.PCView .Bo-form .Bo-input-left input[type=time]:first-child ,
body.PCView .Bo-form .Bo-input-left input[type=number]:first-child ,
body.PCView .Bo-form .Bo-input-left input[type=password]:first-child ,
body.PCView .Bo-input-left .Bo-datetime-wrapper:first-child .displayField ,
body.PCView .Bo-input-left .Bo-dropdown-wrapper:first-child .displayField {
	margin-right: 26px; /* 170px - width=144px */
}

body.iPhoneView .Bo-form .Bo-input-left input[type=text]:first-child ,
body.iPhoneView .Bo-form .Bo-input-left input[type=date]:first-child ,
body.iPhoneView .Bo-form .Bo-input-left input[type=time]:first-child ,
body.iPhoneView .Bo-form .Bo-input-left input[type=number]:first-child ,
body.iPhoneView .Bo-form .Bo-input-left input[type=password]:first-child ,
body.iPhoneView .Bo-input-left .Bo-datetime-wrapper:first-child .displayField ,
body.iPhoneView .Bo-input-left .Bo-dropdown-wrapper:first-child .displayField {
	margin-right: 20px; /* 145px - width=125px */
}

body.iPhoneView .Bo-form .Bo-input-left :first-child + input[type=text] ,
body.iPhoneView .Bo-form .Bo-input-left :first-child + input[type=date] ,
body.iPhoneView .Bo-form .Bo-input-left :first-child + input[type=time] ,
body.iPhoneView .Bo-form .Bo-input-left :first-child + input[type=number] ,
body.iPhoneView .Bo-form .Bo-input-left :first-child + input[type=password] ,
body.iPhoneView .Bo-input-left :first-child + .Bo-datetime-wrapper .displayField ,
body.iPhoneView .Bo-input-left :first-child + .Bo-dropdown-wrapper .displayField {
	margin-right: 0px;
}

/* labels right side fix: */
body.iPhoneView .Bo-form .Bo-input-left :first-child + * ,
body.iPhoneView .Bo-form .Bo-input-left :first-child + * {
	max-width: 125px; /* need e.g. for label on right */
}

/* buttons right side fix: */
.Bo-form .Bo-input-left :first-child + .Bo-button-no ,
.Bo-form .Bo-input-left :first-child + .Bo-button-yes {
	margin-left: 0px;
	margin-right: 0px;
}

/******************************************************************************/
/* Bo Special DropDown & Date/Time */

.Bo-datetime-wrapper:not(.disabled):not(.read-only) .displayField , /* styled at place tohether with: .Bo-form input[type=text] */
.Bo-dropdown-wrapper:not(.disabled):not(.read-only) .displayField { /* styled at place tohether with: .Bo-form input[type=text] */
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
}

body.PCView .Bo-datetime-wrapper ,
body.PCView .Bo-dropdown-wrapper {
	float: left;
	height: auto;
	position: relative;
}

body.iPhoneView .Bo-datetime-wrapper ,
body.iPhoneView .Bo-dropdown-wrapper {
	float: left;
	height: auto;
	position: relative;
}

body .Bo-datetime-wrapper input ,
body .Bo-dropdown-wrapper input {
	margin-bottom: 0 !important; /* input inside a wrapper is wrapped by wrapper and MUST NOT have any margin on bottom by itself */
}

body.iPhoneView .Bo-datetime-wrapper .displayField , /* size is styled elsewhere together with input[type=text] */
body.iPhoneView .Bo-dropdown-wrapper .displayField { /* size is styled elsewhere together with input[type=text] */
	border: 1px solid #c0c0c0; /* add 1px to border */
	padding: 3px 1px 1px 4px; /* remove 1px from 7px padding/5x padding from: 4px 0px 2px 7px; */
}

/* Expand Arrow .. */

body.PCView .Bo-datetime-wrapper:not(.disabled):not(.read-only) .displayField:after ,
body.PCView .Bo-dropdown-wrapper:not(.disabled):not(.read-only) .displayField:after {
	content: url("../images/selectbox/btnExpandSelect.gif");
	position: absolute;
	top: 2px; /* pading top */
	left: 127px; /* 144px width - 16px arrow width - 1px border in bg */
}

body.iPhoneView .Bo-datetime-wrapper:not(.disabled):not(.read-only) .displayField:after ,
body.iPhoneView .Bo-dropdown-wrapper:not(.disabled):not(.read-only) .displayField:after {
	content: url("../images/selectbox/btnExpandSelect.gif");
	position: absolute;
	top: 5px; /* center vertically */
	left: 108px; /* 125x - 16px - 1px */
}

body.iPhoneView .Bo-iphone-multiline .Bo-datetime-wrapper:not(.disabled):not(.read-only) .displayField:after ,
body.iPhoneView .Bo-iphone-multiline .Bo-dropdown-wrapper:not(.disabled):not(.read-only) .displayField:after {
	content: url("../images/selectbox/btnExpandSelect.gif");
	position: absolute;
	top: 5px; /* center vertically */
	left: 253px; /* 270x - 16px - 1px */
}

.Bo-datetime-wrapper.read-only ,
.Bo-datetime-wrapper.disabled ,
.Bo-dropdown-wrapper.read-only ,
.Bo-dropdown-wrapper.disabled {
	cursor: default;
}

.Bo-datetime-wrapper.disabled.ul ,
.Bo-datetime-wrapper.read-only ul ,
.Bo-datetime-wrapper:not(.opened) ul ,
.Bo-dropdown-wrapper.disabled.ul ,
.Bo-dropdown-wrapper.read-only ul ,
.Bo-dropdown-wrapper:not(.opened) ul {
	display: none;
}

/* enable scrollbar when list is too long */
body.iPhoneView .Bo-datetime-wrapper.opened ul ,
body.iPhoneView .Bo-dropdown-wrapper.opened ul {
	max-height: 380px; /* 378 + border, iPhone viewport height is at least 480px, 378px = 27px (li height) x 14 is safe to be lesser */
	overflow-y: auto;
}
body.PCView .Bo-datetime-wrapper.opened ul ,
body.PCView .Bo-dropdown-wrapper.opened ul {
	max-height: 382px; /* 380 + border, 380px = 19px (li height) x 20 */
	overflow-y: auto;
}

/* no dots no indent on ul, border, bg color */
.Bo-datetime-wrapper.opened ul ,
.Bo-dropdown-wrapper.opened ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	width: 100%;
	background-color: #292929;
	border: 1px solid #FFFFFF;
	color: #808080;
	position: absolute;
	z-index: 1000;
}

body.PCView .Bo-datetime-wrapper.opened ul ,
body.PCView .Bo-dropdown-wrapper.opened ul {
	width: 142px; /* 144 - 2px ul border */
	top: 19px; /* height of editbox -1 */
}

body.iPhoneView .Bo-datetime-wrapper.opened ul ,
body.iPhoneView .Bo-dropdown-wrapper.opened ul {
	width: 123px; /* 125 - 2px ul border */
	top: 35px; /* height of editbox -1 */
}

body.iPhoneView .Bo-iphone-multiline .Bo-datetime-wrapper.opened ul ,
body.iPhoneView .Bo-iphone-multiline .Bo-dropdown-wrapper.opened ul {
	width: 268px; /* 270 - 2px ul border */
}

.Bo-datetime-wrapper ul li ,
.Bo-dropdown-wrapper ul li {
    color: #EEEEEE;
    display: block;
    font-size: 11px;
    min-height: 19px;
    overflow: hidden;
	cursor: pointer;
	white-space: nowrap;
	padding-left: 4px;
}

.Bo-datetime-wrapper ul li.hidden-option ,
.Bo-dropdown-wrapper ul li.hidden-option {
	display: none;
}

body.iPhoneView .Bo-datetime-wrapper ul li ,
body.iPhoneView .Bo-dropdown-wrapper ul li {
	min-height: 20px; /* 27px - padding */
	padding-top: 7px;
}

body.PCView .Bo-datetime-wrapper ul li:hover ,
body.PCView .Bo-dropdown-wrapper ul li:hover {
	background-image: url("../images/selectbox/bgSelectHover.jpg");
}

/******************************************************************************/
/* Bo Special Date/Time */

body .Bo-datetime-wrappe .displayField:after {
	content: "" !important; /* clear previous */
}

body .Bo-datetime-wrapper.has-time-icon:not(.disabled):not(.read-only) .displayField:after {
	content: "\25F7" !important; /* utf-8: WHITE CIRCLE WITH UPPER RIGHT QUADRANT */
}

body .Bo-datetime-wrapper.has-date-icon:not(.disabled):not(.read-only) .displayField:after {
	content: "\2710" !important; /* utf-8: UPPER RIGHT PENCIL */
}

/******************************************************************************/
/* IoT development definitions - not for end users */

/* font definitions */
.fontPurple {
	color: purple;
}

.fontRed {
	color: red;
}

.fontBlue {
	color: blue;
}

/* document definitions */

.bgColorPurple {
	background-color: purple;
}

.bgColorBlue {
	background-color: blue;
}

.bgColorRed {
	background-color: red;
}