#gobotDemoHolder {
  position: fixed;
  bottom: 15px;
  right: 15px;
}
  #gobotDemoHolder .gobot-wrapper {
    position: relative;
    right: 0;
    transition: right 0.2s;
  }
  #gobotDemoHolder .gobot-wrapper.collapsed {
    right: -70px;
  }


.gobot, .gobot-toggle {
  position: absolute;
  bottom: 0;
}
  .gobot-wrapper.left .gobot,
  .gobot-wrapper.left .gobot-toggle {
    left: 0;
  }
  .gobot-wrapper.right .gobot,
  .gobot-wrapper.right .gobot-toggle {
    right: 0;
  }


.gobot {
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  max-width: none;
  max-height: none;
  opacity: 0;
  background-color: transparent;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 5px 37px rgba(0, 0, 0, 0.16);
  transition: width 0.2s, height 0.2s, opacity 0.2s;
  overflow: hidden;
}

  .gobot > iframe {
    width: 100%;
    height: 100%;
    border-style: none;
  }


.gobot-toggle {
  opacity: 0;
  width: 50px;
  height: 50px;
  background: #4183d7;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: right 0.2s, opacity 0.2s, background-color 0.4s;
}

  .gobot-toggle > img {
    width: 25px;
    height: auto;
  }


.gobot-wrapper.collapsed .gobot-toggle {
  right: 0;
  opacity: 1;
}

.gobot-wrapper.expanded .gobot.active {
  width: 320px;
  height: 360px;
  opacity: 1;
}


#gobot-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: rgba(35, 35, 35, 0.95);
  display: flex;
  cursor: pointer;
  z-index: 100;
}
  #gobot-lightbox > .close  {
    position: absolute;
    top: 15px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 100px;
    color: #333;
    font-size: 40px;
    opacity: 0.7;
    background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAACBklEQVRYhe2Xz4tOURyHn+f7NiJmYUiTX03RFJKE8isRG5qFjSllLFCilCgLURaashDZTLGh2Uhk5R9QNiLRZDE0muTH+DVioagZi/d65x2m6Z15zzvvwn1295zv+ZznnHu79x7IycnJ+b8pVFCzC1gPPEs89yFgDtBXbdA+9RPQVrXSCHvUz0B7qsAOdRDYkSCrTf0G7E2QNUJEHM52cnMVMdvVwUKhcCCV198cVz8A6yYxdlN2W48mdvqH0+p7YNUExqzNFnayRk6jiYjz6mtgWQXlK9V3EXG21l6jiIiLah+wZJyyVrU/IjqnyqscI6JL7QUWjdHfor6MiEtTLVZOANfVHqC5rH2++hzoqo/WaBoi4pb6CJgNNKlPIuIGxQVUhVXrFZmu3gQaAdWBoaGh/cCvRPlJWKj+VL9T/MYmIdUOzlLvAj/+ZA4PD7dn13VnhnpPvQ/MBBrVB+odYFqd3WgAbqsPgaay9rnqY6Cbyn7pakIhIrrVp8C8Mfqb1Z6IuEa6R6lijIir2btuwTh1i9XeiLgyVWIARMRl9QXQUkH5UvVVRFyosVaJTrUfaJ3AmOXqG+BcbZRGOKO+BVZMYuxqdQA4ldipxIlsgjVVZGzI/sqPJXIqcSQL3pgga5v6leKpLgkH1Y/A1lSBwE71C9CRImwLxbNxanZTPG/n5OTk1JPf9slQ+76Gg8AAAAAASUVORK5CYII=') no-repeat center;
  }

    #gobot-lightbox > .close:hover {
      opacity: 0.8;
    }

  #gobot-lightbox > img {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 90%;
    border: 10px solid #fff;
  }

  #gobot-lightbox .gobot-lightbox-wrapper {
    width: 90%;
    max-width: 640px;
    margin: auto;
  }

  #gobot-lightbox .gobot-lightbox-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }

    #gobot-lightbox .gobot-lightbox-container > iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }