/* --------------------------------------
	Main Layout Style Sheet
   -------------------------------------- */
/* Add the Bootstrap Constants */
/**/
/*color constants are copied into ColorsViewModel.cs*/
/* These Z-Indexes Are Intertwined In order to support popups*/
/*-------------------- Top Bar and Main Menu --------------------------*/
/* -------------------------------------- Basic Typography -------------------------------------- */
/* -------------------------------------- Responsive Constants -------------------------------------- */
/* Same widths as Bootstrap's responsive breaks: http://getbootstrap.com/2.3.2/scaffolding.html#responsive */
/* --------------------------------------
	Responsive
	
	Some CSS, Mixins, and Media Queries
	to assist in making things respnosive
	 
   -------------------------------------- */
/*color constants are copied into ColorsViewModel.cs*/
/* These Z-Indexes Are Intertwined In order to support popups*/
/*-------------------- Top Bar and Main Menu --------------------------*/
/* -------------------------------------- Basic Typography -------------------------------------- */
/* -------------------------------------- Responsive Constants -------------------------------------- */
/* Same widths as Bootstrap's responsive breaks: http://getbootstrap.com/2.3.2/scaffolding.html#responsive */
/* Animate the element when it's size/position changes (not just on breakpoints...) */
.breakpoint-animate {
		transition: width 0.5s ease-in-out, top 0.5s ease-in-out, left 0.5s ease-in-out, height 0.5s ease-in-out, padding 0.5s ease-in-out, margin 0.5s ease-in-out, right 0.5s ease-in-out, bottom 0.5s ease-in-out;
		-ms-transition: width 0.5s ease-in-out, top 0.5s ease-in-out, left 0.5s ease-in-out, height 0.5s ease-in-out, padding 0.5s ease-in-out, margin 0.5s ease-in-out, right 0.5s ease-in-out, bottom 0.5s ease-in-out;
		-moz-transition: width 0.5s ease-in-out, top 0.5s ease-in-out, left 0.5s ease-in-out, height 0.5s ease-in-out, padding 0.5s ease-in-out, margin 0.5s ease-in-out, right 0.5s ease-in-out, bottom 0.5s ease-in-out;
		-webkit-transition: width 0.5s ease-in-out, top 0.5s ease-in-out, left 0.5s ease-in-out, height 0.5s ease-in-out, padding 0.5s ease-in-out, margin 0.5s ease-in-out, right 0.5s ease-in-out, bottom 0.5s ease-in-out;
		-o-transition: width 0.5s ease-in-out, top 0.5s ease-in-out, left 0.5s ease-in-out, height 0.5s ease-in-out, padding 0.5s ease-in-out, margin 0.5s ease-in-out, right 0.5s ease-in-out, bottom 0.5s ease-in-out; }

/* Use this to build custom responsive shims for elements */
/*color constants are copied into ColorsViewModel.cs*/
/* These Z-Indexes Are Intertwined In order to support popups*/
/*-------------------- Top Bar and Main Menu --------------------------*/
/* -------------------------------------- Basic Typography -------------------------------------- */
/* -------------------------------------- Responsive Constants -------------------------------------- */
/* Same widths as Bootstrap's responsive breaks: http://getbootstrap.com/2.3.2/scaffolding.html#responsive */
@-webkit-keyframes spin {
		from {
				-webkit-transform: rotate(0deg);
				transform: rotate(0deg); }
		to {
				-webkit-transform: rotate(360deg);
				transform: rotate(360deg); } }

@keyframes spin {
		from {
				-webkit-transform: rotate(0deg);
				transform: rotate(0deg); }
		to {
				-webkit-transform: rotate(360deg);
				transform: rotate(360deg); } }

@-ms-viewport {
		width: auto !important; }

