/*------------------------------*\
	$INTERFACE
\*------------------------------*/

/* ICONS */

@font-face {
	font-family: 'xfwp-icon';
	src: url('../icons/xfwp-icon.eot');
	src: url('../icons/xfwp-icon.eot?53204155#iefix') format('embedded-opentype'),
		 url('../icons/xfwp-icon.woff2') format('woff2'),
		 url('../icons/xfwp-icon.woff') format('woff'),
		 url('../icons/xfwp-icon.ttf') format('truetype'),
		 url('../icons/xfwp-icon.svg#xfwp-icon') format('svg');
}

[class*="xfwp-icon-"]:before {
	display: inline-block;
	font-display: swap;
	font-family: xfwp-icon;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	line-height: 1;
	speak: none;
	text-decoration: inherit;
	text-transform: none;
}

.xfwp-icon-load:before {
	animation: spin 2s linear infinite;
	content: '\e801';
}
.xfwp-icon-comment:before { content: '\e800'; }
.xfwp-icon-like:before { content: '\e802'; }
.xfwp-icon-trophy:before { content: '\e803'; }
.xfwp-icon-pin:before { content: '\e804'; }
.xfwp-icon-code:before { content: '\e805'; }
.xfwp-icon-images:before { content: '\e806'; }

@keyframes spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* BUTTONS */

button.xfwp-button, button.xfwp-button:hover, button.xfwp-button:focus,
button.xfwp-button[disabled], button.xfwp-button[disabled]:hover {
	background-color: #185786;
	border-radius: 2px;
	color: #fff;
	display: inline-block;
	padding: 15px 20px;
}

.xfwp-button .xfwp-icon-load {
	display: none;
	margin-left: 3px;
}

.xfwp-button.xfwp-loading .xfwp-icon-load { display: inline-block; }

/* AVATAR */

.xfwp-avatar {
	align-items: center;
	background-color: #336699;
	border-radius: 50%;
	color: #9fbede;
	display: inline-flex;
	height: 30px;
	justify-content: center;
	text-transform: uppercase;
	width: 30px;
}

span.xfwp-avatar { cursor: default; }

.xfwp-widget .xfwp-avatar {
	height: 30px;
	width: 30px;
}

.comment-view .forum-comment-avatar-image {
	font-size: 20px;
	height: 30px;
	width: 30px;
}

/* BADGES */

.xfwp-badge {
	background-color: #f2930d;
	border-radius: 2px;
	color: #fff;
	font-size: 0.9em;
	padding: 1px 4px;
	white-space: nowrap;
}

