@import url('https://fonts.googleapis.com/css2?family=Glomeroid&display=swap');
.login-view {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%), url('/images/r.avif') no-repeat center center / cover;
    background-blend-mode: overlay;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 20px;
}

.login-container {
    width: 900px;
    height: 620px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    display: flex;
    overflow: hidden;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.left-section {
    flex: 1;
    background: linear-gradient(135deg, #FE691E 0%, #F94D00 100%);
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    position: relative;
    overflow: hidden;
}

.left-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
}

.logo-container {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.logo-icon {
    font-size: 32px;
    margin-right: 10px;
    color: white;
}

.logo-text {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 1px;
}

.welcome-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.2;
}

.welcome-subtitle {
    font-size: 16px;
    margin-bottom: 40px;
    opacity: 0.9;
    line-height: 1.5;
}

.signup-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}

.signup-subtitle {
    font-size: 14px;
    margin-bottom: 25px;
    opacity: 0.9;
    line-height: 1.5;
}

.signup-button {
    width: 180px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 16px;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    backdrop-filter: blur(5px);
}

.signup-button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.form-container {
    flex: 1;
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: white;
}

.form-title1 {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
}

.sub-label {
    font-size: 14px;
    color: #666;
    margin-bottom: 30px;
}

.input-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    display: block;
}

.input-field {
    width: 100%;
    margin-bottom: 20px;
    --vaadin-input-field-border-radius: 8px;
    --vaadin-input-field-border-color: #e1e5e9;
    --vaadin-input-field-background: #f8f9fa;
}

.input-field:hover {
    --vaadin-input-field-border-color: #FE691E;
}

.input-field:focus {
    --vaadin-input-field-border-color: #FE691E;
    --vaadin-input-field-shadow: 0 0 0 3px rgba(254, 105, 30, 0.1);
}

.remember-me {
    margin-bottom: 15px;
    font-size: 14px;
}

.terms-section {
    margin: 15px 0;
}

.terms-button {
    font-size: 12px;
    padding: 5px 10px;
    color: #FE691E;
    cursor: pointer;
    margin-bottom: 5px;
}

.terms-checkbox {
    font-size: 12px;
    margin-top: 5px;
}

.bottom-layout {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.forgot-password {
    color: #FE691E;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s;
}

.forgot-password:hover {
    color: #F94D00;
    text-decoration: underline;
}

.login-button {
    width: 130px;
    height: 45px;
    background: linear-gradient(135deg, #FE691E 0%, #F94D00 100%);
    color: white;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(254, 105, 30, 0.3);
}

.login-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(254, 105, 30, 0.4);
}

.login-button:disabled {
    opacity: 0.7;
    transform: none;
    box-shadow: none;
}

.social-divider-container {
    width: 100%;
    align-items: center;
    margin: 25px 0 20px;
}

.social-divider-container::before,
.social-divider-container::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e1e5e9;
}

.or-text {
    padding: 0 15px;
    font-size: 14px;
    color: #666;
}

.social-buttons {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 10px;
}

.social-button {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e1e5e9;
    background: white;
    color: #666;
    transition: all 0.3s ease;
    cursor: pointer;
}

.social-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    border-color: #FE691E;
    color: #FE691E;
}

/* Terms Dialog Styles */
.terms-dialog {
    border-radius: 15px;
    overflow: hidden;
}

.terms-dialog-header {
    color: #FE691E;
    margin: 0;
    padding: 20px;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
}

.terms-dialog-content {
    overflow-y: auto;
    padding: 20px;
    max-height: 350px;
}

.terms-section-header {
    font-size: 14px;
    font-weight: bold;
    margin: 10px 0 5px 0;
    color: #333;
}

.terms-section-content {
    font-size: 12px;
    margin: 0 0 10px 15px;
    line-height: 1.4;
    color: #666;
    white-space: pre-line;
}

.terms-dialog-footer {
    padding: 15px;
    border-top: 1px solid #eee;
    background: #f8f9fa;
}

.terms-close-button {
    background-color: #FE691E;
}

.terms-dialog-layout {
    border-radius: 15px;
    overflow: hidden;
}

/* Verification Notification Styles */
.verification-notification {
    background: transparent !important;
    box-shadow: none !important;
}

.verification-layout {
    background-color: white;
    border-radius: 15px;
    padding: 20px;
    width: 400px;
    border: 2px solid #FE691E;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    text-align: center;
}

.verification-icon {
    color: #FE691E;
    margin-bottom: 10px;
}

.verification-title {
    font-size: 18px;
    font-weight: bold;
    color: #FE691E;
    margin: 0;
}

.verification-message {
    text-align: center;
    color: #333;
    font-size: 14px;
    line-height: 1.5;
}

.verification-buttons {
    margin-top: 15px;
}

.verification-action-button {
    background-color: #FE691E;
    color: white;
    border-radius: 6px;
    padding: 10px 20px;
}

.verification-cancel-button {
    color: #666;
    border-radius: 6px;
    padding: 10px 20px;
}

/* Notification Styles */
.notification-layout {
    border-radius: 10px;
    padding: 15px 20px;
    width: 350px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.notification-success {
    background: linear-gradient(135deg, #4CAF50, #45a049);
}

.notification-error {
    background: linear-gradient(135deg, #f44336, #d32f2f);
}

.notification-info {
    background: linear-gradient(135deg, #FE691E, #F94D00);
}

.notification-icon-success,
.notification-icon-error,
.notification-icon-info {
    width: 24px;
    height: 24px;
    color: white;
}

.notification-text {
    color: white;
    font-size: 14px;
    font-weight: 500;
}

* {
    box-sizing: border-box;
}

/* Mobile Responsive Styles - FIXED */
@media (max-width: 900px) {
    .login-view {
        padding: 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%), url('/images/r.avif') no-repeat center center / cover;
        background-blend-mode: overlay;
        min-height: 100vh;
        height: auto;
        align-items: flex-start;
        justify-content: flex-start;
        overflow-y: auto;
    }

    .login-container {
        width: 100% !important;
        flex-direction: column;
        height: auto;
        min-height: auto;
        margin: 0;
        border-radius: 15px;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        overflow: visible;
    }

    .left-section {
        width: 100% !important;
        padding: 20px 15px;
        text-align: center;
        align-items: center;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        min-height: 180px;
        border-radius: 15px 15px 0 0;
    }

    .form-container {
        width: 100% !important;
        padding: 25px 20px !important;
        border-radius: 0 0 15px 15px;
        min-height: 660px;
        justify-content: flex-start;
    }

    .input-field {
        width: 100% !important;
    }

    .bottom-layout {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }

    .login-button {
        width: 100% !important;
        margin-right: 0 !important;
    }

    .signup-title {
        font-size: 16px !important;
        width: 100% !important;
        margin-bottom: 5px;
    }

    .signup-subtitle {
        font-size: 12px !important;
        width: 100% !important;
        margin-bottom: 15px;
    }

    .signup-button {
        width: 100% !important;
        max-width: 160px;
        height: 40px;
        font-size: 14px;
    }

    .welcome-title {
        font-size: 20px !important;
        margin-bottom: 5px;
    }

    .welcome-subtitle {
        font-size: 12px !important;
        margin-bottom: 20px;
    }

    .form-title1 {
        font-size: 22px !important;
        text-align: center;
        margin-bottom: 5px;
    }

    .sub-label {
        text-align: center;
        margin-bottom: 20px;
        font-size: 13px;
    }

    .forgot-password {
        text-align: center;
        margin-top: 0;
    }

    /* MOVED SOCIAL BUTTONS UP AND REDUCED SIZE */
    .social-divider-container {
        margin: 5px 0 12px !important;
    }

    .social-buttons {
        justify-content: center;
        margin-top: 0 !important;
        margin-bottom: 5px !important;
        gap: 12px;
    }

    .social-button {
        width: 38px !important;
        height: 38px !important;
    }

    .logo-container {
        justify-content: center;
        margin-bottom: 15px;
    }

    .logo-icon {
        font-size: 24px;
    }

    .logo-text {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .login-view {
        padding: 15px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%), url('/images/r.avif') no-repeat center center / cover;
        background-blend-mode: overlay;
    }

    .login-container {
        border-radius: 12px;
        margin: 0;
    }

    .form-container {
        padding: 20px 15px !important;
        min-height: 600px;
    }

    .left-section {
        padding: 15px 10px;
        min-height: 150px;
    }

    .form-title1 {
        font-size: 20px !important;
    }

    .welcome-title {
        font-size: 18px !important;
    }

    .input-field {
        height: 45px !important;
        margin-bottom: 15px;
    }

    .login-button,
    .signup-button {
        height: 45px !important;
        font-size: 16px !important;
    }

    .verification-layout {
        width: 90vw;
        margin: 0 auto;
        padding: 15px;
    }

    .notification-layout {
        width: 90vw;
        padding: 12px 15px;
    }

    .logo-container {
        margin-bottom: 10px;
    }

    .logo-icon {
        font-size: 20px;
    }

    .logo-text {
        font-size: 18px;
    }

    .welcome-subtitle {
        margin-bottom: 15px;
    }

    .signup-subtitle {
        margin-bottom: 10px;
    }

    /* MOVED SOCIAL BUTTONS UP AND REDUCED SIZE */
    .social-divider-container {
        margin: 5px 0 10px !important;
    }

    .social-buttons {
        margin-bottom: 0 !important;
        gap: 10px;
    }

    .social-button {
        width: 36px !important;
        height: 36px !important;
    }
}

/* Extra small devices */
@media (max-width: 360px) {
    .login-view {
        padding: 10px;
    }

    .left-section {
        padding: 12px 8px;
        min-height: 130px;
    }

    .form-container {
        padding: 15px 10px !important;
        min-height: 580px;
    }

    .welcome-title {
        font-size: 16px !important;
    }

    .form-title1 {
        font-size: 18px !important;
    }

    /* MOVED SOCIAL BUTTONS UP AND REDUCED SIZE */
    .social-divider-container {
        margin: 6px 0 8px !important;
    }

    .social-buttons {
        gap: 8px;
    }

    .social-button {
        width: 34px !important;
        height: 34px !important;
    }

    .signup-button {
        max-width: 140px;
        height: 35px;
        font-size: 12px;
    }
}

/* Method Selection Styles */
.method-selection-layout {
    width: 100%;
    margin: 15px 0;
}

.method-selection-button {
    transition: all 0.3s ease !important;
}

.method-selection-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2) !important;
}

/* Mobile Responsive for Forgot Password Dialogs */
@media (max-width: 480px) {
    .forgot-password-dialog {
        width: 90vw !important;
        max-width: 90vw !important;
        margin: 5vw !important;
    }
    
    .method-selection-button {
        padding: 10px 15px !important;
        font-size: 14px !important;
    }
    
    .forgot-password-buttons {
        flex-direction: column-reverse;
        gap: 10px !important;
    }
    
    .forgot-password-buttons > * {
        width: 100% !important;
    }
}




/* Signup View Specific Styles - Unique Class Names */
.signup-view-main {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%), url('/images/r.avif') no-repeat center center / cover;
    background-blend-mode: overlay;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 20px;
}

.signup-main-container {
    width: 1000px;
    height: 700px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    display: flex;
    overflow: hidden;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.signup-left-section {
    flex: 1;
    background: linear-gradient(135deg, #FE691E 0%, #F94D00 100%);
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    position: relative;
    overflow: hidden;
}

.signup-left-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
}

.signup-logo-container {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.signup-logo-icon {
    font-size: 32px;
    margin-right: 10px;
    color: white;
}

.signup-logo-text {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 1px;
}

.signup-welcome-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.2;
}

.signup-welcome-subtitle {
    font-size: 16px;
    margin-bottom: 40px;
    opacity: 0.9;
    line-height: 1.5;
}

.signup-login-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}

.signup-login-subtitle {
    font-size: 14px;
    margin-bottom: 25px;
    opacity: 0.9;
    line-height: 1.5;
}

.signup-login-button {
    width: 180px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 16px;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    backdrop-filter: blur(5px);
}

.signup-login-button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.signup-form-container {
    flex: 1.2;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: white;
    overflow-y: auto;
}

.signup-form-title {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
}

.signup-sub-label {
    font-size: 14px;
    color: #666;
    margin-bottom: 30px;
}

.signup-input-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    display: block;
}

.signup-input-field {
    width: 100%;
    margin-bottom: 20px;
    --vaadin-input-field-border-radius: 8px;
    --vaadin-input-field-border-color: #e1e5e9;
    --vaadin-input-field-background: #f8f9fa;
}

.signup-input-field:hover {
    --vaadin-input-field-border-color: #FE691E;
}

.signup-input-field:focus {
    --vaadin-input-field-border-color: #FE691E;
    --vaadin-input-field-shadow: 0 0 0 3px rgba(254, 105, 30, 0.1);
}

.signup-name-layout {
    display: flex;
    gap: 15px;
    width: 100%;
}

.signup-name-layout > * {
    flex: 1;
}

.signup-terms-section {
    margin: 15px 0;
}

.signup-terms-button {
    font-size: 12px;
    padding: 5px 10px;
    color: #FE691E;
    cursor: pointer;
    margin-bottom: 5px;
}

.signup-terms-checkbox {
    font-size: 12px;
    margin-top: 5px;
}

.signup-action-button {
    width: 100%;
    height: 45px;
    background: linear-gradient(135deg, #FE691E 0%, #F94D00 100%);
    color: white;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(254, 105, 30, 0.3);
    margin-top: 10px;
}

.signup-action-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(254, 105, 30, 0.4);
}

.signup-action-button:disabled {
    opacity: 0.7;
    transform: none;
    box-shadow: none;
}

/* Signup Terms Dialog Styles */
.signup-terms-dialog {
    border-radius: 15px;
    overflow: hidden;
}

.signup-terms-dialog-header {
    color: #FE691E;
    margin: 0;
    padding: 20px;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
}

.signup-terms-dialog-content {
    overflow-y: auto;
    padding: 20px;
    max-height: 350px;
}

.signup-terms-section-header {
    font-size: 14px;
    font-weight: bold;
    margin: 10px 0 5px 0;
    color: #333;
}

.signup-terms-section-content {
    font-size: 12px;
    margin: 0 0 10px 15px;
    line-height: 1.4;
    color: #666;
    white-space: pre-line;
}

.signup-terms-dialog-footer {
    padding: 15px;
    border-top: 1px solid #eee;
    background: #f8f9fa;
}

.signup-terms-close-button {
    background-color: #FE691E;
}

.signup-terms-dialog-layout {
    border-radius: 15px;
    overflow: hidden;
}

/* Signup Verification Notification Styles */
.signup-verification-notification {
    background: transparent !important;
    box-shadow: none !important;
}

.signup-verification-layout {
    background-color: white;
    border-radius: 15px;
    padding: 20px;
    width: 400px;
    border: 2px solid #FE691E;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    text-align: center;
}

.signup-verification-icon {
    color: #FE691E;
    margin-bottom: 10px;
}

.signup-verification-title {
    font-size: 18px;
    font-weight: bold;
    color: #FE691E;
    margin: 0;
}

.signup-verification-message {
    text-align: center;
    color: #333;
    font-size: 14px;
    line-height: 1.5;
}

.signup-verification-buttons {
    margin-top: 15px;
}

.signup-verification-action-button {
    background-color: #FE691E;
    color: white;
    border-radius: 6px;
    padding: 10px 20px;
}

.signup-verification-cancel-button {
    color: #666;
    border-radius: 6px;
    padding: 10px 20px;
}

