.quantity__sold__total__revenue {
  & ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 23px;
    margin-bottom: 32px;
    & li {
      padding: 24px;
      border-radius: 8px;
      border: 1px solid var(--Gray-200, #eaecf0);
      background: var(--Base-White, #fff);
      box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
      & p {
        color: var(--Gray-500, #667085);
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
      }
      & h3 {
        color: #000;

        /* Display xs/Semibold */
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: 32px; /* 133.333% */
      }
      & .indicator {
        & span.period,
        & span.percent {
          color: var(--Gray-500, #667085);
          font-size: 14px;
          font-style: normal;
          font-weight: 500;
          line-height: 20px;
        }
        & span.percent {
          color: var(--Success-700, #027a48);
        }
      }
    }
  }
  & .filter__create__order {
    display: flex;
    margin-bottom: 32px;
    & .input__search {
      max-width: 300px;
      width: 100%;
      height: 44px;
      border-radius: 8px;
      border: 1px solid var(--Gray-300, #d0d5dd);
      background: var(--Base-White, #fff);
      box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
      display: flex;
      align-items: center;
      padding: 10px 14px;
      & input {
        border: none;
        flex: 1;
        outline: none;
      }
    }
    & .customed__filter {
      margin-right: 16px;
      margin-left: auto;
      border-radius: 8px;
      border: 1px solid var(--Gray-300, #d0d5dd);
      background: var(--Base-White, #fff);

      /* Shadow/xs */
      box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
      display: flex;
      padding: 10px 16px;
      justify-content: center;
      align-items: center;
      gap: 8px;
    }
    & button {
      border-radius: 8px;
      border: 1px solid var(--Primary-600, #4ca30d);
      background: var(--Primary-600, #4ca30d);
      box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
      display: flex;
      padding: 10px 16px;
      justify-content: center;
      align-items: center;
      gap: 8px;
      & span {
        color: var(--Base-White, #fff);
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px;
      }
    }
  }
}

.dispute__wrapper {
  & .dispute__wrapper__top {
    display: flex;
    justify-content: space-between;
    & .support__action {
      & p.creator {
        color: var(--Gray-500, #667085);
        /* Text md/Normal */
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px; /* 150% */
      }
      & .support__action__wrapper {
        display: flex;
        align-items: center;
        gap: 14px;
        & p.support {
          color: var(--Gray-900, #101828);
          font-size: 20px;
          font-style: normal;
          font-weight: 500;
          padding: 0;
          margin: 0;
        }
        & .actionx {
          color: var(--Error-700, #b42318);
          text-align: center;

          font-size: 14px;
          font-style: normal;
          font-weight: 500;
          margin: 0;

          display: flex;
          padding: 4px 12px;
          justify-content: center;
          align-items: center;
          border-radius: 16px;
          background: var(--Error-50, #fef3f2);
        }
      }
    }
  }
  /* chat section */
  & .dispute__chat {
    & .message__wrapper_separator {
      height: calc(72vh - 110px);
      overflow-y: scroll;
      .separator {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
        & .formattedDate {
          color: var(--gray-500, #667085);
          text-align: center;

          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 20px;
        }
        & span {
          display: inline-block;
          flex: 1;
          height: 1px;
          background: #eaecf0;
        }
      }
      & .message__wrapper {
        & ul {
          padding: 0;
          margin: 0;
          list-style-type: none;
          box-sizing: border-box;
          & li {
            & .user_message {
              display: flex;
              align-items: flex-start;
              gap: 16px;
              & .avatr {
                min-width: 48px;
                max-width: 48px;
                min-height: 48px;
                display: block;

                & img {
                  width: 100%;
                  height: 100%;
                  border-radius: 50%;
                  display: block;
                  object-fit: cover;
                }
              }
              & .user_msg {
                & .name {
                  color: var(--Gray-900, #101828);

                  /* Text md/Medium */

                  font-size: 16px;
                  font-style: normal;
                  font-weight: 500;
                  line-height: 24px; /* 150% */
                }
                & .identity {
                  color: var(--Gray-500, #667085);
                  /* Text sm/Normal */

                  font-size: 14px;
                  font-style: normal;
                  font-weight: 400;
                  line-height: 20px; /* 142.857% */
                }
                & .message {
                  color: var(--Gray-900, #101828);

                  /* Text md/Normal */

                  font-size: 16px;
                  font-style: normal;
                  font-weight: 400;
                  line-height: 24px;
                  margin-top: 15px;
                }
              }
            }
            &:not(:last-child) {
              margin-bottom: 24px;
            }
          }
        }
      }
    }
    & .sender {
      border-radius: 12px;
      border: 2px solid var(--Gray-200, #eaecf0);
      background: var(--White, #fff);
      overflow: hidden;
      height: 100px;
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      & input {
        width: 100%;
        margin-bottom: auto;
        outline: none;
        border: none;
        padding: 10px;
      }
      & .sender__button {
        border-top: 1px solid #eaecf0;
        padding: 5px;
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}

button.button {
  color: var(--Gray-700, #344054);
  padding: 10px 16px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;

  border-radius: 8px;
  border: 1px solid var(--Gray-300, #d0d5dd);
  background: var(--Base-White, #fff);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  &.green {
    color: var(--Base-White, #fff);
    border: 1px solid var(--Primary-600, #4ca30d);
    background: var(--Primary-600, #4ca30d);
  }
}