.xfwp-badge-green { background-color: #2e9b25; }

/* TABS */

.xfwp-tabs {
	background-color: #f9f9f9;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-width: 0 0 1px;
	padding-top: 6px;
	text-align: center;
}

.xfwp-tab {
	border-radius: 3px;
	color: #1e1e1e;
	cursor: pointer;
	display: inline-block;
	line-height: 1;
	padding: 10px 15px;
}

.xfwp-tab.active {
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-bottom-color: #fff;
	font-weight: bold;
	margin-bottom: -1px !important;
}

.xfwp-tab-content { display: none; }
.xfwp-tab-content.active { display: block; }

/* NOTICES */

.xfwp-alert {
	background-color: #f7fb8d;
	border-radius: 3px;
	margin-bottom: 1em;
	padding: 10px;
}



/*------------------------------*\
	$COMMENTS
\*------------------------------*/

.xfwp-has-comments-tabs .xfwp-comment-active + #comments,
.xfwp-has-comments-tabs .xfwp-comment-active + .wpdiscuz_top_clearing + #comments,
.xfwp-has-comments-tabs .forum-comments,
.xfwp-comments-loaded .forum-comments-more, .forum-comments-footer { display: none; }

.xfwp-comments-loaded .forum-comments-footer { display: block; }
.xfwp-has-comments-tabs .xfwp-comment-active { display: block !important; }

.forum-comment:not(:last-child) { margin-bottom: 15px; }
.comments-tabs, .forum-comments-list:not(:last-child), .forum-comments-title { margin-bottom: 25px; }

/* GENERAL */

.forum-comments-header {
	align-items: center;
	display: flex;
	margin-bottom: 15px;
}

.forum-comments .forum-comments-title {
	flex: 1;
	margin: 0;
}

.forum-comment-username { font-weight: bold; }

.forum-comment .forum-comment-avatar {
	border-bottom: 0;
	display: inline-block;
}

.forum-comment-avatar img { border-radius: 50%; }
.forum-comment-message { position: relative; }

.forum-comment .forum-comment-actions { margin-bottom: 0; }
.forum-comment-like, .forum-comment-attribution { float: right; }

.forum-comment-text blockquote {
	overflow: auto;
	max-height: 250px;
}

.forum-comment-count { margin-left: 5px; }
.forum-comments-more {
	margin-bottom: 0;
	text-align: center;
}

.forum-comments-footer {
	background-color: rgba(0, 0, 0, 0.05);
	border-radius: 4px;
	padding: 20px;
}

/* COMMENT VIEW */

.comment-view .forum-comment:not(:last-child) {
	border-bottom: 1px solid #e7e7e7;
	margin-bottom: 20px;
	padding-bottom: 20px;
}
.comment-view .forum-comment-user {
	overflow: hidden;
	margin-bottom: 15px;
	width: 100%;
}
.comment-view .forum-comment-avatar { margin-right: 5px; }
.comment-view .forum-comment-date, .comment-view .forum-comment-attribution a {
	border-bottom: 0;
	color: #8c8c8c;
	font-size: 0.8em;
}

/* THREAD VIEW */

.thread-view .forum-comment-inner {
	background-color: #fff;
	border: 1px solid #d8d8d8;
	border-radius: 4px;
	width: 100%;
}
.thread-view .forum-comment-user {
	background-color: #f5f5f5;
	border-color: #d8d8d8;
	border-style: solid;
	padding: 15px;
}
.thread-view .xfwp-avatar {
	font-size: 50px;
	height: 100px;
	width: 100px;
}
.forum-comments .forum-comment-byline a, .forum-comments .forum-comment-user a, .forum-comments .forum-comment-actions a { text-decoration: none; }
.thread-view .forum-comment-username { margin-bottom: 0; }
.forum-comment .forum-comment-username a, .forum-comment .forum-comment-like { border-bottom: 0; }
.thread-view .forum-comment-user-title {
	color: #8c8c8c;
	font-size: 0.9em;
	margin-bottom: 0;
}
.thread-view .forum-comment-stats {
	font-size: 0.9em;
	text-align: left;
}
.thread-view .forum-comment-avatar { margin-bottom: 10px; }
.thread-view .forum-comment .forum-comment-avatar {
	border-bottom: 0;
	display: inline-block;
}
.thread-view .forum-comment-message {
	padding: 15px;
	width: 100%;
}
.thread-view .forum-comment-byline {
	border-bottom: 1px solid #e7e7e7;
	font-size: 0.9em;
	line-height: 1;
	margin-bottom: 15px;
	padding-bottom: 8px;
}
.thread-view .forum-comment-byline a {
	border-bottom: 0;
	color: #8c8c8c;
}

/* EXPAND */

.forum-comment-excerpt .forum-comment-message {
	max-height: 450px;
	overflow: hidden;
}
.forum-comment-excerpt .forum-comment-expand { display: block; }
.forum-comment-expand {
	background: linear-gradient(to bottom, rgba(254, 254, 254, 0) 0%, #fefefe 80%);
	display: none;
	height: 120px;
	position: absolute;
		bottom: 0;
		left: 0;
	width: 100%;
}
.forum-comment-expand-trigger {
	color: #f1920d;
	cursor: pointer;
	display: block;
	font-weight: bold;
	margin-top: 85px;
	text-align: center;
	width: 100%;
}

/* REFRESH */

.xfwp-loading .forum-comments-refresh { display: block; }
.forum-comments-refresh {
	display: none;
	font-size: 20px;
}
.forum-comments-refresh .xfwp-icon-load {
	color: #f87b21;
	margin-right: 8px;
}

/* MEDIA PLACEHOLDER */

.xfwp-media-placeholder {
	background-color: #effaff;
	border-radius: 3px;
	padding: 20px 10px 30px;
	text-align: center;
}

.forum-comment .xfwp-media-placeholder p { margin-bottom: 0; }

.xfwp-media-placeholder-icon {
	font-size: 34px;
	line-height: 1;
}

/* UNFURL */

.bbCodeBlock--unfurl:not(:last-child), .xfwp-media-placeholder:not(:last-child) { margin-bottom: 15px; }

.bbCodeBlock--unfurl .contentRow {
	border: 1px solid #d8d8d8;
	border-radius: 3px;
	display: flex;
	padding: 10px;
}

.bbCodeBlock--unfurl .contentRow-header {
	font-size: 1em;
	font-weight: bold;
	line-height: 1.5em;
	margin-bottom: 5px;
}

.bbCodeBlock--unfurl .contentRow-header br,
.bbCodeBlock--unfurl .contentRow-minor br,
.xfwp-hide-images .bbCodeBlock--unfurl .xfwp-media-placeholder,
.xfwp-hide-embeds .bbCodeBlock--unfurl { display: none; }

.bbCodeBlock--unfurl .contentRow-figure {
	flex: 0 0 120px;
	margin-right: 15px;
}

.xfwp-hide-images .bbCodeBlock--unfurl .contentRow-figure {
	flex: inherit;
	margin-right: 0;
}

.bbCodeBlock--unfurl .contentRow-snippet {
	font-size: 0.9em;
	line-height: 1.4em;
	margin-bottom: 10px;
}

.bbCodeBlock--unfurl .contentRow-minor {
	color: rgba(0, 0, 0, 0.7);
	font-size: 0.8em;
	line-height: 1;
}

.bbCodeBlock--unfurl .bbCodeBlockUnfurl-icon { width: 13px; }
.bbCodeBlock--unfurl .js-unfurl-favicon, .bbCodeBlock--unfurl .contentRow-minor p { display: inline-block; }
.bbCodeBlock--unfurl .contentRow p { margin-bottom: 0; }
.bbCodeBlock--unfurl p:empty { display: none; }

/* QUERIES */

@media all and (min-width: 900px) {
	.thread-view .forum-comment-inner { display: flex; }
	.thread-view .forum-comment-user {
		border-radius: 4px 0 0 4px;
		border-width: 0 1px 0 0;
		flex: 0 0 180px;
		min-width: 0;
		text-align: center;
	}
	.thread-view .forum-comment-stat { display: block; }
}

@media all and (max-width: 900px) {
	.thread-view .xfwp-avatar {
		font-size: 25px;
		height: 50px;
		width: 50px;
	}
	.thread-view .forum-comment-user {
		border-radius: 4px 4px 0 0;
		border-width: 0 0 1px;
		display: flex;
	}
	.thread-view .forum-comment-avatar {
		flex: 0 0 50px;
		margin-right: 10px;
	}
	.thread-view .forum-comment-stat { margin-right: 5px; }
}



/*------------------------------*\
	$USER_SYNC
\*------------------------------*/

#xfwp_users_canvas, .xfwp-user { margin-bottom: 15px; }

.xfwp-last-update, .xfwp-users .xfwp-icon-load { display: none; }

.xfwp-user-verify { position: relative; }

.xfwp-users input.xfwp-username { padding: 15px; }

.xfwp-users input[type="text"]:read-only,
.xfwp-users input[type="number"]:read-only,
.xfwp-users input[type="email"]:read-only {
	background: rgba(255, 255, 255, 0.5);
	border-color: rgba(220, 220, 222, 0.75);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04);
	color: rgba(44, 51, 56, 0.5);
	cursor: default;
}

.xfwp-delete-link {
	cursor: pointer;
	display: inline-block;
	font-size: 14px;
	font-weight: normal;
	line-height: 22px;
	position: absolute;
		top: 17px;
		right: 20px;
	z-index: 10;
}

.xfwp-delete-link input:checked + label {
	color: #cc1818;
	font-weight: bold;
}

.xfwp-delete-link label { margin-left: 3px; }

.xfwp-users.xfwp-loading .xfwp-icon-load {
	display: inline-block;
	margin-left: 5px;
}



/*------------------------------*\
	$WIDGET
\*------------------------------*/

.xfwp-widget {
	font-size: 15px;
	line-height: 23px;
}

.widget_xfwp_widget .xfwp-widget a {
	border-bottom: 0;
	text-decoration: none;
}

.xfwp-widget-section {
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.15);
	color: #777;
}

