/*--------------------------------------------------- Gallery ---------------------------------------------------*/

:root {
	--navbar-background: rgba(50, 50, 50, 0.8);
	--navbar-hover-medium: rgba(50, 50, 50, 0.65);
	--navbar-hover-light: rgba(50, 50, 50, 0.4);
	--pace-widget-default: rgba(50, 50, 50, 0.65);
	--pace-widget-default-light: rgba(75, 75, 75, 0.65);

	--pace-orange: rgba(255, 165, 0, 1);
	--pace-orange-flat: rgba(255, 165, 0, 0.5);

	--default-white: white;
}

/* Mindestbreite der Galleryseite */
body {
	min-width: 530px;
	min-height: 695px;
}

.gallery {
	overflow-y: hidden;
}

#image-cache {
	height: 0px;
	width: 0px;
	display: none !important;
}

/* ECKIGES DESIGN
.btn, .panel, .container, .thumbnail, .well, .dropdown-menu, .form-control {
	border-radius: 0px;
}

/* LEICHT ABGERUNDETES DESIGN */
.btn,
.panel,
.container,
.thumbnail,
.well,
.dropdown-menu,
.form-control {
	border-radius: 5px;
}

/* LOGO IN DER OBEREN NAVIGATIONSLEISTE */
/* Mobile Geräte  */
@media (max-width: 991px) {
	/* Logo-Container der oberen Navigationsleiste */
	#navigationbar-brand {
		padding: 8px;
	}
	/* Logo */
	#navigationbar-brand img {
		display: inline-block;
		margin-left: 10px;
		max-height: 52px;
		max-width: 350px;
	}
}

/* Traditionelle Geräte */
@media (min-width: 992px) {
	/* Logo-Container der oberen Navigationsleiste */
	#navigationbar-brand {
		padding: 5px 20px;
	}
	#navigationbar-brand img {
		display: inline-block;
		margin-left: 10px;
		max-height: 42px;
		max-width: 350px;
	}
}

.btn-group-justified {
	display: table;
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
}

.btn-group-justified .btn,
.btn-group-justified .btn-group {
	float: none;
	display: table-cell;
	width: 1%;
}

.btn-group-justified .btn .btn,
.btn-group-justified .btn-group .btn {
	width: 100%;
}

.btn-group-justified .btn .dropdown-menu,
.btn-group-justified .btn-group .dropdown-menu {
	left: auto;
}

.btn-group a {
	color: var(--default-white);
}

.btn-group a:hover {
	color: var(--pace-orange);
}

.btn-group a:focus {
	color: var(--pace-orange);
	outline: none;
}

.backgroundimg {
	/* background-image: url('/images/background.jpg'); */
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;

	position: relative;
	top: 0;
	bottom: 0;
	height: 100vh !important;

	/* VERHINDERN, DASS DAS BILD OBEN UND UNTEN ABGESCHNITTEN WIRD!
	max-width: 150vh;
	margin: 0 auto; */
}

/* Ladebildschirm in der Mitte des Bildes anzeigen */
#loading-screen {
	display: inline-block;
	position: fixed;
	color: #777777;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 80px;
	margin: auto;
	text-align: center;
}

/* Bild herunterladen Button */
#download-image-btn {
	position: absolute;
	float: right;
	left: 0;
	top: 0;
	margin: 0px;
	padding: 0px;
	color: var(--default-white) !important;
}
#download-image-btn button {
	padding: 8px 12px;
	border: 0px;
	border-radius: 0px;
	border-bottom-right-radius: 6px;
	color: var(--default-white);
	background: var(--navbar-background);
}

/* Tag/Nacht Design Button */
#day-night-toggle-btn {
	float: right;
}

#day-night-toggle-btn button {
	padding: 8px 14px;
	border: 0px;
	border-radius: 0px;
	border-bottom-left-radius: 6px;
	background: var(--navbar-background);
}

/* Kameraversionsanzeige */
#camera-version-widget {
	display: none;
	position: absolute;
	height: auto;
	width: auto;
	margin-left: 180px;
	padding: 8px 12px;
	top: 0;
	background-color: var(--navbar-background);
	color: var(--default-white);
	font-size: 15px;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
}

#day-night-toggle-btn i {
	color: white;
}

/* Größe umschalten und Bild löschen Buttons */
#delete-image-btn {
	display: none;
}
#size-toggle-btn,
#delete-image-btn {
	float: right;
}
#size-toggle-btn button,
#delete-image-btn button {
	padding: 8px 14px;
	border: 0px;
	border-radius: 0px;
	background: var(--navbar-background);
}
#size-toggle-btn button,
#delete-image-btn button {
	border-bottom-left-radius: 8px;
}
#size-toggle-btn i,
#delete-image-btn i {
	color: white;
}

