   body {
      font-family: Arial, sans-serif;
      background-color: #f8f9fa;
      color: #333;
    }
    .container {
      margin: 0 auto;
    }
    .containerr {
      max-width: 950px;
      margin: 0 auto;
      padding: 20px;
      background-color: white;
      border: 3px solid #333;
      position: relative;
    }
    .header-section {
      text-align: center;
      margin-bottom: 10px;
      /* border-bottom: 2px solid #333; */
      padding-bottom: 10px;
    }
    .header-section h2 {
      font-weight: bold;
    }
    .school-logo {
      width: 80px;
      height: 80px;
      margin-top: -15px;
      border: 1px solid #333;
    }
    .school-logo img {
      width: 100%;
      height: auto;
    }
    .info-section {
      font-size: 0.9rem;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .grading-table {
      width: 180px;
      top: 0px;
      right: 20px;
      border: 1px solid #111;
      font-size: 0.85rem;
      margin-top: -10px;
      justify-content: end;
      align-self: end;
    }
    .grading-table th, .grading-table td {
      border: 1px solid #333;
      padding: 5px;
      text-align: center;
    }
    .result-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
      font-size: 0.85rem;
    }
    .result-table th, .result-table td {
      border: 1px solid #333;
      padding: 5px;
      text-align: center;
    }
    .highlight {
      background-color: #cde1f9;
    }
    .evaluation-section {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
    }
    .evaluation-table {
      width: 88%;
      border-collapse: collapse;
      font-size: 0.85rem;
    }
    .evaluation-table th, .evaluation-table td {
      border: 1px solid #333;
      padding: 5px;
      text-align: center;
    }
    .qr-code {
      width: 100px;
      height: 100px;
      background-color: #ddd;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      margin: 0 auto;
      border: 1px solid #333;
    }
    .footer-section {
      text-align: center;
      margin-top: 20px;
      font-size: 0.9rem;
      color: #555;
      border-top: 2px solid #333;
      padding-top: 10px;
    }
    #containerdiv {
        height: 125vh !important;
        position: relative; /* Set position relative to enable absolute positioning of children */
        border: 3px solid #E683EA;
    }

      /* Adding a pseudo-element for the watermark */
      #containerdiv::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('images/<?= htmlspecialchars($settings['watermark']) ?>');
        background-size: 50%;
        background-position: center center;
        background-repeat: no-repeat;
        opacity: 0.1; /* Set opacity to a low value for a subtle watermark effect */
        z-index: 1;
    }

    .signature-section {
        position: absolute; /* Position this section absolutely */
        bottom: 20px; /* 20px from the bottom of the container */
        left: 20px; /* Align to the left */
        right: 20px; /* Align to the right */
        text-align: center; /* Center align text */
        /* You can add more styles if needed */
    }

    #text-center{
        text-align: center;
        align-items: center;
    }

    #text-right{
        text-align: right;
        align-items: end;
    }
    .fixed-row {
    display: flex;              /* Use flexbox for horizontal alignment */
    justify-content: space-between; /* Space items evenly */
    align-items: center;       /* Center items vertically */
    width: 100%;          
}

.fixed-col {
    flex: 0 0 auto;           /* Prevent columns from growing or shrinking */
    width: 28%;                /* Fixed width for each column */
}
.fixed-col-5{
  flex: 0 0 auto;           /* Prevent columns from growing or shrinking */
  width: 53%;  
}
.fixed-col-3{
  flex: 0 0 auto;           /* Prevent columns from growing or shrinking */
  width: 18%;  
}
.fixed-col img {
    max-width: 100%;          /* Make sure images don't exceed their container */
    height: auto;             /* Maintain aspect ratio */
}

.center {
    text-align: center;       /* Center the logo image */
}

/* Adjusting table styles */
.grading-table {
    width: 100%;              /* Table takes full width of the column */
    border-collapse: collapse; /* Collapse borders for better presentation */
}

.grading-table th, .grading-table td {
    border: 1px solid #333;   /* Border for table cells */
    padding: 8px;             /* Padding for table cells */
    text-align: center;       /* Center text in table cells */
}

.highlight {
    background-color: #cde1f9; /* Highlight for header row */
}
th, td, span, strong, p, b{
  font-size: 10px;
}