.xfwp-widget-inline:not(:last-child) { margin-bottom: 25px; }

.xfwp-widget .xfwp-widget-section-title {
	font-size: 19px;
	line-height: 25px;
	margin-bottom: 0;
	padding: 12px;
}

.xfwp-widget .xfwp-widget-section-title a { text-decoration: none; }

/* TABS */

.xfwp-widget.xfwp-tabbed .xfwp-tabs { border-radius: 3px 3px 0 0; }
.xfwp-widget.xfwp-tabbed .xfwp-widget-section, .xfwp-widget-items-footer { border-radius: 0 0 3px 3px; }
.xfwp-widget-inline { border-radius: 3px; }
.xfwp-widget .xfwp-tabs { border-width: 1px 1px 0; }

/* WIDGET ITEM */

.xfwp-widget-item {
	display: flex;
	padding: 12px;
}

.xfwp-widget-item:not(:last-child) { border-bottom: 1px solid rgba(0, 0, 0, 0.15); }

.xfwp-widget .xfwp-widget-item-title {
	font-weight: bold;
	margin-bottom: 3px;
}

.xfwp-widget .xfwp-widget-item-details a { text-decoration: none; }

.xfwp-widget-item  .xfwp-widget-item-byline {
	font-size: 0.9em;
	margin-bottom: 0;
}

