.studyPlannerStickyHeader {
    position: sticky;
    top: 0;
    z-index: 1;
    transition: top 0.3s ease-in;
}

.unit-data-container {
	display: grid;
	width: 100%;
	border: var(--border2);
	padding: 0.5em;
    background: white;
}

.unit-data-container .header {
	display: grid;
    grid-template-columns: 2.3em auto 9.3em ;
    align-items: center;
}

.unit-data-container .header .unit-title > div:nth-child(2) {
	font-size: var(--fontSize1);
    line-height: 1.3em;
}

.unit-data-container .planelement-data-container {
	display: grid;
	width: 100%;
	border-bottom: var(--border2);
	padding: 0.5em;
    background: white;
}

.unit-data-container .planelement-data-container .header{
	display: grid;
    grid-template-columns: 2.3em auto 9.3em ;
    align-items: center;
}

.unit-data-container .planelement-data-container .header .planelement-data > div:nth-child(2) {
    line-height: 1.3em;
}

.unit-data-container .planelement-data-container .header .planelement-status {
	width: max-content;
    align-items: center;
    justify-self: flex-start;
    border-left: 1px solid var(--backgroundColor44);
    border-right: 1px solid var(--backgroundColor44);
}

.unit-data-container .header .unit-actions {
	width: max-content;
    align-items: center;
    justify-self: flex-start;
    border-left: 1px solid var(--backgroundColor44);
    border-right: 1px solid var(--backgroundColor44);
    display: flex;
}

.unit-data-container .footer {
	display: flex;
    grid-template-columns: 2.3em auto 9.3em;
    align-items: center;
    padding: 5px;
}

.unit-data-container .footer .unit-footer> div:nth-child(2) {
	justify-self: flex-start;
	font-size: var(--fontSize2);
    line-height: 1.3em;
    display: flex;
}

.unit-data-container .footer .unit-status > div:nth-child(2) {
	width: max-content;
	align-items: center;
	justify-self: flex-start;
	border-left: 1px solid var(- -backgroundColor44);
	border-right: 1px solid var(- -backgroundColor44);
	padding-bottom: 5px;
	padding-right: 2px;
}

.unit-data-container .details-toolbar {
	padding: 0.5em;
    display: grid;
    grid-template-columns: 30% 70%;
}

.unit-data-container .details-toolbar > div:first-child {
	align-self: center;
}

.unit-data-container .details-toolbar > div:nth-child(2) {
	display: flex;
    place-self: flex-end;
    background: var(--backgroundColor3);
    border: var(--border2);
    padding: 5px;
}

.unit-data-container .body {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-gap: 0.5em;
	padding-top: 0.5em;
}

.unit-data-container .footer > div:first-child {
	display: flex;
    align-items: center;
    gap: 5px;
}

.unit-data-container .footer > div:nth-child(2) {
	display: flex;
	align-items: center;
    justify-content: flex-start;
	gap: 10px;
}

.details-card {
	display: grid;
    grid-gap: 0.5em;
	border-radius: 2px;
	padding: 0.5em;
	box-shadow: 0 1px 1px 0 rgb(66 66 66 / 8%), 0 1px 3px 1px rgb(66 66 66 / 16%);
}

.details-card > div:first-child {
	height: 50px; 
	display: flex;
}

.details-card > div:first-child .details-card-icon {
	font-size: 20px;
	width: 50px; 
	height: 50px; 
	display: flex; 
	align-items: center; 
	justify-content: center; 
	background-color: var(--backgroundColor11); 
	border-radius: 25px;
	color:var(--contrastFontColor);
}

.details-card > div:first-child .details-card-icon span[class^="iconfont-"]::before {	
	color:var(--contrastFontColor);
}

