/*#region Component*/
.component {
	display: inline-block;
	min-height: 0;
	opacity: 1;
	width: 100%;
	margin: 0 auto;
	max-height: 99999px;
	position: relative;
}

.component > .content {
	height: 100%;
	margin: 0;
}

#sidebar .HPtemplate.component.container {
	font-size: 1rem;
	margin-top: 0;
}

.component > a.viewmore {
	width: 100%;
	display: inline-block;
	position: relative;
	z-index: 10;
	height: 40px;
	text-align: center;
	bottom: 0;
	cursor: pointer;
	line-height: 40px;
	border-top: 1px solid #EBEBEB;
}

.component a.viewmore img {
	width: 0.7rem;
}

.component > a.viewmore:after {
	content: url("../images/widget_open_blue.png");
	position: relative;
	left: 0.4rem;
}

.component a.pocexpand {
	margin-left: 0.3rem;
}

.component a.pocexpand img {
	width: 0.7rem;
}

.component.noinfo > .content {
	background: none;
	box-shadow: 0 0 0;
}

.component .loadingError {
	padding: 1rem;
	font-weight: bold;
}

.component.subdued {
	background: none;
	border: none;
	box-shadow: none;
}

	.component.subdued .component,
	.component.subdued,
	.component.subdued a.viewmore {
		background: none !important;
	}

		.component.subdued > a.viewmore {
			box-shadow: 0 -1px 1px #ccc;
		}

.component .list.hoverable .nodatalistelement:hover {
	cursor: default;
}

.widgets .component {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

	.widgets .component.capped {
		overflow: hidden;
	}

.component .errormessage {
	margin: 15px 0;
	font-size: 1.2em;
	border: 1px dashed #ddd;
	padding: 1em;
	font-weight: bold;
	text-align: left;
}

.loginalert .errormessage {
	padding: 0 0 5px 20px;
	border: none;
}

.messageComponent p {
	font-size: 1.05em;
}


/*#endregion*/

/*#region TITLES & TOOLBARS*/

.component .titlebar {
	font-size: 1.4em;
}

.HPcell.component > .titlebar {
	margin: 0 0 0.3rem 0;
}

.Popup.component .titlebar {
	font-weight: bold;
	padding: 0.5rem;
	width: auto;
	font-size: 1.1em;
}

.component.Popup.textlessTitle .titlebar {
	background-color: transparent;
	background: repeat;
	border: none;
}

.Popup.notitle .titlebar {
	background-color: transparent;
	float: right;
	width: auto;
}

.component ul.buttons {
	font-size: inherit;
}

.component .titlebar ul,
.component .titlebar ul li {
	margin-bottom: 0;
}

.component ul.buttons li {
	display: inline-block;
}

.Popup.component .titlebar ul.buttons {
	position: absolute;
	display: inline;
	right: -14px;
	top: -8px;
	z-index: 999;
}

.Panel.component .titlebar ul.buttons {
	float: right;
	display: inline;
	position: relative;
}

.component.notitle .titlebar.nobuttons {
	display: none;
}

.Popup .toolbar { /*removed .content between popup and toolbar*/
	padding-top: 5px;
	margin-top: 5px;
}

	.Popup .toolbar ul.buttons,
	.Popup .toolbar ul.buttons li {
		margin-bottom: 0;
	}

.Popup.nobuttons {
	padding-bottom: 5px;
}

.component.Popup.textlessTitle > .titlebar {
	padding: 0;
}

.Popup ul.buttons {
	text-align: center;
}

	.Popup ul.buttons .button {
		margin: 0 0.25rem;
	}

.datatile .Popup ul.buttons .previouspage.button {
	margin-bottom: 30px;
}

.Popup li.previouspage .previouspage.button {
	border-style: solid;
	border-width: 1px;
	display: inline-block;
	margin: 0;
	width: auto;
}

.Popup .titlebar .buttons a.cancelworkflow {
	border-radius: 1rem;
	color: #FFF;
	display: inline-block;
	font-weight: bold;
	height: 1.5rem;
	line-height: 1.25rem;
	vertical-align: top;
	width: 1.5rem;
	background-image: url("../images/close_popup.png");
	background-size: 55%;
	background-repeat: no-repeat;
	background-position: center;
}

.Popup.component.overflowvisible > .content {
	overflow-y: visible !important;
}

/*#endregion*/

/*#region Containers*/

.container .content .component:last-child {
	margin-bottom: 0;
}

.component.Popup {
	display: block;
	font-size: 0.9em;
	padding: 0;
	position: absolute;
	top: 0;
	left: 50%;
	width: auto;
	z-index: 3002;
	outline: 0;
	box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.8);
	overflow: visible;
	margin-bottom: 0;
}

	.component.Popup .component {
		padding: 0;
		margin: 0;
	}

	.component.Popup > .titlebar {
		position: relative;
		font-size: 1.3rem;
		font-weight: normal;
	}

		.component.Popup > .titlebar .titlebarblurbackground {
			overflow: hidden;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			display: block;
		}

			.component.Popup > .titlebar .titlebarblurbackground::before {
				content: "";
				display: block;
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				background: rgba(0, 0, 0, 0) url("../images/background_blurred.jpg") no-repeat fixed top center / cover;
				z-index: -1;
				overflow: hidden;
			}

