/*****************************************************************************/
/*               NAMENSKONVENTIONEN FÜR NEUE CSS STYLES                      */
/*****************************************************************************/
/*
1. Sprechenden Namen in Englisch vergeben 
2. Namenskombinationen:
	- mit Unterstrich (z.B. "wizard_navi")
*/
/*****************************************************************************/
/*               INHALTSVERZEICHNIS                                          */
/*****************************************************************************/

/*****************************************************************************/
/*               Fehlermeldung / Infobox unter Seitenüberschrift             */
/*****************************************************************************/	
/*****************************************************************************/
/*               Fehlermeldung / lokal unter Eingabefeld                     */
/*****************************************************************************/	
/*****************************************************************************/
/*               Fehlermeldung für Zweispaltige Eingabefelder                 */
/*****************************************************************************/
/*****************************************************************************/
/*               Legende                                                     */
/*****************************************************************************/
/*****************************************************************************/
/*               Datenbox                                                    */
/*****************************************************************************/
/*****************************************************************************/
/*               Hilfebox                                                    */
/*****************************************************************************/
/*****************************************************************************/
/*               ConflicView  GUI                                            */
/*****************************************************************************/
/*****************************************************************************/
/*               Curtains                                                    */
/*****************************************************************************/
/*****************************************************************************/
/*               404 Meldung UX                                              */
/*****************************************************************************/
/*****************************************************************************/
/*               Meldungen Allgemein                                         */
/*****************************************************************************/
/*****************************************************************************/
/*               Komponente WidgetPanel, Portal                              */
/*****************************************************************************/
/*****************************************************************************/
/*               Angular "Meldungspöppel"                                    */
/*****************************************************************************/
/*****************************************************************************/
/*               Banner Rückmeldestatus etc.                                 */
/*****************************************************************************/



/*****************************************************************************/
/*               ANFANG CSS                                                  */
/*****************************************************************************/   
/*****************************************************************************/
/*               Fehlermeldung / Infobox unter Seitenüberschrift             */
/*****************************************************************************/	
/*****************************************************************************/
/*              Allgemeine Container                                         */
/*****************************************************************************/
.infobox {
	margin-bottom: 0.2em;
	background-color:var(--contrastFontColor);
}
.infobox button {
	font-size: var(--fontSize4);	
}

.infobox button.submit_highlighted {
	font-size: 120%;
}

.messages-infobox-container{
	display: flex;
	justify-content: center;
} 

.messages-infobox {
	z-index:1300;	
	padding:28px 28px 40px 28px;	
	color: var(--contrastFontColor);
}

.messages-infobox-scroll-container {
    overflow:auto;
	max-height:300px;	
    width: 400px;
    padding:1px;
}

.messages-infobox h2{	
	color: var(--contrastFontColor);
}

/*Bei Liste mit nur einem Element erfolgt die Darstellung ohne Aufzählungszeichen*/
.messages-infobox li:only-child {
	list-style-type: "";
}

.infobox ul, .infobox ol {
	padding-top: 0;
	padding-bottom: 0;
	margin-top: 0;
	margin-bottom: 0;
	font-size: var(--fontSize6);
}

.infobox p {
	height: 1%;
	padding: 0;
}

.wide {
	padding-bottom: 0.5em;
}
/**
 * Popupsystemmeldungen: gemeinsame CSS-Styles
 **/ 
.error_infobox,
.warning_infobox,
.success_infobox,
.info_infobox,
.confirm_infobox  {	
  	box-shadow : 4px 4px 16px var(--highlightShadowColor);
  	border-radius: var(--popupRadius);
    border: var(--highlightBorderTransparent);
	}

.error_infobox ul li, .info_infobox ul li, .warning_infobox ul li,
.success_infobox ul li, .confirm_infobox ul li {
	background-size: var(--backgroundImagesSize);
	font-weight:bold;
	font-size:var(--fontSize3);
}

.success_infobox {
	background-color:var(--backgroundColor13);	
}

.info_infobox {
	background-color:var(--backgroundColor11);	
}

.error_infobox, .traffic_light_red {
	background-color:var(--backgroundColor6);	
}

/*Schliessen-X-Button Popup-Meldung*/
.error_infobox button span,
.warning_infobox button span,
.success_infobox button span,
.info_infobox button span,
 .confirm_infobox button span  { 
  	-webkit-border-radius:1px;
  	-moz-border-radius:1px;
 	-o-border-radius:1px;
  	border-radius:1px;
  	position:relative;
}

.callBackButton.ok-button-behavior:before{
	content: "\ea58" / "";
	font-family: "HISinOneIcons" !important;
	font-size: 120%;
	margin-right: 9px;
}

.callBackButton.cancel-button-behavior{
	background-color: var(--backgroundColor1);
}

.callBackButton.cancel-button-behavior:before{
	content: "\e99b" / "";
	font-family: "HISinOneIcons" !important;
	font-size: 120%;
	margin-right: 9px;
}

.callBackButton.ok-button-behavior:hover:before, .callBackButton.cancel-button-behavior:hover:before,
.callBackButton.ok-button-behavior:focus:before, .callBackButton.cancel-button-behavior:focus:before {	
	color: var(--basicFontColor);
}

.infobox.error_infobox button,
.infobox.warning_infobox button,
.infobox.success_infobox button,
.infobox.info_infobox button {
	float:right;
	color: var(--contrastFontColor);
	margin-right:15px;
}

.info_infobox .messages_infobox_header .submit_image:hover, 
.info_infobox .messages_infobox_header .submit_image:focus {
	background-color:var(--backgroundColor12) !important;	
}

.success_infobox .messages_infobox_header .submit_image:hover,
.success_infobox .messages_infobox_header .submit_image:focus {
	background-color:var(--backgroundColor13);	
}

.simple-close-button-behavior {
	margin-top: -4px;
}


.error_infobox .messages_infobox_header .submit_image:hover,.error_infobox .messages_infobox_header .submit_image:focus {
  		background-color: var(--errorColor) !important;    	
}

.error_infobox img,
.warning_infobox img,
.success_infobox img,
.info_infobox img,
.confirm_infobox img{
	margin-right: 0.3em;
	margin-bottom: 0.1em;
}

.helptext .iconfont-error_mono::before{
	color: var(--backgroundColor5);
}

.error_infobox ul,
.warning_infobox ul,
.success_infobox ul,
.info_infobox ul,
.confirm_infobox ul{
	padding-left:30px;
	padding-right:13px;
	margin: 0.8em 0.2em 0.2em 0;
	line-height: 1.2em;
}

.messages_infobox_header{
	margin:0;
	font-weight: bold;
	font-size: 18px;
	padding: 13px;
	display:inline-block;
}

.messages_infobox_header span:before,
.messages-infobox .infobox_close span:before{
	color: var(--contrastFontColor);
	vertical-align:bottom;
}

