/* ID:16474 */
@charset "utf-8";
/*$smallDevWidth:600px;
$smallScreenWidth:890px;*/

/*resize some elements*/
body.touch{
	box-sizing: border-box;
	font-size:1em;
	margin:0;
	padding: var(--sat) var(--sar) var(--sab) var(--sal);
	position:relative;
	text-size-adjust: none;	/*Disables the browser's inflation algorithm.*/
	-webkit-text-size-adjust: none;	/*Disables the browser's inflation algorithm.*/
	width:100%;

	&:has(dialog[open]),
		&:has(button.ui-multiselect.ui-state-active),
		dialog[open].main:has(button.ui-multiselect.ui-state-active){
		overflow: hidden;
	}

	&.unregistered{
		header#kopf{
			#hauptbild{
				display:none;
			}
			.user{
				display: none;
			}
			#logo{
				display: flex;
				justify-content: center;
				margin: auto;
			}
		}
	}

	.desktop{/*content only for desktop version*/
		display:none;
	}

	header#kopf{
		margin-top: var(--headerBarHeight);
		padding-left:0;
		padding-right: var(--smallSidebarWidth);
		@media (max-height: 600px/*$smallDevWidth*/),(max-width: 600px/*$smallDevWidth*/){
			padding-bottom: 1ex;
			padding-right:0;
		}
		@media (max-height: 600px/*$smallDevWidth*/){
			height:5em;
		}
		#headerTopBar{
			display:grid;
			font-size: 1.3em;
			grid-row: 1;
			grid-template-columns: 70px 70px 70px;
			height: var(--headerBarHeight);
			justify-content: space-between;
			position: fixed;
			top:0;
			width: 100%;
			z-index: 9998;
			#homeButton{
				align-items: center;
				display: grid;
				justify-content: center;
			}
		}
		#logo{
			margin:0;
			display: none;
			img{
				left: 1.5em;
				right: unset;
				@media (max-width: 600px/*$smallDevWidth*/) {
					max-height: 5rem;
					position: initial;
				}
			}
		}
		.passbild{
			align-items: center;
			display: flex;
			height: 100%;
			justify-content: center;
			padding-left: 0;
			width: 6em;
			img{
				height:2.5rem;
				@media (max-width: 600px/*$smallDevWidth*/) {
					display: none;
				}
			}
		}

		#hauptbild{
			background: none !important;
			min-width: auto;
			padding: 0 1ex;
			pointer-events:none;
			&:before{
				display: none;
			}
			h1{
				box-sizing: border-box;
				overflow: hidden;
				position: unset;
				width:100%;
				@media (max-height: 600px/*$smallDevWidth*/){
					font-size: 1.6em;
				}

				span{
					margin-right:4rem;
					overflow:visible;
					position:relative;
					white-space:unset;
					@media (max-width: 600px/*$smallDevWidth*/) {
						margin-right:1ex;
					}
				}
				span#preCaption{
					display:inline;
					overflow: unset;
					white-space: unset;
				}
			}
			img{
				right: 0;
				@media (max-width: 600px/*$smallDevWidth*/) {
					display:none;
				}
			}
		}
		img{
			height:calc(var(--headerHeight) - 10px);
			width: auto;
		}
		.user{
			background: unset;
			margin-left:.5rem;
			width:6rem;
			@media (max-width: 600px/*$smallDevWidth*/){
				display: none;
			}
		}
		.userData{
			display: none;
		}
	}

	header #headerTopBar,
	#innersidebar,
	#sidebar
	{
		background-color: var(--themeColor);
	}
	#nav,
	#mainMenu{
		background-color: whitesmoke;
		color:black;
	}

	#main{
		background-color: white;
		display:block;
		padding: 1ex 0;

		.noMobile{
			display:none;
		}

		main#content {
			background-color: white;
			display: contents; /* so funktionieren stickbottom und sticktop ohne eingriffe in den DOM */
			font-size: 1em;
			article{
				box-sizing: border-box;
				padding: 0 3px;
				width:calc(100% - 4em); /* auf tablets rechte sidebar berücksichtigen */
				@media (max-height: 600px/*$smallDevWidth*/),(max-width: 600px/*$smallDevWidth*/){
					width: 100%;
				}
			}
		}

	}
	footer#schluss{
		padding-right: calc(var(--smallSidebarWidth) + .5ex);
		@media (max-height: 600px/*$smallDevWidth*/),(max-width: 600px/*$smallDevWidth*/){
			padding-right: .5ex;
		}
	}

	input,
	select,
	button,
	a.button{
		line-height: 4ex;
		/*touch-action: none; fixme: eventuell in Multiselect Problem mit scrolling*/
	}

	button.ui-multiselect{
		line-height: unset;
		margin-right: 0;
	}

	button,
	[type="submit"],
	[type="reset"],
	[type="button"],
	button.cancel,
	a.button{
		&:not(.noButton){
			/* a hat border-box nicht als default*/
			box-sizing: border-box;
			height: auto;
			margin-right: 1em;
			min-width: 10em;
			touch-action: manipulation;
			@media (max-height: 600px/*$smallDevWidth*/),(max-width: 600px/*$smallDevWidth*/){
				margin-right: .5em;
				min-width: 4em;
				span{
					display:none;
				}
			}
			&.ui-multiselect,
			&.ui-multiselect-collapser,
			/*wysiwyg*/
			&.tox-tbtn{
				@media (max-height: 600px/*$smallDevWidth*/),(max-width: 600px/*$smallDevWidth*/){
					span{
						display: initial;/* fixme: hatte inherit hier eine Bedeutung? Das hat das Verhalten von
																Spans geändert zu display des Elternelements*/
					}
				}
			}
		}
	}

	dialog footer.manyButton{
		button{
			margin-right: .5em;
			min-width: 4em;
			span{
				display:none;
			}
		}
	}

	/*buttons innerhalb von Tabellen nicht übergroß werden lassen!*/
	div.tableWrapper{
		button,
		[type="submit"],
		[type="reset"],
		[type="button"],
		a.button{
			min-width: 4em;
		}
	}

	@media (max-height: 600px/*$smallDevWidth*/),(max-width: 600px/*$smallDevWidth*/){
		.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text{
			padding:0;
		}
		.smallDevice{
			display:none;
		}
		span.radioItem {
			margin-right:0.5em;
		}
	}
	.ui-widget{
		.ui-button{
			font-size:1rem;
		}
	}

	[type="checkbox"],
	[type="radio"]{
		color: #FF0000;
		height: 4ex !important;
		width: 4ex !important;
	}

	img.icon{
		height: 32px;
		width: 32px;
	}

	/*fixes on i* devices for iframes*/
	iframe.ui-widget-content{
		overflow:scroll !important;
		-webkit-overflow-scrolling:touch !important;
	}

	/*changes to inline windows, e.g. history container*/
	.historyContainer{
		max-height:98% !important;
		max-width:98% !important;
	}

	/*Make title bar bigger, so close is easier to reach*/
	.window_icon_button{
		height:28px !important;
		width:28px !important;
	}

	.window_header,
	.window_function_bar{
		height: 32px !important;
	}

	div.window_frameDiv {
		top:32px !important;
	}

	article{
		ol,ul{
			margin-left:3em;
		}
		ul.ui-autocomplete{
			margin-left: 0;
		}
		table.login {
			margin-top:0;
		}
	}

	span.help, .formhelp, label.help{
		position:relative;

		&::after{
			background: silver;
			border:1px solid black;
			color:black;
			content: attr(title);
			display:none;
			font-weight:normal;
			left: 0;
			padding: 4px;
			top: 3ex;
			z-index:10000;
		}
	}

	#liste{
		h3,h4{
			font-size: 1.1em;
		}
	}

	.ui-helper-reset {
		font-size: 1rem;
		overflow-x: auto;
		overflow-y: hidden;
	}

	div.ui-multiselect-menu{
		box-sizing: border-box;
		position: fixed;
	}
	.ui-tabs{
		padding-top:0;
		.ui-tabs-panel{
			padding: 0;
			padding-top: 0.5ex;
		}
	}

	.stickTop,
	.floatingTabs{
		top: var(--headerBarHeight);
	}
	dialog{
		.stickTop,
		.floatingTabs{
			top: 0;
		}
	}
	:has(> .stickTop){
		.floatingTabs{
			top: calc( var(--headerBarHeight) + 3.5rem );
		}
	}
	.floatingTabs{
		visibility: inherit !important;
	}
	.stickTop,
	.stickBottom{
		padding-bottom: var(--sab);
		padding-right: var(--smallSidebarWidth);
		@media (max-height: 600px/*$smallDevWidth*/),(max-width: 600px/*$smallDevWidth*/){
			padding-right: .5ex;
		}
	}

	@media (max-width: 890px/*$smallScreenWidth*/) {	/*nur auf großen Displays (Tablet quer) sollten die Tabs angezeigt werden*/
		li.ui-tabs-tab{
			span.text{
				display:none;
			}
		}
	}

	@media (max-width: 600px/*$smallDevWidth*/) {
		main#content{
			/* divs (in Quickinfo) Scrollbar + zeige Scrollbalken*/
			details{
				overflow-x: scroll;
			}

			div.sammelUebersicht div.sammelListe {
				max-width: 400px;
				width: 100%;
			}

			div.preLogin,
			div.pastLogin,
			div.preLogin,
			div.pastLogin{
				margin-left: 1em;
				margin-right: 1em;
			}
		}
		footer#schluss {
			padding-top: 10px;
			#footer-2{
				/* impressum link ans Ende*/
				margin-left: 2em;
				margin-top: -4em;
				order: 3;
				#footer-server{
					left: 0em;
					right: unset;
					top:1.5em;
				}
			}

			.powerdiv{
				margin-left: auto;
				width: auto;
				#poweredBy{
					display:none;
				}
			}
			#text-nav:after{
				display: none;
			}
		}
		.ersteller div:not(.print){
			display: block;
		}
	}
	/* fix footer auf mittelgroßen Bildschirmen*/
	@media (max-width: 650px){
		footer#schluss .powerdiv{
			display: none;
		}
	}

	@media (max-height: 600px/*$smallDevWidth*/),(max-width: 600px/*$smallDevWidth*/){
		.Checkin#content button i{
			display: inline;
		}
	}


	input[type="file"]{
		/* fix for safari*/
		text-indent: 0;
		padding: initial;
		padding-left: 1em;
		min-height: unset;
		line-height: unset;
	}

	/* zeigt scrollbars auf android an - leider nicht auf ios*/
	::-webkit-scrollbar {
		width: 10px;
	}

	/* Track */
	::-webkit-scrollbar-track {
		background: #f1f1f1;
	}

	/* Handle */
	::-webkit-scrollbar-thumb {
		background: #888;
	}

	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover {
		background: #555;
	}

	fieldset.editTable {
		box-sizing: border-box;
		background: #FBFBFB;
		margin-right: unset;
		width: 100%;
	}
	dialog{
		@media (max-height: 600px/*$smallDevWidth*/),(max-width: 600px/*$smallDevWidth*/){
			&.big,
			&#externURL,
			&#nestedDialog
			{
				width:100%;
				height:100%;
				/* dynamic viewport: wegklappende Adresszeilen o.ä.*/
				height: 100dvh;
				max-height: 100dvh;
			}
		}
	}

}