.Playground {
  margin-top: 30px;
  margin-bottom: 50px;
  clear: both;
  min-height: 400px; }
  .Playground-mode.hide {
    display: none; }
  .Playground-editor {
    width: 50%;
    float: left;
    border-radius: 10px;
    overflow: hidden;
    cursor: text;
    position: relative; }
  .Playground-play {
    position: absolute;
    right: 5px;
    top: 5px;
    padding: 10px;
    z-index: 10000; }
    .Playground-play img {
      height: 25px; }
    .Playground-play.highlight {
      animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
      transform: translate3d(0, 0, 0);
      backface-visibility: hidden;
      perspective: 1000px; }
  .Playground-preview {
    width: 50%;
    float: right; }
  .Playground-tools {
    text-align: center;
    padding: 30px 10px 10px;
    clear: both; }
  .Playground-chat {
    margin: 0;
    background-color: #685C79;
    padding: 20px;
    border-radius: 10px;
    overflow: hidden;
    max-width: 100%;
    margin-left: 50px; }
    .Playground-chat ul.yvebot-conversation {
      padding: 0;
      list-style-type: none;
      height: 327px; }

.CodeMirror {
  font-size: 14px;
  line-height: 17px !important;
  font-family: Monaco, Menlo, Consolas, "Droid Sans Mono", "Inconsolata", "Courier New", monospace !important;
  color: #333 !important;
  background: #f2f2f2 !important;
  height: 400px !important;
  padding: 10px !important;
  border-radius: 4px; }

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0); }
  20%, 80% {
    transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0); }
  40%, 60% {
    transform: translate3d(4px, 0, 0); } }
