/****** Animation Keyframes start ******/
.zw-animate {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.zw-animate.zw-short {
  animation-duration: 0.3s;
}
.zw-animate.zw-mid {
  animation-duration: 0.6s;
}
.zw-animate.zw-infinite {
  animation-iteration-count: infinite;
}
.zw-animate.zw-long {
  animation-duration: 2s;
}
/* <--------------------------------------------> */
/* <--------------------------------------------> */
@keyframes zw-inedx {
  0% {
    position: relative;
    z-index: 0;
  }
  100% {
    position: static;
    z-index: unset;
  }
}
/* <--------------------------------------------> */
/* <--------------------------------------------> */
.zw-removed {
  animation-name: ani-remove;
  display: block;
}
@keyframes ani-remove {
  0% {
    visibility: visible;
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
  }
}
/* <--------------------------------------------> */
/* <--------------------------------------------> */
@keyframes ani-show-left {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translateX(5px);
  }
  100% {
    visibility: visible;
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
  }
}
.zw-show-left {
  animation-name: ani-show-left;
  display: flex;
  flex-direction: column;
}
.zln-direction\:rtl .zw-show-left {
  animation-name: ani-show-right;
}
.zw-show-user-menu {
  display: block;
}
.zw-show-user-menu .zls-usermenu-slider {
  animation-name: ani-show-left;
  display: flex;
  flex-direction: column;
}
.zw-show-user-menu .zw-fade-bg {
  animation-name: ani-show;
  display: block;
}
@keyframes ani-show {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
  }
  100% {
    visibility: visible;
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
  }
}
/* <--------------------------------------------> */
/* <--------------------------------------------> */
@keyframes ani-show-right {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-15px);
  }
  100% {
    visibility: visible;
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
  }
}
.zw-show-right {
  animation-name: ani-show-right;
  display: block;
}
/* <--------------------------------------------> */
/* <--------------------------------------------> */
@keyframes ani-slide-up {
  0% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0px);
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }
}
.zls-ani-slide-up {
  animation-name: ani-slide-up;
}
/* <--------------------------------------------> */
/* <--------------------------------------------> */
@keyframes ani-slide-down {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    opacity: 1;
  }
  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0px);
    opacity: 0;
  }
}
.zls-ani-slide-down {
  animation-name: ani-slide-down;
}
/* <--------------------------------------------> */
/* <--------------------------------------------> */
@keyframes ani-FadeIn {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}
.zw-show-fadebg {
  animation-name: ani-FadeIn;
  display: block;
}
/* <--------------------------------------------> */
/* <--------------------------------------------> */
@keyframes ani-FadeOut {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
.zw-hide-fadebg {
  animation-name: ani-FadeOut;
}
/* <--------------------------------------------> */
/* <--------------------------------------------> */
@keyframes ani-FadeIn {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}
.zw-fade-in {
  animation-name: ani-FadeIn;
  display: block;
}
.zls-fade-in {
  animation-name: ani-FadeIn;
}
/* <--------------------------------------------> */
/* <--------------------------------------------> */
@keyframes ani-FadeOut {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
.zw-fade-out {
  animation-name: ani-FadeOut;
  display: block;
}
.zls-fade-out {
  animation-name: ani-FadeOut;
}
/* <--------------------------------------------> */
/* <--------------------------------------------> */
.zls-save-loading {
  white-space: nowrap;
}
.zls-save-loading.zls-loading-left {
  padding-right: 10px;
  right: 100%;
}
.zls-save-loading.zls-loading-right {
  padding-left: 10px;
  left: 100%;
}
.zw-save-loading {
  position: absolute;
  top: 10px;
  left: 100%;
  white-space: nowrap;
  padding-left: 10px;
}
.zw-save-loading.zw-pos-left {
  left: auto;
  right: 100%;
  padding-right: 10px;
}
.zw-loading-dots {
  margin: 0 5px;
  display: inline-block;
  text-align: center;
}
.zw-loading-dots .zw-dots1,
.zw-loading-dots .zw-dots2,
.zw-loading-dots .zw-dots3,
.zw-loading-dots .zw-dots4 {
  width: 6px;
  height: 6px;
  display: inline-block;
  margin: 2px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  background-color: var(--grey2);
}
.zw-loading-dots.zw-small-loading .zw-dots1,
.zw-loading-dots.zw-small-loading .zw-dots2,
.zw-loading-dots.zw-small-loading .zw-dots3,
.zw-loading-dots.zw-small-loading .zw-dots4 {
  width: 4px;
  height: 4px;
  margin: 1px;
}
.zw-loading-dots.zw-white-loading .zw-dots1,
.zw-loading-dots.zw-white-loading .zw-dots2,
.zw-loading-dots.zw-white-loading .zw-dots3,
.zw-loading-dots.zw-white-loading .zw-dots4 {
  background-color: hsl(0, 0%, 100%);
}
.zw-loading-dots.zw-green-loading .zw-dots1,
.zw-loading-dots.zw-green-loading .zw-dots2,
.zw-loading-dots.zw-green-loading .zw-dots3,
.zw-loading-dots.zw-green-loading .zw-dots4 {
  background: var(--product-accent-color);
}
.zw-loading-dots .zw-dots1 {
  animation-delay: -0.4s;
}
.zw-loading-dots .zw-dots2 {
  animation-delay: -0.3s;
}
.zw-loading-dots .zw-dots3 {
  animation-delay: -0.2s;
}
.zw-loading-dots .zw-dots4 {
  animation-delay: -0.1s;
}
.zln-disabled .zw-loading-dots.zw-white-loading .zw-dots1,
.z-disabled .zw-loading-dots.zw-white-loading .zw-dots1,
.zln-disabled .zw-loading-dots.zw-green-loading .zw-dots1,
.z-disabled .zw-loading-dots.zw-green-loading .zw-dots1,
.zln-disabled .zw-loading-dots.zw-white-loading .zw-dots2,
.z-disabled .zw-loading-dots.zw-white-loading .zw-dots2,
.zln-disabled .zw-loading-dots.zw-green-loading .zw-dots2,
.z-disabled .zw-loading-dots.zw-green-loading .zw-dots2,
.zln-disabled .zw-loading-dots.zw-white-loading .zw-dots3,
.z-disabled .zw-loading-dots.zw-white-loading .zw-dots3,
.zln-disabled .zw-loading-dots.zw-green-loading .zw-dots3,
.z-disabled .zw-loading-dots.zw-green-loading .zw-dots3,
.zln-disabled .zw-loading-dots.zw-white-loading .zw-dots4,
.z-disabled .zw-loading-dots.zw-white-loading .zw-dots4,
.zln-disabled .zw-loading-dots.zw-green-loading .zw-dots4,
.z-disabled .zw-loading-dots.zw-green-loading .zw-dots4 {
  background-color: var(--grey4);
}
.zw-loading {
  animation-name: ani-loading;
}
@keyframes ani-loading {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}
@keyframes ani-zoom-out {
  0% {
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
  100% {
    transform: scale3d(2, 2, 2);
    opacity: 0;
  }
}
@keyframes ani-zoom-out-big {
  0% {
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
  100% {
    transform: scale3d(5, 5, 5);
    opacity: 0;
  }
}
.zw-zoom-out {
  animation-name: ani-zoom-out;
}
@keyframes ani-placeholder {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}
.zw-placeholder-load {
  animation-name: ani-placeholder;
}
.zw-load-con {
  position: fixed;
  z-index: 1;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
}
.zls-loading-container {
  position: fixed;
  z-index: 1;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
}
.zw-color-loading .zw-circular {
  animation: rotate 2s linear infinite;
}
.zw-color-loading .zw-circular .zw-path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite;
  stroke-linecap: round;
  stroke: var(--product-accent-color);
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}
@keyframes color {
  100% {
    stroke: #FF8861;
  }
  0% {
    stroke: #FF8861;
  }
  40% {
    stroke: #FFCD5D;
  }
  66% {
    stroke: #8FCA68;
  }
  80% {
    stroke: #68CEDD;
  }
  90% {
    stroke: #68CEDD;
  }
}
@keyframes ani-shake {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(8px);
  }
  40% {
    transform: translateX(-6px);
  }
  60% {
    transform: translateX(4px);
  }
  80% {
    transform: translateX(-2px);
  }
  100% {
    transform: translateX(0);
  }
}
.zw-invalid {
  animation: ani-shake 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.zw-loading-linear {
  animation-fill-mode: both;
  animation: 1s linear infinite;
  animation-name: ani-placeholder;
  background-color: var(--grey5);
  background: linear-gradient(to right, var(--grey5) 8%, var(--grey4) 18%, var(--grey5) 33%);
  background-size: 800px 104px;
  display: block;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
}
.zw-loading-linear.zls-white-loading {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.8) 8%, #ffffff 18%, rgba(255, 255, 255, 0.8) 33%);
  background-size: 800px 104px;
}
.zw-loading-linear.zls-dark-loading {
  background: linear-gradient(to right, rgba(234, 238, 240, 0.2) 8%, rgba(224, 230, 234, 0.3) 18%, rgba(234, 238, 240, 0.2) 33%);
  background-size: 800px 104px;
}
.zw-loading-linear.zw-transparent {
  background: linear-gradient(to right, rgba(240, 242, 244, 0.1) 8%, rgba(232, 234, 238, 0.16) 18%, rgba(240, 242, 244, 0.1) 33%);
  background-size: 800px 104px;
}
.zw-loading-linear.zw-dark-loading {
  background: linear-gradient(to right, rgba(223, 226, 231, 0.5) 8%, #e0e2e8 18%, rgba(223, 226, 231, 0.5) 33%);
  background-size: 800px 104px;
}
.zw-loading-linear.zw-box-loading {
  padding: 5px 0;
  box-sizing: border-box;
  width: 100%;
}
.zw-loading-linear.zw-animation-none {
  animation: none;
}
.zw-hover {
  position: relative;
}
.zw-hover:before {
  content: '';
  display: block;
  opacity: 0;
  position: absolute;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  bottom: -10px;
  left: -10px;
  right: -10px;
  top: -10px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  box-sizing: border-box;
  transform: scale(0);
  background-color: rgba(32, 33, 36, 0.059);
}
.zw-hover:hover:before {
  border: none;
  opacity: 1;
  transform: scale(0.8);
}
.zw-hover:hover .zw-ic-hover {
  fill: var(--grey0);
  stroke: var(--grey0);
}
.zw-hover.zw-half-top:before {
  bottom: -2px;
  top: -6px;
  border-radius: 30px 30px 0 0;
}
.zw-hover.zw-half-bottom:before {
  bottom: -6px;
  top: -2px;
  border-radius: 0 0 30px 30px;
}
/* tick animation */
.zls-round-tick {
  border: 2px solid rgba(0, 0, 0, 0.15);
  animation: loader-spin 1.2s infinite linear;
  display: inline-block;
  vertical-align: top;
  border-radius: 30px;
  position: relative;
  height: 26px;
  width: 26px;
}
.zls-round-tick .zls-tick-mark {
  display: none;
}
.zls-round-tick .zls-tick-mark:after {
  opacity: 1;
  transform-origin: left top;
  content: '';
  left: 50%;
  top: 50%;
  position: absolute;
  animation-duration: 800ms;
  animation-timing-function: ease;
  animation-name: zw-tick-mark;
  transform: scaleX(-1) rotate(135deg);
  margin-top: 0;
  margin-left: -7px;
  height: 13px;
  width: 5px;
}
.zls-round-tick.zls-tiny-size {
  height: 16px;
  width: 16px;
}
.zls-round-tick.zls-tiny-size .zls-tick-mark:after {
  height: 7px;
  width: 3px;
  margin-left: -5px;
  margin-top: 0px;
  animation-name: zw-tick-mark-tiny;
}
.zls-round-tick.zls-small-size {
  height: 20px;
  width: 20px;
}
.zls-round-tick.zls-small-size .zls-tick-mark:after {
  height: 9px;
  width: 3px;
  margin-left: -5px;
  margin-top: 1px;
  animation-name: zw-tick-mark-small;
}
.zls-round-tick.zls-medium-size {
  height: 30px;
  width: 30px;
}
.zls-round-tick.zls-big-size {
  height: 34px;
  width: 34px;
}
.zls-round-tick.zls-mark-completed {
  -webkit-animation: none;
  animation: none;
  transition: border 500ms ease-out;
}
.zls-round-tick.zls-mark-completed .zls-tick-mark {
  display: block;
}
.zls-round-tick.zls-green-tone {
  border-left-color: #54cb81;
}
.zls-round-tick.zls-green-tone .zls-tick-mark:after {
  border-right: 2px solid #54cb81;
  border-top: 2px solid #54cb81;
}
.zls-round-tick.zls-green-tone.zls-mark-completed {
  border-color: #54cb81;
}
.zls-round-tick.zls-vilote-tone {
  border-left-color: var(--product-accent-color);
}
.zls-round-tick.zls-vilote-tone .zls-tick-mark:after {
  border-right: 2px solid var(--product-accent-color);
  border-top: 2px solid var(--product-accent-color);
}
.zls-round-tick.zls-vilote-tone.zls-mark-completed {
  border-color: var(--product-accent-color);
}
.zls-round-tick.zls-white-tone {
  border-left-color: hsl(0, 0%, 100%);
}
.zls-round-tick.zls-white-tone .zls-tick-mark:after {
  border-right: 2px solid hsl(0, 0%, 100%);
  border-top: 2px solid hsl(0, 0%, 100%);
}
.zls-round-tick.zls-white-tone.zls-mark-completed {
  border-color: hsl(0, 0%, 100%);
}
.zls-ani-rotation {
  animation: loader-spin 1.2s infinite linear;
}
@keyframes loader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes zw-tick-mark-tiny {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 3px;
    opacity: 1;
  }
  40% {
    height: 7px;
    width: 3px;
    opacity: 1;
  }
  100% {
    height: 7px;
    width: 3px;
    opacity: 1;
  }
}
@keyframes zw-tick-mark-small {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 3px;
    opacity: 1;
  }
  40% {
    height: 9px;
    width: 3px;
    opacity: 1;
  }
  100% {
    height: 9px;
    width: 3px;
    opacity: 1;
  }
}
@keyframes zw-tick-mark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 5px;
    opacity: 1;
  }
  40% {
    height: 13px;
    width: 5px;
    opacity: 1;
  }
  100% {
    height: 13px;
    width: 5px;
    opacity: 1;
  }
}
/* tick animation */
/* Like hand animation */
@keyframes ani-like-hand {
  0% {
    transform: rotate(-25deg);
  }
  10% {
    transform: rotate(25deg);
  }
  20% {
    transform: rotate(-20deg);
  }
  30% {
    transform: rotate(20deg);
  }
  40% {
    transform: rotate(-15deg);
  }
  50% {
    transform: rotate(15deg);
  }
  60% {
    transform: rotate(-10deg);
  }
  70% {
    transform: rotate(10deg);
  }
  80% {
    transform: rotate(0deg);
  }
  90% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-15deg);
  }
}
.zw-hand-animate {
  animation-name: ani-like-hand;
  transform-origin: left;
}
/* Like hand animation */
/****** Animation Keyframes End ******/
/*****$ pulse animation $*****/
@keyframes zls-pulse {
  0% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(0.9);
  }
}
/*****$ pulse animation $*****/
/***** Attachment file loading start *****/
.zls-attachmet-loading {
  animation-name: attach-loading;
}
@keyframes attach-loading {
  0% {
    width: 0;
  }
  100% {
    width: 98%;
  }
}
/***** Attachment file loading end *****/
.zls-upload-loading {
  animation: progress-bar-ani 0.5s linear infinite;
}
@keyframes progress-bar-ani {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 2rem 0;
  }
}
/***** Text Blink start *****/
.zls-ani-blink {
  animation-name: blinker;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  animation-duration: 0.5s;
}
@-webkit-keyframes blinker {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/***** Text Blink end *****/
/***** Product tour close start *****/
.zls-product-tour-close {
  animation-name: tour-close;
  animation-timing-function: ease-in-out;
  animation-duration: 0.3s;
  animation-fill-mode: both;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform-origin: right top;
}
@-webkit-keyframes tour-close {
  0% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
  100% {
    transform: scale3d(0, 0, 0);
    opacity: 0.5;
  }
}
/***** Product tour close end *****/
/***** Stop animation *****/
.zls-stop-animation {
  animation: none !important;
}
.zls-stop-animation:after {
  animation: none !important;
}
.zls-stop-animation * {
  animation: none !important;
}
/***** Stop animation *****/
.zls-count-animation {
  width: 2px;
  height: 2px;
  background-color: #f16f6e;
  display: flex;
  color: hsl(0, 0%, 100%);
  justify-content: center;
  align-items: center;
  padding: 2px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: bold;
  position: relative;
}
.zls-count-animation .zls-dot-animation {
  position: absolute;
  background-color: #f16f6e;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 30px;
  animation: ani-zoom-out-big 1.5s infinite;
}
@property --angle {
  syntax: "<angle>";
  initial-value: -45deg;
  inherits: false;
}
@keyframes spin {
  0% {
    --angle: 0deg;
  }
  100% {
    --angle: 360deg;
  }
}
#gradient-horizontal {
  --color-stop-1: #a770ef;
  --color-stop-2: #cf8bf3;
  --color-stop-3: #fdb99b;
}
#gradient-vertical {
  --color-stop-1: #00c3ff;
  --color-stop-2: #77e190;
  --color-stop-3: #ffff1c;
}