/*
 * Copyright 2020-Present Titan Informatics LLC. All Rights Reserved.
 *
 * Proprietary and Confidential.
 * Author: Douglas Noorzadeh
 *
 * This source code is the exclusive property of Titan Informatics LLC.
 * Unauthorized use, reproduction, disclosure, or distribution without written permission is strictly prohibited.
 */
:root {
	--font-family: "The US Daily News";
	--font-family2: "The US Daily News2";
	--font-family3: "RobotoSlab";
	--font-size: 1.063rem;
}

html,
body {
	height: auto;
	min-height: 100%;
}

body {
	font-family: var(--font-family3);
	font-size: var(--font-size);
	color: var(--black);
	background: var(--f1f1f1);
}

[data-name="theusdailynews"] {
	width: min(1340px, 100%);
	min-height: 100%;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-flow: column nowrap;
	align-items: stretch;
	background: inherit;
}

[data-name="theusdailynews"] > * {
	flex: 0 0 100%;
}

[data-name="theusdailynews"]:has(> [data-user]) {
	height: 100dvh;
	overflow: hidden;
}

[data-user] {
	height: calc(100% - 30px);
	margin: 15px;
	display: flex;
	flex: 0 0 calc(100% - 30px);
	/*overflow: hidden;*/
}

[data-user="member"] {
	flex-flow: row nowrap;
}

[data-user="subscriber"] {
	width: min(1024px, calc(100% - 30px));
	margin: 15px auto;
	flex-flow: column nowrap;
	gap: 15px;
}

main {
	min-height: 500px;
	margin: 15px;
	flex: 1;
}

main::before,
main::after {
	content: "";
	width: 50%;
	position: absolute;	top: -16px;
	border-top: var(--border);
	background: inherit;
}

main::before {right: 50%;}
main::after {left: 50%;}

[data-user="member"] main {
	padding: 15px;
	margin: unset;
	border: var(--border);
	border-left: unset;
	background: var(--f8f8f8);
	overflow-y: auto;
}

[data-user="subscriber"] main {
	margin: unset;
}

[data-user="member"] main::before,
[data-user="member"] main::after,
[data-user="subscriber"] main::before,
[data-user="subscriber"] main::after  {
	content: unset;
}












[data-name="site"],
[data-name="slogan"],
[data-name="menu"] {
	width: auto;
	max-width: 100%;
	align-self: center;
}
[data-name="site"] {
	font-size: 45px;
	font-weight: 800;
	margin-top: 15px;
}
[data-name="slogan"] {
	font-size: 25px;
	padding-top: 10px;
	margin-bottom: 15px;

}
[data-name="site"]::before,
[data-name="slogan"]::before {
	content: attr(title);
	position: relative; float: left;
	text-transform: capitalize;
}
[data-name="site"]::before {
	font-family: "Canterbury";
	font-weight: 400;
	font-size: 3.75rem;
	line-height: 2.938rem;
	word-spacing: -0.875rem;
	/*-webkit-font-smoothing: antialiased;*/
}
[data-name="slogan"]::before {
	font-size: 1.125rem;
	line-height: 1.375rem;
	font-weight: 400;
	transform: scaleY(1.5);
	transform-origin: bottom;
}










[data-name="breaking"] {
	min-height: 50px;
	/*height: auto;*/
	margin-top: -1px;
	flex: 0 0 auto;
	display: flex;
	flex-flow: column nowrap;
	border-top: var(--border);
	border-bottom: var(--border);
}
[data-name="breaking"] li {
	width: 100%;
	/*height: 100%;
	min-height: 100%;
	flex: 0 0 100%;*/
	display: flex;
	align-items: center;
	scroll-snap-align: start;
}
[data-name="breaking"]::before,
[data-name="breaking"]::after {
	content: "";
	width: calc((100vw - 100%) / 2);
	height: calc(100% + 2px);
	position: absolute;	top: -1px; bottom: -1px;
	border-top: var(--border);
	border-bottom: var(--border);
	background: inherit;
	z-index: 1;
}
[data-name="breaking"]::before {right: 100%;}
[data-name="breaking"]::after {left: 100%;}


