:root {
	--defaultBorderRadius:             .25rem;

	/* white .. black */
	--defaultBgColor:                  hsla(0,0%,100%,1);      /* auch als Vordergrund (Invertierung bei Hover) */
	--headerFooterBgColor:             hsla(0,0%,96%,1);       /* auch als Hintergrund fuer Tabellen, Content-Divs... */
	--containerBgColor:                hsla(0,0%,93%,1);       /* auch als Textfarbe bei Hover-Zustaenden */
	--lightBorderColor:                hsla(0,0%,90%,1);       /* auch fuer Tabellen-Zebrastreifen */
	--cardBgColor:                     hsla(0,0%,87%,1);
	--reportButtonBgColor:             hsla(0,0%,85%,1);       /* verwendet fuer externes Login */
	--infoBgColor:                     hsla(0,0%,82%,1);	   /* für Info-Buttons und Info-Felder */
	--imageButtonBgColor:              hsla(0,0%,73%,1);
	--infoBorderColor:                 hsla(0,0%,50%,1);       /* BenutzerInfo, InformationCard */
	--mainMenuBorderColor05:           hsla(0,0%,50%,.5);      /* auch fuer Benutzer-Info */
	--mainMenuShadowColor02:           hsla(0,0%,50%,.2);      /* auch fuer Such-Menue und Benutzer-Info */
	--imageButtonBorderColor:          hsla(0,0%,41%,1);
	--inputItemBorderColor:            hsla(0,0%,40%,1);
	--secondaryTextColor:              hsla(0,0%,35%,1);       /* vertikaler Separator, MenueList, InformationCard */
	--inputTextColor:                  hsla(0,0%,33%,1);       /* auch fuer Breadcrumb-Trenner */
	--buttonHoverBgColor:              hsla(0,0%,31%,1);
	--staticTextColor:                 hsla(0,0%,29%,1);
	--hamColor:                        hsla(0,0%,25%,1);
	--buttonTextColor:                 hsla(0,0%,4%,1);
	--defaultContrastColor:            hsla(0,0%,0%,1);        /* auch als Hintergrund (Invertierung bei Hover) */
	--leftNaviLinkColor075:            hsla(0,0%,0%,.75);
	--lightboxBgColor05:               hsla(0,0%,0%,.5);
	--shadowColor025:                  hsla(0,0%,0%,.25);
	--shadowColor0075:                 hsla(0,0%,0%,.075);

	/* nearly black */
	--primaryTextColor:                hsla(300,11%,19%,1);    /* evtl. ersetzen durch: hsla(0,0%,19%,1); */

	/* red */
	--buttonDangerBgColor:             hsla(0,100%,71%,1);
	--buttonDangerHoverBorderColor:    hsla(0,100%,43%,1);
	--errorColor:                      hsla(0,100%,33%,1);     /* auch fuer Abbrechen-Background-Hover */

	/* green */
	--stateOkColor:                    hsla(120,100%,17%,1);   /* auch fuer Zahlverfahren-Aktiv-Button */
	--buttonSuccessBgColor:            hsla(120,39%,49%,1);    /* auch fuer BackToMain-Button */
	--buttonSuccessHoverBorderColor:   hsla(120,39%,34%,1);
	--buttonSuccessHoverBgColor:       hsla(120,39%,24%,1);
	--buttonZvActiveBgColor:           hsla(120,14%,90%,1);

	/* blue/gray */
	--inputBorderColor:                hsla(225, 14%, 43%,1);    /* auch fuer andere Elemente */

	/* blue */
	--accentColor:                     hsla(225,100%,33%,1);
	--accentLighterColor075:           hsla(225,100%,33%,.75); /* Menue-Hover, Icons in den Cards und Crumbs */
	--overviewCardShadowColor04:       hsla(225,100%,33%,.4);
	--overviewCardBorderColor03:       hsla(225,100%,33%,.3);
	--selectedObjectColor025:          hsla(225,100%,33%,.25); /* auch fuer Border des Footers */
	--specialInputBgColor01:           hsla(225,100%,33%,.1);

	/* disabled input */
	--disabledInputColor:              hsla(0,0%,27%,1);
	--disabledInputBgColor:            hsla(60,0%,90%,1);
	--disabledInputHoverBorderColor:   hsla(225,14%,83%,1);

	/* crumbs (Linksseitige Navigation) */
	--crumbItemHoverBgColor075:        hsla(225,100%,90%,.75);
	--crumbActiveBorderColor075:       hsla(225,100%,73%,.75);
	--crumbActiveBgColor:              hsla(225,100%,23%,1);   /* auch fuer Schriftfarbe bei Hover */
	--crumbActiveHoverBorderColor075:  hsla(225,100%,23%,.75);

	/* ColorLine */
	--colorLineLightColor075:          hsla(225,100%,53%,.75);
	--colorLineMiddleColor075:         hsla(225,100%,33%,.75);
	--colorLineDarkColor075:           hsla(225,100%,23%,.75);

	/* Status-Colors for Status-Icons */
	--statusGrey:               	   hsla(300,11%,19%,1);
	--statusBlue:                      hsla(225,100%,33%,1);
	--statusGreen:                     hsla(120,100%,17%,1);
	--statusRed:                       hsla(0,100%,28%,1);

}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-decoration: none;
}
.ui-dialog-titlebar {
	display:none;
}


.ui-widget-overlay {
	opacity: 50% !important;
	background-color: black !important;
}

html {
	height: 100%;
	font-family: "Lucida Grande", "Lucida Sans", Arial, sans-serif;
	color: var(--primaryTextColor);
	font-size: 12px;
}

body {
	display: flex;
	flex-direction: column;

	/* fuer Test auf kleinstem Bildschirm *
	width: 320px;
	border: 1px solid lime;
	*/
}

/* form elements don't inerhit font-styling from html or body
   https://stackoverflow.com/questions/2874813/why-textarea-and-textfield-not-taking-font-family-and-font-size-from-body */
textarea, input, select, button{
	font-family: "Lucida Grande", "Lucida Sans", Arial, sans-serif;
}

#wrapper{
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.hidden-element {
	display: none;
}

.no-right-element {
	/* placeholer client definition */
}

.concealed-element {
	position: absolute;
	left: -2000rem;
}

.invisible-element {
	visibility: hidden;
	width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

.separator-vertical{
	border-left: 0.1rem solid var(--secondaryTextColor);
	width: 0.1rem;
	margin: 0 0.5rem;
	font-size: 0;
}

/************************************************************************
	Icon-Font
************************************************************************/
/*!
 * Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2022 Fonticons, Inc.
 */
@font-face {
	font-family: 'Font Awesome 6 Free';
	font-style: normal;
	font-weight: 900;
	/*
	font-display: block;
	*/
	src: url("../fonts/fa-solid-900.woff2") format("woff2");
}

.fa, .fas {
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	font-size: 1.2rem;
	margin: 0 .15rem;
	padding: .15rem;
	text-decoration: none;
}
a.fa, a.fas {
	/* placeholer client definition */
}
a.fa:hover, a.fas:hover, button.fa:hover, button.fas:hover {
	color: var(--defaultBgColor);
	background-color: var(--defaultContrastColor);
}

/* Status-Icons */
td .fa-check, td .fa-check + span, .fa-check-square {
	color: var(--statusGreen);
}

.fa-check-square {
    font-size: 1.4rem;
    padding: .33rem;

    position: relative;
    top: -0.32rem;
}

td .fa-times, td .fa-times + span {					/* x-Icon in grau */
	color: var(--statusGrey);
}

td .fa-times-circle, td .fa-times-circle + span,
td .fa-xmark, td .fa-xmark + span, 					/* x-Icon in rot */
td .fa-user-lock, td .fa-user-lock + span,
td .fa-lock, td .fa-lock + span {
	color: var(--statusRed);
}
td .fa-history, td .fa-history + span,
td .fa-clipboard-list, td .fa-clipboard-list + span,
td .fa-file, td .fa-file + span,
td .fa-pencil-alt, td .fa-pencil-alt + span,
td .fa-thumbs-up, td .fa-thumbs-up + span,
td .fa-clock, td .fa-clock + span,
td .fa-minus, td .fa-minus + span,
td .fa-file-signature, td .fa-file-signature + span {
	color: var(--statusBlue);
}

/* Change the color of the .fa-check (and optional span) only for specific classes */
td.custom-state-col-1 .fa-check,
td.custom-state-col-1 .fa-check + span {
	color: var(--statusGreen); /* Update to your desired color */
}

/* Change the color of the .fa-times (and optional span) only for specific classes */
td.custom-state-col-1 .fa-times,
td.custom-state-col-1 .fa-times + span {
	color: var(--statusGrey); /* Update to your desired color */
}

/* Platzhalter, wenn keine Spaltensortierung an ist  */
th .fa-sort {
	color: transparent;
}

/************************************************************************
Nur temporaer zum Test!!!! Muss danach wieder rausgenommen werden.
************************************************************************/
#testButton {
	color: var(--defaultBgColor);
	background-color: var(--infoBorderColor);
}
#testButton:hover {
	color: var(--defaultContrastColor);
	background-color: var(--defaultBgColor);
}
/************************************************************************/


