#follow_me {
	float: right;
}

.notes_counters {
	margin-bottom: 1em;
}
.notes_counters a {
	color: #555;
	text-decoration: none;
}
.follow_button {
	background-color: #e6eae8;
	border-radius: 10px;
	border: 1px solid #cad3cf;
	cursor: pointer;
	position: absolute;
	right: 0;
	max-width: 50%;
	padding: 0.35em 0.75em 0.20em 0.75em;
}
.follow_button summary {
	text-align: right;
}
.follow_button input {
	width: 75%;
}
.follow_button > summary {
	list-style: none;
}

.follow_button > summary::marker,
.follow_button > summary::-webkit-details-marker {
	display: none;
}

h1.note a {
	display: inline-block;
	text-decoration: none;
	vertical-align: text-top;
	margin-right: 1em;
	margin-top: -3px;
}

article.note {
	border: 1px solid #e0e0e0;
	margin-bottom: 1em;
	padding: 1em;
	padding-left: 80px;
	border-radius: 20px;
	/* cursor: pointer; */
}

article.note:hover {
	background-color: #f5f5f5;
}

.note_forwarded {
	font-size: 9pt;
	margin-left: -66px;
	margin-bottom: 0.5em;
	color: gray;
}

.note img.avatar {
	float: left;
	margin-left: -66px;
}
.note img.avatar.local {
	border-radius: 100% 100%;
}

.note .date,
.note .username {
	color: gray;
}

.note .realname {
	font-weight: bold;
}
.note .realname a {
	color: #555;
	text-decoration: none;
}
.note .realname a:hover {
	text-decoration: underline;
}

.note .username a {
	color: gray;
	text-decoration: none;
}

.note .date a {
	color: gray;
	text-decoration: none;
}
.note .date a:hover {
	text-decoration: underline;
}
.note .note_text {
	margin-top: 0.3em;
	word-break: break-word;
}

.note .note_text p {
	margin-bottom: 0;
}

.note .full_date {
	display: none;
}

.note .note_attachments {
	margin-top: 1em;
}
.note .note_attachment {
	display: inline;
}
.note .note_attachment img {
	object-fit: cover;
	/* for 4 or more */
	width: 141px;
	height: 141px;
}
.note .note_attachments_count_1 .note_attachment img {
	object-fit: contain;
	object-position: 0 0;
	max-width: 100%;
	max-height: 500px;
	width: 100%;
	height: 100%;
}
.note .note_attachments_count_2 .note_attachment img {
	width: 285px;
	height: 285px;
}
.note .note_attachments_count_3 .note_attachment img {
	width: 190px;
	height: 190px;
}
.note .note_attachment video {
	margin-left: 0;
	max-width: 100%;
	max-height: 500px;
	object-fit: contain;
	width: 100%;
}

.note_thread_indentation .note_thread_indentation {
	margin-left: 20px;
}

.note_vanity {
	margin-top: 1em;
	line-height: 1.1em;
}
.note_vanity_replies,
.note_vanity_likes,
.note_vanity_forwards {
	display: table-cell;
	width: 100px;
}
.note_vanity,
.note_vanity a,
.note_vanity button,
.note_forwarded a {
	color: #bbb;
	text-decoration: none;
}
img.icon {
	display: inline;
	padding-right: 0.2em;
	vertical-align: text-top;
	opacity: 0.35;
}
.note_vanity_likes img.icon {
	margin-top: -1px;
}

.note.dedicated .dash {
	display: none;
}
.note.dedicated .date {
	display: none;
}
.note.dedicated .username {
	display: block;
}
.note.dedicated .note_text {
	clear: both;
	display: block;
	font-size: 14pt;
	line-height: 1.3em;
	margin-left: -65px;
	margin-top: 1em;
}
.note.dedicated .full_date {
	display: block;
	margin-top: 1em;
	font-size: 0.75em;
}
.note.dedicated .full_date a {
	color: gray;
	text-decoration: none;
}
.note.dedicated .dash {
	display: none;
}
.note.dedicated .note_vanity {
	margin-left: -65px;
	font-size: 11pt;
}
.note.dedicated .note_vanity a {
	color: gray;
	margin-right: 1em;
}

.note_contact {
	clear: both;
	margin-bottom: 1.5em;
}
.note_contact img.avatar {
	float: left;
	padding-right: 1em;
}

.note_contact .realname {
	font-weight: bold;
	display: block;
}
.note_contact .realname a,
.note_contact .username a {
	color: #555;
	text-decoration: none;
}
.note_contact .realname a:hover {
	text-decoration: underline;
}


