html, body { height: 100%; margin: 0; background: transparent; }

/* Styling for the page itself */
body {
  overflow: hidden; /* prevent jittery scrollbars from appearing */
}

/* Adjust some styling to make the shadows not get clipped by the iframe */
div#olark-wrapper div#olark-container {
  width: 90% !important;
  right: 15px !important;
  margin-top: 15px !important;
}

/* Adjust the theme to work better, these should probably get ported to jsclient!1856 */
div#olark-container {

  /* our theme makes the top box look bad with square banner exceeding rounded corners, fix it with clipping */
  clip-path: border-box !important;
  overflow: clip !important;
}

div#olark-container div.olark-top-bar {
  /* doing this instead of clipping since clipping seems to break the drop shadows */
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}

@media screen and (max-height: 280px) {
  /* our theme erroneously detects this small iframe as "zoomed in", reverse it */
  button.olark-launch-button.olark-size-md:not(.olark-text-button),
  button.olark-launch-button.olark-size-dr:not(.olark-text-button) {
    width: 60px !important;
  }
}