@alternate_row_background_color: #F5F7FA;

@table_width: 100%;
@table_body_height: 680px;
@title_column_width: 20%;
@data_column_width: 10%;
@table_border_color: #e4e9f0;

.jsonEditor2dCustomModal .modal-dialog{
  width: 700px; 
}

#jsonEditorModal2D{
  .jsonTable2D {
    width: @table_width;
    table-layout: fixed;
    border-collapse: collapse;

    border-width: 1px;
    border-style: solid;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-color: @table_border_color;

    /* In Firefox the html5 number spinner looks terrible when all of them are visible at once so hide them*/
    input[type="number"] {
      -moz-appearance: textfield;
    }

    td {
      padding: 2px 12px;
      text-align: center;
      width: @data_column_width;
    }

    td:nth-child(1) { width: @title_column_width; }

    tbody {
      display: block;
      overflow: auto;
      width: 100%;
      tr:nth-child(even) {
        background-color: @alternate_row_background_color;
      }
    }

    input {
      width: 100%;
      text-align: center;
      border: none;
      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
      background: transparent;
      font-weight: bold;
    }

    input.zeroValue {
      opacity: 0.3;
      font-weight: normal;
    }

    input:focus{
      opacity: 1;
    }

    input.ng-invalid{
        box-shadow: 0 0 5px rgba(255, 0, 0, 1);
        border: 1px solid rgba(255, 0, 0, 1);
    }
  }

  .groupEdit{
      background-color: rgba(94, 153, 255, .15);
  }

  .jsonFormHeaderContainer{
    width: @table_width;
    text-align: center;
    font-size: 12px;
    font-weight: bold;


    span{
      width: @data_column_width;
      display: inline-block;
      box-sizing: border-box;
      color: #444a52;
    }

    span:first-child{
      width: @title_column_width;
      margin-right: -4px;
    }

    span:last-child{
      margin-left: -2px;
    }
  }

  .resetButton{
    float:left;
    margin-left: 10px;
  }

  .input-spinner{
    float: right;
    margin-right: 10px;
    margin-top: 7px;
  }

  .old_ie_wrapper {
    height: @table_body_height;
    width: @table_width;
    overflow-x: hidden;
    overflow-y: auto;
    tbody { height: auto; }
  }
}
