/**
 * CSS Deklarationen f�r alle Arten von Feedback (Panels etc.)
 *
 */
@media all {

	/*--- Feedback Panels --------------------------------------------------------------------------*/
	.feedbackPanel {
		background-color: transparent;
		border: none;
	    padding: 0;
	    list-style-type: none;
		width: 32em;
		z-index: 20000; 
		position: fixed; 
		text-align: center;
		top: 0; 
	    left: calc(50% - 32em/2); }
		@media only screen and (max-width: 40em) { 
			.feedbackPanel { width: 18em; left: calc(50% - 18em/2); } 
		}
		@media only screen and (min-width: 40.063em) and (max-width: 64em) { 
			.feedbackPanel { width: 30em; left: calc(50% - 30em/2); } 
		} 
	
	.validationBorderErrors {
		width: 100%;
		margin-top: 15px;
	}
	.validationBorderErrors ul.feedbackPanel {
		background-color: transparent;
		border: none;
		font-size: 0.875rem;
		font-weight: normal;
	    padding: 0;
	    list-style-type: none;
	    margin: -1rem 0 0.5rem;
	    position: static; 
		width: 100%;
	}
	.validationBorderErrors ul.feedbackPanel li.feedbackPanelINFO span {
        border: none;
        box-shadow: none;
    }
	.validationBorderErrors ul.feedbackPanel li.feedbackPanelWARNING span,
    .validationBorderErrors ul.feedbackPanel li.feedbackPanelERROR span,
    .validationBorderErrors ul.feedbackPanel li.feedbackPanelFATAL span {
        border: none;
        box-shadow: none;
        color: #771b7b;
        text-align: left;
    }

	li.feedbackPanelINFO span, li.feedbackPanelWARNING span, 
	li.feedbackPanelERROR span, li.feedbackPanelFATAL span {
	    display: block;
	    border-radius: 4px;
	}
	
	li.feedbackPanelINFO span {
	    background-color: #fff;
	    border-left: #379c3d 15px solid;
	    color: #333;
	    box-shadow: 0 2px 10px rgba(0,0,0,.2); }
	li.feedbackPanelWARNING span, 
	li.feedbackPanelERROR span, li.feedbackPanelFATAL span {
		background-color: #fff;
		border-left: #771b7b 15px solid;
	    color: #333;
	    box-shadow: 0 2px 10px rgba(0,0,0,.2); }
	    
	/* Bei Fehlern wird nur der erste Eintrag angezeigt */
	ul.feedbackPanel > li.feedbackPanelERROR:first-child { display: block; }
	ul.feedbackPanel > li.feedbackPanelERROR:not(:first-child) { display: none; }
	
	/*--- Foundation ---------------------------------------------------------------------------------*/
	.feedbackPanel .callout {
		font-size: 0.875rem;
		padding: .75rem 2.5rem .75rem .5rem;
		box-shadow: 0 2px 10px rgba(0,0,0,.2); }
	
	.feedbackPanel .callout.success {
		background-color: #fff !important;
		color: #333 !important;
		border-left: #379c3d 15px solid; }
	    
	.feedbackPanel .callout.error, .callout.warning {
		background-color: #fff !important;
		color: #333 !important;
		border-left: #771b7b 15px solid; }
	
	.feedbackPanel .callout .close-button { margin-left: 10px; }

	/*--- Andere Hinweis-Panels ----------------------------------------------------------------------*/
	.empty-list-hint {
		color: #831e87;
		font-size: 0.875rem;
		margin: 0.5em 0 1em; 
		line-height: 1.5em;		
		padding: 0.75em 0; }
		@media only screen and (max-width: 40em) { 
			.empty-list-hint { margin-bottom: 2em; } 
		}
		
	.tile .empty-list-hint { color: #ddd; }

	.infoPanel {
	  	color: #fff;
	  	padding: 0.5em 0;
	  	font-size: 90%;
	  	margin-top: 0.5em;
	  	cursor: default;
	}

	.infoPanel a { font-size: 100%; color: #000 !important; cursor: pointer; }
	.infoPanel button {  cursor: pointer; }


	/*--- Hilfe Boxen ---------------------------------------------------------------------------------*/
	.help-coaching { background: #d4ebb5 url("../../images/icons/white/124-bullhorn.png") 10px 10px no-repeat;
		color:#333; padding: 0.5em 1em 0.5em 50px; margin-bottom:0.5em; font-size:100%; line-height: 1.2em; }
	.help-coaching a { font-size: 90%; }

	.help-coaching-simple {
		background-color: transparent;
		color: #666;
		font-size: 90%;
		padding: 0.5em;
		line-height: 1.3em;
		margin-bottom:0.5em;
		font-size:95%;
		z-index: 100;
	}

	.help-coaching-simple h3 { font-size:140%; color: #333; margin-bottom: 1em;}
	.help-coaching-simple ul li { margin-left: 1em; }
	.help-coaching-simple a { font-family: 'WeblySleekUISemibold', Arial, sans-serif; }
	.help-coaching-simple a.verySmall { font-size: 90%; }

	.help-security { background: #efefef url("../../images/icons/32x32/037.png") 10px 10px no-repeat;
		color:#333; padding: 0.5em 1em 0.5em 50px; margin-bottom:0.5em; font-size:100%; line-height: 1.2em; }
	.help-security a { font-size: 90%; }

	.help-usage {
		color: #666;
		border: none;
		font-size: 0.875rem;
		margin-bottom:1em; }

	.help-usage .innerWrapper { padding: 0.5em 0; max-width: 950px; }
	.help-usage .innerWrapper p { font-size: 0.875rem; }
	
	@media only screen and (max-width: 40em) { 
		.help-coaching, .help-coaching-simple, .help-security, .help-usage.normal-message { /* display: none; */ } 
	}
	
	/* Veil ----------------------------------------------------------------------------------------- */
	#veil {
		z-index: 999999;
		position: fixed;
		top:0;
		left:0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
		pointer-events: none;
		display: none;
	}
	
	.veilBox { 
		margin-top: 0; 
		width: 100%;  }
	.veilBox .loaderAnimation { 
		box-shadow: 0 2px 10px rgba(0,0,0,.2);
	}

	.loaderAnimation { 
		background: #fff url("/assets/images/ajax-loader-progress.gif") center center no-repeat; 
		width: 250px;
		margin: 0 auto;
		min-height: 50px;
		border-bottom-left-radius: 24px;
        border-bottom-right-radius: 24px;
	}

	/*--- Notification (on top) -----------------------------------------------------------------------*/
	#notify {
	    position: relative;
	    width: 100%;
	    background: #fff;
	    height: 40px;
	    line-height: 40px;
	    color: #222;
	    display: none;
	    padding: 0 0.5rem;
	    font-size: 0.875rem; 
	    text-align: center; }
	    @media only screen and (max-width: 40em) { 
			#notify { display: none; } 
		}
		@media only screen and (min-width: 40.063em) and (max-width: 64em) { 
			#notify { line-height: 1.75rem; height: auto; } 
		} 

}