.messages-infobox .infobox_close:hover span:before,
.messages-infobox .infobox_close:focus span:before{
	color:var(--basicFontColor);
}

.messages-infobox .infobox_close{
	margin-top:13px;
}

/* User-Rückfrage*/
 
 .userQuery {
	overflow: auto;
    max-height: 50vh;
}

.userQuery > h2 ul > li{
	font-weight: normal;
}

/*Zusammenführung von Meldung und Userrückfrage, Alumni und Ehemaligen-Regsitrierung #301805*/
.userQuery h2 p:first-of-type {
	display: inline;
}

/*Links*/

.infobox a,.infobox a:visited,.infobox a:active {
	text-decoration: underline;
	cursor: pointer;
	color: var(--contrastFontColor);
}

/*Error*/

.error_infobox a:focus, .error_infobox a:hover {
	color: var(--basicFontColor);  
    background-color:var(--highlightBackgroundColor);
}

/*Information*/

.info_infobox a:focus, .info_infobox a:hover {
	color: var(--basicFontColor); 
	outline:none;
    background-color:var(--highlightBackgroundColor) !important;
}

.info_infobox a:focus{
   outline:var(--highlightFocusOutline);
}

/*Warning*/

.warning_infobox a:focus, .warning_infobox a:hover {
	color: var(--basicFontColor);
	outline:none;
    background-color:var(--highlightBackgroundColor) !important;
}

.warning_infobox a:focus{
	outline:var(--highlightFocusOutline);
}

.warning_infobox ul{
	list-style-image: none !important;
}

.warning_infobox .messages_infobox_header .submit_image:hover,
.warning_infobox .messages_infobox_header .submit_image:focus {
	background-color:var(--backgroundColor6);	
}

.warning_infobox {
	background-color:var(--backgroundColor7);	
}

/*Success*/

.success_infobox a:focus, .success_infobox a:hover {
	color: var(--basicFontColor);
	outline:none;
    background-color:var(--highlightBackgroundColor) !important;
}

.success_infobox a:focus {
	outline:var(--highlightFocusOutline);
}

.success_infobox ul{
	list-style-image: none !important;
}

/*Confirm*/
.confirm_infobox {
	padding:30px;
	border-radius:var(--popupRadius);
} 

.confirm_infobox, .confirm_infobox h1, .confirm_infobox h2 {
	color: var(--basicFontColor);
	background-color: var(--backgroundColor2) !important;
	width: 100%;
	min-width: 280px;
	max-width: 650px;	
	margin: auto;
	overflow: hidden;
} 

.confirm_infobox h2.sessionTimeoutAccessibilityTitle{
	text-align:center;
}

.confirm_infobox a, .confirm_infobox a:visited, .infobox a:active {
	color: var(--basicFontColor);
}
.confirm_infobox a:focus, .confirm_infobox a:hover {
	color: var(--basicFontColor);
	outline:none;
    background-color:var(--highlightBackgroundColor) !important;
}

.confirm_infobox a:focus {
	outline:var(--highlightFocusOutline);
}

.infobox.error_infobox button.closeButtonMessagesESC, .infobox.warning_infobox button.closeButtonMessagesESC,
.infobox.success_infobox button.closeButtonMessagesESC, .infobox.info_infobox button.closeButtonMessagesESC {
	background-color: transparent;
	text-align: right;
	font-weight:bold;
	font-size:80%;
}

.infobox.error_infobox button.closeButtonMessagesESC:hover, .infobox.warning_infobox button.closeButtonMessagesESC:hover,
.infobox.success_infobox button.closeButtonMessagesESC:hover, .infobox.info_infobox button.closeButtonMessagesESC:hover {
	background-color: transparent !important;
	box-shadow:none;
}

.infobox.error_infobox button.closeButtonMessagesESC:focus, .infobox.warning_infobox button.closeButtonMessagesESC:focus,
.infobox.success_infobox button.closeButtonMessagesESC:focus, .infobox.info_infobox button.closeButtonMessagesESC:focus {
	color:var(--basicFontColor);
}

.sys_warning{
	max-width:700px;
}

.editUiKeyMessage{
	text-align: center;
	padding: 5px 0;
	margin: 5px 0;
}

.editUiKeyMessage.info_infobox {
	flex: 0 0 100%;
	-ms-flex: 0 0 100%;
	-webkit-flex: 0 0 100%;
	box-sizing: border-box;
}

/**
 * ENDE Informationsboxen für Meldungen außerhalb von Fieldsets
 **/

/*****************************************************************************/
/*     Meldungen, die in einem Fieldset oder einer Tabelle stehen        */
/*****************************************************************************/

/*     Hilfetext in Fieldset und Tabelle     */
div.errortext:not(.ui-selectonemenu), div.warningtext, div.successtext, div.helptext, div.confirmtext {
	clear: both;
	background: var(--backgroundColor2);
	margin: 0;
	padding: 1em;
	line-height:1.3em;
	white-space: normal;	
	z-index: 2;	
	box-shadow: 0 1px 1px 0 rgba(66, 66, 66, 0.08), 0 1px 3px 1px rgba(66, 66, 66, 0.16);
	border-radius: 2px;
}

div.warningtext.borderNone, div.successtext.borderNone, div.helptext.borderNone {
	box-shadow: none;
	padding:5px 0;
}


div.errortext ol, div.warningtext ol, div.successtext ol, div.helptext ol, div.confirmtext ol{
    padding-left: 12px;
}

.overlay.modal .overlayHeading .showHelp .box_title h2{
	background-image: url('/HISinOne/images/icons/information.svg') !important ; 
	background-repeat: no-repeat;
	background-size: 20px 20px;
	background-position:1px 4px;
	padding: 0 25px;
	font-weight: normal;
}

.showHelp .box_title:focus h2{
	padding: 0 25px;
	border:1px dashed var(--basicButtonBorderColor);
	display:inline-block;
}

.borderNone{
	background: transparent;
	border-style: none !important;
	padding: 0.5em 0.5em 0.5em 0;
}

.paddingNone{
	padding:0;
}

.fieldsetMessageImage{
	margin-right: 1em;
	margin-bottom: 0;
	padding:0;
	float:left;
}

.fieldsetMessageText{
	margin-top:2px;
}

/* Entfallene Veranstaltung im Stundenplan */
.schedulePanel .errortext .fieldsetMessageText {
	margin-left: 0px;
}

/* .warningtext, .successtext, .helptext, .confirmtext,
.messageGreen, .longHelptext {
    border: var(--border1);    
} */

div.errortext, p.errortext{
    border:1px solid var(--errorColor); 
	background-color: var(--backgroundColor2);
}

div.errortext.customerwarningtext{
    border:none; 
}

input.errortext, input.warningtext, input.successtext, input.helptext, input.confirmtext{
    border: var(--border3);
}

.helptext ul, 
.errortext ul, 
.warningtext ul, 
.successtext ul,
.confirmtext ul{
	padding-left:1em;
	margin: 0.3em 0.2em 0.2em 1em;
	line-height: 1.3em;
}

