@import '../../../core/src/style/variables';

h3 {
  margin: 0.8em 0;
}
h4 {
  font-size: 1.4rem;
}

wpt-dialog-content.moqModal {
  margin: 0;
  padding: 0;
  border: 1px solid $middarkgrey;

  div.list-wrapper {
    max-width: 100%;
    display: flex;
    align-items: flex-start;

    wpt-table.firstLevelTable {
      wpt-cell {
        height: 80px;
        min-height: 0px;
      }

      > wpt-row {
        border-bottom-style: solid;
        border-bottom-color: $lightergrey;
        border-bottom-width: 1px;
        display: flex;
      }
    }

    .fixed-columns-table {
      box-sizing: border-box;
      position: relative;
      flex: 2 1 500px;

      wpt-header-row,
      wpt-row {
        padding: 0;
      }

      wpt-header-row {
        background-color: #dedede;
        color: #000;
        min-height: 38px;
        .wpt-header-cell,
        .wpt-sort-header-button {
          color: black;
          font-size: 0.86em;
          font-weight: 700;
          text-transform: capitalize;
        }
      }

      wpt-cell,
      wpt-header-cell {
        flex: 1 1 100px;
        padding: 0 10px;
      }

      wpt-cell {
        padding: 15px 10px;
        overflow: unset;
      }

      wpt-header-cell {
        span {
          display: inline-block;
          min-width: 85px;
        }
      }

      .wpt-column {
        &-select {
          flex: 1 0 auto;
          max-width: 10%;

          &.no-display {
            display: none;
          }
        }
        &-partNumber {
          flex: 3 0 auto;
          max-width: 30%;
        }
        &-qtyRequested {
          flex: 2 0 auto;
          max-width: 15%;
        }
        &-minMultiple {
          flex: 2 0 auto;
          max-width: 15%;
          text-align: left;
          font-weight: normal;
        }
        &-proposedChange {
          flex: 3 0 auto;
          max-width: 30%;
        }
      }
    }
  }
}

.MOQModalComponent-warning-text {
  margin: 15px 0;
  @media screen and (min-width: 901px) {
    text-align: right;
  } 
  span {
    font-weight: 700;
    font-size: 1.2rem;
  }
}

.MOQModalComponent-buttons {
  button {
    width: auto;
    min-width: 150px;
    height: 37px;    
    @media screen and (min-width: 901px) {
      float: right;
    }
    @media screen and (max-width: 900px) {
      margin-right: 15px;
    } 

    &:nth-child(2) {
      margin-right: 15px;
    }
  }
}

.paginator-wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 10px;
}