.plankton_input_group_field
{
	display: block;
	margin-bottom: 16px;
}

.plankton_input_group_field > label
{
	display: block;
	font-weight: bold;
}

.plankton_input_group_field > input[type="text"]
,
.plankton_input_group_field > textarea
,
.plankton_input_group_field > select
{
	width: 100%;
}

.plankton_input_group_field > textarea
{
	min-height: 60px;
}

.plankton_input_soft_setter:not(:checked) + .plankton_input_soft_core_wrapper
{
	display: none;
}

.plankton_input_group_field > label
{
	text-transform: capitalize;
}

.plankton_form_actions
{
	margin-top: 24px;
}

.plankton_form_actions > *
{
	margin-right: 8px;
	margin-top: 8px;
}
#overlay
{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: hsla(var(--hue), 0%, 0%, 0.75);
	z-index: 2;
	overflow: auto;
}

#overlay_content
{
	position: absolute;
	top: 50%;
	left: 50%;
	
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	
	padding: 32px;
	
	background-color: hsl(0, 0%, 12.5%);
	color: hsl(0, 0%, 100%);
}

#overlay:not(.overlay_active)
{
	display: none;
}
.kaptilo-widget-input_picture-img
{
	max-width: 60vw;
	max-height: 60vh;
}

.kaptilo-widget-sighting_list-entries
{
	padding: 0;
	margin: 0;
	list-style-type: none;
}

.kaptilo-widget-sighting_list-entry
{
	color: hsl(var(--hue), 0%, 100%);
	background-color: hsl(var(--hue), 0%, 37.5%);
	
	padding: 16px;
	margin: 16px 0;
	
	border-radius: 4px;
	
	cursor: pointer;
}

.kaptilo-widget-sighting_list-entry-datetime
{
}

.kaptilo-widget-sighting_list-entry-location
{
	margin-bottom: 8px;
	font-style: italic;
}

.kaptilo-widget-sighting_list-entry-removed
{
}

.kaptilo-widget-sighting_list-entry-removed::before
{
	content: "» ";
}

.kaptilo-widget-sighting_list-entry-comment:not(:empty)
{
	margin-top: 8px;
}

.kaptilo-widget-sighting_list-entry-comment:not(:empty)::before
{
	content: "-- ";	
}
.kaptilo-widget-subject_view
{
	color: hsl(var(--hue), 0%, 100%);
	background-color: hsl(var(--hue), 0%, 25%);
	
	padding: 16px;
	margin: 16px;
	
	border-radius: 4px;
	
}

.kaptilo-widget-subject_view-top
{
	cursor: pointer;
	
	display: flex;
	flex-direction: row;
}

