:root {
  --error-bg: #f44336;                           /* Fehlermeldung */
  --error-color: #FFF;
  --error-border: #d32f2f;
}

/* =================================================
   Spezial-Overrides für die Login-Seite (body#login-body)
   ================================================= */

/* 1) Universal Box-Sizing, damit Padding in Breiten gerechnet wird */
html, body, *, *::before, *::after {
  box-sizing: border-box;
}

/* 2) Body als Flex-Container, Fullscreen ohne Ränder */

body#login-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Hintergrund hast du ja schon gesetzt */
}

/* 3) Wrapper überschreiben */
body#login-body .wrapper {
  /* globale 

  /* flex für vertikale Zentrierung */
  flex: 1;

}

/* 4) v-align f?llt den Wrapper */
body#login-body .wrapper .v-align {
  width: 100%;
  /* optional: height: 100%; */
}

/* 5) main und form auf 100% */
body#login-body .wrapper .v-align main {
  width: 100%;
  padding: 0;           /* falls vorher Padding gesetzt */
  margin: 0;
}
body#login-body .wrapper .v-align main form {
  width: 100%;
  margin: 0;
  padding: 2rem;        /* wie gehabt */
  box-sizing: border-box;
}

/* 6) Footer unten kleben */
body#login-body footer {
  /* kein flex:1 */
  margin-top: 0;
}

/* 7) Mobile: Kein Weißraum neben Wrapper */
@media (max-width: 600px) {
  body#login-body .wrapper {
    max-width: 100%;
    padding: 0.5rem;
  }
}

/* ??? Keine Pfeil-Verschiebung auf Hover/Focus/Active ??? */
body#login-body #submit-wrapper .submit-icon {
  /* feste Position statt animiertem Wechsel */
  right: 20px;
  transition: none;
}

body#login-body 
  #submit-wrapper input.login:hover ~ .submit-icon.icon-confirm-white,
body#login-body 
  #submit-wrapper input.login:focus ~ .submit-icon.icon-confirm-white,
body#login-body 
  #submit-wrapper input.login:active ~ .submit-icon.icon-confirm-white {
  right: 15px;
  transition: right 100ms ease-in-out;
}

/* Default and reset */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; cursor:default; }
html { height:100%; }
article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; }

table { border-collapse:separate; border-spacing:0; white-space:nowrap; }
caption, th, td { text-align:left; font-weight:normal; }
table, td, th { vertical-align:middle; }
a { border:0;  text-decoration:none;}
a, a *, input, input *, select, .button span, label { cursor:pointer; }
ul { list-style:none; }

body {

	font-weight: normal;

	line-height: 1.6em;

	text-align: center;
	background-color: #FFFFFF;
	background-image: url('../img/background2.jpg');
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed; /* fix background gradient */
	min-height: 100%; /* fix sticky footer */
	height: auto;
}

#showAdvanced {
	color: #fff;
}

em {
	font-style: normal;
	opacity: .5;
}

/* heading styles */
h2,
h3,
h4 {
	font-weight: bold;
}

h2 {
	font-size: 20px;
	margin-bottom: 12px;
	line-height: 140%;
}
h3 {
	font-size: 15px;
	margin: 12px 0;
}

/* Global content */
body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

#header .logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: min(280px, 82vw);
	min-height: 112px;
	margin: 0 auto;
	position: relative;
	left: unset;
}

#header .logo img {
	display: block;
	width: 100%;
	height: auto;
}
.wrapper {
	width: 300px;
	margin-top: 10vh;
}

/* Default FORM */

form fieldset {
	margin-bottom: 20px;
	text-align: left;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
form #sqliteInformation {
	margin-top: -20px;
	margin-bottom: 20px;
}
form #adminaccount {
	margin-bottom: 15px;
}
form fieldset legend, #datadirContent label {
	width: 100%;
}
#datadirContent label {
	display: block;
	margin: 0;
}
form #datadirField legend {
	margin-bottom: 15px;
}

/* View more button */
#showAdvanced {
	padding: 13px; /* increase clickable area of Advanced dropdown */
}
#showAdvanced img {
	vertical-align: middle; /* adjust position of Advanced dropdown arrow */
}

/* Buttons and input */
#submit-wrapper,#reset-password-wrapper,.grouptop, .groupbottom {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative; /* Make the wrapper the containing block of its
						   absolutely positioned descendant icons */
}

#submit-wrapper .submit-icon {
	position: absolute;
	pointer-events: none; /* The submit icon is positioned on the submit button.
							 From the user point of view the icon is part of the
							 button, so the clicks on the icon have to be
							 applied to the button instead. */
}

#reset-password-submit {
	padding: 10px;
	overflow: hidden;
	text-overflow: ellipsis;
}

#reset-password-wrapper .submit-icon {
	display: none;
}

#submit-wrapper .icon-loading-small {
	position: absolute;
	top: 22px;
	right: 26px;
}

input, textarea, select, button, div[contenteditable=true] {
	font-family: 'Nunito', 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif;
}