/************************************************************************
	Login-Seite
************************************************************************/
#login-container {
	width: 90%;
	background-color: var(--containerBgColor);
	border-radius: var(--defaultBorderRadius);
	padding: 2rem;
	margin: 1.25rem auto;
	position: relative;   /* fuer OH und Close-Button (im PW-Vergessen-Dialog) */
}
#login-container .close-button {
	/* siehe unten bei der Lightbox */
}
#login-container .online-hilfe {
	position: absolute;
	top: 1rem;
	right: 2rem;
}
#login-container .online-hilfe a {
	background-color: transparent;
}
#login-container .online-hilfe a:hover {
	background-color: var(--defaultContrastColor);
	color: var(--defaultBgColor);
}
#login-banner {
	text-align: center;
}
#login-banner a {
	font-size: 5rem;
}
#login-banner img {
	max-height: 3.6rem;
	width: auto;
	font-size: 1rem;
}
#login-container button {
	border: .0625rem solid var(--buttonTextColor);
}
#login-container > div {
	margin: 3rem auto 1rem auto;
}
#login-container .content-div div {
	width: 100%;
}
#login-container .content-div > label {
	width: 100%;
	white-space: nowrap;
}
#login-container #username.shorter-with-pwd, #login-container #password {
	width: 90% !important;
}
#login-container .content-div:first-child {
	margin-top: 2rem;
}
#login-container .content-div input[type="text"], #login-container .content-div input[type="password"] {
	width: 100%;
	padding: .25rem .5rem;
	font-size: 1rem;
	border: .0625rem solid var(--inputBorderColor);
	border-radius: var(--defaultBorderRadius);
}
#login-container .button-div {
	margin: 1.5rem auto;
}
#login-container .items-center a {
	font-size: .8rem;
	color: var(--primaryTextColor);
	text-decoration: underline;
}
#login-container .auth-choose-div {
	margin: 1.5rem 0;
}
#login-container .auth-choose-div > div {
	display: inline-grid;
}
#login-container .auth-choose-div > div > a {
	height: 78.5%;
}

/************************************************************************
	Footer
************************************************************************/
#footer {
	background-color: var(--headerFooterBgColor);
	color: var(--primaryTextColor);
	border-top: .0625rem solid var(--selectedObjectColor025);
	text-align: center;
	font-size: 1rem;
    line-height: 1.5;
	font-weight: bold;
	padding: .5rem 2rem;
}
#footer-left {
	/* placeholer client definition */
}
#footer-left ul {
	list-style-type: none;
}
#footer-centered {
	/* placeholer client definition */
}
#footer-right {
	/* placeholer client definition */
}
#footer-right ul {
	list-style-type: none;
}
#footer a, #footer a:visited, #footer a:active {
	text-decoration: underline;
	color: var(--primaryTextColor);
}

/************************************************************************
	Header allgemein, Banner, Online-Hilfe
************************************************************************/
.color-line {
	height: 1.75rem;
	background: var(--colorLineMiddleColor075); /* Fallback */
	background: repeating-linear-gradient(-120deg, var(--colorLineMiddleColor075), var(--colorLineDarkColor075) 3%, var(--colorLineLightColor075) 12%);
	position: relative; /* fuer absolut positionierten SkipLink */
}

.skiplink, .skip-vwenavi-link, .skip-vwetable-link {
	padding: .05rem .15rem;
	background-color: var(--headerFooterBgColor);
	color: var(--accentColor);
}

.skiplink, .skip-vwenavi-link {
	position: absolute;
	top: .2rem;
}

.skiplink {
	left: 1rem;
}

.skip-vwenavi-link {
	left: 2.5rem;
}

.skip-vwetable-link {
	margin-left: .4rem;
}

.skiplink:not(:focus), .skip-vwenavi-link:not(:focus) {
	position: absolute;
}

.skiplink:not(:focus), .skip-vwenavi-link:not(:focus), .skip-vwetable-link:not(:focus) {
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(100%);
	white-space: nowrap;
}

#skip-destination, #skip-vwenavi-destination, #skip-vwetable-destination {
	outline: 0;
}
#header {
	display: flex;
	justify-content: space-between;
	padding: .5rem;
	background-color: var(--headerFooterBgColor);
	color: var(--primaryTextColor);
}
.header-left, .header-right {
	display: flex;
}
.header-button {
	border-color: transparent;
	background-color: transparent;
}
.header-button i {
	font-size: 1.75rem;
}
.header-item {
	padding: 0.27rem 0.75rem;
	font-size: 1rem;
	border: .0625rem solid var(--inputBorderColor);
	border-radius: var(--defaultBorderRadius);
}
#banner {
	/* placeholer client definition */
}
#banner, #banner img {
	max-height: 2.5rem;
}
.online-hilfe {
	text-align: right;
	padding: .5rem 2rem;
}
.online-hilfe a {
	font-size: 1.5rem;
	padding: .25rem;
	color: var(--defaultContrastColor);
	background-color: var(--defaultBgColor);
	border: thin solid transparent;
}
.online-hilfe i {
	font-size: 1.5rem;
}
.header-button:hover, .submit-button:hover, .online-hilfe a:hover {
	color: var(--defaultBgColor);
	background-color: var(--defaultContrastColor) !important;
}
.submit-button {
	border: .0625rem solid var(--inputBorderColor);
	border-radius: var(--defaultBorderRadius);
	background-color: var(--defaultBgColor);
	cursor: pointer;
}
.submit-button i {
	font-size: 1.2rem;
}


/************************************************************************
	Header: Suche, Mandantenauswahl (variables Menü)
************************************************************************/
.global-search-wrapper {
	display: inline-block;
}
.global-search-wrapper > div {
	display: flex;
}

.filter-wrapper {
	display: flex;
}

/**
 * Weiter Komponenten sind eng mit vwe-menu verflochten daher bleiben
 * diese hier weiterhin bestehen. Bis man diese sauber auftrennt.
 */
.search-nav {
	margin-top: 2rem;
	padding: .5rem 0;
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
}


#hamburger:checked + label + #height-grower + .search-nav{
	height: auto;
	overflow: visible;
	display:flex;
}
#hamburger:checked + label + #height-grower {
	display:block;
	height:12.25rem;
}


/************************************************************************
	Breadcrumb alle Seiten
************************************************************************/
.breadcrumb {
	display: inline-block;
	margin: 1.5rem 2rem 0 2rem;
	background-color: var(--defaultBgColor);
}
.breadcrumb ul {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
}
.breadcrumb-item, .breadcrumb-item a {
	color: var(--accentColor);
	font-weight: bold;
	padding: .2rem .25rem;
	text-decoration: revert;
}
.breadcrumb-item + .breadcrumb-item {
	padding-left: .25rem;
}
.breadcrumb-item + .breadcrumb-item::before {
	display: inline-block;
	padding-right: .25rem;
	color: var(--inputTextColor);
	content: "/";
}


.crumb-item, .crumb-item-wf, .crumb-done-wf {
	background-color: var(--headerFooterBgColor);
	border: .125rem solid var(--lightBorderColor);
	margin-left: 2rem;
}
.crumb-item-wf, .crumb-done-wf {
	padding-left: .5rem;
}
.crumb-active, .crumb-active-wf {
	background-color: var(--crumbActiveBgColor);
	border: .3125rem solid var(--crumbActiveBorderColor075);
	color: var(--defaultBgColor);
	margin-left: 0;
	font-weight: bold;
}
.crumb-done-wf {
	position: relative; /* notwendig wegen der Background-Font-Icons */
}
.crumb-done-wf::after {
	content: "\f00c";
	font-family: 'Font Awesome 6 Free';
	font-size: 1rem;
	color: var(--accentLighterColor075);
	position: absolute;
	right: 1rem;
	bottom: .5rem;
}
.crumb-active-wf i {
	margin-right: .5rem;
}

.crumb-active:hover, .crumb-active:focus {
	border: .3125rem solid var(--crumbActiveHoverBorderColor075);
}