.helptext a, 
.errortext a, 
.warningtext a, 
.successtext a,
.confirmtext a{
	padding-left:0;
	margin-left:0;
}

.warningtext div.logoNutzerkonto a{
	padding:30px 20px 24px 162px;
}

.helptext a:focus, .helptext a:hover, .successtext a:focus, .successtext a:hover, .warningtext a:focus, .warningtext a:hover, .errortext a:focus, .errortext a:hover, .confirmtext a:focus, .confirmtext a:hover {
	color: var(--basicFontColor);  
    background-color:var(--highlightBackgroundColor);
}

/*     Hinweistext in Fieldset und Tabelle        */
.helptext, .helptext a, .helptext a:visited, .helptext a:active {	
/* 	color: #6e680e; */
	font-size:var(--fontSize6);
	/* font-weight:bold; */
}

div > .helptext{
	margin-top: 0.5em;
	margin-bottom:2px;
}

.helptext .iconList li,
.errortext .iconList li,
.warningtext .iconList li,
.successtext .iconList li,
.confirmtext .iconList li  {
	padding-left:2px;
}

/*     Fehlertext in Fieldset  und Tabelle       */
.errortext, .errortext a, .errortext a:visited, .errortext a:active {
	color: var(--errorColor);
}
.errortext ul{
	list-style-image:url('/HISinOne/images/icons/bullet_red.svg');
}

.errortextIn {
background-color:var(--errorColor) !important;
color: var(--contrastFontColor) !important;
}

.errortextIn:focus {
	color: var(--backgroundColor38) !important; 
    background-color: var(--highlightBackgroundColor) !important;
}

.errortextPlan .errortext{
	padding:0;
	background-color:transparent;
	border:none;
}

.errortextPlan h4{
	padding:0;
	margin:0;
}

.warningtextPlan .warningtext{
	padding:0;
	background-color:transparent;
	border:none;
}

.warningtextPlan h4{
	padding:0;
	margin:0;
}

/*     Warnungsmeldung im Fieldset und Tabelle         */
.warningtext, .warningtext a, .warningtext a:visited, .warningtext a:active,
.warningtext h2 {
	color: var(--warningFontColor);
}

.warningtext h2 {
	display:inline-block;
}

/*     Erfolgsmeldung in Fieldset und Tabelle        */
.successtext, .successtext a, .successtext a:visited, .successtext a:active {
	color: var(--backgroundColor13);
}
.successtext ul{
	list-style-image:url('/HISinOne/images/icons/bullet_green.svg');
}

/*     User Confirm in Fieldset und Tabelle        */
.confirmtext, .confirmtext a, .confirmtext a:visited, .confirmtext a:active {
	color: var(--accentFontColor);
}
.confirmtext ul{
	list-style-image:url('/HISinOne/images/icons/bullet_blue.svg');
}


/*    NUR für Meldung in Tabelle: anderes Padding      */
span.errortext {	
	padding: 0 0.8em 0.5em 0.8em;	
}

/*Infotext ohne Info-Icon*/
.singleInfo{
	font-style: italic;
	color:var(--infoFontColor);
}

/**
 * ENDE Meldungen, die in einem Fieldset oder einer Tabelle stehen 
 **/
/*****************************************************************************/
/*               Fehlermeldung / lokal unter Eingabefeld                     */
/*****************************************************************************/	

li.error input[type="text"]:focus,
li.error input[type="password"]:focus,
li.error input[type="checkbox"]:focus,
li.error input[type="radio"]:focus,
li.error input[type="file"]:focus, 
li.error select:focus, 
li.error textarea:focus {
	color:var(--backgroundColor38) !important;   
    background-color:var(--highlightBackgroundColor) !important; 
}

tr.error input[type="text"]:focus,
tr.error input[type="password"]:focus,
tr.error input[type="checkbox"]:focus,
tr.error input[type="radio"]:focus,
tr.error input[type="file"]:focus,
tr.error select:focus, 
tr.error textarea:focus {
	color:var(--backgroundColor38);
    background-color: var(--highlightBackgroundColor);
}

div.error label {
	color: var(--errorColor);
	font-weight: normal;
}

tr.error label {
	color: var(--errorColor);
	font-weight: bold;
}


div.error select {
	border:1px solid var(--errorColor);
}


div.error p.error {
	color: var(--errorColor);
	padding: 0;
}

tr.error p.error {
	color: var(--errorColor);
	margin: 0 0 0 0;
	padding: 0;
}


p.error {
	color: var(--errorColor);
	margin: 1px 1px 1px 31%;
	padding: 1px;
}

div.error span, span.error {
/*	nicht barrierefrei: outline: none;*/
	color: var(--errorColor);
}

/*warning*/

div.warning input[type="text"]:focus,
div.warning input[type="password"]:focus,
div.warning input[type="checkbox"]:focus,
div.warning input[type="radio"]:focus,
div.warning input[type="file"]:focus, 
div.warning select:focus, 
div.warning textarea:focus {
	color: var(--warningFontColor) !important;   
    background-color: var(--highlightBackgroundColor) !important; 
}

tr.warning input[type="text"]:focus,
tr.warning input[type="password"]:focus,
tr.warning input[type="checkbox"]:focus,
tr.warning input[type="radio"]:focus,
tr.warning input[type="file"]:focus,
tr.warning select:focus, 
tr.warning textarea:focus {
	color:var(--warningFontColor);   
    background-color:var(--highlightBackgroundColor); 
}

div.warning label {
	color: var(--warningFontColor);
	font-weight: normal;
}

tr.warning label {
	color: var(--warningFontColor);
	font-weight: bold;
}

div.warning input[type="text"],
div.warning input[type="password"],
div.warning input[type="checkbox"],
div.warning input[type="radio"],
div.warning input[type="file"], 
div.warning textarea /**, div.warning select**/  {
	border:1px solid var(--warningFontColor) !important;
	color: var(--warningFontColor) !important;
}

div.warning select {
	border:1px solid var(--warningFontColor);
}

tr.warning input[type="text"],
tr.warning input[type="password"],
tr.warning input[type="checkbox"],
tr.warning input[type="radio"],
tr.warning input[type="file"],
tr.warning textarea /**, tr.warning select **/ {
	color:var(--contrastFontColor);
	background-color:var(--backgroundColor7);
}

div.warning p.warning {
	color:var(--warningFontColor);
	padding: 0;
}

tr.warning p.warning {
	color: var(--warningFontColor);
	margin: 0 0 0 0;
	padding: 0;
}


p.warning {
	color: var(--warningFontColor);
	margin: 1px 1px 1px 31%;
	padding: 1px;
}

div.warning span, span.warning {
/*	nicht barrierefrei: outline: none;*/
	color: var(--warningFontColor);
}

/*****************************************************************************/
/*               Hinweismeldung / lokal unter Eingabefeld                     */
/*****************************************************************************/	