/* Vorheriges und Nächstes Bild Button */
#previous-image,
#next-image {
	display: inline-block;
	position: fixed;
	top: 0;
	bottom: 0;
	width: 2.5%;
	height: 0px;
	margin: auto;
	padding-top: 43px;
	padding-bottom: 84px;
	text-align: center;
	background-color: var(--pace-widget-default);
	color: var(--default-white);
}

/* Vorheriges Bild Button */
#previous-image {
	left: 0;
	padding-left: 30px;
	padding-right: 66px;
	border-radius: 0px;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}

/* Nächstes Bild Button */
#next-image {
	right: 0;
	padding-left: 38px;
	padding-right: 58px;
	border-radius: 0px;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}

/* Fehlermeldung */
#gallery-error-alert {
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 0 auto;
	text-align: center;
	z-index: 1000;
}

.centered {
	background-color: #dddddd;
	position: relative;
	left: -50%;
}

.rotated {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}

/* ---------------------------------------------- Navigationsleiste ---------------------------------------------- */

/* Container für Bild- und Kamerainformationen der ersten und zweiten Navigationsleiste */
#navigationbar-top-camera-informations,
#navigationbar-top-image-informations,
#navigationbar-secondary-content-camera-informations,
#navigationbar-secondary-content-image-informations {
	color: var(--default-white) !important;
}

/* Bild- und Kamerainformationen in der zweiten Navigationsleiste */
.navbar-camera-status-container,
.navbar-image-status-container {
	display: inline-block !important;
	color: var(--default-white);
	margin-left: 0px;
	padding-left: 0px !important;
	pointer-events: none;
	cursor: default;
}

/* Bild- und Kamerainformationen in der zweiten Navigationsleiste Klickbar */
.navbar-camera-status-container-clickable {
	display: inline-block !important;
	color: var(--default-white);
	margin-left: 0px;
	padding-left: 0px !important;
	text-decoration: underline;
}

/* Farbe der Bildinformationen in der zweiten Navigationsleiste */
.navbar-image-status-container {
	color: var(--default-white) !important;
}

/* Umschaltbutton für Kamera- und Bildinformationen in der oberen Navigationsleiste */
#navigationbar-top-toggle-btn {
	position: absolute;
	top: 0;

	width: 28px;
	height: 28px;
	padding: 0px;
	margin-left: 4px;
	margin-right: 4px;
	margin-top: 10px;
}

/* Icon des Umschaltbutton */
#navigationbar-top-toggle-btn i {
	padding: 0px;
}

/* Anzeige der Kamerainformationen in der oberen Navigationsleiste */
#navigationbar-top-camera-informations {
	margin-top: 8px;
	margin-left: 0px;
}

/* Anzeige der Kamerainformationen in der sekundären Navigationsleiste */
.navigationbar-secondary-content-item {
	display: inline-block;
	padding-left: 5px;
	padding-right: 5px;
	border-right: 1px solid rgba(175, 175, 175, 0.9);
}
.navigationbar-secondary-content-item:last-of-type {
	border-right: 0px;
}

/* Einzelelement der Kamera und Bildinformationen in der oberen Navigationsleiste */
#navigationbar-top-camera-informations tr td,
#navigationbar-top-image-informations tr td {
	padding-left: 5px;
	padding-right: 5px;
	border-right: 1px solid rgba(175, 175, 175, 0.9);
}
#navigationbar-top-camera-informations tr td:last-of-type,
#navigationbar-top-image-informations tr td:last-of-type {
	border-right: 0px;
}

/* Anzeige der Bildinformationen in der oberen Navigationsleiste */
#navigationbar-top-image-informations {
	display: none;
	margin-top: 8px;
	margin-left: 1%;
}

/* Projekt- und Kamera-Dropdown */
#navbar_project_dropdown {
	max-height: 650px;
	overflow-y: auto;
}

/* Umschaltbutton für Kamera- und Bildinformationen in der zweiten Navigationsleiste */
#navigationbar-secondary-toggle-btn {
	display: inline;
	position: absolute;
	top: 0;
	right: 0;

	width: 30px;
	height: 30px;
	padding: 0px;
	margin-top: 5px;
	overflow: hidden !important;
}

/* Mobile Geräte  */
@media (max-width: 991px) {
	/* Umschaltbutton für Kamera- und Bildinformationen in der oberen Navigationsleiste */
	#navigationbar-top-toggle-btn {
		display: none !important;
	}
}