input.login {
	width: 200px;
	height: 50px;
	background-position: right 16px center;
}
input[type='submit'],
input[type='submit'].icon-confirm,
input.updateButton,
input.update-continue {
	padding: 10px 20px; /* larger log in and installation buttons */
}
.updateAnyways a.updateAnywaysButton {
	font-size: 14px;
	padding: 10px 20px;
	color: #666;
	display: inline-block;
	border-radius: 100px; /* --border-radius-pill */
	margin: 15px 5px;
}
.updateAnyways a.updateAnywaysButton:hover {
	color: #222;
}

/* Get rid of the inside dotted line in Firefox */
button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
}

input.primary,
button.primary,
a.primary {
	border: 1px solid #fff;
	background-color: #2f3696;
	color: #fff;
	transition: color 100ms ease-in-out;
}

input.primary:not(:disabled):hover,
input.primary:not(:disabled):focus,
button.primary:not(:disabled):hover,
button.primary:not(:disabled):focus,
a.primary:not(:disabled):hover,
a.primary:not(:disabled):focus {
	color: rgba(255, 255, 255, .8);
}

/* Checkboxes - white only for login */
input[type='checkbox'].checkbox {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
input[type='checkbox'].checkbox + label {
	user-select: none;
}
input[type='checkbox'].checkbox:disabled + label,
input[type='checkbox'].checkbox:disabled + label:before {
	cursor: default;
}
input[type='checkbox'].checkbox + label:before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	margin: 3px;
	margin-top: 1px;
	border: 1px solid #888;
	border-radius: 1px;
	height: 10px;
	width: 10px;
	background-position: center;
}
input[type='checkbox'].checkbox--white + label:before {
	border-color: #ddd;
}
input[type='checkbox'].checkbox--white:not(:disabled):not(:checked) + label:hover:before,
input[type='checkbox'].checkbox--white:focus + label:before {
	border-color: #fff;
}

input[type='checkbox'].checkbox--white:disabled + label:before {
	background-color: #666;
	border-color: #999;
}
input[type='checkbox'].checkbox--white:checked:disabled + label:before {
	border-color: #666;
	background-color: #222;
}
input[type='checkbox'].checkbox--white:checked + label:before {
	background-color: transparent;
	border-color: #fff;
	background-image: url('../img/actions/checkbox-mark-white.svg');
}

/* Password strength meter */
.strengthify-wrapper {
	display: inline-block;
	position: relative;
	left: 5px;
	top: -20px;
	width: 269px;
	border-radius: 0 0 3px 3px;
	overflow: hidden;
	height: 3px;
}
.tooltip-inner {
	font-weight: bold;
	color: #ccc;
	padding: 3px 6px;
	text-align: center;
}

/* Show password toggle */
#show, #dbpassword-toggle {
	position: absolute;
	right: 1em;
	top: .8em;
	float: right;
}
#show + label, #dbpassword-toggle + label {
	right: 21px;
	top: 15px;
	margin: -14px;
	padding: 14px;
}
#show:checked + label, #dbpassword-toggle:checked + label, #personal-show:checked + label {
	opacity: .8;
}
#show + label, #dbpassword-toggle + label, #personal-show + label {
	position: absolute;
	height: 20px;
	width: 24px;
	background-image: url('../img/actions/toggle.svg?v=1');
	background-repeat: no-repeat;
	background-position: center;
	opacity: .3;
}
#show + label:before, #dbpassword-toggle + label:before, #personal-show + label:before {
	display: none;
}
/* Feedback for keyboard focus and mouse hover */
#show:focus + label, #dbpassword-toggle:focus + label, #personal-show:focus + label,
#show + label:hover, #dbpassword-toggle + label:hover, #personal-show + label:hover {
  opacity: 1;
}
#pass2, input[name='personal-password-clone'] {
	padding: .6em 2.5em .4em .4em;
	width: 8em;
}
#personal-show + label {
	height: 14px;
	margin-top: -25px;
	left: 295px;
	display: block;
}
#passwordbutton {
	margin-left: .5em;
}

.two-factor-provider {
	display: flex;
	border-radius: 3px; /* --border-radius */
	margin: 12px 0;
	border: 1px solid transparent;
	text-align: left;
	align-items: center;
	text-decoration: none;
}
.two-factor-provider:hover,
.two-factor-provider:focus,
.two-factor-provider:active {
	border: 1px solid #fff;
}
.two-factor-provider img {
	width: 64px;
	height: 64px;
	padding: 0 12px;
}
.two-factor-provider div {
	margin: 12px 0;
}
.two-factor-provider h3 {
	margin: 0;
}
.two-factor-provider p {
	font-weight: normal;
}
.two-factor-icon {
	width: 100px;
	display: block;
	margin: 0 auto;
}
.two-factor-submit {
	width: 100%;
	padding: 10px;
	margin: 0 0 5px 0;
	border-radius: 100px; /* --border-radius-pill */
	font-size: 20px;
}
.two-factor-primary {
	/* Fix for 'Use backup codes' button not taking correct styles */
	padding: 14px;
	width: 226px;
}
.two-factor-secondary {
	display: inline-block;
	padding: 12px;
}

/* Additional login options */
#remember_login {
	margin: 18px 5px 0 16px;
}
.remember-login-container,
.lost-password-container {
	display: inline-block;
	margin: 10px 0;
	text-align: center;
	width: 100%;
	text-shadow: 0 0 2px rgba(0, 0, 0, .4); /* better readability on bright background */
}
.lost-password-container #lost-password,
.lost-password-container #lost-password-back {
	display: inline-block;
	font-weight: normal;
	padding: 12px;
	margin-top: -6px;
	color: #fff;
	cursor: pointer;
}
#forgot-password {
	padding: 11px;
	float: right;
	color: #fff;
}

