/*
Theme Name:           Flatsome
Theme URI:            http://flatsome.uxthemes.com
Author:               UX-Themes
Author URI:           https://uxthemes.com
Description:          Multi-Purpose Responsive WooCommerce Theme
Version:              3.19.15
Requires at least:    6.4
Requires PHP:         7.4
WC requires at least: 8.3
Text Domain:          flatsome
License:              https://themeforest.net/licenses
License URI:          https://themeforest.net/licenses
*/


/***************
All custom CSS should be added to Flatsome > Advanced > Custom CSS,
or in the style.css of a Child Theme.
***************/
.table-wrapper {
    overflow-x: auto; /* allows horizontal scroll on small screens */
    margin: 20px 0;
}

.student-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.student-table th, .student-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.student-table th {
    background-color: #4CAF50;
    color: white;
    text-transform: uppercase;
}

.student-table tr:hover {
    background-color: #f1f1f1;
}

/* Responsive for small screens */
@media (max-width: 600px) {
    .student-table thead {
        display: none; /* hide headers on small screens */
    }
    .student-table, .student-table tbody, .student-table tr, .student-table td {
        display: block;
        width: 100%;
    }
    .student-table tr {
        margin-bottom: 15px;
        border-bottom: 2px solid #ddd;
    }
    .student-table td {
        text-align: right;
        padding-left: 50%;
        position: relative;
    }
    .student-table td::before {
        content: attr(data-label); /* will show header before each cell */
        position: absolute;
        left: 15px;
        width: 45%;
        text-align: left;
        font-weight: bold;
    }
}