/*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 */
#MyLoginHistory {
		width: 900px;
		margin: 0 auto;
		border: 1px solid #CCC;
		background-color: white;
		padding: 20px 0 30px;
		margin-bottom: 30px; }
		#MyLoginHistory h3 {
				padding-left: 34px;
				padding-bottom: 10px; }

#UserLoginHistory table {
		margin: 0 auto;
		width: 840px; }
		#UserLoginHistory table tbody {
				background-color: white; }
				#UserLoginHistory table tbody tr td, #UserLoginHistory table tbody tr th {
						padding: 8px 10px;
						max-width: 800px; }
						#UserLoginHistory table tbody tr td .fa-exclamation-circle, #UserLoginHistory table tbody tr th .fa-exclamation-circle {
								color: #B93E1C; }
						#UserLoginHistory table tbody tr td.login-message, #UserLoginHistory table tbody tr th.login-message {
								color: #B93E1C; }
						#UserLoginHistory table tbody tr td i.show-hide-login-types, #UserLoginHistory table tbody tr th i.show-hide-login-types {
								color: #00C853;
								margin-left: 8px; }
								#UserLoginHistory table tbody tr td i.show-hide-login-types:hover:before, #UserLoginHistory table tbody tr th i.show-hide-login-types:hover:before {
										content: "\f059"; }
						#UserLoginHistory table tbody tr td.user-agent:hover, #UserLoginHistory table tbody tr td.login-message:hover, #UserLoginHistory table tbody tr td.show-login-types:hover, #UserLoginHistory table tbody tr td i.show-hide-login-types:hover, #UserLoginHistory table tbody tr th.user-agent:hover, #UserLoginHistory table tbody tr th.login-message:hover, #UserLoginHistory table tbody tr th.show-login-types:hover, #UserLoginHistory table tbody tr th i.show-hide-login-types:hover {
								cursor: pointer;
								color: #1EBD59; }
				#UserLoginHistory table tbody tr #LoginInfo {
						background-color: #D7F7E3;
						padding: 15px;
						border: 1px solid transparent;
						border-radius: 4px; }
						#UserLoginHistory table tbody tr #LoginInfo h4 {
								color: #1EBD59;
								margin-left: 5px;
								display: inline-block; }
								#UserLoginHistory table tbody tr #LoginInfo h4 i.fa {
										position: relative;
										right: 5px; }
						#UserLoginHistory table tbody tr #LoginInfo i.login-types-close {
								color: #B93E1C;
								font-size: 17px; }
								#UserLoginHistory table tbody tr #LoginInfo i.login-types-close:hover {
										color: #962B0D;
										cursor: pointer; }
								#UserLoginHistory table tbody tr #LoginInfo i.login-types-close:hover:before {
										content: "\f057"; }
						#UserLoginHistory table tbody tr #LoginInfo ul {
								padding-left: 18px; }
								#UserLoginHistory table tbody tr #LoginInfo ul li {
										margin-bottom: 10px; }
				#UserLoginHistory table tbody tr.visible-row {
						background-color: white; }
				#UserLoginHistory table tbody tr.toggle-row.agent {
						background-color: #D7F7E3; }
				#UserLoginHistory table tbody tr.toggle-row.message {
						background-color: #f8d7da; }
				#UserLoginHistory table tbody tr.toggle-row td {
						word-break: break-all;
						max-width: 825px; }
				#UserLoginHistory table tbody .visible-row:nth-child(2n + 1) {
						background-color: #FAFAFA; }
				#UserLoginHistory table tbody tr.table-header > th > span.time-header {
						margin-left: 8px; }
				#UserLoginHistory table tbody tr:first-child {
						border-bottom: 1px solid #1EBD59;
						padding-bottom: 10px;
						background-color: white; }

#UserLoginHistory div.alert {
		margin: 0 auto; }