@pmidc/upyog-css 1.2.36-UAT.35 → 1.2.36-UAT.37

package/src/pages/citizen/citizenNewLogin.scss

@@ -1,371 +1,371 @@
-/* Main Container - Full height viewport */
-.login-page-cover {
-  width: 100%;
-  min-height: calc(100vh - 56px); /* Subtract TopBar height */
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  box-sizing: border-box;
-  /* Removed overflow: hidden to prevent scrolling issues */
-}
-
-/* Container - Full height split layout */
-.login-container {
-  width: 100%;
-  min-height: calc(100vh - 56px); /* Subtract TopBar height */
-  max-width: 100%;
-  display: flex;
-  background-color: #ffffff;
-  overflow: hidden;
-}
-
-/* Left Panel - Hero Section takes full height */
-.login-hero-panel {
-  flex: 1;
-  background: linear-gradient(135deg, #5b68f0 0%, #7b5fc7 100%);
-  color: white;
-  padding: 60px 50px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  overflow-y: auto;
-}
-
-.hero-content {
-  max-width: 500px;
-  text-align: center;
-}
-
-.hero-icon-circle {
-  width: 100px;
-  height: 100px;
-  border-radius: 50%;
-  background-color: rgba(255, 255, 255, 0.2);
-  border: 3px solid rgba(255, 255, 255, 0.3);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 auto 30px;
-  backdrop-filter: blur(10px);
-}
-
-.hero-icon-circle svg {
-  width: 50px;
-  height: 50px;
-  color: white;
-}
-
-.hero-title {
-  font-size: 2.5rem;
-  font-weight: 700;
-  margin-bottom: 20px;
-  line-height: 1.2;
-}
-
-.hero-description {
-  font-size: 1.125rem;
-  line-height: 1.6;
-  margin-bottom: 50px;
-  opacity: 0.95;
-}
-
-.hero-features {
-  display: flex;
-  justify-content: space-around;
-  gap: 30px;
-  margin-top: 40px;
-}
-
-.feature-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-}
-
-.feature-icon {
-  width: 70px;
-  height: 70px;
-  border-radius: 50%;
-  background-color: rgba(255, 255, 255, 0.15);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 2px solid rgba(255, 255, 255, 0.2);
-  transition: all 0.3s ease;
-}
-
-.feature-icon:hover {
-  background-color: rgba(255, 255, 255, 0.25);
-  transform: translateY(-5px);
-}
-
-.feature-icon svg {
-  color: white;
-}
-
-.feature-text {
-  font-size: 0.95rem;
-  font-weight: 500;
-  text-align: center;
-}
-
-/* Right Panel - Login Form with scrollable content */
-.login-form-panel {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #f5f5f5;
-  overflow-y: auto;
-  padding: 20px;
-}
-
-/* Login Wrapper - Matches reference image design */
-.login-wrapper {
-  width: 100%;
-  max-width: 480px;
-  background-color: #ffffff;
-  padding: 40px;
-  border-radius: 12px;
-  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
-}
-
-.login-form-header {
-  margin-bottom: 30px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    border-radius: 4px;
-    position: relative;
-}
-
-.login-title {
-  font-size: 2rem;
-  font-weight: 700;
-  color: #0b0c0c;
-  margin-bottom: 8px;
-}
-
-.login-subtitle {
-  font-size: 0.95rem;
-  color: #686677;
-  margin: 0;
-}
-
-/* Form Elements */
-.label {
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 25px;
-  color: #686677;
-  display: block;
-  margin-bottom: 8px;
-}
-
-.label span {
-  color: #ff1515;
-}
-
-.language-wrapper,
-.location-wrapper,
-.input-wrapper {
-  width: 100%;
-}
-
-.location-wrapper .select {
-  display: flex;
-  align-items: center;
-  border: 1px solid #b4b4b4 !important;
-  background-color: rgba(255, 255, 255, var(--bg-opacity));
-  border-radius: 8px;
-}
-
-.location-wrapper .select-active {
-  border-radius: 8px !important;
-}
-
-/* The shared Dropdown renders a wrapper and a text input. The wrapper owns the control border. */
-.location-wrapper .select-wrap .select,
-.location-wrapper .select-wrap .select-active {
-  box-sizing: border-box;
-}
-
-.location-wrapper .select-wrap .select input[type="text"],
-.location-wrapper .select-wrap .select-active input[type="text"] {
-  min-height: 0;
-  border: 0 !important;
-  border-radius: 0;
-  box-shadow: none !important;
-}
-
-.location-wrapper .select-wrap .select-active {
-  border: 1px solid #2563eb !important;
-  box-shadow: none !important;
-}
-
-.input-wrapper .submit-bar,
-.input-wrapper .submit-bar-disabled {
-  width: 100%;
-}
-
-.input-wrapper .card-label {
-  font-weight: 500 !important;
-  font-size: 16px !important;
-  line-height: 25px !important;
-  color: #686677 !important;
-}
-
-.input-wrapper.hide-submit-buttons + .submit-bar,
-.input-wrapper.hide-submit-buttons + .submit-bar-disabled {
-  display: none !important;
-}
-
-/* Account Link */
-.account-link {
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 25px;
-  text-align: center;
-  margin-top: 24px;
-  color: #0b0c0c;
-}
-
-.link {
-  color: #5b68f0;
-  text-decoration: none;
-  cursor: pointer;
-  font-weight: 500;
-  transition: color 0.2s ease;
-}
-
-.link:hover {
-  color: #7b5fc7;
-  text-decoration: underline;
-}
-
-/* OTP Section */
-.resendIn {
-  font-size: 16px;
-  font-weight: 500;
-  color: #686677;
-  text-align: right;
-}
-
-.resendIn span {
-  color: #5b68f0;
-}
-
-.resend {
-  text-align: right;
-  cursor: pointer;
-  font-weight: 700;
-  color: #5b68f0;
-}
-
-/* Register Login Wrapper - For registration page with same left panel */
-.register-login-wrapper {
-  width: 100%;
-  max-width: 480px;
-  background-color: #ffffff;
-  padding: 40px;
-  border-radius: 12px;
-  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
-  max-height: calc(100vh - 100px);
-  overflow-y: auto;
-}
-
-/* Right Panel - Login Form with scrollable content */
-.login-form-panel {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #f5f5f5;
-  overflow-y: auto;
-  padding: 20px;
-  min-height: calc(100vh - 56px);
-}
-
-/* Responsive Design - Hide left panel on tablets and mobile */
-@media (max-width: 1024px) {
-  .login-hero-panel {
-    display: none;
-  }
-
-  .login-container {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  }
-
-  .login-form-panel {
-    background: transparent;
-  }
-
-  .login-wrapper,
-  .register-login-wrapper {
-    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
-  }
-}
-
-@media (max-width: 768px) {
-  .login-wrapper,
-  .register-login-wrapper {
-    padding: 30px 24px;
-    max-width: 95%;
-  }
-
-  .login-title {
-    font-size: 1.75rem;
-  }
-
-  .login-subtitle {
-    font-size: 0.875rem;
-  }
-}
-
-@media (max-width: 480px) {
-  .login-wrapper,
-  .register-login-wrapper {
-    padding: 24px 20px;
-  }
-
-  .login-title {
-    font-size: 1.5rem;
-  }
-
-  .login-form-header {
-    margin-bottom: 24px;
-  }
-
-
-  .label,
-  .account-link {
-    font-size: 14px;
-  }
-    .lag-loc-wrapper {
-        flex-direction: column;
-        gap: 0px;
-    }
-    .login-wrapper{
-        width: 100%;
-    }
-    .register-login-wrapper{
-         width: 100%;
-    }
-}
-@media (min-width: 769px) and (max-width : 1024px) {
-    .lag-loc-wrapper {
-        flex-direction: column;
-        gap: 0px;
-    }
-    .login-wrapper{
-        width: 60%;
-    }
-    .register-login-wrapper{
-         width: 60%;
-    }
-}
+/* Main Container - Full height viewport */
+.login-page-cover {
+  width: 100%;
+  min-height: calc(100vh - 56px); /* Subtract TopBar height */
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+  /* Removed overflow: hidden to prevent scrolling issues */
+}
+
+/* Container - Full height split layout */
+.login-container {
+  width: 100%;
+  min-height: calc(100vh - 56px); /* Subtract TopBar height */
+  max-width: 100%;
+  display: flex;
+  background-color: #ffffff;
+  overflow: hidden;
+}
+
+/* Left Panel - Hero Section takes full height */
+.login-hero-panel {
+  flex: 1;
+  background: linear-gradient(135deg, #5b68f0 0%, #7b5fc7 100%);
+  color: white;
+  padding: 60px 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow-y: auto;
+}
+
+.hero-content {
+  max-width: 500px;
+  text-align: center;
+}
+
+.hero-icon-circle {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.2);
+  border: 3px solid rgba(255, 255, 255, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 30px;
+  backdrop-filter: blur(10px);
+}
+
+.hero-icon-circle svg {
+  width: 50px;
+  height: 50px;
+  color: white;
+}
+
+.hero-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 20px;
+  line-height: 1.2;
+}
+
+.hero-description {
+  font-size: 1.125rem;
+  line-height: 1.6;
+  margin-bottom: 50px;
+  opacity: 0.95;
+}
+
+.hero-features {
+  display: flex;
+  justify-content: space-around;
+  gap: 30px;
+  margin-top: 40px;
+}
+
+.feature-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.feature-icon {
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.15);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  transition: all 0.3s ease;
+}
+
+.feature-icon:hover {
+  background-color: rgba(255, 255, 255, 0.25);
+  transform: translateY(-5px);
+}
+
+.feature-icon svg {
+  color: white;
+}
+
+.feature-text {
+  font-size: 0.95rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+/* Right Panel - Login Form with scrollable content */
+.login-form-panel {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f5f5;
+  overflow-y: auto;
+  padding: 20px;
+}
+
+/* Login Wrapper - Matches reference image design */
+.login-wrapper {
+  width: 100%;
+  max-width: 480px;
+  background-color: #ffffff;
+  padding: 40px;
+  border-radius: 12px;
+  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
+}
+
+.login-form-header {
+  margin-bottom: 30px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    border-radius: 4px;
+    position: relative;
+}
+
+.login-title {
+  font-size: 2rem;
+  font-weight: 700;
+  color: #0b0c0c;
+  margin-bottom: 8px;
+}
+
+.login-subtitle {
+  font-size: 0.95rem;
+  color: #686677;
+  margin: 0;
+}
+
+/* Form Elements */
+.label {
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 25px;
+  color: #686677;
+  display: block;
+  margin-bottom: 8px;
+}
+
+.label span {
+  color: #ff1515;
+}
+
+.language-wrapper,
+.location-wrapper,
+.input-wrapper {
+  width: 100%;
+}
+
+.location-wrapper .select {
+  display: flex;
+  align-items: center;
+  border: 1px solid #b4b4b4 !important;
+  background-color: rgba(255, 255, 255, var(--bg-opacity));
+  border-radius: 8px;
+}
+
+.location-wrapper .select-active {
+  border-radius: 8px !important;
+}
+
+/* The shared Dropdown renders a wrapper and a text input. The wrapper owns the control border. */
+.location-wrapper .select-wrap .select,
+.location-wrapper .select-wrap .select-active {
+  box-sizing: border-box;
+}
+
+.location-wrapper .select-wrap .select input[type="text"],
+.location-wrapper .select-wrap .select-active input[type="text"] {
+  min-height: 0;
+  border: 0 !important;
+  border-radius: 0;
+  box-shadow: none !important;
+}
+
+.location-wrapper .select-wrap .select-active {
+  border: 1px solid #2563eb !important;
+  box-shadow: none !important;
+}
+
+.input-wrapper .submit-bar,
+.input-wrapper .submit-bar-disabled {
+  width: 100%;
+}
+
+.input-wrapper .card-label {
+  font-weight: 500 !important;
+  font-size: 16px !important;
+  line-height: 25px !important;
+  color: #686677 !important;
+}
+
+.input-wrapper.hide-submit-buttons + .submit-bar,
+.input-wrapper.hide-submit-buttons + .submit-bar-disabled {
+  display: none !important;
+}
+
+/* Account Link */
+.account-link {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 25px;
+  text-align: center;
+  margin-top: 24px;
+  color: #0b0c0c;
+}
+
+.link {
+  color: #5b68f0;
+  text-decoration: none;
+  cursor: pointer;
+  font-weight: 500;
+  transition: color 0.2s ease;
+}
+
+.link:hover {
+  color: #7b5fc7;
+  text-decoration: underline;
+}
+
+/* OTP Section */
+.resendIn {
+  font-size: 16px;
+  font-weight: 500;
+  color: #686677;
+  text-align: right;
+}
+
+.resendIn span {
+  color: #5b68f0;
+}
+
+.resend {
+  text-align: right;
+  cursor: pointer;
+  font-weight: 700;
+  color: #5b68f0;
+}
+
+/* Register Login Wrapper - For registration page with same left panel */
+.register-login-wrapper {
+  width: 100%;
+  max-width: 480px;
+  background-color: #ffffff;
+  padding: 40px;
+  border-radius: 12px;
+  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
+  max-height: calc(100vh - 100px);
+  overflow-y: auto;
+}
+
+/* Right Panel - Login Form with scrollable content */
+.login-form-panel {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f5f5;
+  overflow-y: auto;
+  padding: 20px;
+  min-height: calc(100vh - 56px);
+}
+
+/* Responsive Design - Hide left panel on tablets and mobile */
+@media (max-width: 1024px) {
+  .login-hero-panel {
+    display: none;
+  }
+
+  .login-container {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  }
+
+  .login-form-panel {
+    background: transparent;
+  }
+
+  .login-wrapper,
+  .register-login-wrapper {
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+  }
+}
+
+@media (max-width: 768px) {
+  .login-wrapper,
+  .register-login-wrapper {
+    padding: 30px 24px;
+    max-width: 95%;
+  }
+
+  .login-title {
+    font-size: 1.75rem;
+  }
+
+  .login-subtitle {
+    font-size: 0.875rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .login-wrapper,
+  .register-login-wrapper {
+    padding: 24px 20px;
+  }
+
+  .login-title {
+    font-size: 1.5rem;
+  }
+
+  .login-form-header {
+    margin-bottom: 24px;
+  }
+
+
+  .label,
+  .account-link {
+    font-size: 14px;
+  }
+    .lag-loc-wrapper {
+        flex-direction: column;
+        gap: 0px;
+    }
+    .login-wrapper{
+        width: 100%;
+    }
+    .register-login-wrapper{
+         width: 100%;
+    }
+}
+@media (min-width: 769px) and (max-width : 1024px) {
+    .lag-loc-wrapper {
+        flex-direction: column;
+        gap: 0px;
+    }
+    .login-wrapper{
+        width: 60%;
+    }
+    .register-login-wrapper{
+         width: 60%;
+    }
+}