@keyframes FadeIn {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@keyframes FadeOut {
  from {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

@keyframes ZoomIn {
  from {
    transform: translate(0, 0) scale(0)
  }

  to {
    transform: translate(0, 0) scale(1)
  }
}

@keyframes ZoomOut {
  from {
    transform: translate(0, 0) scale(1)
  }

  to {
    transform: translate(0, 0) scale(0)
  }
}

@keyframes FadeZoomIn {
  from {
    opacity: 0;
    transform: scale(0)
  }

  to {
    opacity: 1;
    transform: scale(1)
  }
}

@keyframes FadeZoomOut {
  from {
    opacity: 1;
    transform: scale(1)
  }

  to {
    opacity: 0;
    transform: scale(0)
  }
}

.animation-fadein {
  animation-name: FadeIn;
  animation-delay: var(--animation-delay);
  animation-duration: var(--animation-duration);
  animation-timing-function: ease-in;
}

.animation-fadeout {
  animation-name: FadeOut;
  animation-delay: var(--animation-delay);
  animation-duration: var(--animation-duration);
  animation-timing-function: ease-out;
}

.animation-zoomin {
  animation-name: ZoomIn;
  animation-delay: var(--animation-delay);
  animation-duration: var(--animation-duration);
  animation-timing-function: ease-in;
}

.animation-zoomout {
  animation-name: ZoomOut;
  animation-delay: var(--animation-delay);
  animation-duration: var(--animation-duration);
  animation-timing-function: ease-out;
}

.animation-fadezoomin {
  animation-name: FadeZoomIn;
  animation-delay: var(--animation-delay);
  animation-duration: var(--animation-duration);
  animation-timing-function: ease-in;
}

.animation-fadezoomout {
  animation-name: FadeZoomOut;
  animation-delay: var(--animation-delay);
  animation-duration: var(--animation-duration);
  animation-timing-function: ease-out;
}

.sleekdial-popup-hidden {
    visibility: hidden;
}

.sleekdial-popup {
    position: absolute;
    z-index: 998;
}

.sleekdial-popup-linear-middle {
    bottom: var(--sleekdial-vertical-offset);
}

.sleekdial-popup-linear-left {
    left: var(--sleekdial-horizontal-offset);
}

.sleekdial-popup-linear-right {
  right: var(--sleekdial-horizontal-offset);
}

.sleekdial-popup-linear-direction-left .sleekdial-popup-ul {
  flex-direction: row ;
}

.sleekdial-popup-linear-direction-right .sleekdial-popup-ul {
  flex-direction: row-reverse;
}

.sleekdial-popup-linear-direction-down .sleekdial-popup-ul {
  flex-direction: column-reverse;
}

.sleekdial-popup-linear-center {
  left: var(--sleekdial-horizontal-offset);
}

.sleekdial-popup-linear-top {
  top: var(--sleekdial-vertical-offset);
}

.sleekdial-popup-linear-bottom {
  bottom: var(--sleekdial-vertical-offset);
}

.sleekdial-popup-radial-top {
  top: 16px;
}

.sleekdial-popup-radial-bottom {
  bottom: 16px;
}

.sleekdial-popup-radial-left {
  left: 16px;
}

.sleekdial-popup-radial-right {
  right: 16px;
}

.sleekdial-popup-radial {
  height: calc(var(--sleekdial-radial-offset) + 2 * var(--sleekdial-radial-min-height));
  width: calc(var(--sleekdial-radial-offset) + 2*var(--sleekdial-radial-min-width));
}

.sleekdial-popup-radial-middle {
  height: calc(2 * var(--sleekdial-radial-offset) + 2 * var(--sleekdial-radial-min-height));
  top: var(--sleekdial-vertical-offset);
}

.sleekdial-popup-radial-center {
  width: calc(2 * var(--sleekdial-radial-offset) + 2 * var(--sleekdial-radial-min-width));
  left: var(--sleekdial-horizontal-offset);
}

.sleekdial-popup-radial-top-left {
  border-bottom-right-radius: 100%
}

.sleekdial-popup-radial-top-right {
  border-bottom-left-radius: 100%
}

.sleekdial-popup-radial-bottom-left {
  border-top-right-radius: 100%
}

.sleekdial-popup-radial-bottom-right {
  border-top-left-radius: 100%
}