/* Traditionelle Geräte */
@media (min-width: 992px) {
	/* Umschaltbutton für Kamera- und Bildinformationen in der oberen Navigationsleiste */
	#navigationbar-top-toggle-btn {
		display: inline-block !important;
	}
}

/* Icon für Kamerastatus und Bildinformationen in der oberen Navigationsleiste */
.navigationbar-secondary-status-icon {
}

/* Dropdown-Buttons in der oberen Navigationsleiste */
#project_dropdown,
#camera_dropdown,
#navigationbar-brand,
#user-bar-btn i {
	color: var(--default-white);
	display: inline-block;
}

/* Dropdown-Buttons in der oberen Navigationsleiste HOVER */
#project_dropdown:hover,
#camera_dropdown:hover,
#navigationbar-brand:hover,
#user-bar-btn i:hover {
	color: var(--pace-orange) !important;
}

/* Dropdown-Buttons in der oberen Navigationsleiste FOCUS */
#project_dropdown:focus,
#camera_dropdown:focus {
	background-color: var(--navbar-hover-light);
	color: var(--pace-orange);
}

.opacity-hoverable {
	opacity: 0.7;
}

.opacity-hoverable:hover {
	opacity: 0.9;
}

#navigationbar-top {
	position: absolute;
	margin-bottom: 0px;
	background-color: var(--navbar-background);
	border: none;
	z-index: 10;
}

#navigationbar-bottom {
	background-color: var(--navbar-background);
	border: none;
	z-index: 10;
}

#navigationbar-top-controls {
	float: right;
	border: none !important;
	margin-right: 0px;
	color: var(--default-white);
}

/* Anzeige der Kamerainformationen als zweite Navigationsleiste */
#navigationbar-secondary {
	position: absolute;
	padding-left: 15px;
	margin-top: 50px;
	margin-bottom: 0px;
	background-color: var(--navbar-background);
	border: none;
	z-index: 2;
}

/* User-Bar mit Benutzereinstellungen und Logout-Button */
#user-bar {
	position: relative;
	float: right;
	width: 200px;
	height: 125px;
	padding: 4px;
	margin-right: -10px;
	z-index: 10;

	display: none;
	background-color: var(--pace-widget-default);
}

/* Benutzergruß innerhalb der User-Bar */
#user-bar-user-greeting {
	padding: 4px;
	color: var(--default-white) !important;
	font-weight: bold;
	text-align: center;
}

/* Benutzereinstellungen-Button innerhalb der User-Bar*/
#user-bar-user-settings-btn {
	position: absolute;
	left: 0;
	width: 192px;
	margin: 0 auto;
	margin-left: 4px;
	margin-bottom: 5px;
}

/* Logout-Button der Gallery innerhalb der User-Bar*/
#user-bar-logout-btn {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 192px;
	margin: 0 auto;
	margin-left: 4px;
	margin-bottom: 4px;
}

/* Mobile Geräte  */
@media (max-width: 991px) {
	/* Anzeige der Kamerainformationen innerhalb der oberen Navigationsleiste deaktivieren */
	#navigationbar-top-informations {
		min-width: 400px;
		display: none !important;
	}

	/* Anzeige der Kamerainformationen als 2.Navigationsleiste für mobile Geräte aktivieren */
	#navigationbar-secondary {
		display: inline-block !important;
	}
}

/* Mobile Geräte - Minimierte Navigationsleiste */
@media (max-width: 767px) {
	/* Kamera- und Bildinformationen der sekundären Navigationsleiste */
	#navigationbar-secondary-content-camera-informations,
	#navigationbar-secondary-content-image-informations {
		padding-top: 11px;
		padding-bottom: 11px;
	}
}

@media (min-width: 768px) {
	/* Kamera- und Bildinformationen der sekundären Navigationsleiste */
	#navigationbar-secondary-content-camera-informations,
	#navigationbar-secondary-content-image-informations {
		padding-top: 17px;
		padding-bottom: 15px;
	}
}

/* Traditionelle Geräte */
@media (min-width: 992px) {
	/* Anzeige der Kamerainformationen innerhalb der oberen Navigationsleiste für traditionelle Geräte aktivieren */
	#navigationbar-top-informations {
		min-width: 400px;
		display: inline-block !important;
	}

	/* Anzeige der Kamerainformationen als 2.Navigationsleiste für traditionelle Geräte deaktivieren */
	#navigationbar-secondary {
		display: none !important;
	}
}

/* -------------------------------------------------- Kalender -------------------------------------------------- */