/* ---------------------------------- LAYOUT CONTAINERS ---------------------------------- */
#LayoutBelowTopBar {
		width: 100%;
		position: relative; }
		#LayoutBelowTopBar #LayoutLeftColumn {
				min-width: 250px;
				float: left;
				min-height: 100%;
				position: absolute;
				z-index: 902;
				/*background-image: url("/XC/_common/images/fade-background.png");
		background-repeat: repeat-x ;*/
				/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1b9e4b+0,1b9e4b+72,1ebd59+100 */
				background: #1b9e4b;
				/* Old browsers */
				background: -moz-linear-gradient(top, #1b9e4b 0%, #1b9e4b 72%, #1ebd59 100%);
				/* FF3.6-15 */
				background: -webkit-linear-gradient(top, #1b9e4b 0%, #1b9e4b 72%, #1ebd59 100%);
				/* Chrome10-25,Safari5.1-6 */
				background: linear-gradient(to bottom, #1b9e4b 0%, #1b9e4b 72%, #1ebd59 100%);
				/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b9e4b', endColorstr='#1ebd59',GradientType=0 );
				/* IE6-9 */
				background-position-y: 158px; }
		#LayoutBelowTopBar #LayoutRightColumn {
				margin-top: 60px;
				padding: 20px 20px 0 270px;
				float: left;
				width: 100%;
				min-height: 455px;
				background-color: #FFF;
				/*
		#NoPaddingHeaders {
			margin-top: -$LayoutGutterSize ;
			margin-bottom: $LayoutGutterSize ;
			margin-left: -$LayoutGutterSize ;
			margin-right: -$LayoutGutterSize ;
		}*/ }

#PageBodyContainer {
		min-height: 700px; }

.relayout-page-without-side-margins {
		margin-left: -20px;
		margin-right: -20px;
		padding-left: 20px;
		padding-right: 20px; }

.relayout-page-without-top-margin {
		margin-top: -20px;
		padding-top: 20px; }

.relayout-page-without-bottom-margin {
		margin-bottom: -20px;
		padding-bottom: 20px; }

#XcentricLogo_Small {
		position: absolute;
		bottom: 0px;
		padding-right: 3px;
		display: table;
		padding-left: 20px; }
		#XcentricLogo_Small a img {
				width: 100%;
				padding: 20px; }

/* ---------------------------------- FIRM POPOUT BOX ---------------------------------- */
#FirmNameContainer {
		position: fixed;
		top: 0px;
		left: 250px;
		cursor: pointer;
		padding: 0px 20px;
		z-index: 901; }
		@media (max-width: 1400px) {
				#FirmNameContainer {
						width: 345px;
						height: 60px;
						overflow: hidden; } }
		#FirmNameContainer.my-workspace-only {
				cursor: default; }
				#FirmNameContainer.my-workspace-only #WorkspaceIcon {
						position: relative;
						line-height: 60px;
						display: inline-block;
						width: 30px;
						height: 100%;
						margin-right: 20px; }
						#FirmNameContainer.my-workspace-only #WorkspaceIcon .fa-fort-awesome {
								font-size: 16px;
								position: absolute;
								top: -18px;
								left: 7px;
								z-index: 1;
								color: #424242; }
						#FirmNameContainer.my-workspace-only #WorkspaceIcon .fa-cloud {
								position: absolute;
								font-size: 40px;
								bottom: -15px;
								z-index: 0;
								left: -5px;
								top: -28px;
								color: #D7F7E3; }
		#FirmNameContainer:not(.my-workspace-only):hover {
				background-color: #D7F7E3;
				background-color: #d7f7e3;
				-moz-transition: background .25s, color .25s;
				-o-transition: background .25s, color .25s;
				-webkit-transition: background .25s, color .25s;
				transition: background .25s, color .25s; }
		#FirmNameContainer #FirmName {
				width: 100%;
				font-size: 24px;
				line-height: 60px; }