/* forms */
fieldset {
	border: 0;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
}

fieldset legend {
	font-weight: bold;
	padding-left: 0;
	margin-bottom: 0.5em;
}

input.link {
	background: none;
	border: none;
	cursor: pointer;
	font-weight: bold;
	margin: 0;
	padding: 0;
}

.field-group {
	line-height: 1em;
	margin-bottom: 0.5em;
	vertical-align: top;
}

.field-group label {
	display: inline-block;
	vertical-align: top;
	width: 140px;
}

.bold-labels .field-group label {
	font-weight: bold;
}

.help-inline {
	padding-left: 0.5em;
}

.field-group button,
.field-group input,
.field-group select,
.field-group textarea {
	width: 160px;
	vertical-align: top;
}
.field-group button,
.field-group input[type="submit"] {
	width: auto;
}

.field-group button.wide,
.field-group input.wide,
.field-group select.wide,
.field-group textarea.wide {
	min-width: 240px;
}

.field-group button.wide2,
.field-group input.wide2,
.field-group select.wide2,
.field-group textarea.wide2 {
	min-width: 320px;
}

.field-group button.wide3,
.field-group input.wide3,
.field-group select.wide3,
.field-group textarea.wide3 {
	min-width: 480px;
}

.with-errors input[type="text"],
.with-errors input[type="text"]:focus,
.with-errors input[type="email"],
.with-errors input[type="email"]:focus,
.with-errors input[type="password"],
.with-errors input[type="password"]:focus,
.with-errors textarea,
.with-errors select {
	border-color: #c43c35;
}
.with-errors .help-inline {
	color: #c43c35;
}

fieldset .error_hint {
	margin-left: 1em;
	color: #c43c35;
}

@media only screen and (max-width: 600px) {
	#follow_me {
		float: none;
		margin-bottom: 1em;
	}
}

@media (prefers-color-scheme: dark) {
	.follow_button {
		background-color: #555;
		border-color: #333;
	}
	.notes_counters a {
		color: #888;
	}
	article.note {
		border-color: #333;
	}
	article.note:hover {
		background-color: transparent;
	}
	.note .realname a {
		color: #888;
	}
	.note_vanity,
	.note_vanity a,
	.note_vanity button,
	.note_forwarded a {
		color: #555;
	}
	img.icon {
		opacity: 0.25;
		filter: invert(1);
	}
}


/* /browse */

