body {
	font-family: "NotoColorEmoji", 'Open Sans Condensed', sans-serif;
	font-size: 16px;
	background: #404040;
	width: 100%;
	height: 100%;
	overflow: overlay;
	position: relative;
	margin: 0px;
	padding: 0px;
}

input, textarea, select {
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
}

a {
	color: white;
}

a img {
	border:2px solid white;
}

a:hover {
    color: #7F7F7F;
}

.clear {   
   clear: both;
}

.admin {
	text-align: right;
	color: white;
}

.errors {
	font-size: 13px;
	color: #690C07;
	font-style: italic bold;
}

.submit {
	text-align: right;
}

#map {
	width: 100%;
	aspect-ratio: 3 / 1;
}

#imgDay, #imgRange, #imgDetail, #imgDelete, #imgMass, #imgExport, #imgImport {
	border: 0;
}

form {
	background-color: teal;
	color: white;
	padding: 10px;
	border-radius: 8px;
}

form input[type=submit] {
	font-weight: bold;
	border-radius: 4px;
	padding: 8px 8px;
	margin: auto;
	width: 225px;
	background-color: #FFFFFF;
	border: 1px solid #BBB000;
}

form input[type=submit]:hover {
	border-color: #000000;
}

form input[type=text],input[type=password] {
	padding: 4px;
	border: 1px solid #BBB000;
	border-radius: 4px;
	width: 250px;
}

.container {
	width: 100%;
}

.lf_container {
	padding-top: 32px;
	display: grid;
	grid-template-columns: 1fr;
}

#login_form {
	width: 360px;
	justify-self: center;
}

#login_form form label {
	font-weight: bold;
}

#login_form form input[type=text],input[type=password] {
	font-weight: bold;
	width: 330px;
}

#login_form .submit {
	text-align: center;
}

#logout {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	color: #FFFFFF;
}

#no_login {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	color: #FFFFFF;
}

#user_controls {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;
	background-color: black;
	background-image:url(../images/Hintergrund.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	font-weight: bold;
	padding: 0px 10px;
	border-radius: 8px;
	height: 200px;
	width: calc(100% - 20px);
}

#user_controls .navi {
	flex: 0 0 auto;
	color: white;
	background-color: rgba(64, 64, 64, 0.6);
	padding: 20px 10px 2px 10px;
	margin: 10px;
	border-radius: 8px;
	height: min-content;
	cursor: pointer;
}

#user_controls .navi:hover {
	background-color: #7F7F7F;
}

#user_controls .navi.current {
	background-color: #404040;
}

#user_controls .navi.current:hover {
	color: #7F7F7F;
}

#user_controls .n_overview {
	order: 0;
}

#user_controls .n_usermgmt {
	order: 1;
}

#user_controls .n_profile {
	order: 2;
}

#user_controls .n_contact {
	order: 3;
}

#user_controls .n_logout {
	order: 4;
}

#ov_content {
	display: grid;
	width: calc(100% - 20px);
	justify-items: stretch;
	padding: 10px;
	grid-template-columns: repeat(3, 1fr);
	row-gap: 20px;
	column-gap: 40px;
}

#overview .trip_title {
	text-align: center;
	color: black;
	padding: 10px;
	background-color: rgba(255, 255, 255, 0.6);
	border-radius: 8px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
	cursor: pointer;
}

#overview .trip_title:hover {
	background-color: #7F7F7F;
}

#overview .d_trip_title {
	font-size: 22px;
	font-weight: bold;
}

#overview .d_trip_timeframe {
	font-size: 12px;
}

#overview form {
	margin-top:10px;
}

#overview textarea {
	width: 90%;
}

#ovd_content {
	display: grid;
	width: calc(100% - 20px);
	padding: 10px;
	grid-template-columns: 174px 1fr;
	row-gap: 20px;
	column-gap: 20px;
	justify-items: stretch;
	grid-template-areas:
		"triptitle triptitle"
		"days mapview"
		"days admin";
}

#overview_display .ov_trip_title {
	grid-area: triptitle;
	text-align: center;
	color: black;
	padding: 10px;
	background-color: rgba(255, 255, 255, 0.6);
	border-radius: 8px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
	font-size: 22px;
	font-weight: bold;
	cursor: pointer;
}

#overview_display .ov_trip_title:hover {
	background-color: #7F7F7F;
}

#overview_display .day_container {
	grid-area: days;
}

#overview_display .days {
	padding: 10px;
	border-color: #FFFFFF;
	border-style: solid;
	border-width: thin;
	border-radius: 8px;
}

.days .time {
	font-size: 10px;
	text-align: center;
	color: white;
}