.Popup.notitle.nobuttons {
	padding: 20px;
}

.component.Popup > div.content {
	width: 100%;
	margin: 0;
	padding: 10px 15px;
}

.Popup.small p,
.Popup.medium p {
	text-align: center;
	margin-bottom: 5px;
}

.component.Popup.small {
	width: 35%;
	min-width: 450px;
}

.component.Popup.medium {
	width: 55%;
	min-width: 710px;
}

.component.Popup.large {
	width: 75%;
	min-width: 960px;
}

/*#endregion*/


/* #region Framework*/
.Popup.logout img {
	padding-top: 10px;
}

.component.Popup.logout {
	padding: 0.75rem;
	text-align: center;
	width: 250px;
}

.component.inlineloading {
	height: 18px;
	font-size: 1.2em;
	margin: 10px;
	padding: 0;
	position: relative;
	top: 0;
	opacity: 1;
}

#sidebar .component.inlineloading {
	font-size: 1rem;
}

.component.inlineloading .content .ajaxspinner .spinner {
	height: 18px;
	background: url(data:image/gif;base64,R0lGODlhEAAQAPIAAPz8/AAAAMDAwEFBQQAAAGFhYYCAgJCQkCH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==) no-repeat;
}

.component .actionButtons {
	text-align: center;
}

.component.twothirdsrow {
	width: 66%;
}

.component.onethirdrow {
	width: 33%;
}

/*#endregion*/

/*#region TRANSITIONS*/
.filledContainer,
.component,
.alertcontent {
	-webkit-transition: height 1s; /* Safari */
	-moz-transition: height 1s;
	-o-transition: height 1s;
	transition: height 1s;
}

#alertspanel-autowaitlist .inlineloading {
	-webkit-transition: height 0s; /* Safari */
	-moz-transition: height 0s;
	-o-transition: height 0s;
	transition: height 0s;
}

body .component > .content {
	-webkit-transition: opacity 1s; /* Safari */
	-moz-transition: opacity 1s;
	-o-transition: opacity 1s;
	transition: opacity 1s;
}

.component .loginalert .body {
	-webkit-transition: margin-top 1s; /* Safari */
	-moz-transition: margin-top 1s;
	-o-transition: margin-top 1s;
	transition: margin-top 1s;
}

/*#endregion*/

/*#region HOME PAGE TEMPLATES*/
.HPtemplate {
	display: block;
	margin-top: 0;
}

	.HPtemplate .content {
		padding-bottom: 0;
	}

.filledContainer {
	position: relative;
}

	.filledContainer > .component {
		height: 100%;
	}

/*#endregion*/

/*#region Misc*/

