@charset "UTF-8";

html {
    scroll-behavior: smooth;
}

:target {
    scroll-margin-top: 100px;
}

body {
	text-rendering: optimizelegibility;
}

.loading, .loading a {
	cursor: wait !important;
}

.sticky_header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 10;
	background-color: rgba(240, 241, 242, 1);
}

.user_ctrl {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.user_ctrl > .ctrl {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}
.user_ctrl > .ctrl > .space {
	flex-grow: 3;
}
.user_ctrl > .ctrl {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}
.note{
	padding: 4px 4px;
}

.note_list > .view_day {
	background-image: linear-gradient(
	45deg,
	rgba(0, 0, 0, 0.5) 25%,
	transparent 25%,
	transparent 50%,
	rgba(0, 0, 0, 0.5) 50%,
	rgba(0, 0, 0, 0.5) 75%,
	transparent 75%,
	transparent
	);
	background-size: 1rem 1rem;
}
.note_list > .view_day > * {
	background: #f8f9fa !important;
}

.notectrl{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	font-size: 90%;
	color: #666;
	padding-top: 2px;
	padding-bottom: 4px;
}
.notectrl > .lock, .notectrl > .ctrl {
	flex-basis: 40px;
}
.notectrl > .ctrl > i {
	cursor: pointer;
}
.notectrl > .lock, .notectrl > .ctrl > .ph-bold ph-trash {
	margin-left:2px;
}
.notectrl > .info {
	flex-basis: auto;
	flex-grow: 1;
}
.notectrl > .info > a {
	margin-left: 8px;
}

.note:not(:last-child) {
	border-bottom: #ccc solid 1px;
}

.notebody, .postscript {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	padding-bottom: 2px;
}
.postscript > span:first-child, .postscript > strong:first-child {
	margin-left:50px;
}
.postscript > .add {
	flex-grow: 3;
}
.postscript > .original + span.add {
	margin-left:2px;
}

.icon {
	display: inline-block;
}
.icon > img, .note .attach .notebody img {
	max-width:48px;
	max-height:48px;
	margin-right:4px;
}

.mini_icon {
	display: inline-block;
	max-width:16px;
	max-height:16px;
	margin-right:4px;
}

.content {
	display: block;
	width: 100%;
	word-break: break-all;
	overflow-wrap: anywhere;
}

.content p {
	display: block;
	margin-bottom: 1lh;
	white-space: pre-wrap;
}

.content p:last-child {
	margin-bottom: 4px;
}

.content blockquote, .attach blockquote {
	padding-left: 4px;
	border-left: solid 4px var(--gray);
}

.content pre {
	max-width: 100%;
	overflow-x: auto;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.emoji{
	line-height: 1;
	display:inline-block;
	position: relative;
}
.emoji img{
	height: 1em;
	object-fit: contain;
	z-index: 1;
}
.emoji .front{
	position: absolute;
	left: 0;
	top: 0;
	display:inline-block;
	width: 1em;
	height: 1em;
	z-index: 4;
}
.emoji .front:hover {
	z-index: 3;
	cursor: none;
}
.emoji .front:hover + img {
	transform: scale(4);
	z-index: 2;
	cursor: none;
}

.note .poll {
	min-width: 250px;
}

.note video{
	max-width:250px;
}
.attach {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
}
.attach > div {
	margin:2px;
}
.note .attach > div {
	flex-grow: 1;
}
.note .attach img{
	max-width:250px;
	max-height:600px;
	cursor: zoom-in;
}
.note .attach iframe{
	max-width:100%;
}

.announce {
	padding: 2px;
	margin-right: 8px;
	color: #fff;
	background-color:#17BF63;
	border-radius: 2px;
}
.koresuki {
	padding: 2px;
	margin-right: 8px;
	color: #ff3030;
}
.sensitive .content {
	display: none;
}
.sensitive .attach {
	display: none;
}
.ph-bold ph-eye {
	cursor: pointer;
}

table.calendar {
	border-top:1px solid #000;
	border-left:1px solid #000;
	background-color: inherit transparent;
}
.calendar td, .calendar th {
	border-right:1px solid #000;
	border-bottom:1px solid #000;
	text-align: center;
	width:4rem;
	font-weight: normal;
}
.calendar .week_handle {
	border-top:1px solid #000;
	border-left:1px solid #000;
	border-right:0px;
	margin-top:-0.7px;
	width:2rem;
	position:absolute;
	left:2rem;
	z-index:-1;
}
.calendar:hover .week_handle {
	left:-1rem;
	z-index:0;
}

.calendar a {
	text-shadow: 
		#f8f9fa 2px 0px,  #f8f9fa -2px 0px,
		#f8f9fa 0px -2px, #f8f9fa 0px 2px,
		#f8f9fa 2px 2px , #f8f9fa -2px 2px,
		#f8f9fa 2px -2px, #f8f9fa -2px -2px,
		#f8f9fa 1px 2px,  #f8f9fa -1px 2px,
		#f8f9fa 1px -2px, #f8f9fa -1px -2px,
		#f8f9fa 2px 1px,  #f8f9fa -2px 1px,
		#f8f9fa 2px -1px, #f8f9fa -2px -1px;
}

.calendar td.cnt25 {
	background-color: #c6e48b;
}
.calendar td.cnt50 {
	background-color: #7bc96f;
}
.calendar td.cnt75 {
	background-color: #239a3b;
}
.calendar td.cnt100 {
	background-color: #196127;
}
.calendar .view_day {
	background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 75%, transparent);
	background-size: 1rem 1rem;
}

.invisible {
	visibility: visible !important;
}

#dialog-viewer .modal-dialog {
/*	max-width:80%;*/
	max-height:80%;
	height:80%;
}
#dialog-viewer .modal-content {
	height:100%;
}
#dialog-viewer .modal-body {
	display: flex;
	flex-direction: column;
}

