/**************************************************************************************************************/
/* SYSTEM PAGES START */
/**************************************************************************************************************/
	/* -------------- STANDARD SYSTEM PAGES -------------- */
		.content.system section { 
			border-top:none; 
		}
		.content.system section:nth-of-type(1) { 
			margin-bottom:0; 
		}
		.system .group:nth-of-type(1) .span_2_of_4 { 
			margin-top:7%; 
			margin-bottom:7%; 
		}
		.content.system .span_2_of_4 { 
			background-color:#fff; 
			outline:1px solid #ddd; 
			padding:20px; 
			box-sizing:border-box; 
			border:13px solid rgba(137, 150, 127, 0.07); 
			padding-top:5px; 
		}
		.content.system .span_2_of_4 .content-inner {
			float:left;
			display:block; 
			margin:3% 10% 5%; 
		}
		.content.system .span_2_of_4 .btn.activate { 
			width:auto; 
			padding-left:12px; 
			padding-right:12px; 
		}
		.system h1 { 
			margin:0.3em 0 0.7em 0; 
		}
		.content.system h2 { 
			margin-bottom:22px; 
			font-size:1.8em; 
			margin-top:2px; 
		}
		.system p { 
			margin:0 0 1em 0; 
			color:#333; 
		}
		.system p:nth-of-type(1) { 
			margin:1.5em 0 1em 0; 
		}
		.content.system .col h4 { 
			margin:1em 0; 
		}
		.content.system .btn { 
			width:auto; 
			padding-left:15px; 
			padding-right:15px; 
			float:right; 
			margin-right:0; 
		}  
		/* error messages */
			.content .error, 
			.content .login_error_message { 
				color:#800; 
				margin:2% 0; 
				padding:0; 
			}
			.error .errorExplanation h2 { 
				margin:0; 
				padding:0; 
				font-size:1.1em; 
				display:none; 
			}
			.error .errorExplanation p { 
				margin:10px 0 6px; 
				font-size:0.9em; 
				display:none; 
			} 
			.error ul { 
				margin:0; 
				padding:0; 
				font-size:0.9em; 
				list-style:none; 
			}
			.welcome-message { 
				margin:2em 0 0 0; 
			}
		/* Customer services */
			.system .customer-services {
			padding:1% 3%;
			width:94%;
			margin:10px auto;
			}
			.system .customer-services ul { 
				list-style-type:none; 
				padding:0; 
			}
			.system .customer-services p, 
			.system .customer-services li, 
			.system .customer-services li a { 
				font-size:0.9em; 
			}
			.system .span_2_of_4 .customer-services a {
				color:#004185; 
			}
			.system .span_2_of_4 .customer-services a:hover {
				color:#be2b23; 
			}
		/* Input controls for sprites */
			#subscriber_email, 
			#subscriber_password, 
			#subscriber_confirm_password, 
			#sub_old_password { 
				width:100%; 
			}
			#forgot-password input[type=email] { 
				background-position:4px -107px; 
			}
			#forgot-password input[type=email]:focus { 
				background-position:4px -82px; 
			}
			#activate-account input[type=password], 
			#reset-password input[type=password] { 
				background-position:4px -160px; 
			}
			#activate-account input[type=password]:focus, 
			#reset-password input[type=password]:focus { 
				background-position:4px -134px; 
			}
			#subscriber_email { 
				background-position:4px -106px; 
			}
			#subscriber_email:focus { 
				background-position:4px -81px; 
			}
		/* Forgotten Password && Activate Account && Set Password - input margins */
			.system #subscriber_email, 
			.system #subscriber_password, 
			.system #subscriber_confirm_password, 
			#sub_old_password { 
				margin:0 0 1em 0; 
			}
	/* -------------- USERLOGIN PAGE ------------------ */
		.system .btn.login { 
			margin:0 0.5em 0.5em 0; 
			clear:left; 
		}
		.col img.export_loader_img {
			width:auto; 
			float:right; 
			margin:10px 10px 0 0; 
		} 
		.remember-actions-holder { 
			display:inline-block; 
			clear:right; 
			float:none; 
			width:auto; 
			margin:2% 0 3% 2%; 
			position:relative; 
		}
		.remember-actions-holder .remember-me { 
			font-size:0.9em; 
			padding:0.3em 0 0 0; 
			display:inline-block; 
		}
		.password-actions-holder { 
			display:block; 
			clear:both; 
			width:100%; 
			margin:2% 0 10% 0; 
		}
		.password-actions-holder a { 
			font-size:0.9em; 
			padding:2px 11% 0 0; 
		}
	/* ---------------- USER MANAGE ACCOUNT PAGE -------------- */
		/* Profile header */
			.profile-top { 
				margin:10px auto; 
				float:none;
				clear:both; 
				display:block; 
				outline:1px solid #ddd;
				padding:20px;
				background-color:#fff;
				box-sizing:border-box;
				border:13px solid rgba(137, 150, 127, 0.07);
				padding-top:5px;
			}
			h1.welcome-header { 
				float:left; 
				width:95%;
				padding:3px 0 3px;
				margin:0 0 0 4%; 
				text-transform:uppercase; 
				text-align:center; 
				color:#000;
				font-size:2.2em;
				line-height:1.2;
			}
			p.welcome-text {
				float:left; 
				width:95%; 
				padding:3px 0 3px; 
				margin:0 0 0 4%; 
				text-align:center; 
				color:#555;
				line-height:1.5;
			}
		.account-content .content-full-width { 
			clear:both;
		}




		.content .tabs { 
			float:left; 
			width:100%; 
			margin:0; 
		} 
		.content .tabs .content.box-out { 
			padding:1% 5%; 
		}
		/* Standard view tab headers */