#alerts > .loginalert a::after,
.quickLinks.vertical a::after,
.component.pocdefault ul li.listelement:after,
.Alerts .loginalert .loginalert.tab::after,
.Alerts .loginalert.h2gAlert::after {
	content: "";
	height: 1px;
	position: absolute;
	bottom: 0;
	right: 0;
}

#alertspanel-autowaitlist.loginalert.tab::before {
	height: 0;
}

#alerts .loginalert:last-child a::after,
.quickLinks.vertical a:last-child::after,
.component ul li.listelement:last-child:after {
	height: 0;
}

/*#endregion*/

/*#region Alerts*/

.loginalert {
	position: relative;
	min-height: 3.4rem;
	overflow: hidden;
}

.Alerts.noinfo > .content .nodata:before {
	content: "";
	width: 1.6rem;
	height: 1.6rem;
	background: url("../images/notification.png") no-repeat;
	display: inline-block;
	position: relative;
	left: -0.5rem;
	background-size: 1.4rem;
	vertical-align: middle;
}

.loginalert > a,
.loginalert > p,
.loginalert.h2gAlert {
	display: block;
	width: 100%;
	padding: 0.5rem 1rem;
	position: relative;
	line-height: 2rem;
	z-index: 999;
}

.loginalert > p {
	line-height: 1rem;
}

	.loginalert > a:focus {
		color: initial;
	}

.Alerts .loginalert > a::after,
.Alerts .loginalert > p::after,
.Alerts .loginalert .loginalert.tab::after,
.Alerts .loginalert.h2gAlert::after {
	width: calc(100% - 48px - 2rem);
}

.Alerts .loginalert > a span.alertContent,
.Alerts .loginalert > p span.alertContent,
.Alerts .loginalert.h2gAlert span.alertContent {
	display: inline-block;
	width: calc(100% - 48px - 1rem); /*Subtract width of image and left padding*/
	line-height: normal;
	margin-top: 0.2rem;
	vertical-align: middle;
}

.Alerts .loginalert > p span.alertContent {
	line-height: 1.2rem;
}


.Alerts .loginalert > a img.icon,
.Alerts .loginalert > p img.icon,
.Alerts .loginalert .head img.icon,
.Alerts .loginalert.h2gAlert img.icon {
	height: 48px;
	width: 48px;
	vertical-align: top;
	display: inline-block;
	margin: 0 1rem 0 0;
}

/*Add height to div containing img in H2G Mega Alert to stop race condition where image may not be loaded by the time the height of the alerts section is calculated
  and so that alerts aren't cut off because the components on the home page are not responsive. */
.loginalert .h2gAlert {
	height: 100px;
}

/* Add static width to the image as part of temporary bandage fix to not allow image to be responsive since the component containing it is not responsive. */
.loginalert .h2gAlert img {
	width: 400px;
	height: inherit;
}

.icon-timesensitive {
	height: 2rem;
	width: 2rem;
	position: absolute;
	top: 0;
	left: 0;
}

.loginalert a.head + .bodyanimator {
	cursor: pointer;
}

.loginalert .body {
	width: calc(100% - 4rem);
	margin-left: calc(4rem);
	padding: 0 1rem 0.4rem;
}

.loginalert .contenthead {
	margin-bottom: 0.5rem;
}

.loginalert .contentbody .apptoffer {
	display: inline-block;
	width: 45%;
	vertical-align: top;
	padding: 0;
}

div.leftcolfull.apptoffer.card {
	width: 75%;
}

.loginalert .contentbody .leftcol {
	margin-right: 6%;
}

div.leftcolfull.apptoffer.card,
div.leftcol.apptoffer.card,
div.rightcol.apptoffer.card {
	cursor: default;
}

.loginalert .body .contentbody .offertitle {
	text-align: center;
	padding: 0.3rem;
	display: block;
	font-weight: bold;
	min-height: 1.5rem;
}

.loginalert .apptoffer .button:not(.multi) {
	left: 25%;
	margin: 0.7rem 0 1.4rem;
}

.loginalert .apptoffer .buttons.multi {
	margin: 0.7rem 0;
	left: 25%;
	position: relative;
}

