.terminal-wrapper {
  display: flex;
  width: 100%;
  margin: 1em auto 2em;
  font-family: monospace;
}

.terminal-section {
  min-width: 41em;
  margin: 0 auto;
  border-radius: 4px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 10, 0.3),
  0 30px 70px -30px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  position: relative;
}

.terminal-header {
  background-color: #c5c5c5;

  .terminal-controls {
    display: inline-block;

    .elem {
      float: left;
    }
  }
}

.terminal-body {
  height: 28em;
  padding: 0.6em;
  background-color: #303030;
  overflow: auto;
  color: white;
}

.elem {
  height: 15px;
  width: 15px;
  display: inline-block;
  background-color: #fff;
  margin-right: 10px;
  margin-top: 5px;
  border-radius: 100%;
  border-width: 1px;
  border-style: solid;
  border-color: #ddd;

  &:first-child {
    margin-left: 10px;
  }

  &.elem-close {
    background-color: #ff5d5b;
    border-color: #ee4644;
  }

  &.elem-minimize {
    background-color: #ffbb46;
    border-color: #f1ad39;
  }

  &.elem-fullscreen {
    background-color: #00c74f;
    border-color: #01b849;
  }
}

.terminal-line span {
  display: inline-block;
}

.sim {
  font-size: 0.85em;
}

.hide {
  display: none;
}

.table-content {
  padding-top: 6px;
  font-size: 0.85em;
  line-height: 1.45;
}

.table-content pre {
  font-size: 85%;
  line-height: 1.45;
  word-break: normal;
  word-wrap: normal;
  white-space: pre;
}

@media (min-width: 1700px) {
  .terminal-section {
    .terminal-body {
      height: 29em;
    }
  }
}

@media (max-width: 600px) {
  .terminal-section {
    min-width: 100%;
  }
}