.content-container {
	margin-top: 80px;
	background: transparent;
	border: 0;
	padding: 0 16px;
	max-width: 960px;
	border-radius: 12px;
}

.navbar .nav > li {
	line-height: 40px;
}

/* Active tab styling in top navbar */
.navbar .nav > li > a {
    border-radius: 6px; /* small rounded corners */
    padding: 3px 12px;   /* vertical rhythm */
}
.navbar .nav > li.active > a,
.navbar .nav > li > a:hover {
    background: #eef2ff;
    color: #0a6bbd !important;
}


/* Card-like topic blocks */
.article-wrapper {
	padding: 16px;
	border: 1px solid #eee;
	background: #fff;
	border-radius: 12px;
	margin: 12px 0;
	line-height: 1.8em;
	box-shadow: 0 1px 2px rgba(16,24,40,0.04);
	transition: box-shadow .15s ease, transform .15s ease;
}

.article-wrapper:hover {
	box-shadow: 0 6px 16px rgba(16,24,40,0.08);
	transform: translateY(-1px);
}

.thumb {
	float: right;
	margin: 0.5em 1em;
	overflow: hidden;
	text-align: center;
	vertical-align: middle;
	width: 200px;
	height: 130px;
	border-radius: 8px;
	background-color: #f2f4f7;
}

.topic { max-width: 960px; }
.aspect { max-width: 900px; }

.article-wrapper a { color: #0f4c81; }
.article-wrapper a:hover { color: #0a6bbd; text-decoration: none; }
.article-wrapper a:visited { color: #6b3f57; }

.article-wrapper .topic-header {
	font-size: 0.9em;
	display: flex;
	align-items: center;
	gap: 8px;
}

.cite a {
	background: #f2f4f7;
	color: #344054 !important;
	padding: 2px 8px;
	border-radius: 9999px;
	text-decoration: none;
	border: 1px solid #e5e7eb;
}

.article-wrapper .content-wrapper { margin-top: 0.25em; margin-bottom: 0.6em; }
.article-wrapper .abstract { font-size: 1.0em; color: #475467; line-height: 1.7; }
.article-wrapper .title { font-size: 1.3em; font-weight: 700; color: #1f2937; }
.article-wrapper .more-brief-wrapper { font-size: 0.9em; color: #667085; line-height: 1.5; margin-top: 0.15em; }

/* small person icon for personalized items */
.article-wrapper .content-wrapper img[src*="person.svg"] {
    height: 16px;
    width: 16px;
    margin-right: 4px;
    position: relative;
    top: -2px;
    opacity: 0.9;
}

/* time badge next to source */
.article-wrapper .time-badge {
    font-size: 0.85em;
    color: #667085;
    background: #f2f4f7;
    border: 1px solid #e5e7eb;
    padding: 1px 8px;
    border-radius: 9999px;
}

.article-wrapper .share-button { color: #98a2b3; }

.article-wrapper .icon-social-group { display: none; margin-top: -35px; margin-right: 30px; }
.article-wrapper .mobile-icon-social-group { display: none; margin-top: -35px; margin-right: 0 !important; }

.dup-wrapper { margin-left: 1em; color: #98a2b3; }
.dups { color: #98a2b3 !important; }

.aspect { margin-left: 50px; }

.article-wrapper .more-button {
	text-decoration: none;
	display: inline-block;
	color: #0a6bbd;
	padding: 0 6px;   /* avoid increasing the line box */
	border-radius: 6px;
    line-height: 1.2;
    vertical-align: baseline;
}
.article-wrapper .more-button:hover{ background-color: #e6f0fb; cursor: pointer; }

.article-wrapper .show-more-button { margin-left: 1em; }

.article-wrapper .more-detailed-wrapper { margin-left: 2em; font-size: 0.9em; }

.article-wrapper .share-button { cursor: pointer; margin-left: 1em; }

@media (max-width: 979px) {
	body {
		background-color: white;
	}
	.content-container {
		margin-top: 0px;
		padding: 0px 8px;
		border: 0px;
		border-radius: 0px;
	}

	.navbar .brand {
		padding: 5px 10px;
	}

	.navbar .brand .logo {
		max-height: 30px;
	}


	.article-wrapper { padding: 8px 10px 6px 10px; margin: 8px 0; border-radius: 10px; }
	.article-wrapper .abstract {
		overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.aspect {
		margin-left: 20px;
	}
	.aspect .abstract {
		display: none;
	}
	.aspect .title {
		font-size: 1.1em;
	}	

	.article-wrapper img {
		max-width: 50%;
	}

	.thumb {
		width: 110px;
		height: 72px;
	}
}

#appModal .qr-code {
	width: 200px;
}

#appModal .thumbnail {
	width: 230px;
	height: 300px;
}

/* Load more indicator styling */
#load-more {
    color: #667085;
    padding: 8px 12px;
    display: inline-block;
    border-radius: 6px;
    background: #f2f4f7;
}

.icon-share-weibo {
	width: 16px;
	height: 12px;	
	background-position: 0px 0px;	
	background-image: url("../img/icon_share_weibo.png");
}

.icon-share-wechat {
	width: 16px;
	height: 16px;
	background-position: 0px 0px;	
	background-image: url("../img/icon_share_wechat.png");
}