/************************************************************************
	Overview
************************************************************************/
/* Hauptseite */
.overview {
	margin: 2rem 2rem 0 2rem;
	border: .0625rem solid var(--lightBorderColor);
	border-radius: var(--defaultBorderRadius);
	box-shadow: 1rem 1.25rem 1rem -1.5rem var(--shadowColor025);
}
#main h2 + .overview {
	margin-top: 0;
}
.overview .title {
	margin: 1.75rem 0 0 1.75rem;
	font-size: 1.2rem;
}
.overview .card-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	overflow: hidden;
	padding: 1rem;
}
.overview .card-box > span, .overview .card-box > div {
	display: flex;
	flex-direction: column;
}
.overview ul.card-box > li {
	display: flex;
	flex-direction: column;
}
.overview .card {
	border: .125rem solid var(--overviewCardBorderColor03);
	border-radius: var(--defaultBorderRadius);
	box-shadow: 1rem 1.5rem 1rem -1rem var(--overviewCardShadowColor04);
	width: 19rem;
	overflow: hidden;
	margin: .75em;
	padding: 1rem;

	color: var(--accentColor);
	background-color: var(--cardBgColor);
	background-repeat: no-repeat;
	background-position: right 1rem bottom 0.125rem;

	flex: 1 1 auto;
	display: flex;
	flex-direction: column;

	position: relative; /* notwendig wegen der Background-Font-Icons */
}
.overview .card:hover, .overview .card:focus {
	border: .125rem solid var(--accentColor);
}
.overview .card-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}
.overview .card-title {
	font-weight: bold;
	font-size: 1rem;
	margin-bottom: .5rem;
	display: block;
}
.overview .card-text {
	font-size:.8rem;
	margin-bottom: 1.5rem;
	overflow: hidden;
	display: block;
}
.overview .card-footer {
	padding-top: 1rem;
	font-size: .8rem;
}
.overview .card i {
	font-family: 'Font Awesome 6 Free';
	font-size: 1.75rem;
	color: var(--accentLighterColor075);
	position: absolute;
	right: .8rem;
	bottom: .1rem;
}

/************************************************************************
	Hauptseite: Information
************************************************************************/
.information {
	margin: 0 2rem;
	display: flex;
}
.information .card-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	overflow: hidden;
	padding: 1rem;
	flex-grow: 1;
}
.information .card {
	border: .125rem solid var(--lightBorderColor);
	border-radius: var(--defaultBorderRadius);
	margin: .75em;
	box-shadow: 1rem 1.25rem 1rem -1.5rem var(--shadowColor025);
	height: 12rem;
	width: 19rem;
	overflow: auto;
	background-color: var(--defaultBgColor);
	color: var(--primaryTextColor);
}
.information .card-body {
	height: 80%;
	overflow: auto;
}
.information .card-header {
	padding: .5rem 1rem;
	border-bottom: .125rem solid var(--lightBorderColor);
	background-color: var(--headerFooterBgColor);
}
.information .card-header h2 {
	font-size: 1rem;
}
.information .card-header a, .information .card-header a:hover, .information .card-header a:visited, .information .card-header a:active {
	text-decoration: underline;
	color: var(--primaryTextColor);
}
.information .card-item {
	margin: .5rem 1rem;
	list-style-type: none;
}
.information .card-item > div {
	border-bottom: .0625rem solid var(--infoBorderColor);
	margin-bottom: .5rem;
}
.information .card-item h3 {
	font-size: 1rem;
	color: var(--secondaryTextColor);
}
.information .card-item form {
	text-align: right;
	margin-top: -1.5rem;
}
.information .card-item > div span {
	font-size: .7rem;
}
.information .card-item  p {
	line-height: 1.25;
	font-size: .9rem;
	color: var(--secondaryTextColor);
	margin-bottom: .5rem;
}
.information .card-item  + .card-item {
	margin-top: 1rem;
}

/************************************************************************
	Content alle Seiten
************************************************************************/
#main-vwe-content {
	position: relative; /* fuer absolut positionierten SkipLink fuer VWENavi */
}
#main, .main-and-navi {
	flex-grow: 1;
}
#main h1 {
	margin: 1.5rem 2rem 0 2rem;
}
.title, .content-title {
	margin-left: 2rem;
	display: inline-block;
	background-color: var(--defaultBgColor);
	color: var(--primaryTextColor);
}
.title {
	padding: .25rem .5rem;
}
.content-spezial {
	background-color: var(--headerFooterBgColor);
	color: var(--primaryTextColor);
	border-radius: var(--defaultBorderRadius);
	padding: 1rem 1rem .5rem 1rem;
	margin: .5rem 2rem 0 2rem;
	overflow: auto;
}
.content-spezial  + form > .content {
	margin-top: 0;
}
.content {
	background-color: var(--headerFooterBgColor);
	color: var(--primaryTextColor);
	border-radius: var(--defaultBorderRadius);
	padding: 1rem;
	margin: .5rem 2rem;
	box-shadow: 1rem 1.5rem 1rem -1rem var(--shadowColor025);
}
.content-hint {
	/* Hinweis zur Pflichtfeldkennzeichnung ausser bei Mandanten und Organisationseinheiten*/
	margin: 1rem 2.5rem;
}
.vwe-content-hint {
	/* Hinweis zur Pflichtfeldkennzeichnung bei Mandanten und Organisationseinheiten*/
	margin: 1.25rem 2rem;
}
.content-hint p, .vwe-content-hint p {
	background-color: var(--defaultBgColor);
	color: var(--primaryTextColor);
}
.content:not(:last-child) {
	/* placeholer client definition */
}
.content > h2, .content-spezial > h2, .content > h3 {
	margin-bottom: 1rem;
	margin-top: 1rem;
	display: flex;
	font-style: italic;
	font-size: 1.2rem;
}
.content .object-name {
	margin-right: 2rem;
	margin-top: .75rem;
}
.content h2 .iconbutton {
	/* placeholer client definition */
}
.content h3.content-group-header {
	font-size: 1rem;
	margin: .75rem 0;
}
.create-div {
	display: flex;
	margin: 1rem 0 0 0;
}
.create-div > h2, .create-div > h3 {
	margin-top: .8rem;
	margin-bottom: 0;
	display: inline;
	font-style: italic;
	font-size: 1.2rem;
}
.content .content-div + h3 {
	margin: 2rem 0 1rem 0;
	padding-top: 1rem;
	border-top: .12rem solid hsla(0,0%,77%,1);
	box-shadow: inset 0 .5rem .5rem -.5rem hsla(0,0%,80%,1);
}
.content .filter-div {
	margin-bottom: 1rem;
	display: flex;
	align-items: flex-end;
}
.content .filter-item  input[type="text"] {
	font-size: 1rem;
	padding: .19rem .2rem;
}
.content .filter-item  input[type="date"] {
	font-size: 1rem;
	padding: .25rem .2rem 0 .2rem;
}
.content .filter-item {
	display: inline-block;
	padding-right: 1.5rem;
}
.content .filter-item fieldset {
	border-width: 0;
}
.content .filter-item > label {
	margin-right: .5rem;
	display: block;
}
.content .button-div:only-child {
	margin: 0;
}
.content > .button-div {
	margin-top: 1rem;
	margin-bottom: 0;
}
.content-div {
	/* placeholer client definition */
}
.flex-radio-group {
	/* margin-top: .5rem; */
}
.content-div > label {
	width: 100%;
	display: inline-block;
	font-weight: bold;
	margin-right: 1rem;
}
.content-div > .fieldlabel {
	display: inline-block;
	font-weight: bold;
	font-size: 1rem;
	margin-right: 1rem;
	width: 100%;
}
.content-div > .flex-radio-group-horizontal {
	padding: .2rem 0;
}
.content-div fieldset {
	border-width: 0;
}
/* nur fuer Screenreader */
.content-div fieldset legend {
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}
.content-div fieldset .radio-item {
	display: flex;
}
.content-div fieldset input[type="radio"] + label {
	width: auto;
	margin: 0 1rem 0 .5rem;
	/* white-space: nowrap; */
	padding-left: .2rem;
	padding-right: .2rem;
}
.content-div > span {
	font-size: 1.5rem;
	font-weight: bold;
}
.content-div .button {
	text-align: center;
}
.content-div > form {
	display: inline;
}
.content-div > .rowcount {
	font-style: italic;
	opacity: .9;
}
.content-div > select, .content-div > input, .content-div > form > input,
.content-div .input-div input[type="text"], .content-div .input-div input[type="email"],
.content-div .input-div select, .content-div .input-div input[type="number"], .content-div .input-div input[type="password"],
.content-div .input-div .ui-autocomplete-input, .content-div > .input-form > .ui-autocomplete-input {
	color: var(--inputTextColor);
	padding: .25rem .5rem;
	font-size: 1rem;
	border: .0625rem solid var(--inputBorderColor);
	border-radius: var(--defaultBorderRadius);
	width: 100%;
}
.content-pwd .content-div:last-child {
	margin-bottom: 2rem;
}
.content-div > input[type="checkbox"] {
	width: 1rem;
}
.content-div + .content-div, .content-div + form,
.content-div + .depending-radio-content-true, .content-div + .depending-radio-content-false,
.content-div + .depending-radio-content-true-2, .content-div + .depending-radio-content-false-2,
.content-div + .depending-radio-content-true-3, .content-div + .depending-radio-content-false-3,
.content-div + .depending-radio-content-true-4, .content-div + .depending-radio-content-false-4,
.depending-radio-content-true + .content-div, .depending-radio-content-false + .content-div,
.depending-radio-content-true-2 + .content-div, .depending-radio-content-false-2 + .content-div,
.depending-radio-content-true-3 + .content-div, .depending-radio-content-false-3 + .content-div,
.depending-radio-content-true-4 + .content-div, .depending-radio-content-false-4 + .content-div{
	margin-top: 1.5rem;
}

