.jobDetails {
  width: 300px;
}

.job-static-columns-container{
  display: inline-block;
  vertical-align: top;
  width: 23.05%;
  height: 98%;
  white-space: nowrap;
  margin: 0px;
  padding: 0px;
  position: relative;
  overflow: hidden;
  border-left: solid 1px #EDEDED;
  border-right: solid 1px #EDEDED;
  box-sizing: border-box;

  h2 {
    text-align: center;
    background: $color-dark-blue;
    margin: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: $color-secondary-text;
    font-size: 16px;
  }

  &:first-child {
    width: 50%;

    .job-cell, .job-column-header {
      &:first-child {
        width: 50px;
      }
    }
    .input-metric-column-container {
      overflow-x: hidden;
    }

    .job-column-header, .job-cell {
      width: calc(100% / 6 - 42px / 5);
    }

    .job-column-header:last-of-type(), .job-cell:last-of-type() {
      width: calc(100% / 6 - 42px / 5 + 30px);
    }
  }
}

.input-metric-header-row-container {
  width: 100%;
  position: relative;
  overflow: hidden;
  overflow-x: scroll;

  .input-metric-column-container:nth-of-type(2) {
    vertical-align: top;
    min-height: 264px;
  }
}

.input-metric-column-container {
  min-width: 100%;
  overflow-y: scroll;
  width: fit-content;

  .empty-columns-message-no-jobs {
    padding-left: calc(2 * #{$margin-width});
  }

  .job-column-header {
    height: 100%;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    position: relative;
    overflow: hidden;

    div {
      h4 {
        &:hover {
          + .tooltip {
            display: block;
          }
        }
      }
    }

    .tooltip {
      display: none;
      &:hover {
        display: block;
      }
    }

    input{
      width: 28px;
      height: 20px;
      vertical-align: middle;
    }
    
  }

  .job-cell {
    text-align: center;
    padding-left: 0px;
    padding-right: 0px;
    width: $column-width;
    box-sizing: border-box;
    
    p {
      margin: 0px 10px;
      vertical-align: middle;
      height: $row-height;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

      &.type-not-available {
        font-style: italic;
        color: $color-9c-grey;
        &.error {
          color: $color-status-rgba-red-half-opacity;
        }
      }

      &.type-number, &.type-array {
        text-align: center;

        &.string {
          text-align: center;
        }
      }
    }
  }
}

@media only screen and (max-width: $minimum-screen-width) {
  .job-summary-info-container {
      width: 400px;
  }

  .input-metric-column-container {
    .job-cell {
      p {
        margin: 0px;
        vertical-align: middle;
        padding-right: 3px;
        padding-left: 5px; 
      }
    }
  }

  }

  .f9-active-row {
    background-color: $color-job-row-select!important;
    background: $color-job-row-select!important;
  }

  .no-rows-container {
    text-align: center;
    p, span {
      font-size: 9px;
      padding-left: 0px;
    }

    .underline {
      text-decoration: underline;
      cursor: pointer;
    }

    img {
      width: 150px;
      height: 150px;
      margin-top: 10px;
    }
  }