.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;
}

.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_indicator {
	height: 2em;
	margin-top: -1em;
	border-left: 4px solid lightgray;
	margin-left: 38px;
}

.note_vanity {
    margin-top: 1em;
}
.note_vanity_replies,
.note_vanity_likes,
.note_vanity_forwards {
    display: table-cell;
    width: 100px;
}
.note_vanity,
.note_vanity a,
.note_vanity svg,
.note_forwarded a,
.note_forwarded svg {
    color: #bbb;
    fill: #bbb;
    text-decoration: none;
}
.note_vanity svg,
.note_forwarded svg {
    display: table-cell;
    height: 1.2em;
    width: 1.2em;
    padding-right: 0.2em;
    vertical-align: top;
}
.note_vanity_likes svg {
    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 {
    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: 2.5em;
	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 (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 svg,
	.note_forwarded a,
	.note_forwarded svg {
		fill: #555;
		color: #555;
	}
}