@pmidc/upyog-css 1.2.49 → 1.2.50

package/src/index.scss

@@ -1,2424 +1,2424 @@
-/*@import 'normalize.css';*/
-
-@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
-
-@import "tailwindcss/base";
-
-@import "tailwindcss/components";
-
-@import "tailwindcss/utilities";
-
-@import "react-date-range/dist/styles.css";
-@import "react-date-range/dist/theme/default.css";
-
-@import "./components/loader.scss";
-
-@import "./components/body.scss";
-@import "./components/navbar.scss";
-@import "./components/card.scss";
-@import "./components/buttons.scss";
-@import "./components/radiobtn.scss";
-@import "./components/selectdropdown.scss";
-@import "./components/textfields.scss";
-@import "./components/bannercomponents.scss";
-@import "./components/datewrap.scss";
-@import "./components/datatable.scss";
-@import "./components/checkpoint.scss";
-@import "./components/checkbox.scss";
-@import "./components/inputotp.scss";
-@import "./components/map.scss";
-@import "./pages/employee/tooltip.scss";
-@import "./components/menu.scss";
-@import "./components/submiterrors.scss";
-@import "./components/ratingstar.scss";
-@import "./components/keynote.scss";
-@import "./components/statushighlight.scss";
-@import "./components/imageviewer.scss";
-@import "./components/actionbar.scss";
-@import "./components/table.scss";
-@import "./components/popup.scss";
-@import "./components/uploadcomponents.scss";
-@import "./components/toast.scss";
-@import "./components/detailscontainer.scss";
-@import "./components/telephone.scss";
-@import "./components/grey.scss";
-@import "./components/actionLink.scss";
-@import "./components/sectionalDropdown.scss";
-@import "./components/detailscard.scss";
-@import "./components/searchAction.scss";
-@import "./components/tag.scss";
-@import "./components/topbar.scss";
-@import "./components/languageSelector.scss";
-@import "./components/custombtn.scss";
-@import "./components/citizenInfoLabel.scss";
-@import "./components/roundedLabel.scss";
-@import "./components/changeLanguage.scss";
-@import "./components//metricsTable.scss";
-@import "./components/filters.scss";
-@import "./components//charts.scss";
-@import "./components/summary.scss";
-@import "./components/multiLink.scss";
-@import "./components/info-banner.scss";
-@import "./components/multiSelectDropdown.scss";
-@import "./components/EllipsisMenu.scss";
-@import "./components/CitizenHomeCard.scss";
-@import "./components/PropertySearchForm.scss";
-@import "./components/SearchForm.scss";
-@import "./components/cardHeaderWithOptions.scss";
-@import "./components/TimeLine.scss";
-@import "./components/PageBasedInput.scss";
-@import "./components/StandaloneSearchBar.scss";
-@import "./components/CardBasedOptions.scss";
-@import "./components/WhatsNewCard.scss";
-@import "./components/SearchOnRadioButton.scss";
-@import "./components/EventCalendarView.scss";
-@import "./components/OnGroundEventCard.scss";
-@import "./components/PopupHeadingLabel.scss";
-@import "./components/staticSideBar.scss";
-@import "./components/hoc/index.scss";
-@import "./components/FAQ.scss";
-@import "./components//howItWorks.scss";
-@import "./components/staticDynamicMessages.scss";
-@import "./components/toggleSwitch.scss";
-@import "./components/plusMinus.scss";
-@import "./components/documentSection.scss";
-
-@import "./pages/employee/index.scss";
-@import "./pages/employee/cardfix.scss";
-@import "./pages/employee/popupmodule.scss";
-@import "./pages/employee/container.scss";
-@import "./pages/employee/inbox.scss";
-@import "./pages/employee/response.scss";
-@import "./pages/employee/form-fields.scss";
-@import "./pages/employee/scroll-table.scss";
-@import "./pages/employee/EmployeeLogin.scss";
-@import "./pages/employee/updateNumber.scss";
-@import "./pages/employee/oldMobileInbox.scss";
-@import "./pages/employee/dss.scss";
-@import "./pages/employee/iframe.scss";
-@import "./pages/employee/landing.scss";
-@import "./pages/employee/footer.scss";
-
-@import "./pages/citizen/payment/payment-type.scss";
-@import "./pages/citizen/container.scss";
-@import "./pages/citizen/HomePageWrapper.scss";
-@import "./pages/citizen/CitizenEngagementNotificationWrapper.scss";
-@import "./pages/citizen/Events.scss";
-@import "./pages/citizen/DocumentList.scss";
-@import "./pages/citizen/SurveyList.scss";
-@import "./pages/citizen/updatePropertyNumber.scss";
-@import "./pages/citizen/citizenDocument.scss";
-@import "./pages/employee/surveys.scss";
-
-@import "./pages/employee/faq.scss";
-@import "./pages/employee/dashboard.scss";
-
-@import "./pages/common/stepForm.scss";
-@import "./pages/common/form.scss";
-@import "./pages/swach/index.scss";
-@import "./pages/ws/index.scss";
-@import "./pages/common/requiredField.scss";
-@import "./pages/citizen/citizenNewLogin.scss";
-@import "./pages/common/searchIcon.scss";
-@import "./pages/common/sanctionFeeTable.scss";
-@import "./pages/citizen/loaderMessage.scss";
-@import "./pages/employee/disconnection.scss";
-@import "./pages/citizen/InboxCard.scss";
-@import "./pages/employee/header.scss";
-
-@import "./pages/common/pgrUICssfix.scss";
-@import "./pages/common/newApplicationTimeline.scss";
-@import "./components/newFooter.scss";
-@import "./pages/citizen/CitizenLogin.scss";
-@import "./components/NewAccordianCitizen.scss";
-@import "./modules/rentAndLease/index.scss";
-@import "./components/SurveyModal.scss";
-
-@import "./modules/adv/index.scss";
-@import "./modules/hrms/index.scss";
-@import "./modules/BPA/index.scss";
-@import "./pages/common/sitePhotoGraphs.scss";
-@import "./modules/TL/index.scss";
-@import "./components/newInbox.scss";
-
-.display-none {
-  display: none;
-}
-
-.primary-label-btn {
-  margin: 10px auto 0px !important;
-}
-.p-unset {
-  padding: unset !important;
-}
-
-.flex-one {
-  @apply flex-1;
-}
-
-.display-flex-gap-2 {
-  @apply flex gap-3;
-}
-.rm-mb {
-  margin-bottom: unset !important;
-}
-
-.w-fullwidth {
-  @apply w-full;
-}
-.stepper {
-  padding: 10px;
-}
-.margin-unset {
-  margin: unset !important;
-}
-
-.text-align-center {
-  @apply text-center;
-}
-.text-align-left {
-  @apply text-left;
-}
-.text-align-right {
-  @apply text-right;
-}
-.desktop-only {
-  @apply hidden;
-}
-
-@screen dt {
-  .desktop-only {
-    @apply block;
-  }
-}
-
-.mobile-only {
-  @apply block;
-}
-
-@screen dt {
-  .mobile-only {
-    @apply hidden;
-  }
-}
-
-.dark {
-  @apply text-text-primary;
-  width: auto !important;
-}
-
-.mrlg {
-  @apply mr-lg;
-}
-
-.mrsm {
-  @apply mr-sm;
-}
-
-.mbsm {
-  @apply mb-sm;
-}
-
-.home-link {
-  margin-left: 16px;
-  margin-bottom: 16px;
-
-  a {
-    color: #1d70b8;
-  }
-}
-
-.clear-search-label {
-  color: #2947a3;
-  cursor: pointer;
-}
-
-.search-submit-bar {
-  margin-top: 32;
-  margin-left: auto;
-}
-.ws-citizen-wrapper {
-  padding: 15px;
-}
-
-.application-details-link-button {
-  @apply flex justify-between items-center;
-
-  .download-button {
-    color: a82227;
-    margin-left: 8px;
-  }
-}
-
-.response-download-button {
-  @apply flex mb-sm;
-
-  .download-button {
-    color: #a82227;
-    margin-left: 8px;
-    white-space: nowrap;
-  }
-}
-
-.check-page-link-button {
-  color: #a82227 !important;
-}
-
-.pt-application-download-btn {
-  display: flex;
-  justify-content: flex-end;
-  margin: 0px 8px;
-}
-
-.application-table-container {
-  @apply mt-lg ml-lg flex-1;
-}
-
-.primary-label-btn {
-  @apply flex;
-  gap: 10px;
-
-  svg {
-    fill: #a82227;
-  }
-
-  color: #5a1166;
-
-  cursor: pointer;
-  font-weight: 500;
-  width: fit-content;
-}
-
-.primaryColor {
-  color: #0b0c0c !important;
-}
-
-@media (hover: hover) {
-  .primary-label-btn {
-    &:hover {
-      color: #000;
-
-      svg {
-        fill: #000;
-      }
-    }
-  }
-}
-
-.disabled {
-  @apply border-grey-dark text-grey-dark !important;
-  pointer-events: none !important;
-}
-
-.card-date-input {
-  @apply absolute top-0 left-0 w-3/4 bg-white pl-sm border border-input-border border-solid border-r-0;
-  outline: transparent solid 1px;
-  height: 2.5rem;
-}
-
-.h4 {
-  @apply mb-sm;
-}
-
-.react-time-picker {
-  width: 194px;
-  height: 2.5rem;
-  &__wrapper {
-    border: 2px solid #0b0c0c;
-    padding-left: 16px;
-  }
-  &__inputGroup__input {
-    @apply px-sm;
-    line-height: 2.5rem;
-    min-width: 16px;
-    &:focus {
-      outline: 2px solid black;
-    }
-  }
-}
-
-.border-none {
-  border: none;
-  justify-content: space-between;
-}
-
-.hide-number-spinner input[type="number"]::-webkit-inner-spin-button,
-.hide-number-spinner input[type="number"]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.hide-number-spinner input[type="number"] {
-  -moz-appearance: textfield; /* Firefox */
-}
-
-.static {
-  @apply flex flex-col;
-  min-height: 85vh;
-
-  &-wrapper {
-    flex: 1;
-    max-height: 75vh;
-    overflow: scroll;
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-}
-
-.bill-summary {
-  border: #e8e7e6 solid 1px;
-  @apply bg-grey-light w-full;
-
-  .bill-account-details {
-    @apply flex mb-md;
-    padding: 5px;
-
-    .label {
-      @apply w-1/2 font-bold;
-    }
-
-    .value {
-      @apply w-1/2 text-right;
-    }
-  }
-
-  .amount-details {
-    @apply flex mb-md items-center;
-    padding: 5px;
-
-    .label {
-      @apply w-1/2 font-bold;
-    }
-
-    .value {
-      @apply w-1/2 font-bold text-right;
-      font-size: 18px;
-    }
-  }
-}
-
-.bill-payment-amount {
-  @apply sticky bottom-0 bg-white;
-  padding-bottom: 32px;
-
-  .payment-amount-front {
-    @apply absolute z-10 w-10 flex justify-center items-center;
-    background-color: #efefef;
-    padding: 7px 12px;
-    color: #9a9a9a;
-  }
-}
-
-.text-indent-xl input {
-  text-indent: 40px;
-}
-
-.select-payment-type {
-  @apply flex justify-center font-bold items-center;
-  padding-top: 10px;
-  padding-bottom: 25px;
-
-  .value {
-    font-size: 20px;
-  }
-}
-
-.cheque-date {
-  @apply flex items-center mb-lg;
-  border: 2px solid #0b0c0c;
-  border-radius: 2px;
-
-  input {
-    @apply outline-none w-full;
-    border: 0px;
-    background: transparent;
-    text-indent: 5px;
-    padding: 6px 0px;
-  }
-
-  button {
-    @apply outline-none;
-    border: 0px;
-    background: transparent;
-    text-indent: 2px;
-  }
-}
-
-.w-half {
-  @apply w-1/2;
-}
-
-.ifsc-field {
-  @apply flex items-center mb-lg;
-  border: 2px solid #0b0c0c;
-  border-radius: 2px;
-
-  input {
-    @apply outline-none w-full;
-    border: 0px;
-    background: transparent;
-    text-indent: 5px;
-    padding: 6px 0px;
-  }
-  button {
-    @apply outline-none;
-    border: 0px;
-    background: transparent;
-    text-indent: 2px;
-  }
-}
-
-.text-input {
-  width: 100%;
-
-  input {
-    &:hover {
-      @apply border-2 border-solid border-primary-main;
-    }
-  }
-}
-
-.text-input-width {
-  max-width: 540px;
-}
-
-.text-mobile-input-width {
-  max-width: 540px;
-  width: 100%;
-}
-
-/*.employeeCard,
-.text-mobile-input-width {
-  max-width: 100%;
-}*/
-
-.custom-time-picker {
-  @apply w-full;
-  max-width: 200px;
-}
-
-.sla-cell {
-  @apply text-text-secondary;
-}
-
-.submit-bar-search {
-  margin-top: 32px;
-  margin-left: 16px;
-  max-width: 256px;
-}
-
-.clear-search-container {
-  @apply flex justify-between items-center;
-}
-
-.card-label-smaller {
-  margin-bottom: revert;
-}
-
-.card-label-APK {
-  @apply w-1/3;
-  margin-bottom: revert;
-  width: 100%;
-}
-
-.underline {
-  border-color: #e7e6e6;
-  @apply mb-sm;
-}
-
-.box-shadow-none {
-  box-shadow: none;
-}
-
-.component-in-front {
-  @apply flex justify-center items-center;
-}
-
-.subform-composer {
-  @apply flex;
-}
-
-.inbox-search-container {
-  .result {
-    @apply mt-lg;
-  }
-}
-
-.payment-form-text-input-correction {
-  width: 100% !important;
-}
-
-.edcr-citizen-inbox {
-  thead th:first-child {
-    min-width: 100px;
-  }
-}
-
-.error-boundary {
-  width: 100vw;
-  height: 100vh;
-  font-size: 16px;
-  font-family: sans-serif;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  position: absolute !important;
-  .error-container {
-    display: flex;
-    width: 400px;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    h1 {
-      font-size: 32px;
-      font-weight: bold;
-    }
-    button {
-      height: 40px;
-      width: 153px;
-      border-radius: 0px;
-      padding: 8px 24px;
-      color: white;
-      cursor: pointer;
-    }
-  }
-}
-.tl-citizen {
-  width: 100%;
-  padding: 10px;
-}
-
-.error-boundary summary,
-.error-boundary details {
-  width: 300px;
-  background-color: rgb(218, 100, 100);
-  margin: 5px;
-  border: 2px solid #222;
-  border-radius: 3px;
-  padding: 3px;
-}
-
-.full-width-card {
-  width: 92vw !important;
-}
-.full-employee-card-link {
-  width: 100% !important;
-  margin: 7px 0px;
-}
-.full-employee-card-height {
-  height: unset !important;
-}
-
-@media (min-width: 640px) {
-  .full-employee-card-height {
-    height: 196px !important;
-  }
-  .full-employee-card-link {
-    width: 30% !important;
-  }
-  .full-width-card {
-    @apply w-full !important;
-  }
-}
-.complaint-summary {
-  @media (min-width: 780px) {
-    flex: 1 0 auto;
-    margin-left: 1rem;
-    margin-top: 1rem;
-  }
-}
-
-@media (min-width: 780px) {
-  .citizen-form-wrapper {
-    width: calc(100% - 219px);
-    display: flex;
-    justify-content: center;
-    margin-top: 1rem;
-    padding-left: 16px;
-    padding-right: 16px;
-  }
-}
-
-/* Citizen Login Mobile Responsive Styles */
-@media only screen and (max-width: 768px) {
-  .citizen-form-wrapper {
-    width: 100% !important;
-    padding: 0 !important;
-    margin: 0 !important;
-  }
-
-  .citizen-form-wrapper .AppContainer {
-    width: 100% !important;
-    padding: 12px !important;
-    margin: 0 !important;
-  }
-
-  .citizen-form-wrapper .card {
-    width: 100% !important;
-    max-width: 100% !important;
-    margin: 0 !important;
-    padding: 16px !important;
-    border-radius: 8px !important;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
-  }
-
-  .citizen-form-wrapper .card-header {
-    font-size: 20px !important;
-    margin-bottom: 8px !important;
-  }
-
-  .citizen-form-wrapper .card-text {
-    font-size: 14px !important;
-    margin-bottom: 16px !important;
-  }
-
-  .citizen-form-wrapper .field-container {
-    flex-direction: row !important;
-    width: 100% !important;
-  }
-
-  .citizen-form-wrapper .citizen-card-input {
-    width: 100% !important;
-    font-size: 16px !important;
-    padding: 12px !important;
-    height: auto !important;
-    min-height: 44px !important;
-  }
-
-  .citizen-form-wrapper .citizen-card-input--front {
-    padding: 12px 8px !important;
-    font-size: 16px !important;
-    min-height: 44px !important;
-    display: flex !important;
-    align-items: center !important;
-    background-color: #f3f4f6 !important;
-    border: 1px solid #464646 !important;
-    border-right: none !important;
-  }
-
-  .citizen-form-wrapper .submit-bar {
-    width: 100% !important;
-    margin-top: 16px !important;
-  }
-
-  .citizen-form-wrapper .submit-bar button {
-    width: 100% !important;
-    padding: 14px !important;
-    font-size: 16px !important;
-    min-height: 48px !important;
-  }
-
-  .citizen-form-wrapper .back-btn {
-    margin-bottom: 12px !important;
-  }
-
-  .citizen-form-wrapper .form-field {
-    margin-bottom: 16px !important;
-  }
-
-  .citizen-form-wrapper .link-button,
-  .citizen-form-wrapper .link-btn {
-    font-size: 14px !important;
-    text-align: center !important;
-    display: block !important;
-    margin-top: 12px !important;
-  }
-}
-@media (min-width: 780px) {
-  .citizen-card-container {
-    padding-left: 15px;
-    padding-right: 15px;
-    margin-top: 1rem;
-  }
-}
-
-@media (min-width: 780px) {
-  .citizen-obps-wrapper,
-  .selection-card-wrapper,
-  .fsm-citizen-wrapper,
-  .pt-citizen,
-  .bill-citizen,
-  .bills-citizen-wrapper,
-  .payer-bills-citizen-wrapper,
-  .engagement-citizen-wrapper,
-  .citizen-all-services-wrapper,
-  .mcollect-citizen,
-  .ws-citizen-wrapper,
-  .tl-citizen {
-    width: 90%;
-    padding-left: 16px;
-    padding-right: 16px;
-    margin-top: 3rem;
-  }
-}
-@media only screen and (max-width: 768px) {
-  /* For mobile phones: */
-  .error-boundary {
-    height: 75vh;
-  }
-}
-.employee-app-wrapper {
-  min-height: calc(100vh - 8em);
-}
-
-.ws-custom-wrapper {
-  .submit {
-    display: flex !important;
-    flex-direction: row-reverse !important;
-    width: 100% !important;
-    align-items: center;
-    button {
-      width: 240px !important;
-    }
-    p {
-      width: unset;
-      margin-right: 1rem;
-    }
-  }
-}
-
-.ws-button {
-  border: 1px solid grey;
-  display: block;
-  background-color: grey;
-  height: 50%;
-  width: 80%;
-  text-align: "center";
-  margin-top: 6%;
-  color: "white";
-}
-.ws-search-button {
-  border: 1px solid black;
-  display: block;
-
-  height: 50%;
-  width: 80%;
-  text-align: "center";
-  margin-top: 6%;
-  color: "white";
-}
-.button {
-  color: "white";
-}
-.plumber-details-new-value-wrapper {
-  flex: 2 1 auto;
-}
-
-.connection-details-new-value-wrapper {
-  flex: 1 1 auto;
-}
-
-.connection-details-old-value-wrapper,
-.plumber-details-old-value-wrapper {
-  flex: 1 1 auto;
-
-  .old-value-null-wrapper {
-    visibility: hidden;
-    padding-bottom: 8px;
-    margin-bottom: 8px;
-  }
-  .row {
-    color: #b1b4b6;
-    font-weight: 700;
-    font-size: 16px;
-  }
-}
-
-.plumber-details-new-value-wrapper {
-  flex: 2 1 auto;
-}
-
-.connection-details-new-value-wrapper {
-  flex: 1 1 auto;
-}
-
-.connection-details-old-value-wrapper,
-.plumber-details-old-value-wrapper {
-  flex: 1 1 auto;
-  .old-value-null-wrapper {
-    visibility: hidden;
-    padding-bottom: 8px;
-    margin-bottom: 8px;
-  }
-  .row {
-    color: #b1b4b6;
-    font-weight: 700;
-    font-size: 16px;
-  }
-}
-
-.modal-header-ws {
-  padding: 1rem;
-  font-weight: 400;
-}
-.modal-body-ws {
-  padding: 1rem;
-  font-weight: 700;
-  color: #0b0c0c;
-  font-size: 24px;
-  margin-bottom: 1rem;
-}
-.privacy-icon {
-  cursor: pointer;
-}
-.privacy-icon:hover {
-  path {
-    fill: rgba(244, 119, 56, 1);
-  }
-}
-
-.employee-app-wrapper {
-  min-height: calc(100vh - 8em);
-}
-.submit-bar header {
-  line-height: 2rem !important;
-}
-.logo-removeBorderRadiusLogo svg {
-  width: 50px;
-  height: 60px;
-}
-
-.icon-banner-employee {
-  background-color: #d7aefc !important;
-}
-.icon-banner-employee svg {
-  background-color: #0d43a7 !important;
-  width: 40px;
-  height: 40px;
-}
-.inboxButton {
-  border: none;
-  color: #4c5656;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 14px;
-  margin: 4px 2px;
-  cursor: pointer;
-  height: fit-content;
-  border-radius: 5px;
-  font-family: sans-serif;
-  font-weight: 700;
-}
-.employee .inboxButton {
-  padding: 5px 15px;
-  background: #ba2b36;
-}
-.citizen .inboxButton {
-  padding: 15px;
-  font-size: 1.2rem;
-}
-
-/*.ndc_property_search .text-input {
-  width: 100%;
-  max-width: 300px;
-} */
-
-.action-bar-wrap {
-  display: flex;
-  justify-content: end;
-  gap: 10px;
-}
-
-.action-bar-wrap .submit-bar {
-  padding: 0 !important;
-  margin: 0 !important;
-}
-
-.ndc_card_labels {
-  width: 100%;
-}
-
-.downLoadButton {
-  color: "#A52A2A";
-  display: flex !important;
-  justify-content: center;
-  align-items: center;
-}
-
-.ndc_label {
-  padding-bottom: 20px;
-}
-.ndc-property-details-form {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-.ndc-action-bar {
-  display: flex;
-  justify-content: flex-end;
-  align-items: baseline;
-  gap: 20px;
-}
-.ndc-emp-app-overview {
-  margin-bottom: 30px;
-  background: #fafafa;
-  padding: 16px;
-  border-radius: 4px;
-}
-.ndc-property-detail-green {
-  color: green !important;
-}
-.ndc-acknowledgement-check {
-  margin-top: 40px;
-  margin-bottom: 20px;
-}
-
-.step-label {
-  font-size: 12px !important;
-}
-
-.modal-action .employeeCard {
-  margin-left: 0px !important;
-}
-
-.moduleLinkHomePage h1 {
-  padding-left: 20px;
-}
-
-@media screen and (max-width: 768px) {
-  .citizen .inboxButton {
-    font-size: 1rem;
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .action-bar-wrap {
-    padding: 10px 10px;
-    text-align: center;
-  }
-  .submit-bar {
-    font-size: 11px;
-  }
-}
-
-.options-card {
-  max-height: 350px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  background-color: #fff;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
-  padding: 4px 0;
-}
-
-/* ===== TimelineHOC CSS ===== */
-.timeline-hoc-container .checkpoint header,
-.timeline-hoc-container .checkpoint-done header {
-  flex: 1;
-  background: #ccffcc;
-  padding: 4px 8px;
-}
-
-.timeline-hoc-container .checkpoint-connect-wrap {
-  padding: 0px;
-}
-
-.timeline-card {
-  width: 100%;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  padding: clamp(12px, 3vw, 20px);
-  margin: 10px 0;
-  background: #ccffcc;
-  font-family: "verdana";
-}
-
-.timeline-header {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 16px;
-}
-
-.timeline-header-item {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 6px;
-  white-space: nowrap;
-}
-
-.timeline-label {
-  color: #0d43a7 !important;
-  font-size: 10px;
-  font-weight: 600;
-}
-
-.timeline-value {
-  color: #0d43a7 !important;
-  font-weight: 800;
-  font-size: 12px;
-}
-
-.timeline-note {
-  margin: 10px 0;
-}
-
-.timeline-note .note-box {
-  border: 1px solid #ccc;
-  border-radius: 6px;
-  padding: 10px;
-  min-height: 40px;
-  word-break: break-word;
-  font-size: 10px;
-  font-weight: 800;
-  background: #ccffcc;
-}
-
-.timeline-docs {
-  margin-top: 10px;
-}
-
-@media (max-width: 768px) {
-  .timeline-header {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .timeline-header-item {
-    width: 100%;
-  }
-
-  .timeline-card {
-    padding: 12px;
-  }
-}
-
-.engagement-citizen-wrapper {
-  width: 100%;
-  overflow-x: scroll;
-  overflow-y: hidden;
-}
-
-@media screen and (max-width: 768px) {
-  .engagement-citizen-wrapper {
-    overflow: hidden;
-  }
-}
-
-/* Application Timeline Styles */
-.timeline-header-wrapper {
-  display: flex;
-  align-items: center;
-  margin: 20px 8px;
-  gap: 16px;
-}
-
-.download-button {
-  cursor: pointer;
-  font-size: 16px;
-  font-weight: 500;
-  padding: 5px;
-  color: #0d43a7;
-  border: 1px solid #0d43a7;
-  border-radius: 4px;
-  transition: all 0.2s ease-in-out;
-  display: inline-block;
-
-  &:hover {
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  }
-}
-
-.timeline-docs-wrapper {
-  margin-top: 10px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.timeline-doc-link {
-  min-width: 100px;
-}
-
-.timeline-doc-icon {
-  background: #f6f6f6;
-  padding: 8px;
-}
-
-.timeline-subheader {
-  font-size: 22px !important;
-  font-weight: 500 !important;
-}
-.user-profile {
-  margin-top: 3rem;
-  width: 70%;
-}
-
-.user-profile-section-wrapper {
-  margin: 8px;
-  position: relative;
-
-  &.employee {
-    margin: 24px;
-  }
-}
-
-.user-profile-main-container {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  margin: 8px;
-  gap: 0;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-  background: white;
-  border-radius: 12px;
-  max-width: 1200px;
-  overflow: hidden;
-
-  @media (min-width: 768px) {
-    margin: 16px;
-    gap: 24px;
-    max-width: none;
-  }
-}
-
-.user-profile-image-section {
-  position: relative;
-  display: flex;
-  flex: 1;
-  justify-content: center;
-  align-items: center;
-  max-width: 100%;
-  min-height: 280px;
-  border-radius: 12px 12px 0 0;
-  background: linear-gradient(135deg, #4f65d8, #00157a);
-  padding: 32px 16px;
-
-  @media (min-width: 768px) {
-    flex: 0;
-    border-radius: 0;
-  }
-
-  &.employee {
-    border-radius: 0;
-  }
-}
-
-.user-profile-image-wrapper {
-  height: 160px;
-  width: 160px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-
-.user-profile-image {
-  height: 100%;
-  width: 100%;
-  border-radius: 50%;
-  border: 6px solid white;
-  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
-  object-fit: cover;
-}
-
-.user-profile-camera-button {
-  position: absolute;
-  bottom: -20px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  border: 4px solid white;
-  border-radius: 50%;
-  width: 56px;
-  height: 56px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  color: white;
-
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 12px 28px rgba(102, 126, 234, 0.5);
-  }
-
-  svg {
-    width: 24px;
-    height: 24px;
-  }
-}
-
-.user-profile-form-section {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  width: 100%;
-  background: #fafbfc;
-  padding: 32px;
-  gap: 24px;
-}
-
-.user-profile-form-grid {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 24px;
-
-  @media (min-width: 768px) {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-.user-profile-field-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.user-profile-label {
-  font-size: 14px;
-  font-weight: 600;
-  color: #1a202c;
-  margin-bottom: 4px;
-}
-
-.user-profile-input {
-  width: 100%;
-}
-
-.user-profile-error-text {
-  margin: 4px 0 0 0;
-  padding: 0;
-  color: #d32f2f;
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.user-profile-div-margin {
-  margin-top: 12px;
-  padding: 16px;
-  background-color: #e8f1ff;
-  border-radius: 8px;
-  border-left: 4px solid #667eea;
-}
-
-.user-profile-change-password-link {
-  color: #667eea;
-  cursor: pointer;
-  position: relative;
-  text-decoration: underline;
-  font-weight: 600;
-  font-size: 14px;
-  transition: color 0.2s ease;
-
-  &:hover {
-    color: #764ba2;
-  }
-}
-
-.user-profile-save-section-employee {
-  height: 88px;
-  background-color: #ffffff;
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 0;
-  align-items: center;
-  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
-  padding: 16px 32px;
-  width: 100%;
-
-  @media (max-width: 767px) {
-    justify-content: center;
-  }
-}
-
-.user-profile-toast-style {
-  max-width: 670px;
-}
-
-.user-profile-button-padding {
-  padding-bottom: 12px;
-  padding-top: 12px;
-}
-
-.user-profile-label-field-pair-flex {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.user-profile-label-style-employee {
-  font-size: 14px;
-  font-weight: 600;
-  color: #1a202c;
-}
-
-.user-profile-full-width {
-  width: 100%;
-}
-
-img,
-video {
-  max-width: 100%;
-  height: auto;
-}
-
-audio,
-canvas,
-embed,
-iframe,
-img,
-object,
-svg,
-video {
-  display: block;
-  vertical-align: middle;
-}
-
-/* Global Responsive Font Sizes for Mobile */
-@media only screen and (max-width: 768px) {
-  .card-header,
-  .employee-upyog-title,
-  .header-title,
-  .heading,
-  .landing-card-header,
-  .page-header,
-  .section-header,
-  .survey-card-header,
-  h1,
-  h2,
-  h3,
-  header {
-    font-size: 14px !important;
-
-    .complaint-input-container {
-      display: flex;
-      flex-direction: column;
-    }
-  }
-
-  /* Headers with ~28px should become 16px on mobile */
-  h4,
-  .card-sub-header,
-  .sub-header {
-    font-size: 16px !important;
-  }
-
-  /* Headers with ~24px should become 15px on mobile */
-  h5,
-  h6,
-  .card-section-header {
-    font-size: 15px !important;
-  }
-
-  /* Card text and body text */
-  .card-text,
-  .card-caption,
-  p {
-    font-size: 14px !important;
-  }
-}
-.link-button-margin {
-  margin-top: 10px;
-}
-.tl-add-action-button {
-  display: inline-block;
-  padding: 8px 16px;
-  background: linear-gradient(135deg, #2563eb, #1e40af);
-  color: #ffffff !important;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 16px;
-  font-weight: 600;
-  text-decoration: none !important;
-  margin-top: 16px;
-  margin-bottom: 8px;
-  border: none;
-  transition: background-color 0.2s ease, transform 0.1s ease;
-  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
-}
-
-.svgPrimaryH16px {
-  display: none !important;
-}
-/* Date input centering for mobile view */
-@media (max-width: 767px) {
-  input[type="date"] {
-    text-align: center !important;
-  }
-
-  .form-field input[type="date"] {
-    text-align: center !important;
-  }
-
-  .citizen-card-input[type="date"] {
-    text-align: center !important;
-  }
-
-  .card input[type="date"] {
-    text-align: center !important;
-  }
-}
-
-input[type="date"] {
-  -webkit-appearance: none !important;
-  appearance: none !important;
-}
-.ndc-pay-due-button {
-  color: red;
-  width: 100%;
-  max-width: 70px;
-}
-.ndc-no-due-button {
-  color: green;
-  width: 100%;
-  max-width: 70px;
-}
-.ndc-doc-view-comp {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-}
-.ndc-label-field-pair {
-  margin-top: 40px;
-}
-.ndc-emp-step-form {
-  font-size: 28px;
-  font-weight: 400;
-  color: #1c1d1f;
-}
-.chb-loader-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.chb-page-loader-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: rgba(255, 255, 255, 0.6);
-  backdrop-filter: blur(4px);
-  z-index: 9999;
-}
-
-.chb-module-loader-container {
-  min-height: 100px;
-  width: 100%;
-  position: relative;
-}
-
-.chb-spinner {
-  width: 64px;
-  height: 64px;
-  border: 8px solid #1976d2;
-  border-top: 8px solid transparent;
-  border-radius: 50%;
-  animation: spin 1.2s linear infinite;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.chb-margin-top-20 {
-  margin-top: 20px;
-}
-
-.chb-margin-bottom-0 {
-  margin-bottom: 0;
-}
-
-.chb-margin-bottom-20 {
-  margin-bottom: 20px;
-}
-
-.chb-error-text {
-  color: red;
-  margin-top: 4px;
-  margin-bottom: 0;
-}
-
-.chb-slot-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-  gap: 16px;
-  width: 100%;
-}
-
-.chb-slot-card {
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  padding: 12px;
-  background-color: #e6ffed;
-  cursor: pointer;
-  opacity: 1;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.chb-slot-card--unavailable {
-  background-color: #ffe6e6;
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.chb-slot-status {
-  color: green;
-  font-weight: bold;
-}
-
-.chb-slot-status--unavailable {
-  color: red;
-}
-
-.chb-slot-text {
-  margin-left: 10px;
-}
-
-.chb-form-field-margin {
-  margin-bottom: 0;
-}
-
-.chb-dropdown-menu {
-  position: absolute;
-  background-color: white;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  padding: 8px;
-  z-index: 1000;
-}
-
-.chb-menu-item {
-  display: block;
-  padding: 8px;
-  text-decoration: none;
-  color: black;
-  cursor: pointer;
-}
-
-.chb-documents-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-}
-
-.chb-table-cell-summary {
-  min-width: 100px;
-  padding: 8px;
-  font-size: clamp(0.9rem, 2vw, 1.1rem);
-  padding-left: 10px;
-  word-break: break-word;
-}
-
-.chb-table-cell-details {
-  min-width: 150px;
-  padding: 10px;
-  font-size: 16px;
-  padding-left: 20px;
-}
-
-.chb-documents-flex {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  margin-top: 16px;
-}
-.chb-banner-header {
-  font-size: clamp(20px, 4vw, 32px);
-  word-break: break-word;
-}
-.chb-action-bar-response {
-  display: flex;
-  justify-content: flex-end;
-  align-items: baseline;
-  gap: 20px;
-}
-
-.gcButton {
-  margin-top: 15px;
-}
-
-.tableClass {
-  margin-top: 60px;
-}
-
-/* CLU Fee Table Wrapper */
-.custom-fee-table-wrapper {
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  width: 100%;
-  margin-bottom: 16px;
-  display: block;
-}
-
-/* CLU Main Fee Table */
-.custom-fee-table {
-  width: 100%;
-  table-layout: auto;
-  min-width: 600px;
-  border-collapse: collapse;
-}
-
-.custom-fee-table-header {
-  padding: 14px 12px;
-  font-size: 12px;
-  white-space: nowrap;
-  background: linear-gradient(135deg, #1e3a8a, #2563eb);
-  color: white;
-  font-weight: 600;
-  text-align: left;
-}
-
-.custom-fee-table-cell {
-  padding: 14px 12px;
-  font-size: 16px;
-}
-@media (max-width: 768px) {
-  .custom-fee-table-cell {
-    font-size: 13px;
-    padding: 10px 8px;
-  }
-}
-
-.custom-fee-table-cell-taxhead {
-  min-width: 150px;
-}
-
-.custom-fee-table-cell-amount {
-  padding: 14px 12px;
-}
-
-.custom-fee-table-cell-remark {
-  padding: 14px 12px;
-}
-
-.custom-fee-history-section {
-  margin-top: 16px;
-}
-
-.custom-fee-history-toggle {
-  cursor: pointer;
-}
-
-.custom-fee-history-table-wrapper {
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  margin-top: 8px;
-  display: block;
-  width: 100%;
-}
-
-/* CLU Fee History Table */
-.custom-fee-history-table {
-  width: 100%;
-  table-layout: auto;
-  min-width: 500px;
-  border-collapse: collapse;
-}
-
-.custom-fee-history-header {
-  padding: 12px 8px;
-  font-size: 14px;
-  white-space: nowrap;
-  min-width: 120px;
-  background-color: #0d43a7;
-  color: white;
-  font-weight: 600;
-  text-align: left;
-}
-
-.custom-fee-history-cell {
-  padding: 12px 8px;
-  min-width: 120px;
-  vertical-align: top;
-}
-
-.custom-fee-history-content {
-  font-size: 14px;
-}
-
-.custom-fee-history-row {
-  margin-bottom: 8px;
-}
-
-.custom-fee-history-label {
-  margin-bottom: 8px;
-}
-
-.custom-fee-history-label-value {
-  word-break: break-word;
-}
-
-.custom-fee-history-label-bold {
-  color: #333;
-  font-weight: 700;
-  font-size: 15px;
-  margin-right: 4px;
-}
-
-.custom-fee-table-input {
-  width: 100%;
-  border-radius: 4px;
-  font-size: 15px;
-  box-sizing: border-box;
-}
-
-/* Textarea Styles for CLU Fee Table */
-.custom-fee-table-textarea {
-  min-height: 60px;
-  max-height: 240px;
-  word-wrap: break-word;
-  white-space: pre-wrap;
-  resize: vertical;
-  padding: 10px 12px;
-  border: 1px solid #cccccc;
-  border-radius: 4px;
-  font-size: 15px;
-  line-height: 1.5;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
-
-.custom-fee-table-textarea:focus {
-  outline: none;
-  border-color: #1e3a8a;
-  box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.1);
-}
-
-.custom-fee-table-textarea:disabled {
-  background-color: #f5f5f5;
-  color: #999;
-  cursor: not-allowed;
-}
-
-.custom-fee-remark-display {
-  padding: 10px 12px;
-  border: 1px solid #e0e0e0;
-  border-radius: 4px;
-  background-color: #f9f9f9;
-  font-size: 15px;
-  line-height: 1.5;
-  word-wrap: break-word;
-  white-space: pre-wrap;
-  max-height: 240px;
-  overflow-y: auto;
-  min-height: 40px;
-  display: flex;
-  align-items: flex-start;
-  color: #333;
-}
-
-.custom-fee-mobile-cards {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 0;
-}
-
-.custom-fee-card {
-  background: white;
-  border: 1px solid #e0e0e0;
-  border-radius: 8px;
-  padding: 16px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-  transition: box-shadow 0.2s ease;
-
-  &:hover {
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
-  }
-}
-
-.custom-fee-card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-  padding-bottom: 12px;
-  border-bottom: 2px solid #f0f0f0;
-}
-
-.custom-fee-card-type {
-  font-weight: 700;
-  font-size: 15px;
-  color: #1a1a1a;
-  text-transform: capitalize;
-  letter-spacing: 0.3px;
-}
-
-.custom-fee-card-original-amount {
-  font-size: 15px;
-  color: #888;
-  font-weight: 500;
-}
-
-.custom-fee-card-content {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-}
-
-.custom-fee-card-row {
-  display: flex;
-  gap: 12px;
-}
-
-.custom-fee-card-field {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  flex: 1;
-}
-
-.custom-fee-card-label {
-  font-weight: 600;
-  font-size: 12px;
-  color: #000000;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.custom-fee-card-value {
-  font-size: 13px;
-  color: #333;
-  padding: 8px;
-  background: #f9f9f9;
-  border-radius: 4px;
-  min-height: 32px;
-  display: flex;
-  align-items: center;
-  border: 1px solid #e8e8e8;
-}
-
-/* Total Row Special Styling */
-.custom-fee-card-total-row {
-  background: linear-gradient(135deg, #f5f7fa 0%, #f0f3f8 100%);
-  border: 2px solid #d0d8e8;
-  margin-top: 8px;
-
-  .custom-fee-card-header {
-    display: none;
-  }
-}
-
-.custom-fee-card-total-content {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  align-items: center;
-  text-align: center;
-  padding: 12px 0;
-}
-
-.custom-fee-card-total-label {
-  font-size: 12px;
-  color: #1f4ed4;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.custom-fee-card-total-value {
-  font-size: 24px;
-  font-weight: 800;
-  color: #1a1a1a;
-  letter-spacing: 0.2px;
-}
-
-.custom-fee-card-total-words {
-  font-size: 11px;
-  color: #1f4ed4;
-  font-style: italic;
-  margin-top: 4px;
-  line-height: 1.4;
-}
-
-/* Mobile History Section */
-.custom-fee-mobile-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.custom-fee-mobile-history {
-  background: white;
-  border: 1px solid #e0e0e0;
-  overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-  margin-top: 20px;
-}
-
-.custom-fee-history-toggle-mobile {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px;
-  cursor: pointer;
-  background: linear-gradient(135deg, #f5f7fa 0%, #f0f3f8 100%);
-  border-bottom: 1px solid #e0e0e0;
-  transition: all 0.2s ease;
-
-  &:active {
-    background: linear-gradient(135deg, #f0f3f8 0%, #e8ecfa 100%);
-  }
-}
-
-.custom-fee-history-title {
-  font-weight: 700;
-  font-size: 14px;
-  color: #1a1a1a;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.custom-fee-history-icon {
-  font-size: 12px;
-  color: #666;
-  font-weight: 600;
-}
-
-.custom-fee-history-cards {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.custom-fee-history-card {
-  background: #f9f9f9;
-  border: 1px solid #e8e8e8;
-  border-radius: 6px;
-  overflow: hidden;
-}
-
-.custom-fee-history-card-header {
-  background: #0d43a7;
-  padding: 12px 16px;
-  font-weight: 600;
-  font-size: 15px;
-  color: white;
-  border-bottom: 1px solid #0d43a7;
-  text-transform: uppercase;
-  letter-spacing: 0.3px;
-}
-
-.custom-fee-history-card-content {
-  padding: 12px 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.custom-fee-history-entry {
-  padding: 8px 0;
-  border-bottom: 1px solid #e8e8e8;
-
-  &:last-child {
-    border-bottom: none;
-  }
-}
-
-.custom-fee-history-item {
-  font-size: 14px;
-  color: #555;
-  line-height: 1.5;
-  word-break: break-word;
-}
-
-.custom-fee-history-label-bold {
-  color: #333;
-  font-weight: 700;
-  font-size: 15px;
-  margin-right: 4px;
-}
-.custom-fix-fee-history-wrapper {
-  margin-top: 16px;
-}
-
-.custom-fix-fee-history-toggle {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  padding: 12px 0;
-  border-bottom: 1px solid #ddd;
-}
-
-.custom-fix-fee-history-toggle-text {
-  font-weight: bold;
-  font-size: 16px;
-  flex: 1;
-}
-
-.custom-fix-fee-history-toggle-icon {
-  font-size: 18px;
-  font-weight: bold;
-}
-
-.custom-fix-fee-history-table-container {
-  overflow-x: auto;
-  margin-top: 16px;
-}
-
-.custom-fix-fee-history-table {
-  width: 100%;
-  border-collapse: collapse;
-  min-width: 600px;
-}
-
-.custom-fix-fee-history-table-header {
-  padding: 8px;
-  border: 1px solid #ddd;
-  font-weight: bold;
-  background-color: #1f3a9f;
-  color: #fff;
-  min-width: 140px;
-}
-
-.custom-fix-fee-history-table-header-fee {
-  padding: 8px;
-  border: 1px solid #ddd;
-  font-weight: bold;
-  background-color: #1f3a9f;
-  color: #fff;
-  min-width: 150px;
-}
-
-.custom-fix-fee-history-table-cell-label {
-  padding: 8px;
-  border: 1px solid #ddd;
-  font-weight: bold;
-  background-color: #f9f9f9;
-}
-
-.custom-fix-fee-history-table-cell-value {
-  padding: 8px;
-  border: 1px solid #ddd;
-}
-
-.custom-fix-fee-history-table-cell-separator {
-  padding: 8px;
-  border: 1px solid #ddd;
-  font-weight: bold;
-  background-color: #f9f9f9;
-  border-bottom: 3px solid #999999;
-}
-
-.custom-fix-fee-history-table-cell-separator-value {
-  padding: 8px;
-  border: 1px solid #ddd;
-  border-bottom: 3px solid #999999;
-}
-
-.custom-fix-fee-history-table-cell-separator-last {
-  padding: 8px;
-  border: 1px solid #ddd;
-  font-weight: bold;
-  background-color: #f9f9f9;
-  border-bottom: none;
-}
-
-.custom-fix-fee-history-table-cell-separator-value-last {
-  padding: 8px;
-  border: 1px solid #ddd;
-  border-bottom: none;
-}
-
-/* NOC Document Checklist Table Wrapper */
-.checklist-document-table-wrapper {
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  width: 100%;
-  display: block;
-}
-
-/* NOC Document Table */
-.checklist-document-table {
-  width: 100%;
-  table-layout: auto;
-  min-width: 500px;
-  border-collapse: collapse;
-}
-
-/* NOC Document Checklist Table Styles */
-.checklist-table-header {
-  padding: 14px 12px;
-  font-size: 12px;
-  white-space: nowrap;
-}
-
-.checklist-table-header-srno {
-  width: 60px;
-  text-align: center;
-}
-
-.checklist-table-header-doc-name {
-  min-width: 150px;
-}
-
-.checklist-table-header-doc-file {
-  min-width: 100px;
-}
-
-.checklist-table-header-remark {
-  min-width: 150px;
-}
-
-.checklist-table-cell {
-  padding: 14px 12px;
-}
-
-.checklist-table-cell-srno {
-  width: 60px;
-  text-align: center;
-}
-
-.checklist-table-cell-doc-name {
-  font-size: 16px;
-  min-width: 150px;
-  max-width: 340px;
-}
-
-.checklist-table-cell-file {
-  min-width: 100px;
-}
-
-.checklist-table-cell-remark {
-  min-width: 150px;
-}
-
-.checklist-table-input {
-  width: 100%;
-  padding: 8px;
-  border-radius: 4px;
-  font-size: 13px;
-  box-sizing: border-box;
-}
-
-/* Mobile Card View for Document Checklist */
-.checklist-mobile-cards {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 0;
-}
-
-.checklist-mobile-card {
-  border-bottom: 1px solid #e0e0e0;
-  padding: 12px 0;
-}
-
-.checklist-card-header {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 8px;
-  align-items: center;
-  margin-left: 10px;
-}
-
-.checklist-card-sr-no {
-  font-weight: 600;
-  font-size: 14px;
-  color: #333;
-  min-width: 20px;
-}
-
-.checklist-card-doc-name {
-  font-weight: 600;
-  font-size: 13px;
-  color: #333;
-  flex: 1;
-}
-
-.checklist-card-content {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-left: 28px;
-}
-
-.checklist-card-row {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.checklist-card-label {
-  font-weight: 500;
-  font-size: 11px;
-  color: #666;
-  text-transform: uppercase;
-  letter-spacing: 0.3px;
-}
-
-.checklist-card-remark {
-  font-size: 13px;
-  line-height: 1.4;
-  word-wrap: break-word;
-  white-space: pre-wrap;
-  color: #333;
-}
-
-/* Textarea Styles for CLU Document Checklist */
-.checklist-table-textarea {
-  min-height: 60px;
-  max-height: 240px;
-  word-wrap: break-word;
-  white-space: pre-wrap;
-  resize: vertical;
-  padding: 14px 16px;
-  border: 1px solid #cccccc;
-  border-radius: 4px;
-  font-size: 15px;
-  line-height: 1.5;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-  width: 100%;
-  box-sizing: border-box;
-  font-family: inherit;
-  text-align: justify;
-}
-
-.checklist-table-textarea:focus {
-  outline: none;
-  border-color: #1e3a8a;
-  box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.1);
-}
-
-.checklist-table-textarea:disabled {
-  background-color: #f5f5f5;
-  color: #999;
-  cursor: not-allowed;
-  border-color: #e1e8f0;
-}
-
-@media (max-width: 1024px) {
-  .checklist-table-textarea {
-    padding: 12px 14px;
-    font-size: 13px;
-  }
-}
-
-@media (max-width: 768px) {
-  .checklist-table-textarea {
-    padding: 10px 12px;
-    font-size: 12px;
-    min-height: 50px;
-  }
-}
-
-.checklist-remark-display {
-  padding: 14px 16px;
-  font-size: 15px;
-  line-height: 1.5;
-  word-wrap: break-word;
-  white-space: pre-wrap;
-  color: #000000;
-  text-align: justify;
-  font-weight: 600;
-}
-
-@media (max-width: 1024px) {
-  .checklist-remark-display {
-    padding: 12px 14px;
-    font-size: 15px;
-  }
-}
-
-@media (max-width: 768px) {
-  .checklist-remark-display {
-    padding: 10px 12px;
-    font-size: 14px;
-  }
-}
-
-@media (min-width: 1024px) {
-  .data-card {
-    .employee-card-sub-heade {
-      margin-bottom: 40px;
-      font-size: 18px;
-      font-weight: 700;
-      color: #1e293b;
-      text-align: left;
-      text-transform: uppercase;
-      letter-spacing: 0.4px;
-    }
-  }
-}
-.language-plugin {
-  position: fixed;
-  top: 16px;
-  right: 20px;
-  z-index: 99999;
-  background: linear-gradient(135deg, rgb(37, 99, 235), rgb(124, 58, 237));
-  padding: 6px 10px;
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
-  display: flex;
-  align-items: center;
-}
-.language-plugin svg path {
-  fill: #fff;
-}
-.language-plugin:hover {
-  transform: translateY(-3px) scale(1.03);
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25), 0 0 20px rgba(59, 130, 246, 0.5), 0 0 35px rgba(14, 165, 233, 0.4);
-}
-.language-plugin-landing {
-  position: fixed;
-  top: 16px;
-  right: 20px;
-  z-index: 99999;
-  background: #fff;
-  padding: 6px 10px;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-  transition: all 0.3s ease;
-}
-.language-plugin-landing:hover {
-  transform: translateY(-3px) scale(1.03);
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25), 0 0 20px rgba(59, 130, 246, 0.5), 0 0 35px rgba(14, 165, 233, 0.4);
-}
-.margin-right-50 {
-  margin-right: 50px;
-}
-
-.surveyCardSection {
-  background: white;
-  display: block;
-  padding: 15px;
-  justify-self: center;
-  width: 50%;
-  @media (max-width: 768px) {
-    width: 100%;
-  }
-}
-.hrms-text-transform {
-  text-transform: none !important;
-}
-
-.noc-popupStyles {
-  width: unset;
-  min-width: 360px;
-  max-width: 600px;
-  padding: 20px;
-}
-
-.engagementForm {
-  width: 70%;
-  @media (max-width: 768px) {
-    width: 100%;
-  }
-}
-.hrms-text-transform {
-  text-transform: none !important;
-}
+/*@import 'normalize.css';*/
+
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
+
+@import "tailwindcss/base";
+
+@import "tailwindcss/components";
+
+@import "tailwindcss/utilities";
+
+@import "react-date-range/dist/styles.css";
+@import "react-date-range/dist/theme/default.css";
+
+@import "./components/loader.scss";
+
+@import "./components/body.scss";
+@import "./components/navbar.scss";
+@import "./components/card.scss";
+@import "./components/buttons.scss";
+@import "./components/radiobtn.scss";
+@import "./components/selectdropdown.scss";
+@import "./components/textfields.scss";
+@import "./components/bannercomponents.scss";
+@import "./components/datewrap.scss";
+@import "./components/datatable.scss";
+@import "./components/checkpoint.scss";
+@import "./components/checkbox.scss";
+@import "./components/inputotp.scss";
+@import "./components/map.scss";
+@import "./pages/employee/tooltip.scss";
+@import "./components/menu.scss";
+@import "./components/submiterrors.scss";
+@import "./components/ratingstar.scss";
+@import "./components/keynote.scss";
+@import "./components/statushighlight.scss";
+@import "./components/imageviewer.scss";
+@import "./components/actionbar.scss";
+@import "./components/table.scss";
+@import "./components/popup.scss";
+@import "./components/uploadcomponents.scss";
+@import "./components/toast.scss";
+@import "./components/detailscontainer.scss";
+@import "./components/telephone.scss";
+@import "./components/grey.scss";
+@import "./components/actionLink.scss";
+@import "./components/sectionalDropdown.scss";
+@import "./components/detailscard.scss";
+@import "./components/searchAction.scss";
+@import "./components/tag.scss";
+@import "./components/topbar.scss";
+@import "./components/languageSelector.scss";
+@import "./components/custombtn.scss";
+@import "./components/citizenInfoLabel.scss";
+@import "./components/roundedLabel.scss";
+@import "./components/changeLanguage.scss";
+@import "./components//metricsTable.scss";
+@import "./components/filters.scss";
+@import "./components//charts.scss";
+@import "./components/summary.scss";
+@import "./components/multiLink.scss";
+@import "./components/info-banner.scss";
+@import "./components/multiSelectDropdown.scss";
+@import "./components/EllipsisMenu.scss";
+@import "./components/CitizenHomeCard.scss";
+@import "./components/PropertySearchForm.scss";
+@import "./components/SearchForm.scss";
+@import "./components/cardHeaderWithOptions.scss";
+@import "./components/TimeLine.scss";
+@import "./components/PageBasedInput.scss";
+@import "./components/StandaloneSearchBar.scss";
+@import "./components/CardBasedOptions.scss";
+@import "./components/WhatsNewCard.scss";
+@import "./components/SearchOnRadioButton.scss";
+@import "./components/EventCalendarView.scss";
+@import "./components/OnGroundEventCard.scss";
+@import "./components/PopupHeadingLabel.scss";
+@import "./components/staticSideBar.scss";
+@import "./components/hoc/index.scss";
+@import "./components/FAQ.scss";
+@import "./components//howItWorks.scss";
+@import "./components/staticDynamicMessages.scss";
+@import "./components/toggleSwitch.scss";
+@import "./components/plusMinus.scss";
+@import "./components/documentSection.scss";
+
+@import "./pages/employee/index.scss";
+@import "./pages/employee/cardfix.scss";
+@import "./pages/employee/popupmodule.scss";
+@import "./pages/employee/container.scss";
+@import "./pages/employee/inbox.scss";
+@import "./pages/employee/response.scss";
+@import "./pages/employee/form-fields.scss";
+@import "./pages/employee/scroll-table.scss";
+@import "./pages/employee/EmployeeLogin.scss";
+@import "./pages/employee/updateNumber.scss";
+@import "./pages/employee/oldMobileInbox.scss";
+@import "./pages/employee/dss.scss";
+@import "./pages/employee/iframe.scss";
+@import "./pages/employee/landing.scss";
+@import "./pages/employee/footer.scss";
+
+@import "./pages/citizen/payment/payment-type.scss";
+@import "./pages/citizen/container.scss";
+@import "./pages/citizen/HomePageWrapper.scss";
+@import "./pages/citizen/CitizenEngagementNotificationWrapper.scss";
+@import "./pages/citizen/Events.scss";
+@import "./pages/citizen/DocumentList.scss";
+@import "./pages/citizen/SurveyList.scss";
+@import "./pages/citizen/updatePropertyNumber.scss";
+@import "./pages/citizen/citizenDocument.scss";
+@import "./pages/employee/surveys.scss";
+
+@import "./pages/employee/faq.scss";
+@import "./pages/employee/dashboard.scss";
+
+@import "./pages/common/stepForm.scss";
+@import "./pages/common/form.scss";
+@import "./pages/swach/index.scss";
+@import "./pages/ws/index.scss";
+@import "./pages/common/requiredField.scss";
+@import "./pages/citizen/citizenNewLogin.scss";
+@import "./pages/common/searchIcon.scss";
+@import "./pages/common/sanctionFeeTable.scss";
+@import "./pages/citizen/loaderMessage.scss";
+@import "./pages/employee/disconnection.scss";
+@import "./pages/citizen/InboxCard.scss";
+@import "./pages/employee/header.scss";
+
+@import "./pages/common/pgrUICssfix.scss";
+@import "./pages/common/newApplicationTimeline.scss";
+@import "./components/newFooter.scss";
+@import "./pages/citizen/CitizenLogin.scss";
+@import "./components/NewAccordianCitizen.scss";
+@import "./modules/rentAndLease/index.scss";
+@import "./components/SurveyModal.scss";
+
+@import "./modules/adv/index.scss";
+@import "./modules/hrms/index.scss";
+@import "./modules/BPA/index.scss";
+@import "./pages/common/sitePhotoGraphs.scss";
+@import "./modules/TL/index.scss";
+@import "./components/newInbox.scss";
+
+.display-none {
+  display: none;
+}
+
+.primary-label-btn {
+  margin: 10px auto 0px !important;
+}
+.p-unset {
+  padding: unset !important;
+}
+
+.flex-one {
+  @apply flex-1;
+}
+
+.display-flex-gap-2 {
+  @apply flex gap-3;
+}
+.rm-mb {
+  margin-bottom: unset !important;
+}
+
+.w-fullwidth {
+  @apply w-full;
+}
+.stepper {
+  padding: 10px;
+}
+.margin-unset {
+  margin: unset !important;
+}
+
+.text-align-center {
+  @apply text-center;
+}
+.text-align-left {
+  @apply text-left;
+}
+.text-align-right {
+  @apply text-right;
+}
+.desktop-only {
+  @apply hidden;
+}
+
+@screen dt {
+  .desktop-only {
+    @apply block;
+  }
+}
+
+.mobile-only {
+  @apply block;
+}
+
+@screen dt {
+  .mobile-only {
+    @apply hidden;
+  }
+}
+
+.dark {
+  @apply text-text-primary;
+  width: auto !important;
+}
+
+.mrlg {
+  @apply mr-lg;
+}
+
+.mrsm {
+  @apply mr-sm;
+}
+
+.mbsm {
+  @apply mb-sm;
+}
+
+.home-link {
+  margin-left: 16px;
+  margin-bottom: 16px;
+
+  a {
+    color: #1d70b8;
+  }
+}
+
+.clear-search-label {
+  color: #2947a3;
+  cursor: pointer;
+}
+
+.search-submit-bar {
+  margin-top: 32;
+  margin-left: auto;
+}
+.ws-citizen-wrapper {
+  padding: 15px;
+}
+
+.application-details-link-button {
+  @apply flex justify-between items-center;
+
+  .download-button {
+    color: a82227;
+    margin-left: 8px;
+  }
+}
+
+.response-download-button {
+  @apply flex mb-sm;
+
+  .download-button {
+    color: #a82227;
+    margin-left: 8px;
+    white-space: nowrap;
+  }
+}
+
+.check-page-link-button {
+  color: #a82227 !important;
+}
+
+.pt-application-download-btn {
+  display: flex;
+  justify-content: flex-end;
+  margin: 0px 8px;
+}
+
+.application-table-container {
+  @apply mt-lg ml-lg flex-1;
+}
+
+.primary-label-btn {
+  @apply flex;
+  gap: 10px;
+
+  svg {
+    fill: #a82227;
+  }
+
+  color: #5a1166;
+
+  cursor: pointer;
+  font-weight: 500;
+  width: fit-content;
+}
+
+.primaryColor {
+  color: #0b0c0c !important;
+}
+
+@media (hover: hover) {
+  .primary-label-btn {
+    &:hover {
+      color: #000;
+
+      svg {
+        fill: #000;
+      }
+    }
+  }
+}
+
+.disabled {
+  @apply border-grey-dark text-grey-dark !important;
+  pointer-events: none !important;
+}
+
+.card-date-input {
+  @apply absolute top-0 left-0 w-3/4 bg-white pl-sm border border-input-border border-solid border-r-0;
+  outline: transparent solid 1px;
+  height: 2.5rem;
+}
+
+.h4 {
+  @apply mb-sm;
+}
+
+.react-time-picker {
+  width: 194px;
+  height: 2.5rem;
+  &__wrapper {
+    border: 2px solid #0b0c0c;
+    padding-left: 16px;
+  }
+  &__inputGroup__input {
+    @apply px-sm;
+    line-height: 2.5rem;
+    min-width: 16px;
+    &:focus {
+      outline: 2px solid black;
+    }
+  }
+}
+
+.border-none {
+  border: none;
+  justify-content: space-between;
+}
+
+.hide-number-spinner input[type="number"]::-webkit-inner-spin-button,
+.hide-number-spinner input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.hide-number-spinner input[type="number"] {
+  -moz-appearance: textfield; /* Firefox */
+}
+
+.static {
+  @apply flex flex-col;
+  min-height: 85vh;
+
+  &-wrapper {
+    flex: 1;
+    max-height: 75vh;
+    overflow: scroll;
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+
+.bill-summary {
+  border: #e8e7e6 solid 1px;
+  @apply bg-grey-light w-full;
+
+  .bill-account-details {
+    @apply flex mb-md;
+    padding: 5px;
+
+    .label {
+      @apply w-1/2 font-bold;
+    }
+
+    .value {
+      @apply w-1/2 text-right;
+    }
+  }
+
+  .amount-details {
+    @apply flex mb-md items-center;
+    padding: 5px;
+
+    .label {
+      @apply w-1/2 font-bold;
+    }
+
+    .value {
+      @apply w-1/2 font-bold text-right;
+      font-size: 18px;
+    }
+  }
+}
+
+.bill-payment-amount {
+  @apply sticky bottom-0 bg-white;
+  padding-bottom: 32px;
+
+  .payment-amount-front {
+    @apply absolute z-10 w-10 flex justify-center items-center;
+    background-color: #efefef;
+    padding: 7px 12px;
+    color: #9a9a9a;
+  }
+}
+
+.text-indent-xl input {
+  text-indent: 40px;
+}
+
+.select-payment-type {
+  @apply flex justify-center font-bold items-center;
+  padding-top: 10px;
+  padding-bottom: 25px;
+
+  .value {
+    font-size: 20px;
+  }
+}
+
+.cheque-date {
+  @apply flex items-center mb-lg;
+  border: 2px solid #0b0c0c;
+  border-radius: 2px;
+
+  input {
+    @apply outline-none w-full;
+    border: 0px;
+    background: transparent;
+    text-indent: 5px;
+    padding: 6px 0px;
+  }
+
+  button {
+    @apply outline-none;
+    border: 0px;
+    background: transparent;
+    text-indent: 2px;
+  }
+}
+
+.w-half {
+  @apply w-1/2;
+}
+
+.ifsc-field {
+  @apply flex items-center mb-lg;
+  border: 2px solid #0b0c0c;
+  border-radius: 2px;
+
+  input {
+    @apply outline-none w-full;
+    border: 0px;
+    background: transparent;
+    text-indent: 5px;
+    padding: 6px 0px;
+  }
+  button {
+    @apply outline-none;
+    border: 0px;
+    background: transparent;
+    text-indent: 2px;
+  }
+}
+
+.text-input {
+  width: 100%;
+
+  input {
+    &:hover {
+      @apply border-2 border-solid border-primary-main;
+    }
+  }
+}
+
+.text-input-width {
+  max-width: 540px;
+}
+
+.text-mobile-input-width {
+  max-width: 540px;
+  width: 100%;
+}
+
+/*.employeeCard,
+.text-mobile-input-width {
+  max-width: 100%;
+}*/
+
+.custom-time-picker {
+  @apply w-full;
+  max-width: 200px;
+}
+
+.sla-cell {
+  @apply text-text-secondary;
+}
+
+.submit-bar-search {
+  margin-top: 32px;
+  margin-left: 16px;
+  max-width: 256px;
+}
+
+.clear-search-container {
+  @apply flex justify-between items-center;
+}
+
+.card-label-smaller {
+  margin-bottom: revert;
+}
+
+.card-label-APK {
+  @apply w-1/3;
+  margin-bottom: revert;
+  width: 100%;
+}
+
+.underline {
+  border-color: #e7e6e6;
+  @apply mb-sm;
+}
+
+.box-shadow-none {
+  box-shadow: none;
+}
+
+.component-in-front {
+  @apply flex justify-center items-center;
+}
+
+.subform-composer {
+  @apply flex;
+}
+
+.inbox-search-container {
+  .result {
+    @apply mt-lg;
+  }
+}
+
+.payment-form-text-input-correction {
+  width: 100% !important;
+}
+
+.edcr-citizen-inbox {
+  thead th:first-child {
+    min-width: 100px;
+  }
+}
+
+.error-boundary {
+  width: 100vw;
+  height: 100vh;
+  font-size: 16px;
+  font-family: sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  position: absolute !important;
+  .error-container {
+    display: flex;
+    width: 400px;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    h1 {
+      font-size: 32px;
+      font-weight: bold;
+    }
+    button {
+      height: 40px;
+      width: 153px;
+      border-radius: 0px;
+      padding: 8px 24px;
+      color: white;
+      cursor: pointer;
+    }
+  }
+}
+.tl-citizen {
+  width: 100%;
+  padding: 10px;
+}
+
+.error-boundary summary,
+.error-boundary details {
+  width: 300px;
+  background-color: rgb(218, 100, 100);
+  margin: 5px;
+  border: 2px solid #222;
+  border-radius: 3px;
+  padding: 3px;
+}
+
+.full-width-card {
+  width: 92vw !important;
+}
+.full-employee-card-link {
+  width: 100% !important;
+  margin: 7px 0px;
+}
+.full-employee-card-height {
+  height: unset !important;
+}
+
+@media (min-width: 640px) {
+  .full-employee-card-height {
+    height: 196px !important;
+  }
+  .full-employee-card-link {
+    width: 30% !important;
+  }
+  .full-width-card {
+    @apply w-full !important;
+  }
+}
+.complaint-summary {
+  @media (min-width: 780px) {
+    flex: 1 0 auto;
+    margin-left: 1rem;
+    margin-top: 1rem;
+  }
+}
+
+@media (min-width: 780px) {
+  .citizen-form-wrapper {
+    width: calc(100% - 219px);
+    display: flex;
+    justify-content: center;
+    margin-top: 1rem;
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+}
+
+/* Citizen Login Mobile Responsive Styles */
+@media only screen and (max-width: 768px) {
+  .citizen-form-wrapper {
+    width: 100% !important;
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+
+  .citizen-form-wrapper .AppContainer {
+    width: 100% !important;
+    padding: 12px !important;
+    margin: 0 !important;
+  }
+
+  .citizen-form-wrapper .card {
+    width: 100% !important;
+    max-width: 100% !important;
+    margin: 0 !important;
+    padding: 16px !important;
+    border-radius: 8px !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
+  }
+
+  .citizen-form-wrapper .card-header {
+    font-size: 20px !important;
+    margin-bottom: 8px !important;
+  }
+
+  .citizen-form-wrapper .card-text {
+    font-size: 14px !important;
+    margin-bottom: 16px !important;
+  }
+
+  .citizen-form-wrapper .field-container {
+    flex-direction: row !important;
+    width: 100% !important;
+  }
+
+  .citizen-form-wrapper .citizen-card-input {
+    width: 100% !important;
+    font-size: 16px !important;
+    padding: 12px !important;
+    height: auto !important;
+    min-height: 44px !important;
+  }
+
+  .citizen-form-wrapper .citizen-card-input--front {
+    padding: 12px 8px !important;
+    font-size: 16px !important;
+    min-height: 44px !important;
+    display: flex !important;
+    align-items: center !important;
+    background-color: #f3f4f6 !important;
+    border: 1px solid #464646 !important;
+    border-right: none !important;
+  }
+
+  .citizen-form-wrapper .submit-bar {
+    width: 100% !important;
+    margin-top: 16px !important;
+  }
+
+  .citizen-form-wrapper .submit-bar button {
+    width: 100% !important;
+    padding: 14px !important;
+    font-size: 16px !important;
+    min-height: 48px !important;
+  }
+
+  .citizen-form-wrapper .back-btn {
+    margin-bottom: 12px !important;
+  }
+
+  .citizen-form-wrapper .form-field {
+    margin-bottom: 16px !important;
+  }
+
+  .citizen-form-wrapper .link-button,
+  .citizen-form-wrapper .link-btn {
+    font-size: 14px !important;
+    text-align: center !important;
+    display: block !important;
+    margin-top: 12px !important;
+  }
+}
+@media (min-width: 780px) {
+  .citizen-card-container {
+    padding-left: 15px;
+    padding-right: 15px;
+    margin-top: 1rem;
+  }
+}
+
+@media (min-width: 780px) {
+  .citizen-obps-wrapper,
+  .selection-card-wrapper,
+  .fsm-citizen-wrapper,
+  .pt-citizen,
+  .bill-citizen,
+  .bills-citizen-wrapper,
+  .payer-bills-citizen-wrapper,
+  .engagement-citizen-wrapper,
+  .citizen-all-services-wrapper,
+  .mcollect-citizen,
+  .ws-citizen-wrapper,
+  .tl-citizen {
+    width: 90%;
+    padding-left: 16px;
+    padding-right: 16px;
+    margin-top: 3rem;
+  }
+}
+@media only screen and (max-width: 768px) {
+  /* For mobile phones: */
+  .error-boundary {
+    height: 75vh;
+  }
+}
+.employee-app-wrapper {
+  min-height: calc(100vh - 8em);
+}
+
+.ws-custom-wrapper {
+  .submit {
+    display: flex !important;
+    flex-direction: row-reverse !important;
+    width: 100% !important;
+    align-items: center;
+    button {
+      width: 240px !important;
+    }
+    p {
+      width: unset;
+      margin-right: 1rem;
+    }
+  }
+}
+
+.ws-button {
+  border: 1px solid grey;
+  display: block;
+  background-color: grey;
+  height: 50%;
+  width: 80%;
+  text-align: "center";
+  margin-top: 6%;
+  color: "white";
+}
+.ws-search-button {
+  border: 1px solid black;
+  display: block;
+
+  height: 50%;
+  width: 80%;
+  text-align: "center";
+  margin-top: 6%;
+  color: "white";
+}
+.button {
+  color: "white";
+}
+.plumber-details-new-value-wrapper {
+  flex: 2 1 auto;
+}
+
+.connection-details-new-value-wrapper {
+  flex: 1 1 auto;
+}
+
+.connection-details-old-value-wrapper,
+.plumber-details-old-value-wrapper {
+  flex: 1 1 auto;
+
+  .old-value-null-wrapper {
+    visibility: hidden;
+    padding-bottom: 8px;
+    margin-bottom: 8px;
+  }
+  .row {
+    color: #b1b4b6;
+    font-weight: 700;
+    font-size: 16px;
+  }
+}
+
+.plumber-details-new-value-wrapper {
+  flex: 2 1 auto;
+}
+
+.connection-details-new-value-wrapper {
+  flex: 1 1 auto;
+}
+
+.connection-details-old-value-wrapper,
+.plumber-details-old-value-wrapper {
+  flex: 1 1 auto;
+  .old-value-null-wrapper {
+    visibility: hidden;
+    padding-bottom: 8px;
+    margin-bottom: 8px;
+  }
+  .row {
+    color: #b1b4b6;
+    font-weight: 700;
+    font-size: 16px;
+  }
+}
+
+.modal-header-ws {
+  padding: 1rem;
+  font-weight: 400;
+}
+.modal-body-ws {
+  padding: 1rem;
+  font-weight: 700;
+  color: #0b0c0c;
+  font-size: 24px;
+  margin-bottom: 1rem;
+}
+.privacy-icon {
+  cursor: pointer;
+}
+.privacy-icon:hover {
+  path {
+    fill: rgba(244, 119, 56, 1);
+  }
+}
+
+.employee-app-wrapper {
+  min-height: calc(100vh - 8em);
+}
+.submit-bar header {
+  line-height: 2rem !important;
+}
+.logo-removeBorderRadiusLogo svg {
+  width: 50px;
+  height: 60px;
+}
+
+.icon-banner-employee {
+  background-color: #d7aefc !important;
+}
+.icon-banner-employee svg {
+  background-color: #0d43a7 !important;
+  width: 40px;
+  height: 40px;
+}
+.inboxButton {
+  border: none;
+  color: #4c5656;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 14px;
+  margin: 4px 2px;
+  cursor: pointer;
+  height: fit-content;
+  border-radius: 5px;
+  font-family: sans-serif;
+  font-weight: 700;
+}
+.employee .inboxButton {
+  padding: 5px 15px;
+  background: #ba2b36;
+}
+.citizen .inboxButton {
+  padding: 15px;
+  font-size: 1.2rem;
+}
+
+/*.ndc_property_search .text-input {
+  width: 100%;
+  max-width: 300px;
+} */
+
+.action-bar-wrap {
+  display: flex;
+  justify-content: end;
+  gap: 10px;
+}
+
+.action-bar-wrap .submit-bar {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+.ndc_card_labels {
+  width: 100%;
+}
+
+.downLoadButton {
+  color: "#A52A2A";
+  display: flex !important;
+  justify-content: center;
+  align-items: center;
+}
+
+.ndc_label {
+  padding-bottom: 20px;
+}
+.ndc-property-details-form {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.ndc-action-bar {
+  display: flex;
+  justify-content: flex-end;
+  align-items: baseline;
+  gap: 20px;
+}
+.ndc-emp-app-overview {
+  margin-bottom: 30px;
+  background: #fafafa;
+  padding: 16px;
+  border-radius: 4px;
+}
+.ndc-property-detail-green {
+  color: green !important;
+}
+.ndc-acknowledgement-check {
+  margin-top: 40px;
+  margin-bottom: 20px;
+}
+
+.step-label {
+  font-size: 12px !important;
+}
+
+.modal-action .employeeCard {
+  margin-left: 0px !important;
+}
+
+.moduleLinkHomePage h1 {
+  padding-left: 20px;
+}
+
+@media screen and (max-width: 768px) {
+  .citizen .inboxButton {
+    font-size: 1rem;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .action-bar-wrap {
+    padding: 10px 10px;
+    text-align: center;
+  }
+  .submit-bar {
+    font-size: 11px;
+  }
+}
+
+.options-card {
+  max-height: 350px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  background-color: #fff;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  padding: 4px 0;
+}
+
+/* ===== TimelineHOC CSS ===== */
+.timeline-hoc-container .checkpoint header,
+.timeline-hoc-container .checkpoint-done header {
+  flex: 1;
+  background: #ccffcc;
+  padding: 4px 8px;
+}
+
+.timeline-hoc-container .checkpoint-connect-wrap {
+  padding: 0px;
+}
+
+.timeline-card {
+  width: 100%;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: clamp(12px, 3vw, 20px);
+  margin: 10px 0;
+  background: #ccffcc;
+  font-family: "verdana";
+}
+
+.timeline-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.timeline-header-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+  white-space: nowrap;
+}
+
+.timeline-label {
+  color: #0d43a7 !important;
+  font-size: 10px;
+  font-weight: 600;
+}
+
+.timeline-value {
+  color: #0d43a7 !important;
+  font-weight: 800;
+  font-size: 12px;
+}
+
+.timeline-note {
+  margin: 10px 0;
+}
+
+.timeline-note .note-box {
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  padding: 10px;
+  min-height: 40px;
+  word-break: break-word;
+  font-size: 10px;
+  font-weight: 800;
+  background: #ccffcc;
+}
+
+.timeline-docs {
+  margin-top: 10px;
+}
+
+@media (max-width: 768px) {
+  .timeline-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .timeline-header-item {
+    width: 100%;
+  }
+
+  .timeline-card {
+    padding: 12px;
+  }
+}
+
+.engagement-citizen-wrapper {
+  width: 100%;
+  overflow-x: scroll;
+  overflow-y: hidden;
+}
+
+@media screen and (max-width: 768px) {
+  .engagement-citizen-wrapper {
+    overflow: hidden;
+  }
+}
+
+/* Application Timeline Styles */
+.timeline-header-wrapper {
+  display: flex;
+  align-items: center;
+  margin: 20px 8px;
+  gap: 16px;
+}
+
+.download-button {
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 500;
+  padding: 5px;
+  color: #0d43a7;
+  border: 1px solid #0d43a7;
+  border-radius: 4px;
+  transition: all 0.2s ease-in-out;
+  display: inline-block;
+
+  &:hover {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.timeline-docs-wrapper {
+  margin-top: 10px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.timeline-doc-link {
+  min-width: 100px;
+}
+
+.timeline-doc-icon {
+  background: #f6f6f6;
+  padding: 8px;
+}
+
+.timeline-subheader {
+  font-size: 22px !important;
+  font-weight: 500 !important;
+}
+.user-profile {
+  margin-top: 3rem;
+  width: 70%;
+}
+
+.user-profile-section-wrapper {
+  margin: 8px;
+  position: relative;
+
+  &.employee {
+    margin: 24px;
+  }
+}
+
+.user-profile-main-container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  margin: 8px;
+  gap: 0;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  background: white;
+  border-radius: 12px;
+  max-width: 1200px;
+  overflow: hidden;
+
+  @media (min-width: 768px) {
+    margin: 16px;
+    gap: 24px;
+    max-width: none;
+  }
+}
+
+.user-profile-image-section {
+  position: relative;
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  max-width: 100%;
+  min-height: 280px;
+  border-radius: 12px 12px 0 0;
+  background: linear-gradient(135deg, #4f65d8, #00157a);
+  padding: 32px 16px;
+
+  @media (min-width: 768px) {
+    flex: 0;
+    border-radius: 0;
+  }
+
+  &.employee {
+    border-radius: 0;
+  }
+}
+
+.user-profile-image-wrapper {
+  height: 160px;
+  width: 160px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.user-profile-image {
+  height: 100%;
+  width: 100%;
+  border-radius: 50%;
+  border: 6px solid white;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
+  object-fit: cover;
+}
+
+.user-profile-camera-button {
+  position: absolute;
+  bottom: -20px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border: 4px solid white;
+  border-radius: 50%;
+  width: 56px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  color: white;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 12px 28px rgba(102, 126, 234, 0.5);
+  }
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.user-profile-form-section {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  width: 100%;
+  background: #fafbfc;
+  padding: 32px;
+  gap: 24px;
+}
+
+.user-profile-form-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 24px;
+
+  @media (min-width: 768px) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.user-profile-field-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.user-profile-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1a202c;
+  margin-bottom: 4px;
+}
+
+.user-profile-input {
+  width: 100%;
+}
+
+.user-profile-error-text {
+  margin: 4px 0 0 0;
+  padding: 0;
+  color: #d32f2f;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.user-profile-div-margin {
+  margin-top: 12px;
+  padding: 16px;
+  background-color: #e8f1ff;
+  border-radius: 8px;
+  border-left: 4px solid #667eea;
+}
+
+.user-profile-change-password-link {
+  color: #667eea;
+  cursor: pointer;
+  position: relative;
+  text-decoration: underline;
+  font-weight: 600;
+  font-size: 14px;
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: #764ba2;
+  }
+}
+
+.user-profile-save-section-employee {
+  height: 88px;
+  background-color: #ffffff;
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 0;
+  align-items: center;
+  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
+  padding: 16px 32px;
+  width: 100%;
+
+  @media (max-width: 767px) {
+    justify-content: center;
+  }
+}
+
+.user-profile-toast-style {
+  max-width: 670px;
+}
+
+.user-profile-button-padding {
+  padding-bottom: 12px;
+  padding-top: 12px;
+}
+
+.user-profile-label-field-pair-flex {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.user-profile-label-style-employee {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1a202c;
+}
+
+.user-profile-full-width {
+  width: 100%;
+}
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+audio,
+canvas,
+embed,
+iframe,
+img,
+object,
+svg,
+video {
+  display: block;
+  vertical-align: middle;
+}
+
+/* Global Responsive Font Sizes for Mobile */
+@media only screen and (max-width: 768px) {
+  .card-header,
+  .employee-upyog-title,
+  .header-title,
+  .heading,
+  .landing-card-header,
+  .page-header,
+  .section-header,
+  .survey-card-header,
+  h1,
+  h2,
+  h3,
+  header {
+    font-size: 14px !important;
+
+    .complaint-input-container {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  /* Headers with ~28px should become 16px on mobile */
+  h4,
+  .card-sub-header,
+  .sub-header {
+    font-size: 16px !important;
+  }
+
+  /* Headers with ~24px should become 15px on mobile */
+  h5,
+  h6,
+  .card-section-header {
+    font-size: 15px !important;
+  }
+
+  /* Card text and body text */
+  .card-text,
+  .card-caption,
+  p {
+    font-size: 14px !important;
+  }
+}
+.link-button-margin {
+  margin-top: 10px;
+}
+.tl-add-action-button {
+  display: inline-block;
+  padding: 8px 16px;
+  background: linear-gradient(135deg, #2563eb, #1e40af);
+  color: #ffffff !important;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 600;
+  text-decoration: none !important;
+  margin-top: 16px;
+  margin-bottom: 8px;
+  border: none;
+  transition: background-color 0.2s ease, transform 0.1s ease;
+  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
+}
+
+.svgPrimaryH16px {
+  display: none !important;
+}
+/* Date input centering for mobile view */
+@media (max-width: 767px) {
+  input[type="date"] {
+    text-align: center !important;
+  }
+
+  .form-field input[type="date"] {
+    text-align: center !important;
+  }
+
+  .citizen-card-input[type="date"] {
+    text-align: center !important;
+  }
+
+  .card input[type="date"] {
+    text-align: center !important;
+  }
+}
+
+input[type="date"] {
+  -webkit-appearance: none !important;
+  appearance: none !important;
+}
+.ndc-pay-due-button {
+  color: red;
+  width: 100%;
+  max-width: 70px;
+}
+.ndc-no-due-button {
+  color: green;
+  width: 100%;
+  max-width: 70px;
+}
+.ndc-doc-view-comp {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+.ndc-label-field-pair {
+  margin-top: 40px;
+}
+.ndc-emp-step-form {
+  font-size: 28px;
+  font-weight: 400;
+  color: #1c1d1f;
+}
+.chb-loader-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.chb-page-loader-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(4px);
+  z-index: 9999;
+}
+
+.chb-module-loader-container {
+  min-height: 100px;
+  width: 100%;
+  position: relative;
+}
+
+.chb-spinner {
+  width: 64px;
+  height: 64px;
+  border: 8px solid #1976d2;
+  border-top: 8px solid transparent;
+  border-radius: 50%;
+  animation: spin 1.2s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.chb-margin-top-20 {
+  margin-top: 20px;
+}
+
+.chb-margin-bottom-0 {
+  margin-bottom: 0;
+}
+
+.chb-margin-bottom-20 {
+  margin-bottom: 20px;
+}
+
+.chb-error-text {
+  color: red;
+  margin-top: 4px;
+  margin-bottom: 0;
+}
+
+.chb-slot-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 16px;
+  width: 100%;
+}
+
+.chb-slot-card {
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  padding: 12px;
+  background-color: #e6ffed;
+  cursor: pointer;
+  opacity: 1;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.chb-slot-card--unavailable {
+  background-color: #ffe6e6;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.chb-slot-status {
+  color: green;
+  font-weight: bold;
+}
+
+.chb-slot-status--unavailable {
+  color: red;
+}
+
+.chb-slot-text {
+  margin-left: 10px;
+}
+
+.chb-form-field-margin {
+  margin-bottom: 0;
+}
+
+.chb-dropdown-menu {
+  position: absolute;
+  background-color: white;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 8px;
+  z-index: 1000;
+}
+
+.chb-menu-item {
+  display: block;
+  padding: 8px;
+  text-decoration: none;
+  color: black;
+  cursor: pointer;
+}
+
+.chb-documents-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.chb-table-cell-summary {
+  min-width: 100px;
+  padding: 8px;
+  font-size: clamp(0.9rem, 2vw, 1.1rem);
+  padding-left: 10px;
+  word-break: break-word;
+}
+
+.chb-table-cell-details {
+  min-width: 150px;
+  padding: 10px;
+  font-size: 16px;
+  padding-left: 20px;
+}
+
+.chb-documents-flex {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-top: 16px;
+}
+.chb-banner-header {
+  font-size: clamp(20px, 4vw, 32px);
+  word-break: break-word;
+}
+.chb-action-bar-response {
+  display: flex;
+  justify-content: flex-end;
+  align-items: baseline;
+  gap: 20px;
+}
+
+.gcButton {
+  margin-top: 15px;
+}
+
+.tableClass {
+  margin-top: 60px;
+}
+
+/* CLU Fee Table Wrapper */
+.custom-fee-table-wrapper {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  width: 100%;
+  margin-bottom: 16px;
+  display: block;
+}
+
+/* CLU Main Fee Table */
+.custom-fee-table {
+  width: 100%;
+  table-layout: auto;
+  min-width: 600px;
+  border-collapse: collapse;
+}
+
+.custom-fee-table-header {
+  padding: 14px 12px;
+  font-size: 12px;
+  white-space: nowrap;
+  background: linear-gradient(135deg, #1e3a8a, #2563eb);
+  color: white;
+  font-weight: 600;
+  text-align: left;
+}
+
+.custom-fee-table-cell {
+  padding: 14px 12px;
+  font-size: 16px;
+}
+@media (max-width: 768px) {
+  .custom-fee-table-cell {
+    font-size: 13px;
+    padding: 10px 8px;
+  }
+}
+
+.custom-fee-table-cell-taxhead {
+  min-width: 150px;
+}
+
+.custom-fee-table-cell-amount {
+  padding: 14px 12px;
+}
+
+.custom-fee-table-cell-remark {
+  padding: 14px 12px;
+}
+
+.custom-fee-history-section {
+  margin-top: 16px;
+}
+
+.custom-fee-history-toggle {
+  cursor: pointer;
+}
+
+.custom-fee-history-table-wrapper {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  margin-top: 8px;
+  display: block;
+  width: 100%;
+}
+
+/* CLU Fee History Table */
+.custom-fee-history-table {
+  width: 100%;
+  table-layout: auto;
+  min-width: 500px;
+  border-collapse: collapse;
+}
+
+.custom-fee-history-header {
+  padding: 12px 8px;
+  font-size: 14px;
+  white-space: nowrap;
+  min-width: 120px;
+  background-color: #0d43a7;
+  color: white;
+  font-weight: 600;
+  text-align: left;
+}
+
+.custom-fee-history-cell {
+  padding: 12px 8px;
+  min-width: 120px;
+  vertical-align: top;
+}
+
+.custom-fee-history-content {
+  font-size: 14px;
+}
+
+.custom-fee-history-row {
+  margin-bottom: 8px;
+}
+
+.custom-fee-history-label {
+  margin-bottom: 8px;
+}
+
+.custom-fee-history-label-value {
+  word-break: break-word;
+}
+
+.custom-fee-history-label-bold {
+  color: #333;
+  font-weight: 700;
+  font-size: 15px;
+  margin-right: 4px;
+}
+
+.custom-fee-table-input {
+  width: 100%;
+  border-radius: 4px;
+  font-size: 15px;
+  box-sizing: border-box;
+}
+
+/* Textarea Styles for CLU Fee Table */
+.custom-fee-table-textarea {
+  min-height: 60px;
+  max-height: 240px;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  resize: vertical;
+  padding: 10px 12px;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+  font-size: 15px;
+  line-height: 1.5;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.custom-fee-table-textarea:focus {
+  outline: none;
+  border-color: #1e3a8a;
+  box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.1);
+}
+
+.custom-fee-table-textarea:disabled {
+  background-color: #f5f5f5;
+  color: #999;
+  cursor: not-allowed;
+}
+
+.custom-fee-remark-display {
+  padding: 10px 12px;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  background-color: #f9f9f9;
+  font-size: 15px;
+  line-height: 1.5;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  max-height: 240px;
+  overflow-y: auto;
+  min-height: 40px;
+  display: flex;
+  align-items: flex-start;
+  color: #333;
+}
+
+.custom-fee-mobile-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 0;
+}
+
+.custom-fee-card {
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  transition: box-shadow 0.2s ease;
+
+  &:hover {
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
+  }
+}
+
+.custom-fee-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #f0f0f0;
+}
+
+.custom-fee-card-type {
+  font-weight: 700;
+  font-size: 15px;
+  color: #1a1a1a;
+  text-transform: capitalize;
+  letter-spacing: 0.3px;
+}
+
+.custom-fee-card-original-amount {
+  font-size: 15px;
+  color: #888;
+  font-weight: 500;
+}
+
+.custom-fee-card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.custom-fee-card-row {
+  display: flex;
+  gap: 12px;
+}
+
+.custom-fee-card-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+}
+
+.custom-fee-card-label {
+  font-weight: 600;
+  font-size: 12px;
+  color: #000000;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.custom-fee-card-value {
+  font-size: 13px;
+  color: #333;
+  padding: 8px;
+  background: #f9f9f9;
+  border-radius: 4px;
+  min-height: 32px;
+  display: flex;
+  align-items: center;
+  border: 1px solid #e8e8e8;
+}
+
+/* Total Row Special Styling */
+.custom-fee-card-total-row {
+  background: linear-gradient(135deg, #f5f7fa 0%, #f0f3f8 100%);
+  border: 2px solid #d0d8e8;
+  margin-top: 8px;
+
+  .custom-fee-card-header {
+    display: none;
+  }
+}
+
+.custom-fee-card-total-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  text-align: center;
+  padding: 12px 0;
+}
+
+.custom-fee-card-total-label {
+  font-size: 12px;
+  color: #1f4ed4;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.custom-fee-card-total-value {
+  font-size: 24px;
+  font-weight: 800;
+  color: #1a1a1a;
+  letter-spacing: 0.2px;
+}
+
+.custom-fee-card-total-words {
+  font-size: 11px;
+  color: #1f4ed4;
+  font-style: italic;
+  margin-top: 4px;
+  line-height: 1.4;
+}
+
+/* Mobile History Section */
+.custom-fee-mobile-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.custom-fee-mobile-history {
+  background: white;
+  border: 1px solid #e0e0e0;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  margin-top: 20px;
+}
+
+.custom-fee-history-toggle-mobile {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  cursor: pointer;
+  background: linear-gradient(135deg, #f5f7fa 0%, #f0f3f8 100%);
+  border-bottom: 1px solid #e0e0e0;
+  transition: all 0.2s ease;
+
+  &:active {
+    background: linear-gradient(135deg, #f0f3f8 0%, #e8ecfa 100%);
+  }
+}
+
+.custom-fee-history-title {
+  font-weight: 700;
+  font-size: 14px;
+  color: #1a1a1a;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.custom-fee-history-icon {
+  font-size: 12px;
+  color: #666;
+  font-weight: 600;
+}
+
+.custom-fee-history-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.custom-fee-history-card {
+  background: #f9f9f9;
+  border: 1px solid #e8e8e8;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.custom-fee-history-card-header {
+  background: #0d43a7;
+  padding: 12px 16px;
+  font-weight: 600;
+  font-size: 15px;
+  color: white;
+  border-bottom: 1px solid #0d43a7;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.custom-fee-history-card-content {
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.custom-fee-history-entry {
+  padding: 8px 0;
+  border-bottom: 1px solid #e8e8e8;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.custom-fee-history-item {
+  font-size: 14px;
+  color: #555;
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+.custom-fee-history-label-bold {
+  color: #333;
+  font-weight: 700;
+  font-size: 15px;
+  margin-right: 4px;
+}
+.custom-fix-fee-history-wrapper {
+  margin-top: 16px;
+}
+
+.custom-fix-fee-history-toggle {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 12px 0;
+  border-bottom: 1px solid #ddd;
+}
+
+.custom-fix-fee-history-toggle-text {
+  font-weight: bold;
+  font-size: 16px;
+  flex: 1;
+}
+
+.custom-fix-fee-history-toggle-icon {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.custom-fix-fee-history-table-container {
+  overflow-x: auto;
+  margin-top: 16px;
+}
+
+.custom-fix-fee-history-table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 600px;
+}
+
+.custom-fix-fee-history-table-header {
+  padding: 8px;
+  border: 1px solid #ddd;
+  font-weight: bold;
+  background-color: #1f3a9f;
+  color: #fff;
+  min-width: 140px;
+}
+
+.custom-fix-fee-history-table-header-fee {
+  padding: 8px;
+  border: 1px solid #ddd;
+  font-weight: bold;
+  background-color: #1f3a9f;
+  color: #fff;
+  min-width: 150px;
+}
+
+.custom-fix-fee-history-table-cell-label {
+  padding: 8px;
+  border: 1px solid #ddd;
+  font-weight: bold;
+  background-color: #f9f9f9;
+}
+
+.custom-fix-fee-history-table-cell-value {
+  padding: 8px;
+  border: 1px solid #ddd;
+}
+
+.custom-fix-fee-history-table-cell-separator {
+  padding: 8px;
+  border: 1px solid #ddd;
+  font-weight: bold;
+  background-color: #f9f9f9;
+  border-bottom: 3px solid #999999;
+}
+
+.custom-fix-fee-history-table-cell-separator-value {
+  padding: 8px;
+  border: 1px solid #ddd;
+  border-bottom: 3px solid #999999;
+}
+
+.custom-fix-fee-history-table-cell-separator-last {
+  padding: 8px;
+  border: 1px solid #ddd;
+  font-weight: bold;
+  background-color: #f9f9f9;
+  border-bottom: none;
+}
+
+.custom-fix-fee-history-table-cell-separator-value-last {
+  padding: 8px;
+  border: 1px solid #ddd;
+  border-bottom: none;
+}
+
+/* NOC Document Checklist Table Wrapper */
+.checklist-document-table-wrapper {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  width: 100%;
+  display: block;
+}
+
+/* NOC Document Table */
+.checklist-document-table {
+  width: 100%;
+  table-layout: auto;
+  min-width: 500px;
+  border-collapse: collapse;
+}
+
+/* NOC Document Checklist Table Styles */
+.checklist-table-header {
+  padding: 14px 12px;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.checklist-table-header-srno {
+  width: 60px;
+  text-align: center;
+}
+
+.checklist-table-header-doc-name {
+  min-width: 150px;
+}
+
+.checklist-table-header-doc-file {
+  min-width: 100px;
+}
+
+.checklist-table-header-remark {
+  min-width: 150px;
+}
+
+.checklist-table-cell {
+  padding: 14px 12px;
+}
+
+.checklist-table-cell-srno {
+  width: 60px;
+  text-align: center;
+}
+
+.checklist-table-cell-doc-name {
+  font-size: 16px;
+  min-width: 150px;
+  max-width: 340px;
+}
+
+.checklist-table-cell-file {
+  min-width: 100px;
+}
+
+.checklist-table-cell-remark {
+  min-width: 150px;
+}
+
+.checklist-table-input {
+  width: 100%;
+  padding: 8px;
+  border-radius: 4px;
+  font-size: 13px;
+  box-sizing: border-box;
+}
+
+/* Mobile Card View for Document Checklist */
+.checklist-mobile-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 0;
+}
+
+.checklist-mobile-card {
+  border-bottom: 1px solid #e0e0e0;
+  padding: 12px 0;
+}
+
+.checklist-card-header {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 8px;
+  align-items: center;
+  margin-left: 10px;
+}
+
+.checklist-card-sr-no {
+  font-weight: 600;
+  font-size: 14px;
+  color: #333;
+  min-width: 20px;
+}
+
+.checklist-card-doc-name {
+  font-weight: 600;
+  font-size: 13px;
+  color: #333;
+  flex: 1;
+}
+
+.checklist-card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-left: 28px;
+}
+
+.checklist-card-row {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.checklist-card-label {
+  font-weight: 500;
+  font-size: 11px;
+  color: #666;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.checklist-card-remark {
+  font-size: 13px;
+  line-height: 1.4;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  color: #333;
+}
+
+/* Textarea Styles for CLU Document Checklist */
+.checklist-table-textarea {
+  min-height: 60px;
+  max-height: 240px;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  resize: vertical;
+  padding: 14px 16px;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+  font-size: 15px;
+  line-height: 1.5;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  width: 100%;
+  box-sizing: border-box;
+  font-family: inherit;
+  text-align: justify;
+}
+
+.checklist-table-textarea:focus {
+  outline: none;
+  border-color: #1e3a8a;
+  box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.1);
+}
+
+.checklist-table-textarea:disabled {
+  background-color: #f5f5f5;
+  color: #999;
+  cursor: not-allowed;
+  border-color: #e1e8f0;
+}
+
+@media (max-width: 1024px) {
+  .checklist-table-textarea {
+    padding: 12px 14px;
+    font-size: 13px;
+  }
+}
+
+@media (max-width: 768px) {
+  .checklist-table-textarea {
+    padding: 10px 12px;
+    font-size: 12px;
+    min-height: 50px;
+  }
+}
+
+.checklist-remark-display {
+  padding: 14px 16px;
+  font-size: 15px;
+  line-height: 1.5;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  color: #000000;
+  text-align: justify;
+  font-weight: 600;
+}
+
+@media (max-width: 1024px) {
+  .checklist-remark-display {
+    padding: 12px 14px;
+    font-size: 15px;
+  }
+}
+
+@media (max-width: 768px) {
+  .checklist-remark-display {
+    padding: 10px 12px;
+    font-size: 14px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .data-card {
+    .employee-card-sub-heade {
+      margin-bottom: 40px;
+      font-size: 18px;
+      font-weight: 700;
+      color: #1e293b;
+      text-align: left;
+      text-transform: uppercase;
+      letter-spacing: 0.4px;
+    }
+  }
+}
+.language-plugin {
+  position: fixed;
+  top: 16px;
+  right: 20px;
+  z-index: 99999;
+  background: linear-gradient(135deg, rgb(37, 99, 235), rgb(124, 58, 237));
+  padding: 6px 10px;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+  display: flex;
+  align-items: center;
+}
+.language-plugin svg path {
+  fill: #fff;
+}
+.language-plugin:hover {
+  transform: translateY(-3px) scale(1.03);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25), 0 0 20px rgba(59, 130, 246, 0.5), 0 0 35px rgba(14, 165, 233, 0.4);
+}
+.language-plugin-landing {
+  position: fixed;
+  top: 16px;
+  right: 20px;
+  z-index: 99999;
+  background: #fff;
+  padding: 6px 10px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+  transition: all 0.3s ease;
+}
+.language-plugin-landing:hover {
+  transform: translateY(-3px) scale(1.03);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25), 0 0 20px rgba(59, 130, 246, 0.5), 0 0 35px rgba(14, 165, 233, 0.4);
+}
+.margin-right-50 {
+  margin-right: 50px;
+}
+
+.surveyCardSection {
+  background: white;
+  display: block;
+  padding: 15px;
+  justify-self: center;
+  width: 50%;
+  @media (max-width: 768px) {
+    width: 100%;
+  }
+}
+.hrms-text-transform {
+  text-transform: none !important;
+}
+
+.noc-popupStyles {
+  width: unset;
+  min-width: 360px;
+  max-width: 600px;
+  padding: 20px;
+}
+
+.engagementForm {
+  width: 70%;
+  @media (max-width: 768px) {
+    width: 100%;
+  }
+}
+.hrms-text-transform {
+  text-transform: none !important;
+}