#dialog-viewer .modal-body img,#dialog-viewer .modal-body video {
	width:auto;
	height:auto;
	max-width:100%;
	max-height:100%;
	position: absolute;
	margin: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

#dialog-viewer .modal-footer {
	justify-content:center;
}

.card-header .ph-crown {
	color:darkcyan;
}
.card-header .ph-trophy {
	color:goldenrod;
}
.card-header .ph-heart {
	color:lightcoral;
}
.dayguide {
	display: flex;
	justify-content: flex-start;
}
.dayguide > .info > .prev {
	flex-shrink: 100;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.dayguide > .info > .today {
	flex-shrink: 0;
}
.dayguide > .info > .next {
	flex-shrink: 100;
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
}
.dayguide > .info {
	flex-basis: auto;
	flex-grow: 1;
	display: flex;
	justify-content: flex-start;
}
.dayguide > .permalink {
	flex-basis: 40px;
	text-align: right;
}

.url_card {
	background-color: #e9ecef;
	border-radius: 0.3rem;
	display: flex;
	flex-wrap: wrap;
}
.url_image {
	float:left;
	flex-basis: 128px;
}
.url_image img {
	max-width:128px;
	max-height:128px;
}
.url_info_parent {
	flex-shrink: 10;
	display: flex;
	flex-direction :column;
}
.url_info {
	display: flex;
}
.url_info .url_redirect {
	flex-grow:10;
}
.invisible {
	font-size: 0;
	line-height: 0;
}
.url_long::after, a > .ellipsis::after {
	content: "...";
}
.url_description {
	max-height:3rem;
	overflow-y:hidden;
}
header {
	border-bottom:1px solid lightgray;
}

#shortcut_ctrl {
	display: flex;
	justify-content: space-around;
	min-width: 260px;
}

#scroll_ctrl {
	left: auto;
	z-index: auto;
}

.search_overlay {
	z-index:1000;
	position: fixed;
	top: 0;
	left: 0;
	background: #000;
	display: block;
	opacity: 0.2;
	width: 100%;
	height: 100%;
	transition: opacity 300ms;
}
#post_cards .search_overlay {
	position: absolute;
}

.other_search_service {
	width: 24px;
}
#top_card {
	margin-left: .5rem;
	height: auto;
	position: sticky;
	top: 0;
	align-self: flex-start;
	grid-area: top_card;
}
#top_card .card-header .acct {
	font-size: 90%;
}
.acct_title {
	word-break: break-all;
}
#post_cards {
	grid-area: post_cards;
}
#post_view {
	display: grid;
	grid-auto-rows: auto;
	grid-template-areas:
		"post_cards top_card";
	grid-template-columns: 2fr 1fr;
	grid-template-rows: auto;
}
#account_keywords {
	height:calc(calc(100vh / 5) * 3);
	overflow-y:scroll;
}

.user_header {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}
.notectrl .ctrl .dropdown-toggle,
.note_header .ctrl .dropdown-toggle,
.user_header .ctrl .dropdown-toggle {
	padding: 0;
}
.notectrl .ctrl .dropdown-toggle::after,
.note_header .ctrl .dropdown-toggle::after,
.user_header .ctrl .dropdown-toggle::after {
	display: none;
}
.notectrl .ctrl .dropdown-item button,
.note_header .ctrl .dropdown-item button,
.user_header .ctrl .dropdown-item button {
	margin-left: .5rem;
	padding: 0 .5rem;
	width: 4rem;
	float: inline-end;
}
#toast_copied, #toast_configured {
	position: absolute;
}
.tooltip-inner > .btn {
	cursor: pointer !important;
}

@media (max-width: 991.98px) {
	#top_card {
		margin-left: 0;
		position: relative;
	}
	#post_view {
		display: grid;
		grid-auto-rows: auto;
		grid-template-areas:
			"top_card"
			"post_cards";
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}
	#account_keywords {
		height:calc(calc(100vh / 5) * 1);
	}
}