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

/*****************************************************************************/
/*             Anordnung von Gruppen von Fieldsets                           */
/*****************************************************************************/


.columnFullSize,.columnLeft55,.columnHalfLeft,.columnHalfRight,.columnOneThirdLeft,.columnOneThirdRight,.columnTwoThirdLeft,.columnTwoThirdRight,.columnOneQuarterLeft,.columnThreeQuarterRight,.columnHalfLeftPortal,.columnHalfRightPortal
	{
	margin: 0;
	padding: 0;
	float: left;
	padding-bottom:0;
}

/* Einspaltige Anordnung von Fieldsets  */
.columnFullSize {
	width: 98.3%;
	min-width: 490px;
	clear: both;
}

.columnLeft55 {
	width: 55%;
	min-width: 530px;
}

.columnFull{
	width:100%;
}

/* Zweispaltige Anordnung von Fieldsets - Linke und rechte Spalte */
.columnHalfLeft,.columnHalfRight,.columnHalfLeftPortal,.columnHalfRightPortal
	{
	width: 49%;
	min-width: 490px;
	margin: 0;
}

/* Studienservice Seite Bescheide */
.examsReportSelf .columnHalfLeft, .examsReportSelf .columnHalfRight{
	min-width: 290px;
}

/* Zweispaltige Anordnung von Fieldsets - Für die Portlets im Portal mit reduzierter Mindestbreite */
.columnHalfLeftPortal,.columnHalfRightPortal {
	min-width: 340px;
}


/* Drittelung des Dialogbereichs */
/* NICHT ÄNDERN OHNE RÜCKSPRACHE MIT TEAM OBERFLÄCHEN */
.columnTwoThirdLeft,.columnTwoThirdRight {
	width: 67%;
	min-width: 496px;
}


.columnTwoThirdLeft_955 {
	width: 67%;
	min-width: 955px;
	margin-top: 3px;
}

.columnOneThirdLeft,.columnOneThirdRight {
	width: 32.6%;
	min-width: 305px;
}

.columnOneThirdLeft:empty,.columnOneThirdRight:empty {
	display:none;
}


/* zentralisiertes Layout ohne Seitenbereiche*/

.columnTwoThird_central{
	margin: 0 auto;
    width:67%;
}

@media screen and (max-width : 1024px)  {
	.columnTwoThird_studyplanner{
	  width: 100%;
	  float: none;
	}
}

.column80_central{
	margin: 0 auto;
    width:80%;
}

/* ENDE Drittelung des Dialogbereichs */
/* Viertelung  des Dialogbereichs */
.columnOneQuarterLeft {
	width: 25%;
	min-width: 220px;
}

.columnThreeQuarterRight {
	width: 74%;
	min-width: 650px;
}


/* Mehrspaltige Anordnung von Fieldsets - Linke Spalten mit Abstand rechts */
.columnHalfLeft,.columnOneThirdLeft,.columnTwoThirdLeft,.columnOneQuarterLeft,.columnHalfLeftPortal,.columnHalfRightPortal
	{
	margin-right: 0.2em;
	padding-bottom:0;
}

/*Zweck: Im Portal ein 1/3 zu 2/3 Layout einstellen können */
.columnHalfLeftPortalSmall {
	min-width: 225px;
	width: 34%;
	margin: 0 0.2em 0 0;
	padding: 0;
	float: left;
}

.columnHalfLeftPortalBig {
	min-width: 450px;
	width: 65%;
	margin: 0 0.2em 0 0;
	padding: 0;
	float: left;
}

.columnOneThirdLeftConfigurationTransfer{
	width:49%;
}

/*Layout für Sprachauswahl-Container*/
.minWidthNone{
	min-width:0;
}

/*Detailansicht Veranstaltungen Detailinfos*/

.courseDetailedInformationBackground{
	background-color: var(--backgroundColor4);
	}

@media screen and (max-width: 768px) {
	.courseDetailedInformationBackground{
		background-color: transparent;
	}
}

.courseDetailedInformationContainer{
	margin-left:17.5%;
	width:65%;
	color: var(--backgroundColor44);
	}

.courseDetailedInformationContainer .boxStandard{
	padding:20px;
}