function printDiv(divId) {
    const printContents = document.getElementById(divId).innerHTML;
    const printWindow = window.open('', '', 'height=600,width=800');
    printWindow.document.write('<html><head><title>Print Tabulation Sheet</title>');
    printWindow.document.write('<style>');
    printWindow.document.write(`
        body { font-family: Arial, sans-serif; background-color: #fff; }
        .header-section, .footer-section { text-align: center; font-weight: bold; }
        .result-table { width: 100%; border-collapse: collapse; }
        .result-table th, .result-table td { border: 1px solid #333; padding: 8px; text-align: center; }
        .highlight { background-color: #cde1f9; }
        .grading-table, .evaluation-table { width: 100%; border-collapse: collapse; }
        .grading-table th, .grading-table td, .evaluation-table th, .evaluation-table td { border: 1px solid #333; padding: 5px; text-align: center; }
        .signature-section { margin-top: 40px; }
        .qr-code { width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; border: 1px solid #333; }

        /* Fixed row styles */
        .fixed-row {
            display: flex;              /* Use flexbox for horizontal alignment */
            justify-content: space-between; /* Space items evenly */
            align-items: center;       /* Center items vertically */
            width: 100%;               /* Full width of the container */
        }

        .fixed-col {
            flex: 0 0 auto;           /* Prevent columns from growing or shrinking */
            width: 28%;                /* Fixed width for each column */
        }
        .fixed-col-5{
          flex: 0 0 auto;           /* Prevent columns from growing or shrinking */
          width: 53%;  
        }

        .fixed-col img {
            max-width: 100%;          /* Make sure images don't exceed their container */
            height: auto;             /* Maintain aspect ratio */
        }

        .center {
            text-align: center;       /* Center the logo image */
        }
        th, td, span, strong, p, b{
        font-size: 10px;
      }

          #containerdiv {
        height: 92vh !important;
        position: relative; /* Set position relative to enable absolute positioning of children */
        border: 3px solid #E683EA;
      }

        /* Adding a pseudo-element for the watermark */
        #containerdiv::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-image: url('images/<?= htmlspecialchars($settings['watermark']) ?>');
          background-size: 50%;
          background-position: center center;
          background-repeat: no-repeat;
          opacity: 0.1; /* Set opacity to a low value for a subtle watermark effect */
          z-index: 1;
      }
          .containerr {
          max-width: 950px;
          padding: 20px;
          background-color: white;
          border: 3px solid #333;
          position: relative;
        }
    `);
    printWindow.document.write('</style>');
    printWindow.document.write('</head><body>');
    printWindow.document.write(printContents);
    printWindow.document.write('</body></html>');
    printWindow.document.close();
    printWindow.print();
}










<?php
require_once('main-user/function/function_file.php');
require_once 'phpqrcode/qrlib.php'; 

// Check for a valid database connection
if (!isset($con) || !$con) {
    die('Database connection error.');
}

function con($query) {
    global $con;
    return mysqli_query($con, $query);
}

function row($query) {
    return mysqli_fetch_assoc($query);
}

$settings = row(con("SELECT * FROM settings_v3 WHERE id = 1"));

// Retrieve and decode the encoded data from the URL
$encodedData = $_GET['data'] ?? null;

if ($encodedData === null) {
    die('No data provided.');
}

// Decode the base64 encoded data
$jsonData = base64_decode($encodedData);

// Decode the JSON string back to an array
$data = json_decode($jsonData, true);

if ($data === null) {
    die('Invalid data provided.');
}

