@pmidc/upyog-css 1.2.18 → 1.2.19

package/dist/index.css

@@ -898,7 +898,8 @@ body {
   margin-left: 16px; }
 
 .app-container {
-  padding: 10px; }
+  padding: 10px;
+  margin-top: 3rem; }
 
 .back-btn {
   width: -webkit-fit-content;
@@ -2219,8 +2220,14 @@ body {
 .BPAemployeeCard .employeeCard .card-label, .BPAemployeeCard .employeeCard .form-field, .obps-search-mobile-wrapper .form-field {
   width: 100% !important; }
 
+.ws-citizen-wrapper .app-container {
+  margin-top: 1rem !important;
+  padding: 0 !important; }
+
 @media (max-width: 768px) {
-  .chb-citizen .app-container, .mcollect-citizen .app-container, .pet-citizen .app-container {
+  .chb-citizen .app-container {
+    margin-top: 3rem !important; }
+  .ads-citizen .app-container, .mcollect-citizen .app-container, .pet-citizen .app-container {
     margin-top: 2rem !important; }
   .bills-citizen-wrapper {
     margin-top: 1rem !important;
@@ -7586,8 +7593,11 @@ video::-webkit-media-controls-panel {
   margin-top: 16px; }
 
 .document-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
   grid-gap: 16px;
   gap: 16px;
   padding: 8px; }
@@ -7653,6 +7663,36 @@ video::-webkit-media-controls-panel {
   color: #0b69a4;
   font-weight: 600; }
 
+@media only screen and (max-width: 768px) {
+  .document-container {
+    margin-top: 8px; }
+  .document-grid {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    grid-gap: 12px;
+    gap: 12px;
+    padding: 4px; }
+  .document-card {
+    padding: 8px;
+    min-height: 140px;
+    max-height: 140px;
+    width: 100%; }
+  .document-icon-wrapper {
+    width: 60px;
+    height: 70px;
+    margin-bottom: 6px; }
+  .document-name {
+    font-size: 10px;
+    line-height: 1.2;
+    margin-bottom: 4px;
+    text-align: center; }
+  .document-action-label {
+    font-size: 9px;
+    margin-top: 4px; } }
+
 .employee-login-page {
   min-height: 90vh;
   width: 100%;
@@ -7872,7 +7912,7 @@ video::-webkit-media-controls-panel {
 .employee .ground-container {
   margin-bottom: 56px;
   margin-left: 0;
-  margin-top: 0;
+  margin-top: 1rem !important;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -7924,13 +7964,12 @@ video::-webkit-media-controls-panel {
       font-weight: 700; }
 
 .employee .main {
-  padding: 10px;
-  margin-top: 3rem; }
+  padding: 10px; }
 
 @media (min-width: 640px) {
   .employee .main {
-    margin-top: 0;
-    padding: 0; } }
+    margin-top: 0 !important;
+    padding: 0 !important; } }
 
 .employee .submit-bar header {
   height: 2rem !important;
@@ -8355,7 +8394,6 @@ video::-webkit-media-controls-panel {
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
-    padding-top: 56px;
     margin-left: 64px;
     width: calc(100% - 83px); }
   .employee .citizen-home-container, .employee .main {
@@ -12756,6 +12794,9 @@ body {
   padding-top: 24px;
   padding-bottom: 24px; }
 
+.engagement-citizen-wrapper {
+  margin-top: 3rem !important; }
+
 .updatenumber-warper-citizen {
   min-height: 95vh;
   height: unset; }
@@ -13784,7 +13825,7 @@ body {
   flex-direction: column;
   grid-gap: 20px;
   gap: 20px;
-  margin: 20px; }
+  margin: 4rem 20px 20px; }
   .employee-dashboard-container .employee-dashboard-welcome-card {
     height: 160px;
     border-radius: 12px;
@@ -18132,6 +18173,237 @@ body {
     opacity: .5;
     cursor: not-allowed; }
 
+.employee-quick-service-link {
+  text-decoration: none;
+  display: block; }
+
+.employee-quick-service-card {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  border-radius: 16px;
+  overflow: hidden;
+  -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  -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);
+  -webkit-transform: translateY(0) scale(1);
+  transform: translateY(0) scale(1);
+  background: #fff;
+  position: relative;
+  border: 2px solid transparent;
+  width: 400px;
+  height: 140px;
+  min-height: 140px;
+  max-height: 140px; }
+  @media (max-width: 768px) {
+    .employee-quick-service-card {
+      width: 100%;
+      height: 120px;
+      min-height: 120px;
+      max-height: 120px; } }
+  .employee-quick-service-card.hovered {
+    -webkit-box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+    -webkit-transform: translateY(-4px) scale(1.02);
+    transform: translateY(-4px) scale(1.02);
+    border: 2px solid rgba(79, 101, 216, 0.3); }
+
+.card-icon-container {
+  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;
+  min-width: 120px;
+  width: 120px;
+  padding: 24px;
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  position: relative;
+  overflow: hidden; }
+  @media (max-width: 768px) {
+    .card-icon-container {
+      min-width: 80px;
+      width: 80px;
+      padding-left: 16px;
+      padding-bottom: 16px;
+      padding-right: 16px;
+      padding-top: 16px; } }
+  .card-icon-container .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;
+  -webkit-transition: -webkit-transform .5s ease;
+  transition: -webkit-transform .5s ease;
+  transition: transform .5s ease;
+  transition: transform .5s ease, -webkit-transform .5s ease;
+  transition: transform .5s ease,-webkit-transform .5s ease;
+  -webkit-transform: scale(1);
+  transform: scale(1); }
+  @media (max-width: 768px) {
+    .card-background-circle {
+      width: 100px;
+      height: 100px;
+      top: -40px;
+      right: -40px; } }
+  .hovered .card-background-circle {
+    -webkit-transform: scale(1.5);
+    transform: scale(1.5); }
+
+.card-icon-wrapper {
+  -webkit-transform: scale(1) rotate(0deg);
+  transform: scale(1) rotate(0deg);
+  -webkit-transition: -webkit-transform .3s ease;
+  transition: -webkit-transform .3s ease;
+  transition: transform .3s ease;
+  transition: transform .3s ease, -webkit-transform .3s ease;
+  transition: transform .3s ease,-webkit-transform .3s ease;
+  z-index: 1;
+  -webkit-filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
+  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2)); }
+  .hovered .card-icon-wrapper {
+    -webkit-transform: scale(1.15) rotate(5deg);
+    transform: scale(1.15) rotate(5deg); }
+
+.card-content-container {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  padding: 24px 32px;
+  background: #fff; }
+  @media (max-width: 768px) {
+    .card-content-container {
+      padding-left: 20px;
+      padding-bottom: 16px;
+      padding-right: 20px;
+      padding-top: 16px; } }
+
+.card-text-content {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1; }
+
+.card-module-title {
+  font-size: 22px;
+  font-weight: 700;
+  color: #1a202c;
+  margin: 0;
+  line-height: 1.3;
+  -webkit-transition: color .3s ease;
+  transition: color .3s ease;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal; }
+  @media (max-width: 768px) {
+    .card-module-title {
+      font-size: 16px;
+      white-space: nowrap; } }
+
+.card-module-description {
+  font-size: 14px;
+  color: #718096;
+  margin: 6px 0 0;
+  font-weight: 400;
+  display: block; }
+  @media (max-width: 768px) {
+    .card-module-description {
+      font-size: 12px;
+      display: none; } }
+
+.card-arrow-container {
+  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;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: #f7fafc;
+  -webkit-transition: all .3s ease;
+  transition: all .3s ease;
+  -webkit-transform: translateX(0);
+  transform: translateX(0); }
+  @media (max-width: 768px) {
+    .card-arrow-container {
+      width: 32px;
+      height: 32px; } }
+  .hovered .card-arrow-container {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    -webkit-transform: translateX(4px);
+    transform: translateX(4px); }
+
+.card-arrow-svg {
+  -webkit-transition: -webkit-transform .3s ease;
+  transition: -webkit-transform .3s ease;
+  transition: transform .3s ease;
+  transition: transform .3s ease, -webkit-transform .3s ease;
+  transition: transform .3s ease,-webkit-transform .3s ease;
+  -webkit-transform: translateX(0);
+  transform: translateX(0); }
+  .hovered .card-arrow-svg {
+    -webkit-transform: translateX(2px);
+    transform: translateX(2px); }
+
+.card-arrow-path {
+  stroke: #4a5568;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round; }
+  .hovered .card-arrow-path {
+    stroke: #fff; }
+
+.card-shine-effect {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(rgba(255, 255, 255, 0.3)), to(transparent));
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  -webkit-animation: shine .6s ease;
+  animation: shine .6s ease;
+  pointer-events: none; }
+
+@-webkit-keyframes shine {
+  0% {
+    left: -100%; }
+  to {
+    left: 100%; } }
+
+@keyframes shine {
+  0% {
+    left: -100%; }
+  to {
+    left: 100%; } }
+
 .display-none {
   display: none; }
 
@@ -18487,8 +18759,7 @@ body {
     text-indent: 2px; }
 
 .text-input {
-  width: 100%;
-  margin-bottom: 24px; }
+  width: 100%; }
   .text-input input:hover, .text-input .checkbox-wrap .input-emp:hover, .checkbox-wrap .text-input .input-emp:hover {
     --border-opacity:1;
     border: 1px solid #2947a3;
@@ -18732,7 +19003,7 @@ body {
     margin-top: 1rem; } }
 
 @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 {
+  .bill-citizen, .bills-citizen-wrapper, .citizen-all-services-wrapper, .citizen-obps-wrapper, .engagement-citizen-wrapper, .fsm-citizen-wrapper, .mcollect-citizen, .payer-bills-citizen-wrapper, .pt-citizen, .selection-card-wrapper, .tl-citizen, .ws-citizen-wrapper {
     width: 90%;
     padding-left: 16px;
     padding-right: 16px;
@@ -18902,9 +19173,6 @@ body {
 .ndc_label {
   padding-bottom: 20px; }
 
-.ndc_card_main {
-  padding: 25px; }
-
 .step-label {
   font-size: 12px !important; }