#lisio-widget.right {
  right: -400px;
  transition: right 0.5s ease-out;
}

#lisio-widget.right.open {
  right: 0;
  transition: right 0.5s ease-out;
}

#lisio-widget.left {
  left: -400px;
  transition: left 0.5s ease-out;
}

#lisio-widget.left.open {
  left: 0;
  transition: left 0.5s ease-out;
}

#lisio-widget {
  position: fixed;
  top: 0vh;
  width: 400px;
  height: 100vh;
  z-index: 536870912;
  border: none;
  border-radius: 27px;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
}

#lisio-widget.open {
  position: fixed;
  top: 0vh;
  width: 400px;
  height: 100vh;
}

@media screen and (min-width: 320px) and (max-width: 450px) {
  #lisio-widget {
    width: 90vw;
    min-width: 320px;
  }
  #lisio-widget.open {
    width: 90vw;
    min-width: 320px;
  }
}
@media screen and (max-width: 320px) {
  #lisio-widget {
    width: 100vw;
  }
  #lisio-widget.open {
    width: 100vw;
  }
}

@supports(height:1dvh){
  #lisio-widget.open{
    height: 100dvh;
  }
  #lisio-widget {
    height: 100dvh;
  }
}