.content-div .input-div {
	display: inline-block;
	align-self: center;
}
.content-div .table-item  {
	overflow: auto;
}
.content-div .input-div table {
	margin: 0;
}

.content-div .input-div textarea {
	width: 100%;
	padding: .25rem .5rem;
}

/* Checkboxen in Mandantendefaults und Archivierung und von..bis in 2xArchivierung */
.content-div > div {
	display: inline-block;
	width: 100%;
}
.content-div .importdatei {
	padding: .25rem .5rem;
	font-size: 1rem;
	border: .0625rem solid var(--inputBorderColor);
	border-radius: var(--defaultBorderRadius);
	max-width: 20.75rem;
}

/* von..bis in 2xArchivierung und Berichte */
.content-timespan {
	/* display: inline-block; */
}
.content-timespan label {
	/* padding-top: .5rem; */
}
.content-timespan input {
	padding: .25rem .5rem;
	font-size: 1rem;
	border: .0625rem solid var(--inputBorderColor);
	border-radius: var(--defaultBorderRadius);
	width: 10rem;
}
.content .import-div > input {
	width: auto !important;
}
/* Comboboxeninhalt wechselt zwischen links und rechts */
.content-swap {
	display: flex;
	justify-content: space-between;
	margin: .75rem 1.5rem;
}
.swap-list, .small-swap .swap-list {
	width: 45%;
}
.swap-list h4 {
	white-space: nowrap;
}
.small-swap {
	display:flex !important;
	justify-content: space-between;
}
.small-swap .swap-item-btn-block {
	width: unset;
}
.swap-list select, .small-swap-list select {
	width: 100%;
	margin-top: .1rem;
	padding: .5rem;
}
.swap-item-btn-block {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 1rem;
}

/* Buttons: > >> << < */
.swap-item-btn-block .button {
	width: 2rem;
	height: 2rem;
	margin: .25rem 0;
	background-color: var(--imageButtonBgColor);
	padding: .2rem 0 0 0;
}
.swap-item-btn-block .button:hover, .swap-item-btn-block .button:focus {
	background-color: var(--buttonHoverBgColor);
	color: var(--defaultBgColor);
	/* border-color: var(--imageButtonBorderColor); */
}

/* Berichte - Generierung => altes Zeugs?
.inline-radio-items fieldset {
	display: inline-flex;
}
.inline-radio-items input[type="radio"]  {
	cursor: pointer;
}
.inline-radio-items fieldset label  {
	margin: 0 1rem 0 .5rem;
	white-space: nowrap;
	cursor: pointer;
}
 */

/* Systemressourcen - Archivierung */
.inline-box-div {
	/* placeholer client definition */
}
.inline-box-div > label {
	/* placeholer client definition */
}
.inline-box-div > div {
	/* placeholer client definition */
}
.inline-box-div > div > div {
	width: 100%;
}
.inline-box-div > div > div > input[type="text"] {
	padding: .1rem .2rem;
}
.inline-box-div > div > div > label {
	width: auto;
}
.inline-box-div > div > input[type="checkbox"] {
	width: auto;
	margin-right: 1rem;
}
.inline-box-div div .input-item {
	width: 25%;
}

/* Systemressourcen - Mandantendefaults */
.box-div  label {
	vertical-align: top;
	display: inline-block;
}
.box-div ul {
	list-style: none;
}
.box-div > div > ul > li > label {
	font-weight: normal;
	margin: 0 1rem .2rem 0;
	width: 25%;
	text-align: left;
}
.box-div > div > ul > li  > input[type="checkbox"] {
	width: auto;
	margin-right: 1rem;
}
.box-div > div > ul > li  > input[type="text"] {
	padding: .1rem .2rem;
}
.items-center {
	text-align: center;
}
.items-center h3 {
	text-align: left;
}
.items-center input[type="file"] {
	padding: .35rem .5rem;
	margin-right: .25rem;
	width: 20rem;
}
.report-options .content + .content {
	margin-top: 1rem;
}
.show-report-options {
	display: none;
}

.text-center-display-block{
	text-align: center;
	display: block;
}
.content .hint {
	margin-right: .3rem;
	font-weight: bold;
	letter-spacing: .07rem;
}

/* spezielle Klassen fuer Zahlverfahren */
.static-text {
	color: var(--staticTextColor);
	font-size: .8rem;
	font-style: italic;
}
.zvg-button {
	padding: .2rem .5rem;
	background-color: var(--imageButtonBgColor) !important;
}
.zv-active {
	vertical-align: middle;
	margin-left: .5rem;
	padding: .2rem .4rem;
	font-weight: bold;
	color: var(--stateOkColor);
	border: 2px solid var(--stateOkColor);
	background-color: var(--buttonZvActiveBgColor);
}
.zv-edit-button {
	vertical-align: middle !important;
}
.zv-edit-cell {
	white-space: nowrap;
}
/* Autocomplete-Felder mit Submit-Button */
.autocomplete-container {
	display: flex;
}

/************************************************************************
	Passwortfelder beim Passwortaendern
	(.pwd-wrapper, .toggle-password, #password bleiben unveraendert, falls Wiederherstellung gewuenscht)
************************************************************************/
div.pwd-wrapper {
	/* placeholer client definition */
}
.content-div > div.pwd-wrapper {
	width: 85%;
}
.pwd-wrapper > input {
	color: var(--inputTextColor);
	background-color: var(--defaultBgColor);
}
.pwd-wrapper > button {
	border-radius: var(--defaultBorderRadius);
	height: 1.85rem;
}
.pwd-wrapper > button:hover {
	color:var(--defaultBgColor);
	background-color: var(--defaultContrastColor);
}

/************************************************************************
	Tabellen
************************************************************************/
.table-div {
	overflow: auto;
	white-space: nowrap;
	width: 100%;
}

table {
	margin: 1.5rem 0 .75rem 0;
	width: 100%;
	background-color: var(--headerFooterBgColor);
}

#table-sortable-caption {
	position: absolute;
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
}

table tbody tr:nth-child(2n) {
	/* macht Zebrastreifen, alternativ zu Trennlinien */
	background-color: var(--lightBorderColor);
}

table th {
	text-align: left;
	white-space: nowrap;
	border: thin solid transparent;
	padding: .25rem;
	top: 0;
}

table thead th {
	background: #ccc;
}

table th label {
	margin-left: .5rem;
}

table th[scope="row"]{
	font-weight: normal;
}

table td {
	padding: .25rem .5rem .25rem .5rem;
	/* macht Trennlinien, alternativ zu Zebrastreifen */
	/* border-top: .0625rem solid var(--lightBorderColor); */
	border: thin solid transparent;
	overflow: hidden;
}

/* sticky action columns */
tbody tr > td.action-col {
	background: #ddd;
	padding-right: .25rem;
}

tbody tr > td.action-col, thead tr > th.action-col {
	box-sizing: border-box;
	position: sticky;
	right: 0;
	width: 0;
	min-width: fit-content;
	z-index: 0.1;
}

/* Bearbeiten-Button */
table td a, table td a:visited, table td a:active {
	color: var(--primaryTextColor);
}

/* Spaltenkopf */
table thead tr th a, table thead tr th a:visited, table thead tr th a:active {
	color: var(--primaryTextColor);
	text-decoration: underline;
	font-weight: bold;
	padding: .3rem 0 .05rem .05rem;
}