[data-name="items"] {
	height: 100%;
	min-height: 0;
	display: flex;
	flex-flow: column nowrap;
	gap: 5px;
}
[data-name="items"] [type="search"] {
	padding: 16px 15px;
}
[data-name="items"] table {
	width: calc(100% + 6px);
	height: 100%;
	min-height: 0;
	margin: 0 -3px;
	border-spacing: 3px 2px;
	display: flex;
	flex-flow: column nowrap;
}
[data-name="items"] thead {
	flex: 0 0 auto;
	display: table;
	width: 100%;
	table-layout: fixed;
}
[data-name="items"] thead th {
	padding: 13px 8px;
	border: var(--border);
	background: var(--f3f3f3);
}
[data-name="items"] tbody {
	min-height: 0;
	display: flex;
	flex: 1 1 auto;
	flex-flow: column nowrap;
	overflow-y: auto;
}
[data-name="items"] tbody tr {
	display: table;
	width: 100%;
	table-layout: fixed;
	flex: 0 0 auto;
}
[data-name="items"] td {
	padding: 10px;
	border: var(--border);
	background: var(--white);
	transition: 0.1s ease;

	overflow-wrap: break-word;
	word-break: break-word;

}
[data-name="items"] tbody tr:hover td {
	background: var(--f3f3f3);
}
[data-name="items"] td.matched {
	color: var(--red);
}
[data-name="items"] td [data-role="status"] {cursor: pointer;}
[data-name="items"] td [data-role="status"].active {color: var(--blue);}
[data-name="items"] td [data-role="status"].inactive {color: var(--green);}
[data-name="items"] td [data-role="status"].blocklisted {color: var(--a5a5a5);}
[data-name="items"] td [data-name="edit"]::before,
[data-name="items"] td [data-name="delete"]::before {
	font-family: "Font Awesome 6 Sharp";
	font-size: 1.375rem;
	font-weight: 300;
	/*min-width: 25px;*/
	position: relative; float: left;
	text-align: center;
	cursor: pointer;
}
[data-name="items"] td [data-name="edit"]::before {content: "\f303";}
[data-name="items"] td [data-name="delete"]::before {content: "\f2ed";}
[data-name="items"] [data-name="actions"] > section:not(:last-child) {
	margin-right: 5px;
}

[data-name="category"] {
	width: 100%;
	height: 100%;
	display: flex;
	flex-flow: column nowrap;
	gap: 10px;
}

[data-name="categorization"] {
	height: auto;
	display: flex;
	flex-flow: row wrap;
	gap: 10px;
}
[data-name="categorization"] textarea,
[data-name="categorization"] button {
	max-height: auto;
	border-radius: unset;
	flex: 1;
}
[data-type="selection"] {
	flex: 1;
}
[data-type="selection"]::before {
	height: 100%;
	/*align-items: stretch;
	justify-content: center;*/
	justify-items: center;
}











[data-name="suggestions"] {

}
[data-name="suggestions"] > ul {
	width: 100%;
	max-height: 330px;
	overflow-y: auto;
	position: absolute;
	top: 49px; left: 0;
	background: var(--white);
	border: var(--border);
	display: none;
	z-index: 2;
}
[data-name="suggestions"] > ul.active {
	display: flex;
	flex-flow: column nowrap;
}
[data-name="suggestions"] > ul li {
	padding: 15px;
	border-top: var(--border);
}
[data-name="suggestions"] > ul li:first-of-type {
	border-top: unset;
}
[data-name="suggestions"] > section {
	display: flex;
	flex-flow: row wrap;
	gap: 0 5px;
}
[data-name="suggestions"] > section span {
	padding: 10px;
	margin-top: 5px;
	background: var(--white);
	border: var(--border);
}

[data-name="selected-thumbnail"] {
	display: flex;
	flex-flow: row wrap;
	gap: 0 5px;
}
[data-name="selected-thumbnail"] img {
	width: 100px;
	height: 150px;
}











[data-name="back-to-frontend"]::after {
	font-family: "Font Awesome 6 Sharp";
	font-size: 1.75rem;
	line-height: 1.375rem;
	font-weight: 400;
	content: "\f060";
	position: relative; float: left;
}

[data-name="card-element"] {
	width: 100%;
	font-family: var(--font-family);
	display: flex;
	flex-flow: row wrap;
	gap: 10px;
}
[data-name="card-number-element"],
[data-errors="card-errors"] {
	flex: 0 0 100%;
}
[data-name="card-expiry-element"],
[data-name="card-cvc-element"],
[data-name="card-postal-code-element"] {
	flex: 1;
}

