@charset "utf-8";
/* _user_notify.html 用 */

.user-notify-loaded { display:none!important; }
.user-notify-loaded:before { content:'user notify css loaded'; }

#user-notifies {
	display:block;
}
.user-notifies-content {
	margin:0; padding:0;
	max-height:80vh;
	overflow-y:auto;
	overflow-x:hidden;
	
	position:fixed;
	top:0; left:0; right:0;
	z-index:32767;
	
	color:#444;
	background:white;
	line-height:1.1;
	border:1px solid #ccc;
	box-shadow:0 3px 3px -3px rgba(0,0,0,.5);
	
}

#user-notifies:not(.shown) .user-notifies-content {
	box-shadow:none;
}

.user-notifies-title {
	display:-webkit-flex;
	display:flex;
	-webkit-justify-content:flex-end;
	justify-content:flex-end;
	border-bottom:1px dotted #ccc;
	
	display:none;
}
.user-notifies-title > * {
	padding:.25em;
}
.user-notifies-title > *:first-child {
	-webkit-flex-grow:1;
	flex-grow:1;
}
#user-notifies-close {
	cursor:pointer;
}
.user-notifies-title .fa {
	font-size:150%;
	opacity:.5;
}

.user-notify {
	display:block;
	margin:0; padding:0;
	position:relative;
	overflow:hidden;
}

.user-notify.has-detail > .user-notify-overview {
	cursor:pointer;
}

.user-notify.user-read > .user-notify-overview:not(.opened):not(:hover) {
	color:#888;
	/* backround:#eee; */
}

.user-notify-overview { background:white; position:relative; z-index:10; }
.user-notify-date { }
.user-notify-message {}
.user-notify-detail {
	background:white; position:relative; z-index:5;
	/* box-shadow:0 4px 4px -4px inset, 0 -4px 4px -4px inset; */
}
.user-notify-detail-content {
	padding:1em .5em 1em 1.5em;
	font-size:80%;
}
.user-notify-detail-content > *:first-child { margin-top:0; }
.user-notify-detail-content > *:last-child { margin-bottom:0; }

.user-notify-detail-content a {
	text-decoration:none;
	border-bottom:1px dotted;
	cursor:pointer;
}
.user-notify-detail-content a:hover {
	text-decoration:none;
	border-bottom:1px solid;
}


.user-notify:not(.has-detail) .user-notify-detail {
	display:none;
}

.user-notify.has-detail > .user-notify-overview:not(.opened) + .user-notify-detail > .user-noify-detail-content {
	-webkit-transform:translateY(-100%);
	transform:-100%;
}
.user-notify.has-detail > .user-notfify-overview.opened {
	padding-bottom:0;
}
.user-notify.has-detail > .user-notify-overview.opened + .user-notify-detail {
	border-top:1px dotted #ccc;
}
.user-notify.has-detail:not(:last-child) > .user-notify-overview.opened + .user-notify-detail {
	border-bottom:1px solid #ccc;
}

.user-notify-detail,
.user-notify-detail-content,
.user-notifies-content {
	-webkit-transition-duration:.2s;
	-webkit-transition-property:transform, margin, max-height;
	transition-duration:.2s;
	transition-property:transform, margin, max-height;
}

.user-notifies-content {
	margin-left:.5em;
	margin-right:.5em;
}
.user-notify.has-detail > .user-notify-overview:not(.opened) +.user-notify-detail > .user-notify-detail-content,
#user-notifies:not(.shown) > .user-notifies-content {
	-webkit-transform:translateY(-100%);
	transform:translateY(-100%);
	margin-top:0;
	/*
	-webkit-transition-timing-function:ease-in;
	transition-timing-function:ease-in;
	*/
}
.user-notify.has-detail > .user-notify-overview:.opened + .user-notify-detail > .user-notify-detail-content,
#user-notifies.shown >.user-notifies-content {
	-webkit-transform:translateY(0);
	transform:translateY(0);
	/*
	-webkit-transition-timing-function:ease-\in;
	transition-timing-function:ease-in;
	*/
}
.user-notify.has-detail > .user-notify-overview:not(.opened) + .user-notify-detail {
	max-height:0!important;
	overflow:hidden;
}
.user-notify.has-detail > .user-notify-overview.opened + .user-notify-detail {
	overflow:hidden;
	max-height:10em; /* overwrite by js */
}

#user-notifies:not(.shown) > .user-notifies-content {
	margin-top:0;
}
#user-notifies.shown >.user-notifies-content {
	margin-top:.5em;
}

@keyframes blink {
	0% { opacity:0; }
	50% { opacity:1; }
	100% { opacity:0; }
}

#user-notifies-toggle {
	cursor:pointer;
}
#user-notifies-toggle .fa {
	font-size:125%;
	line-height:.8em;
	vertical-align:-.125em;
}

#user-notifies-toggle:not(.has-unread) {
	opacity:.5;
}

#user-notifies-toggle.has-unread {
	-webkit-animation-name: blink;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count:infinite;
	animation-name: blink;
	animation-duration: 1s;
	animation-iteration-count:infinite;
	animation-timing-function:ease;
}

#user-notifies-toggle:not(.has-notifies) {
}

.user-notify.template { display:none !important; }

.user-notify-overview { display:-webkit-flex; display:flex; -webkit-align-items:flex-start; align-items:flex-start; }
.user-notify-overview > * { -webkit-flex:0 0 auto; flex:0 0 auto; padding:.25em; }
.user-notify-overview > .user-notify-date { }
.user-notify-overview > .user-notify-message { -webkit-flex:1 1 auto; flex:1 1 auto;}

.user-notify-date:before {
	font-family:FontAwesome;
	content:"\f0da";
	transition-property:transform;
	transition-duration:.2s;
	transition-timing-function:linear;
	display:inline-block;
	margin-right:.5em;
}
.user-notify:not(.has-detail) .user-notify-date:before {
	visibility:hidden;
}
.user-notify-overview.opened > .user-notify-date:before {
	transform:rotate(90deg);
}

.user-notifies-title + .user-notify { padding-top:.25em; }
.user-notify:last-child { padding-bottom:.25em;  }

/* 自動表示の場合は unread なものは表示しない */
#user-notifies.shown.auto-shown .user-notify.user-read {
	display:none;
}

/* お知らせなし */
.user-notify-nothing {
	color:#888;
	padding:.25em .5em;
}
#user-notifies .user-notify + .user-notify-nothing {
	display:none! inportant;
}
.user-notify-history {
	text-align: right;
	padding:.25em .5em;
}