@pmidc/upyog-css 1.1.11 → 1.1.13

package/dist/index.css

@@ -905,10 +905,10 @@ body {
   margin-bottom: 16px;
   margin-left: 16px; }
 
+.app-container {
+  padding: 10px; }
+
 .link-label {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
@@ -992,6 +992,7 @@ body {
   width: -moz-fit-content;
   width: fit-content;
   color: #000;
+  margin-top: 3rem;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -1018,7 +1019,7 @@ body {
     width: 100%; }
   .app-container {
     width: 100%;
-    padding: 2rem; }
+    padding: 3rem; }
     .app-container form .card {
       max-width: 960px; }
       .app-container form .card .field-container {
@@ -1681,6 +1682,7 @@ body {
     font-size: 16px;
     color: #0f172a;
     margin-bottom: 8px;
+    margin-top: 8px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: .5px;
@@ -1698,6 +1700,8 @@ body {
     margin-bottom: 16px;
     text-transform: uppercase;
     letter-spacing: .3px; }
+    .card .card-label-desc.descStyle {
+      font-size: 16px !important; }
 
 .validation-error {
   display: block;
@@ -2121,19 +2125,58 @@ body {
   width: 100%;
   margin: 0; }
 
-.selector-button-primary:hover {
-  background-color: #1e3a8a !important;
-  opacity: .9; }
+.selector-button, .selector-button-primary, .selector-button-secondary {
+  color: #fff !important;
+  border: none !important;
+  border-radius: .375rem;
+  padding: .5rem 1rem;
+  font-family: Noto Sans,sans-serif;
+  font-weight: 500;
+  font-size: .875rem;
+  line-height: 1.25rem;
+  cursor: pointer;
+  -webkit-transition: all .2s ease;
+  transition: all .2s ease;
+  white-space: normal;
+  word-break: break-word;
+  word-wrap: break-word;
+  text-align: center;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  min-height: 40px;
+  max-height: 40px;
+  width: 30%;
+  margin: 0; }
+  .selector-button:hover, .selector-button-primary:hover, .selector-button-secondary:hover {
+    opacity: .9; }
+  .selector-button h2, .selector-button-primary h2, .selector-button-secondary h2 {
+    color: #fff !important;
+    font-size: 0.875rem !important;
+    line-height: 1.25rem !important;
+    font-weight: 500 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    width: 100%; }
+
+.selector-button-primary {
+  background-color: #2947a3 !important; }
+  .selector-button-primary:hover {
+    background-color: #1e3a8a !important; }
 
-.selector-button-primary h2 {
-  font-size: 0.875rem !important;
-  line-height: 1.25rem !important;
-  font-weight: 500 !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  width: 100%; }
+.selector-button-secondary {
+  background-color: #fff !important;
+  color: #2947a3 !important; }
+  .selector-button-secondary h2 {
+    color: #2947a3 !important; }
 
-.selector-button-border, .selector-button-primary {
+.selector-button-border {
   background-color: #2947a3 !important;
   color: #fff !important;
   border: none !important;
@@ -2163,21 +2206,19 @@ body {
   min-height: 40px;
   width: 30%;
   max-height: 40px;
-  margin: 0;
-  color: #fff !important;
-  border: none !important; }
-
-.selector-button-border:hover {
-  background-color: #1e3a8a !important;
-  opacity: .9; }
-
-.selector-button-border h2 {
-  font-size: 0.875rem !important;
-  line-height: 1.25rem !important;
-  font-weight: 500 !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  width: 100%; }
+  margin: 0; }
+  .selector-button-border:hover {
+    background-color: #1e3a8a !important;
+    opacity: .9; }
+  .selector-button-border h2 {
+    color: #fff !important;
+    font-size: 0.875rem !important;
+    line-height: 1.25rem !important;
+    font-weight: 500 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    border: none !important;
+    width: 100%; }
 
 .input-mirror-selector-button {
   height: 4rem !important;
@@ -2275,9 +2316,6 @@ body {
     border-radius: 9999px;
     display: block; }
   .radio-wrap label {
-    --text-opacity:1;
-    color: #0d43a7;
-    color: rgba(13, 67, 167, var(--text-opacity));
     font-size: 16px;
     line-height: 20px;
     margin-left: 16px; }
@@ -2486,12 +2524,13 @@ body {
       height: 100%;
       outline: 2px solid transparent;
       outline-offset: 2px;
-      padding-left: 8px; }
-    .select-wrap .select input[type=text], .select-wrap .select .checkbox-wrap .input-emp[type=text], .checkbox-wrap .select-wrap .select .input-emp[type=text], .select-wrap .select p {
       font-size: 16px;
-      line-height: 20px; }
+      line-height: 20px;
+      padding-left: 8px; }
     .select-wrap .select p {
       padding-top: 9px;
+      font-size: 16px;
+      line-height: 20px;
       --text-opacity:1;
       color: #0d43a7;
       color: rgba(13, 67, 167, var(--text-opacity));
@@ -2725,6 +2764,9 @@ body {
   border: 1px solid #d4351c;
   border-color: rgba(212, 53, 28, var(--border-opacity));
   line-height: 2.5rem;
+  --text-opacity:1;
+  color: #0d43a7;
+  color: rgba(13, 67, 167, var(--text-opacity));
   border-radius: 8px; }
 
 .card-textarea, .employee-card-input-error, .employee-card-textarea {
@@ -2737,10 +2779,7 @@ body {
   background-color: #fff;
   background-color: rgba(255, 255, 255, var(--bg-opacity));
   font-size: 16px;
-  line-height: 20px;
-  --text-opacity:1;
-  color: #0d43a7;
-  color: rgba(13, 67, 167, var(--text-opacity)); }
+  line-height: 20px; }
 
 .card-textarea, .employee-card-textarea {
   --border-opacity:1;
@@ -3073,7 +3112,9 @@ body {
   overflow: hidden;
   width: 100%;
   border-collapse: collapse;
-  padding-bottom: 0; }
+  padding-bottom: 0;
+  margin-top: 15px;
+  margin-bottom: 15px; }
 
 .employee-data-table .row {
   display: -webkit-box;
@@ -3563,7 +3604,10 @@ body {
     bottom: 45px;
     -webkit-box-shadow: rgba(0, 0, 0, 0.14) 0 8px 10px 1px, rgba(0, 0, 0, 0.12) 0 3px 14px 2px, rgba(0, 0, 0, 0.2) 0 5px 5px -3px;
     box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
-    width: calc(100% - 16px);
+    width: auto;
+    min-width: 200px;
+    max-width: calc(100% - 16px);
+    padding: 2px;
     right: 8px; }
     .action-bar-wrap .menu-wrap div {
       height: 3rem;
@@ -3685,13 +3729,19 @@ body {
   align-items: center;
   margin-left: 10px; }
 
+.table, .table-container {
+  max-width: 95vw;
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  margin-bottom: 15px; }
+
 .table {
   background: linear-gradient(135deg, #fff, #f8fafb);
-  width: 100%;
-  table-layout: fixed;
+  table-layout: auto;
   border-radius: 12px;
   border: 1px solid #e1e8f0;
-  overflow: hidden;
+  display: block;
   -webkit-box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
   border-collapse: initial;
@@ -3702,6 +3752,11 @@ body {
   transition: box-shadow .3s ease, -webkit-box-shadow .3s ease;
   transition: box-shadow .3s ease,-webkit-box-shadow .3s ease; }
 
+@media (min-width: 1024px) {
+  .table {
+    display: table;
+    overflow: hidden; } }
+
 .table:hover {
   -webkit-box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
   box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06); }
@@ -4604,7 +4659,7 @@ body {
   column-gap: 8px; }
 
 .topbar .employee-select-wrap, .topbar .select-wrap {
-  margin-bottom: 0; }
+  margin-bottom: 15px; }
 
 .topbar .employee-select-wrap .profile-dropdown--item span, .topbar .select-wrap .profile-dropdown--item span {
   white-space: pre; }
@@ -7522,6 +7577,7 @@ video::-webkit-media-controls-panel {
 .employee .ground-container {
   margin-bottom: 56px;
   margin-left: 0;
+  margin-top: 0;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -7573,7 +7629,13 @@ video::-webkit-media-controls-panel {
       font-weight: 700; }
 
 .employee .main {
-  padding-top: 88px; }
+  padding: 10px;
+  margin-top: 3rem; }
+
+@media (min-width: 640px) {
+  .employee .main {
+    margin-top: 0;
+    padding: 0; } }
 
 .employee .submit-bar header {
   height: 2rem !important;
@@ -7683,7 +7745,7 @@ video::-webkit-media-controls-panel {
   font-size: 1.5rem; }
 
 .citizen .main {
-  padding-top: 82px;
+  padding-top: 56px;
   min-height: calc(100vh - 48px);
   display: -webkit-box !important;
   display: -ms-flexbox !important;
@@ -7998,7 +8060,7 @@ video::-webkit-media-controls-panel {
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
-    padding-top: 80px;
+    padding-top: 56px;
     margin-left: 64px;
     width: calc(100% - 83px); }
   .employee .citizen-home-container, .employee .main {
@@ -8017,13 +8079,17 @@ video::-webkit-media-controls-panel {
     content: url(https://in-egov-assets.s3.ap-south-1.amazonaws.com/images/employee-login.png); }
   .citizen .main {
     width: 100%;
-    padding-top: 80px;
+    padding-top: 56px;
     min-height: calc(100vh - 48px);
     margin-bottom: 18px !important;
     display: -webkit-box !important;
     display: -ms-flexbox !important;
     display: flex !important; } }
 
+@media only screen and (max-width: 639px) {
+  .employee .ground-container {
+    margin-top: 36px; } }
+
 @media only screen and (max-width: 950px) {
   #main-img {
     content: url(https://i.postimg.cc/9Q7jT6Dd/Banner-Image-2.png); }
@@ -8094,17 +8160,15 @@ video::-webkit-media-controls-panel {
 .pageCard {
   width: 100%;
   height: 100%;
-  padding: 48px;
-  grid-gap: 48px;
-  gap: 48px;
-  border-radius: 24px;
+  border-radius: 24px; }
+
+.ndcFormCard, .pageCard {
+  padding: 20px;
   background: #fff; }
 
 .ndcFormCard {
   max-width: 1200px;
   margin: auto;
-  padding: 20px;
-  background: #fff;
   border-radius: 10px;
   -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }
@@ -8710,94 +8774,92 @@ video::-webkit-media-controls-panel {
             line-height: 24px; }
       .inbox-container .filters-container .citizen-filter {
         margin-top: unset; }
-    .inbox-container .search-container {
-      width: 874px; }
-      .inbox-container .search-container .search-complaint-container {
-        margin: auto;
-        -webkit-box-orient: vertical;
-        -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-        flex-direction: column;
-        -webkit-box-align: start;
-        -ms-flex-align: start;
-        align-items: flex-start;
-        margin-bottom: 16px;
-        --bg-opacity:1;
-        background-color: #fff;
-        background-color: rgba(255, 255, 255, var(--bg-opacity));
-        padding: 16px; }
-        .inbox-container .search-container .search-complaint-container .complaint-header {
-          -webkit-box-pack: justify;
-          -ms-flex-pack: justify;
-          justify-content: space-between;
-          width: 100%;
-          margin-bottom: 20px; }
-        .inbox-container .search-container .search-complaint-container .complaint-input-container {
-          display: grid !important;
-          grid-template-columns: 33.33% 33.33% 33.33%; }
-          .inbox-container .search-container .search-complaint-container .complaint-input-container.for-pt.for-search {
-            grid-template-columns: 25% 25% 25% 25%; }
-            .inbox-container .search-container .search-complaint-container .complaint-input-container.for-pt.for-search .input-fields:nth-child(3n) {
-              margin-right: 16px !important; }
-            .inbox-container .search-container .search-complaint-container .complaint-input-container.for-pt.for-search .input-fields:nth-child(4n) {
-              margin-right: 0 !important; }
-            .inbox-container .search-container .search-complaint-container .complaint-input-container.for-pt.for-search .search-submit-wrapper {
-              grid-column: 4/5;
-              max-width: unset;
-              margin-left: unset; }
-          .inbox-container .search-container .search-complaint-container .complaint-input-container .search-submit-wrapper {
-            margin-left: 50%;
-            max-width: 50%;
-            grid-column: 3/4;
-            -webkit-box-orient: vertical;
-            -webkit-box-direction: normal;
-            -ms-flex-direction: column;
-            flex-direction: column;
-            -webkit-box-pack: center;
-            -ms-flex-pack: center;
-            justify-content: center;
-            text-align: center; }
-            .inbox-container .search-container .search-complaint-container .complaint-input-container .search-submit-wrapper .submit-bar-search {
-              margin-top: unset;
-              margin-bottom: 20px;
-              margin-left: unset;
-              max-width: 100%;
-              width: 100%; }
-          .inbox-container .search-container .search-complaint-container .complaint-input-container .input-fields {
-            display: inline-block !important;
+    .inbox-container .search-container .search-complaint-container {
+      margin: auto;
+      -webkit-box-orient: vertical;
+      -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+      flex-direction: column;
+      -webkit-box-align: start;
+      -ms-flex-align: start;
+      align-items: flex-start;
+      margin-bottom: 16px;
+      --bg-opacity:1;
+      background-color: #fff;
+      background-color: rgba(255, 255, 255, var(--bg-opacity));
+      padding: 16px; }
+      .inbox-container .search-container .search-complaint-container .complaint-header {
+        -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+        justify-content: space-between;
+        width: 100%;
+        margin-bottom: 20px; }
+      .inbox-container .search-container .search-complaint-container .complaint-input-container {
+        display: grid !important;
+        grid-template-columns: 33.33% 33.33% 33.33%; }
+        .inbox-container .search-container .search-complaint-container .complaint-input-container.for-pt.for-search {
+          grid-template-columns: 25% 25% 25% 25%; }
+          .inbox-container .search-container .search-complaint-container .complaint-input-container.for-pt.for-search .input-fields:nth-child(3n) {
             margin-right: 16px !important; }
-            .inbox-container .search-container .search-complaint-container .complaint-input-container .input-fields .inbox-search-form-error {
-              padding-top: 0;
-              margin-top: 0;
-              position: absolute; }
-          .inbox-container .search-container .search-complaint-container .complaint-input-container .input-fields:nth-child(3n) {
+          .inbox-container .search-container .search-complaint-container .complaint-input-container.for-pt.for-search .input-fields:nth-child(4n) {
             margin-right: 0 !important; }
-          .inbox-container .search-container .search-complaint-container .complaint-input-container .complaint-input {
-            -webkit-box-orient: vertical;
-            -webkit-box-direction: normal;
-            -ms-flex-direction: column;
-            flex-direction: column; }
-            .inbox-container .search-container .search-complaint-container .complaint-input-container .complaint-input .clear-search {
-              --text-opacity:1;
-              color: #1359c8;
-              color: rgba(19, 89, 200, var(--text-opacity));
-              display: block;
-              cursor: pointer; }
-              .inbox-container .search-container .search-complaint-container .complaint-input-container .complaint-input .clear-search:hover {
-                color: #003078;
-                cursor: pointer; }
-          .inbox-container .search-container .search-complaint-container .complaint-input-container .mobile-input {
-            margin-left: 8px; }
-        .inbox-container .search-container .search-complaint-container .search-action-wrapper {
-          width: 33%;
-          margin-top: 28px;
-          display: inline-block;
-          vertical-align: middle;
+          .inbox-container .search-container .search-complaint-container .complaint-input-container.for-pt.for-search .search-submit-wrapper {
+            grid-column: 4/5;
+            max-width: unset;
+            margin-left: unset; }
+        .inbox-container .search-container .search-complaint-container .complaint-input-container .search-submit-wrapper {
+          margin-left: 50%;
+          max-width: 50%;
+          grid-column: 3/4;
+          -webkit-box-orient: vertical;
+          -webkit-box-direction: normal;
+          -ms-flex-direction: column;
+          flex-direction: column;
+          -webkit-box-pack: center;
+          -ms-flex-pack: center;
+          justify-content: center;
           text-align: center; }
-          .inbox-container .search-container .search-complaint-container .search-action-wrapper button {
-            margin: 0;
-            width: 100%;
-            max-width: 300px !important; } }
+          .inbox-container .search-container .search-complaint-container .complaint-input-container .search-submit-wrapper .submit-bar-search {
+            margin-top: unset;
+            margin-bottom: 20px;
+            margin-left: unset;
+            max-width: 100%;
+            width: 100%; }
+        .inbox-container .search-container .search-complaint-container .complaint-input-container .input-fields {
+          display: inline-block !important;
+          margin-right: 16px !important; }
+          .inbox-container .search-container .search-complaint-container .complaint-input-container .input-fields .inbox-search-form-error {
+            padding-top: 0;
+            margin-top: 0;
+            position: absolute; }
+        .inbox-container .search-container .search-complaint-container .complaint-input-container .input-fields:nth-child(3n) {
+          margin-right: 0 !important; }
+        .inbox-container .search-container .search-complaint-container .complaint-input-container .complaint-input {
+          -webkit-box-orient: vertical;
+          -webkit-box-direction: normal;
+          -ms-flex-direction: column;
+          flex-direction: column; }
+          .inbox-container .search-container .search-complaint-container .complaint-input-container .complaint-input .clear-search {
+            --text-opacity:1;
+            color: #1359c8;
+            color: rgba(19, 89, 200, var(--text-opacity));
+            display: block;
+            cursor: pointer; }
+            .inbox-container .search-container .search-complaint-container .complaint-input-container .complaint-input .clear-search:hover {
+              color: #003078;
+              cursor: pointer; }
+        .inbox-container .search-container .search-complaint-container .complaint-input-container .mobile-input {
+          margin-left: 8px; }
+      .inbox-container .search-container .search-complaint-container .search-action-wrapper {
+        width: 33%;
+        margin-top: 28px;
+        display: inline-block;
+        vertical-align: middle;
+        text-align: center; }
+        .inbox-container .search-container .search-complaint-container .search-action-wrapper button {
+          margin: 0;
+          width: 100%;
+          max-width: 300px !important; } }
 
 .document-clear-all {
   grid-area: 2/2;
@@ -11617,7 +11679,8 @@ body {
 
 .HomePageContainer {
   width: 100%;
-  padding: 0; }
+  padding: 0;
+  margin-top: 3rem; }
   @media (min-width: 780px) {
     .HomePageContainer {
       display: -webkit-box;
@@ -12308,6 +12371,11 @@ body {
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical; }
 
+.no-width {
+  max-width: none;
+  min-width: 0;
+  width: auto; }
+
 .surveyListclockDiv {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -12423,7 +12491,7 @@ body {
     grid-gap: 1rem;
     gap: 1rem; }
   .surveydetailsform-wrapper .employee-card-input, .surveydetailsform-wrapper .employee-select-wrap {
-    margin-bottom: 0; }
+    margin-bottom: 30px; }
 
 .newSurveyForm_wrapper {
   display: grid;
@@ -14133,7 +14201,7 @@ body {
     grid-gap: 0;
     gap: 0; }
   .login-wrapper, .register-login-wrapper {
-    width: 60%; } }
+    width: 100%; } }
 
 @media (min-width: 769px) and (max-width: 1024px) {
   .lag-loc-wrapper {
@@ -16560,7 +16628,6 @@ body {
   font-size: 16px;
   font-weight: 600;
   line-height: 1.4;
-  color: #fff;
   word-break: break-word; }
 
 .survey-card-content {
@@ -17283,6 +17350,9 @@ body {
 .w-fullwidth {
   width: 100%; }
 
+.stepper {
+  padding: 10px; }
+
 .margin-unset {
   margin: unset !important; }
 
@@ -17337,6 +17407,9 @@ body {
   margin-top: 32;
   margin-left: auto; }
 
+.ws-citizen-wrapper {
+  padding: "15px"; }
+
 .application-details-link-button {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -17604,7 +17677,6 @@ body {
     text-indent: 2px; }
 
 .text-input {
-  position: relative;
   width: 100%; }
   .text-input input:hover, .text-input .checkbox-wrap .input-emp:hover, .checkbox-wrap .text-input .input-emp:hover {
     --border-opacity:1;
@@ -17615,7 +17687,11 @@ body {
   max-width: 540px; }
 
 .text-mobile-input-width {
-  max-width: 500px; }
+  max-width: 540px;
+  width: 100%; }
+
+.employeeCard, .text-mobile-input-width {
+  max-width: 100%; }
 
 .custom-time-picker {
   width: 100%;
@@ -17642,13 +17718,11 @@ body {
   -ms-flex-align: center;
   align-items: center; }
 
-.card-label-smaller {
-  width: 33.333333%;
+.card-label-APK, .card-label-smaller {
   margin-bottom: revert; }
 
 .card-label-APK {
   width: 33.333333%;
-  margin-bottom: revert;
   width: 100%; }
 
 .underline {
@@ -17726,6 +17800,10 @@ body {
       color: #fff;
       cursor: pointer; }
 
+.tl-citizen {
+  width: 100%;
+  padding: 10px; }
+
 .error-boundary details, .error-boundary summary {
   width: 300px;
   background-color: #da6464;
@@ -17773,6 +17851,72 @@ body {
     padding-left: 16px;
     padding-right: 16px; } }
 
+@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;
+    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !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 {
+    -webkit-box-orient: horizontal !important;
+    -webkit-box-direction: normal !important;
+    -ms-flex-direction: row !important;
+    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: -webkit-box !important;
+    display: -ms-flexbox !important;
+    display: flex !important;
+    -webkit-box-align: center !important;
+    -ms-flex-align: center !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-btn, .citizen-form-wrapper .link-button {
+    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;
@@ -17781,7 +17925,7 @@ body {
 
 @media (min-width: 780px) {
   .bill-citizen, .bills-citizen-wrapper, .citizen-all-services-wrapper, .citizen-obps-wrapper, .engagement-citizen-wrapper, .fsm-citizen-wrapper, .mcollect-citizen, .payer-bills-citizen-wrapper, .pgr-citizen-wrapper, .pt-citizen, .selection-card-wrapper, .tl-citizen, .ws-citizen-wrapper {
-    width: calc(100% - 219px);
+    width: 90%;
     padding-left: 16px;
     padding-right: 16px;
     margin-top: 3rem; } }
@@ -17975,7 +18119,7 @@ body {
   .stepper {
     display: grid !important; }
   .action-bar-wrap {
-    padding: 10px 0;
+    padding: 10px;
     text-align: center; }
   .submit-bar {
     font-size: 11px; } }
@@ -18130,3 +18274,261 @@ body {
 .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; }
+  .user-profile-section-wrapper.employee {
+    margin: 24px; }
+
+.user-profile-main-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  margin: 8px;
+  grid-gap: 0;
+  gap: 0;
+  -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  background: #fff;
+  border-radius: 12px;
+  max-width: 1200px;
+  overflow: hidden; }
+  @media (min-width: 768px) {
+    .user-profile-main-container {
+      margin-left: 16px;
+      margin-bottom: 16px;
+      margin-right: 16px;
+      margin-top: 16px;
+      grid-gap: 24px;
+      gap: 24px;
+      max-width: none; } }
+
+.user-profile-image-section {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: 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) {
+    .user-profile-image-section {
+      -webkit-box-flex: 0;
+      -ms-flex: 0;
+      flex: 0;
+      border-radius: 0; } }
+  .user-profile-image-section.employee {
+    border-radius: 0; }
+
+.user-profile-image-wrapper {
+  height: 160px;
+  width: 160px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column; }
+
+.user-profile-image {
+  height: 100%;
+  width: 100%;
+  border-radius: 50%;
+  border: 6px solid #fff;
+  -webkit-box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
+  -o-object-fit: cover;
+  object-fit: cover; }
+
+.user-profile-camera-button {
+  position: absolute;
+  bottom: -20px;
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  border: 4px solid #fff;
+  border-radius: 50%;
+  width: 56px;
+  height: 56px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  cursor: pointer;
+  -webkit-box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
+  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
+  -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  color: #fff; }
+  .user-profile-camera-button:hover {
+    -webkit-transform: translateY(-2px);
+    transform: translateY(-2px);
+    -webkit-box-shadow: 0 12px 28px rgba(102, 126, 234, 0.5);
+    box-shadow: 0 12px 28px rgba(102, 126, 234, 0.5); }
+  .user-profile-camera-button svg {
+    width: 24px;
+    height: 24px; }
+
+.user-profile-form-section {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  width: 100%;
+  background: #fafbfc;
+  padding: 32px;
+  grid-gap: 24px;
+  gap: 24px; }
+
+.user-profile-form-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 24px;
+  gap: 24px; }
+  @media (min-width: 768px) {
+    .user-profile-form-grid {
+      grid-template-columns: 1fr 1fr; } }
+
+.user-profile-field-wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  grid-gap: 6px;
+  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;
+  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;
+  -webkit-transition: color .2s ease;
+  transition: color .2s ease; }
+  .user-profile-change-password-link:hover {
+    color: #764ba2; }
+
+.user-profile-save-section-employee {
+  height: 88px;
+  background-color: #fff;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  margin-top: 0;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
+  padding: 16px 32px;
+  width: 100%; }
+  @media (max-width: 767px) {
+    .user-profile-save-section-employee {
+      -webkit-box-pack: center;
+      -ms-flex-pack: center;
+      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: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  grid-gap: 12px;
+  gap: 12px; }
+
+.user-profile-label-style-employee {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1a202c; }
+
+.user-profile-full-width {
+  width: 100%; }
+
+@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: 18px !important; }
+  .card-sub-header, .sub-header, h4 {
+    font-size: 16px !important; }
+  .card-section-header, h5, h6 {
+    font-size: 15px !important; }
+  .card-caption, .card-text, p {
+    font-size: 14px !important; } }