﻿#productCatalog {
	min-height: 560px;
	transition: opacity 0.25s;
}

	#productCatalog .sectionInner {
		transition: opacity 0.25s;
	}

		#productCatalog .sectionInner.out {
			opacity: 0;
		}

	#productCatalog .noResults {
		font-size: 24px;
		font-weight: bold;
		width: 80%;
		text-align: center;
		margin: auto;
		margin-top: 200px;
		opacity: 0;
		-o-transition: opacity 0.5s;
		-moz-transition: opacity 0.5s;
		-webkit-transition: opacity 0.5s;
		transition: opacity 0.5s;
	}

		#productCatalog .noResults.out {
			display: none;
		}

		#productCatalog .noResults.in {
			opacity: 1;
		}

	#productCatalog .tableGrid {
		opacity: 0;
		width: 80%;
		margin-top: 40px;
		-o-transition: opacity 1s;
		-moz-transition: opacity 1s;
		-webkit-transition: opacity 1s;
		transition: opacity 1s;
	}

		#productCatalog .tableGrid.in {
			opacity: 1;
		}

.uploadCatalogSection {
	display: flex;
	justify-content: space-around;
}

	.uploadCatalogSection .downloadSection {
		display: flex;
		justify-content: space-between;
		width: 80%;
	}

		.uploadCatalogSection .downloadSection a {
			width: 20%;
			height: 180px;
		}

			.uploadCatalogSection .downloadSection a .downloadButton {
				display: flex;
				flex-flow: column;
				align-items: center;
				justify-content: center;
				height: 100%;
				background: #0E9AEF;
				border-radius: 10px;
				font-size: 1em;
				color: white;
			}

		.uploadCatalogSection .downloadSection .downloadButton:hover {
			background: #4490BF;
		}

		.uploadCatalogSection .downloadSection .downloadButton svg {
			height: 50px;
			width: 50px;
			margin-bottom: 10px;
		}

.fileDragSection {
	width: 55%;
	display: flex;
	align-items: center;
	justify-content: center;
}

	.fileDragSection .productFileSelector {
		width: 80%;
	}

		.fileDragSection .productFileSelector #fileDrag {
			font-weight: bold;
			text-align: center;
			padding: 3em 2em;
			margin: 1em 0;
			color: #555555;
			border: 2px dashed #555555;
			border-radius: 7px;
			cursor: pointer;
		}

#fileDrag:hover {
	font-weight: bold;
	text-align: center;
	padding: 3em 0;
	margin: 1em 0;
	color: #4490BF;
	border: 2px dashed #4490BF;
	border-radius: 7px;
	cursor: pointer;
}

#fileUploadLabel {
	margin-right: 30px;
	font-weight: bold;
}

#productCatalogTopOptions .searchboxWrapper {
	margin-left: auto;
	padding-left: 25px;
}

#productCatalogTopOptions {
	display: flex;
	align-items: center;
	margin: auto;
	width: 80%;
}

	#productCatalogTopOptions a {
		color: black;
		width: 40px;
		height: 40px;
	}

	#productCatalogTopOptions .iconButton {
		width: 40px;
		height: 40px;
	}

		#productCatalogTopOptions .iconButton.editButton {
			margin-right: 10px;
			min-width: 40px;
		}

		#productCatalogTopOptions .iconButton.exportButton {
			margin-left: 10px;
		}

		#productCatalogTopOptions .iconButton.cancelButton {
			background: #EF3030;
		}

		#productCatalogTopOptions .iconButton svg g,
		#productCatalogTopOptions .iconButton svg path {
			fill: white;
		}

		#productCatalogTopOptions .iconButton svg path {
			width: 40px;
			height: 40px;
		}

	#productCatalogTopOptions #mergeButton {
		margin-left: 10px;
	}

	#productCatalogTopOptions #deleteButton {
		margin-left: 10px;
	}

.uploadInProgressForm {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

	.uploadInProgressForm .topText {
		text-align: center;
		margin: 20px 0;
	}

	.uploadInProgressForm .bottomText {
		text-align: center;
		margin: 20px 0;
	}


	.uploadInProgressForm .loadingWrapper {
		margin: 30px 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

		.uploadInProgressForm .loadingWrapper .loadingCircle {
			border: 4px solid #EDEDED;
			border-radius: 50%;
			border-top: 4px solid #0E9AEF;
			width: 35px;
			height: 35px;
			-moz-animation: spin 1s linear infinite;
			-webkit-animation: spin 1s linear infinite;
			animation: spin 1s linear infinite;
			margin-right: 15px;
		}

.uploadFailedForm .errorHeading {
	font-weight: bold;
}

.uploadFailedForm .errors .errorList {
	overflow: hidden;
	overflow-y: auto;
	height: 100%;
	max-height: 300px;
	box-shadow: inset 2px 2px 1px rgba(0,0,0,.05);
	padding: 10px;
	margin-bottom: 20px;
	background-color: #f5f5f5;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
}

	.uploadFailedForm .errors .errorList div {
		margin-bottom: 20px;
	}

		.uploadFailedForm .errors .errorListInner div {
			margin-bottom: 0;
			margin-left: 25px;
		}

#deleteProductsForm .selectedStylesHolder,
#mergeProductsForm .selectedStylesHolder {
	overflow: hidden;
	overflow-y: auto;
	height: 100%;
	max-height: 300px;
	box-shadow: inset 2px 2px 1px rgba(0,0,0,.05);
	padding: 10px 10px 10px 50px;
	margin-bottom: 20px;
	background-color: #f5f5f5;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
}

#mergeProductsForm .newStyleHolder {
	margin-top: 20px;
	display: inline-block;
}

	#mergeProductsForm .newStyleHolder::after {
		content: "*";
		color: red;
	}

	#mergeProductsForm .newStyleHolder label {
		font-weight: bold;
	}

	#mergeProductsForm .newStyleHolder input {
		margin: 0 5px 0 10px;
		padding: 7px;
	}

@media screen and (max-width: 1500px) {
	.uploadInProgressForm, .uploadFailedForm {
		height: 300px;
	}
}

@media screen and (max-width: 1000px) {
	.uploadCatalogSection .downloadSection {
		flex-direction: column;
	}

		.uploadCatalogSection .downloadSection a {
			width: 100%;
			margin-bottom: 20px;
		}

	.fileDragSection {
		width: 100%;
		margin-top: 20px;
	}

		.fileDragSection .productFileSelector {
			width: 100%;
		}

	#productCatalogTopOptions .searchboxWrapper {
		width: 310px;
	}
}

@media screen and (max-width: 599px) {
	#productCatalogTopOptions .iconButton {
		margin: 20px 0 30px 0;
	}

	.uploadInProgressForm,
	.uploadFailedForm {
		height: 500px;
	}
}