// Access the original parameters
$studentId = $data['student_id'];
$examId = $data['exam_id'];
$year = $data['year'];
$course = $data['course'];

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Result</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <?= menuCss() ?>
    <style>
     body {
      font-family: Arial, sans-serif;
      background-color: #f8f9fa;
      color: #333;
    }
    .container {
      margin: 0 auto;
    }
    .containerr {
      max-width: 950px;
      margin: 0 auto;
      padding: 20px;
      background-color: white;
      border: 3px solid #333;
      position: relative;
    }
    .header-section {
      text-align: center;
      margin-bottom: 10px;
      /* border-bottom: 2px solid #333; */
      padding-bottom: 10px;
    }
    .header-section h2 {
      font-weight: bold;
    }
    .school-logo {
      width: 80px;
      height: 80px;
      margin-top: -15px;
      border: 1px solid #333;
    }
    .school-logo img {
      width: 100%;
      height: auto;
    }
    .info-section {
      font-size: 0.9rem;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .grading-table {
      width: 180px;
      top: 0px;
      right: 20px;
      border: 1px solid #111;
      font-size: 0.85rem;
      margin-top: -10px;
      justify-content: end;
      align-self: end;
    }
    .grading-table th, .grading-table td {
      border: 1px solid #333;
      padding: 5px;
      text-align: center;
    }
    .result-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 10px;
      font-size: 0.85rem;
    }
    .result-table th, .result-table td {
      border: 1px solid #333;
      padding: 5px;
      text-align: center;
    }
    .highlight {
      background-color: #cde1f9;
    }
    .evaluation-section {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
    }
    .evaluation-table {
      width: 88%;
      border-collapse: collapse;
      font-size: 0.85rem;
    }
    .evaluation-table th, .evaluation-table td {
      border: 1px solid #333;
      padding: 5px;
      text-align: center;
    }
    .qr-code {
      width: 100px;
      height: 100px;
      background-color: #ddd;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      margin: 0 auto;
      border: 1px solid #333;
    }
    .footer-section {
      text-align: center;
      margin-top: 20px;
      font-size: 0.9rem;
      color: #555;
      border-top: 2px solid #333;
      padding-top: 10px;
    }
    #containerdiv {
        height: 125vh !important;
        position: relative; /* Set position relative to enable absolute positioning of children */
        border: 3px solid #E683EA;
    }

      /* Adding a pseudo-element for the watermark */
      #containerdiv::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('images/<?= htmlspecialchars($settings['watermark']) ?>');
        background-size: 50%;
        background-position: center center;
        background-repeat: no-repeat;
        opacity: 0.1; /* Set opacity to a low value for a subtle watermark effect */
        z-index: 1;
    }

    .signature-section {
        position: absolute; /* Position this section absolutely */
        bottom: 20px; /* 20px from the bottom of the container */
        left: 20px; /* Align to the left */
        right: 20px; /* Align to the right */
        text-align: center; /* Center align text */
        /* You can add more styles if needed */
    }

    #text-center{
        text-align: center;
        align-items: center;
    }

    #text-right{
        text-align: right;
        align-items: end;
    }
    .fixed-row {
    display: flex;              /* Use flexbox for horizontal alignment */
    justify-content: space-between; /* Space items evenly */
    align-items: center;       /* Center items vertically */
    width: 100%;          
}

.fixed-col {
    flex: 0 0 auto;           /* Prevent columns from growing or shrinking */
    width: 28%;                /* Fixed width for each column */
}
.fixed-col-5{
  flex: 0 0 auto;           /* Prevent columns from growing or shrinking */
  width: 53%;  
}
.fixed-col-3{
  flex: 0 0 auto;           /* Prevent columns from growing or shrinking */
  width: 18%;  
}
.fixed-col img {
    max-width: 100%;          /* Make sure images don't exceed their container */
    height: auto;             /* Maintain aspect ratio */
}

.center {
    text-align: center;       /* Center the logo image */
}

/* Adjusting table styles */
.grading-table {
    width: 100%;              /* Table takes full width of the column */
    border-collapse: collapse; /* Collapse borders for better presentation */
}

.grading-table th, .grading-table td {
    border: 1px solid #333;   /* Border for table cells */
    padding: 8px;             /* Padding for table cells */
    text-align: center;       /* Center text in table cells */
}

.highlight {
    background-color: #cde1f9; /* Highlight for header row */
}
th, td, span, strong, p, b{
  font-size: 10px;
}
    </style>
</head>
<body>

<?php

// Escape and sanitize inputs for database queries
$course = mysqli_real_escape_string($con, $course);
$year = mysqli_real_escape_string($con, $year);
$exam = mysqli_real_escape_string($con, $examId);

// Fetch grading conditions and max_mark for full marks
$gradingQuery = "
    SELECT conditions, max_mark
    FROM grading_v3
    WHERE year = '$year' AND class_id = '$course' AND exam_id = '$exam'
    LIMIT 1
";
$gradingResult = mysqli_query($con, $gradingQuery);

$gradingConditions = [];
$maxMark = 100; // Default value for full marks if not found in grading_v3

if ($gradingResult && mysqli_num_rows($gradingResult) > 0) {
    $gradingRow = mysqli_fetch_assoc($gradingResult);
    $gradingConditions = json_decode($gradingRow['conditions'], true);
    $maxMark = $gradingRow['max_mark'];
}

// Function to calculate letter grade based on grading conditions
function calculateGrade($total, $gradingConditions) {
    foreach ($gradingConditions as $condition) {
        if ($total >= $condition['min'] && $total <= $condition['max']) {
            return [
                'grade' => $condition['grade'],
                'point' => $condition['point']
            ];
        }
    }
    return ['grade' => 'F', 'point' => '0']; // Default grade if no match is found
}