div.info input[type="text"]:focus,
div.info input[type="password"]:focus,
div.info input[type="checkbox"]:focus,
div.info input[type="radio"]:focus,
div.info input[type="file"]:focus, 
div.info select:focus, 
div.info textarea:focus {
	color:var(--infoFontColor) !important;  
    background-color:var(--highlightBackgroundColor) !important; 
}

tr.info input[type="text"]:focus,
tr.info input[type="password"]:focus,
tr.info input[type="checkbox"]:focus,
tr.info input[type="radio"]:focus,
tr.info input[type="file"]:focus,
tr.info select:focus, 
tr.info textarea:focus {
	color:var(--infoFontColor);  
    background-color:var(--highlightBackgroundColor); 
}

div.info label {
	color:var(--infoFontColor);
	font-weight: normal;
}

tr.info label {
	color:var(--infoFontColor);
	font-weight: bold;
}

div.info input[type="text"],
div.info input[type="password"],
div.info input[type="checkbox"],
div.info input[type="radio"],
div.info input[type="file"], 
div.info textarea /**, li.info select**/  {
	background-color:var(--infoFontColor) !important; 
	color: var(--contrastFontColor) !important; 
}

div.info select {
	border:1px solid var(--infoFontColor);
}

tr.info input[type="text"],
tr.info input[type="password"],
tr.info input[type="checkbox"],
tr.info input[type="radio"],
tr.info input[type="file"],
tr.info textarea /**, tr.info select **/ {
	background-color: var(--infoFontColor);
	color: var(--contrastFontColor); 
}

div.info p.info {
	color:var(--infoFontColor);
	padding: 0;
}

tr.info p.info {
	color:var(--infoFontColor);
	margin: 0 0 0 0;
	padding: 0;	
}

p.info {
	color:var(--infoFontColor);
	margin: 1px 1px 1px 31%;
	padding: 1px;
}

div.info span, span.info {
/*nicht barrierefrei:	outline: none;*/
	color: var(--infoFontColor);
}

.infotext {
	clear: both;
	background: var(--backgroundColor2);
	margin: 0;
	padding: 0.5em 0.5em 0.5em 0.7em;
	line-height:1.2em;
	white-space: normal;
	-moz-border-radius: 8px;
	border-radius: 8px;
	z-index: 2;
    border: var(--border1);
}

.infotext a:focus, .infotext a:hover {
	color: var(--basicFontColor);   
    background-color:var(--highlightBackgroundColor);  
}

.infotext, .infotext a, .infotext a:visited, .infotext a:active {	
	color:var(--infoFontColor);	
}
/* temporarily highlight important parts of a mask */
.highlight {
    clear: both;
    background: var(--highlightBackgroundColor);
    color: var(--accentFontColor);
    -moz-border-radius: 3px;
    border-radius: 3px;
    z-index: 2;
    border: var(--highlightBorder);
    padding: 0.5em;
    margin: 0;
}
.highlight .input_98,.highlight .dropdown_96 {
	width: 100%;
}

/*	Bewerberschnellerfassung */
.fehlermeldung .jsf {
	float: right;
	width: 75%;
}

.labelrequirederror {
	font-style: italic;
	float: right;
	text-align: left;
}

.input .error {
	outline-color: var(--errorColor);
	outline-style: solid;
	outline-width: thin;
}

.errorColor {
	color: var(--errorColor);
	margin: 0;	
	margin-bottom: 4px;
	padding: 1px;
}

/*	Ende Bewerberschnellerfassung */


/*****************************************************************************/
/*      Fehlerdarstellung für clientseitige Validierung (JS) */
/*****************************************************************************/

 /* Für normale Eingabefelder:  */ 
.labelError {
	color: var(--errorColor);
	font-weight: bold;
}

.inputError:focus, div .inputError:focus, input.inputError[type='text']:focus {
	color:var(--backgroundColor38) !important; 
}

input.inputError,
input.inputError[type='text']:hover:not(:focus) {
	background-color:var(--backgroundColor2) !important;
	background-color:var(--backgroundColor41) !important;
}

 /* Für Checkboxen und Radiobuttons:  */
.containerError {
	float:left;
	padding:5px;
	border:1px solid var(--backgroundColor41);	
	outline:none;
    background-color:var(--highlightBackgroundColor) !important;
}
.containerError .noLabel, 
.containerError .labelAsDiv,
.containerError .labelAsDiv_75,
.containerError .labelAsDiv_95 {
	color: var(--errorColor);
	font-weight: bold;
}

/*****************************************************************************/
/*              Meldung in grüner Farbe                   	                 */
/*****************************************************************************/
/**
 * Verwendung: Schrift mit Rahmen für Meldung, in Maskenentwurf immat_overview.xhtml
 * Verwendungszweck: Heraushebung einer Information, Zuweisung zu h5-Überschrift
 */
/*Layout für eine wichtige Nachricht: nur für Studienbewerbung*/ 
.messageImportantAPP {
	background-color: var(--highlightBackgroundColor);
	padding: 1.1em 1em 1em 2.4em;
    margin: 3px 3px 3px 1px;
	background-image: url('/HISinOne/images/icons/error.svg') !important ; 
	background-position:5px 16px;
	background-repeat:no-repeat;
	border: var(--border1);
	background-size: var(--backgroundImagesSize);
}

/**
 * Verwendung: Markierung von JSF-Komponenten (rote Umrandung), die eine autom. erzeugte ID haben. Wird nur HIS-intern verwendet.
 */
.missingIdWarning {
	outline: 1px dotted var(--errorColor) !important;
}

/**
 * Verwendung: Hilfetext weiter rechts darstellen 
 */
.helptext_indent_30 {
	margin-left: 30%;
}

/*****************************************************************************/
/*               Legende                                                     */
/*****************************************************************************/
/*Legende ohne Umbruch für Icons oder Raumplan*/
.legendEntries {
	list-style-type: "";
	list-style-position: inside;
	margin: 0;
	padding: 0;
	font-size: var(--fontSize5);
}

.legendEntry {
	float: left;
	margin: 0 5px 0 0;
	padding: 0;
	white-space: nowrap;
	line-height: 2.2em;
}
/*Google Chrome fix
.legendEntry {
	margin-right: 2.5em;
}*/

.legendEntryBox {
	float: left;
	margin-right: 0.3em;
	margin-left: 0.3em;
	width: 1.6em;
	height: 1.6em;
	text-align:center;
}

.legendEntryIcon {
	float: left;
	margin: 0;
	padding: 0;
	line-height: 2.2em;	
	margin-top:0;
	margin-right:5px;
}

.legendEntryText {
	line-height: 2.2em;
}

/*Legende mit Umbruch*/
.legendHelpList {
	margin-top: 0;
	margin-bottom: 10px;
	padding-left: 0.5em;
	padding-right: 1em;
	font-weight: normal;
	list-style-type: "";
	background-color:var(--backgroundColor2) !important;
}