[data-link="back-to-login"] {font-size: 0.875rem; position: relative; float: left; cursor: pointer;}
[data-link="back-to-login"]::before {content: "Back to Login?"; position: relative; float: left;}

[data-name="update-profile"],
[data-name="update-password"] {
	display: flex;
	flex-flow: row wrap;
	flex: 0 0 calc(50% - 7.5px);
	gap: 10px;
}

[data-name="update-profile"] > section,
[data-name="update-password"] > section {
	flex: 0 0 100%;
}

[data-name="update-profile"] > [data-for="firstname"],
[data-name="update-profile"] > [data-for="middlename"],
[data-name="update-profile"] > [data-for="lastname"] {
	flex: 1;
}

[data-name="fullname"] {
	display: flex;
	flex-flow: row nowrap;
	gap: 10px;
}

[data-for="headshot"] {
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
}
[data-for="headshot"] [type="text"] {
	width: 100%;
}
[data-for="headshot"] img {
	width: auto;
	max-width: 50px;
	height: 50px;
}
[data-for="headshot"] img[src]:not([src=""]) {
	border: var(--border);
	margin-right: 10px;
}











[data-name="compose"] {
	display: flex;
	flex-flow: column nowrap;
	gap: 10px;
}
[data-name="compose"] > ul {
	display: flex;
	flex-flow: column nowrap;
	gap: 15px;
}
[data-name="compose"] > ul > li {
	display: flex;
	align-items: center;
	gap: 10px;
}
[data-name="compose"] > ul > li > span {
	position: relative; float: left;
	align-self: stretch;
}
[data-name="compose"] > ul > li > [data-name="image"] {
	flex: 0 0 100px;
	background: lightyellow;
}
[data-name="compose"] > ul > li > [data-name="image"] img {
}
[data-name="compose"] > ul > li > [data-name="component"] {
	line-height: 1.125;
	display: flex;
	justify-content: center;
	flex-flow: column nowrap;
	gap: 10px;
	flex: 1 1 0;
}
[data-name="compose"] > ul > li > [data-name="component"] span {
	border: var(--border);
	background: var(--white);
}
[data-name="compose"] > ul > li > [data-name="action"] {
	padding: 0 10px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	border: var(--border);
	background: var(--white);
}
[data-name="compose"] > ul li [data-action="edit"]::before,
[data-name="compose"] > ul li [data-action="delete"]::before {
	font-family: "Font Awesome 6 Sharp";
	font-size: 1.375rem;
	font-weight: 300;
	line-height: 1;
	cursor: pointer;
}
[data-name="compose"] > ul li [data-action="edit"]::before {
	content: "\f303";
}
[data-name="compose"] > ul li [data-action="delete"]::before {
	content: "\f2ed";
}











[data-name="modal"] {
	z-index: 10;
}
[data-name="backdrop"] {
	width: 100%; height: 100%;
	position: fixed;
	top: 0;	left: 0;
	background: var(--025);
	z-index: 9;
}











[data-name="home-page"],
[data-name="category-page"] {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	gap: 15px;
}

[data-name="left-column"],
[data-name="right-column"] {
	width: 350px;
	flex: 0 0 350px;
	position: sticky; top: 54px;
	display: flex;
	flex-flow: column nowrap;
	align-self: flex-start;
	gap: 15px;
}

[data-name="center-column"] {
	min-width: 0;
	margin: 0 15px;
	flex: 1 1 auto;
}
[data-name="center-column"]::before,
[data-name="center-column"]::after {
	content: "";
	height: 100%;
	position: absolute; top: 0;
	pointer-events: none;
}
[data-name="center-column"]::before {
	left: -15px;
	border-left: var(--border);
}
[data-name="center-column"]::after {
	right: -15px;
	border-right: var(--border);
}

[data-name="livefeed"] {
	/*width: 100%;
	margin-bottom: 15px;*/
}











