Fix bug

Fix bug

@import "../../common";
@import "./i-settings";
// @import "../../../../../../bower_components/cropper/dist/cropper.min.css";

@header-background-color: #494e51;
@header-foreground-color: #d4d2d1;

/* UI
 * ---------------------------------------------------------------- */
.ui-modal-window-container,
.ui-modal-dialog-container {
	display: block;
	position: fixed;
	z-index: 1024;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	opacity: 0;
	overflow: auto;
}

.ui-modal-window {
	display: block;
	position: absolute;
	top: 7%;
	left: 0;
	right: 0;
	margin: 0 auto;
}

.ui-modal-dialog {
	display: block;
	box-sizing: border-box;
	position: absolute;
	top: 20%;
	left: 0;
	right: 0;
	margin: 0 auto 32px auto;
	padding: 32px 42px;
	max-width: 480px;
	background: #fff;

	*:not(i) {
		font-family: 'Proxima Nova Reg', "FOT-スーラ Pro M", 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', sans-serif;
	}

	> .title {
		margin: 1em 0;
		color: @themeColor;
		// color: #43A4EC;
		font-weight: bold;

		> i {
			margin-right: 0.5em;
		}
	}

	> .body {
		margin: 1em 0;
		color: #888;
	}

	> .buttons {
		> button {
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			display: inline-block;
			float: right;
			box-sizing: border-box;
			margin: 0;
			padding: 10px 10px;
			line-height: 1.1em;
			font-size: 1.1em;
			font-weight: normal;
			text-decoration: none;
			color: #888;
			background: transparent;
			outline: none;
			border: none;
			border-radius: 0;
			box-shadow: none;
			cursor: pointer;
			transition: color 0.1s ease;

			* {
				pointer-events: none;
			}

			i {
				margin: 0 0.375em;
			}

			&:hover {
				color: @themeColor;
			}

			&:active {
				color: darken(@themeColor, 10%);
				transition: color 0s ease;
			}
		}
	}
}

.misskey-keyboard-shortcuts {
	top: 32px;

	kbd {
		display: inline;
		margin: 0 4px;
		padding: 0 8px;
		color: #888;
		background: #f8f8f8;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	}

	dt {
		margin-top: 1em;

		&:after {
			content: ':';
		}
	}

	dd {
		margin-left: 2em;
	}
}

#misskey-post-form-back {
	display: none;
	position: fixed;
	z-index: 127;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	opacity: 0;
}

#misskey-post-form-container {
	display: none;
	position: fixed;
	top: 0;
	z-index: 1025;
	width: 100%;
	height: 100%;
}

#misskey-post-form {
	display: block;
	position: absolute;
	top: 15%;
	left: 0;
	right: 0;
	box-sizing: border-box;
	width: 100%;
	max-width: 552px;
	margin: auto;
	padding: 0;
	background: #fff;
	opacity: 0;

	*:not(i) {
		font-family: 'Proxima Nova Reg', "FOT-スーラ Pro M", 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', sans-serif;
	}

	> .close-button {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		width: 42px;
		height: 42px;
		color: #555;
		border: none;
		outline: none;
		background: transparent;
		cursor: pointer;

		&:hover {
			color: #333;
		}

		&:active {
			color: #000;
		}

		* {
			pointer-events: none;
		}
	}

	> #misskey-post-form-tabs {
		display: block;
		margin: 0;
		padding: 0;
		list-style: none;

		&:after {
			content: '';
			display: block;
			clear: both;
		}

		> li {
			user-select: none;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: default;
			display: block;
			float: left;
			margin: 0;
			padding: 12px 24px;
			color: #DAD1CC;
			cursor: pointer;
			overflow: hidden;
			transition: background 0.1s ease;

			&.active {
				background: #fff;
				color: @themeColor;

				&:hover {
					color: @themeColor;
				}
			}

			&:hover {
				color: #bAb1aC;
			}

			&:active {
				color: #7f7976;
			}

			> i {
				position: relative;
				top: 0;
				font-size: 1em;
				transition: top 0.1s ease;
			}
		}
	}

	> #misskey-post-form-tab-pages {
		padding: 4px 16px 0 16px;

		> form {

			&:after {
				content: '';
				display: block;
				clear: both;
			}

			textarea {
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				user-select: text;
				-moz-user-select: text;
				-webkit-user-select: text;
				-ms-user-select: text;
				box-sizing: border-box;
				width: 100%;
				min-width: 100%;
				max-width: 100%;
				height: 7em;
				min-height: 7em;
				vertical-align: bottom;
				margin: 0;
				padding: 8px 12px;
				outline: 0;
				border: none;
				border-radius: 0;
				font-size: 1em;
				transition: color 0.2s ease, box-shadow 0.2s ease;

				&:hover {
				}

				&:focus {
					color: darken(@themeColor, 20%);
				}
			}

			progress {
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				display: block;
				margin: 0;
				width: 100%;
				height: 8px;
				border: none;
				border-radius: 0;
				overflow: hidden;

				&::-webkit-progress-value {
					background-color: @themeColor;
				}

				&::-webkit-progress-bar {
					background-color: #fff;
				}

				&:not([value])::-webkit-progress-bar {
					background-image: url('/resources/desktop/common/images/indeter.gif');
				}
			}

			&#misskey-post-form-photo-tab-page {
				textarea {
					height: 5em;
					min-height: 5em;
				}

				input[type=file] {
					display: none;
				}

				.photos {
					display: block;
					margin: 0;
					padding: 0 8px;
					list-style: none;

					&:after {
						content: '';
						display: block;
						clear: both;
					}

					> li {
						display: block;
						position: relative;
						float: left;
						margin: 4px;
						padding: 0;
						width: 64px;
						height: 64px;
						background-color: #eee;
						background-repeat: no-repeat;
						background-position: center center;
						//background-size: contain;
						background-size: cover;
						cursor: move;

						&:hover {
							> .remove {
								display: block;
							}
						}

						> .remove {
							-webkit-appearance: none;
							-moz-appearance: none;
							appearance: none;
							display: none;
							position: absolute;
							right: -6px;
							top: -6px;
							margin: 0;
							padding: 0;
							background: transparent;
							outline: none;
							border: none;
							border-radius: 0;
							box-shadow: none;
							cursor: pointer;
						}
					}
				}

				.uploads {
					display: block;
					margin: 0;
					padding: 0;
					list-style: none;
				}

				.attach-from-local,
				.attach-from-album {
					-webkit-appearance: none;
					-moz-appearance: none;
					appearance: none;
					display: inline-block;
					box-sizing: border-box;
					margin: 0;
					padding: 12px 14px;
					width: 50%;
					line-height: 1em;
					font-size: 1em;
					font-weight: normal;
					text-decoration: none;
					color: #95856e;
					background: transparent;
					outline: none;
					border: none;
					border-radius: 0;
					box-shadow: none;
					cursor: pointer;
					transition: color 0.1s ease;

					* {
						pointer-events: none;
					}

					i {
						margin-right: 0.375em;
					}

					&:hover {
						color: @themeColor;
					}

					&:active {
						color: darken(@themeColor, 10%);
						transition: color 0s ease;
					}
				}
			}
		}
	}

	button.submit {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		display: block;
		float: right;
		box-sizing: border-box;
		margin: 8px 16px 16px 16px;
		padding: 10px 18px;
		line-height: 1em;
		font-size: 1em;
		font-weight: normal;
		text-decoration: none;
		color: #fff;
		background: @themeColor;
		outline: none;
		border: none;
		border-radius: 0;
		box-shadow: none;
		cursor: pointer;
		transition: color 0.1s ease;

		* {
			pointer-events: none;
		}

		p {
			display: inline;
			margin: 0;
		}

		i {
			margin-left: 0.375em;
		}

		&:hover {
			background: lighten(@themeColor, 10%);
		}

		&:active {
			background: darken(@themeColor, 10%);
			transition: background 0s ease;
		}

		&:focus {
			outline: solid 2px fade(@themeColor, 50%);
		}
	}
}

#misskey-i-settings-form {
	> main {
		.i-settings;
		padding: 16px;
	}

	margin: 0 auto;
	max-width: 770px;
}

