/*****************************************************************************/
/*                      HINWEIS                                              */
/*****************************************************************************/
/*
- Neue Styles dürfen nur in die Datei 'HISinOneExperimental.css' eingecheckt werden
- Diese neuen Styles werden rechtzeitig vor den HISinOne Releases durch die 
  Projektgruppe Oberflächendesign  geprüft, ggf. freigegeben und in die 
  HISinOne.css übernommen.
*/
/*****************************************************************************/

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

#myloadmask {
	position: absolute;
}

.messages-infobox-behavior{
	display:none; /* default value */
}

.help {
	display: none;
	background-color:var(--backgroundColor5);
}

.popupContainer {
	z-index: 1100;
	max-width: 49%;
	text-align: left;
	margin: 2px;
	min-width:460px;
    padding: 15px;
    overflow: auto !important;
    -moz-border-radius: 2px;
    border-radius: 2px;
    box-shadow: 1px 2px 18px var(--highlightShadowColor);
    background-color: var(--backgroundColor2);
    white-space:normal;
    max-height:400px;
    font-weight:normal;
    border: var(--border1);    
    border-radius:var(--popupRadius);  
}

.jobConfigurationSelector .popupContainer { 
	max-height:none;
	max-width:none;
	width:100%;
}

@media screen and (max-width: 768px){	
     /* Zweck: popover innerhalb des Viewports po
	sitionieren #191782 */	
	 div.popoverContainer {
		padding: 5px;
		width: 97%;
		left: 2px !important;
	}	
	 .popupContainer {
		max-width:100%;
		min-width:auto !important;
		max-height: 80vh; /* Zweck: Barrierefreiheies scrollen bei Desktop 200% und 400 %Zoom	 */
		width:100%;
	}
}

.mouseMove {
	cursor: move;
}

.mouseMoveTitle {
	background-image: url('/HISinOne/images/icons/mouse_move.svg');
	background-position: right top;
	background-repeat: no-repeat;
	padding-right:20px;
	outline-color: transparent; 
	background-size: var(--backgroundImagesSize);
}

.overlayContainer, .fullPopupContainer{
	white-space: normal;
	position: fixed;
    z-index: 1100;
    overflow-y: auto !important;
    overflow-x: hidden;
    top: 0;
    left: 0;
    right: 0;
    height:100%;
    background-color: #00000017 !important;
}

/* Um das Scrollen des Popups in einem Overlay zu gewähren */
div[id*="verlay"] > .fullPopupContainer{
	margin-right: 1em;
}

.overlayBackground, .popupBackground{
	position: absolute;
	 /* position: fixed;Änderung, um auch bei scrollbaren Overlays Background in kompletter Höhe zu haben: Auskommentiert, da: macht den Scrollbalken unbedienbar */
    min-height: 100vh;
    width: 100vw;
    padding:0;
    background-color: #00000017 !important;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
    z-index:999;
    top: 0;
    left: 0;
}

.overlayBackground:hover, .popupBackground:hover{
	background-color: var(--basicFontColor) !important;
    opacity: 0.1;
}

.overlay{
	position:relative;
	left:0;
	top:80px;
	right:0;
	margin:0 auto;
    z-index: 1000;
    width: 51%;
    min-width: 496px;
    text-align: left;
    padding: 15px;
    border-radius: var(--popupRadius);  
    box-shadow: 0px 11px 15px -7px rgba(0,0,0,.2),0px 24px 38px 3px rgba(0,0,0,.14),0px 9px 46px 8px rgba(0,0,0,.12);
    background-color: var(--backgroundColor2);
    opacity: 1.0 !important;
	border: var(--border2);
	/* resize: both; Resizing ist nicht persistent, overflow:auto wird benötigt
    overflow: auto; Auswahlfeld wird abgeschnitten */
}


.overlayHeading{   
    cursor: move; 
    padding: 0;
    margin: 5px 5px 5px 1px;
    border-left: 7px solid;
    border-left-color: var(--accentFontColor);  
}