[data-name="center-column"] [data-name="latest"] {
	height: 400px;
	margin-bottom: 20px;
}
[data-name="center-column"] [data-name="latest"] [data-type="post"] {
	height: 100%;
	min-height: 100%;
	padding: unset;
	display: unset;
}
[data-name="center-column"] [data-name="latest"] [data-type="post"] [data-type="thumbnail"] {
	width: 100%;
	margin-right: unset;
	border: unset;
	position: absolute; float: unset;
	top: 0; left: 0;
}
[data-name="center-column"] [data-name="latest"] [data-type="post"] [data-name="categories"],
[data-name="center-column"] [data-name="latest"] [data-type="post"] [data-name="timestamp"] {
	font-size: 1.125rem;
	padding: 15px;
	color: var(--white);
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.95);
	z-index: 1;
}
[data-name="center-column"] [data-name="latest"] [data-type="post"] [data-name="categories"]::before,
[data-name="center-column"] [data-name="latest"] [data-type="post"] [data-name="timestamp"]::before {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: -1;
	background: rgba(0, 0, 0, 0.2);
	-webkit-mask-image: 
		linear-gradient(to bottom, transparent, black 20px, black calc(100% - 20px), transparent),
		linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent);
			mask-image: 
		linear-gradient(to bottom, transparent, black 20px, black calc(100% - 20px), transparent),
		linear-gradient(to right, transparent, black 20px, black calc(100% - 20px), transparent);
	-webkit-mask-composite: intersect;
			mask-composite: intersect;
}
[data-name="center-column"] [data-name="latest"] [data-type="post"] [data-name="categories"] span,
[data-name="center-column"] [data-name="latest"] [data-type="post"] [data-name="timestamp"] {
	font-weight: 700;
	line-height: 15px;
}
[data-name="center-column"] [data-name="latest"] [data-type="post"] [data-name="headline"] {
	font-size: 2.125rem;
	font-weight: 900;
	line-height: 2.188rem;
	width: 100%;
	padding: 20px 20px 15px 20px;
	position: absolute; float: unset;
	bottom: 0; left: 0;
	display: unset;
	-webkit-box-orient: unset;
	overflow: unset;
	text-overflow: unset;
	-webkit-line-clamp: unset;
	color: var(--white);
	text-align: left;
	text-shadow: 0 0 5px rgba(0, 0, 0, 0.95);
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.35) 50%,
		rgba(0, 0, 0, 0.4) 100%
	);
	text-transform: uppercase;
	word-spacing: 5px;
}
/*[data-name="center-column"] [data-name="latest"] [data-type="post"] [data-name="categories"],*/
[data-name="center-column"] [data-name="latest"] [data-type="post"] [data-name="authors"] {
	display: none;
}











[data-name="left-column"] [data-trending]::before,
[data-name="right-column"] [data-trending]::before {
	/*font-size: 0.875rem;*/
	font-weight: 600;
	width: 100%;
	content: "Trending in " attr(data-trending);
	margin-bottom: 10px;
	position: relative; float: left;
}











