.logs {
  width: 100%;
  white-space: normal;
  margin-bottom: 14px;
  table-layout: fixed;

  th {
    color: var(--color-text-maxcontrast);
  }

  td, th {
    vertical-align: top;
    padding: .8em;
    text-align: left;
    font-weight: normal;
    position: relative;
    word-wrap: break-word;
    border-bottom: 1px solid var(--color-border);
  }

  th.level.active .log-settings-toggle,
  th.level:hover .log-settings-toggle {
    opacity: 1;
  }

  .time {
    width: 180px;
  }

  .time.relative {
    width: 100px;
  }

  .app {
    width: 100px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  td.app, th.app {
    @media only screen and (max-width: 1100px) {
      display: none;
    }
  }

  .level {
    width: 100px;
  }

  /* warning*/
  .level_2 td.level {
    border-left: 5px solid #FEEFB3;
  }

  /*error*/
  .level_3 td.level {
    border-left: 5px solid #FFBABA;
  }

  /*fatal*/
  .level_4 td.level {
    border-left: 5px solid #ff8080;
  }

  div.column {
    box-sizing: border-box;
    padding: 7px;
  }

  div.level {
    font-weight: bold;
  }

  div.level, div.app, div.time {
    display: inline-block;
    width: 33%;
  }

  div.time {
    padding-right: 20px;
  }

  div.row {
    position: relative;
  }

  div.message {
    border-bottom: 1px solid var(--color-border);
  }

  td.copy, th.copy {
    position: relative;
    width: 42px;
    margin: 0;
    overflow: visible;

    button {
      position: relative;
      opacity: 0;
      transition: opacity 0.5s;
      top: -5px;
      padding: 0;
      background-color: transparent;
      border: none;
      width: 42px;
    }
  }

  tr:hover {
    td.copy button {
      opacity: 0.5;

      &:hover {
        opacity: 1;
      }
    }
  }

  tr.active td.copy button {
    opacity: 1;
  }

  div.level_1 {

  }

  div.level_2 {
    border-left: 5px solid #FEEFB3;
  }

  div.level_3 {
    border-left: 5px solid #FFBABA;
  }

  div.level_4 {
    border-left: 5px solid #ff8080;
  }

  tr.empty td {
    border-bottom: none;
  }

  tr.highlight {
    background-color: var(--color-background-hover);
  }
}

.smallHeader,
th.level {
  overflow: visible;

  > span {
    margin: -0.8em;
    padding: .8em;
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }

  .log-settings-toggle {
    cursor: pointer;
    display: block;
    float: right;
    margin: 2px;
    opacity: 0.5;
    transition: opacity 0.2s;
  }
}

.smallHeader {
  margin-left: 44px;
  width: 62px;
  padding: 10px;

  .log-settings-toggle:hover {
    opacity: 1;
  }
}

.copyMenu {
  right: -10px;
  top: 50px;
  width: 150px;
}