div.akylaWindow
{
	z-index : 10000;
	margin : 0px;
	background-color : #FFF;
	width : 40%;
	position: fixed;
	left: 30%;
	top: 25%;
	height: 50%;
	border: none;
	box-shadow: none;
	padding: 0px 0px 75px 0px;
	box-sizing: border-box;
}

div.akylaWindow > div.header
{
	overflow-y: auto;
	-ms-overflow-style: auto;
	padding: 0px 30px;
	height: 100%;
}

div.akylaWindow > div.footer
{
	height: 75px;
	position: absolute;
	padding: 0px 30px 0px 30px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}

div#fillsurveyinvitation.akylaWindow
{
	width : 50%;
	left:25%;
}

div.akylaWindow#error
{
	width: 80%;
	height: 80%;
	left: 10%;
	top: 10%;
}

div.akylaWindow#error > div.header > div.heading
{
	color: red;
	text-transform: uppercase;
	font-weight: bold;
}

div.akylaWindow div.button-holder 
{
	height : 100%;
	z-index: 3;
}
div.akylaWindow div.button-holder div
{
	position : absolute;
	right : 0px;
	bottom : 30px;
}

div.akylaWindow > div.footer > p
{
	margin : 0px;
	height : 100%;
}

div.akylaWindow div.button-holder button
{
	margin : 0px 0px 0px 8px;
}

div.akylaWindow > div.header > div.body
{
	padding: 0px;
	overflow: visible;
	max-height: none;
	min-height: initial;
	max-width: none;
}

div.akylaWindow > div.header > div.body > div
{
	padding-bottom: 11px;
}

div.akylaWindow div.body form
{
	margin: 0px;
}

div.akylaWindow div.body form > div
{
	overflow: visible;
}

div.akylaWindow div.body div.fieldset
{
	width: 100%;
	margin: 0px;
	overflow: hidden;
}

div.akylaWindow > div.header > h2
{
	letter-spacing : 2px;
	color : #FFF;
	display : block;
	padding : 15px;
	background-color : #3066c4;

}

div.akylaWindow span.attention-message > i
{
	font-size: 18px;
	position: absolute;
	left: 0px;
}

div.akylaWindow span.attention-message
{
	display: inline-block;
	padding-left: 25px;
	position: relative;
}

.akylaWindow span.message
{
	font-size : 110%;
	padding : 4px 4px 4px 20px;
	display : block;
}

.akylaWindow span.message.code, .akylaWindow span.message.Exception
{
	font-size : 9px;
	border : dashed 1px #777;
	font-weight: normal;
	font-family: Courier;
	white-space : pre;
}


.akylaWindow span.message.info
{
	color : #77F;
	background : url(../../../image/icons/fugue/information.png) no-repeat left center;
}

.akylaWindow span.message.success
{
	color : #006400;
	background : url(../../../image/icons/fugue/tick.png) no-repeat left center;
}

.akylaWindow span.message.small
{
	font-size : 10px;
}

.akylaWindow span.message.error
{
	color : #F77;
	background : url(../../../image/icons/fugue/exclamation.png) no-repeat left center;
}

.akylaWindow span.message.warning
{
	color : #337;
	background : url(../../../image/icons/original/error.png) no-repeat left center;
}

.overlay 
{
	position: fixed; 
	top: 0px; 
	left: 0px; 
	bottom : 0px;
	right : 0px;
	background: rgba(0, 0, 0, 0.6);
	z-index : 900;
	opacity: 1;
}

#content_overlay
{ 
	width: 100%; 
	height: 100%; 
}
#content_overlay td 
{ 
	vertical-align: middle; 
	text-align: center; 
}

#content 
{ 
	text-align: left; 
	background: #000; 
	color: #fff; 
	display: inline; 
	padding: 20px; 
	margin: 0px auto;
}

div.help
{
	
}

div.help div.keyboardKey
{
	float : left;
	background : url(../../../image/gfx/keyboard_key.png) no-repeat;
	width : 64px;
	height : 52px;
	text-align : center;
	padding-top : 12px;
}

div.keyboardKey span.key
{
	color : gray;
	clear : both;
	display : block;
	font-size : 14px;
	font-weight : bold;
}

div.keyboardKey span.function
{
	display : block;
	color : green;
	font-size : 8px;
}

.confirmDialog, .alertDialog
{
	padding : 5px 30px 5px 5px;
	font-size : 14px;
	line-height : 150%;
}

.alertDialog > textarea, .confirmDialog > textarea
{
	width : 100%;
	height : 400px;
}

div.akylaWindow div.heading
{
	font-size: 24px;
	position: relative;
	margin: 30px 0px;
}

div.heading > i.fa
{
	cursor : pointer;
	position : absolute;
	right : 0px;
	z-index: 1;
}

div.infoDialog h1
{
	margin : 25px -5px 10px -5px;
}

strong
{
	font-weight : bold;
}

em
{
	font-style : oblique;
}

.euurDialog > textarea
{
	width : 100%;
	height : 400px;
}

.euurDialog .yesButton,
.euurDialog .noButton,
.euurDialog .okButton
{
	margin: 0px 5px 0px 0px;
}

.euurDialog div.formPair,
.euurDialog div.formPair.element,
.euurDialog div.formPair.element.left,
.euurDialog div.formPair.element.right
{
	width: 100%;
	float: none;
	padding-left: 0px;
	padding-right: 0px;
	clear: both;
}

.euurDialog div.formPair > div.formElementLabelDiv
{
	left: 0px;
}

.euurDialog div.legend
{
	margin-left: 0px;
	margin-right: 0px;
}

/**
 * width < 600px
 * 2 columns, action bar hidden, stream hidden.
 * Phone portait, small phone landscape.
 */
@media all and (max-width:  599px) and (orientation: portrait), (max-width:  799px) and (orientation: landscape)
{
	div.akylaWindow
	{
		width: 90%;
		left: 5%;
		top: 10%;
		height: 60%;
	}

	div.akylaWindow > div.header
	{
		padding: 0px 24px;
	}

	div.akylaWindow div.heading
	{
		font-size: 20px;
		margin: 24px 0px 20px;
	}
	
	div.akylaWindow > div.footer
	{
		padding : 0px;
	}

	div.akylaWindow div.button-holder 
	{
	}

	div.akylaWindow div.button-holder > div
	{
		display : flex;
		bottom : 24px;
		left: 16px;
		right: 24px;
	}

	div.akylaWindow div.button-holder button
	{
		flex-grow : 1;
	}
}

@media all and (max-height:  480px)
{
	div.akylaWindow
	{
		height: 90%;
		top: 5%;
	}
}

/**
 * 600px <= width < 960px
 * 2 columns, action bar visible, stream hidden.
 * Large phone landscape, tablet portrait.
 */
@media all and (min-width: 600px) and (max-width: 959px) and (orientation: portrait), (min-width: 800px) and (max-width: 959px) and (orientation: landscape)
{
	div.akylaWindow
	{
		width: 80%;
		left: 10%;
	}
}

/**
 * 960px <= width < 1280px
 * 4 columns, action bar visible, stream hidden.
 * Tablet landscape, small desktop.
 */
@media all and (min-width: 960px) and (max-width: 1279px)
{
	div.akylaWindow
	{
		width: 60%;
		left: 20%;
	}
}

/**
 * width >= 1280px
 * 4 columns, action bar visible, stream visible.
 * Large desktop.
 */
@media all and (min-width: 1280px)
{

}