.courseDetailedInformationContainer .fieldsetNoBorder{
	padding-left:3px;	
}

@media screen and (max-width: 1024px) {
	.columnFullSize,	
	.columnHalfLeft,.columnHalfRight,
	.columnTwoThirdLeft,.columnTwoThirdRight,
	.columnOneThirdLeft, .columnOneThirdRight,		
	.columnThreeQuarterRight,.columnThreeQuarterLeft, 
	.columnOneQuarterLeft,.columnOneQuarterRight,
	.columnHalfLeftPortal,	.columnHalfRightPortal,
	.columnHalfLeftPortalSmall,.columnHalfLeftPortalBig {
		width: 100%;
		min-width:100%;
		min-width: 320px;
		float:none;
		padding-bottom:2px;
	}	
	.courseDetailedInformationContainer{
		margin-left:0;
		width:100%;
	}	

}

/* Layouts auf 100% bei max-width: 990px*/
	@media (max-width: 990px)  { 	
	 .columnHalfLeftPortal,
	 .columnHalfRightPortal,
	 .columnHalfLeftPortalSmall,
	 .columnHalfLeftPortalBig,
	 .columnHalfLeftPortalBig,
	 .columnHalfLeftPortalSmall,
	 .columnOneThirdLeft,
	 .columnOneThirdRight,
	 .columnTwoThirdLeft,
	 .columnTwoThirdRight,
	 .columnThreeQuarterRight{
		width: 100%;
		max-width: 100%;
		min-width: 100%;
	}
		 .columnHalfLeft,  .columnHalfRight,  .columnHalfLeftPortal,  .columnHalfRightPortal{
		width:100% !important;
		min-width:0 !important;
	}	
	 .columnHalfLeftPortal,
	 .columnHalfRightPortal{
		width:100%;
	}
	
}	
/*Layout wird einspaltig bei kleineren Bildschirmen*/
@media screen and (max-width : 768px)  {
	 .columnTwoThird_central, .column80_central  {
		width: 100%;
		float:none;
	}	
	 .columnHalfLeftPortal,
	 .columnHalfRightPortal,
	 .columnHalfLeftPortalSmall,
	 .columnHalfLeftPortalBig,
	 .columnHalfLeftPortalBig,
	 .columnHalfLeftPortalSmall,
	 .columnOneThirdLeft,
	 .columnOneThirdRight,
	 .columnTwoThirdLeft,
	 .columnTwoThirdRight,
	 .columnThreeQuarterRight{
		width: 100%;
		max-width: 100%;
		min-width: 100%;
	}
	 .columnFullSize,
	 .columnLeft55,
	 .columnHalfLeft,
	 .columnHalfRight,
	 .columnOneThirdLeft,
	 .columnOneThirdRight,
	 .columnTwoThirdLeft,
	 .columnTwoThirdRight,
	 .columnOneQuarterLeft,
	 .columnThreeQuarterRight,
	 .columnHalfLeftPortal,
	 .columnHalfRightPortal{
		float:none;
	}
	 .columnHalfLeft,  .columnHalfRight,  .columnHalfLeftPortal,  .columnHalfRightPortal{
		width:100% !important;
		min-width:0 !important;
	}	
	#personDataForm .columnHalfLeft,
	 .columnHalfLeftPortal,
	 .columnHalfRightPortal{
		width:100%;
	}	 
	 .columnFullSize{
		width:100%;
		max-width:100%;
		min-width:100%;
	}
	
}


@media screen and (max-width: 640px) {
.courseDetailedInformationBackground .labelWithBG,
	.courseDetailedInformationBackground .answer{
	width:100%;
	text-align:left;
	}
}

/*Zweck: Masonry Layout für Übernahmeoptionen in der Semesterübernahme */
.masonry_layout {
	column-count: 2;
    column-gap: 1em;
}

.masonry_item {
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
    transition: 0.3s;
	border-radius: 5px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	padding: 0.5em 0.5em 0.5em 0.5em;
}

.masonry_item:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.masonry_item p {
	margin-left: 1em !important;
}

.masonry_item label {
	text-align: left !important;
}

.layout_thumb{
	border:1px solid var(--backgroundColor42);
	width: 90px;
	height: 60px;
	padding:3px;
	background-color:var(--backgroundColor2);
}