.local-nav {
	margin-top: 1em;
	padding-bottom: 0.75em;
}
.local-nav a,
.local-nav button {
	text-decoration: none;
	color: #555;
	font-weight: bold;
}
.local-nav .bar {
	color: #ccc;
	vertical-align: bottom;
	padding-left: 1px;
	padding-right: 1px;
}
.local-nav .other-nav {
	float: right;
}
.local-nav form {
	display: inline;
}
.local-nav button {
	background: none;
	border: none;
	cursor: pointer;
	font-size: inherit;
	padding: 0;
}
.note_vanity form {
	display: inline;
}
.note_vanity button {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}
.note_vanity button:hover img.icon {
	opacity: 0.6;
}
.note_vanity .favorited img.icon,
.note_vanity .forwarded img.icon {
	opacity: 0.6;
}
.notif-group {
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	padding: 1em;
	margin-bottom: 0.75em;
}
.notif-group:hover {
	background-color: #f5f5f5;
}
.notif-type {
	font-size: 0.85em;
	color: #999;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.notif-actors {
	margin-top: 0.15em;
}
.notif-actors img.avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 0.25em;
}
.notif-actors a {
	color: #555;
	text-decoration: none;
	font-weight: bold;
}
.notif-actors a:hover {
	text-decoration: underline;
}
.notif-preview {
	color: #777;
	margin-top: 0.35em;
	font-size: 0.9em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.notif-preview a {
	color: #777;
	text-decoration: none;
}
.notif-preview a:hover {
	text-decoration: underline;
}
.notif-time {
	color: #bbb;
	font-size: 0.8em;
	margin-top: 0.25em;
}
.compose-form textarea {
	width: 100%;
	min-height: 150px;
	font-family: sans-serif;
	font-size: 11pt;
	line-height: 1.4em;
	padding: 0.75em;
	border: 1px solid #ccc;
	border-radius: 8px;
	box-sizing: border-box;
	resize: vertical;
}
.compose-form .attachment-slot {
	margin: 0.75em 0;
	padding: 0.75em;
	border: 1px dashed #ccc;
	border-radius: 8px;
}
.compose-form .attachment-slot label {
	font-size: 0.9em;
	color: #555;
}
.compose-form .attachment-slot input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	margin-top: 0.35em;
	padding: 0.3em 0.5em;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 0.9em;
}
.compose-form .attachment-preview {
	max-width: 200px;
	max-height: 150px;
	display: block;
	margin-top: 0.25em;
	border-radius: 4px;
}
.compose-form .attachment-alt {
	display: block;
	font-size: 0.85em;
	color: #777;
	margin-top: 0.25em;
}
.compose-form .compose-options {
	margin-top: 0.75em;
}
.compose-form input[type="submit"] {
	margin-top: 1em;
	margin-right: 2em;
	padding: 0.5em 2em;
	font-size: 11pt;
	cursor: pointer;
}
.compose-reply-quote {
	border-left: 3px solid #ccc;
	padding: 0.5em 0.75em;
	margin-bottom: 1em;
	color: #666;
	font-size: 0.9em;
}
.compose-reply-quote .reply-author {
	font-weight: bold;
	color: #555;
}
.error-msg {
	color: #c43c35;
	font-weight: bold;
	margin-bottom: 1em;
}
.search-form {
	margin-bottom: 1.5em;
}
.search-form input[type="text"] {
	width: 300px;
	padding: 0.4em 0.6em;
	font-size: 11pt;
	border: 1px solid #ccc;
	border-radius: 6px;
}
.search-form input[type="submit"] {
	padding: 0.4em 1.2em;
	font-size: 11pt;
	cursor: pointer;
}
.search-result {
	display: flex;
	align-items: flex-start;
	border: 1px solid #e0e0e0;
	border-radius: 10px;
	padding: 0.75em;
	margin-bottom: 0.5em;
}
.search-result:hover {
	background-color: #f5f5f5;
}
.search-result img.avatar {
	border-radius: 50%;
	margin-right: 0.75em;
	flex-shrink: 0;
}
.search-result-info {
	flex: 1;
	min-width: 0;
}
.search-result-info .realname {
	font-weight: bold;
	display: block;
}
.search-result-info .realname a {
	color: #555;
	text-decoration: none;
}
.search-result-info .realname a:hover {
	text-decoration: underline;
}
.search-result-info .username a {
	color: gray;
	text-decoration: none;
}
.search-result-about {
	color: #777;
	font-size: 0.9em;
	margin-top: 0.25em;
}
.search-result-action {
	flex-shrink: 0;
	margin-left: 0.75em;
	align-self: center;
}
.search-result-action form {
	display: inline;
}
.search-follow,
.search-unfollow {
	padding: 0.3em 1em;
	border-radius: 6px;
	cursor: pointer;
	font-size: 0.9em;
}
.search-follow {
	background: #e6eae8;
	border: 1px solid #cad3cf;
}
.search-follow:hover {
	background: #d8deda;
}
.search-unfollow {
	background: none;
	border: 1px solid #ccc;
	color: #777;
}
.search-unfollow:hover {
	border-color: #c43c35;
	color: #c43c35;
}
.search-label {
	color: #999;
	font-size: 0.9em;
}
@media (prefers-color-scheme: dark) {
	.local-nav {
		border-color: #333;
	}
	.local-nav a {
		color: #888;
	}
	.local-nav a.active {
		color: #ddd;
		border-color: #ddd;
	}
	.local-nav button {
		color: #666;
	}
	.note_vanity button:hover img.icon {
		opacity: 0.5;
	}
	.notif-group {
		border-color: #333;
	}
	.notif-group:hover {
		background-color: transparent;
	}
	.notif-actors a {
		color: #aaa;
	}
	.compose-form textarea {
		background: #1a1a1a;
		color: #ddd;
		border-color: #444;
	}
	.compose-form .attachment-slot {
		border-color: #444;
	}
	.compose-form .attachment-slot input[type="text"] {
		background: #1a1a1a;
		color: #ddd;
		border-color: #444;
	}
	.compose-reply-quote {
		border-color: #444;
		color: #999;
	}
	.search-form input[type="text"] {
		background: #1a1a1a;
		color: #ddd;
		border-color: #444;
	}
	.search-result {
		border-color: #333;
	}
	.search-result:hover {
		background-color: transparent;
	}
	.search-result-info .realname a {
		color: #aaa;
	}
	.search-follow {
		background: #333;
		border-color: #555;
		color: #ddd;
	}
	.search-follow:hover {
		background: #444;
	}
	.search-unfollow {
		border-color: #555;
		color: #888;
	}
}

@media only screen and (max-width: 600px) {
	.local-nav .other-nav {
		float: none;
	}
}