.legendHelpList li {
	padding: 8px;
	margin-top: 0;
	margin-bottom: 1px;
	border-bottom: 1px dashed var(--basicButtonBorderColor);
	list-style-type: "";
}

.legendHelpList a {
	font-weight: bold;
	text-decoration: underline;
}

.legendHelpList .legendImageContainer {
	float: left;
	margin-top:1px;
}

.legendHelpList .titleContainer {
	margin-left: 26px;
}

.legendHelpList .textContainer {
	margin-left: 26px;
}

.legendHelpList p {
	margin-bottom: 0;
	color:var(--basicFontColor);
	margin-top: 3px;
	padding-bottom: 0.3em;
	padding-right: 0;
	text-align: justify;
	line-height: 1.3em;
}

.legendMenu  {
	list-style-type: "";
}

/*****************************************************************************/
/*               Hilfebox                                                    */
/*****************************************************************************/

.helpBox{
	min-width:200px;
	float: right;
}

.helpBox .helpBoxLink{
	margin-right:30px;
	float:right;
}

.startPageInfobox{
	margin-top:-30px;
}

.startPageInfobox .showHelp{
	margin-top: 30px;
}

.helpBoxPortal .helpBoxLink{
	float:right;
	margin-top: 0;
	margin-right:3px;
}

.helpBoxPortal{
	display: inline-block;
	float: right;
}

.helpBoxPortal .helpBox .helpBoxLink{
	margin-top:2px;
}

.inlineButton{	
	display:inline-block;
	margin-top:6px;
}

.inlineButtonFloatNone{
	float:none;
}

.inlineButton .helpBoxLink{
	float:none;
}

.inboxWrapper .helpBoxLink{
	margin-right:-2px;
	margin-top:10px;
}

@media screen and (max-width: 1024px){ 	
	 .sys_warning{
		width: 600px;
	}
}

/* Verwendung: Hilfetexte*/
.longText {
	line-height: 1.5em;
}

/*****************************************************************************/
/* ConflicView  GUI  */
/*****************************************************************************/

/*Curriculum Designer, Rails-Oberfläche, Verwendungszweck:	Anzeigen von Konflikten beim Überschreiben von Änderungen*/
.input_standard_conflict,.input_conflict,.input_conflict:hover,.input_conflict:focus
	{
	background-color: var(--backgroundColor24) !important;
	border: 2px solid var(--backgroundColor41);
}

.input_standard_solveConflict,.input_solveConflict,.input_solveConflict:hover,.input_solveConflict:focus
	{
	background-color: var(--backgroundColor17) !important;
	border: 2px solid var(--backgroundColor13);
}

/* Für Eingabefelder mit Konflikten:  */
.labelConflict, .duplicateConflict {
	color: var(--warningFontColor);
	font-weight: bold;
}

/* Für Eingabefelder mit Konfliktlösungen:  */
.labelSolveConflict {
	color: var(--backgroundColor13);
	font-weight: bold;
}



/*****************************************************************************/
/* Curtains  */
/*****************************************************************************/
/**
 * Verwendung: Rückfragen (zB löschen) zentriert und hervorgehoben anzeigen
 */
.curtainBoxCallBack {
	min-width: 200px;
	margin: 0 auto;
	margin-top: 20vh;
	z-index:1300;
}

.curtainTableConfig {
	width: 820px;
	min-height: 200px;
	margin: 0 auto;
	margin-top: 2%;
	overflow: auto;
	max-height: 90vh;
}

.curtainBoxCallBackBackground {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1101;
	/* Fallback for web browsers that doesn't support RGBa */
	background-color: rgb(204, 204, 204);
	/* RGBa with 0.3 opacity */
	background-color: rgba(204, 204, 204, 0.3);
}
/**
 * Blur content after Session Timeout, set by Javascript
 */
.blurFilter {
	filter: blur(3px);
}

/**
 * Verwendung: Hintergrund 'ausgrauen' bei kurzen Requests (z.B. AJAX), hier soll
 */
.curtainBackgroundTransparent {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1301;
	background-color: transparent;
}

/**
 * Verwendung: Warten-Anzeige nach Request
 */
.waitingCursor {
	cursor: wait;
}

.imageContainerWaitingPadding {
	padding-top: 33px;
	padding-bottom: 33px;
}

.imageContainerWaitingPadding img{
	height: 33px; 
	width: 33px;		
}

/*****************************************************************************/
/*               404 Meldung UX                                              */
/*****************************************************************************/

#block {	
	-webkit-transition-property: left, top, background, -webkit-transform;
	-moz-transition-property: left, top, background, -webkit-transform;
	-o-transition-property: left, top, background, -webkit-transform;	
	-webkit-transition-duration: 2s, 2s, 1s, 1s;
	-moz-transition-duration: 2s, 2s, 1s, 1s;
	-o-transition-duration: 2s, 2s, 1s, 1s;	
	-webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
	-moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
	-o-transition-timing-function: ease-out, ease-in, linear, ease-in-out;	
	-webkit-transition-delay: 0, 0, 0, 1s;
	-moz-transition-delay: 0, 0, 0, 1s;
	-o-transition-delay: 0, 0, 0, 1s;
	background-color:var(--backgroundColor12) !important;	
}

#stage:hover #block {
	left: 50px;
	top: 50px;
	background: var(--errorColor);
	-webkit-transform: rotate(360deg); 
	-moz-transform: rotate(360deg); 
	-o-transform: rotate(360deg); 
	-ms-transform: rotate(360deg); 
	transform: rotate(360deg);
}

#stage{
	background: none repeat scroll 0 0 var(--backgroundColor3);
    float: left;
    height: 100px;
    margin: 3px 0 3px 0;
    position: relative;
    width: 100px;
}

#block {
    -moz-transition: left 2s ease-out 0s, top 2s ease-in 0s, background 1s linear 0s, -moz-transform 1s ease-in-out 1s;
    -webkit-transition: left 2s ease-out 0s, top 2s ease-in 0s, background 1s linear 0s, -moz-transform 1s ease-in-out 1s;
    -o-transition: left 2s ease-out 0s, top 2s ease-in 0s, background 1s linear 0s, -moz-transform 1s ease-in-out 1s;
    background: none repeat scroll 0 0 var(--backgroundColor11);
    color: var(--contrastFontColor);
    height: 50px;
    left: 0;
    position: absolute;
    top: 0;
    width: 50px;
}

.serverError img{
	margin-right:5px;
	position:relative;
	bottom:4px;
}

/*****************************************************************************/
/*               Meldungen Allgemein                                         */
/*****************************************************************************/

/* Zweck: 	Debug-Panel, welches auf jeder XHTML-Seite angezeigt wird, ausgestalten.
 			Hier wird bspw. auch die Checkbox das Data-Dictionary angezeigt */
