.FastDataEntryGrid {
  height: 100%;
  .FlexBoxContext();
  flex-direction: column;
  flex: 1;
.Disabled {
  opacity: 0.4;
  pointer-events: none;
}

.Hidden {
  display:none;
}

.DataInputAreaOuterContainer{
  padding: 0.925em; //16px

  .DataInputAreaContainer{
    .FlexBoxContext();
    max-width:100%;
    flex-direction: row;
    flex-wrap: no-wrap;

    .SearchContainer {
      flex: 1;
      border-radius: 2.080em; //36px
      .FlexBoxContext();
      line-height: 1.849em; //32px
      height: 1.849em; //32px
      -webkit-align-items: center;
      -webkit-box-align: center;
      align-items: center;
      position: relative;

      input::placeholder {
        color: var(--datasearchfield-placeholder-color);
      }

      .SearchIcon {
        float: left;
        position: relative;
        line-height: 0.925em; //16px
        height: 0.925em; //16px
        width: 0.925em; //16px
        margin-left: 0.925em; //16px
      }

      .SearchInput{
        flex: 1;
        line-height: normal;
        height: 2.286em; //32px
        border: none;
        font-family: "Regular";
        font-size: 0.809em; //14px
        padding: 0 0 0 0.429em; //6px
        border-radius: inherit;
      }

      .ClearIcon {
        background-image: var(--inputarea-clear-img);
        background-repeat: no-repeat;
        background-size: 0.693em; //12px
        background-position: center;
        width: 2.543em; //44px
        height: 1.850em; //32px
      }

      .ResultListOuterContainer {
        font-family: "Regular";
        font-size: 0.809em; //14px
        position: absolute;
        top: 100%;
        width: 100%;
        z-index: 50000;

        .ResultListContainer {
          font-family: "Regular";
          font-size: 0.809em; //14px
          margin-left: 1.040em; //18px
          margin-right: 1.040em; //18px

          .ResultCount {
            font-style: italic;
            text-align: right;
            font-size: 11px;
            line-height: 11px;
            padding: 8px 16px 0 16px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .ResultList {
            padding: 8px 0;

            .ResultListItem {
              font-size: 14px;
              line-height: 20px;
              padding: 8px 16px 8px 26px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }

          .NoResults {
            font-size: 14px;
            line-height: 20px;
            padding: 8px 16px 8px 26px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }

    .NumericFieldsContainer{
      .FlexBoxContext();
      flex-direction: row;
      flex-wrap: no-wrap;
      -webkit-align-items: center;
      -webkit-box-align: center;
      align-items: center;
      height: 1.849em; //32px
      line-height: 1.849em; //32px

      .NumericFields{
        .FlexBoxContext();
        flex: 1;
        height: inherit;
        line-height: inherit;

        .NumericField{
          display: -webkit-inline-box;
          margin-left: 0.925em; //16px
          max-width: fit-content;
          -webkit-align-items: center;
          -webkit-box-align: center;
          align-items: center;
          height: inherit;
          line-height: inherit;

          .NumericFieldLabelContainer {
            max-width: 8.668em; //150px
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            height: inherit;
            line-height: inherit;

            .NumericFieldLabelSpan{
              font-family: "Regular";
              font-size: 0.809em; //14px
              vertical-align: middle;
            }
          }

          .NumericFieldInput {
            max-width: 3.333em; //50px
            border: none;
            border-bottom: solid 0.067em; //1px
            height: 2.133em; //32px
            padding: 0;
            font-family: "Regular";
            font-size: 0.867em; //15px
            margin-left: 0.400em; //6px
            line-height: normal;
            text-align: right;
            border-radius: 0;
          }
          
          .NumericFieldInput:focus {
            border-bottom-width: 0.133em !important; //2px
            border-bottom-color: var(--numericinputfield-focus-borderbottomcolor) !important;
            background-color: var(--numericinputfield-focus-backgroundcolor) !important;
            color: var(--numericinputfield-focus-color) !important;
          }
        
          .NumericFieldInput:focus::selection {
            color: var(--numericinputfield-focus-color) !important;
          }
        }
      }

      .AddButton{
        width: 1.849em; //32px
        height: 1.849em; //32px
        margin-left: 0.925em; //16px
      }
    }

  }

  .SearchInfo{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    word-break: break-word;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: "Regular";
    font-size: 0.578em; //10px
    margin-top: 0.400em; //4px
    margin-left: 1.600em; //16px
  }
}

@media only screen and (max-width: 479px) {
  //For phone factor
  .DataInputAreaOuterContainer{
    padding: 0.462em; //8px
    padding-bottom: 0.925em; //16px

    .DataInputAreaContainer{
      flex-direction: column;
      .FlexBoxContext();

      .NumericFieldsContainer{
        margin-top: 0.116em; //2px;
        flex: 1;
        min-width: 0;

        .NumericFields{
          display: inline-flex;
          min-width: 0;
        
          .NumericField{
            flex: 1;
            display: inline-flex;
            min-width: 0;

            .NumericFieldLabelContainer {
              flex: 1;
              min-width: 0;
              max-width: fit-content;
            }
          }

          .NumericField:first-child{
            margin-left: 0;
          }
        }

        .AddButton {
          margin-left: 0.925em; //16px
        }
      }
    }
  }
}
}

.DataGrid {
  .FlexBoxContext();
  flex-direction: column;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;

  .DataGridTable{
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    max-width: -webkit-fill-available;
  }
  .DataGridTableHeaderRow{  
    height: 1.387em;//24px;
    > :first-child {
       padding-left:1.455em;//16px;       
    }
    @media @phone {
      > :first-child {
        padding-left:0.727em;//8px;       
     }
    }
  }
  .DataGridTableRow{
    border-bottom: solid  0.058em;
    > :first-child {
       padding-left:1.067em;//16px;       
    }
   @media @phone {
    > :first-child {
      padding-left:0.533em;//8px;       
    }
   }  
  }
  .DataGridHeader{
    font-family: "Regular";
    font-size: 0.636em; //11px
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 0.727em; //8px;
  }
  .DataGridTableColumn{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size:  0.867em; //15px;
    padding-bottom: 0.533em;//8px;
    padding-top: 0.533em;//8px;
    padding-left: 0.533em;//8px;
    padding-right: 0em;

    @media @phone {
      padding-bottom: 1.067em;//16px;
      padding-top: 1.067em;//16px;
    }  
  }
  .DataGridTableColumnChild{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } 
  .DataGridTableRemoveButtonColumn{
   padding: 0;
  }
  .RemoveButtonParent{
    width: 3.005em; //52px
    height: 1.850em;//32px
    float: right;
    text-align: right;
    @media @phone {
      width: 2.311em; //40px
    }  
  }
  .RemoveButtonHeader{
    display: table-cell;
    width: 3.005em; //52px
    @media @phone {
      width: 2.311em; //40px
    }  
  }
  .RemoveButton{
    display: block;
    padding-left: 0.693em; //12px
    padding-right: 0.925em; //16px

    width: 1.387em; //24px
    height: 1.387em; //24px;
    padding-top: 0.231em;//4px;

    @media @phone {
      padding-left: 0.462em; //8px
      padding-right: 0.462em; //8px
    }  
  }
  .EmptyGridContent{
    .FlexBoxContext();
    justify-content: center;
    align-items: center;
    margin: 1.387em; //24px;
    .EmptyGridImage{
      height:3.15em; //54.5px
      width: 2.83em; //49px
      margin-right: 0.925em; //16px
    }
    .EmptyGridMessage{
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      font-size: 0.693em; //12px
      font-family: "Regular";
      @media @tablet {
        max-width: 72ch;
      }
    }
  }
}