/* updatelink */
table tbody tr th a, table tbody tr th a:visited, table tbody tr th a:active {
	color: var(--primaryTextColor);
	text-decoration: underline;
	font-weight: normal;
}

/* Ausnahme Kassenzeichenpool, ClientAuth und PapageConfig kein Link in der ersten Spalte */
table tbody tr th.no-update-link {
	font-weight: normal;
	white-space: normal;
}

table td a.iconbutton {
	/* font-size: 1.25rem; */
}

table td .state-icon {
	margin-left: .25rem;
	font-style: italic;
	font-size: .9rem;
	white-space: nowrap;
}

.text-right {
	text-align: right;
}
.align_right-col {
	text-align: right;
	padding-right: 2rem;
}

/* spezielle Spaltenbreiten */
.action-col {
	white-space: nowrap;
}
.state-col {
	width: 13.2rem;
	white-space: nowrap;
}

.selection-col .selection-all{
	vertical-align: text-bottom;
}
.selection-col .selection-entity{
	vertical-align: baseline;
}

table tr > th:has(input) {
	width: 1.2rem;
}

.action-col form {
	display: inline-block;
}

/* Paging */
.paging span {
	font-weight: bold;
	margin: 1rem 1.25rem;
}
.paging span > span {
	margin: 0 .5rem;
}
.paging {
	text-align: center;
	color: var(--primaryTextColor);
	border-width: 0;
}
.paging a, .paging a:visited, .paging a:active {
	color: var(--primaryTextColor);
}
.paging > legend {
	position: absolute;
	left: -2000rem;
}

/* speziell fuer Checkboxen in der ersten Spalte */
table input[type="checkbox"] + label {
	position: absolute;
	left: -2000rem;
}

/************************************************************************
	Lightbox mit Formularen
************************************************************************/
.create-lightbox, .update-lightbox, .detail-lightbox,
#zvp-girosolution-lightbox, #zvp-paypal-lightbox, #zvp-paydirekt-lightbox, #zvp-tconnect-lightbox,
#zv-vorkasse-lightbox, #zv-rechnung-lightbox, #zv-lastschrift-lightbox, #zv-sepa-lightbox, #zv-kreditkarte-lightbox,
#zv-paypal-lightbox, #zv-paydirekt-lightbox, #zv-paypal-paypal-lightbox, #zv-paydirekt-paydirekt-lightbox, #zv-barzahlung-lightbox, #zv-terminalzahlung-lightbox,
#additional-lightbox {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: var(--lightboxBgColor05);
}
.lightbox {
	margin: 2rem 0;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	background-color: var(--defaultBgColor);
	color: var(--primaryTextColor);
	border: thin solid transparent;
	padding: 1.5rem;
	overflow: auto;

	/* bei grossen Seiten muss gescrollt werden */
	display: inline; /* Lightbox hat unten Abstand -> Scrollbar innerhalb der Lightbox */

	/* fuer absoluten close-Button */
	position:relative;
}
#additional-lightbox .lightbox {
	width: 90%;
	height: 90%;
}
.lightbox h1 {
	margin: 2rem 0 0 2rem;
}
.lightbox-online-hilfe a {
	position: absolute;
	right: 5rem;
	top: 1rem;
	z-index: 2;
}
.close-button {
	/* der Button ist hinten in der Taborder, wird aber oben angezeigt */
	position: absolute;
	right: 2rem;
	top: 1rem;
	z-index: 2;
}
.close-button i {
	font-size: 2rem;
	padding: .2rem .25rem;
	color: var(--defaultContrastColor);
}
.close-button:hover {
	background-color: var(--defaultContrastColor);
}
.close-button i:hover {
	color: var(--defaultBgColor);
}

.formular-hint {
	/* Hinweis zum Schliessen einer Lightbox und zur Pflichtfeldkennzeichnung */
	margin-left: 2rem;
	margin-top: 1rem;
	line-height: 1.5rem;
}
.lightbox .global-messages-frame,  .lightbox .global-hints-frame {
	/* Globale Hinweise und Fehlermeldungen */
	margin-left: 2rem;
	margin-top: 2rem;
}

.formular {
	background-color: var(--headerFooterBgColor);
	border-radius: var(--defaultBorderRadius);
	padding: .5rem 1rem;
	margin: .5rem 2rem 2rem 2rem;
	box-shadow: 1rem 1.5rem 1rem -1rem var(--shadowColor025);
}
.formular:not(:last-child) {
	margin: 1rem 2rem;
}
.formular h2, .formular h3 {
	margin-bottom: 1rem;
	margin-top: 1rem;
	display: flex;
	font-style: italic;
	font-size: 1.25rem;
}
.formular-item {
	margin: 0.75rem 1.5rem;
}

.flex-radio-group-horizontal {
	margin-top: 1rem;
}
.formular-item .import-div {
	width: 68%;
}

/* Comboboxeninhalt wechselt zwischen links und rechts */
.formular-item-swap {
	display: block;
}
.formular-item-table {
	display: block !important;
	overflow: auto;
}
.formular-item > label, .formular-item > .fieldlabel {
	display: inline-block;
	font-weight: bold;
	/* margin-top: .25rem; */
	margin-right: 1rem;
	width: 100%;
}
.formular-item-inline {
	display: inline-flex;
	justify-content: space-between;
	width: 68%;
}
.formular-item-inline input {
	padding: .25rem .5rem;
	font-size: 1rem;
	border: .0625rem solid var(--inputBorderColor);
	border-radius: var(--defaultBorderRadius);
	width: 48%;
}
.formular-item-list {
	width: 100%;
}
.formular-item-choose {
	margin-top: 1rem;
	margin-bottom: 2rem;
	margin-left: auto;
	margin-right: auto;
	width: 70%;
}
.formular-item-list > label, .formular-item-choose > label {
	font-size: 1rem;
	font-weight: bold;
	font-style: italic;
}
.formular-item-list > select, .formular-item-choose > select {
	width: 100%;
	margin-top: .3rem;
	padding: .5rem;
	overflow: auto;
}
.formular-item-btn-block {
	margin: 1rem 0;
	text-align: center;
}
/* Buttons: > >> << < */
.formular-item-btn-block .button {
	width: 2rem;
	height: 2rem;
	margin: .25rem 0;
	background-color: var(--imageButtonBgColor);
	border: .0625rem solid var(--buttonTextColor);
	padding: .2rem 0 0 0;
}
.formular-item-btn-block .button:hover, .formular-item-btn-block .button:focus {
	background-color: var(--buttonHoverBgColor);
	color: var(--defaultBgColor);
	/* border-color: var(--imageButtonBorderColor); */
}
.formular-item > .input-div > select, .formular-item > .input-div > input, .formular-item > .input-div > textarea,
.formular-item > .input-div > .field-div > input, .formular-item > .input-div > .field-div > textarea {
	padding: .25rem .5rem;
	font-size: 1rem;
	border: .0625rem solid var(--inputBorderColor);
	border-radius: var(--defaultBorderRadius);
	width: 100%;
}
.formular-item .formular-item-container {
	display: inline-block;
	width: 100%;
}
.formular-item > .formular-item-container > select, .formular-item > .formular-item-container > input {
	padding: .25rem .5rem;
	font-size: 1rem;
	border: .0625rem solid var(--inputBorderColor);
	border-radius: var(--defaultBorderRadius);
	width: 48%;
}
.formular-item > .formular-item-container > input + input {
	float: right;
}
.formular-item > .fieldlabel + p {
	width: 68%;
}
.formular-buttons {
	width: 68%;
}
.formular-item ul {
	list-style-type: none;
}
.formular-item ul li input[type="radio"], .formular-item ul li input[type="checkbox"] {
	margin: .5rem .5rem .5rem 0;
}
.formular-item input[type="radio"] + label, .formular-item input[type="checkbox"] + label {
	/* neu wegen fieldset */
	width: auto;
	margin: 0 1rem 0 .5rem;
	/* white-space: nowrap; */ /* schlecht bei langen Labeln */
}
.formular-item input[type="checkbox"] {
	width: 1rem;
	height: 1rem;
	margin-top: .75rem;
	background-color: transparent;
	color: var(--primaryTextColor);

}
.formular-item input[type="file"] {
	padding: .35rem .5rem;
	border-color: var(--inputBorderColor);
}
.formular-item .horizontal-boxes {
	display: inline;
}
.formular-item-table td:last-child {
	width: 5%;
}
.formular-item fieldset {
	border-width: 0;
}
/* nur fuer Screenreader */
.formular-item fieldset legend {
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}
.formular-item-center {
	justify-content: center;
}
/* Autocomplete-Felder */
.formular-item .input-div .ui-autocomplete-input {
	color: var(--inputTextColor);
	padding: .25rem .5rem;
	font-size: 1rem;
	border: .0625rem solid var(--inputBorderColor);
	border-radius: var(--defaultBorderRadius);
	width: 100%;
}