.days .day_link {
	text-align: center;
	padding: 5px;
	margin: 10px;
	border-radius: 4px;
	background-color: rgba(255, 255, 255, 0.6);
	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
	cursor: pointer;
	display: grid;
	grid-template-columns: repeat(3, auto-fill);
	grid-template-rows: auto;
	column-gap: 2px;
	row-gap: 2px;
	align-items: baseline;
	grid-template-areas:
		"day date daycounter new"
		"city city city new";
}

.days .day_link:hover {
	background-color: #7F7F7F;
}

.days .day_link.current {
	background-color: #7F7F7F;
}

.days .p_day {
	margin: 0;
	font-size: 10px;
	grid-area: day;
	align-self: end;
}

.days .p_date {
	margin: 0;
	grid-area: date;
}

.days .p_daycounter {
	margin: 0;
	font-size: 10px;
	grid-area: daycounter;
	align-self: end;
}

.days .p_new {
	margin: 0;
	grid-area: new;
}

.days .p_city {
	margin: 0;
	font-size: 10px;
	grid-area: city;
}

.days_select select {
	appearance: none;
	width: 100%;
	border: 0;
	outline: 0;
	padding: 10px;
	background: url(../images/chevron-down.svg) no-repeat right 13px center / 22px,
	linear-gradient(to left, rgba(255, 255, 255, 0.3) 48px, rgba(255, 255, 255, 0.6) 48px);
	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
	border-radius: 2px;
	cursor: pointer;
	display: none;
}

.days_select select:focus {
	outline: none;
}

.days_select optgroup {
	font-size: 25px;
	background-color: #7F7F7F;
}

.days_select option {
	background-color: #7F7F7F;
}

#overview_display .days form {
	font-size: 10px;
	width: calc(100% - 20px);
}

#overview_display .days form input[type=text] {
	padding: 2px;
	width: 100px;
}

#overview_display .days form input[type=submit] {
	font-weight: bold;
	margin: auto;
	width: 50px;
	background-color: #FFFFFF;
	border: 1px solid #BBB000;
}

#overview_display .details {
	grid-area: mapview;
	width: 100%;
}

#overview_display .details_container {
	padding: 10px;
	width: calc(100% - 20px);
	border-color: #FFFFFF;
	border-style: solid;
	border-width: thin;
	border-radius: 8px;
	display: grid;
	grid-template-columns: 1fr;
}

#overview_display .details_date {
	width: 100%;
	text-align: center;
	color: white;
	font-weight: bold;
	font-size: 24px;
}

#overview_display .details_box {
	width:100%;
	margin-top: 10px;
	display: grid;
	grid-template-columns: minmax(min-content, 50px) 1fr 28px 28px 28px 28px;
	grid-template-areas:
		"count title up down edit delete"
		"text text text text text text"
		"photo photo photo photo photo photo"
		"admin admin admin admin admin admin";
}

#overview_display .details_box-header_count {
	grid-area: count;
	background-color: white;
	font-weight: bold;
	padding: 10px;
}

#overview_display .details_box-header_text {
	grid-area: title;
	background-color: white;
	font-weight: bolder;
	padding: 10px;
}

#overview_display .details_box-header_edit_up {
	grid-area: up;
	background-color: white;
	vertical-align: middle;
}

#overview_display .details_box-header_edit_down {
	grid-area: down;
	background-color: white;
}

#overview_display .details_box-header_edit_edit {
	grid-area: edit;
	background-color: white;
}

#overview_display .details_box-header_edit_delete {
	grid-area: delete;
	background-color: white;
}

#overview_display .details_box-content {
	grid-area: text;
	background-color: rgba(255, 255, 255, 0.6);
	padding: 10px;
	font-weight: 600;
}

#overview_display .details_box-content a {
	color: black;
}

#overview_display .details_box-content a:hover {
	color: white;
}

#overview_display .details_box-photo {
	grid-area: photo;
	background-color: rgba(255, 255, 255, 0.6);
	padding: 10px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	place-items: center;
}

#overview_display .details_box-edit {
	grid-area: admin;
	width: calc(100% - 20px);
}

#overview_display .details_box-edit-container-hidden {
	display: none;
}

#overview_display .details_box-edit-container-shown {
	display: block;
}

#overview_display .details_box-edit-container {
	display: grid;
	width: 100%;
	row-gap: 20px;
	align-items: center;
	grid-template-columns: repeat(4, min-content);
	grid-template-areas:
		"label_title title label_photo photo"
		"label_lat lat label_lng lng"
		"show show update update"
		"text text text text"
		"submit submit submit submit";
}

#overview_display .details_box-edit-container-label_title {
	grid-area: label_title;
}

#overview_display .details_box-edit-container-title {
	grid-area: title;
}

