@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';

/* /Components/Pages/Admin/ViewReviews.razor.rz.scp.css */
/* CSS Variables - CoralWorker Theme Colors */
:root[b-gjl7sw71mc] {
    --cw-primary: #0b0198;
    --cw-primary-light: #1a16b8;
    --cw-secondary: #01CD84;
    --cw-accent: #fcf439;
    --cw-danger: #ef4444;
    --cw-warning: #f59e0b;
    --cw-info: #0ea5e9;
    --cw-success: #10b981;
    --cw-dark: #202124;
    --cw-gray: #6c757d;
    --cw-light: #f8f9fa;
    --cw-border: #e9ecef;
}

/* Container */
.reviews-container[b-gjl7sw71mc] {
    max-width: 1600px;
    margin: 0 auto;
    padding: 2rem;
}

/* Header Section */
.reviews-header[b-gjl7sw71mc] {
    background: linear-gradient(135deg, var(--cw-primary) 0%, var(--cw-primary-light) 100%);
    border-radius: 20px;
    padding: 2.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 10px 30px rgba(11, 1, 152, 0.2);
}

.header-content[b-gjl7sw71mc] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-icon[b-gjl7sw71mc] {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: white;
}

.header-text h1[b-gjl7sw71mc] {
    font-size: 28px;
    font-weight: 700;
    color: white;
    margin: 0 0 0.5rem 0;
}

.header-text p[b-gjl7sw71mc] {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

/* Custom Tabs */
.custom-tabs[b-gjl7sw71mc] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.tabs-header[b-gjl7sw71mc] {
    display: flex;
    background: var(--cw-light);
    border-bottom: 2px solid var(--cw-border);
    padding: 0.5rem;
    gap: 0.5rem;
}

.tab-button[b-gjl7sw71mc] {
    flex: 1;
    padding: 1rem 1.5rem;
    background: transparent;
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 15px;
    font-weight: 600;
    color: var(--cw-gray);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.tab-button:hover[b-gjl7sw71mc] {
    background: rgba(11, 1, 152, 0.05);
    color: var(--cw-primary);
}

.tab-button.active[b-gjl7sw71mc] {
    background: var(--cw-primary);
    color: white;
    box-shadow: 0 4px 12px rgba(11, 1, 152, 0.3);
}

.tab-button i[b-gjl7sw71mc] {
    font-size: 18px;
}

.tab-button .badge[b-gjl7sw71mc] {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
}

.tab-button.active .badge[b-gjl7sw71mc] {
    background: rgba(255, 255, 255, 0.25);
}

.tab-content[b-gjl7sw71mc] {
    display: none;
}

.tab-content.active[b-gjl7sw71mc] {
    display: block;
}

.tab-panel[b-gjl7sw71mc] {
    padding: 2rem;
}

/* Filter Section */
.filter-section[b-gjl7sw71mc] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: var(--cw-light);
    border-radius: 12px;
    border: 2px solid var(--cw-border);
}

.filter-label[b-gjl7sw71mc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--cw-dark);
    font-size: 15px;
}

.filter-label i[b-gjl7sw71mc] {
    color: var(--cw-primary);
}

.filter-buttons[b-gjl7sw71mc] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

[b-gjl7sw71mc] .filter-btn {
    padding: 0.625rem 1.25rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

[b-gjl7sw71mc] .filter-btn.active {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Grid Container */
.grid-container[b-gjl7sw71mc] {
    background: white;
    border-radius: 12px;
    overflow: hidden;
}

/* User Info in Grid */
.user-info[b-gjl7sw71mc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-avatar[b-gjl7sw71mc] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--cw-primary) 0%, var(--cw-primary-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    flex-shrink: 0;
}

.user-avatar.employer[b-gjl7sw71mc] {
    background: linear-gradient(135deg, var(--cw-secondary) 0%, #00b374 100%);
}

.user-details[b-gjl7sw71mc] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.user-name[b-gjl7sw71mc] {
    font-weight: 600;
    color: var(--cw-dark);
    font-size: 14px;
}

.user-type[b-gjl7sw71mc] {
    font-size: 12px;
    color: var(--cw-gray);
}

/* Rating Stars */
.rating-stars[b-gjl7sw71mc] {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
}

.rating-stars i[b-gjl7sw71mc] {
    color: var(--cw-accent);
    font-size: 16px;
}

.rating-stars .far[b-gjl7sw71mc] {
    color: var(--cw-border);
}

/* Review Text */
.review-text[b-gjl7sw71mc] {
    color: var(--cw-dark);
    font-size: 14px;
    line-height: 1.5;
}

.reply-icon[b-gjl7sw71mc] {
    color: var(--cw-primary);
    margin-right: 0.5rem;
    font-size: 12px;
}

/* Status Badges */
.status-badge[b-gjl7sw71mc] {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
}

.status-badge.pending[b-gjl7sw71mc] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--cw-warning);
    border: 1px solid var(--cw-warning);
}

.status-badge.active[b-gjl7sw71mc] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--cw-success);
    border: 1px solid var(--cw-success);
}

.status-badge.inactive[b-gjl7sw71mc] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--cw-danger);
    border: 1px solid var(--cw-danger);
}

/* Action Buttons */
.action-buttons[b-gjl7sw71mc] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

[b-gjl7sw71mc] .action-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    min-width: 36px !important;
}

[b-gjl7sw71mc] .action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .tabs-header[b-gjl7sw71mc] {
        flex-wrap: wrap;
    }

    .tab-button[b-gjl7sw71mc] {
        min-width: calc(50% - 0.25rem);
    }
}

@media (max-width: 768px) {
    .reviews-container[b-gjl7sw71mc] {
        padding: 1rem;
    }

    .reviews-header[b-gjl7sw71mc] {
        padding: 1.5rem;
    }

    .header-text h1[b-gjl7sw71mc] {
        font-size: 22px;
    }

    .tab-button[b-gjl7sw71mc] {
        min-width: 100%;
        font-size: 14px;
    }

    .filter-section[b-gjl7sw71mc] {
        flex-direction: column;
        align-items: flex-start;
    }

    .filter-buttons[b-gjl7sw71mc] {
        width: 100%;
    }

    [b-gjl7sw71mc] .filter-btn {
        flex: 1;
    }

    .tab-panel[b-gjl7sw71mc] {
        padding: 1rem;
    }
}
/* /Components/Pages/Admin/ViewWorkers.razor.rz.scp.css */
/* Loading State */
.loading-state[b-62b9p55udu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    margin: 20px 0;
}

.loading-spinner i[b-62b9p55udu] {
    font-size: 3rem;
    color: #0b0198;
    animation: spin-b-62b9p55udu 1s linear infinite;
}

.loading-state p[b-62b9p55udu] {
    margin-top: 20px;
    color: #666;
    font-size: 1.1rem;
    font-weight: 500;
}

@keyframes spin-b-62b9p55udu {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Worker Avatar in Grid */
.worker-avatar[b-62b9p55udu] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #e9ecef;
    transition: all 0.3s ease;
}

.worker-avatar:hover[b-62b9p55udu] {
    border-color: #0b0198;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(11, 1, 152, 0.3);
}

.worker-photo[b-62b9p55udu] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

/* Modal Overlay */
.modal-overlay[b-62b9p55udu] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    animation: fadeIn-b-62b9p55udu 0.3s ease;
}

@keyframes fadeIn-b-62b9p55udu {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Worker Detail Modal */
.worker-detail-modal[b-62b9p55udu] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1060;
    width: 90%;
    max-width: 1200px;
    max-height: 90vh;
    animation: slideDown-b-62b9p55udu 0.3s ease;
}

@keyframes slideDown-b-62b9p55udu {
    from {
        opacity: 0;
        transform: translate(-50%, -60%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.modal-dialog[b-62b9p55udu] {
    width: 100%;
    margin: 0;
}

.modal-content[b-62b9p55udu] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

/* Modal Header - Critical Fix for Close Button Alignment */
.modal-header[b-62b9p55udu] {
    padding: 20px 30px;
    background: linear-gradient(135deg, #0b0198 0%, #1a16b8 100%);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.header-content[b-62b9p55udu] {
    flex: 1;
}

.worker-header-info[b-62b9p55udu] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-avatar[b-62b9p55udu] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.3);
    object-fit: cover;
}

.header-text h3[b-62b9p55udu] {
    margin: 0 0 5px 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
}

.header-text p[b-62b9p55udu] {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
}

/* Modal Close Button - RIGHT ALIGNED */
.modal-close-btn[b-62b9p55udu] {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-left: 20px;
    padding: 0;
    font-size: 1.8rem;
    line-height: 1;
}

.modal-close-btn:hover[b-62b9p55udu] {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: rotate(90deg) scale(1.1);
}

.modal-close-btn span[b-62b9p55udu] {
    font-size: 2rem;
    line-height: 1;
}

/* Modal Body */
.modal-body[b-62b9p55udu] {
    padding: 0;
    overflow-y: auto;
    flex: 1;
}

/* Loading Container in Modal */
.loading-container[b-62b9p55udu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
}

.loading-container .spinner-border[b-62b9p55udu] {
    width: 3rem;
    height: 3rem;
    border-width: 0.3rem;
}

.loading-container p[b-62b9p55udu] {
    margin-top: 20px;
    color: #666;
    font-size: 1.1rem;
    font-weight: 500;
}

/* Custom Tabs */
.custom-tabs[b-62b9p55udu] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tab-navigation[b-62b9p55udu] {
    display: flex;
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    padding: 10px 20px;
    gap: 10px;
    flex-wrap: wrap;
}

.tab-btn[b-62b9p55udu] {
    background: transparent;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #6c757d;
    transition: all 0.3s ease;
}

.tab-btn i[b-62b9p55udu] {
    font-size: 1.2rem;
}

.tab-btn:hover[b-62b9p55udu] {
    background: rgba(11, 1, 152, 0.1);
    color: #0b0198;
}

.tab-btn.active[b-62b9p55udu] {
    background: #0b0198;
    color: white;
    box-shadow: 0 4px 12px rgba(11, 1, 152, 0.3);
}

/* Tab Content */
.tab-content[b-62b9p55udu] {
    padding: 30px;
    overflow-y: auto;
}

.tab-pane[b-62b9p55udu] {
    animation: fadeInContent-b-62b9p55udu 0.3s ease;
}

@keyframes fadeInContent-b-62b9p55udu {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Detail Section */
.detail-section[b-62b9p55udu] {
    margin-bottom: 30px;
}

.section-title[b-62b9p55udu] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #0b0198;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e9ecef;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-title i[b-62b9p55udu] {
    font-size: 1.4rem;
}

/* Info Items */
.info-item[b-62b9p55udu] {
    margin-bottom: 20px;
}

.info-item label[b-62b9p55udu] {
    display: block;
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.info-item span[b-62b9p55udu] {
    display: block;
    color: #212529;
    font-size: 1rem;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 3px solid #0b0198;
}

/* Responsive Design */
@media (max-width: 768px) {
    .worker-detail-modal[b-62b9p55udu] {
        width: 95%;
        max-height: 95vh;
    }

    .modal-header[b-62b9p55udu] {
        padding: 15px 20px;
    }

    .header-avatar[b-62b9p55udu] {
        width: 50px;
        height: 50px;
    }

    .header-text h3[b-62b9p55udu] {
        font-size: 1.2rem;
    }

    .modal-close-btn[b-62b9p55udu] {
        width: 35px;
        height: 35px;
        margin-left: 10px;
    }

    .tab-navigation[b-62b9p55udu] {
        padding: 10px;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .tab-btn[b-62b9p55udu] {
        padding: 10px 15px;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .tab-content[b-62b9p55udu] {
        padding: 20px;
    }

    .section-title[b-62b9p55udu] {
        font-size: 1.1rem;
    }
}

/* Badge Styles */
.badge[b-62b9p55udu] {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-block;
}

.badge-success[b-62b9p55udu] {
    background: #d4edda;
    color: #155724;
}

.badge-warning[b-62b9p55udu] {
    background: #fff3cd;
    color: #856404;
}

.badge-secondary[b-62b9p55udu] {
    background: #e2e3e5;
    color: #383d41;
}

.badge-info[b-62b9p55udu] {
    background: #d1ecf1;
    color: #0c5460;
}

.badge-primary[b-62b9p55udu] {
    background: #cce5ff;
    color: #004085;
}

/* Worker Name Cell */
.worker-name-cell strong[b-62b9p55udu] {
    font-size: 1rem;
    color: #212529;
}

.worker-name-cell small[b-62b9p55udu] {
    font-size: 0.85rem;
    color: #6c757d;
}
/* /Components/Pages/Auth/Employers/EmployerVerifyEmail.razor.rz.scp.css */
.countdown-timer[b-w69j8krcx0] {
    font-size: 0.9rem;
    color: #666;
}

.countdown-text[b-w69j8krcx0] {
    font-weight: bold;
    color: #dc3545;
}

/* Loading Overlay Styles */
.loading-overlay[b-w69j8krcx0] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loading-spinner[b-w69j8krcx0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.spinner[b-w69j8krcx0] {
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

.loading-text[b-w69j8krcx0] {
    color: #333;
    font-size: 1.1rem;
    font-weight: 500;
}

/* Button Spinner for inline loading states */
.button-spinner[b-w69j8krcx0] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 0.5rem;
    vertical-align: middle;
}

@@keyframes spin {
    0%[b-w69j8krcx0] {
        transform: rotate(0deg);
    }

    100%[b-w69j8krcx0] {
        transform: rotate(360deg);
    }
}

/* Disabled state styles */
button:disabled[b-w69j8krcx0] {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-control:disabled[b-w69j8krcx0] {
    background-color: #f8f9fa;
    opacity: 0.6;
}
/* /Components/Pages/Auth/Workers/WorkerRegister.razor.rz.scp.css */
/* Existing styles */
/* Profile Picture Upload Styling */
.profile-upload-container[b-5yddszicbc] {
    margin-bottom: 20px;
    padding: 20px;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    background-color: #f8f9fa;
    text-align: center;
    transition: all 0.3s ease;
}

    .profile-upload-container:hover[b-5yddszicbc] {
        border-color: #007bff;
        background-color: #f0f7ff;
    }

.profile-upload-inner[b-5yddszicbc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.profile-preview[b-5yddszicbc] {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
}

.profile-image[b-5yddszicbc] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-placeholder[b-5yddszicbc] {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: #e9ecef;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #6c757d;
}

    .profile-placeholder i[b-5yddszicbc] {
        font-size: 50px;
        margin-bottom: 10px;
    }

.remove-image-btn[b-5yddszicbc] {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    color: #dc3545;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

    .remove-image-btn:hover[b-5yddszicbc] {
        background-color: #dc3545;
        color: white;
    }

.upload-details[b-5yddszicbc] {
    display: flex;
    flex-direction: column;
    margin-top: 5px;
}

.file-name[b-5yddszicbc] {
    font-weight: 500;
    color: #212529;
}

.file-size[b-5yddszicbc] {
    font-size: 0.875rem;
    color: #6c757d;
}

.profile-uploader[b-5yddszicbc] {
    margin-top: 10px;
}

    .profile-uploader .e-upload[b-5yddszicbc] {
        border: none;
        background: transparent;
    }

    .profile-uploader .e-upload-browse-button[b-5yddszicbc] {
        background-color: #007bff;
        color: white;
        border-radius: 4px;
        padding: 8px 16px;
        font-weight: 500;
        transition: background-color 0.2s;
    }

        .profile-uploader .e-upload-browse-button:hover[b-5yddszicbc] {
            background-color: #0069d9;
        }

.upload-hint[b-5yddszicbc] {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 5px;
}

    .upload-hint i[b-5yddszicbc] {
        margin-right: 5px;
    }











.control_wrapper[b-5yddszicbc] {
    width: 1100px;
}

.custom-file.e-control-wrapper[b-5yddszicbc] {
    margin: 5px 0 -8px 0;
}

.custom-file .e-file-select-wrap[b-5yddszicbc] {
    padding: 0px;
    margin-left: -100px
}

.custom-file button.e-css.e-btn.e-upload-browse-btn[b-5yddszicbc] {
    margin-left: 130px;
    background: none !important;
    border: none;
    padding: 0 !important;
    font-family: inherit;
    color: #ff4081;
    text-decoration: underline;
    cursor: pointer;
    box-shadow: none;
    text-transform: capitalize;
}

    .custom-file button.e-css.e-btn.e-upload-browse-btn:hover[b-5yddszicbc] {
        background: none !important;
        border: none;
        padding: 0 !important;
        font-family: inherit;
        color: #ff4081;
        text-decoration: underline;
        cursor: pointer;
        box-shadow: none;
        text-transform: capitalize;
    }

#dropArea .e-upload-files .e-file-delete-btn.e-icons[b-5yddszicbc],
#dropArea .e-upload-files .e-file-remove-btn.e-icons[b-5yddszicbc],
#dropArea .e-upload-files .e-file-abort-btn[b-5yddszicbc] {
    top: 120px;
    background-color: white;
    border-radius: 50%;
    font-size: 12px;
    left: 80px;
}

#dropArea .e-upload-files li .e-file-remove-btn.e-icons.e-upload-icon[b-5yddszicbc] {
    font-size: 14px;
    left: 20px;
}

#dropArea .e-upload-files li:hover .e-icons[b-5yddszicbc] {
    visibility: visible;
}

#dropArea .e-upload-files li .e-icons[b-5yddszicbc] {
    visibility: hidden;
}

#dropArea .e-upload .e-upload-files .e-icons.e-upload-icon[b-5yddszicbc] {
    font-family: 'Uploader_Icon';
    speak: none;
    font-size: 16px;
    left: 20px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    #dropArea .e-upload .e-upload-files .e-icons.e-upload-icon[b-5yddszicbc]::before {
        content: '\e700';
    }

#dropArea .e-upload .e-upload-files .e-icons:not(.e-uploaded):hover[b-5yddszicbc] {
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
}

#dropArea .e-upload .e-upload-files .e-upload-file-list[b-5yddszicbc] {
    border: 0;
    display: inline-block;
    width: 165px;
}

.upload-image[b-5yddszicbc] {
    width: 150px;
    height: 150px;
    display: inline-flex;
    background-size: contain;
    margin: 7px;
    text-align: center;
    line-height: 10;
    border-radius: 5px;
}

    .upload-image[b-5yddszicbc]:after {
        content: "";
        position: absolute;
        top: 6px;
        left: 6px;
        width: inherit;
        height: inherit;
        background: lightgray url('http://via.placeholder.com/300?text=Loading...') no-repeat center;
        color: transparent;
        border-radius: 5px;
    }

div.file-name[b-5yddszicbc] {
    color: rgb(14 121 32);
    font-size: 14px;
    padding: 3px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 90%;
    white-space: nowrap;
}

div.file-size[b-5yddszicbc] {
    font-size: 13px;
    padding: 3px 10px;
    overflow: hidden;
}

.progressbar[b-5yddszicbc] {
    background: #ff4081;
    border: none;
    border-radius: 10px;
    height: 4px;
    margin-left: 7px;
    width: 90%;
    top: -60px;
    position: relative;
}

#dropArea progress[b-5yddszicbc] {
    border: none;
    background: #fff;
}

progress[b-5yddszicbc]::-webkit-progress-bar {
    border: none;
    background-color: #ffffff;
}

.material progress[b-5yddszicbc]::-moz-progress-bar {
    border-radius: 2px;
    background-color: #ff4081;
}

.material #dropArea span a[b-5yddszicbc] {
    color: #ff4081;
}

/* New styles for the multi-step form */
.step-indicator[b-5yddszicbc] {
    text-align: center;
    flex-grow: 1;
    position: relative;
}

    .step-indicator:not(:last-child)[b-5yddszicbc]:after {
        content: '';
        position: absolute;
        top: 15px;
        left: 50%;
        width: 100%;
        height: 2px;
        background-color: #dee2e6;
        z-index: 0;
    }

.step-circle[b-5yddszicbc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #dee2e6;
    color: #6c757d;
    font-weight: bold;
    margin-bottom: 5px;
    z-index: 1;
    position: relative;
}

    .step-circle.active[b-5yddszicbc] {
        background-color: #007bff;
        color: white;
    }

    .step-circle.complete[b-5yddszicbc] {
        background-color: #28a745;
        color: white;
    }

.step-label[b-5yddszicbc] {
    font-size: 12px;
    color: #6c757d;
}

    .step-label.active[b-5yddszicbc] {
        color: #007bff;
        font-weight: bold;
    }


/* Corrected media query syntax */
@@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #dropArea .e-upload .e-upload-files .e-file-remove-btn.e-icons[b-5yddszicbc],
    .e-bigger #dropArea .e-upload .e-upload-files .e-file-remove-btn.e-icons[b-5yddszicbc] {
        padding: 18px 25px 18px 12px;
    }
}
/* /Components/Pages/Employer/ApplicantsForJob.razor.rz.scp.css */
/* Job Selector Styles */
.job-selector-container select[b-diry9q8b07] {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.job-selector-container select:hover[b-diry9q8b07] {
    border-color: #1967d2;
}

.job-selector-container select:focus[b-diry9q8b07] {
    outline: none;
    border-color: #1967d2;
    box-shadow: 0 0 0 0.2rem rgba(25, 103, 210, 0.15);
}

/* Modal Overlay */
.modal-overlay[b-diry9q8b07] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1040;
    animation: fadeIn-b-diry9q8b07 0.3s ease;
}

/* Modal Container */
.modal-container[b-diry9q8b07] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    padding: 1rem;
}

/* Modal Dialog */
.modal-dialog[b-diry9q8b07] {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: auto;
    pointer-events: auto;
    animation: slideInDown-b-diry9q8b07 0.4s ease;
}

/* Modal Content */
.modal-content[b-diry9q8b07] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);
    outline: 0;
}

/* Modal Header */
.modal-header[b-diry9q8b07] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

    .modal-header.reject-header[b-diry9q8b07] {
        background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    }

.modal-title[b-diry9q8b07] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .modal-title i[b-diry9q8b07] {
        font-size: 1.5rem;
    }

/* Modal Close Button */
.modal-close-btn[b-diry9q8b07] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: white;
    opacity: 0.9;
    cursor: pointer;
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    transition: all 0.15s ease-in-out;
}

    .modal-close-btn:hover:not(:disabled)[b-diry9q8b07] {
        opacity: 1;
        background-color: rgba(255, 255, 255, 0.3);
    }

    .modal-close-btn:disabled[b-diry9q8b07] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Modal Body */
.modal-body[b-diry9q8b07] {
    position: relative;
    flex: 1 1 auto;
    padding: 2rem 1.5rem;
}

/* Confirmation Content */
.confirmation-content[b-diry9q8b07] {
    text-align: center;
}

.confirmation-icon[b-diry9q8b07] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    animation: scaleIn-b-diry9q8b07 0.5s ease;
}

.approve-icon[b-diry9q8b07] {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border: 3px solid #28a745;
}

    .approve-icon i[b-diry9q8b07] {
        color: #28a745;
        font-size: 2.5rem;
    }

.reject-icon[b-diry9q8b07] {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    border: 3px solid #dc3545;
}

    .reject-icon i[b-diry9q8b07] {
        color: #dc3545;
        font-size: 2.5rem;
    }

.confirmation-content h6[b-diry9q8b07] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 1rem;
}

.confirmation-content p[b-diry9q8b07] {
    color: #6c757d;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

    .confirmation-content p.text-muted[b-diry9q8b07] {
        font-size: 0.9rem;
        font-style: italic;
    }

    .confirmation-content p strong[b-diry9q8b07] {
        color: #2c3e50;
        font-weight: 600;
    }

/* Modal Footer */
.modal-footer[b-diry9q8b07] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #dee2e6;
    border-bottom-right-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    background-color: #f8f9fa;
}

/* Button Styles */
.btn[b-diry9q8b07] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    transition: all 0.15s ease-in-out;
    text-decoration: none;
    min-width: 120px;
    justify-content: center;
}

    .btn:disabled[b-diry9q8b07] {
        opacity: 0.65;
        cursor: not-allowed;
    }

.btn-secondary[b-diry9q8b07] {
    background-color: #6c757d;
    color: white;
    border-color: #6c757d;
}

    .btn-secondary:hover:not(:disabled)[b-diry9q8b07] {
        background-color: #5a6268;
        border-color: #545b62;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
    }

