PozoApp-retail-designChanges/src/Styles/AppPage/AppPage.scss

.appPage {
  min-width: 100vw;
  height: 100vh;
  display: flex;
  // overflow: hidden;
  overflow-y: clip; // shifayath
}

.centerPage {
  flex-grow: 1;
  display: flex;
  height: 100vh;
  background-color: var(--PAGE_BODY_BACKGROUND_COLOR);
  padding: 8px;

  @media (max-width: 500px) {
    width: 90vw !important;

    .centerPageSub {
      // width: 90% !important;
    }
  }
}

.centerPageSub {
  // margin: 0px max(10px, 5vw);
  // width: 81vw !important;
  // margin: 0px max(0px, 0vw) !important;
  border-radius: 12px;
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 6px;
  overflow: auto;
  height: 97vh;
  // padding-bottom: 3rem;

  // width: 99.9% !important;
  @media (max-width: 500px) {
    height: 95vh !important;
  }
}

.breadCrumbClass {
  display: flex;
  padding: 0rem 1rem 0.3rem 1rem;
  justify-content: space-between;
  top: 0;
  position: sticky;
  z-index: 10;
  background-color: #fff;
  .ant-breadcrumb ol {
    justify-content: center;
    // align-items: center;
  }

  .ant-breadcrumb-link a {
    font-size: 12px;
  }
  [data-letters]:before {
    margin-right: 0 !important;
  }
}

.content {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  // height: 90vh;
  height: 100%;
  overflow: auto;
  width: 98%;
}

.contents {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  // height: 90vh;
  height: 100%;
  overflow: auto;
  margin: 0 16px;

  @media (max-width: 500px) {
    width: 94%;
    margin: 0 6px;
  }
}

.userPage {
  height: 100%;
  width: 100%;
  // padding: 1vw max(10px, 1.2vw);
  overflow: auto;
}

.userPageContent {
  // height: 100%;
  height: auto;
  width: 100%;
  padding-bottom: 3rem;
  background-color: #fff;
  // padding: 1rem 1rem;
  border-radius: 12px;
}

.formDiv {
  display: flex;
  flex-wrap: wrap;
  column-gap: 3rem;
  padding-top: 0.5rem;
  height: 74vh;
  overflow: auto;
  row-gap: 1.5rem;
}

.formDivAnt {
  display: flex;
  flex-wrap: wrap;
  column-gap: 3rem;
  row-gap: 1.5rem;
}

.formDivS {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  row-gap: 1.5rem;
}

.formAddressDiv {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.5rem;
}

.formAddressDiv p {
  color: deepskyblue;
}

.upload_btn p {
  color: deepskyblue;
}

.TimePickerDiv {
  width: var(--INPUT_FIELD_WIDTH);
  padding: 18px 14px 6px 11px;
  font-size: 16px;
  font-weight: 490;
}

.MapDiv {
  position: relative;
  flex-grow: 1;
  overflow: hidden;
  border: none;
}

.formdes {
  font-style: normal;
  color: var(--PARA_COLOR);
  font-family: var(--PARA_FONT_FAMILY);
  font-size: 2.1vh;
}

.submitButton {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
  position: unset;
  bottom: 10px;
  right: 100px;
  width: 100%;
}

.formAddNew {
  display: flex;
  // flex-direction: column;
  flex-direction: row;
  row-gap: 0.5rem;
  gap: 2rem;
  // flex-wrap: wrap;
  @media (max-width: 768px) {
    flex-wrap: wrap;
  }
}

.inputForm {
  display: flex;
  flex-wrap: wrap;
  // column-gap: 2rem;
  gap: 1rem;
  .ant-form-item {
    margin-bottom: 0;
  }
  .float-label {
    margin-bottom: 0;
  }
}

.subinputForm {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2rem;
}

.subsubinputForm {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 2rem;
}

.userPageTable {
  height: 100%;
  width: 100%;
  // padding-left: var(--TABLE_PAGE_PADDING);
  overflow: auto;
  padding-bottom: 4rem;

  // padding-bottom: 10rem;

  @media (max-width: 500px) {
    padding-left: 0;
    height: 90%;
    padding-bottom: 2rem;
    z-index: 0;
  }
}