/* Alternative Logins */
#alternative-logins legend {
	margin-bottom: 10px;
}
#alternative-logins li {
	height: 40px;
	white-space: nowrap;
	padding: 05px;
}
#alternative-logins li a {
	width: 100%;
	display: inline-block;
	text-align: center;
	box-sizing: border-box;
	background-color: #0082c9;
	color: white;
	border-radius: 100px; /* --border-radius-pill */
}

/* fixes for update page TODO should be fixed some time in a proper way */
/* this is just for an error while updating the ownCloud instance */
.updateProgress .error {
	margin-top: 10px;
	margin-bottom: 10px;
}

/* Database selector on install page */
form #selectDbType {
	text-align:center;
	white-space: nowrap;
	margin: 0;
	display: flex;
}
form #selectDbType .info {
	white-space: normal;
}
form #selectDbType label {
	flex-grow: 1;
	margin: 0 -1px 5px;
	font-size: 12px;
	background:#f8f8f8;
	color:#888;
	cursor:pointer;
	border: 1px solid #ddd;
	padding: 10px 17px;
}
form #selectDbType label.ui-state-hover,
form #selectDbType label.ui-state-active {
	font-weight: normal;
	color:#000;
	background-color:#e8e8e8;
}
form #selectDbType .ui-visual-focus {
	box-shadow: none;
}
form #selectDbType label span {
	display: none;
}

