@page {
    size: A4 landscape;
    margin: 0; /* Remove margin to fit the background image */
}

.container {
    position: relative;
}
 
.certificate-header {
    background-image: url("/images/cert_top.png");
    height: 140px;
    background-repeat: no-repeat;
    width: 100%;
    background-size: cover;
    background-position: center;
}

.certificate-footer {
   
    width: 100%;
    background-image: url("/images/cert_bottom.png");
    background-repeat: no-repeat;
    background-position: center;
    padding: 10px 0;
    position: relative; /* Ensure it stays within the printable container */
    bottom: -25px;
    text-align: center;
    padding: 10px;
}

.left-align-container h4 {
    padding: 5px;
    text-align: left;
    padding-left: 100px;
    margin-top: 60px; /* Adds space outside the element */
}

.left-align-container h5 {
    margin: 10px;
    text-align: left;
    padding-left: 100px;
    position: relative;  
}

.signature-image {
    margin-top: 0px;
    width: 150px;
    display: inline-block;
    margin-left: -65%; 
 }

.certificate-title {
    font-family: 'Noto Sans Arabic', sans-serif;
    font-weight: 700;
    color: #0094ff;
    padding: 25px;
}

.certificate-body {
    font-family: "Noto Sans Arabic", serif;
    color: rgba(0, 0, 0, 0.7);
}

.certificate-content {
    text-align: center;
    padding: 20px;
    position: relative; /* Use relative positioning */
    background-size: cover;
    z-index: 0;
}

/* Apply border styles to the entire table */
.prgm-table {
    width: 100%; /* Make table span entire width of its container */
    /*border: 1px solid #ccc;*/ /* Adds a border around the whole table */
    color: rgb(0, 60, 68);
    width: 100%;
    border-collapse: separate; /* Change to separate for border-radius to work on table */
    border-spacing: 0; /* Ensure there is no gap between cells */
    border-radius: 8px; /* Round the outer corners of the table */
    overflow: hidden; /* Hide any overflow from rounded corners */
 
}

    /* Style table headers */
    .prgm-table th {
        border:  1px  #ccc; /* Border for table header cells */
        padding: 20px;
        text-align: left;
        background-color: rgb(56 56 56 / 0.65); /* Light gray background for header */
        font-weight: bold;
        color: white;
        font-weight: 700;
      
    }
/* Ensure higher specificity for the table */
table.prgm-table {
    width: 100%; /* Ensure the table takes up full width */
    border-collapse: collapse; /* Collapse borders between table cells */
    background-color: rgb(79, 85, 151, 0.50) !important; /* Force transparent black background */
    border-radius: 15px; /* Rounded corners for the table */
     /* Hide anything spilling over the rounded corners */
          
}

/* Style table data cells with borders */
table.prgm-table td, table.prgm-table th {
    padding: 8px; /* Padding inside table cells */
    text-align: center; /* Align text to the center */
 
    
}

    /* Optional: Alternate row background (striping) */
    table.prgm-table tbody tr:nth-child(odd) {
background-color: rgb(76, 137, 131, 0.49) !important;

        color: aliceblue; /* Light text color */
    }

    table.prgm-table tbody tr:nth-child(even) {
        background-color: rgb(161, 130, 73, 0.49) !important; /* Semi-transparent dark green for even rows */
        color: aliceblue; /* Light text color */
    }

    /* Optional: Hover effect on rows */
    table.prgm-table tbody tr:hover {
        background-color: rgb(48, 66, 70, 0.20) !important; /* Lighter blue on hover */
        color: white; /* Change text to white on hover */
    }
@media print {
    /* Hide buttons during print */
    #exportPdfButton, #printButton {
        display: none; /* Hide buttons during print */
    }

    /* Show only the printable content */
    #printableArea, #printableArea * {
        display: block; /* Ensure the printable area and its children are displayed */
    }

    /* Ensure the printable area fills the entire page and is styled properly */
    #printableArea {
        position: static; /* Normal flow */
        width: 100%;
        height: auto; /* Let the content determine its own height */
        page-break-before: always; /* Start a new page before the printable area */
        page-break-after: always; /* Ensure there's space after content */
        background-color: white; /* Ensure the background color is white */
    }

    /* Apply background images for elements that require it */
    .certificate-header {
        background-image: url("/images/cert_top.png"); /* Ensure image is available */
        height: 100px; /* Reduce height to make more space */
        width: 100%;
        background-size: cover; /* Ensure image covers the area */
        background-repeat: no-repeat;
        background-position: center;
    }

 

    /* Optional: Hide everything else except the printable area */
    body * {
        display: none; /* Hide everything else */
    }

    /* Ensure content fits the page */
    #printableArea {
        width: 100%;
        height: auto;
        overflow: visible; /* Ensure no content is hidden */
    }

    /* Ensuring text is correctly styled for printing */
    .certificate-title, .certificate-body, .left-align-container {
        font-family: "Noto Sans Arabic", serif; /* Use appropriate font for printing */
        font-size: 16px; /* Adjust font size if necessary */
        color: #003a46;
    }
}


body {
    margin: 10px;
    padding: 10px;
}

.content {
    position: absolute;
    left: 10mm;
    top: 10mm;
    height: 178mm;
    width: 245mm;
    background: transparent;
}

.inner-content {
    border: none;
    margin: 4mm;
    padding: 10mm;
    height: auto;
    text-align: center;
    color: #000;
}