/* -------------------------------------------------- Allgemein -------------------------------------------------- */


@media (max-width: 768px) {
	.col-xs-12.text-right, .col-xs-12.text-left {
		text-align: center;
	}
}

.hide-on-phone {
	padding-top: 4px;
	margin-bottom: 6px;
}

@media (max-width: 991px) {
	.hide-on-phone {
		display: none;
	}
}

body {
	background-color: #EEEEEE;
	font-size: 125%;
}

body.gallery {
 	overflow-y: hidden;
	overflow-x: hidden;
	background-color: rgba(55, 55, 55, 1.0);
}

.jumbotron {
	background:transparent !important;
	vertical-align: middle;
	margin-top: -1em;
	margin-bottom: 1em;
}

.main-orange {
	color: var(--pace-orange);
}


/* ---------------------------------------------------- Login ---------------------------------------------------- */


.logo {
	max-width: 125px;
	padding: 0;
	margin: 0;
}

.login-container-header {
	margin-left: 0.2em;
	margin-right: 0.2em;
	align-items: center;
	display: flex;
}

.login-container {
	margin-top: -2.5em;
}

.login-btn {
	min-width: 100px !important;
	margin-top: 4em;
}

.lang-btn span {
	display: block;
}

#language-selection {
	padding-top: 50px;
	padding-left: 30px;
}

#language-selection .row div {
	text-align: center;
}

#language-selection h1:hover {
	transform: scale(1.3);
    transition: transform .3s;
}

#language-selection h1:active {
	transform: scale(1.05);
    transition: transform .15s;
}

#language-selection .flag-active {
	filter: grayscale(85%);
}

#language-selection .flag-active:hover {
	filter: grayscale(0%);   
    -webkit-transition: .3s -webkit-filter linear;
	-moz-transition: .3s -moz-filter linear;
	-moz-transition: .3s filter linear;
	-ms-transition: .3s -ms-filter linear;
	-o-transition: .3s -o-filter linear;
	transition: .3s filter linear, .3s -webkit-filter linear;
}

.login-submit {
	align-items: center;
	display: flex;
}

.login-hints {
	min-width: 100px !important;
	margin-top: -8.5em;
	visibility: hidden;
}


/* ---------------------------------------------- Projektübersicht ---------------------------------------------- */


/* Header der Projektübersicht */
.project-overview-header {
	margin-top: -15px;
	margin-bottom: -15px;
}

/* Navigationsbar der Projektübersicht */
#navbar-project-overview {
	display: inline-block;
	width: 100%;
	background-color: var(--navbar-background);
	border: none;
	border-radius: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 0px;
	padding-right: 0px;
	z-index: 10;
}

/* Logo in der Projektübersicht */
.navbar-brand {
	padding: 7px 5px;
}

/* Projekt hinzufügen Button */
#add-project-btn {
	margin-left: 10px;
	padding: 6px;
}

/* Toolbar mit Adminbuttons */
#project-overview-admin-toolbar {
	margin-top: -12px;
	margin-bottom: 10px;
}

/* Toolbar mit Adminbuttons Button */
#project-overview-admin-toolbar button {
	margin: 0px;
}

/* Toolbar mit Projekt anlegen Button */
#project-overview-toolbar {
	margin-top: 0px;
	margin-bottom: 20px;
}

/* Ansicht umschalten Button */
#toggle-big-small-project-view {
	float: left;
}

/* Container für ein einzelnes Projekt in der Projektübersicht */
.single-project-container {
	background-color: var(--default-white);
	border-radius: 15px;
	padding-right: 20px;
	padding-left: 20px;
	margin-bottom: 20px;
}

/* Projektname eines Projektcontainers */
.single-project-container-header {
	display: inline-block;
	margin-bottom: 20px;
}

/* Einstellungsbutton für ein Projekt */
.single-project-container-settings-btn {
	display: inline-block;
	float: right;
	margin-top: 15px;
}

.camera-preview-image {
	min-height: 159px;
	max-height: 178px;
}

/* Thumbnail in Projektübersicht */
.camera-preview-image-container {
	width: 100%;
}
 
/* Cursor ändern beim hovern über einer Kamera */
.camera-preview-image-container:hover {
	cursor: pointer;
}
 
/* Cursor ändern beim hovern Kameraname */
.camera-preview-caption:hover {
	cursor: pointer;
}

/* Name/Beschreibung einer Kamera in der Projektübersicht */
.camera-preview-image-description {
	display: inline;
	font-size: 100%;
}

/* Kamerastatus in der Projektübersicht */
.camera-preview-image-status {
	display: inline;
	float: right;
	margin-top: 2px;
}

/* Contentbereich der Projektübersicht */
#content-container {
	margin-top: 75px;
	margin-bottom: 175px;
	text-align: center;
}

#content-container h3 {
	margin-top: 25px;
}

/* Kamera anlegen in der Projektübersicht */
.create-camera-container {
	cursor: pointer;
}

/* Mobile Geräte */
@media (max-width: 767px){
	/* Grüßen des Benutzers in der Projektübersicht */
	#user-greeting {
		color: var(--default-white);
		margin-right: 15px;
	}

	/* Logoutbutton in der Projektübersicht */
	.logout-btn-project-overview {
		margin-top: -6px;
	}
	
	/* Bei collapsed Navigationsbar der Projektübersicht sollen die Elemente in einer Zeile angezeigt werden*/
	.navbar-list-item {
		display: inline-block !important;
	}
}

/* Medium-Größe */
@media (max-width: 992px){
	/* Container für Benutzerbegrüßung */
	#user-greeting-container {
		max-width: 150px;
	}
}

