
.claim-block {
	width: 65%;
	align-self: center;
}

.claim-container {
	display: flex;
	flex-direction: column;
	width: 100%;
}

blockquote.pull-quote {
	justify-self: center;
	-webkit-align-self: center;
	border-color: #f00 !important;
	background-color: #fff5ee;
	border-left: 4px solid #f00;
	padding: 8px 5px 48px 22px;
	font-style: italic;
	font-weight: 500;
	font-size: 18px;
	color: #181d27;
	margin: 0px;
	margin-bottom: 20px;
	width: 60%;
}

.quote-author {
	font-size: 16px;
	color: #535862;
	font-style: normal;
}

.fact-check {
	margin-bottom: 40px;
}

.related-stories-wrapper {
	width: 50%;
	justify-self: center;
	-webkit-align-self: center;
}

.random-stories-wrapper {
	width: 90%;
	justify-self: center;
	-webkit-align-self: center;
}

.random-stories-container {
	position: relative;
	display: -webkit-flex;
	flex-direction: column;
}

.related-stories {
	display: flex;
	flex-direction: column;
	background-color: #fff5ee;
	margin-bottom: 60px;
}

.related-stories a, .related-stories i {
	color: red;
}

.related-stories i {
	margin-right: 15px;
}

.related-stories a:hover {
	color: black;
}

.custom-row {
	width: 100%;
	display: flex;
	flex-direction: row;
}

.custom-col {
	align-content: center;
}

.mobile-story .media-img, .story .media-img {
	width: 100%;
	aspect-ratio: 16/9 !important;
	object-fit: cover;
}

.pub-title {
	color: red;
	font-weight: 600;
	align-content: center;
}

.pub-img {
	width: 65px;
	height: 65px;
	border-radius: 360px;
	border: 3px solid red;
	object-fit: contain;
}

