/************************************************************/
/* These are the styles for implmenting our own lightweight */
/* modal dialog. We do this instead of bootbox or bootstrap */
/* or other framework so that we require less dependency on */
/* other packages and we have total control to easily       */
/* customize it. It is so simple and just what we want,     */
/* so why take on extra baggage and detail?                 */
/*                                                          */
/* The below styles are directly from the widget            */
/* "clean example" page and application integration guide.  */
/* The names have been changed to make everything clear     */
/* that we are using our own custom modal package when      */
/* the style names and tags are seen.                       */
/*                                                          */
/* They were one liners in the clean example. Make them     */
/* multi-line formatted ONLY IF WE CHANGE THEM. That way    */
/* we can see which are "original" and which have been      */
/* modified.                                                */
/************************************************************/

#lightweightModalBoxWrap {display:none;z-index:40001}

#lightweightModalCloseBoxLink {position:absolute;top:-12px;right:-12px;z-index:50}

.lightweightModalBoxOverlay {position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background-color:black;opacity:.5;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter:alpha(opacity=50);z-index:40001}

/* USE THE NEXT FOUR LINES ONLY FOR APPS WITH ONE TO THREE CSPs -- SMALL MODAL*/
/*
.lightweightModalVerticalOffset {position:fixed;top:10%;right:0;left:0;width:100%;height:207px;z-index:40002}
.lightweightModalBox {width:390px;height:100%;position:relative;margin:0 auto;background-color:white;padding:0px}
@media only screen and (max-width: 490px) {.lightweightModalBox {width: 92%} .lightweightModalVerticalOffset {max-height:280px;height: 80%}}
@media only screen and (max-height: 400px) {.lightweightModalVerticalOffset {top:4%;max-height:250px !important;height: 92%}}
*/

/* FOR APPS WITH FOUR OR MORE CSPs, USE THE BELOW LINES -- LOGIN WIDGET SIZED LARGE MODAL */

.lightweightModalVerticalOffset {position:fixed;top:10%;right:0;left:0;width:100%;height:361px;z-index:40002;}

.lightweightModalBox {width:620px;height:100%;position:relative;margin:0 auto;background-color:white;padding:0px;}

@media only screen and (max-width: 640px) {
	.lightweightModalBox {width: 92%;} 
	.lightweightModalVerticalOffset {
		/* makes a lot of wasted white space in cspselect.jsp so disabling/commenting out this for now */
		/*
		max-height:580px;
		height: 85%;
		*/
		/*border: 2px solid blue;/*debug*/
	}
}

@media only screen and (max-height: 500px) {.lightweightModalVerticalOffset {max-height:361px;height: 80%;}}