.content a.tab { 
	background-color: $dark-bg-color; 
	color:#fff; 
}
.content a.tab.active { 
	cursor: default;
	position: relative;
	z-index: 3;
	background-color: $base-strong-color; 
	color:#004185; 
}
.content .tab { 
	position: relative;
	float:left; 
	display:block; 
	padding:7px 22px; 
	text-decoration:none; 
	border-radius:0; 
	background-color:#004185; 
	color:#fff; 
	font-size:1em; 
}
.component-most-read .tab:last-of-type {
	margin-left: 18px;
}

/*
			.content .tab:hover { 
				background-color:#fff; 
				color:rgb(23,24,100); 
			}
			.content .tab.active:hover { 
				background-color:#fff; 
				color:rgb(23,24,100); 
			}
*/

		/* Toggle view tab headers */
			.content .tab-toggle { 
				width:97%; 
				height:21px; 
				padding:10px 0 10px 3%;
				clear:both;
				float:none; 
				color:#fff; 
				background-color:#87abcf;
				box-shadow:1px 1px 0 0 #87abc5 inset, 0 0 1px 1px #87abc5 inset;
				margin:0 0 1em 0; 
				display:none;
			}
			.content .tab-toggle.active { 
				color:#004185; 
				background-color:#f00;
				box-shadow:1px 0 0 0 #e5e5e5 inset, -1px 0 0 0 #e5e5e5 inset, 0 1px 0 0 #e5e5e5 inset;
				margin:0; 
			}

.content .tab::before {
	position: absolute;
	content: "";
	/* z-index: 1; */
	left: 100%;
	top: 0;
	border-style: solid;
	border-width: 36px 0 0 36px;
	border-color: transparent transparent transparent  $dark-bg-color;
}
.content .tab.active::before {
	/* z-index: 2; */
	border-color: transparent transparent transparent  $base-strong-color;
}	