.btn-success[b-diry9q8b07] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border-color: #28a745;
}

    .btn-success:hover:not(:disabled)[b-diry9q8b07] {
        background: linear-gradient(135deg, #218838 0%, #1e7e34 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
    }

.btn-danger[b-diry9q8b07] {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    border-color: #dc3545;
}

    .btn-danger:hover:not(:disabled)[b-diry9q8b07] {
        background: linear-gradient(135deg, #c82333 0%, #bd2130 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
    }

/* Spinner */
.spinner-border[b-diry9q8b07] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
    border: 0.2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-diry9q8b07 0.75s linear infinite;
}

.spinner-border-sm[b-diry9q8b07] {
    width: 0.875rem;
    height: 0.875rem;
    border-width: 0.15em;
}

/* Animations */
@keyframes fadeIn-b-diry9q8b07 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideInDown-b-diry9q8b07 {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes scaleIn-b-diry9q8b07 {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes spinner-border-b-diry9q8b07 {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .modal-container[b-diry9q8b07] {
        padding: 0.5rem;
    }

    .modal-dialog[b-diry9q8b07] {
        max-width: 100%;
    }

    .modal-body[b-diry9q8b07] {
        padding: 1.5rem 1rem;
    }

    .confirmation-icon[b-diry9q8b07] {
        width: 60px;
        height: 60px;
    }

        .confirmation-icon i[b-diry9q8b07] {
            font-size: 2rem;
        }

    .confirmation-content h6[b-diry9q8b07] {
        font-size: 1.25rem;
    }

    .modal-footer[b-diry9q8b07] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .btn[b-diry9q8b07] {
        width: 100%;
    }

    .modal-header[b-diry9q8b07],
    .modal-footer[b-diry9q8b07] {
        padding: 1rem;
    }
}

/* Loading State for Option Buttons */
.option-list button[b-diry9q8b07] {
    position: relative;
    transition: all 0.3s ease;
}

    .option-list button:disabled[b-diry9q8b07] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .option-list button.processing[b-diry9q8b07] {
        pointer-events: none;
    }

        .option-list button.processing[b-diry9q8b07]::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spinner-border-b-diry9q8b07 0.75s linear infinite;
        }

/* /Components/Pages/Employer/AssignTestToWorker.razor.rz.scp.css */
/* Container */
.assign-test-container[b-ql61eamcht] {
    max-width: 900px;
    margin: 40px auto;
    padding: 20px;
}

/* Progress Indicator */
.progress-indicator[b-ql61eamcht] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
    padding: 0 20px;
}

.progress-step[b-ql61eamcht] {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 0 0 auto;
}

.step-circle[b-ql61eamcht] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #e9ecef;
    border: 3px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    color: #6c757d;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.progress-step.active .step-circle[b-ql61eamcht] {
    background: #0B0198;
    border-color: #0B0198;
    color: white;
    box-shadow: 0 4px 12px rgba(11, 1, 152, 0.3);
}

.progress-step.completed .step-circle[b-ql61eamcht] {
    background: #28a745;
    border-color: #28a745;
    color: white;
}

.step-circle i[b-ql61eamcht] {
    font-size: 24px;
}

.step-label[b-ql61eamcht] {
    margin-top: 12px;
    font-size: 13px;
    font-weight: 500;
    color: #6c757d;
    text-align: center;
    white-space: nowrap;
}

.progress-step.active .step-label[b-ql61eamcht] {
    color: #0B0198;
    font-weight: 600;
}

.progress-step.completed .step-label[b-ql61eamcht] {
    color: #28a745;
}

.progress-line[b-ql61eamcht] {
    width: 120px;
    height: 3px;
    background: #e9ecef;
    margin: 0 10px;
    position: relative;
    top: -20px;
    transition: all 0.3s ease;
}

.progress-line.active[b-ql61eamcht] {
    background: linear-gradient(to right, #28a745, #0B0198);
}

/* Main Card */
.test-assignment-card[b-ql61eamcht] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    padding: 40px;
    animation: fadeIn-b-ql61eamcht 0.4s ease;
}

@keyframes fadeIn-b-ql61eamcht {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Step Content */
.step-content[b-ql61eamcht] {
    animation: slideIn-b-ql61eamcht 0.3s ease;
}

@keyframes slideIn-b-ql61eamcht {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.step-header[b-ql61eamcht] {
    text-align: center;
    margin-bottom: 35px;
}

.step-icon[b-ql61eamcht] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    border: 3px solid #2196F3;
}

.step-icon i[b-ql61eamcht] {
    font-size: 40px;
    color: #0B0198;
}

.step-icon.warning[b-ql61eamcht] {
    background: linear-gradient(135deg, #fff3cd 0%, #ffe5a1 100%);
    border-color: #ffc107;
}

.step-icon.warning i[b-ql61eamcht] {
    color: #ff9800;
}

.step-header h2[b-ql61eamcht] {
    font-size: 26px;
    font-weight: 700;
    color: #212529;
    margin-bottom: 10px;
}

.step-header p[b-ql61eamcht] {
    font-size: 15px;
    color: #6c757d;
    margin: 0;
}

/* Training Code Input */
.training-code-input[b-ql61eamcht] {
    margin: 35px 0;
}

.code-input-group[b-ql61eamcht] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.code-segment[b-ql61eamcht] {
    width: 80px;
    height: 70px;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    border: 2px solid #dee2e6;
    border-radius: 12px;
    transition: all 0.3s ease;
    background: #f8f9fa;
    color: #0B0198;
    letter-spacing: 2px;
}

.code-segment:focus[b-ql61eamcht] {
    outline: none;
    border-color: #0B0198;
    box-shadow: 0 0 0 4px rgba(11, 1, 152, 0.1);
    background: white;
}

.code-segment[b-ql61eamcht]::placeholder {
    color: #ced4da;
    font-weight: 400;
}

.code-separator[b-ql61eamcht] {
    font-size: 32px;
    font-weight: 700;
    color: #0B0198;
    margin: 0 5px;
}

/* Worker Verified Card */
.worker-verified-card[b-ql61eamcht] {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 35px;
    position: relative;
    border: 2px solid #4caf50;
}

.verified-badge[b-ql61eamcht] {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: #4caf50;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.verified-badge i[b-ql61eamcht] {
    font-size: 24px;
    color: white;
}

.worker-info[b-ql61eamcht] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.worker-avatar[b-ql61eamcht] {
    flex-shrink: 0;
}

.worker-avatar img[b-ql61eamcht],
.avatar-placeholder[b-ql61eamcht] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.avatar-placeholder[b-ql61eamcht] {
    background: linear-gradient(135deg, #0B0198 0%, #1a16b8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-placeholder i[b-ql61eamcht] {
    font-size: 40px;
    color: white;
}

.worker-details[b-ql61eamcht] {
    flex: 1;
}

.worker-details h3[b-ql61eamcht] {
    font-size: 22px;
    font-weight: 700;
    color: #2e7d32;
    margin: 0 0 8px 0;
}

.worker-category[b-ql61eamcht] {
    font-size: 14px;
    color: #558b2f;
    margin: 0 0 4px 0;
    font-weight: 500;
}

.worker-code[b-ql61eamcht] {
    font-size: 13px;
    color: #689f38;
    margin: 0;
    font-family: 'Courier New', monospace;
    font-weight: 600;
}

/* Test Selection Section */
.test-selection-section[b-ql61eamcht] {
    margin-top: 30px;
}

.form-group[b-ql61eamcht] {
    margin-bottom: 25px;
}

.form-group label[b-ql61eamcht] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 10px;
}

.form-group label i[b-ql61eamcht] {
    font-size: 18px;
    color: #0B0198;
}

/* Syncfusion Dropdown Customization */
[b-ql61eamcht] .custom-dropdown .e-input-group {
    border-radius: 8px;
    border: 2px solid #dee2e6;
    transition: all 0.3s ease;
}

[b-ql61eamcht] .custom-dropdown .e-input-group:hover {
    border-color: #0B0198;
}

[b-ql61eamcht] .custom-dropdown .e-input-group.e-input-focus {
    border-color: #0B0198;
    box-shadow: 0 0 0 4px rgba(11, 1, 152, 0.1);
}

[b-ql61eamcht] .custom-dropdown .e-input {
    font-size: 15px;
    padding: 12px 16px;
}

[b-ql61eamcht] .custom-dropdown .e-ddl-icon {
    color: #0B0198;
}

/* Confirmation Details */
.confirmation-section[b-ql61eamcht] {
    margin-bottom: 20px;
}

.confirmation-details[b-ql61eamcht] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 30px;
}

.detail-card[b-ql61eamcht] {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
}

.detail-card:hover[b-ql61eamcht] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.detail-card.highlight[b-ql61eamcht] {
    background: linear-gradient(135deg, #fff3cd 0%, #ffe5a1 100%);
    border-color: #ffc107;
}

.detail-icon[b-ql61eamcht] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.detail-icon i[b-ql61eamcht] {
    font-size: 24px;
    color: #0B0198;
}

.detail-card.highlight .detail-icon i[b-ql61eamcht] {
    color: #ff9800;
}

.detail-info[b-ql61eamcht] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label[b-ql61eamcht] {
    font-size: 12px;
    color: #6c757d;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value[b-ql61eamcht] {
    font-size: 15px;
    color: #212529;
    font-weight: 600;
}

/* Error Message */
.error-message[b-ql61eamcht] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 20px 0;
    animation: shake-b-ql61eamcht 0.5s ease;
}

@keyframes shake-b-ql61eamcht {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.error-message i[b-ql61eamcht] {
    font-size: 20px;
    color: #856404;
}

.error-message span[b-ql61eamcht] {
    color: #856404;
    font-size: 14px;
    font-weight: 500;
}

/* Action Buttons */
.action-buttons[b-ql61eamcht] {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 35px;
}

.btn[b-ql61eamcht] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn[b-ql61eamcht]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:hover[b-ql61eamcht]::before {
    width: 300px;
    height: 300px;
}

.btn i[b-ql61eamcht] {
    font-size: 18px;
    position: relative;
    z-index: 1;
}

.btn span[b-ql61eamcht] {
    position: relative;
    z-index: 1;
}

.btn-primary[b-ql61eamcht] {
    background: linear-gradient(135deg, #0B0198 0%, #1a16b8 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(11, 1, 152, 0.3);
}

.btn-primary:hover:not(:disabled)[b-ql61eamcht] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(11, 1, 152, 0.4);
}

.btn-secondary[b-ql61eamcht] {
    background: #6c757d;
    color: white;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.2);
}

.btn-secondary:hover:not(:disabled)[b-ql61eamcht] {
    background: #5a6268;
    transform: translateY(-2px);
}

.btn-success[b-ql61eamcht] {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.btn-success:hover:not(:disabled)[b-ql61eamcht] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

.btn:disabled[b-ql61eamcht] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.spinner[b-ql61eamcht] {
    width: 18px;
    height: 18px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-ql61eamcht 0.8s linear infinite;
}

@keyframes spin-b-ql61eamcht {
    to { transform: rotate(360deg); }
}

/* Success Modal */
.modal-overlay[b-ql61eamcht] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1040;
    animation: fadeIn-b-ql61eamcht 0.3s ease;
}

.success-modal[b-ql61eamcht] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 20px;
}

.success-modal .modal-content[b-ql61eamcht] {
    background: white;
    border-radius: 20px;
    padding: 50px 40px 40px;
    max-width: 550px;
    width: 100%;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: modalSlideIn-b-ql61eamcht 0.4s ease;
    position: relative;
}

@keyframes modalSlideIn-b-ql61eamcht {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Success Animation */
.success-animation[b-ql61eamcht] {
    margin-bottom: 30px;
}

.success-checkmark[b-ql61eamcht] {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    position: relative;
}

.check-icon[b-ql61eamcht] {
    width: 100px;
    height: 100px;
    position: relative;
    border-radius: 50%;
    box-sizing: content-box;
    border: 4px solid #4caf50;
}

.icon-line[b-ql61eamcht] {
    height: 5px;
    background-color: #4caf50;
    display: block;
    border-radius: 2px;
    position: absolute;
    z-index: 10;
}

.icon-line.line-tip[b-ql61eamcht] {
    top: 50px;
    left: 18px;
    width: 30px;
    transform: rotate(45deg);
    animation: checkTip-b-ql61eamcht 0.75s;
}

.icon-line.line-long[b-ql61eamcht] {
    top: 45px;
    right: 10px;
    width: 55px;
    transform: rotate(-45deg);
    animation: checkLong-b-ql61eamcht 0.75s;
}

.icon-circle[b-ql61eamcht] {
    top: -4px;
    left: -4px;
    z-index: 10;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    box-sizing: content-box;
    border: 4px solid rgba(76, 175, 80, 0.5);
}

.icon-fix[b-ql61eamcht] {
    top: 10px;
    width: 7px;
    left: 30px;
    z-index: 1;
    height: 90px;
    position: absolute;
    transform: rotate(-45deg);
    background-color: white;
}

@keyframes checkTip-b-ql61eamcht {
    0% { width: 0; left: 5px; top: 25px; }
    54% { width: 0; left: 5px; top: 25px; }
    70% { width: 50px; left: -8px; top: 37px; }
    84% { width: 17px; left: 21px; top: 48px; }
    100% { width: 30px; left: 18px; top: 50px; }
}

@keyframes checkLong-b-ql61eamcht {
    0% { width: 0; right: 50px; top: 54px; }
    65% { width: 0; right: 50px; top: 54px; }
    84% { width: 55px; right: 0; top: 35px; }
    100% { width: 55px; right: 10px; top: 45px; }
}

.success-modal h2[b-ql61eamcht] {
    font-size: 28px;
    font-weight: 700;
    color: #212529;
    margin-bottom: 12px;
}

.success-modal > p[b-ql61eamcht] {
    font-size: 15px;
    color: #6c757d;
    margin-bottom: 30px;
}

.success-details[b-ql61eamcht] {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
    text-align: left;
}

.success-detail-item[b-ql61eamcht] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #e9ecef;
}

.success-detail-item:last-child[b-ql61eamcht] {
    border-bottom: none;
    padding-bottom: 0;
}

.success-detail-item i[b-ql61eamcht] {
    font-size: 20px;
    color: #0B0198;
}

.success-detail-item span[b-ql61eamcht] {
    font-size: 14px;
    color: #495057;
}