/* Kalender Widget */
#calendar-container {
	position: absolute;
	display: none;
	bottom: 0;
	left: 0;
	overflow: hidden !important;

	background-color: var(--pace-widget-default);
	color: var(--default-white);

	width: auto;
	max-height: 275px;
}

/* Breite des Kalenders festlegen */
#calendar {
	min-width: 225px;
	max-width: 225px;
	width: 225px;
	max-height: 275px;
	overflow: hidden;

	margin: 0px;
	padding: 6px !important;
}

/* Entsperrte Tage, Monate, Jahre, Jahrzehnte */
#calendar .datepicker-days .day,
#calendar .datepicker-months .month,
#calendar .datepicker-years .year,
#calendar .datepicker-decades .decade {
	color: #ffffff !important;
	font-weight: bold !important;
}

/* Entsperrte Tage, Monate, Jahre, Jahrzehnte HOVER */
#calendar .datepicker-days .day:hover,
#calendar .datepicker-months .month:hover,
#calendar .datepicker-years .year:hover,
#calendar .datepicker-decades .decade:hover {
	color: var(--default-white) !important;
	font-weight: bold !important;
	background-color: rgba(255, 255, 255, 0.65) !important;
}

/* Gesperrte Tage, Monate, Jahre, Jahrzehnte + HOVER */
#calendar .datepicker-days .disabled,
#calendar .datepicker-months .disabled,
#calendar .datepicker-years .disabled,
#calendar .datepicker-decades .disabled,
#calendar .datepicker-days .disabled:hover,
#calendar .datepicker-months .disabled:hover,
#calendar .datepicker-years .disabled:hover,
#calendar .datepicker-decades .disabled:hover {
	color: #bbbbbb !important;
	font-weight: normal !important;
	background-color: rgba(0, 0, 0, 0) !important;
}

/* Ausgewählter Tag, Monate, Jahre, Jahrzehnte AKTIV */
#calendar .datepicker-days .active,
#calendar .datepicker-months .active,
#calendar .datepicker-years .active,
#calendar .datepicker-decades .active {
	color: var(--default-white) !important;
	font-weight: bold !important;
	background-color: var(--pace-orange) !important;
}

/* Container für Tagesvorschau-Button */
#day-preview-bar-btn {
	position: absolute;
	display: none;
	bottom: 0;
	left: 0;

	width: 40px;
	height: 40px;

	overflow: hidden !important;
	margin-left: 225px;
	padding: 0px;
}

/* Tagesvorschau-Button */
#day-preview-bar-btn button {
	width: 40px;
	height: 40px;

	overflow: hidden;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

/* Tagesvorschau-Leiste */
#day-preview-bar {
	position: absolute;
	display: none;
	bottom: 0;
	left: 0;

	width: calc(100% - 225px);
	height: 129px;
	max-height: 129px;

	margin-left: 225px;
	padding: 0px;
	padding-left: -40px;
	padding-right: 50px;

	background-color: var(--pace-widget-default);
}

/* Schließen Button für Tagesvorschau-Leiste*/
#day-preview-bar-close-btn {
	position: absolute;
	display: block;
	width: 40px;
	height: 40px;
	top: 0;
	right: 0;
	overflow: hidden !important;
}

/* Tagesvorschau-Leiste-Tages-Container */
#day-preview-bar-days {
	height: 129px;
	max-height: 129px;

	overflow-x: auto !important;
	overflow-y: hidden !important;
}

/* Inhalt der Tagesvorschau-Leiste */
#day-preview-bar-inner {
	display: inline !important;
	width: auto !important;
	white-space: nowrap !important;
	margin-left: -40px;
}

/* Bildcontainer der Tagesvorschau-Leiste */
.day-preview-bar-image-container {
	display: inline-block !important;
	margin-top: 10px;
	margin-right: 10px;
}

/* Bild der Tagesvorschau-Leiste */
.day-preview-bar-image {
	width: 110px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

/* Bildunterschrift der Tagesvorschau-Leiste */
.day-preview-bar-image-description {
	margin-left: -10px;
	margin-top: 2px;

	color: var(--default-white);
	text-decoration: none;
	text-align: center;
}

/* Ladenbalken für Tagesvorschau-Leiste*/
#day-preview-bar-inner-loading-screen {
	position: absolute;
	right: 0;
	width: 55%;
	margin-top: 8px;
	color: var(--default-white) !important;
}

/* ---------------------------------------------- Wartungshistorie ---------------------------------------------- */

/* Kalender in Wartungshistorie */
#error-report-calendar {
	padding: 15px 25px;
	padding-bottom: 0px;
}

/* Überschriften in Wartungshistorie */
#error-report-calendar .control-label {
	text-align: left !important;
}

