﻿.customProductView {
		margin-top: 50px !important;
}

		.customProductView h1 {
				margin-top: 10px !important;
				font-size: 30px;
				font-weight: bold !important;
		}


.mainProductImage {
		width: 100%;
		margin: auto;
		display: inline-block;
		text-align: center;
}

		.mainProductImage img {
				max-width: 400px;
				float: right;
		}

.hover01 {
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transition: .3s ease-in-out;
		transition: .3s ease-in-out;
}

.thumbnailImage {
		display: inline-flex;
		padding: 20px;
		float: right;
}

		.thumbnailImage img {
				max-width: 80px;
		}

.stockStatus {
		color: var(--notify_fc) !important;
		line-height: 2.0em !important;
		background-color: var(--notify_bg) !important;
		max-width: 100px;
		text-align: center !important;
		border-radius: 15px;
}

.outOfStock {
		color: var(--bgfc) !important;
		line-height: 2.0em !important;
		background-color: var(--fc) !important;
		max-width: 100px;
		text-align: center !important;
		border-radius: 15px;
}

.socialShare {
		text-align: center;
		width: 100%;
		float: left;
		text-align: left;
}

.jssocials-share-link {
		padding: .6em .7em !important;
}

.jssocials-share-logo {
		font-size: 12px !important;
		color: #fff !important;
}

.setPrice {
		font-weight: bold;
		font-size: 20px;
}

.productActionHolder {
		max-width: 600px;
		text-align: left;
		padding-right: 15px;
		overflow: hidden !important;
}

		.productActionHolder div {
				display: inline-block;
		}

				.productActionHolder div select {
						width: 250px;
						max-width: 100% !important;
				}

.variantNameHolder {
		min-width: 10px !important;
		padding-right: 10px;
		width: 100% !important;
}

.items-count {
		float: left;
		height: 37px !important;
		background-color: var(--fc) !important;
		color: var(--bg) !important;
		width: 40px !important;
		padding: 0 !important;
		padding-top: 3px !important;
}

		.items-count:hover {
				border: solid 1px var(--bg) !important;
		}

		.items-count i {
				background-color: var(--fc) !important;
				color: var(--bg) !important;
		}

.productInformationHolder {
		width: 100% !important;
		float: left;
		min-height: 300px;
		padding: 40px;
		border-top: solid 3px var(--fc) !important;
		margin-top: 6px !important;
}

.comparePrice {
		font-size: 15px;
		font-weight: normal;
		text-decoration: line-through !important;
}

.variantNameHolder {
		font-weight: bold;
		font-size: 13px;
}

.input-text {
		width: 50px !important;
		text-align: center;
		font-weight: bold !important;
		margin: 0px 10px !important;
		float: left;
}

.siteTabButton {
		font-size: calc(var(--base-font-size) * 0.5) !important;
		padding: 10px !important;
		text-transform: uppercase !important;
		font-weight: normal !important;
		border: none !important;
		height: auto !important;
		text-align: center !important;
		margin-bottom: 0px !important;
		font-weight: normal !important;
		width: 100px !important;
		display: inline !important;
		color: var(--fc) !important;
		background-color: var(--bg) !important;
}

.tabHolder {
		margin-top: 50px !important;
}

.checked {
		color: var(--bg) !important;
		background-color: var(--fc) !important;
}

.zoomHolder {
		float: right;
}

[type="file"] {
		border: 0;
		clip: rect(0, 0, 0, 0);
		height: 1px;
		overflow: hidden;
		padding: 0;
		position: absolute !important;
		white-space: nowrap;
		width: 1px;
}

		[type="file"] + label {
				/* File upload button styles */
		}

				[type="file"]:focus + label,
				[type="file"] + label:hover {
						/* File upload hover state button styles */
				}

		[type="file"]:focus + label {
				/* File upload focus state button styles */
		}

.fileUploadLabel {
		background-color: #444;
		color: #fff;
		border: solid 1px #999;
		padding: 10px;
		text-align: center;
		border-radius: 10px;
		border: solid 1px #333;
		padding-top: 12px;
}

		.fileUploadLabel:hover {
				background-color: #111;
		}

