/* 
Swatches Styles
*/



.swatch { 
  margin:10px 0; 
}
/* Hide radio buttons.*/
.swatch input { 
  display:none;
}
.swatch label {
  height: 30px;
  width: 30px;
  display: inline-block;
  margin-right: 5px;
  transition: all 0.1s ease;
  min-width:30px; 
  line-height:30px;
  white-space:nowrap;
  text-transform:uppercase;
  margin-bottom: 0;
  text-align: center;
}
.swatch label.round{
  border-radius:100%;
}
.swatch label.square{
  border-radius:0;
}
.swatch input:checked + label {
  -webkit-box-shadow:0px 2px 5px #777;
  -moz-box-shadow:0px 2px 5px #777;
  box-shadow:0px 2px 5px #777;
  border-color:transparent;
} 
.swatch .swatch-element {
  -webkit-transform:translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing:antialiased; /* webkit text rendering fix */
  position:relative;
}
/* Image with the cross in it */
.crossed-out { 
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
}
.swatch .swatch-element .crossed-out {
  display:none; 
}
.swatch .swatch-element.soldout .crossed-out { 
  display:block;
}
.swatch .swatch-element.soldout label {
  filter: alpha(opacity=60); /* internet explorer */
  -khtml-opacity: 0.6;      /* khtml, old safari */
  -moz-opacity: 0.6;       /* mozilla, netscape */
  opacity: 0.6;           /* fx, safari, opera */
}
/* Tooltips */
.swatch .tooltip {
  text-align: center;
  background: #000;
  color: #fff;
  bottom: 100%;
  padding: 2px 0;
  display: block;
  position: absolute;
  width: 65px;
  text-transform: capitalize;
  left: -16px;
  line-height: 20px;
  border-radius: 5px;
  margin-bottom: 15px;
  filter: alpha(opacity=0);
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  -ms-transform: translateY(10px);
  -o-transform: translateY(10px);
  transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
  -moz-transition: all .25s ease-out;
  -ms-transition: all .25s ease-out;
  -o-transition: all .25s ease-out;
  transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  z-index: 10000;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
/* CSS triangle */
.swatch .tooltip:after {
  border-left: solid transparent 7px;
  border-right: solid transparent 7px;
  border-top: solid #000 7px;
  bottom: -7px;
  content: " ";
  height: 0;
  left: 50%;
  margin-left: 0;
  position: absolute;
  width: 0;
  transform: translateX(-50%);
}
.swatch .swatch-element:hover .tooltip {
  filter:alpha(opacity=100);
  -khtml-opacity:1;
  -moz-opacity:1;
  opacity:1;
  visibility:visible;
  -webkit-transform:translateY(0px);
  -moz-transform:translateY(0px);
  -ms-transform:translateY(0px);
  -o-transform:translateY(0px);
  transform:translateY(0px);
}
.swatch.error {
  background-color:#E8D2D2!important;
  color:#333!important;
  padding:1em;
  border-radius:5px;
}
.swatch.error p {
  margin:0.7em 0;
}
.swatch.error p:first-child {
  margin-top:0;
}
.swatch.error p:last-child {
  margin-bottom:0;
}
.swatch.error code {
  font-family:monospace;
}