/******************************************************************************/
/* big screen */

body.PCView #framesWrappers .wrapper
{
	float: left;
	height: 100%;
	vertical-align: top;
	height: 850px;
}

body.PCView #framesWrappers { margin-left: auto; margin-right: auto; }

/* when menu is hidiing or hidden, then width change should be continuous */
body.PCView.menuHiddenPermanently #framesWrappers ,
body.PCView.menuHiddenPermanently #framesWrappers .wrapper {
    -webkit-transition: width 0.4s;
    transition: width 0.4s;
}

@media all and (min-width: 930px) /* width 930 = 250 + 680 */
{
	body.PCView #framesWrappers .wrapper.left	{ width: 250px; }
	body.PCView #framesWrappers .wrapper.right	{ width: 680px; }
	body.PCView #framesWrappers { width: 930px;}

	body.PCView.menuHiddenPermanently #framesWrappers .wrapper.left		{ width: 0px; }
	body.PCView.menuHiddenPermanently #framesWrappers .wrapper.right	{ width: 680px; }
	body.PCView.menuHiddenPermanently #framesWrappers { width: 680px; }
}
@media all and (min-width: 730px) and (max-width: 929px) /* width 730 = 250 + 340+140 */
{
	body.PCView #framesWrappers .wrapper.left	{ width: 250px; }
	body.PCView #framesWrappers .wrapper.right	{ width: 480px; }
	body.PCView #framesWrappers { width: 730px; }

	body.PCView.menuHiddenPermanently #framesWrappers .wrapper.left		{ width: 0px; }
	body.PCView.menuHiddenPermanently #framesWrappers .wrapper.right	{ width: 730px; }
	body.PCView.menuHiddenPermanently #framesWrappers { width: 730px; }
}
@media all and (max-width: 729px)  /* width 590 = 250 + 340 */
{
	body.PCView #framesWrappers .wrapper.left	{ width: 250px; }
	body.PCView #framesWrappers .wrapper.right	{ width: 340px; }
	body.PCView #framesWrappers { width: 590px; }

	body.PCView.menuHiddenPermanently #framesWrappers .wrapper.left		{ width: 0px; }
	body.PCView.menuHiddenPermanently #framesWrappers .wrapper.right	{ width: 340px; }
	body.PCView.menuHiddenPermanently #framesWrappers { width: 340px; }
}

body.PCView { margin-top: 12px; }

/******************************************************************************/
/* small screen */

body.iPhoneView #framesWrappers
{
	position: relative;
}

body.iPhoneView #framesWrappers .wrapper {
	position: absolute;
	overflow: hidden;
	vertical-align: top;
	height: 1350px;
}

body.iPhoneView #framesWrappers .wrapper.left	{ width: 100%; z-index: +1;}
body.iPhoneView #framesWrappers .wrapper.right	{ width: 100%; }

/* backbutton is not visible if menu gets hidden */
body.iPhoneView.backButtonVisible:not(.menuHiddenPermanently) #Bo_MenuBackButton {
	position: fixed;
	left: 7px;
	top: 14px;
	background-image: url('../images/iPhone/back.png');
	background-repeat: no-repeat;
	background-position: 0px 0px;
	height: 21px; /* png height */
	width: 24px; /* png width */
	z-index: +2;
}

/******************************************************************************/
/* show menu / hide content on iPhone */

body.iPhoneView.menuFocused #framesWrappers .wrapper.right {
	/* menu is displayed, hide content */
	display: none;
}

body.iPhoneView:not(.menuFocused) #framesWrappers .wrapper.left {
	/* content is dieplayed, hide menu */
	display: none;
}

/******************************************************************************/
/* hide content on PC */

body.PCView.contentHidden #framesWrappers .wrapper.right {
	/* hide content */
	display: none;
}

/******************************************************************************/
/* Beo Popups :: Buttons styling and sizes */

.footer input[type=button] {
	margin-left: 6px;
	margin-right: 6px;
	margin-top: 4px;
	margin-bottom: 4px;
}

body.PCView .imgButtonYes ,
body.PCView .imgButtonNo ,
body.iPhoneView .imgButtonYes ,
body.iPhoneView .imgButtonNo {
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: left;
	background-size: 100% 100%;
	border: solid 0px black;
	height: 20px; /* image height */
	font-family: BeoFont, Arial Unicode MS, Sans-Serif;
	font-size: 11px;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	text-transform: uppercase;
}

body.PCView .imgButtonYes ,
body.iPhoneView .imgButtonYes {
	background-image: url('../images/bgButton.png');
	min-width: 120px;
	color: #4c4c4c;
}

body.PCView .imgButtonYes:hover ,
body.PCView .imgButtonYes:disabled ,
body.iPhoneView .imgButtonYes:hover ,
body.iPhoneView .imgButtonYes:disabled {
	background-image: url('../images/bgButtonHover.png');
}

body.PCView .imgButtonNo ,
body.iPhoneView .imgButtonNo {
	background-image: url('../images/bgButtonBlack.png');
	min-width: 120px;
	color: #CCCCCC;
}

