.togetherjs * {
  box-sizing: content-box !important;
}

.togetherjs-cursor {
  position: absolute;
  z-index: 999999;
  /* This magic CSS rule makes this element basically invisible to clicks/etc:
  (good on all but IE: http://caniuse.com/pointer-events */
  pointer-events: none;
  /*FIXME: maybe these should use position: fixed so the cursor
  stays stuck to the top of the screen until the appropriate time
  (when .togetherjs-scrolled-above/below is removed)?*/
  top: 0;
  left: 0;
}

.togetherjs-cursor svg {
  filter: drop-shadow(1px 3px 2px rgba(0, 0, 0, 0.3));
}

.togetherjs-cursor .togetherjs-cursor-container {
  opacity: 0.9;
  white-space: nowrap;
  font-family: openSansLight, Helvetica, 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  font-weight: 500;
  margin: 5px 0 0 10px;
  padding: 5px 8px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
}

@keyframes clicking {
  from {
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    opacity: 1;
  }
  to {
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    opacity: 0;
  }
}

.togetherjs-click {
  position: absolute;
  z-index: 999998;
  pointer-events: none;
  border-radius: 50%;
  border: 3px solid;
  border-color: #ff3a29;
  box-sizing: border-box;
  animation-name: clicking;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}