#FirmNamePopout {
		background-image: url("../../images/header-profile-white.png");
		background-repeat: no-repeat;
		background-size: cover;
		position: fixed;
		width: 700px;
		top: 0px;
		left: 250px;
		z-index: 904;
		border-right: 1px solid #627e98;
		border-bottom-right-radius: 6px;
		border-bottom: 1px solid #627e98;
		box-shadow: 0px 1px 8px 5px rgba(0, 0, 0, 0.2);
		opacity: 0;
		visibility: hidden;
		transition: visibility 0s linear 0.1s,opacity 0.1s linear; }
		#FirmNamePopout #FirmName .fa-spinner {
				top: 18px;
				font-size: 1.3em; }
		#FirmNamePopout.popoutOpen {
				visibility: visible;
				opacity: 1;
				transition-delay: 0s; }
		#FirmNamePopout #FirmNameInPopout {
				font-size: 24px;
				margin-left: 20px;
				line-height: 60px;
				/*color: white;*/ }
				#FirmNamePopout #FirmNameInPopout .firm-edit-link {
						position: absolute;
						z-index: 1;
						right: 20px;
						top: 40px; }
		#FirmNamePopout #FirmPaddedContent {
				padding: 0px 20px 0px 20px;
				padding-bottom: 30px;
				font-size: 1.2em; }
				#FirmNamePopout #FirmPaddedContent #Impersonation {
						margin-bottom: 10px; }
				#FirmNamePopout #FirmPaddedContent h3 {
						color: #AAA;
						font-size: 0.9em; }
				#FirmNamePopout #FirmPaddedContent #FirmAddress {
						max-width: 400px;
						font-size: 1.1em; }
				#FirmNamePopout #FirmPaddedContent #FirmPhoneNumbers {
						max-width: 350px;
						text-align: right;
						font-size: 1.1em; }
						#FirmNamePopout #FirmPaddedContent #FirmPhoneNumbers h3 > span {
								color: #424242; }
				#FirmNamePopout #FirmPaddedContent #FirmDepartments {
						text-align: right; }
				#FirmNamePopout #FirmPaddedContent #FirmDepartments, #FirmNamePopout #FirmPaddedContent #FirmLocations {
						margin-top: 22px; }
		#FirmNamePopout #EditingCustomerListContainer {
				color: #424242;
				padding: 0px;
				top: 4px;
				left: 2px;
				position: absolute;
				width: 100%;
				margin-left: -2px;
				line-height: 60px; }
				#FirmNamePopout #EditingCustomerListContainer hr {
						margin: 2px 0 2px 0; }
				#FirmNamePopout #EditingCustomerListContainer #InputEditingCustomer {
						width: 546px;
						outline: none;
						background-color: #FFF;
						border: none;
						line-height: 34px;
						font-size: 24px;
						margin: 6px 0px 0px 11px;
						padding: 0px 9px;
						height: 36px; }
				#FirmNamePopout #EditingCustomerListContainer #EditingCustomerShortCode {
						line-height: 48px;
						font-size: 24px;
						float: right;
						margin-right: 20px;
						text-align: right;
						width: 120px;
						outline: none;
						background-color: #FFF;
						border: none; }
				#FirmNamePopout #EditingCustomerListContainer #EditingCustomerShortCode::-ms-clear, #FirmNamePopout #EditingCustomerListContainer #InputEditingCustomer::-ms-clear {
						display: none; }
				#FirmNamePopout #EditingCustomerListContainer #EditingCustomerSearchList {
						width: 800px;
						overflow-y: scroll;
						height: 30em;
						cursor: default;
						margin-top: -4px;
						border-top-left-radius: 0px;
						margin-left: -1px; }
						#FirmNamePopout #EditingCustomerListContainer #EditingCustomerSearchList .xc-customerListElement {
								cursor: pointer;
								line-height: 2em;
								margin: 0px 7px;
								padding: 0px 14px; }
								#FirmNamePopout #EditingCustomerListContainer #EditingCustomerSearchList .xc-customerListElement .fa {
										margin-right: 7px;
										margin-top: 5px;
										cursor: pointer;
										color: #1EBD59;
										font-size: 1.2em; }
										#FirmNamePopout #EditingCustomerListContainer #EditingCustomerSearchList .xc-customerListElement .fa.float-right {
												margin-right: 0px;
												margin-left: 13px; }
								#FirmNamePopout #EditingCustomerListContainer #EditingCustomerSearchList .xc-customerListElement .short-code {
										float: left; }
								#FirmNamePopout #EditingCustomerListContainer #EditingCustomerSearchList .xc-customerListElement .parent-firm {
										float: right; }
								#FirmNamePopout #EditingCustomerListContainer #EditingCustomerSearchList .xc-customerListElement .parent-firm-label, #FirmNamePopout #EditingCustomerListContainer #EditingCustomerSearchList .xc-customerListElement .customer-id {
										content: attr(cust-id);
										color: #888;
										display: inline;
										padding-left: 5px;
										visibility: hidden; }
								#FirmNamePopout #EditingCustomerListContainer #EditingCustomerSearchList .xc-customerListElement .parent-firm-label {
										margin-right: 5px;
										color: #CCC; }
								#FirmNamePopout #EditingCustomerListContainer #EditingCustomerSearchList .xc-customerListElement.selected, #FirmNamePopout #EditingCustomerListContainer #EditingCustomerSearchList .xc-customerListElement:hover {
										background-color: #1EBD59;
										color: #FFF; }
										#FirmNamePopout #EditingCustomerListContainer #EditingCustomerSearchList .xc-customerListElement.selected .fa, #FirmNamePopout #EditingCustomerListContainer #EditingCustomerSearchList .xc-customerListElement:hover .fa {
												color: #FFF; }
										#FirmNamePopout #EditingCustomerListContainer #EditingCustomerSearchList .xc-customerListElement.selected .fa:hover, #FirmNamePopout #EditingCustomerListContainer #EditingCustomerSearchList .xc-customerListElement:hover .fa:hover {
												color: #1B9E4B; }
										#FirmNamePopout #EditingCustomerListContainer #EditingCustomerSearchList .xc-customerListElement.selected .parent-firm-label, #FirmNamePopout #EditingCustomerListContainer #EditingCustomerSearchList .xc-customerListElement.selected .customer-id, #FirmNamePopout #EditingCustomerListContainer #EditingCustomerSearchList .xc-customerListElement:hover .parent-firm-label, #FirmNamePopout #EditingCustomerListContainer #EditingCustomerSearchList .xc-customerListElement:hover .customer-id {
												visibility: visible; }
								#FirmNamePopout #EditingCustomerListContainer #EditingCustomerSearchList .xc-customerListElement.filtered {
										display: none; }