body.PCView .imgButtonNo:hover ,
body.PCView .imgButtonNo:disabled ,
body.iPhoneView .imgButtonNo:hover ,
body.iPhoneView .imgButtonNo:disabled {
	background-image: url('../images/bgButtonBlackHover.png');
}

body.PCView .imgButtonYes:disabled ,
body.PCView .imgButtonNo:disabled ,
body.iPhoneView .imgButtonYes:disabled ,
body.iPhoneView .imgButtonNo:disabled {
	cursor: not-allowed;
}

/* single popup button in a Popup footer is wider (120px -> 144px)*/
.footer[data-buttons=num1] .imgButtonYes ,
.footer[data-buttons=num1] .imgButtonNo {
	min-width: 144px;
}

/* if there are 3 or 5+ buttons, they are now slimmer on iPhone view popup (PC view popup frame is bigger in width), 3 buttons will now fit side by side onto one line and 5|6 buttons will fit into two lines */
body.iPhoneView .footer[data-buttons]:not([data-buttons=num1]):not([data-buttons=num2]):not([data-buttons=num4]) .imgButtonYes ,
body.iPhoneView .footer[data-buttons]:not([data-buttons=num1]):not([data-buttons=num2]):not([data-buttons=num4]) .imgButtonNo {
	min-width: 84px;
	margin-left: 4px;
	margin-right: 4px;
}

/******************************************************************************/
/* Popups :: Title */

body.iPhoneView table.popupTitle {
	height: 50px;
	width: 295px;
}

body.PCView table.popupTitle {
	height: 50px;
	width: 420px;
}

body.iPhoneView table.popupTitle.custom {
	height: 100px;
}

body.PCView table.popupTitle.custom {
	height: 80px;
}

/******************************************************************************/
/* Popups :: Footer */

body.iPhoneView table.popupFooter {
	width: 295px;
}

body.PCView table.popupFooter {
	width: 420px;
}

/******************************************************************************/
/* Popups :: Body */

body.iPhoneView div.popupBody {
	width: 285px; /* 295px - 10 */
	margin-bottom: 14px;
	font-size: 11px;
	color: #fff;
}

body.PCView div.popupBody {
	width: 410px; /* 420px - 10 */
	min-height: 90px;
	font-size: 12px;
	color: #fff;
}

/******************************************************************************/
/* Popups :: Body :: Prompt Line - inherited styling */

/* !! this is identical styling to pages's .Bo-form input[type=text] .. */
/* .. except rules with .Bo-iphone-multiline modifier (omitted here) */

