/* --------------------------------------
	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); } }

#TopBar {
		position: fixed;
		top: 0px;
		z-index: 900;
		list-style-type: none;
		padding: 0px;
		margin: 0px;
		width: 100%;
		padding: 0 0 0 250px;
		border-bottom: 1px solid #EEE;
		font-size: 1.1em;
		background-color: #FFF;
		color: #424242;
		/* Drop down menus  */ }
		#TopBar > div {
				height: 60px;
				float: left; }
		#TopBar #TopBarDateTime {
				float: left;
				line-height: 60px; }
		#TopBar #TopBarCloudStatus {
				line-height: 60px;
				font-size: 16px;
				margin-left: 5px;
				position: relative;
				display: none; }
				#TopBar #TopBarCloudStatus.error {
						display: block;
						color: #B93E1C; }
				#TopBar #TopBarCloudStatus.warning {
						display: block;
						color: #E88A44; }
				#TopBar #TopBarCloudStatus.information {
						display: block;
						color: #2C6DA3; }
				#TopBar #TopBarCloudStatus.normal {
						display: block;
						color: #1EBD59; }
				#TopBar #TopBarCloudStatus #TopBarCloudStatusMessage {
						position: absolute;
						display: block;
						width: 100%;
						height: 14px;
						top: 22px; }
				#TopBar #TopBarCloudStatus .tooltip-inner {
						white-space: nowrap;
						max-width: 100%; }
		#TopBar .top-bar-icon {
				position: relative;
				min-width: 36px; }
				#TopBar .top-bar-icon .icon {
						font-size: 16px;
						position: relative;
						z-index: 1;
						color: #424242;
						display: block;
						line-height: 60px; }
				#TopBar .top-bar-icon .counter {
						position: absolute;
						top: 13px;
						right: 12px; }
		#TopBar #SessionsStatusDropDownMenu a.xc-icon-popout:hover, #TopBar #SessionsStatusDropDownMenu a.xc-icon-popout:focus {
				color: #1EBD59;
				background-color: transparent; }
		#TopBar #ChatSupport {
				float: right;
				line-height: 60px; }
				#TopBar #ChatSupport .chat-support-live-link {
						cursor: pointer; }
						#TopBar #ChatSupport .chat-support-live-link .top-bar-icon {
								min-width: 37px; }
						#TopBar #ChatSupport .chat-support-live-link .tooltip {
								width: 96px; }
						#TopBar #ChatSupport .chat-support-live-link .icon {
								font-size: 18px; }
						#TopBar #ChatSupport .chat-support-live-link .counter {
								font-size: 8px;
								padding: 3px; }
								#TopBar #ChatSupport .chat-support-live-link .counter .fa {
										color: white; }
								#TopBar #ChatSupport .chat-support-live-link .counter .fa-times {
										display: block; }
								#TopBar #ChatSupport .chat-support-live-link .counter .fa-check {
										display: none; }
						#TopBar #ChatSupport .chat-support-live-link #ChatSupportStatus.active {
								background-color: #1EBD59; }
								#TopBar #ChatSupport .chat-support-live-link #ChatSupportStatus.active .fa-times {
										display: none; }
								#TopBar #ChatSupport .chat-support-live-link #ChatSupportStatus.active .fa-check {
										display: block; }
		#TopBar #XenAppSessionInfoAndMenu {
				float: right;
				display: table;
				margin-right: 10px;
				cursor: pointer; }
				#TopBar #XenAppSessionInfoAndMenu .fa-caret-down {
						opacity: 0;
						-moz-transition: opacity 0.25s 0s;
						-o-transition: opacity 0.25s 0s;
						-webkit-transition: opacity 0.25s 0s;
						transition: opacity 0.25s 0s; }
				#TopBar #XenAppSessionInfoAndMenu:hover .fa-caret-down {
						opacity: 1;
						-moz-transition: opacity .5s 0.25s;
						-o-transition: opacity .5s 0.25s;
						-webkit-transition: opacity .5s 0.25s;
						transition: opacity .5s 0.25s; }
				#TopBar #XenAppSessionInfoAndMenu:hover .no-hover-dropdown-arrow .fa-caret-down,
				#TopBar #XenAppSessionInfoAndMenu:hover.no-hover-dropdown-arrow .fa-caret-down,
				#TopBar #XenAppSessionInfoAndMenu:hover .fa-caret-down.no-hover-dropdown-arrow {
						opacity: 0; }
				#TopBar #XenAppSessionInfoAndMenu.no-hover-dropdown-arrow, #TopBar #XenAppSessionInfoAndMenu .no-hover-dropdown-arrow {
						cursor: default; }
				#TopBar #XenAppSessionInfoAndMenu #XenAppSessionInfoContent {
						display: table-cell;
						vertical-align: middle; }
				#TopBar #XenAppSessionInfoAndMenu .jsRefreshSessionConnection {
						font-style: italic;
						font-size: 11px;
						text-align: right; }
		#TopBar #Notifications {
				float: right;
				line-height: 60px; }
				#TopBar #Notifications .dropdown-toggle {
						cursor: pointer; }
				#TopBar #Notifications #NotificationsIconTop {
						color: #424242; }
				#TopBar #Notifications #NotificationsCount {
						background-color: #1EBD59; }
				#TopBar #Notifications.noNotifications {
						display: none; }
		#TopBar #LogOut {
				float: right;
				line-height: 60px;
				cursor: pointer; }
				#TopBar #LogOut .fa-caret-down {
						opacity: 0;
						-moz-transition: opacity 0.25s 0s;
						-o-transition: opacity 0.25s 0s;
						-webkit-transition: opacity 0.25s 0s;
						transition: opacity 0.25s 0s; }
				#TopBar #LogOut:hover .fa-caret-down {
						opacity: 1;
						-moz-transition: opacity .5s 0.25s;
						-o-transition: opacity .5s 0.25s;
						-webkit-transition: opacity .5s 0.25s;
						transition: opacity .5s 0.25s; }
				#TopBar #LogOut:hover .no-hover-dropdown-arrow .fa-caret-down,
				#TopBar #LogOut:hover.no-hover-dropdown-arrow .fa-caret-down,
				#TopBar #LogOut:hover .fa-caret-down.no-hover-dropdown-arrow {
						opacity: 0; }
				#TopBar #LogOut.no-hover-dropdown-arrow, #TopBar #LogOut .no-hover-dropdown-arrow {
						cursor: default; }
				#TopBar #LogOut > a {
						display: block;
						padding-right: 20px;
						padding-left: 20px;
						color: #424242; }
						#TopBar #LogOut > a .fa {
								padding-right: 7px; }
				#TopBar #LogOut > a:hover, #TopBar #LogOut > a:focus {
						text-decoration: none;
						color: #424242; }
		#TopBar .topbar-dropdown-big {
				min-width: 350px;
				padding: 10px; }
		#TopBar .dropdown-menu {
				margin-top: -10px; }