.loginalert .contentbody a:not(.button) {
	margin: 10px 0 0;
	display: inline-block;
}

#alertspanel-autowaitlist .component.isanimating .content,
#alertspanel-autowaitlist .component.isanimating {
	overflow-x: hidden;
	overflow-y: hidden;
}

.loginalert .body .alertcontent {
	margin: 0 auto 1.5rem;
}

.loginalert .body .apptDetails {
	display: block;
	margin: 1rem auto 0.5rem;
}

	.loginalert .body .apptDetails.nooffer {
		width: 85%;
	}

.loginalert .body .apptDateDetails *,
.loginalert .body .appProvDetails * {
	display: block;
}

.loginalert .body .apptDateDetails {
	width: 20%;
	display: inline-block;
	vertical-align: top;
	margin: 0 2.5%;
	text-align: center;
}

.loginalert .body .appProvDetails {
	width: 74%;
	display: inline-block;
}

.loginalert .body .apptDateDetails .month {
	font-size: 1.2em;
	text-transform: uppercase;
	margin: 0.4rem 0;
}

.loginalert .body .apptDateDetails .date {
	font-size: 2em;
	margin: 0.4rem 0;
}

.loginalert .body .apptDateDetails .year {
	font-size: 0.8em;
	margin: 0.4rem 0;
}

.loginalert .body .appProvDetails .apptTime {
	font-weight: bold;
}

.loginalert .body .appProvDetails .visitType {
	font-weight: bold;
}

.loginalert .body .apptButtons a {
	position: relative;
	left: 25%;
	max-width: 73%;
}

.loginalert .contenthead .noactionoffertitle {
	margin-bottom: -0.5rem;
	display: block;
	padding: 0.3rem 0.5rem;
	min-height: 1rem;
}

/*.loginalert.tab .alertcontent:first-child .noactionoffertitle{
	margin-top: 1rem;
}*/

.loginalert .expiredoffer {
	padding: 0.5rem;
	border-bottom: 1px solid #F2F2F2;
	min-height: 1rem;
	margin: 0 0.5%;
}

	.loginalert .expiredoffer:last-child {
		border-bottom-width: 0;
	}

	.loginalert .expiredoffer .expiredofferdate {
		display: block;
		font-weight: bold;
	}

/*Alerts component needs to be overflow hidden so that it can be hidden*/
.loginalert .component {
	margin: 0;
}

.Alerts .loginalert:last-child .loginalert.tab:last-child:after {
	height: 0 !important;
}


/*Appointments page fast pass styles*/

.apptalerts {
	padding-top: 0.5rem;
}

	.apptalerts .loginalert .body {
		background: none;
	}

	.apptalerts .loginalert .icon-timesensitive {
		display: none;
	}

	.apptalerts .loginalert .head {
		padding-left: 5rem;
		margin-bottom: 0.4rem;
	}
	
@media only screen and (max-width: 1300px) {
	.loginalert .apptoffer.card,
	.loginalert .body .apptDetails {
		width: auto;
		height: auto !important;
		min-height: 0 !important;
	}	
}
@media only screen and (max-width: 768px) {
	.loginalert .body .apptDateDetails {
		width: 30%;
	}
	.loginalert .body .appProvDetails {
		width: 65%;
	}
	.loginalert .apptoffer .buttons.multi,
	.loginalert .apptoffer .button.autowidth {
		display: block;
		width: 85%;
		margin: 0 auto 0.5rem;
		position: static;
	}
	.loginalert .apptoffer .button.multi {
		width: 100%;
		margin-bottom: 0.5rem;
	}
	.apptalerts .loginalert .head,
	.apptalerts .loginalert .body {
		width: 100%;
		margin-left: 0;
		padding: 0;
		display: block;
	}
}
/*#endregion*/

/*#region Quicklinks
	*mborofsk: this applies to messaging sidebar as well
*/

.quickLinks a {
	display: inline-block;
	width: 16.23%;
	text-align: center;
	vertical-align: top;
	min-height: 4.5rem;
	margin-bottom: 0.7rem;
	white-space: pre-wrap;
	-ms-word-wrap: break-word;
	word-wrap: break-word;
	position: relative;
}