.mouseMoveTitleOverlay {
	cursor: move;	
	outline-color: transparent; 
}

.currentDevice_tablet  .mouseMoveTitleOverlay,
.currentDevice_mobile  .mouseMoveTitleOverlay,
.originDevice_tablet  .mouseMoveTitleOverlay,
.originDevice_mobile  .mouseMoveTitleOverlay{
	cursor: text; 
	background-image: none;
	padding-left:0;
	background-size: auto;	
}

.currentDevice_tablet .overlay.modal .overlayHeading .box_title .mouseMoveTitleOverlay h2,
.currentDevice_mobile .overlay.modal .overlayHeading .box_title .mouseMoveTitleOverlay h2,
.originDevice_tablet .overlay.modal .overlayHeading .box_title .mouseMoveTitleOverlay h2,
.originDevice_mobile .overlay.modal .overlayHeading .box_title .mouseMoveTitleOverlay h2{
	 padding-left:0;
}

.overlayTitleImage[src$=".svg"]{
	margin: 2px 4px 4px 4px;
	height: 25px;
	width: 25px;
}

.overlay.modal .overlayHeading .box_title h2{
    vertical-align:middle;
    font-weight:400;
    font-size:1.3em; 
    padding:0.6em; 
    display:inline-block;
    margin-bottom:0;
/*     max-width:85%; */
    outline-color: transparent;
	color: var(--basicFontColor);
	line-height: initial;
}

.overlay.modal .overlayHeading .box_title h2:focus-visible {
  outline: none; }

.overlayHeading .submit_information{
   margin-left: 0.5em;
   margin-top: 0.5em;
}

.overlaySubTitle{
	margin-left:1em;
	color: var(--basicFontColor);
}

/*Headerelemente im Overlay resonsive*/
.layoutOverlayHeaderFlex{
	display:flex;
}

.layoutOverlayHeaderFlex1{
	flex: 6;
}

.layoutOverlayHeaderFlex2{
	flex: 1;
}

.layoutOverlayHeaderFlex3{	
	padding-top: 13px;
}

.overlayFooter{
    padding: 30px 10px 10px 0;
    background-color: var(--backgroundColor2);
}

.overlayHelp {
	margin-left:26px;
}

.overlayHelp fieldset{
	padding:0;
}

/** minimieren von Overlays */
.overlayMinButton {
	margin-top: -4px;
}
.maximizedOverlay {
	animation: maxOverlay 0.5s;
	overflow: hidden;
}
.minimizedOverlay {
	animation: minOverlay 0.5s;
	max-height: 150px;
    overflow: hidden;
    border-bottom: 12px solid #fff;
}

@keyframes minOverlay {
   from { /* top: 80px; */ max-height: 100%;}
   to { /* top: 0px; */ max-height: 90px; }
}
@keyframes maxOverlay {
   from { /* top: 0px; */ max-height: 90px; }
   to { /* top: 80px; */ max-height: 100%; }
   
}

