.dialog {
	position: absolute;
	width: 30.0rem;
	height: 50%;
	top: 25%;
	left: calc(50% - 15.0rem);
	background-color: #fff;
	display: none;
	z-index: 121;
	padding: 1.0rem;
	box-shadow: 5px 5px 10px;
}
.dialog.SP {
	width: 70%;
	left: 15%;
	height: 70%;
	top: 15%;
}

/* adv-selection */
#selection>.list>div {
	border-radius: 2px;
	border: solid 1px #fff;
}
#selection>.list>.select {
	background-color: #eee;
	font-weight: bold;
	border: solid 1px #ddd;
}
#selection>.list>div>a {
	display: inline-block;
	width: 100%;
}
#selection>.list {
	height: calc(100% - 2.0em);
	overflow: auto;
	margin-left: 0.5em;
}
#selection>.list>div {
	line-height: 1.0em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding: 0.5em;
}
#selection>.list>div:hover {
	background-color: #eee;
	border-color: #eee;
}
#selection>.adv-input {
	border: 1px solid #ddd;
	width: calc(100% - 2.5em);
	margin-bottom: 0.5em;
}
#selection>.close {
	margin: 0 0 0.5em 0.5em;
	display: inline-block;
}
#selection>.close>a {
	background-image: url(../imgs/batsu1.png);
}

/* adv-select */
#select.PC {
	height: auto;
}
#select.PC.w-calc {
	padding-right: 0.25em;
}
#select.SP {
	height: auto;
}
#select.PC>.list {
	height: 100%;
	overflow: auto;
}
#select>.list>a {
	display: block;
	padding: 0.1em;
}
#select.SP>.list {
	text-align: center;
}
#select.SP>.list>a {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding: 0.25em;
	width: 100%;
}
#select>.list>.select {
	font-weight:bold;
}

/* adv-selectmulti */
#selectmulti.PC {
	height: auto;
	padding-right: 0.25em;
}
#selectmulti.SP {

}
#selectmulti.PC>.list {
	height: calc(100% - 1.5em);
	overflow: auto;
}
#selectmulti.SP>.list {
	text-align: center;
}
#selectmulti.SP>.list>div>a {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding: 0.25em;
	display: inline-block;
}
#selectmulti>.list>.select {
	font-weight:bold;
}
#selectmulti>a {
	margin-top: 0.5em;
	float: right;
	text-decoration: underline;
}
#selectmulti>.list>div>input {
	height: 1.0em;
}
#selectmulti-view,#input-view {
	position: absolute;
	top: calc(50vh - 3.0rem);
	left: calc(50vw - 15.0rem);
	background-color: #fff;
	display: none;
	z-index: 121;
	padding: 0.25em;
	box-shadow: 5px 5px 10px;
	border-radius: 3px;
	margin-right: 0.5em;
}

/* error */
#error>div:first-child {
	color: #f00;
	font-size: 1.2rem;
}
#error>div {
	margin-bottom: 0.25rem;
}
#error>.close {
	position: absolute;
	top: 16.0rem;
	margin-left: calc(50% - 2.5em);
	font-size: 1.2em;
}

/* api diffrence */
#version-diff>div {
	color: #f00;
}
#version-diff>a {
	display: block;
	font-size: 1.2rem;
	text-align: center;
	margin: 3.0em;
	text-decoration: underline;
}

/* save dialog */
#adv-dialog-back {
	position: fixed;
	top: 0;
	left:0;
	width: 100vw;
    height: 100vh;
	background-color: #000;
	z-index: 120;
	opacity: 0.5;
	display: none;
}
#adv-dialog {
	position: absolute;
	width: 30.0rem;
	height: 6.0rem;
	top: calc(50vh - 3.0rem);
	left: calc(50vw - 15.0rem);
	background-color: #fff;
	display: none;
	z-index: 121;
	padding: 1.0rem;
	box-shadow: 5px 5px 10px;
	border-radius: 3px;
}
#adv-dialog.SP {
	width: 80%;
	left: calc(50vw - 40%);
}
#adv-dialog>div:last-child>* {
	float: right;
	margin-right: 0.5rem;
}

/* notify-list */
#notify-list {
	position: absolute;
	width: 30.0rem;
	height: 60%;
	background-color: #fff;
	display: none;
	z-index: 121;
	padding: 1.0rem;
	box-shadow: 5px 5px 10px;
	top: 2.0em;
	left: 6.0em;
	border-radius: 3px;
}
#notify-list.likes {
	left: 9.0em;
}
#notify-list.SP {
	width: 80%;
	left: 10%;
	height: 80%;
	top: 3.0em;
}
#notify-list>.not-found {
	margin-top: 0.5em;
}
#notify-list {
	font-size: 0.93em;
	overflow: auto;
}
#notify-list>.title {
	font-weight: bold;
	margin-bottom: 0.5em;
}
#notify-list>.columns {
	padding: 0.25em;
	cursor: pointer;
	border-bottom: 1px solid #ddd;
}
#notify-list>.columns.unread {
	background-color: #FFE6CE;
}

