// Control bar
  #mde-controlbar {
    background: white;
    box-shadow:    0px 0px 1px 1px rgba(0,0,0,0.1);
    position:      fixed;
    top:           10px;
    left:         10px;
    z-index:       1;
    border: thin solid #6e6e6e;

    &.mde-controlbar-tr {
      right: 10px;
      left: auto;
    }

    > button {
      padding: 4px 8px;
      background: transparent;
      outline: 0;
      border: none;
      cursor: pointer;

      svg {
        height: 15px ;
        width: 15px;
        vertical-align: top;
        fill: #6e6e6e;
      }

      &:hover svg {
        fill: #323232;
      }

      &.active svg {
        fill: black;
      }
    }
  }

// Log tray
  #mde-logtray {
    display: none;

    &.active {
      background:    rgb(255,227,159);
      bottom:        0;
      display:       inline-block;
      font-size:     12px;
      left:          0;
      position:      fixed;
      right:         0;
    }

    /* Resize logtray with this button */
    &-resize-bar {
      position: absolute;
      background: #ffffff;
      padding: 0;
      cursor: ns-resize;
      border: 1px solid #6c6c6c;
      border-left: none;
      border-right: none;
      font-size: 8px;
      width: 100%;
      line-height: 9px;
      outline: 0;
      letter-spacing: 10px;
      // Necessary to add an indent half of letter-spacing to properly center text
      text-indent: 5px;
    }

    // logs
    #mde-logs {
      bottom:        0;
      font-family:   monospace;
      left:          0;
      overflow-y:    scroll;
      position:      absolute;
      right:         0;
      top:           10px;

      // log
      .mde-log {
        border-bottom: thin solid rgba(0, 0, 0, 0.2);
        line-height: 17px;
        display: flex;
        flex-wrap: wrap;
        // Stop resizing height
        align-items: flex-start;

        &:not(.open):hover {
          background: rgba(0,0,0,0.01)
        }

        &:before {
          content: ">";
          padding: 8px 0;
          margin-left: 8px;
          font-weight: bold;
        }

        // Colours
        &-type-error .mde-log-message-single           { color: red; }
        &-type-null .mde-log-message-single,
        &-type-undefined .mde-log-message-single       { color: rgb(120,120,120); }
        &-type-number .mde-log-message-single,
        &-type-boolean .mde-log-message-single         { color: blue; }
        &-type-htmlcollection .mde-log-message-single,
        &-type-object .mde-log-message-single          { font-style: italic; }

        // Amount
        .mde-log-amount {
          background-color: rgba(139, 69, 19, 0.25);
          border: thin solid rgba(45, 45, 45, 0.8);
          font-size: 80%;
          font-weight: bold;
          line-height: 14px;
          padding: 1px 3px 0 3px;
          border-radius: 4px;
          margin: 8px 0 8px 8px;

          &:empty {
            display: none;
          }
        }

        // Message (single line)
        .mde-log-message-single {
          overflow:      hidden;
          text-overflow: ellipsis;
          white-space:   nowrap;
          flex: 1;
          padding: 8px 0;
          margin-left: 8px;
        }

       // trace
        .mde-log-trace,
        .mde-log-trace:visited {
          margin-left:    8px;
          color:         rgb(45,45,45);
          text-decoration: underline;
          padding: 8px 8px 8px 0;
        }

        // message (full line)
        .mde-log-message-full {
          display: none;
          background:    rgba(139,69,19,0.25);
          box-shadow:    inset 1px 1px 1px rgba(0,0,0,0.2);
          flex: 100%;
          margin: 0 -8px;
          padding: 4px 16px;
        }

        // Open styles
        &-open {
          .mde-log-message-single {
            font-weight: bold;
          }
          .mde-log-message-full {
            display: block;
          }
        }
      }
    }
  }