.quickLinks:not(.vertical) #links {
	margin-top: 1rem;
}

.quickLinks a img {
	display: block;
	margin: 0 auto;
	height: 3.5rem;
}

.quickLinks.vertical {
	min-height: 80px;
}

	.quickLinks.vertical a {
		width: 100%;
		display: block;
		text-align: left;
		padding: 0.6rem 0;
		margin: 0;
		min-height: 2.5rem;
	}

		.quickLinks.vertical a img {
			width: 48px;
			height: 48px;
			display: inline-block;
			vertical-align: middle;
			margin: 0 0.5rem 0 -2px;
		}

		.quickLinks.vertical a span {
			display: inline-block;
			width: calc(100% - 48px - 0.5rem);
			vertical-align: middle;
		}

		.quickLinks.vertical a::after {
			width: calc(100% - 2.5rem - 0.7rem); /*Width of image and margin right*/
		}

/*#endregion*/

/*#region News widget*/

.component.news > .content:not(:empty) {
	overflow: visible;
}

.component.news .newscard,
.campaignCard {
	background: no-repeat scroll 1rem center / 6.5rem auto;	
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: 1rem center;
	background-size: 6.5rem auto;
	min-height: 10rem;
	
	padding-bottom: 1rem;
	padding-right: 1rem;
	margin-top: 0.6%;
	margin-bottom: 0.6%;
}

.component.news .newscard {
	display: inline-block;
	margin-left: 0.6%;
	margin-right: 0.6%;
	vertical-align: top;
	width: 49.4%;
	padding-top: .5rem;
}

.campaignCard:not(.imageCard) {
	padding-left: 1rem;
}

.campaignCard.imageCard,
.component.news .newscard {
	padding-left: 9rem;
}

.component .news .newscard.videoVisits {
	background-position-x: 20px/*rtl:calc(100% - 20px)*/;
	background-image: url("../images/video_visit.png");
}

.component .news .newscard.careEverywhere {
	background-position-x: 20px/*rtl:calc(100% - 20px)*/;
	background-image: url("../images/logo_careeverywhere.png");
}

.component .news .newscard.devices {
	background-position-x: 20px/*rtl:calc(100% - 20px)*/;
	background-image: url("../images/devices.png");
}

.component .news .newscard.mobileApps {
	background-position-x: 20px/*rtl:calc(100% - 20px)*/;
	background-image: url("../images/mobile_tile.png");
}

/*#endregion*/

/*#region External loading indicator*/

#sidebar .component.inlineloading.withsources .loadingExt {
	transform: rotate(-45deg) scale(0.10);
}

.component.inlineloading.withsources {
	height: auto;
	text-align: center;
}

.inlineloading.withsources > .content {
	overflow: visible;
}

.inlineloading.withsources {
	max-height: 100px;
	min-height: 100px;
	transition: max-height 0.5s ease-in;
	overflow: hidden;
}

	.inlineloading.withsources.loaded {
		max-height: 0;
		min-height: 0;
		margin: 0;
	}

.hasNoCommunityLinks .inlineloading.withsources .loadingStatus {
	display: none;
}

.loadingExt {
	display: block;
	position: relative;
	width: 256px;
	height: 256px;
	transform: rotate(-45deg) scale(0.15);
	vertical-align: middle;
	margin: -90px auto;
}

	.loadingExt.loaded {
		opacity: 0;
		transition: opacity 0.5s 1s;
	}

	.loadingExt > span {
		display: block;
		height: 100%;
		width: 100%;
		position: absolute;
	}

		.loadingExt > span:before {
			content: "";
			width: 100%;
			height: 100%;
			display: block;
			transform: rotate(45deg);
			background-size: 100%;
			font-size: 100%;
		}

	.loadingExt.loading:before {
		content: "";
		background: transparent;
		border-radius: 100%;
		position: absolute;
		transform: rotate(45deg);
		animation: radiatingGlow 1s ease-in-out infinite;
		top: 10%;
		left: 10%;
		width: 85%;
		height: 85%;
	}

	.loadingExt.loading .lE-backorbit {
		animation: wipeFromLeft 1s ease-in-out 0.6s infinite;
		opacity: 0;
	}

	.loadingExt.loading .lE-fullLogo {
		animation: wipeFromTopRight 1s ease-in-out infinite;
	}

	.loadingExt.loading .lE-panhandleAndCheck {
		opacity: 0;
	}

	.loadingExt.loaded > span:before {
		opacity: 0;
	}

	.loadingExt.loaded .lE-panhandleAndCheck {
		animation: fadeInOut 5s ease-in-out 1;
	}