.debugJsf {
	display: block;	
	font-size: var(--fontSize5);
	background-color: var(--backgroundColor3) !important;
	font-size: var(--fontSize5);
}

.debugJsf label{
	padding-left:3px;
	top:0;
	vertical-align: middle;
}

/**
 * Zweck: Debug Infoboxen u. A. APP Studienbewerbung, Farbkontraste von Hilfebuttons und Overlay innerhalb der Debug-Infobox*/
.infobox.info_infobox.messages-infobox.sys_warning .helpBoxLink .link_image_text{
	background-color: var(--backgroundColor2);
	text-decoration: none;
}

.infobox.info_infobox.messages-infobox.sys_warning .submit_image.overlayShowButton.overlayShowButtonStyle.short-waiting-behavior
	{
	background-color: var(--backgroundColor2);
}

.infobox.info_infobox.messages-infobox.sys_warning .overlayFooter button
	{
	color: var(--contrastFontColor);
}

/*Zweck:   Protokoll im Vergabeverfahren */
.backgroundJobProtocol {
    min-height: 100px;
    max-height: 300px;
    overflow: scroll;
    font-family: monospace;
}

/*Zweck: Anzeige einer Nachricht, wenn die Umschalttaste beim eingeben des Passworts aktiv ist. */
#capsLockWarning {
	position: absolute;
	color:var(--warningFontColor);
}

#capsLockWarning .fullPopupContainer{
	display: none;
}

#capsLockWarning .popupContainer{
	left: -40px;
}

/*Zweck: Positionierung der Messages
 * Die Messages-Infobox-Komponente wird per Javascript umpositioniert.
 * Die hier definierten 'top'-, 'left'- und 'right'-Werte müssen px sein und beziehen sich dann auf den Abstand zum contentFrame.
 * Die Nachrichten werden rechts daran ausgerichtet, der Wiederherstellen-Button ist ebenfalls auf der rechten Seite.
 */

.messages-infobox-behavior-scroll {
    position: fixed;
    right: 0;
    top: 80px;
    z-index: 1300;
    width: 550px;
    max-height: calc(100vh - 80px);
    overflow: hidden;
    overflow-y: auto;
    padding-right:70px;
}
.messages-infobox-behavior-scroll .messages-infobox-behavior { 
    float: right;
    clear: right;
    margin:0.4em 0;
    position:static !important;    
}

@media screen and (max-width: 768px){
     
     .messages-infobox-behavior-scroll { 
        width: 100%;
        padding-right: 0px;
        position: absolute !important;
        overflow: visible;
    }
     
    .messages-infobox-behavior-scroll .messages-infobox-behavior {
        float:none;
    }
}

/** Zweck: Positionierung des Wiederherstellen-Buttons für Nachrichten
 *  Der Button ist in einem Container äquivalent zu den Nachrichten nur oberhalb des contentFrame ausgerichtet.
 *  Mit dieser Klasse wird der Button darin positioniert. 
 */
 
.message-infobox-button-wrapper{
	position: fixed; 
	top: 192px; 
	right: 0; 
	z-index: 1301;
} 
 
.messages-infobox-counter {
    position: absolute;
    left: 0;
    top: 0;
    color:var(--contrastFontColor);
    background: var(--backgroundColor7);
    width: 18px;
    height: 18px;
    border-radius: 18px;
    border: 2px solid var(--contrastFontColor);
    line-height: 14px;
    font-size:11px;
    text-align: center;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: all .2s ease;
}

.messages-infobox-counter.animated {
    animation: zoom-in-zoom-out 0.5s ease 1;
}

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1.2);
  }
  100% {
    transform: scale(1, 1);
  }
}
 
.messages-infobox-restore-button {
	border: var(--border2);	
} 

button.messages-infobox-restore-button {
	 z-index: 1001;
	 cursor: pointer;	  
     padding: 20px 7px;
	 -moz-border-radius-topleft:47px;
	 -webkit-border-radius-topleft:47px;	 
	 border-top-left-radius :47px;	
	 -moz-border-radius-bottomleft:47px;
	 -webkit-border-radius-bottomleft:47px;
	 border-bottom-left-radius:47px;
	 background:var(--backgroundColor7);
	 box-shadow: 4px 4px 25px var(--highlightShadowColor);
	 margin-right:2px;
}

button.messages-infobox-restore-button:focus {	 
	 background:var(--backgroundColor7) !important;
	 padding: 20px 7px;
	 -moz-border-radius-topleft:47px;
	 -webkit-border-radius-topleft:47px;	 
	 border-top-left-radius :47px;	
	 -moz-border-radius-bottomleft:47px;
	 -webkit-border-radius-bottomleft:47px;
	 border-bottom-left-radius:47px;
}

button.messages-infobox-restore-button:hover {	 
	 background: var(--backgroundColor14) !important;
	 -moz-border-radius-topleft:47px;
	 -webkit-border-radius-topleft:47px;	 
	 border-top-left-radius :47px;	
	 -moz-border-radius-bottomleft:47px;
	 -webkit-border-radius-bottomleft:47px;
	 border-bottom-left-radius:47px;
}

button.messages-infobox-restore-button::before {
	 color:var(--contrastFontColor);
	 content: "\ea07" / "";
}

@media screen and (max-width: 768px){ 	
 	.messages-infobox-restore-button{
		 -moz-border-radius-topleft:47px;
		 -webkit-border-top-left-radius:47px;
		 border-top-left-radius :47px;
		 -moz-border-radius-bottomleft:47px;
		 -webkit-border-bottom-left-radius:47px;
		 border-bottom-left-radius:47px;
	}	
	 .message-infobox-button-wrapper {
		top:70px;
	}
}

.fixedElements .topMenuContainer {
	margin:0 20px 10px;	
}

#sitemapForm .errortext,#sitemapForm .helptext {
	float: left;
	margin: 5px 0;
	width: 100%;
}

#startPage .errortext { /** Registerkarten löschen **/
	float: left;
	margin: 3px 0;
	width: 85%;
}

/*Hilfe Cursor für Hilfe-Icon-Texte */
.helpCursor {
	cursor:help;
	height:var(--imageSizeStandard);
	width:var(--imageSizeStandard);
}

/** Zweck: Alert-Meldung
 * alert.css - javascript alert replacement v2.4 *
 * (c) 2009-2011 Naden Badalgogtapeh - http://www.naden.de/blog/javascript-alert
**/
div.alert-modal {
  width: 100%;
  height: 100%;
  background-color:var(--headerFooterBG);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  opacity: 0.3;
}

.alert {
  padding: 20px;
  display: none;
  position: fixed;
  width:455px !important;
  left: 50%;
  top: 30%;
  margin-left: -240px;
  z-index: 1002;
  -webkit-box-shadow: 3px 3px 15px var(--highlightShadowColor);
  -moz-box-shadow : 3px 3px 15px var(--highlightShadowColor);
  -o-box-shadow : 3px 3px 15px var(--highlightShadowColor);
  box-shadow : 3px 3px 15px var(--highlightShadowColor);
  border: var(--border2);
  background-color:var(--backgroundColor2) !important;
  border: var(--border2);
  border-radius:var(--popupRadius);  
  text-align:center;
}