/* -------------------------------------------------- Zeitplan -------------------------------------------------- */

/* Tabellen div */
.schedule-settings {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 5px;
	margin-bottom: 0px;
	padding: 4px;
	padding-bottom: 3px;
	text-align: left;
	z-index: 1;

	background-color: var(--pace-widget-default);
	color: var(--default-white);
	display: none;
	overflow-x: hidden;
}

/* "Einstellungen Ändern" Button */
#change-schedule-settings-btn {
	width: 80%;
	float: left;
	margin-right: 2px;
	margin-bottom: 8px;
	background-color: var(--pace-orange);
}

/* "Schließen" Button */
#close-schedule-btn {
	width: 19%;
	float: right;
	margin-bottom: 8px;
}

/* Spaltenbreiten der Zeitplantabelle für mobile Geräte */
@media (max-width: 991px) {
	.schedule-settings .schedule-settings-header1 {
		min-width: 100px;
	}

	.schedule-settings .schedule-settings-header2 {
		min-width: 80px;
	}

	/* Breite des Zeitplan ansehen Widget */
	.schedule-settings {
		min-width: 348px;
		max-width: 348px;
		width: 348px;
	}

	/* "Einstellungen Ändern" Button */
	#change-schedule-settings-btn {
		max-width: 272px;
	}

	/* "Schließen" Button */
	#close-schedule-btn {
		max-width: 64.6px;
	}
}

/* Spaltenbreiten der Zeitplantabelle für traditionelle Geräte */
@media (min-width: 992px) {
	.schedule-settings .schedule-settings-header1 {
		min-width: 125px;
	}

	.schedule-settings .schedule-settings-header2 {
		min-width: 100px;
	}

	/* Breite des Zeitplan ansehen Widget */
	.schedule-settings {
		min-width: 433px;
		max-width: 433px;
		width: 433px;
	}

	/* "Einstellungen Ändern" Button */
	#change-schedule-settings-btn {
		max-width: 340px;
	}

	/* "Schließen" Button */
	#close-schedule-btn {
		max-width: 80.75px;
	}
}

/* Zeilen der Zeitplantabelle */
.schedule-settings .schedule-settings-value {
	text-align: left;
}

.table-row-highlight {
	background-color: var(--pace-widget-default-light);
}

.table-row-normal {
	background-color: var(--pace-widget-default);
	padding: 5px;
}

/* ----------------------------------------------- Zeitplan-Modal ----------------------------------------------- */

/* Modal-Einstellungen */
#schedule-settings-modal-bar {
	position: relative;
	margin: 0 auto;
	min-height: 330px;
	max-height: 330px;
	height: 330px;
	min-width: 340px;
	max-width: 425px;
	z-index: 2;

	background-color: rgba(50, 50, 50, 0);
	color: var(--default-white);
	display: block !important;
	overflow-x: hidden;
	overflow-y: auto;
}

.slider-horizontal {
	display: inline-block !important;
}

/* Spaltenbreiten der Zeitplantabelle für mobile Geräte */
@media (max-width: 991px) {
	/* Breite der Zeitplaneinstellungen festlegen */
	#schedule-settings-modal-bar {
		width: 340px;
	}

	/* Abbrechen-Button */
	#schedule-settings-modal-cancel-btn {
		margin-left: 2px;
		margin-right: -22px;
		margin-bottom: -22px;
		width: 54%;
		float: left;
		display: inline-block;
	}

	/* Speichern-Button */
	#schedule-settings-modal-save-btn {
		margin-left: -15px;
		margin-right: 2px;
		margin-bottom: -22px;
		width: 54%;
		float: left;
		display: inline-block;
	}

	/* Breite des Zeitraumsliders */
	#time-slider {
		width: 72.5%;
	}

	/* Breite des Intervallsliders */
	#interval-slider {
		width: 79%;
	}
}

/* Spaltenbreiten der Zeitplantabelle für traditionelle Geräte */
@media (min-width: 992px) {
	/* Breite der Zeitplaneinstellungen festlegen */
	#schedule-settings-modal-bar {
		width: 425px;
	}

	/* Abbrechen-Button */
	#schedule-settings-modal-cancel-btn {
		margin-left: 2px;
		margin-right: -20px;
		margin-bottom: -22px;
		width: 53.3%;
		float: left;
		display: inline-block;
	}

	/* Speichern-Button */
	#schedule-settings-modal-save-btn {
		margin-left: -15px;
		margin-right: 2px;
		margin-bottom: -22px;
		width: 53.3%;
		float: left;
		display: inline-block;
	}

	/* Breite des Zeitraumsliders */
	#time-slider {
		width: 78%;
	}

	/* Breite des Intervallsliders */
	#interval-slider {
		width: 83%;
	}
}

