$primary-color: #386ede;
$secondary-color: #00d6eb;

$cell-entry-color: #333;
$cell-entry-border-color: #ccc;
$cell-entry-hover-color: $cell-entry-color;
$cell-entry-hover-background: #eee;
$mobile-limit: 760px;

div#page-content.columns {
	display: -ms-flexbox;
	display: flex;
	> div {
		box-sizing: border-box;
		width: 50%;
		padding-right: 1rem;
		@media screen and (max-width: $mobile-limit) {
			width: auto;
			padding: 0;
		}
	}
	@media screen and (max-width: $mobile-limit) {
		-ms-flex-direction: column;
		flex-direction: column;
	}
}

div.welcome {
	border: 1px solid #e4e4e4;
	background: #fcfcfc;
	padding: 1ex;
}

div.textcell {
	clear: both;
}

#content div.cell.gauge {
	width: 270px;
	max-width: 32%;
	float: left;
}

div.cell {
	margin-bottom: 2rem;
}

div.cell.gauge div.bo-block {
	position: relative;
}

div.cell.gauge div.bo-block span.counter {
	position: absolute;
	top: 0.5ex;
	right: 0.5ex;
	font-size: 200%;
}

div.cell div.loading {
	color: #444;
	position: relative;
}

@-webkit-keyframes cell-loading-pulse {
	to { width: 100%; }
}

@keyframes cell-loading-pulse {
	to { width: 100%; }
}

div.ajax-loaded div.loading {
	position: absolute;
	width: 10%;
	right: 0;
}

div.cell div.loading span {
	position: relative;
	z-index: 10;
	padding: 0.5ex;
	display: inline-block;
}

div.cell div.loading::after {
	content: "";
	position: absolute;
	z-index: 0;
	left: 0;
	width: 0px;
	background: #eee;
	height: 100%;
	-webkit-animation: cell-loading-pulse 2s linear infinite alternate;
	animation: cell-loading-pulse 2s linear infinite alternate;
}

div.cell div.loading.error-loading {
	background: #f44;
}

div.cell div.loading.error-loading::after {
	content: none;
}

div.searchcell {
	form {
		display: flex;
		input {
			flex: 1 0 auto;
			margin-right: 1rem;
		}
	}
	div.links-list li {
		&::before {
			font-family: FontAwesome;
			display: block;
			position: absolute;
			font-size: 1.5rem;
			left: 0rem;
			color: #555;
			width: 3rem;
			text-align: center;
			padding-top: 1rem;
		}
		padding-left: 3rem;
		&.hidden {
			display: none;
		}
	}
	div.combo-search-results-users div.links-list li::before {
		content: "\f007";  // user
	}
	div[class*="combo-search-results-formdata"] div.links-list li::before {
		content: "\f0f6";  // file-text-o
	}
	div.combo-search-results-tracking-code div.links-list li::before {
		content: "\f02a";  // barcode
	}
	div div.links-list li.see-more::before {
		content: "\f067";  // plus
	}
	div.combo-search-results.expanded div.links-list {
		li.hidden {
			display: block;
		}
		li.see-more {
			&::before {
				content: "\f068";  // minus
			}
		}
	}
}

div.links-list {
	ul {
		padding: 0;
		margin: 0;
		list-style: none;
		position: relative;
		z-index: 0;
		& > li {
			color: $cell-entry-color;
			border-bottom: 1px solid $cell-entry-border-color;
			position: relative;

			> h4 { // group titles
				margin: 0;
				font-size: 110%;
				font-weight: normal;
				color: $primary-color;
				font-weight: bold;
				padding: 1rem;
				border-bottom: 1px solid $primary-color;
			}
			> a {
				display: block;
				padding: 1rem;
				border: none;
				&:not([href]) {
					color: inherit;
				}
			}

			&:hover {
				color: $cell-entry-hover-color;
				background-color: $cell-entry-hover-background;
			}
			div {
				color: lighten($cell-entry-color, 20%);
			}
			a + div {
				padding-left: 1rem;
				margin-top: -0.9rem;
				padding-bottom: 0.5rem;
			}
		}
	}
}

div.backofficesubmissioncell div.links-list h4 {
	background: url(/static/css/icons/categories.small.386ede.png) 5px center no-repeat;
	padding-left: 35px;
}

/* support foldable cells */
div.cell {
	&.foldable {
		> div > h2:first-child {
			&::after {
				font-family: FontAwesome;
				content: "\f106"; /* angle-up */
				position: absolute;
				right: 1em;
			}
			cursor: pointer;
		}
	}
	&.foldable.folded {
		> div > h2:first-child {
			display: block;
			&::after {
				content: "\f107"; /* angle-down */
			}
		}
		> div > * {
			display: none;
		}
	}
}

div.profile {
	span.value {
		display: block;
		margin-left: 1rem;
	}
}

@media screen and (min-width: 1586px) {
	div#page-content div.cubesbarchart {
		width: 49.5%;
		margin-right: 0.5%;
		float: left;
		height: 350px;
	}
}

@media print {
	div#page-content div.cubesbarchart {
		float: none;
	}
	div.cubesbarchart:nth-child(2n) {
		page-break-after: always;
	}
}