.modal-actions[b-ql61eamcht] {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* Responsive Design */
@media (max-width: 768px) {
    .assign-test-container[b-ql61eamcht] {
        padding: 15px;
        margin: 20px auto;
    }

    .progress-indicator[b-ql61eamcht] {
        padding: 0 10px;
    }

    .progress-line[b-ql61eamcht] {
        width: 60px;
    }

    .step-circle[b-ql61eamcht] {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .step-label[b-ql61eamcht] {
        font-size: 11px;
    }

    .test-assignment-card[b-ql61eamcht] {
        padding: 25px 20px;
    }

    .step-header h2[b-ql61eamcht] {
        font-size: 22px;
    }

    .step-icon[b-ql61eamcht] {
        width: 60px;
        height: 60px;
    }

    .step-icon i[b-ql61eamcht] {
        font-size: 30px;
    }

    .code-segment[b-ql61eamcht] {
        width: 60px;
        height: 60px;
        font-size: 22px;
    }

    .code-separator[b-ql61eamcht] {
        font-size: 24px;
    }

    .worker-info[b-ql61eamcht] {
        flex-direction: column;
        text-align: center;
    }

    .worker-avatar img[b-ql61eamcht],
    .avatar-placeholder[b-ql61eamcht] {
        width: 70px;
        height: 70px;
    }

    .confirmation-details[b-ql61eamcht] {
        grid-template-columns: 1fr;
    }

    .action-buttons[b-ql61eamcht] {
        flex-direction: column;
    }

    .btn[b-ql61eamcht] {
        width: 100%;
        justify-content: center;
    }

    .success-modal .modal-content[b-ql61eamcht] {
        padding: 40px 25px 30px;
    }

    .modal-actions[b-ql61eamcht] {
        flex-direction: column;
    }

    .modal-actions .btn[b-ql61eamcht] {
        width: 100%;
    }

    .period-dialog .dialog-content[b-ql61eamcht],
    .datetime-modal .modal-content[b-ql61eamcht] {
        padding: 30px 25px;
    }

    .dialog-icon[b-ql61eamcht] {
        width: 60px;
        height: 60px;
    }

    .dialog-icon i[b-ql61eamcht] {
        font-size: 30px;
    }

    .dialog-header h3[b-ql61eamcht],
    .modal-header h3[b-ql61eamcht] {
        font-size: 20px;
    }

    .option-card[b-ql61eamcht] {
        padding: 15px;
    }

    .period-summary[b-ql61eamcht] {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .progress-step[b-ql61eamcht] {
        flex-direction: column;
    }

    .progress-line[b-ql61eamcht] {
        width: 40px;
    }

    .code-input-group[b-ql61eamcht] {
        gap: 8px;
    }

    .code-segment[b-ql61eamcht] {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .option-content h4[b-ql61eamcht] {
        font-size: 14px;
    }

    .option-content p[b-ql61eamcht] {
        font-size: 12px;
    }

    .modal-actions[b-ql61eamcht] {
        flex-direction: column;
        gap: 10px;
    }

    .modal-actions .btn[b-ql61eamcht] {
        width: 100%;
    }
}

/* Period Preference Dialog */
.period-dialog[b-ql61eamcht] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 20px;
}

.period-dialog .dialog-content[b-ql61eamcht] {
    background: white;
    border-radius: 20px;
    padding: 40px;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: modalSlideIn-b-ql61eamcht 0.4s ease;
}

.dialog-header[b-ql61eamcht] {
    text-align: center;
    margin-bottom: 30px;
}

.dialog-icon[b-ql61eamcht] {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    border: 3px solid #2196F3;
}

.dialog-icon i[b-ql61eamcht] {
    font-size: 36px;
    color: #0B0198;
}

.dialog-header h3[b-ql61eamcht] {
    font-size: 24px;
    font-weight: 700;
    color: #212529;
    margin-bottom: 10px;
}

.dialog-header p[b-ql61eamcht] {
    font-size: 15px;
    color: #6c757d;
    margin: 0;
}

.dialog-body[b-ql61eamcht] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
}

.option-card[b-ql61eamcht] {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.option-card:hover[b-ql61eamcht] {
    background: white;
    border-color: #0B0198;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(11, 1, 152, 0.15);
}

.option-icon[b-ql61eamcht] {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid #dee2e6;
    transition: all 0.3s ease;
}

.option-card:hover .option-icon[b-ql61eamcht] {
    border-color: #0B0198;
    background: #0B0198;
}

.option-icon i[b-ql61eamcht] {
    font-size: 24px;
    color: #0B0198;
    transition: all 0.3s ease;
}

.option-card:hover .option-icon i[b-ql61eamcht] {
    color: white;
}

.option-content[b-ql61eamcht] {
    flex: 1;
}

.option-content h4[b-ql61eamcht] {
    font-size: 16px;
    font-weight: 600;
    color: #212529;
    margin: 0 0 4px 0;
}

.option-content p[b-ql61eamcht] {
    font-size: 13px;
    color: #6c757d;
    margin: 0;
}

.option-arrow[b-ql61eamcht] {
    flex-shrink: 0;
}

.option-arrow i[b-ql61eamcht] {
    font-size: 20px;
    color: #dee2e6;
    transition: all 0.3s ease;
}

.option-card:hover .option-arrow i[b-ql61eamcht] {
    color: #0B0198;
    transform: translateX(5px);
}

.dialog-actions[b-ql61eamcht] {
    display: flex;
    justify-content: center;
    padding-top: 15px;
    border-top: 1px solid #e9ecef;
}

/* Date/Time Selection Modal */
.datetime-modal[b-ql61eamcht] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 20px;
}

.datetime-modal .modal-content[b-ql61eamcht] {
    background: white;
    border-radius: 20px;
    padding: 40px;
    max-width: 550px;
    width: 100%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: modalSlideIn-b-ql61eamcht 0.4s ease;
}

.modal-header[b-ql61eamcht] {
    text-align: center;
    margin-bottom: 30px;
}

.modal-header h3[b-ql61eamcht] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 24px;
    font-weight: 700;
    color: #212529;
    margin-bottom: 10px;
}

.modal-header h3 i[b-ql61eamcht] {
    font-size: 28px;
    color: #0B0198;
}

.modal-header p[b-ql61eamcht] {
    font-size: 15px;
    color: #6c757d;
    margin: 0;
}

.modal-body[b-ql61eamcht] {
    margin-bottom: 30px;
}

.datetime-form[b-ql61eamcht] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Syncfusion DateTimePicker Customization */
[b-ql61eamcht] .custom-datetime-picker .e-input-group {
    border-radius: 8px;
    border: 2px solid #dee2e6;
    transition: all 0.3s ease;
}

[b-ql61eamcht] .custom-datetime-picker .e-input-group:hover {
    border-color: #0B0198;
}

[b-ql61eamcht] .custom-datetime-picker .e-input-group.e-input-focus {
    border-color: #0B0198;
    box-shadow: 0 0 0 4px rgba(11, 1, 152, 0.1);
}

[b-ql61eamcht] .custom-datetime-picker .e-input {
    font-size: 15px;
    padding: 12px 16px;
}

[b-ql61eamcht] .custom-datetime-picker .e-input-group-icon {
    color: #0B0198;
}

.period-summary[b-ql61eamcht] {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border: 2px solid #2196F3;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
}

.period-summary i[b-ql61eamcht] {
    font-size: 24px;
    color: #0B0198;
    flex-shrink: 0;
}

.period-info[b-ql61eamcht] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.period-info strong[b-ql61eamcht] {
    font-size: 13px;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.period-info span[b-ql61eamcht] {
    font-size: 18px;
    color: #0B0198;
    font-weight: 700;
}
/* /Components/Pages/Employer/CertificationCreditUsage.razor.rz.scp.css */
/* Header Styling */
.upper-title-box[b-b76xsdplj5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.upper-title-box h3[b-b76xsdplj5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #0b0198;
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.upper-title-box h3 i[b-b76xsdplj5] {
    font-size: 2rem;
}

.upper-title-box .text[b-b76xsdplj5] {
    color: #696969;
    font-size: 1rem;
}

/* Employer Info Badge */
.employer-info-badge[b-b76xsdplj5] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, #0b0198 0%, #1a16b8 100%);
    padding: 1rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(11, 1, 152, 0.2);
    animation: slideInRight-b-b76xsdplj5 0.5s ease-out;
}

.employer-avatar[b-b76xsdplj5] {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.employer-avatar i[b-b76xsdplj5] {
    font-size: 2rem;
}

.employer-details[b-b76xsdplj5] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.employer-label[b-b76xsdplj5] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.employer-name[b-b76xsdplj5] {
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
}

/* Widget Styling */
.widget-title[b-b76xsdplj5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 2px solid #e8ecef;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.widget-title .title-content[b-b76xsdplj5] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.widget-title h4[b-b76xsdplj5] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #202124;
}

.record-count[b-b76xsdplj5] {
    background: #0b0198;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.btn-refresh[b-b76xsdplj5] {
    background: #0b0198;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-refresh:hover:not(:disabled)[b-b76xsdplj5] {
    background: #090085;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(11, 1, 152, 0.3);
}

.btn-refresh:disabled[b-b76xsdplj5] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-refresh i[b-b76xsdplj5] {
    font-size: 1.2rem;
}

/* Loading State */
.loading-container[b-b76xsdplj5] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rem 2rem;
}

.loading-spinner[b-b76xsdplj5] {
    text-align: center;
}

.spinner[b-b76xsdplj5] {
    width: 60px;
    height: 60px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0b0198;
    border-radius: 50%;
    animation: spin-b-b76xsdplj5 1s linear infinite;
    margin: 0 auto 1rem;
}

.loading-spinner p[b-b76xsdplj5] {
    color: #696969;
    font-size: 1rem;
    margin: 0;
}

/* Empty State */
.empty-state[b-b76xsdplj5] {
    text-align: center;
    padding: 4rem 2rem;
    animation: fadeIn-b-b76xsdplj5 0.5s ease-out;
}

.empty-icon[b-b76xsdplj5] {
    width: 120px;
    height: 120px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-icon i[b-b76xsdplj5] {
    font-size: 4rem;
    color: #0b0198;
}

.empty-state h4[b-b76xsdplj5] {
    color: #202124;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.empty-state p[b-b76xsdplj5] {
    color: #696969;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

/* Table Styling */
.credit-usage-table[b-b76xsdplj5] {
    width: 100%;
    margin: 0;
}

.credit-usage-table thead tr[b-b76xsdplj5] {
    background: linear-gradient(135deg, #0b0198 0%, #1a16b8 100%);
    color: white;
}

.credit-usage-table thead th[b-b76xsdplj5] {
    padding: 1rem;
    font-weight: 600;
    text-align: left;
    border: none;
    font-size: 0.95rem;
}

.credit-usage-table tbody tr[b-b76xsdplj5] {
    border-bottom: 1px solid #e8ecef;
    transition: all 0.3s ease;
}

.credit-usage-table tbody tr:hover[b-b76xsdplj5] {
    background: #f8f9fa;
    transform: translateX(5px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.credit-usage-table tbody td[b-b76xsdplj5] {
    padding: 1rem;
    vertical-align: middle;
}

.serial-number[b-b76xsdplj5] {
    font-weight: 600;
    color: #0b0198;
    font-size: 1rem;
}

/* Worker Info */
.worker-info[b-b76xsdplj5] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.worker-avatar[b-b76xsdplj5] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.worker-avatar img[b-b76xsdplj5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.worker-avatar i[b-b76xsdplj5] {
    font-size: 1.5rem;
    color: #0b0198;
}

.worker-details[b-b76xsdplj5] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.worker-name[b-b76xsdplj5] {
    font-weight: 600;
    color: #202124;
    font-size: 0.95rem;
}

.training-code[b-b76xsdplj5] {
    font-size: 0.8rem;
    color: #696969;
    font-family: 'Courier New', monospace;
}

.category-badge[b-b76xsdplj5] {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    color: #0b0198;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-block;
}

.test-name[b-b76xsdplj5] {
    font-weight: 500;
    color: #202124;
}

.date-time-cell[b-b76xsdplj5] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.date-time-cell .date[b-b76xsdplj5] {
    font-weight: 600;
    color: #202124;
    font-size: 0.95rem;
}

.date-time-cell .time[b-b76xsdplj5] {
    color: #696969;
    font-size: 0.85rem;
}

/* Status Badges */
.status-badge[b-b76xsdplj5] {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-block;
    text-transform: capitalize;
}

.status-pending[b-b76xsdplj5] {
    background: #fff3cd;
    color: #856404;
}

.status-in-progress[b-b76xsdplj5] {
    background: #cfe2ff;
    color: #084298;
}

.status-completed[b-b76xsdplj5] {
    background: #d1e7dd;
    color: #0f5132;
}

.status-passed[b-b76xsdplj5] {
    background: #d1e7dd;
    color: #0a3622;
}

.status-failed[b-b76xsdplj5] {
    background: #f8d7da;
    color: #842029;
}

.status-expired[b-b76xsdplj5] {
    background: #e2e3e5;
    color: #41464b;
}

.status-cancelled[b-b76xsdplj5] {
    background: #f8d7da;
    color: #58151c;
}

.status-pending-review[b-b76xsdplj5] {
    background: #fff3cd;
    color: #664d03;
}

.status-reviewed[b-b76xsdplj5] {
    background: #d1e7dd;
    color: #146c43;
}

.status-default[b-b76xsdplj5] {
    background: #e9ecef;
    color: #495057;
}

/* Action Button */
.btn-action[b-b76xsdplj5] {
    background: #0b0198;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.btn-action:hover[b-b76xsdplj5] {
    background: #090085;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(11, 1, 152, 0.3);
}

.btn-action i[b-b76xsdplj5] {
    font-size: 1.1rem;
}

/* Mobile View */
.mobile-view[b-b76xsdplj5] {
    display: none;
}

.training-card[b-b76xsdplj5] {
    background: white;
    border: 1px solid #e8ecef;
    border-radius: 12px;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.training-card:hover[b-b76xsdplj5] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.card-header[b-b76xsdplj5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #0b0198 0%, #1a16b8 100%);
    color: white;
}

.card-number[b-b76xsdplj5] {
    font-weight: 700;
    font-size: 1.1rem;
}

.card-body[b-b76xsdplj5] {
    padding: 1.5rem;
}

.worker-profile[b-b76xsdplj5] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f0f0f0;
}

.worker-avatar-large[b-b76xsdplj5] {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 3px solid #0b0198;
}

.worker-avatar-large img[b-b76xsdplj5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.worker-avatar-large i[b-b76xsdplj5] {
    font-size: 2rem;
    color: #0b0198;
}

.worker-info-mobile[b-b76xsdplj5] {
    flex: 1;
}

.worker-info-mobile h5[b-b76xsdplj5] {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #202124;
}

.card-row[b-b76xsdplj5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.card-row:last-child[b-b76xsdplj5] {
    border-bottom: none;
}

.card-row .label[b-b76xsdplj5] {
    color: #696969;
    font-size: 0.9rem;
    font-weight: 500;
}

.card-row .value[b-b76xsdplj5] {
    color: #202124;
    font-weight: 600;
    font-size: 0.95rem;
    text-align: right;
}

.card-footer[b-b76xsdplj5] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid #f0f0f0;
}

.btn-action-full[b-b76xsdplj5] {
    width: 100%;
    background: #0b0198;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.btn-action-full:hover[b-b76xsdplj5] {
    background: #090085;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(11, 1, 152, 0.3);
}

.btn-action-full i[b-b76xsdplj5] {
    font-size: 1.2rem;
}

/* Summary Section */
.usage-summary[b-b76xsdplj5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 12px;
}

.summary-card[b-b76xsdplj5] {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border-left: 4px solid #0b0198;
}

.summary-card:hover[b-b76xsdplj5] {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.summary-card.highlight[b-b76xsdplj5] {
    background: linear-gradient(135deg, #0b0198 0%, #1a16b8 100%);
    color: white;
    border-left: 4px solid #28a745;
}

.summary-card i[b-b76xsdplj5] {
    font-size: 2.5rem;
    color: #0b0198;
}

.summary-card.highlight i[b-b76xsdplj5] {
    color: white;
}

.summary-content[b-b76xsdplj5] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.summary-label[b-b76xsdplj5] {
    font-size: 0.85rem;
    color: #696969;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-card.highlight .summary-label[b-b76xsdplj5] {
    color: rgba(255, 255, 255, 0.8);
}

.summary-value[b-b76xsdplj5] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #202124;
}

.summary-card.highlight .summary-value[b-b76xsdplj5] {
    color: white;
}

/* Animations */
@keyframes spin-b-b76xsdplj5 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fadeIn-b-b76xsdplj5 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight-b-b76xsdplj5 {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in[b-b76xsdplj5] {
    animation: fadeIn-b-b76xsdplj5 0.5s ease-out;
}

/* Responsive Design */
@media (max-width: 991px) {
    .desktop-view[b-b76xsdplj5] {
        display: none;
    }

    .mobile-view[b-b76xsdplj5] {
        display: block;
    }

    .upper-title-box[b-b76xsdplj5] {
        flex-direction: column;
        align-items: flex-start;
    }

    .employer-info-badge[b-b76xsdplj5] {
        width: 100%;
    }

    .usage-summary[b-b76xsdplj5] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .upper-title-box h3[b-b76xsdplj5] {
        font-size: 1.5rem;
    }

    .upper-title-box h3 i[b-b76xsdplj5] {
        font-size: 1.75rem;
    }

    .widget-title[b-b76xsdplj5] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .widget-title .title-content[b-b76xsdplj5] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .widget-actions[b-b76xsdplj5] {
        width: 100%;
    }

    .btn-refresh[b-b76xsdplj5] {
        width: 100%;
        justify-content: center;
    }

    .employer-info-badge[b-b76xsdplj5] {
        padding: 0.75rem 1rem;
    }

    .employer-avatar[b-b76xsdplj5] {
        width: 40px;
        height: 40px;
    }

    .employer-avatar i[b-b76xsdplj5] {
        font-size: 1.5rem;
    }

    .employer-name[b-b76xsdplj5] {
        font-size: 1rem;
    }

    .empty-icon[b-b76xsdplj5] {
        width: 100px;
        height: 100px;
    }

    .empty-icon i[b-b76xsdplj5] {
        font-size: 3rem;
    }

    .empty-state h4[b-b76xsdplj5] {
        font-size: 1.25rem;
    }

    .worker-avatar-large[b-b76xsdplj5] {
        width: 60px;
        height: 60px;
    }

    .worker-info-mobile h5[b-b76xsdplj5] {
        font-size: 1rem;
    }

    .summary-value[b-b76xsdplj5] {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .upper-title-box h3[b-b76xsdplj5] {
        font-size: 1.25rem;
    }

    .card-body[b-b76xsdplj5] {
        padding: 1rem;
    }

    .usage-summary[b-b76xsdplj5] {
        padding: 1rem;
        gap: 1rem;
    }

    .summary-card[b-b76xsdplj5] {
        padding: 1rem;
    }

    .summary-card i[b-b76xsdplj5] {
        font-size: 2rem;
    }
}
/* /Components/Pages/Employer/Pricing.razor.rz.scp.css */
/* =====================================================
   ANIMATIONS & KEYFRAMES
===================================================== */

@keyframes fadeIn-b-acus01mx0q {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp-b-acus01mx0q {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown-b-acus01mx0q {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp-b-acus01mx0q {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes pulse-b-acus01mx0q {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

@keyframes shimmer-b-acus01mx0q {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes float-b-acus01mx0q {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes glow-b-acus01mx0q {
    0%, 100% {
        box-shadow: 0 0 20px rgba(11, 1, 152, 0.2);
    }
    50% {
        box-shadow: 0 0 30px rgba(11, 1, 152, 0.4);
    }
}

@keyframes spin-b-acus01mx0q {
    100% {
        transform: rotate(360deg);
    }
}

/* Animation Classes */
[b-acus01mx0q] .animate-fade-in {
    animation: fadeIn-b-acus01mx0q 0.8s ease-out;
}

[b-acus01mx0q] .animate-fade-in-up {
    animation: fadeInUp-b-acus01mx0q 1s ease-out;
}

[b-acus01mx0q] .animate-slide-down {
    animation: slideDown-b-acus01mx0q 0.6s ease-out;
}

[b-acus01mx0q] .animate-slide-up {
    animation: slideUp-b-acus01mx0q 0.8s ease-out backwards;
}

[b-acus01mx0q] .animate-pulse {
    animation: pulse-b-acus01mx0q 1.5s ease-in-out infinite;
}

/* =====================================================
   SECTION STYLING
===================================================== */

[b-acus01mx0q] .pricing-section {
    position: relative;
    padding: 80px 0 100px;
    background: linear-gradient(135deg, #f8fafc 0%, #e8f0fe 100%);
    overflow: hidden;
}

[b-acus01mx0q] .pricing-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: linear-gradient(135deg, #0b0198 0%, #1967d2 100%);
    clip-path: ellipse(100% 100% at 50% 0%);
    z-index: 0;
}

[b-acus01mx0q] .pricing-section .auto-container {
    position: relative;
    z-index: 1;
}

/* Section Title */
[b-acus01mx0q] .sec-title {
    margin-bottom: 60px;
}

[b-acus01mx0q] .sec-title h2 {
    color: #ffffff;
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

[b-acus01mx0q] .sec-title .text {
    color: rgba(255, 255, 255, 0.95);
    font-size: 18px;
    font-weight: 400;
}

/* =====================================================
   LOADING SKELETON
===================================================== */

[b-acus01mx0q] .loading-container {
    padding: 20px 0;
}

[b-acus01mx0q] .skeleton-pricing-card {
    background: #fff;
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    animation: slideUp-b-acus01mx0q 0.6s ease-out backwards;
}

[b-acus01mx0q] .skeleton-header {
    height: 40px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer-b-acus01mx0q 1.5s infinite;
    border-radius: 8px;
    margin-bottom: 20px;
}

[b-acus01mx0q] .skeleton-price {
    height: 60px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer-b-acus01mx0q 1.5s infinite;
    border-radius: 8px;
    margin-bottom: 25px;
}

[b-acus01mx0q] .skeleton-features {
    margin-bottom: 25px;
}

[b-acus01mx0q] .skeleton-line {
    height: 20px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer-b-acus01mx0q 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 12px;
}

[b-acus01mx0q] .skeleton-line.short {
    width: 70%;
}

[b-acus01mx0q] .skeleton-button {
    height: 50px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer-b-acus01mx0q 1.5s infinite;
    border-radius: 8px;
}

[b-acus01mx0q] .loading-text {
    text-align: center;
    padding: 30px 20px;
    color: #0b0198;
    font-weight: 600;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

[b-acus01mx0q] .loading-text i {
    font-size: 28px;
    animation: spin-b-acus01mx0q 1s linear infinite;
}

/* =====================================================
   EMPTY STATE
===================================================== */

[b-acus01mx0q] .empty-state {
    text-align: center;
    padding: 100px 20px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

[b-acus01mx0q] .empty-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 30px;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: float-b-acus01mx0q 3s ease-in-out infinite;
}

[b-acus01mx0q] .empty-icon i {
    font-size: 60px;
    color: #1967d2;
}

[b-acus01mx0q] .empty-state h4 {
    font-size: 26px;
    color: #333;
    margin-bottom: 15px;
    font-weight: 600;
}

[b-acus01mx0q] .empty-state p {
    font-size: 16px;
    color: #666;
    max-width: 500px;
    margin: 0 auto;
}

/* =====================================================
   PRICING CARDS
===================================================== */

[b-acus01mx0q] .pricing-table {
    margin-bottom: 30px;
}

[b-acus01mx0q] .pricing-table .inner-box {
    position: relative;
    background: #ffffff;
    border-radius: 15px;
    padding: 40px 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    overflow: hidden;
}

[b-acus01mx0q] .pricing-table .inner-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #0b0198, #1967d2);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

[b-acus01mx0q] .pricing-table:hover .inner-box {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(11, 1, 152, 0.15);
    border-color: #0b0198;
}

[b-acus01mx0q] .pricing-table:hover .inner-box::before {
    transform: scaleX(1);
}

/* Featured Plan */
[b-acus01mx0q] .pricing-table .inner-box.featured-plan {
    background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
    border: 2px solid #1967d2;
    box-shadow: 0 10px 30px rgba(25, 103, 210, 0.2);
    animation: glow-b-acus01mx0q 3s ease-in-out infinite;
}

[b-acus01mx0q] .popular-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #333;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
    animation: float-b-acus01mx0q 3s ease-in-out infinite;
}

[b-acus01mx0q] .popular-badge i {
    font-size: 14px;
}

[b-acus01mx0q] .plan-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 25px;
    background: linear-gradient(135deg, #0b0198 0%, #1967d2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

[b-acus01mx0q] .pricing-table:hover .plan-icon {
    transform: scale(1.1) rotate(5deg);
}

[b-acus01mx0q] .plan-icon i {
    font-size: 35px;
    color: #ffffff;
}

[b-acus01mx0q] .pricing-table .title {
    font-size: 24px;
    font-weight: 700;
    color: #0b0198;
    text-align: center;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

[b-acus01mx0q] .pricing-table .price {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px 0;
    border-top: 2px solid #f0f4ff;
    border-bottom: 2px solid #f0f4ff;
}

[b-acus01mx0q] .pricing-table .price .currency {
    font-size: 20px;
    font-weight: 600;
    color: #666;
    vertical-align: super;
}

[b-acus01mx0q] .pricing-table .price .amount {
    font-size: 48px;
    font-weight: 700;
    color: #0b0198;
    margin: 0 5px;
}

[b-acus01mx0q] .pricing-table .price .duration {
    font-size: 16px;
    color: #666;
    font-weight: 500;
}

/* Features List */
[b-acus01mx0q] .pricing-table .table-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
}

[b-acus01mx0q] .pricing-table .feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f0f4ff;
    transition: all 0.3s ease;
}

[b-acus01mx0q] .pricing-table .feature-item:last-child {
    border-bottom: none;
}

[b-acus01mx0q] .pricing-table:hover .feature-item {
    padding-left: 5px;
}

[b-acus01mx0q] .pricing-table .feature-item i {
    font-size: 20px;
    color: #1967d2;
    flex-shrink: 0;
    margin-top: 2px;
}

[b-acus01mx0q] .pricing-table .feature-item span {
    color: #555;
    font-size: 15px;
    line-height: 1.6;
}

/* Action Button */
[b-acus01mx0q] .pricing-table .table-footer {
    text-align: center;
    padding-top: 20px;
}

[b-acus01mx0q] .pricing-table .theme-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 30px;
    background: linear-gradient(135deg, #0b0198 0%, #1967d2 100%);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(11, 1, 152, 0.3);
    position: relative;
    overflow: hidden;
}

[b-acus01mx0q] .pricing-table .theme-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

[b-acus01mx0q] .pricing-table .theme-btn:hover::before {
    width: 300px;
    height: 300px;
}

[b-acus01mx0q] .pricing-table .theme-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(11, 1, 152, 0.4);
}

[b-acus01mx0q] .pricing-table .theme-btn.btn-popular {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #333;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
}

[b-acus01mx0q] .pricing-table .theme-btn.btn-popular:hover {
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.5);
}

[b-acus01mx0q] .pricing-table .theme-btn .btn-text {
    position: relative;
    z-index: 1;
}

[b-acus01mx0q] .pricing-table .theme-btn i {
    position: relative;
    z-index: 1;
    font-size: 18px;
    transition: transform 0.3s ease;
}

[b-acus01mx0q] .pricing-table .theme-btn:hover i {
    transform: translateX(5px);
}

/* =====================================================
   PRIVATE PLACEMENT CARD
===================================================== */

[b-acus01mx0q] .private-placement-card {
    margin-top: 50px;
}

[b-acus01mx0q] .private-placement-card .inner-box.special-offer {
    background: linear-gradient(135deg, #ffffff 0%, #fafbff 100%);
    border: 3px solid #1967d2;
    padding: 50px 40px;
}

[b-acus01mx0q] .special-badge {
    position: absolute;
    top: 30px;
    right: 30px;
    background: linear-gradient(135deg, #1967d2 0%, #0b0198 100%);
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(25, 103, 210, 0.3);
    animation: float-b-acus01mx0q 3s ease-in-out infinite;
}

[b-acus01mx0q] .special-badge i {
    font-size: 16px;
}

[b-acus01mx0q] .private-placement-card .title {
    font-size: 28px;
    font-weight: 700;
    color: #0b0198;
    text-align: center;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

[b-acus01mx0q] .private-placement-card .title i {
    font-size: 32px;
    color: #1967d2;
}

[b-acus01mx0q] .features-header {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #1967d2;
}

[b-acus01mx0q] .features-header h5 {
    font-size: 20px;
    font-weight: 600;
    color: #0b0198;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

[b-acus01mx0q] .features-header i {
    font-size: 24px;
}

[b-acus01mx0q] .premium-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
}

[b-acus01mx0q] .premium-feature-item {
    display: flex;
    gap: 15px;
    padding: 20px;
    margin-bottom: 15px;
    background: #f8faff;
    border-radius: 10px;
    border-left: 4px solid #1967d2;
    transition: all 0.3s ease;
}

[b-acus01mx0q] .premium-feature-item:hover {
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transform: translateX(5px);
}

[b-acus01mx0q] .premium-feature-item .feature-icon {
    flex-shrink: 0;
}

[b-acus01mx0q] .premium-feature-item .feature-icon i {
    font-size: 24px;
    color: #1967d2;
}

[b-acus01mx0q] .premium-feature-item .feature-text {
    flex: 1;
    color: #555;
    line-height: 1.7;
}

[b-acus01mx0q] .premium-feature-item strong {
    color: #0b0198;
    display: block;
    margin-bottom: 5px;
}

/* Payment Info Card */
[b-acus01mx0q] .payment-info-card {
    background: linear-gradient(135deg, #f0f7ff 0%, #e3f2fd 100%);
    border-radius: 12px;
    padding: 30px;
    margin: 30px 0;
    border: 2px solid #1967d2;
}

[b-acus01mx0q] .payment-info-card h6 {
    font-size: 18px;
    font-weight: 600;
    color: #0b0198;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

[b-acus01mx0q] .payment-info-card h6 i {
    font-size: 22px;
}

[b-acus01mx0q] .payment-details {
    background: #ffffff;
    border-radius: 8px;
    padding: 20px;
}

[b-acus01mx0q] .payment-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f4ff;
}

[b-acus01mx0q] .payment-row:last-child {
    border-bottom: none;
}

[b-acus01mx0q] .payment-row.highlight {
    background: #fff8e1;
    padding: 15px;
    margin: 10px -20px -20px;
    border-radius: 0 0 8px 8px;
    border-bottom: none;
}

[b-acus01mx0q] .payment-row .label {
    font-weight: 600;
    color: #555;
}

[b-acus01mx0q] .payment-row .value {
    font-weight: 600;
    color: #0b0198;
}

[b-acus01mx0q] .payment-row .copy-value {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

[b-acus01mx0q] .payment-row .copy-value:hover {
    color: #1967d2;
}

[b-acus01mx0q] .payment-row .copy-value i {
    font-size: 16px;
}

/* Important Notes */
[b-acus01mx0q] .important-notes {
    background: #fff8e1;
    border-radius: 10px;
    padding: 25px;
    border-left: 4px solid #ffc107;
    margin-top: 30px;
}

[b-acus01mx0q] .important-notes h6 {
    font-size: 18px;
    font-weight: 600;
    color: #f57f17;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

[b-acus01mx0q] .important-notes h6 i {
    font-size: 22px;
}

[b-acus01mx0q] .important-notes ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

[b-acus01mx0q] .important-notes li {
    padding: 10px 0 10px 25px;
    position: relative;
    color: #666;
    line-height: 1.6;
}

[b-acus01mx0q] .important-notes li::before {
    content: '?';
    position: absolute;
    left: 0;
    color: #ffc107;
    font-weight: bold;
}

/* =====================================================
   RESPONSIVE DESIGN
===================================================== */

@media (max-width: 991px) {
    [b-acus01mx0q] .sec-title h2 {
        font-size: 36px;
    }

    [b-acus01mx0q] .pricing-table .price .amount {
        font-size: 40px;
    }

    [b-acus01mx0q] .private-placement-card .title {
        font-size: 24px;
    }

    [b-acus01mx0q] .special-badge,
    [b-acus01mx0q] .popular-badge {
        position: static;
        margin-bottom: 20px;
        display: inline-flex;
    }
}

@media (max-width: 767px) {
    [b-acus01mx0q] .pricing-section {
        padding: 60px 0 80px;
    }

    [b-acus01mx0q] .sec-title h2 {
        font-size: 30px;
    }

    [b-acus01mx0q] .sec-title .text {
        font-size: 16px;
    }

    [b-acus01mx0q] .pricing-table .inner-box {
        padding: 30px 20px;
    }

    [b-acus01mx0q] .pricing-table .title {
        font-size: 20px;
    }

    [b-acus01mx0q] .pricing-table .price .amount {
        font-size: 36px;
    }

    [b-acus01mx0q] .private-placement-card .inner-box.special-offer {
        padding: 30px 20px;
    }

    [b-acus01mx0q] .private-placement-card .title {
        font-size: 20px;
        flex-direction: column;
    }

    [b-acus01mx0q] .premium-feature-item {
        flex-direction: column;
        gap: 10px;
    }

    [b-acus01mx0q] .payment-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

@media (max-width: 575px) {
    [b-acus01mx0q] .pricing-section::before {
        height: 200px;
    }

    [b-acus01mx0q] .sec-title {
        margin-bottom: 40px;
    }

    [b-acus01mx0q] .empty-icon {
        width: 100px;
        height: 100px;
    }

    [b-acus01mx0q] .empty-icon i {
        font-size: 50px;
    }

    [b-acus01mx0q] .loading-text {
        font-size: 16px;
    }

    [b-acus01mx0q] .pricing-table .theme-btn {
        font-size: 14px;
        padding: 12px 25px;
    }
}

/* =====================================================
   ACCESSIBILITY & PRINT
===================================================== */

/* Focus states for accessibility */
[b-acus01mx0q] .pricing-table .theme-btn:focus-visible {
    outline: 3px solid #1967d2;
    outline-offset: 3px;
}

[b-acus01mx0q] .payment-row .copy-value:focus-visible {
    outline: 2px solid #1967d2;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Print styles */
@media print {
    [b-acus01mx0q] .pricing-section::before {
        display: none;
    }

    [b-acus01mx0q] .pricing-table .inner-box {
        box-shadow: none;
        border: 1px solid #ccc;
    }

    [b-acus01mx0q] .pricing-table .theme-btn {
        display: none;
    }

    [b-acus01mx0q] .popular-badge,
    [b-acus01mx0q] .special-badge {
        background: none;
        color: #000;
        box-shadow: none;
    }
}

/* Remove animations on reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *[b-acus01mx0q],
    *[b-acus01mx0q]::before,
    *[b-acus01mx0q]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* /Components/Pages/Employer/Profile.razor.rz.scp.css */
.profile-container[b-enpd8389p9] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.profile-header[b-enpd8389p9] {
    background: linear-gradient(135deg, #02027e 0%, #010158 100%);
    border-radius: 15px;
    padding: 30px;
    color: white;
    margin-bottom: 30px;
    animation: slideInFromTop-b-enpd8389p9 0.6s ease-out;
    box-shadow: 0 10px 30px rgba(2, 2, 126, 0.2);
}

.profile-header h1[b-enpd8389p9] {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 300;
}

.profile-header p[b-enpd8389p9] {
    margin: 10px 0 0 0;
    opacity: 0.9;
    font-size: 1.1rem;
}

.profile-card[b-enpd8389p9] {
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    overflow: hidden;
    animation: slideInFromBottom-b-enpd8389p9 0.6s ease-out;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #e5e7eb;
}

.profile-card:hover[b-enpd8389p9] {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(2, 2, 126, 0.15);
}

.card-header[b-enpd8389p9] {
    background: linear-gradient(135deg, #02027e 0%, #010158 100%);
    padding: 20px 30px;
    color: white;
}

.card-header h3[b-enpd8389p9] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-body[b-enpd8389p9] {
    padding: 30px;
}

.info-row[b-enpd8389p9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.info-group[b-enpd8389p9] {
    position: relative;
    animation: fadeInUp-b-enpd8389p9 0.6s ease-out;
}

.info-group:nth-child(2)[b-enpd8389p9] { animation-delay: 0.1s; }
.info-group:nth-child(3)[b-enpd8389p9] { animation-delay: 0.2s; }
.info-group:nth-child(4)[b-enpd8389p9] { animation-delay: 0.3s; }

.info-label[b-enpd8389p9] {
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Consistent textbox styling to match BioDataInfo.razor */
.info-group[b-enpd8389p9]  .e-input-group,
.info-group[b-enpd8389p9]  .e-float-input {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.3s ease;
    min-height: 45px;
}

.info-group[b-enpd8389p9]  .e-input-group:hover,
.info-group[b-enpd8389p9]  .e-float-input:hover {
    border-color: #4343ae;
    box-shadow: 0 0 0 2px rgba(2, 2, 126, 0.1);
}

.info-group[b-enpd8389p9]  .e-input-group.e-input-focus,
.info-group[b-enpd8389p9]  .e-float-input.e-input-focus {
    border-color: #02027e;
    box-shadow: 0 0 0 3px rgba(2, 2, 126, 0.1);
    background: white;
}

.info-group[b-enpd8389p9]  .e-input {
    background: transparent;
    border: none;
    padding: 12px 16px;
    font-size: 1rem;
    color: #374151;
    font-family: inherit;
}

.info-group[b-enpd8389p9]  .e-input:focus {
    outline: none;
    box-shadow: none;
}

.info-group[b-enpd8389p9]  .e-input[readonly] {
    background: #f1f5f9;
    color: #64748b;
    cursor: default;
}

.info-group[b-enpd8389p9]  .e-input-group.e-disabled,
.info-group[b-enpd8389p9]  .e-float-input.e-disabled {
    background: #f1f5f9;
    border-color: #cbd5e1;
    opacity: 0.7;
}

.info-value[b-enpd8389p9] {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 1rem;
    color: #2d3748;
    transition: all 0.3s ease;
    min-height: 45px;
    display: flex;
    align-items: center;
}

.profile-picture-section[b-enpd8389p9] {
    text-align: center;
    margin-bottom: 30px;
}

.profile-picture[b-enpd8389p9] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid white;
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.2);
    object-fit: cover;
    margin-bottom: 15px;
    animation: zoomIn-b-enpd8389p9 0.6s ease-out;
}

.status-badge[b-enpd8389p9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.status-verified[b-enpd8389p9] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #059669;
    border: 1px solid #10b981;
}

.status-pending[b-enpd8389p9] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #d97706;
    border: 1px solid #f59e0b;
}

.status-rejected[b-enpd8389p9] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #dc2626;
    border: 1px solid #ef4444;
}

.action-buttons[b-enpd8389p9] {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
}

.action-buttons[b-enpd8389p9]  .e-btn {
    padding: 10px 20px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    height: auto !important;
    line-height: 1.5 !important;
}

.action-buttons[b-enpd8389p9]  .e-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Edit button */
.action-buttons[b-enpd8389p9]  .btn-edit {
    background: #02027e;
    border: none;
    color: white;
}

.action-buttons[b-enpd8389p9]  .btn-edit:hover {
    background: #010158;
}

/* Save button */
.action-buttons[b-enpd8389p9]  .btn-save {
    background: #02027e;
    border: none;
    color: white;
}

.action-buttons[b-enpd8389p9]  .btn-save:hover {
    background: #010158;
}

/* Cancel button */
.action-buttons[b-enpd8389p9]  .btn-cancel {
    background: white;
    border: 2px solid #e5e7eb;
    color: #6b7280;
}

.action-buttons[b-enpd8389p9]  .btn-cancel:hover {
    border-color: #02027e;
    color: #02027e;
    background: #f8fafc;
}

/* Refresh button */
.action-buttons[b-enpd8389p9]  .btn-refresh {
    background: #02027e;
    border: none;
    color: white;
}

.action-buttons[b-enpd8389p9]  .btn-refresh:hover {
    background: #010158;
}

/* Button icon styles */
.action-buttons[b-enpd8389p9]  .e-btn .e-icons {
    font-size: 16px;
    margin-right: 8px;
    display: inline-block;
}

/* Fix for Syncfusion button text and icon alignment */
.action-buttons[b-enpd8389p9]  .e-btn .e-btn-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: normal;
}

/* Disabled button styles */
.action-buttons[b-enpd8389p9]  .e-btn.e-disabled {
    opacity: 0.7;
    cursor: not-allowed;
    background: #cccccc;
    color: #666666;
    box-shadow: none;
}

/* Hover effect for disabled buttons */
.action-buttons[b-enpd8389p9]  .e-btn.e-disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Spinner animation */
.action-buttons[b-enpd8389p9]  .e-spinner {
    animation: spin-b-enpd8389p9 1s linear infinite;
}

@keyframes spin-b-enpd8389p9 {
    100% {
        transform: rotate(360deg);
    }
}

.icon[b-enpd8389p9] {
    width: 16px;
    height: 16px;
}

/* Professional form styling */
.form-section[b-enpd8389p9] {
    background: white;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.form-section-title[b-enpd8389p9] {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #02027e;
    display: flex;
    align-items: center;
    gap: 10px;
}

.field-row[b-enpd8389p9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.field-group[b-enpd8389p9] {
    display: flex;
    flex-direction: column;
}

.field-label[b-enpd8389p9] {
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
    font-size: 0.9rem;
}

/* Loading and transition states */
.loading-overlay[b-enpd8389p9] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 2, 126, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(2px);
}

.loading-spinner[b-enpd8389p9] {
    width: 40px;
    height: 40px;
    border: 4px solid #e5e7eb;
    border-top-color: #02027e;
    border-radius: 50%;
    animation: spin-b-enpd8389p9 1s linear infinite;
}

@keyframes spin-b-enpd8389p9 {
    to {
        transform: rotate(360deg);
    }
}

@keyframes slideInFromTop-b-enpd8389p9 {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInFromBottom-b-enpd8389p9 {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeInUp-b-enpd8389p9 {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes zoomIn-b-enpd8389p9 {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .profile-container[b-enpd8389p9] {
        padding: 15px;
    }

    .profile-header[b-enpd8389p9] {
        padding: 20px;
        text-align: center;
    }

    .profile-header h1[b-enpd8389p9] {
        font-size: 2rem;
    }

    .card-body[b-enpd8389p9] {
        padding: 20px;
    }

    .info-row[b-enpd8389p9],
    .field-row[b-enpd8389p9] {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .action-buttons[b-enpd8389p9] {
        flex-direction: column;
        align-items: center;
    }

    .action-buttons[b-enpd8389p9]  .e-btn {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .profile-container[b-enpd8389p9] {
        padding: 10px;
    }

    .profile-header[b-enpd8389p9] {
        padding: 15px;
    }

    .profile-header h1[b-enpd8389p9] {
        font-size: 1.8rem;
    }

    .card-body[b-enpd8389p9] {
        padding: 15px;
    }
}

/* Focus and accessibility improvements */
.info-group[b-enpd8389p9]  .e-input:focus-visible,
.action-buttons[b-enpd8389p9]  .e-btn:focus-visible {
    outline: 2px solid #02027e;
    outline-offset: 2px;
}

/* Country Dropdown Styling */
.info-group[b-enpd8389p9]  .country-dropdown {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.3s ease;
    min-height: 45px;
    width: 100%;
}

.info-group[b-enpd8389p9]  .country-dropdown:hover {
    border-color: #4343ae;
    box-shadow: 0 0 0 2px rgba(2, 2, 126, 0.1);
}

.info-group[b-enpd8389p9]  .country-dropdown.e-input-focus {
    border-color: #02027e;
    box-shadow: 0 0 0 3px rgba(2, 2, 126, 0.1);
    background: white;
}

.info-group[b-enpd8389p9]  .e-ddl .e-input-group-icon.e-ddl-icon {
    color: #02027e;
}

.info-group[b-enpd8389p9]  .e-dropdownlist .e-list-item.e-active {
    background-color: #02027e;
    color: white;
}

.info-group[b-enpd8389p9]  .e-dropdownlist .e-list-item:hover {
    background-color: rgba(2, 2, 126, 0.1);
}

/* Custom dropdown popup styling */
[b-enpd8389p9] .e-dropdownbase .e-list-item {
    padding: 10px 16px;
    font-size: 0.95rem;
}

[b-enpd8389p9] .e-ddl.e-popup {
    border: none;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

/* Country item template styling */
[b-enpd8389p9] .country-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

[b-enpd8389p9] .country-item .country-name {
    font-weight: 500;
}

[b-enpd8389p9] .country-item .country-code {
    font-size: 0.8rem;
    color: #6b7280;
    margin-left: 8px;
}

/* Filter bar styling */
[b-enpd8389p9] .e-filterbar {
    padding: 8px 16px;
    border-bottom: 1px solid #e5e7eb;
    background-color: #f9fafb;
}

[b-enpd8389p9] .e-filter-parent .e-input-group {
    border-color: #d1d5db;
    border-radius: 6px;
}

[b-enpd8389p9] .e-filter-parent .e-input-group:hover {
    border-color: #02027e;
}

/* Print styles */
@media print {
    .action-buttons[b-enpd8389p9],
    .profile-header[b-enpd8389p9] {
        display: none;
    }
    
    .profile-card[b-enpd8389p9] {
        box-shadow: none;
        border: 1px solid #ccc;
        page-break-inside: avoid;
    }
}
/* /Components/Pages/Employer/TestDetails.razor.rz.scp.css */
/* Container */
.test-details-container[b-jsdfrdjayq] {
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
}

/* Loading State */
.loading-container[b-jsdfrdjayq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 20px;
}

.loading-spinner[b-jsdfrdjayq] {
    width: 60px;
    height: 60px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #0B0198;
    border-radius: 50%;
    animation: spin-b-jsdfrdjayq 1s linear infinite;
}

@keyframes spin-b-jsdfrdjayq {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Error Card */
.error-card[b-jsdfrdjayq] {
    background: white;
    border-radius: 16px;
    padding: 60px 40px;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.error-icon[b-jsdfrdjayq] {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #fff3cd 0%, #ffe5a1 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    border: 4px solid #ffc107;
}

.error-icon i[b-jsdfrdjayq] {
    font-size: 50px;
    color: #ff9800;
}

.error-card h2[b-jsdfrdjayq] {
    font-size: 28px;
    color: #212529;
    margin-bottom: 15px;
}

.error-card p[b-jsdfrdjayq] {
    font-size: 16px;
    color: #6c757d;
    margin-bottom: 30px;
}

/* Page Header */
.page-header[b-jsdfrdjayq] {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.back-button[b-jsdfrdjayq] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: #495057;
    transition: all 0.3s ease;
}

.back-button:hover[b-jsdfrdjayq] {
    background: #e9ecef;
    border-color: #0B0198;
    color: #0B0198;
}

.page-header h1[b-jsdfrdjayq] {
    font-size: 32px;
    font-weight: 700;
    color: #212529;
    margin: 0;
}

/* Status Section */
.status-section[b-jsdfrdjayq] {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
}

.status-badge[b-jsdfrdjayq] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
}

.status-badge.completed[b-jsdfrdjayq] {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    color: #155724;
    border: 2px solid #28a745;
}

.status-badge.in-progress[b-jsdfrdjayq] {
    background: linear-gradient(135deg, #fff3cd 0%, #ffe5a1 100%);
    color: #856404;
    border: 2px solid #ffc107;
}

.status-badge.not-started[b-jsdfrdjayq] {
    background: linear-gradient(135deg, #e2e3e5 0%, #d6d8db 100%);
    color: #383d41;
    border: 2px solid #6c757d;
}

.status-badge i[b-jsdfrdjayq] {
    font-size: 20px;
}

/* Incomplete Test Card */
.incomplete-test-card[b-jsdfrdjayq] {
    background: white;
    border-radius: 16px;
    padding: 50px 40px;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
}

.incomplete-icon[b-jsdfrdjayq] {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    border: 4px solid #2196F3;
}

.incomplete-icon i[b-jsdfrdjayq] {
    font-size: 50px;
    color: #0B0198;
}

.incomplete-test-card h2[b-jsdfrdjayq] {
    font-size: 26px;
    color: #212529;
    margin-bottom: 15px;
}

.incomplete-test-card > p[b-jsdfrdjayq] {
    font-size: 16px;
    color: #6c757d;
    margin-bottom: 40px;
}

.test-info-grid[b-jsdfrdjayq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.info-item[b-jsdfrdjayq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    border: 2px solid #e9ecef;
}

.info-item .label[b-jsdfrdjayq] {
    font-size: 13px;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-item .value[b-jsdfrdjayq] {
    font-size: 16px;
    font-weight: 600;
    color: #212529;
}

/* Test Overview Card */
.test-overview-card[b-jsdfrdjayq] {
    background: white;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
}

.worker-section[b-jsdfrdjayq] {
    display: flex;
    align-items: center;
    gap: 25px;
    padding-bottom: 30px;
    border-bottom: 2px solid #e9ecef;
    margin-bottom: 30px;
}

.worker-avatar[b-jsdfrdjayq] {
    flex-shrink: 0;
}

.worker-avatar img[b-jsdfrdjayq],
.avatar-placeholder[b-jsdfrdjayq] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #0B0198;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.avatar-placeholder[b-jsdfrdjayq] {
    background: linear-gradient(135deg, #0B0198 0%, #1a16b8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-placeholder i[b-jsdfrdjayq] {
    font-size: 50px;
    color: white;
}

.worker-info h2[b-jsdfrdjayq] {
    font-size: 28px;
    font-weight: 700;
    color: #212529;
    margin: 0 0 8px 0;
}

.worker-code[b-jsdfrdjayq] {
    font-size: 14px;
    color: #6c757d;
    font-family: 'Courier New', monospace;
    font-weight: 600;
}

.test-meta[b-jsdfrdjayq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

.meta-item[b-jsdfrdjayq] {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.meta-item > i[b-jsdfrdjayq] {
    font-size: 28px;
    color: #0B0198;
    margin-top: 5px;
}

.meta-item > div[b-jsdfrdjayq] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.meta-label[b-jsdfrdjayq] {
    font-size: 13px;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.meta-value[b-jsdfrdjayq] {
    font-size: 16px;
    font-weight: 600;
    color: #212529;
}

/* Score Card */
.score-card[b-jsdfrdjayq] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 40px;
    color: white;
}

.score-circle-container[b-jsdfrdjayq] {
    position: relative;
    width: 200px;
    height: 200px;
}

.score-circle[b-jsdfrdjayq] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.score-background[b-jsdfrdjayq] {
    fill: none;
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 12;
}

.score-progress[b-jsdfrdjayq] {
    fill: none;
    stroke: #fff;
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dasharray 1s ease;
}

.score-text[b-jsdfrdjayq] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.score-value[b-jsdfrdjayq] {
    display: block;
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 5px;
}

.score-label[b-jsdfrdjayq] {
    display: block;
    font-size: 16px;
    font-weight: 500;
    opacity: 0.9;
}

.score-details[b-jsdfrdjayq] {
    display: flex;
    gap: 40px;
}

.score-stat[b-jsdfrdjayq] {
    display: flex;
    align-items: center;
    gap: 15px;
}

.score-stat > i[b-jsdfrdjayq] {
    font-size: 40px;
    opacity: 0.9;
}

.score-stat > div[b-jsdfrdjayq] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.stat-value[b-jsdfrdjayq] {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
}

.stat-label[b-jsdfrdjayq] {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.9;
}

/* Questions Section */
.questions-section[b-jsdfrdjayq] {
    margin-bottom: 30px;
}

.questions-section h2[b-jsdfrdjayq] {
    font-size: 26px;
    font-weight: 700;
    color: #212529;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.questions-section h2 i[b-jsdfrdjayq] {
    color: #0B0198;
}

.questions-list[b-jsdfrdjayq] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.question-card[b-jsdfrdjayq] {
    background: white;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.question-card:hover[b-jsdfrdjayq] {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.question-card.correct[b-jsdfrdjayq] {
    border-left: 5px solid #28a745;
}

.question-card.incorrect[b-jsdfrdjayq] {
    border-left: 5px solid #dc3545;
}

.question-header[b-jsdfrdjayq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.question-number[b-jsdfrdjayq] {
    font-size: 14px;
    font-weight: 700;
    color: #0B0198;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.result-badge[b-jsdfrdjayq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.result-badge.correct[b-jsdfrdjayq] {
    background: #d4edda;
    color: #155724;
}

.result-badge.incorrect[b-jsdfrdjayq] {
    background: #f8d7da;
    color: #721c24;
}

.question-text[b-jsdfrdjayq] {
    font-size: 18px;
    font-weight: 600;
    color: #212529;
    line-height: 1.6;
    margin-bottom: 25px;
}

.options-grid[b-jsdfrdjayq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.option[b-jsdfrdjayq] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.option.correct-option[b-jsdfrdjayq] {
    background: #d4edda;
    border-color: #28a745;
}

.option.incorrect-option[b-jsdfrdjayq] {
    background: #f8d7da;
    border-color: #dc3545;
}

.option-label[b-jsdfrdjayq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: white;
    border: 2px solid #dee2e6;
    border-radius: 50%;
    font-weight: 700;
    font-size: 14px;
    color: #495057;
    flex-shrink: 0;
}

.option.correct-option .option-label[b-jsdfrdjayq] {
    background: #28a745;
    border-color: #28a745;
    color: white;
}

.option.incorrect-option .option-label[b-jsdfrdjayq] {
    background: #dc3545;
    border-color: #dc3545;
    color: white;
}

.option-text[b-jsdfrdjayq] {
    font-size: 15px;
    color: #495057;
    line-height: 1.5;
    flex: 1;
}

.answer-explanation[b-jsdfrdjayq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    font-size: 14px;
    color: #856404;
}

.answer-explanation i[b-jsdfrdjayq] {
    font-size: 18px;
}

/* Certificate Section */
.certificate-section[b-jsdfrdjayq] {
    margin-bottom: 40px;
}

.certificate-header[b-jsdfrdjayq] {
    text-align: center;
    margin-bottom: 40px;
}

.certificate-header h2[b-jsdfrdjayq] {
    font-size: 32px;
    font-weight: 700;
    color: #212529;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.certificate-header h2 i[b-jsdfrdjayq] {
    color: #ffd700;
    font-size: 40px;
}

.certificate-header p[b-jsdfrdjayq] {
    font-size: 16px;
    color: #6c757d;
}

.certificate-container[b-jsdfrdjayq] {
    max-width: 900px;
    margin: 0 auto 40px;
    background: #f8f9fa;
    padding: 40px;
    border-radius: 20px;
}

/* Certificate Design */
.certificate[b-jsdfrdjayq] {
    position: relative;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    padding: 60px;
    border: 15px double #0B0198;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.cert-border-top[b-jsdfrdjayq],
.cert-border-bottom[b-jsdfrdjayq] {
    position: absolute;
    left: 30px;
    right: 30px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #0B0198, transparent);
}

.cert-border-top[b-jsdfrdjayq] {
    top: 25px;
}

.cert-border-bottom[b-jsdfrdjayq] {
    bottom: 25px;
}

.cert-corner[b-jsdfrdjayq] {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 3px solid #0B0198;
}

.cert-corner-tl[b-jsdfrdjayq] {
    top: 15px;
    left: 15px;
    border-right: none;
    border-bottom: none;
}

.cert-corner-tr[b-jsdfrdjayq] {
    top: 15px;
    right: 15px;
    border-left: none;
    border-bottom: none;
}

.cert-corner-bl[b-jsdfrdjayq] {
    bottom: 15px;
    left: 15px;
    border-right: none;
    border-top: none;
}

.cert-corner-br[b-jsdfrdjayq] {
    bottom: 15px;
    right: 15px;
    border-left: none;
    border-top: none;
}

.cert-ribbon[b-jsdfrdjayq] {
    position: absolute;
    top: -15px;
    right: 60px;
    width: 80px;
    height: 100px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    clip-path: polygon(50% 0%, 100% 0%, 100% 70%, 50% 100%, 0% 70%, 0 0);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.cert-ribbon i[b-jsdfrdjayq] {
    font-size: 32px;
    color: #0B0198;
    margin-top: -20px;
}

.cert-content[b-jsdfrdjayq] {
    text-align: center;
}

.cert-logo img[b-jsdfrdjayq] {
    width: 120px;
    height: auto;
    margin-bottom: 20px;
}

.cert-title[b-jsdfrdjayq] {
    font-size: 42px;
    font-weight: 700;
    color: #0B0198;
    margin: 0 0 15px 0;
    font-family: 'Georgia', serif;
}

.cert-subtitle[b-jsdfrdjayq] {
    font-size: 18px;
    color: #6c757d;
    font-style: italic;
    margin-bottom: 25px;
}

.cert-worker-photo[b-jsdfrdjayq] {
    width: 120px;
    height: 120px;
    margin: 0 auto 25px;
}

.cert-worker-photo img[b-jsdfrdjayq],
.cert-photo-placeholder[b-jsdfrdjayq] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #0B0198;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cert-photo-placeholder[b-jsdfrdjayq] {
    background: linear-gradient(135deg, #0B0198 0%, #1a16b8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cert-photo-placeholder i[b-jsdfrdjayq] {
    font-size: 50px;
    color: white;
}

.cert-name[b-jsdfrdjayq] {
    font-size: 36px;
    font-weight: 700;
    color: #0B0198;
    margin: 0 0 15px 0;
    text-transform: capitalize;
}

.cert-description[b-jsdfrdjayq] {
    font-size: 16px;
    color: #495057;
    margin-bottom: 20px;
}

.cert-course[b-jsdfrdjayq] {
    font-size: 28px;
    font-weight: 700;
    color: #27ae60;
    margin: 20px 0 10px;
}

.cert-category[b-jsdfrdjayq] {
    font-size: 18px;
    color: #6c757d;
    margin-bottom: 25px;
}

.cert-score[b-jsdfrdjayq] {
    margin: 30px 0;
}

.cert-score-badge[b-jsdfrdjayq] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 40px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border-radius: 15px;
    border: 3px solid #0B0198;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.cert-score-value[b-jsdfrdjayq] {
    font-size: 42px;
    font-weight: 700;
    color: #0B0198;
    line-height: 1;
    margin-bottom: 5px;
}

.cert-score-label[b-jsdfrdjayq] {
    font-size: 16px;
    font-weight: 600;
    color: #495057;
    text-transform: uppercase;
}

.cert-details[b-jsdfrdjayq] {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin: 30px 0;
}

.cert-detail-item[b-jsdfrdjayq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.detail-label[b-jsdfrdjayq] {
    font-size: 13px;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.detail-value[b-jsdfrdjayq] {
    font-size: 16px;
    font-weight: 600;
    color: #212529;
}

.cert-footer[b-jsdfrdjayq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 50px;
    padding-top: 30px;
    border-top: 2px solid #e9ecef;
}

.cert-signature[b-jsdfrdjayq] {
    text-align: left;
}

.signature-line[b-jsdfrdjayq] {
    width: 200px;
    height: 2px;
    background: #212529;
    margin-bottom: 10px;
}

.cert-signature p[b-jsdfrdjayq] {
    font-size: 13px;
    color: #6c757d;
    margin: 0;
}

.cert-seal[b-jsdfrdjayq] {
    text-align: right;
}

.seal-circle[b-jsdfrdjayq] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0B0198 0%, #1a16b8 100%);
    border: 4px solid #ffd700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.seal-circle i[b-jsdfrdjayq] {
    font-size: 36px;
    color: #ffd700;
}

.cert-website[b-jsdfrdjayq] {
    margin-top: 20px;
}

.cert-website p[b-jsdfrdjayq] {
    font-size: 12px;
    color: #6c757d;
    margin: 0;
}

/* Certificate Actions */
.certificate-actions[b-jsdfrdjayq] {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* Action Buttons */
.action-buttons[b-jsdfrdjayq] {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}

.btn[b-jsdfrdjayq] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn i[b-jsdfrdjayq] {
    font-size: 18px;
}

.btn-primary[b-jsdfrdjayq] {
    background: linear-gradient(135deg, #0B0198 0%, #1a16b8 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(11, 1, 152, 0.3);
}

.btn-primary:hover[b-jsdfrdjayq] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(11, 1, 152, 0.4);
}

.btn-secondary[b-jsdfrdjayq] {
    background: #6c757d;
    color: white;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.2);
}

.btn-secondary:hover[b-jsdfrdjayq] {
    background: #5a6268;
    transform: translateY(-2px);
}

.btn-success[b-jsdfrdjayq] {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.btn-success:hover[b-jsdfrdjayq] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

.btn-info[b-jsdfrdjayq] {
    background: linear-gradient(135deg, #0077b5 0%, #005582 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 119, 181, 0.3);
}

.btn-info:hover[b-jsdfrdjayq] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 119, 181, 0.4);
}

/* Print Styles */
@media print {
    .test-details-container[b-jsdfrdjayq] {
        margin: 0;
        padding: 0;
    }

    .page-header[b-jsdfrdjayq],
    .status-section[b-jsdfrdjayq],
    .test-overview-card[b-jsdfrdjayq],
    .score-card[b-jsdfrdjayq],
    .questions-section[b-jsdfrdjayq],
    .certificate-header[b-jsdfrdjayq],
    .certificate-actions[b-jsdfrdjayq],
    .action-buttons[b-jsdfrdjayq] {
        display: none !important;
    }

    .certificate-container[b-jsdfrdjayq] {
        max-width: 100%;
        padding: 0;
        background: white;
    }

    .certificate[b-jsdfrdjayq] {
        page-break-inside: avoid;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .test-details-container[b-jsdfrdjayq] {
        padding: 15px;
        margin: 20px auto;
    }

    .page-header[b-jsdfrdjayq] {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-header h1[b-jsdfrdjayq] {
        font-size: 24px;
    }

    .worker-section[b-jsdfrdjayq] {
        flex-direction: column;
        text-align: center;
    }

    .test-meta[b-jsdfrdjayq] {
        grid-template-columns: 1fr;
    }

    .score-card[b-jsdfrdjayq] {
        flex-direction: column;
        padding: 30px 20px;
    }

    .score-details[b-jsdfrdjayq] {
        flex-direction: column;
        gap: 20px;
    }

    .test-info-grid[b-jsdfrdjayq] {
        grid-template-columns: 1fr;
    }

    .options-grid[b-jsdfrdjayq] {
        grid-template-columns: 1fr;
    }

    .certificate-container[b-jsdfrdjayq] {
        padding: 20px;
    }

    .certificate[b-jsdfrdjayq] {
        padding: 30px 20px;
    }

    .cert-title[b-jsdfrdjayq] {
        font-size: 28px;
    }

    .cert-name[b-jsdfrdjayq] {
        font-size: 24px;
    }

    .cert-course[b-jsdfrdjayq] {
        font-size: 20px;
    }

    .cert-details[b-jsdfrdjayq] {
        flex-direction: column;
        gap: 20px;
    }

    .cert-footer[b-jsdfrdjayq] {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .certificate-actions[b-jsdfrdjayq] {
        flex-direction: column;
    }

    .certificate-actions .btn[b-jsdfrdjayq] {
        width: 100%;
        justify-content: center;
    }

    .action-buttons[b-jsdfrdjayq] {
        flex-direction: column;
    }

    .action-buttons .btn[b-jsdfrdjayq] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/Employer/ViewCandidateStats.razor.rz.scp.css */
/* Header Styling */
.upper-title-box[b-mbvnjx7y82] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.upper-title-box h3[b-mbvnjx7y82] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #0b0198;
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.upper-title-box h3 i[b-mbvnjx7y82] {
    font-size: 2rem;
}

.upper-title-box .text[b-mbvnjx7y82] {
    color: #696969;
    font-size: 1rem;
}

/* Employer Info Badge */
.employer-info-badge[b-mbvnjx7y82] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, #0b0198 0%, #1a16b8 100%);
    padding: 1rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(11, 1, 152, 0.2);
    animation: slideInRight-b-mbvnjx7y82 0.5s ease-out;
}

.employer-avatar[b-mbvnjx7y82] {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.employer-avatar i[b-mbvnjx7y82] {
    font-size: 2rem;
}

.employer-details[b-mbvnjx7y82] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.employer-label[b-mbvnjx7y82] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.employer-name[b-mbvnjx7y82] {
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
}

/* Widget Styling */
.widget-title[b-mbvnjx7y82] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 2px solid #e8ecef;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.widget-title .title-content[b-mbvnjx7y82] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.widget-title h4[b-mbvnjx7y82] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #202124;
}

.record-count[b-mbvnjx7y82] {
    background: #0b0198;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.btn-refresh[b-mbvnjx7y82] {
    background: #0b0198;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-refresh:hover:not(:disabled)[b-mbvnjx7y82] {
    background: #090085;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(11, 1, 152, 0.3);
}

.btn-refresh:disabled[b-mbvnjx7y82] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-refresh i[b-mbvnjx7y82] {
    font-size: 1.2rem;
}

/* Loading State */
.loading-container[b-mbvnjx7y82] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rem 2rem;
}

.loading-spinner[b-mbvnjx7y82] {
    text-align: center;
}

.spinner[b-mbvnjx7y82] {
    width: 60px;
    height: 60px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0b0198;
    border-radius: 50%;
    animation: spin-b-mbvnjx7y82 1s linear infinite;
    margin: 0 auto 1rem;
}

.loading-spinner p[b-mbvnjx7y82] {
    color: #696969;
    font-size: 1rem;
    margin: 0;
}

/* Empty State */
.empty-state[b-mbvnjx7y82] {
    text-align: center;
    padding: 4rem 2rem;
    animation: fadeIn-b-mbvnjx7y82 0.5s ease-out;
}

.empty-icon[b-mbvnjx7y82] {
    width: 120px;
    height: 120px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-icon i[b-mbvnjx7y82] {
    font-size: 4rem;
    color: #0b0198;
}

.empty-state h4[b-mbvnjx7y82] {
    color: #202124;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.empty-state p[b-mbvnjx7y82] {
    color: #696969;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

/* Search and Filter Section */
.search-filter-section[b-mbvnjx7y82] {
    padding: 1.5rem;
    background: #f8f9fa;
    border-bottom: 1px solid #e8ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.search-box[b-mbvnjx7y82] {
    position: relative;
    flex: 1;
    min-width: 250px;
    max-width: 500px;
}

.search-box i[b-mbvnjx7y82] {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #696969;
    font-size: 1.1rem;
}

.search-input[b-mbvnjx7y82] {
    width: 100%;
    padding: 0.75rem 3rem 0.75rem 3rem;
    border: 2px solid #e8ecef;
    border-radius: 25px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.search-input:focus[b-mbvnjx7y82] {
    outline: none;
    border-color: #0b0198;
    box-shadow: 0 0 0 3px rgba(11, 1, 152, 0.1);
}

.clear-search[b-mbvnjx7y82] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: #e8ecef;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.clear-search:hover[b-mbvnjx7y82] {
    background: #dc3545;
    color: white;
}

.filter-info[b-mbvnjx7y82] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.results-count[b-mbvnjx7y82] {
    color: #696969;
    font-size: 0.9rem;
}

.page-size-selector[b-mbvnjx7y82] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-size-selector label[b-mbvnjx7y82] {
    font-size: 0.9rem;
    color: #696969;
    margin: 0;
}

.page-size-select[b-mbvnjx7y82] {
    padding: 0.4rem 0.75rem;
    border: 2px solid #e8ecef;
    border-radius: 6px;
    font-size: 0.9rem;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-size-select:focus[b-mbvnjx7y82] {
    outline: none;
    border-color: #0b0198;
    box-shadow: 0 0 0 3px rgba(11, 1, 152, 0.1);
}

.page-size-select:hover[b-mbvnjx7y82] {
    border-color: #0b0198;
}

/* Table Styling */
.performance-table[b-mbvnjx7y82] {
    width: 100%;
    margin: 0;
}

.performance-table thead tr[b-mbvnjx7y82] {
    background: linear-gradient(135deg, #0b0198 0%, #1a16b8 100%);
    color: white;
}

.performance-table thead th[b-mbvnjx7y82] {
    padding: 1rem;
    font-weight: 600;
    text-align: left;
    border: none;
    font-size: 0.95rem;
}

.performance-table tbody tr[b-mbvnjx7y82] {
    border-bottom: 1px solid #e8ecef;
    transition: all 0.3s ease;
}

.performance-table tbody tr:hover[b-mbvnjx7y82] {
    background: #f8f9fa;
    transform: translateX(5px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.performance-table tbody td[b-mbvnjx7y82] {
    padding: 1rem;
    vertical-align: middle;
}

.serial-number[b-mbvnjx7y82] {
    font-weight: 600;
    color: #0b0198;
    font-size: 1rem;
}

/* Worker Info */
.worker-info[b-mbvnjx7y82] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.worker-avatar[b-mbvnjx7y82] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.worker-avatar img[b-mbvnjx7y82] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.worker-avatar i[b-mbvnjx7y82] {
    font-size: 1.5rem;
    color: #0b0198;
}

.worker-details[b-mbvnjx7y82] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.worker-name[b-mbvnjx7y82] {
    font-weight: 600;
    color: #202124;
    font-size: 0.95rem;
}

.worker-id[b-mbvnjx7y82] {
    font-size: 0.8rem;
    color: #696969;
    font-family: 'Courier New', monospace;
}

.category-badge[b-mbvnjx7y82] {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    color: #0b0198;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-block;
}

.test-title[b-mbvnjx7y82] {
    font-weight: 500;
    color: #202124;
}

/* Score Display */
.score-display[b-mbvnjx7y82] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.score-circle[b-mbvnjx7y82] {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    border: 3px solid;
    animation: scaleIn-b-mbvnjx7y82 0.5s ease-out;
}

.score-value[b-mbvnjx7y82] {
    font-size: 0.9rem;
}

.score-details[b-mbvnjx7y82] {
    font-size: 0.85rem;
    color: #696969;
}

.score-excellent .score-circle[b-mbvnjx7y82] {
    background: #d1f2eb;
    border-color: #1abc9c;
    color: #0a5642;
}

.score-good .score-circle[b-mbvnjx7y82] {
    background: #d4edda;
    border-color: #28a745;
    color: #155724;
}

.score-pass .score-circle[b-mbvnjx7y82] {
    background: #d1e7dd;
    border-color: #198754;
    color: #0f5132;
}

.score-fair .score-circle[b-mbvnjx7y82] {
    background: #fff3cd;
    border-color: #ffc107;
    color: #856404;
}

.score-fail .score-circle[b-mbvnjx7y82] {
    background: #f8d7da;
    border-color: #dc3545;
    color: #842029;
}

.date-time-cell[b-mbvnjx7y82] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.date-time-cell .date[b-mbvnjx7y82] {
    font-weight: 600;
    color: #202124;
    font-size: 0.95rem;
}

.date-time-cell .time[b-mbvnjx7y82] {
    color: #696969;
    font-size: 0.85rem;
}

/* Status Badges */
.status-badge[b-mbvnjx7y82] {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-block;
    text-transform: capitalize;
}

.status-completed[b-mbvnjx7y82] {
    background: #d1e7dd;
    color: #0f5132;
}

.status-passed[b-mbvnjx7y82] {
    background: #d1e7dd;
    color: #0a3622;
}

.status-failed[b-mbvnjx7y82] {
    background: #f8d7da;
    color: #842029;
}

.status-pending-review[b-mbvnjx7y82] {
    background: #fff3cd;
    color: #664d03;
}

.status-reviewed[b-mbvnjx7y82] {
    background: #d1e7dd;
    color: #146c43;
}

.status-default[b-mbvnjx7y82] {
    background: #e9ecef;
    color: #495057;
}

/* Action Button */
.btn-action[b-mbvnjx7y82] {
    background: #0b0198;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.btn-action:hover[b-mbvnjx7y82] {
    background: #090085;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(11, 1, 152, 0.3);
}

.btn-action i[b-mbvnjx7y82] {
    font-size: 1.1rem;
}

/* Mobile View */
.mobile-view[b-mbvnjx7y82] {
    display: none;
}

.result-card[b-mbvnjx7y82] {
    background: white;
    border: 1px solid #e8ecef;
    border-radius: 12px;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.result-card:hover[b-mbvnjx7y82] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.card-header[b-mbvnjx7y82] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #0b0198 0%, #1a16b8 100%);
    color: white;
}

.card-number[b-mbvnjx7y82] {
    font-weight: 700;
    font-size: 1.1rem;
}

.card-body[b-mbvnjx7y82] {
    padding: 1.5rem;
}

.worker-profile[b-mbvnjx7y82] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f0f0f0;
}

.worker-avatar-large[b-mbvnjx7y82] {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 3px solid #0b0198;
}

.worker-avatar-large img[b-mbvnjx7y82] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.worker-avatar-large i[b-mbvnjx7y82] {
    font-size: 2rem;
    color: #0b0198;
}

.worker-info-mobile[b-mbvnjx7y82] {
    flex: 1;
}

.worker-info-mobile h5[b-mbvnjx7y82] {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #202124;
}

.card-row[b-mbvnjx7y82] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.card-row:last-child[b-mbvnjx7y82] {
    border-bottom: none;
}

.card-row .label[b-mbvnjx7y82] {
    color: #696969;
    font-size: 0.9rem;
    font-weight: 500;
}

.card-row .value[b-mbvnjx7y82] {
    color: #202124;
    font-weight: 600;
    font-size: 0.95rem;
    text-align: right;
}

.score-row .value[b-mbvnjx7y82] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-footer[b-mbvnjx7y82] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid #f0f0f0;
}

.btn-action-full[b-mbvnjx7y82] {
    width: 100%;
    background: #0b0198;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.btn-action-full:hover[b-mbvnjx7y82] {
    background: #090085;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(11, 1, 152, 0.3);
}

.btn-action-full i[b-mbvnjx7y82] {
    font-size: 1.2rem;
}

/* Performance Summary Section */
.performance-summary[b-mbvnjx7y82] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 12px;
}

.summary-card[b-mbvnjx7y82] {
    background: white;
    padding: 1.5rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border-left: 4px solid #0b0198;
}

.summary-card:hover[b-mbvnjx7y82] {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.summary-card.highlight[b-mbvnjx7y82] {
    background: linear-gradient(135deg, #0b0198 0%, #1a16b8 100%);
    color: white;
    border-left: 4px solid #28a745;
}

.summary-card i[b-mbvnjx7y82] {
    font-size: 2.5rem;
    color: #0b0198;
}

.summary-card.highlight i[b-mbvnjx7y82] {
    color: white;
}

.summary-content[b-mbvnjx7y82] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.summary-label[b-mbvnjx7y82] {
    font-size: 0.85rem;
    color: #696969;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-card.highlight .summary-label[b-mbvnjx7y82] {
    color: rgba(255, 255, 255, 0.8);
}

.summary-value[b-mbvnjx7y82] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #202124;
}

.summary-card.highlight .summary-value[b-mbvnjx7y82] {
    color: white;
}

/* Animations */
@keyframes spin-b-mbvnjx7y82 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fadeIn-b-mbvnjx7y82 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight-b-mbvnjx7y82 {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn-b-mbvnjx7y82 {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.fade-in[b-mbvnjx7y82] {
    animation: fadeIn-b-mbvnjx7y82 0.5s ease-out;
}

/* Responsive Design */
@media (max-width: 991px) {
    .desktop-view[b-mbvnjx7y82] {
        display: none;
    }

    .mobile-view[b-mbvnjx7y82] {
        display: block;
    }

    .upper-title-box[b-mbvnjx7y82] {
        flex-direction: column;
        align-items: flex-start;
    }

    .employer-info-badge[b-mbvnjx7y82] {
        width: 100%;
    }

    .search-filter-section[b-mbvnjx7y82] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box[b-mbvnjx7y82] {
        max-width: none;
    }

    .filter-info[b-mbvnjx7y82] {
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .performance-summary[b-mbvnjx7y82] {
        grid-template-columns: 1fr;
    }

    .pagination-container[b-mbvnjx7y82] {
        flex-direction: column;
        gap: 1rem;
    }

    .pagination-info[b-mbvnjx7y82] {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .upper-title-box h3[b-mbvnjx7y82] {
        font-size: 1.5rem;
    }

    .upper-title-box h3 i[b-mbvnjx7y82] {
        font-size: 1.75rem;
    }

    .widget-title[b-mbvnjx7y82] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .widget-title .title-content[b-mbvnjx7y82] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .widget-actions[b-mbvnjx7y82] {
        width: 100%;
    }

    .btn-refresh[b-mbvnjx7y82] {
        width: 100%;
        justify-content: center;
    }

    .employer-info-badge[b-mbvnjx7y82] {
        padding: 0.75rem 1rem;
    }

    .employer-avatar[b-mbvnjx7y82] {
        width: 40px;
        height: 40px;
    }

    .employer-avatar i[b-mbvnjx7y82] {
        font-size: 1.5rem;
    }

    .employer-name[b-mbvnjx7y82] {
        font-size: 1rem;
    }

    .empty-icon[b-mbvnjx7y82] {
        width: 100px;
        height: 100px;
    }

    .empty-icon i[b-mbvnjx7y82] {
        font-size: 3rem;
    }

    .empty-state h4[b-mbvnjx7y82] {
        font-size: 1.25rem;
    }

    .worker-avatar-large[b-mbvnjx7y82] {
        width: 60px;
        height: 60px;
    }

    .worker-info-mobile h5[b-mbvnjx7y82] {
        font-size: 1rem;
    }

    .summary-value[b-mbvnjx7y82] {
        font-size: 1.5rem;
    }

    .score-circle[b-mbvnjx7y82] {
        width: 45px;
        height: 45px;
    }

    .pagination-controls[b-mbvnjx7y82] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .pagination-btn[b-mbvnjx7y82] {
        font-size: 0.85rem;
        padding: 0.4rem 0.7rem;
    }
}

@media (max-width: 480px) {
    .upper-title-box h3[b-mbvnjx7y82] {
        font-size: 1.25rem;
    }

    .card-body[b-mbvnjx7y82] {
        padding: 1rem;
    }

    .performance-summary[b-mbvnjx7y82] {
        padding: 1rem;
        gap: 1rem;
    }

    .summary-card[b-mbvnjx7y82] {
        padding: 1rem;
    }

    .summary-card i[b-mbvnjx7y82] {
        font-size: 2rem;
    }

    .search-input[b-mbvnjx7y82] {
        font-size: 0.9rem;
        padding: 0.65rem 2.5rem 0.65rem 2.5rem;
    }

    .filter-info[b-mbvnjx7y82] {
        flex-direction: column;
        align-items: stretch;
    }

    .page-size-selector[b-mbvnjx7y82] {
        justify-content: space-between;
    }
}

/* Pagination Styles */
.pagination-container[b-mbvnjx7y82] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: #f8f9fa;
    border-top: 1px solid #e8ecef;
    flex-wrap: wrap;
    gap: 1rem;
}

.pagination-info[b-mbvnjx7y82] {
    font-size: 0.9rem;
    color: #696969;
    font-weight: 500;
}

.pagination-controls[b-mbvnjx7y82] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pagination-btn[b-mbvnjx7y82] {
    background: white;
    border: 2px solid #e8ecef;
    border-radius: 6px;
    padding: 0.5rem 0.85rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: #202124;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
}

.pagination-btn:hover:not(:disabled)[b-mbvnjx7y82] {
    background: #0b0198;
    border-color: #0b0198;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(11, 1, 152, 0.3);
}

.pagination-btn:disabled[b-mbvnjx7y82] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.pagination-btn.active[b-mbvnjx7y82] {
    background: #0b0198;
    border-color: #0b0198;
    color: white;
    font-weight: 700;
}

.pagination-btn i[b-mbvnjx7y82] {
    font-size: 1.1rem;
}
/* /Components/Pages/Public/BlogDetails.razor.rz.scp.css */
.blog-details-page[b-6mpa10vjcb] {
    --accent: #0b0198;
    --accent-2: color-mix(in oklab, var(--accent) 72%, white);
    --accent-3: color-mix(in oklab, var(--accent) 35%, white);
    --surface: var(--bs-white);
    --text-muted: rgba(33, 37, 41, .65);
}

.blog-details-hero[b-6mpa10vjcb] {
    background:
        radial-gradient(1100px circle at 0% 0%, color-mix(in oklab, var(--accent) 24%, transparent), transparent 55%),
        radial-gradient(900px circle at 100% 0%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 55%),
        linear-gradient(135deg, color-mix(in oklab, var(--accent) 18%, white), color-mix(in oklab, var(--accent-2) 18%, white));
    border: 1px solid color-mix(in oklab, var(--accent) 20%, transparent);
    border-radius: 18px;
}

.blog-details-hero .hero-title[b-6mpa10vjcb] {
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: color-mix(in oklab, var(--accent) 88%, black);
}

.blog-chip[b-6mpa10vjcb] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .65rem;
    border-radius: 999px;
    background: color-mix(in oklab, var(--accent) 10%, white);
    border: 1px solid color-mix(in oklab, var(--accent) 20%, transparent);
    color: color-mix(in oklab, var(--accent) 88%, black);
    font-weight: 600;
    font-size: .85rem;
}

.blog-chip.secondary[b-6mpa10vjcb] {
    background: color-mix(in oklab, var(--accent) 7%, white);
    border-color: color-mix(in oklab, var(--accent) 16%, transparent);
    color: color-mix(in oklab, var(--accent) 82%, black);
}

.blog-chip.tertiary[b-6mpa10vjcb] {
    background: color-mix(in oklab, var(--accent) 12%, white);
    border-color: color-mix(in oklab, var(--accent) 22%, transparent);
    color: color-mix(in oklab, var(--accent) 86%, black);
}

.blog-hero-actions .e-btn[b-6mpa10vjcb] {
    border-radius: 12px;
}

.blog-article[b-6mpa10vjcb] {
    border-radius: 18px;
}

.blog-article .hero-image[b-6mpa10vjcb] {
    position: relative;
}

.blog-article .hero-image[b-6mpa10vjcb]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 28%, transparent) 0%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .08) 100%);
    pointer-events: none;
}

.blog-content[b-6mpa10vjcb] {
    color: rgba(33, 37, 41, .92);
}

.blog-aside-card[b-6mpa10vjcb] {
    border-radius: 18px;
    border: 1px solid color-mix(in oklab, var(--accent) 14%, transparent);
    background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 5%, white), rgba(255, 255, 255, 1) 45%);
}

.related-btn[b-6mpa10vjcb] {
    border-radius: 14px;
    background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 8%, white), color-mix(in oklab, var(--accent) 4%, white));
    border: 1px solid color-mix(in oklab, var(--accent) 14%, transparent);
    transition: transform .08s ease-in-out, box-shadow .08s ease-in-out;
}

.related-btn:hover[b-6mpa10vjcb] {
    transform: translateY(-1px);
    box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .08);
}

.blog-meta-muted[b-6mpa10vjcb] {
    color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .related-btn[b-6mpa10vjcb] {
        transition: none;
    }

    .related-btn:hover[b-6mpa10vjcb] {
        transform: none;
    }
}
/* /Components/Pages/Worker/BioDataInfo.razor.rz.scp.css */
/* Existing styles */
/* Profile Picture Upload Styling */
.profile-upload-container[b-bcpeczp3yh] {
    margin-bottom: 20px;
    padding: 20px;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    background-color: #f8f9fa;
    text-align: center;
    transition: all 0.3s ease;
}

    .profile-upload-container:hover[b-bcpeczp3yh] {
        border-color: #007bff;
        background-color: #f0f7ff;
    }

.profile-upload-inner[b-bcpeczp3yh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.profile-preview[b-bcpeczp3yh] {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
}

.profile-image[b-bcpeczp3yh] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-placeholder[b-bcpeczp3yh] {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-color: #e9ecef;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #6c757d;
}

    .profile-placeholder i[b-bcpeczp3yh] {
        font-size: 50px;
        margin-bottom: 10px;
    }

.remove-image-btn[b-bcpeczp3yh] {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    color: #dc3545;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

    .remove-image-btn:hover[b-bcpeczp3yh] {
        background-color: #dc3545;
        color: white;
    }

.upload-details[b-bcpeczp3yh] {
    display: flex;
    flex-direction: column;
    margin-top: 5px;
}

.file-name[b-bcpeczp3yh] {
    font-weight: 500;
    color: #212529;
}

.file-size[b-bcpeczp3yh] {
    font-size: 0.875rem;
    color: #6c757d;
}

.profile-uploader[b-bcpeczp3yh] {
    margin-top: 10px;
}

    .profile-uploader .e-upload[b-bcpeczp3yh] {
        border: none;
        background: transparent;
    }

    .profile-uploader .e-upload-browse-button[b-bcpeczp3yh] {
        background-color: #007bff;
        color: white;
        border-radius: 4px;
        padding: 8px 16px;
        font-weight: 500;
        transition: background-color 0.2s;
    }

        .profile-uploader .e-upload-browse-button:hover[b-bcpeczp3yh] {
            background-color: #0069d9;
        }

.upload-hint[b-bcpeczp3yh] {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 5px;
}

    .upload-hint i[b-bcpeczp3yh] {
        margin-right: 5px;
    }











.control_wrapper[b-bcpeczp3yh] {
    width: 1100px;
}

.custom-file.e-control-wrapper[b-bcpeczp3yh] {
    margin: 5px 0 -8px 0;
}

.custom-file .e-file-select-wrap[b-bcpeczp3yh] {
    padding: 0px;
    margin-left: -100px
}

.custom-file button.e-css.e-btn.e-upload-browse-btn[b-bcpeczp3yh] {
    margin-left: 130px;
    background: none !important;
    border: none;
    padding: 0 !important;
    font-family: inherit;
    color: #ff4081;
    text-decoration: underline;
    cursor: pointer;
    box-shadow: none;
    text-transform: capitalize;
}

    .custom-file button.e-css.e-btn.e-upload-browse-btn:hover[b-bcpeczp3yh] {
        background: none !important;
        border: none;
        padding: 0 !important;
        font-family: inherit;
        color: #ff4081;
        text-decoration: underline;
        cursor: pointer;
        box-shadow: none;
        text-transform: capitalize;
    }

#dropArea .e-upload-files .e-file-delete-btn.e-icons[b-bcpeczp3yh],
#dropArea .e-upload-files .e-file-remove-btn.e-icons[b-bcpeczp3yh],
#dropArea .e-upload-files .e-file-abort-btn[b-bcpeczp3yh] {
    top: 120px;
    background-color: white;
    border-radius: 50%;
    font-size: 12px;
    left: 80px;
}

#dropArea .e-upload-files li .e-file-remove-btn.e-icons.e-upload-icon[b-bcpeczp3yh] {
    font-size: 14px;
    left: 20px;
}

#dropArea .e-upload-files li:hover .e-icons[b-bcpeczp3yh] {
    visibility: visible;
}

#dropArea .e-upload-files li .e-icons[b-bcpeczp3yh] {
    visibility: hidden;
}

#dropArea .e-upload .e-upload-files .e-icons.e-upload-icon[b-bcpeczp3yh] {
    font-family: 'Uploader_Icon';
    speak: none;
    font-size: 16px;
    left: 20px;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    #dropArea .e-upload .e-upload-files .e-icons.e-upload-icon[b-bcpeczp3yh]::before {
        content: '\e700';
    }

#dropArea .e-upload .e-upload-files .e-icons:not(.e-uploaded):hover[b-bcpeczp3yh] {
    background-color: #e6e6e6;
    border-color: #adadad;
    color: #333;
}

#dropArea .e-upload .e-upload-files .e-upload-file-list[b-bcpeczp3yh] {
    border: 0;
    display: inline-block;
    width: 165px;
}

.upload-image[b-bcpeczp3yh] {
    width: 150px;
    height: 150px;
    display: inline-flex;
    background-size: contain;
    margin: 7px;
    text-align: center;
    line-height: 10;
    border-radius: 5px;
}

    .upload-image[b-bcpeczp3yh]:after {
        content: "";
        position: absolute;
        top: 6px;
        left: 6px;
        width: inherit;
        height: inherit;
        background: lightgray url('http://via.placeholder.com/300?text=Loading...') no-repeat center;
        color: transparent;
        border-radius: 5px;
    }

div.file-name[b-bcpeczp3yh] {
    color: rgb(14 121 32);
    font-size: 14px;
    padding: 3px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 90%;
    white-space: nowrap;
}

div.file-size[b-bcpeczp3yh] {
    font-size: 13px;
    padding: 3px 10px;
    overflow: hidden;
}

.progressbar[b-bcpeczp3yh] {
    background: #ff4081;
    border: none;
    border-radius: 10px;
    height: 4px;
    margin-left: 7px;
    width: 90%;
    top: -60px;
    position: relative;
}

#dropArea progress[b-bcpeczp3yh] {
    border: none;
    background: #fff;
}

progress[b-bcpeczp3yh]::-webkit-progress-bar {
    border: none;
    background-color: #ffffff;
}

.material progress[b-bcpeczp3yh]::-moz-progress-bar {
    border-radius: 2px;
    background-color: #ff4081;
}

.material #dropArea span a[b-bcpeczp3yh] {
    color: #ff4081;
}

/* New styles for the multi-step form */
.step-indicator[b-bcpeczp3yh] {
    text-align: center;
    flex-grow: 1;
    position: relative;
}

    .step-indicator:not(:last-child)[b-bcpeczp3yh]:after {
        content: '';
        position: absolute;
        top: 15px;
        left: 50%;
        width: 100%;
        height: 2px;
        background-color: #dee2e6;
        z-index: 0;
    }

.step-circle[b-bcpeczp3yh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #dee2e6;
    color: #6c757d;
    font-weight: bold;
    margin-bottom: 5px;
    z-index: 1;
    position: relative;
}

    .step-circle.active[b-bcpeczp3yh] {
        background-color: #007bff;
        color: white;
    }

    .step-circle.complete[b-bcpeczp3yh] {
        background-color: #28a745;
        color: white;
    }

.step-label[b-bcpeczp3yh] {
    font-size: 12px;
    color: #6c757d;
}

    .step-label.active[b-bcpeczp3yh] {
        color: #007bff;
        font-weight: bold;
    }

/* Loading Overlay */
.loading-overlay[b-bcpeczp3yh] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loading-spinner[b-bcpeczp3yh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    padding: 30px 40px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.spinner[b-bcpeczp3yh] {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin-b-bcpeczp3yh 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes spin-b-bcpeczp3yh {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-text[b-bcpeczp3yh] {
    color: #333;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
}

/* Corrected media query syntax */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #dropArea .e-upload .e-upload-files .e-file-remove-btn.e-icons[b-bcpeczp3yh],
    .e-bigger #dropArea .e-upload .e-upload-files .e-file-remove-btn.e-icons[b-bcpeczp3yh] {
        padding: 18px 25px 18px 12px;
    }
}
/* /Components/Pages/Worker/CertificationTopic.razor.rz.scp.css */
.topic-page[b-a43f5ookhc] {
    background: linear-gradient(135deg, #f5f7fb 0%, #e8ecf5 100%);
    min-height: 100vh;
    padding: 30px 0 60px;
}

.page-toolbar[b-a43f5ookhc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.ghost-button[b-a43f5ookhc] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 10px;
    border: 1px solid #d6d9e0;
    background: white;
    color: #22218c;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(34, 33, 140, 0.08);
    transition: all 0.25s ease;
    cursor: pointer;
}

.ghost-button:hover[b-a43f5ookhc] {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(34, 33, 140, 0.12);
}

.breadcrumbs[b-a43f5ookhc] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4a5568;
    font-weight: 600;
    flex-wrap: wrap;
}

.breadcrumbs .crumb.active[b-a43f5ookhc] {
    color: #22218c;
}

.breadcrumbs .divider[b-a43f5ookhc] {
    color: #a0aec0;
}

.panel[b-a43f5ookhc] {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.loading-panel[b-a43f5ookhc],
.error-panel[b-a43f5ookhc] {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: center;
    text-align: center;
}

.spinner[b-a43f5ookhc] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 4px solid rgba(34, 33, 140, 0.15);
    border-top-color: #22218c;
    animation: spin-b-a43f5ookhc 0.9s linear infinite;
}

@keyframes spin-b-a43f5ookhc {
    to { transform: rotate(360deg); }
}

.icon-circle[b-a43f5ookhc] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(34, 33, 140, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #22218c;
    font-size: 20px;
}

.icon-circle.error[b-a43f5ookhc] {
    background: rgba(255, 99, 99, 0.15);
    color: #d93025;
}

.button-row[b-a43f5ookhc] {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.button-row .primary[b-a43f5ookhc] {
    background: linear-gradient(135deg, #22218c 0%, #3d3bbd 100%);
    color: #fff;
    border: none;
    padding: 12px 18px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(34, 33, 140, 0.18);
}

.button-row .ghost[b-a43f5ookhc] {
    background: white;
    border: 1px solid #d6d9e0;
    color: #22218c;
    padding: 12px 18px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
}

.hero-card[b-a43f5ookhc] {
    background: linear-gradient(135deg, rgba(34, 33, 140, 0.05) 0%, rgba(61, 59, 189, 0.04) 100%);
    border-radius: 18px;
    padding: 28px;
    border: 1px solid rgba(34, 33, 140, 0.08);
    box-shadow: 0 12px 32px rgba(34, 33, 140, 0.08);
    margin-bottom: 24px;
}

.hero-card .header h1[b-a43f5ookhc] {
    margin: 10px 0;
    font-size: 28px;
    color: #0f172a;
}

.hero-card .lead[b-a43f5ookhc] {
    color: #4a5568;
    font-size: 16px;
    margin: 0 0 12px;
}

.badges[b-a43f5ookhc] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pill[b-a43f5ookhc] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: white;
    color: #22218c;
    border: 1px solid rgba(34, 33, 140, 0.2);
    font-weight: 700;
    font-size: 14px;
}

.pill.muted[b-a43f5ookhc] {
    color: #6b7280;
    border-color: #e5e7eb;
}

.status-badge[b-a43f5ookhc] {
    padding: 8px 14px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
}

.status-badge.active[b-a43f5ookhc] { background: linear-gradient(135deg, #00a86b 0%, #00c48c 100%); }
.status-badge.inactive[b-a43f5ookhc] { background: linear-gradient(135deg, #ff6b6b 0%, #f94144 100%); }

.stats[b-a43f5ookhc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.stat-card[b-a43f5ookhc] {
    background: white;
    border-radius: 14px;
    padding: 18px;
    border: 1px solid #edf2f7;
    box-shadow: 0 6px 18px rgba(34, 33, 140, 0.06);
}

.stat-card .label[b-a43f5ookhc] {
    display: block;
    color: #6b7280;
    font-weight: 600;
    margin-bottom: 6px;
}

.stat-card h3[b-a43f5ookhc] {
    margin: 0;
    color: #22218c;
    font-size: 24px;
}

.stat-card p[b-a43f5ookhc] {
    margin: 6px 0 0;
    color: #6b7280;
    font-size: 14px;
}

.content-grid[b-a43f5ookhc] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 18px;
}

.panel-header[b-a43f5ookhc] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.panel-header.compact h3[b-a43f5ookhc] { margin: 0; }

.eyebrow[b-a43f5ookhc] {
    color: #6b7280;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.panel-header h2[b-a43f5ookhc],
.panel-header h3[b-a43f5ookhc] {
    margin: 4px 0;
    color: #0f172a;
}

.panel-header .sub[b-a43f5ookhc] {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 14px;
}

.chip-row[b-a43f5ookhc] {
    display: flex;
    gap: 8px;
}

.chip[b-a43f5ookhc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    background: #f1f5f9;
    color: #22218c;
}

.chip.primary[b-a43f5ookhc] {
    background: rgba(34, 33, 140, 0.1);
    color: #22218c;
}

.chip.success[b-a43f5ookhc] {
    background: rgba(0, 196, 140, 0.12);
    color: #007a5c;
}

.chip.muted[b-a43f5ookhc] {
    background: #f4f5f7;
    color: #6b7280;
}

.chip.ghost[b-a43f5ookhc] {
    background: white;
    border: 1px solid #e5e7eb;
    color: #6b7280;
}

.resource-grid[b-a43f5ookhc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
}

.resource-card[b-a43f5ookhc] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.resource-card:hover[b-a43f5ookhc] {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(34, 33, 140, 0.12);
    border-color: rgba(34, 33, 140, 0.25);
}

.resource-icon[b-a43f5ookhc] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(34, 33, 140, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #22218c;
    font-size: 20px;
}

.resource-body[b-a43f5ookhc] {
    min-width: 0;
}

.resource-title[b-a43f5ookhc] {
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.resource-url[b-a43f5ookhc] {
    color: #6b7280;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.meta-row[b-a43f5ookhc] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.resource-action[b-a43f5ookhc] {
    color: #22218c;
    font-size: 18px;
}

.empty-state[b-a43f5ookhc] {
    text-align: center;
    padding: 24px;
    border: 1px dashed #e5e7eb;
    border-radius: 12px;
    color: #6b7280;
}

.empty-state h4[b-a43f5ookhc] { margin: 10px 0 4px; color: #0f172a; }

.empty-state.mini[b-a43f5ookhc] { padding: 12px; }

.related-panel[b-a43f5ookhc] { height: 100%; }

.related-list[b-a43f5ookhc] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.related-list li[b-a43f5ookhc] {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #fff;
}

.related-list li:hover[b-a43f5ookhc] {
    border-color: rgba(34, 33, 140, 0.3);
    box-shadow: 0 6px 16px rgba(34, 33, 140, 0.1);
}

.related-list .title[b-a43f5ookhc] {
    font-weight: 700;
    color: #0f172a;
}

.related-list p[b-a43f5ookhc] {
    margin: 6px 0;
    color: #6b7280;
    font-size: 14px;
}

.related-list .chevron[b-a43f5ookhc] {
    color: #22218c;
}

@media (max-width: 992px) {
    .content-grid[b-a43f5ookhc] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .page-toolbar[b-a43f5ookhc] { flex-direction: column; align-items: flex-start; }
    .hero-card .header h1[b-a43f5ookhc] { font-size: 22px; }
    .stat-card h3[b-a43f5ookhc] { font-size: 20px; }
}
/* /Components/Pages/Worker/ChooseCertification.razor.rz.scp.css */
.choose-certification[b-o0pg3r92t7] {
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
    min-height: 100vh;
    padding: 40px 0;
}

.page-header[b-o0pg3r92t7] {
    text-align: center;
    margin-bottom: 50px;
}

.page-header h1[b-o0pg3r92t7] {
    color: #22218c;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.page-header p[b-o0pg3r92t7] {
    color: #6c757d;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* Training Options Grid */
.training-options-grid[b-o0pg3r92t7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.option-card[b-o0pg3r92t7] {
    background: white;
    border-radius: 16px;
    padding: 40px 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 3px solid transparent;
    cursor: pointer;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.option-card:hover[b-o0pg3r92t7] {
    transform: translateY(-8px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.option-card.active[b-o0pg3r92t7] {
    border-color: #22218c;
    background: linear-gradient(135deg, rgba(34, 33, 140, 0.05) 0%, rgba(61, 59, 189, 0.05) 100%);
    box-shadow: 0 8px 30px rgba(34, 33, 140, 0.2);
}

.option-card.active[b-o0pg3r92t7]::before {
    content: '?';
    position: absolute;
    top: 15px;
    right: 15px;
    background: linear-gradient(135deg, #22218c 0%, #3d3bbd 100%);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
}

.card-icon[b-o0pg3r92t7] {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    font-size: 3rem;
    transition: all 0.3s ease;
}

.employer-icon[b-o0pg3r92t7] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.self-icon[b-o0pg3r92t7] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    box-shadow: 0 8px 20px rgba(240, 147, 251, 0.3);
}

.option-card:hover .card-icon[b-o0pg3r92t7] {
    transform: scale(1.1) rotate(5deg);
}

.option-card h3[b-o0pg3r92t7] {
    color: #22218c;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.option-card p[b-o0pg3r92t7] {
    color: #6c757d;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.card-badge[b-o0pg3r92t7] {
    display: inline-block;
    background: linear-gradient(135deg, #22218c 0%, #3d3bbd 100%);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Action Sections */
.action-section[b-o0pg3r92t7] {
    background: white;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    animation: slideIn-b-o0pg3r92t7 0.4s ease;
}

@keyframes slideIn-b-o0pg3r92t7 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-header[b-o0pg3r92t7] {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;
}

.section-header.warning[b-o0pg3r92t7] {
    border-bottom-color: #ffc107;
}

.header-icon[b-o0pg3r92t7] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #22218c 0%, #3d3bbd 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
}

.warning-icon[b-o0pg3r92t7] {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
}

.section-header h2[b-o0pg3r92t7] {
    color: #22218c;
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0 0 5px 0;
}

.section-header p[b-o0pg3r92t7] {
    color: #6c757d;
    font-size: 1rem;
    margin: 0;
}

/* Input Group */
.input-group[b-o0pg3r92t7] {
    margin-bottom: 30px;
}

.input-group label[b-o0pg3r92t7] {
    display: block;
    color: #2d3748;
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 1rem;
}

.code-input[b-o0pg3r92t7] {
    width: 100%;
    padding: 16px 20px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: 'Courier New', monospace;
    transition: all 0.3s ease;
}

.code-input:focus[b-o0pg3r92t7] {
    outline: none;
    border-color: #22218c;
    box-shadow: 0 0 0 3px rgba(34, 33, 140, 0.1);
}

.code-input[b-o0pg3r92t7]::placeholder {
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    font-family: inherit;
}

/* Credit Info */
.credit-info[b-o0pg3r92t7] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
}

.credit-display[b-o0pg3r92t7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 2px solid #dee2e6;
}

.credit-label[b-o0pg3r92t7] {
    font-size: 1rem;
    color: #6c757d;
    font-weight: 500;
}

.credit-amount[b-o0pg3r92t7] {
    font-size: 2rem;
    font-weight: 700;
    color: #22218c;
}

.info-text[b-o0pg3r92t7] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6c757d;
    font-size: 0.95rem;
}

.info-icon[b-o0pg3r92t7] {
    font-size: 1.2rem;
}

/* Warning Section */
.warning-section[b-o0pg3r92t7] {
    border: 2px solid #ffc107;
}

.warning-content[b-o0pg3r92t7] {
    margin-bottom: 30px;
}

.warning-message[b-o0pg3r92t7] {
    background: #fff9e6;
    border-left: 4px solid #ffc107;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 25px;
}

.warning-message p[b-o0pg3r92t7] {
    margin: 0 0 10px 0;
    color: #664d03;
    font-size: 1rem;
    line-height: 1.6;
}

.warning-message p:last-child[b-o0pg3r92t7] {
    margin-bottom: 0;
}

.warning-message strong[b-o0pg3r92t7] {
    color: #22218c;
    font-weight: 700;
}

.credit-benefits[b-o0pg3r92t7] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 25px;
    border-radius: 12px;
}

.credit-benefits h4[b-o0pg3r92t7] {
    color: #22218c;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 15px 0;
}

.credit-benefits ul[b-o0pg3r92t7] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.credit-benefits li[b-o0pg3r92t7] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    color: #4a5568;
    font-size: 0.95rem;
}

.credit-benefits li span[b-o0pg3r92t7] {
    color: #22218c;
    font-weight: 700;
}

/* Buttons */
.button-group[b-o0pg3r92t7] {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.btn-primary[b-o0pg3r92t7],
.btn-secondary[b-o0pg3r92t7] {
    flex: 1;
    min-width: 150px;
    padding: 16px 32px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    text-align: center;
}

.btn-primary[b-o0pg3r92t7] {
    background: linear-gradient(135deg, #22218c 0%, #3d3bbd 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(34, 33, 140, 0.3);
}

.btn-primary:hover:not(:disabled)[b-o0pg3r92t7] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 33, 140, 0.4);
}

.btn-primary:disabled[b-o0pg3r92t7] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-secondary[b-o0pg3r92t7] {
    background: white;
    color: #22218c;
    border: 2px solid #22218c;
}

.btn-secondary:hover[b-o0pg3r92t7] {
    background: #f8f9fa;
    transform: translateY(-2px);
}

/* Spinner */
.spinner[b-o0pg3r92t7] {
    width: 18px;
    height: 18px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-o0pg3r92t7 0.8s linear infinite;
}

@keyframes spin-b-o0pg3r92t7 {
    to {
        transform: rotate(360deg);
    }
}

/* Help Section */
.help-section[b-o0pg3r92t7] {
    max-width: 700px;
    margin: 0 auto;
}

.help-card[b-o0pg3r92t7] {
    background: white;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.help-icon[b-o0pg3r92t7] {
    font-size: 4rem;
    margin-bottom: 20px;
}

.help-card h3[b-o0pg3r92t7] {
    color: #22218c;
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 25px;
}

.help-card p[b-o0pg3r92t7] {
    color: #4a5568;
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 15px;
    text-align: left;
}

.help-card p:last-child[b-o0pg3r92t7] {
    margin-bottom: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .page-header h1[b-o0pg3r92t7] {
        font-size: 2rem;
    }

    .training-options-grid[b-o0pg3r92t7] {
        grid-template-columns: 1fr;
    }

    .action-section[b-o0pg3r92t7] {
        padding: 25px;
    }

    .section-header[b-o0pg3r92t7] {
        flex-direction: column;
        text-align: center;
    }

    .section-header h2[b-o0pg3r92t7] {
        font-size: 1.5rem;
    }

    .button-group[b-o0pg3r92t7] {
        flex-direction: column;
    }

    .btn-primary[b-o0pg3r92t7],
    .btn-secondary[b-o0pg3r92t7] {
        width: 100%;
    }

    .credit-display[b-o0pg3r92t7] {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}
/* /Components/Pages/Worker/ConfirmAll.razor.rz.scp.css */
/* Modal Styles */
.modal-overlay[b-8x0ssil0yn] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    cursor: pointer;
}

.modal-container[b-8x0ssil0yn] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    padding: 1rem;
}

.modal-dialog[b-8x0ssil0yn] {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: auto;
    pointer-events: auto;
    animation: modalFadeIn 0.3s ease-out;
}

.modal-content[b-8x0ssil0yn] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    outline: 0;
}

.modal-header[b-8x0ssil0yn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    background: linear-gradient(135deg, #0b0198 0%, #1a16b8 100%);
    color: white;
}

.modal-title[b-8x0ssil0yn] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.modal-close-btn[b-8x0ssil0yn] {
    background: none;
    border: none;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: white;
    opacity: 0.8;
    cursor: pointer;
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    transition: opacity 0.15s ease-in-out;
}

    .modal-close-btn:hover[b-8x0ssil0yn] {
        opacity: 1;
        background-color: rgba(255, 255, 255, 0.1);
    }

.modal-body[b-8x0ssil0yn] {
    position: relative;
    flex: 1 1 auto;
    padding: 2rem 1.5rem;
}

.modal-footer[b-8x0ssil0yn] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem;
    border-top: 1px solid #dee2e6;
    border-bottom-right-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    background-color: #f8f9fa;
}

/* Submission Success Styles */
.submission-success[b-8x0ssil0yn] {
    text-align: center;
    padding: 1rem 0;
}

.success-icon[b-8x0ssil0yn] {
    margin-bottom: 1rem;
}

    .success-icon i[b-8x0ssil0yn] {
        font-size: 4rem;
        color: #28a745;
        animation: successPulse 1s ease-in-out;
    }

.success-message h6[b-8x0ssil0yn] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #28a745;
    margin-bottom: 0.5rem;
}

.success-message p[b-8x0ssil0yn] {
    color: #6c757d;
    line-height: 1.6;
    margin: 0;
}

/* Button Styles */
.btn[b-8x0ssil0yn] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    transition: all 0.15s ease-in-out;
    text-decoration: none;
}

.btn-primary[b-8x0ssil0yn] {
    background: linear-gradient(135deg, #0b0198 0%, #1a16b8 100%);
    color: white;
    border-color: #0b0198;
}

    .btn-primary:hover[b-8x0ssil0yn] {
        background: linear-gradient(135deg, #090085 0%, #1614a5 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(11, 1, 152, 0.3);
    }

/* Animations */
@@keyframes modalFadeIn {
    from[b-8x0ssil0yn] {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }

    to[b-8x0ssil0yn] {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@@keyframes successPulse {
    0%[b-8x0ssil0yn] {
        transform: scale(0);
        opacity: 0;
    }

    50%[b-8x0ssil0yn] {
        transform: scale(1.1);
        opacity: 0.8;
    }

    100%[b-8x0ssil0yn] {
        transform: scale(1);
        opacity: 1;
    }
}

/* Submit Button Enhancement */
.theme-btn[b-8x0ssil0yn] {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

    .theme-btn:disabled[b-8x0ssil0yn] {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }

    .theme-btn:not(:disabled):hover[b-8x0ssil0yn] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

/* Responsive Design */
@@media (max-width: 768px) {
    .modal-container[b-8x0ssil0yn] {
        padding: 0.5rem;
    }

    .modal-dialog[b-8x0ssil0yn] {
        max-width: 100%;
    }

    .modal-body[b-8x0ssil0yn] {
        padding: 1.5rem 1rem;
    }

    .success-icon i[b-8x0ssil0yn] {
        font-size: 3rem;
    }

    .modal-header[b-8x0ssil0yn],
    .modal-footer[b-8x0ssil0yn] {
        padding: 1rem;
    }
}

/* Form Enhancement */
.form-group label[b-8x0ssil0yn] {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
}

.e-input-group input[readonly][b-8x0ssil0yn] {
    background-color: #f8f9fa !important;
    border-color: #e9ecef !important;
    color: #6c757d !important;
}

.ls-widget[b-8x0ssil0yn] {
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    overflow: hidden;
}

.widget-title[b-8x0ssil0yn] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
}

    .widget-title h4[b-8x0ssil0yn] {
        color: #0b0198;
        font-weight: 600;
    }
/* /Components/Pages/Worker/DocumentInfo.razor.rz.scp.css */
:root[b-ndtsrfqjen] {
    --primary-color: #006bb7;
    --primary-dark: #0056a3;
    --success-color: #28a745;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --light-bg: #f8f9fa;
    --border-color: #e0e6ed;
    --text-muted: #6c757d;
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
    --border-radius: 12px;
    --transition: all 0.3s ease;
}

.document-upload-container[b-ndtsrfqjen] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 2rem 0;
}

.upload-header[b-ndtsrfqjen] {
    background: white;
    border-radius: var(--border-radius);
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-md);
}

    .upload-header h1[b-ndtsrfqjen] {
        color: var(--primary-color);
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 1rem;
        text-align: center;
    }

    .upload-header .subtitle[b-ndtsrfqjen] {
        color: var(--text-muted);
        font-size: 1.1rem;
        text-align: center;
        line-height: 1.6;
    }

.document-grid[b-ndtsrfqjen] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.document-card[b-ndtsrfqjen] {
    background: white;
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

    .document-card:hover[b-ndtsrfqjen] {
        transform: translateY(-5px);
        box-shadow: var(--shadow-md);
        border-color: var(--primary-color);
    }

    .document-card.completed[b-ndtsrfqjen] {
        border-color: var(--success-color);
        background: linear-gradient(135deg, #ffffff 0%, #f8fff9 100%);
    }

.document-header[b-ndtsrfqjen] {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.document-icon[b-ndtsrfqjen] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
}

.icon-profile[b-ndtsrfqjen] {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.icon-photos[b-ndtsrfqjen] {
    background: linear-gradient(135deg, #f093fb, #f5576c);
}

.icon-id[b-ndtsrfqjen] {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.icon-credentials[b-ndtsrfqjen] {
    background: linear-gradient(135deg, #43e97b, #38f9d7);
}

.icon-medical[b-ndtsrfqjen] {
    background: linear-gradient(135deg, #fa709a, #fee140);
}

.icon-police[b-ndtsrfqjen] {
    background: linear-gradient(135deg, #a8edea, #fed6e3);
}

.icon-video[b-ndtsrfqjen] {
    background: linear-gradient(135deg, #ff9a9e, #fecfef);
}

.document-title[b-ndtsrfqjen] {
    flex: 1;
}

    .document-title h3[b-ndtsrfqjen] {
        color: var(--primary-color);
        font-size: 1.2rem;
        font-weight: 600;
        margin: 0;
    }

.document-subtitle[b-ndtsrfqjen] {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0.25rem 0;
}

.status-badge[b-ndtsrfqjen] {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-pending[b-ndtsrfqjen] {
    background: #fff3cd;
    color: #856404;
}

.status-completed[b-ndtsrfqjen] {
    background: #d4edda;
    color: #155724;
}

.upload-area[b-ndtsrfqjen] {
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius);
    padding: 2rem;
    text-align: center;
    transition: var(--transition);
    margin: 1rem 0;
    position: relative;
    background: #fafbfc;
}

    .upload-area:hover[b-ndtsrfqjen] {
        border-color: var(--primary-color);
        background: #f0f7ff;
    }

    .upload-area.has-files[b-ndtsrfqjen] {
        border-color: var(--success-color);
        background: #f8fff9;
    }

.upload-icon[b-ndtsrfqjen] {
    font-size: 3rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.upload-text[b-ndtsrfqjen] {
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.file-input[b-ndtsrfqjen] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

.upload-btn[b-ndtsrfqjen] {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 25px;
    font-weight: 600;
    transition: var(--transition);
    cursor: pointer;
    font-size: 0.9rem;
}

    .upload-btn:hover[b-ndtsrfqjen] {
        background: var(--primary-dark);
        transform: translateY(-2px);
    }

    .upload-btn:disabled[b-ndtsrfqjen] {
        background: var(--text-muted);
        cursor: not-allowed;
        transform: none;
    }

.file-preview[b-ndtsrfqjen] {
    margin-top: 1rem;
    display: none;
}

    .file-preview.show[b-ndtsrfqjen] {
        display: block;
    }

.preview-grid[b-ndtsrfqjen] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.5rem;
    margin-top: 1rem;
}

.preview-item[b-ndtsrfqjen] {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1;
}

.preview-image[b-ndtsrfqjen] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-video[b-ndtsrfqjen] {
    width: 100%;
    height: 200px;
    border-radius: 8px;
    position: relative;
}

.file-info[b-ndtsrfqjen] {
    background: var(--light-bg);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    display: none;
}

    .file-info.show[b-ndtsrfqjen] {
        display: block;
    }

.file-details[b-ndtsrfqjen] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.file-name[b-ndtsrfqjen] {
    font-weight: 600;
    color: var(--primary-color);
}

.file-size[b-ndtsrfqjen] {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.requirements[b-ndtsrfqjen] {
    background: #e7f3ff;
    border-left: 4px solid var(--primary-color);
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 0 8px 8px 0;
}

.requirements-title[b-ndtsrfqjen] {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.requirements ul[b-ndtsrfqjen] {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--text-muted);
}

.requirements li[b-ndtsrfqjen] {
    margin: 0.25rem 0;
}

.modal-link[b-ndtsrfqjen] {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

    .modal-link:hover[b-ndtsrfqjen] {
        color: var(--primary-dark);
        text-decoration: underline;
    }

.submit-section[b-ndtsrfqjen] {
    background: white;
    border-radius: var(--border-radius);
    padding: 2rem;
    margin-top: 3rem;
    box-shadow: var(--shadow-md);
    text-align: center;
}

.submit-btn[b-ndtsrfqjen] {
    background: linear-gradient(135deg, var(--success-color), #20c997);
    color: white;
    border: none;
    padding: 1rem 3rem;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 600;
    transition: var(--transition);
    cursor: pointer;
    margin: 1rem;
}

    .submit-btn:hover[b-ndtsrfqjen] {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(40, 167, 69, 0.3);
    }

    .submit-btn:disabled[b-ndtsrfqjen] {
        background: var(--text-muted);
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.progress-overlay[b-ndtsrfqjen] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.progress-content[b-ndtsrfqjen] {
    background: white;
    padding: 2rem;
    border-radius: var(--border-radius);
    text-align: center;
    min-width: 300px;
}

.spinner[b-ndtsrfqjen] {
    width: 50px;
    height: 50px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@@keyframes spin {
    0%[b-ndtsrfqjen] {
        transform: rotate(0deg);
    }

    100%[b-ndtsrfqjen] {
        transform: rotate(360deg);
    }
}

.error-message[b-ndtsrfqjen] {
    color: var(--danger-color);
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 0.75rem;
    border-radius: 8px;
    margin: 1rem 0;
    font-size: 0.9rem;
}

.success-indicator[b-ndtsrfqjen] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--success-color);
    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    opacity: 0;
    transform: scale(0);
    transition: var(--transition);
}

    .success-indicator.show[b-ndtsrfqjen] {
        opacity: 1;
        transform: scale(1);
    }

.remove-btn[b-ndtsrfqjen] {
    position: absolute;
    top: 5px;
    right: 5px;
    background: var(--danger-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.8rem;
    z-index: 10;
    transition: var(--transition);
}

    .remove-btn:hover[b-ndtsrfqjen] {
        background: #c82333;
        transform: scale(1.1);
    }

.file-list[b-ndtsrfqjen] {
    margin-top: 1rem;
    max-height: 200px;
    overflow-y: auto;
}

.file-item[b-ndtsrfqjen] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    background: var(--light-bg);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.file-item-info[b-ndtsrfqjen] {
    display: flex;
    align-items: center;
    flex: 1;
}

.file-item-name[b-ndtsrfqjen] {
    font-weight: 600;
    color: var(--primary-color);
    margin-right: 1rem;
}

.file-item-size[b-ndtsrfqjen] {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.file-item-remove[b-ndtsrfqjen] {
    background: var(--danger-color);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    font-size: 0.8rem;
    transition: var(--transition);
}

    .file-item-remove:hover[b-ndtsrfqjen] {
        background: #c82333;
    }

@@media (max-width: 768px) {
    .document-grid[b-ndtsrfqjen] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .upload-header h1[b-ndtsrfqjen] {
        font-size: 2rem;
    }

    .upload-area[b-ndtsrfqjen] {
        padding: 1.5rem;
    }

    .submit-btn[b-ndtsrfqjen] {
        width: 100%;
        margin: 0.5rem 0;
    }

    .preview-grid[b-ndtsrfqjen] {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }

    .file-item[b-ndtsrfqjen] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .file-item-info[b-ndtsrfqjen] {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
}
/* /Components/Pages/Worker/FormerEmployerInfo.razor.rz.scp.css */
/* Professional Guidelines Panel */
.professional-guidelines-panel[b-03wz4ivfx5] {
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.guidelines-container[b-03wz4ivfx5] {
    background: linear-gradient(135deg, #f8fafe 0%, #ffffff 100%);
    border: 2px solid #e8f0fe;
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 8px 25px rgba(11, 1, 152, 0.08);
    position: relative;
    transition: all 0.3s ease;
}

    .guidelines-container:hover[b-03wz4ivfx5] {
        transform: translateY(-2px);
        box-shadow: 0 12px 35px rgba(11, 1, 152, 0.12);
    }

/* Header Section */
.guidelines-header[b-03wz4ivfx5] {
    background: linear-gradient(135deg, #0b0198 0%, #1a16b8 100%);
    color: white;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-radius: 14px 14px 0 0;
    position: relative;
}

    .guidelines-header[b-03wz4ivfx5]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="90" cy="20" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="30" cy="90" r="1" fill="rgba(255,255,255,0.1)"/></svg>');
        opacity: 0.3;
    }

.header-icon[b-03wz4ivfx5] {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.75rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    backdrop-filter: blur(10px);
}

.header-content[b-03wz4ivfx5] {
    flex: 1;
    position: relative;
    z-index: 1;
}

.guidelines-title[b-03wz4ivfx5] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
}

.guidelines-subtitle[b-03wz4ivfx5] {
    margin: 0.25rem 0 0 0;
    font-size: 0.95rem;
    opacity: 0.9;
    font-weight: 400;
}

/* Body Section */
.guidelines-body[b-03wz4ivfx5] {
    padding: 2rem;
}

.primary-instruction[b-03wz4ivfx5] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, #e8f4fd 0%, #f0f8ff 100%);
    border-radius: 12px;
    border-left: 4px solid #0b0198;
}

.instruction-icon[b-03wz4ivfx5] {
    background: #0b0198;
    color: white;
    padding: 0.5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    min-width: 40px;
    height: 40px;
}

.instruction-content h6[b-03wz4ivfx5] {
    margin: 0 0 0.5rem 0;
    color: #0b0198;
    font-weight: 700;
    font-size: 1.1rem;
}

.instruction-content p[b-03wz4ivfx5] {
    margin: 0;
    color: #2c3e50;
    line-height: 1.6;
}

/* Example Showcase */
.example-showcase[b-03wz4ivfx5] {
    background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
    border: 1px solid #b3e5fc;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.example-header[b-03wz4ivfx5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #1976d2;
    font-size: 1.05rem;
}

    .example-header i[b-03wz4ivfx5] {
        color: #ffc107;
        font-size: 1.2rem;
    }

.example-content p[b-03wz4ivfx5] {
    margin: 0 0 1rem 0;
    color: #2c3e50;
    font-weight: 500;
}

.example-list[b-03wz4ivfx5] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.example-item[b-03wz4ivfx5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    border: 1px solid rgba(25, 118, 210, 0.2);
}

    .example-item i[b-03wz4ivfx5] {
        color: #4caf50;
        font-size: 1rem;
    }

    .example-item span[b-03wz4ivfx5] {
        color: #2c3e50;
        font-weight: 500;
    }

/* Warning Showcase */
.warning-showcase[b-03wz4ivfx5] {
    background: linear-gradient(135deg, #fff8e1 0%, #fffbf0 100%);
    border: 1px solid #ffcc80;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.warning-header[b-03wz4ivfx5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-weight: 700;
    color: #e65100;
    font-size: 1.05rem;
}

    .warning-header i[b-03wz4ivfx5] {
        color: #f44336;
        font-size: 1.2rem;
    }

.warning-content p[b-03wz4ivfx5] {
    margin: 0 0 1rem 0;
    color: #2c3e50;
    font-weight: 500;
}

.warning-list[b-03wz4ivfx5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.warning-tag[b-03wz4ivfx5] {
    background: #ffebee;
    color: #c62828;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid #ffcdd2;
}

.warning-note[b-03wz4ivfx5] {
    color: #e65100;
    font-style: italic;
    font-size: 0.9rem;
    margin: 0 !important;
    font-weight: 500;
}

/* Footer */
.guidelines-footer[b-03wz4ivfx5] {
    background: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%);
    padding: 1rem 2rem;
    border-radius: 0 0 14px 14px;
    border-top: 1px solid #e0e0e0;
}

.footer-tip[b-03wz4ivfx5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #424242;
    font-size: 0.95rem;
}

    .footer-tip i[b-03wz4ivfx5] {
        color: #0b0198;
        font-size: 1.1rem;
    }

/* Responsive Design */
@@media (max-width: 768px) {
    .guidelines-header[b-03wz4ivfx5] {
        padding: 1.25rem 1.5rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .guidelines-title[b-03wz4ivfx5] {
        font-size: 1.2rem;
    }

    .guidelines-subtitle[b-03wz4ivfx5] {
        font-size: 0.9rem;
    }

    .guidelines-body[b-03wz4ivfx5] {
        padding: 1.5rem;
    }

    .primary-instruction[b-03wz4ivfx5] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .example-item[b-03wz4ivfx5] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .warning-list[b-03wz4ivfx5] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .warning-tag[b-03wz4ivfx5] {
        text-align: center;
    }

    .guidelines-footer[b-03wz4ivfx5] {
        padding: 1rem 1.5rem;
    }

    .footer-tip[b-03wz4ivfx5] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        text-align: left;
    }
}

/* Animation */
@@keyframes slideInFromTop {
    from[b-03wz4ivfx5] {
        opacity: 0;
        transform: translateY(-20px);
    }

    to[b-03wz4ivfx5] {
        opacity: 1;
        transform: translateY(0);
    }
}

.professional-guidelines-panel[b-03wz4ivfx5] {
    animation: slideInFromTop 0.6s ease-out;
}

/* Form Actions Section */
.form-actions-section[b-03wz4ivfx5] {
    margin-top: 3rem;
    padding: 2rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    border: 1px solid #dee2e6;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.form-actions-container[b-03wz4ivfx5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

/* Primary Save Button */
.primary-action[b-03wz4ivfx5] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.primary-save-btn[b-03wz4ivfx5] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    min-width: 200px;
    position: relative;
    overflow: hidden;
}

    .primary-save-btn:hover:not(:disabled)[b-03wz4ivfx5] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
    }

    .primary-save-btn:disabled[b-03wz4ivfx5] {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }

    .primary-save-btn .btn-content[b-03wz4ivfx5],
    .primary-save-btn .btn-loading[b-03wz4ivfx5] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .primary-save-btn i[b-03wz4ivfx5] {
        font-size: 1rem;
    }

/* Secondary Add Button */
.secondary-action[b-03wz4ivfx5] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.secondary-add-btn[b-03wz4ivfx5] {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(108, 117, 125, 0.2);
    min-width: 200px;
}

    .secondary-add-btn:hover[b-03wz4ivfx5] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(108, 117, 125, 0.3);
        background: linear-gradient(135deg, #5a6268 0%, #343a40 100%);
    }

    .secondary-add-btn .btn-content[b-03wz4ivfx5] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .secondary-add-btn i[b-03wz4ivfx5] {
        font-size: 1rem;
    }

/* Action Hints */
.action-hint[b-03wz4ivfx5] {
    margin-top: 0.5rem;
    color: #6c757d;
    font-size: 0.875rem;
    font-style: italic;
    line-height: 1.4;
}

/* Validation Notice */
.validation-notice[b-03wz4ivfx5] {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    padding: 1rem;
}

.notice-content[b-03wz4ivfx5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #856404;
    font-size: 0.9rem;
}

    .notice-content i[b-03wz4ivfx5] {
        color: #f39c12;
        font-size: 1rem;
    }

/* Modal Button Styles */
.modal-save-btn[b-03wz4ivfx5] {
    min-width: 140px;
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
}

.secondary-cancel-btn[b-03wz4ivfx5] {
    background: #6c757d;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .secondary-cancel-btn:hover[b-03wz4ivfx5] {
        background: #5a6268;
        transform: translateY(-1px);
    }

/* Responsive Design */
@@media (max-width: 768px) {
    .form-actions-container[b-03wz4ivfx5] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .form-actions-section[b-03wz4ivfx5] {
        padding: 1.5rem;
        margin-top: 2rem;
    }

    .primary-save-btn[b-03wz4ivfx5],
    .secondary-add-btn[b-03wz4ivfx5] {
        width: 100%;
        min-width: unset;
        text-align: center;
        justify-content: center;
    }

    .primary-action[b-03wz4ivfx5],
    .secondary-action[b-03wz4ivfx5] {
        align-items: stretch;
    }

    .action-hint[b-03wz4ivfx5] {
        text-align: center;
    }
}

/* Loading Animation */
@@keyframes pulse {
    0%[b-03wz4ivfx5] {
        opacity: 1;
    }

    50%[b-03wz4ivfx5] {
        opacity: 0.5;
    }

    100%[b-03wz4ivfx5] {
        opacity: 1;
    }
}

.btn-loading[b-03wz4ivfx5] {
    animation: pulse 1.5s ease-in-out infinite;
}

/* Modal Overlay - backdrop behind the modal */
.modal-overlay[b-03wz4ivfx5] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    cursor: pointer;
}

/* Modal Container - contains the actual modal */
.modal-container[b-03wz4ivfx5] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    padding: 1rem;
}

/* Modal Dialog */
.modal-dialog[b-03wz4ivfx5] {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: auto;
    pointer-events: auto;
    animation: modalFadeIn 0.3s ease-out;
}

/* Modal Content */
.modal-content[b-03wz4ivfx5] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    outline: 0;
    max-height: 90vh;
    overflow: hidden;
}

/* Modal Header */
.modal-header[b-03wz4ivfx5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    background-color: #f8f9fa;
}

.modal-title[b-03wz4ivfx5] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
    color: #212529;
}

/* Modal Close Button */
.modal-close-btn[b-03wz4ivfx5] {
    background: none;
    border: none;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    opacity: 0.5;
    cursor: pointer;
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    transition: opacity 0.15s ease-in-out;
}

    .modal-close-btn:hover[b-03wz4ivfx5] {
        opacity: 0.75;
        background-color: #f8f9fa;
    }

/* Modal Body */
.modal-body[b-03wz4ivfx5] {
    position: relative;
    flex: 1 1 auto;
    padding: 1.5rem;
    overflow-y: auto;
    max-height: calc(90vh - 120px);
}

/* Modal Footer */
.modal-footer[b-03wz4ivfx5] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 1rem 1.5rem;
    border-top: 1px solid #dee2e6;
    border-bottom-right-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    background-color: #f8f9fa;
    gap: 0.5rem;
}

/* Animation for modal appearance */
@@keyframes modalFadeIn {
    from[b-03wz4ivfx5] {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }

    to[b-03wz4ivfx5] {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive adjustments */
@@media (max-width: 768px) {
    .modal-container[b-03wz4ivfx5] {
        padding: 0.5rem;
    }

    .modal-dialog[b-03wz4ivfx5] {
        max-width: 100%;
    }

    .modal-content[b-03wz4ivfx5] {
        max-height: 95vh;
    }

    .modal-body[b-03wz4ivfx5] {
        max-height: calc(95vh - 120px);
        padding: 1rem;
    }

    .modal-header[b-03wz4ivfx5],
    .modal-footer[b-03wz4ivfx5] {
        padding: 1rem;
    }
}

/* Ensure proper scrolling for form content */
.modal-body .default-form[b-03wz4ivfx5] {
    width: 100%;
}

.modal-body .form-group[b-03wz4ivfx5] {
    margin-bottom: 1rem;
}

.modal-body .row[b-03wz4ivfx5] {
    margin: 0;
}

.modal-body .col-lg-12[b-03wz4ivfx5],
.modal-body .col-lg-6[b-03wz4ivfx5],
.modal-body .col-md-12[b-03wz4ivfx5] {
    padding-left: 0;
    padding-right: 0;
}
/* /Components/Pages/Worker/KeyRequirements.razor.rz.scp.css */
.requirements-container[b-0ffs0v0jry] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.alert-warning[b-0ffs0v0jry] {
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}

    .alert-warning .alert-title[b-0ffs0v0jry] {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 15px;
        color: #d63384;
    }

.requirements-list[b-0ffs0v0jry] {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 30px;
    margin-bottom: 30px;
}

.requirement-item[b-0ffs0v0jry] {
    border-left: 4px solid #28a745;
    background: #f8f9fa;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 0 8px 8px 0;
    transition: all 0.3s ease;
}

    .requirement-item:hover[b-0ffs0v0jry] {
        background: #e9ecef;
        transform: translateX(5px);
    }

.requirement-number[b-0ffs0v0jry] {
    background: #28a745;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    margin-right: 15px;
}

.requirement-content[b-0ffs0v0jry] {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 45px);
}

.requirement-title[b-0ffs0v0jry] {
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 8px;
    font-size: 16px;
}

.requirement-text[b-0ffs0v0jry] {
    color: #495057;
    line-height: 1.6;
    margin: 0;
}

.important-note[b-0ffs0v0jry] {
    background: #d1ecf1;
    border: 1px solid #bee5eb;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
}

    .important-note strong[b-0ffs0v0jry] {
        color: #0c5460;
    }

.confirmation-section[b-0ffs0v0jry] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    margin-top: 30px;
}

.confirmation-title[b-0ffs0v0jry] {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
}

.confirmation-text[b-0ffs0v0jry] {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.btn-container[b-0ffs0v0jry] {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.btn-confirm[b-0ffs0v0jry] {
    background: #28a745;
    color: white;
    border: none;
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

    .btn-confirm:hover[b-0ffs0v0jry] {
        background: #218838;
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(0,0,0,0.2);
        color: white;
        text-decoration: none;
    }

.btn-decline[b-0ffs0v0jry] {
    background: #dc3545;
    color: white;
    border: none;
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

    .btn-decline:hover[b-0ffs0v0jry] {
        background: #c82333;
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(0,0,0,0.2);
        color: white;
        text-decoration: none;
    }

.checkmark[b-0ffs0v0jry] {
    color: #28a745;
    font-size: 18px;
    margin-right: 8px;
}

@media (max-width: 768px) {
    .requirements-container[b-0ffs0v0jry] {
        padding: 15px;
    }

    .requirement-item[b-0ffs0v0jry] {
        padding: 15px;
    }

    .btn-container[b-0ffs0v0jry] {
        flex-direction: column;
        align-items: center;
    }

    .btn-confirm[b-0ffs0v0jry], .btn-decline[b-0ffs0v0jry] {
        width: 200px;
    }
}
/* /Components/Pages/Worker/Messages.razor.rz.scp.css */
/* Custom Messaging Styles */
.chat-widget .message-card[b-719x3jt5e5] {
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.msg_card_body[b-719x3jt5e5] {
    max-height: 500px;
    overflow-y: auto;
    padding: 20px;
    background: #f8f9fa;
}

.msg_cotainer[b-719x3jt5e5] {
    background: #ffffff;
    border-radius: 15px;
    padding: 10px 15px;
    margin: 5px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    max-width: 70%;
    word-wrap: break-word;
    position: relative;
}

.reply .msg_cotainer[b-719x3jt5e5] {
    background: #007bff;
    color: white;
}

.img_cont[b-719x3jt5e5],
.img_cont_msg[b-719x3jt5e5] {
    position: relative;
    margin: 0 10px;
}

.user_img[b-719x3jt5e5],
.user_img_msg[b-719x3jt5e5] {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.user_img_msg[b-719x3jt5e5] {
    width: 40px;
    height: 40px;
}

/* Online indicator */
.online-indicator[b-719x3jt5e5] {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: #28a745;
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.name[b-719x3jt5e5] {
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
}

.msg_time[b-719x3jt5e5] {
    font-size: 10px;
    color: #999;
    margin-top: 5px;
}

.msg_time_send[b-719x3jt5e5] {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.8);
    text-align: right;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

.type_msg[b-719x3jt5e5] {
    border: 1px solid #e0e0e0;
    border-radius: 25px;
    padding: 12px 20px;
    resize: none;
    min-height: 45px;
    max-height: 120px;
    transition: border-color 0.3s;
}

    .type_msg:focus[b-719x3jt5e5] {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

.submit-btn[b-719x3jt5e5] {
    border-radius: 50%;
    width: 45px;
    height: 45px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: #007bff;
    color: white;
    transition: background-color 0.3s;
}

    .submit-btn:hover:not(:disabled)[b-719x3jt5e5] {
        background: #0056b3;
    }

    .submit-btn:disabled[b-719x3jt5e5] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.contacts li.active[b-719x3jt5e5] {
    background: #e3f2fd;
    border-left: 3px solid #007bff;
}

.contacts li:hover[b-719x3jt5e5] {
    background: #f5f5f5;
    cursor: pointer;
    transition: background-color 0.2s;
}

.contacts li a[b-719x3jt5e5] {
    text-decoration: none;
    color: inherit;
    padding: 15px;
    display: block;
}

.user_info span[b-719x3jt5e5] {
    font-weight: 500;
    color: #333;
}

.user_info p[b-719x3jt5e5] {
    margin: 0;
    font-size: 13px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.count[b-719x3jt5e5] {
    background: #dc3545;
    color: white;
    border-radius: 50%;
    padding: 3px 7px;
    font-size: 11px;
    margin-left: 5px;
    min-width: 20px;
    text-align: center;
    font-weight: 500;
}

    .count.bg-success[b-719x3jt5e5] {
        background: #28a745 !important;
    }

    .count.bg-warning[b-719x3jt5e5] {
        background: #ffc107 !important;
        color: #212529;
    }

.search-box-one[b-719x3jt5e5] {
    position: relative;
}

    .search-box-one input[b-719x3jt5e5] {
        border-radius: 25px;
        padding: 10px 15px 10px 40px;
        border: 1px solid #e0e0e0;
        width: 100%;
    }

    .search-box-one .icon[b-719x3jt5e5] {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #999;
        z-index: 2;
    }

.spinner-border-sm[b-719x3jt5e5] {
    width: 1rem;
    height: 1rem;
}

/* Header styles */
.msg_head[b-719x3jt5e5] {
    background: white;
    border-bottom: 1px solid #e0e0e0;
    padding: 15px 20px;
}

.btn-box[b-719x3jt5e5] {
    display: flex;
    gap: 8px;
}

    .btn-box button[b-719x3jt5e5] {
        border-radius: 20px;
        padding: 6px 12px;
        font-size: 12px;
        border: 1px solid #e0e0e0;
        background: white;
        color: #666;
        transition: all 0.3s;
    }

        .btn-box button:hover[b-719x3jt5e5] {
            background: #f8f9fa;
            color: #333;
        }

.dlt-chat:hover[b-719x3jt5e5] {
    background: #dc3545 !important;
    color: white !important;
    border-color: #dc3545 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .contacts_column[b-719x3jt5e5] {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1050;
        background: white;
    }

        .contacts_column.show[b-719x3jt5e5] {
            display: block;
        }

    .msg_cotainer[b-719x3jt5e5] {
        max-width: 85%;
    }

    .toggle-contact[b-719x3jt5e5] {
        display: flex !important;
    }

    .user_info p[b-719x3jt5e5] {
        max-width: 120px;
    }
}

@media (min-width: 769px) {
    .toggle-contact[b-719x3jt5e5] {
        display: none !important;
    }
}

/* Loading states */
.loading-overlay[b-719x3jt5e5] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* Scroll to bottom animation */
.msg_card_body[b-719x3jt5e5] {
    scroll-behavior: smooth;
}

    /* Custom scrollbar */
    .msg_card_body[b-719x3jt5e5]::-webkit-scrollbar {
        width: 6px;
    }

    .msg_card_body[b-719x3jt5e5]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    .msg_card_body[b-719x3jt5e5]::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 10px;
    }

        .msg_card_body[b-719x3jt5e5]::-webkit-scrollbar-thumb:hover {
            background: #a1a1a1;
        }

/* Contact list scrollbar */
.contacts_body[b-719x3jt5e5]::-webkit-scrollbar {
    width: 4px;
}

.contacts_body[b-719x3jt5e5]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.contacts_body[b-719x3jt5e5]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

/* Animation for new messages */
@keyframes slideInLeft-b-719x3jt5e5 {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight-b-719x3jt5e5 {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.msg_cotainer[b-719x3jt5e5] {
    animation: slideInLeft-b-719x3jt5e5 0.3s ease-out;
}

.reply .msg_cotainer[b-719x3jt5e5] {
    animation: slideInRight-b-719x3jt5e5 0.3s ease-out;
}

/* Empty state styling */
.text-center i.fa-comments[b-719x3jt5e5],
.text-center i.fa-inbox[b-719x3jt5e5] {
    opacity: 0.3;
}

/* Status indicators */
.fa-check[b-719x3jt5e5],
.fa-check-double[b-719x3jt5e5] {
    font-size: 9px;
}

    .fa-check-double.text-primary[b-719x3jt5e5] {
        color: #007bff !important;
    }
/* /Components/Pages/Worker/PayVerificationFee.razor.rz.scp.css */
.verification-hero[b-n0l6b6w6ku] {
    background: linear-gradient(135deg, #0B0198 0%, #388CF3 100%);
    color: white;
    padding: 60px 0;
    text-align: center;
}

    .verification-hero h1[b-n0l6b6w6ku] {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .verification-hero p[b-n0l6b6w6ku] {
        font-size: 1.2rem;
        opacity: 0.9;
        max-width: 600px;
        margin: 0 auto;
    }

.progress-section[b-n0l6b6w6ku] {
    background: #f8f9fa;
    padding: 40px 0;
}

.step-progress[b-n0l6b6w6ku] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
}

.step[b-n0l6b6w6ku] {
    display: flex;
    align-items: center;
    position: relative;
}

.step-circle[b-n0l6b6w6ku] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #0B0198;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 15px;
}

    .step-circle.completed[b-n0l6b6w6ku] {
        background: #28a745;
    }

    .step-circle.current[b-n0l6b6w6ku] {
        background: #388CF3;
        box-shadow: 0 0 0 4px rgba(56, 140, 243, 0.2);
    }

.step-text[b-n0l6b6w6ku] {
    font-weight: 600;
    color: #333;
}

.step:not(:last-child)[b-n0l6b6w6ku]::after {
    content: '';
    width: 100px;
    height: 2px;
    background: #ddd;
    position: absolute;
    left: calc(100% + 15px);
    top: 50%;
    transform: translateY(-50%);
}

.fee-card[b-n0l6b6w6ku] {
    background: white;
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    border-left: 5px solid #0B0198;
}

    .fee-card.mandatory[b-n0l6b6w6ku] {
        border-left-color: #dc3545;
    }

    .fee-card.optional[b-n0l6b6w6ku] {
        border-left-color: #28a745;
    }

.fee-header[b-n0l6b6w6ku] {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.fee-icon[b-n0l6b6w6ku] {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    font-size: 24px;
    color: white;
}

    .fee-icon.mandatory[b-n0l6b6w6ku] {
        background: #dc3545;
    }

    .fee-icon.optional[b-n0l6b6w6ku] {
        background: #28a745;
    }

.fee-title[b-n0l6b6w6ku] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin: 0;
}

.fee-amount[b-n0l6b6w6ku] {
    font-size: 1.8rem;
    font-weight: 800;
    color: #0B0198;
    margin-top: 5px;
}

.fee-description[b-n0l6b6w6ku] {
    font-size: 1rem;
    line-height: 1.6;
    color: #666;
    margin-bottom: 20px;
}

.payment-info[b-n0l6b6w6ku] {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 25px;
    margin: 30px 0;
}

.payment-header[b-n0l6b6w6ku] {
    background: #0B0198;
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 700;
}

.bank-details[b-n0l6b6w6ku] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.bank-detail[b-n0l6b6w6ku] {
    background: white;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.bank-detail-label[b-n0l6b6w6ku] {
    font-size: 0.9rem;
    color: #666;
    font-weight: 600;
    margin-bottom: 5px;
}

.bank-detail-value[b-n0l6b6w6ku] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
}

.benefits-grid[b-n0l6b6w6ku] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.benefit-item[b-n0l6b6w6ku] {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.1);
    text-align: center;
}

.benefit-icon[b-n0l6b6w6ku] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0B0198, #388CF3);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 20px;
}

.benefit-title[b-n0l6b6w6ku] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}

.benefit-text[b-n0l6b6w6ku] {
    color: #666;
    line-height: 1.6;
}

.action-buttons[b-n0l6b6w6ku] {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin: 40px 0;
}

.btn-primary[b-n0l6b6w6ku] {
    background: linear-gradient(135deg, #0B0198, #388CF3);
    border: none;
    padding: 15px 30px;
    border-radius: 50px;
    color: white;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

    .btn-primary:hover[b-n0l6b6w6ku] {
        transform: translateY(-2px);
        box-shadow: 0 5px 20px rgba(11, 1, 152, 0.3);
        color: white;
        text-decoration: none;
    }

.btn-whatsapp[b-n0l6b6w6ku] {
    background: #25D366;
    border: none;
    padding: 15px 30px;
    border-radius: 50px;
    color: white;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

    .btn-whatsapp:hover[b-n0l6b6w6ku] {
        background: #128C7E;
        transform: translateY(-2px);
        box-shadow: 0 5px 20px rgba(37, 211, 102, 0.3);
        color: white;
        text-decoration: none;
    }

.alert-warning[b-n0l6b6w6ku] {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
    padding: 20px;
    border-radius: 12px;
    margin: 20px 0;
}

.alert-info[b-n0l6b6w6ku] {
    background: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
    padding: 20px;
    border-radius: 12px;
    margin: 20px 0;
}

.test-list[b-n0l6b6w6ku] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin: 20px 0;
}

.test-item[b-n0l6b6w6ku] {
    background: #f8f9fa;
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 4px solid #28a745;
    font-weight: 600;
}

@media (max-width: 768px) {
    .verification-hero h1[b-n0l6b6w6ku] {
        font-size: 2rem;
    }

    .step-progress[b-n0l6b6w6ku] {
        flex-direction: column;
        gap: 20px;
    }

    .step:not(:last-child)[b-n0l6b6w6ku]::after {
        display: none;
    }

    .bank-details[b-n0l6b6w6ku] {
        grid-template-columns: 1fr;
    }

    .benefits-grid[b-n0l6b6w6ku] {
        grid-template-columns: 1fr;
    }

    .action-buttons[b-n0l6b6w6ku] {
        flex-direction: column;
        align-items: center;
    }
}
/* /Components/Pages/Worker/Profile.razor.rz.scp.css */
/* Modal Styles */
.modal-overlay[b-2l8fwj0xdl] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    cursor: pointer;
}

.modal-container[b-2l8fwj0xdl] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    padding: 1rem;
}

.modal-dialog[b-2l8fwj0xdl] {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: auto;
    pointer-events: auto;
    animation: modalFadeIn-b-2l8fwj0xdl 0.3s ease-out;
}

.modal-content[b-2l8fwj0xdl] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    outline: 0;
}

.modal-header[b-2l8fwj0xdl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    background: linear-gradient(135deg, #0b0198 0%, #1a16b8 100%);
    color: white;
}

.modal-title[b-2l8fwj0xdl] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.modal-close-btn[b-2l8fwj0xdl] {
    background: none;
    border: none;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: white;
    opacity: 0.8;
    cursor: pointer;
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    transition: opacity 0.15s ease-in-out;
}

    .modal-close-btn:hover[b-2l8fwj0xdl] {
        opacity: 1;
        background-color: rgba(255, 255, 255, 0.1);
    }

.modal-body[b-2l8fwj0xdl] {
    position: relative;
    flex: 1 1 auto;
    padding: 2rem 1.5rem;
}

.modal-footer[b-2l8fwj0xdl] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem;
    border-top: 1px solid #dee2e6;
    border-bottom-right-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    background-color: #f8f9fa;
}

/* Submission Success Styles */
.submission-success[b-2l8fwj0xdl] {
    text-align: center;
    padding: 1rem 0;
}

.success-icon[b-2l8fwj0xdl] {
    margin-bottom: 1rem;
}

    .success-icon i[b-2l8fwj0xdl] {
        font-size: 4rem;
        color: #28a745;
        animation: successPulse-b-2l8fwj0xdl 1s ease-in-out;
    }

.success-message h6[b-2l8fwj0xdl] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #28a745;
    margin-bottom: 0.5rem;
}

.success-message p[b-2l8fwj0xdl] {
    color: #6c757d;
    line-height: 1.6;
    margin: 0;
}

/* Button Styles */
.btn[b-2l8fwj0xdl] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    transition: all 0.15s ease-in-out;
    text-decoration: none;
}

.btn-primary[b-2l8fwj0xdl] {
    background: linear-gradient(135deg, #0b0198 0%, #1a16b8 100%);
    color: white;
    border-color: #0b0198;
}

    .btn-primary:hover[b-2l8fwj0xdl] {
        background: linear-gradient(135deg, #090085 0%, #1614a5 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(11, 1, 152, 0.3);
    }

/* Animations */
@keyframes modalFadeIn-b-2l8fwj0xdl {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes successPulse-b-2l8fwj0xdl {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Submit Button Enhancement */
.theme-btn[b-2l8fwj0xdl] {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

    .theme-btn:disabled[b-2l8fwj0xdl] {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }

    .theme-btn:not(:disabled):hover[b-2l8fwj0xdl] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }

/* Responsive Design */
@media (max-width: 768px) {
    .modal-container[b-2l8fwj0xdl] {
        padding: 0.5rem;
    }

    .modal-dialog[b-2l8fwj0xdl] {
        max-width: 100%;
    }

    .modal-body[b-2l8fwj0xdl] {
        padding: 1.5rem 1rem;
    }

    .success-icon i[b-2l8fwj0xdl] {
        font-size: 3rem;
    }

    .modal-header[b-2l8fwj0xdl],
    .modal-footer[b-2l8fwj0xdl] {
        padding: 1rem;
    }
}

/* Form Enhancement */
.form-group label[b-2l8fwj0xdl] {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
}

.e-input-group input[readonly][b-2l8fwj0xdl] {
    background-color: #f8f9fa !important;
    border-color: #e9ecef !important;
    color: #6c757d !important;
}

.ls-widget[b-2l8fwj0xdl] {
    margin-bottom: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    overflow: hidden;
}

.widget-title[b-2l8fwj0xdl] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
}

    .widget-title h4[b-2l8fwj0xdl] {
        color: #0b0198;
        font-weight: 600;
    }



.professional-profile-header[b-2l8fwj0xdl] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    padding: 0;
    margin-bottom: 30px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.1);
}

.profile-header-content[b-2l8fwj0xdl] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 30px;
    border-radius: 0 0 20px 20px;
}

.profile-actions-grid[b-2l8fwj0xdl] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 25px;
    margin: 0;
}

.profile-action-card[b-2l8fwj0xdl] {
    background: #ffffff;
    border-radius: 16px;
    padding: 25px 20px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(102, 126, 234, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .profile-action-card[b-2l8fwj0xdl]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #667eea, #764ba2);
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }

    .profile-action-card:hover[b-2l8fwj0xdl] {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(102, 126, 234, 0.12);
    }

        .profile-action-card:hover[b-2l8fwj0xdl]::before {
            transform: scaleX(1);
        }

.action-card-header[b-2l8fwj0xdl] {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.action-card-icon[b-2l8fwj0xdl] {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 20px;
    color: #ffffff;
}

.profile-icon[b-2l8fwj0xdl] {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.guarantor-icon[b-2l8fwj0xdl] {
    background: linear-gradient(135deg, #f093fb, #f5576c);
}

.status-icon[b-2l8fwj0xdl] {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.action-card-title[b-2l8fwj0xdl] {
    font-size: 16px;
    font-weight: 600;
    color: #2d3436;
    margin: 0;
    line-height: 1.3;
}

.action-card-subtitle[b-2l8fwj0xdl] {
    font-size: 13px;
    color: #636e72;
    margin: 5px 0 0 0;
    line-height: 1.4;
}

/* Compact Input Styles */
.compact-input-group[b-2l8fwj0xdl] {
    position: relative;
    margin-bottom: 15px;
}

.input-with-button[b-2l8fwj0xdl] {
    display: flex;
    position: relative;
}

.compact-input[b-2l8fwj0xdl] {
    flex: 1;
    padding: 12px 50px 12px 16px;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    font-size: 14px;
    background: #f8f9fa;
    transition: all 0.3s ease;
    font-family: 'Courier New', monospace;
    color: #495057;
}

    .compact-input:focus[b-2l8fwj0xdl] {
        outline: none;
        border-color: #0b0198;
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(11, 1, 152, 0.1);
    }

.compact-copy-btn[b-2l8fwj0xdl] {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
}

.compact-copy-btn.theme-primary[b-2l8fwj0xdl] {
    background: linear-gradient(135deg, #0b0198, #1a16b8);
    color: white;
}

    .compact-copy-btn.theme-primary:hover[b-2l8fwj0xdl] {
        background: linear-gradient(135deg, #090085, #1614a5);
        transform: translateY(-50%) scale(1.1);
        box-shadow: 0 4px 12px rgba(11, 1, 152, 0.3);
    }

.compact-copy-btn.theme-secondary[b-2l8fwj0xdl] {
    background: linear-gradient(135deg, #6c757d, #495057);
    color: white;
}

    .compact-copy-btn.theme-secondary:hover[b-2l8fwj0xdl] {
        background: linear-gradient(135deg, #5a6268, #343a40);
        transform: translateY(-50%) scale(1.1);
        box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
    }

.compact-copy-btn:disabled[b-2l8fwj0xdl] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: translateY(-50%) !important;
}

.copy-feedback[b-2l8fwj0xdl] {
    position: absolute;
    top: -30px;
    right: 0;
    background: #28a745;
    color: white;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 10;
}

    .copy-feedback.show[b-2l8fwj0xdl] {
        opacity: 1;
        transform: translateY(0);
    }

/* Status Input Group */
.status-input-group[b-2l8fwj0xdl] {
    margin-bottom: 15px;
}

.theme-select[b-2l8fwj0xdl] {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    font-size: 14px;
    background: #f8f9fa;
    transition: all 0.3s ease;
    cursor: pointer;
    color: #495057;
}

    .theme-select:focus[b-2l8fwj0xdl] {
        outline: none;
        border-color: #0b0198;
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(11, 1, 152, 0.1);
    }

/* Status Indicator */
.status-indicator[b-2l8fwj0xdl] {
    margin-bottom: 15px;
}

.status-badge[b-2l8fwj0xdl] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    color: #0b0198;
    border: 1px solid rgba(11, 1, 152, 0.2);
}

.status-dot[b-2l8fwj0xdl] {
    color: #28a745;
    font-size: 8px;
}

/* Action Button Group */
.action-button-group[b-2l8fwj0xdl] {
    display: flex;
    justify-content: center;
}

.theme-btn.compact[b-2l8fwj0xdl] {
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 10px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    min-height: 40px;
}

.theme-btn.theme-primary[b-2l8fwj0xdl] {
    background: linear-gradient(135deg, #0b0198, #1a16b8);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(11, 1, 152, 0.3);
}

    .theme-btn.theme-primary:hover[b-2l8fwj0xdl] {
        background: linear-gradient(135deg, #090085, #1614a5);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(11, 1, 152, 0.4);
    }

.theme-btn.theme-success[b-2l8fwj0xdl] {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

    .theme-btn.theme-success:hover[b-2l8fwj0xdl] {
        background: linear-gradient(135deg, #218838, #1e7e34);
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
    }

/* Loading Animation */
.loading-spinner[b-2l8fwj0xdl] {
    animation: spin-b-2l8fwj0xdl 1s linear infinite;
}

@keyframes spin-b-2l8fwj0xdl {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .profile-actions-grid[b-2l8fwj0xdl] {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .action-card-title[b-2l8fwj0xdl] {
        font-size: 14px;
    }

    .compact-input[b-2l8fwj0xdl] {
        padding: 10px 45px 10px 14px;
        font-size: 13px;
    }

    .compact-copy-btn[b-2l8fwj0xdl] {
        width: 32px;
        height: 32px;
        right: 5px;
    }

    .theme-btn.compact[b-2l8fwj0xdl] {
        width: 100%;
        justify-content: center;
        font-size: 13px;
        padding: 8px 16px;
    }
}
/* /Components/Pages/Worker/WorkerCertification.razor.rz.scp.css */
.training-portal[b-5vldypcjsl] {
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
    min-height: 100vh;
    padding: 40px 0;
}

.portal-header[b-5vldypcjsl] {
    text-align: center;
    margin-bottom: 50px;
}

.portal-header h1[b-5vldypcjsl] {
    color: #22218c;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.portal-header p[b-5vldypcjsl] {
    color: #6c757d;
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
}

/* Training Code Card Styles */
.training-code-card[b-5vldypcjsl] {
    background: linear-gradient(135deg, #22218c 0%, #3d3bbd 100%);
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: 0 10px 30px rgba(34, 33, 140, 0.3);
    color: white;
}

.code-header[b-5vldypcjsl] {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.code-icon[b-5vldypcjsl] {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
}

.code-info h3[b-5vldypcjsl] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 5px 0;
}

.code-info p[b-5vldypcjsl] {
    font-size: 0.95rem;
    margin: 0;
    opacity: 0.9;
}

.code-display[b-5vldypcjsl] {
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    backdrop-filter: blur(10px);
}

/* Training Code Input Styles */
.training-code-input[b-5vldypcjsl] {
    width: 100%;
}

.code-input-group[b-5vldypcjsl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.code-segment[b-5vldypcjsl] {
    width: 80px;
    height: 70px;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.9);
    color: #22218c;
    letter-spacing: 2px;
}

.code-segment:focus[b-5vldypcjsl] {
    outline: none;
    border-color: white;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2);
    background: white;
}

.code-segment[b-5vldypcjsl]::placeholder {
    color: rgba(34, 33, 140, 0.3);
    font-weight: 400;
}

.code-separator[b-5vldypcjsl] {
    font-size: 32px;
    font-weight: 700;
    color: white;
    margin: 0 5px;
}

.copy-btn[b-5vldypcjsl] {
    background: white;
    color: #22218c;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.copy-btn:hover[b-5vldypcjsl] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.copy-btn:active[b-5vldypcjsl] {
    transform: translateY(0);
}

.copy-icon[b-5vldypcjsl] {
    font-size: 1.2rem;
}

.copy-text[b-5vldypcjsl] {
    font-size: 0.95rem;
}

/* Info Section Styles */
.info-section[b-5vldypcjsl] {
    background: white;
    border-radius: 16px;
    padding: 40px;
    margin-bottom: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.info-section h2[b-5vldypcjsl] {
    color: #22218c;
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.info-section h2[b-5vldypcjsl]::before {
    content: '';
    width: 4px;
    height: 28px;
    background: linear-gradient(135deg, #22218c 0%, #3d3bbd 100%);
    border-radius: 2px;
}

.feature-list[b-5vldypcjsl] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li[b-5vldypcjsl] {
    padding: 15px 0;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    color: #4a5568;
    font-size: 1rem;
    line-height: 1.6;
    border-bottom: 1px solid #f0f0f0;
}

.feature-list li:last-child[b-5vldypcjsl] {
    border-bottom: none;
}

.feature-list li[b-5vldypcjsl]::before {
    content: '?';
    background: linear-gradient(135deg, #22218c 0%, #3d3bbd 100%);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    font-size: 14px;
}

/* Topics Grid Styles */
.topics-grid[b-5vldypcjsl] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.topic-item[b-5vldypcjsl] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 15px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #2d3748;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.topic-item:hover[b-5vldypcjsl] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #22218c;
}

.topic-icon[b-5vldypcjsl] {
    font-size: 1.5rem;
    flex-shrink: 0;
    line-height: 1;
    display: inline-block;
}

/* Action Grid Styles */
.action-grid[b-5vldypcjsl] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 40px;
}

.action-card[b-5vldypcjsl] {
    background: white;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 2px solid transparent;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.action-card:hover[b-5vldypcjsl] {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    border-color: #22218c;
}

.action-icon[b-5vldypcjsl] {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22218c 0%, #3d3bbd 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    box-shadow: 0 4px 15px rgba(34, 33, 140, 0.3);
}

.action-card h3[b-5vldypcjsl] {
    color: #22218c;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.action-card p[b-5vldypcjsl] {
    color: #6c757d;
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

.action-btn[b-5vldypcjsl] {
    background: linear-gradient(135deg, #22218c 0%, #3d3bbd 100%);
    color: white;
    padding: 14px 32px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(34, 33, 140, 0.3);
    width: 100%;
}

.action-btn:hover[b-5vldypcjsl] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 33, 140, 0.4);
    color: white;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .portal-header h1[b-5vldypcjsl] {
        font-size: 2rem;
    }

    .info-section[b-5vldypcjsl] {
        padding: 25px;
    }

    .topics-grid[b-5vldypcjsl] {
        grid-template-columns: 1fr;
    }

    .action-grid[b-5vldypcjsl] {
        grid-template-columns: 1fr;
    }

    .training-code-card[b-5vldypcjsl] {
        padding: 20px;
    }

    .code-header[b-5vldypcjsl] {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .code-display[b-5vldypcjsl] {
        gap: 15px;
    }

    .code-segment[b-5vldypcjsl] {
        width: 60px;
        height: 60px;
        font-size: 22px;
    }

    .code-separator[b-5vldypcjsl] {
        font-size: 24px;
    }

    .copy-btn[b-5vldypcjsl] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .code-input-group[b-5vldypcjsl] {
        gap: 8px;
    }

    .code-segment[b-5vldypcjsl] {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .code-separator[b-5vldypcjsl] {
        font-size: 20px;
        margin: 0 2px;
    }
}