.sm-pub-img {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.sm-pub-row {
	display: flex;
	flex-direction: row;
	align-content: center;
	gap: 20px;
	margin-top: 20px;
	margin-bottom: 60px;
}

.sm-pub-row strong, .sm-pub-row div {
	font-size: 14px;
}

.publisher-row {
	display: flex;
	flex-direction: row;
	align-content: center;
	gap: 20px;
	margin-top: 40px;
	margin-bottom: 10px;
}

.story {
	padding: 10px 20px;
}

.random-stories .story {
	width: 33%;
}

.random-story-row a {
	display: flex;
	flex-direction: row;
}

.link-group {
	width: 100%;
	display: flex;
	flex-direction: row;
}

.link-group h5, .link-group h6 {
	width: 90%;
}

.link-group i {
	width: 10%;
	margin-top: 2%;
	text-align: end;
	color: red;
}

.story-topic {
	color: red;
	font-size: 14px;
	margin-top: 15px;
	margin-bottom: 10px;
}

.footnotes, .intro-block {
	background-color: #fafafa;
	padding: 20px 32px;
	margin-top: 48px;
}

.footnote-container {
	padding: 48px 120px 120px 120px;
	width: 100%;
}

.media-header {
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: stretch;
	gap: 15px;
}

.media-header-block {
	width: 50%;
	justify-self: center;
	-webkit-align-self: center;
	display: flex;
	flex-direction: column;
}

.fa-search {
	margin-left: 10px;
}

.media-body {
	padding-top: 60px;
	border-top: 1px solid #e9eaeb;
	width: 80%;
	justify-self: center;
	-webkit-align-self: center;
}

.media-wrapper {
	padding-top: 60px;
	display: grid;
}

.media-header-img-container {
	width: 100%;
	display: flex;
	justify-content: stretch;
}

.media-header-img {
	object-fit: cover;
	width: 100%;
	min-width: 100%;
	margin-bottom: 80px;
	aspect-ratio: 1520/906;
}

.topic-header {
	width: 70%;
	margin-bottom: 90px;
	margin-top: 30px;
}

.topic-header h1 {
	padding-top: 30px;
	padding-bottom: 20px;
}

.topic-body {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	gap: 64px;
	margin-bottom: 60px;
}

.misleading-media, .misleading-media-2 {
	border: 1px solid #535862;
	border-radius: 16px;
	padding: 24px;
	width: 35%;
}

.all-topic-investigations {
	width: 35%;
	border: 3px solid red;
	padding: 24px;
}

.related-stories-wrapper h6 {
	color: red;
	padding-bottom: 10px;
}

.issue-list, .all-issue-list {}

.issue-list-item-header a {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: nowrap;
	align-content: center;
}

.issue-list-item-header a i {
	height: fit-content;
	align-self: center;
}

.small-text {
	font-size: 16px;
}

.see-more-btn {
	padding: 20px 30px;
	font-family: "Antonio";
	background-color: #535862;
	color: white;
	font-size: 30px;
	font-weight: 700;
	margin-left: auto;
	margin-right: auto;
}

.fa-external-link {
	color: black;
}

.mobile-story {
	display: none;
}

.invest-breadcrumbs {
	font-size: 12px;
}

.content-block-container {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

.title-container {
	justify-self: center;
	-webkit-align-self: center;
	width: 60%;
}

.title-container h2 {
	color: #0085e5;
	font-family: "Plus Jakarta Sans";
}

.content-media-block-container {
	display: flex;
	justify-content: center;
	gap: 5%;
	margin-bottom: 20px;
	position: relative;
}

.content-media-block-container .misleading-media {
	position: absolute;
	left: 0;
	width: 19%;
	margin-left: 1%;
}

.content-media-block-container .misleading-media-2 {
	width: 19%;
	position: absolute;
	right: 0;
	margin-right: 1%;
}

.content-block {
	width: 60%;
}

.figure-block {
	width: 60%;
	padding: 15px;
	color: #0067b2;
	background-color: #fafafa;
	border-radius: 15px;
}

.figure-block h5 {
	color: black !important;
	font-weight: 600;
	padding-top: 15px;
	padding-bottom: 15px;
}

.figure-block img {
	border: 3.23px solid #0085e5;
	width: 100%;
}

.figure-img-wrap {
	padding-left: 5%;
	padding-right: 5%;
}

.figure-block .figure-text {
	margin: 20px 0px;
}

.related-issue, .related-issue i, .related-issue a {
	color: #0085e5;
}

.related-issue a:hover {
	color: black;
}

.related-issue {
	margin-top: 20px;
}

.related-issue li {
	margin-top: 10px;
}

.related-issue p, .related-issue ul {
	margin-top: 0;
	list-style: none;
}

.content-block.pull-quote {
	margin-bottom: 0px;
}

.alertHeader {
	width: 100%;
	background-color: #f00;
	justify-content: center;
	padding-top: 10px;
	padding-bottom: 10px;
	color: white;
	font-size: 24px;
	line-height: 36px;
	display: flex;
	gap: 20px;
}

.issue-header {
	max-width: 50%;
	width: 50%;
	justify-self: center;
	align-self: center;
	-webkit-align-self: center;
	text-align: center;
	margin-bottom: 60px;
}

.issue-content {
	padding-top: 80px;
}

.notes-container {
	width: 60%;
	justify-self: center;
	-webkit-align-self: center;
	margin-bottom: 60px;
}

.notes-block {
	border: 3px solid black;
	margin-top: 60px;
	text-align: start;
}

.notes-block-header {
	border-bottom: 3px solid black;
	display: flex;
	flex-wrap: nowrap;
}

.notes-block-header span {
	font-size: 30px;
	font-weight: 600;
	color: black;
	margin-left: 20px;
	height: fit-content;
	align-self: center;
}

div.notes-content {
	background-color: rgba(0, 133, 229, .1);
	margin: 0;
	padding: 10px 20px 24px 20px;
}

.content-block h4 {
	color: #0085e5;
	font-family: "Plus Jakarta Sans";
	font-weight: 600;
}

/* */
hr.custom-hr:after {
	right: calc(50% - .5rem);
	content: "/";
	display: block;
	height: 1.6rem;
	position: absolute;
	top: calc(50% - .8rem);
}

hr.custom-hr:before {
	right: calc(50% + .5rem);
	content: "/";
	display: block;
	height: 1.6rem;
	position: absolute;
	top: calc(50% - .8rem);
	width: .1px;
}

hr.custom-hr {
	background: linear-gradient(to left, currentColor calc(50% - 16px), transparent calc(50% - 16px), transparent calc(50% + 16px), currentColor calc(50% + 16px));
	background-color: transparent !important;
	border: none;
	height: 1px;
	overflow: visible;
	position: relative;
	width: 60%;
	margin-bottom: 40px;
}

.featured-issue-row {
	width: 90%;
	display: flex;
	justify-content: flex-start;
	gap: 35px;
	align-items: stretch;
	/* This ensures all items stretch to the same height */
	margin-bottom: 30px;
}

.featured-issue-row .featured-issue-item h5 {
	font-size: 14px !important;
	color: #717680;
	line-height: 20px;
	padding: 4px 10px 4px 4px;
	flex-grow: 1;
}

.topic-story .main-img {
	margin-bottom: 20px;
	aspect-ratio: 16/9;
	object-fit: cover;
	width: 100%;
}

.topic-story .link-group {
	margin-bottom: 10px;
}

.excerpt-text {
	font-size: 14px;
	color: var(--body_typography-color);
}

.featured-issue-row .featured-issue-item {
	width: 20%;
	display: flex;
	/* Ensures flexible box layout */
	flex-direction: column;
	/* Allows vertical stacking */
	border-radius: 12px;
	border: 1px solid #717680;
}

.featured-issue-row .featured-issue-item a {
	height: 100%;
	/* Ensures it stretches to full height of the row */
	align-content: center;
}

.misleading-media-row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding-bottom: 20px;
	border-bottom: 1px solid #e9eaeb;
}

/* Tooltip container */
.custom-tooltip {
	position: absolute;
	display: none;
	/* Hidden by default */
	background-color: #333;
	color: #fff;
	padding: 10px;
	border-radius: 5px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
	font-size: 14px;
	z-index: 100;
	width: max-content;
}

/* Tooltip button */
#view-all-btn {
	background-color: #007bff;
	color: white;
	border: none;
	padding: 5px 10px;
	font-size: 14px;
	cursor: pointer;
	border-radius: 5px;
}