.lE-backorbit:before         {background-image: url("../images/loadingIndicators/externalloading_layer1.png");}
.lE-moon:before              {background-image: url("../images/loadingIndicators/externalloading_layer2.png");}
.lE-fullLogo:before          {background-image: url("../images/loadingIndicators/externalloading_layer3.png");}
.lE-panhandleAndCheck:before {background-image: url("../images/loadingIndicators/externalloading_layer4.png");}

.lE-moon:before {
	transition: opacity 0.5s;
	opacity: 1;
}

.loadingExt.loaded .lE-panhandleAndCheck:before {
	opacity: 1;
}

@keyframes radiatingGlow {
	19.99%  {box-shadow: inset 0 0 40px 20px rgba(247,150,34,0),   0 0 80px -60px rgba(247,150,34,  0);}
	20%     {box-shadow: inset 0 0 40px 20px rgba(247,150,34,0.5), 0 0 80px     0 rgba(247,150,34,0.5);}
	50%     {box-shadow: inset 0 0 40px 20px rgba(247,150,34,0.5), 0 0 80px  60px rgba(247,150,34,0.5);}
	80%     {box-shadow: inset 0 0 40px 20px rgba(247,150,34,0),   0 0 80px     0 rgba(247,150,34,  0); width: 150%; height: 150%; left: -25%; top: -20%;}
}
@keyframes hideFromTopRight {
	0%       {clip: rect(0, 305px, 256px, 0);}
	49.999%  {clip: rect(0, 0px,  256px, 0);}
	50%      {clip: rect(0, 305px, 256px, 305px);}
	100%     {clip: rect(0, 305px, 256px, 20px);}
}
@keyframes wipeFromTopRight {
	0%      {clip: rect(0, 305px, 256px, 305px);}
	49.999% {clip: rect(0, 305px, 256px, 0);}
	50%     {clip: rect(0, 305px, 256px, 0);}
	100%    {clip: rect(0, 0px, 256px, 0);}
}
@keyframes  wipeFromLeft {
	0%      {clip:rect(0,60px,256px,0); opacity: 1;}
	49.999% {clip:rect(0,256px,256px,0); opacity: 1;}
	50%     {clip:rect(0,256px,256px,0); opacity: 1;}
	100%    {clip:rect(0,256px,256px,256px); opacity: 1;}
}
@keyframes fadeInOut {
	0%   {opacity: 0;}
	10%  {opacity: 1;}
	90%  {opacity: 1;}
	100% {opacity: 0;}
}

/*#endregion*/

/* #region Internal loading indicators - loading Heart */

.loadingHeart {
	display: block;
	position: relative;
	margin: 0 auto;
	width: 64px;
	height: 64px;
	background-image: url("../images/loadingIndicators/loadingHeartBackground.png"); /* Heart BG */
	transform: scale(0.8);
	animation: heartbeat 2s 0.2s ease infinite;
}

	.loadingHeart:before {
		content: url("../images/loadingIndicators/loadingHeartPulse.png"); /* Pulse image */
		animation: wipeFromLeft 2s linear infinite;
		/* Needed for clip to work */
		position: absolute;
		overflow: hidden;
		clip: rect(0,0,64px,0);
	}

	.loadingHeart:after {
		position: absolute;
		left: 0;
		top: 31.5px;
		width: 5px;
		height: 5px;
		background: #fff;
		border-radius: 100%;
		content: "";
		opacity: 0;
		animation: pulse 2s linear infinite;
	}