.xfwp-widget-item-icon {
	flex: 0 0 30px;
	text-align: center;
}

.xfwp-widget-icon-inner { position: relative; }

.xfwp-widget-item-icon img { border-radius: 50%; }

.xfwp-widget-item-details { padding-left: 10px; }

.xfwp-widget-items-footer {
	background-color: #fcfcfc;
	border-top: 1px solid rgba(0, 0, 0, 0.15);
	font-size: 0.85em;
	padding: 7px 12px;
}

/* FORUMS */

.xfwp-widget-message-count, .xfwp-widget-item-icon .xfwp-widget-icon-inner { color: #777; }

.xfwp-widget-forums .xfwp-widget-item-icon { font-size: 30px; }

.xfwp-widget-message-count {
	display: block;
	font-size: 13px;
	font-weight: bold;
}

.xfwp-widget-forums .xfwp-widget-item-title {
	font-size: 1.1em;
	line-height: 1.5em;
}

.xfwp-widget-forums .xfwp-widget-item-subtitle, .xfwp-widget-forums .xfwp-widget-item-description { margin-bottom: 5px; }
.xfwp-widget-forums .xfwp-widget-item-byline { font-style: italic; }

/* STATS */

.forum-stats { padding: 6px 12px 6px 12px; }

.xfwp-widget .forum-stats p { margin-bottom: 5px; }

.forum-stats .stat-count { float: right; }

.forum-stat-sep {
	border-top: 1px solid rgba(0, 0, 0, 0.15);
	margin-top: 10px;
	padding-top: 7px;
}

.forum-users-online {
	background-color: #2d9542;
	border-radius: 50%;
	display: inline-block;
	height: 12px;
	margin-right: 3px;
	width: 12px;
	vertical-align: middle;
}