.content .tab-toggle.active {
	/* background-color: $base-strong-color;*/
} 

			.content .tab-toggle span.toggle-control { 
				/*
				cursor: pointer;
				background-image:none;
				transition:color 0.5s ease, border 0.2s ease;
				width:0;
				height:0;
				border-style:solid;
				border-width:8.5px 6px 0 6px;
				border-color:#ffffff  rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
				line-height:0px;
				_border-color:#ffffff  #000000 #000000 #000000;
				_filter:progid:DXImageTransform.Microsoft.Chroma(color='#000000');
				display:inline-block;
				margin-left:6px;
				margin-right:15px;
				margin-top:10px;
				float:right;
				*/
			}
			.content .tab-toggle.active span.toggle-control { 
/*				margin-top:8px;
				opacity:1;
				transition:color 0.5s ease, border 0.2s ease;
				width:0;
				height:0;
				border-style:solid;
				border-width:0 6px 8.5px 6px;
				border-color:rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #171864  rgba(0, 0, 0, 0);
				line-height:0px;
				_border-color:#000000 #000000 #171864  #000000;
				_filter:progid:DXImageTransform.Microsoft.Chroma(color='#000000');*/
			}
		/* Tab content */
			.content .tabs .box-out { 
				display:none; 
				clear:both; 
				background:#f00; 
				padding:20px; 
			}
			.content .tabs .box-out.active { 
				display:block; 
				width:100%; 
				/* padding:1% 5%; */ 
				padding:1% 0;
				margin:0 0 1em 0; 
				background-color:#fff;
				border-top: 1px solid $light-keyline-color; 
				/* box-shadow:-1px -1px 0 0 #e5e5e5 inset, 0 0 1px 1px #e5e5e5 inset; */
			}
			.content .tabs .box-out header { 
				clear:both; 
			}
			.content .tabs .box-out .box { 
				background:#fff; 
			}










		/* No saved articles */
			#listings-savedlist .no-saved-articles .article-tools.saving-articles, 
			#listings-savedlist .no-saved-articles .article-tools.access-saved-articles { 
				clear:both; 
			}
			#listings-savedlist .no-saved-articles header.save-article-info-header { 
				margin-top:15px; 
				border-top:1px solid #000; 
			}
			#listings-savedlist .no-saved-articles .tools-container li.saved-article-info { 
				height:auto; 
				width:90%; 
				text-align:left; 
			}
			#listings-savedlist .no-saved-articles .article-menu-info { 
				background-color:#004185; 
				min-height:130px; 
				width:100%; 
			}
			#listings-savedlist .no-saved-articles p.save-article-instructions { 
				font-weight:bold; 
			}
			#listings-savedlist .no-saved-articles .article-tools.access-saved-articles p { 
				width:45%; 
				float:left; 
			}
			#listings-savedlist .no-saved-articles .user-menu-display {
				width:50%;
				float:right;
				background-color:#004185;
			}
			#listings-savedlist .no-saved-articles .user-menu-display .main-top-title {
				border-right:none;
				margin-right:7px;
			}
			#listings-savedlist .no-saved-articles .user-menu-display ul.main-top-content.main-top-menu {
				height:35px; 
			}
			#listings-savedlist .noarticles_msg { 
				font-weight:bold; 
				font-size:12px; 
				display:block; 
			}
			#listings-savedlist .noarticles_msg p { 
				color:#f00; 
			}
		/* Saved articles list render */
			.content .tabs .box-out .col.list-view, 
			.content .tabs .box-out .col.list-view .col { 
				margin:1% 0; 
			}
			#listings-savedlist h3 { 
				font-size:1.4em; 
				margin:0 0 0.3em 0; 
			}
			#listings-savedlist p { 
				margin:0 0 0.3em 0; 
			}
			#listings-savedlist article:nth-of-type(1) { 
				border-top:none; 
			}
			#listings-savedlist p.publish-date, 
			#listings-savedlist p.added-date { 
				color:#555; 
				font-size:0.8em; 
				line-height:1.1em; 
				display:inline; 
				margin:0 1em 0 0; 
			}
			#listings-savedlist .actions-holder { 
				display:block; 
				clear:both; 
				width:100%; 
				margin:0.5em 0; 
			}
			#listings-savedlist a.remove { 
				font-size:0.8em; 
				line-height:1.1em; 
				margin:0 1em 0 0; 
				display:block; 
				clear:both; 
				float:none; 
				cursor:pointer; 
				padding:0; 
			}
			#listings-savedlist a.remove strong { 
				padding-top:5px; 
				display:inline; 
				float:left; 
			}
			.no-svg #listings-savedlist a.remove .remove-icon {
				background-image:url('../images/site-sprite.svg');
			}
			#listings-savedlist a.remove .remove-icon { 
				height:24px; width:24px;
				background-repeat:no-repeat;
				display:inline; float:left; 
				background-image:url('../images/site-sprite.svg');
				background-position:calc(-6px + 2*-36px) calc(-6px + 27*-36px);
			}
		/* Saved articles grid layout - not in use */
			.content .tabs .box-out .col.grid-view { 
				margin:1% 0; 
			}
			.content .tabs .box-out .col.grid-view .col { 
				margin:1% 0 1% 1.5%; 
			}
			.content .tabs .box-out .col.grid-view .col:nth-of-type(1), 
			.content .tabs .box-out .col.grid-view .col.span_4_of_4:nth-of-type(3n+4) { 
				margin-left:0; 
			}
			#listings-savedlist.grid-view article.span_4_of_4 { 
				width:31%; 
				float:left; 
				background-color:rgba(137,150,127,0.07); 
				padding:0; 
			}
			#listings-savedlist.grid-view article.col.span_4_of_4:nth-of-type(3n+4) { 
				clear:left; 
				margin-left:2%; 
			}
			#listings-savedlist.grid-view article .image-text-group-a { 
				width:100%; 
				max-width:100%; 
			}
			#listings-savedlist.grid-view article .image-text-group-b { 
				width:95%; 
				max-width:95%; 
			}
			#listings-savedlist.grid-view div[id*=rdm-]:empty { 
				margin:0; 
				padding:0; 
				width:0; 
				clear:none; 
			}
			#listings-savedlist.grid-view article.span_4_of_4 .image-text-group-a img { 
				width:100%; 
				max-width:100%; 
				margin:0px; 
			}
			#listings-savedlist.grid-view article h2, #listings-savedlist.grid-view article p { 
				width:100%; 
				margin:0.5em auto; 
				float:none; 
				display:block; 
			}	
		/* Account subs details */
			.system .col:nth-of-type(1) p.left { 
				float:left; 
				display:inline-block; 
			}
			.system .col:nth-of-type(1) p.right { 
				float:right; 
				display:inline-block; 
			}
			.account-content.active .content-full-width:nth-of-type(1) { 
				margin-bottom:0.5em 
			}
			.subscription-content { 
				padding:0.5em 0; 
			}
			.subscription-content:nth-of-type(odd) { 
				background-color:#eee; 
			}
			.subscription-content:nth-of-type(even) { 
				background-color:#ddd; 
			}
			.subscription-content:last-child { 
				margin-bottom:1em; 
			}
			.subscription-content .span_2_of_4 { 
				font-size:0.9em; 
				color:#333; 
			} 
			.subscription-content .col.span_1_of_4:nth-of-type(1) a {
				left:10px;
				position:relative;
				margin-right:20px;
			}
			.subscribe, 
			.renew 
			{ 
				float:right; 
				margin:0 0.5em 0 0; 
			}
		/* Customer services tab content */
			.customer-services-content .component h4 {
				color:#000;
			}
			.customer-services-content .component ul.contact-list {
				color:#000; 
				font-weight:400; 
				font-size:0.85em; 
				list-style-type:none; 
			}
			.customer-services-content .component ul.contact-list li a {
				color:#004185; 
			}
			.customer-services-content .component ul.contact-list li a:hover {
				color:#077af9; 
			}
/**************************************************************************************************************/
/* SYSTEM PAGES END */
/**************************************************************************************************************/