.alert .title h1{
	font-weight:bold;
	display:inline;
	margin-left:7px;
	color:var(--warningFontColor);
	position:relative;
	bottom:3px;
}

.alert .body {
  padding: 5px 0;
  height: 70%;
  margin-bottom:15px;
  font-family: var(--font) !important;
}


/* Alert-Layout für Warning */
.alertWarningTitle, .alertWarningBody{
	color:var(--warningFontColor);
}

.alertWarningTitle span{
	vertical-align:middle;
}

.alert .iconfont-time:before {
  content: "\e913" / "";
  color:var(--warningFontColor);
}

.alert .iconfont-warning_mono:before {
  content: "\e952" / "";
  color:var(--warningFontColor);
}

@media screen and (max-width: 768px){
	#alert{
		width: 99% !important;
		margin-left:1px !important;
		left:1px !important;
	}
}	

/* Session-timeout Meldung */
 
.sessionTimeoutLogin{
	z-index:1002;
}

.sessionTimeoutLoginDiv a:hover,
.sessionTimeoutLoginDiv a:focus,
.sessionTimeoutLoginDiv a:visited{
    background-color:transparent;
    -moz-box-shadow: 0 0 0 var(--basicButtonBorderColor);
	-webkit-box-shadow: 0 0 0 var(--basicButtonBorderColor);
	box-shadow: 0 0 0 var(--basicButtonBorderColor);
	cursor:text;
	color: var(--basicFontColor);
}

.sessionTimeoutButtons{
    margin-left:31.6%;
}

.sessiontimeOutTimeIcon{
	display: flex;
    align-items: center;
    justify-content: center;
}

.iconfont-time.sessiontimeOutTimeIcon:before{
	font-size:180%;
}

.sessionTimeoutButtons input.submit_login{
    padding:4px 2px;
    color:var(--contrastFontColor);
}

.sessionTimeoutLoginDiv input[type="text"], .sessionTimeoutLoginDiv input[type="password"]{
	width:250px;
}

/*Ampel QA*/

.traffic_light_img{
	float:right;
	padding:2px;	
}

.traffic_light_yellow, .traffic_light_red, .traffic_light_green{
	width:100px;
	height:100px; 
	 color:var(--contrastFontColor);
	vertical-align:top;
}

.accessInfotext{
	margin-top:50px;
}

.accessLogin{
	margin-top:50px;
}

.accessLogin .input_login{
	width:250px;
}


.accessInfoheader{
	font-weight:bold;
	margin-left:10px;
	vertical-align:bottom;
}
/* Design für access-denied.xhtml
#hisinoneErrorMessage{
	background-color:var(--backgroundColor43);
}

.box_noheader_bg_white.accessDeniedFieldset{
	border-radius:20px;
	border:none;
}

.accessDeniedLayout{
	margin-bottom: 10px;
}*/
/*****************************************************************************/
/*               Messages Info Box   Komponente WidgetPanel, Portal          */
/*****************************************************************************/

.widgetPanel  {
	display:inline;
	}


.widgetPanelDiv {	
	position: fixed;
	overflow: auto !important;
	width: 500px;
	top: 35px;
	max-height: 92%;
	min-height: 20%;
	right: 50px;
	z-index: 1050;
	-webkit-box-shadow: 4px 4px 16px #807d7d9;
  	-moz-box-shadow: 4px 4px 16px #807d7d;
 	-o-box-shadow: 4px 4px 16px #807d7d;
  	box-shadow: 4px 4px 16px #807d7d;  
	background-color:var(--backgroundColor2) !important;
  	border-radius:var(--popupRadius); 
  	border:20px solid var(--backgroundColor2); 
}

.widgetPanelDiv .fieldsetSidebar .layoutFieldsetTitle{
	padding-left:0;
}

.widgetPanelWidth_650{
	width: 650px;
}

.closeWidgetPanelButtonDiv {
	margin-left: 1px;
	text-align: right;
}

.infoboxTitle{
	float:left;
	margin-left:12px;
	margin-top:5px;	
    outline-color: transparent;
}

.closeWidgetPanelButtonLayout {
	z-index: 30;
	-webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
	padding: 3px 3px 4px 2px;
	margin-left: -1px;
	line-height: 1em;
}

.closeWidgetPanelButtonLayout a {
	text-decoration: none;
	margin-left: 3px;
}

.closeWidgetPanelButtonLayout a:hover,.closeWidgetPanelButtonLayout a:focus{
	color: var(--disabledFontColor) !important;	
}

.contentWidgetPanel {
	z-index: 40;
	width: 100%;
	height: 100%;
	min-height: 100px;
	background-color:var(--backgroundColor2);
	-moz-border-radius: 6px 6px 6px 6px;
	border-radius: 6px 6px 6px 6px;
	padding-bottom:10px;
	
}

@media screen and (max-width: 768px){ 
	 .widgetPanelDiv{		
		max-height:80%;		
		top:53px;
		z-index:101;
	  	left: 30px;
		right: 30px;
		width:auto;
	}
	 .contentWidgetPanel{
		height: auto;
	}
}

/*Zweck: Layout für Hinweistext in Duplikatsprüfung konfigurieren */ 
 .duplicatePersonCheck {
 	width: 40%;
 	margin: 16px 0 16px 16px;
 	display:block;
 } 

.messages-infobox .helpBox, 
.messages-infobox .overlay {
	color:var(--basicFontColor);
}
.messages-infobox .helpBox button {
	float:none;
}
.messages-infobox .helpBox button,
.messages-infobox .helpBox h2,
.messages-infobox .overlay button,
.messages-infobox .overlay h2 {
	color:var(--accentFontColor);
}
.overlayFooter:after {
	content:"";
	display:block;
	clear:both;
}

.info_infobox a.overlayBackground:focus, 
.info_infobox a.overlayBackground:hover {
	background-color: var(--basicFontColor) !important;
}

.infobox.error_infobox button.overlayShowButtonStyle, 
.infobox.warning_infobox button.overlayShowButtonStyle, 
.infobox.success_infobox button.overlayShowButtonStyle, 
.infobox.info_infobox button.overlayShowButtonStyle {
	float:none;
}

/*Alert Meldung*/
/*Offline*/
.offlineContainer{
	background-image: url('/HISinOne/images/icons/offline.svg') !important ; 
	background-position:center top;
	background-repeat:no-repeat;
	background-size: 42px 42px;
	padding-top:50px;
}

.alert .button{
	display: flex;
    align-items: center;
    justify-content: center;
}