/* Signup Notification Styles */
.signup-notification-layout {
    border-radius: 10px;
    padding: 15px 20px;
    width: 350px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.signup-notification-success {
    background: linear-gradient(135deg, #4CAF50, #45a049);
}

.signup-notification-error {
    background: linear-gradient(135deg, #f44336, #d32f2f);
}

.signup-notification-info {
    background: linear-gradient(135deg, #FE691E, #F94D00);
}

.signup-notification-icon-success,
.signup-notification-icon-error,
.signup-notification-icon-info {
    width: 24px;
    height: 24px;
    color: white;
}

.signup-notification-text {
    color: white;
    font-size: 14px;
    font-weight: 500;
}

/* Mobile Responsive Styles for Signup */
@media (max-width: 900px) {
    .signup-view-main {
        padding: 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%), url('/images/r.avif') no-repeat center center / cover;
        background-blend-mode: overlay;
        min-height: 100vh;
        height: auto;
        align-items: flex-start;
        justify-content: flex-start;
        overflow-y: auto;
    }

    .signup-main-container {
        width: 100% !important;
        flex-direction: column;
        height: auto;
        min-height: auto;
        margin: 0;
        border-radius: 15px;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        overflow: visible;
    }

    .signup-left-section {
        width: 100% !important;
        padding: 100px 15px 10px 15px; /* Increased top padding to push content down */
        text-align: center;
        align-items: center;
        display: flex !important;
        flex-direction: column;
        justify-content: center; /* Keep as center */
        min-height: 100px;
        border-radius: 15px 15px 0 0;
    }

    .signup-form-container {
        width: 100% !important;
        padding: 25px 20px !important;
        border-radius: 0 0 15px 15px;
        min-height: auto;
        justify-content: flex-start;
    }

    .signup-name-layout {
        flex-direction: column;
        gap: 0;
    }

    .signup-input-field {
        width: 100% !important;
    }

    .signup-action-button {
        width: 100% !important;
        margin-top: 10px;
    }

    .signup-login-title {
        font-size: 16px !important;
        width: 100% !important;
        margin-bottom: 5px;
    }

    .signup-login-subtitle {
        font-size: 12px !important;
        width: 100% !important;
        margin-bottom: 15px;
    }

    .signup-login-button {
        width: 100% !important;
        max-width: 160px;
        height: 40px;
        font-size: 14px;
    }

    .signup-welcome-title {
        font-size: 20px !important;
        margin-bottom: 5px;
    }

    .signup-welcome-subtitle {
        font-size: 12px !important;
        margin-bottom: 20px;
    }

    .signup-form-title {
        font-size: 22px !important;
        text-align: center;
        margin-bottom: 5px;
    }

    .signup-sub-label {
        text-align: center;
        margin-bottom: 20px;
        font-size: 13px;
    }

    .signup-logo-container {
        justify-content: center;
        margin-bottom: 15px;
    }

    .signup-logo-icon {
        font-size: 24px;
    }

    .signup-logo-text {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .signup-view-main {
        padding: 15px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%), url('/images/r.avif') no-repeat center center / cover;
        background-blend-mode: overlay;
    }

    .signup-main-container {
        border-radius: 12px;
        margin: 0;
    }

    .signup-form-container {
        padding: 20px 15px !important;
        min-height: auto;
    }

    .signup-left-section {
        padding: 80px 10px 15px 10px; /* Increased top padding to push content down */
        min-height: 50px;
        justify-content: center; /* Keep as center */
    }

    .signup-form-title {
        font-size: 20px !important;
    }

    .signup-welcome-title {
        font-size: 18px !important;
    }

    .signup-input-field {
        height: 45px !important;
        margin-bottom: 15px;
    }

    .signup-action-button,
    .signup-login-button {
        height: 45px !important;
        font-size: 16px !important;
    }

    .signup-verification-layout {
        width: 90vw;
        margin: 0 auto;
        padding: 15px;
    }

    .signup-notification-layout {
        width: 90vw;
        padding: 12px 15px;
    }

    .signup-logo-container {
        margin-bottom: 10px;
    }

    .signup-logo-icon {
        font-size: 20px;
    }

    .signup-logo-text {
        font-size: 18px;
    }

    .signup-welcome-subtitle {
        margin-bottom: 15px;
    }

    .signup-login-subtitle {
        margin-bottom: 10px;
    }
}

/* Extra small devices */
@media (max-width: 360px) {
    .signup-view-main {
        padding: 10px;
    }

    .signup-left-section {
        padding: 70px 8px 12px 8px; /* Increased top padding to push content down */
        min-height: 20px;
        justify-content: center; /* Keep as center */
    }

    .signup-form-container {
        padding: 15px 10px !important;
        min-height: auto;
    }

    .signup-welcome-title {
        font-size: 16px !important;
    }

    .signup-form-title {
        font-size: 18px !important;
    }

    .signup-login-button {
        max-width: 140px;
        height: 35px;
        font-size: 12px;
    }
}

.career-table .wrap-column {
    white-space: normal; /* Allow text to wrap */
    word-break: break-word; /* Ensure long words wrap */
}



/* Verify Account View Styles */
.verify-view-main {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%), url('/images/r.avif') no-repeat center center / cover;
    background-blend-mode: overlay;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 20px;
}

.verify-main-container {
    width: 900px;
    height: 600px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    display: flex;
    overflow: hidden;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.verify-left-section {
    flex: 1;
    background: linear-gradient(135deg, #FE691E 0%, #F94D00 100%);
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    position: relative;
    overflow: hidden;
}

.verify-left-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
}

.verify-logo-container {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.verify-logo-icon {
    font-size: 32px;
    margin-right: 10px;
    color: white;
}

.verify-logo-text {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 1px;
}

.verify-welcome-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.2;
}

.verify-welcome-subtitle {
    font-size: 16px;
    margin-bottom: 40px;
    opacity: 0.9;
    line-height: 1.5;
}

.verify-form-container {
    flex: 1;
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: white;
}

.verify-form-title {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
    text-align: center;
}

.verify-sub-label {
    font-size: 14px;
    color: #666;
    margin-bottom: 30px;
    text-align: center;
}

.verify-code-layout {
    margin: 30px 0;
}

.verify-code-input {
    --vaadin-input-field-border-radius: 12px;
    --vaadin-input-field-border-color: #e1e5e9;
    --vaadin-input-field-background: #f8f9fa;
    --vaadin-input-field-height: 70px;
    --vaadin-input-field-font-size: 24px;
    --vaadin-input-field-font-weight: 600;
}

.verify-code-input:hover {
    --vaadin-input-field-border-color: #FE691E;
}

.verify-code-input:focus {
    --vaadin-input-field-border-color: #FE691E;
    --vaadin-input-field-shadow: 0 0 0 3px rgba(254, 105, 30, 0.1);
}

.verify-resend-layout {
    margin: 20px 0 30px 0;
}

.verify-resend-label {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.verify-timer-label {
    font-size: 14px;
    color: #FE691E;
    font-weight: 600;
    margin-right: 10px;
}

.verify-resend-button {
    font-size: 14px;
    color: #FE691E;
    background: transparent;
    border: none;
    cursor: pointer;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.verify-resend-button:hover {
    background: rgba(254, 105, 30, 0.1);
}

.verify-resend-button:disabled {
    color: #999;
    cursor: not-allowed;
}

.verify-action-button {
    width: 100%;
    height: 50px;
    background: linear-gradient(135deg, #FE691E 0%, #F94D00 100%);
    color: white;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(254, 105, 30, 0.3);
    margin: 10px 0;
}

.verify-action-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(254, 105, 30, 0.4);
}

.verify-action-button:disabled {
    opacity: 0.7;
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
}

.verify-back-button {
    width: 100%;
    height: 45px;
    background: transparent;
    color: #666;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.verify-back-button:hover {
    background: #f8f9fa;
    border-color: #FE691E;
    color: #FE691E;
}

/* Notification Styles */
.verify-notification-layout {
    border-radius: 10px;
    padding: 15px 20px;
    width: 350px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.verify-notification-success {
    background: linear-gradient(135deg, #4CAF50, #45a049);
}

.verify-notification-error {
    background: linear-gradient(135deg, #f44336, #d32f2f);
}

.verify-notification-icon-success,
.verify-notification-icon-error {
    width: 24px;
    height: 24px;
    color: white;
}

.verify-notification-text {
    color: white;
    font-size: 14px;
    font-weight: 500;
}

/* Mobile Responsive Styles */
@media (max-width: 900px) {
    .verify-view-main {
        padding: 20px;
        min-height: 100vh;
        height: auto;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .verify-main-container {
        width: 100% !important;
        flex-direction: column;
        height: auto;
        min-height: auto;
        margin: 0;
        border-radius: 15px;
    }

    .verify-left-section {
        width: 100% !important;
        padding: 60px 15px 20px 15px;
        text-align: center;
        align-items: center;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        min-height: 180px;
        border-radius: 15px 15px 0 0;
    }

    .verify-form-container {
        width: 100% !important;
        padding: 30px 20px !important;
        border-radius: 0 0 15px 15px;
        min-height: auto;
    }

    .verify-code-input {
        width: 60px !important;
        height: 60px !important;
    }

    .verify-welcome-title {
        font-size: 24px !important;
    }

    .verify-welcome-subtitle {
        font-size: 14px !important;
    }

    .verify-form-title {
        font-size: 22px !important;
    }

    .verify-logo-container {
        justify-content: center;
        margin-bottom: 15px;
    }

    .verify-logo-icon {
        font-size: 24px;
    }

    .verify-logo-text {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .verify-view-main {
        padding: 15px;
    }

    .verify-left-section {
        padding: 50px 10px 15px 10px;
        min-height: 150px;
    }

    .verify-form-container {
        padding: 25px 15px !important;
    }

    .verify-code-input {
        width: 55px !important;
        height: 55px !important;
    }

    .verify-welcome-title {
        font-size: 20px !important;
    }

    .verify-form-title {
        font-size: 20px !important;
    }

    .verify-action-button,
    .verify-back-button {
        height: 45px !important;
    }

    .verify-logo-icon {
        font-size: 20px;
    }

    .verify-logo-text {
        font-size: 18px;
    }
}





/* Reset Password View Styles */
.reset-password-view {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%), url('/images/r.avif') no-repeat center center / cover;
    background-blend-mode: overlay;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 20px;
}

.reset-password-container {
    width: 900px;
    height: 620px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    display: flex;
    overflow: hidden;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Left section styles */
.reset-left-section {
    flex: 1;
    background: linear-gradient(135deg, #FE691E 0%, #F94D00 100%);
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: white;
    position: relative;
    overflow: hidden;
}

.reset-left-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
}

.reset-logo-container {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.reset-logo-icon {
    font-size: 32px;
    margin-right: 10px;
    color: white;
}

.reset-logo-text {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 1px;
}

.reset-welcome-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.2;
}

.reset-welcome-subtitle {
    font-size: 16px;
    margin-bottom: 40px;
    opacity: 0.9;
    line-height: 1.5;
}

.reset-signup-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}

.reset-signup-subtitle {
    font-size: 14px;
    margin-bottom: 25px;
    opacity: 0.9;
    line-height: 1.5;
}

.reset-signup-button {
    width: 180px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 16px;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    backdrop-filter: blur(5px);
}

.reset-signup-button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Form container styles */
.reset-form-container {
    flex: 1;
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: white;
}

.reset-header-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.reset-header-icon {
    color: #FE691E;
}

.reset-form-title {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
}

.reset-sub-label {
    font-size: 14px;
    color: #666;
    margin-bottom: 30px;
}

.reset-input-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    display: block;
}

.reset-input-field {
    width: 100%;
    margin-bottom: 20px;
    --vaadin-input-field-border-radius: 8px;
    --vaadin-input-field-border-color: #e1e5e9;
    --vaadin-input-field-background: #f8f9fa;
}

.reset-input-field:hover {
    --vaadin-input-field-border-color: #FE691E;
}

.reset-input-field:focus {
    --vaadin-input-field-border-color: #FE691E;
    --vaadin-input-field-shadow: 0 0 0 3px rgba(254, 105, 30, 0.1);
}

.reset-login-button {
    width: 100%;
    height: 45px;
    background: linear-gradient(135deg, #FE691E 0%, #F94D00 100%);
    color: white;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(254, 105, 30, 0.3);
}

.reset-login-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(254, 105, 30, 0.4);
}

/* Mobile Responsive Styles for Reset Password */
@media (max-width: 900px) {
    .reset-password-view {
        padding: 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%), url('/images/r.avif') no-repeat center center / cover;
        background-blend-mode: overlay;
        min-height: 100vh;
        height: auto;
        align-items: flex-start;
        justify-content: flex-start;
        overflow-y: auto;
    }

    .reset-password-container {
        width: 100% !important;
        flex-direction: column;
        height: auto;
        min-height: auto;
        margin: 0;
        border-radius: 15px;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        overflow: visible;
    }

    .reset-left-section {
        width: 100% !important;
        padding: 20px 15px;
        text-align: center;
        align-items: center;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        min-height: 180px;
        border-radius: 15px 15px 0 0;
    }

    .reset-form-container {
        width: 100% !important;
        padding: 25px 20px !important;
        border-radius: 0 0 15px 15px;
        min-height: 500px;
        justify-content: flex-start;
    }

    .reset-header-container {
        justify-content: center;
        text-align: center;
        flex-direction: column;
        gap: 8px;
    }

    .reset-form-title {
        font-size: 22px !important;
        text-align: center;
        margin-bottom: 5px;
    }

    .reset-sub-label {
        text-align: center;
        margin-bottom: 20px;
        font-size: 13px;
    }

    .reset-welcome-title {
        font-size: 20px !important;
        margin-bottom: 5px;
    }

    .reset-welcome-subtitle {
        font-size: 12px !important;
        margin-bottom: 20px;
    }

    .reset-signup-title {
        font-size: 16px !important;
        width: 100% !important;
        margin-bottom: 5px;
    }

    .reset-signup-subtitle {
        font-size: 12px !important;
        width: 100% !important;
        margin-bottom: 15px;
    }

    .reset-signup-button {
        width: 100% !important;
        max-width: 160px;
        height: 40px;
        font-size: 14px;
    }

    .reset-logo-container {
        justify-content: center;
        margin-bottom: 15px;
    }

    .reset-logo-icon {
        font-size: 24px;
    }

    .reset-logo-text {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .reset-password-view {
        padding: 15px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%), url('/images/r.avif') no-repeat center center / cover;
        background-blend-mode: overlay;
    }

    .reset-password-container {
        border-radius: 12px;
        margin: 0;
    }

    .reset-form-container {
        padding: 20px 15px !important;
        min-height: 450px;
    }

    .reset-left-section {
        padding: 15px 10px;
        min-height: 150px;
    }

    .reset-form-title {
        font-size: 20px !important;
    }

    .reset-welcome-title {
        font-size: 18px !important;
    }

    .reset-input-field {
        height: 45px !important;
        margin-bottom: 15px;
    }

    .reset-login-button,
    .reset-signup-button {
        height: 45px !important;
        font-size: 16px !important;
    }

    .reset-logo-container {
        margin-bottom: 10px;
    }

    .reset-logo-icon {
        font-size: 20px;
    }

    .reset-logo-text {
        font-size: 18px;
    }

    .reset-welcome-subtitle {
        margin-bottom: 15px;
    }

    .reset-signup-subtitle {
        margin-bottom: 10px;
    }
}

/* Extra small devices */
@media (max-width: 360px) {
    .reset-password-view {
        padding: 10px;
    }

    .reset-left-section {
        padding: 12px 8px;
        min-height: 130px;
    }

    .reset-form-container {
        padding: 15px 10px !important;
        min-height: 420px;
    }

    .reset-welcome-title {
        font-size: 16px !important;
    }

    .reset-form-title {
        font-size: 18px !important;
    }

    .reset-signup-button {
        max-width: 140px;
        height: 35px;
        font-size: 12px;
    }
}





















































/* home */

.home-view {
    background-image: url('/images/r.avif'); /* Set the image as the background */
    background-size: cover; /* Ensure the image covers the entire screen */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent repeating */
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Arial, sans-serif;
}

/* Navigation Bar */
.nav-bar {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    position: fixed;
    top: 0;
    background-color: transparent;
}

.logo {
    width: 150px;
    height: 100px;
    padding-left: 30px;
    margin-top: 20px;
}

.logo:hover {
    transform: scale(1.1); /* Slight zoom effect on hover */
}


/* Navigation Menu */
.nav-menu {
    display: flex;
    gap: 40px;
    margin-right: 50px;
}

.nav-link {
    font-family: 'Glaromaid', sans-serif;
    color: white;
    font-size: 16px;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.nav-link:hover {
    color: #FFD700;


}

/* Right section containing menu, login & signup buttons */
.right-section4 {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-right: 20px;
}

/* Buttons */
.nav-button {
    background-color:#F94D00;
    color: white;
    font-size: 16px;
    width:90px;
    height: 40px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;

}
.nav-button1 {
    background-color:#F94D00;
    color: white;
    font-size: 16px;
    width:90px;
    height: 40px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;

}

/* Main Content Layout */
.main-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin-top: 80px;
}

/* Left Side Text Content */
.text-section {
    width: 80%;
    margin-top: 100px;
}

.sub-header {
    font-size: 45px;
    color: white;
    font-weight: bold;
    line-height: 10px;
}

.p {
    font-size: 16px;
    color: white;
    width: 50%;
    line-height: 1.5;
}

.get-button {
    background-color:#F94D00;
    color: white;
    font-size: 26px;
    width: 250px;
    height: 60px;
    cursor: pointer;
    font-weight: bold;
    top: 40px;
    transition: all 0.3s ease-in-out;
}

/* Right Side Image */
.l-image {
    width: 500px;
    height: 450px;
    border-radius: 20px;
    margin-right: 40px;
}
/* Footer Styles */
.footer-nav {
    width: 100%;
    height: 50px;
    background-color: transparent;
    display: flex;
    align-items: center;
    padding: 0 20px;
    position: fixed;
    bottom: 0;
    border-top: 2px solid rgba(0, 0, 0, 0.15);
}

.footer-text {
    color: white;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    margin-left: 20px;
}

.footer-menu {
    display: flex;
    gap: 30px;
    margin-right: 20px;
}

.footer-link {
    font-family: 'Glaromaid', sans-serif;
    color: white;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.footer-link:hover {
    color: #FFD700;
}









/* Navbar */
.navbar {
    width: 100%;
    height: 60px;
    background-color: white;
    display: flex;
    align-items: center;
    padding: 0 20px;
    position: fixed;
    top: 0;
    border-bottom: 2px solid rgba(0, 0, 0, 0.15);
}


/* Main Layout */
.main-layout {
    display: flex;
    padding: 20px;
    gap: 40px;
}
.profile-heading{
    color: #F94D00;
    font-size: 22px;
}

/* Left Section */
.left-section {
    width: 250px;
    margin-left: 40px;  /* Moves it 40px from the left */
    margin-top: 50px;
}

.left-section h2 {
    color: black;
    font-size: 18px;
    font-weight: normal;
}

.left-section h3 {
    color: black;
    font-size: 25px;
    line-height: 30px;
    font-weight: normal;
}

.left-section h2,
.left-section h3 {
    margin: 0; /* Completely removes extra space */
    padding: 0; /* Ensures no extra spacing */
    line-height: 20px; /* Adjusts spacing between lines */
}


/* Chart Section */
.chart-container {
    width: 500px;
    max-width: 500px;
    margin: auto;
}



/* Yellow Button */
.yellow-button {
    background-color: white;
    color: black;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

.yellow-button:hover {
    background-color: #ffcc00;
}

/* Right Section - Boxes */
.box {
    width: 330px;
    height: 138px;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
    background-color: white;
}

/* View Button */
.view-button {
    background-color:  #F94D00;
    color: white;
    border: none;
    padding: 4px 15px;
    border-radius: 5px;
    cursor: pointer;
}

.view-button6 {
    background-color:  #F94D00;
    color:white;
    border: none;
    font-weight: normal;
    font-size: 16px;

}
.ellipsis-dots {
    font-size: 24px;
    cursor: pointer;
    color: #F94D00;
}


.logo1 {
    width: 150px;
    height: 100px;
    padding-left: 30px;
    padding-top: 20px;
}

.logo1:hover {
    transform: scale(1.1); /* Slight zoom effect on hover */
}










/* Navbar new test */
.navbar1 {
    width: 100%;
    height: 60px;
    background-color: white;
    display: flex;
    align-items: center;
    padding: 0 20px;
    position: fixed;
    top: 0;
    border-bottom: 2px solid rgba(0, 0, 0, 0.15);
}



/* Insights Box */
.insights-box1 {
    background-color: #080D82;
    color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: left;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 400px; /* Increase width */
}

.insights-box1 h3 {
    margin: 2px 0;
    text-align: left;
    font-size: 18px;
    color: white;
}

.insights-box1 p {
    margin: 5px 0;
    text-align: left;
    font-size: 14px;
}

/* Your Latest Personality Profile */
.profile-heading {
    font-size: 33px;
    text-align: center;
    margin-top: 20px;
    color: black;
}

.profile-text {
    font-size: 16px;
    text-align: center;
    color: gray;
    margin-bottom: 20px;
}

/* Yellow Button */
.yellow-button1 {
    background-color: yellow;
    color: black;
    border: none;
    padding: 0px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    display: block;
    margin: 4px auto 4px 20px; /* Add margin to separate it nicely */
    width: 300px; /* Increase width */
}

.yellow-button1:hover {
    background-color: #ffcc00;
}

/* View Button */
.view-button1 {
    background-color:  #080D82;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
}

.view-button1:hover {
    background-color: #0056b3;
}

/* Logo */
.logo2 {
    width: 150px;
    height: 100px;
    padding-left: 30px;
    padding-top: 20px;
}

.logo2:hover {
    transform: scale(1.1); /* Slight zoom effect on hover */
}







/* Navbar preview */
.navbar1 {
    width: 100%;
    height: 60px;
    background-color: white;
    display: flex;
    align-items: center;
    padding: 0 20px;
    position: fixed;
    top: 0;
    border-bottom: 2px solid rgba(0, 0, 0, 0.15);
}

/* Logo */
.logo2 {
    width: 150px;
    height: 100px;
    padding-left: 30px;
    padding-top: 20px;
}

.logo2:hover {
    transform: scale(1.1);
}

/* Title Text */
.title-text {
    color: blue;
    font-size: 30px;
    font-weight: bold;
    margin-left: 150px;
    margin-top: 100px;
}

/* Description Text */
.description-text {
    font-size: 16px;
    color: black;
    line-height: 1.5;
    max-width: 500px;
    margin-left: 150px;

}

/* OK Button */
.ok-button {
    background-color:  #080D82;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    margin-left: 70%;

}

.ok-button:hover {
    background-color: darkblue;
}
/* Logo */
.leftimg {
    width: 513px;
    height: 400px;
    margin-left: 30px;
    margin-top: 20px;
}

.part-a-title {
    font-size: 24px;
    font-weight: bold;
    margin-left: 20px;
}

.content-layout {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Full viewport height */
    justify-content: space-between;
    padding: 20px;
}

.button-layout {
    position: absolute;
    bottom: 20px;
    right: 20px;
}


/* Top Image */
.top-image3 {
    margin-bottom: 20px;
    margin-top: 20px
}

/* Title Styling */
.title-text3 {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
}

.title-text5{
    font-size: 30px;
    font-weight: bold;
    text-align: center;
}

/* Description Styling */
.description-text3 {
    margin-top: 5px;
    font-size: 18px;
    text-align: center;
    max-width: 600px;
}

/* OK Button */
.ok-button3 {
    background-color:  #F94D00;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
}

.content-layout3 {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 20px;
}





/* Text Styling */
.h22 {
    font-size: 30px; /* Adjusted for better readability */
    margin-bottom: 5px; /* Reduce bottom margin */
    font-weight: normal;
}

/* Reduce size of the back arrow */
vaadin-icon {
    font-size: 18px !important; /* Reduce icon size */
    width: 18px !important;
    height: 18px !important;
}
/* Reduce back arrow size */
.back-arrow {
    font-size: 18px !important;
    cursor: pointer;
}
.sub-text {
    font-size: 16px;
    color: #555;
}




/* table*/
/* Center everything */
.sub-text8, .career-table {
    text-align: center;
}

/* H2 Styling */
.h23 {
    font-size: 25px;
    margin-top: 5px;
    font-weight: bold;
    color: #FE691E;
    margin-left:70px;
}
.h24 {
    font-size: 14px;
    margin-top: 10px;
    font-weight: normal;
    color: black;
    margin-left: 80px;
}


.h26 {
    font-size: 20px;
    margin-top: 10px;
    font-weight:bold;
    color: #802800;
    margin-left: 50px;
}




.sub-textt {
    font-size: 18px;
    color: #555;
    margin-left:40px;
}

/* Paragraph Styling */
.sub-text8 {
    font-size: 16px;
    color: #555;
    margin-bottom: 5px;
}

/* Back Arrow Styling */
.back-arrow {
    font-size: 18px !important;
    cursor: pointer;
}

/* Table Styling */
.career-table1 {
    width: 1300px;
    height: 300px;
    border-collapse: collapse;
    margin-top: 5px;
    background-color: white;
    text-align:left;
}

/* Table Header Styling */
.career-table1 thead th {
    background-color: orange;
    color: white;
    text-align: left !important;
    padding: 10px;
}
/* Table Header Styling */
.career-table1::part(header-cell) {
    background-color: #F94D00 !important;
    color: white !important;
    font-weight: bold;
    font-size: 18px;
    text-align: left !important;
}

/* Table Row Styling */
.career-table1 tbody td {
    background-color: white;
    text-align: center;
    padding: 10px;
}

/* Table Hover Effect */
.career-table1 tbody tr:hover {
    background-color: gray;
    transition: background-color 0.3s ease-in-out;
}


/*institution*/

/* Table Styling */
.career-table {
    width: 1090px;
    height: 280px;
    border-collapse: collapse;
    margin-top: 0px;
    background-color: white;
    text-align: left !important;
}

/* Table Header Styling */
.career-table thead th {
    background-color: orange;
    color: white;
    text-align: left;
    padding: 10px;
}

/* Table Header Styling */
.career-table::part(header-cell) {
    background-color: #F94D00 !important;
    color: white !important;
    font-weight: bold;
    font-size: 18px;
    text-align: left !important;
}

/* Table Row Styling */
.career-table tbody td {
    background-color: white;
    text-align: left !important;
    padding: 10px;
}

/* Table Hover Effect */
.career-table tbody tr:hover {
    background-color: gray;
    transition: background-color 0.3s ease-in-out;
}



/* institution*/









/* Button Styling */
.view-button9 {
    background-color: #F94D00;
    color:white;
    border: none;
    width: 80px;
    height: 30px;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}


/* Button Styling */



/* table */










/* Button Styling */
.view-button4 {
    background-color: #F94D00;
    color: white;
    border: none;
    padding: 5px 5px;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 50px;
    font-size: 13px;
}





/* Main container */
.main-container5 {
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 20px;
    background-color: white;
    height: 450px; /* Reduced height */
}

/* Title */
.title10 {
    margin-left: 10px;
    font-size: 30px; /* Slightly reduced font size */
    margin-bottom: 10px;
    font-weight: bold;
}

/* Sub-container (payment option) */
.payment-option {
    width: 530px;
    height: 50px;
    border-bottom: 1px solid black;
    display: flex;
    align-items: center;
    padding: 5px;
    margin-bottom: 10px;
    justify-content: space-between; /* Ensures label and image are on the left */
}

/* Payment option text (Reduced font size, moved closer to the image) */


/* Proceed button */
.proceed-button {
    background-color:  #F94D00;
    color: white;
    width: 100%;
    height: 45px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
    margin-top: 20px;
    cursor: pointer;
}




/* selected payment method*/
.main-container6 {
    background: white;
    width: 600px;
    height: 500px;
    padding: 20px;
    margin-top:50px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.title6 {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 10px;
    margin-left: 10px;
}

.payment-amount {
    font-size: 18px;
    color: #333;
    margin-left: 10px;
    margin-bottom: 15px;
}

.phone-input-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
}

.country-code-dropdown {
    width: 100px;
    margin-top: 20px;
}

.phone-number-field {
    flex-grow: 1;
    margin-top: 20px;
    border: none;
    border-bottom: 2px solid #F94D00;
    padding: 8px;
    font-size: 16px;
    outline: none;
    width: 100%;
}

.pay-button {
    background-color:  #F94D00;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 40px;
    width: 100%;
    height: 45px;
}






/* Subtitle and Sublabel */

.main-container7 {
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 20px;
    background-color: #fff;
    box-shadow:0px 8px 15px rgba(0, 0, 0, 0.3);
    height: 500px; /* Reduced height */
    display:flex;
    margin-left:100px;
    flex-direction:column;
    align-items:center;
    width:700px;
}

.title1 {
    text-align: left;
    font-size: 30px; /* Slightly reduced font size */
    margin-bottom: 10px;
    font-weight: bold;

}
.sub-title1 {
    text-align: left; /* Align text to the left */
    font-size: 14px;
    margin-bottom: 5px;
    color: black;
    width: 100%;
}

.sub-label1 {
    text-align: left; /* Align text to the left */
    font-size: 16px;
    margin-bottom: 5px;
    width: 100%;
    margin-left: 5px;
}

/* Sub-container */
.sub-container {
    width: 450px;
    height: 70px;
    display: flex;
    align-items: center;
    margin-bottom:10px;
    padding: 5px;
    margin-bottom: 2px;
    justify-content: center;
    background-color: #fff;
    border-bottom: 1px solid black;
}

/* Sub-container text */
.sub-container-text {
    font-size: 16px;
    text-align: left;

}

/* Buttons */
.cancel-button, .pay-now-button {
    height: 40px;
    font-size: 16px;
    margin-top: 1px;
    cursor: pointer;
}

.cancel-button {
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    background-color: white;
    color:black;
    font-size: 18px;
    font-weight: bold;
}

.pay-now-button {
    background-color:  #F94D00;
    color: white;
    font-size: 18px;
    font-weight: bold;
}






/* occupation css code*/
/* Centered Container */
.centered-container {
    width: 700px;
    height: 550px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}


.centered-container90 {
    width: 700px;
    height: 400px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    background-color: white;
    padding: 20px;
    border-radius: 10px;

    /*     display: flex;*/
    /*    flex-direction: column;*/
    align-items: center; /* Horizontally center items */
    justify-content: center
}






/* Title Label */
.title-label {
    font-size: 30px;
    margin-left: 20px;
    margin-top: 1px;
    width: 90%;
    line-height: 26px;
    font-family: 'Glomeroid', sans-serif;
}

/* Subtitle Label */
.subtitle-label {
    font-size: 16px;
    color: black;
    margin-left: 20px;
    margin-top: 5px;
}

/* TextField */
.occupation-textfield {
    margin-left: 10px;
    margin-top: 10px;
    border: 2px solid #F94D00;
}

/* Search Icon Inside TextField */
.search-icon {
    color: gray;
    cursor: pointer;
    font-size: 30px;
}

/* Occupation List */
.occupation-list {
    margin-left: 10px;
    margin-top: 5px;
}

/* Occupation Label */
.occupation-label {
    font-size: 14px;
    padding: 0px 0px; /* Reduce padding */
    margin: 1px 0; /* Reduce margin */
    cursor: pointer;
}

.occupation-label:hover {
    color: blue;
    text-decoration: none;
}

.button-layout8 {
    margin-top: 0;
    display: flex;
    justify-content: flex-end; /* Moves buttons to the right */
    gap: 20px; /* Adds space between buttons */
    width: 100%; /* Ensures the buttons align to the right edge */
    margin-right: 15px;
}


/* Skip Button */
.skip-button8 {
    background-color: white; /* Grey background */
    color: black;
    padding: 5px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

/* Next Button */
.next-button8 {
    background-color: #F94D00; /* Orange background */
    color: white;
    padding: 5px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    border: none;
}

/* Hover Effects */
.skip-button8:hover {
    background-color: darkgray;
}

.next-button8:hover {
    background-color: darkorange;
}
/* ✅ Responsive Additions */
@media only screen and (max-width: 768px) {
    .centered-container {
        width: 90% !important;
        height: auto !important;
        padding: 15px !important;
    }

    .occupation-textfield {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .title-label, .subtitle-label {
        margin-left: 0 !important;
        font-size: 22px !important;
        text-align: center;
    }

    .button-layout8 {
        flex-direction: row; /* ⬅️ Keep in a row */
        justify-content: center; /* Optional: Center align on small screens */
        gap: 10px;
        flex-wrap: wrap;
    }

    .skip-button8,
    .next-button8 {
        flex: 1 1 auto; /* Allows buttons to shrink if needed */
        text-align: center;
        min-width: 100px;
    }
    .title-label {
        font-size: 20px;
        margin-left: 20px;
        margin-top: 1px;
        width: 90%;
        line-height: 26px;
        font-family: 'Glomeroid', sans-serif;
    }
    .centered-container90 {
        width: 350px;
        height: 400px;

    }
    .main-container7 {
        margin-right: 50px;
        height: 500px; /* Reduced height */
        width:400px;
    }
    .sub-container {
        width: 400px;
        height: 70px;

    }

}










/* Back Button Layout */
.back-button-layout {
    position: absolute;
    top: 50px;
    left: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

/* Back Icon */
.back-icon {
    color: #F94D00;
    font-size: 18px;
    margin-right: 8px;
}

/* Back Text */
.back-text {
    font-size: 18px;
    color: #F94D00;
    font-weight: bold;

}

/* styles.css */
.custom-dropdown::part(label) {
    color: black !important;
    font-size: 14px;
}


.cancel-button9 {
    background-color: white; /* Grey background */
    color: black;
    padding: 5px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

/* Next Button */
.ok-button9 {
    background-color: #F94D00; /* Orange background */
    color: white;
    padding: 5px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    border: none;
}


/* relevance*/
/* Table Styling */
.career-table2 {
    width: 1300px;
    height: 300px;
    border-collapse: collapse;
    margin-top: 5px;
    background-color: white;
    text-align:left;
}

/* Table Header Styling */
.career-table2 thead th {
    background-color: orange;
    color: white;
    text-align: center;
    padding: 10px;
}
/* Table Header Styling */
.career-table2::part(header-cell) {
    background-color: #F94D00 !important;
    color: white !important;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
}

/* Table Row Styling */
.career-table2 tbody td {
    background-color: white;
    text-align: center;
    padding: 10px;
}

/* Table Hover Effect */
.career-table2 tbody tr:hover {
    background-color: gray;
    transition: background-color 0.3s ease-in-out;
}

.centered-text {
    text-align: center;
}



/*rel*/

vaadin-notification-card::part(overlay) {
    background: transparent !important;
    box-shadow: none !important;
}


/*verify*/
.title-label6{
    font-size: 30px;
    font-weight: normal;
    text-align: center;
    margin-top: 90px;
    color:#E65100;
    display:block;
    width:100%

}
.code-input {
    border: 2px solid #ccc;
    border-radius: 5px;
    text-align: center;
    font-size: 24px;
    margin-top: 10px;
}

/*partA*/
.centered-container11 {
    width: 1000px;
    height: 90vh; /* Ensures it expands */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    background-color: white;
    display: flex;
    margin-top: 30px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    overflow-y: auto !important;
    overflow-x: hidden;
    padding: 20px;
}
.title-label7 {
    font-size: 30px;
    margin-left: 20px;
    margin-top: 20px;
    width: 80%;
    line-height: 26px;
    font-family: 'Glomeroid', sans-serif;
}

vaadin-radio-group::part(label) {
    margin-left: -50px !important;
}


/*kuccps*/

/* Table Styling */
.career-table8 {
    width: 1090px;
    height: auto;
    border-collapse: collapse;
    margin-top: 2px;
    background-color: white;
    text-align: left !important;
}

/* Table Header Styling */
.career-table8 thead th {
    color: white;
    text-align: left;
    padding: 2px !important;
    height: 10px !important; /* Adjust height as needed */
}
/* Table Header Styling */
.career-table8::part(header-cell) {
    background-color: #F94D00 !important;
    color: white !important;
    font-weight: bold;
    height: 10px !important; /* Adjust height as needed */
    font-size: 16px;
    text-align: left !important;
    padding: 0 0 !important;          /* Reduced Padding (Height Control) */
    line-height: 1 !important;            /* Minimize Line Height */
}
.career-table8::part(header-row) {
    height: 10px !important; /* Adjust height as needed */
}
/* Ensure content fits tightly within cells */
.career-table8 .vaadin-grid-cell {
    padding: 2px !important;
}

/* Table Row Styling */
.career-table8 tbody td {
    background-color: white;
    text-align: left !important;
    padding: 10px;
}

/* Table Hover Effect */
.career-table8 tbody tr:hover {
    background-color: gray;
    transition: background-color 0.3s ease-in-out;
}










/* Optional: Ensure grid's header row also has orange background */
.first-table::part(header-cell) {
    background-color:#F94D00 !important;
    color:white;
    font-size: 14px;
}






/* Apply orange to the entire grid and rows */
.second-table {
    background-color: #802800 !important; /* Background of the grid */
    color: white !important; /* Text color */
}

/* Target the rows and cells inside the grid */
.second-table::part(row) {
    background-color: #802800 !important; /* Entire row background */
    color: black !important; /* Row text color */
}

/* Ensure even alternating rows stay orange */
.second-table::part(even-row) {
    background-color: #802800 !important;
}

/* Ensure hover effect remains orange */
.second-table::part(selected-row) {
    background-color: #802800 !important;
}

/* Optional: Ensure grid's header row also has orange background */
.second-table::part(header-cell) {
    background-color:#802800 !important;
}
/* Apply vertical lines to all grid cells */
.second-table .vaadin-grid-cell-content {
    border-right: 1px solid black; /* Vertical line */
}

/* Remove the last column's right border */
.second-table .vaadin-grid-cell-content:last-child {
    border-right: none;
}







/* Table Styling */
.career-table11 {
    width: 1000px;
    height: 348px;
    border-collapse: collapse;
    margin-top: 0px;
    background-color: white;
    text-align: left !important;
}

/* Table Header Styling */
.career-table11 thead th {
    background-color: orange;
    color: white;
    text-align: left;
    padding: 10px;
}
/* Table Header Styling */
.career-table11::part(header-cell) {
    background-color: #F94D00 !important;
    color: white !important;
    font-weight: bold;
    font-size: 18px;
    text-align: left !important;
}

/* Table Row Styling */
.career-table11 tbody td {
    background-color: white;
    text-align: left !important;
    padding: 5px;
}

/* Table Hover Effect */
.career-table11 tbody tr:hover {
    background-color: red;
    transition: background-color 0.3s ease-in-out;
}


/* Add to your stylesheet */
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

[part="content"] {
    height: 100%;
    overflow: auto;
}

.first-table, .second-table, .third-table {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    word-wrap: break-word !important;
}



.third-table::part(header-cell) {
    background-color: #F94D00 !important;
    color: white !important;
    font-weight: bold;
    font-size: 18px;
    text-align: left !important;
}


/* table 13*/


/* Table Styling */
.career-table13 {
    width: 1090px;
    height: 280px;
    border-collapse: collapse;
    margin-top: 0px;
    background-color: white;
    text-align: left !important;
}

/* Table Header Styling */
.career-table13 thead th {
    background-color: orange;
    color: white;
    text-align: left;
    padding: 10px;
}

/* Table Header Styling */
.career-table13::part(header-cell) {
    background-color: #F94D00 !important;
    color: white !important;
    font-weight: bold;
    font-size: 18px;
    text-align: left !important;
}

/* Table Row Styling */
.career-table13 tbody td {
    background-color: white;
    text-align: left !important;
    padding: 10px;
}

/* Table Hover Effect */
.career-table13 tbody tr:hover {
    background-color: gray;
    transition: background-color 0.3s ease-in-out;
}


.third-table {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    --lumo-font-size-s: 12px;
    margin-left:50px;
    margin-top:20px;

}

.third-table vaadin-grid-cell-content {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.5 !important;
    padding: var(--lumo-space-xs) !important;
    max-width: 100% !important;
}

/* Force cell content to respect width */
.third-table [part~="cell"] {
    min-width: 0 !important;
}


/*.highlighted-row [part~="cell"] {
    background-color: red !important;
}*/
/* Main highlighted row style */
vaadin-grid.highlighted-row [part~="row"] {
    background-color: red !important;
    color: white !important;
}

/* Cell styling within highlighted row */
vaadin-grid.highlighted-row [part~="cell"] {
    background-color: red !important;
    color: white !important;
    font-weight: bold !important;
}

/* Hover state */
vaadin-grid.highlighted-row [part~="row"]:hover {
    background-color: #ff3333 !important;
}

/* Selected state */
vaadin-grid.highlighted-row[selected] [part~="row"] {
    background-color: darkred !important;
}


.highlighted-row::after {
    content: "✓";
    position: absolute;
    right: 10px;
    font-weight: bold;
    font-size: 1.2em;
    color: white;
}


.v-grid-row.highlighted-row1 {
    background-color: #FFF8E1 !important;
}

.v-grid-cell.highlighted-rank1 {
    background-color: #FFC107 !important;
}


.third-table::part(body-cell) {
    font-size: 13px;
    color:black;
}

/* Optional: Keep header font size unchanged */
.third-table::part(header-cell) {
    font-size: 14px;
}














/*.graphSection {
    margin-left:70px
}*/



.imgIcon{
    height: 30px;
    width:30px;
    margin-top: 20px;
}
.mobile{
    height: 30px;
    width:30px;
    margin-top: 20px;
    display: none;
}


/* Left Section */
.left-section {
    width: 250px;
}

.left-section1 h2, .left-section1 h3 {
    margin: 0;
    color: blue;
    font-weight: normal;
    font-size: 18px;
}

.left-section1 h3 {
    color: blue;
    font-size: 20px;
}


.left-section {
    width: 250px;
    margin-left: 40px;  /* Moves it 40px from the left */
    margin-top: 50px;
}

.left-section h2 {
    color: black;
    font-size: 18px;
    font-weight: normal;
}

.left-section h3 {
    color: black;
    font-size: 25px;
    line-height: 30px;
    font-weight: normal;
}


/* Insights Box */
.insights-box {
    background-color: #F94D00;
    color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: left;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 400px; /* Increase width */
}

.insights-box h3 {
    margin: 2px 0;
    text-align: left;
    font-size: 18px;
    color: white;
}

.insights-box p {
    margin: 5px 0;
    font-size: 14px;
    text-align: left;
}
.profile-heading{
    font-size: 15px;
    font-weight:bold;
    font-size:30px;
    color:#E65100;

}
.backButtonContainer{
    position: absolute;
    margin-top:20px;
    margin-left:20px;
}
.h25 {
    font-size: 25px;
    margin-top: 40px;
    font-weight: bold;
    color: #FE691E;
    margin-left: 50px;
}
.searchField{
    --vaadin-input-field-border-width: 1px; /* Override default */
    --vaadin-input-field-border-color: grey;
    border-radius: 10px;
    margin-left: 50px;
    margin-top: 10px;
    width: auto !important;
    height: 35px;
}
.searchField1{
    --vaadin-input-field-border-width: 1px; /* Override default */
    --vaadin-input-field-border-color: grey;
    border-radius: 10px;
    margin-right: 100px;
    margin-top: 20px;
    width: auto !important;
    height: 35px;

}


.searchField2{
    --vaadin-input-field-border-width: 1px; /* Override default */
    --vaadin-input-field-border-color: grey;
    border-radius: 10px;
    margin-left: 0;
    margin-right: 100px;
    margin-top: 15px;
    width: auto !important;
    height: 35px;
}

.searchField3{
    --vaadin-input-field-border-width: 1px; /* Override default */
    --vaadin-input-field-border-color: grey;
    border-radius: 10px;
    margin-left: 50px;
    margin-top: 10px;
    width: auto !important;
    height: 35px;
}



.levelFilter{
    margin-left:50px;
    margin-top:10px;
    width: auto !important;
}

.titletable{
    font-size:15px;
    line-height:1.5;
    display:block;
    color:black;
    width: 100%;
}

.titletable1{
    white-space:normal;
    overflow-wrap:break-word;
    font-size:15px;
    line-height:1.5;
    font-weight:normal;
    display:block;
    width: 100%;
    color:black;
    max-width:100%;
}
.view-button16 {
    background-color: #F94D00;
    color:white;
    border: none;
    width: 100px;
    height: 30px;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
.view-button17 {
    background-color: #F94D00;
    color:white;
    border: none;
    width: 120px;
    height: 30px;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.paginationControls{
    margin-top:0;
    margin-left:50px;
}
.h27{
    margin-left:50px;
    margin-top:20px;
    width:100%;
    font-size:20px;
    font-weight:bold;
    color: #802800;

}
.institutionContainer{
    padding:10px;
    margin-left:50px;
    box-shadow:0 8px 16px rgba(0, 0, 0, 0.2);
    background-color:white;
}
.status{
    font-size:22px;
    /*    font-weight:bold;*/
    margin-top:25px;
    color:#802800;
    margin-left:20px;
}
.data{
    font-size:20px;
    margin-top:19px;
    color:red;
    margin-left:10px;
}
/*.tickIcon{
    margin-top:25px;
}*/
.profileHeading1{
    font-size:25px;
    font-weight:bold;
    margin-top:34px;
    color:#E65100;
    margin-left:200px;
}
.paragraph{
    font-size:16px;
    width:100%;
    text-align:center;
    font-weight:normal;
    margin-top:1px;
    color:grey;
}
.overView{
    font-size:20px;
    width:100%;
    text-align:center;
    font-weight:normal;
    margin-top:1px;
    color:#802800;
}
.titleLabelAbout{
    font-size:25px;
    margin-top:10px;
    margin-left:20px;
    color:#E65100;
    font-weight:bold;
}
.levelLabel{
    font-size:25px;
    margin-top:10px;
    margin-left:20px;
    color:#E65100;
    font-weight:bold;
}
.costLabel{
    font-size:25px;
    margin-top:10px;
    margin-left:20px;
    color:#E65100;
    font-weight:bold;
}
.maintitle{
    position:relative;
    font-size:37px;
    margin-top:2px;
    font-weight:bold;
    line-height:26px;
    color:#E65100;
    left:0;
}
.third-tabletitle{
    font-size:15px;
    font-weight:bold;
    line-height:1.5;
    color:black;
    width:100%;
}
.bottomLayoutbut{
    margin-left:50px;
}
.proceedButtonbut{
    margin-top:10px;
    background-color:#F94D00;
}
.totalCostLabelbut{
    font-weight:bold;
    font-size:16px;
    color:black;
}

.content-div {
    margin-left: 300px;
    margin-top: 40px;
    padding: 35px;
    background-color: white;
    box-shadow: 0px 12px 25px rgba(0, 0, 0, 0.12);
    width: 100%;
}
.payment-option {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid black;
    display: flex;
    align-items: center;
    padding: 5px;
    margin-bottom: 10px;
    justify-content: space-between; /* Ensures label and image are on the left */
}
.payment-text {
    font-size: 18px;
    margin-left: 10px; /* Moves text closer to the image */
    width: 100%;

}
.radioButtonpay{
    margin-left:auto;
}
.imagepay{
    width:30px;
    height:30px;
    margin-right:18px;
}
.titlepay{
    font-size:34px;
    color:#E65100;
    margin-bottom:35px;
    text-align:center;
}
.dialogo1{
    width:400px;
    height:300px;
}
.KUCCPRequirementstitle{
    font-weight:bold;
    margin-left:90px;
    color:#802800;
    font-size:25px;
}
.firstTabLabeltitle {
    font-weight: bold;
    margin-left: 90px;
    margin-top: 20px;
    color: #802800;
    font-size: 20px;
}
.firstTabLabeltitless {
    font-weight: bold;
    margin-left: 90px;
    margin-top: 20px;
    color: #802800;
    font-size: 20px;
}
.highlightedFieldInfo55{
    font-weight: bold;
    color: #802800;
    margin-left: 50px;
    margin-top: 20px;
    width: 80%;
    font-size: 16px;
}

.highlightedFieldInfo51{
    font-weight: bold;
    color: #802800;
    margin-right: 100px;
    margin-top: 30px;
    width: 80%;
    font-size: 16px;
}

.view-all-button {
    margin-left: 50px;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: #FE691E;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
}
.ratingLayout{
    margin-top: 20px;
    margin-left: 200px;
}
.main-titlepa span {
    font-size: 37px;
    margin-top: 2px;
    font-weight: bold;
    line-height: 26px;
    color: #E65100;
    margin-left: 200px;
}








@media (max-width: 790px) {
    .navbar {
        flex-direction: row !important;
        align-items: flex-start;
        height: auto;
    }

    .logo {
        height: 40px;
        width: 70px;
        margin-top: 5px;
        align-self: flex-start;
    }

    .navbar > div {
        width: 50%;
        display: flex;
        justify-content: space-between;
    }

    .navbar .imgIcon {
        width: 20px;
        margin-top: 5px;
        height: 20px;
    }

    .navbar .mobile {
        width: 20px;
        margin-top: 5px;
        height: 20px;
        display: block;
    }

    .nav-bar .mobile {
        width: 20px;
        margin-top: 5px;
        height: 20px;
        display: block;
    }

    .dropdown-menu {
        right: 10px;
        top: 50px;
    }

    .menucontainer,
    .verticalSeparator,
    .verticalSeparator2 {
        display: none;
    }

    .left-section {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 0 20px;
        margin-top: 10px;
    }

    .left-section h2 {
        font-size: 12px;
        font-weight: normal;
        color: black;
    }

    .left-section h3 {
        font-size: 18px;
        font-weight: normal;
        line-height: 30px;
        color: black;
    }

    .mainLayout {
        flex-direction: column !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .contentLayout {
        flex-direction: column !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
    }

    .graphSection {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    .insights-box {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    #chartContainer {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .boxesSection {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    .insights-box h3 {
        font-size: 16px;
    }

    .insights-box p {
        font-size: 12px;
    }

    .insights-box button {
        width: 100px;
        height: 30px;
        font-size: 12px;
    }

    .profile-heading {
        font-size: 15px;
        font-weight: normal;
    }
    .backButtonContainer{
        display: none;
    }

    .backButton{
        display: none;

    }
    .h25 {
        font-size: 17px;
        margin-top: 60px;
        width:100%;
        font-weight: bold;
        color: #FE691E;
        margin-left: 10px;
        margin-right: 10px;
    }
    .h27{
        margin-left:50px;
        margin-top:20px;
        font-size:12px;
        color: #802800;
        margin-left: 10px;
        margin-right: 10px;
        width:100%;

    }
    .h26 {
        font-size: 18px;
        margin-top: 10px;
        font-weight:bold;
        color: #802800;
        margin-left: 10px;
    }
    .searchField{
        /*        border: 1px solid grey !important;*/
        width: calc(100% - 20px) !important; /* Accounts for margins */
        box-sizing: border-box; /* Includes padding/border in width */
        margin-left: 10px !important;
        margin-right: 20px !important;
        height:35px;
    }

    .searchField2{
        /*        border: 1px solid grey !important;*/
        width: calc(100% - 20px) !important; /* Accounts for margins */
        box-sizing: border-box; /* Includes padding/border in width */
        margin-left: 10px !important;
        margin-right: 20px !important;
        height:35px;
    }
    .levelFilter{
        margin-left:10px;
        margin-top:10px;
        width: calc(100% - 20px) !important; /* Accounts for margins */
    }
    .third-table {
        margin-left:10px;
        margin-right:10px;
        margin-top:10px;
        width: calc(100% - 20px) !important;
    }
    .third-table vaadin-grid-cell-content {
        width: 100% !important;
    }

    /* Name column adjustments */
    .titletable {
        font-size: 14px !important;
        width: 100% !important;
        min-width: unset !important;
        max-width: 100% !important;
        padding-right: 10px !important;
    }



    .view-button16 {
        margin-left: 30px;
        width: 60px;
        height: 30px;
        cursor: pointer;
        font-size: 12px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    }
    .view-button17 {

        color:white;

        width: 120px;
        height: 30px;

        font-size: 12px;

    }
    .contextmenu{
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
    }

    .paginationControls{
        margin-top:0;
        margin-left:10px;
        width: 100px;
    }
    .PageButton{
        width:80px;
        font-size: 12px;
    }
    .pageInfo{
        font-size: 12px;
    }

    .filter-search-layout {
        flex-direction: column !important;
        gap: 10px;
        padding: 0 10px;
        margin: 0 !important;
        width: 100% !important;
    }
    /* Full width for both components */
    .levelFilter{
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
    }

    /* Remove specific margins from existing rules */
    .searchField1 {
        width: calc(100% - 20px) !important; /* Accounts for margins */
        box-sizing: border-box; /* Includes padding/border in width */
        margin-left: 10px !important;
        margin-right: 20px !important;
        height:35px;
    }

    .levelFilter {
        margin-left: 0 !important;
    }
    .institutionContainer {
        margin-left: 10px !important;
        margin-right: 10px !important;
        width: calc(100% - 20px) !important;
        box-sizing: border-box;
    }
    .gridContainer {
        margin-left: 10px !important;
        width: calc(100% - 20px) !important;
    }

    .contentLayout1 {
        margin-left: 0 !important;
        padding: 0 10px !important;
    }

    .h23 {
        font-size: 16px;
        margin-top: 10px;
        font-weight: bold;
        color: #FE691E;
        margin-left:10px;
    }

    .status{
        font-size:17px;
        font-weight:bold;
        margin-top:25px;
        color:#802800;
        margin-left:10px;
    }
    .data{
        font-size:15px;
        margin-top:25px;
        color:red;
        margin-left:10px;
        width:100%;
    }
    .tickIcon{
        margin-top:25px;
        font-size:15px;
    }
    .profileHeading1{
        font-size:20px;
        font-weight:bold;
        margin-top:34px;
        color:#802800;
        margin-left:10px;
    }
    .info-box {
        width: 100% !important;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    /*    .main-titlepa{
            font-size: 20px;
            margin-top: 2px;
            width: 100%;
            font-weight: bold;
            color: blue;
            text-align:left;
            margin-left: 10px;
        }*/

    .main-titlepa span {
        font-size: 20px !important;   /* Override inline font-size */
        color: #E65100 !important;    /* Override inline color */
        width: 100%;
        margin-left: 10px;
    }
    .paragraph{
        font-size:15px;
        width:100%;
        text-align:left;
        font-weight:normal;
        margin-top:1px;
        color:grey;
    }
    .overView{
        font-size:18px;
        width:100%;
        text-align:left;
        font-weight:normal;
        margin-top:1px;
        color:#802800;
    }
    .topLeftButtons{
        display: none;
    }

    .centered-container1 {
        margin-left: 0 !important;
        text-align: center;
        align-items: center !important;
    }

    .centered-container1 > * {
        margin-left: 0 !important;
        text-align: left !important;
        width: 100% !important;
    }

    /* Update existing media query rules */
    .contentLayout {
        flex-direction: column !important;
        align-items: center !important;
        margin-left: 0 !important;
        padding: 0 10px !important;
    }

    /* Center specific labels */
    [class$="Label"], .levelLabel, .costLabel {
        text-align: left !important;
        margin-left: 0 !important;

    }

    /* Adjust separator width */
    .separator {
        width: 100% !important;
        margin: 20px auto !important;
    }
    .titleLabelAbout,.levelLabel,.costLabel{
        font-size: 18px;
        margin-top:30px;

    }
    .leftSection66{
        display: none;
    }
    .maintitle{
        width: 100%;
        font-size: 20px;
    }
    .third-tabletitle{
        font-size:12px;
        line-height:1.5;
        color:black;
        width:100px;
    }


    .filterSearchLayout5 {
        flex-direction: column !important;
        gap: 15px;
        padding: 0 10px !important;
        margin-top: 10px !important;
        width: 100% !important;
    }

    .ratingLayout {
        width: 100% !important;
        margin-left: 0px !important;
        margin-right: 10px !important;
        order: 2; /* Ensure dropdown is first */
    }





    .searchField3{
        order: 1; /* Ensure dropdown is first */
        /*        border: 1px solid grey !important;*/
        width: calc(100% - 20px) !important; /* Accounts for margins */
        box-sizing: border-box; /* Includes padding/border in width */
        margin-left: 10px !important;
        margin-right: 20px !important;
        height:35px;
    }






    .filterSearchLayout1 {
        flex-direction: column !important;
        gap: 15px;
        padding: 0 10px !important;
        margin-top: 10px !important;
        width: 100% !important;
    }

    .rankLayout {
        width: 100% !important;
        margin-left: 0px !important;
        margin-right: 10px !important;
        order: 1; /* Ensure dropdown is first */
    }

    .highlightedFieldInfo {
        order: 2; /* Display info below dropdown */
        width: 100% !important;
        margin: 0 !important;
        text-align: left !important;
        font-size: 14px !important;
    }

    .viewButtonall {
        display: none;
    }

    /* Adjust dropdown width */
    .locationDropdown {
        margin-left: 10px !important;
    }
    .fieldInstitutionByRankLabel{
        margin-left: 10px !important;
    }

    .filterSearchLayout2 {
        flex-direction: column !important;
        gap: 15px;
        padding: 0 10px !important;
        margin-top: 10px !important;
        width: 100% !important;
    }
    .rankLayout1 {
        width: 100% !important;
        margin-left: 0px !important;
        margin-right: 10px !important;
        order: 1; /* Ensure dropdown is first */
    }
    .searchField2 {
        width: calc(100% - 20px) !important; /* Accounts for margins */
        box-sizing: border-box; /* Includes padding/border in width */
        margin-left: 5px !important;
        margin-right: 20px !important;
        height:35px;
        order: 2; /* Ensure dropdown is first */
    }

    .filtersLayout {
        flex-direction: column !important;
        gap: 15px;
        padding: 0 10px !important;
        margin-top: 10px !important;
        width: 100% !important;
    }
    .levelLayout {
        width: 100% !important;
        margin-left: 0px !important;
        margin-right: 10px !important;
        order: 1; /* Ensure dropdown is first */
    }
    .locationLayout {
        width: 100% !important;
        margin-left: 0px !important;
        margin-right: 10px !important;
        order: 2; /* Ensure dropdown is first */
    }
    .modeLayout {
        width: 100% !important;
        margin-left: 0px !important;
        margin-right: 10px !important;
        order: 3; /* Ensure dropdown is first */
    }
    .nav-link{
        display: none;
    }
    .nav-button{
        display: none;
    }
    .nav-button1 {
        background-color:#F94D00;
        color: white;
        font-size: 12px;
        width:90px;
        height: 30px;


    }
    .main-content {
        display: flex;
        width: 100%;
        margin-top: 80px;
    }
    /* Left Side Text Content */
    .text-section {
        width: 100%;
        align-items: center;
        margin-top: 60px;
    }
    .sub-header {
        font-size: 25px;
        color: white;
        width: 100%;
        font-weight: bold;
        line-height: 20px;
    }
    .p{
        font-size: 16px;
        margin-top: 30px;
        color: white;
        width: 100%;
        font-weight: normal;
        line-height: 20px;
    }
    .get-button {
        background-color:#F94D00;
        color: white;
        font-size: 16px;
        width: 200px;
        height: 40px;
        cursor: pointer;
        top: 20px;


    }
    .footer-link{
        display: none;
    }
    .footer-text{
        font-size: 16px;
    }
    .leftSectionu{
        display: none;
    }
    .sub-textt {
        font-size: 16px;
        color: #555;
        width: 100%;
        margin-left:10px;
    }
    .title-text3 {
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }
    .description-text3{
        font-size: 16px;
    }
    .bottomLayoutbut{
        margin-left:10px;
    }
    .proceedButtonbut{
        font-size:16px;
        margin-top:10px;
        background-color:#F94D00;
    }
    .totalCostLabelbut{

        font-size:16px;
        color:black;
    }
    .content-div {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        padding: 20px !important;
    }
    .payment-option {
        width: 100%;
        height: 50px;

    }
    .payment-text {
        font-size: 12px;
        margin-left: 10px; /* Moves text closer to the image */
        width: 100%;

    }
    .radioButtonpay{
        margin-left:20px;
    }
    .imagepay{
        width:25px;
        height:25px;
        margin-right:18px;
    }
    .titlepay{
        font-size:20px;
        color:#E65100;
        margin-bottom:35px;
        text-align:center;
    }
    .main-container6 {
        width: 100% !important;
        height: auto !important;
        margin-top: 20px !important;
        padding: 10px;
    }

    .phone-input-layout {
        flex-direction: column;
        align-items: stretch;
    }

    .country-code-dropdown,
    .phone-number-field {
        width: 100% !important;
    }
    .country-code-dropdown {
        width: 100px !important;
    }

    .phone-number-field {
        font-size: 14px;
    }

    .pay-button {
        font-size: 16px;
    }

    .title6 {
        font-size: 22px;
    }

    .payment-amount {
        font-size: 16px;
    }
    .dialogo1{
        width:200px;
        height:300px;
    }
    .KUCCPRequirementstitle{
        font-weight:bold;
        margin-left:10px;
        color:#802800;
        font-size:20px;
    }
    .firstTabLabeltitle {

        margin-left: 10px;
        margin-top: 20px;
        color: #802800;
        font-size: 20px;
    }
    .firstTabLabeltitless{
        margin-left: 10px;
        margin-top: 20px;
        color: #802800;
        font-size: 16px;
    }

    .highlightedFieldInfo55{
        font-weight: bold;
        color: #802800;
        margin-left: 10px;
        margin-top: 30px;
        width: 80%;
        font-size: 15px;
    }
    .highlightedFieldInfo51{
        font-weight: bold;
        color: #802800;
        margin-left: 10px;
        margin-top: 30px;
        width: 80%;
        font-size: 16px;
    }
    .view-all-button {
        margin-left: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
        background-color: #FE691E;
        color: white;
        width: 120px;
        height: 30px;
        border-radius: 5px;
    }


}


























.buttonLayout {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;        /* don't wrap */
    gap: 10px;
    margin-top: 20px;
}

.buttonLayout button {
    flex: 1 1 0;               /* allow buttons to shrink */
    min-width: 0;              /* override any defaults */
    max-width: 100%;           /* prevent overflow */

}
.neButton{
    flex:1 1 0;
    min-width:0;
    max-width:100%;
    font-size: 16px;
    background-color:#F94D00;
    color:white;
}

/*Councilor section*/
.session-grid {
    border-radius: 12px;
    overflow: hidden;
}

.session-grid::part(header) {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
/*    background-color: #f94d00;*/
}

.session-grid::part(header-cell) {
/*    background-color: #f94d00;*/
    font-weight: 600;
    color: #fff;
}

.session-grid::part(header-cell):first-child {
    border-top-left-radius: 12px;
}

.session-grid::part(header-cell):last-child {
    border-top-right-radius: 12px;
}




vaadin-checkbox::part(checked-checkbox) {
    background-color: #f94d00;
    border-color: #f94d00;
}

vaadin-horizontal-layout.active-profile {
    border: 2px solid black !important;
}

.councelor-profile{
    border: 2px solid black;
}.active-profile{
    border: 2px solid black;
}
.active-profile{
    border: 2px solid black;
}



@media (min-width: 768px) {
    .question-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
    }

    .question-text {
        flex: 2;
        margin-right: 20px;
    }

    .radio-buttons {
        flex: 1;
        min-width: 120px;
    }
    .buttonLayout button {
        flex: 1 1 0;                /* allow shrinking */
        min-width: 0;
        max-width: 100%;
        padding: 8px 12px;          /* optional: reduce padding */
        font-size: 14px;            /* optional: smaller font */
    }
    .neButton{

        font-size: 12px;

    }
}

@media (max-width: 767px) {
    .question-wrapper {
        display: block;
        margin-bottom: 20px;
    }

    .question-text {
        margin-bottom: 8px;
        display: block;
    }

    .radio-buttons {
        display: block;
        width: 100%;
    }
    .buttonLayout button {
        flex: 1 1 0;                /* allow shrinking */
        min-width: 0;
        max-width: 100%;
        padding: 8px 12px;          /* optional: reduce padding */
        font-size: 14px;            /* optional: smaller font */
    }
    .neButton{

        font-size: 12px;

    }


}


























.no-data-label {
    color: #666;
    font-style: italic;
    margin-top: 20px;
}