/* Misc. fixes and resets */

img {
	display: block;				/* Inline by default */
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------------------- */

.temp-links {
	margin: 0.5em;
	font-size: 0.7rem;
}
.temp-links li {
	display: inline;
}
.temp-links li::before {
	content: ">";
}

.debug {
	outline: 1px solid #800;
}

/* ---------------------- */

:root {
}

html {
	font-family: sans-serif;
	font-size: 1.1em;
}

body {
	max-width: 120ch;
	margin: 0 auto;
}
body.fullscreen {
	height: 100vh;
	width: 100vw;
	overflow: hidden;
}


#leaflet {
	outline: 1px solid #800;
	height: 20rem;
}

#page-header {
	/* border: 2px solid #ccc; */
	background-color: #EEE;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
#page-header .logo {
	/* outline: 1px solid #800; */
	font-size: 3rem;
	font-weight: bold;
	color: #800;
	padding: 0;
	margin: 0;
}
#page-header > h1 {
	margin: 0;
}
#page-header > h1::before {
	content: "/";
	color: #888;
	font-size: 3rem;
	padding: 0 0.1em 0 0.2em;
}
#page-header .menu {
	/* outline: 1px solid #800; */
	margin: 0 0.5em 0 auto;
	display: flex;
	align-items: center;
}
#page-header .menu li {
	/* outline: 1px solid #080; */
	margin-left: 0.5em;
}

.avatar img {
	border-radius: 50%;
}
.avatar.positive img {
	border: 3px solid #080;
}
.avatar.neutral img {
	border: 3px solid #888;
}
.avatar.negative img {
	border: 3px solid #800;
}


.account-creation form {
	display: flex;
	flex-direction: column;
	max-width: 50ch;
}
.account-creation form label, .account-creation form button {
	margin-top: 1em;
}
.account-creation form .birthday {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
}
.account-creation form .birthday input {
	margin: 0 1em 0 0.5em;
}
.birth-day, .birth-month {
	width: 4ch;
}
.birth-year {
	width: 6ch;
}

.profile-header {
	/* border: 2px solid #080; */
	display: flex;
	align-items: flex-start;
	padding: 0;
	margin: 0.5em;
}
.container.chat header .profile-header .avatar img {
	height: 2.5rem;
}
.profile-header .details {
	display: flex;
	flex-direction: column;
	margin-left: 0.5em;
}
.profile-header h2 {
	/* outline: 2px solid #088; */
	font-size: 2rem;
	padding: 0;
	margin: 0;
}
.container.chat header .profile-header h2 {
	font-size: 1.5rem;
}
.profile-header .details ul {
	display: flex;
}1
.profile-header .details ul li {
	margin-right: 1em;
}
.profile-header .details ul li.location {
	padding-left: 1em;
	background-image: url(../img/noun_Location_3457088-trim.svg);
	background-size: contain;
	background-repeat: no-repeat;
}

.gallery {
	/* outline: 1px solid #800; */
	display: flex;
	flex-wrap: wrap;
}
.gallery li {
	margin-right: 0.3em;
}
#content-profile .details {
	background-color: #DDD;
	display: flex;
	flex-wrap: wrap;
}
.profile-secret {
	/* outline: 2px solid #800; */
}
.secret-content {
	outline: 1px solid #008;
}
.secret-tabs {
	margin: 0.5em;
	display: flex;
	flex-wrap: wrap;
}
.secret-tabs li {
	margin-right: 1em;
	cursor: pointer;
	font-size: 1.25rem;
	background-color: #CCC;
}
.secret-tabs li.active {
	background-color: #999;
}
.secret-content {
	display: none;
}
.secret-content.active {
	display: block;
}