// Get all students' scores for class position calculation
$allStudentsScores = [];
$scoreQuery = "
    SELECT s.id AS student_id, SUM(er.total) AS total_score
    FROM exam_result_v3 er
    JOIN student s ON s.id = er.student_id
    WHERE s.course = '$course' AND er.year = '$year' AND er.exam_id = '$exam'
    GROUP BY s.id
    ORDER BY total_score DESC
";
$scoreResult = mysqli_query($con, $scoreQuery);
while ($scoreRow = mysqli_fetch_assoc($scoreResult)) {
    $allStudentsScores[] = ['student_id' => $scoreRow['student_id'], 'total_score' => $scoreRow['total_score']];
}

// Fetch student and result data from the database
$studentsQuery = "
    SELECT s.id AS student_id, s.sname AS student_name, s.mName AS mName, s.fname AS fname, 
           s.course AS course_id, s.regi AS student_reg_no,
           er.subject, er.cq, er.mcq, er.practical, er.total,
           cs.subject_name, cs.4th_subject
    FROM exam_result_v3 er
    JOIN student s ON s.id = er.student_id
    JOIN course_subject cs ON cs.id = er.subject
    WHERE s.id = '$studentId' AND er.year = '$year' AND er.exam_id = '$exam'
";
$studentsResult = mysqli_query($con, $studentsQuery);

if (!$studentsResult) {
    die('Error fetching student data: ' . mysqli_error($con));
}

// Initialize variables for certificate generation
$studentHtml = '';
$currentStudentId = null;
$totalFullMarks = 0;
$totalHighestMarks = 0;
$totalCQ = 0;
$totalMCQ = 0;
$totalPractical = 0;
$overallTotalMarks = 0;
$totalGradePoints = 0;
$subjectCount = 0;
$failedSubjects = 0;
$nonFourthSubjectFailed = false;
// Calculate total GPA and failed subjects
while ($row = mysqli_fetch_assoc($studentsResult)) {
    $course_id = $row['course_id'];
    $course_name = row(con("SELECT * FROM course WHERE course_code = '$course_id'"))['course'] ?? 'Unknown';

  // Calculate grade for the subject
  $gradeData = calculateGrade($row['total'], $gradingConditions);
  $isFourthSubject = $row['4th_subject'] == 1;

  // If it's a non-4th subject and grade is 'F', mark failure
  if ($gradeData['grade'] === 'F' && !$isFourthSubject) {
      $nonFourthSubjectFailed = true;
  }

  // If it's not a 4th subject, include it in GPA calculation
  if (!$isFourthSubject) {
      $totalGradePoints += $gradeData['point'];
      $subjectCount++;
  }

    // Accumulate totals for reporting
    $totalFullMarks += $maxMark;
    $totalHighestMarks += $row['total'];
    $totalCQ += $row['cq'];
    $totalMCQ += $row['mcq'];
    $totalPractical += $row['practical'];
    $overallTotalMarks += $row['total'];

    // QR code data
    $data = [
        'student_id' => $row['student_id'],
        'exam_id' => $exam,
        'year' => $year,
        'course' => $course,
    ];
    $jsonData = json_encode($data);
    $encodedData = base64_encode($jsonData);
    $qrData = "https://yourdomain.com/student_info.php?data={$encodedData}";

    ob_start();
    QRcode::png($qrData, null, QR_ECLEVEL_L, 4);
    $qrCodeImage = ob_get_contents();
    ob_end_clean();
    $qrCodeBase64 = base64_encode($qrCodeImage);

    if ($row['student_id'] !== $currentStudentId) {
        $currentStudentId = $row['student_id'];
        $studentHtml .= "
            <div class='container' id='containerdiv'>
                <div class='header-section'>
                    <h3>{$settings['website_name']}</h3>
                    <p>{$settings['address']}</p>
                </div>
                <div class='fixed-row'>
                    <div class='fixed-col'>
                        <img src='../images/' width='170px' style='border: 1px solid #111; width: 170px; height: 170px;' >
                    </div>
                    <div class='fixed-col' id='text-center'>
                        <img src='images/{$settings['logo']}' width='110px' alt='School Logo'>
                    </div>
                    <div class='fixed-col d-flex justify-content-end' id='text-right'>
                        <table class='grading-table'>
                            <tr class='highlight'><th>Range</th><th>Grade</th><th>GPA</th></tr>";
                            foreach ($gradingConditions as $condition) {
                                $studentHtml .= "<tr><td>{$condition['min']}-{$condition['max']}</td><td>{$condition['grade']}</td><td>{$condition['point']}</td></tr>";
                            }
        $studentHtml .= "</table>
                    </div>
                </div>
                <br/>
                <div class='info-section fixed-row'>
                    <div class='fixed-col'>
                        <p><strong>Name of Student:</strong> {$row['student_name']}</p>
                        <p><strong>Father's Name:</strong> {$row['fname']}</p>
                        <p><strong>Mother's Name:</strong> {$row['mName']}</p>
                        <p><strong>Student ID:</strong> {$row['student_reg_no']}</p>
                    </div>
                    <div class='fixed-col'>
                        <p><strong>Exam:</strong> Annual Examination - {$year}</p>
                        <p><strong>Class:</strong> {$course_name}</p>
                        <p><strong>Roll No:</strong> {$currentStudentId}</p>
                        <p><strong>Year:</strong> {$year}</p>
                    </div>
                </div>
                <table class='result-table'>
                    <thead>
                        <tr class='highlight'>
                            <th>Subject</th>
                            <th>Full Marks</th>
                            <th>Highest Marks</th>
                            <th>CQ</th>
                            <th>MCQ</th>
                            <th>Practical</th>
                            <th>Total Marks</th>
                            <th>Letter Grade</th>
                            <th>Grade Point</th>
                        </tr>
                    </thead>
                    <tbody>
        ";
    }

    $studentHtml .= "
        <tr>
            <td>{$row['subject_name']}</td>
            <td>{$maxMark}</td>
            <td>{$row['total']}</td>
            <td>{$row['cq']}</td>
            <td>{$row['mcq']}</td>
            <td>{$row['practical']}</td>
            <td>{$row['total']}</td>
            <td>{$gradeData['grade']}</td>
            <td>{$gradeData['point']}</td>
        </tr>
    ";
}