#view-all-btn:hover {
	background-color: #0056b3;
}

#ellipsis-btn-wrapper {
	position: relative;
}

/* Optional: Position the tooltip near the button */
#tooltip {
	top: -40px;
	/* Adjust this based on your layout */
	left: -40px;
}

.custom-pagination {
	display: flex;
	gap: 20px;
	justify-self: center;
	-webkit-align-self: center;
}

.page-link {
	height: 40px;
	width: 40px;
	text-align: center;
	align-content: center;
}

.page-link.active {
	background-color: #fafafa;
	border-radius: 360px;
}

.page-left, .page-right {
	width: fit-content;
}

.page-left i {
	margin-right: 10px;
}

.page-right i {
	margin-left: 10px;
}

.custom-pagination-wrapper {
	width: 90%;
	display: flex;
	flex-direction: row;
	margin-bottom: 80px;
	justify-content: space-between;
	border-top: 1px solid #e9eaeb;
	justify-self: center;
	-webkit-align-self: center;
}

#loadingOverlay {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .5);
	/* Semi-transparent background */
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	top: 0;
}

#loadingOverlay i {
	font-size: 40px;
	color: white;
}

@media screen and (max-width: 767px) {
	.content-media-block-container {
		display: block;
	}
	
	.title-container {
		justify-self: center;
		-webkit-align-self: center;
		width: 95%;
	}
	
	/* Currently some form of default page template is still being loaded and adding padding, 
going with 0 left and right padding on Mobile until this if figured out */
	.invest-breadcrumbs {
		padding-left: 0px;
	}
	
	.topic-header {
		/* padding: 60px 0px 30px 30px; */
		padding: 0px 0px 0px 0px;
		width: 100%;
	}
	
	.figure-block {
		padding: 0;
	}
	
	.topic-body {
		/* padding-left: 30px;
        padding-right: 30px; */
		padding-left: 0px;
		padding-right: 0px;
		margin-bottom: 60px;
		flex-direction: column;
		width: 100%;
	}
	
	.content-media-block-container .misleading-media, .content-media-block-container .misleading-media-2 {
		position: relative;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 40px;
		padding: 10px;
	}
	
	.misleading-media, .misleading-media-2, .issue-list {
		width: 100%;
	}
	
	.issue-list {
		padding: 0px;
	}
	
	.issue-list-item-header h5 {
		width: 85%;
	}
	
	.content-block, .figure-block {
		width: 95%;
		padding: 10px;
	}
	
	.claim-block {
		width: 100%;
	}
	
	.footnote-container, .related-stories-wrapper {
		padding: 30px 0px 30px 0px;
	}
	
	.related-stories {
		margin-bottom: 40px;
	}
	
	.random-stories .story {
		display: none;
	}
	
	.related-stories-wrapper {
		width: 85%;
		font-size: 14px;
	}
	
	.mobile-story {
		display: flex;
		flex-direction: column;
		width: 50%;
		justify-content: space-between;
	}
	
	.footnotes {
		margin-top: 0;
	}
	
	.claim-container {
		padding-top: 0;
	}
	
	.media-header {
		flex-direction: column;
		margin-bottom: 20px;
	}
	
	.media-header-text {
		padding: 0;
		width: 100%;
	}
	
	.media-header-img-container {
		width: 100%;
	}
	
	.media-header-img {
		aspect-ratio: 16/9;
	}
	
	.all-issue-list {
		padding: 0;
		width: 100%;
	}
	
	.issue-block {
		width: 100%;
	}
	
	blockquote.pull-quote {
		font-size: 16px;
		padding: 30px 5px 30px 18px;
		width: 90%;
	}
	
	.intro-block {
		padding: 20px 10px;
		margin-bottom: 60px;
	}
	
	.notes-container {
		width: 85%;
		font-size: 16px;
	}
	
	.notes-block-header span {
		font-size: 18px;
	}
	
	.media-header-block {
		width: 90%;
	}
	
	.issue-header {
		max-width: 90%;
		margin-bottom: 40px;
	}
	
	.issue-header h1 {
		font-size: 40px;
	}
	
	.custom-row {
		gap: 24px;
	}
	
	.all-topic-investigations {
		width: auto;
	}
	
	#content .mobile-story h5 {
		font-size: 16px;
	}
	
	.topic-header {
		margin-bottom: 40px;
	}
	
	.featured-issue-row {
		width: 100%;
		gap: 10px;
	}
	
	.featured-issue-row .featured-issue-item {
		width: 30%;
	}
	
	.featured-issue-row .featured-issue-item h5 {
		font-size: 10px !important;
		line-height: 1.5;
	}
}
