/* Container Styling */
.container-box {
    width: 100%;
    max-width: 600px;
    /* Limits width on larger screens */
    margin: auto;
    padding: 20px;
    border-radius: 10px;
    background-color: #008000 !important;
}

.custom-table td,
.custom-table th {
    padding: 2px 5px !important;
    background-color: #008000 !important;
    /* Reduce cell padding */
}

/* Hide table borders */
.custom-table {
    border-collapse: collapse;
    width: 100%;
}

.custom-table td {
    border: none !important;
    padding-left: 4px 8px;
}

td {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    background-color: #008000 !important;
}

/* Responsive Table */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Hide print buttons */
@media print {
    body {
        background-color: whitesmoke !important;
        /* Change to desired color */
        -webkit-print-color-adjust: exact;
        /* For Safari and Chrome */
        print-color-adjust: exact;
        /* Standard property */
        margin-top: 3% !important;
        font-size: 14px;
    }

    .custom-table td,
    .custom-table th {
        font-size: 12px !important;
        padding: 2px !important;
    }

    .no-print {
        display: none !important;
    }

    .container-box {
        max-width: 800px;
        margin: auto;
        padding: 20px;
        font-weight: bold;
    }

    /* Hide table borders */
    .custom-table {
        border-collapse: collapse;
        width: 100%;
    }

    .custom-table td {
        border: none !important;
        padding-left: 4px 8px;
    }

    td {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }

}

/* Mobile Optimization */
@media (max-width: 768px) {
    body {
        font-size: 80%;
        margin-top: 4%;
    }

    /* Responsive Table */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .container-box {
        width: 95%;
        max-width: 100%;
        padding: 15px;
    }

    button {
        font-size: 14px;
        padding: 2%;
    }


    h4 {
        font-size: 18px !important;
    }

    h5 {
        font-size: 100% !important;
    }

    /* Hide the entire 'Class' column */
    th:nth-child(4),
    /* Hide the "Class" header */
    td:nth-child(4)

    /* Hide the "Class" column values */
        {
        display: none;
    }

    tr td,
    th {
        font-size: 90%;
    }

    /* Hide table borders */
    .custom-table {
        border-collapse: collapse;
        width: 100%;
    }

    .custom-table td {
        border: none !important;
        padding-left: 4px 8px;
    }

    tr td p {
        font-size: 10px !important;
        padding-left: 5%;
    }

    ul li {
        font-size: 95%;
    }

    td {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }


}