/* Nicely grouping input field sets */
.grouptop,
.groupmiddle,
.groupbottom {
	position: relative;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.grouptop input {
	margin-bottom: 0;
	border-bottom: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.groupmiddle input {
	margin-top: 0;
	margin-bottom: 0;
	border-top: 0;
	border-bottom: 0;
	border-radius: 0;
	box-shadow: 0 1px 0 rgba(0,0,0,.1) inset;
}
.groupbottom input {
	margin-top: 0;
	border-top: 0;
	border-top-right-radius: 0;
	border-top-left-radius: 0;
	box-shadow: 0 1px 0 rgba(0,0,0,.1) inset;
}
.groupbottom input[type=submit] {
	box-shadow: none;
}

/* Errors */
/* Warnings and errors are the same */
.body-login-container,
.warning,
.update,
.error {
	display: block;
	margin-top: 15px;
	padding: 15px;
	background-color: rgba(0,0,0,.3);
	color: #fff;
	text-align: left;
	word-wrap: break-word;
	border-radius: 10px; /* --border-radius-large */
	cursor: default;
	-moz-user-select: text;
	-webkit-user-select: text;
	-ms-user-select: text;
	user-select: text;
}

.body-login-container h2,
.warning h2,
.update h2,
.error h2 {
	color: #fff;
	text-align: center;
}

/* TODO: Change all .warning/.update/.error to .body-login-container */
.body-login-container .icon-big {
	background-size: 70px;
	height: 70px;
}

.body-login-container form {
	width: initial;
}

.body-login-container p:not(:last-child) {
    margin-bottom: 12px;
}

.warning.updateAnyways {
	text-align: center;
}
.warning legend,
.warning a,
.error a {
	color: #fff;
	font-weight: bold;
	opacity: 1;
}
.error a.button {
	color: #555;
	display: inline-block;
	text-align: center;
}
.error pre {
	white-space: pre-wrap;
	text-align: left;
}
.error-wide {
	width: 700px;
	margin-left: -200px;
	margin-top: 35px;
}
.error-wide .button {
	color: black;
}
.warning-input {
	border-color: #ce3702;
}
a.warning {
	cursor: pointer;
}
fieldset.warning legend,
fieldset.update legend {
	top: 18px;
	position: relative;
}
fieldset.warning legend + p,
fieldset.update legend + p {
	margin-top: 12px;
}

/* Various paragraph styles */
.infogroup {
	margin: 8px 0;
}
.infogroup:last-child {
	margin-bottom: 0;
}
p.info {
	margin: 10px auto;
	text-shadow: 0 0 2px rgba(0, 0, 0, .4); /* better readability on bright background */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Update */
.update {
	width: inherit;
	text-align: center;
}
.update .appList {
	list-style: disc;
	text-align: left;
	margin-left: 25px;
	margin-right: 25px;
}
.update img.float-spinner {
	float: left;
}
.update a.update-show-detailed {
	border-bottom: inherit;
}
#update-progress-detailed {
	text-align: left;
	margin-bottom: 12px;
}
.update-show-detailed {
	padding: 12px;
	display: block;
	opacity: .75;
}
.update-show-detailed .icon-caret-white {
	display: inline-block;
	vertical-align: middle;
}
#update-progress-icon {
	height: 32px;
	margin: 10px;
	background-size: 32px;
}

/* Icons */
.icon-info-white {
	background-image: url('../img/actions/info-white.svg?v=2');
}
.icon-error-white {
	background-image: url('../img/actions/error-white.svg?v=1');
}
.icon-caret-white {
	background-image: url('../img/actions/caret-white.svg?v=1');
}
.icon-confirm {
	background-image: url('../img/actions/confirm.svg?v=2');
}
.icon-confirm-white {
	background-image: url('../img/confirm-white.svg');
}
.icon-checkmark-white {
	background-image: url('../img/actions/checkmark-white.svg?v=1');
}

/* Loading */
.float-spinner {
	margin-top: -32px;
	padding-top: 32px;
	height: 32px;
	display: none;
}
[class^='icon-'], [class*=' icon-'] {
	background-repeat: no-repeat;
	background-position: center;
	min-width: 16px;
	min-height: 16px;
}
.loading, .loading-small, .icon-loading, .icon-loading-dark, .icon-loading-small, .icon-loading-small-dark {
	position: relative;
}
.loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after {
	z-index: 2;
	content: '';
	height: 32px;
	width: 32px;
	margin: -17px 0 0 -17px;
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 100%;
	-webkit-animation: rotate .8s infinite linear;
	animation: rotate .8s infinite linear;
	-webkit-transform-origin: center;
	-ms-transform-origin: center;
	transform-origin: center;
}
.loading:after, .loading-small:after, .icon-loading:after, .icon-loading-dark:after, .icon-loading-small:after, .icon-loading-small-dark:after {
	border: 2px solid rgba(150, 150, 150, 0.5);
	border-top-color: #646464;
}
.icon-loading-dark:after, .icon-loading-small-dark:after {
	border: 2px solid rgba(187, 187, 187, 0.5);
	border-top-color: #bbb;
}
.icon-loading-small:after, .icon-loading-small-dark:after {
	height: 16px;
	width: 16px;
	margin: -9px 0 0 -9px;
}
/* Css replaced elements don't have ::after nor ::before */
img.icon-loading, object.icon-loading, video.icon-loading, button.icon-loading, textarea.icon-loading, input.icon-loading, select.icon-loading, div[contenteditable=true].icon-loading {
	background-image: url('../img/loading.gif');
}
img.icon-loading-dark, object.icon-loading-dark, video.icon-loading-dark, button.icon-loading-dark, textarea.icon-loading-dark, input.icon-loading-dark, select.icon-loading-dark, div[contenteditable=true].icon-loading-dark {
	background-image: url('../img/loading-dark.gif');
}
img.icon-loading-small, object.icon-loading-small, video.icon-loading-small, button.icon-loading-small, textarea.icon-loading-small, input.icon-loading-small, select.icon-loading-small, div[contenteditable=true].icon-loading-small {
	background-image: url('../img/loading-small.gif');
}
img.icon-loading-small-dark, object.icon-loading-small-dark, video.icon-loading-small-dark, button.icon-loading-small-dark, textarea.icon-loading-small-dark, input.icon-loading-small-dark, select.icon-loading-small-dark, div[contenteditable=true].icon-loading-small-dark {
	background-image: url('../img/loading-small-dark.gif');
}
@-webkit-keyframes rotate {
	from {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	}
	to {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
	}
}
@keyframes rotate {
	from {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	}
	to {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
	}
}

/* FOOTER */
footer {
	margin-top: auto;
}

footer .info .entity-name {
	font-weight: bold;
}

.hidden {
	display: none;
}

/* keep the labels for screen readers but hide them since we use placeholders */
label.infield,
.hidden-visually {
	position: absolute;
	left:-10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

a.legal {
	font-size: smaller;
}

/* latin-ext */
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 400; /* normal */
	src: local('Nunito Regular'), local('Nunito-Regular'),
		url('../fonts/Nunito-Regular.ttf') format('truetype');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 400; /* normal */
	src: local('Nunito Regular'), local('Nunito-Regular'),
		url('../fonts/Nunito-Regular.ttf') format('truetype');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 700; /* bold */
	src: local('Nunito Bold'), local('Nunito-Bold'),
		url('../fonts/Nunito-Bold.ttf') format('truetype');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Nunito';
	font-style: normal;
	font-weight: 700; /* bold */
	src: local('Nunito Bold'), local('Nunito-Bold'),
		url('../fonts/Nunito-Bold.ttf') format('truetype');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
	margin: 0;

}

/* Fixierte Navbar */

.navbar {

	top: 0;
	z-index: 10;

}

.navbar a {

	text-align: center;

	font-size: 17px;
}

.navbar a:hover {

	text-decoration: none;
}

.navbar a.active {

	text-decoration: none;
}

.site-wrapper {
	width: 100%;
}

/* Right-aligned section inside the top navigation */
.topnav-right {
  float: right;
}

td a.btn,  td a:hover{
	text-decoration: none;
}

td i {
	margin-right: 5px;
}

#main-body {
	background-image:none;
	background-color: #f4f3ef;
}

/* The alert message box */
.alert {
	padding: 20px;
	background-color: #f44336; /* Red */
	color: white;
	margin-bottom: 15px;
	font-weight: bold;
	font-size: 20px;
}

/* The close button */
.closebtn {
	margin-left: 15px;
	color: white;
	font-weight: bold;
	float: right;
	font-size: 22px;
	line-height: 20px;
	cursor: pointer;
	transition: 0.3s;
}

/* When moving the mouse over the close button */
.closebtn:hover {
	color: black;
}