/* begrenzt die Hoehe aller Autocomplete-Auswahlboxen (auch ohne Lightbox drum) */
.ui-autocomplete.ui-front {
	max-height: 17.5rem;
	overflow-y: auto;
	overflow-x: hidden;
}
/* Wochentagebox */
#timingWeekday {
	scrollbar-width: none;
}
/* Richtung in der HKR-Kanal-Lightbox */
input#direction {
	background-color: var(--specialInputBgColor01);
}

/* Info-Felder an den Inputs */
.field-div {
	display: flex;
	position: relative;
	align-items: center;
}

/************************************************************************
	Buttons
************************************************************************/
/* Button zun Anlegen der Objekte */
#new, #new1 {
	color: var(--accentColor);
	font-size: 2.5rem;
}
#new > i, #new1 > i {
	font-size: 2.5rem;
}

.iconbutton {
	border-style: none;
	background-color: transparent;
	border: thin solid transparent;
}
.button-div {
	text-align: center;
	margin: 2rem 0;
}
.button {
	padding: .4rem .8rem;
	border-width: 0;
	outline: none;
	color: var(--buttonTextColor);
	font-weight: bold;
	margin: .2rem;
	background: unset;
	/* ansonsten unterschiedliche Groesse und Fonts bei Buttons und Links */
	font-size: 1rem;
	font-family: "Lucida Grande", "Lucida Sans", Arial, sans-serif;
}
.button:hover, .button:focus {
	color: var(--defaultBgColor);
	/* siehe auch unten bei Barrierefreiheit */
}
.button-with-img, .button-back {
	background-color: var(--imageButtonBgColor);
	border: .0625rem solid var(--buttonTextColor);
}
.button-with-img:hover, .button-with-img:focus, .button-back:hover, .button-back:focus {
	background-color: var(--buttonHoverBgColor);
	border-color: var(--imageButtonBorderColor);
}
.button-report {
	color: var(--accentColor);
	background-color: var(--reportButtonBgColor);
	border: .0625rem solid var(--accentLighterColor075);
}
.button-report:hover, .button-report:focus {
	color: var(--containerBgColor);
	background-color: var(--accentColor); /* Fallback */
}
.button-success, .back-to-main {
	background-color: var(--buttonSuccessBgColor);
	border: .0625rem solid var(--buttonTextColor);
}
.button-success:hover, .button-success:focus, .back-to-main:hover, .back-to-main:focus {
	background-color: var(--buttonSuccessHoverBgColor);
	border-color: var(--buttonSuccessHoverBorderColor);
}
.button-danger {
	background-color: var(--buttonDangerBgColor);
	border: .0625rem solid var(--buttonTextColor);
}
.button-danger:hover, .button-danger:focus {
	background-color: var(--errorColor);
	border-color: var(--buttonDangerHoverBorderColor);
}

/* als Button */
button.button-with-img {
	vertical-align: bottom;
	padding-top: .35rem;
	padding-bottom: .35rem;
	border: .0625rem solid var(--buttonTextColor);
}
button.button-with-img > span {
	display: flex;
	align-items: center;
	margin-left: -.2rem;
}
button.button-with-img > span > span {
	margin-left: .5rem;
	font-size: 1rem;
}

/* als Link */
a.button, a.button:visited {
	color: var(--buttonTextColor);
	border: .0625rem solid var(--buttonTextColor);
}
a.button:hover, a.button:visited:hover, a.button:focus, a.button:visited:focus {
	color: var(--defaultBgColor);
}
a.button-with-img {
	padding-top: .5rem;
	padding-bottom: .5rem;
	border: .0625rem solid var(--buttonTextColor);
}
a.button-with-img > span {
	margin-left: -.4rem;
	justify-content: center;
}
a.button-with-img > span > i, a.button-with-img > span > span {
	vertical-align: middle;
}
a.button-report, a.button-report:visited {
	color: var(--accentColor);
}
a.button-report:hover, a.button-report:focus, a.button-report:visited:hover, a.button-report:visited:focus {
	color: var(--containerBgColor);
}

.button-with-img-wrapper {
	display: inline-block;
	margin: .5rem 0;
}

#filter-button {
	padding: .25rem .8rem;
}
.toggle-buttons {
	display: inline-block;
	float: right;
	margin-top: .5rem;
}

/* Cursor fuer alle Buttons, Autocomplete-Felder, Checkboxen und Radiobuttons (incl. Label) */
.button, .header-button, .iconbutton, .updatelink, .input-item, .input-item + label,
.ui-autocomplete-input,
.formular-item input[type="radio"],
.formular-item input[type="radio"] + label,
.formular-item input[type="checkbox"],
.formular-item input[type="checkbox"] + label {
	cursor: pointer;
}

/************************************************************************
	Spezielle Elemente
************************************************************************/
.input-item {
	color: var(--inputTextColor);
	background-color: var(--defaultBgColor);
	border: .0625rem solid var(--inputItemBorderColor);
	border-radius: var(--defaultBorderRadius);
}

.selected-object {
	box-shadow: unset;
	border-bottom: .2rem solid var(--accentColor);
	background: linear-gradient(to bottom, var(--defaultBgColor) 0%, var(--defaultBgColor) 80%, var(--selectedObjectColor025) 100%);
}
.selected-object h2 {
	color: var(--accentColor);
	font-size: 1.5rem;
	font-weight: bold;
	font-style: normal;
	word-wrap: break-word;
	margin: 0;
}

.selected-formular-object {
	box-shadow: unset;
	border-bottom: .2rem solid var(--accentColor);
	border-radius: var(--defaultBorderRadius);
	background: linear-gradient(to bottom, var(--defaultBgColor) 0%, var(--defaultBgColor) 80%, var(--selectedObjectColor025) 100%);
	padding: 1rem;
	margin: .5rem 2rem;
	overflow: auto;
}
.selected-formular-object h2 {
	color: var(--accentColor);
	font-size: 1.5rem;
	font-weight: bold;
}

.time-details {
	margin-left: 3rem;
}
.time-details-last {
	margin-bottom: 1rem;
}
#pwdpolicy {
	/* placeholer client definition */
}
#pwdpolicy ul {
	margin: 2rem;
}
#user-roles {
	padding: 1rem;
}
/* Link mit Button-Optik soll 2-reihig angezeigt werden */
#user-roles > span > span {
	display: inline-block;
	width: 10rem;
}

#profileChange .content {
	padding-top: 2rem;
}

/* Banner-Upload in Portal-Einstellungen */
/*
.upload-banner {
	display: flex;
}
.upload-banner > label {
	 align-self: center;
}
*/
.upload-banner img {
	max-height: 3.5rem;
}
.upload-banner + .content-div form {
	width: 67%;
	display: inline-block;
}
.upload-banner + .content-div {
	margin-top: 0;
}

/************************************************************************
	Hover / Focus (Barrierefreiheit!)
************************************************************************/
#banner:not([disabled]):hover, #banner:focus,
#login-banner a:not([disabled]):hover, #login-banner a:focus,
#login-container .items-center a:not([disabled]):hover, #login-container .items-center a:focus,
.online-hilfe a:not([disabled]):hover, .online-hilfe a:focus,
.close-button:not([disabled]):hover, .close-button:focus,
.header-button:not([disabled]):hover, .header-button:focus,
.submit-button:not([disabled]):hover, .submit-button:focus,
.overview .card:not([disabled]):hover, .overview .card:focus,
table thead tr th a:not([disabled]):hover, table thead tr th a:focus,
.paging a:not([disabled]):hover, .paging a:focus,
.updatelink:not([disabled]):hover, .updatelink:focus,
.iconbutton:not([disabled]):hover, .iconbutton:focus,
.breadcrumb-item a:not([disabled]):hover, .breadcrumb-item a:focus,
.input-item:not([disabled]):not([readonly]):hover, .input-item:focus,
.ui-autocomplete-input:not([disabled]):hover, .ui-autocomplete-input:focus,
.button:not([disabled]):hover, .button:focus,
.crumb-item a:not([disabled]):hover, .crumb-item a:focus,
.crumb-active a:not([disabled]):hover, .crumb-active a:focus,
.crumb-done a:not([disabled]):hover, .crumb-done a:focus,
.information .card-header a:not([disabled]):hover, .information .card-header a:focus,
#footer a:not([disabled]):hover, #footer a:focus {
	outline: .125rem solid var(--accentLighterColor075);
	outline-offset: .1875rem;

	z-index: 2;
	border-color: var(--accentColor);
	box-shadow: inset 0 .0625rem .0625rem var(--shadowColor0075), 0 0 .5rem var(--accentColor);
}