.column_thumb{
	background-color: var(--basicButtonBorderColor);
	float:left;
	height:100%;
}


/* Wizard Layout zentriert für responsive und mobile: rechte und linke Spalte werden dann ausgeblendet */
.wizardpageSideLeft, .wizardpageSideRight, .wizardpageCenter{
	float: left;
    box-sizing: border-box;
    padding: 0.5em;
    width:16.6%;
}
    
.wizardpageSideLeft, .wizardpageSideRight{
    width:16.6%;
}   
    
.wizardpageCenter{
	width:66.6667%;
}  
    
@media screen and (max-width: 768px){
	  .wizardpageSideLeft, .wizardpageSideRight{
	  display:none;    
	  }  
	  .wizardpageCenter{
	  width:100%;
	  } 	
}

/*DEPRECATED*/
/* Layoutgrid in EXA */
.grid-row {
	display: flex;
}

.grid-row__col--50 {
	width: 50%;
}

.grid-row__col--66 {
	width: 66%;
}

.grid-row__col--33 {
	width: 33%;
}

.grid-row__col--100 {
	width: 100%;
}

.p-t-10-px {
	padding-top: 10px !important;
}

.m-t-5-px {
	margin-top: 5px;
}

.marginTop1em {
	margin-top: 1em;
}

.offscreen {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/* Container für hervorgehobene Buttons mit Abstand */
.marginTopBottom_20px{
	margin: 20px 0;
}

/* Visitenkarte */
.visitingCard .boxStandard{
	background-color:var(--backgroundColor25);
	border: var(--border1);
	border-radius: 3px;
	padding: 11px;
	margin-bottom: 6px;
}

.visitingCard .buttonsRight{
	margin-right:20px;
}	  

 /* Flexlayout horizontal, umbrechende Container. Die CSS-Klasse muß am Div-Container, der die Div-Container umschließt, sein.
 Die Breite der Container ergibt sich aus deren Inhalt. Erhält ein Div-Container die CSS-Klasse singleLine, brechen die Inhalte innerhalb dieses Containers nicht um.
 Beispiel: Filter in EXA "Leistungen bearbeiten pro Studierendem"*/   
 .flexLayoutHorizontalWrap{
 	display: flex; 
 	flex-wrap: wrap;
 	row-gap: 5px;
 
 }
 /* Flexlayout horizontal, NICHT umbrechende Container. Die CSS-Klasse muß am Div-Container, der die Div-Container umschließt, sein.
 Die Breite der Container ergibt sich aus deren Inhalt. Erhält ein Div-Container die CSS-Klasse singleLine, brechen die Inhalte innerhalb dieses Containers nicht um.
 Beispiel:Entwurf Treetable Studienplaner*/   
 .flexLayoutHorizontalNoWrap{
 	display: flex; 
 }
 
/* Sidebar Prime Faces*/
.ui-shadow{
	box-shadow:none;
}

.sideBarRight{
	box-shadow: var(--highlightShadow);
	border-left: var(--border2);
}

.ui-sidebar[aria-hidden="true"]{
	display: none;
}

.ui-sidebar {
    position: fixed;
    z-index: 2000 !important;
    padding: .5em 1em;
    -webkit-transition: transform .3s;
    transition: transform .3s;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
	box-sizing: border-box;
}

.ui-sidebar-left {
    top: 0;
    left: 0;
    width: 20em;
    height: 100%;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
}


.ui-sidebar-right {
    top: 0;
    right: 0;
    width: 320px;
    height: 100%;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    overflow: auto;
}

.ui-sidebar-top {
    top: 0;
    left: 0;
    width: 100%;
    height: 10em;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
}

.ui-sidebar-bottom {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10em;
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
}

.ui-sidebar-full {
    width: 100%;
    height: 100%;
    left: 0;
    -webkit-transition: transform 0s;
    transition: transform 0s;
}

.ui-sidebar-left.ui-sidebar-active,
.ui-sidebar-right.ui-sidebar-active {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}

.ui-sidebar-left.ui-sidebar-sm,
.ui-sidebar-right.ui-sidebar-sm {
    width: 20em;
}

.ui-sidebar-left.ui-sidebar-md,
.ui-sidebar-right.ui-sidebar-md {
    width: 40em;
}

.ui-sidebar-left.ui-sidebar-lg,
.ui-sidebar-right.ui-sidebar-lg {
    width: 60em;
}

.ui-sidebar-top.ui-sidebar-active,
.ui-sidebar-bottom.ui-sidebar-active {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

.ui-sidebar-top.ui-sidebar-sm,
.ui-sidebar-bottom.ui-sidebar-sm {
    height: 10em;
}

.ui-sidebar-top.ui-sidebar-md,
.ui-sidebar-bottom.ui-sidebar-md {
    height: 20em;
}

.ui-sidebar-top.ui-sidebar-lg,
.ui-sidebar-bottom.ui-sidebar-lg {
    height: 30em;
}

.ui-sidebar-close {
    float: right;
    padding: 1px;
}

.ui-sidebar-close:hover,
.ui-sidebar-close:focus {
    padding: 0px;
}

@media screen and (max-width: 64em) {
    .ui-sidebar-left.ui-sidebar-lg,
    .ui-sidebar-left.ui-sidebar-md, 
    .ui-sidebar-right.ui-sidebar-lg,
    .ui-sidebar-right.ui-sidebar-md {
        width: 20em;
    }
}

.container.row{
	padding-left:0;
}

hr{
	border: 0;
	height: 1px;
	background: var(--basicButtonBorderColor);
}


/*GRID LAYOUT DEPRECATED*/

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}



/*GRID LAYOUT DEPRECATED*/
.container-fluid {
  width: 100%;
  padding:0;
  margin-right: auto;
  margin-left: auto;
}

/*GRID LAYOUT DEPRECATED*/
.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin:0;
}