#LogOutPrompt #CheckingForApps {
		background: url("../../../../CortexDotNet/pics/loadingmedium.gif") no-repeat top left;
		background-size: 20px;
		width: 100%;
		margin: 20px 50px 50px 50px; }
		#LogOutPrompt #CheckingForApps p {
				font-size: 15px;
				padding-left: 25px; }

/* ---------------------------------- SYSTEM MESSAGES TOP BAR ---------------------------------- */
#SystemMessageTopBar {
		/*margin: -$LayoutGutterSize $LayoutGutterSize -$LayoutGutterSize -$LayoutGutterSize;*/ }
		#SystemMessageTopBar .alert {
				margin-bottom: 10px; }
				#SystemMessageTopBar .alert a {
						font-weight: bold;
						text-decoration: underline; }
				#SystemMessageTopBar .alert .separator {
						margin-left: 5px;
						display: inline-block; }
				#SystemMessageTopBar .alert .system-message-item-hide-button {
						float: right;
						cursor: pointer; }
				#SystemMessageTopBar .alert #SystemMessageBarContainer.LoginLeftText .system-message-item-hide-button {
						display: none; }
				#SystemMessageTopBar .alert #SystemMessageBarContainer.LoginTopBar .system-message-item-hide-button {
						display: none; }
				#SystemMessageTopBar .alert .read-more-button, #SystemMessageTopBar .alert a.read-more-button {
						background: #4c646e;
						border-radius: 5px;
						text-align: center;
						color: #fff;
						font-size: 15px;
						font-weight: bold;
						display: block;
						text-decoration: underline;
						padding: 8px;
						margin: 19px 12px 10px 12px; }

#NotificationsPopout {
		display: block;
		top: 60px;
		position: fixed; }

.NotificationsHeader {
		margin: 0px 0px 8px 0px;
		font-size: 1.2em; }
		.NotificationsHeader .NotificationsHeaderSpacing {
				margin: 0px 15px 10px 15px; }
				.NotificationsHeader .NotificationsHeaderSpacing .fa {
						margin-right: 5px; }

#NotificationsCount.Critical {
		background-color: #B93E1C; }

#NotificationsCount.Incident {
		background-color: #E88A44; }

#NotificationsCount.General {
		background-color: #1EBD59; }

#NotificationsCount.Resolved {
		background-color: #1EBD59; }

#CloudNotificationsContainer {
		padding: 10px;
		line-height: initial;
		border-top: 1px solid #ccc;
		border-top: 1px solid rgba(0, 0, 0, 0.15); }

#LocalNotificationsContainer {
		padding: 10px;
		line-height: initial;
		border-bottom: 1px solid rgba(0, 0, 0, 0.15);
		margin-bottom: 2px; }

