.table-scroll-wrapper {
    overflow-x: auto; /* Enables horizontal scrolling */
    max-width: 100%; /* Ensures the wrapper fits within the parent container */
}

#students-table {
    width: 100%; /* Ensures the table takes full width inside the wrapper */
    border-collapse: collapse; /* Consistent table border appearance */
}

.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px; /* Adjusts spacing between elements */
    margin-top: 20px;
    text-align: center; /* Ensures content is centered */
    flex-wrap: wrap; /* Adjusts layout for smaller screens */
}

.pagination-info {
    font-size: 16px;
    font-weight: bold;
    color: #333; /* Text color */
    white-space: nowrap; /* Prevents text wrapping */
    text-align: center;
    margin: 0 5px; /* Adds some margin for better spacing */
}

/* Global Styles */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Nunito', sans-serif !important;
    background-color: #f9f9f9;
    color: #333;
}

/* Layout */
.profile-layout {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr; /* Left Sidebar, Main Content, Right Sidebar */
    gap: 0; /* No gaps, use borders for separation */
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Sidebar Styling */
.profile-sidebar-left, .profile-sidebar-right {
    background-color: #fff;
    border-right: 1px solid #ddd; /* Divider for left sidebar */
    padding: 20px;
    height:auto!important;
}

.profile-sidebar-left h2 {
    text-align:center;
}

.profile-sidebar-right {
    border-left: 1px solid #ddd; /* Divider for right sidebar */
}

/* Left Sidebar Tabs */
.profile-sidebar-left .tabs {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profile-sidebar-left .tab-button {
    padding: 12px;
    font-size: 14px;
    border: none;
    border-radius: 12px; /* Match button corners */
    background-color: #87bbb5;
    color: white;
    text-align: center;
    cursor: pointer;
    box-shadow: inset 0px -6px 0px rgba(0, 0, 0, 0.15); /* Permanent bottom outline */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.profile-sidebar-left .tab-button:hover {
    transform: translateY(-2px); /* Slight lift */
    box-shadow: inset 0px -6px 0px rgba(0, 0, 0, 0.2); /* Intensify shadow */
}

.profile-sidebar-left .tab-button[data-tab="active"] {
    background-color: #1cb0f6; /* Match the blue button color */
    color: white;
    font-weight: bold;
    box-shadow: inset 0px -6px 0px #1498cc; /* Darker blue for active tab */
}

/* Right Sidebar Stats */
.profile-sidebar-right .counters {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Main Content */
.profile-content {
    background-color: #fff;
    overflow: hidden;
    max-width:100%;
    padding: 20px;
    border: 1px solid #ddd; /* Optional border */
}

.profile-content table {
    border-radius:5px!important;
    overflow-x: auto; /* Prevent horizontal scroll */
    width: 100%;
    margin-top: 20px;
    background-color: #fff;
    border:none!important;
    z-index:400;
}

.profile-content table th, 
.profile-content table td {
    padding: 10px 15px;
    text-align: left;
}

.profile-content table th {
    background-color: #f1f3f5;
    border-bottom: 1px solid #ddd;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
}

.profile-content table td {
    border-bottom: 1px solid #eee;
}

.profile-content table tr:hover {
    background-color: #f8fbff;
}


.profile-sidebar-left .tab-button,
.profile-sidebar-right .counters .counter {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: bold;
}

/* Dividers Between Sections */
.profile-content::before,
.profile-sidebar-left::after,
.profile-sidebar-right::before {
    content: '';
    display: block;
    height: 1px;
    background-color: #ddd;
    margin: 20px 0;
}

.counter {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 15px 20px;
    text-align: center;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}



.counter:hover {
    transform: translateY(-2px);
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.15); /* Slightly deeper shadow on hover */
}


.counter-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

.counter-value {
    font-size: 16px;
    color: #0073aa;
    font-weight: bold;
}

.mark-lesson-content{
    border:none!important;
}

/* General Button Styling */
/* General Button Styling */
.button-yellow,
.button-green,
.button-blue,
.button-red {
    display: inline-block;
    padding: 12px 20px;
    font-size: 16px; /* Slightly larger for emphasis */
    font-weight: bold;
    text-align: center;
    color: #fff;
    border-radius: 10px; /* Smooth rounded corners */
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
    position: relative; /* For inset shadows */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2), inset 0px -4px rgba(0, 0, 0, 0.15); /* Enhanced depth */
}

/* Button Specific Colors */
.button-yellow {
    background-color: #ffcc00; /* Bright yellow */
    box-shadow: 0px 4px 6px rgba(255, 204, 0, 0.4), inset 0px -4px rgba(204, 153, 0, 0.3); /* Softer shadows */
}

.button-green {
    background-color: #4caf50; /* Rich green */
    box-shadow: 0px 4px 6px rgba(76, 175, 80, 0.4), inset 0px -4px rgba(56, 142, 60, 0.3); /* Softer shadows */
}

.button-blue {
    background-color: #2196f3; /* Vibrant blue */
    box-shadow: 0px 4px 6px rgba(33, 150, 243, 0.4), inset 0px -4px rgba(25, 118, 210, 0.3); /* Softer shadows */
}

.button-red {
    background-color: #f44336; /* Bright red */
    box-shadow: 0px 4px 6px rgba(244, 67, 54, 0.4), inset 0px -4px rgba(211, 47, 47, 0.3); /* Softer shadows */
}

/* Hover Effects */
.button-yellow:hover {
    background-color: #e6b800; /* Slightly darker yellow */
    box-shadow: 0px 6px 8px rgba(255, 204, 0, 0.6), inset 0px -6px rgba(204, 153, 0, 0.5); /* Intensified shadows */
    transform: translateY(-2px); /* Slight lift effect */
}

.button-green:hover {
    background-color: #388e3c; /* Slightly darker green */
    box-shadow: 0px 6px 8px rgba(76, 175, 80, 0.6), inset 0px -6px rgba(56, 142, 60, 0.5); /* Intensified shadows */
    transform: translateY(-2px); /* Slight lift effect */
}

.button-blue:hover {
    background-color: #1976d2; /* Slightly darker blue */
    box-shadow: 0px 6px 8px rgba(33, 150, 243, 0.6), inset 0px -6px rgba(25, 118, 210, 0.5); /* Intensified shadows */
    transform: translateY(-2px); /* Slight lift effect */
}

.button-red:hover {
    background-color: #d32f2f; /* Slightly darker red */
    box-shadow: 0px 6px 8px rgba(244, 67, 54, 0.6), inset 0px -6px rgba(211, 47, 47, 0.5); /* Intensified shadows */
    transform: translateY(-2px); /* Slight lift effect */
}

/* Active Effects */
.button-yellow:active {
    background-color: #cc9900; /* Deeper yellow */
    box-shadow: 0px 3px 4px rgba(255, 204, 0, 0.3), inset 0px 2px rgba(204, 153, 0, 0.2); /* Pressed shadow */
    transform: translateY(1px); /* Slight press effect */
}

.button-green:active {
    background-color: #2e7d32; /* Deeper green */
    box-shadow: 0px 3px 4px rgba(76, 175, 80, 0.3), inset 0px 2px rgba(56, 142, 60, 0.2); /* Pressed shadow */
    transform: translateY(1px); /* Slight press effect */
}

.button-blue:active {
    background-color: #1565c0; /* Deeper blue */
    box-shadow: 0px 3px 4px rgba(33, 150, 243, 0.3), inset 0px 2px rgba(25, 118, 210, 0.2); /* Pressed shadow */
    transform: translateY(1px); /* Slight press effect */
}

.button-red:active {
    background-color: #c62828; /* Deeper red */
    box-shadow: 0px 3px 4px rgba(244, 67, 54, 0.3), inset 0px 2px rgba(211, 47, 47, 0.2); /* Pressed shadow */
    transform: translateY(1px); /* Slight press effect */
}

/* Responsive Design for Mobile View */
@media (max-width: 992px) {
    .profile-layout {
        display: flex;
        flex-direction: column; /* Stack everything vertically */
        gap: 20px; /* Add spacing between sections */
    }

    /* Sidebar Menu on Top */
    .profile-sidebar-left {
        background-color: #fff;
        border: 1px solid #ddd; /* Add a subtle border */
        border-radius: 8px; /* Rounded corners */
        padding: 10px;
        position: relative;
        overflow: hidden; /* Prevent content overflow */
    }

    .profile-sidebar-left h2 {
        font-size: 16px;
        font-weight: bold;
        padding: 10px;
        margin: 0;
        text-align: center;
        background-color: #87bbb5; /* Match existing sidebar styling */
        color: white;
        border-radius: 8px; /* Rounded corners for the header */
        cursor: pointer; /* Indicates clickable header */
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .profile-sidebar-left h2::after {
        content: '\25BC'; /* Down arrow */
        font-size: 14px;
        margin-left: 8px;
        transition: transform 0.3s ease;
    }

    /* Rotate the arrow when expanded */
    .profile-sidebar-left.open h2::after {
        transform: rotate(180deg);
    }

    /* Accordion-style Tabs */
    .profile-sidebar-left .tabs {
        display: none; /* Hide tabs by default */
        flex-direction: column;
        gap: 10px;
        padding-top: 10px;
        transition: all 0.3s ease; /* Smooth expand/collapse */
    }

    .profile-sidebar-left.open .tabs {
        display: flex; /* Show tabs when expanded */
    }

    /* Counters at the Bottom */
    .profile-sidebar-right {
        background-color: #fff;
        border: 1px solid #ddd; /* Match sidebar styling */
        border-radius: 8px; /* Rounded corners */
        padding: 10px;
    }

    .profile-sidebar-right .counters {
        display: flex;
        flex-direction: column; /* Stack counters vertically */
        gap: 15px;
        margin-top: 20px;
    }

    /* Button and Counter Styling */
    .profile-sidebar-left .tab-button {
        padding: 12px;
        font-size: 14px;
        border: none;
        border-radius: 8px; /* Rounded button corners */
        background-color: #e8f3f2; /* Light background */
        color: #333;
        text-align: center;
        cursor: pointer;
        transition: background-color 0.2s ease, transform 0.2s ease;
    }

    .profile-sidebar-left .tab-button:hover {
        background-color: #d4e8e7;
        transform: translateY(-2px); /* Slight lift effect */
    }

    .profile-sidebar-left .tab-button[data-tab="active"] {
        background-color: #1cb0f6; /* Match the blue button color */
        color: white;
        font-weight: bold;
    }
}

.lp-content-area{
    display:none!important;
}

/* ==============================================================================================================================================================Create Course Button */
.create-course-button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 20px;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.create-course-button:hover {
    background-color: #45a049;
}

/* Create Course Form */
.create-course-form {
    background: #f9f9f9;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.create-course-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.create-course-form input,
.create-course-form textarea {
    width: 100%;
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.create-course-form button {
    padding: 10px 15px;
    font-size: 14px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.save-course-button {
    background-color: #4CAF50;
    color: white;
    margin-right: 10px;
    transition: background-color 0.3s ease;
}

.save-course-button:hover {
    background-color: #45a049;
}

.cancel-course-button {
    background-color: #f44336;
    color: white;
    transition: background-color 0.3s ease;
}

.cancel-course-button:hover {
    background-color: #e53935;
}

/* Image Preview */
.image-preview {
    margin-top: 15px;
    text-align: center;
    display: none; /* Hidden by default */
}

.image-preview p {
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

.image-preview img {
    max-width: 100%;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Course List */
.course-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center; /* Center-align for better layout */
}

/* ======================================================================================================================================================Course Card */
/* ===================================================================Course Card */
.course-card {
    position: relative;
    width: 300px; /* Fixed width for card layout */
    height: auto; /* Allow height to adjust based on content */
    min-height: 420px;
    perspective: 1000px; /* Enables 3D flip effect */
    transform-style: preserve-3d;
    transition: transform 0.3s ease, height 0.3s ease; /* Ensure smooth animation when content size changes */
    margin-bottom: 30px; /* Add spacing between cards */
}

.card-inner {
    position: relative;
    width: 100%;
    min-height: 300px; /* Minimum height to maintain consistency */
    height: auto; /* Allow height to adjust dynamically */
    transform-style: preserve-3d;
    transition: height 0.6s ease, transform 0.6s ease-in-out;
}

.course-card.flipped .card-inner {
    transform: rotateY(180deg); /* Flip to back side */
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    min-height: 300px; /* Set a consistent minimum height */
    height: auto; /* Automatically adjust height to content */
    transition: min-height 0.3s ease, height 0.3s ease; /* Smooth resizing for dynamic content */
    backface-visibility: hidden; /* Hides back content when not flipped */
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.20);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Align content to the top */
    background-color: #fff; /* Default background */
    overflow: hidden; /* Prevent content overflow */
}

.card-front {
    z-index: 2; /* Front side visible initially */
}

.card-back {
    transform: rotateY(180deg); /* Flipped state */
    background-color: #f9f9f9; /* Light background for the back */
    padding: 20px; /* Add padding for spacing */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Align content at the top */
    gap: 20px; /* Space between elements on the back */
    border-radius: 10px;
}

.card-back p {
    max-width: 80%; /* Limit the width to 80% of the card */
    word-wrap: break-word; /* Allow breaking at word boundaries */
    overflow-wrap: break-word; /* Fallback for older browsers */
    white-space: normal; /* Allow text to wrap */
    text-align: center; /* Center-align the description (optional) */
    font-size: 16px; /* Adjust font size for readability */
    line-height: 1.5; /* Increase line height for better spacing */
    margin: 10px auto; /* Center the description horizontally with margin */
    color: #555; /* Subtle text color for readability */
}

/* ===================================================================Dynamic Image */
.course-card img {
    border-radius: 10px !important; /* Rounded corners for images */
    width: 90%; /* Image size relative to the card */
    max-width: 300px !important; /* Optional for limiting size */
    height: auto; /* Maintain aspect ratio */
    max-height: 300px !important; /* Prevent oversized images */
    object-fit: cover; /* Ensures the image scales properly */
    display: block; /* Consistent rendering */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional shadow for styling */
    margin-top: 15px; /* Space above the image */
}

/* ===================================================================Dynamic Title */
.course-card h4 {
    margin: 10px 0;
    text-align:center;
    width:80%;
    font-size: 18px;
    color: #333;
}

/* ===================================================================Price Tag */
.price-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #F4C430;
    color: #5b4f47;
    font-weight: bold;
    padding: 6px 20px;
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

/* ===================================================================Course Stats Grid */
.course-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    gap: 20px;
    margin: 20px 0; /* Add space around stats */
    padding: 0 15px;
}

.course-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.course-counter {
    font-size: 20px;
    font-weight: bold;
    color: #0056b3;
    background-color: #fffcf6;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.course-label {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
    text-align: center;
}

/* ===================================================================Buttons */
.course-buttons {
    margin-top: auto; /* Push buttons to the bottom */
    width: 100%; /* Full width for alignment */
    text-align: center;
    padding: 10px 0;
}

.course-buttons button {
    padding: 10px 20px;
    font-size: 14px;
    color: #fff;
    background-color: #0056b3;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.course-buttons button:hover {
    background-color: #003d82;
    transform: scale(1.05);
}

/* ===================================================================Responsive Adjustments */
@media (max-width: 768px) {
    .course-card {
        width: 90%;
    }

    .course-stats-grid {
        grid-template-columns: 1fr; /* Single column for small screens */
    }
}

/* =================================================================================================================editor */
.edit-course-form {
    margin: 20px auto; /* Center the form */
    width: 100%; /* Make it take the full width of the container */
    max-width: 400px; /* Limit the width for better readability */
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px; /* Rounded corners */
    background-color: #ffffff; /* White background */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for a card effect */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between elements */
}

.edit-course-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Space between label and input */
}

.edit-course-form label {
    font-weight: bold;
    font-size: 14px;
    color: #333;
}

.edit-course-form input,
.edit-course-form textarea {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Include padding in width */
}

.edit-course-form textarea {
    resize: vertical; /* Allow vertical resizing only */
    min-height: 80px; /* Set a minimum height */
}

.edit-course-form input[type="file"] {
    border: none; /* Remove default input border */
    padding: 0; /* Remove padding */
    background: none; /* Transparent background */
}

.edit-course-form img.preview-image {
    margin-top: 10px;
    max-width: 100%;
    height: auto;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional shadow for styling */
}

.edit-course-form .form-actions {
    display: flex;
    justify-content: space-between; /* Space buttons apart */
    gap: 10px;
}

.edit-course-form .save-changes {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.edit-course-form .save-changes:hover {
    background-color: #45a049; /* Darker green on hover */
}

.edit-course-form .cancel-edit {
    background-color: #dc3545;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.edit-course-form .cancel-edit:hover {
    background-color: #c82333; /* Darker red on hover */
}

/* Responsive Design */
@media (max-width: 768px) {
    .edit-course-form {
        width: 90%; /* Adjust form width for smaller screens */
        max-width: none; /* Remove max width constraint */
    }
}


.tab-button.exit-button {
    background-color: red;
    color: white;
    font-weight: bold;
    border: none;
    cursor: pointer;
    margin-top: 10px;
}

.tab-button.exit-button:hover {
    background-color: darkred;
    color: #fff;
}

/* Overlay background */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Popup content */
.popup-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    width: 90%;
}

/* Popup buttons */
.popup-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.popup-button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.confirm-button {
    background: red;
    color: white;
    font-weight: bold;
}

.confirm-button:hover {
    background: darkred;
}

.cancel-button {
    background: #ccc;
    color: black;
}

.cancel-button:hover {
    background: #bbb;
}

/*the profile edit*/
/* Tab Content Styling */
.tab-content {
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    margin-top: 20px;
    max-width: 800px;
    margin: 20px auto;
    font-family: 'Nunito', sans-serif !important;
}

/* User Info Section */
#user-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0 auto;
}

/* Individual Info Field */
.info-field {
    display: flex;
    flex-direction: column;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #f7f9fc;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.info-field:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Label and Input Styling */
.info-field label {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.info-field input {
    width: 100%;
    font-size: 15px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #fff;
    color: #555;
    outline: none;
    transition: border 0.3s ease;
}

.info-field input:focus {
    border-color: #0073aa;
    box-shadow: 0 0 4px rgba(0, 115, 170, 0.2);
}

/* Content Containers */
.name-content, .nickname-content, .email-content, .password-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap:2px;
    margin-bottom: 10px;
}

.name-editor-container, .nickname-editor-container, .email-editor-container, .password-editor-container {
    display: none;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

/* Buttons */
.info-field button {
    font-size: 14px;
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Edit Button */
.edit-info-button {
    background-color: #0073aa;
    color: #fff;
    font-weight: bold;
}

.edit-info-button:hover {
    background-color: #005885;
}

/* Save Button */
.save-info-button {
    background-color: #28a745;
    color: #fff;
    font-weight: bold;
    border-radius: 6px;
}

.save-info-button:hover {
    background-color: #218838;
}

/* Cancel Button */
.cancel-info-button {
    background-color: #dc3545;
    color: #fff;
    font-weight: bold;
}

.cancel-info-button:hover {
    background-color: #c82333;
}

/* Responsive Design */
@media (max-width: 768px) {
    .info-field {
        flex-direction: column;
        align-items: flex-start;
    }

    .name-content, .nickname-content, .email-content, .password-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .info-field button {
        width: 100%;
    }
}

/* Add Subtle Animation */
.info-field {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*=================================================================================assign courses*/

/* Assign Tab Styling */
#assign-course-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 600px;
    margin: 0 auto;
    background-color: #f7f9fc;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Field Styling */
.assign-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.assign-field label {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.assign-field select {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #fff;
}

/* Buttons */
.action-button {
    padding: 10px 15px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.action-button:hover {
    opacity: 0.9;
}

.action-button {
    background-color: #28a745; /* Green for assign */
}

.action-button.delete {
    background-color: #dc3545; /* Red for delete */
}

/*=========================================================================school schedule*/
/* Modal styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
    z-index: 1000; /* Above everything else */
    justify-content: center;
    align-items: center;
}

/* Modal content styles */
.modal-content {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 1100; /* Ensure it’s above the blur */
    max-width: 600px;
    width: 100%;
    position: relative;
}

/* Close button styles */
.modal-content .close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
}

/* Blur effect for the background */
.blur-background {
    filter: blur(5px);
    pointer-events: none;
}

/*=========================================================================finances*/
/* Background Blur */
.finances-background-blur {
    filter: blur(5px); /* Applies blur to the background */
}

/* Popup Overlay */
.finances-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Popup Content */
.finances-popup-content {
    position: relative;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    max-width: 600px;
    width: 90%;
    max-height: 90%; /* Limit height to viewport */
    overflow-y: auto; /* Enable vertical scrolling */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 1100; /* Ensure it's above the blur */
    filter: none; /* Prevent blur on popup */
}

/* Close Button */
.finances-popup-content .finances-close-popup {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
    color: #333;
}

.finances-popup-content .finances-close-popup:hover {
    color: red;
}

/*==========================================================================================================================================all lessons*/
input.bulk-delete-checkbox {
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

input.bulk-delete-checkbox[style*="background-color: #d9f2d9"] {
    background-color: #d9f2d9; /* Muted green for completed */
}

input.bulk-delete-checkbox[style*="background-color: #fffacd"] {
    background-color: #fffacd; /* Muted yellow for incomplete */
}