if ($studentHtml !== '') {
    // Calculate GPA excluding 4th subjects
    $overallGPA = $subjectCount > 0 ? round($totalGradePoints / $subjectCount, 2) : 0;

    // Determine overallGrade based on GPA, but if there's a failed non-4th subject, set overallGrade to "F"
    $overallGrade = $nonFourthSubjectFailed ? 'F' : calculateGrade($overallGPA * 20, $gradingConditions)['grade'];
    
    // Determine class position based on GPA
    $position = 1;
    foreach ($allStudentsScores as $student) {
        if ($student['student_id'] == $studentId) {
            break;
        }
        $position++;
    }

    function getBehaviorEvaluation($gpa) {
        if ($gpa >= 4.50) {
            return 'Excellent';
        } elseif ($gpa >= 4.00) {
            return 'Good';
        } elseif ($gpa >= 3.50) {
            return 'Average';
        } else {
            return 'Poor';
        }
    }
    
    // Fetch the behavior evaluation based on the calculated GPA
    $behaviorEvaluation = getBehaviorEvaluation($overallGPA);

    $studentHtml .= "
                </tbody>
                <tfoot>
                    <tr class='highlight'>
                        <td>Total Exam Marks</td>
                        <td>{$totalFullMarks}</td>
                        <td>{$totalHighestMarks}</td>
                        <td>{$totalCQ}</td>
                        <td>{$totalMCQ}</td>
                        <td>{$totalPractical}</td>
                        <td>{$overallTotalMarks}</td>
                        <td>{$overallGrade}</td>
                        <td>{$overallGPA}</td>
                    </tr>
                </tfoot>
                </table>
                <br/>
                <div class='fixed-row' style='margin-top: 20px;'>
                    <div class='fixed-col' style='margin-right: 4px;'>
                        <table class='evaluation-table'>
                            <tr><th>Result Status</th><td>" . ($failedSubjects > 0 ? 'Failed' : 'Passed') . "</td></tr>
                            <tr><th>Class Position</th><td>{$position}</td></tr>
                            <tr><th>GPA (Without 4th)</th><td>{$overallGPA}</td></tr>
                            <tr><th>Failed Subject (S)</th><td>{$failedSubjects}</td></tr>
                            <tr><th>Working Days</th><td></td></tr>
                            <tr><th>Total Present</th><td></td></tr>
                            <tr><th>Total Leave</th><td></td></tr>
                            <tr><th>Total Absent</th><td></td></tr>
                        </table>
                    </div>
                    <div class='fixed-col-5' style='margin-left: 4px;'>
                        <table class='evaluation-table'>
                            <tr><th>Moral & Behavior Evaluation</th><th>Co-Curricular Activities</th></tr>
                            <tr><td>{$behaviorEvaluation}</td><td>Sports<br>Cultural Function<br>Club-Scout/Scout/BNCC<br>Math Olympiad</td></tr>
                        </table>
                        <div class='evaluation-table' style='border: 1px solid #111; height: 50px;'> 
                            <p>Comments:</p>
                        </div>
                    </div>
                     <div class='fixed-col-3' style='margin-left: 7px;'>
                       <img src='data:image/png;base64,{$qrCodeBase64}' alt='QR Code' width='130px' />
                    </div>
                </div>

                <div class='signature-section mt-5' style='margin-top: 100px;'>
                    <div style='display: flex; justify-content: space-between;'>
                        <p>.................................................</p>
                        <p>.................................................</p>
                    </div>
                    <div style='display: flex; justify-content: space-between;'>
                        <p>Class Teacher</p>
                        <p>Head Teacher</p>
                    </div>
                </div>
            </div></div>";
}