i {
	cursor: pointer;
}

input[type=search]:focus, input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 10px darkgrey;
}

input[type=search], input[type=text], textarea {
  -webkit-transition: all 0.20s ease-in-out;
  -moz-transition: all 0.20s ease-in-out;
  -ms-transition: all 0.20s ease-in-out;
  -o-transition: all 0.20s ease-in-out;
}

.fc {
	color: #2C3E50;
	margin-top: 70px;
}

/* Editor: */

.document-editor {
    border: 1px solid var(--ck-color-base-border);
    border-radius: var(--ck-border-radius);

    /* Set vertical boundaries for the document editor. */

    /* This element is a flex container for easier rendering. */
    display: flex;
    flex-flow: column nowrap;
}

.document-editor__toolbar {
    /* Make sure the toolbar container is always above the editable. */
    z-index: 1;

    /* Create the illusion of the toolbar floating over the editable. */
    box-shadow: 0 0 5px hsla( 0,0%,0%,.2 );

    /* Use the CKEditor CSS variables to keep the UI consistent. */
    border-bottom: 1px solid var(--ck-color-toolbar-border);
}

/* Adjust the look of the toolbar inside the container. */
.document-editor__toolbar .ck-toolbar {
    border: 0;
    border-radius: 0;
}

/* Make the editable container look like the inside of a native word processor application. */
.document-editor__editable-container {
    padding: calc( 2 * var(--ck-spacing-large) );
    background: var(--ck-color-base-foreground);

    /* Make it possible to scroll the "page" of the edited content. */
    overflow-y: scroll;
}

.document-editor__editable-container .ck-editor__editable {
    /* Set the dimensions of the "page". */
    width: 15.8cm;
    min-height: 21cm;

    /* Keep the "page" off the boundaries of the container. */
    padding: 1cm 2cm 2cm;

    border: 1px hsl( 0,0%,82.7% ) solid;
    border-radius: var(--ck-border-radius);
    background: white;

    /* The "page" should cast a slight shadow (3D illusion). */
    box-shadow: 0 0 5px hsla( 0,0%,0%,.1 );

    /* Center the "page". */
    margin: 0 auto;
}

/* Set the default font for the "page" of the content. */
.document-editor .ck-content,
.document-editor .ck-heading-dropdown .ck-list .ck-button__label {
    font: 16px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Adjust the headings dropdown to host some larger heading styles. */
.document-editor .ck-heading-dropdown .ck-list .ck-button__label {
    line-height: calc( 1.7 * var(--ck-line-height-base) * var(--ck-font-size-base) );
    min-width: 6em;
}

/* Scale down all heading previews because they are way too big to be presented in the UI.
Preserve the relative scale, though. */
.document-editor .ck-heading-dropdown .ck-list .ck-button:not(.ck-heading_paragraph) .ck-button__label {
    transform: scale(0.8);
    transform-origin: left;
}

/* Set the styles for "Heading 1". */
.document-editor .ck-content h2,
.document-editor .ck-heading-dropdown .ck-heading_heading1 .ck-button__label {
    font-size: 2.18em;
    font-weight: normal;
}

.document-editor .ck-content h2 {
    line-height: 1.37em;
    padding-top: .342em;
    margin-bottom: .142em;
}

/* Set the styles for "Heading 2". */
.document-editor .ck-content h3,
.document-editor .ck-heading-dropdown .ck-heading_heading2 .ck-button__label {
    font-size: 1.75em;
    font-weight: normal;
    color: hsl( 203, 100%, 50% );
}

.document-editor .ck-heading-dropdown .ck-heading_heading2.ck-on .ck-button__label {
    color: var(--ck-color-list-button-on-text);
}

/* Set the styles for "Heading 2". */
.document-editor .ck-content h3 {
    line-height: 1.86em;
    padding-top: .171em;
    margin-bottom: .357em;
}

/* Set the styles for "Heading 3". */
.document-editor .ck-content h4,
.document-editor .ck-heading-dropdown .ck-heading_heading3 .ck-button__label {
    font-size: 1.31em;
    font-weight: bold;
}

.document-editor .ck-content h4 {
    line-height: 1.24em;
    padding-top: .286em;
    margin-bottom: .952em;
}

/* Set the styles for "Paragraph". */
.document-editor .ck-content p {
    font-size: 1em;
    line-height: 1.5em;
    /* padding-top: .5em; */
    /* margin-bottom: 1.13em; */
}

/* Make the block quoted text serif with some additional spacing. */
.document-editor .ck-content blockquote {
    font-family: Georgia, serif;
    margin-left: calc( 2 * var(--ck-spacing-large) );
    margin-right: calc( 2 * var(--ck-spacing-large) );
}

.fc-list-table td {
    padding: 0px 0px 0px 5px;
}

.fc-list-table td.fc-list-item-title {
    padding-left: 3px;
}
.fc-list-table td.fc-list-item-marker {
    padding-left: 10px;
}
/* Container, der den Editor umschließt, soll den gesamten Viewport einnehmen */
.editor-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
}
/* Die Toolbar bekommt ebenfalls einen weißen Hintergrund */
.document-editor__toolbar {
    background-color: #fff;
}
/* Der Editable-Bereich wächst, um den restlichen Platz einzunehmen */
.document-editor__editable {
    background-color: #fff;
    flex-grow: 1;
    overflow-y: auto;
}

