@charset "UTF-8";
/* CSS Document */
/*	+++++++++++++++++++++++++++++			*/
/* 	BANNERS & ALERT WINDOWS					*/


/*dropdown banner */
.alert-Banner{
	position: fixed;
	/* bottom: 0px;*/
	z-index: 999999; 
	width: 100%;
	display: none;
	letter-spacing:  0px;
	line-height: 100%;
	box-shadow: 0px 8px 10px rgba(0,0,0,0.2);
	padding: 15px 15px 10px 15px;
}

.alert-BannerTextContainer {
	margin-left: 35%;
	margin-right: 35%;
}


	.alert-Banner.error{
		background-color: var(--errorColor);
		border-bottom: 5px solid;
		border-bottom-color: var(--errorColor-dark);
	}
	
	.alert-Banner.warning {
		background-color: var(--warningColor);
		border-bottom: 5px solid;
		border-bottom-color: var(--warningColor-dark);
	}

	.alert-Banner.success {
		background-color: var(--successColor);
		border-bottom: 5px solid;
		border-bottom-color: var(--successColor-dark);	
	}



.alert-Banner-Icon {
	color: var(--whiteColor);
	font-size: 1.8rem;


}

.alert-Banner-Text {
	color: var(--whiteColor);
	line-height: 120%;
}

/*	+++++++++++++++++++++++++++++++++++++++++++++++++++		*/
/*					FLOATING WINDOWS						*/
/* primarily auto-save notifications 						*/
/*															*/
/* FOUR alert levels: error, warning, confirmation, tip		*/
/*	+++++++++++++++++++++++++++++++++++++++++++++++++++		*/


.floatingStatusContainer{
	position: fixed;	
	background-color: var(--whiteColor);
	opacity: 1.0;
	z-index: 9999999; 	
	height: 40px;
	width: 30%;
	margin-left: 35%;
	margin-right: 35%;
	display: none;
	letter-spacing:  0px;
	box-shadow: 0px 8px 10px rgba(0,0,0,0.2);
	color: var(--whiteColor);
}
		

.floatingStatusText {
	color: var(--grayColor-dark);
	text-align: center;
	font-size: 0.9em;
	font-style: italic;
	height: 100%;
	}
	
		
	
.floatingStatusIcon{
	display: flex;
	align-items: center;
	justify-content: center;			
	color: var(--whiteColor);
	font-size: 2.0rem;

	
}	
		.floatingStatusIcon.error {
			background-color: var(--errorColor);
		}	

		.floatingStatusIcon.warning {
			background-color: var(--warningColor);
		}			
	
		.floatingStatusIcon.success {
			background-color: var(--successColor);		
		}	



		
				



/*	+++++++++++++++++++++++++++++++++++++++++++++++++++		*/
/*					ALERT WINDOWS							*/
/* alerts that display for alert windows 					*/
/*															*/
/* FOUR alert levels: error, warning, confirmation, tip		*/
/*	+++++++++++++++++++++++++++++++++++++++++++++++++++		*/

.alert-Window {
	position: fixed; 
	z-index: 999999; 
	width: 35%;
	height: auto;
	margin: 4% auto;
	top: 0;
	left: 0;
	right: 0;
	box-shadow: 0px 8px 10px rgba(0,0,0,0.2);
	letter-spacing:  0px;
	line-height: 100%;
	display: none;
	border: 1px solid;
	border-color: var(--grayColor-dark);
	background-color: var(--grayColor-xtralight);
}


.alert-Window-Header {
	font-size: 2.5rem;
	display: flex;
	align-items: center;
	

}

			/*ERROR styling */
			.alert-Window-Header.error {
				border: 1px solid;
				border-color: var(--errorColor);
				background-color: var(--errorColor);
				color: var(--whiteColor);
				padding: 10px;
				
				border-bottom: 10px solid;
				border-bottom-color: var(--errorColor-dark);
		
			}
			
			/*WARNING styling */
			.alert-Window-Header.warning {
				border: 1px solid;
				border-color: var(--warningColor);
				background-color: var(--warningColor);
				color: var(--whiteColor);
				padding: 10px;
				
				border-bottom: 10px solid;
				border-bottom-color: var(--warningColor-dark);
		
			}
	
			/*SUCCESS styling */
			.alert-Window-Header.success {
				border: 1px solid;
				border-color: var(--successColor);
				background-color: var(--successColor);
				color: var(--whiteColor);
				padding: 10px;
				
				border-bottom: 10px solid;
				border-bottom-color: var(--successColor-dark);
		
			}


.alertWindowHeaderIcon	{
	justify-content: center;
	font-size: 4.0rem;
	padding: 10px 25px 10px 10px;
}

.alert-Window-Header-Text	{
	display: inline;
}

.alertWindowText {
	background-color: var(--grayColor-xtralight);

}















/*	+++++++++++++++++++++++++++++++++++++++++++++++++++		*/
/*					ALERT FRAMES 							*/
/* alerts that display on the page load 					*/
/*															*/
/* FOUR alert levels: error, warning, confirmation, tip		*/
/*	+++++++++++++++++++++++++++++++++++++++++++++++++++		*/

.alert-Frame {
	width: 80%;
	margin: 20px 0px 20px 0px;
	
}

	.alert-Frame .alert-Frame-Text {
		background-color: var(--grayColor-light-thin);
		padding: 5px 5px 5px 10px;
	}

			/*ERROR styling */
			.alert-Frame.error {
				border: 1px solid;
				border-color: var(--errorColor);
		
			}
	
			.alert-Frame.error .error-icon {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: var(--errorColor);
				color: var(--whiteColor);
				padding: 10px;
			}



			/*WARNING styling */
			.alert-Frame.warning {
				border: 1px solid;
				border-color: var(--warningColor);
		
			}
	
			.alert-Frame.warning .warning-icon {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: var(--warningColor);
				color: var(--whiteColor);
				padding: 10px;
			}


			/*SUCCESS styling */
			.alert-Frame.success {
				border: 1px solid;
				border-color: var(--submediantColor-medium);
		
			}
	
			.alert-Frame.success .success-icon {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: var(--submediantColor-medium);
				color: var(--whiteColor);
				padding: 10px;
			}
	
	
			/*TIP styling */
			.alert-Frame.tip {
				border: 1px solid;
				border-color: var(--grayColor-light);
		
			}
	
			.alert-Frame.tip .tip-icon {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: var(--grayColor-light);
				color: var(--whiteColor);
				padding: 10px;
			}