/* ---------------------------------- USER POPOUT BOX ---------------------------------- */
#UserHeaderPopout {
		background: url(../../images/RN_Background500x385.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		width: 500px;
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 904;
		padding: 30px;
		color: #FFF;
		border-right: 1px solid #627e98;
		border-bottom-right-radius: 6px;
		border-bottom: 1px solid #627e98;
		box-shadow: 0px 1px 8px 5px rgba(0, 0, 0, 0.2);
		opacity: 0;
		visibility: hidden;
		transition: visibility 0s linear 0.1s,opacity 0.1s linear; }
		#UserHeaderPopout.open {
				visibility: visible;
				opacity: 1;
				transition-delay: 0s; }
		#UserHeaderPopout .user-menu-profile-pic-container {
				float: left; }
				#UserHeaderPopout .user-menu-profile-pic-container .js-inout-status-current-user-status {
						display: none; }
				#UserHeaderPopout .user-menu-profile-pic-container .user-menu-profile-pic {
						height: 125px;
						border-radius: 2px; }
		#UserHeaderPopout #NameBlock {
				float: right;
				width: 285px; }
				#UserHeaderPopout #NameBlock h3, #UserHeaderPopout #NameBlock h4 {
						color: white;
						margin-bottom: 6px; }
				#UserHeaderPopout #NameBlock h5, #UserHeaderPopout #NameBlock h6 {
						margin-bottom: 4px; }
		#UserHeaderPopout h6.user-login-history {
				margin-top: 27px; }
				#UserHeaderPopout h6.user-login-history a {
						color: #FFF; }
		#UserHeaderPopout #LinkBlock {
				margin-top: 18px; }
				#UserHeaderPopout #LinkBlock a {
						color: #FFF; }
		#UserHeaderPopout #ElevationLabel {
				margin-top: 18px;
				font-size: 1.3em; }
				#UserHeaderPopout #ElevationLabel a {
						color: #FFF; }
						#UserHeaderPopout #ElevationLabel a:hover {
								text-decoration: none; }
				#UserHeaderPopout #ElevationLabel.elevation-is-elevated .label {
						background-color: #FFF57F;
						color: #0073b6; }
		#UserHeaderPopout #UserStatusInPopout {
				margin-top: 25px; }
		#UserHeaderPopout .xc-availability-status-update-ctrl-container {
				text-align: center;
				margin-left: -5px;
				margin-right: -5px; }