#overview_display .details_box-edit-container-label_photo {
	grid-area: label_photo;
}

#overview_display .details_box-edit-container-photo {
	grid-area: photo;
}

#overview_display .details_box-edit-container-label_lat {
	grid-area: label_lat;
}

#overview_display .details_box-edit-container-lat {
	grid-area: lat;
}

#overview_display .details_box-edit-container-label_lng {
	grid-area: label_lng;
}

#overview_display .details_box-edit-container-lng {
	grid-area: lng;
}

#overview_display .details_box-edit-container-show {
	grid-area: show;
}

#overview_display .details_box-edit-container-update {
	grid-area: update;
}

#overview_display .details_box-edit-container-text {
	grid-area: text;
	display: grid;
	grid-template-columns: 1fr min-content;
	grid-template-areas:
		"text photo"
		"text url"
		"text .";
}

#overview_display .details_box-edit-container-text-field {
	grid-area: text;
	width: 100%;
}

#overview_display .details_box-edit-container-text-field textarea {
	width: calc(100% - 10px);
}

#overview_display .details_box-edit-container-text-photo {
	grid-area: photo;
	background-color: white;
}

#overview_display .details_box-edit-container-text-url {
	grid-area: url;
	background-color: white;
}

#overview_display .details_box-edit-container-submit {
	grid-area: submit;
	justify-self: end;
}

#overview_display .details_add {
	margin-top: 10px;
	background-color: white;
	text-align: right;
}

#overview_display .comments_container {
	padding: 10px;
	width: calc(100% - 20px);
	border-color: white;
	border-style: solid;
	border-width: thin;
	border-radius: 8px;
}

#overview_display .comment_header {
	font-size: 22px;
	font-weight: bold;
	color: white;
}

#overview_display .comment_box {
	margin-top: 10px;
	display: grid;
	grid-template-columns: 5% 1fr;
	grid-template-areas:
		"header header"
		". comment";
	background-color: white;
}

#overview_display .comment_box-header {
	grid-area: header;
	font-size: 14px;
	background-color: #7F7F7F;
	padding: 10px 10px 0 10px;
	color: white;
	font-weight: bold;
}

#overview_display .comment_box-comment {
	grid-area: comment;
	padding: 0 10px 10px 10px;
}

#overview_display .comments_container form {
	background-color: #7F7F7F;
	width: calc(100% - 20px);
}

#overview_display .comment_add {
	display: grid;
	grid-template-columns: 1fr min-content;
	grid-template-areas:
		"comment comment"
		"smiley submit";
	width: 100%;
	gap: 20px;
}

#overview_display .comment_add-text {
	grid-area: comment;
}

#overview_display .comment_add-text textarea{
	width: 100%;
}

#overview_display .comment_add-smiley {
	grid-area: smiley;
}

unicode-emoji-picker {
	--emoji-font-family: "NotoColorEmoji", apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla, twemoji mozilla, segoe ui symbol, sans-serif;
	--min-width: 100% !important;
	--max-width: 100% !important;
	font-size: 20px;
}

unicode-emoji-picker::part(header) {
	display: block;
}

unicode-emoji-picker::part(group-filters) {
	grid-template-columns: repeat(auto-fit, minmax(24px, 1fr));
	grid-auto-flow: row;
}

unicode-emoji-picker .title-bar .title {
	font-size: 20px;
}

#overview_display .comment_add-submit {
	grid-area: submit;
	justify-self: end;
}

#overview_display .admin_detail {
	width: calc(100% - 20px);
	grid-area: admin;
}

#overview_display div.error {
	width: calc(100% - 20px);
	margin-top:10px;
}

#overview_display .detail_admin {
	grid-area: admin;
}

#overview_display form {
	width: calc (100% - 20px);
	margin-top: 10px;
}

#overview_display form .mass_change {
	border-spacing: 0;
}

#overview_display form .mass_change thead td {
	font-size: 10px;
	background-color: #000000;
	color: #FFFFFF;
	font-weight: bold;
	text-align: center;
}

#overview_display form .mass_change thead td.left {
	border-right: 1px solid #FFFFFF;
}

#overview_display form .mass_change thead td.middle {
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
}

#overview_display form .mass_change thead td.right {
	border-left: 1px solid #FFFFFF;
}

#overview_display form .mass_change td {
	border-bottom: 1px solid #FFFFFF;
	padding: 2px;
}

#overview_display form .mass_change .markLine td {
	background-color: #7F7F7F;
}

#overview_display #export_text {
	width: 100%;
}

#user_management a img {
	border: 0 none;
}

#user_management #content {
	background: #549885;
}

#user_management .table {
	overflow: auto;
}