/* Einrücken der Überschriften, sodass sie mit den Tabellen abschließen */
#schedule-settings-modal-bar h2 {
	position: relative;
	margin: 0 auto;
	padding: 0px;
	padding-left: 1px;
	margin-bottom: 7px;
	margin-top: 2px;
	color: var(--default-white);
}

/* Breite der Tages-Buttons */
.schedule-settings-modal-btn {
	width: 14.28%;
	min-width: 45px;
}

#schedule-settings-modal-no-img-btn-form {
	margin-top: 10px;
}

/* Button, um das Aufnehmen von Bildern für den ausgewählten Tag zu deaktivieren */
#schedule-settings-modal-no-img-btn {
	min-width: 100%;
	width: 100%;
	float: left;
}

/* Position der Intervaleinstellung */
#schedule-settings-modal-interval-form {
	margin: 0 auto;
	margin-left: 0px;
	padding-top: 10px;
}

/* Intervall-Label */
#schedule-settings-modal-interval-label-div {
	display: inline-block;
	margin-left: 1px;
	margin-right: 10px;
	min-width: 46px !important;
	max-width: 46px !important;
	width: 46px !important;
}

/* Position der Zeiteinstellung */
#schedule-settings-modal-recording-time-form {
	width: 100%;
	margin: 0 auto;
	margin-left: 0px;
	margin-right: 5px;
	padding-top: 42px;
}

/* Anfangszeit Label */
#schedule-settings-modal-start-time-label {
	display: inline-block;
	margin-right: 10px;
}

/* Endezeit Label */
#schedule-settings-modal-end-time-label {
	display: inline-block;
	margin-left: 10px;
}

/* Markieren der Tooltips des Zeitsliders deaktivieren */
.tooltip {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#schedule-settings-modal-controls {
	position: absolute;
	bottom: 0;
	margin-bottom: 30px;
}

/* ---------------------------------------------- Bilder vergleichen -------------------------------------------- */

/* Modal Container */
#compare-images-modal {
	position: absolute;
	top: 0;
	min-width: calc(530px * 0.9);
	max-width: 80%;
}

/* Container zur Auswahl der Vergleichsbilder */
.compare-modal-selection {
	position: absolute;
	top: 0;
}

/* Container zum Vergleichen von Bildern */
.compare-modal {
	position: absolute;
	top: 0;
}

/* Landscape-modus für Smartphones */
@media (min-width: 992px) {
	/* Container für den Vergleich von Bildern */
	.compare-modal {
		max-width: 75% !important;
		zoom: 87%;
	}
}

/* Container für Überschrift und Schließen-Button */
#compare-images-modal-controls {
	position: absolute;
	bottom: 0;
	margin-bottom: 30px;
}

/* Überschrift */
.compare-images-modal-controls h3 {
	margin-top: 5px;
}

/* Schließen-Button */
#compare-images-modal-close-btn {
	float: right;
	margin-right: 15px;
}

/* Container einer Seite für die Eingabe der Bild-ID */
.compare-image {
	height: auto;
	margin-bottom: 15px;
}

/* Container zur Eingabe der Bild-ID */
.compare-image .input-group {
	margin: 0 auto;
	margin-top: 6px;
}

/* Container für Fehlermeldungen */
#compare-modal-error {
	display: none;
	bottom: 0;
	height: auto;
	padding: 6px 12px;
	margin-bottom: 12px;
	text-align: left;
}

/* Ladebildschirm */
#compare-model-image-loading-screen {
	margin-top: 125px;
	margin-bottom: 125px;
	text-align: center;
}

/* Auswahlfeld der Bilder zum Vergleich */
.compare-modal-selection {
	display: block;
	position: absolute;
	bottom: 0;
	height: 295px;
	width: 530px;
	min-width: 530px;
	max-width: 530px;
	margin: 0 auto;
	padding: 25px;
	z-index: 2;

	background-color: var(--pace-widget-default);
	color: var(--default-white);
	overflow-x: hidden;
	overflow-y: auto;
}

/* Vergleich der Bilder */
.compare-modal {
	display: block;
	position: absolute;
	bottom: 0;
	width: 90%;
	margin: 0 auto;
	padding: 25px;
	z-index: 2;

	background-color: var(--pace-widget-default);
	color: var(--default-white);
	overflow-x: hidden;
	overflow-y: auto;
}

/* Vergleichcontainer */
#compare-modal-comparison {
	margin: 0 auto;
	object-fit: cover;
}

