.swatch {
	margin: 1em 0px;
}
.swatch .header {
	margin: 0.5em 1em 0.5em 0px; font-weight: 700; float: left; min-width: 65px;
}
.swatch input {
	display: none;
}
.swatch label {
	margin: 0px; border-radius: 0px; border: 1px solid rgb(238, 238, 238); border-image: none; height: 40px !important; text-align: center; text-transform: uppercase; line-height: 40px; font-size: 13px; float: left; white-space: nowrap; min-width: 40px !important; background-color: rgb(221, 221, 221); -webkit-border-radius: 0; -moz-border-radius: 0;
}
.swatch-element label {
	padding: 0px 10px;
}
.color.swatch-element label {
	padding: 0px;
}
.swatch input:checked + label {
	border-width: 2px; border-color: rgb(50, 50, 50);
}
.swatch .swatch-element {
	margin: 0px 10px 10px 0px; float: left; position: relative; -webkit-font-smoothing: antialiased; -webkit-transform: translateZ(0);
}
.crossed-out {
	left: 0px; top: 0px; width: 100%; height: 100%; position: absolute;
}
.swatch .swatch-element .crossed-out {
	display: none;
}
.swatch .swatch-element.soldout .crossed-out {
	display: block;
}
.swatch .swatch-element.soldout label {
	opacity: 0.6; -khtml-opacity: 0.6; -moz-opacity: 0.6;
}
.swatch .tooltip {
	background: gray; padding: 10px; transition:0.25s ease-out; left: -28px; width: 100px; text-align: center; bottom: 100%; color: rgb(255, 255, 255); margin-bottom: 15px; display: block; visibility: hidden; position: absolute; z-index: 10000; box-sizing: border-box; opacity: 0; box-shadow: 2px 2px 6px rgba(0,0,0,0.28); transform: translateY(10px); -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); -webkit-transform: translateY(10px); -khtml-opacity: 0; -moz-opacity: 0; -moz-transform: translateY(10px); -o-transform: translateY(10px); -webkit-transition: all .25s ease-out; -moz-transition: all .25s ease-out; -o-transition: all .25s ease-out; -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
.swatch .tooltip::before {
	left: 0px; width: 100%; height: 20px; bottom: -20px; display: block; position: absolute; content: " ";
}
.swatch .tooltip::after {
	left: 50%; width: 0px; height: 0px; bottom: -10px; margin-left: -13px; border-top-color: gray; border-right-color: transparent; border-left-color: transparent; border-top-width: 10px; border-right-width: 10px; border-left-width: 10px; border-top-style: solid; border-right-style: solid; border-left-style: solid; position: absolute; content: " ";
}
.swatch .swatch-element:hover .tooltip {
	visibility: visible; opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); -khtml-opacity: 1; -moz-opacity: 1; -moz-transform: translateY(0px); -o-transform: translateY(0px);
}
.swatch.error {
	padding: 1em; border-radius: 5px; color: rgb(51, 51, 51) !important; background-color: rgb(232, 210, 210) !important;
}
.swatch.error p {
	margin: 0.7em 0px;
}
.swatch.error p:first-child {
	margin-top: 0px;
}
.swatch.error p:last-child {
	margin-bottom: 0px;
}
.swatch.error code {
	font-family: monospace;
}
.swatch input {
	display: none !important;
}