/*body.PCView .Bo-form input[type=text] ,*/
body.PCView .prompt-container input {
	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 .prompt-container input:hover {
	background-image: url('../images/bgInputHover.png');
}
/*body.PCView .Bo-form input[type=text]:disabled ,*/
body.PCView .prompt-container input:disabled {
	background-image: url('../images/bgInputDisabled.png');
	color: #4C4C4C;
}

/*body.PCView .Bo-form input[type=text]::selection ,*/
body.PCView .prompt-container input::selection {
	background: #FFFFFF;
	color: #000000;
}

/*body.iPhoneView .Bo-form input[type=text] ,*/
body.iPhoneView .prompt-container input {
	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 .prompt-container input:disabled {
	background-color: #0B0B0B;
	color: #4C4C4C;
}

/* 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 .prompt-container input: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 .prompt-container input:-moz-read-only {
	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 .prompt-container input:read-only:disabled {
	background-color: #0B0B0B;
}
/*body.PCView .Bo-form input[type=text]:-moz-read-only:disabled ,*/
body.PCView .prompt-container input:-moz-read-only:disabled {
	background-color: #0B0B0B;
}

/******************************************************************************/
/* Popups :: Body :: Prompt Line - Overrides */

/* string input */
body.PCView .prompt-container input ,
body.iPhoneView .prompt-container input {
	float: none; /* revert floating */
	margin-top: 8px;
	margin-bottom: 8px;
}

/* dropdown input */
body.PCView .prompt-container .Bo-dropdown-wrapper ,
body.iPhoneView .prompt-container .Bo-dropdown-wrapper {
	float: none; /* revert floating */
	display: inline-block;
	margin-left: 5px;
	margin-right: 5px;
	text-align: initial;
}
body.PCView .prompt-container .Bo-dropdown-wrapper .displayField {
	float: none; /* revert floating */
	width: 66px; /* overwrite outer width 144px padding 6px = 138px to (half in total): 72px - padding 6px = 66px */
}
body.iPhoneView .prompt-container .Bo-dropdown-wrapper .displayField {
	float: none; /* revert floating */
	width: 58px; /* overwrite outer width 125px - padding 5px - border 2px = 118px to (half in total): 65px - padding 5px - border 2px = 58 px */
}
body.PCView .prompt-container .Bo-dropdown-wrapper:not(.disabled):not(.read-only) .displayField:after {
	left: 55px; /* fix expand arrow pos: 72px width - 16px arrow width - 1px border in bg */
}
body.iPhoneView .prompt-container .Bo-dropdown-wrapper:not(.disabled):not(.read-only) .displayField:after {
	left: 48px; /* fix expand arrow pos: 65px - 16px - 1px */
	top: 12px; /* ad-hoc correction */
}
body.PCView .prompt-container .Bo-dropdown-wrapper.opened ul {
	width: 70px; /* 72 - 2px ul border */
}
body.iPhoneView .prompt-container .Bo-dropdown-wrapper.opened ul {
	width: 63px; /*65 - 2px ul border */
}

/******************************************************************************/
/* Beo Popups :: Background layer */

.Bo-popup-background { /* semitransparent and fullscreen */
	z-index: 5000;
	position: fixed;
	height: 100%;
	width: 100%;
	background-color: #000;
	opacity: 0.7;
}

/******************************************************************************/
/* Beo Popups :: Container */

.Bo-popup-container { /* fullscreen */
	z-index: 10000;
	position: fixed;
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;
}

/******************************************************************************/
/* Beo Popups :: Body Container (frame) - Centering */

.Bo-popup-container {
	display: table; position: absolute; height: 100%; width: 100%;
}
.Bo-popup-container .wrapper {
	display: table-cell; vertical-align: middle
}
.Bo-popup-container .wrapper .frame {
	margin-left: auto; margin-right: auto;
}

/******************************************************************************/
/* Beo Popups :: Body Container (frame) */

.Bo-popup-container .frame {
	background-color: #000;
	background-size: 100% 100%;
	padding: 5px;
	opacity: 1;
	/*white-space: nowrap;
	overflow: hidden;*/
	text-align: center; /* center header's icon+title */
}

body.iPhoneView .Bo-popup-container .frame {
	background-image: url('../images/iPhone/bgConfirmIphone.jpg');
	width: 291px; /* jpg width 301px -padding */
	min-height: 225px; /* jpg height 235px -padding, [ASE-607] popups height is dynamic (min-height) */

}
body.PCView .Bo-popup-container .frame {
	background-image: url('../images/bgConfirm.jpg');
	width: 416px; /* jpg width 426px -padding */
	min-height: 187px; /* jpg height 197px -padding, [ASE-607] popups height is dynamic (min-height) */
}

/******************************************************************************/
/* Popups :: Header (Icon) */

.Bo-popup-container i.header {
	display: inline-block;
	line-height: 50px;
	width: 50px;
	background-position: center;
	background-repeat: no-repeat;
	margin-top: 2px;
}

/* Icon types : */
.Bo-popup-container i.header.icon-confirm {
	background-image: url('../images/ok.jpg');
}
.Bo-popup-container i.header.icon-alert {
	background-image: url('../images/warning.jpg');
}
.Bo-popup-container i.header.icon-noicon {
	background-image: none;
	width: 0px;
}

/* */
.Bo-popup-container span.header.title {
	display: inline-block;
	line-height: 50px;
	margin-top: 2px;
}

.Bo-popup-container span.header.title.righttoicon {
	padding-right: 16px; /* icon blank space compensation to center properly */
}

body.PCView .Bo-popup-container span.header.title { /* cloned from "body.PCView .Bo-page-section-title" except margin-bottom */
	color: #FFFFFF;
	font-family: /*BeoFont Bold,*/Arial Unicode MS,Sans-Serif;
	font-size: 16px;
	text-transform: uppercase;
}

body.iPhoneView .Bo-popup-container span.header.title { /* cloned from "body.iPhoneView .Bo-page-section-title" except margin-bottom */
	font-size: 13px;
	font-family: /*BeoFont Bold,*/Arial Unicode MS,Sans-Serif;
}

/******************************************************************************/
/* Beo Popups :: Body (Message) */

body.iPhoneView .Bo-popup-container p.body {
	margin-bottom: 8px;
	margin-top: 2px;
	font-size: 11px;
	color: #fff;
	text-align: center;
	padding: 5px;
}

body.PCView .Bo-popup-container p.body {
	margin-bottom: 4px;
	margin-top: 2px;
	min-height: 65px;
	font-size: 12px;
	color: #fff;
	text-align: center;
	padding: 5px;
}

/******************************************************************************/
/* Beo Popups :: Footer (Buttons) */

.Bo-popup-container .footer {
	text-align: center;
	margin-bottom: 7px;
}

/******************************************************************************/
/* Progress Screen */

.Bo-progress-screen {
	z-index: 10000;
	position: fixed;
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;
	background-color: #000;
	background-color: rgba(0,0,0,0.8);
	background-image: url('../images/BO_processing.gif');
	background-position: center;
	background-repeat: no-repeat;
}

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

.Bo-progress-screen:not(.appear-asap) {
	animation: ProgressScreenAppear 0.5s;
	animation-timing-function: ease-out;
	-webkit-animation: ProgressScreenAppear 0.5s;
	-webkit-animation-timing-function: ease-out;
}