/************************************************************************
	Fehler / Hinweis
************************************************************************/
.items-center .field-error {
	display: block;
}
.field-error {
	font-weight: lighter;
	color: var(--errorColor);
	font-size: .8rem;
	margin-top: .4rem;
	display: table;
	white-space: normal;
}
.group-error {
	font-weight: bold;
	color: var(--errorColor);
	margin-top: 1rem;
	display: block;
	white-space: normal;
}
#login-container .global-error {
	background-color: inherit;
}
.global-error {
	margin: 2rem 2rem 3rem 2rem;
	display: block;
	font-size: 1rem;
	font-weight: bold;
	color: var(--errorColor);
	background-color: var(--defaultBgColor);
	padding: .25rem .5rem;
	white-space: normal;
}
.global-error::before {
	content: "ACHTUNG! ";
	color: var(--errorColor);
	font-size: 1.25rem;
}

.global-messages-frame{
	margin:0 2.5rem 1rem;
}
.global-messages-frame > span {
	font-size: 1.3rem;
	font-weight: bold;
}
.global-messages-frame > span > i {
	padding-left: 0;
	margin-left: 0;
}
.global-messages-frame ul{
	list-style-type: none;
}

.single-global-message{
	/* rausgenommen wegen FM-152 */
	/* margin-left: .3rem; */
}

.global-errors-frame{
	color: var(--errorColor);
	background-color: var(--defaultBgColor);
	display: inline-block;
}

.global-hints-frame{
	color: var(--accentColor);
	background-color: var(--defaultBgColor);
	display: inline-block;
}

.tooltip {
	display: none;
	position: absolute;
	background-color: var(--defaultBgColor);
	color: var(--primaryTextColor);
	font-weight: lighter;
	padding: 0.5rem;
	margin: 1.25rem;
	border-radius: var(--defaultBorderRadius);
	z-index: 1000;
	pointer-events: none; /* keine Mausinteraktion */
	box-shadow: 0 0 0.5rem 0rem var(--shadowColor025), 0 0 0.5rem 0rem var(--shadowColor025);
}

.has-tooltip:hover .tooltip,
.has-tooltip:focus .tooltip {
	display: block;
}

/************************************************************************
	Disabling elements caused by user rights
************************************************************************/

input[type="radio"]:disabled, input[type="radio"]:disabled + label {
	cursor: default;
}

input[type="radio"]:disabled:hover {
	box-shadow: none;
}

.download-files, .delete-files {
	cursor: pointer;
}

.download-files:disabled, .delete-files:disabled {
	cursor: not-allowed !important;
	opacity: 0.65;
}

.disabled-form-label {
	cursor: not-allowed !important;
	padding-left: .2rem;
	padding-right: .2rem;
}

.disabled-form-element{
	cursor: not-allowed !important;
	opacity: 0.65;
}

.disabled-form-element:active,
.disabled-form-element:active:focus,
.disabled-form-element:focus,
.disabled-form-element:hover{
	box-shadow: none;
}

.disabled-form-input, .disabled-form-input + .disabled-form-label {
	cursor: not-allowed !important;
	background-color: var(--disabledInputBgColor);
	color: var(--disabledInputColor);
	padding-left: .2rem;
	padding-right: .2rem;
}

.disabled-form-input:focus,
.disabled-form-input:hover{
	border-color: var(--disabledInputHoverBorderColor);
	box-shadow: none;
}

input[type="radio"].disabled-form-input{

    /*Entferne das Styling vom Browser.*/
    appearance: none;

    /*Erzeuge den Kreis*/
    width: 1rem;
    height: 1rem;
    border: 0.125rem solid var(--infoBorderColor);
    border-radius: 50%;
    background-color: var(--disabledInputBgColor);
}

input[type="radio"].disabled-form-input:checked{

    /*Die Farbe des Punktes in der Mitte*/
    background-color: var(--infoBorderColor);

    /*Erzeuge den inneren Ring mit der Hintergrundfarbe*/
    box-shadow: inset 0 0 0 0.2rem var(--disabledInputBgColor);
}

/* for link <a>-tag*/
.disabled-link{
	cursor: not-allowed;
	opacity: 0.65;
}

.disabled-link > a{
	display: inline-block;  /* For IE11/ MS Edge bug */
	pointer-events: none;
	text-decoration: none;
}

/************************************************************************
	Mediaqueries
************************************************************************/
@media screen and (min-width: 300px) {
	/* placeholer client definition */
}
@media screen and (min-width: 320px) {
	/* placeholer client definition */
}
@media screen and (min-width: 400px) {
	#banner, #banner img { max-height: 2.5rem; }
	.header-right { margin-top: .25rem; }
	#hamburger:checked + label + #height-grower{ display:block; height:12.3rem; }
	#login-container .online-hilfe { top: 5rem; }

	.content-div .importdatei { max-width: 25rem; }

	.flex-radio-group-horizontal > fieldset { display: inline-flex;	}
	.content-div .radio-wrapper { display: inline-flex; align-items: center; }
}
@media screen and (min-width: 600px) {
	#banner, #banner img { max-height: 3.5rem; margin-top: 0; }
	#footer { display: flex; justify-content: space-between; align-items: center; }
	#footer-left ul li { text-align: left; }
	#footer-right ul li { text-align: right; }

	.information .card { width: 39.5rem; }

	.lightbox { width: 90%; }
	#additional-lightbox .lightbox { width: 80%; height: 80%; margin-top: 3rem; }
	/* ab hier Label und Input-Felder nebeneinander */
	.formular-item {
		display: flex;
		align-items: center
	}
	.formular-item > label, .formular-item > .fieldlabel, .content-div > .fieldlabel { width: 30%; text-align: right; }
	.content-div > .fieldlabel { align-self: center; }
	.formular-item > .input-div { width: 68%; display: flex; flex-direction: column; }
	.formular-item > select, .formular-item > input, .formular-item > textarea, .formular-item .formular-item-container { width: 68%; }

	.formular-item-swap { display: flex; justify-content: space-between; }
	.formular-item-list { width: 45%; }
	.formular-item-btn-block { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 1rem; width: 10%; }

	.content-div { display: flex; }
	.content-div > label { width: 30%; text-align: right; align-self: center; }
	.content-div > select, .content-div > input, .content-div > form > input { width: 67%; }
	.content-div > div { width: 67%; }
	.content-div > .input-form { width: 67%; display: inline-block; }

	.flex-radio-group { display: flex; }
	.flex-radio-group .fieldlabel { /* margin-top: .75rem; */ }
	.content-div > input[type="checkbox"] { width: 1rem; height: 1rem; }

	.upload-banner { display: flex; }
	.upload-banner > .fieldlabel { align-self: center; }

	.inline-box-div > div { display: inline-flex; }
	.inline-box-div > div > div { text-align: right; }
	/*
	.inline-radio-items { display: flex; }
	*/
	.flex-content { display: flex; }

	#pwdpolicy { margin: 2rem; }
	.content-div .input-div .pwd-field { width: 75% !important; }

	.content-div .importdatei { max-width: 30rem; }

	#login-container { width: 80%; margin: 2.5rem auto; }
	#login-container .content-div { display: flex; }
	#login-container .content-div > label { margin-top: .3rem; width: 40%; }
	#login-container .content-div > input[type="text"], #login-container .content-div input[type="password"] { width: 57.5%; }
	#login-container .content-div > .input-div { width: 57.5%; }
	#login-container .content-div > .input-div > input[type="text"] { width: 100%; }
	#login-container .online-hilfe { right: 8rem; }
	#login-container #username { width: 80% !important; }
	#login-container .auth-choose-div > .fieldlabel { width: 40%; display: inline-block; margin-right: 1rem; }
}
@media screen and (min-width: 542px) {
	/* placeholer client definition */
}
@media screen and (min-width: 680px) {
	/* ab hier ist die Suche zweireihig */
}
@media screen and (min-width: 700px) {
	.content-holder { display: flex; }
	.content-group { width: 50%; }
	.content-group + .content-group { margin-left: -2rem; } /* macht nur Sinn bei genau zwei content-groups */
	.content-group .content-div > label { width: 100%; text-align: left; }
	.content-group .content-div  > select, .content-group .content-div > input { width: 100%; }
}
@media screen and (min-width: 800px) {
	#hamburger:checked + label + #height-grower { display:block; height:6.75rem; }

	html { font-size: 13px; }
	#additional-lightbox .lightbox { width: 70%; margin-top: 5rem; }

	#login-container { width: 70%; margin: 5rem auto; }
}
@media screen and (min-width: 950px) {
	.content-group .content-div { display: flex; }
	.content-group .content-div > label { width: 30%; text-align: right; margin-top: .4rem; }
	.content-group .content-div  > select, .content-group .content-div > input { width: 68%; }

	#login-container { width: 60%; margin-top: 7.5rem; }
}
@media screen and (min-width: 1060px) {
	#hamburger:checked + label + #height-grower{ display:none; height: 0; }
	.header-left { margin-top: 1.25rem; }
	.header-right { margin-top: 2rem; }
}
@media screen and (min-width: 1100px) {
	html { font-size: 14px; }
	.lightbox { width: 80%; }
	#additional-lightbox .lightbox { width: 60%; /*height: 70%;*/ }
	#login-container { width: 50%; }
	.content-div .importdatei { max-width: 40rem; }
}
@media screen and (min-width: 1200px) {
	/* die linke Navigation braucht ca. 1200px */
	.main-and-navi { display: flex; justify-content: space-between; }
}
@media screen and (min-width: 1400px) {
	html { font-size: 15px; }
	.lightbox { width: 70%; }
	#additional-lightbox .lightbox { width: 50%; }

	#login-container { margin-top: 10rem; }
}