#search-widget {
	/* outline: 1px solid #808; */
	/* background-color: #DDD; */
	border: 0.3em solid #DDD;
	margin: 0 0 1em 0;
	padding: 0.5em;
}
#search-widget.hide > form {
	display: none;
}
#search-widget h2 {
	margin: 0;
	padding: 0;
}
#search-widget legend {
	padding: 0 0.5em 0 0.5em;
}
#search-widget form > fieldset {
	border: 0;
}
#search-widget form > fieldset + fieldset {
	border-top: 2px solid #CCC;
}
#search-widget .profile-types {
	display: flex;
	flex-wrap: wrap;
}
#search-widget .profile-types label {
	margin-right: 1em;
}
#categories-select input[disabled] {
	outline: 1px solid #800;
}
#categories-select {
	/* outline: 1px solid #800; */
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(19ch, 1fr));
	gap: 0.2em;
}
#categories-select.hide > fieldset {
	display: none;
}
#categories-select fieldset {
	display: flex;
	flex-direction: column;
	/* flex: 0 1 18ch; */
}
#search-widget fieldset.age input {
	width: 5ch;
}
#search-widget .distance input {
	width: 7ch;
}
#search-widget .location {
	display: flex;
	flex-direction: column;
}
#other-location-lat, #other-location-lng {
	width: 5ch;
}
#location-map.fullscreen {
	background-color: #FFF;
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
}
#location-map.hide {
	display: none;
}
#leaflet-map {
	outline: 1px solid #CCC;
	height: 20rem;
}
#location-map.fullscreen #leaflet-map {
	height: 100%;
}
.geolocate-control, .fullscreen-control {
	padding: 0.2em;
	border: 0.1em solid #333;
}
.geolocate-control img, .fullscreen-control img {
	height: 1em;
}
	

#results h2 {
	margin: 0;
}
#results .filters {
	/* display: flex; */
	/* flex-wrap: wrap; */
	border-bottom: 3px solid #DDD;
	padding: 0 0 0.5em 0.5em;
	margin: 0 0.5em 0 0.5em;
}

#cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(25ch, 1fr));
	gap: 0.5em;
	padding: 0.5em;
}
.card {
	border: 2px solid #888;
	display: flex;
	flex-direction: column;
	flex: 1 1 25ch;
	margin: 0;
	gap: 0.5em;
}
.card img {
	width: 100%;
}
.card h2, .card h3 {
	margin: 0;
	padding: 0;
	font-size: 1.2rem;
}
.card .metadata {
	display: flex;
	align-items: center;
	/* justify-content: space-between; */
}
.card .metadata .looking-for {
	margin-left: auto;
}
.card .metadata .looking-for ul {
	display: flex;
}
.card .metadata .looking-for ul li {
	margin-left: 0.5em;
}
.card .location {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.card .location-name:before {
	display: inline-block;
	content: "";
	height: 0.9em;
	padding-right: 0.9em;
	background-image: url(../img/noun_Location_3457088-trim.svg);
	background-size: contain;
	background-repeat: no-repeat;
}
/* .card .location-name { */
/* 	padding-left: 1em; */
/* 	background-image: url(../img/noun_Location_3457088-trim.svg); */
/* 	background-size: contain; */
/* 	background-repeat: no-repeat; */
/* } */
.card .period-active img {
	height: 1.1em;
}
.card .categories {
	display: flex;
	flex-wrap: wrap;
}
.card .categories li {
	background-color: #ccc;
	margin-right: 0.5em;
}
.card .description {
	max-height: 8em;
	overflow: hidden;
	margin: 0;
}
.desires-manage .card .description {
	display: none;
}
.card .actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: auto 0 0 0;
	background-color: #ddd;
}
.card .actions li {
	padding: 0.5em;
	margin: 0;
}
@media (min-width: 100ch) {
	.container.search {
		display: flex;
		/* outline: 1px solid #080; */
	}
	#search-widget {
		margin-right: 1em;
		width: 30ch;
		/* padding-right: 1em; */
	}
	#search-widget fieldset {
		max-width: 100%;
	}
}

.desires-manage .options {
	display: flex;
	align-items: baseline;
	padding: 0 0.5em 0 0.5em;
}
.desires-manage .options .new-desire {
	padding-left: 1.3em;
	background-image: url(../img/noun_Plus_3457043-trim.svg);
	background-size: contain;
	background-repeat: no-repeat;
	margin-right: 2em;
}
.desires-manage .card.active .actions {
	background-color: #9D9;
}