// Output the complete HTML
echo $studentHtml;

// Footer section
echo "
    <div class='footer-info' style='text-align: center; margin-top: 20px;'>
        <p>Powered by: School360</p>
        <p>Date of Publication: 28th December, 2023</p>
    </div>";
?>

<div class="container">
    <div class="print-btn">
        <button onclick="printDiv('containerdiv')" class="btn btn-primary">Print or Download MarkSheet</button>
         <br><br><br>
    </div>
</div>

<script>

// Print function
function printDiv(divId) {
    const printContents = document.getElementById(divId).innerHTML;
    const printWindow = window.open('', '', 'height=600,width=800');
    printWindow.document.write('<html><head><title>Print Tabulation Sheet</title>');
    printWindow.document.write('<style>');
    printWindow.document.write(`
        body { font-family: Arial, sans-serif; background-color: #fff; }
        .header-section, .footer-section { text-align: center; font-weight: bold; }
        .result-table { width: 100%; border-collapse: collapse; }
        .result-table th, .result-table td { border: 1px solid #333; padding: 8px; text-align: center; }
        .highlight { background-color: #cde1f9; }
        .grading-table, .evaluation-table { width: 100%; border-collapse: collapse; }
        .grading-table th, .grading-table td, .evaluation-table th, .evaluation-table td { border: 1px solid #333; padding: 5px; text-align: center; }
        .signature-section { margin-top: 40px; }
        .qr-code { width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; border: 1px solid #333; }

        /* Fixed row styles */
        .fixed-row {
            display: flex;              /* Use flexbox for horizontal alignment */
            justify-content: space-between; /* Space items evenly */
            align-items: center;       /* Center items vertically */
            width: 100%;               /* Full width of the container */
        }

        .fixed-col {
            flex: 0 0 auto;           /* Prevent columns from growing or shrinking */
            width: 28%;                /* Fixed width for each column */
        }
        .fixed-col-5{
          flex: 0 0 auto;           /* Prevent columns from growing or shrinking */
          width: 53%;  
        }

        .fixed-col img {
            max-width: 100%;          /* Make sure images don't exceed their container */
            height: auto;             /* Maintain aspect ratio */
        }

        .center {
            text-align: center;       /* Center the logo image */
        }
        th, td, span, strong, p, b{
        font-size: 10px;
      }

          #containerdiv {
        height: 92vh !important;
        position: relative; /* Set position relative to enable absolute positioning of children */
        border: 3px solid #E683EA;
      }

        /* Adding a pseudo-element for the watermark */
        #containerdiv::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-image: url('images/<?= htmlspecialchars($settings['watermark']) ?>');
          background-size: 50%;
          background-position: center center;
          background-repeat: no-repeat;
          opacity: 0.1; /* Set opacity to a low value for a subtle watermark effect */
          z-index: 1;
      }
          .containerr {
          max-width: 950px;
          padding: 20px;
          background-color: white;
          border: 3px solid #333;
          position: relative;
        }
    `);
    printWindow.document.write('</style>');
    printWindow.document.write('</head><body>');
    printWindow.document.write(printContents);
    printWindow.document.write('</body></html>');
    printWindow.document.close();
    printWindow.print();
}
</script>