@media screen and (min-width: 1500px) {
	#login-container .auth-choose-div { display: flex; }
	#login-container .auth-choose-div > div { width: 51.75%; justify-content: space-between; display: flex; }
	#login-container .auth-choose-div > div > a { height: 71.5%; }
}

@media screen and (min-width: 1700px) {
	html { font-size: 16px; }
	.lightbox { width: 60%; }
	#additional-lightbox .lightbox { width: 40%; }
	.formular-item input[type="checkbox"] { margin-top: 1rem; }
}

/*=====================================================*/
/* Zahlvorgangshistory - Tabs */
.register {
	margin: 0 2rem;
}
.register > .content {
	background-color: unset;
	margin: 0;
	padding-bottom: 0;
	box-shadow: unset;
}
.registerseite .content {
	box-shadow: unset;
	margin: .5rem;
}
.register [role=tablist] {
	list-style: none;
}
.register [role=tab] {
	cursor: pointer;
	background-color: var(--imageButtonBgColor);
	border-color: var(--imageButtonBgColor);
	border-style: solid;
	border-width: .125rem .125rem 0;
	border-top-right-radius: var(--defaultBorderRadius);
	border-top-left-radius: var(--defaultBorderRadius);
	margin-right: .5rem;
	font-weight: bold;
	display: inline-flex;
}
.register [role=tab]:hover, .register [role=tab]:focus {
	outline: .125rem solid var(--accentLighterColor075);
	outline-offset: .1875rem;
	border-color: var(--accentColor);
	box-shadow: inset 0 .0625rem .0625rem var(--shadowColor0075), 0 0 .5rem var(--accentColor);
}
.register [role=tab] a, .register [role=tab] a:visited, .register [role=tab] a:active {
	text-decoration: none;
	color: var(--buttonTextColor);
	padding: .5rem;
	font-size: 1.5rem;
}
.register [role=tab] a:hover, .register [role=tab] a:focus {
	outline: .125rem solid var(--accentLighterColor075);
	outline-offset: .1875rem;
	border-color: var(--accentColor);
	box-shadow: inset 0 .0625rem .0625rem var(--shadowColor0075), 0 0 .5rem var(--accentColor);
}
.register [role=tab][aria-selected=true] a:hover, .register [role=tab][aria-selected=true] a:focus {
	outline: .125rem solid var(--accentLighterColor075);
	outline-offset: .1875rem;
	border-color: var(--accentColor);
	box-shadow: inset 0 .0625rem .0625rem var(--shadowColor0075), 0 0 .5rem var(--accentColor);
}
.register [role=tab][aria-selected=true] {
	background-color: var(--defaultBgColor);
}
.register [role=tab][aria-selected=true] a, .register [role=tab][aria-selected=true] a:visited, .register [role=tab][aria-selected=true] a:active {
	color: var(--primaryTextColor);
}
.register [role=tabpanel] {
	border-radius: var(--defaultBorderRadius);
	border: .12rem solid var(--imageButtonBgColor);
	box-shadow: 1rem 1.5rem 1rem -1rem var(--shadowColor025);
	margin-top: -.1rem;
}
.register [role=tabpanel][aria-hidden=true] {
	display: none;
}

button.button-success.button-confirm.ui-button.ui-corner-all.ui-widget {
	background-color: var(--buttonSuccessBgColor);
	border: .0625rem solid var(--buttonTextColor);

	color: var(--buttonTextColor);
	font-size: 1rem;
	font-family: "Lucida Grande", "Lucida Sans", Arial, sans-serif;
	padding: 0.4rem 0.8rem;
	font-weight: 700;
	border-end-end-radius: 0;
	border-end-start-radius: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.button.button-danger.button-confirm.ui-button.ui-corner-all.ui-widget {
	background-color: var(--imageButtonBgColor);
	background-color: var(--buttonDangerBgColor);
	border: .0625rem solid var(--buttonTextColor);
	color: var(--buttonTextColor);
	font-size: 1rem;
	font-family: "Lucida Grande", "Lucida Sans", Arial, sans-serif;
	padding: 0.4rem 0.8rem;
	font-weight: 700;
	border-end-end-radius: 0;
	border-end-start-radius: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}



.button.button-success.button-confirm.ui-button.ui-corner-all.ui-widget:hover,
.button.button-success.button-confirm.ui-button.ui-corner-all.ui-widget:focus {
	color: var(--defaultBgColor);
	background-color: var(--buttonSuccessHoverBgColor);
	border-color: var(--buttonSuccessHoverBorderColor);
}

.button.button-danger.button-confirm.ui-button.ui-corner-all.ui-widget:hover,
.button.button-danger.button-confirm.ui-button.ui-corner-all.ui-widget:focus {
	color: var(--defaultBgColor);
	background-color: var(--errorColor);
	border-color: var(--buttonDangerHoverBorderColor);
}



.confirmation-dialog.ui-dialog-content.ui-widget-content{
	height: auto;
}

textarea#ablehnungsgrundId {
	margin-top: 5px;
	width: 99%;
	height: 40px;
	max-width: 99%;

}

div.div-input-with-symbol {
	position: relative;
	display: inline-block;
	padding-top: 4px;
}
div.div-inputsymbol {
	position:absolute;
	top:5px;
	right: 0;
	display: inline-block;
}
select#selectedTypeOption{
	font-size: 1rem;
}

.inputsymbol:hover{
	font-size: 1.3em;
	-webkit-text-fill-color: black;
	-webkit-text-stroke-width: 3px;
	-webkit-text-stroke-color: var(--crumbActiveBorderColor075);
}
.inputsymbol{
	font-size: 1.3em;
	-webkit-text-fill-color: black;
	-webkit-text-stroke-width: 0px;
	-webkit-text-stroke-color: var(--crumbActiveBorderColor075);
}

body .ui-tooltip{
	max-width:max-content;
}
body .ui-tooltip-content{
	max-width: max-content;
}

.forced-hidden-element {
	display: none !important;
}

/* EP4LF-1126 */
.formular-select {
	font-size: 1rem;
	padding: .25rem .5rem;
}

.inverted-button-color {
	background-color: var(--defaultContrastColor) !important;
	color: var(--defaultBgColor) !important;
}

/*input[type="radio"]{*/
/*    transform: scale(1.1);*/
/*    position: relative;         !*Macht sich selbst den Bezugspunkt*!*/
/*    cursor: pointer;            !*Zeigt Hand-Cursor auf dem Radio-Button an*!*/
/*    outline: none!important;    !*Standart-Outline entfernen*!*/
/*}*/

/*input[type="radio"]::before{*/
/*    content: "";*/
/*    position: absolute;      !*Positioniert sich relativ zum nächsten Bezugspoint*!*/
/*    top: -50%;                   !*-50% von oben (Mitte vertikal)*!*/
/*    left: -50%;                  !*-50% von links (Mitte horizontal)*!*/
/*    width: 2rem;*/
/*    height: 2rem;*/
/*    cursor: pointer;         !*Zeigt Hand-Cursor auf dem unsichtbaren Bereich an*!*/
/*}*/