.container.chat header {
	/* outline: 1px solid #080; */
	display: flex;
	align-items: center;
	border-bottom: 3px solid #DDD;
	padding: 0;
	margin: 0 0.5em 0 0.5em;
}
.container.chat header .profile-header {
	/* outline: 1px solid #800; */
}
.container.chat header .conversations-toggle img {
	height: 1.5rem;
}
.container.chat header .details-toggle {
	margin-left: auto;
}
.container.chat header .details-toggle img {
	height: 1.5rem;
}

.container.chat p.timestamp {
	font-size: 0.8em;
	color: #777;
}
#conversation-list {
	outline: 1px solid #800;
	background-color: #FFF;
	/* border: 0.3em solid #DDD; */
	margin: 0 0 1em 0;
	padding: 0.5em;
	/* min-width: 30ch; */
}
#conversation-list.hide {
	display: none;
}
#conversation-list li {
	/* background-color: #EEE; */
	display: flex;
	padding: 0.2em;
	margin: 0 0 0.5em 0;
}
#conversation-list li.active {
	/* border: 2px solid #088; */
	background-color: #EEE;
}
#conversation-list li.new-contact {
	border-right: 4px solid #F80;
}
#conversation-list li.new-msg {
	border-right: 4px solid #080;
}
#conversation-list .avatar img {
	border: 1px solid #999;
	border-radius: 50%;
}
#conversation-list .text p {
	margin: 0 0 0 0.2em;
	padding: 0;
}
#conversation-list .text p.username {
	font-weight: bold;
}

#messages {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
}
#messages .msg {
	border: solid 1px #DDD;
	margin: 0.5em;
	padding: 0.3em;
}
#messages .msg.incoming {
	align-self: flex-start;
	margin-right: 5em;
}
#messages .msg.outgoing {
	align-self: flex-end;
	margin-left: 5em;
}
#messages .msg.system {
	align-self: center;
	margin: 0 2em 0 2em;
}
#messages .msg p {
	margin: 0;
	padding: 0;
}

#contact-overview {
	/* outline: 1px solid #800; */
}
#contact-overview {
	outline: 1px solid #800;
	background-color: #DDD;
}
#contact-overview.hide {
	display: none;
}
#contact-overview .details {
	display: flex;
	margin: 0.5em 0.5em 1em 0;
	padding: 0;
}
#contact-overview .details li {
	margin-right: 1em;
}
#contact-overview .actions {
	margin: 0;
	padding: 0;
}
#private-notes {
	width: calc(100% - 2ch);
	height: 10em;
}

@media (min-width: 50ch) {
	.container.chat {
		display: grid;
		/* grid-template-columns: 1fr 22ch; */
		/* grid-template-areas: */
		/* 	"header header" */
		/* 	"messages details"; */
		grid-template-areas:
			"convos header details"
			"convos messages details";
	}
	.container.chat header {
		grid-area: header;
	}
	#conversation-list {
		grid-area: convos;
		min-width: 22ch
		max-width: 30ch;
	}
	#conversation {
		grid-area: messages;
	}
	#contact-overview {
		grid-area: details;
		min-width: 22ch;
		max-width: 30ch;
		border-left: 3px solid #DDD;
		padding-left: 0.5em;
		/* width: 22ch; */
	}
}


fieldset > legend.toggle {
	cursor: pointer;
}
fieldset > legend.toggle:before {
	/* outline: 1px solid #800; */
	content: "";
	display: inline-block;
	height: 0.9em;
	padding-right: 0.9em;
	background-image: url(../img/noun_chevron_933267-trim.svg);
	background-size: contain;
	background-repeat: no-repeat;
}
fieldset.hide > legend.toggle {
	/* color: #800; */
}
fieldset.hide > legend.toggle:before {
	/* outline: 1px solid #800; */
	content: "";
	display: inline-block;
	height: 0.9em;
	padding-right: 0.9em;
	background-image: url(../img/noun_chevron_933270-trim.svg);
	background-size: contain;
	background-repeat: no-repeat;
}