/* ---------------------------------- CLOUD TOOLS POSITIONING ---------------------------------- */
#CTMenuWrapper {
		position: absolute;
		top: 570px;
		left: 230px;
		z-index: 1000; }

/* ---------------------------------- FOOTER ---------------------------------- */
#Footer {
		padding-top: 20px;
		padding-bottom: 20px;
		/*color: $Color_Font_Standard_Dark;*/
		color: #fff;
		background-color: #424242; }
		#Footer #SectionBelowMenu {
				width: 250px;
				padding-left: 20px;
				position: absolute; }
				#Footer #SectionBelowMenu #XcentricLogo_Footer_Small img {
						position: relative;
						right: 7px;
						width: 100%;
						margin-bottom: 9px; }
				#Footer #SectionBelowMenu #BetaOrDevMarker {
						width: 75px;
						margin-top: 2px; }
						#Footer #SectionBelowMenu #BetaOrDevMarker div {
								color: white;
								padding: 0px 7px;
								border-radius: 3px;
								margin-top: 2px;
								z-index: 1;
								letter-spacing: 1px;
								font-weight: 600;
								font-size: 1.3em; }
						#Footer #SectionBelowMenu #BetaOrDevMarker .dev-site {
								background: #B93E1C; }
						#Footer #SectionBelowMenu #BetaOrDevMarker .alpha-site {
								background: #E88A44; }
						#Footer #SectionBelowMenu #BetaOrDevMarker .beta-site {
								background: #1B9E4B; }
				#Footer #SectionBelowMenu #SiteAndProcessData {
						margin-left: 10px;
						line-height: 14px; }
				#Footer #SectionBelowMenu #LastLoginNotification {
						margin-top: 20px;
						display: block; }
						#Footer #SectionBelowMenu #LastLoginNotification:hover {
								color: #1EBD59;
								text-decoration: none; }
		#Footer #LinkBlocks {
				display: inline-block;
				vertical-align: top;
				width: 55%;
				padding-left: 270px;
				box-sizing: border-box;
				font-weight: 400;
				font-size: 13px; }
				@media (max-width: 1600px) {
						#Footer #LinkBlocks {
								width: 65%; } }
				#Footer #LinkBlocks .link-block {
						float: left;
						width: 33%;
						max-width: 300px; }
						#Footer #LinkBlocks .link-block .my-center-block {
								text-align: left;
								margin: auto;
								width: 150px; }
								#Footer #LinkBlocks .link-block .my-center-block.support {
										width: 185px; }
								#Footer #LinkBlocks .link-block .my-center-block h4 {
										margin-bottom: 7px; }
								#Footer #LinkBlocks .link-block .my-center-block ul {
										margin: 0;
										padding: 0;
										list-style-type: none;
										margin-bottom: 20px; }
										#Footer #LinkBlocks .link-block .my-center-block ul li {
												font-weight: 400; }
												#Footer #LinkBlocks .link-block .my-center-block ul li i.fa {
														color: #fff;
														margin-right: 4px; }
														#Footer #LinkBlocks .link-block .my-center-block ul li i.fa.fa-phone, #Footer #LinkBlocks .link-block .my-center-block ul li i.fa.fa-tag {
																transform: scaleX(-1);
																filter: FlipH;
																-ms-filter: "FlipH"; }
												#Footer #LinkBlocks .link-block .my-center-block ul li.divider {
														border-bottom: 1px solid #AAA;
														margin: 6px 0;
														width: 150px; }
		#Footer a {
				color: #424242;
				color: #fff; }
		#Footer #MarketingSection {
				float: right;
				padding-left: 20px;
				margin-left: 0;
				margin-right: 20px;
				border-left: 1px solid #EEE; }
				#Footer #MarketingSection #CenteredContent {
						text-align: center;
						margin: auto auto; }
						#Footer #MarketingSection #CenteredContent h3 {
								margin-top: -4px;
								color: #1EBD59; }
								@media (max-width: 1600px) {
										#Footer #MarketingSection #CenteredContent h3 {
												font-size: 20px; } }
						#Footer #MarketingSection #CenteredContent h5 {
								margin: 4px 0 29px 0px; }
								@media (max-width: 1600px) {
										#Footer #MarketingSection #CenteredContent h5 {
												font-size: 13px; } }
						#Footer #MarketingSection #CenteredContent #MarketingBullets {
								display: inline-block;
								vertical-align: top;
								width: 45%;
								margin-right: 20px;
								max-width: 315px;
								text-align: left; }
								#Footer #MarketingSection #CenteredContent #MarketingBullets ul {
										padding-left: 18px;
										font-size: 13px; }
										#Footer #MarketingSection #CenteredContent #MarketingBullets ul li {
												margin-top: 3px; }
								@media (max-width: 1600px) {
										#Footer #MarketingSection #CenteredContent #MarketingBullets {
												display: none; } }
						#Footer #MarketingSection #CenteredContent #MarketingVideo {
								display: inline-block; }
		@media (max-width: 1200px) {
				#Footer #LinkBlocks {
						float: none;
						width: 100%; }
				#Footer #MarketingSection {
						display: none; } }

