@alternate_row_background_color: #F5F7FA;

@capacity_list_width: 37%;
@table_width: 60%;
@table_body_height: 324px;
@data_column_width: 30%;
@label_column_width: 20%;
@table_border_color: #e4e9f0;

#jsonEditorModal1D{
  .modal-body{
    height: 460px;
    // GMS-3704. The datepicker doesn't work in IE when the modal body position is set to relative
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     position: static;
    }
  }

  #capacityAdd{
    h3{
      margin: 0;
      padding-left: 10px;
      font-size: 12px;
      border-width: 1px;
      border-bottom: 1px solid @table_border_color;
    }
    margin-right: 3%;
    width: @capacity_list_width;
    float: left;

    #capacityAddList{
      padding: 0px;
      max-height: 262px;
      overflow: auto;
      border-bottom: 1px solid #e4e9f0;
      li{
        list-style : none;
        height: 30px;
        font-size: 15px;
        cursor: pointer;
        padding-top: 2px;
        padding-left: 10px;
        .icon-close {
          margin-right: 8px;
          font-size: 13px;
          float: right;
          cursor: pointer;
          padding-top: 2px;
        }
      }
      li.active{
        background-color: rgba(94,153,255,0.3);
      }
    }

    #capacityAddContainer{
      margin-top: 12px;
      label{
        width: 100%;
      }
      input{
        width: 85%;
      }
      .icon-circle-add{
        margin-left: 5px;
        font-size: 15px;
        line-height: 10px;
        cursor: pointer;
      }
    }

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

  .jsonTable1D {
    width: @table_width;
    table-layout: fixed;
    border-collapse: collapse;
    border-top: 1px solid @table_border_color;

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

    .timestampColumn{
      width: @data_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;
    display: inline-block;
    text-align: center;
    font-size: 12px;
    font-weight: bold;


    span{
      width: @label_column_width;
      display: inline-block;
      box-sizing: border-box;
      color: #444a52;
      margin-right: -4px;
    }

    span:nth-child(1), span:nth-child(3){
      width: @data_column_width;
    }
  }

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