.item.ojt-jats-viewer, .item.ojt-jats-toc {
	.jats-viewer-footer {
		display: flex;
		justify-content: center;
		align-items: end;
		height: 480px;
		margin: -23rem -2.44rem -0.51rem -2.44rem;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		padding: 0;
		background: linear-gradient(
			to bottom, 
			rgba(255, 255, 255, 0.06),
			rgba(252, 252, 252, 0.726),
			rgba(255, 255, 255, 0.918)
		);

		.read-more-btn {
			margin-bottom: 2rem;
		}
	}

	.jats-viewer-toc {
		height: 10rem;
		margin: -6rem -1.4rem 0rem -1.4rem;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		padding: 1rem 2rem 1rem 2rem;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.45), #ffffff);
	}

	.jats-viewer-footer, .jats-viewer-toc {
		.read-more-btn {
			transition: all 0.4s ease;
			color: @primary !important;
			border: 1px solid @primary!important;
			border-radius: 4px !important;
			font-weight: 700 !important;

			position: relative;
			display: inline-block;
			background: transparent;
			padding: 0.6rem 1rem;
			border-radius: 6px;
			text-decoration: none;
			font-size: 0.8rem;
			background-clip: padding-box;
			backdrop-filter: blur(10px);
	
			&:hover {
				background: @primary !important;
				color: #ffffff!important;
			}
		}
	}

	ol.references {
		margin: -10px 0px 0px 0px;
		list-style-type: decimal;
		list-style-position: outside;
		padding-left: 1.5em;
	}

	ol.references > li {
		margin-bottom: 5px;
		display: list-item;
	}
}

/** Article detail styles for JATS Viewer and TOC */
.item.ojt-jats-viewer, .item.ojt-jats-parser {
	.bibr {
		margin-left: 5px;
	}

	.figure {
		margin: 1.5rem auto;
		padding: 1rem 1.25rem;
		border-radius: 0.5rem;
		border: 1px solid #e5e7eb;
		background-color: #ffffff;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
	}

	.table-wrap {
		margin: 1.5rem auto;
		padding: 1rem 1.25rem;
		border-radius: 0.5rem;
		border: 1px solid #e5e7eb;
		background-color: #ffffff;
		box-sizing: border-box;
		display: block;
	}
	
	.table-wrap .table-scroll {
		width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
	}

	.table-wrap table {
		width: max-content;
		min-width: 100%;
		border-collapse: collapse;
	}

	.figure img,
	.table-wrap img {
		max-width: 100%;
		height: auto;
		display: block;
	}

	.figure .label,
	.table-wrap .label {
		display: block;
		font-weight: 600;
		font-size: 1.5rem;
		color: #0f172a;
		margin-bottom: 0.5rem;
		text-align: center;
	}

	.table-wrap .caption {
		margin-bottom: 1rem;
	}

	.figure .caption,
	.figure-note,
	.long-desc,
	.table-wrap .caption,
	.table-wrap .table-footer {
		font-size: 1.25rem;
		line-height: 1.35;
		color: #111827;
		text-align: center;
	}

	.figure .caption p,
	.figure-note p,
	.table-wrap .caption p {
		margin: 0;
	}

	.video-figure .video-inner {
		position: relative;
		width: 100%;
		padding-bottom: 56.25%; /* 16:9 */
		overflow: hidden;
	}

	.video-figure .video-inner iframe {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}

	.table-wrap table {
		table-layout: fixed;
		width: max-content;
		min-width: 100%;
		border-collapse: collapse;
	}

	.table-wrap th,
	.table-wrap td {
		padding: 0.4rem 0.5rem;
		border: 1px solid #e5e7eb;
		font-size: 0.875rem;
		vertical-align: top;
		white-space: normal;
		line-height: normal;
	}

	.table-wrap td {
		text-align: left;
		white-space: normal;      /* can change to wrap */
		word-break: break-word;   /* break long words */
		overflow-wrap: anywhere;  /* modern browser */
	}

	.table-wrap th,
	.table-wrap td {
		max-width: 220px;
	}

	.td-clamp {
		max-width: 220px;
		white-space: normal;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	blockquote.quote {
		margin: 1.5rem 0;
		padding: 0.75rem 1rem;
		border-left: 4px solid #94a3b8;
		// background-color: #f8fafc;
		// border-radius: 0.375rem;
	}

	blockquote.quote p {
		margin: 0;
		font-style: italic;
	}

	blockquote.quote .not-italic {
		margin-top: 0.25rem;
		font-style: normal;
		// text-align: right;
		font-size: 0.85rem;
		color: #4b5563;
	}

	/* Responsive tweak */
	@media (max-width: 640px) {
		.figure,
		.table-wrap {
			padding: 0.75rem 0.9rem;
		}
	}
}

/* Heading styling in article details JATS XML */
.item.ojt-jats-viewer, .item.ojt-jats-parser {
	h1, h2, h3, h4, h5, h6 {
		color: @primary;
		margin-top: 2rem;
		margin-bottom: 1rem;
		font-weight: 700;
		line-height: 1.25;
	}

	h1 {
		font-size: 2.25rem !important;
	}

	h2 {
		font-size: 1.875rem !important;
	}

	h3 {
		font-size: 1.5rem !important;
	}

	h4 {
		font-size: 1.25rem !important;
	}

	h5 {
		font-size: 1.125rem !important;
	}

	h6 {
		font-size: 1rem !important;
	}
}