/* Traditionelle Geräte */
@media (min-width: 768px){
	/* Grüßen des Benutzers in der Projektübersicht */
	#user-greeting {
		margin-top: 15px;
		margin-right: 15px;
		color: var(--default-white);
	}

	/* Logoutbutton in der Projektübersicht */
	.logout-btn-project-overview {
		position: relative;
		float: right;
		display: inline-block;
		margin-top: 8px;
	}
}

/* Sprachauswahl in der Projektübersicht */
#lang-selection-dropdown, #lang-selection-dropdown li, #lang-selection-dropdown li a {
	width: 63px !important;
	max-width: 63px !important;
	min-width: 63px !important;
	z-index: 1000;
}

#lang-selection-dropdown li a {
	padding: 3px 10px;
}

#lang-selection-dropdown li a:hover {
	background-color: var(--pace-orange-flat);
}

/* Logoutbutton in der Projektübersicht (hover) */
.logout-btn-project-overview:hover {
	color: var(--default-white);
}

/* Footer */
.project-overview-footer {
	width: 100%;
	margin: 0 auto;
	margin-top: 50px;
	margin-bottom: 25px;
}

/* Footer Icons */
.project-overview-footer i {
	margin-right: 2px;
}

/* Footer-Element */
.text-muted {
	display: inline-block;
	margin-right: 15px;
}

/* Footer-Element Link */
.text-muted a, .text-muted a:hover {
	text-decoration: none;
	color: var(--navbar-background);
}


/* ------------------------------------------------- Hilfe-Seite ------------------------------------------------- */


/* Container für Hilfetexte */
.help-container {
	text-align: left;
	margin-bottom: 75px;
}

/* Horizontale Trennlinien */
.help-hr {
	margin-top: 20px;
	margin-bottom: 20px;
	border-top: 1px solid #CCCCCC;
}

/* Überschrift der Hilfe-Seite */
.help-header {
	margin-bottom: 20px;
}

/* Text-Blöcke */
.help-text-block {
	text-align: justify;
}

/* Benutzertypen-Tabelle */
#what-user-types-container table {
	margin-top: 10px;
}

#what-user-types-container table th {
	padding-right: 25px;
}

#what-user-types-container tbody {
	vertical-align: top;
}

#what-user-types-container tr:first-child {
	padding-right: 25px;
}

/* Fußzeile der Hilfe-Seite */
.help-footer {
	margin-top: 50px;
}


/* ------------------------------------------------- Animationen ------------------------------------------------- */


/* Bestätigen Button */
#submit-password-authentification {
	width: 93px;
}

/* Abbrechen Button */
#cancel-password-authentification {
	width: 95px;
}

/* Passworteingabe: Fehlermeldung */
#authentification-modal-error-text {
	display: none;
	margin-top: 10px;
	margin-bottom: 20px;
}


/* --------------------------------------------------- FAQ/Hilfe ------------------------------------------------- */


/* Style inputs with type="text", select elements and textareas */
.help-text-block #contact-form {
	margin-top: 20px;
	margin-bottom: 20px;
}

.help-text-block #contact-form input[type=text], .help-text-block #contact-form select, .help-text-block #contact-form textarea {
	width: 100%; /* Full width */
	padding: 12px; /* Some padding */ 
	border: 1px solid #CCCCCC; /* Gray border */
	border-radius: 4px; /* Rounded borders */
	box-sizing: border-box; /* Make sure that padding and width stays in place */
	margin-top: 6px; /* Add a top margin */
	margin-bottom: 16px; /* Bottom margin */
	resize: vertical
}

/* Style the submit button with a specific background color etc */
.help-text-block #contact-form button {
	width: 100%;
}

.help-text-block #contact-form-text {
	height: 200px;
}


/* ------------------------------------------------- Animationen ------------------------------------------------- */


/* Hinweis, wenn Kamera zu lange keine Logs hochgeladen hat */
.noReactionAlert {
  -webkit-animation: blinkOrange 2s infinite;  /* Safari 4+ */
  -moz-animation: blinkOrange 2s infinite;  /* Fx 5+ */
  -o-animation: blinkOrange 2s infinite;  /* Opera 12+ */
  animation: blinkOrange 2s infinite;  /* IE 10+, Fx 29+ */
}

/* .noReactionAlert-Animation */
@-webkit-keyframes blinkOrange {
  0%, 49% {
    background-color: #FFC966;
  }
  50%, 100% {
    background-color: var(--default-white);
  }
}

/* Button zum Umschalten von aktiven und archivierten Projekten */
.material-switch {
	margin-top: 8px;
	margin-left: 10px;
}

.material-switch > input[type="checkbox"] {
    display: none;   
}

.material-switch > label {
    cursor: pointer;
    height: 0px;
    width: 40px;
    position: relative;
    margin: 0px 10px;
}

.material-switch > label::before {
    background: rgb(0, 0, 0);
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    content: '';
    height: 16px;
    margin-top: -12px;
    position:absolute;
    opacity: 0.3;
    transition: all 0.4s ease-in-out;
    width: 40px;
}

.material-switch > label::after {
    background: rgb(255, 255, 255);
    border-radius: 16px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    content: '';
    height: 24px;
    left: -4px;
    margin-top: -12px;
    position: absolute;
    top: -4px;
    transition: all 0.3s ease-in-out;
    width: 24px;
}

.material-switch > input[type="checkbox"]:checked + label::before {
    background: inherit;
    opacity: 0.5;
}

.material-switch > input[type="checkbox"]:checked + label::after {
    background: inherit;
    left: 20px;
}