/*Gelegenheitsnutzer*innen Popup-Meldungen mittig*/
@media screen and (min-width: 768px){ 
	div.messages-infobox-behavior.occassionalUser{
        right:auto !important;
		left: 50%;
	    margin-top: 15px;
	    transform: translateX(-50%);
	}
	
	div.messages-infobox-behavior.occassionalUser .messages-infobox {
	    padding: 40px;
	    width:480px;
	}
	
	#studyserviceForm\:messages-infobox > div.messages-infobox-behavior.occassionalUser{
		position: fixed !important;
	}
}

@media screen and (max-width: 768px){  
	.mobile .bgBlock{
	position: fixed;
	} 
/* Zweck: Schriftgröße der Meldung hochsetzen #191782 */
	.infobox ul.listMessages {
		font-size: var(--fontSize2);
		text-align: left;
	}	
	 .messages-infobox-behavior{
		right:auto !important;
		width:90%;
	} 
	#formOverlay .messages-infobox-behavior{
		position:fixed !important;
	}
	.messages-infobox{
		width:100%;
		min-width:280px;
		padding-bottom:40px;
		margin:0 auto;
		max-height: 80vh;
    	overflow-y: auto;
		position:relative;
	}	
	.messages-infobox-scroll-container{
		max-height:initial;		
    width: auto;
	}
	span.messages_infobox_header span{
		display:block;
		font-size:400%;
		margin-bottom:30px;
	} 	
	.notification-header .infobox_close,
	.messages-infobox .infobox_close{
		display:none !important;
	}
	 div.messages-infobox-behavior-iframe{
		right:0 !important;
		left:0 !important;
		top:0 !important;
		margin-left:0;
	}	
	 .messages-infobox-iframe{
		min-width:100%;
		width:100%;
		max-width:100%;
		max-height:none;
		padding-top:3px;
		padding-bottom:3px;
		padding-left:3px;
	}
	 .curtainBoxCallBack{
		width:auto;
		margin:0;
	}
	 .confirm_infobox {
		color: var(--basicFontColor);
		min-width: 280px !important;
		width: 90%;
		margin-top: 10%;
	}	
     .warningtext h2{
    	display: inline;
    }
     .success_infobox,
	 .info_infobox,
	 .confirm_infobox,
	 .error_infobox,
	 .warning_infobox {
  	box-shadow : 10px 10px 40px var(--highlightShadowColor);
    }
	 .sessionTimeoutButtons{
		margin:15px 0 0 0;
	}
     .fieldsetMessageText{
    margin-left:36px;
    }    
	 .infobox.error_infobox button.closeButtonMessagesESC,  .infobox.warning_infobox button.closeButtonMessagesESC,
	 .infobox.success_infobox button.closeButtonMessagesESC,  .infobox.info_infobox button.closeButtonMessagesESC {
		background-color: transparent;	
		float: none;
		margin-top: 20px;
		position: absolute;
    	right: 0;
    	top: 0;
		transition:none;
	}	
	 .infobox.error_infobox button.closeButtonMessagesESC:before,  
	 .infobox.warning_infobox button.closeButtonMessagesESC:before,
	 .infobox.success_infobox button.closeButtonMessagesESC:before,  
	 .infobox.info_infobox button.closeButtonMessagesESC:before {
		content: "\e99b" / "";
		font-size: 250%;
		font-family: "HISinOneIcons" !important;
		}
		.infobox.error_infobox button.closeButtonMessagesESC span,  
	    .infobox.warning_infobox button.closeButtonMessagesESC span,
	    .infobox.success_infobox button.closeButtonMessagesESC span,  
	    .infobox.info_infobox button.closeButtonMessagesESC span {
		display:none;
		}			
}

/* Zweck: Barrierefreiheit von Meldungen bei Viewportbreite 320px */
@media screen and (max-width: 320px){
	
	.confirm_infobox, .confirm_infobox h1, .confirm_infobox h2 {
		min-width: auto;
	}
}

/* Zweck: Barrierefreie Scrollbarkeit von Meldungen zum Logout und erneuten LogIn bei Desktop 400% Zoom */
@media screen and (max-width: 320px){
	
 	.confirm_infobox {
 		max-height: 75vh;
 		overflow:auto;
	}	

	#alert{
		max-height: 70vh;
		overflow:auto;
	}
}

/*****************************************************************************/
/*               Angular "Meldungspöppel"                                    */
/*****************************************************************************/

button.notificationcenter-button.icon ~ #notification-counter{
	background: var(--backgroundColor7);
	border: 2px solid var(--backgroundColor2);
}

.notificationcenter-button-wrapper > button.notificationcenter-button.icon{
	background-color: var(--backgroundColor7);
}
.notificationcenter-button-wrapper > button.notificationcenter-button.icon > svg > g > g > path{
	fill:var(--backgroundColor2) !important;
}

.notificationcenter-button-wrapper > button.notificationcenter-button.icon:hover, 
.notificationcenter-button-wrapper > button.notificationcenter-button.icon:focus{
	transition: var(--highlightTransition) !important;
	background: var(--backgroundColor14) !important;
}

.notificationcenter-button-wrapper > button.notificationcenter-button.icon:hover + #notification-counter, 
.notificationcenter-button-wrapper > button.notificationcenter-button.icon:focus + #notification-counter{
	transition: var(--highlightTransition);
	background: var(--backgroundColor14);
}

/*****************************************************************************/
/*               PWA Installationsbutton und dismiss button                  */
/*****************************************************************************/
#pwaInstallContainer {
	position: sticky;
	display: flex;
	justify-content: space-between;
	bottom: 0;
	width: 100%;
    background-color: var(--headerFooterBG);
	z-index: 1000;	
	box-shadow: 0px 0px 13px 2px rgba(0, 0, 0,0.5);
	-webkit-box-shadow: 0px 0px 13px 2px rgba(0, 0, 0,0.5);
	-moz-box-shadow: 0px 0px 13px 2px rgba(0, 0, 0,0.5);
}

#pwaInstallContainer img{
	height: 24px;
	margin-right:3px;
}

#pwaInstallBtn {
	order: 1;
	flex-grow: 5;
	left: 0;
	color:var(--accentFontColor);
	font-weight:bold;		
    background-color: var(--headerFooterBG);
	font-size:var(--fontSize3);
	width:90%;
	border: 0;
}

#dismissPwaInstallBtn {
	order: 2;
	align-self: flex-end;
	border: 0;
    background-color: var(--headerFooterBG);
}
#dismissPwaInstallBtn:before {
	cursor: pointer;
}

/*****************************************************************************/
/*       Banner Rückmeldestatus etc. für Mobilgeräte/ Studierendenoberflächen*/
/*****************************************************************************/

.banner{	
	color:var(--contrastFontColor);
	font-weight:bold;
	padding:1px;
	margin: 1px auto;
	text-align:center;
}

.banner span:before{	
	color:var(--contrastFontColor);
}

.banner span[role="img"], .banner img{
	margin-right:5px;
}

.requiredFields{
	font-size:var(--fontSize7);
}