[data-name="center-column"] [data-category] {
	width: 100%;
	height: 350px;
	padding-top: 5px;
	margin-top: 50px;
	box-sizing: border-box;
	display: flex;
	flex-flow: column wrap;
	align-content: flex-start;
	gap: 10px;
}
[data-name="center-column"] [data-category]::before {
	font-size: 1rem;
	font-weight: 600;
	width: 100%;
	content: "Latest in " attr(data-category);
	position: absolute;
	top: -26px; left: 0;
	border-bottom: var(--border);
}
[data-name="center-column"] [data-category] [data-type="post"] {
	width: calc((100% - 10px) / 2);
	margin: 0;
}
[data-name="center-column"] [data-category] [data-type="post"]::before {
	content: unset;
	margin: unset;
	border-bottom: unset;
	position: unset;	float: unset;
	pointer-events: unset;
	cursor: unset;
}
[data-name="center-column"] [data-category] [data-type="post"]:nth-of-type(1) {
	flex: 0 0 100%;
}
[data-name="center-column"] [data-category] [data-type="post"]:nth-of-type(2),
[data-name="center-column"] [data-category] [data-type="post"]:nth-of-type(3) {
	flex: 0 0 calc((100% - 10px) / 2);
}
[data-name="center-column"] [data-category] [data-type="post"] [data-type="thumbnail"] {
	width: 100%;
	margin-right: unset;
	border: unset;
	position: absolute; float: unset;
	top: 0; left: 0;
}
[data-name="center-column"] [data-category] [data-type="post"] [data-name="headline"] {
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.125rem;
	width: 100%;
	padding: 35px 15px 10px 15px;
	position: absolute;
	bottom: 0; left: 0;
	color: var(--white);
	text-shadow: 0 0 4px rgba(0, 0, 0, 0.98);
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.35) 50%,
		rgba(0, 0, 0, 0.4) 100%
	);
	display: unset;
	-webkit-box-orient: unset;
	overflow: unset;
	text-overflow: unset;
	-webkit-line-clamp: unset;
	word-spacing: 1px;
}
[data-name="center-column"] [data-category] [data-type="post"]:nth-of-type(1) [data-name="headline"] {
	font-size: 1.5rem;
	line-height: 1.5rem;
	word-spacing: 2px;
}
[data-name="center-column"] [data-category] [data-type="post"] [data-name="categories"],
[data-name="center-column"] [data-category] [data-type="post"] [data-name="timestamp"] {
	font-size: 0.875rem;
	font-weight: 600;
	padding: 7.5px 10px;
	color: var(--white);
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.98);
	z-index: 1;
}
[data-name="center-column"] [data-category] [data-type="post"] [data-name="categories"]::before,
[data-name="center-column"] [data-category] [data-type="post"] [data-name="timestamp"]::before {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: -1;
	background: rgba(0, 0, 0, 0.2);
	-webkit-mask-image: 
		linear-gradient(to bottom, transparent, black 15px, black calc(100% - 15px), transparent),
		linear-gradient(to right, transparent, black 15px, black calc(100% - 15px), transparent);
			mask-image: 
		linear-gradient(to bottom, transparent, black 15px, black calc(100% - 15px), transparent),
		linear-gradient(to right, transparent, black 15px, black calc(100% - 15px), transparent);
	-webkit-mask-composite: intersect;
			mask-composite: intersect;
}
[data-name="center-column"] [data-category] [data-type="post"] [data-name="categories"] span,
[data-name="center-column"] [data-category] [data-type="post"] [data-name="timestamp"] {
	font-weight: 700;
}
[data-name="center-column"] [data-category] [data-type="post"] [data-name="authors"] {
	display: none;
}











[data-name="center-column"] [data-type="pagination"] {
	width: 100%;
	margin: 25px 0 10px 0;
	flex-flow: row wrap;
	gap: 5px;
}
[data-name="center-column"] [data-type="pagination"]::before,
[data-name="center-column"] [data-type="pagination"]::after {
	content: "";
	width: 100%;
	position: absolute; left: 0;
	pointer-events: none;
}
[data-name="center-column"] [data-type="pagination"]::before {
	top: -15px;
	border-top: var(--border);
}
[data-name="center-column"] [data-type="pagination"]::after {
	bottom: -15px;
	border-bottom: var(--border);
}


























@media (max-width: 1280px) {
	[data-name="left-column"] {
		width: 300px;
		flex: 0 0 300px;
	}
}

@media (max-width: 1080px) {

	[data-name="left-column"] {
		display: none;
	}
	[data-name="center-column"] {
		margin: 0 15px 0 0;
	}
	[data-name="center-column"]::before {
		content: unset;
	}
}

@media (max-width: 980px) {
	[data-name="left-column"],
	[data-name="center-column"],
	[data-name="right-column"] {
		width: 100%;
		margin: unset;
		flex: 0 0 auto;
	}

	main::before,
	main::after {
		top: -15px;
	}
}

@media (max-width: 768px) {
	[data-name="home-page"],
	[data-name="category-page"] {
		flex-flow: column nowrap;
	}
/*
	main {
		margin: -1px 10px 15px 10px;
	}
*/
	[data-name="utility"] {
		width: calc(100% - 20px);
		margin: 0 10px;
	}

	[data-name="center-column"]::after {
		content: unset;
	}

	[data-name="left-column"],
	[data-name="right-column"] {
		position: relative;
		top: unset;
	}

}

@media (max-width: 640px) {
	[data-name="site"]::before {
		font-size: 2.813rem;
		line-height: 2.5rem;
		word-spacing: -0.625rem;
	}
	[data-name="center-column"] [data-name="latest"] [data-type="post"] [data-name="headline"] {
		font-size: 1.875rem;
		line-height: 2rem;
	}
}

@media (max-width: 480px) {
}