/*verhindert das selektieren von Text beim draggen eines Popups */
.noMouseSelection{
  -moz-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

.content_portal_hisinone_fixed .metadata_popup{
	position:fixed !important;
}

.overlayContent .metadata_popup{
	position:fixed !important;
}

.metadata_popup{
	z-index:100
}

.metadata_popup_text{
	display:block; width:600px; padding:4px; border:1px solid (var--basicFontColor); background-color: var(--backgroundColor8);
}

/*Zweck: Portlet beim Verschieben sperren*/
.overlayPortlet {   
    background-color:rgba(0, 0, 0, 0.3);   
    z-index:9999;
    position: absolute;
}

/* Zweck: Overlay Wizard */
ol.wizardprogtrckr {
	display: table;
	list-style-type: "";
	margin: 0;
	padding: 0;
	table-layout: fixed;
	width: 100%;
}

ol.wizardprogtrckr li {
	display: table-cell;
	text-align: center;
	line-height: 3em;
}

ol.wizardprogtrckr li.wizardprogtrckr-done {
	color: var(--basicFontColor);
	float: none;
	border-bottom: 4px solid var(--backgroundColor45);
}

ol.wizardprogtrckr li.wizardprogtrckr-active {
	color: var(--basicFontColor);
	float: none;
	border-bottom: 4px solid var(--backgroundColor5);
}

ol.wizardprogtrckr li.wizardprogtrckr-todo {
	color: var(--basicButtonBorderColor);
	float: none;
	border-bottom: 4px solid var(--basicButtonBorderColor);
}

ol.wizardprogtrckr li:after {
	content: "\00a0\00a0" / "";
}

ol.wizardprogtrckr li:before {
	position: relative;
	bottom: -2.5em;
	float: left;
	left: 50%;
	line-height: 1em;
}

ol.wizardprogtrckr li.wizardprogtrckr-done:before {
	content: "\2713" / "";
	color: var(--backgroundColor2);
	background-color:var(--backgroundColor45);
	height: 1.2em;
	width: 1.2em;
	line-height: 1.2em;
	border: none;
	border-radius: 1.2em;
}

ol.wizardprogtrckr li.wizardprogtrckr-active:before {
	content: "\039F";
	color: var(--backgroundColor5);
	height: 1.2em;
	width: 1.2em;
	line-height: 1.2em;
	border: none;
	border-radius: 1.2em;
	background-color:var(--backgroundColor5);
}

ol.wizardprogtrckr li.wizardprogtrckr-todo:before {
	content: "\039F" / "" / "";
	color: var(--basicButtonBorderColor);
	background-color: var(--basicButtonBorderColor);
	height: 1.2em;
	width: 1.2em;
	line-height: 1.2em;
	border: none;
	border-radius: 1.2em;
}

/* Ende: Overlay Wizard */

/* Zweck: CSS Styles für Overlay mit integrierter Suche */
.searchoverlaycontent {
	border-top: var(--basicButtonBorder);
	border-left: var(--basicButtonBorder);
	border-right: var(--basicButtonBorder);
	overflow:hidden; 
	min-height:430px !important; 
	height: auto;
}

.searchoverlayfieldset > li {
	float:none !important;
}

/*Verhindert das Überschreiben von Standard-CSS innerhalb des durch Elternelemente ausserhalb Overlay*/
.headlineRoundCorner .overlayContainer label{
	font-weight:normal;	
}

@media screen and (max-width: 768px){
    /*Ausschalten Drag and Drop PopUp*/	    
     .mouseMoveTitle {
	background-image:none;
    }
    .overlay{
	min-width:0;
	width:90% !important;
	top:95px;
	}	
	.overlayContainer, .fullPopupContainer{
	padding-right:0 !important;
	}	
	.overlay.modal .overlayHeading .box_title h2{
    outline:none;
    font-size: 1.2em;
	}
}

.submit_image_i.submit_icon_inactive.overlayShowButton.overlayShowButtonStyle{
	padding:3px;
}


/* Doktorandenmanagement - alle Overlays zur Anlage und Bearbeitung von	Anträgen.
Verwendungszweck:	Vorhandener Platz im Overlay wird für den Inhalt verwendet und wird vor allem bei kleineren Auflösungen nicht mit Weißraum gefüllt.
Grund für Neuanlage:	Darstellung wirkt bislang "kaputt",	bisher kein Style vorhanden*/
div[id^="doccand\:"][id*="RequestOverlay"] .overlayContent > .box_content {
  display:flex;
  flex-wrap:wrap;
}
div[id^="doccand\:"][id*="RequestOverlay"] .overlayContent > .box_content .columnHalfLeft { 
  flex-grow:1; 
  flex-shrink:1; 
}
div[id^="doccand\:"][id*="RequestOverlay"] .overlayContent > .box_content .moduleInfoBox100 { 
  flex-basis:100% 
}