.v-workflows {
  width: calc(100% - 64px) !important;
}

.v-workflows::before {
  content: "";
  position: absolute;
  top: -5%;
  bottom: -5%;
  left: 15%;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(
    180deg, 
    rgba(139, 171, 225, 0) 0%, 
    #8BABE1 15%, 
    #8BABE1 85%, 
    rgba(139, 171, 225, 0) 100%
  );
  opacity: 0.3;
}

@keyframes workflowsSlideUp {
  100% {
    transform: translateY(-20%);
  }
}

@keyframes workflowsLayerFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.v-workflows__layers.is-animating {
  animation-name: workflowsSlideUp;
  animation-duration: 1000ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.v-workflows__img {
  animation-duration: 1000ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.v-workflows__img.is-fade-in {
  animation-name: workflowsLayerFadeIn;
}
.v-workflows__img.is-fade-out {
  animation-name: workflowsLayerFadeIn;
  animation-direction: reverse;
}