/*GRID LAYOUT DEPRECATED*/
.col-1, .col-2, .col-3, .col-4, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-sm-1, .col-sm-11, .col-sm-12, .col-sm,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-10, .col-md-12, .col-md,
.col-lg-1, .col-lg-2, .col-lg-4, .col-lg-6, .col-lg-8, .col-lg-10, .col-lg,
.col-xl-1, .col-xl-11, .col-xl{
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-left: 0;
  padding-right: 3px;
}


/*GRID LAYOUT DEPRECATED*/
.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}


/*GRID LAYOUT DEPRECATED*/
.col-1 {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

/*GRID LAYOUT DEPRECATED*/
.col-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

/*GRID LAYOUT DEPRECATED*/
.col-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

/*GRID LAYOUT DEPRECATED*/
.col-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

/*GRID LAYOUT DEPRECATED*/
.col-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

/*GRID LAYOUT DEPRECATED*/
.col-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

/*GRID LAYOUT DEPRECATED*/
.col-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

/*GRID LAYOUT DEPRECATED*/
.col-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.col-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

/*GRID LAYOUT DEPRECATED*/
@media (min-width: 576px) {
  .col-sm {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-sm-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-sm-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-sm-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
 
}

/*GRID LAYOUT DEPRECATED*/
@media (min-width: 768px) {
  .col-md {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-md-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-md-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-md-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-md-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-md-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-md-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-md-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

}

/*GRID LAYOUT DEPRECATED*/
@media (min-width: 992px) {
  .col-lg {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-lg-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-lg-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-lg-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-lg-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-lg-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  } 
}

/*Leere DIV-container verbergen */
/*div:empty{display:none;}*/

/*Dialog-Hesder STU mit Wiedervorlagen und Doktor-Status-Popups */
.dialogHeaderFlexContainer{
	display:flex; 
	align-items: center;
}

/*Verwendungszweck: erweiterbarer einfacher flex container und parent styles für label, der wrapped. Muss ggf. für neue children erweitert werden */
.flex-container {
	display: flex;
	flex-wrap: wrap;
}

.flex-container div {
	display: flex;
	flex: 1 1 0px;
	flex-grow: 1;
}

.flex-container div input[type='checkbox'] {
	flex-shrink: 0;
	display: inline-block;
}

/*Verwendungszweck: einfacher flex container, der DIV-Container nebeneinander anordnet */
.flex-container-simple {
	display: flex;
}