#misskey-header {
	position: fixed;
	top: 0;
	z-index: 1024;
	width: 100%;
	//box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
	> .donate {
		margin: 0;
		padding: 4px 16px;
		font-size: 0.8em;
		color: #000;
		background: #cef1df;
	}

	> .env-development-info {
		margin: 0;
		padding: 4px 16px;
		font-size: 0.8em;
		color: #fff;
		background: rgba(0, 0, 0, 0.9);

		.go-production-channel {
			margin-left: 4px;

			i {
				margin-right: 2px;
			}
		}
	}

	> .info {
		display: block;
		width: 100%;
		margin: 0;
		padding: 2px 0;
		text-align: center;
		font-size: 0.8em;
		color: #000;
		background: orange;
	}

	> .main {
		//max-height: 3rem;
		margin: 0;
		padding: 0;
		background-color: @header-background-color;
		//background-image: url("/resources/common/images/misskey.dark.svg");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: auto 24px;
		//box-shadow: 0 2px 2px -2px rgba(0,0,0,0.5);
		//border-top: solid 3px @themeColor;
		//border-bottom: solid 3px rgba(0, 0, 0, 0.1);
		//box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
		background-clip: content-box;
		font-size: 0.9rem;

		&, * {
			user-select: none;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: default;
		}

		&:after {
			content: "";
			display: block;
			clear: both;
		}

		> .main-contents-container {
			width: 100%;
			max-width: 1300px;
			margin: 0 auto;

			> .left {
				float: left;
				height: 3rem;

				> nav {
					> .main-nav {
						display: inline-block;
						margin: 0;
						padding: 0;
						line-height: 3rem;
						vertical-align: top;

						> .misskey {
							-webkit-appearance: none;
							-moz-appearance: none;
							appearance: none;
							display: none;
							vertical-align: top;
							margin: 0 10px;
							padding: 0;
							line-height: 3rem;
							font-size: 1.5em;
							color: rgba(0, 0, 0, 0.5);
							border: none;
							outline: none;
							background: transparent;
							transition: all 0.2s ease;

							&:hover {
								color: @themeColor;
							}
						}

						> ul {
							display: inline-block;
							margin: 0;
							padding: 0;
							vertical-align: top;
							line-height: 3rem;
							list-style: none;

							> li {
								display: inline-block;
								vertical-align: top;
								height: 48px;
								line-height: 48px;
								background-clip: padding-box !important;

								&.active {
									background: @themeColor;

									> a {
										color: contrast(@themeColor, #000, #fff, 70%) !important;
										border-bottom: none !important;

										&:hover {
											border-bottom: none !important;
										}
									}
								}

								> a {
									display: inline-block;
									box-sizing: border-box;
									z-index: 1;
									height: 100%;
									padding: 0 24px;
									font-size: 1em;
									font-variant: small-caps;
									color: @header-foreground-color;
									text-decoration: none;
									border-bottom: solid 0px rgba(255, 255, 255, 0.3);
									transition: all 0.1s linear;

									* {
										pointer-events: none;
									}

									&:hover {
										color: @themeColor;
										border-bottom: solid 4px rgba(255, 255, 255, 0.3);
									}

									&:active {
										color: darken(@themeColor, 10%);
									}

									> i {
										margin-right: 8px;
									}

									> p {
										display: inline;
										margin: 0;
									}

									> .unread-count {
										display: inline;
										margin-left: 8px;
										padding: 2px 4px;
										font-size: 0.8em;
										color: contrast(@themeColor, #000, #fff, 70%);
										background: @themeColor;
										border-radius: 2px;
									}
								}
							}
						}
					}

					> .misskey-menu {
						display: inline-block;
						vertical-align: top;

						> .dropdown {
							display: inline-block;
							position: relative;
							overflow: visible;
							float: right;

							&[data-active='true'] {
								background: #232221;

								> .dropdown-header {
								}

								> .dropdown-content {
									visibility: visible;
								}
							}

							> .dropdown-header {
								cursor: pointer;

								* {
									cursor: pointer;
								}

								&:hover {
									background: rgba(0, 0, 0, 0.1);

									> p > i {
										color: #fff;
									}
								}

								&:active {
									background: rgba(0, 0, 0, 0.2);

									> p > i {
										color: #fff;
									}
								}

								&:after {
									content: "";
									display: block;
									clear: both;
								}

								> p {
									display: block;
									margin: 0 16px;
									line-height: 48px;

									> i {
										color: @header-foreground-color;
									}
								}
							}

							> .dropdown-content {
								visibility: hidden;
								display: block;
								position: absolute;
								top: auto;
								left: 0;
								z-index: 3;
								width: 270px;
								margin: 0;
								padding: 0;
								background: #232221;

								> ul {
									margin: 0;
									padding: 0;
									list-style: none;
									font-size: 1em;
									border-bottom: solid 1px #1b1b1a;

									&:last-child {
										border-bottom: none;
									}

									> li {
										display: inline-block;
										width: 100%;

										> a {
											display: inline-block;
											z-index: 1;
											box-sizing: border-box;
											vertical-align: top;
											width: 100%;
											padding: 12px 20px;
											text-decoration: none;
											color: @header-foreground-color;
											// background-image: url("/resources/common/images/arrow-white.svg");
											background-repeat: no-repeat;
											background-position: calc(100% - 8px) center;
											transition: none;

											&:hover {
												color: #fff;
												background-color: @themeColor;
											}

											&:active {
												color: #fff;
												background-color: darken(@themeColor, 10%);
											}

											> i {
												width: 2em;
												text-align: center;
											}
										}
									}
								}
							}
						}
					}
				}
			}

			> .right {
				float: right;
				height: 48px;

				> .search {
					display: inline-block;
					position: relative;
					vertical-align: top;

					> input {
						-webkit-appearance: none;
						-moz-appearance: none;
						appearance: none;
						user-select: text;
						-moz-user-select: text;
						-webkit-user-select: text;
						-ms-user-select: text;
						cursor: auto;
						box-sizing: border-box;
						margin: 0;
						padding: 6px 18px;
						width: 14em;
						height: 48px;
						font-size: 1em;
						line-height: ~"calc(48px - 12px)";
						color: #fff;
						background: transparent;
						outline: none;
						//border: solid 1px #ddd;
						border: none;
						border-radius: 0;
						box-shadow: none;
						transition: color 0.5s ease, border 0.5s ease;
						font-family: FontAwesome, 'Helvetica','Arial','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Meiryo UI','Meiryo, メイリオ','sans-serif';

						&:hover {
							background: rgba(0, 0, 0, 0.1);
						}

						&:focus {
							color: @themeColor;
							background: rgba(0, 0, 0, 0.2);
						}

						&[data-active='true'] {
							background: #111111;
						}

						&::-webkit-input-placeholder,
						&:-ms-input-placeholder,
						&:-moz-placeholder {
							color: @header-foreground-color;
						}
					}

					> .result {
						display: block;
						position: absolute;
						top: auto;
						right: 0;
						z-index: 3;
						width: 340px;
						margin: 0;
						padding: 0;
						background: #111111;

						> ol.users {
							margin: 0;
							padding: 0;
							list-style: none;

							li {
								a {
									display: inline-block;
									z-index: 1;
									box-sizing: border-box;
									width: 100%;
									padding: 8px 22px;
									vertical-align: top;
									white-space: nowrap;
									overflow: hidden;
									color: @header-foreground-color;
									transition: none;

									&:hover {
										color: #fff;
										background: @themeColor;

										.name {
											color: #fff;
										}

										.screen-name {
											color: #fff;
										}
									}

									&:active {
										color: #fff;
										background: darken(@themeColor, 10%);

										.name {
											color: #fff;
										}

										.screen-name {
											color: #fff;
										}
									}

									.avatar {
										vertical-align: middle;
										min-width: 32px;
										min-height: 32px;
										max-width: 32px;
										max-height: 32px;
										margin: 0 8px 0 0;
										border-radius: 6px;
									}

									.name {
										margin: 0 8px 0 0;
										/*font-weight: bold;*/
										font-weight: normal;
										color: rgba(255, 255, 255, 0.8);
									}

									.screen-name {
										font-weight: normal;
										color: rgba(255, 255, 255, 0.3);
									}
								}
							}
						}
					}
				}
				/*
				> .notification {
					display: inline-block;
					vertical-align: top;
					height: 100%;

					> .dropdown {
						display: inline-block;
						position: relative;
						overflow: visible;
						clear: both;
						float: right;
						height: 100%;

						&:hover {
							> .i {
								background: #eee;
							}

							> .dropdownContainer {
								visibility: visible;
								opacity: 1;
								transform: scale(1);
								transition: opacity 0.1s linear;
							}
						}

						> .i {
							display: inline-block;
							box-sizing: border-box;
							min-width: 48px;
							height: 100%;
							padding: 0 8px;
							text-align: center;

							> i {
								display: inline-block;
								font-size: 1.2em;
								line-height: 48px;
								color: rgba(0,0,0,0.5);
							}
						}

						> .dropdownContainer {
							visibility: hidden;
							opacity: 0;
							display: block;
							position: absolute;
							top: ~"calc(48px + 16px)";
							right: -8px;
							z-index: 3;
							margin: 0;
							padding: 16px;
							background: #fff;
							box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
							transform: scale(0.9);
							transition: visibility 0s linear 0.5s, opacity 0.1s linear 0.4s, transform 0.2s ease-out 0.4s;

							&:before {
								content: "";
								display: block;
								position: absolute;
								top: -32px;
								right: 16px;
								width: 0;
								height: 0;
								border-top: solid 16px transparent;
								border-right: solid 16px transparent;
								border-bottom: solid 16px #fff;
								border-left: solid 16px transparent;
							}

							> .allDeleteButton {
								-webkit-appearance: none;
								-moz-appearance: none;
								appearance: none;
								display: block;
								position: absolute;
								top: 0;
								left: 0;
								z-index: 1;
								margin: 0;
								padding: 0;
								cursor: pointer;
								outline: none;
								border: none;
								border-radius: 0;
								box-shadow: none;
								background: transparent;

								&:hover {
									background: @themeColor;
								}

								&:active {
									background: darken(@themeColor, 10%);
								}

								> i {
									padding: 8px;
									font-size: 1rem;
									cursor: pointer;
									color: rgba(0, 0, 0, 0.5);
								}
							}

							> .dropdownContent {
								box-sizing: border-box;
								width: 350px;
								height: 450px;
								overflow-x: auto;
								overflow-y: scroll;
								font-size: 1rem;

								> .empty {
									display: inline-block;
									box-sizing: border-box;
									width: 100%;
									margin: 0;
									padding: 24px;
									text-align: center;
									color: rgba(0, 0, 0, 0.5);
								}

								> ol {
									margin: 0;
									padding: 0;
									list-style: none;
									font-size: 1.2em;

									> li {
										display: block;
										position: relative;
										box-sizing: border-box;
										width: 100%;
										padding: 24px 16px;
										background: #fff;
										border-bottom: solid 1px #eee;

										&:hover {
											> .deleteButton {
												display: block;
											}
										}

										> time {
											position: absolute;
											top: 0;
											left: 0;
											padding: 8px;
											font-size: 0.5em;
											color: rgba(0, 0, 0, 0.5);
										}

										> .appName {
											position: absolute;
											bottom: 0;
											right: 0;
											padding: 8px;
											font-size: 0.5em;
											color: rgba(0, 0, 0, 0.5);
										}

										> .deleteButton {
											-webkit-appearance: none;
											-moz-appearance: none;
											appearance: none;
											display: none;
											position: absolute;
											top: 6px;
											right: 6px;
											margin: 0;
											padding: 0;
											cursor: pointer;
											outline: none;
											border: none;
											border-radius: 0;
											box-shadow: none;
											background: transparent;

											> img {
												vertical-align: bottom;
												width: 16px;
												height: 16px;
												cursor: pointer;
											}
										}

										> .content {
											font-size: 0.8em;
										}
									}
								}
							}
						}
					}
				}
				*/
				> .account {
					display: inline-block;
					vertical-align: top;

					> .dropdown {
						display: inline-block;
						position: relative;
						overflow: visible;
						clear: both;
						float: right;

						&[data-active='true'] {
							background: #232221;

							> .dropdown-header {
								> .avatar {
									filter: saturate(200%);
									-webkit-filter: saturate(200%);
									-moz-filter: saturate(200%);
									-o-filter: saturate(200%);
									-ms-filter: saturate(200%);
								}
							}

							> .dropdown-content {
								visibility: visible;
							}
						}

						> .dropdown-header {
							cursor: pointer;

							* {
								cursor: pointer;
							}

							&:hover {
								background: rgba(0, 0, 0, 0.1);

								> .screen-name {
									color: #fff;
								}

								> .avatar {
									filter: saturate(150%);
									-webkit-filter: saturate(150%);
									-moz-filter: saturate(150%);
									-o-filter: saturate(150%);
									-ms-filter: saturate(150%);
								}
							}

							&:active {
								background: rgba(0, 0, 0, 0.2);

								> .screen-name {
									color: #fff;
								}

								> .avatar {
									filter: saturate(200%);
									-webkit-filter: saturate(200%);
									-moz-filter: saturate(200%);
									-o-filter: saturate(200%);
									-ms-filter: saturate(200%);
								}
							}

							&:after {
								content: "";
								display: block;
								clear: both;
							}

							> .screen-name {
								display: block;
								float: left;
								margin: 0 12px 0 16px;
								max-width: 16em;
								line-height: 48px;
								font-weight: bold;
								text-decoration: none;
								color: @header-foreground-color;

								i {
									margin-left: 8px;
								}
							}

							> .avatar {
								display: block;
								float: left;
								box-sizing: border-box;
								min-width: 32px;
								max-width: 32px;
								min-height: 32px;
								max-height: 32px;
								margin: 8px 8px 8px 0;
								border-radius: 4px;
							}
						}

						> .dropdown-content {
							visibility: hidden;
							display: block;
							position: absolute;
							top: auto;
							right: 0;
							z-index: 3;
							width: 270px;
							margin: 0;
							padding: 0;
							background: #232221;

							> ul {
								margin: 0;
								padding: 0;
								list-style: none;
								font-size: 1em;
								border-bottom: solid 1px #1b1b1a;

								&:last-child {
									border-bottom: none;
								}

								> li {
									display: inline-block;
									width: 100%;

									> a {
										display: inline-block;
										z-index: 1;
										box-sizing: border-box;
										vertical-align: top;
										width: 100%;
										padding: 12px 20px;
										text-decoration: none;
										color: @header-foreground-color;
										// background-image: url("/resources/common/images/arrow-white.svg");
										background-repeat: no-repeat;
										background-position: calc(100% - 8px) center;
										transition: none;

										&:hover {
											color: #fff;
											background-color: @themeColor;
										}

										&:active {
											color: #fff;
											background-color: darken(@themeColor, 10%);
										}

										> i {
											width: 2em;
											text-align: center;
										}
									}
								}
							}
						}
					}
				}

				> .notifications {
					display: inline-block;
					vertical-align: top;

					> .dropdown {
						display: inline-block;
						position: relative;
						overflow: visible;
						clear: both;

						&[data-active='true'] {
							background: #111111;

							> .dropdown-content {
								visibility: visible;
							}
						}

						> .dropdown-header {
							cursor: pointer;

							* {
								cursor: pointer;
							}

							&:hover {
								background: rgba(0, 0, 0, 0.1);

								> p > i {
									color: #fff;
								}
							}

							&:active {
								background: rgba(0, 0, 0, 0.2);

								> p > i {
									color: #fff;
								}
							}

							&:after {
								content: "";
								display: block;
								clear: both;
							}

							> p {
								display: block;
								margin: 0 16px;
								line-height: 48px;

								> i {
									color: @header-foreground-color;
								}

								> .unread-count {
									color: contrast(@themeColor, #000, #fff, 70%) !important;
									display: inline-block;
									position: relative;
									z-index: 1;
									padding: 1px 2px;
									margin-right: -1em;
									margin-left: -0.5em;
									vertical-align: super;
									font-size: 0.7em;
									line-height: 1em;
									background: @themeColor;
									border-radius: 2px;
								}
							}
						}

						> .dropdown-content {
							visibility: hidden;
							display: block;
							position: absolute;
							top: auto;
							right: 0;
							z-index: 3;
							min-width: 300px;
							width: 300px;
							margin: 0;
							padding: 0;
							background: #111111;

							> .nav {
								display: none;
								height: 32px;
								position: fixed;
								top: inherit;
								left: inherit;
								width: 300px;
								z-index: 1;
								color: #fff;
								background: #111;
								border-bottom: solid 1px #232323;

								&:after {
									content: "";
									display: block;
									clear: both;
								}

								.filter-type {
									-webkit-appearance: none;
									-moz-appearance: none;
									appearance: none;
									display: block;
									float: left;
									box-sizing: border-box;
									margin: 0;
									padding: 0 8px;
									height: 32px;
									color: #fff;
									border: none;
									border-radius: 0;
									background: transparent;
									transition: border 0.1s ease;

									&:hover {
										background: rgba(255, 255, 255, 0.1);
									}

									option {
										background: #000;
									}
								}

								.delete-all-button {
									-webkit-appearance: none;
									-moz-appearance: none;
									appearance: none;
									display: block;
									float: right;
									box-sizing: border-box;
									margin: 0;
									padding: 0;
									width: 32px;
									height: 32px;
									color: #fff;
									border: none;
									outline: none;
									background: transparent;
									cursor: pointer;

									&:hover {
										background: rgba(255, 255, 255, 0.1);
									}

									&:active {
										background: rgba(255, 255, 255, 0.2);
									}

									* {
										pointer-events: none;
									}
								}
							}

							> .main {
								position: relative;
								min-height: 128px;
								max-height: 512px;
								overflow: auto;

								> .loading {
									display: block;
									position: absolute;
									top: 0;
									right: 0;
									bottom: 0;
									left: 0;
									margin: auto;
								}

								> .notification-empty {
									display: block;
									box-sizing: border-box;
									margin: 0;
									padding: 32px 16px;
									text-align: center;
									color: rgba(255, 255, 255, 0.7);
								}

								> .notifications {
									display: block;
									margin: 0;
									padding: 0;
									list-style: none;

									> .notification {
										display: block;
										position: relative;
										margin: 0;
										padding: 16px;
										font-size: 0.9em;
										color: #fff;
										border-bottom: solid 1px rgba(0, 0, 0, 0.2);
										transform-origin: center bottom;
										transform: perspective(4096px);
										opacity: 1;

										&:last-child {
											border-bottom: none;
										}

										&:after {
											content: "";
											display: block;
											clear: both;
										}

										> time {
											display: inline;
											position: absolute;
											top: 16px;
											right: 12px;
											vertical-align: top;
											color: rgba(255, 255, 255, 0.5);
											font-size: small;
										}

										> .main {
											word-wrap: break-word;
										}

										&.application {
											.icon-anchor {
												img {
													float: left;
													min-width: 36px;
													min-height: 36px;
													max-width: 36px;
													max-height: 36px;
													border-radius: 6px;
												}
											}

											.text {
												float: right;
												box-sizing: border-box;
												width: ~"calc(100% - 36px)";
												padding-left: 8px;

												p {
													margin: 0;

													i {
														margin-right: 4px;
														color: #55ACEE;
													}
												}
											}
										}

										&.install-app {
											.icon-anchor {
												img {
													float: left;
													min-width: 36px;
													min-height: 36px;
													max-width: 36px;
													max-height: 36px;
													border-radius: 6px;
												}
											}

											.text {
												float: right;
												box-sizing: border-box;
												width: ~"calc(100% - 36px)";
												padding-left: 8px;

												p {
													margin: 0;

													i {
														margin-right: 4px;
														color: #55ACEE;
													}
												}
											}
										}

										&.uninstall-app {
											.icon-anchor {
												img {
													float: left;
													min-width: 36px;
													min-height: 36px;
													max-width: 36px;
													max-height: 36px;
													border-radius: 6px;
												}
											}

											.text {
												float: right;
												box-sizing: border-box;
												width: ~"calc(100% - 36px)";
												padding-left: 8px;

												p {
													margin: 0;

													i {
														margin-right: 4px;
														color: #FF2604;
													}
												}
											}
										}

										&.follow {
											.avatar-anchor {
												img {
													float: left;
													min-width: 36px;
													min-height: 36px;
													max-width: 36px;
													max-height: 36px;
													border-radius: 6px;
												}
											}

											.text {
												float: right;
												box-sizing: border-box;
												width: ~"calc(100% - 36px)";
												padding-left: 8px;

												p {
													margin: 0;

													i {
														margin-right: 4px;
														color: #55ACEE;
													}
												}
											}
										}

										&.status-favorite, &.status-repost {
											.avatar-anchor {
												img {
													float: left;
													min-width: 36px;
													min-height: 36px;
													max-width: 36px;
													max-height: 36px;
													border-radius: 6px;
												}
											}

											.text {
												float: right;
												box-sizing: border-box;
												width: ~"calc(100% - 36px)";
												padding-left: 8px;

												p {
													margin: 0;

													i {
														margin-right: 4px;
													}
												}

												.status-preview {
													color: #fff;

													&:before {
														content: "\f10d";
														font-family: FontAwesome;
														font-size: 1em;
														font-weight: normal;
														font-style: normal;
														display: inline-block;
														margin-right: 3px;
													}

													&:after {
														content: "\f10e";
														font-family: FontAwesome;
														font-size: 1em;
														font-weight: normal;
														font-style: normal;
														display: inline-block;
														margin-left: 3px;
													}
												}
											}
										}

										&.status-favorite {
											.text p i {
												color: #FFAC33;
											}
										}

										&.status-repost {
											.text p i {
												color: #77B255;
											}
										}

										&.bbs-thread-post {
											.avatar-anchor {
												img {
													float: left;
													min-width: 36px;
													min-height: 36px;
													max-width: 36px;
													max-height: 36px;
													border-radius: 6px;
												}
											}

											.text {
												float: right;
												box-sizing: border-box;
												width: ~"calc(100% - 36px)";
												padding-left: 8px;

												p {
													margin: 0;

													i {
														margin-right: 4px;
													}
												}

												.post-preview {
													color: #fff;

													&:before {
														content: "\f10d";
														font-family: FontAwesome;
														font-size: 1em;
														font-weight: normal;
														font-style: normal;
														display: inline-block;
														margin-right: 3px;
													}

													&:after {
														content: "\f10e";
														font-family: FontAwesome;
														font-size: 1em;
														font-weight: normal;
														font-style: normal;
														display: inline-block;
														margin-left: 3px;
													}
												}
											}
										}
									}
								}
							}
						}
					}
				}

				> .post {
					display: inline-block;
					box-sizing: border-box;
					padding: 8px;
					height: 100%;
					vertical-align: top;

					> button {
						-webkit-appearance: none;
						-moz-appearance: none;
						appearance: none;
						display: inline-block;
						box-sizing: border-box;
						margin: 0;
						padding: 0 10px;
						height: 100%;
						font-size: 1.2em;
						font-weight: normal;
						text-decoration: none;
						color: contrast(@themeColor, #000, #fff, 70%);
						background: @themeColor !important;
						outline: none;
						border: none;
						border-radius: 2px;
						box-shadow: none;
						transition: background 0.1s ease;

						&, * {
							cursor: pointer;
						}

						&:hover {
							background: lighten(@themeColor, 10%) !important;
						}

						&:active {
							background: darken(@themeColor, 10%) !important;
							transition: background 0s ease;
						}
					}
				}

				> .time {
					display: inline-block;

					> .dropdown {
						display: inline-block;
						position: relative;
						overflow: visible;

						> .dropdown-header {
							padding: 0 12px;
							text-align: center;
							font-size: 0.5em;

							&:hover {
								background: #111111;

								& + .dropdown-content {
									visibility: visible;
								}

								> time {
									color: #fff !important;

									* {
										color: #fff !important;
									}
								}
							}

							&:after {
								content: "";
								display: block;
								clear: both;
							}

							> time {
								display: table-cell;
								vertical-align: middle;
								height: 48px;
								color: @header-foreground-color;

								> .yyyymmdd {
									color: rgba(255,255,255,0.5);
								}
							}
						}

						> .dropdown-content {
							visibility: hidden;
							display: block;
							position: absolute;
							top: auto;
							right: 0;
							z-index: 3;
							margin: 0;
							padding: 0;
							background: #111111;

							> .clock {
								display: block;
								width: 256px;
								height: 256px;
							}
						}
					}
				}
			}
		}
	}
}

@media (max-width: 1100px) {
	#misskey-header {
		> .main {
			> .main-contents-container {
				> .left {
					> nav {
						> .main-nav {
							> ul {
								> li {
									> a {
										> i {
											margin-right: 0;
										}

										> p {
											display: none;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

@media (max-width: 900px) {
	#misskey-header {
		> .main {
			> .main-contents-container {
				> .right {
					> .account {
						> .dropdown {
							> .dropdown-header {
								> .screen-name {
									display: none;
								}

								> .avatar {
									margin: 8px;
								}
							}
						}
					}
				}
			}
		}
	}
}

@media (max-width: 800px) {
	#misskey-header {
		> .main {
			> .main-contents-container {
				> .right {
					> .search {
						display: none;
					}
				}
			}
		}
	}
}

@media (max-width: 600px) {
	#misskey-header {
		> .main {
			> .main-contents-container {
				> .right {
					> .time {
						display: none;
					}
				}
			}
		}
	}
}

@media (max-width: 500px) {
	#misskey-header {
		> .main {
			> .main-contents-container {
				> .left {
					> nav {
						> .main-nav {
							> ul {
								> li {
									> a {
										padding: 0 16px;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

@media (max-width: 400px) {
	#misskey-header {
		> .main {
			> .main-contents-container {
				> .left {
					> nav {
						> .main-nav {
							> ul {
								> .album {
									display: none;
								}
							}
						}
					}
				}
			}
		}
	}
}

@media (max-width: 350px) {
	#misskey-header {
		> .main {
			> .main-contents-container {
				> .left {
					> nav {
						> .misskey-menu {
							display: none;
						}
					}
				}
			}
		}
	}
}

@media (max-width: 300px) {
	#misskey-header {
		> .main {
			> .main-contents-container {
				> .right {
					> .account {
						display: none;
					}
				}
			}
		}
	}
}

/* General UI
 * ---------------------------------------------------------------- */

.ui-input-text,
.ui-input-email,
.ui-input-password,
.ui-textarea,
.ui-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	user-select: text;
	-moz-user-select: text;
	-webkit-user-select: text;
	-ms-user-select: text;
	box-sizing: border-box;
	cursor: auto;
	margin: 0;
	padding: 8px 16px;
	width: 20em;
	font-size: 1em;
	line-height: 24px;
	color: #444;
	outline: none;
	border: none;
	border-bottom: solid 2px #ddd;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	transition: color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;

	&:hover {
		border-color: @themeColor;
		//box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1) inset;
		transition: border 0.2s ease, box-shadow 0.2s ease;
	}

	&:focus {
		color: darken(@themeColor, 20%);
		border-color: @themeColor;
		//box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) inset;
		transition: color 0, border 0.5s ease, box-shadow 0.05s ease;
	}

	&::-webkit-input-placeholder {
		color: #ddd;
	}

	&:-ms-input-placeholder {
		color: #ddd;
	}

	&:-moz-placeholder {
		color: #ddd;
	}
}

.ui-radio,
.ui-checkbox {
}

.ui-radio-label,
.ui-checkbox-label {
	transition: all 0.2s ease;

	&:hover {
		color: darken(@themeColor, 20%);
	}
}

.ui-button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: inline-block;
	box-sizing: border-box;
	margin: 0;
	padding: 10px 10px;
	line-height: 1.1em;
	font-size: 1.1em;
	font-weight: normal;
	text-decoration: none;
	color: #95856e;
	background: transparent;
	outline: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	transition: color 0.1s ease;

	* {
		pointer-events: none;
	}

	i {
		margin: 0 0.375em;
	}

	&:hover {
		color: @themeColor;
	}

	&:active {
		color: darken(@themeColor, 10%);
		transition: color 0s ease;
	}
}

.ui-textarea {
	height: 6em;
	width: 100%;
	max-width: 100%;
}

.ui-user-avatar {
	display: inline-block;
	position: relative;

	.avatar {
		min-width: 32px;
		max-width: 32px;
		min-height: 32px;
		max-height: 32px;
		vertical-align: bottom;
	}

	.balloon {
		display: inline-block;
		pointer-events: none;
		position: absolute;
		top: -2.5em;
		left: 0;
		z-index: 1;
		margin: 0;
		padding: 6px 12px;
		line-height: 1em;
		white-space: nowrap;
		font-size: 0.9em;
		color: #fff;
		background: rgba(0, 0, 0, 0.7);
		border-radius: 4px;
		opacity: 0;
		transition: opacity 0.1s linear;

		&:before {
			content: "";
			position: absolute;
			bottom: -8px;
			left: ~"calc(50% - 4px)";
			border-top: solid 4px rgba(0, 0, 0, 0.7);
			border-right: solid 4px transparent;
			border-bottom: solid 4px transparent;
			border-left: solid 4px transparent;
		}
	}

	&:hover .balloon {
		opacity: 1;
	}
}

.ui-message {
	display: block;
	pointer-events: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2048;
	width: 600px;
	margin: 0 auto;
	padding: 16px 32px;
	text-align: center;
	word-wrap: break-word;
	color: #fff;
	background: rgba(0, 0, 0, 0.8);
	transform-origin: center top;
	transform: perspective(1024px) rotateX(90deg);
	opacity: 0;
}

/* Window
 * ---------------------------------------------------------------- */
.ui-window {
	position: fixed;
	z-index: 4096;
	bottom: 0;
	right: 0;
	width: auto;
	height: auto;
	overflow: hidden;
	background: transparent;
	box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	opacity: 0;
	transform-origin: 50% 100%;

	> header {
		user-select: none;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		width: 100%;
		height: 38px;
		cursor: move;
		color: #d4d2d1;
		background: #494e51;

		h1, i {
			user-select: none;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: move;
		}

		> h1 {
			display: inline-block;
			overflow: hidden;
			margin: 0 0 0 8px;
			line-height: 38px;
			max-width: ~"calc(100% - 73px)";
			font-size: 1em;
			font-weight: bold;
			white-space: nowrap;
			text-overflow: ellipsis;

			i {
				margin: 0 8px;
			}
		}

		> .buttons {
			float: right;
			font-size: 0;

			> button {
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				display: inline-block;
				vertical-align: bottom;
				padding: 0;
				background: transparent;
				border: none;
				outline: none;
				cursor: pointer;
				color: #d4d2d1;

				&:hover {
					background: rgba(0, 0, 0, 0.2);
					outline: none;
				}

				&:focus {
					outline: none;
				}

				&:active {
					background: rgba(0, 0, 0, 0.4);
					outline: none;
				}

				i {
					pointer-events: none;
					width: 38px;
					line-height: 38px;
					vertical-align: bottom;
				}
			}

			> .close {
			}
		}
	}

	> .content {
		display: block;
		margin: 0;
		padding: 0;
		width: 100%;
		height: ~"calc(100% - 32px)";
		overflow: hidden;
		background: #fff;

		> iframe {
			width: 100%;
			height: 100%;
			border: none;
		}
	}
}

/* Tooltip
 * ---------------------------------------------------------------- */
.ui-tooltip {
	pointer-events: none;
	display: block;
	position: absolute;
	z-index: 128;
	margin: 0;
	padding: 4px 8px;
	white-space: nowrap;
	font-size: 0.8em;
	color: #fff;
	background: rgba(0, 0, 0, 0.8);
	border-radius: 4px;

	&:before {
		content: "";
		display: block;
		position: absolute;
		bottom: -8px;
		left: ~"calc(50% - 4px)";
		border-top: solid 4px rgba(0, 0, 0, 0.8);
		border-right: solid 4px transparent;
		border-bottom: solid 4px transparent;
		border-left: solid 4px transparent;
	}
}

/* Album
 * ---------------------------------------------------------------- */
#misskey-album-container {

	#misskey-album-background {
		position: fixed;
		z-index: 2048;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		opacity: 0;
	}

	#misskey-album {
		position: fixed;
		z-index: 2049;
		top: 32px;
		left: 32px;
		bottom: 32px;
		right: 32px;
		//height: ~"calc(100% - 128px)";
		// border: solid 2px rgba(255, 255, 255, 0.2);
		&, * {
			user-select: none;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: default;

			&:not(i) {
				font-family: 'Proxima Nova Reg', "FOT-スーラ Pro M", 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', sans-serif;
			}
		}

		.context-menu {
			display: none;
			position: fixed;
			z-index: 2;
			background: #fff;
			box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);

			&[data-active='true'] {
				display: block;
			}

			> ol,
			> ul {
				display: block;
				position: relative;
				margin: 0;
				padding: 8px 0;
				list-style: none;
				border-bottom: solid 1px #eee;

				&:last-child {
					border-bottom: none;
				}

				> li {
					min-width: 14em;
					padding: 8px 16px;
					color: #4D5965;

					&:hover {
						background: @themeColor;
						color: contrast(@themeColor, #000, #fff, 70%);
					}

					> a {
						text-decoration: none;
						cursor: default;
						color: inherit;
						transition: none;
					}

					i {
						width: 1em;
						margin-right: 0.5em;
						text-align: center;

						& + p {
							margin-left: 0;
						}
					}

					p {
						display: inline;
						margin: 0;
						margin-left: 1.5em;
					}
				}
			}
		}

		> header {
			z-index: 1;
			//box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
			height: ~"calc(1em + 32px)";
			background: #2A3740;

			&:after {
				content: '';
				display: block;
				clear: both;
			}

			> .uploader {
				float: left;

				> input {
					display: none;
				}

				button {
					display: block;
					-webkit-appearance: none;
					-moz-appearance: none;
					appearance: none;
					cursor: pointer;
					box-sizing: border-box;
					padding: 12px 16px;
					margin: 0;
					font-size: 1em;
					color: #888;
					outline: none;
					border: none;
					border-radius: 0;
					box-shadow: none;
					background: transparent;
					transition: all .1s ease;
					cursor: pointer;

					* {
						cursor: pointer;
					}

					&:hover {
						color: @themeColor;
					}

					&:focus {
						color: @themeColor;
					}

					&:active {
						color: darken(@themeColor, 10%);
					}

					i {
						margin-right: 0.5em;
						font-family: FontAwesome;
					}
				}
			}

			> .chooser {
				float: right;
				margin: 4px 0px 4px 4px;
				padding-right: 16px;
				border-right: solid 1px #333;

				button {
					display: block;
					-webkit-appearance: none;
					-moz-appearance: none;
					appearance: none;
					cursor: pointer;
					box-sizing: border-box;
					padding: 8px 16px;
					margin: 0;
					font-size: 1em;
					color: #fff;
					outline: none;
					border: none;
					border-radius: 0;
					box-shadow: none;
					background: @themeColor;
					transition: all .1s ease;
					cursor: pointer;

					* {
						cursor: pointer;
					}

					&:hover {
						background: lighten(@themeColor, 10%);
					}

					&:focus {
						background: lighten(@themeColor, 10%);
					}

					&:active {
						background: darken(@themeColor, 10%);
					}

					i {
						margin-right: 0.5em;
						font-family: FontAwesome;
					}
				}
			}

			> nav {
				float: left;
			}

			.close {
				display: block;
				float: right;
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				cursor: pointer;
				box-sizing: border-box;
				padding: 12px 16px;
				margin: 0;
				font-size: 1em;
				color: #888;
				outline: none;
				border: none;
				border-radius: 0;
				box-shadow: none;
				background: transparent;
				transition: all .1s ease;
				cursor: pointer;

				* {
					cursor: pointer;
				}

				&:hover {
					color: @themeColor;
				}

				&:focus {
					color: @themeColor;
				}

				&:active {
					color: darken(@themeColor, 10%);
				}
			}
		}

		> .browser {
			display: block;
			position: relative;
			width: 100%;
			height: ~"calc(100% - (1em + 32px))";
			overflow: scroll;
			background: #21282F;

			> .selection {
				display: none;
				box-sizing: border-box;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				width: 0;
				height: 0;
				border: solid 1px @themeColor;
				background: fade(@themeColor, 50%);
				opacity: 0;
			}

			> .files {
				display: block;
				position: relative;
				margin: 0;
				padding: 0 19px;
				list-style: none;

				&:after {
					content: '';
					display: block;
					clear: both;
				}

				> .item {
					display: block;
					float: left;
					margin: 28px 12px;
					padding: 0;
					width: 150px;
					height: 110px;

					&[data-selected=true] {
						> .content {
							//border: solid 4px @themeColor;
							outline: solid 4px @themeColor;

							&:hover {
								//border: solid 4px lighten(@themeColor, 20%);
								outline: solid 4px lighten(@themeColor, 10%);

								> .name {
									background: lighten(@themeColor, 10%);
								}
							}

							> .name {
								color: contrast(@themeColor, #000, #fff, 70%);
								background: @themeColor;
							}
						}
					}

					> .content {
						box-sizing: border-box;
						position: relative;
						width: 100%;
						height: 100%;
						//border: solid 4px #eee;
						outline: solid 4px transparent;
						//box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
						background-size: 50%;
						background-position: 50%;
						background-repeat: no-repeat;
						transition: outline 0.1s ease;

						&:hover {
							//border: solid 4px #ddd;
							outline: solid 4px #353535;
						}

						> .name {
							display: block;
							position: absolute;
							top: 110px;
							width: ~"calc(100% + 8px)";
							margin: 0 0 0 -4px;
							padding: 4px 0 4px 0;
							font-size: 0.8em;
							text-align: center;
							word-wrap: break-word;
							color: #8899aa;
							transition: background 0.1s ease, color 0.1s ease;
						}
					}

					&.file[data-mimetype='image/png'],
					&.file[data-mimetype='image/jpeg'],
					&.file[data-mimetype='image/gif'],
					&.file[data-mimetype='image/bmp'],
					&.file[data-mimetype='image/webp'],
					&.file[data-mimetype='image/tiff'] {
						> .content {
							background-color: #fff;
							background-repeat: no-repeat;
							background-position: center center;
							//background-size: contain;
							background-size: cover;

							&:hover {
								//background-size: cover;
							}
						}
					}
				}
			}
		}

		> .uploads {
			display: none;
			position: fixed;
			bottom: 0;
			right: 0;
			width: 512px;
			background: #000;
			border-top: solid 1px #404040;
			border-left: solid 1px #404040;
			color: #fff;

			> ol {
				display: block;
				position: relative;
				margin: 0;
				padding: 0;
				height: 192px;
				overflow: scroll;
				list-style: none;

				> li {
					padding: 8px;
					border-bottom: solid 1px #404040;

					p {
						margin: 0 0 4px 0;
						font-size: 0.9em;
					}

					progress {
						-webkit-appearance: none;
						-moz-appearance: none;
						appearance: none;
						display: block;
						margin: 0;
						width: 100%;
						height: 8px;
						border: none;
						border-radius: 0;
						overflow: hidden;

						&::-webkit-progress-value {
							background-color: @themeColor;
						}

						&::-webkit-progress-bar {
							background-color: #000;
						}

						&:not([value])::-webkit-progress-bar {
							background-image: url('/resources/common/images/indeter.gif');
						}
					}
				}
			}
		}
	}
}

.ui-autocomplete {
	z-index: 1;
	margin-top: ~"calc(1em + 8px)";
	max-height: 190px;
	overflow: auto;
	border: solid 1px #E8D9D1;
	border-radius: 4px;
	background: #fff;
	transition: left 0.2s ease;

	> ol {
		display: block;
		margin: 0;
		padding: 4px 0;
		list-style: none;

		> li {
			a {
				display: inline-block;
				z-index: 1;
				box-sizing: border-box;
				width: 100%;
				padding: 4px 12px;
				vertical-align: top;
				white-space: nowrap;
				overflow: hidden;
				color: #735648;
				font-size: 0.9em;
				cursor: default;
				transition: none;

				&:hover,
				&:focus {
					color: #fff;
					background: @themeColor;
					text-decoration: none;
				}

				&:active {
					color: #fff;
					background: darken(@themeColor, 10%);
				}

				* {
					pointer-events: none;
				}
			}
		}

		&.users {
			> li {
				a {
					&:hover,
					&:focus {
						.name {
							color: #fff;
						}

						.screen-name {
							color: #fff;
						}
					}

					&:active {
						.name {
							color: #fff;
						}

						.screen-name {
							color: #fff;
						}
					}

					.avatar {
						vertical-align: middle;
						min-width: 28px;
						min-height: 28px;
						max-width: 28px;
						max-height: 28px;
						margin: 0 8px 0 0;
						border-radius: 100%;
					}

					.name {
						margin: 0 8px 0 0;
						/*font-weight: bold;*/
						font-weight: normal;
					}

					.screen-name {
						font-weight: normal;
						opacity: 0.5;
					}
				}
			}
		}
	}
}

.cropper-container {
	position: relative;
	font-size: 0;
	line-height: 0;
	-ms-touch-action: none;
	touch-action: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	direction: ltr !important;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
}

.cropper-container img {
	display: block;
	width: 100%;
	min-width: 0 !important;
	max-width: none !important;
	height: 100%;
	min-height: 0 !important;
	max-height: none !important;
	image-orientation: 0deg !important;
}

.cropper-canvas, .cropper-crop-box, .cropper-drag-box, .cropper-modal, .cropper-wrap-box {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.cropper-wrap-box {
	overflow: hidden;
}

.cropper-drag-box {
	background-color: #fff;
	filter: alpha(opacity=0);
	opacity: 0;
}

.cropper-dashed, .cropper-modal {
	filter: alpha(opacity=50);
	opacity: .5;
}

.cropper-modal {
	background-color: #000;
}

.cropper-view-box {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	outline: #39f solid 1px;
	outline-color: rgba(51,153,255,.75);
}

.cropper-dashed {
	position: absolute;
	display: block;
	border: 0 dashed #eee;
}

.cropper-dashed.dashed-h {
	top: 33.33333%;
	left: 0;
	width: 100%;
	height: 33.33333%;
	border-top-width: 1px;
	border-bottom-width: 1px;
}

.cropper-dashed.dashed-v {
	top: 0;
	left: 33.33333%;
	width: 33.33333%;
	height: 100%;
	border-right-width: 1px;
	border-left-width: 1px;
}

.cropper-center {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 0;
	height: 0;
	filter: alpha(opacity=75);
	opacity: .75;
}

.cropper-center:after, .cropper-center:before {
	position: absolute;
	display: block;
	content: " ";
	background-color: #eee;
}

.cropper-center:before {
	top: 0;
	left: -3px;
	width: 7px;
	height: 1px;
}

.cropper-center:after {
	top: -3px;
	left: 0;
	width: 1px;
	height: 7px;
}

.cropper-face, .cropper-line, .cropper-point {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	filter: alpha(opacity=10);
	opacity: .1;
}

.cropper-face {
	top: 0;
	left: 0;
	background-color: #fff;
}

.cropper-line, .cropper-point {
	background-color: #39f;
}

.cropper-line.line-e {
	top: 0;
	right: -3px;
	width: 5px;
	cursor: e-resize;
}

.cropper-line.line-n {
	top: -3px;
	left: 0;
	height: 5px;
	cursor: n-resize;
}

.cropper-line.line-w {
	top: 0;
	left: -3px;
	width: 5px;
	cursor: w-resize;
}

.cropper-line.line-s {
	bottom: -3px;
	left: 0;
	height: 5px;
	cursor: s-resize;
}

.cropper-point {
	width: 5px;
	height: 5px;
	filter: alpha(opacity=75);
	opacity: .75;
}

.cropper-point.point-e {
	top: 50%;
	right: -3px;
	margin-top: -3px;
	cursor: e-resize;
}

.cropper-point.point-n {
	top: -3px;
	left: 50%;
	margin-left: -3px;
	cursor: n-resize;
}

.cropper-point.point-w {
	top: 50%;
	left: -3px;
	margin-top: -3px;
	cursor: w-resize;
}

.cropper-point.point-s {
	bottom: -3px;
	left: 50%;
	margin-left: -3px;
	cursor: s-resize;
}

.cropper-point.point-ne {
	top: -3px;
	right: -3px;
	cursor: ne-resize;
}

.cropper-point.point-nw {
	top: -3px;
	left: -3px;
	cursor: nw-resize;
}

.cropper-point.point-sw {
	bottom: -3px;
	left: -3px;
	cursor: sw-resize;
}

.cropper-point.point-se {
	right: -3px;
	bottom: -3px;
	width: 20px;
	height: 20px;
	cursor: se-resize;
	filter: alpha(opacity=100);
	opacity: 1;
}

.cropper-point.point-se:before {
	position: absolute;
	right: -50%;
	bottom: -50%;
	display: block;
	width: 200%;
	height: 200%;
	content: " ";
	background-color: #39f;
	filter: alpha(opacity=0);
	opacity: 0;
}

@media (min-width:768px) {
	.cropper-point.point-se {
		width: 15px;
		height: 15px;
	}
}

@media (min-width:992px) {
	.cropper-point.point-se {
		width: 10px;
		height: 10px;
	}
}

@media (min-width:1200px) {
	.cropper-point.point-se {
		width: 5px;
		height: 5px;
		filter: alpha(opacity=75);
		opacity: .75;
	}
}

.cropper-bg {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
}

.cropper-invisible {
	filter: alpha(opacity=0);
	opacity: 0;
}

.cropper-hide {
	position: absolute;
	display: block;
	width: 0;
	height: 0;
}

.cropper-hidden {
	display: none !important;
}

.cropper-move {
	cursor: move;
}

.cropper-crop {
	cursor: crosshair;
}

.cropper-disabled .cropper-drag-box, .cropper-disabled .cropper-face, .cropper-disabled .cropper-line, .cropper-disabled .cropper-point {
	cursor: not-allowed;
}

@import "../../common";
@import "./i-settings";
// @import "../../../../../../bower_components/cropper/dist/cropper.min.css";

@header-background-color: #494e51;
@header-foreground-color: #d4d2d1;

/* UI
 * ---------------------------------------------------------------- */
.ui-modal-window-container,
.ui-modal-dialog-container {
	display: block;
	position: fixed;
	z-index: 1024;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	opacity: 0;
	overflow: auto;
}

.ui-modal-window {
	display: block;
	position: absolute;
	top: 7%;
	left: 0;
	right: 0;
	margin: 0 auto;
}

.ui-modal-dialog {
	display: block;
	box-sizing: border-box;
	position: absolute;
	top: 20%;
	left: 0;
	right: 0;
	margin: 0 auto 32px auto;
	padding: 32px 42px;
	max-width: 480px;
	background: #fff;

	*:not(i) {
		font-family: 'Proxima Nova Reg', "FOT-スーラ Pro M", 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', sans-serif;
	}

	> .title {
		margin: 1em 0;
		color: @themeColor;
		// color: #43A4EC;
		font-weight: bold;

		> i {
			margin-right: 0.5em;
		}
	}

	> .body {
		margin: 1em 0;
		color: #888;
	}

	> .buttons {
		> button {
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			display: inline-block;
			float: right;
			box-sizing: border-box;
			margin: 0;
			padding: 10px 10px;
			line-height: 1.1em;
			font-size: 1.1em;
			font-weight: normal;
			text-decoration: none;
			color: #888;
			background: transparent;
			outline: none;
			border: none;
			border-radius: 0;
			box-shadow: none;
			cursor: pointer;
			transition: color 0.1s ease;

			* {
				pointer-events: none;
			}

			i {
				margin: 0 0.375em;
			}

			&:hover {
				color: @themeColor;
			}

			&:active {
				color: darken(@themeColor, 10%);
				transition: color 0s ease;
			}
		}
	}
}

.misskey-keyboard-shortcuts {
	top: 32px;

	kbd {
		display: inline;
		margin: 0 4px;
		padding: 0 8px;
		color: #888;
		background: #f8f8f8;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	}

	dt {
		margin-top: 1em;

		&:after {
			content: ':';
		}
	}

	dd {
		margin-left: 2em;
	}
}

#misskey-post-form-back {
	display: none;
	position: fixed;
	z-index: 127;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	opacity: 0;
}

#misskey-post-form-container {
	display: none;
	position: fixed;
	top: 0;
	z-index: 1025;
	width: 100%;
	height: 100%;
}

#misskey-post-form {
	display: block;
	position: absolute;
	top: 15%;
	left: 0;
	right: 0;
	box-sizing: border-box;
	width: 100%;
	max-width: 552px;
	margin: auto;
	padding: 0;
	background: #fff;
	opacity: 0;

	*:not(i) {
		font-family: 'Proxima Nova Reg', "FOT-スーラ Pro M", 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', sans-serif;
	}

	> .close-button {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		width: 42px;
		height: 42px;
		color: #555;
		border: none;
		outline: none;
		background: transparent;
		cursor: pointer;

		&:hover {
			color: #333;
		}

		&:active {
			color: #000;
		}

		* {
			pointer-events: none;
		}
	}

	> #misskey-post-form-tabs {
		display: block;
		margin: 0;
		padding: 0;
		list-style: none;

		&:after {
			content: '';
			display: block;
			clear: both;
		}

		> li {
			user-select: none;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: default;
			display: block;
			float: left;
			margin: 0;
			padding: 12px 24px;
			color: #DAD1CC;
			cursor: pointer;
			overflow: hidden;
			transition: background 0.1s ease;

			&.active {
				background: #fff;
				color: @themeColor;

				&:hover {
					color: @themeColor;
				}
			}

			&:hover {
				color: #bAb1aC;
			}

			&:active {
				color: #7f7976;
			}

			> i {
				position: relative;
				top: 0;
				font-size: 1em;
				transition: top 0.1s ease;
			}
		}
	}

	> #misskey-post-form-tab-pages {
		padding: 4px 16px 0 16px;

		> form {

			&:after {
				content: '';
				display: block;
				clear: both;
			}

			textarea {
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				user-select: text;
				-moz-user-select: text;
				-webkit-user-select: text;
				-ms-user-select: text;
				box-sizing: border-box;
				width: 100%;
				min-width: 100%;
				max-width: 100%;
				height: 7em;
				min-height: 7em;
				vertical-align: bottom;
				margin: 0;
				padding: 8px 12px;
				outline: 0;
				border: none;
				border-radius: 0;
				font-size: 1em;
				transition: color 0.2s ease, box-shadow 0.2s ease;

				&:hover {
				}

				&:focus {
					color: darken(@themeColor, 20%);
				}
			}

			progress {
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				display: block;
				margin: 0;
				width: 100%;
				height: 8px;
				border: none;
				border-radius: 0;
				overflow: hidden;

				&::-webkit-progress-value {
					background-color: @themeColor;
				}

				&::-webkit-progress-bar {
					background-color: #fff;
				}

				&:not([value])::-webkit-progress-bar {
					background-image: url('/resources/desktop/common/images/indeter.gif');
				}
			}

			&#misskey-post-form-photo-tab-page {
				textarea {
					height: 5em;
					min-height: 5em;
				}

				input[type=file] {
					display: none;
				}

				.photos {
					display: block;
					margin: 0;
					padding: 0 8px;
					list-style: none;

					&:after {
						content: '';
						display: block;
						clear: both;
					}

					> li {
						display: block;
						position: relative;
						float: left;
						margin: 4px;
						padding: 0;
						width: 64px;
						height: 64px;
						background-color: #eee;
						background-repeat: no-repeat;
						background-position: center center;
						//background-size: contain;
						background-size: cover;
						cursor: move;

						&:hover {
							> .remove {
								display: block;
							}
						}

						> .remove {
							-webkit-appearance: none;
							-moz-appearance: none;
							appearance: none;
							display: none;
							position: absolute;
							right: -6px;
							top: -6px;
							margin: 0;
							padding: 0;
							background: transparent;
							outline: none;
							border: none;
							border-radius: 0;
							box-shadow: none;
							cursor: pointer;
						}
					}
				}

				.uploads {
					display: block;
					margin: 0;
					padding: 0;
					list-style: none;
				}

				.attach-from-local,
				.attach-from-album {
					-webkit-appearance: none;
					-moz-appearance: none;
					appearance: none;
					display: inline-block;
					box-sizing: border-box;
					margin: 0;
					padding: 12px 14px;
					width: 50%;
					line-height: 1em;
					font-size: 1em;
					font-weight: normal;
					text-decoration: none;
					color: #95856e;
					background: transparent;
					outline: none;
					border: none;
					border-radius: 0;
					box-shadow: none;
					cursor: pointer;
					transition: color 0.1s ease;

					* {
						pointer-events: none;
					}

					i {
						margin-right: 0.375em;
					}

					&:hover {
						color: @themeColor;
					}

					&:active {
						color: darken(@themeColor, 10%);
						transition: color 0s ease;
					}
				}
			}
		}
	}

	button.submit {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		display: block;
		float: right;
		box-sizing: border-box;
		margin: 8px 16px 16px 16px;
		padding: 10px 18px;
		line-height: 1em;
		font-size: 1em;
		font-weight: normal;
		text-decoration: none;
		color: #fff;
		background: @themeColor;
		outline: none;
		border: none;
		border-radius: 0;
		box-shadow: none;
		cursor: pointer;
		transition: color 0.1s ease;

		* {
			pointer-events: none;
		}

		p {
			display: inline;
			margin: 0;
		}

		i {
			margin-left: 0.375em;
		}

		&:hover {
			background: lighten(@themeColor, 10%);
		}

		&:active {
			background: darken(@themeColor, 10%);
			transition: background 0s ease;
		}

		&:focus {
			outline: solid 2px fade(@themeColor, 50%);
		}
	}
}

#misskey-i-settings-form {
	> main {
		.i-settings;
		padding: 16px;
	}

	margin: 0 auto;
	max-width: 770px;
}

#misskey-header {
	position: fixed;
	top: 0;
	z-index: 1024;
	width: 100%;
	//box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
	> .donate {
		margin: 0;
		padding: 4px 16px;
		font-size: 0.8em;
		color: #000;
		background: #cef1df;
	}

	> .env-development-info {
		margin: 0;
		padding: 4px 16px;
		font-size: 0.8em;
		color: #fff;
		background: rgba(0, 0, 0, 0.9);

		.go-production-channel {
			margin-left: 4px;

			i {
				margin-right: 2px;
			}
		}
	}

	> .info {
		display: block;
		width: 100%;
		margin: 0;
		padding: 2px 0;
		text-align: center;
		font-size: 0.8em;
		color: #000;
		background: orange;
	}

	> .main {
		//max-height: 3rem;
		margin: 0;
		padding: 0;
		background-color: @header-background-color;
		//background-image: url("/resources/common/images/misskey.dark.svg");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: auto 24px;
		//box-shadow: 0 2px 2px -2px rgba(0,0,0,0.5);
		//border-top: solid 3px @themeColor;
		//border-bottom: solid 3px rgba(0, 0, 0, 0.1);
		//box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
		background-clip: content-box;
		font-size: 0.9rem;

		&, * {
			user-select: none;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: default;
		}

		&:after {
			content: "";
			display: block;
			clear: both;
		}

		> .main-contents-container {
			width: 100%;
			max-width: 1300px;
			margin: 0 auto;

			> .left {
				float: left;
				height: 3rem;

				> nav {
					> .main-nav {
						display: inline-block;
						margin: 0;
						padding: 0;
						line-height: 3rem;
						vertical-align: top;

						> .misskey {
							-webkit-appearance: none;
							-moz-appearance: none;
							appearance: none;
							display: none;
							vertical-align: top;
							margin: 0 10px;
							padding: 0;
							line-height: 3rem;
							font-size: 1.5em;
							color: rgba(0, 0, 0, 0.5);
							border: none;
							outline: none;
							background: transparent;
							transition: all 0.2s ease;

							&:hover {
								color: @themeColor;
							}
						}

						> ul {
							display: inline-block;
							margin: 0;
							padding: 0;
							vertical-align: top;
							line-height: 3rem;
							list-style: none;

							> li {
								display: inline-block;
								vertical-align: top;
								height: 48px;
								line-height: 48px;
								background-clip: padding-box !important;

								&.active {
									background: @themeColor;

									> a {
										color: contrast(@themeColor, #000, #fff, 70%) !important;
										border-bottom: none !important;

										&:hover {
											border-bottom: none !important;
										}
									}
								}

								> a {
									display: inline-block;
									box-sizing: border-box;
									z-index: 1;
									height: 100%;
									padding: 0 24px;
									font-size: 1em;
									font-variant: small-caps;
									color: @header-foreground-color;
									text-decoration: none;
									border-bottom: solid 0px rgba(255, 255, 255, 0.3);
									transition: all 0.1s linear;

									* {
										pointer-events: none;
									}

									&:hover {
										color: @themeColor;
										border-bottom: solid 4px rgba(255, 255, 255, 0.3);
									}

									&:active {
										color: darken(@themeColor, 10%);
									}

									> i {
										margin-right: 8px;
									}

									> p {
										display: inline;
										margin: 0;
									}

									> .unread-count {
										display: inline;
										margin-left: 8px;
										padding: 2px 4px;
										font-size: 0.8em;
										color: contrast(@themeColor, #000, #fff, 70%);
										background: @themeColor;
										border-radius: 2px;
									}
								}
							}
						}
					}

					> .misskey-menu {
						display: inline-block;
						vertical-align: top;

						> .dropdown {
							display: inline-block;
							position: relative;
							overflow: visible;
							float: right;

							&[data-active='true'] {
								background: #232221;

								> .dropdown-header {
								}

								> .dropdown-content {
									visibility: visible;
								}
							}

							> .dropdown-header {
								cursor: pointer;

								* {
									cursor: pointer;
								}

								&:hover {
									background: rgba(0, 0, 0, 0.1);

									> p > i {
										color: #fff;
									}
								}

								&:active {
									background: rgba(0, 0, 0, 0.2);

									> p > i {
										color: #fff;
									}
								}

								&:after {
									content: "";
									display: block;
									clear: both;
								}

								> p {
									display: block;
									margin: 0 16px;
									line-height: 48px;

									> i {
										color: @header-foreground-color;
									}
								}
							}

							> .dropdown-content {
								visibility: hidden;
								display: block;
								position: absolute;
								top: auto;
								left: 0;
								z-index: 3;
								width: 270px;
								margin: 0;
								padding: 0;
								background: #232221;

								> ul {
									margin: 0;
									padding: 0;
									list-style: none;
									font-size: 1em;
									border-bottom: solid 1px #1b1b1a;

									&:last-child {
										border-bottom: none;
									}

									> li {
										display: inline-block;
										width: 100%;

										> a {
											display: inline-block;
											z-index: 1;
											box-sizing: border-box;
											vertical-align: top;
											width: 100%;
											padding: 12px 20px;
											text-decoration: none;
											color: @header-foreground-color;
											// background-image: url("/resources/common/images/arrow-white.svg");
											background-repeat: no-repeat;
											background-position: calc(100% - 8px) center;
											transition: none;

											&:hover {
												color: #fff;
												background-color: @themeColor;
											}

											&:active {
												color: #fff;
												background-color: darken(@themeColor, 10%);
											}

											> i {
												width: 2em;
												text-align: center;
											}
										}
									}
								}
							}
						}
					}
				}
			}

			> .right {
				float: right;
				height: 48px;

				> .search {
					display: inline-block;
					position: relative;
					vertical-align: top;

					> input {
						-webkit-appearance: none;
						-moz-appearance: none;
						appearance: none;
						user-select: text;
						-moz-user-select: text;
						-webkit-user-select: text;
						-ms-user-select: text;
						cursor: auto;
						box-sizing: border-box;
						margin: 0;
						padding: 6px 18px;
						width: 14em;
						height: 48px;
						font-size: 1em;
						line-height: ~"calc(48px - 12px)";
						color: #fff;
						background: transparent;
						outline: none;
						//border: solid 1px #ddd;
						border: none;
						border-radius: 0;
						box-shadow: none;
						transition: color 0.5s ease, border 0.5s ease;
						font-family: FontAwesome, 'Helvetica','Arial','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Meiryo UI','Meiryo, メイリオ','sans-serif';

						&:hover {
							background: rgba(0, 0, 0, 0.1);
						}

						&:focus {
							color: @themeColor;
							background: rgba(0, 0, 0, 0.2);
						}

						&[data-active='true'] {
							background: #111111;
						}

						&::-webkit-input-placeholder,
						&:-ms-input-placeholder,
						&:-moz-placeholder {
							color: @header-foreground-color;
						}
					}

					> .result {
						display: block;
						position: absolute;
						top: auto;
						right: 0;
						z-index: 3;
						width: 340px;
						margin: 0;
						padding: 0;
						background: #111111;

						> ol.users {
							margin: 0;
							padding: 0;
							list-style: none;

							li {
								a {
									display: inline-block;
									z-index: 1;
									box-sizing: border-box;
									width: 100%;
									padding: 8px 22px;
									vertical-align: top;
									white-space: nowrap;
									overflow: hidden;
									color: @header-foreground-color;
									transition: none;

									&:hover {
										color: #fff;
										background: @themeColor;

										.name {
											color: #fff;
										}

										.screen-name {
											color: #fff;
										}
									}

									&:active {
										color: #fff;
										background: darken(@themeColor, 10%);

										.name {
											color: #fff;
										}

										.screen-name {
											color: #fff;
										}
									}

									.avatar {
										vertical-align: middle;
										min-width: 32px;
										min-height: 32px;
										max-width: 32px;
										max-height: 32px;
										margin: 0 8px 0 0;
										border-radius: 6px;
									}

									.name {
										margin: 0 8px 0 0;
										/*font-weight: bold;*/
										font-weight: normal;
										color: rgba(255, 255, 255, 0.8);
									}

									.screen-name {
										font-weight: normal;
										color: rgba(255, 255, 255, 0.3);
									}
								}
							}
						}
					}
				}
				/*
				> .notification {
					display: inline-block;
					vertical-align: top;
					height: 100%;

					> .dropdown {
						display: inline-block;
						position: relative;
						overflow: visible;
						clear: both;
						float: right;
						height: 100%;

						&:hover {
							> .i {
								background: #eee;
							}

							> .dropdownContainer {
								visibility: visible;
								opacity: 1;
								transform: scale(1);
								transition: opacity 0.1s linear;
							}
						}

						> .i {
							display: inline-block;
							box-sizing: border-box;
							min-width: 48px;
							height: 100%;
							padding: 0 8px;
							text-align: center;

							> i {
								display: inline-block;
								font-size: 1.2em;
								line-height: 48px;
								color: rgba(0,0,0,0.5);
							}
						}

						> .dropdownContainer {
							visibility: hidden;
							opacity: 0;
							display: block;
							position: absolute;
							top: ~"calc(48px + 16px)";
							right: -8px;
							z-index: 3;
							margin: 0;
							padding: 16px;
							background: #fff;
							box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
							transform: scale(0.9);
							transition: visibility 0s linear 0.5s, opacity 0.1s linear 0.4s, transform 0.2s ease-out 0.4s;

							&:before {
								content: "";
								display: block;
								position: absolute;
								top: -32px;
								right: 16px;
								width: 0;
								height: 0;
								border-top: solid 16px transparent;
								border-right: solid 16px transparent;
								border-bottom: solid 16px #fff;
								border-left: solid 16px transparent;
							}

							> .allDeleteButton {
								-webkit-appearance: none;
								-moz-appearance: none;
								appearance: none;
								display: block;
								position: absolute;
								top: 0;
								left: 0;
								z-index: 1;
								margin: 0;
								padding: 0;
								cursor: pointer;
								outline: none;
								border: none;
								border-radius: 0;
								box-shadow: none;
								background: transparent;

								&:hover {
									background: @themeColor;
								}

								&:active {
									background: darken(@themeColor, 10%);
								}

								> i {
									padding: 8px;
									font-size: 1rem;
									cursor: pointer;
									color: rgba(0, 0, 0, 0.5);
								}
							}

							> .dropdownContent {
								box-sizing: border-box;
								width: 350px;
								height: 450px;
								overflow-x: auto;
								overflow-y: scroll;
								font-size: 1rem;

								> .empty {
									display: inline-block;
									box-sizing: border-box;
									width: 100%;
									margin: 0;
									padding: 24px;
									text-align: center;
									color: rgba(0, 0, 0, 0.5);
								}

								> ol {
									margin: 0;
									padding: 0;
									list-style: none;
									font-size: 1.2em;

									> li {
										display: block;
										position: relative;
										box-sizing: border-box;
										width: 100%;
										padding: 24px 16px;
										background: #fff;
										border-bottom: solid 1px #eee;

										&:hover {
											> .deleteButton {
												display: block;
											}
										}

										> time {
											position: absolute;
											top: 0;
											left: 0;
											padding: 8px;
											font-size: 0.5em;
											color: rgba(0, 0, 0, 0.5);
										}

										> .appName {
											position: absolute;
											bottom: 0;
											right: 0;
											padding: 8px;
											font-size: 0.5em;
											color: rgba(0, 0, 0, 0.5);
										}

										> .deleteButton {
											-webkit-appearance: none;
											-moz-appearance: none;
											appearance: none;
											display: none;
											position: absolute;
											top: 6px;
											right: 6px;
											margin: 0;
											padding: 0;
											cursor: pointer;
											outline: none;
											border: none;
											border-radius: 0;
											box-shadow: none;
											background: transparent;

											> img {
												vertical-align: bottom;
												width: 16px;
												height: 16px;
												cursor: pointer;
											}
										}

										> .content {
											font-size: 0.8em;
										}
									}
								}
							}
						}
					}
				}
				*/
				> .account {
					display: inline-block;
					vertical-align: top;

					> .dropdown {
						display: inline-block;
						position: relative;
						overflow: visible;
						clear: both;
						float: right;

						&[data-active='true'] {
							background: #232221;

							> .dropdown-header {
								> .avatar {
									filter: saturate(200%);
									-webkit-filter: saturate(200%);
									-moz-filter: saturate(200%);
									-o-filter: saturate(200%);
									-ms-filter: saturate(200%);
								}
							}

							> .dropdown-content {
								visibility: visible;
							}
						}

						> .dropdown-header {
							cursor: pointer;

							* {
								cursor: pointer;
							}

							&:hover {
								background: rgba(0, 0, 0, 0.1);

								> .screen-name {
									color: #fff;
								}

								> .avatar {
									filter: saturate(150%);
									-webkit-filter: saturate(150%);
									-moz-filter: saturate(150%);
									-o-filter: saturate(150%);
									-ms-filter: saturate(150%);
								}
							}

							&:active {
								background: rgba(0, 0, 0, 0.2);

								> .screen-name {
									color: #fff;
								}

								> .avatar {
									filter: saturate(200%);
									-webkit-filter: saturate(200%);
									-moz-filter: saturate(200%);
									-o-filter: saturate(200%);
									-ms-filter: saturate(200%);
								}
							}

							&:after {
								content: "";
								display: block;
								clear: both;
							}

							> .screen-name {
								display: block;
								float: left;
								margin: 0 12px 0 16px;
								max-width: 16em;
								line-height: 48px;
								font-weight: bold;
								text-decoration: none;
								color: @header-foreground-color;

								i {
									margin-left: 8px;
								}
							}

							> .avatar {
								display: block;
								float: left;
								box-sizing: border-box;
								min-width: 32px;
								max-width: 32px;
								min-height: 32px;
								max-height: 32px;
								margin: 8px 8px 8px 0;
								border-radius: 4px;
							}
						}

						> .dropdown-content {
							visibility: hidden;
							display: block;
							position: absolute;
							top: auto;
							right: 0;
							z-index: 3;
							width: 270px;
							margin: 0;
							padding: 0;
							background: #232221;

							> ul {
								margin: 0;
								padding: 0;
								list-style: none;
								font-size: 1em;
								border-bottom: solid 1px #1b1b1a;

								&:last-child {
									border-bottom: none;
								}

								> li {
									display: inline-block;
									width: 100%;

									> a {
										display: inline-block;
										z-index: 1;
										box-sizing: border-box;
										vertical-align: top;
										width: 100%;
										padding: 12px 20px;
										text-decoration: none;
										color: @header-foreground-color;
										// background-image: url("/resources/common/images/arrow-white.svg");
										background-repeat: no-repeat;
										background-position: calc(100% - 8px) center;
										transition: none;

										&:hover {
											color: #fff;
											background-color: @themeColor;
										}

										&:active {
											color: #fff;
											background-color: darken(@themeColor, 10%);
										}

										> i {
											width: 2em;
											text-align: center;
										}
									}
								}
							}
						}
					}
				}

				> .notifications {
					display: inline-block;
					vertical-align: top;

					> .dropdown {
						display: inline-block;
						position: relative;
						overflow: visible;
						clear: both;

						&[data-active='true'] {
							background: #111111;

							> .dropdown-content {
								visibility: visible;
							}
						}

						> .dropdown-header {
							cursor: pointer;

							* {
								cursor: pointer;
							}

							&:hover {
								background: rgba(0, 0, 0, 0.1);

								> p > i {
									color: #fff;
								}
							}

							&:active {
								background: rgba(0, 0, 0, 0.2);

								> p > i {
									color: #fff;
								}
							}

							&:after {
								content: "";
								display: block;
								clear: both;
							}

							> p {
								display: block;
								margin: 0 16px;
								line-height: 48px;

								> i {
									color: @header-foreground-color;
								}

								> .unread-count {
									color: contrast(@themeColor, #000, #fff, 70%) !important;
									display: inline-block;
									position: relative;
									z-index: 1;
									padding: 1px 2px;
									margin-right: -1em;
									margin-left: -0.5em;
									vertical-align: super;
									font-size: 0.7em;
									line-height: 1em;
									background: @themeColor;
									border-radius: 2px;
								}
							}
						}

						> .dropdown-content {
							visibility: hidden;
							display: block;
							position: absolute;
							top: auto;
							right: 0;
							z-index: 3;
							min-width: 300px;
							width: 300px;
							margin: 0;
							padding: 0;
							background: #111111;

							> .nav {
								display: none;
								height: 32px;
								position: fixed;
								top: inherit;
								left: inherit;
								width: 300px;
								z-index: 1;
								color: #fff;
								background: #111;
								border-bottom: solid 1px #232323;

								&:after {
									content: "";
									display: block;
									clear: both;
								}

								.filter-type {
									-webkit-appearance: none;
									-moz-appearance: none;
									appearance: none;
									display: block;
									float: left;
									box-sizing: border-box;
									margin: 0;
									padding: 0 8px;
									height: 32px;
									color: #fff;
									border: none;
									border-radius: 0;
									background: transparent;
									transition: border 0.1s ease;

									&:hover {
										background: rgba(255, 255, 255, 0.1);
									}

									option {
										background: #000;
									}
								}

								.delete-all-button {
									-webkit-appearance: none;
									-moz-appearance: none;
									appearance: none;
									display: block;
									float: right;
									box-sizing: border-box;
									margin: 0;
									padding: 0;
									width: 32px;
									height: 32px;
									color: #fff;
									border: none;
									outline: none;
									background: transparent;
									cursor: pointer;

									&:hover {
										background: rgba(255, 255, 255, 0.1);
									}

									&:active {
										background: rgba(255, 255, 255, 0.2);
									}

									* {
										pointer-events: none;
									}
								}
							}

							> .main {
								position: relative;
								min-height: 128px;
								max-height: 512px;
								overflow: auto;

								> .loading {
									display: block;
									position: absolute;
									top: 0;
									right: 0;
									bottom: 0;
									left: 0;
									margin: auto;
								}

								> .notification-empty {
									display: block;
									box-sizing: border-box;
									margin: 0;
									padding: 32px 16px;
									text-align: center;
									color: rgba(255, 255, 255, 0.7);
								}

								> .notifications {
									display: block;
									margin: 0;
									padding: 0;
									list-style: none;

									> .notification {
										display: block;
										position: relative;
										margin: 0;
										padding: 16px;
										font-size: 0.9em;
										color: #fff;
										border-bottom: solid 1px rgba(0, 0, 0, 0.2);
										transform-origin: center bottom;
										transform: perspective(4096px);
										opacity: 1;

										&:last-child {
											border-bottom: none;
										}

										&:after {
											content: "";
											display: block;
											clear: both;
										}

										> time {
											display: inline;
											position: absolute;
											top: 16px;
											right: 12px;
											vertical-align: top;
											color: rgba(255, 255, 255, 0.5);
											font-size: small;
										}

										> .main {
											word-wrap: break-word;
										}

										&.application {
											.icon-anchor {
												img {
													float: left;
													min-width: 36px;
													min-height: 36px;
													max-width: 36px;
													max-height: 36px;
													border-radius: 6px;
												}
											}

											.text {
												float: right;
												box-sizing: border-box;
												width: ~"calc(100% - 36px)";
												padding-left: 8px;

												p {
													margin: 0;

													i {
														margin-right: 4px;
														color: #55ACEE;
													}
												}
											}
										}

										&.install-app {
											.icon-anchor {
												img {
													float: left;
													min-width: 36px;
													min-height: 36px;
													max-width: 36px;
													max-height: 36px;
													border-radius: 6px;
												}
											}

											.text {
												float: right;
												box-sizing: border-box;
												width: ~"calc(100% - 36px)";
												padding-left: 8px;

												p {
													margin: 0;

													i {
														margin-right: 4px;
														color: #55ACEE;
													}
												}
											}
										}

										&.uninstall-app {
											.icon-anchor {
												img {
													float: left;
													min-width: 36px;
													min-height: 36px;
													max-width: 36px;
													max-height: 36px;
													border-radius: 6px;
												}
											}

											.text {
												float: right;
												box-sizing: border-box;
												width: ~"calc(100% - 36px)";
												padding-left: 8px;

												p {
													margin: 0;

													i {
														margin-right: 4px;
														color: #FF2604;
													}
												}
											}
										}

										&.follow {
											.avatar-anchor {
												img {
													float: left;
													min-width: 36px;
													min-height: 36px;
													max-width: 36px;
													max-height: 36px;
													border-radius: 6px;
												}
											}

											.text {
												float: right;
												box-sizing: border-box;
												width: ~"calc(100% - 36px)";
												padding-left: 8px;

												p {
													margin: 0;

													i {
														margin-right: 4px;
														color: #55ACEE;
													}
												}
											}
										}

										&.status-favorite, &.status-repost {
											.avatar-anchor {
												img {
													float: left;
													min-width: 36px;
													min-height: 36px;
													max-width: 36px;
													max-height: 36px;
													border-radius: 6px;
												}
											}

											.text {
												float: right;
												box-sizing: border-box;
												width: ~"calc(100% - 36px)";
												padding-left: 8px;

												p {
													margin: 0;

													i {
														margin-right: 4px;
													}
												}

												.status-preview {
													color: #fff;

													&:before {
														content: "\f10d";
														font-family: FontAwesome;
														font-size: 1em;
														font-weight: normal;
														font-style: normal;
														display: inline-block;
														margin-right: 3px;
													}

													&:after {
														content: "\f10e";
														font-family: FontAwesome;
														font-size: 1em;
														font-weight: normal;
														font-style: normal;
														display: inline-block;
														margin-left: 3px;
													}
												}
											}
										}

										&.status-favorite {
											.text p i {
												color: #FFAC33;
											}
										}

										&.status-repost {
											.text p i {
												color: #77B255;
											}
										}

										&.bbs-thread-post {
											.avatar-anchor {
												img {
													float: left;
													min-width: 36px;
													min-height: 36px;
													max-width: 36px;
													max-height: 36px;
													border-radius: 6px;
												}
											}

											.text {
												float: right;
												box-sizing: border-box;
												width: ~"calc(100% - 36px)";
												padding-left: 8px;

												p {
													margin: 0;

													i {
														margin-right: 4px;
													}
												}

												.post-preview {
													color: #fff;

													&:before {
														content: "\f10d";
														font-family: FontAwesome;
														font-size: 1em;
														font-weight: normal;
														font-style: normal;
														display: inline-block;
														margin-right: 3px;
													}

													&:after {
														content: "\f10e";
														font-family: FontAwesome;
														font-size: 1em;
														font-weight: normal;
														font-style: normal;
														display: inline-block;
														margin-left: 3px;
													}
												}
											}
										}
									}
								}
							}
						}
					}
				}

				> .post {
					display: inline-block;
					box-sizing: border-box;
					padding: 8px;
					height: 100%;
					vertical-align: top;

					> button {
						-webkit-appearance: none;
						-moz-appearance: none;
						appearance: none;
						display: inline-block;
						box-sizing: border-box;
						margin: 0;
						padding: 0 10px;
						height: 100%;
						font-size: 1.2em;
						font-weight: normal;
						text-decoration: none;
						color: contrast(@themeColor, #000, #fff, 70%);
						background: @themeColor !important;
						outline: none;
						border: none;
						border-radius: 2px;
						box-shadow: none;
						transition: background 0.1s ease;

						&, * {
							cursor: pointer;
						}

						&:hover {
							background: lighten(@themeColor, 10%) !important;
						}

						&:active {
							background: darken(@themeColor, 10%) !important;
							transition: background 0s ease;
						}
					}
				}

				> .time {
					display: inline-block;

					> .dropdown {
						display: inline-block;
						position: relative;
						overflow: visible;

						> .dropdown-header {
							padding: 0 12px;
							text-align: center;
							font-size: 0.5em;

							&:hover {
								background: #111111;

								& + .dropdown-content {
									visibility: visible;
								}

								> time {
									color: #fff !important;

									* {
										color: #fff !important;
									}
								}
							}

							&:after {
								content: "";
								display: block;
								clear: both;
							}

							> time {
								display: table-cell;
								vertical-align: middle;
								height: 48px;
								color: @header-foreground-color;

								> .yyyymmdd {
									color: rgba(255,255,255,0.5);
								}
							}
						}

						> .dropdown-content {
							visibility: hidden;
							display: block;
							position: absolute;
							top: auto;
							right: 0;
							z-index: 3;
							margin: 0;
							padding: 0;
							background: #111111;

							> .clock {
								display: block;
								width: 256px;
								height: 256px;
							}
						}
					}
				}
			}
		}
	}
}

@media (max-width: 1100px) {
	#misskey-header {
		> .main {
			> .main-contents-container {
				> .left {
					> nav {
						> .main-nav {
							> ul {
								> li {
									> a {
										> i {
											margin-right: 0;
										}

										> p {
											display: none;
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

@media (max-width: 900px) {
	#misskey-header {
		> .main {
			> .main-contents-container {
				> .right {
					> .account {
						> .dropdown {
							> .dropdown-header {
								> .screen-name {
									display: none;
								}

								> .avatar {
									margin: 8px;
								}
							}
						}
					}
				}
			}
		}
	}
}

@media (max-width: 800px) {
	#misskey-header {
		> .main {
			> .main-contents-container {
				> .right {
					> .search {
						display: none;
					}
				}
			}
		}
	}
}

@media (max-width: 600px) {
	#misskey-header {
		> .main {
			> .main-contents-container {
				> .right {
					> .time {
						display: none;
					}
				}
			}
		}
	}
}

@media (max-width: 500px) {
	#misskey-header {
		> .main {
			> .main-contents-container {
				> .left {
					> nav {
						> .main-nav {
							> ul {
								> li {
									> a {
										padding: 0 16px;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

@media (max-width: 400px) {
	#misskey-header {
		> .main {
			> .main-contents-container {
				> .left {
					> nav {
						> .main-nav {
							> ul {
								> .album {
									display: none;
								}
							}
						}
					}
				}
			}
		}
	}
}

@media (max-width: 350px) {
	#misskey-header {
		> .main {
			> .main-contents-container {
				> .left {
					> nav {
						> .misskey-menu {
							display: none;
						}
					}
				}
			}
		}
	}
}

@media (max-width: 300px) {
	#misskey-header {
		> .main {
			> .main-contents-container {
				> .right {
					> .account {
						display: none;
					}
				}
			}
		}
	}
}

/* General UI
 * ---------------------------------------------------------------- */

.ui-input-text,
.ui-input-email,
.ui-input-password,
.ui-textarea,
.ui-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	user-select: text;
	-moz-user-select: text;
	-webkit-user-select: text;
	-ms-user-select: text;
	box-sizing: border-box;
	cursor: auto;
	margin: 0;
	padding: 8px 16px;
	width: 20em;
	font-size: 1em;
	line-height: 24px;
	color: #444;
	outline: none;
	border: none;
	border-bottom: solid 2px #ddd;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	transition: color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;

	&:hover {
		border-color: @themeColor;
		//box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1) inset;
		transition: border 0.2s ease, box-shadow 0.2s ease;
	}

	&:focus {
		color: darken(@themeColor, 20%);
		border-color: @themeColor;
		//box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) inset;
		transition: color 0, border 0.5s ease, box-shadow 0.05s ease;
	}

	&::-webkit-input-placeholder {
		color: #ddd;
	}

	&:-ms-input-placeholder {
		color: #ddd;
	}

	&:-moz-placeholder {
		color: #ddd;
	}
}

.ui-radio,
.ui-checkbox {
}

.ui-radio-label,
.ui-checkbox-label {
	transition: all 0.2s ease;

	&:hover {
		color: darken(@themeColor, 20%);
	}
}

.ui-button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: inline-block;
	box-sizing: border-box;
	margin: 0;
	padding: 10px 10px;
	line-height: 1.1em;
	font-size: 1.1em;
	font-weight: normal;
	text-decoration: none;
	color: #95856e;
	background: transparent;
	outline: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	transition: color 0.1s ease;

	* {
		pointer-events: none;
	}

	i {
		margin: 0 0.375em;
	}

	&:hover {
		color: @themeColor;
	}

	&:active {
		color: darken(@themeColor, 10%);
		transition: color 0s ease;
	}
}

.ui-textarea {
	height: 6em;
	width: 100%;
	max-width: 100%;
}

.ui-user-avatar {
	display: inline-block;
	position: relative;

	.avatar {
		min-width: 32px;
		max-width: 32px;
		min-height: 32px;
		max-height: 32px;
		vertical-align: bottom;
	}

	.balloon {
		display: inline-block;
		pointer-events: none;
		position: absolute;
		top: -2.5em;
		left: 0;
		z-index: 1;
		margin: 0;
		padding: 6px 12px;
		line-height: 1em;
		white-space: nowrap;
		font-size: 0.9em;
		color: #fff;
		background: rgba(0, 0, 0, 0.7);
		border-radius: 4px;
		opacity: 0;
		transition: opacity 0.1s linear;

		&:before {
			content: "";
			position: absolute;
			bottom: -8px;
			left: ~"calc(50% - 4px)";
			border-top: solid 4px rgba(0, 0, 0, 0.7);
			border-right: solid 4px transparent;
			border-bottom: solid 4px transparent;
			border-left: solid 4px transparent;
		}
	}

	&:hover .balloon {
		opacity: 1;
	}
}

.ui-message {
	display: block;
	pointer-events: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2048;
	width: 600px;
	margin: 0 auto;
	padding: 16px 32px;
	text-align: center;
	word-wrap: break-word;
	color: #fff;
	background: rgba(0, 0, 0, 0.8);
	transform-origin: center top;
	transform: perspective(1024px) rotateX(90deg);
	opacity: 0;
}

/* Window
 * ---------------------------------------------------------------- */
.ui-window {
	position: fixed;
	z-index: 4096;
	bottom: 0;
	right: 0;
	width: auto;
	height: auto;
	overflow: hidden;
	background: transparent;
	box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	opacity: 0;
	transform-origin: 50% 100%;

	> header {
		user-select: none;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		width: 100%;
		height: 38px;
		cursor: move;
		color: #d4d2d1;
		background: #494e51;

		h1, i {
			user-select: none;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: move;
		}

		> h1 {
			display: inline-block;
			overflow: hidden;
			margin: 0 0 0 8px;
			line-height: 38px;
			max-width: ~"calc(100% - 73px)";
			font-size: 1em;
			font-weight: bold;
			white-space: nowrap;
			text-overflow: ellipsis;

			i {
				margin: 0 8px;
			}
		}

		> .buttons {
			float: right;
			font-size: 0;

			> button {
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				display: inline-block;
				vertical-align: bottom;
				padding: 0;
				background: transparent;
				border: none;
				outline: none;
				cursor: pointer;
				color: #d4d2d1;

				&:hover {
					background: rgba(0, 0, 0, 0.2);
					outline: none;
				}

				&:focus {
					outline: none;
				}

				&:active {
					background: rgba(0, 0, 0, 0.4);
					outline: none;
				}

				i {
					pointer-events: none;
					width: 38px;
					line-height: 38px;
					vertical-align: bottom;
				}
			}

			> .close {
			}
		}
	}

	> .content {
		display: block;
		margin: 0;
		padding: 0;
		width: 100%;
		height: ~"calc(100% - 32px)";
		overflow: hidden;
		background: #fff;

		> iframe {
			width: 100%;
			height: 100%;
			border: none;
		}
	}
}

/* Tooltip
 * ---------------------------------------------------------------- */
.ui-tooltip {
	pointer-events: none;
	display: block;
	position: absolute;
	z-index: 128;
	margin: 0;
	padding: 4px 8px;
	white-space: nowrap;
	font-size: 0.8em;
	color: #fff;
	background: rgba(0, 0, 0, 0.8);
	border-radius: 4px;

	&:before {
		content: "";
		display: block;
		position: absolute;
		bottom: -8px;
		left: ~"calc(50% - 4px)";
		border-top: solid 4px rgba(0, 0, 0, 0.8);
		border-right: solid 4px transparent;
		border-bottom: solid 4px transparent;
		border-left: solid 4px transparent;
	}
}

/* Album
 * ---------------------------------------------------------------- */
#misskey-album-container {

	#misskey-album-background {
		position: fixed;
		z-index: 1024;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		opacity: 0;
	}

	#misskey-album {
		position: fixed;
		z-index: 1025;
		top: 32px;
		left: 32px;
		bottom: 32px;
		right: 32px;
		//height: ~"calc(100% - 128px)";
		// border: solid 2px rgba(255, 255, 255, 0.2);
		&, * {
			user-select: none;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			cursor: default;

			&:not(i) {
				font-family: 'Proxima Nova Reg', "FOT-スーラ Pro M", 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', sans-serif;
			}
		}

		.context-menu {
			display: none;
			position: fixed;
			z-index: 2;
			background: #fff;
			box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);

			&[data-active='true'] {
				display: block;
			}

			> ol,
			> ul {
				display: block;
				position: relative;
				margin: 0;
				padding: 8px 0;
				list-style: none;
				border-bottom: solid 1px #eee;

				&:last-child {
					border-bottom: none;
				}

				> li {
					min-width: 14em;
					padding: 8px 16px;
					color: #4D5965;

					&:hover {
						background: @themeColor;
						color: contrast(@themeColor, #000, #fff, 70%);
					}

					> a {
						text-decoration: none;
						cursor: default;
						color: inherit;
						transition: none;
					}

					i {
						width: 1em;
						margin-right: 0.5em;
						text-align: center;

						& + p {
							margin-left: 0;
						}
					}

					p {
						display: inline;
						margin: 0;
						margin-left: 1.5em;
					}
				}
			}
		}

		> header {
			z-index: 1;
			//box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
			height: ~"calc(1em + 32px)";
			background: #2A3740;

			&:after {
				content: '';
				display: block;
				clear: both;
			}

			> .uploader {
				float: left;

				> input {
					display: none;
				}

				button {
					display: block;
					-webkit-appearance: none;
					-moz-appearance: none;
					appearance: none;
					cursor: pointer;
					box-sizing: border-box;
					padding: 12px 16px;
					margin: 0;
					font-size: 1em;
					color: #888;
					outline: none;
					border: none;
					border-radius: 0;
					box-shadow: none;
					background: transparent;
					transition: all .1s ease;
					cursor: pointer;

					* {
						cursor: pointer;
					}

					&:hover {
						color: @themeColor;
					}

					&:focus {
						color: @themeColor;
					}

					&:active {
						color: darken(@themeColor, 10%);
					}

					i {
						margin-right: 0.5em;
						font-family: FontAwesome;
					}
				}
			}

			> .chooser {
				float: right;
				margin: 4px 0px 4px 4px;
				padding-right: 16px;
				border-right: solid 1px #333;

				button {
					display: block;
					-webkit-appearance: none;
					-moz-appearance: none;
					appearance: none;
					cursor: pointer;
					box-sizing: border-box;
					padding: 8px 16px;
					margin: 0;
					font-size: 1em;
					color: #fff;
					outline: none;
					border: none;
					border-radius: 0;
					box-shadow: none;
					background: @themeColor;
					transition: all .1s ease;
					cursor: pointer;

					* {
						cursor: pointer;
					}

					&:hover {
						background: lighten(@themeColor, 10%);
					}

					&:focus {
						background: lighten(@themeColor, 10%);
					}

					&:active {
						background: darken(@themeColor, 10%);
					}

					i {
						margin-right: 0.5em;
						font-family: FontAwesome;
					}
				}
			}

			> nav {
				float: left;
			}

			.close {
				display: block;
				float: right;
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				cursor: pointer;
				box-sizing: border-box;
				padding: 12px 16px;
				margin: 0;
				font-size: 1em;
				color: #888;
				outline: none;
				border: none;
				border-radius: 0;
				box-shadow: none;
				background: transparent;
				transition: all .1s ease;
				cursor: pointer;

				* {
					cursor: pointer;
				}

				&:hover {
					color: @themeColor;
				}

				&:focus {
					color: @themeColor;
				}

				&:active {
					color: darken(@themeColor, 10%);
				}
			}
		}

		> .browser {
			display: block;
			position: relative;
			width: 100%;
			height: ~"calc(100% - (1em + 32px))";
			overflow: scroll;
			background: #21282F;

			> .selection {
				display: none;
				box-sizing: border-box;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				width: 0;
				height: 0;
				border: solid 1px @themeColor;
				background: fade(@themeColor, 50%);
				opacity: 0;
			}

			> .files {
				display: block;
				position: relative;
				margin: 0;
				padding: 0 19px;
				list-style: none;

				&:after {
					content: '';
					display: block;
					clear: both;
				}

				> .item {
					display: block;
					float: left;
					margin: 28px 12px;
					padding: 0;
					width: 150px;
					height: 110px;

					&[data-selected=true] {
						> .content {
							//border: solid 4px @themeColor;
							outline: solid 4px @themeColor;

							&:hover {
								//border: solid 4px lighten(@themeColor, 20%);
								outline: solid 4px lighten(@themeColor, 10%);

								> .name {
									background: lighten(@themeColor, 10%);
								}
							}

							> .name {
								color: contrast(@themeColor, #000, #fff, 70%);
								background: @themeColor;
							}
						}
					}

					> .content {
						box-sizing: border-box;
						position: relative;
						width: 100%;
						height: 100%;
						//border: solid 4px #eee;
						outline: solid 4px transparent;
						//box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
						background-size: 50%;
						background-position: 50%;
						background-repeat: no-repeat;
						transition: outline 0.1s ease;

						&:hover {
							//border: solid 4px #ddd;
							outline: solid 4px #353535;
						}

						> .name {
							display: block;
							position: absolute;
							top: 110px;
							width: ~"calc(100% + 8px)";
							margin: 0 0 0 -4px;
							padding: 4px 0 4px 0;
							font-size: 0.8em;
							text-align: center;
							word-wrap: break-word;
							color: #8899aa;
							transition: background 0.1s ease, color 0.1s ease;
						}
					}

					&.file[data-mimetype='image/png'],
					&.file[data-mimetype='image/jpeg'],
					&.file[data-mimetype='image/gif'],
					&.file[data-mimetype='image/bmp'],
					&.file[data-mimetype='image/webp'],
					&.file[data-mimetype='image/tiff'] {
						> .content {
							background-color: #fff;
							background-repeat: no-repeat;
							background-position: center center;
							//background-size: contain;
							background-size: cover;

							&:hover {
								//background-size: cover;
							}
						}
					}
				}
			}
		}

		> .uploads {
			display: none;
			position: fixed;
			bottom: 0;
			right: 0;
			width: 512px;
			background: #000;
			border-top: solid 1px #404040;
			border-left: solid 1px #404040;
			color: #fff;

			> ol {
				display: block;
				position: relative;
				margin: 0;
				padding: 0;
				height: 192px;
				overflow: scroll;
				list-style: none;

				> li {
					padding: 8px;
					border-bottom: solid 1px #404040;

					p {
						margin: 0 0 4px 0;
						font-size: 0.9em;
					}

					progress {
						-webkit-appearance: none;
						-moz-appearance: none;
						appearance: none;
						display: block;
						margin: 0;
						width: 100%;
						height: 8px;
						border: none;
						border-radius: 0;
						overflow: hidden;

						&::-webkit-progress-value {
							background-color: @themeColor;
						}

						&::-webkit-progress-bar {
							background-color: #000;
						}

						&:not([value])::-webkit-progress-bar {
							background-image: url('/resources/common/images/indeter.gif');
						}
					}
				}
			}
		}
	}
}

.ui-autocomplete {
	z-index: 1;
	margin-top: ~"calc(1em + 8px)";
	max-height: 190px;
	overflow: auto;
	border: solid 1px #E8D9D1;
	border-radius: 4px;
	background: #fff;
	transition: left 0.2s ease;

	> ol {
		display: block;
		margin: 0;
		padding: 4px 0;
		list-style: none;

		> li {
			a {
				display: inline-block;
				z-index: 1;
				box-sizing: border-box;
				width: 100%;
				padding: 4px 12px;
				vertical-align: top;
				white-space: nowrap;
				overflow: hidden;
				color: #735648;
				font-size: 0.9em;
				cursor: default;
				transition: none;

				&:hover,
				&:focus {
					color: #fff;
					background: @themeColor;
					text-decoration: none;
				}

				&:active {
					color: #fff;
					background: darken(@themeColor, 10%);
				}

				* {
					pointer-events: none;
				}
			}
		}

		&.users {
			> li {
				a {
					&:hover,
					&:focus {
						.name {
							color: #fff;
						}

						.screen-name {
							color: #fff;
						}
					}

					&:active {
						.name {
							color: #fff;
						}

						.screen-name {
							color: #fff;
						}
					}

					.avatar {
						vertical-align: middle;
						min-width: 28px;
						min-height: 28px;
						max-width: 28px;
						max-height: 28px;
						margin: 0 8px 0 0;
						border-radius: 100%;
					}

					.name {
						margin: 0 8px 0 0;
						/*font-weight: bold;*/
						font-weight: normal;
					}

					.screen-name {
						font-weight: normal;
						opacity: 0.5;
					}
				}
			}
		}
	}
}

.cropper-container {
	position: relative;
	font-size: 0;
	line-height: 0;
	-ms-touch-action: none;
	touch-action: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	direction: ltr !important;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
}

.cropper-container img {
	display: block;
	width: 100%;
	min-width: 0 !important;
	max-width: none !important;
	height: 100%;
	min-height: 0 !important;
	max-height: none !important;
	image-orientation: 0deg !important;
}

.cropper-canvas, .cropper-crop-box, .cropper-drag-box, .cropper-modal, .cropper-wrap-box {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.cropper-wrap-box {
	overflow: hidden;
}

.cropper-drag-box {
	background-color: #fff;
	filter: alpha(opacity=0);
	opacity: 0;
}

.cropper-dashed, .cropper-modal {
	filter: alpha(opacity=50);
	opacity: .5;
}

.cropper-modal {
	background-color: #000;
}

.cropper-view-box {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	outline: #39f solid 1px;
	outline-color: rgba(51,153,255,.75);
}

.cropper-dashed {
	position: absolute;
	display: block;
	border: 0 dashed #eee;
}

.cropper-dashed.dashed-h {
	top: 33.33333%;
	left: 0;
	width: 100%;
	height: 33.33333%;
	border-top-width: 1px;
	border-bottom-width: 1px;
}

.cropper-dashed.dashed-v {
	top: 0;
	left: 33.33333%;
	width: 33.33333%;
	height: 100%;
	border-right-width: 1px;
	border-left-width: 1px;
}

.cropper-center {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 0;
	height: 0;
	filter: alpha(opacity=75);
	opacity: .75;
}

.cropper-center:after, .cropper-center:before {
	position: absolute;
	display: block;
	content: " ";
	background-color: #eee;
}

.cropper-center:before {
	top: 0;
	left: -3px;
	width: 7px;
	height: 1px;
}

.cropper-center:after {
	top: -3px;
	left: 0;
	width: 1px;
	height: 7px;
}

.cropper-face, .cropper-line, .cropper-point {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	filter: alpha(opacity=10);
	opacity: .1;
}

.cropper-face {
	top: 0;
	left: 0;
	background-color: #fff;
}

.cropper-line, .cropper-point {
	background-color: #39f;
}

.cropper-line.line-e {
	top: 0;
	right: -3px;
	width: 5px;
	cursor: e-resize;
}

.cropper-line.line-n {
	top: -3px;
	left: 0;
	height: 5px;
	cursor: n-resize;
}

.cropper-line.line-w {
	top: 0;
	left: -3px;
	width: 5px;
	cursor: w-resize;
}

.cropper-line.line-s {
	bottom: -3px;
	left: 0;
	height: 5px;
	cursor: s-resize;
}

.cropper-point {
	width: 5px;
	height: 5px;
	filter: alpha(opacity=75);
	opacity: .75;
}

.cropper-point.point-e {
	top: 50%;
	right: -3px;
	margin-top: -3px;
	cursor: e-resize;
}

.cropper-point.point-n {
	top: -3px;
	left: 50%;
	margin-left: -3px;
	cursor: n-resize;
}

.cropper-point.point-w {
	top: 50%;
	left: -3px;
	margin-top: -3px;
	cursor: w-resize;
}

.cropper-point.point-s {
	bottom: -3px;
	left: 50%;
	margin-left: -3px;
	cursor: s-resize;
}

.cropper-point.point-ne {
	top: -3px;
	right: -3px;
	cursor: ne-resize;
}

.cropper-point.point-nw {
	top: -3px;
	left: -3px;
	cursor: nw-resize;
}

.cropper-point.point-sw {
	bottom: -3px;
	left: -3px;
	cursor: sw-resize;
}

.cropper-point.point-se {
	right: -3px;
	bottom: -3px;
	width: 20px;
	height: 20px;
	cursor: se-resize;
	filter: alpha(opacity=100);
	opacity: 1;
}

.cropper-point.point-se:before {
	position: absolute;
	right: -50%;
	bottom: -50%;
	display: block;
	width: 200%;
	height: 200%;
	content: " ";
	background-color: #39f;
	filter: alpha(opacity=0);
	opacity: 0;
}

@media (min-width:768px) {
	.cropper-point.point-se {
		width: 15px;
		height: 15px;
	}
}

@media (min-width:992px) {
	.cropper-point.point-se {
		width: 10px;
		height: 10px;
	}
}

@media (min-width:1200px) {
	.cropper-point.point-se {
		width: 5px;
		height: 5px;
		filter: alpha(opacity=75);
		opacity: .75;
	}
}

.cropper-bg {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
}

.cropper-invisible {
	filter: alpha(opacity=0);
	opacity: 0;
}

.cropper-hide {
	position: absolute;
	display: block;
	width: 0;
	height: 0;
}

.cropper-hidden {
	display: none !important;
}

.cropper-move {
	cursor: move;
}

.cropper-crop {
	cursor: crosshair;
}

.cropper-disabled .cropper-drag-box, .cropper-disabled .cropper-face, .cropper-disabled .cropper-line, .cropper-disabled .cropper-point {
	cursor: not-allowed;
}