@pmidc/upyog-css 1.2.21 → 1.2.22

package/src/pages/employee/inbox.scss

@@ -1,959 +1,959 @@
-.complaint-links-container {
-  @apply bg-white;
-  border-radius: 4px;
-  .header {
-    @apply flex items-center border-b border-border justify-between;
-
-    .logo {
-      width: 56px;
-      height: 56px;
-      @apply bg-focus;
-      padding: 12px;
-      border-radius: 4px;
-      svg {
-        @apply w-8 h-8;
-      }
-    }
-
-    .text {
-      @apply pl-md text-heading-m font-bold;
-    }
-  }
-
-  .body {
-    padding: 10px;
-    @apply flex items-start flex-col;
-    margin-left: 46px;
-
-    .link {
-      @apply p-sm text-primary-main items-center;
-      display: flex !important;
-      color: #2947a3 !important;
-    }
-
-    .inbox-total {
-      padding: 4px;
-      display: table;
-      @apply whitespace-normal text-center text-white w-8 h-8 bg-primary-main rounded-full ml-xs;
-      background-color: #1359c8 !important;
-    }
-  }
-
-  .links-wrapper {
-    @apply pl-md py-sm text-text-btn;
-    .link {
-      padding: 0 !important;
-      padding-bottom: 4px !important;
-      color: #a82227 !important;
-      svg {
-        @apply ml-sm;
-      }
-    }
-  }
-}
-
-.complaint-header {
-  display: flex;
-  @apply flex justify-between w-full;
-  margin-bottom: 20px;
-}
-
-.MobilePopupHeadingWrapper {
-  @apply flex place-content-between mb-md;
-  h2 {
-    @apply text-heading-l font-bold;
-  }
-}
-
-.filter-button {
-  @apply text-primary-main;
-  &:hover {
-    @apply text-primary-dark cursor-pointer;
-  }
-}
-
-.employeeCard-info-box {
-  @apply flex justify-end ml-md;
-  background-color: #fafafa;
-  div {
-    margin-right: 32px;
-    span:nth-child(2) {
-      @apply font-bold;
-      color: #4f5a5f;
-    }
-  }
-  .employeeCard-info-data {
-    display: flex;
-    flex-direction: column;
-  }
-}
-
-.filter-form {
-  .filter-card {
-    @apply bg-white min-h-full;
-    padding: 10px;
-    border-radius: 8px;
-    margin-bottom: 24px;
-
-    .heading {
-      justify-content: unset;
-      @apply flex;
-
-      .clearAll {
-        display: none;
-      }
-    }
-
-    .filter-label {
-      @apply font-bold text-heading-l flex gap-3;
-      padding-bottom: 6px;
-      svg {
-        fill: #0b0c0c;
-      }
-    }
-    .sub-filter-label {
-      font-weight: 400;
-      font-size: 16px;
-    }
-  }
-  .filter-form-field {
-    p {
-      @apply text-form-field text-text-primary block mb-md;
-    }
-  }
-}
-
-.inbox-container {
-  .filters-container {
-    .filter {
-      .filter-card {
-        @apply bg-white;
-        padding: 10px;
-        padding-bottom: 50px;
-        .filter-card-close-button {
-          @apply flex flex-row-reverse;
-        }
-        .heading {
-          @apply flex justify-between;
-
-          .clearAll {
-            display: none;
-          }
-        }
-
-        .filter-label {
-          @apply text-heading-m block flex gap-3 items-center;
-          padding-bottom: 6px;
-          svg {
-            fill: #0b0c0c;
-          }
-        }
-
-        .sub-filter-label {
-          font-weight: 400;
-          font-size: 16px;
-        }
-      }
-    }
-
-    .search-complaint-container {
-      padding: 1rem;
-      @apply items-center bg-white p-md;
-
-      .complaint-header {
-        display: flex;
-        justify-content: space-between;
-        padding-bottom: 1rem;
-      }
-
-      .complaint-input-container {
-        @apply w-full;
-        .complaint-input {
-          @apply flex flex-col;
-
-          .clear-search {
-            @apply text-focus;
-            display: none;
-            &:hover {
-              color: #003078;
-              cursor: pointer;
-            }
-          }
-        }
-
-        .mobile-input {
-        }
-      }
-    }
-  }
-
-  .status-container {
-    margin-bottom: 50px;
-  }
-}
-
-.clear-search,
-.clear-search .link-label {
-  @apply text-focus;
-  @apply block;
-  cursor: pointer;
-  &:hover {
-    color: #000;
-  }
-}
-.button-clear {
-  @apply text-focus text-body-s-dt;
-}
-
-.inbox-count {
-  @apply inline ml-sm p-sm bg-primary-main rounded-full text-white text-heading-s align-middle text-center font-regular;
-}
-
-@screen dt {
-  .complaint-links-container {
-    @apply bg-white;
-
-    .header {
-      @apply flex items-center border-b border-border;
-
-      .logo {
-        @apply bg-focus;
-        padding: 12px;
-        border-radius: 4px;
-      }
-
-      .text {
-        @apply pl-md text-heading-m-dt font-bold;
-      }
-    }
-
-    .body {
-      padding: 10px;
-      @apply flex items-start flex-col;
-      margin-left: 46px;
-
-      .link {
-        color: #a82227 !important;
-        @apply p-sm text-primary-main;
-      }
-    }
-  }
-
-  .inboxLinks {
-    margin: 0 !important;
-    padding: 0 !important;
-    .header {
-      border: none;
-      @apply justify-start;
-      .logo {
-        @apply bg-white;
-        svg {
-          path {
-            fill: #1359c8;
-          }
-        }
-      }
-    }
-    .body {
-      margin-left: 0;
-    }
-  }
-.filter-card{
-  padding: 1rem !important;
-}
-  .filter-form {
-    .filter-card {
-      @apply p-md bg-white;
-
-      .heading {
-        @apply flex justify-between;
-      }
-
-      .label {
-        @apply text-heading-s;
-      }
-    }
-  }
-
-  .inbox-container {
-    @apply flex;
-
-    .filters-container {
-      width: 270px;
-
-      .filter {
-        @apply mt-md;
-
-        .filter-card {
-          @apply p-md bg-white;
-
-          .heading {
-            @apply flex justify-between;
-          }
-
-          .label {
-            @apply text-heading-s;
-          }
-        }
-      }
-      .citizen-filter {
-        margin-top: unset;
-      }
-    }
-
-    .search-container {
-      padding:1rem !important;
-      .search-complaint-container {
-        margin: auto;
-        @apply flex flex-col items-start  mb-md bg-white p-md;
-
-        .complaint-input-container {
-          /* display: inline-block !important; */
-          display: grid !important;
-          grid-template-columns: 33.33% 33.33% 33.33%;
-          width:100% !important;
-
-          &.for-pt {
-            &.for-search {
-              grid-template-columns: 25% 25% 25% 25%;
-
-              .input-fields:nth-child(3n) {
-                @apply mr-md !important;
-              }
-
-              .input-fields:nth-child(4n) {
-                margin-right: 0 !important;
-              }
-
-              .search-submit-wrapper {
-                grid-column: 4/5;
-                /* margin-top: 56px;*/
-                max-width: unset;
-                margin-left: unset;
-              }
-            }
-          }
-
-          .search-submit-wrapper {
-            grid-column: 3/4;
-            margin-left: 50%;
-            max-width: 50%;
-            grid-column: 3/4;
-            @apply flex flex-col justify-center text-center;
-
-            .submit-bar-search {
-              margin-top: unset;
-              width: 100%;
-              margin-bottom: 20px;
-              margin-left: unset;
-              max-width: 100%;
-              width: 100%;
-            }
-          }
-
-          .input-fields {
-            /*width: calc(50% - 16px);*/
-
-            @apply inline-block mr-md !important;
-
-            .inbox-search-form-error {
-              padding-top: 0;
-              margin-top: 0;
-              @apply absolute;
-            }
-          }
-
-          .input-fields:nth-child(3n) {
-            margin-right: 0 !important;
-          }
-
-          .complaint-input {
-            @apply flex flex-col;
-
-            .clear-search {
-              @apply text-focus;
-              @apply block;
-              cursor: pointer;
-              &:hover {
-                color: #003078;
-                cursor: pointer;
-              }
-            }
-          }
-
-          .mobile-input {
-            @apply ml-sm;
-          }
-        }
-
-        .search-action-wrapper {
-          width: 33%;
-          margin-top: 28px;
-          @apply inline-block align-middle text-center;
-          button {
-            margin: 0;
-            width: 100%;
-            max-width: 300px !important;
-          }
-        }
-      }
-
-      .search-complaint-container-for-search {
-      }
-    }
-  }
-}
-
-.document-clear-all {
-  grid-area: 2/2;
-  display: flex;
-  justify-content: flex-end;
-  padding-right: 16px;
-  align-items: center;
-}
-
-.cell-text {
-  color: #505a5f;
-}
-
-.sla-cell-error {
-  color: #2947a3;
-  color: #a82227;
-  background-color: #f5fbff;
-  padding: 0 24px;
-  border-radius: 11px;
-}
-
-.sla-cell-success {
-  color: #00703c;
-  background-color: rgba(0, 112, 60, 0.12);
-  padding: 0 24px;
-  border-radius: 11px;
-}
-
-.complain-no-cell-text {
-  margin-top: "4px";
-  color: "#505A5F";
-}
-
-.search-error-label {
-  @apply font-bold text-legend text-error mb-sm !important;
-}
-
-.inbox-action-container {
-  display: flex;
-  justify-content: flex-end;
-  align-items: flex-start;
-}
-.complaint-links-container .header .removeHeight {
-  line-height: 28px;
-}
-
-/* Mobile view styles for complaint input container */
-@media only screen and (max-width: 640px) {
-  .complaint-input-container {
-    display: flex !important;
-    flex-direction: column !important;
-  }
-}
-
-@screen dt {
-  .complaint-links-container .header .removeBorderRadiusLogo {
-    border-radius: 2px !important;
-    background-color: #a82227;
-  }
-}
-@screen dt {
-  .customEmployeeCard {
-    width: 320px !important;
-    height: 220px !important;
-    padding: 0px !important;
-  }
-}
-
-.employeeTotalLink {
-  color: #a82227;
-  font-size: 12px;
-}
-
-@screen dt {
-  .groupBill-custom {
-    .custom-group-merge-container {
-      display: flex !important;
-      justify-content: space-between !important;
-      .header {
-        display: flex;
-        align-items: baseline;
-        .logo {
-          margin-right: 1rem;
-          svg {
-            path {
-              fill: #a82227;
-            }
-          }
-        }
-        .h1 {
-          font-size: 24px;
-          line-height: 28px;
-          font-weight: 400;
-          color: #a82227;
-        }
-      }
-    }
-    .inbox-container {
-      .search-container {
-        .search-complaint-container {
-          display: flex;
-          flex-direction: row;
-        }
-        .group-complaint-input-container {
-          width: 33% !important;
-          display: flex;
-          flex-direction: column;
-        }
-      }
-    }
-    .inbox-action-container {
-      display: flex;
-      flex-direction: row-reverse;
-      .clear-search {
-        margin-top: 65px;
-        margin-left: 16px;
-        padding-top: unset !important;
-      }
-      .submit-bar-search {
-        margin-top: 55px !important;
-      }
-    }
-  }
-}
-
-@screen dt {
-  .groupBill-custom {
-    .custom-group-merge-container {
-      display: flex !important;
-      justify-content: space-between !important;
-      .header {
-        display: flex;
-        align-items: baseline;
-        .logo {
-          margin-right: 1rem;
-          svg {
-            path {
-              fill: #a82227;
-            }
-          }
-        }
-        .h1 {
-          font-size: 24px;
-          line-height: 28px;
-          font-weight: 400;
-          color: #a82227;
-        }
-      }
-    }
-    .inbox-container {
-      .search-container {
-        .search-complaint-container {
-          display: flex;
-          flex-direction: row;
-        }
-        .group-complaint-input-container {
-          width: 33% !important;
-          display: flex;
-          flex-direction: column;
-        }
-      }
-    }
-    .inbox-action-container {
-      display: flex;
-      flex-direction: row-reverse;
-      .clear-search {
-        margin-top: 65px;
-        margin-left: 16px;
-        padding-top: unset !important;
-      }
-      .submit-bar-search {
-        margin-top: 55px !important;
-      }
-    }
-  }
-}
-
-.inboxLinksFSM {
-  margin: 0 !important;
-}
-.complaint-links-container .body .link {
-  color: #2947a3 !important;
-}
-
-.employee .customEmployeeCard:nth-child(odd) {
-  .employeeCustomCard {
-    background-color: white;
-    background-size: cover;
-  }
-}
-.employee .customEmployeeCard:nth-child(even) {
-  .employeeCustomCard {
-    background-color: white;
-    background-size: cover;
-  }
-}
-.employee .employeeCustomCard {
-  border-radius: 4%;
-  .employeeCustomCard {
-    border-radius: 4%;
-  }
-}
-.employee-card-banner {
-  background-color: white;
-  width: 88%;
-  margin: 0 auto;
-  bottom: 0px;
-  position: absolute;
-  margin-bottom: -10%;
-  left: 6%;
-  border-radius: 10px;
-}
-.text-employee-card {
-  font-size: 1.5rem;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-  position: absolute;
-  top: 10%;
-  padding-left: 10%;
-  color: black !important;
-  width: 300px;
-}
-
-.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;
-  }
-}
-
-.search-tabs-container {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-  margin-bottom: 35px;
-  display: flex;
-  justify-content: space-between;
-
-  .search-tab-head {
-    padding: 10px 35px;
-  }
-
-  .search-tab-head-selected {
-    padding: 10px 35px;
-    color: rgb(244, 119, 56);
-    border-bottom: 4px solid rgb(244, 119, 56);
-    font-weight: bold;
-  }
-
-  .search-tab-head-selected:focus {
-    outline: 0;
-  }
-}
-
-.card-with-background {
-  background: rgb(250, 250, 250);
-  border: 1px solid rgb(214, 213, 212);
-
-  .card-head {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 30px;
-  }
-
-  h2 {
-    font-size: 16px;
-    font-weight: 700;
-  }
-}
-
-.registryTable {
-  tHead {
-    tr {
-      th {
-        text-align: left;
-      }
-    }
-  }
-  tBody {
-    tr {
-      td {
-        text-align: left;
-      }
-    }
-  }
-}
-@media only screen and (max-width: 640px) {
-  .dashboardCardTypeOne {
-    border-top: 5px solid #2947a3;
-    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.15);
-    background: #ffffff;
-    height: 188px;
-    padding: 16px 20px;
-    gap: 24px;
-    border-radius: 8px 0px 0px 0px;
-    border-top: 5px solid hsl(225, 60%, 40%);
-    opacity: 1;
-    width: 87%;
-  }
-
-  .dashboardCardTypeOneHeader {
-    color: #14346d;
-    font-family: Roboto;
-    font-size: 20px;
-    font-weight: 500;
-    line-height: 24px;
-    text-align: center;
-    word-wrap: break-word;
-    margin-left: 10%;
-  }
-}
-@media only screen and (min-width: 641px) {
-  .dashboardCardTypeOne {
-    border-top: 5px solid #2947a3;
-    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.15);
-    background: #ffffff;
-    height: 188px;
-    padding: 16px 20px;
-    gap: 24px;
-    border-radius: 8px 0px 0px 0px;
-    border-top: 5px solid hsl(225, 60%, 40%);
-    opacity: 1;
-    width: 100%;
-  }
-
-  .dashboardCardTypeOneHeader {
-    color: #14346d;
-    font-family: Roboto;
-    font-size: 20px;
-    font-weight: 500;
-    line-height: 24px;
-    text-align: left;
-  }
-}
-.mCollect-filter{
-  padding: 1rem !important;
-}
-.filter-card{
-  padding: 1rem !important;
-}
-
-.employee-quick-service-link {
-  text-decoration: none;
-  display: block;
-}
-
-.employee-quick-service-card {
-  display: flex;
-  align-items: stretch;
-  border-radius: 16px;
-  overflow: hidden;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  transform: translateY(0) scale(1);
-  background: white;
-  position: relative;
-  border: 2px solid transparent;
-  width: 400px;
-  height: 140px;
-  min-height: 140px;
-  max-height: 140px;
-
-  @media (max-width: 768px) {
-    width: 100%;
-    height: 120px;
-    min-height: 120px;
-    max-height: 120px;
-  }
-
-  &.hovered {
-    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
-    transform: translateY(-4px) scale(1.02);
-    border: 2px solid rgba(79, 101, 216, 0.3);
-  }
-}
-
-.card-icon-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-width: 120px;
-  width: 120px;
-  padding: 24px;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  position: relative;
-  overflow: hidden;
-
-  @media (max-width: 768px) {
-    min-width: 80px;
-    width: 80px;
-    padding: 16px;
-  }
-  .employee-quick-service-link {
-    width: 100%;
-    
-  }
-}
-
-.card-background-circle {
-  position: absolute;
-  width: 150px;
-  height: 150px;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 50%;
-  top: -50px;
-  right: -50px;
-  transition: transform 0.5s ease;
-  transform: scale(1);
-
-  @media (max-width: 768px) {
-    width: 100px;
-    height: 100px;
-    top: -40px;
-    right: -40px;
-  }
-
-  .hovered & {
-    transform: scale(1.5);
-  }
-}
-
-.card-icon-wrapper {
-  transform: scale(1) rotate(0deg);
-  transition: transform 0.3s ease;
-  z-index: 1;
-  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
-
-  .hovered & {
-    transform: scale(1.15) rotate(5deg);
-  }
-}
-
-.card-content-container {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 24px 32px;
-  background: white;
-
-  @media (max-width: 768px) {
-    padding: 16px 20px;
-  }
-}
-
-.card-text-content {
-  flex: 1;
-}
-
-.card-module-title {
-  font-size: 22px;
-  font-weight: 700;
-  color: #1a202c;
-  margin: 0;
-  line-height: 1.3;
-  transition: color 0.3s ease;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: normal;
-
-  @media (max-width: 768px) {
-    font-size: 16px;
-    white-space: nowrap;
-  }
-}
-
-.card-module-description {
-  font-size: 14px;
-  color: #718096;
-  margin: 6px 0 0 0;
-  font-weight: 400;
-  display: block;
-
-  @media (max-width: 768px) {
-    font-size: 12px;
-    display: none;
-  }
-}
-
-.card-arrow-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background: #f7fafc;
-  transition: all 0.3s ease;
-  transform: translateX(0);
-
-  @media (max-width: 768px) {
-    width: 32px;
-    height: 32px;
-  }
-
-  .hovered & {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    transform: translateX(4px);
-  }
-}
-
-.card-arrow-svg {
-  transition: transform 0.3s ease;
-  transform: translateX(0);
-
-  .hovered & {
-    transform: translateX(2px);
-  }
-}
-
-.card-arrow-path {
-  stroke: #4a5568;
-  stroke-width: 2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-
-  .hovered & {
-    stroke: white;
-  }
-}
-
-.card-shine-effect {
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
-  animation: shine 0.6s ease;
-  pointer-events: none;
-}
-
-@keyframes shine {
-  0% {
-    left: -100%;
-  }
-  100% {
-    left: 100%;
-  }
-}
+.complaint-links-container {
+  @apply bg-white;
+  border-radius: 4px;
+  .header {
+    @apply flex items-center border-b border-border justify-between;
+
+    .logo {
+      width: 56px;
+      height: 56px;
+      @apply bg-focus;
+      padding: 12px;
+      border-radius: 4px;
+      svg {
+        @apply w-8 h-8;
+      }
+    }
+
+    .text {
+      @apply pl-md text-heading-m font-bold;
+    }
+  }
+
+  .body {
+    padding: 10px;
+    @apply flex items-start flex-col;
+    margin-left: 46px;
+
+    .link {
+      @apply p-sm text-primary-main items-center;
+      display: flex !important;
+      color: #2947a3 !important;
+    }
+
+    .inbox-total {
+      padding: 4px;
+      display: table;
+      @apply whitespace-normal text-center text-white w-8 h-8 bg-primary-main rounded-full ml-xs;
+      background-color: #1359c8 !important;
+    }
+  }
+
+  .links-wrapper {
+    @apply pl-md py-sm text-text-btn;
+    .link {
+      padding: 0 !important;
+      padding-bottom: 4px !important;
+      color: #a82227 !important;
+      svg {
+        @apply ml-sm;
+      }
+    }
+  }
+}
+
+.complaint-header {
+  display: flex;
+  @apply flex justify-between w-full;
+  margin-bottom: 20px;
+}
+
+.MobilePopupHeadingWrapper {
+  @apply flex place-content-between mb-md;
+  h2 {
+    @apply text-heading-l font-bold;
+  }
+}
+
+.filter-button {
+  @apply text-primary-main;
+  &:hover {
+    @apply text-primary-dark cursor-pointer;
+  }
+}
+
+.employeeCard-info-box {
+  @apply flex justify-end ml-md;
+  background-color: #fafafa;
+  div {
+    margin-right: 32px;
+    span:nth-child(2) {
+      @apply font-bold;
+      color: #4f5a5f;
+    }
+  }
+  .employeeCard-info-data {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.filter-form {
+  .filter-card {
+    @apply bg-white min-h-full;
+    padding: 10px;
+    border-radius: 8px;
+    margin-bottom: 24px;
+
+    .heading {
+      justify-content: unset;
+      @apply flex;
+
+      .clearAll {
+        display: none;
+      }
+    }
+
+    .filter-label {
+      @apply font-bold text-heading-l flex gap-3;
+      padding-bottom: 6px;
+      svg {
+        fill: #0b0c0c;
+      }
+    }
+    .sub-filter-label {
+      font-weight: 400;
+      font-size: 16px;
+    }
+  }
+  .filter-form-field {
+    p {
+      @apply text-form-field text-text-primary block mb-md;
+    }
+  }
+}
+
+.inbox-container {
+  .filters-container {
+    .filter {
+      .filter-card {
+        @apply bg-white;
+        padding: 10px;
+        padding-bottom: 50px;
+        .filter-card-close-button {
+          @apply flex flex-row-reverse;
+        }
+        .heading {
+          @apply flex justify-between;
+
+          .clearAll {
+            display: none;
+          }
+        }
+
+        .filter-label {
+          @apply text-heading-m block flex gap-3 items-center;
+          padding-bottom: 6px;
+          svg {
+            fill: #0b0c0c;
+          }
+        }
+
+        .sub-filter-label {
+          font-weight: 400;
+          font-size: 16px;
+        }
+      }
+    }
+
+    .search-complaint-container {
+      padding: 1rem;
+      @apply items-center bg-white p-md;
+
+      .complaint-header {
+        display: flex;
+        justify-content: space-between;
+        padding-bottom: 1rem;
+      }
+
+      .complaint-input-container {
+        @apply w-full;
+        .complaint-input {
+          @apply flex flex-col;
+
+          .clear-search {
+            @apply text-focus;
+            display: none;
+            &:hover {
+              color: #003078;
+              cursor: pointer;
+            }
+          }
+        }
+
+        .mobile-input {
+        }
+      }
+    }
+  }
+
+  .status-container {
+    margin-bottom: 50px;
+  }
+}
+
+.clear-search,
+.clear-search .link-label {
+  @apply text-focus;
+  @apply block;
+  cursor: pointer;
+  &:hover {
+    color: #000;
+  }
+}
+.button-clear {
+  @apply text-focus text-body-s-dt;
+}
+
+.inbox-count {
+  @apply inline ml-sm p-sm bg-primary-main rounded-full text-white text-heading-s align-middle text-center font-regular;
+}
+
+@screen dt {
+  .complaint-links-container {
+    @apply bg-white;
+
+    .header {
+      @apply flex items-center border-b border-border;
+
+      .logo {
+        @apply bg-focus;
+        padding: 12px;
+        border-radius: 4px;
+      }
+
+      .text {
+        @apply pl-md text-heading-m-dt font-bold;
+      }
+    }
+
+    .body {
+      padding: 10px;
+      @apply flex items-start flex-col;
+      margin-left: 46px;
+
+      .link {
+        color: #a82227 !important;
+        @apply p-sm text-primary-main;
+      }
+    }
+  }
+
+  .inboxLinks {
+    margin: 0 !important;
+    padding: 0 !important;
+    .header {
+      border: none;
+      @apply justify-start;
+      .logo {
+        @apply bg-white;
+        svg {
+          path {
+            fill: #1359c8;
+          }
+        }
+      }
+    }
+    .body {
+      margin-left: 0;
+    }
+  }
+.filter-card{
+  padding: 1rem !important;
+}
+  .filter-form {
+    .filter-card {
+      @apply p-md bg-white;
+
+      .heading {
+        @apply flex justify-between;
+      }
+
+      .label {
+        @apply text-heading-s;
+      }
+    }
+  }
+
+  .inbox-container {
+    @apply flex;
+
+    .filters-container {
+      width: 270px;
+
+      .filter {
+        @apply mt-md;
+
+        .filter-card {
+          @apply p-md bg-white;
+
+          .heading {
+            @apply flex justify-between;
+          }
+
+          .label {
+            @apply text-heading-s;
+          }
+        }
+      }
+      .citizen-filter {
+        margin-top: unset;
+      }
+    }
+
+    .search-container {
+      padding:1rem !important;
+      .search-complaint-container {
+        margin: auto;
+        @apply flex flex-col items-start  mb-md bg-white p-md;
+
+        .complaint-input-container {
+          /* display: inline-block !important; */
+          display: grid !important;
+          grid-template-columns: 33.33% 33.33% 33.33%;
+          width:100% !important;
+
+          &.for-pt {
+            &.for-search {
+              grid-template-columns: 25% 25% 25% 25%;
+
+              .input-fields:nth-child(3n) {
+                @apply mr-md !important;
+              }
+
+              .input-fields:nth-child(4n) {
+                margin-right: 0 !important;
+              }
+
+              .search-submit-wrapper {
+                grid-column: 4/5;
+                /* margin-top: 56px;*/
+                max-width: unset;
+                margin-left: unset;
+              }
+            }
+          }
+
+          .search-submit-wrapper {
+            grid-column: 3/4;
+            margin-left: 50%;
+            max-width: 50%;
+            grid-column: 3/4;
+            @apply flex flex-col justify-center text-center;
+
+            .submit-bar-search {
+              margin-top: unset;
+              width: 100%;
+              margin-bottom: 20px;
+              margin-left: unset;
+              max-width: 100%;
+              width: 100%;
+            }
+          }
+
+          .input-fields {
+            /*width: calc(50% - 16px);*/
+
+            @apply inline-block mr-md !important;
+
+            .inbox-search-form-error {
+              padding-top: 0;
+              margin-top: 0;
+              @apply absolute;
+            }
+          }
+
+          .input-fields:nth-child(3n) {
+            margin-right: 0 !important;
+          }
+
+          .complaint-input {
+            @apply flex flex-col;
+
+            .clear-search {
+              @apply text-focus;
+              @apply block;
+              cursor: pointer;
+              &:hover {
+                color: #003078;
+                cursor: pointer;
+              }
+            }
+          }
+
+          .mobile-input {
+            @apply ml-sm;
+          }
+        }
+
+        .search-action-wrapper {
+          width: 33%;
+          margin-top: 28px;
+          @apply inline-block align-middle text-center;
+          button {
+            margin: 0;
+            width: 100%;
+            max-width: 300px !important;
+          }
+        }
+      }
+
+      .search-complaint-container-for-search {
+      }
+    }
+  }
+}
+
+.document-clear-all {
+  grid-area: 2/2;
+  display: flex;
+  justify-content: flex-end;
+  padding-right: 16px;
+  align-items: center;
+}
+
+.cell-text {
+  color: #505a5f;
+}
+
+.sla-cell-error {
+  color: #2947a3;
+  color: #a82227;
+  background-color: #f5fbff;
+  padding: 0 24px;
+  border-radius: 11px;
+}
+
+.sla-cell-success {
+  color: #00703c;
+  background-color: rgba(0, 112, 60, 0.12);
+  padding: 0 24px;
+  border-radius: 11px;
+}
+
+.complain-no-cell-text {
+  margin-top: "4px";
+  color: "#505A5F";
+}
+
+.search-error-label {
+  @apply font-bold text-legend text-error mb-sm !important;
+}
+
+.inbox-action-container {
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+}
+.complaint-links-container .header .removeHeight {
+  line-height: 28px;
+}
+
+/* Mobile view styles for complaint input container */
+@media only screen and (max-width: 640px) {
+  .complaint-input-container {
+    display: flex !important;
+    flex-direction: column !important;
+  }
+}
+
+@screen dt {
+  .complaint-links-container .header .removeBorderRadiusLogo {
+    border-radius: 2px !important;
+    background-color: #a82227;
+  }
+}
+@screen dt {
+  .customEmployeeCard {
+    width: 320px !important;
+    height: 220px !important;
+    padding: 0px !important;
+  }
+}
+
+.employeeTotalLink {
+  color: #a82227;
+  font-size: 12px;
+}
+
+@screen dt {
+  .groupBill-custom {
+    .custom-group-merge-container {
+      display: flex !important;
+      justify-content: space-between !important;
+      .header {
+        display: flex;
+        align-items: baseline;
+        .logo {
+          margin-right: 1rem;
+          svg {
+            path {
+              fill: #a82227;
+            }
+          }
+        }
+        .h1 {
+          font-size: 24px;
+          line-height: 28px;
+          font-weight: 400;
+          color: #a82227;
+        }
+      }
+    }
+    .inbox-container {
+      .search-container {
+        .search-complaint-container {
+          display: flex;
+          flex-direction: row;
+        }
+        .group-complaint-input-container {
+          width: 33% !important;
+          display: flex;
+          flex-direction: column;
+        }
+      }
+    }
+    .inbox-action-container {
+      display: flex;
+      flex-direction: row-reverse;
+      .clear-search {
+        margin-top: 65px;
+        margin-left: 16px;
+        padding-top: unset !important;
+      }
+      .submit-bar-search {
+        margin-top: 55px !important;
+      }
+    }
+  }
+}
+
+@screen dt {
+  .groupBill-custom {
+    .custom-group-merge-container {
+      display: flex !important;
+      justify-content: space-between !important;
+      .header {
+        display: flex;
+        align-items: baseline;
+        .logo {
+          margin-right: 1rem;
+          svg {
+            path {
+              fill: #a82227;
+            }
+          }
+        }
+        .h1 {
+          font-size: 24px;
+          line-height: 28px;
+          font-weight: 400;
+          color: #a82227;
+        }
+      }
+    }
+    .inbox-container {
+      .search-container {
+        .search-complaint-container {
+          display: flex;
+          flex-direction: row;
+        }
+        .group-complaint-input-container {
+          width: 33% !important;
+          display: flex;
+          flex-direction: column;
+        }
+      }
+    }
+    .inbox-action-container {
+      display: flex;
+      flex-direction: row-reverse;
+      .clear-search {
+        margin-top: 65px;
+        margin-left: 16px;
+        padding-top: unset !important;
+      }
+      .submit-bar-search {
+        margin-top: 55px !important;
+      }
+    }
+  }
+}
+
+.inboxLinksFSM {
+  margin: 0 !important;
+}
+.complaint-links-container .body .link {
+  color: #2947a3 !important;
+}
+
+.employee .customEmployeeCard:nth-child(odd) {
+  .employeeCustomCard {
+    background-color: white;
+    background-size: cover;
+  }
+}
+.employee .customEmployeeCard:nth-child(even) {
+  .employeeCustomCard {
+    background-color: white;
+    background-size: cover;
+  }
+}
+.employee .employeeCustomCard {
+  border-radius: 4%;
+  .employeeCustomCard {
+    border-radius: 4%;
+  }
+}
+.employee-card-banner {
+  background-color: white;
+  width: 88%;
+  margin: 0 auto;
+  bottom: 0px;
+  position: absolute;
+  margin-bottom: -10%;
+  left: 6%;
+  border-radius: 10px;
+}
+.text-employee-card {
+  font-size: 1.5rem;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  position: absolute;
+  top: 10%;
+  padding-left: 10%;
+  color: black !important;
+  width: 300px;
+}
+
+.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;
+  }
+}
+
+.search-tabs-container {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  margin-bottom: 35px;
+  display: flex;
+  justify-content: space-between;
+
+  .search-tab-head {
+    padding: 10px 35px;
+  }
+
+  .search-tab-head-selected {
+    padding: 10px 35px;
+    color: rgb(244, 119, 56);
+    border-bottom: 4px solid rgb(244, 119, 56);
+    font-weight: bold;
+  }
+
+  .search-tab-head-selected:focus {
+    outline: 0;
+  }
+}
+
+.card-with-background {
+  background: rgb(250, 250, 250);
+  border: 1px solid rgb(214, 213, 212);
+
+  .card-head {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 30px;
+  }
+
+  h2 {
+    font-size: 16px;
+    font-weight: 700;
+  }
+}
+
+.registryTable {
+  tHead {
+    tr {
+      th {
+        text-align: left;
+      }
+    }
+  }
+  tBody {
+    tr {
+      td {
+        text-align: left;
+      }
+    }
+  }
+}
+@media only screen and (max-width: 640px) {
+  .dashboardCardTypeOne {
+    border-top: 5px solid #2947a3;
+    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.15);
+    background: #ffffff;
+    height: 188px;
+    padding: 16px 20px;
+    gap: 24px;
+    border-radius: 8px 0px 0px 0px;
+    border-top: 5px solid hsl(225, 60%, 40%);
+    opacity: 1;
+    width: 87%;
+  }
+
+  .dashboardCardTypeOneHeader {
+    color: #14346d;
+    font-family: Roboto;
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 24px;
+    text-align: center;
+    word-wrap: break-word;
+    margin-left: 10%;
+  }
+}
+@media only screen and (min-width: 641px) {
+  .dashboardCardTypeOne {
+    border-top: 5px solid #2947a3;
+    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.15);
+    background: #ffffff;
+    height: 188px;
+    padding: 16px 20px;
+    gap: 24px;
+    border-radius: 8px 0px 0px 0px;
+    border-top: 5px solid hsl(225, 60%, 40%);
+    opacity: 1;
+    width: 100%;
+  }
+
+  .dashboardCardTypeOneHeader {
+    color: #14346d;
+    font-family: Roboto;
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 24px;
+    text-align: left;
+  }
+}
+.mCollect-filter{
+  padding: 1rem !important;
+}
+.filter-card{
+  padding: 1rem !important;
+}
+
+.employee-quick-service-link {
+  text-decoration: none;
+  display: block;
+}
+
+.employee-quick-service-card {
+  display: flex;
+  align-items: stretch;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transform: translateY(0) scale(1);
+  background: white;
+  position: relative;
+  border: 2px solid transparent;
+  width: 400px;
+  height: 140px;
+  min-height: 140px;
+  max-height: 140px;
+
+  @media (max-width: 768px) {
+    width: 100%;
+    height: 120px;
+    min-height: 120px;
+    max-height: 120px;
+  }
+
+  &.hovered {
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+    transform: translateY(-4px) scale(1.02);
+    border: 2px solid rgba(79, 101, 216, 0.3);
+  }
+}
+
+.card-icon-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 120px;
+  width: 120px;
+  padding: 24px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  position: relative;
+  overflow: hidden;
+
+  @media (max-width: 768px) {
+    min-width: 80px;
+    width: 80px;
+    padding: 16px;
+  }
+  .employee-quick-service-link {
+    width: 100%;
+    
+  }
+}
+
+.card-background-circle {
+  position: absolute;
+  width: 150px;
+  height: 150px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+  top: -50px;
+  right: -50px;
+  transition: transform 0.5s ease;
+  transform: scale(1);
+
+  @media (max-width: 768px) {
+    width: 100px;
+    height: 100px;
+    top: -40px;
+    right: -40px;
+  }
+
+  .hovered & {
+    transform: scale(1.5);
+  }
+}
+
+.card-icon-wrapper {
+  transform: scale(1) rotate(0deg);
+  transition: transform 0.3s ease;
+  z-index: 1;
+  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
+
+  .hovered & {
+    transform: scale(1.15) rotate(5deg);
+  }
+}
+
+.card-content-container {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24px 32px;
+  background: white;
+
+  @media (max-width: 768px) {
+    padding: 16px 20px;
+  }
+}
+
+.card-text-content {
+  flex: 1;
+}
+
+.card-module-title {
+  font-size: 22px;
+  font-weight: 700;
+  color: #1a202c;
+  margin: 0;
+  line-height: 1.3;
+  transition: color 0.3s ease;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+
+  @media (max-width: 768px) {
+    font-size: 16px;
+    white-space: nowrap;
+  }
+}
+
+.card-module-description {
+  font-size: 14px;
+  color: #718096;
+  margin: 6px 0 0 0;
+  font-weight: 400;
+  display: block;
+
+  @media (max-width: 768px) {
+    font-size: 12px;
+    display: none;
+  }
+}
+
+.card-arrow-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: #f7fafc;
+  transition: all 0.3s ease;
+  transform: translateX(0);
+
+  @media (max-width: 768px) {
+    width: 32px;
+    height: 32px;
+  }
+
+  .hovered & {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    transform: translateX(4px);
+  }
+}
+
+.card-arrow-svg {
+  transition: transform 0.3s ease;
+  transform: translateX(0);
+
+  .hovered & {
+    transform: translateX(2px);
+  }
+}
+
+.card-arrow-path {
+  stroke: #4a5568;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+
+  .hovered & {
+    stroke: white;
+  }
+}
+
+.card-shine-effect {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  animation: shine 0.6s ease;
+  pointer-events: none;
+}
+
+@keyframes shine {
+  0% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}