.details-card > div:first-child .details-card-description {
	text-align: right;
	flex: 1 0 90px;
	height: 45px;
	align-self: center;
	padding: 0 1em;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.details-card > div:first-child .details-card-description > div {
	display: flex;
    align-items: center;
    font-weight: bold;
    justify-content: flex-end;
    gap: 5px;
}

.details-card > div:first-child .details-card-description > div > span[class^="iconfont-"]::before {
	color: var(--backgroundColor44);
	font-size: 100%;
}

.details-card > div:first-child .details-card-description > p {	
	color:var(--basicFontColor);
    margin: 0;
    font-size: 1em;
}

.details-card > div:nth-child(2) {
	display: block;
	padding: 0;
}

.shortcuts-container ul {
	padding: 1em 0;
	list-style: none;
	margin: 0;
}

.shortcuts-container ul li {
	padding: 8px 12px;
	border:var(--border2); 
	border-radius: 50px; 
	display: inline-block;
}

.shortcuts-container ul li a {
   padding: 9px 3px;
   text-decoration: none;
   line-height: 1.6em;
}

.activeShortcut {
	background-color: var(--backgroundColor16);
}

.show-details-btn {
	color: var(--contrastFontColor) !important;
	font-weight: bold;
}

.study-planner-toolbar {
	display: grid; 
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
	margin-bottom: 0.5em;
	align-items: end;
}

.study-planner-toolbar > div:nth-child(2) {
	display: flex; 
	justify-content: end;
}

.details-info-text {
    margin-left: 2.5em;
    padding-top: 0.5em;
    margin-top: 0.3em;
    border-top: var(--basicButtonBorder);
}

.planelement-card {
	margin-top: 0.5em;
    margin-bottom: 2px;
    padding: 1em;
    line-height: 1.3em;
    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;
}

.planelement-card > div:first-child {
	display: flex;
	padding: 0 0 0.5em 0;
	gap: 5px;
}

.planelement-card > div:nth-child(2) {
	display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 0.5em;
}

.appointment-list {
	list-style: none;
    padding: 1em 0;
    margin: 0;
}

.appointment-list > li {
	box-shadow: rgba(66, 66, 66, 0.08) 0px 1px 1px 0px, rgba(66, 66, 66, 0.16) 0px 1px 3px 1px;
    border-radius: 2px;
    padding: 1em;
	margin-bottom: 0.5em;
}

#studyPlanner\:container\:content-container\:studyPlannerTree .ui-treetable table tr.ui-widget-content[data-isParentExpanded="true"].ui-node-level-2,
#studyPlanner\:container\:content-container\:studyPlannerTree .ui-treetable table tr.ui-widget-content[data-isParentExpanded="true"].ui-node-level-4,
#studyPlanner\:container\:content-container\:studyPlannerTree .ui-treetable table tr.ui-widget-content[data-isParentExpanded="true"].ui-node-level-6,
#studyPlanner\:container\:content-container\:studyPlannerTree .ui-treetable table tr.ui-widget-content[data-isParentExpanded="true"].ui-node-level-8,
#studyPlanner\:container\:content-container\:studyPlannerTree .ui-treetable table tr.ui-widget-content[data-isParentExpanded="true"].ui-node-level-10,
#studyPlanner\:container\:content-container\:studyPlannerTree .ui-treetable table tr.ui-widget-content[data-isParentExpanded="true"].ui-node-level-12,
#studyPlanner\:container\:content-container\:studyPlannerTree .ui-treetable table tr.ui-widget-content[data-isParentExpanded="true"].ui-node-level-14,
#studyPlanner\:container\:content-container\:studyPlannerTree .ui-treetable table tr.ui-widget-content[data-isParentExpanded="true"].ui-node-level-16 {
	background-color: var(--backgroundColor4);
}

*
#studyPlanner\:container\:content-container\:studyPlannerTree .ui-treetable-data > .ui-node-level-1 td:first-child,
#studyPlanner\:container\:content-container\:studyPlannerTree .ui-treetable-data > .ui-node-level-2 td:first-child,
#studyPlanner\:container\:content-container\:studyPlannerTree .ui-treetable-data > .ui-node-level-3 td:first-child,
#studyPlanner\:container\:content-container\:studyPlannerTree .ui-treetable-data > .ui-node-level-4 td:first-child,
#studyPlanner\:container\:content-container\:studyPlannerTree .ui-treetable-data > .ui-node-level-5 td:first-child,
#studyPlanner\:container\:content-container\:studyPlannerTree .ui-treetable-data > .ui-node-level-6 td:first-child,
#studyPlanner\:container\:content-container\:studyPlannerTree .ui-treetable-data > .ui-node-level-7 td:first-child,
#studyPlanner\:container\:content-container\:studyPlannerTree .ui-treetable-data > .ui-node-level-8 td:first-child{
	padding-bottom: 1px;
  	padding-top: 1px;
}

#studyPlanner\:container\:content-container\:studyPlannerTree button.ui-icon.ui-icon-triangle-1-s,
#studyPlanner\:container\:content-container\:studyPlannerTree button.ui-icon.ui-icon-triangle-1-e {
	background-color: var(--backgroundColor2);	
}


.ui-treetable table {
	border-collapse: unset;
}

.ui-treetable-data tr > td > span.iconfont-bullet_mono.ui-node-level-last.ui-treetable-toggler {
	top: 15px;
}

.iconfont-bullet_mono::before {
	content: "\ea0e";
}

/*.studyplanner_container {
	margin: auto;
	width: 80%;
}*/

.node-container {
	display: grid; 
	grid-template-columns: 2.3em auto;
}

.unit-icon {
	display: flex;
    place-self: stretch;
    justify-content: left;
    padding: 5px;
}

.noUnit{
	margin:11px;
}

.main-content-container {
	display: flex; 
	flex-direction: row;

}

.main-content-container > div:first-child {
	flex-direction: column; 
	display: flex; 
}

.main-content-container > div:nth-child(2) {
	margin-left: auto; 
	display: flex;
	flex-direction: column; 
	padding-bottom: 5px;
}

.unit-action-container {
	place-self: flex-end;
	padding: 5px;
	display: flex;
	align-items: center;
}

