@pmidc/upyog-css 1.2.36-dev.1.21 → 1.2.36-dev.1.25

package/src/pages/employee/index.scss

@@ -1,734 +1,734 @@
-@import "./login.scss";
-/* TODO: convert using tailwind */
-.employee {
-  .breadcrumb {
-    @apply ml-sm mb-lg;
-  }
-  .ground-container {
-    margin-bottom: 56px;
-    margin-left: 0px;
-    margin-top: 5rem !important;
-    @apply flex flex-col;
-  }
-  .card-home {
-    font-size: 16px;
-    padding: 0 0 16px 0;
-    width: 92vw;
-    display: inline-block;
-    margin: 8px auto;
-  }
-  .home-action-cards {
-    height: auto !important;
-    min-height: 263px;
-  }
-  .topbar {
-    position: fixed;
-    top: 0;
-    width: 100%;
-    padding: 16px 24px;
-    background: #ffffff;
-    box-shadow: 0 1px 4px #b1b4b6;
-    z-index: 9999;
-
-    img {
-      display: inline;
-
-      &.city {
-        margin-right: 8px;
-        height: 48px;
-        width: 48px;
-      }
-
-      &.state {
-        height: 20px;
-        max-height: 20px;
-        width: auto;
-      }
-    }
-
-    .ulb {
-      font-weight: bold;
-    }
-
-    .right {
-      float: right;
-      margin-top: 12px;
-
-      .user-img-txt {
-        background: #a82227;
-        padding: 10px 15px;
-        border-radius: 50%;
-        color: white;
-        font-weight: 700;
-      }
-    }
-  }
-
-  .main {
-    padding: 10px;
-    
-  }
-
-  @media (min-width: 640px) {
-    .main {
-      padding-top: 26px !important;
-      margin-top: 0 !important;
-      padding: 0 !important;
-    }
-  }
-
-  .submit-bar header {
-    height: 2rem !important;
-    line-height: 2rem !important;
-    background-color: #003C71;
-  }
-
-  .loginContainer {
-    padding-top: 88px;
-    position: relative;
-  }
-
-  .loginnn {
-    position: relative;
-    max-width: 100%;
-    width: 100%;
-    min-width: 100%;
-  }
-  .loginnn .img {
-    position: absolute;
-    background-size: cover;
-    width: 100%;
-    max-width: 100%;
-    max-height: 100%;
-  }
-  .logoNiua {
-    display: flex;
-    width: 100%;
-    position: absolute;
-  }
-  .logoNiua .img {
-    width: 15%;
-    height: 15%;
-  }
-  .upyogLogo {
-    width: 100% !important;
-  }
-  .login-logo-wrapper {
-    min-width: 100%;
-    height: 100%;
-    position: absolute;
-    display: flex;
-    flex-direction: row;
-  }
-  .loginConference {
-    position: relative;
-    height: 100%;
-    width: 100%;
-    font-weight: 700;
-  }
-  .login-banner-wrapper {
-    position: relative;
-    color: white;
-    float: right;
-    z-index: 999;
-    height: 100%;
-    padding-top: 35vh;
-    margin-right: 2%;
-    text-align: right;
-    font-family: none;
-  }
-
-  .react-time-picker {
-    width: 100%;
-  }
-
-  .react-time-picker__wrapper {
-    border: 1px solid #464646;
-  }
-
-  .react-time-picker__clock {
-    display: none;
-  }
-
-  .react-time-picker__inputGroup__leadingZero {
-    padding-right: 8px;
-    display: inline !important;
-  }
-
-  .react-time-picker__inputGroup__input {
-    padding: 0;
-    min-width: none;
-    outline: none !important;
-    border: none !important;
-  }
-
-  .react-time-picker__wrapper {
-    padding-left: 8px;
-  }
-}
-#login-conference-table {
-  position: absolute;
-  z-index: 1;
-  width: 36vw;
-  height: 62vh;
-  margin-top: 20vh;
-  margin-left: 2vw;
-}
-.banner-slogan {
-  padding-top: 10%;
-}
-.psuedo-banner span {
-  color: #fdd049;
-}
-.login-banner-wrapper .psuedo-banner {
-  font-size: 2.2rem;
-}
-.login-banner-wrapper .banner-slogan {
-  font-size: 1.5rem;
-}
-.citizen {
-  .main {
-    padding-top: 56px;
-    min-height: calc(100vh - 48px);
-    display: flex !important;
-    justify-content: center;
-  }
-}
-.citizen,
-.employee {
-  .sidebar {
-    position: fixed;
-    left: 0;
-    height: calc(100vh - 36px);
-    color: #1f2937;
-    z-index: 999;
-    transition: 0.25s ease all;
-    white-space: nowrap;
-    padding-bottom: 5rem;
-    background: #ffffff;
-    border-right: 1px solid rgba(15, 23, 42, 0.06);
-    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
-    border-radius: 0 12px 12px 0;
-    backdrop-filter: blur(6px);
-    margin-top: 5rem;
-
-    .actions {
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      .tooltip {
-        margin-left: 4px;
-      }
-    }
-
-    svg {
-      width: 24px;
-      height: 24px;
-      fill: #626A6E;
-      transition: fill 0.18s ease;
-      margin-right: 0;
-      margin-left: 0;
-    }
-
-    a {
-      display: flex;
-      align-items: center;
-      text-decoration: none;
-    }
-
-    .sidebar-link {
-      display: flex;
-      color: #374151;
-      justify-content: space-between;
-      align-items: center;
-      padding: 12px 18px;
-      font-size: 14px;
-      border-left: 3px solid transparent;
-      border-radius: 8px;
-      margin: 4px 8px;
-      transition: all 0.18s ease;
-
-      &.active {
-        color: #003C71 !important;
-        background: #EEF4FF;
-        border-left-color: #003C71;
-        svg {
-          fill: #003C71 !important;
-        }
-        .nav-icon-box {
-          background-color: #003C71;
-          svg {
-            fill: #ffffff !important;
-          }
-        }
-      }
-
-      &:hover {
-        color: #003C71 !important;
-        background-color: rgba(0, 60, 113, 0.06);
-        border-left-color: rgba(0, 60, 113, 0.18);
-        cursor: pointer;
-        svg {
-          fill: #003C71 !important;
-        }
-        .nav-icon-box {
-          background-color: rgba(0, 60, 113, 0.12);
-        }
-      }
-
-      .employee-search-input {
-        border: none;
-        outline: none;
-        background-color: transparent;
-        margin-left: 13px;
-      }
-
-      .custom-link {
-        .tooltip {
-          margin-left: 8px;
-          span {
-            margin-left: unset !important;
-            left: unset !important;
-          }
-        }
-      }
-
-      .search-icon-wrapper {
-        svg {
-          fill: #6b7280 !important;
-          width: 20px;
-          height: 20px;
-          path {
-            fill: #6b7280 !important;
-          }
-        }
-      }
-
-      span {
-        margin-left: 0;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        max-width: calc(100% - 56px);
-        font-size: 13px;
-        font-weight: 500;
-      }
-    }
-
-    .dropdown-link {
-      height: 40px;
-      display: flex;
-      margin-left: 40px;
-      align-items: center;
-      text-decoration: none;
-      color: #374151;
-      font-size: 13px;
-      border-left: 2px solid transparent;
-      transition: all 0.18s ease;
-      .actions {
-        .tooltiptext {
-          left: unset;
-          right: 1%;
-        }
-      }
-      svg {
-        width: 16px;
-        height: 16px;
-        fill: #626A6E;
-      }
-      &:hover {
-        background: rgba(0, 60, 113, 0.05);
-        color: #003C71;
-        border-left-color: rgba(0, 60, 113, 0.25);
-      }
-      &.active {
-        color: #003C71;
-        font-weight: 600;
-        border-left-color: #003C71;
-        background: rgba(0, 60, 113, 0.04);
-      }
-    }
-
-    .nav-icon-box {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 32px;
-      height: 32px;
-      min-width: 32px;
-      border-radius: 8px;
-      background-color: #F0F4F9;
-      transition: background-color 0.18s ease;
-      svg {
-        width: 17px !important;
-        height: 17px !important;
-        margin: 0 !important;
-        fill: #626A6E;
-      }
-    }
-  }
-
-  .wrapperStyles {
-    margin-top: -5px;
-    padding-left: 20px;
-    padding-top: 10px;
-
-    .containerStyles {
-      border: 1px solid #505a5f;
-      padding: 16px;
-      margin-bottom: 20px;
-    }
-
-    &.leftBorder {
-      border-left: 2px solid rgba(0, 0, 0, 0.12);
-    }
-  }
-
-  .rowContainerStyles {
-    @apply flex flex-col;
-  }
-
-  .tableContainerStyles {
-    border: 1px solid #505a5f;
-    padding: 16px;
-    margin-bottom: 20px;
-  }
-
-  .historyTables {
-    display: grid;
-    grid-template-rows: 100px 100px;
-    grid-template-columns: repeat(5, minmax(100px, 1fr));
-  }
-
-  .historyContent {
-    margin: 0 10px;
-    position: relative;
-    padding-bottom: 5px;
-  }
-
-  .historyCheckpoint {
-    background-color: #fe7a51;
-    border-radius: 100%;
-    width: 18px;
-    height: 18px;
-    display: inline-block;
-    position: relative;
-    left: -9px;
-    top: 4px;
-
-    &.zIndex {
-      z-index: 10;
-    }
-  }
-
-  .historyTableDateLabel {
-    color: rgba(0, 0, 0, 0.87);
-    font-size: 16px;
-    font-weight: 700;
-    line-height: 17px;
-    text-align: left;
-    display: inline-block;
-    padding-top: 5px;
-  }
-
-  .bottomMargin {
-    margin-bottom: 0px;
-  }
-
-  .historyTableDate {
-    color: rgba(0, 0, 0, 0.87);
-    font-size: 19px;
-    font-weight: 400;
-    line-height: 17px;
-    text-align: left;
-    display: inline-block;
-    padding-top: 10px;
-  }
-
-  .historyHorizontalBar {
-    background-color: rgba(0, 0, 0, 0.12);
-    width: auto;
-    height: 2px;
-    margin-left: 16px;
-  }
-
-  .smallText {
-    font-weight: 500;
-    font-size: 14px;
-  }
-}
-
-.citizen {
-  .sidebar {
-    margin-top: 54px;
-    min-width: 200px;
-    .actions {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-  }
-}
-
-.link {
-  @apply text-primary-main cursor-pointer;
-
-  :hover {
-    @apply text-primary-dark;
-  }
-}
-
-.RightMostTopBarOptions {
-  @apply flex ;
-  display: flex;
-  .EventNotificationWrapper {
-    @apply relative cursor-pointer;
-    span {
-      top: -10px;
-      right: -10px;
-      @apply absolute bg-error h-5 w-5 rounded-full text-center;
-      p {
-        line-height: 20px;
-      }
-    }
-  }
-  .select-wrap {
-    margin-bottom: unset;
-    svg {
-      fill: #a82227;
-    }
-    .form-field, .field{
-      width: 100%;
-    }
-  }
-}
-
-.fullWidth {
-  width: 100%;
-}
-
-.multi-select-container {
-  .disposal-text {
-    @apply font-bold;
-  }
-
-  .disposal-info {
-    @apply my-md ml-sm;
-  }
-
-  .disposal-action-bar {
-    @apply flex justify-between items-center;
-  }
-}
-
-@screen dt {
-  .d-grid {
-    display: flex-root;
-    grid-template-columns: 250px 250px 250px 250px;
-    column-gap: 10px;
-    row-gap: 2px;
-    margin-left: -12px;
-  }
-}
-
-.m-auto {
-  margin: auto !important;
-}
-
-.mb-50 {
-  margin-bottom: 50px;
-}
-.mb-25 {
-  margin-bottom: 25px;
-}
-@media (min-width: 640px) {
-  .employee {
-    .ground-container {
-      margin-left: 0px !important;
-      @apply block ml-md;
-    }
-    .breadcrumb {
-      @apply mb-lg;
-      margin-left: 0;
-    }
-    .card-home {
-      width: 270px;
-      margin-right: 10px;
-      margin-bottom: 10px;
-    }
-    .card-home-hrms {
-      width: 405px;
-      padding: 0px;
-      margin-right: 16px;
-      margin-bottom: 16px;
-    }
-    .main {
-      display: flex;
-      flex-direction: column;
-      margin-left: 64px;
-      width: calc(100%-83px);
-    }
-    .citizen-home-container {
-      display: flex;
-      flex-direction: unset !important;
-      width: unset !important;
-      margin-left: unset !important;
-      padding-top: 58px;
-    }
-  }
-  #main-img {
-    content: url("https://in-egov-assets.s3.ap-south-1.amazonaws.com/images/employee-login.png");
-  }
-  .citizen {
-    .main {
-      width: 100%;
-      padding-top: 56px;
-      min-height: calc(100vh - 48px);
-      margin-bottom: 18px !important;
-      display: flex !important;
-    }
-
-    .center-container {
-    }
-  }
-}
-
-/* Mobile view - add margin-top to ground-container */
-@media only screen and (max-width: 639px) {
-  .employee .ground-container {
-    margin-top: 1rem;
-  } 
-}
-
-@media only screen and (max-width: 950px) {
-  #main-img {
-    content: url("https://i.postimg.cc/9Q7jT6Dd/Banner-Image-2.png");
-  }
-  #login-conference-table {
-    position: relative;
-    z-index: 1;
-    width: 75%;
-    height: 115%;
-    margin: 12%;
-    margin-top: 25%;
-  }
-  .loginConference {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    font-weight: 700;
-    display: flex;
-    flex-direction: column;
-  }
-  .employee .login-banner-wrapper {
-    padding-top: 0vh;
-  }
-  .psuedo-banner {
-    font-size: 4vw;
-  }
-  .banner-slogan {
-    font-size: 3.5vw;
-  }
-}
-
-@media screen and (min-width: 768) {
-  #login-conference-table {
-    position: absolute;
-    z-index: 1;
-    width: 40%;
-    height: 30%;
-    margin: 12%;
-    margin-top: 25%;
-  }
-}
-@media only screen and (max-width: 500px) {
-  #main-img {
-    content: url("https://i.postimg.cc/9Q7jT6Dd/Banner-Image-2.png");
-  }
-  #login-conference-table {
-    position: relative;
-    z-index: 1;
-    width: 75%;
-    height: 80%;
-    margin: 12%;
-    margin-top: 25%;
-  }
-  .loginConference {
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    font-weight: 700;
-    display: flex;
-    flex-direction: column;
-  }
-  .employee .psuedo-banner {
-    font-size: 1.2rem;
-  }
-  .employee .banner-slogan {
-    font-size: 0.8rem;
-  }
-}
-@media only screen and (min-width: 300px) {
-  .employee .card-home {
-    height: 220px;
-    border-radius: 12px;
-  }
-}
-
-.pageCard {
-  width: 100%;
-  height: 100%;
-  padding: 20px;
-  border-radius: 24px;
-  background: #ffffff;
-}
-
-.ndcFormCard {
-  max-width: 1200px;
-  margin: auto;
-  padding: 20px;
-  background: #fff;
-  border-radius: 10px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-
-  form {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 20px;
-
-    .surveydetailsform-wrapper {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-
-      label {
-        font-weight: bold;
-        margin-bottom: 5px;
-      }
-
-      input {
-        padding: 10px;
-        border: 1px solid #ccc;
-        border-radius: 5px;
-      }
-
-      p {
-        color: red;
-        font-size: 14px;
-      }
-    }
-  }
-
-  @media (max-width: 1024px) {
-    form {
-      grid-template-columns: repeat(2, 1fr);
-    }
-  }
-
-  @media (max-width: 768px) {
-    form {
-      grid-template-columns: 1fr;
-    }
-  }
+@import "./login.scss";
+/* TODO: convert using tailwind */
+.employee {
+  .breadcrumb {
+    @apply ml-sm mb-lg;
+  }
+  .ground-container {
+    margin-bottom: 56px;
+    margin-left: 0px;
+    margin-top: 5rem !important;
+    @apply flex flex-col;
+  }
+  .card-home {
+    font-size: 16px;
+    padding: 0 0 16px 0;
+    width: 92vw;
+    display: inline-block;
+    margin: 8px auto;
+  }
+  .home-action-cards {
+    height: auto !important;
+    min-height: 263px;
+  }
+  .topbar {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    padding: 16px 24px;
+    background: #ffffff;
+    box-shadow: 0 1px 4px #b1b4b6;
+    z-index: 9999;
+
+    img {
+      display: inline;
+
+      &.city {
+        margin-right: 8px;
+        height: 48px;
+        width: 48px;
+      }
+
+      &.state {
+        height: 20px;
+        max-height: 20px;
+        width: auto;
+      }
+    }
+
+    .ulb {
+      font-weight: bold;
+    }
+
+    .right {
+      float: right;
+      margin-top: 12px;
+
+      .user-img-txt {
+        background: #a82227;
+        padding: 10px 15px;
+        border-radius: 50%;
+        color: white;
+        font-weight: 700;
+      }
+    }
+  }
+
+  .main {
+    padding: 10px;
+    
+  }
+
+  @media (min-width: 640px) {
+    .main {
+      padding-top: 26px !important;
+      margin-top: 0 !important;
+      padding: 0 !important;
+    }
+  }
+
+  .submit-bar header {
+    height: 2rem !important;
+    line-height: 2rem !important;
+    background-color: #003C71;
+  }
+
+  .loginContainer {
+    padding-top: 88px;
+    position: relative;
+  }
+
+  .loginnn {
+    position: relative;
+    max-width: 100%;
+    width: 100%;
+    min-width: 100%;
+  }
+  .loginnn .img {
+    position: absolute;
+    background-size: cover;
+    width: 100%;
+    max-width: 100%;
+    max-height: 100%;
+  }
+  .logoNiua {
+    display: flex;
+    width: 100%;
+    position: absolute;
+  }
+  .logoNiua .img {
+    width: 15%;
+    height: 15%;
+  }
+  .upyogLogo {
+    width: 100% !important;
+  }
+  .login-logo-wrapper {
+    min-width: 100%;
+    height: 100%;
+    position: absolute;
+    display: flex;
+    flex-direction: row;
+  }
+  .loginConference {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    font-weight: 700;
+  }
+  .login-banner-wrapper {
+    position: relative;
+    color: white;
+    float: right;
+    z-index: 999;
+    height: 100%;
+    padding-top: 35vh;
+    margin-right: 2%;
+    text-align: right;
+    font-family: none;
+  }
+
+  .react-time-picker {
+    width: 100%;
+  }
+
+  .react-time-picker__wrapper {
+    border: 1px solid #464646;
+  }
+
+  .react-time-picker__clock {
+    display: none;
+  }
+
+  .react-time-picker__inputGroup__leadingZero {
+    padding-right: 8px;
+    display: inline !important;
+  }
+
+  .react-time-picker__inputGroup__input {
+    padding: 0;
+    min-width: none;
+    outline: none !important;
+    border: none !important;
+  }
+
+  .react-time-picker__wrapper {
+    padding-left: 8px;
+  }
+}
+#login-conference-table {
+  position: absolute;
+  z-index: 1;
+  width: 36vw;
+  height: 62vh;
+  margin-top: 20vh;
+  margin-left: 2vw;
+}
+.banner-slogan {
+  padding-top: 10%;
+}
+.psuedo-banner span {
+  color: #fdd049;
+}
+.login-banner-wrapper .psuedo-banner {
+  font-size: 2.2rem;
+}
+.login-banner-wrapper .banner-slogan {
+  font-size: 1.5rem;
+}
+.citizen {
+  .main {
+    padding-top: 56px;
+    min-height: calc(100vh - 48px);
+    display: flex !important;
+    justify-content: center;
+  }
+}
+.citizen,
+.employee {
+  .sidebar {
+    position: fixed;
+    left: 0;
+    height: calc(100vh - 36px);
+    color: #1f2937;
+    z-index: 999;
+    transition: 0.25s ease all;
+    white-space: nowrap;
+    padding-bottom: 5rem;
+    background: #ffffff;
+    border-right: 1px solid rgba(15, 23, 42, 0.06);
+    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
+    border-radius: 0 12px 12px 0;
+    backdrop-filter: blur(6px);
+    margin-top: 5rem;
+
+    .actions {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      .tooltip {
+        margin-left: 4px;
+      }
+    }
+
+    svg {
+      width: 24px;
+      height: 24px;
+      fill: #626A6E;
+      transition: fill 0.18s ease;
+      margin-right: 0;
+      margin-left: 0;
+    }
+
+    a {
+      display: flex;
+      align-items: center;
+      text-decoration: none;
+    }
+
+    .sidebar-link {
+      display: flex;
+      color: #374151;
+      justify-content: space-between;
+      align-items: center;
+      padding: 12px 18px;
+      font-size: 14px;
+      border-left: 3px solid transparent;
+      border-radius: 8px;
+      margin: 4px 8px;
+      transition: all 0.18s ease;
+
+      &.active {
+        color: #003C71 !important;
+        background: #EEF4FF;
+        border-left-color: #003C71;
+        svg {
+          fill: #003C71 !important;
+        }
+        .nav-icon-box {
+          background-color: #003C71;
+          svg {
+            fill: #ffffff !important;
+          }
+        }
+      }
+
+      &:hover {
+        color: #003C71 !important;
+        background-color: rgba(0, 60, 113, 0.06);
+        border-left-color: rgba(0, 60, 113, 0.18);
+        cursor: pointer;
+        svg {
+          fill: #003C71 !important;
+        }
+        .nav-icon-box {
+          background-color: rgba(0, 60, 113, 0.12);
+        }
+      }
+
+      .employee-search-input {
+        border: none;
+        outline: none;
+        background-color: transparent;
+        margin-left: 13px;
+      }
+
+      .custom-link {
+        .tooltip {
+          margin-left: 8px;
+          span {
+            margin-left: unset !important;
+            left: unset !important;
+          }
+        }
+      }
+
+      .search-icon-wrapper {
+        svg {
+          fill: #6b7280 !important;
+          width: 20px;
+          height: 20px;
+          path {
+            fill: #6b7280 !important;
+          }
+        }
+      }
+
+      span {
+        margin-left: 0;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        max-width: calc(100% - 56px);
+        font-size: 13px;
+        font-weight: 500;
+      }
+    }
+
+    .dropdown-link {
+      height: 40px;
+      display: flex;
+      margin-left: 40px;
+      align-items: center;
+      text-decoration: none;
+      color: #374151;
+      font-size: 13px;
+      border-left: 2px solid transparent;
+      transition: all 0.18s ease;
+      .actions {
+        .tooltiptext {
+          left: unset;
+          right: 1%;
+        }
+      }
+      svg {
+        width: 16px;
+        height: 16px;
+        fill: #626A6E;
+      }
+      &:hover {
+        background: rgba(0, 60, 113, 0.05);
+        color: #003C71;
+        border-left-color: rgba(0, 60, 113, 0.25);
+      }
+      &.active {
+        color: #003C71;
+        font-weight: 600;
+        border-left-color: #003C71;
+        background: rgba(0, 60, 113, 0.04);
+      }
+    }
+
+    .nav-icon-box {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      min-width: 32px;
+      border-radius: 8px;
+      background-color: #F0F4F9;
+      transition: background-color 0.18s ease;
+      svg {
+        width: 17px !important;
+        height: 17px !important;
+        margin: 0 !important;
+        fill: #626A6E;
+      }
+    }
+  }
+
+  .wrapperStyles {
+    margin-top: -5px;
+    padding-left: 20px;
+    padding-top: 10px;
+
+    .containerStyles {
+      border: 1px solid #505a5f;
+      padding: 16px;
+      margin-bottom: 20px;
+    }
+
+    &.leftBorder {
+      border-left: 2px solid rgba(0, 0, 0, 0.12);
+    }
+  }
+
+  .rowContainerStyles {
+    @apply flex flex-col;
+  }
+
+  .tableContainerStyles {
+    border: 1px solid #505a5f;
+    padding: 16px;
+    margin-bottom: 20px;
+  }
+
+  .historyTables {
+    display: grid;
+    grid-template-rows: 100px 100px;
+    grid-template-columns: repeat(5, minmax(100px, 1fr));
+  }
+
+  .historyContent {
+    margin: 0 10px;
+    position: relative;
+    padding-bottom: 5px;
+  }
+
+  .historyCheckpoint {
+    background-color: #fe7a51;
+    border-radius: 100%;
+    width: 18px;
+    height: 18px;
+    display: inline-block;
+    position: relative;
+    left: -9px;
+    top: 4px;
+
+    &.zIndex {
+      z-index: 10;
+    }
+  }
+
+  .historyTableDateLabel {
+    color: rgba(0, 0, 0, 0.87);
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 17px;
+    text-align: left;
+    display: inline-block;
+    padding-top: 5px;
+  }
+
+  .bottomMargin {
+    margin-bottom: 0px;
+  }
+
+  .historyTableDate {
+    color: rgba(0, 0, 0, 0.87);
+    font-size: 19px;
+    font-weight: 400;
+    line-height: 17px;
+    text-align: left;
+    display: inline-block;
+    padding-top: 10px;
+  }
+
+  .historyHorizontalBar {
+    background-color: rgba(0, 0, 0, 0.12);
+    width: auto;
+    height: 2px;
+    margin-left: 16px;
+  }
+
+  .smallText {
+    font-weight: 500;
+    font-size: 14px;
+  }
+}
+
+.citizen {
+  .sidebar {
+    margin-top: 54px;
+    min-width: 200px;
+    .actions {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+  }
+}
+
+.link {
+  @apply text-primary-main cursor-pointer;
+
+  :hover {
+    @apply text-primary-dark;
+  }
+}
+
+.RightMostTopBarOptions {
+  @apply flex ;
+  display: flex;
+  .EventNotificationWrapper {
+    @apply relative cursor-pointer;
+    span {
+      top: -10px;
+      right: -10px;
+      @apply absolute bg-error h-5 w-5 rounded-full text-center;
+      p {
+        line-height: 20px;
+      }
+    }
+  }
+  .select-wrap {
+    margin-bottom: unset;
+    svg {
+      fill: #a82227;
+    }
+    .form-field, .field{
+      width: 100%;
+    }
+  }
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+.multi-select-container {
+  .disposal-text {
+    @apply font-bold;
+  }
+
+  .disposal-info {
+    @apply my-md ml-sm;
+  }
+
+  .disposal-action-bar {
+    @apply flex justify-between items-center;
+  }
+}
+
+@screen dt {
+  .d-grid {
+    display: flex-root;
+    grid-template-columns: 250px 250px 250px 250px;
+    column-gap: 10px;
+    row-gap: 2px;
+    margin-left: -12px;
+  }
+}
+
+.m-auto {
+  margin: auto !important;
+}
+
+.mb-50 {
+  margin-bottom: 50px;
+}
+.mb-25 {
+  margin-bottom: 25px;
+}
+@media (min-width: 640px) {
+  .employee {
+    .ground-container {
+      margin-left: 0px !important;
+      @apply block ml-md;
+    }
+    .breadcrumb {
+      @apply mb-lg;
+      margin-left: 0;
+    }
+    .card-home {
+      width: 270px;
+      margin-right: 10px;
+      margin-bottom: 10px;
+    }
+    .card-home-hrms {
+      width: 405px;
+      padding: 0px;
+      margin-right: 16px;
+      margin-bottom: 16px;
+    }
+    .main {
+      display: flex;
+      flex-direction: column;
+      margin-left: 64px;
+      width: calc(100%-83px);
+    }
+    .citizen-home-container {
+      display: flex;
+      flex-direction: unset !important;
+      width: unset !important;
+      margin-left: unset !important;
+      padding-top: 58px;
+    }
+  }
+  #main-img {
+    content: url("https://in-egov-assets.s3.ap-south-1.amazonaws.com/images/employee-login.png");
+  }
+  .citizen {
+    .main {
+      width: 100%;
+      padding-top: 56px;
+      min-height: calc(100vh - 48px);
+      margin-bottom: 18px !important;
+      display: flex !important;
+    }
+
+    .center-container {
+    }
+  }
+}
+
+/* Mobile view - add margin-top to ground-container */
+@media only screen and (max-width: 639px) {
+  .employee .ground-container {
+    margin-top: 1rem;
+  } 
+}
+
+@media only screen and (max-width: 950px) {
+  #main-img {
+    content: url("https://i.postimg.cc/9Q7jT6Dd/Banner-Image-2.png");
+  }
+  #login-conference-table {
+    position: relative;
+    z-index: 1;
+    width: 75%;
+    height: 115%;
+    margin: 12%;
+    margin-top: 25%;
+  }
+  .loginConference {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    font-weight: 700;
+    display: flex;
+    flex-direction: column;
+  }
+  .employee .login-banner-wrapper {
+    padding-top: 0vh;
+  }
+  .psuedo-banner {
+    font-size: 4vw;
+  }
+  .banner-slogan {
+    font-size: 3.5vw;
+  }
+}
+
+@media screen and (min-width: 768) {
+  #login-conference-table {
+    position: absolute;
+    z-index: 1;
+    width: 40%;
+    height: 30%;
+    margin: 12%;
+    margin-top: 25%;
+  }
+}
+@media only screen and (max-width: 500px) {
+  #main-img {
+    content: url("https://i.postimg.cc/9Q7jT6Dd/Banner-Image-2.png");
+  }
+  #login-conference-table {
+    position: relative;
+    z-index: 1;
+    width: 75%;
+    height: 80%;
+    margin: 12%;
+    margin-top: 25%;
+  }
+  .loginConference {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    font-weight: 700;
+    display: flex;
+    flex-direction: column;
+  }
+  .employee .psuedo-banner {
+    font-size: 1.2rem;
+  }
+  .employee .banner-slogan {
+    font-size: 0.8rem;
+  }
+}
+@media only screen and (min-width: 300px) {
+  .employee .card-home {
+    height: 220px;
+    border-radius: 12px;
+  }
+}
+
+.pageCard {
+  width: 100%;
+  height: 100%;
+  padding: 20px;
+  border-radius: 24px;
+  background: #ffffff;
+}
+
+.ndcFormCard {
+  max-width: 1200px;
+  margin: auto;
+  padding: 20px;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+
+  form {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+
+    .surveydetailsform-wrapper {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+
+      label {
+        font-weight: bold;
+        margin-bottom: 5px;
+      }
+
+      input {
+        padding: 10px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+      }
+
+      p {
+        color: red;
+        font-size: 14px;
+      }
+    }
+  }
+
+  @media (max-width: 1024px) {
+    form {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (max-width: 768px) {
+    form {
+      grid-template-columns: 1fr;
+    }
+  }
 }