/**
 * Styling der Meldungen: Error, Notice, usw.
 * NUR Verwendbar mit Joomla >= 3.3, da Bootstraped. 
 *
 * Erfolgsmeldung: /kontakt.html erfolgreich absenden
 * Fehlermeldung: registrierung.html mit neuem Benutzer registrieren ohne reCaptcha auszufüllen
 * Warnhinweis: /mitgliederbereich aufrufen, da registrierter Bereich
 *
 * @author: PM, RH, siehe https://trello.com/c/LRDBZEEQ
 * @link http://getbootstrap.com/2.3.2/components.html#alerts
 * @link http://docs.joomla.org/Display_error_messages_and_notices
 **/
 #system-message-container{ width:100%; margin:0 auto}
	#messages_container {
		padding: 10px; 
		background: #ECF0F1;
		margin-bottom: 15px;
		padding: 0px;
		padding-right: 30px; 
		background: none;
	}
	
	

	#messages_container .alert {
		padding: 8px 35px 8px 14px;
		margin-bottom: 20px;
		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
		background-color: #fcf8e3;
		border: 1px solid #fbeed5;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		padding:15px 15px 15px 42px;
		/*default alert wird auf grün gesetzt PM MD 14.12.2020 https://trello.com/c/qPe6EZv8/17-design-notifications-hinweismeldungen-benachrichtigungen#comment-5fd73efaf0dc4852e00e2ed6*/
		color: #468847;
		background-color: #dff0d8;
		border-color: #468847;
	}

	#messages_container .alert:last-child {
		margin-bottom: 0px;
	}
	
	#messages_container .alert h4 {
		margin: inherit;
		margin-bottom: 14px;
	}

	#messages_container .alert p.alert-message,
	#messages_container .alert h4{
		color: #c09853;
		/*default alert wird auf grün gesetzt PM MD 14.12.2020 https://trello.com/c/qPe6EZv8/17-design-notifications-hinweismeldungen-benachrichtigungen#comment-5fd73efaf0dc4852e00e2ed6*/
		color: #468847;
	}

	#messages_container .alert-warning,
	#messages_container .alert-warning h4{
		color: #c09853;
		border-color:#c09853 ;
	}
	
	
	#messages_container .alert-danger, #messages_container .alert-error {
		color: #b94a48;
		background-color: #f2dede;
		border-color: #b94a48;
	}
	#messages_container .alert-error p.alert-message,
	#messages_container .alert-error h4 {
		color: #b94a48;
	}
	
	
	#messages_container .alert-success {
		color: #468847;
		background-color: #dff0d8;
		border-color: #468847;
	}
	#messages_container .alert-success p.alert-message,
	#messages_container .alert-success h4 {
		color: #468847;
	}
	
	
	#messages_container .alert-info {
		color: #3a87ad;
		background-color: #d9edf7;
		border-color: #3a87ad;
	}
	#messages_container .alert-info p.alert-message,
	#messages_container .alert-info h4 {
		color: #3a87ad;
	}
	
	
	
	#messages_container .alert .close {
		position: relative;
		top: -2px;
		right: 0px;
		line-height: 20px;
	}
	#messages_container button.close {
		padding: 0;
		cursor: pointer;
		background: transparent;
		border: 0;
		-webkit-appearance: none;
	}
	#messages_container .close {
		cursor: pointer;
		float: right;
		font-size: 32px;
		font-weight: bold;
		/*line-height: 20px;*/
		color: #000000;
		text-shadow: 0 1px 0 #ffffff;
		opacity: 0.2;
		/*filter: alpha(opacity=20);*/
		padding: 3px 3px 10px 10px;
		z-index: 99999;
	}
	#content,
	#page {
		position: relative;
	}

	/* Nachricht soll immer oben sein, aber das Usermenu Dropdown dürfen sie nicht überlagern, da dieses manuell onClick aufgemacht wird */
		#messages_container {
			position: fixed;
		    top: 105px;
		   	width: inherit; 
		    margin: 0 auto;
			max-width: 100%;
		    z-index: 999999999999;
		    z-index: 98; /* wenn das hier auf 98 steht und #user_dropdown auf 999, dann überlagert das Usermenu korrekterweise auch die Messages (soll ja so sein). PM RH 15.11.20 */
		}
			/*Messages Container soll scrollbar sein, damit Messages auch lesbar sind wenn sie die container höhe überschreiten*/
			#messages_container #system-message{
				max-height: calc(100vh - 165px);
    			overflow-y: auto;
			}


	/* Message Container */
		#messages_container .alert .close {
		    position: absolute;
		    top: 24px;
		    right: 20px;
		    line-height: 20px;
		    padding: 0;
		}
		#messages_container .alert {
            position: relative; /* Damit die Icons auch zur Box gehören, und nicht die Icons oben sich stapeln, wenn mehrere Boxen angezeigt werden. Testbar im Kontaktformular bei ENV=DEV. */
		    padding: 20px 70px;
			border-radius: 0;
			overflow: auto;
		}
		#messages_container .alert h4 {
		    display: block; /* Überschrift soll über dem Text stehen, nicht links daneben*/
		    margin: 0;
		    margin-bottom: 20px;
		    font-size: 20px;
		}
		#messages_container .alert h4 + div {
		    display: inline-block;
	        font-size: 17px;
		}

	/* Success Message */
		/*default alert wird auf grün gesetzt PM MD 14.12.2020 https://trello.com/c/qPe6EZv8/17-design-notifications-hinweismeldungen-benachrichtigungen#comment-5fd73efaf0dc4852e00e2ed6*/
		#messages_container .alert:before,
		#messages_container .alert.alert-success:before { 
			content:"\f00c";
			background-image: none;
			font-family: 'fontAwesome';
			font-size: 30px;
			width: 30px;
			height: 30px;
		    display: block;
		    position: absolute;
		    left: 22px;
		    top: 23px;
		}

	/* Warning Message */
		#messages_container .alert.alert-warning:before {
			content:"\f071";
		}

	/* Error Message */
		#messages_container .alert.alert-error:before {
			content:"\f05e";
			}

	/* Info Message */
		#messages_container .alert.alert-info:before {
			content:"\f05a";
		}

	/* Alert Message */
		#messages_container_ecoach .alert-error {
			color: #b94a48;
			background-color: #f2dede;
			border-color: #b94a48;
		}