.QueryEditor {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  --QueryEditor-navbarHeight: 45px;
}

.QueryEditor .Editor {
  height: calc(100% - var(--QueryEditor-navbarHeight));
}

.QueryEditor .Editor .CodeMirror {
  height: 100%;
}

.QueryEditor-navbar {
  flex-basis: var(--QueryEditor-navbarHeight);
  box-sizing: border-box;
  padding: 10px;
  background-color: #f7f7f7;
  position: relative;
  border-top: 1px solid #ccc;
  height: var(--QueryEditor-navbarHeight);
}

.QueryEditor-status {
  display: inline-block;
  margin-left: 5px;
}

.QueryEditor-status > span {
  color: #999;
  display: inline-block;
  font-size: 13px;
  margin: 0 5px;
}

.QueryEditor-status .fa-check {
  color: #59bb0c;
  font-size: 14px;
}

.QueryEditor-status .fa-close {
  color: #bb0c0c;
  font-size: 14px;
}

.QueryEditor-status .fa-working {
  color: #999;
  font-size: 14px;
}

.QueryEditor-status.is-error span {
  color: #bb0c0c;
}

.QueryEditor-resize {
  position: absolute;
  right: 8px;
  top: 5px;
  display: inline-block;
  color: #999;
  cursor: row-resize;
  padding: 10px 20px;
}