#notify-list>.columns:hover {
	background-color: #eee;
}
#notify-list>.columns>.channelName {
}
#notify-list>.columns>.channelName::before {
	content: attr(data-item);
}
#notify-list>.columns>.info {
	color: #ccc;
}
#notify-list>.columns>.content {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
#notify-list>.columns>.content>.download {
	background-image: url(../imgs/files2.png);
	font-size: 0.93em;
}
#notify-list>.columns>.photo {
	float: left;
	height: 2.5em;
	width: 2.5em;
	overflow: hidden;
	border-radius: 50%;
	margin-right: 0.5em;
}
#notify-list>.columns>.photo>img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#notify-list.likes>.columns>.photo {
	display: none;
}
#notify-list.likes>.columns>.channelName {
	display: none;
}
#notify-list.likes>.columns>.info {
	color: #000;
}

#photo {
	position: absolute;
	display: none;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
 	z-index: 121;
 	border-radius: 2px;
}
#photo.yoko.open {
	background-color: #fff;
	box-shadow: 5px 5px 10px;
	padding: 0.25em;
	max-height: 100%
}
#photo.tate.open {
	background-color: #fff;
	box-shadow: 5px 5px 10px;
	padding: 0.25em;
	max-width: 100%
}
#photo-close {
	position: absolute;
	z-index: 999;
	margin: 0.5em;
	left: calc(100% - 8.5rem);
	display: none;
}
#photo-close>a {
	background-image: url(../imgs/batsu3.png);
	font-size: 1.0rem;
	color: #fff;
}

/* preset */
#preset {
	position: absolute;
	top: 8.0em;
	left: 35.0em;
	width: 15.0em;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 3px;
	padding: 0.5em 1.0em 1.0em 1.0em;
	display: none;
}
#preset.open {
	display: inline-block;
}
#preset.SP.open {
	top: 8.0em;
	left: calc(100% / 2 - 7.5em);
}
#preset>a {
	display: inline-block;
	border: 1px solid #ddd;
	border-radius: 3px;
	width: 17%;
	text-align: center;
	padding: 0.1em 0 0.1em 0;
}
#preset>a:hover {
	background-color: #eee;
}
#preset>div {
	font-size: 0.93em;
}
#preset>.recs>a {
	display: block;
	margin-left: 0.5em;
}

/* video */
#video-control {
	display: none;
}
#video {
	position: absolute;
	top: 9.0rem;
	left: calc(100% - 23.0rem);
	width: 23.0rem;
	display: none;
}
#video.SP {
	top: 2.6rem;
	left: 55%;
	width: 45%;
}
#video.SP.wide {
	left: 0;
	width: 100%;
}
#video>.user {
	cursor: pointer;
}
#video.PC>.user {
	width: 50%;
	float: right;
	padding: 0 0.25rem 0.25rem 0;
}
#video.SP>.user {
	width: 100%;
	float: right;
	padding: 0.1rem;
}
#video.PC>.user.wide {
	width: 100%;
}
#video.PC>.user.narrow {
	width: 4.0em;
}
#video.SP>.user.wide {
	width: 100%;
	max-width: 32.0em;
}
#video.SP>.user.narrow {
	width: 4.0em;
}
#video>.user>video {
	width: 100%;
	border-radius: 2px;
	border: 2px solid #fe9700;
}
#video>.self-view {
	position: fixed;
	bottom: 0;
	right: 0;
	margin: 0 1.0em 4.0em 0;
	cursor: pointer;
}
#video.SP>.self-view {
	margin-right: 0.5em;
}
#video.SP>.self-view.wide {
	width: 45%;
}
#video>.self-view>video {
	width: 4.5em;
	border-radius: 3%;
	border: 2px solid #fe9700;
	object-fit: cover;
}
#video.SP>.self-view>video {
	width: 4.0em;
}
#video>.self-view.wide>video {
	width: 23.0em;
}
#video.SP>.self-view.wide>video {
	width: 100%;
}
#video>.self-view>.disconnect {
	display: block;
	border: 1px solid #ddd;
	border-radius: 2px;
	text-align: center;
	margin-bottom: 0.25em;
	font-size: 0.86em;
	background-color: #fff;
}