#user_management .table table tr.content:hover {
	background: #7F7F7F;
}

#user_management .table table {
	font-size: 12px;
	border-width: 0px;
	border-collapse:collapse;
	border-style: hidden;
	table-layout:fixed
}

#user_management .table table tr td {
	padding: 3px;
	width: 130px;
}

#user_management .table table tr td.group {
	padding-bottom: 10px;
	background-color: #1641E9;
	text-align: left;
	font-weight: bold;
}

#user_management .table table tr td.group.space {
	border-left: 1px solid #FFFFFF;
}

#user_management .table table tr td.person {
	text-align: left;
}

#user_management .table table tr td.person.repeat {
	text-align: center;
	border-left: 1px solid #FFFFFF;
}

#user_management .table table tr td.person table tr td.user {
	text-align: left;
	font-weight: bold;
}

#user_management .table table tr td.person table tr td.email {
	text-align: left;
	font-size: 10px;
}

#user_management .table table tr td.person table tr td.fehler {
	text-align: right;
	font-size: 10px;
	font-weight: bold;
}

#user_management .table table tr td.person table tr td.datetime {
	text-align: right;
	font-size: 10px;
}

#user_management .table table tr td.person table tr td.news {
	width: 33%;
	text-align: center;
}

#user_management .table table tr td.person table tr td.resetLink {
	width: 33%;
	text-align: center;
}

#user_management .table table tr td.person table tr td.lockLink {
	width: 33%;
	text-align: center;
}

#user_management .table table tr td.trip {
	padding-bottom: 10px;
	border-left: 1px solid #FFFFFF;
	background: #000000;
	color: #FFFFFF;
	height: 100%;
}

#user_management .table table tr td.trip.repeat {
	text-align: center;
	vertical-align: middle;
}

#user_management .table table tr td.trip table {
	width: 100%;
	height: 100%;
}

#user_management .table table tr td.trip table tr td.title {
	font-size: 14px;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
}

#user_management .table table tr td.trip table tr td.set_links {
	text-align: right;
	vertical-align: bottom;
	background-color: white;
}

#user_management .table table tr td.link {
	text-align: center;
	border-left: 1px solid #FFFFFF;
	height: 100%;
}

#user_management .table table tr td.link table {
	width: 100%;
	height: 100%;
}

#user_management .table table tr td.link table tr td.value {
	text-align: center;
	vertical-align: middle;
}

#user_management .table table tr td.link table tr td.toggle {
	text-align: right;
	vertical-align: bottom;
}

#profile .layout {
	width: 100%;
}

#profile .layout .password {
	margin: 0px auto;
}

#profile .layout .email {
	margin: 0px auto;
}

#profile .layout .email td {
	vertical-align: top;
}

#contact {
	background-color: rgba(255, 255, 255, 0.6);
	border-radius: 8px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

#contact .header {
	font-weight: bold;
}

@media all and (max-width: 1200px) {
	#map {
		aspect-ratio: 3 / 2;
	}
}

@media all and (max-width: 900px) {
	#overview_display .details_box-edit-container {
		grid-template-columns: min-content 1fr;
		grid-template-areas:
			"label_title title"
			"label_photo photo"
			"label_lat lat"
			"label_lng lng"
			"show show"
			"update update"
			"text text"
			"submit submit";
	}
}

@media all and (max-width: 750px) {
	#overview_display .comment_add {
		grid-template-columns: 1fr;
		grid-template-areas:
		"comment"
		"submit"
		"smiley";
	}
}

@media all and (max-width: 600px) {
	#user_controls .navi {
		padding: 2px 2px 2px 2px;
	}

	#ov_content {
		grid-template-columns: repeat(2, 1fr);
	}

	#ovd_content {
		grid-template-columns: 1fr;
		grid-template-areas:
			"triptitle"
			"days"
			"mapview"
			"admin";
	}

	.days .days_list {
		display: none;
	}

	.days_select select {
		display: inline;
	}

	#map {
		aspect-ratio: 1 / 1;
	}
}

@media all and (max-width: 430px) {
	#overview_display .details_box-edit-container {
		grid-template-columns: 1fr;
		grid-template-areas:
			"label_title"
			"title"
			"label_photo"
			"photo"
			"label_lat"
			"lat"
			"label_lng"
			"lng"
			"show"
			"update"
			"text"
			"submit";
	}
}

@media all and (max-width: 360px) {
	#login_form {
		width: 100%;
	}

	#login_form form input[type=text],input[type=password] {
		width: calc(100% - 30px);
	}

	#user_controls .navi {
		font-size: 12px;
	}

	#ov_content {
		grid-template-columns: 1fr;
	}
}