/* Layout settings for starting with a component */

/* Sets the app component position */
.sapUiOpaComponent {
	margin-left: 20%;
}

/* Sets the qunit wrapper position and causes the proper positioning of all elements inside.
   Enables the vertical scrolling */
.sapUiOpaBodyComponent #qunit {
	position: fixed;
	top: 0;
	left: 0;
	width: 20%;
	height: 100%;
	overflow-y: scroll;
}

/* Allows the line break */
.sapUiOpaBodyComponent #qunit-tests .runtime {
	float: none;
}

/* Sets the message dialog position */
/* Have to use important flag because the style property is set directly to element */
.sapUiOpaBodyComponent .sapMDialog {
	left: 50% !important;
}

/* Sets the message toast position */
/* Have to use important flag because the style property is set directly to element */
.sapUiOpaBodyComponent .sapMMessageToast {
	left: 60% !important;
}

/* Sets the blocklayer position */
.sapUiOpaBodyComponent #sap-ui-blocklayer-popup {
	top: 0;
	left: 20%;
}

/* Layout settings for starting in a frame */
.opaFrameContainer {
	position: absolute;
	top: 165px;
	right: 20px;
	padding-top: 1024px;
	padding-left: 1280px;
	overflow: hidden;
}

.opaFrame {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.7;
	/* for custom sizes */
	box-sizing: border-box;
}

.opaFrame.default-scale-x {
	transform: scaleX(0.6);
	transform-origin: 1280px 0;
}

.opaFrame.default-scale-y {
	transform: scaleY(0.6);
	transform-origin: 0 0;
}

.opaFrame.default-scale-both {
	transform: scale(0.6);
	transform-origin: 1280px 0;
}

/* The :hover selector is used to select elements (in our case the OPA-Frame) when you mouse over them */
.opaFrame:hover {
	opacity: 1;
}

/* Layout settings for starting with FLP sandbox */

.sapUiOpaBodyFLP #qunit {
	position: absolute;
	top: 0;
	height: 100%;
	width: 30%;
	overflow: auto;
	opacity: 0.7;
}

.sapUiOpaBodyFLP #qunit:hover {
	opacity: 1;
}

.sapUiOpaBodyFLP #qunit-header {
	border-radius: 0 !important;
}
.sapUiOpaBodyFLP #qunit .test-message {
	width: 100%;
}