/* Verhindert ungewolltes überlaufen und erzwingt Zeilenumbruch */

.navbar {
  background-color: var(--color-surface);
  padding: 10px 20px;

}

.navbar a {
  color: #2f3696;
  text-decoration: none;
  font-weight: 600;
  padding: 8px 12px;
  transition: background-color 0.3s, color 0.3s;
}

.navbar a:hover,
.navbar a.active {
  background-color: #2f3696;
  color: #fff;
  border-radius: 4px;
}

.topnav-right {
  display: flex;
  gap: 5px;
  align-items: end;
  position: absolute;
  right: 0px;
}

.navbar .icon {
  display: none;
}

/* Für Zellen, in denen Text umbrochen werden soll */
.text-wrap {
  white-space: normal;
  word-wrap: break-word;
  max-width: 200px;
}

/* Floating Labels, wie zuvor */
.floating-label {
  position: relative;
  margin-bottom: 1.5em;
}
.floating-label input {
  padding: 12px 8px;
  width: 100%;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;           /* Sicherstellen, dass der Input-Hintergrund weiß ist */
}
.floating-label label {
  position: absolute;
  left: 12px;
  top: 12px;
  transition: all 0.2s ease;
  color: #aaa;
  pointer-events: none;
}
.floating-label label.active {
  top: -10px;
  left: 8px;
  font-size: 12px;
  color: #333;
  background: #fff;           /* Label-Hintergrund ebenfalls weiß */
  padding: 0 4px;
}

#patient-info {
    position: fixed;
    left: 0;
    width: 100%;
    background-color: #fff; /* Hintergrundfarbe nach Wunsch */
    z-index: 1000; /* Sicherstellen, dass der Block über anderen Elementen liegt */
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

#patient-info h1 {
	font-weight: bold;
	font-size: 16px;
}

#patient-info p {
	color: #AAAAAA;
}

#patient-info p strong{
	color: #000000;
}

.detail-container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-top: 20px;
}

#detail-view button {
  display: block;
  text-align: left;
  margin: 10px 0;
}

input[type="checkbox"] {
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 10;
}

.modal.fade,
.modal.show {
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
  max-width: none;
  padding: 0;
  width: 100%;
  z-index: 11040;
}

.modal-backdrop {
  z-index: 11030;
}

.modal-dialog {
  margin-bottom: 24px;
  margin-top: 64px;
}

.modal-content {

  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 88px);
  min-height: 0;
  overflow: hidden;
  position: relative;
  z-index: 11041;
}

.modal-header,
.modal-footer {
  flex: 0 0 auto;
}

.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
  scrollbar-width: thin;
}

.modal-body::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.modal-body::-webkit-scrollbar-thumb {
  background: var(--app-scrollbar-thumb);
  border-radius: 8px;
}

.modal-body::-webkit-scrollbar-track {
  background: var(--app-scrollbar-track);
}

.invoice-modal {
  overflow-y: auto;
  scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
  scrollbar-width: thin;
}

.invoice-modal::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

.invoice-modal::-webkit-scrollbar-thumb {
  background: var(--app-scrollbar-thumb);
  border-radius: 8px;
}

.invoice-modal::-webkit-scrollbar-track {
  background: var(--app-scrollbar-track);
}

/* ==============================================
   Login-Seite (nur auf index.php mit <body id="login-body">)
   ============================================== */
body#login-body {
  background: 
    #FFFFFF
    url('../img/background2.jpg') center/cover fixed;
}

body#login-body .wrapper {
  display: flex;
  flex-direction: column;   /* ? sorgt für vertikalen Stack */
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
  margin: 0 auto;          /* zentriert auf breiten Bildschirmen */
  width: 100%;
  max-width: 480px;        /* optional: Maximalbreite für Mobil/Desktop */
  background: transparent; /* oder var(--background-color) */
}

body#login-body .wrapper form {
  width: 100%;
  background: var(--surface-color);
  padding: 2rem;

}

body#login-body input[type="text"],
body#login-body input[type="password"] {
  width: 100%;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  background: var(--input-bg);
  color: var(--text-color);
  transition: border-color 0.2s, box-shadow 0.2s;
}

body#login-body input[type="text"]::placeholder,
body#login-body input[type="password"]::placeholder {
  color: var(--text-secondary, #6B7C7D);
  font-weight: 400;
  opacity: .76;
  transition: color .16s ease, opacity .16s ease;
}

body#login-body input[type="text"]:focus::placeholder,
body#login-body input[type="password"]:focus::placeholder {
  opacity: .28;
}

body#login-body input[type="text"]:focus,
body#login-body input[type="password"]:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px var(--accent-color-transparent);
  outline: none;
}

body#login-body #submit {
  display: block;
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  border: none;
  border-radius: 0.5rem;
  background: var(--primary-color);
  color: var(--on-primary-color);
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

body#login-body #submit:hover {
  background: var(--primary-color-hover);
}

body#login-body #submit:active {
  transform: translateY(1px);
}

body#login-body .alert {
  background: var(--error-bg);
  color: var(--error-color);
  border: 1px solid var(--error-border);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  position: relative;
}