/* Vergleichsbilder (links und rechts) */
.twentytwenty-before,
.twentytwenty-after {
	display: block;
	width: auto;
	max-width: 1000px;
	height: auto;
	max-height: 73.5vh;
	margin: 0 auto;
	margin-bottom: 15px;
	padding: 15px 0px;
	object-fit: cover;
}

/* Buttonleiste unten */
#compare-images-modal-controls-bottom {
	text-align: right;
	height: 25px;
	margin-right: 14px;
}

/* "Bilder Vergleich"-Button */
#compare-images-modal-compare-btn {
	float: right;
	width: 139px;
	margin-right: -16px;
	min-width: 139px;
	max-width: 139px;
	height: 34px;
	min-height: 34px;
	max-height: 34px;
}

/* Zurücksetzen-Button */
#compare-images-modal-reset-btn {
	display: none;
	float: right;
	margin-top: 15px;
	width: 135px;
	min-width: 135px;
	max-width: 135px;
	height: 34px;
	min-height: 34px;
	max-height: 34px;
}

/* ---------------------------------------------- Timelapse erstellen -------------------------------------------- */

/* Modal Container */
#create-timelapse-modal {
	position: absolute;
	top: 0;
	width: calc(640px + 50px);
}

.timelapse-modal {
	position: absolute;
	top: 0;
}

/* Landscape-modus für Smartphones */
@media (min-width: 992px) {
	/* Container für den Vergleich von Bildern */
	.timelapse-modal {
		max-width: 75% !important;
		zoom: 87%;
	}
}

/* Container für Überschrift und Schließen-Button */
#create-timelapse-modal-controls {
	position: absolute;
	bottom: 0;
	margin-bottom: 30px;
}

/* Überschrift */
.create-timelapse-modal-controls h3 {
	margin-top: 5px;
}

/* Schließen-Button */
#create-timelapse-modal-close-btn {
	float: right;
	margin-right: 15px;
}

.timelapse-modal {
	display: block;
	position: absolute;
	bottom: 0;
	width: 90%;
	margin: 0 auto;
	padding: 25px;
	z-index: 2;

	background-color: var(--pace-widget-default);
	color: var(--default-white);
	overflow-x: hidden;
	overflow-y: auto;
}

#timelapse-modal-video-container {
	margin-bottom: 10px;
	object-fit: cover;
}

/* Eingabefelder */
#create-timelapse-modal-inputs {
	margin-bottom: 10px;
	display: flex;
	gap: 16px;
}

#create-timelapse-modal-reset-btn {
	float: right;
	margin-right: 15px;
}

/* Buttonleiste unten */
#create-timelapse-modal-controls-bottom {
	text-align: right;
	height: 25px;
	margin-bottom: 10px;
}

#create-timelapse-modal-create-btn {
	min-width: 139px;
	height: 34px;
	min-height: 34px;
	max-height: 34px;
}

#create-timelapse-modal-download-mp4-btn {
	min-width: 139px;
	height: 34px;
	min-height: 34px;
	max-height: 34px;
}

#create-timelapse-modal-download-mp4-btn-spinner {
	display: none;
}

#create-timelapse-modal-download-zip-btn {
	min-width: 139px;
	height: 34px;
	min-height: 34px;
	max-height: 34px;
}

/* Container für Fehlermeldungen */
#timelapse-modal-error {
	display: none;
	bottom: 0;
	height: auto;
	padding: 6px 12px;
	margin-bottom: 12px;
	text-align: left;
}

/* Container für Link */
#timelapse-modal-linkview {
	display: none;
	bottom: 0;
	height: auto;
	padding: 6px 12px;
	margin-bottom: 12px;
	text-align: left;
}

/* -------------------------------------------- Kameraeinstellungen -------------------------------------------- */

/* Kameraeinstellungen Widget */
#camera-settings-bar {
	position: absolute;
	display: none;
	right: 0;
	bottom: 0;
	z-index: 1;

	width: 340px;
	height: 598px;
	margin: 5px;
	margin-bottom: 0px;
	padding: 4px;
	padding-bottom: 3px;

	background-color: var(--pace-widget-default);
	color: var(--default-white);

	text-align: left;
	overflow: hidden;
}

/* Widget-Überschrift Container */
#camera-settings-bar-header {
	margin: 0px;
	padding: 0px;
	text-align: left;
}

/* Widget-Überschrift */
#camera-settings-bar-header-text {
	display: inline-block;
	margin-top: 5px;
	font-size: 175%;
}

/* Container einer Einstellungsebene */
.camera-settings-single-option-container {
	width: 100%;
	margin-left: -15px;
}

