.number-keyboard-popup {
  padding-top: 10px;
  background: var(--nut-numberkeyboard-background-color, #f2f3f5) !important;

  .temp-input {
    padding: 0 6px;
    box-sizing: border-box;

    .nut-cell-group__wrap {
      margin: 0;
      border-radius: 6px !important;
    }
  }

  .quick-box {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    height: 48px;
    padding: 3px 6px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .quick::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
  }

  .quick {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    overflow: -moz-scrollbars-none; /* Older Firefox versions */
    overflow-y: scroll; /* Ensure content is scrollable */
  }

  .quick {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding-bottom: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
    will-change: scroll-position;
    transform: translateZ(0);

    .quick-item {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 6px 10px;
      box-sizing: border-box;
      font-size: var(--nut-numberkeyboard-key-font-size, 14px);
      color: var(--nut-numberkeyboard-key-font-size-color, #333);
      cursor: pointer;
    }

    .quick-item--checked {
      border-radius: 4px;
      background-color: var(--nut-numberkeyboard-key-background-color, #fff);
    }
  }

  .quick-fiexd {
    display: flex;
    align-items: center;
    height: 48px;
    margin-left: 12px;

    .quick-item {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px 12px;
      box-sizing: border-box;
      font-size: var(--nut-numberkeyboard-key-font-size, 14px);
      color: var(--nut-numberkeyboard-key-font-size-color, #333);
      cursor: pointer;
    }

    .quick-item--checked {
      border-radius: 4px;
      background-color: var(--nut-numberkeyboard-key-background-color, #fff);
    }
  }

  .number-keyboard {
    display: flex;
    align-items: flex-end;
    width: 100%;

    .temp-list-box {
      width: calc((100% - 36px) / 5);
      margin-bottom: 28px;
      margin-left: 6px;
      border-radius: var(--nut-numberkeyboard-key-border-radius, 8px);
      overflow: hidden;
    }

    .temp-list::-webkit-scrollbar {
      display: none; /* Chrome, Safari and Opera */
    }

    .temp-list {
      -ms-overflow-style: none; /* IE and Edge */
      scrollbar-width: none; /* Firefox */
      overflow: -moz-scrollbars-none; /* Older Firefox versions */
      overflow-y: scroll; /* Ensure content is scrollable */
    }

    .temp-list {
      width: 100%;
      height: 210px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-right: 20px;
      border-radius: var(--nut-numberkeyboard-key-border-radius, 8px);
      background-color: var(--nut-numberkeyboard-background-color, #fff);
      user-select: none;
      overflow-y: auto;
      overflow-x: hidden;

      .nut-key__wrapper {
        width: 100%;
        padding: 0;
        .nut-key {
          flex: 1;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          height: var(--nut-numberkeyboard-key-height, 42px);
          font-size: var(--nut-numberkeyboard-key-font-size, 14px);
          line-height: var(--nut-numberkeyboard-key-line-height, 1.5);
          background-color: var(--nut-numberkeyboard-key-background-color, #fff);
          color: var(--nut-numberkeyboard-key-font-size-color, #333);
          border-radius: var(--nut-numberkeyboard-key-border-radius, 8px);
          cursor: pointer;
        }
      }

      .nut-key__wrapper--checked {
        .nut-key {
          background-color: var(--nut-numberkeyboard-key-background-color, rgba(0, 0, 0, 0.25));
        }
      }
    }

    .number-keyboard-box {
      flex: 1;
    }
  }

  .number-keyboard-style {
    position: inherit;
    width: 100%;
  }
}

.number-keyboard-overlay {
  background: none !important;
}