.LotaltyForm {
  display: flex;
  flex-direction: column;
  padding-bottom: 5rem;

  .OnSelect {
    opacity: 1;
    box-shadow:
      rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
      rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    margin: 3px;
    padding: 5px;
    background-color: #fff;
  }

  .OnDeselect {
    opacity: 0.6;
    box-shadow: none;
  }

  > div:nth-child(1) {
    margin-top: 0.5rem;
  }

  > div:nth-child(2) {
    > div:nth-child(1) {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 1rem;
      .ant-form-item {
        margin-bottom: 0rem;
      }
      .ant-select-selector {
        height: 52px;
      }
      .float-label {
        margin-bottom: 0rem;
      }
    }

    > div:nth-child(2) {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      .LotaltyPointsForm-Rewards {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.5rem;

        > div:nth-child(1) {
          width: 100%;
          font-size: 15px;
          font-weight: 600;
          border-bottom: 1px solid #8a8a8a;
        }
        .ant-form-item {
          margin-bottom: 0rem;
        }
        .ant-select-selector {
          height: 52px;
        }
        .float-label {
          margin-bottom: 0rem;
        }

        .LotaltyPointsForm-Rewards-SelectedProducts {
          width: 44rem;
          height: 100px;
          border: 1px solid #dadada;
          display: flex;
          gap: 0.5rem;
          flex-wrap: wrap;
          border-radius: 5px;
          padding: 5px;
          overflow: scroll;

          > div {
            width: max-content;
            height: 35px;
            border-radius: 5px;
            padding: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            font-weight: 600;
            background-color: #ebebeb;
          }
        }

        .LotaltyPointsForm-FreeRewards-SelectedProducts {
          width: 44rem;
          height: 100px;
          border: 1px solid #dadada;
          display: flex;
          gap: 0.5rem;
          flex-wrap: wrap;
          border-radius: 5px;
          padding: 5px;
          overflow: scroll;
          > div {
            width: max-content;
            height: 35px;
            border-radius: 5px;
            padding: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            font-weight: 600;
            background-color: #ebebeb;
          }
        }

        .LotaltyPointsForm-AppliesTo {
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #dadada;
          border-radius: 5px;
          gap: 0.5rem;
          width: max-content;
          height: 50px;
          padding: 10px;
          > h1 {
            font-size: 16px;
          }
          > div {
            width: 39rem;
            height: 1.8rem;
            background-color: #c1c1c1;
            border-radius: 5px;
            display: flex;
            cursor: pointer;
            > div {
              width: 50%;
              display: flex;
              justify-content: center;
              align-items: center;
              gap: 0.5rem;
              border-radius: 5px;
              > p {
                font-size: 13px;
                text-wrap: nowrap;
              }
            }
          }
        }
      }
      .LotaltyPointsForm-Rules {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.5rem;

        .ant-form-item {
          margin-bottom: 0rem;
        }
        .float-label {
          margin-bottom: 0rem;
        }
        > div:nth-child(1) {
          width: 100%;
          font-size: 15px;
          font-weight: 600;
          border-bottom: 1px solid #8a8a8a;
        }
        > div:nth-child(2) {
          display: flex;
          gap: 0.5rem;
        }

        .LotaltyPointsForm-Rules-SelectedProducts {
          width: 44rem;
          height: 100px;
          border: 1px solid #dadada;
          display: flex;
          gap: 0.5rem;
          flex-wrap: wrap;
          padding: 5px;
          border-radius: 5px;
          overflow: scroll;

          > div {
            width: max-content;
            height: 35px;
            border-radius: 5px;
            padding: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            font-weight: 600;
            background-color: #ebebeb;
          }
        }
      }
    }

    > div:nth-child(3) {
      position: fixed;
      bottom: 40px;
      right: 100px;
    }
  }
}