body#login-body .alert .closebtn {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  font-size: 1.25rem;
  cursor: pointer;
  color: inherit;
}

/* Placeholder-Labels (Accessibility) */
body#login-body label.infield {
  position: absolute;
  clip: rect(0 0 0 0);
  pointer-events: none;
}

@media (max-width: 360px) {
  body#login-body .wrapper form {
    padding: 1rem;
  }
}

/* =================================================
   AGENTS.md UI refresh: calm medical SaaS theme
   ================================================= */
:root {
  --background-color: #F7F9F9;
  --surface-color: #FFFFFF;
  --border-color: #DDE2E5;
  --input-bg: #FFFFFF;
  --text-color: #202A33;
  --text-secondary: #66727D;
  --accent-color: #B48A55;
  --accent-color-transparent: rgba(180, 138, 85, .18);
  --primary-color: #3F5F7D;
  --primary-color-hover: #334E68;
  --secondary-color: #6F9DC3;
  --on-primary-color: #FFFFFF;
  --soft-shadow: 0 10px 30px rgba(32, 42, 51, .08);
  --soft-shadow-sm: 0 4px 14px rgba(32, 42, 51, .06);
  --radius: 10px;
}

html,
body {
  background: var(--background-color);
  color: var(--text-color);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
}

a {
  color: var(--primary-color);
}

a:hover {
  color: var(--primary-color-hover);
}

a,
button,
.btn,
.nav-link,
.dropdown-item,
.list-group-item,
.toolbar-control,
.timeline-item,
.person-note-item {
  cursor: pointer;
}

.navbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--soft-shadow-sm);
  backdrop-filter: blur(12px);
}

.navbar .nav-link,
.navbar .navbar-brand {
  background: var(--surface-color);
  color: var(--text-secondary);
  border-radius: var(--radius);
  font-weight: 500;
  transition: background-color .18s ease, color .18s ease;
}

.navbar .nav-link:hover,
.navbar .navbar-brand:hover {
  background: var(--surface-color);
  color: var(--primary-color);
}

.navbar .nav-link.active,
.navbar .navbar-brand.active {
  background: var(--primary-color);
  color: var(--on-primary-color);
}

.navbar .nav-link.active i,
.navbar .navbar-brand.active i {
  color: var(--on-primary-color);
}

.dropdown-menu,
.modal-content,
.upload-content,
.invoice-content,
.person-info-box,
.person-therapy-panel,
.card,
.right-column,
.docu-modebar,
.handwriting-page {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--soft-shadow);
}

.left-column {
  background: var(--background-color);
}

.form-control,
.form-select,
input[type="text"],
input[type="date"],
input[type="time"],
input[type="email"],
input[type="password"],
select,
textarea {
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  color: var(--text-color);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 .2rem rgba(111, 157, 195, .16);
  outline: none;
}

.btn {
  border-radius: var(--radius);
  font-weight: 600;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:not(.btn-close):not(.task-status-icon):not(.therapy-status-icon):not(.service-status-icon):not(.therapy-service-pill):not(.therapy-status-pill):not(.person-tag-quick-btn):not(.person-tag-pill-remove):not(.tag-chip-remove) {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--on-primary-color);
}

.btn:not(.btn-close):not(.task-status-icon):not(.therapy-status-icon):not(.service-status-icon):not(.therapy-service-pill):not(.therapy-status-pill):not(.person-tag-quick-btn):not(.person-tag-pill-remove):not(.tag-chip-remove) i {
  color: inherit;
}

.btn:not(.btn-close):not(.task-status-icon):not(.therapy-status-icon):not(.service-status-icon):not(.therapy-service-pill):not(.therapy-status-pill):not(.person-tag-quick-btn):not(.person-tag-pill-remove):not(.tag-chip-remove):hover,
.btn:not(.btn-close):not(.task-status-icon):not(.therapy-status-icon):not(.service-status-icon):not(.therapy-service-pill):not(.therapy-status-pill):not(.person-tag-quick-btn):not(.person-tag-pill-remove):not(.tag-chip-remove):focus-visible {
  background: var(--primary-color-hover);
  border-color: var(--primary-color-hover);
  color: var(--on-primary-color);
}

.btn:not(.btn-close):not(.task-status-icon):not(.therapy-status-icon):not(.service-status-icon):not(.therapy-service-pill):not(.therapy-status-pill):not(.person-tag-quick-btn):not(.person-tag-pill-remove):not(.tag-chip-remove):disabled,
.btn:not(.btn-close):not(.task-status-icon):not(.therapy-status-icon):not(.service-status-icon):not(.therapy-service-pill):not(.therapy-status-pill):not(.person-tag-quick-btn):not(.person-tag-pill-remove):not(.tag-chip-remove).disabled {
  background: #d8e1e1;
  border-color: #d8e1e1;
  color: #66727d;
  opacity: 1;
  transform: none;
}

.btn-primary,
.btn-success {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--on-primary-color);
}

.btn-primary:hover,
.btn-success:hover {
  background: var(--primary-color-hover);
  border-color: var(--primary-color-hover);
}