html[dir="rtl"] .loadingHeart:after{
	display:none;
}

@keyframes heartbeat {
  0%  { transform: scale(0.8);   }
  14% { transform: scale(1); }
  28% { transform: scale(0.8);   }
  42% { transform: scale(1); }
  70% { transform: scale(0.8);   }
  100%{ transform: scale(0.8);   }
}

@keyframes wipeFromLeft {
  0%   {clip:rect(0,0,64px,0);}
  50%  {clip:rect(0,64px,64px,0);}
  100% {clip:rect(0,64px,64px,64px);}
}

@keyframes pulse {
  0%      { left: 0; }
  1%      { opacity: 1; }

  12%     { top: 31.5px; }
  15%     { top: 28px; }     /* P */
  16.5%   { top: 31.5px; }

  19.5%   { top: 31.5px; }
  22%     { top: 12px;}      /* R */
  24%     { top: 48px; }     /* S */
  28%     { top: 31.5px; }

  32%     { top: 31.5px; }
  35%     { top: 28px; }     /* T */
  36.5%   { top: 31.5px; }

  47%     { opacity: 1; height: 5px; width: 5px; }
  50%     { opacity: 0; height: 0;   width: 0;   left:60px; }
}

/*#endregion*/

/* #region TEMPLATES*/
.component.alerts {
	min-height: 1px;
}

.templateA .filledContainer .column.twothirdsrow.news {
	min-height: 715px;
	height: auto;
}

.templateA .filledContainer .column.twothirdsrow {
	left: 0;
}

.templateA .filledContainer .column.onethirdrow div {
	text-align: center;
}

.templateA .filledContainer .column.onethirdrow {
	left: 67%;
	text-align: left;
}

.templateA .filledContainer .halfColumn {
	height: 49%;
}

.templateA .filledContainer .top {
	top: 0;
}

.templateA .filledContainer .bottom {
	top: 51%;
}

.templateC .HProw .HPcell:first-child {
	margin-left: 0;
}

.templateC .HProw .HPcell {
	width: 32.66%;
	margin-left: 1%;
}

.templateC .filledContainer {
	margin-bottom: 10px;
}

	.templateC .filledContainer .component.news {
		height: 100%;
	}

.templateB .filledContainer .column {
	position: relative;
}

.templateB .filledContainer {
	margin-bottom: 10px;
}

/*#endregion*/

/* #region Menu Details Table structure with left and right columns*/

.menudetailstable {
	display: table;
	table-layout: fixed;
}

	.menudetailstable .column {
		display: table-cell;
		position: relative;
		vertical-align: top;
	}

	.menudetailstable.leftmenu .leftcolumn {
		min-width: 250px;
		width: 25%;
		overflow: hidden;
	}

	.menudetailstable.leftmenu .rightcolumn {
		min-width: 700px;
		width: 75%;
		overflow-y: auto;
	}

	.menudetailstable.leftmenu .leftcolumn::before,
	.goalslarge .goalsleft::before,
	.TRPContainer::before {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0) url("../images/background_blurred.jpg") repeat top left;
		z-index: -1;
		overflow: hidden;
	}

/*#endregion*/


/* #region External Organizations */

.externalorganizations.component {
	min-height: 30px;
}

.externalorganizations .externalorg {
	display: inline-block;
	width: 48%;
	margin: 1%;
	vertical-align: top;
	text-align: center;
}

.externalorganizations .orgsinfo {
	display: block;
	position: relative;
	min-height: 4rem;
	padding-top: 1rem;
}

.externalorganizations .precontent {
	margin: 0.5rem 0;
}

.externalorganizations .orgname {
	font-size: 0.9rem;
	display: block;
}

.externalorganizations .orglogosection {
	display: block;
	width: 4rem;
	height: 4rem;
	margin: 0 auto 0.5rem;
	position: relative;
}