/* Teilüberschrift der einzelnen Einstellungsebenen */
.camera-settings-secondary-title {
	display: inline-block;
	margin-top: -5px;
	font-size: 125%;
}

/* Container für einzelne Dropdowns */
#camera-settings-shutter-dropdown-container,
#camera-settings-aperture-dropdown-container,
#camera-settings-image-format-dropdown-container,
#camera-settings-iso-dropdown-container,
#camera-settings-white-balance-dropdown-container,
#camera-settings-review-time-dropdown-container {
	display: inline-block;
}

/* Dropdown-Buttons */
#dropdownMenu1,
#dropdownMenu2,
#dropdownMenu3,
#dropdownMenu4,
#dropdownMenu5,
#dropdownMenu6 {
	margin-top: -4px;
}

/* Maximalhöhe für Belichtungszeit-Dropdown */
#camera-settings-shutter-dropdown {
	max-height: 423px;
	overflow-y: scroll;
}

/* Maximalhöhe für Blende-Dropdown */
#camera-settings-aperture-dropdown {
	max-height: 375px;
	overflow-y: scroll;
}

/* Maximalhöhe für ISO-Dropdown */
#camera-settings-iso-dropdown {
	max-height: 327px;
	overflow-y: scroll;
}

/* Maximalhöhe für Format-Dropdown */
#camera-settings-image-format-dropdown {
	max-height: 279px;
	overflow-y: scroll;
}

/* Container für einzelne Dropdowns */
#camera-settings-shutter-dropdown-container,
#camera-settings-aperture-dropdown-container,
#camera-settings-image-format-dropdown-container,
#camera-settings-iso-dropdown-container,
#camera-settings-white-balance-dropdown-container,
#camera-settings-review-time-dropdown-container {
	display: inline-block;
}

/* Refresh Button */
.refresh-animation {
	transform: rotate(360deg);
	transition: 0.75s;
}

/* Minimieren/Schließen Button */
#camera-settings-close-btn {
	float: right;
}

/* VPN Button */
#camera-settings-vpn-btn {
	width: 100%;
	margin-top: 20px;
}

/* Pause und Reboot Buttons */
#camera-settings-pause-btn,
#camera-settings-reboot-btn,
#camera-settings-upsidedown-btn,
#camera-settings-camerpower-btn {
	width: 100%;
	margin-top: 5px;
}

/* Buttonleiste unten */
#camera-settings-controls {
	display: inline-block;
	width: 100%;
}

/* Spaltenbreiten der Zeitplantabelle für mobile Geräte */
@media (max-width: 991px) {
	/* Speichern-Button */
	#camera-settings-save-btn {
		margin-right: 2px;
		margin-bottom: -22px;
		width: 49.33%;
		float: left;
		display: inline-block;
	}

	/* Abbrechen-Button */
	#camera-settings-cancel-btn {
		margin-left: 2px;
		margin-right: -22px;
		margin-bottom: -22px;
		width: 49.33%;
		float: left;
		display: inline-block;
	}
}

/* Spaltenbreiten der Zeitplantabelle für traditionelle Geräte */
@media (min-width: 992px) {
	/* Speichern-Button */
	#camera-settings-save-btn {
		margin-right: 2px;
		margin-bottom: -22px;
		width: 49.33%;
		float: left;
		display: inline-block;
	}

	/* Abbrechen-Button */
	#camera-settings-cancel-btn {
		margin-left: 2px;
		margin-right: -20px;
		margin-bottom: -22px;
		width: 49.33%;
		float: left;
		display: inline-block;
	}
}

/* -------------------------------------------------- Help/FAQ -------------------------------------------------- */

/* Widget Container */
#faq-help-bar {
	position: absolute;
	display: none;
	right: 0;
	bottom: 0;
	z-index: 1;

	width: 340px;
	height: 520px;
	margin: 5px;
	margin-bottom: 0px;
	padding: 4px;
	padding-bottom: 3px;

	background-color: var(--pace-widget-default);
	color: var(--default-white);

	text-align: left;
	overflow: hidden;
}

/* Widget-Überschrift Container */
#faq-help-bar-header {
	margin: 0px;
	padding: 0px;
	text-align: left;
}

/* Widget-Überschrift */
#faq-help-bar-header-text {
	display: inline-block;
	margin-top: 5px;
	font-size: 175%;
}

/* Container für Hilfebuttons */
#faq-help-content-container button {
	width: 100%;
	margin-top: 5px;
}

/* Minimieren/Schließen Button */
#faq-help-close-btn {
	float: right;
}