.kaptilo-widget-subject_view-top-left > img
{
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.kaptilo-widget-subject_view-top-right > *
{
	margin-top: 4px;
}

.kaptilo-widget-subject_view-name
{
	font-weight: bold;
}

.kaptilo-widget-subject_view-description:not(:empty)
{
	margin-top: 16px;
	/*
	font-style: italic;
	 */
}

.kaptilo-widget-subject_view-sightinginfo:not(:empty)
{
	margin-top: 16px;
	font-style: italic;
}

.kaptilo-widget-subject_view-sightinginfo-count-label::before
{
	content: " ";
}

.kaptilo-widget-subject_view-sightinginfo-latest-label::after
{
	content: ": ";
}

.kaptilo-widget-subject_view-edit
{
	margin-top: 16px;
}

.kaptilo-widget-subject_view.collapsed .kaptilo-widget-subject_view-top
{
	flex-wrap: nowrap;
}

.kaptilo-widget-subject_view.collapsed .kaptilo-widget-subject_view-top-left
{
	flex-basis: 33%;
	flex-shrink: 0;
	flex-grow: 1;
	
	max-width: 120px;
	max-height: 120px;
	
	transition: all 0.25s ease;	
}

.kaptilo-widget-subject_view.collapsed .kaptilo-widget-subject_view-top-right
{
	flex-basis: 66%;
	flex-shrink: 1;
	flex-grow: 2;
	
	transition: all 0.25s ease;	
}

.kaptilo-widget-subject_view.collapsed .kaptilo-widget-subject_view-top-right > *
{
	margin-left: 16px;

	max-width: 66%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kaptilo-widget-subject_view.collapsed .kaptilo-widget-subject_view-sightinginfo
{
}

.kaptilo-widget-subject_view.collapsed .kaptilo-widget-subject_view-edit
{
	display: none;
}

.kaptilo-widget-subject_view.collapsed > .kaptilo-widget-subject_view-bottom
{
	max-height: 0;
	overflow: hidden;
	
	transition: all 0.25s ease;	
}

.kaptilo-widget-subject_view:not(.collapsed) .kaptilo-widget-subject_view-top-left
{
	flex-basis: 45%;
	flex-shrink: 1;
	flex-grow: 1;
	
	min-width: 240px;
	max-width: 360px;
	max-height: 360px;

	transition: all 0.25s ease;	
}

.kaptilo-widget-subject_view:not(.collapsed) .kaptilo-widget-subject_view-top
{
	flex-wrap: wrap;
}

.kaptilo-widget-subject_view:not(.collapsed) .kaptilo-widget-subject_view-top-right
{
	flex-basis: 45%;
	flex-shrink: 1;
	flex-grow: 1;
	
	margin-top: 16px;
}

.kaptilo-widget-subject_view:not(.collapsed) .kaptilo-widget-subject_view-top-right > *
{
	margin-left: 16px;
}

.kaptilo-widget-subject_view:not(.collapsed) .kaptilo-widget-subject_view-sightinginfo
{
	display: none;
}

.kaptilo-widget-subject_view.collapsed .kaptilo-widget-subject_view-edit
{
}

.kaptilo-widget-subject_view:not(.collapsed) > .kaptilo-widget-subject_view-bottom
{
	/*
	max-height: 80vh;
	overflow: auto;
	 */
	
	transition: all 0.25s ease;	
}

.kaptilo-widget-subject_view-sightings
{
	max-height: 50vh;
	overflow: auto;
}


.kaptilo-widget-subject_list
{
	width: 100%;
}

.kaptilo-widget-subject_list-search_term
{
	text-align: right;
	padding: 0 16px;
}

.kaptilo-widget-subject_list-add
{
	margin: 16px;
}

.kaptilo-widget-subject_list-entries
{
	/*
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	 */
	
	padding: 0;
	margin: 0;
	list-style-type: none;
	
	/*
	max-height: 75vh;
	overflow: auto;
	 */
}
.chronicle
{
}

.chronicle-info
{
	font-size: 125%;
	font-weight: bold;
}

.chronicle-entries
{
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.chronicle-entry
{
	border-top: 1px solid #000;
	
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

.chronicle-entry-left
{
	flex-shrink: 1;
	flex-grow: 1;
	flex-basis: 0;

	padding: 16px;
}

.chronicle-entry-right
{
	flex-shrink: 1;
	flex-grow: 3;
	flex-basis: 0;
	
	padding: 16px;
}

.chronicle-entry-right > *
{
	margin-bottom: 16px;
}

.chronicle-entry-subject
{
	font-weight: bold;
}

.chronicle-entry-picture
{
	max-width: 25vw;
}

.chronicle-entry-picture > img
{
	object-fit: contain;
	width: 100%;
}
:root
{
	--hue: 150;
}

html
{
	font-family: sans-serif;
}

@media screen
{
	html
	{
		background-color: hsl(var(--hue), 0%, 0%);
		color: hsl(var(--hue), 0%, 100%);
	}
}

@media print
{
	html
	{
		background-color: hsl(var(--hue), 0%, 100%);
		color: hsl(var(--hue), 0%, 0%);
	}
}

body
{
	max-width: 960px;
	margin: auto;
	padding: 16px;
}

@media screen
{
	body
	{
		background-color: hsl(var(--hue), 0%, 12.5%);
		color: hsl(var(--hue), 0%, 87.5%);
	}
}

@media print
{
	body
	{
		background-color: hsl(var(--hue), 0%, 87.5%);
		color: hsl(var(--hue), 0%, 12.5%);
	}
}

button
{
	text-transform: capitalize;
}

h1
{
	border-bottom: 2px solid hsl(var(--hue), 0%, 25%);
	padding-bottom: 8px;
}

@media print
{
	h1
	{
		display: none;
	}
}

main
{
	width: 100%;
}

.hidden
{
	display: none;
}

.datetime
{
	font-family: monospace;
	font-size: 125%;
}