.leafer-button {
    z-index: 99;
    position: fixed;
    top: calc(50% - 50px);
    height: 100px;
    width: 80px;

    transition: width 0.5s;
    -webkit-transition: width 0.2s;
}

.leafer-button a {
    text-decoration: none;
}

.leafer-button:hover {
    width: 95px;
}

.leafer-button a:hover {
    text-decoration: none;
}

.leafer-button-left {
    left: 0;
}

.leafer-button-right {
    right: 0;
}


.leafer-button a {
    position: absolute;
    top: 0;
    height: 100%;
    left: 0;
    right: 0;

    box-shadow: 0 0 4px 1px rgba(0,0,0,0.2);

    background-color: var(--button-bg-color);
    background-repeat: no-repeat;
    background-size: 20px;
}

.leafer-button-left a {
    right: 25px;
}

.leafer-button-right a {
    left: 25px;
}

.leafer-button-left a {
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    background-position: 35% center;
}

.leafer-button-left-black a {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='8px' height='12px' viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3EShape%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cg id='Material-Design-Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Material/Icons-black/chevron-left' transform='translate(-8.000000, -6.000000)' fill='%23000000'%3E%3Cpolygon id='Shape' points='15.4 7.4 14 6 8 12 14 18 15.4 16.6 10.8 12'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.leafer-button-left-white a {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='8px' height='12px' viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3EShape%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cg id='Material-Design-Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Material/Icons-white/chevron-left' transform='translate(-8.000000, -6.000000)' fill='%23FFFFFF'%3E%3Cpolygon id='Shape' points='15.4 7.4 14 6 8 12 14 18 15.4 16.6 10.8 12'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.leafer-button-right a {
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;

    background-position: 65% center;
}

.leafer-button-right-black a {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='8px' height='12px' viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3EShape%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cg id='Material-Design-Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Material/Icons-black/chevron-right' transform='translate(-8.000000, -6.000000)' fill='%23000000'%3E%3Cpolygon id='Shape' points='8.59997559 7.4 9.99997559 6 15.9999756 12 9.99997559 18 8.59997559 16.6 13.1999756 12'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.leafer-button-right-white a {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='8px' height='12px' viewBox='0 0 8 12' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3EShape%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cg id='Material-Design-Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Material/Icons-white/chevron-right' transform='translate(-8.000000, -6.000000)' fill='%23FFFFFF'%3E%3Cpolygon id='Shape' points='8.59997559 7.4 9.99997559 6 15.9999756 12 9.99997559 18 8.59997559 16.6 13.1999756 12'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}


.tooltip {
  position: absolute;
  z-index: 1070;
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5rem;
  line-break: auto;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  white-space: normal;
  font-size: 1rem;
  filter: alpha(opacity=90);
  opacity: 0.9;
  padding: 0 5px;
}

.tooltip[x-placement=right] .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -1px;
  border-width: 5px 5px 5px 0;
  border-right-color: var(--tooltip-bg-color);
}

.tooltip[x-placement=left] .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -1px;
  border-width: 5px 0 5px 5px;
  border-left-color: var(--tooltip-bg-color);
}

.tooltip-inner {
  max-width: 200px;
  padding: 5px 10px;
  color: var(--tooltip-color);
  text-align: center;
  background-color: var(--tooltip-bg-color);
  border-radius: 4px;
}

.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}