.unit-action-container .auxiliary-job-configuration-buttons.job-configuration-buttons.horizontal{
	margin-bottom:0;
}

.unit-action-container ul.job-configuration-buttons.horizontal li {
  margin-top: 0;
  margin-right: 4px;
}

.unit-title-container {
	font-size: var(--fontSize2);
    line-height: 1.3em;
    padding: 5px 5px 5px 0;
}

.unit-information{
	margin-top:5px;
}

.studyplanner_lehrende{
	margin-top: 0;
    margin-bottom: 0;
    font-size:var(--fontSize7);
}

.unit-title-container > div.highlightSearch > span.searchMenuHighlight {  	
	background-color:var(--backgroundColor8);
	color:var(--basicFontColor);
}
.main-content-container div.highlightSearch > span.searchMenuHighlight { 
	background-color:var(--backgroundColor8);
	color:var(--basicFontColor);
}

.planelement-container li {
	border-bottom: var(--border2);
}

.planelement-container li:last-child {
	 border-bottom: none
}

.unit-status {
	padding: 5px;
}

.studyplanner-sidebar {
	position: absolute;
}

.searchInputStudyPlanner{
	padding:10px;
}

.unit-status.textBold .chip{
	line-height:1.1em;
}

.extraButtonText {
	display: none;
} 

.dialogHeaderDataBox .nowrap > * {
	margin: 0px 5px;
}

.studyplanner_searchResult {
	display: none;
}

#studyPlanner .singleLine {
	white-space: unset;
}

#studyPlanner .answer {
	display: block;
}

/*Breakpoint medium < 1024px*/
/*@media screen and (max-width: 1024px){ 	
	.studyplanner_container {
		width: 100%;
	}
	
}*/

.StudyPlannerPruefungPlanelementNodeData .unit-action-container {
	display: none;
}

.StudyPlannerVeranstaltungPlanelementNodeData .unit-action-container {
	display: none;
}

.StudyPlannerPraktikumPlanelementNodeData .unit-action-container {
	display: none;
}

/*Breakpoint small < 768px*/
@media screen and ( max-width : 768px) {
	
	.studyplanner_searchResult {
		display: block;
	}
	
	.studyplanner_searchResult table.table td:first-child {
		padding-top: 0;
	}
	
	.studyplanner_searchResult table.table td:last-child {
		border-bottom: 0px;
	}
	
	/*.originDevice_mobile .studyplanner_container button:has(img)::after {
		content: attr(title);
		text-decoration:underline-dotted;
	}
	
	.originDevice_mobile .studyplanner_container a:has(img)::after {
		content: attr(title);
		text-decoration:underline-dotted;
	}*/
	
	.studyplanner_container button:has(img)::after {
		content: attr(title);
		text-decoration:underline-dotted;
	}
	
	.studyplanner_container a:has(img)::after {
		content: attr(title);
		text-decoration:underline-dotted;
	}
		
	.StudyPlannerPruefungPlanelementNodeData .unit-action-container {
		display: flex;
	}
		
	.StudyPlannerVeranstaltungPlanelementNodeData .unit-action-container {
		display: flex;
	}
		
	.StudyPlannerPraktikumPlanelementNodeData .unit-action-container {
		display: flex;
	}
	
	button > span.extraButtonText {
		display: none !important;
	}
	
	.unit-action-container {
		flex-direction: column;
		align-items:initial;
	}
	
	.studyplanner_container {
		width: 100%;
	}
	
	.node-container {
		margin-top: 10px;
	}
	
	.unit-data-container .footer>div:first-child {
		flex-direction: column;
		align-items: flex-start;
	}
	.unit-data-container .footer>div:nth-child(2) {
		flex-direction: column;
		align-items: flex-end;
	}
	.study-planner-toolbar>div:nth-child(2) {
		display: none;
	}
	button[id$="showAppointmentDetailsBtn"] {
		display: none;
	}
	.unit-data-container .details-toolbar {
		display: flex;
		flex-direction: column;
		gap: 1em;
	}
	.unit-data-container .details-toolbar > div:first-child {
		align-self: flex-end;
	}
	.unit-data-container .details-toolbar > div:nth-child(2) {
		flex-direction: column;
		gap: 0.5em;
		place-self: stretch;
	}
	.planelement-card > div:first-child {
		flex-direction: column;
	}
		.main-content-container {
		flex-direction: column;
	}
	
	.main-content-container > div:nth-child(2) {
		margin-left: 0; 
		gap: 0.5em;
		border-top: 1px solid black;
        padding-top: 0.5em;
	}
	
	.unit-action-container {
		place-self: flex-start;
	}
	
	.ui-treetable button.ui-icon.ui-icon-triangle-1-e::after{	 
	  font-size: 200%;
	  font-weight:bolder;
	}
	
	.studyPlannerStickyHeader button.submit_highlighted_text_iconfont::before, button.submit_highlighted_text_iconfont_i::before{
	  margin-right: 0px;
	}
}