/* SPDX-License-Identifier: GPL-3.0 */

@media (prefers-color-scheme: dark) {
  body {
    background: #202124;
    color: lightgray;
  }

  #description {
    color: black;
  }

  select, input {
    background-color: lightgray;
    color: black;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background: white;
    color: black;
  }
}

body {
	text-align: center;
	margin: 0px;
}

a {
	color: inherit;
}

.page_title {
	display: block;
	font-weight: bold;
	font-size: 125%;
}

.main_views {
	padding-top: 2px;
	padding-bottom: 10px;
	display: block;
}

.main_view {
	padding-top: 2px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
}

.main_view_selected {
	font-weight: bold;
}

.summary_stats, .date_range, .event_comment {
	display: block;
	font-size: 80%;
	padding-top: 1px;
	padding-bottom: 1px;
}

.header_links, #tag_parents {
	display: block;
	font-size: 80%;
	padding-top: 2px;
	padding-bottom: 2px;
}

.header_link {
	padding: 2px;
	white-space: nowrap;
	display: inline-block;
	text-decoration: underline;
}

.media_group {
	display: block;
	padding-top: 5px;
	padding-bottom: 5px;
}

.media_group_title {
	text-align: center;
	font-size: 110%;
	font-weight: bold;
	padding-left: 10px;
	padding-bottom: 2px;
}

.media, .media_no_descr, .media_small, .media_medium, .media_dyn, .media_small_container, .media_small_container_2h, .media_medium_container, .media_medium_container_2h {
	display: inline-block;
	vertical-align: text-top;
}

.media {
	padding: 2px;
}

.media_no_descr {
	padding: 2px;
}

.media_dyn {
	padding: 2px;
}

.media_medium {
	padding: 2px;
}

.media_medium_container, .media_medium_container_2h, .media_small_container, .media_small_container_2h {
	padding: 0px;
	text-align: left;
}

.media_small {
	padding: 2px;
}

.media_thumb {
	display: block;
}

.media_title, .media_comment, .media_metadata {
	display: block;
	padding-left: 13px;
}

.media_comment {
	font-style: italic;
}

.media_title {
	font-weight: bold;
}

.media_comment {
	font-size: 80%;
}

.media_metadata {
	font-size: 80%;
	padding-top: 2px;
}

.stat {
	white-space: nowrap;
	padding-left: 8px;
	padding-right: 8px;
}

.media_stat {
	padding-left: 5px;
	padding-right: 5px;
}

.breadcrumbs {
	display: block;
	padding-top: 5px;
	padding-bottom: 5px;
}

.breadcrumb, .breadcrumb_inactive {
	padding: 7px;
	white-space: nowrap;
}

.breadcrumb_inactive {
	color: lightgrey;
}

.more_less {
	font-style: italic;
	text-decoration: underline;
	padding: 2px;
	cursor: pointer;
}

.clickable {
	cursor: pointer;
}

.generated_at {
	display: block;
	font-size: 70%;
	font-style: italic;
	padding-top: 10px;
}

.search_criterias, .search_criteria, #search_controls {
	display: block;
	padding-bottom: 5px;
}

.status {
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
	font-style: italic;
	font-size: 120%;
	padding: 10px;
}

#fullmedia_container {
	width: 100%;
	height: 100%;
}

#fullimage_background {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 2;
	background-color: black;
}

#fullimage_container {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 3;
}

#fullimage {
	width: 100%;
	height: 100%;
	object-fit: contain;
	image-orientation: from-image;
}

#qrcode {
	margin-left: auto;
	margin-right: auto;
	width: 300px;
	height: 300px;
}

#close {
	position: fixed;
	top: 3px;
	right: 10px;
	color: lightgray;
	font-size: 36px;
	font-weight: bold;
	text-decoration: none;
	padding: 5px;
	z-index: 5;
}

#close:hover {
	color: darkgray;
	cursor: pointer;
}

.qrcode {
	float: right;
}

#description {
	position: fixed;
	left: 50%;
	bottom: 15px;
	min-width: 360px;
	width: 40%;
	height: auto;
	background-color: lightgray;
	border-radius: 10px;
	z-index: 4;
	padding: 4px;
	transform: translate(-50%);
}

input.button {
	margin-top: 2px;
}