#CitrixReceiverModal p {
		font-size: 13px; }
		#CitrixReceiverModal p i.fa {
				color: #1EBD59;
				margin-right: 4px; }

#CitrixReceiverModal div {
		text-align: center; }
		#CitrixReceiverModal div h4 {
				font-size: 17px; }
		#CitrixReceiverModal div a.btn {
				text-align: center;
				margin-right: 10%;
				width: 35%;
				font-size: 18px;
				color: #CCC; }
				#CitrixReceiverModal div a.btn:hover {
						color: #1EBD59; }

.select-chevron-style-wrapper {
		background-color: #FFF;
		display: inline-block;
		position: relative;
		width: 100%; }
		.select-chevron-style-wrapper:after {
				content: "\f078";
				font: normal normal normal 14px/1 FontAwesome;
				position: absolute;
				top: 10.5px;
				right: 12px;
				cursor: pointer; }
		.select-chevron-style-wrapper select {
				-webkit-appearance: none;
				-ms-appearance: none;
				-moz-appearance: none;
				appearance: none;
				border: 1px solid #e5e6e7;
				background-color: transparent;
				border-radius: 0;
				position: relative;
				cursor: pointer;
				z-index: 1; }
				.select-chevron-style-wrapper select:focus {
						z-index: 0; }
				.select-chevron-style-wrapper select::-ms-expand {
						display: none; }