.video-responsive {
		overflow: hidden;
		padding-bottom: 56.25%;
		position: relative;
		height: 0;
}

		.video-responsive iframe {
				left: 10px;
				top: 10px;
				height: 100%;
				width: 100%;
				position: absolute;
				max-width: 500px;
		}

/* Styles for dialog window */
#small-dialog {
		background: white;
		padding: 20px 30px;
		text-align: left;
		max-width: 90VW;
		margin: 40px auto;
		position: relative;
}


/**
 * Fade-zoom animation for first dialog
 */

/* start state */
.my-mfp-zoom-in .zoom-anim-dialog {
		opacity: 0;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		-webkit-transform: scale(0.8);
		-moz-transform: scale(0.8);
		-ms-transform: scale(0.8);
		-o-transform: scale(0.8);
		transform: scale(0.8);
}

/* animate in */
.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
		opacity: 1;
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
}

/* animate out */
.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
		-webkit-transform: scale(0.8);
		-moz-transform: scale(0.8);
		-ms-transform: scale(0.8);
		-o-transform: scale(0.8);
		transform: scale(0.8);
		opacity: 0;
}

/* Dark overlay, start state */
.my-mfp-zoom-in.mfp-bg {
		opacity: 0;
		-webkit-transition: opacity 0.3s ease-out;
		-moz-transition: opacity 0.3s ease-out;
		-o-transition: opacity 0.3s ease-out;
		transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-zoom-in.mfp-ready.mfp-bg {
		opacity: 0.8;
}
/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg {
		opacity: 0;
}



/**
 * Fade-move animation for second dialog
 */

/* at start */
.my-mfp-slide-bottom .zoom-anim-dialog {
		opacity: 0;
		-webkit-transition: all 0.2s ease-out;
		-moz-transition: all 0.2s ease-out;
		-o-transition: all 0.2s ease-out;
		transition: all 0.2s ease-out;
		-webkit-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
		-moz-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
		-ms-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
		-o-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
		transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
}

/* animate in */
.my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
		opacity: 1;
		-webkit-transform: translateY(0) perspective( 600px ) rotateX( 0 );
		-moz-transform: translateY(0) perspective( 600px ) rotateX( 0 );
		-ms-transform: translateY(0) perspective( 600px ) rotateX( 0 );
		-o-transform: translateY(0) perspective( 600px ) rotateX( 0 );
		transform: translateY(0) perspective( 600px ) rotateX( 0 );
}

/* animate out */
.my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {
		opacity: 0;
		-webkit-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg );
		-moz-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg );
		-ms-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg );
		-o-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg );
		transform: translateY(-10px) perspective( 600px ) rotateX( 10deg );
}

/* Dark overlay, start state */
.my-mfp-slide-bottom.mfp-bg {
		opacity: 0;
		-webkit-transition: opacity 0.3s ease-out;
		-moz-transition: opacity 0.3s ease-out;
		-o-transition: opacity 0.3s ease-out;
		transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-slide-bottom.mfp-ready.mfp-bg {
		opacity: 0.8;
}
/* animate out */
.my-mfp-slide-bottom.mfp-removing.mfp-bg {
		opacity: 0;
}

#sizemeDataTable {
		border-collapse: collapse;
		min-width: 300px;
		margin-top: 20px;
		table-layout: fixed;
}

		#sizemeDataTable td, #customers th {
				border: 1px solid #ddd;
				padding: 8px;
				width: 25%;
		}

		#sizemeDataTable tr:nth-child(even) {
				background-color: #f2f2f2;
		}

		#sizemeDataTable tr:hover {
				background-color: #ddd;
		}

		#sizemeDataTable th {
				padding: 12px;
				text-align: left;
				background-color: #333;
				color: #fff;
		}

.white-popup {
		text-align: center;
		font-size: 12px !important;
}

.cartUpdateHeader {
		font-size: 20px !important;
		font-weight: bold;
		color: #CC3333;
}

		.cartUpdateHeader span {
				color: #009966;
				font-size: 50px !important;
				font-weight: bold;
		}
