/* Swatch styles */
h2.list-title {
  margin: 32px 0;
  font-family: "Open Sans";
}

.list-label {
  text-transform:uppercase;
  font-size: 16px;
  font-weight: 400;
  margin:0px;
}

/*Variation Selector Styles*/
.variation-selector {
  display:block;
  list-style:none;
  padding:0;
  margin:0;
}

.variations li {
  margin-right: 5px;
  transition: opacity 0.2s ease;
}

ul.variation-selector {
  margin-bottom: 30px;  
}

.variation-selector .variation {
  width:45px;
  height:45px;
  display:inline-block;
  border-radius: 50% !important;
  cursor:pointer;
  margin-right: 5px;
  opacity: 0.7;
}

.variation.selected {
  opacity: 1;
}

.variation-selector .variation:hover:before,
.variation-selector .variation.selected:before{
    content: "";
    display: block;
    width: 47px;
    height: 47px;
    border-radius: 50%;
    margin-bottom: 1px;
    margin-left: -1px;
    margin-top: -1px;
    border: 3px solid #49c7ba;
}

/*Override style for the viewer tooltip text */
.cylindo-drag-tooltip,.cylindo-zoom-drag-tooltip{
  color:#B2A2D3 !important;
}

#cylindo-viewer-here {
    width: 100%;
    height: 500px;
}

#cylindo-viewer-here > div.cylindo-viewer-container.has-thumbs.thumb-location-bottom > .cylindo-ar-button > a {
    width: auto;
    height: auto;
}

#cylindo-viewer-here > div.cylindo-thumbnail-wrapper.thumb-location-bottom.has-thumbs > div.cylindo-thumbnail-bar > ul > li {
  width: 25% !important;
}

.cylindo-viewer-container .cylindo-drag-tooltip .left,
.cylindo-viewer-container .cylindo-drag-tooltip .right {
  display: none;
}

.cylindo-viewer-container .cylindo-drag-tooltip {
  font-size: 0;
  width: 382px;
  height: 28px;
  padding: 0;
  background: url("https://demo.cylindo.com/viewer/examples/assets/cylindo-arrows-desk.svg")
    no-repeat 50% 50%;
  background-size: contain;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  margin-bottom: 72px;
}

.cylindo-viewer-container .cylindo-drag-tooltip::before {
  content: "360\00b0";
  color: #a9a9a9;
  font-size: 12px;
  letter-spacing: 0.0233333333em;
  line-height: 30px;
  font-family: "Open Sans", sans-serif;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0 0 0 3px;
}

.cylindo-viewer-container .cylindo-drag-tooltip::after {
  display: none;
}

.cylindo-viewer-container .cylindo-drag-tooltip {
  bottom: 0;
  margin-bottom: 0;
}