/*============================
  = General Data Containers ==
  ============================*/

/*=====[ Z-index Stack ]=====*/
.pwd_msgContainer {z-index:10001;}	/*Reserved for menu and msgboxes*/
#pwd_MsgBox {z-index:10000;}
#pwd_generalDataContainer {z-index:999;}
.pwd_closeContainer {z-index:1000;}

/*General Container for full screen coverage (mostly used for display of images etc)*/
.pwd_msgContainer {
	position:absolute;
	display:flex;
	top:0;
	left:0;
	width:100%;
	height:100%;
	justify-content:center;
	align-items:center;
	background-color:rgba(0,0,0,0.8);
}
/*Msg box and Data container*/
#pwd_MsgBox,#pwd_generalDataContainer {
	position:absolute;
	color:#000000;
}
.pwd_infoContainer,.pwd_contentContainer {position:relative;}
#pwd_generalDataContainer,#pwd_MsgBox,.pwd_infoContainer,.pwd_contentContainer {overflow:hidden;}
#pwd_MsgBox,#pwd_generalDataContainer .pwd_contentContainer {
	width:100%;
	height:100%;
}
/*General internal containers*/
.pwd_infoContainer {
	transition:transform 0.5s;
	transform-origin:left bottom;
}
/*General Scrollable division placed inside the data container*/
.pwd_dataScrollDiv {	/*With header*/
	position:relative;
	float:right;
	width:calc(99% - 3.5em);
	height:calc(99% - 31px);
	overflow-x:hidden;
	overflow-y:auto;
	font-size:1em;
}
.pwd_contentContainer {	/*Without header*/
	text-align:left;
	overflow-y:auto;
}
/*System Error/Message container*/
#pwd_MsgBox {
	display:none;
	background:rgba(0,0,0,0.5);
	align-items:center;
	justify-content:center;
}
#pwd_MsgBox .pwd_infoContainer {
	width:90%;
	max-width:700px;
	max-height:400px;
}
#pwd_MsgBox .pwd_infoContainer,#pwd_generalDataContainer {
	border-radius:10px;
	background:rgba(255,255,255,0.9);
	border:2px solid rgba(97,220,197,0.8) outset;
	box-shadow:0 0 8px 8px rgba(97,220,197,0.5) inset,0 0 4px 4px rgba(97,220,197,0.5);
	text-align:center;
}
#pwd_msgBox .pwd_contentContainer {
	left:3%;
	width:94%;
}
#pwd_MsgBox .pwd_MsgBoxImg {
	content:url(../WebCommon/images/astronaut_waving1.png);
	height:70px;
}
/*General container for non-specific option screens*/
#pwd_generalDataContainer {
	display:none;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:80%;
	height:80%;
	max-width:1200px;
	padding:10px;
}
#pwd_generalDataContainer .pwd_infoContainer {
	top:2%;
	left:2%;
	width:96%;
	height:96%;
}
/* Button to Close a data division */
.pwd_closeContainer {
	position:absolute;
	top:5px;
	right:8px;
	padding:3px 2px;
	color:#ff0000;
	cursor:pointer;
	background-color:rgba(255,255,255,0.5);
	border:2px solid rgba(255,255,255,0.5);
	border-radius:4px;
	font-size:1.2em;
}
/* Mobile Media (small screen format) */
@media (max-width:600px) {
	#pwd_generalDataContainer {width:98%;}
	#pwd_generalDataContainer .pwd_infoContainer {
		top:3%;
		left:3%;
		width:94%;
		height:94%;
	}
	#pwd_MsgBox .pwd_infoContainer {max-height:600px;}
	#pwd_MsgBox .pwd_contentContainer {max-height:520px;} 
}