.icon-btn:has(i),
.section-icon-btn:has(i),
.calendar-filter-action:has(i),
.home-icon-btn:has(i),
.home-header-icon-btn:has(i),
.home-simple-action:has(i),
.termin-action:has(i),
.open-invoice-action:has(i),
.task-widget-action:has(i),
.overview-action:has(i),
.overview-task-action:has(i),
.therapy-icon-btn:has(i),
.service-action-btn:has(i),
.booking-icon-btn:has(i),
.forms-icon-btn:has(i),
.settings-icon-action:has(i),
.snippet-action-btn:has(i),
.user-action-btn:has(i),
.timeline-icon-action:has(i),
.person-task-action-btn:has(i),
.person-task-done-btn:has(i),
.modal-close-btn,
.modal-content > .close,
.btn-close {
  align-items: center;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 34px;
  height: 34px;
  inline-size: 34px;
  justify-content: center;
  line-height: 1;
  max-height: 34px;
  max-width: 34px;
  min-height: 34px;
  min-width: 34px;
  padding: 0;
  width: 34px;
}

.icon-btn:has(i) i,
.section-icon-btn:has(i) i,
.calendar-filter-action:has(i) i,
.home-icon-btn:has(i) i,
.home-header-icon-btn:has(i) i,
.home-simple-action:has(i) i,
.termin-action:has(i) i,
.open-invoice-action:has(i) i,
.task-widget-action:has(i) i,
.overview-action:has(i) i,
.overview-task-action:has(i) i,
.therapy-icon-btn:has(i) i,
.service-action-btn:has(i) i,
.booking-icon-btn:has(i) i,
.forms-icon-btn:has(i) i,
.settings-icon-action:has(i) i,
.snippet-action-btn:has(i) i,
.user-action-btn:has(i) i,
.timeline-icon-action:has(i) i,
.person-task-action-btn:has(i) i,
.person-task-done-btn:has(i) i {
  display: block;
  line-height: 1;
  margin: 0;
  text-align: center;
}

.btn-outline-primary,
.toolbar-control.active,
.toolbar-control:hover,
.timeline-filters .filter-item.active,
.timeline-filters .filter-item:hover,
.therapy-filter-btn.active,
.therapy-filter-btn:hover,
.active-filter-item {
  background: rgba(111, 157, 195, .12);
  border-color: rgba(111, 157, 195, .36);
  color: var(--primary-color);
}

.list-group-item,
.timeline-item,
.therapy-card-row,
.person-note-item {
  border-color: var(--border-color);
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.list-group-item {
  background: transparent;
  color: var(--text-color);
  border-radius: var(--radius);
  margin-bottom: 4px;
}

.list-group-item:hover,
.list-group-item.selected {
  background: var(--surface-color);
  box-shadow: var(--soft-shadow-sm);
}

.person-initials,
.person-info-box .photo.initials {
  background: var(--primary-color);
}

.person-info-box {
  color: var(--text-color);
}

.person-info-box .label,
.person-info-box .birthdate,
.person-info-box .age,
.person-note-meta,
.therapy-card-meta,
.text-muted {
  color: var(--text-secondary);
}

.timeline-container {
  border-left-color: var(--border-color);
}

.timeline-content {
  border-left-color: var(--secondary-color);
}

.timeline-icon i,
.timeline-icon.text,
.timeline-followup,
.edit-icon,
.new-entry-btn,
.arrow {
  color: var(--primary-color);
}

.person-note-item,
.hybrid-note {
  background: #FFF6DC;
  border-color: rgba(200, 169, 126, .58);
}

table,
.table {
  color: var(--text-color);
}

.table > :not(caption) > * > * {
  border-color: var(--border-color);
  background: var(--surface-color);
}

.table thead th {
  color: var(--text-secondary);
  background: #F2F6F6;
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
}

.progress {
  background: #EAF1F1;
  border-radius: var(--radius);
}

.progress-bar {
  background: var(--secondary-color);
}

.toolbar-control,
.toolbar-color,
.toolbar-range {
  border-color: var(--border-color);
  border-radius: var(--radius);
}

.docu-modebar {
  color: var(--text-color);
}

.handwriting-page {
  box-shadow: 0 14px 40px rgba(32, 42, 51, .10);
}

.hybrid-textbox:focus {
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 2px rgba(111, 157, 195, .18);
}

body#login-body .wrapper form {
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--soft-shadow);
}
/* Keep the application navbar pinned to the viewport from the first paint. */
#myNavbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 11000;
  margin-left: 0;
  margin-right: 0;
  max-width: none;
  width: auto;
  margin-top: 0;
}
/* Normalize application navbar icon alignment. */
#myNavbar .nav-link {
  align-items: center;
  display: inline-flex;
  gap: .35rem;
}

#myNavbar .nav-link > i,
#myNavbar .navbar-brand > i {
  align-items: center;
  display: inline-flex;
  font-size: 1.08rem;
  height: 1.25rem;
  justify-content: center;
  line-height: 1;
  min-width: 1.25rem;
  position: relative;
  top: 0;
  vertical-align: middle;
  width: 1.25rem;
}

#myNavbar #settingsDropdown > i,
#myNavbar a[href="account.php"] > i {
  font-size: 1.22rem;
  height: 1.38rem;
  line-height: 1;
  min-width: 1.38rem;
  position: relative;
  top: 2px;
  width: 1.38rem;
}