﻿#productDetails {
	min-height: 700px;
}

	#productDetails .sectionQuarter {
		margin-top: 20px;
	}

	#productDetails .propertyGroupSection {
		display: inline-block;
		margin: 5% 10% 3% 10%;
		vertical-align: top;
	}

		#productDetails .propertyGroupSection .topbar {
			display: flex;
			align-items: center;
			margin-bottom: 10px;
			padding-bottom: 15px;
			border-bottom: 1px solid black;
		}

			#productDetails .propertyGroupSection .topbar svg {
				height: 30px;
				width: 30px;
			}

				#productDetails .propertyGroupSection .topbar svg path {
					fill: black;
				}

			#productDetails .propertyGroupSection .topbar .propertyGroupHeading {
				font-size: 22px;
				font-weight: bold;
				margin-left: 15px;
			}

			#productDetails .propertyGroupSection .topbar .upcDisabledMarker {
				font-size: 22px;
				margin-left: 20px;
				color: red;
				opacity: 0;
				overflow: hidden;
				transition: opacity ease-in-out 0.25s;
			}

				#productDetails .propertyGroupSection .topbar .upcDisabledMarker.in {
					opacity: 1;
					transition: opacity ease-in-out 0.5s;
				}

	#productDetails #productDetailImages {
		position: relative;
		width: 100%;
		height: 400px;
		margin: 20px auto 0 auto;
	}

	#productDetails #imageViewer {
		display: block;
		height: 87%;
		margin: auto;
	}

	#productDetails #Images {
		display: block;
		margin: auto;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		height: 100%;
		width: 100%;
		object-fit: contain;
	}

	#productDetails #imageEmptyState {
		display: flex;
		height: 100%;
		align-items: center;
		justify-content: center;
		font-size: 26px;
		color: #bbb;
	}

	#productDetails #imageFooter {
		margin-top: 3%;
		height: 10%;
	}

	#productDetails .previousImageButton {
		display: block;
		width: 40px;
		height: 40px;
		float: left;
		cursor: pointer;
	}

		#productDetails .previousImageButton svg {
			height: 100%;
			width: 100%;
		}

	#productDetails .previousImageButtonDisabled {
		cursor: default;
	}

		#productDetails .previousImageButtonDisabled svg path {
			fill: #EDEDED;
		}

	#productDetails .nextImageButton {
		display: block;
		width: 40px;
		height: 40px;
		float: right;
		cursor: pointer;
	}

		#productDetails .nextImageButton svg {
			height: 100%;
			width: 100%;
		}

	#productDetails .nextImageButtonDisabled {
		cursor: default;
	}

		#productDetails .nextImageButtonDisabled svg path {
			fill: #EDEDED;
		}

	#productDetails #productDetailTopBar {
		display: flex;
		align-items: center;
		height: 50px;
		font-size: 22px;
		font-weight: bold;
		width: 100%;
	}

		#productDetails #productDetailTopBar .applyOptionsButton {
			display: inline-block;
		}

		#productDetails #productDetailTopBar .productEntityPropertyContainer {
			margin-left: 5%;
			font-size: 30px;
		}

		#productDetails #productDetailTopBar .iconButton {
			margin-right: 20px;
			margin-left: auto;
		}

		#productDetails #productDetailTopBar #editButton svg path {
			fill: black;
		}

	#productDetails .productEntityPropertyContainer .hidden {
		display: none;
	}

	#productDetails .productEntityPropertyContainer .productEntityProperty {
		margin-right: 20px;
	}

	#productDetails .productEntityPropertyContainer #LongDescription {
		position: relative;
		padding: 10px 20px;
		margin-top: 15px;
		background: #eee;
		min-height: 90px;
		max-height: 90px;
		max-width: 100%;
		overflow: hidden;
	}

		#productDetails .productEntityPropertyContainer #LongDescription.less {
			max-height: 51px;
			transition: max-height 0.3s;
		}

		#productDetails .productEntityPropertyContainer #LongDescription.more {
			max-height: 1500px;
			transition: max-height 1s;
		}

			#productDetails .productEntityPropertyContainer #LongDescription.more .markdownToElements {
				max-height: 1500px;
			}

		#productDetails .productEntityPropertyContainer #LongDescription.less .markdownToElements::after {
			content: " ";
			background: linear-gradient(to top, rgba(238,238,237,1) 0%,rgba(238,238,238,0) 66%,rgba(238,238,238,0) 100%);
			position: absolute;
			top: 0;
			height: 100%;
			width: 100%;
		}

		#productDetails .productEntityPropertyContainer #LongDescription .moreButtonContainer {
			position: absolute;
			width: 80%;
			height: 20px;
			bottom: 10px;
			left: 16%;
		}

			#productDetails .productEntityPropertyContainer #LongDescription .moreButtonContainer .moreButton {
				position: absolute;
				right: 5px;
				color: #0E9AEF;
				cursor: pointer;
				background: #eee;
				padding: 4px 10px;
				user-select: none;
			}

				#productDetails .productEntityPropertyContainer #LongDescription .moreButtonContainer .moreButton:hover {
					text-decoration: underline;
				}

	#productDetails #optionHolders {
		float: left;
		width: 100%;
	}

	#productDetails .optionHolder {
		color: black;
	}

		#productDetails .optionHolder .optionValue {
			cursor: pointer;
		}

		#productDetails .optionHolder .ddlOptions {
			margin: 5px;
		}

			#productDetails .optionHolder .ddlOptions .optionBlockedValue {
				background: white;
				color: #bbbbbb;
			}

	#productDetails .optionDetailHeading {
		float: left;
	}

	#productDetails .optionValue {
		float: left;
		margin: 5px;
		border: black 1px solid;
		padding: 10px 15px;
		background: none;
	}

		#productDetails .optionValue:hover {
			margin: 2px;
			border: #0E9AEF 4px solid;
		}

	#productDetails .optionSelectedValue {
		background: #04273C;
		color: white;
	}

	#productDetails .optionBlockedValue {
		background: #bbbbbb;
		color: white;
	}

	#productDetails .layout-row.separator {
		margin-top: 15px;
		border-top: 1px solid #EDEDED;
	}

	#productDetails #controlSection {
		margin-top: 20px;
		border-top: 1px solid #EAEAEA;
	}

	#productDetails #measurementsSection .miniSection {
		display: inline-block;
		width: 50%;
		vertical-align: top;
		margin-bottom: 30px;
	}

	#productDetails #measurementsSection .fieldsHolder .dataHolder {
		display: inline-block;
		margin: 2px;
	}

	#productDetails #measurementsSection .fieldsHolder .separator {
		display: inline-block;
	}

#selectVariantForm .info {
	padding: 10px 20px;
}

#selectVariantForm .buttonHolder {
	padding: 20px 15px 0 15px;
}

	#selectVariantForm .buttonHolder button {
		margin-right: 20px;
		margin-bottom: 20px;
	}

@media (max-width: 699px) {
	#productDetails .layout-row {
		display: flex;
		flex-direction: column;
		-webkit-flex-direction: column;
	}
}

@media (max-width: 500px) {
	#Name {
		font-size: 2vh;
		max-width: 205px;
		overflow: hidden;
	}
}