.externalorganizations .orglogo {
	height: 4rem;
	width: 4rem;
}

.externalorganizations .pretext {
	margin: 0.5rem auto;
}

.externalorganizations .badge {
	position: absolute;
	top: 0.7rem;
	left: calc( 50% + 1.1rem);
	z-index: 111;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	line-height: 1.5rem;
}

.externalorganizations .externalorg.inactive .badge.orglink {
	top: 3.3rem;
	background-size: 1.5rem;
	display: block;
	color: #ffffff;
	font-weight: bold;
	font-size: 1.2rem;
	background-color: #ed9200;
}

.externalorganizations .externalorg .badge.orglink {
	display: none;
}

.externalorganizations .loadingfailed {
	background: url("../images/data_loading_error.png") no-repeat;
	border-radius: 0;
	background-size: 1.5rem;
	width: 1.5rem;
	height: 1.5rem;
	display: block;
}

.externalorganizations .externallink {
	display: block;
}

.externalorganizations .inactiveoverlay {
	background: url("../images/external_org_link.png") no-repeat;
	position: absolute;
	background-size: 2rem;
	width: 2rem;
	height: 2rem;
	top: 1rem;
	left: 1rem;
}

#sidebar .externallinking .pretext {
	font-size: 0.9rem;
}

#sidebar ..externallinking.component {
	margin-bottom: 1rem;
}


/*#endregion*/

/* #region Community List Manager*/

.CommunityListManager > .inlineloading.loaded + .content {
	min-height: 0;
}

.CommunityListManager > .inlineloading + .content {
	min-height: 110px;
}

.CommunityListManager {
	display: inline-block !important;
	height: auto;
}

	.CommunityListManager .content > ul {
		-moz-transition: opacity 1s;
		-o-transition: opacity 1s;
		-webkit-transition: opacity 1s;
		transition: opacity 1s;
		opacity: 1;
	}

	.CommunityListManager.hidden .content > ul {
		opacity: 0;
	}

	.CommunityListManager .inlineloading.withsources {
		position: absolute;
		z-index: 1;
	}

/* #endregion */

/*#region Misc*/
.PickOrganization .content > p {
	font-size: 1.2rem;
	padding: 0.4rem;
}
/*#endregion*/

/* #region Notification Alert*/

.component.Popup.notificationreview {
	width: 52rem;
	font-size: 1em;
}

	.component.Popup.notificationreview .titlebar {
		padding: 0;
	}

		.component.Popup.notificationreview .titlebar span {
			display: none;
		}

	.component.Popup.notificationreview > .content {
		padding: 1.5rem;
	}

		.component.Popup.notificationreview > .content > .notoolbar,
		.component.Popup.notificationreview > .content > .notoolbar > .content {
			overflow: visible;
		}

.component.notificationreview .methodoptions {
	display: inline-block;
	width: 50%;
	padding: .5rem 0 0;
	vertical-align: top;
}
.component.notificationreview .methodoptions.onlymethod {
	margin: 0 auto;
}

	.component.notificationreview .methodoptions > div {
		display: inline-block;
	}

	.component.notificationreview .methodoptions span,
	.component.notificationreview .showError .alert {
		margin-left: .5rem;
		display: inline-block;
	}

.component.Popup.notificationreview span.alert {
	display: none;
}

.component.Popup.notificationreview .showError .field {
	border-color: #f00;
}

.component.Popup.notificationreview .section .content .icon {
	max-height: 4.5rem;
	vertical-align: top;
}

.component.Popup.notificationreview .button.buttoncheck,
.component.Popup.notificationreview .field {
	box-sizing: border-box;
	width: 100%;
}

.component.Popup.notificationreview .field {
	padding: .3rem;
}

.component.Popup.notificationreview .actions,
.component.Popup.notificationreview .footer {
	width: 100%;
	padding: 0.5rem 0;
}

.component.Popup.notificationreview .actions {
	text-align: center;
}

.component.Popup.notificationreview .footer {
	font-size: 0.9em;
	color: gray;
	padding-bottom: 0;
}

/* #endregion */