.NotificationsLayout {
		padding-left: 0px;
		margin-bottom: 0px; }
		.NotificationsLayout .NotificationsListItem {
				padding: 3px 15px;
				position: relative;
				cursor: default;
				line-height: 1.6em;
				list-style: none; }
				.NotificationsLayout .NotificationsListItem:hover {
						background-color: #FFF; }
				.NotificationsLayout .NotificationsListItem__severity-icon {
						margin-right: 5px; }
						.NotificationsLayout .NotificationsListItem__severity-icon--severity0 {
								color: #1EBD59; }
						.NotificationsLayout .NotificationsListItem__severity-icon--severity1 {
								color: #E88A44; }
						.NotificationsLayout .NotificationsListItem__severity-icon--severity2 {
								color: #B93E1C; }
						.NotificationsLayout .NotificationsListItem__severity-icon--severity3 {
								color: #1EBD59; }
				.NotificationsLayout .NotificationsListItem__message-text {
						margin-left: 7px;
						position: absolute;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						width: 200px; }
				.NotificationsLayout .NotificationsListItem__last-updated {
						position: absolute;
						width: 80px;
						right: 0;
						font-size: 11px;
						font-style: italic; }
				.NotificationsLayout .NotificationsListItem__popout {
						visibility: hidden;
						opacity: 0;
						-webkit-transition: opacity 100ms, visibility 100ms;
						-moz-transition: opacity 100ms, visibility 100ms;
						-ms-transition: opacity 100ms, visibility 100ms;
						-o-transition: opacity 100ms, visibility 100ms;
						transition: opacity 100ms, visibility 100ms;
						position: absolute;
						top: -3px;
						transform: translateX(-105%);
						width: 30em;
						background-color: #FFF;
						border-radius: 2px;
						box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
						border: 1px solid rgba(0, 0, 0, 0.15);
						z-index: 1; }
						@media (max-width: 979px) {
								.NotificationsLayout .NotificationsListItem__popout {
										width: 17em; } }
						@media (max-width: 768px) {
								.NotificationsLayout .NotificationsListItem__popout {
										width: 20em;
										left: 24em;
										box-shadow: 0 -1px 6px 4px rgba(0, 0, 0, 0.1);
										margin-top: 28px; } }
						.NotificationsLayout .NotificationsListItem__popout-header {
								width: 100%;
								padding: 6px 20px 5px 20px; }
								.NotificationsLayout .NotificationsListItem__popout-header-date {
										font-size: .9em; }
								.NotificationsLayout .NotificationsListItem__popout-header-label {
										float: right;
										margin-top: 4px; }
								.NotificationsLayout .NotificationsListItem__popout-header--severity0 {
										border-bottom: solid 2px #1EBD59; }
								.NotificationsLayout .NotificationsListItem__popout-header--severity1 {
										border-bottom: solid 2px #E88A44; }
								.NotificationsLayout .NotificationsListItem__popout-header--severity2 {
										border-bottom: solid 2px #B93E1C; }
								.NotificationsLayout .NotificationsListItem__popout-header--severity3 {
										border-bottom: solid 2px #1EBD59; }
						.NotificationsLayout .NotificationsListItem__popout-text {
								font-size: 1.1em;
								padding: 7px 20px 9px 20px; }
				.NotificationsLayout .NotificationsListItem:hover .NotificationsListItem__popout {
						visibility: visible;
						opacity: 1;
						-webkit-transition: opacity 100ms, visibility 0;
						-moz-transition: opacity 100ms, visibility 0;
						-ms-transition: opacity 100ms, visibility 0;
						-o-transition: opacity 100ms, visibility 0;
						transition: opacity 100ms, visibility 0; }

#TopBar > #kb-search {
		float: right; }

#kb-search {
		float: right;
		display: table;
		line-height: 60px;
		width: 245px;
		margin-right: 10px;
		-webkit-transition: all 200ms ease-in-out;
		-moz-transition: all 200ms ease-in-out;
		-ms-transition: all 200ms ease-in-out;
		-o-transition: all 200ms ease-in-out;
		transition: all 200ms ease-in-out; }
		#kb-search.icon-only {
				width: 15px; }
				#kb-search.icon-only input {
						display: none; }
				#kb-search.icon-only span.input-group-addon {
						border: none;
						color: #424242;
						background-color: transparent !important; }
		#kb-search .kb-search-input-container {
				display: table-cell;
				vertical-align: middle; }
				#kb-search .kb-search-input-container input.form-control {
						font-weight: 400;
						height: 33px; }
		#kb-search span.input-group-addon {
				cursor: pointer;
				background-color: #316195;
				border: 1px solid #316195;
				color: #fff;
				-webkit-transition: all 200ms ease-in-out;
				-moz-transition: all 200ms ease-in-out;
				-ms-transition: all 200ms ease-in-out;
				-o-transition: all 200ms ease-in-out;
				transition: all 200ms ease-in-out; }

#LogOut {
		float: right;
		line-height: 60px; }
		#LogOut > a {
				display: block;
				padding-right: 20px;
				padding-left: 20px;
				color: #424242; }
				#LogOut > a .fa {
						padding-right: 7px; }
		#LogOut > a:hover, #LogOut > a:focus {
				text-decoration: none;
				color: #424242; }

/* Drop down menus  */
.topbar-dropdown-big {
		min-width: 350px;
		padding: 10px; }

.dropdown-menu {
		margin-top: -10px; }