.searchAddDiv {
  display: flex;
  // flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 1rem;
  width: 100%;
  @media (max-width: 768px) {
    flex-wrap: unset !important;
  }
}

.reportTable {
  overflow: auto;
  // width: 80vw;
  width: 100%;
  height: 70vh !important;
  table {
    thead {
      background-color: #f1f5f9 !important;
    }
    tr {
      &:nth-child(even) {
        background-color: #cecece !important;
        opacity: 1;
        height: 31px !important;
      }
    }
    thead,
    tr,
    td,
    th {
      &:hover {
        background: #fff !important;
        background-color: #fff !important;
      }
    }
  }
}

.pageOverAll {
  // background-color: white;
  width: 100% !important;
  border-radius: 12px;
}

.reportTable .ant-table-thead {
  position: sticky;
  top: 0;
  background-color: #f3f3f3;
  z-index: 1;
  height: 35px !important;
}

.reportTable .ant-pagination {
  position: sticky;
  bottom: 0;
  margin: 0 !important;
  padding: 0.5rem;
  background-color: #fafafa;
}

[data-letters]:before {
  content: attr(data-letters);
  display: inline-block;
  font-size: 0.8em;
  width: 2.5em;
  line-height: 2.4em;
  text-align: center;
  border-radius: 50%;
  background: #d0c8ff;
  vertical-align: middle;
  margin-right: 5em;
  color: #8036ff;
  font-weight: 600;

  @media (max-width: 500px) {
    width: 2em;
    line-height: 2em;
    margin-right: 1em;
  }
}

.centerPage-tooltip {
  position: relative;
  display: inline-block;
  font-family: "Gilroy";
}

.paypreLogoDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 0px !important;
  background-color: #23378a;
  color: #fff;
  height: 3rem;

  @media (max-width: 500px) {
    img {
      // display: none;
      width: 75px;
      height: 35px;
    }
  }

  @media (max-width: 768px) {
    position: sticky;
    top: 0;
    z-index: 10;
  }
}

.marquee {
  white-space: nowrap;
  overflow: hidden;
  display: block;
  width: 100%;
  // background-color: #e9eaeb;
  padding: 6px 0;
  border-radius: 4px;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: scrollText 10s linear infinite;
  color: #ff4d4f;
  font-family: "Poppins";
  font-size: 12px;
  font-weight: 500;
}

@keyframes scrollText {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(-100%);
  }
}

@media (max-width: 500px) {
  .ant-modal .ant-modal-content {
    padding: 32px 32px !important;
  }
}

@media (max-width: 768px) {
  .appPage {
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+ */
    user-select: none;
    /* Standard */
  }
}
// Nuclear option - disable ALL table hover effects
.ant-table .ant-table-container .ant-table-content table tbody tr:hover {
  background-color: inherit !important;
  font-weight: unset;
}

.ant-table .ant-table-container .ant-table-content table tbody tr:hover td {
  background-color: inherit !important;
  font-weight: unset;
}

.ant-table .ant-table-container .ant-table-content table tbody tr:nth-child(even):hover {
  background-color: #cecece49 !important;
  font-weight: unset;
}

.ant-table .ant-table-container .ant-table-content table tbody tr:nth-child(even):hover td {
  background-color: #cecece49 !important;
  font-weight: unset;
}

.ant-table .ant-table-container .ant-table-content table tbody tr:nth-child(odd):hover {
  background-color: #fff !important;
  font-weight: unset;
}

.ant-table .ant-table-container .ant-table-content table tbody tr:nth-child(odd):hover td {
  background-color: #fff !important;
  font-weight: unset;
}

// .ant-table .ant-table-container .ant-table-content table tbody tr td:nth-child(1) {
//   width: 100px !important;
//   min-width: 100px !important;
//   max-width: 100px !important;
// }

// .ant-table .ant-table-container .ant-table-content table thead tr th:nth-child(1) {
//   width: 100px !important;
//   min-width: 100px !important;
//   max-width: 100px !important;
// }

// .ant-table colgroup col:nth-child(1) {
//   width: 100px !important;
// }