.page-id-10374 div[data-elementor-type="footer"] > section{
    margin-top: 0 !important;
}
.page-id-10374 div[data-elementor-type="footer"] > section{
    margin-top: 0 !important;
}
.cs-user-dash .elementor-nav-menu a.elementor-item{
/* 	background: #F3F3F3; */
	padding:8px 10px !important;
	border-radius: 8px;
}
/* .cs-user-dash .elementor-nav-menu {
	    width: fit-content;
} */
.cs-user-dash .elementor-nav-menu a.elementor-item i{
	margin-right: 10px;
	color: #666666;
	font-size: 22px;
	    max-width: 24px;
}
.cs-user-dash .elementor-nav-menu .current-menu-item a.elementor-item i, .cs-user-dash .elementor-nav-menu .current-menu-item a.elementor-item svg, .cs-user-dash .elementor-nav-menu .current-menu-item a.elementor-item{
	color: #2872FA !important;
}

.cs-user-dash .elementor-nav-menu .cs-nav-btn a.elementor-item{
	background-color: #2067FA !important;
    font-size: 13px !important;
    color: #fff !important;
    padding-right: 15px !important;
	transition: .3s;
}
.active .cs-user-dash .elementor-nav-menu .cs-nav-btn a.elementor-item{
	opacity: 0;
}
.cs-user-dash .elementor-nav-menu .cs-nav-btn a.elementor-item i{
	color: #fff !important;
	font-size: 13px !important;
}
.cs-user-dash .elementor-nav-menu .cs-nav-btn:hover a.elementor-item i{
	color: #fff !important;
}
.cs-nav-btn a{
	cursor: pointer;
}
.cs-nav-btn a:hover{
	opacity: .8;
}
.dasboard-menus~.elementor-element{
	background: #fbfcff !important;
	background-color: #fbfcff !important;
	z-index: 99999999 !important;
}

.cs-dash-t-sec{
	background: #fbfcff !important;
	background-color: #fbfcff !important;
}
.cs-user-dash .elementor-nav-menu a.elementor-item{
	font-size: 13px !important;
}
.cs-user-dash .elementor-nav-menu a.elementor-item:hover, .cs-user-dash .elementor-nav-menu a.elementor-item.elementor-item-active{
	background: #f3f9fb;
}
.cs-user-dash .elementor-nav-menu a.elementor-item:hover i, .cs-user-dash .menu-item:hover a{
	color: #2872FA !important;
}
.cs-user-dash .elementor-nav-menu a.elementor-item svg{
	margin-right: 10px;
}
.groups_plus_admin_header h2, .groups_plus_report_list h3{
	font-size: 26px;
    line-height: 32px;
}


.learndash-groups-plus-organization-product-variations ul#organization_groups_list{
	padding-left: 0;
}

.btn-learndash-groups-plus-organization-price{
	    margin: 10px 0 20px 0;
}
.groups_plus_admin_header{
	padding-top: 0;
}
.ct-product-divider{
	display: none !important;
}
.variations.learndash-groups-plus-organization-product-variations tbody tr:nth-child(3) td:first-child{
	display: none;
}

.variations.learndash-groups-plus-organization-product-variations tbody tr:nth-child(3) td:nth-child(2) #groups_search_box{
	display: none;
}

.added_to_cart.wc-forward{
	margin-left: 15px;
}
.groups-plus-modal-container .col .groups-plus-courses-select{
	    min-height: 200px;
}
.groups_plus_table .btn_groups_plus{
	font-size: 14px;
}

span.email_icon{
    font-family: ld-icons!important;
    font-size: 24px;
}
span.email_icon:after{
    content: "✉";
}
.team_member_list_table td:nth-child(3), .team_member_list_table th:nth-child(3) {
    padding: 0 !important;
    text-align: center;
}

.woocommerce-info a{
	text-decoration: underline;
}

.groups_plus_container .groups_user_table tbody tr td:first-child h5{
	font-size: 20px;
}

.groups_plus_table th:nth-child(2){
	    line-height: 1.1;
	width: 20%;
}

.groups_plus_table th:first-child {
    width: 38%;
}
.groups_plus_container.groups_plus_report .groups_plus_report_list h3{
	    font-size: 22px;
}


/* main#main {
	margin-bottom: 60px;
} */



/* General styles */
.woo-dashboard {
  font-family: 'Inter', sans-serif;
  color: #111827;
  padding: 20px;
  margin: auto;
    background:#002233;
    background: url('https://learn.zatzltd.co.uk/wp-content/uploads/2025/08/low-poly-grid-haikei-7.png');
	background: #fbfcff;
	
}



.woo-dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.woo-dashboard-header h2{
	margin: 0;
}
.woo-dashboard-header h2 span{
    color: #2872FA;
}
.woo-profile {
  display: flex;
  align-items: center;
  gap: 20px;
}
.woo-glb-search{
	margin-left: auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 20px 0 0;
	position: relative;
	display: none !important;
}
.woo-glb-search input.woo-search-courses{
	    position: absolute;
    right: 55px;
    top: -7px;
    min-width: 400px;
    padding: 10px 15px !important;
}
.woo-glb-search i{
	color: #2872fa;
	font-size: 24px;
	cursor:pointer;
}

.woo-profile-card{
	    padding: 10px;
	border: 1px solid #D6D8E7 !important;
	    border-radius: 7px;
	display: flex;
    align-items: center;
    justify-content: flex-end;
	gap: 10px;
}
.woo-profile-card .woo-profile-col-info{
	    width: min-content;
    line-height: 1.2;
    color: #000;
}
.woo-profile-card .woo-profile-col-img img{
	    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 100%;
    min-width: 40px;
}






.woo-search-courses,.woo-search-courses-group-leader,.woo-search-courses-staff-dashboard {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.woo-user-info {
  font-weight: 500;
}

/* Summary cards */
.woo-summary-cards {
  display: flex;
  gap: 30px;
  margin: 30px 0;
}

.woo-card {
    padding: 18px;
    flex: 1;
    border-radius: 7px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #000;
        border: 1px solid #D6D8E7 !important;
	background: #fff;
    box-shadow: 0 0 23px 0 #3333335e;
	display: flex;
    align-items: center;
    gap: 12px;
}
.woo-card svg{
	color: #2872FA;
}
.woo-card i {
    color: #2872FA;
    font-size: 40px;
}
.woo-card div span{
	display:  block;
	text-align: left;
}
.woo-card div span.woo-card-label{
	color: #666666;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.2;
}
.woo-card div span.woo-card-no{
	color: #2E363C;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
}



/* Courses section */
.woo-courses-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 30px;
}
.woo-courses-section #DataTables_Table_0_wrapper{
	border-radius: 0 0 7px 7px;
}
.woo-courses-section .dataTables_info, 
.ld-dashboard .dataTables_info{
	padding: 10px 0 0 0 !important;
	    font-size: 13px;
	line-height: 1.2;
}
.ld-dashboard table{
	table-layout: fixed;
}
.woo-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0px;
	    background: #efefef;
    padding: 5px 10px;
	border: 1px solid #e1e8ed;
	border-bottom: none;
	border-radius: 7px 7px 0 0;
}

.woo-section-header h4 {
  margin: 0;
	    font-size: 17px;
    font-weight: 700;
    color: #000;
}
.woo-section-header a{
	    color: #2872fa;
    text-decoration: underline;
       font-size: 11px;
    margin: 0 auto 0 10px;
}



.woo-table th, 
.woo-table-2 th{
  background: #f9fafb;
  color: #374151;
  font-weight: 600;
	line-height: 1.2;
}
.woo-view-all{
    text-align: center;
}
.woo-view-all a{
       padding: 10px 18px;
    border: 1px solid #2872FA;
    background: #fff;
    color: #2872FA;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s ease;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    margin: 0 auto 50px;
    display: inline-block;
}



/* Tabs Section */
.woo-tabs-wp{
   background: #fff;
    padding: 20px;
    border-radius: 7px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.woo-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.woo-tab-btn {
  padding: 10px;
  border: 1px solid #2872FA;
  background: #fff;
  color: #2872FA;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s ease;
  font-weight: 500;
  font-size: 14px;
}

.woo-tab-btn.active,
.woo-tab-btn:hover {
  background: #2872FA;
  color: #fff;
}

.woo-tab-content {
  display: none;
  font-size: 14px;
  color: #374151;
}

.woo-tab-content.active {
  display: block;
}

.woo-tab-content {
  margin-top: 20px;
 
}

.woo-tab-section {
  margin-bottom: 30px;
}

.woo-tab-section h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #2872FA;
  border-left: 4px solid #2872FA;
  padding-left: 10px;
}

table.woo-table.dataTable, 
table.woo-table-2.dataTable{
  width: 100%;
  border-collapse: collapse;
  font-family: Inter, sans-serif;
  font-size: 15px;
  background: #fff;
  border-radius: 6px;
}

table.woo-table.dataTable thead, 
table.woo-table-2.dataTable thead{
  background-color: #f4f6f8;
}


table.woo-table.dataTable thead tr th, 
table.ldcs-table.dataTable thead tr th, 
table.woo-table-2.dataTable thead tr th{
  color: #333;
  font-weight: 700;
	font-size: 12px;
    line-height: 1.2;
}

.badge {
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 13px;
  color: #fff;
}

.badge-warning {
  background-color: #FFA726;
}

.badge-danger {
  background-color: #EF5350;
}

.badge-success {
  background-color: #66BB6A;
}
.course-deadline-tab {
  padding: 20px;
}

.course-deadline-tab .woo-tab-heading {
  font-size: 24px;
  margin-bottom: 15px;
  font-weight: 600;
  color: #1f2937;
  font-family: Inter, sans-serif;
}

.course-deadline-tab .woo-tab-table {
  width: 100%;
  border-collapse: collapse;
  font-family: Inter, sans-serif;
  font-size: 16px;
  color: #111827;
}

.woo-tab-table th,
 .woo-tab-table td {
  border: 1px solid #e5e7eb;
  padding: 12px 15px;
  text-align: left;
}
 .woo-dashboard td, 
.ld-dashboard .ld-row.ld-tables-row td, 
.ld-dashboard td, 
.dash-width td{
         font-size: 12px;
    font-weight: 500;
	 line-height: 1.2;
 }
.woo-dashboard td a.no-noticed-title{
	color: #000;
}
.woo-dashboard td a.no-noticed-title:hover{
	text-decoration: underline;
}
 .woo-tab-table thead {
  background-color: #f3f4f6;
}

.woo-tab-table tbody tr:nth-child(even) {
  background-color: #f9fafb;
}

.woo-tab-table .expiring {
  color: #b45309;
  font-weight: 500;
}

.woo-tab-table .expired {
  color: #b91c1c;
  font-weight: 500;
}
.woo-tabs-and-quiz{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 30px;
}
.quiz-label {
  padding: 6px 7px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  display: block;
  color: white;
  width: 100%;
	text-align: center;
}

.quiz-label.start {
  background-color: #4f46e5;
}

.quiz-label.retake-quiz {
  background-color: #f59e0b;
}

.quiz-label.completed {
  background-color: #10b981;
}
.quiz-label:hover{
	color: #fff;
}

.woo-pagination {
  margin-top: 20px;
  text-align: right;
}

.woo-page-btn, .woo-pagination span, .woo-pagination a{
  border: none;
  padding: 8px 12px;
  margin-left: 5px;
  border-radius: 4px;
  background: #e5e7eb;
  cursor: pointer;
  font-size:16px;
  margin: 0px 0px 0px 5px;
  /* padding: 8px 12px; */
  padding: 12px 12px;
}
.woo-pagination a{
  color: #00000f;
}

.woo-pagination span.current {
  background: #4f46e5;
  color: white;
}
.woo-pbr{
    display: flex;
    align-items: center;
    gap: 8px;
}
.progress-bar-wrapper {
  background-color: #e0e0e0;
  border-radius: 20px;
  height: 10px;
  width: 100%;
  margin-bottom: 5px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background-color: #4CAF50;
  width: 0;
  transition: width 0.5s ease-in-out;
}

.progress-percent {
  font-size: 12px;
  display: inline-block;
}
.woo-my-quizzes .woo-table th:last-child, 
.woo-my-quizzes .woo-table td:last-child{
	min-width: 130px;
}
.woo-tabs-wrapper .woo-tab-content th,
.woo-tabs-wrapper .woo-tab-content td {
    text-align: center;
}
.woo-tabs-wrapper .woo-tab-content .form-row{
	margin-bottom: 15px;
}
.woo-tabs-wrapper .woo-tab-content .form-row:last-child{
	margin-bottom: 0px;
}
.woo-my-quizzes td,
.woo-my-quizzes th {
    text-align: center !important;
	line-height: 1.2;
}
.woo-my-quizzes td:first-child,
.woo-my-quizzes th:first-child {
    text-align: left !important;
}





@media screen and (max-width: 900px) {
  .woo-courses-section {
    grid-template-columns: 1fr;
  }

  .woo-summary-cards {
    flex-direction: column;
  }

  /* Staff Dashboard Mobile Layout - Version 1.4.17 Fix / Version 2.4.36: Force single column */
  .ld-dashboard-staff-dashboard .ld-row {
    grid-template-columns: 1fr !important;
    grid-gap: 20px;
    display: block !important;
  }

  .ld-dashboard-staff-dashboard .ld-row > div {
    margin-bottom: 20px;
  }

  /* Ensure tables remain responsive on mobile */
  .ld-dashboard-staff-dashboard .ldcs-table {
    font-size: 12px;
  }

  .ld-dashboard-staff-dashboard .ldcs-actions {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  /* Mobile certificate buttons layout - Version 1.4.19 */
  .ld-dashboard-staff-dashboard #download-selected-certificates,
  .ld-dashboard-staff-dashboard #open-certificate-filters {
    font-size: 11px !important;
    padding: 4px 8px !important;
    margin-bottom: 5px !important;
  }
}


/* Muhtashim's  CSS*/

.empty-col{
  text-align: center !important;
}

.update_profile_btn{
  margin-top: 21px;
}

/* bootstrap */
/*.form-control:focus{
    color:#212529;
    background-color: #fff;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}
.form-control {
    display: block;
    width: 90%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
*/
input.is-invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem);
}
input.is-invalid:focus{
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220,53,69,.25);
}
.invalid-feedback{
    margin-top: 12px !important;
    width: 100%;
    font-size: 17px;
    font-weight: 500;
    color: #dc3848
}
@media(max-width:700px){
    input.is-invalid{
        width: 85% !important;
    }
}
@media (prefers-reduced-motion: reduce){
    .edit-profile-form input {
        transition: none;
    }
}

/* alert magic */

  .alert-error {
    scroll-margin: 30px;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.alert-success {
        scroll-margin: 30px;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

input.woo-search-courses, input.woo-search-courses-staff-dashboard,input.woo-search-courses-group-leader {
    margin: 0 0 0 10px;
	    max-width: 205px;
    width: 100% !important;
    font-size: 13px !important;
    padding: 3px 10px !important;
    height: fit-content !important;
}




table.woo-table.dataTable.no-footer,
.woo-deadline-courses table.dataTable.no-footer, 
table.woo-table-2.dataTable.no-footer{
    border-bottom: 1px solid #e1e8ed;
}

.woo-dashboard .dataTables_wrapper .dataTables_paginate .paginate_button, 
.woo-dashboard .dataTables_wrapper .dataTables_paginate .paginate_button:hover, 
.woo-dashboard .dataTables_wrapper .dataTables_paginate .paginate_button:active, 
.dataTables_wrapper .dataTables_paginate .paginate_button.current, 
.ld-dashboard .dataTables_wrapper .dataTables_paginate .paginate_button, 
.ld-dashboard .dataTables_wrapper .dataTables_paginate .paginate_button:hover, 
.ld-dashboard .dataTables_wrapper .dataTables_paginate .paginate_button:active{
	    line-height: 1.2;
    padding: 4px 6px;
    font-size: 11px;
    background: #54595F !important;
    color: #fff !important;
    border-radius: 3px;
	cursor: pointer;
}
.woo-dashboard .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, 
.dataTables_paginate .paginate_button.disabled{
	opacity: .5 !important;
	 color: #fff !important;
	
}
.woo-dashboard .dataTables_wrapper.no-footer .dataTables_paginate .paginate_button.disabled, 
.woo-dashboard .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active, 
.ld-dashboard .dataTables_wrapper .dataTables_paginate.paging_simple_numbers .paginate_button.previous.disabled, 
.ld-dashboard .dataTables_wrapper .dataTables_paginate .paginate_button.disabled{
	color: #fff !important;
}
.woo-dashboard .dataTables_wrapper .dataTables_paginate .paginate_button.current, 
.ld-dashboard .dataTables_wrapper .dataTables_paginate .paginate_button.current{
	background: #fff !important;
    color: #54595F !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
	margin: 0 5px;
	cursor: pointer;
}





.tble-wo-sty .dataTables_wrapper .dataTables_paginate .paginate_button, 
.tble-wo-sty .dataTables_wrapper .dataTables_paginate .paginate_button:hover, 
.tble-wo-sty .dataTables_wrapper .dataTables_paginate .paginate_button:active, 
.tble-wo-sty .dataTables_wrapper .dataTables_paginate .paginate_button.current, 
.tble-wo-sty .dataTables_wrapper .dataTables_paginate .paginate_button, 
.tble-wo-sty .dataTables_wrapper .dataTables_paginate .paginate_button:hover, 
.tble-wo-sty .dataTables_wrapper .dataTables_paginate .paginate_button:active{
	    line-height: 1.2;
    padding: 4px 6px;
    font-size: 11px;
    background: #54595F !important;
    color: #fff !important;
    border-radius: 3px;
}
.tble-wo-sty .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, 
.tble-wo-sty .dataTables_paginate .paginate_button.disabled{
	opacity: .5 !important;
	 color: #fff !important;
}
.tble-wo-sty .dataTables_wrapper .dataTables_paginate .paginate_button.current{
	background: #fff !important;
    color: #54595F !important;
}
.tble-wo-sty .dataTables_wrapper .dataTables_paginate .paginate_button.current{
	margin: 0 5px;
}
.woo-dashboard .dataTables_wrapper .dataTables_info, 
.tble-wo-sty .dataTables_wrapper .dataTables_info{
	padding-top: 10px !important;
	font-size: 13px !important;
    line-height: 1.2;
}


.woo-dashboard td a.certificate-link, 
.ld-dashboard.ld-dashboard-staff-dashboard table td button:first-child, 
.ld-dashboard.ld-dashboard-staff-dashboard table#ld-certificates-table td a:first-child,
.view-cert-staff, .class-staff-group-edit, .class-staff-user-edit,.class-staff-admin-edit, 
.two-btn-style .certificate-col a.certificate-link{
	background: #a7aaaf !important;
    color: #fff !important;
    font-size: 10px;
    padding: 3px 5px;
    display: block;
    text-align: center;
	width: 100% !important;
	border-radius: 5px;
	cursor: pointer;
}
.woo-dashboard td a.download-cert, 
.woo-dashboard td a.woo-btn.enroll-btn, 
.ld-dashboard.ld-dashboard-staff-dashboard table td button:last-child, 
.ld-dashboard.ld-dashboard-staff-dashboard table#ld-certificates-table td a:last-child,
.download-cert-staff, .class-staff-group-delete, .class-staff-user-delete,.class-staff-admin-delete, 
.two-btn-style .certificate-col a.download-cert{
	    background: #2872fa !important;
    color: #fff !important;
    font-size: 10px;
    padding: 3px 5px;
    display: block;
    text-align: center;
	border-radius: 5px;
	width: 100% !important;
	margin-top: 5px;
	cursor: pointer;
}

.woo-dashboard td a.download-cert:hover, 
.woo-dashboard td a.certificate-link:hover,  
.woo-dashboard td a.woo-btn.enroll-btn:hover, 
.ld-dashboard.ld-dashboard-staff-dashboard table td button:hover, 
.download-cert-staff:hover, 
.class-staff-group-delete:hover, 
.class-staff-user-delete:hover, 
.class-staff-admin-delete:hover, 
.two-btn-style .certificate-col a.download-cert:hover, 
.two-btn-style td button:hover{
	opacity: .7 !important;
}

.woo-crt-ntn #ld-certificates-table tbody tr td .cert-actions {
	display: block;
	width: 100% !important;
	    padding: 0;
    margin: 0;
}

.ld-dashboard.ld-dashboard-staff-dashboard table td:last-child button, 
.ld-dashboard.ld-dashboard-staff-dashboard table.ldcs-table#ld-certificates-table tr td a, 
#ld-certificates-table tbody tr td .cert-actions, 
.two-btn-style .woo-table tr td.certificate-col a, 
.two-btn-style td button, 
.woo-crt-ntn #ld-certificates-table tbody tr td .cert-actions a{
	    width: fit-content !important;
    margin: 0 3px 0 0;
    display: inline-block;
    padding-left: 8px;
    padding-right: 8px;
}
.ld-dashboard.ld-dashboard-staff-dashboard table td:last-child button:last-child, 
#ld-certificates-table tbody tr td .cert-actions a{
	margin-right: 0;
}

.dasboard-toggle{
	cursor: pointer;
	transition: .3s;
	transform: rotate(180deg);
}
.dasboard-menus{
	transition: .3s !important;
	overflow: hidden !important;
}
.dasboard-menus a{
	    min-width: max-content !important;
}
.dasboard-menus{
	overflow: hidden !important;
}
.dasboard-menus.active{
	width: 55px;
}
.dasboard-menus.active .dasboard-toggle{
	transform: rotate(0deg);
}
.dash-width.active{
	width: calc(100% - 55px);
}
.dasboard-menus.active .cs-user-dash{
	z-index: 0;
}

/* Version 2.4.30: Mobile responsive sidebar - closed by default on mobile, open on desktop */
@media (max-width: 768px) {
	/* Mobile: Sidebar collapsed by default */
	.dasboard-menus {
		width: 55px;
		overflow: hidden;
	}

	.dash-width {
		width: calc(100% - 55px);
	}

	.dasboard-menus .cs-user-dash {
		z-index: 0;
	}

	.dasboard-menus .dasboard-toggle {
		transform: rotate(0deg);
	}

	/* When opened on mobile - full screen overlay */
	.dasboard-menus.mobile-open {
		width: 250px !important;
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		z-index: 999999999 !important; /* Higher than dashboard content (99999999) */
		background: white;
		box-shadow: 2px 0 15px rgba(0,0,0,0.1);
		overflow-y: auto;
	}

	.dasboard-menus.mobile-open .cs-user-dash {
		z-index: 1;
	}

	.dasboard-menus.mobile-open .dasboard-toggle {
		transform: rotate(180deg);
	}

	/* Mobile overlay backdrop */
	.dasboard-menus.mobile-open::after {
		content: '';
		position: fixed;
		top: 0;
		left: 250px;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,0.3);
		z-index: 999999998; /* Just below sidebar but above everything else */
	}

	/* Adjust main content when sidebar is mobile-open */
	.dasboard-menus.mobile-open ~ .dash-width {
		width: calc(100% - 55px);
	}
}

/* Desktop: Sidebar open by default - override all mobile styles */
@media (min-width: 769px) {
	/* Reset mobile styles completely on desktop - let sidebar be natural width */
	.dasboard-menus {
		width: initial !important; /* Let content determine width naturally */
		max-width: none !important;
		overflow: visible !important;
		position: static !important;
		height: auto !important;
	}

	.dasboard-menus:not(.active) {
		width: initial !important; /* When open, natural width */
		min-width: 250px !important; /* Minimum width for readability */
	}

	.dash-width {
		width: calc(100% - 250px) !important; /* Full width minus sidebar */
	}

	.dash-width:not(.active) {
		width: calc(100% - 250px) !important; /* Full width minus open sidebar */
	}

	/* Override .active class on desktop - it should work normally for collapse */
	.dasboard-menus.active {
		width: 55px !important;
		overflow: hidden !important;
	}

	.dash-width.active {
		width: calc(100% - 55px) !important;
	}

	/* Completely disable mobile-open class on desktop */
	.dasboard-menus.mobile-open {
		width: initial !important;
		min-width: 250px !important;
		position: static !important;
		height: auto !important;
		box-shadow: none !important;
		z-index: auto !important;
	}

	.dasboard-menus.mobile-open::after {
		content: none !important;
		display: none !important;
	}

	/* Ensure menu content is visible on desktop */
	.dasboard-menus .cs-user-dash,
	.dasboard-menus.active .cs-user-dash,
	.dasboard-menus.mobile-open .cs-user-dash {
		position: relative !important;
	}
}


/* User course report CSS */
/* Wrapper Controls */
.woo-ld-course-report_wrapper .dataTables_length,
.woo-ld-course-report_wrapper .dataTables_filter {
  display: inline-flex;
  align-items: center;
  margin: 10px 15px 15px 0;
  font-size: 14px;
  color: #374151;
}

/* Dropdown (Show entries) */
.woo-ld-course-report_wrapper .dataTables_length select {
  margin: 0 6px;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  background: #fff;
  outline: none;
  transition: 0.3s ease;
}
.woo-ld-course-report_wrapper .dataTables_length select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.2);
}

/* Search Bar */
.woo-ld-course-report_wrapper .dataTables_filter {
  width: 100%;
  margin-bottom: 15px;
}

/* Hide the label */
.woo-ld-course-report_wrapper .dataTables_filter label {
  display: block;
  width: 100%;
  margin: 0;
}

.woo-ld-course-report_wrapper .dataTables_filter input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  font-size: 14px;
  outline: none;
  background-color: #fff;
  transition: all 0.3s ease;
}

.woo-ld-course-report_wrapper .dataTables_filter input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.2);
}

/* Info Text */
.woo-ld-course-report_wrapper .dataTables_info {
  margin-top: 15px;
  font-size: 13px;
  color: #6b7280;
}

/* Pagination */
.woo-ld-course-report_wrapper .dataTables_paginate {
  margin-top: 15px;
  text-align: right;
}

.woo-ld-course-report_wrapper .paginate_button {
  display: inline-block;
  padding: 6px 12px;
  margin: 0 2px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  color: #374151;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s ease;
}

.woo-ld-course-report_wrapper .paginate_button:hover {
  background: #f3f4f6;
  color: #111827;
}

.woo-ld-course-report_wrapper .paginate_button.current {
  background: #2563eb;
  color: #fff !important;
  border-color: #2563eb;
}

.woo-ld-course-report_wrapper .paginate_button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Staff Dashboard Grid Layout - Version 1.4.17 Fix */
.ld-dashboard-staff-dashboard .ld-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 30px;
	margin-bottom: 30px;
}

.ld-dashboard-staff-dashboard .ld-col {
	min-width: 0; /* Prevent flex items from overflowing */
	overflow: hidden; /* Ensure content doesn't break layout */
}

/* Ensure all tables have equal width within their containers */
.ld-dashboard-staff-dashboard .ldcs-table {
	width: 100%;
	table-layout: fixed; /* Fixed layout for consistent column widths */
}

/* Fix certificates table specific width issues */
.ld-dashboard-staff-dashboard #ld-certificates-table {
	width: 100% !important;
	max-width: 100%;
}

/* Clean certificate table buttons - Version 1.4.19 */
.ld-dashboard-staff-dashboard #download-selected-certificates,
.ld-dashboard-staff-dashboard #open-certificate-filters {
	font-size: 12px !important;
	padding: 6px 12px !important;
	margin-right: 8px !important;
	border-radius: 4px !important;
}

.ld-dashboard-staff-dashboard #download-selected-certificates {
	background-color: #2872fa !important;
	border-color: #2872fa !important;
}

.ld-dashboard-staff-dashboard #open-certificate-filters {
	background-color: #50575e !important;
	border-color: #50575e !important;
	color: #fff !important;
	padding: 6px 12px !important;
	min-height: initial !important;
}

/* Fix header section width for certificates table - Version 1.4.18 */
.ld-dashboard-staff-dashboard .ldcs-actions {
	max-width: 100% !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
}

.ld-dashboard-staff-dashboard .woo-search-courses-staff-dashboard {
	max-width: 150px !important;
	font-size: 12px !important;
	flex-shrink: 1 !important;
}

/* Certificate Filters Modal - Version 1.4.19 */
.ld-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(2px);
}

.ld-modal-container {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	max-width: 600px;
	width: 90%;
	max-height: 80vh;
	overflow: hidden;
	animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.ld-modal-header {
	background: linear-gradient(135deg, #0073aa, #005177);
	color: #fff;
	padding: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 8px 8px 0 0;
}

.ld-modal-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
}

.ld-modal-header h3 i {
	margin-right: 8px;
	color: #a7d3f0;
}

.ld-modal-close {
	background: rgba(255, 255, 255, 0.2);
	border: none;
	color: #fff;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.ld-modal-close:hover {
	background: rgba(255, 255, 255, 0.3);
	transform: rotate(90deg);
}

.ld-modal-body {
	padding: 25px;
	max-height: 400px;
	overflow-y: auto;
}

.filter-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin-bottom: 25px;
}

.filter-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.filter-group label {
	font-weight: 600;
	color: #333;
	font-size: 14px;
	display: flex;
	align-items: center;
}

.filter-group label i {
	margin-right: 8px;
	color: #0073aa;
	width: 16px;
}

.filter-group select,
.filter-group input {
	padding: 8px 12px;
	border: 2px solid #e1e5e9;
	border-radius: 4px;
	font-size: 14px;
	transition: all 0.2s ease;
	background: #fff;
}

.filter-group select:focus,
.filter-group input:focus {
	outline: none;
	border-color: #0073aa;
	box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
}

.active-filters {
	background: #f8f9fa;
	border: 1px solid #e1e5e9;
	border-radius: 6px;
	padding: 15px;
	margin-top: 20px;
}

.active-filters h4 {
	margin: 0 0 12px 0;
	font-size: 14px;
	color: #333;
	display: flex;
	align-items: center;
}

.active-filters h4 i {
	margin-right: 8px;
	color: #0073aa;
}

.filter-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.filter-tag {
	background: #0073aa;
	color: #fff;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.filter-tag .remove-tag {
	background: rgba(255, 255, 255, 0.3);
	border: none;
	color: #fff;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
}

.filter-tag .remove-tag:hover {
	background: rgba(255, 255, 255, 0.5);
}

.ld-modal-footer {
	background: #f8f9fa;
	padding: 20px;
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	border-radius: 0 0 8px 8px;
}

.ld-modal-footer .button {
	padding: 10px 20px;
	border-radius: 4px;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.2s ease;
	border: none;
	display: flex;
	align-items: center;
	gap: 8px;
}

.ld-modal-footer .button-primary {
	background: #0073aa;
	color: #fff;
}

.ld-modal-footer .button-primary:hover {
	background: #005177;
}

.ld-modal-footer .button-secondary {
	background: #50575e;
	color: #fff;
}

.ld-modal-footer .button-secondary:hover {
	background: #393f46;
}

.ld-modal-footer .button:not(.button-primary):not(.button-secondary) {
	background: #f1f1f1;
	color: #333;
}

.ld-modal-footer .button:not(.button-primary):not(.button-secondary):hover {
	background: #e1e1e1;
}

/* Mobile modal styles */
@media (max-width: 768px) {
	.ld-modal-container {
		width: 95%;
		max-height: 90vh;
	}

	.filter-grid {
		grid-template-columns: 1fr;
		gap: 15px;
	}

	.ld-modal-header {
		padding: 15px;
	}

	.ld-modal-header h3 {
		font-size: 16px;
	}

	.ld-modal-body {
		padding: 20px;
	}

	.ld-modal-footer {
		padding: 15px;
		flex-direction: column;
	}

	.ld-modal-footer .button {
		width: 100%;
		justify-content: center;
	}
}

.my-tb2 .ld-row{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 30px;
	margin-bottom: 30px;
}
.hide-tp-org .groups_plus_header_box, 
.hide-tp-org .groups_plus_admin_header{
	display: none !important;
}
.btn_groups_plus{
	background-color: #2067FA !important;
    font-size: 13px !important;
    color: #fff !important;
	    font-weight: 400;
    line-height: 26px !important;
	    padding: 8px 10px !important;
    border-radius: 8px !important;
}

.tble-wo-sty #user-report-table_wrapper label{
	display: flex;
	align-items: center;
	    margin: -30px 0 15px;
}
.tble-wo-sty #user-report-table_wrapper label input{
	    margin: 0 0 0 10px;
    max-width: 205px;
    width: 100% !important;
    font-size: 13px !important;
    padding: 3px 10px !important;
    height: fit-content !important;
}
#user-report-modal h5{
	margin: 0 !important;
}
#user-report-modal #close-report-modal{
	position: absolute;
    top: 6px;
    right: 6px;
	background: none !important;
}
#user-report-modal #close-report-modal i{
	font-size: 24px;
	cursor: pointer;
}
.learndash-wrapper .ld-item-list .ld-item-search .ld-item-search-fields .ld-item-search-name{
	    display: flex;
    flex-wrap: wrap;
}
.learndash-wrapper .ld-item-list .ld-item-search .ld-item-search-fields .ld-item-search-name input[type=text]{
	width: calc(100% - 67px);
}
.learndash-wrapper .ld-item-list .ld-item-search .ld-item-search-fields .ld-item-search-name .ld-reset-button{
	position: initial;
	font-size: 13px;
}

.learndash-wrapper .ld-item-list .ld-item-search .ld-closer{
	    font-size: 13px;
}
.woocommerce .ct-acount-nav{
	display: none !important;
}

.learndash-wrapper .ld-enrollment__join{
	display: flex !important;
}

.ld-enrollment__login {
    display: none !important;
}
.cs-ac-hd h2{
	font-size: 20px;
}
.ld-dashboard table td button{
	background: none !important;
	color: #2067fa;
	cursor: pointer;
}
#staff-edit-group-form .form-group #group-leaders-container, 
#staff-edit-group-form .form-group #group-members-container{
display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 30px;
}

#staff-edit-group-form .form-group label{
	font-weight: bold;
}
#staff-edit-group-form .form-group select{
	height: 160px;
}
#staff-edit-group-form .form-group > label{
	font-size: 18px;
	margin: 0px 0 15px;
}
.cs-mng-org .groups_plus_manage, 
.cs-mng-org .groups_plus_email{
	display: none !important;
}
.cs-mng-org .groups_plus_remaining_licenses{
	margin-right: auto;
}
.woo-btn.enroll-btn{
	display: block;
	padding: 0;
}

.ldc-group-modal-content .ldc-tabs-nav label{
	margin-bottom: 0 !important;
}
.ldc-tab-panel .form-group > div.gd-rw{
	display: grid;
	grid-template-columns: 1fr 70px 1fr;
	grid-gap: 10px;
}
.ldc-tab-panel .form-group > div.gd-rw button{
	padding: 1px 11px;
    font-size: 21px !important;
    height: initial;
    min-height: initial;
}
.ldc-tab-panel .form-group > div.gd-rw > div:nth-child(2){
	    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    flex-direction: column;
}

/* Inactive users page - full width fix */
.ldc-inactive-users {
	width: 100% !important;
	max-width: 100% !important;
}

.ldc-inactive-users h5{
	margin-bottom: 15px;
}

.ldcs-inactive-users {
	width: 100% !important;
	max-width: 100% !important;
}

.ldcs-inactive-users tbody,
.ldcs-inactive-users thead {
	width: 100% !important;
}

/* Override Elementor container width on inactive users page */
.elementor-21145 .elementor-element.elementor-element-0e82a7c {
	width: 100% !important;
	max-width: 100% !important;
}

/* Ensure inner Elementor content also takes full width */
.elementor-21145 .elementor-element.elementor-element-0e82a7c .elementor-widget-container,
.elementor-21145 .elementor-element.elementor-element-0e82a7c .elementor-widget-wrap,
.elementor-21145 .elementor-element.elementor-element-0e82a7c .elementor-container {
	width: 100% !important;
	max-width: 100% !important;
}

.cs-org-adm .groups_plus_container.groups_plus_report{
	margin: 0 !important;
	    max-width: 100%;
}
.cs-org-adm .groups_plus_container.groups_plus_report .groups_plus_admin_header{
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.cs-org-adm .groups_plus_container.groups_plus_report .groups_plus_admin_header .team-title h2, 
.cs-org-set h2{
	font-size: 20px;
	margin-bottom: 15px;
}
.cs-org-adm .groups_plus_container.groups_plus_report .groups_plus_report_list h3{
	font-size: 20px;
	margin-bottom: 15px;
}
.cs-title--gap h5{
	margin-bottom: 15px;
}
.brd-pnt .groups_user_table{
	border-radius: 7px;
	overflow:hidden;
	    border: 1px solid #e1e8ed;
	border-collapse: initial;
}

.brd-pnt .groups_user_table thead{
	background: #efefef;
}
.brd-pnt .groups_user_table thead th{
	    color: #333;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.2;
}
#download-selected-certificates{
	margin: 0 auto 0 20px;
    font-size: 11px !important;
    padding: 7px 13px;
    min-height: initial;
}
#ld-certificates-table_wrapper #ld-certificates-table thead th:first-child{
	    width: 40px;
}
.ld-dashboard.ld-dashboard-staff-dashboard #ld-certificates-table_wrapper #ld-certificates-table tbody .cert-actions{
	padding:0;
	margin: 0;
}
.ld-dashboard.ld-dashboard-staff-dashboard #ld-certificates-table_wrapper #ld-certificates-table thead th[aria-label="Certificate"]{
	width: 110px;
}
.order-subscription #DataTables_Table_0_filter input{
	margin: 0 0 10px 0px;
    max-width: 305px;
    width: 100% !important;
    font-size: 13px !important;
    padding: 3px 10px !important;
    height: fit-content !important;
}
.order-subscription #DataTables_Table_0_filter{
	float: left;
    text-align: left;
}
.cs-org-set .groups_plus_admin_header, 
.cs-org-set .groups_plus_header, 
.cs-org-set .groups_plus_report_list, 
.cs-org-set .div_export_section{
	display: none !important;
}
.cs-org-set .groups_plus_container{
	max-width: 100% !important;
}
.cs-org-set .groups_plus_header_box a.btn_groups_plus:first-child{
	display: none !important;
}






































/* code by Mujahid */

#user-report-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: none;              /* hidden by default */
  display: flex;              /* flexbox for centering */
  justify-content: center;    /* horizontal center */
  align-items: center;        /* vertical center */
  z-index: 9999;
}

#user-report-modal .modal-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
}

#user-report-modal .modal-content {
  background: #fff;
  padding: 36px 30px 30px;
  max-width: 900px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  z-index: 10000;
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
.remove-vlink .ldcs-actions.woo-section-header a{
	display: none !important;
}
              .ldc-edit-profile-modal {
                  position: fixed;
                  z-index: 99999999;
                  left: 0; top: 0;
                  width: 100%; height: 100%;
                  background: rgba(0,0,0,0.6);
                  display: none;

                  /* Flexbox center */
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  padding: 20px; /* ensures spacing on small screens */
              }

              /* Modal Content */
              .ldc-edit-profile-content {
                  background: #fff;
                  padding: 20px;
                  border-radius: 12px;
                  width: 500px;
                  max-width: 100%;
                  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
                  position: relative;
					height: 70vh;
				  margin: 15vh 0;
                  /* Animate popup */
                  animation: popupFadeIn 0.3s ease;
              }
.ldc-edit-scroll{
	overflow-y: auto;
	    height: 100%;
}
              /* Close Button */
              .ldc-close-btn {
                  position: absolute;
                  right: 15px;
                  top: 10px;
                  font-size: 22px;
                  cursor: pointer;
                  color: #333;
              }

              /* Animation */
              @keyframes popupFadeIn {
                  from { opacity: 0; transform: scale(0.9); }
                  to   { opacity: 1; transform: scale(1); }
              }

              /* Responsive tweaks */
              @media (max-width: 600px) {
                  .ldc-edit-profile-content {
                      width: 100%;
                      border-radius: 0; /* flush edges on mobile */
                  }
              }



              .form-row { margin-bottom: 15px; }
              .woo-btn { padding: 8px 14px; cursor: pointer; }


#user-report-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: none;              /* hidden by default */
  display: flex;              /* flexbox for centering */
  justify-content: center;    /* horizontal center */
  align-items: center;        /* vertical center */
  z-index: 9999;
}

#user-report-modal .modal-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
}

#user-report-modal .modal-content {
  background: #fff;
  padding: 36px 30px 30px;
  max-width: 900px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  z-index: 10000;
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

/* Modal Styles - Global high z-index for all modals */
#staff-edit-modal,
#create-user-modal,
#create-admin-modal,
#user-created-success-modal,
#admin-created-success-modal,
#purchase-seats-modal {
    position: fixed;
    z-index: 999999999 !important;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
}

#staff-edit-modal .modal-content,
#create-user-modal .modal-content,
#create-admin-modal .modal-content,
#user-created-success-modal .modal-content,
#admin-created-success-modal .modal-content,
#purchase-seats-modal .modal-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    position: relative;
    z-index: 1000000000 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    max-height: 90vh;
    overflow-y: auto;
}

#staff-edit-modal .modal-content.loading {
    opacity: 0.7;
    pointer-events: none;
}

#staff-edit-modal .modal-content.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #0073aa;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

#staff-edit-modal-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    right: 15px;
    top: 10px;
    cursor: pointer;
}

#staff-edit-modal-close:hover,
#staff-edit-modal-close:focus {
    color: #000;
}

#staff-edit-modal h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

#staff-edit-modal .form-group {
    margin-bottom: 20px;
}

/* Ensure all field groups are always visible */
#staff-edit-modal .form-group.user-fields,
#staff-edit-modal .form-group.admin-fields {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#staff-edit-modal .form-group label,
#staff-edit-modal .form-group .form-label {
    display: block !important;
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
    visibility: visible !important;
    opacity: 1 !important;
}

#staff-edit-modal .form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

#staff-edit-modal .form-group input:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 1px #0073aa;
}

#staff-edit-modal .form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

#staff-edit-modal .btn-primary {
    background-color: #0073aa;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

#staff-edit-modal .btn-primary:hover {
    background-color: #005a87;
}

#staff-edit-modal .btn-primary:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

#staff-edit-modal .btn-secondary {
    background-color: #f1f1f1;
    color: #333;
    border: 1px solid #ddd;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

#staff-edit-modal .btn-secondary:hover {
    background-color: #e1e1e1;
}

#staff-edit-modal .btn-danger {
    background-color: #dc3545;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

#staff-edit-modal .btn-danger:hover {
    background-color: #c82333;
}

#staff-edit-modal .btn-danger:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    #staff-edit-modal .modal-content {
        width: 95%;
        padding: 20px;
    }
    
    #staff-edit-modal .form-actions {
        flex-direction: column;
    }
    
    #staff-edit-modal .form-actions button {
        width: 100%;
    }
}

/* Modal overlay */
#staff-delete-modal {
    display: none; /* hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6); /* dark overlay */
    justify-content: center;
    align-items: center;
    z-index: 1000000001 !important; /* higher than edit modal to appear on top when deleting from edit modal */
}


/* ===========================
   User Delete Modal Content
   =========================== */
#staff-delete-modal .modal-content {
    background: #fff;
    padding: 25px 30px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    width: 100%;
    max-width: 400px; /* compact box */
    text-align: center;
    position: relative;
    animation: scaleIn 0.2s ease-out;
}

/* ===========================
   Close Button (X)
   =========================== */
#staff-delete-modal #staff-delete-modal-close {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 22px;
    font-weight: bold;
    color: #555;
    cursor: pointer;
    transition: color 0.2s;
}
#staff-delete-modal #staff-delete-modal-close:hover {
    color: #000;
}

/* ===========================
   Form Actions
   =========================== */
#staff-delete-modal .form-actions {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* ===========================
   Buttons
   =========================== */
#staff-delete-modal .btn-danger {
    background: #d9534f;
    color: #fff;
    padding: 8px 15px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
#staff-delete-modal .btn-danger:hover {
    background: #c9302c;
}

#staff-delete-modal .btn-secondary {
    background: #e0e0e0;
    color: #333;
    padding: 8px 15px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
#staff-delete-modal .btn-secondary:hover {
    background: #ccc;
}

/* ===========================
   Animation
   =========================== */
@keyframes scaleIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ===========================
   Group Member Edit Modal - Version 1.9.4
   =========================== */
/* Reorganize buttons: Delete on left, Save on right, aligned to the right */
.form-action.action-buttons {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    flex-direction: row-reverse !important; /* Reverses the order */
    gap: 10px !important; /* Space between buttons */
}

.form-action.action-buttons .col {
    width: auto !important;
    float: none !important;
    display: flex !important;
}

.form-action.action-buttons .col button {
    flex: 1 !important;
}

/* Style Save button (blue) */
#edit_groups_plus_team_member_btn {
    background: #2067FA !important;
    color: white !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 5px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

#edit_groups_plus_team_member_btn:hover {
    background: #1557EA !important;
}

#edit_groups_plus_team_member_btn i {
    margin-left: 8px !important;
}

/* Style Delete button (red) */
#edit_groups_plus_team_member_btn_delete {
    background: #dc3545 !important;
    color: white !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 5px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

#edit_groups_plus_team_member_btn_delete:hover {
    background: #c82333 !important;
}

/* Change button text from "Remove" to "Delete" */
#edit_groups_plus_team_member_btn_delete {
    font-size: 0 !important; /* Hide original text */
}

#edit_groups_plus_team_member_btn_delete::before {
    content: "Delete" !important;
    font-size: 14px !important;
}

#edit_groups_plus_team_member_btn_delete i {
    font-size: 14px !important; /* Restore icon size */
    margin-left: 8px !important;
}



/* Group css */

/* ===========================
   Modal Overlay (scoped)
   =========================== */
   #staff-group-edit-modal,
   #staff-group-delete-modal {
       display: none;
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0,0,0,0.6);
       z-index: 1000000001 !important;
       justify-content: center;
       align-items: center;
   }
   
   /* ===========================
      Modal Content
      =========================== */
   #staff-group-edit-modal .ldc-group-modal-content,
   #staff-group-delete-modal .ldc-group-delete-modal-content {
       background: #fff;
       padding: 25px 30px;
       border-radius: 10px;
       box-shadow: 0 10px 25px rgba(0,0,0,0.3);
       width: 100%;
       max-width: 900px;
       max-height: 90vh;
	   margin: 5vh auto;
       overflow-y: auto;
       position: relative;
       animation: scaleIn 0.2s ease-out;
   }
   
   /* ===========================
      Close Button
      =========================== */
   #staff-group-edit-modal #staff-group-edit-modal-close,
   #staff-group-delete-modal #staff-group-delete-modal-close {
       position: absolute;
       right: 15px;
       top: 10px;
       font-size: 22px;
       font-weight: bold;
       color: #555;
       cursor: pointer;
       transition: color 0.2s;
   }
   #staff-group-edit-modal #staff-group-edit-modal-close:hover,
   #staff-group-delete-modal #staff-group-delete-modal-close:hover {
       color: #000;
   }
   
   /* ===========================
      Form Actions (scoped)
      =========================== */
   #staff-group-edit-modal .form-actions,
   #staff-group-delete-modal .form-actions {
       margin-top: 20px;
       display: flex;
       gap: 10px;
       justify-content: flex-end;
   }
   
   /* ===========================
      Buttons (scoped)
      =========================== */
   #staff-group-edit-modal .btn-primary,
   #staff-group-delete-modal .btn-primary {
       background: #0073aa;
       color: #fff;
       padding: 8px 15px;
       border: none;
       border-radius: 6px;
       cursor: pointer;
   }
   #staff-group-edit-modal .btn-primary:hover,
   #staff-group-delete-modal .btn-primary:hover {
       background: #005f8d;
   }
   
   #staff-group-edit-modal .btn-secondary,
   #staff-group-delete-modal .btn-secondary {
       background: #e0e0e0;
       color: #333;
       padding: 8px 15px;
       border: none;
       border-radius: 6px;
       cursor: pointer;
   }
   #staff-group-edit-modal .btn-secondary:hover,
   #staff-group-delete-modal .btn-secondary:hover {
       background: #ccc;
   }
   
   #staff-group-edit-modal .btn-danger,
   #staff-group-delete-modal .btn-danger {
       background: #d9534f;
       color: #fff;
       padding: 8px 15px;
       border: none;
       border-radius: 6px;
       cursor: pointer;
   }
   #staff-group-edit-modal .btn-danger:hover,
   #staff-group-delete-modal .btn-danger:hover {
       background: #c9302c;
   }
   
   /* ===========================
      Animation
      =========================== */
   @keyframes scaleIn {
       from { transform: scale(0.95); opacity: 0; }
       to { transform: scale(1); opacity: 1; }
   }


/* ===========================
   SweetAlert Modal Override
   =========================== */
.swal-overlay {
    z-index: 1000000002 !important; /* Higher than all other modals */
}

.swal-modal {
    z-index: 1000000003 !important; /* Even higher to ensure visibility */
}

#staff-edit-group-form input[type="radio"] {
    display: none;
}
/* nav container */
.ldc-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 12px;
}
.ldc-tabs-nav label {
    padding: 8px 14px;
    background: #F7F7F7;
    border: 1px solid #ddd;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
}
#ldc-tab-general:checked ~ .ldc-tabs-nav label[for="ldc-tab-general"],
#ldc-tab-leaders:checked ~ .ldc-tabs-nav label[for="ldc-tab-leaders"],
#ldc-tab-courses:checked ~ .ldc-tabs-nav label[for="ldc-tab-courses"],
#ldc-tab-users:checked ~ .ldc-tabs-nav label[for="ldc-tab-users"],
#ldc-tab-auto:checked ~ .ldc-tabs-nav label[for="ldc-tab-auto"],
#ldc-tab-info:checked ~ .ldc-tabs-nav label[for="ldc-tab-info"] {
    background: #fff;
    font-weight: bold;
    border-bottom: 1px solid #fff;
}
/* container with smooth transition */
.ldc-tabs-content {
    position: relative;
    overflow: hidden;
    transition: height 0.3s ease;
}
/* panels */
.ldc-tab-panel {
    display: none;
    padding: 12px;
    border: 1px solid #ddd;
    background: #fff;
}
/* Scoped Form Groups */
.ldc-group-modal-content .form-group {
    margin-bottom: 14px;
}
.ldc-group-modal-content .form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
}
.ldc-group-modal-content .form-group input,
.ldc-group-modal-content .form-group select,
.ldc-group-modal-content .form-group textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    transition: border 0.25s ease, box-shadow 0.25s ease;
}
.ldc-group-modal-content .form-group input:focus,
.ldc-group-modal-content .form-group select:focus,
.ldc-group-modal-content .form-group textarea:focus {
    border-color: #6A5ACD;
    box-shadow: 0 0 0 3px rgba(106,90,205,0.2);
    outline: none;
}
/* Scoped Buttons */
.ldc-group-modal-content .form-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}
.ldc-group-modal-content .btn-primary {
    background: linear-gradient(135deg, #6A5ACD, #836FFF);
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.ldc-group-modal-content .btn-primary:hover {
    background: linear-gradient(135deg, #5A4EBC, #6F5EE0);
    box-shadow: 0 4px 12px rgba(106,90,205,0.3);
}
.ldc-group-modal-content .btn-secondary {
    background: #eee;
    color: #333;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.ldc-group-modal-content .btn-secondary:hover {
    background: #ddd;
}
/* Tabs fix to prevent resize jump */
.ldc-tabs-content {
    min-height: 400px; /* adjust for tallest tab */
    transition: all 0.3s ease;
}
.ldc-tab-panel {
    display: none;
    animation: fadeTab 0.3s ease;
}
@keyframes fadeTab {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
input[name="ldc-tabs"] { display: none; }
#ldc-tab-general:checked ~ .ldc-tabs-content #ldc-panel-general,
#ldc-tab-leaders:checked ~ .ldc-tabs-content #ldc-panel-leaders,
#ldc-tab-courses:checked ~ .ldc-tabs-content #ldc-panel-courses,
#ldc-tab-users:checked ~ .ldc-tabs-content #ldc-panel-users,
#ldc-tab-auto:checked ~ .ldc-tabs-content #ldc-panel-auto,
#ldc-tab-info:checked ~ .ldc-tabs-content #ldc-panel-info {
    display: block;
}

/* Groups Plus form labels styling */
.groups-plus-modal-container .form-group .form-label {
    display: block !important;
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
    visibility: visible !important;
}

/* Admin Orders and Subscriptions Page Styling */
/* Fix cart SVG icon size */
.no-orders-container .icon-container svg {
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
}

/* Fix Start Shopping button formatting */
.no-orders-container .cta-button {
    display: inline-block !important;
    padding: 12px 24px !important;
    margin: 16px 0 !important;
    background-color: #2067FA !important;
    color: white !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    min-width: 150px !important;
}

.no-orders-container .cta-button:hover {
    background-color: #1a5ae8 !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(32, 103, 250, 0.3) !important;
}

/* Overall container improvements */
.no-orders-container {
    text-align: center !important;
    padding: 40px 20px !important;
    background-color: #f8f9fa !important;
    border-radius: 8px !important;
    border: 1px solid #e9ecef !important;
}

.no-orders-container h2 {
    color: #333 !important;
    margin: 20px 0 16px 0 !important;
    font-size: 24px !important;
    font-weight: 600 !important;
}

.no-orders-container p {
    color: #666 !important;
    margin: 12px 0 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}

/* Icon container styling */
.no-orders-container .icon-container {
    margin-bottom: 20px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.no-orders-container .icon-container svg path {
    fill: #2067FA !important;
}

/* Decoration circles styling */
.no-orders-container .decoration {
    margin: 20px 0 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
}

.no-orders-container .decoration .circle {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background-color: #2067FA !important;
    opacity: 0.6 !important;
}

/* Certificate Filters Styling */
.certificates-filters {
    background-color: #f8f9fa !important;
    padding: 15px !important;
    border: 1px solid #e9ecef !important;
    border-radius: 6px !important;
    margin-bottom: 15px !important;
}

.certificates-filters label {
    font-weight: 600 !important;
    color: #333 !important;
    margin-right: 8px !important;
}

.certificates-filters select {
    padding: 6px 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    background-color: white !important;
    margin-right: 15px !important;
}

.certificates-filters select:focus {
    border-color: #2067FA !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(32, 103, 250, 0.2) !important;
}

.certificates-filters #clear-filters {
    background-color: #6c757d !important;
    color: white !important;
    border: none !important;
    padding: 6px 16px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
}

.certificates-filters #clear-filters:hover {
    background-color: #5a6268 !important;
}

/* ===================================
   EMAIL TEMPLATES STYLING
   =================================== */

/* Email templates page layout */
.ld-email-templates-page {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 20px !important;
}

.ld-page-header {
    margin-bottom: 30px !important;
    text-align: center !important;
}

.ld-page-title {
    font-size: 28px !important;
    color: #333 !important;
    margin-bottom: 10px !important;
}

.ld-page-description {
    font-size: 16px !important;
    color: #666 !important;
    line-height: 1.6 !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* Email templates full width column */
.ld-col-full {
    width: 100% !important;
    flex: none !important;
}

/* Email template modals */
.ld-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 10000 !important;
    display: none !important; /* Hidden by default */
    align-items: center !important;
    justify-content: center !important;
}

.ld-modal.show {
    display: flex !important;
}

.ld-modal-content {
    background-color: white !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    max-width: 600px !important;
    width: 90% !important;
    max-height: 90vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.ld-modal-large {
    max-width: 900px !important;
}

.ld-modal-header {
    padding: 20px 24px !important;
    border-bottom: 1px solid #eee !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background-color: #f8f9fa !important;
}

.ld-modal-header h2 {
    margin: 0 !important;
    color: #333 !important;
    font-size: 18px !important;
}

.ld-modal-close {
    font-size: 24px !important;
    cursor: pointer !important;
    color: #999 !important;
    font-weight: bold !important;
    line-height: 1 !important;
}

.ld-modal-close:hover {
    color: #333 !important;
}

.ld-modal-body {
    padding: 24px !important;
    overflow-y: auto !important;
    flex: 1 !important;
}

.ld-modal-footer {
    padding: 16px 24px !important;
    border-top: 1px solid #eee !important;
    background-color: #f8f9fa !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}

/* Form styling */
.ld-form-row {
    display: flex !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
}

.ld-form-group {
    flex: 1 !important;
    margin-bottom: 16px !important;
}

.ld-form-group label {
    display: block !important;
    margin-bottom: 6px !important;
    font-weight: 600 !important;
    color: #333 !important;
}

.ld-form-group input,
.ld-form-group select,
.ld-form-group textarea {
    width: 100% !important;
    padding: 8px 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
}

.ld-form-group textarea {
    resize: vertical !important;
    min-height: 200px !important;
    font-family: monospace !important;
}

.ld-help-text {
    display: block !important;
    margin-top: 4px !important;
    font-size: 12px !important;
    color: #666 !important;
}

.required {
    color: #e74c3c !important;
}

/* Editor toolbar */
.ld-editor-toolbar {
    margin-bottom: 8px !important;
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.ld-editor-toolbar button {
    padding: 6px 12px !important;
    background-color: #f8f9fa !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 12px !important;
    transition: all 0.2s ease !important;
}

.ld-editor-toolbar button:hover {
    background-color: #e9ecef !important;
    border-color: #adb5bd !important;
}

/* Checkbox styling */
.ld-checkbox-label {
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    margin-bottom: 0 !important;
}

.ld-checkbox-label input[type="checkbox"] {
    margin-right: 8px !important;
    width: auto !important;
}

/* Button styling */
.ld-btn {
    display: inline-block !important;
    padding: 8px 16px !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
}

.ld-btn-sm {
    padding: 4px 8px !important;
    font-size: 12px !important;
}

.ld-btn-primary {
    background-color: #2067FA !important;
    color: white !important;
}

.ld-btn-primary:hover {
    background-color: #1854d1 !important;
}

.ld-btn-secondary {
    background-color: #6c757d !important;
    color: white !important;
}

.ld-btn-secondary:hover {
    background-color: #545b62 !important;
}

.ld-btn-success {
    background-color: #28a745 !important;
    color: white !important;
}

.ld-btn-success:hover {
    background-color: #218838 !important;
}

.ld-btn-danger {
    background-color: #dc3545 !important;
    color: white !important;
}

.ld-btn-danger:hover {
    background-color: #c82333 !important;
}

/* Variables modal styling */
.variables-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

.variable-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 12px !important;
    border: 1px solid #eee !important;
    border-radius: 6px !important;
    background-color: #f8f9fa !important;
}

.variable-code {
    background-color: #e9ecef !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-family: monospace !important;
    font-size: 12px !important;
    color: #2067FA !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    min-width: fit-content !important;
}

.variable-code:hover {
    background-color: #dee2e6 !important;
}

.variable-description {
    font-size: 13px !important;
    color: #666 !important;
    line-height: 1.4 !important;
}

/* Status badges */
.status-badge {
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.status-active {
    background-color: #d4edda !important;
    color: #155724 !important;
}

.status-inactive {
    background-color: #f8d7da !important;
    color: #721c24 !important;
}

/* Notifications */
.ld-notification {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    padding: 12px 16px !important;
    border-radius: 6px !important;
    color: white !important;
    font-weight: 500 !important;
    z-index: 10001 !important;
    max-width: 400px !important;
    word-wrap: break-word !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.ld-notification-success {
    background-color: #28a745 !important;
}

.ld-notification-error {
    background-color: #dc3545 !important;
}

.ld-notification-warning {
    background-color: #ffc107 !important;
    color: #333 !important;
}

.ld-notification-info {
    background-color: #17a2b8 !important;
}

.ld-notification-close {
    background: none !important;
    border: none !important;
    color: inherit !important;
    font-size: 18px !important;
    cursor: pointer !important;
    margin-left: 12px !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* Email templates table enhancements */
#email-templates-table .status-active,
#email-templates-table .status-inactive {
    font-size: 11px !important;
    padding: 2px 6px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ld-form-row {
        flex-direction: column !important;
    }

    .ld-modal-content {
        width: 95% !important;
        max-height: 95vh !important;
    }

    .ld-editor-toolbar {
        flex-direction: column !important;
    }

    .ld-modal-footer {
        flex-direction: column !important;
    }

    /* Version 2.4.30: Mobile responsive tables - card layout */
    /* Hide table headers on mobile */
    .woo-table thead,
    .woo-ongoing-courses .woo-table thead,
    .woo-completed-courses .woo-table thead,
    .woo-available-courses .woo-table thead {
        display: none;
    }

    /* Transform table body into card layout */
    .woo-table,
    .woo-ongoing-courses .woo-table,
    .woo-completed-courses .woo-table,
    .woo-available-courses .woo-table {
        border: none !important;
    }

    /* Transform table rows into cards */
    .woo-table tbody tr,
    .woo-ongoing-courses .woo-table tbody tr,
    .woo-completed-courses .woo-table tbody tr,
    .woo-available-courses .woo-table tbody tr {
        display: block;
        margin-bottom: 20px;
        border: 1px solid #e1e8ed;
        border-radius: 8px;
        padding: 15px;
        background: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    /* Transform table cells into stacked rows */
    .woo-table tbody td,
    .woo-ongoing-courses .woo-table tbody td,
    .woo-completed-courses .woo-table tbody td,
    .woo-available-courses .woo-table tbody td {
        display: block;
        text-align: left !important;
        padding: 8px 0 !important;
        border: none !important;
        position: relative;
        padding-left: 50% !important;
        min-height: 30px;
    }

    /* Add labels before each cell */
    .woo-table tbody td:before,
    .woo-ongoing-courses .woo-table tbody td:before,
    .woo-completed-courses .woo-table tbody td:before,
    .woo-available-courses .woo-table tbody td:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 45%;
        padding-right: 10px;
        font-weight: 700;
        color: #374151;
        text-align: left;
        font-size: 12px;
    }

    /* Course name - make prominent (first column) */
    .woo-table tbody td:first-child,
    .woo-ongoing-courses .woo-table tbody td:first-child,
    .woo-completed-courses .woo-table tbody td:first-child,
    .woo-available-courses .woo-table tbody td:first-child {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #2872FA !important;
        padding-bottom: 12px !important;
        border-bottom: 1px solid #e1e8ed !important;
        margin-bottom: 10px !important;
        padding-left: 0 !important;
    }

    .woo-table tbody td:first-child:before,
    .woo-ongoing-courses .woo-table tbody td:first-child:before,
    .woo-completed-courses .woo-table tbody td:first-child:before,
    .woo-available-courses .woo-table tbody td:first-child:before {
        display: none;
    }

    /* Action buttons - full width (last column) */
    .woo-table tbody td:last-child,
    .woo-ongoing-courses .woo-table tbody td:last-child,
    .woo-completed-courses .woo-table tbody td:last-child,
    .woo-available-courses .woo-table tbody td:last-child {
        padding-top: 15px !important;
        margin-top: 10px !important;
        border-top: 1px solid #e1e8ed !important;
        text-align: center !important;
        padding-left: 0 !important;
    }

    .woo-table tbody td:last-child:before,
    .woo-ongoing-courses .woo-table tbody td:last-child:before,
    .woo-completed-courses .woo-table tbody td:last-child:before,
    .woo-available-courses .woo-table tbody td:last-child:before {
        display: none;
    }

    /* Action buttons - full width styling */
    .woo-table tbody td:last-child a,
    .woo-ongoing-courses .woo-table tbody td:last-child a,
    .woo-completed-courses .woo-table tbody td:last-child a,
    .woo-available-courses .woo-table tbody td:last-child a {
        display: block;
        width: 100%;
        margin: 5px 0;
        padding: 12px;
        font-size: 14px;
        text-align: center;
    }

    /* Progress bars - full width */
    .woo-table .progress-bar,
    .woo-ongoing-courses .woo-table .progress-bar,
    .woo-completed-courses .woo-table .progress-bar {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Badges - adjust size */
    .woo-table .badge,
    .woo-ongoing-courses .woo-table .badge,
    .woo-completed-courses .woo-table .badge {
        display: inline-block;
        padding: 6px 12px;
        font-size: 13px;
    }

    /* DataTables pagination - stack controls */
    .dataTables_paginate {
        text-align: center !important;
        margin-top: 20px !important;
    }

    .dataTables_info {
        text-align: center !important;
        margin: 10px 0 !important;
        font-size: 13px !important;
    }

    /* Search input - full width */
    .woo-search-courses {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 15px !important;
        padding: 10px !important;
    }

    /* Section headers - adjust spacing */
    .woo-section-header {
        flex-direction: column;
        align-items: flex-start !important;
        padding: 10px !important;
    }

    .woo-section-header h4 {
        margin-bottom: 8px !important;
        font-size: 16px !important;
    }

    /* Tab buttons - stack on mobile */
    .woo-tabs {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .woo-tab-btn {
        width: 100% !important;
        text-align: center !important;
        padding: 12px !important;
    }

    /* Order table mobile adjustments */
    .woo-table-order-subscription tbody td {
        display: block;
        padding-left: 50% !important;
        position: relative;
    }

    .woo-table-order-subscription tbody td:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 45%;
        padding-right: 10px;
        font-weight: 700;
        color: #374151;
        text-align: left;
        font-size: 12px;
    }

    /* Version 2.4.30: Mobile profile and header responsive styles */
    .woo-dashboard {
        padding: 10px !important;
    }

    .woo-dashboard-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
        margin-bottom: 20px !important;
    }

    .woo-dashboard-header h2 {
        font-size: 20px !important;
        width: 100% !important;
    }

    .woo-profile {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .woo-profile-card {
        flex-direction: row !important;
        width: 100% !important;
        justify-content: space-between !important;
        padding: 12px !important;
    }

    .woo-profile-card .woo-profile-col-info {
        text-align: left !important;
        font-size: 14px !important;
    }

    .woo-profile-card .woo-profile-col-img img {
        width: 35px !important;
        height: 35px !important;
        min-width: 35px !important;
    }

    /* ========================================================================
       VERSION 2.4.31: GROUP LEADER DASHBOARD MOBILE RESPONSIVE TABLES
       ======================================================================== */

    /* Group Leader Dashboard Grid Layout - Force single column on mobile */
    .ld-dashboard .ld-row.ld-group-dash-tables-row {
        grid-template-columns: 1fr !important;
        grid-gap: 20px !important;
    }

    .ld-dashboard .ld-row.ld-group-dash-tables-row .ld-col {
        min-width: 0;
        width: 100% !important;
    }

    /* Hide table headers on mobile for group leader tables */
    #ld-users-progress thead,
    #ld-completed-courses thead,
    .ldcs-inactive-users thead,
    .woo-table-2.ldcs-table-group-leader thead {
        display: none;
    }

    /* Transform table body into card layout */
    #ld-users-progress,
    #ld-completed-courses,
    .ldcs-inactive-users,
    .woo-table-2.ldcs-table-group-leader {
        border: none !important;
    }

    /* Transform table rows into cards */
    #ld-users-progress tbody tr,
    #ld-completed-courses tbody tr,
    .ldcs-inactive-users tbody tr,
    .woo-table-2.ldcs-table-group-leader tbody tr {
        display: block;
        margin-bottom: 20px;
        border: 1px solid #e1e8ed;
        border-radius: 8px;
        padding: 15px;
        background: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    /* Transform table cells into stacked rows */
    #ld-users-progress tbody td,
    #ld-completed-courses tbody td,
    .ldcs-inactive-users tbody td,
    .woo-table-2.ldcs-table-group-leader tbody td {
        display: block;
        text-align: left !important;
        padding: 8px 0 !important;
        border: none !important;
        position: relative;
        padding-left: 50% !important;
        min-height: 30px;
    }

    /* Add labels before each cell */
    #ld-users-progress tbody td:before,
    #ld-completed-courses tbody td:before,
    .ldcs-inactive-users tbody td:before,
    .woo-table-2.ldcs-table-group-leader tbody td:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 45%;
        padding-right: 10px;
        font-weight: 700;
        color: #374151;
        text-align: left;
        font-size: 12px;
    }

    /* User/Course name - make prominent (first column) */
    #ld-users-progress tbody td:first-child,
    #ld-completed-courses tbody td:first-child,
    .ldcs-inactive-users tbody td:first-child,
    .woo-table-2.ldcs-table-group-leader tbody td:first-child {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #2872FA !important;
        padding-bottom: 12px !important;
        border-bottom: 1px solid #e1e8ed !important;
        margin-bottom: 10px !important;
        padding-left: 0 !important;
    }

    #ld-users-progress tbody td:first-child:before,
    #ld-completed-courses tbody td:first-child:before,
    .ldcs-inactive-users tbody td:first-child:before,
    .woo-table-2.ldcs-table-group-leader tbody td:first-child:before {
        display: none;
    }

    /* Action buttons (2nd column in user progress) */
    #ld-users-progress tbody td:nth-child(2) {
        padding-left: 0 !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }

    #ld-users-progress tbody td:nth-child(2):before {
        position: static;
        display: block;
        width: 100%;
        margin-bottom: 8px;
    }

    /* Style buttons in Actions column for mobile */
    #ld-users-progress tbody td:nth-child(2) a,
    #ld-users-progress tbody td:nth-child(2) button {
        display: block !important;
        width: 100% !important;
        margin: 5px 0 !important;
        padding: 12px 16px !important;
        text-align: center !important;
        min-height: 44px !important;
        line-height: 1.4 !important;
        box-sizing: border-box !important;
    }

    /* Inactive Users - Actions column (3rd column) - centered email icon */
    .ldcs-inactive-users.woo-table-2 tbody td:nth-child(3) {
        padding-left: 0 !important;
        text-align: center !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    .ldcs-inactive-users.woo-table-2 tbody td:nth-child(3):before {
        position: static;
        display: block;
        width: 100%;
        margin-bottom: 4px;
        text-align: center;
    }

    .ldcs-inactive-users tbody td:nth-child(3) .email_icon {
        font-size: 24px !important;
        padding: 8px !important;
        min-height: 36px !important;
        display: inline-block !important;
    }

    /* Last Activity / Completion Date - last column */
    #ld-users-progress tbody td:nth-child(3),
    #ld-completed-courses tbody td:nth-child(3),
    .ldcs-inactive-users tbody td:nth-child(2) {
        padding-left: 50% !important;
        color: #666 !important;
        font-size: 14px !important;
    }

    /* Users Completed column (2nd in completed courses) */
    #ld-completed-courses tbody td:nth-child(2) {
        padding-left: 50% !important;
        font-size: 14px !important;
        font-weight: 600 !important;
    }

    /* DataTables pagination controls - mobile friendly */
    #ld-users-progress_wrapper .dataTables_paginate,
    #ld-completed-courses_wrapper .dataTables_paginate,
    .ldcs-inactive-users_wrapper .dataTables_paginate {
        text-align: center !important;
        margin-top: 15px !important;
    }

    #ld-users-progress_wrapper .dataTables_paginate .paginate_button,
    #ld-completed-courses_wrapper .dataTables_paginate .paginate_button,
    .ldcs-inactive-users_wrapper .dataTables_paginate .paginate_button {
        padding: 10px 15px !important;
        margin: 0 3px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-block !important;
        font-size: 14px !important;
    }

    /* DataTables info text */
    #ld-users-progress_wrapper .dataTables_info,
    #ld-completed-courses_wrapper .dataTables_info,
    .ldcs-inactive-users_wrapper .dataTables_info {
        text-align: center !important;
        font-size: 13px !important;
        padding: 10px 0 !important;
    }

    /* Search inputs - full width on mobile */
    .woo-search-courses-group-leader {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 15px !important;
        padding: 12px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
    }

    /* Section headers with actions */
    .ldcs-actions.woo-section-header,
    .woo-section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .ldcs-actions.woo-section-header h4,
    .woo-section-header h4 {
        margin: 0 !important;
        font-size: 18px !important;
    }

    .ldcs-actions.woo-section-header .header-actions {
        width: 100% !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .ldcs-actions.woo-section-header button,
    .woo-section-header button {
        width: 100% !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
        min-height: 44px !important;
    }

    /* Inactive users title section */
    .ldc-inactive-users-title h5 {
        font-size: 18px !important;
        margin-bottom: 10px !important;
    }

    /* Empty state messages in tables */
    #ld-users-progress tbody tr td[colspan],
    #ld-completed-courses tbody tr td[colspan],
    .ldcs-inactive-users tbody tr td[colspan] {
        display: table-cell !important;
        padding: 20px !important;
        text-align: center !important;
    }

    #ld-users-progress tbody tr:has(td[colspan]),
    #ld-completed-courses tbody tr:has(td[colspan]),
    .ldcs-inactive-users tbody tr:has(td[colspan]) {
        display: table-row !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    /* ========================================================================
       VERSION 2.4.44: GROUP USERS CERTIFICATES - MOBILE RESPONSIVE
       ======================================================================== */

    /* Hide list view on mobile - force card view only */
    .certificates-list-view {
        display: none !important;
    }

    /* Hide view toggle buttons on mobile */
    .view-toggle-buttons {
        display: none !important;
    }

    /* Force card view to display on mobile */
    .certificates-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Optimize certificate cards for mobile */
    .certificate-card {
        padding: 15px !important;
    }

    /* Larger checkbox for touch targets */
    .certificate-card .certificate-checkbox input {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
    }

    /* Mobile-optimized action buttons in cards */
    .certificate-card .certificate-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .certificate-card .view-certificate-btn,
    .certificate-card .download-certificate-btn {
        width: 100% !important;
        min-height: 44px !important;
        padding: 12px 15px !important;
        justify-content: center !important;
        font-size: 14px !important;
    }

    /* Bulk download button full-width on mobile */
    .bulk-download-btn {
        width: 100% !important;
        min-height: 44px !important;
        padding: 12px 20px !important;
        justify-content: center !important;
    }

    /* Certificates header stack on mobile */
    .certificates-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 15px !important;
    }

    .certificates-header h2 {
        font-size: 22px !important;
        text-align: center !important;
    }

    /* Bulk actions centered */
    .bulk-actions {
        justify-content: center !important;
    }

    /* User report modal - ensure it's mobile friendly */
    #user-report-modal .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 10px auto !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }

    #user-report-table_wrapper {
        overflow-x: auto !important;
    }

    /* Edit/Create modals - mobile responsive */
    #create-user-modal .modal-content,
    #create-admin-modal .modal-content,
    #staff-edit-modal .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 10px auto !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        padding: 15px !important;
    }

    /* Form inputs in modals - full width */
    #create-user-modal input[type="text"],
    #create-user-modal input[type="email"],
    #create-user-modal input[type="password"],
    #create-admin-modal input[type="text"],
    #create-admin-modal input[type="email"],
    #create-admin-modal input[type="password"],
    #staff-edit-modal input[type="text"],
    #staff-edit-modal input[type="email"],
    #staff-edit-modal input[type="password"] {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ========================================================================
       END VERSION 2.4.31: GROUP LEADER DASHBOARD MOBILE RESPONSIVE TABLES
       ======================================================================== */

    /* ========================================================================
       VERSION 2.4.32: ORDER SUBSCRIPTION TABLE MOBILE RESPONSIVE
       ======================================================================== */

    /* Hide table header on mobile */
    .woo-table-order-subscription thead {
        display: none;
    }

    /* Transform table to card layout */
    .woo-table-order-subscription {
        border: none !important;
    }

    .woo-table-order-subscription tbody tr {
        display: block;
        margin-bottom: 20px;
        border: 1px solid #e1e8ed;
        border-radius: 8px;
        padding: 15px;
        background: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    /* Stack cells vertically */
    .woo-table-order-subscription tbody td {
        display: block;
        text-align: left !important;
        padding: 8px 0 !important;
        border: none !important;
        position: relative;
        padding-left: 50% !important;
        min-height: 30px;
    }

    .woo-table-order-subscription tbody td:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 45%;
        padding-right: 10px;
        font-weight: 700;
        color: #374151;
        text-align: left;
        font-size: 12px;
    }

    /* Make Order # prominent at top */
    .woo-table-order-subscription tbody td:first-child {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #2872FA !important;
        padding-bottom: 12px !important;
        border-bottom: 1px solid #e1e8ed !important;
        margin-bottom: 10px !important;
        padding-left: 0 !important;
    }

    .woo-table-order-subscription tbody td:first-child:before {
        display: none;
    }

    /* Date, Total, Status - centered values with labels on left (columns 2, 3, 4) */
    .woo-table-order-subscription tbody td:nth-child(2),
    .woo-table-order-subscription tbody td:nth-child(3),
    .woo-table-order-subscription tbody td:nth-child(4) {
        text-align: center !important;
    }

    .woo-table-order-subscription tbody td:nth-child(2):before,
    .woo-table-order-subscription tbody td:nth-child(3):before,
    .woo-table-order-subscription tbody td:nth-child(4):before {
        text-align: left !important;
    }

    /* Invoice button full-width at bottom */
    .woo-table-order-subscription tbody td:last-child {
        padding-left: 0 !important;
        padding-top: 15px !important;
    }

    .woo-table-order-subscription tbody td:last-child:before {
        position: static;
        display: block;
        width: 100%;
        margin-bottom: 8px;
    }

    .woo-table-order-subscription tbody td:last-child a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 12px 16px !important;
        text-align: center !important;
        min-height: 44px !important;
        box-sizing: border-box !important;
        background: #2872FA !important;
        color: white !important;
        border-radius: 4px !important;
        text-decoration: none !important;
        font-weight: 500 !important;
    }

    .woo-table-order-subscription tbody td:last-child a svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* DataTables pagination - mobile optimized */
    .woo-table-order-subscription_wrapper .dataTables_paginate,
    #DataTables_Table_0_paginate {
        text-align: center !important;
        margin-top: 15px !important;
    }

    .woo-table-order-subscription_wrapper .dataTables_paginate .paginate_button,
    #DataTables_Table_0_paginate .paginate_button {
        padding: 10px 15px !important;
        margin: 0 3px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-block !important;
        font-size: 14px !important;
    }

    /* DataTables info text */
    .woo-table-order-subscription_wrapper .dataTables_info,
    #DataTables_Table_0_info {
        text-align: center !important;
        font-size: 13px !important;
        padding: 10px 0 !important;
    }

    /* DataTables search input - already styled by existing rules */
    .order-subscription #DataTables_Table_0_filter input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Order details modal - mobile responsive */
    #order-details-modal .order-modal-content {
        width: 95% !important;
        max-width: 95% !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        padding: 15px !important;
    }

    #order-details-modal .order-modal-close {
        font-size: 28px !important;
        top: 5px !important;
        right: 10px !important;
    }

    /* Empty state messages in order table */
    .woo-table-order-subscription tbody tr td[colspan] {
        display: table-cell !important;
        padding: 20px !important;
        text-align: center !important;
    }

    .woo-table-order-subscription tbody tr:has(td[colspan]) {
        display: table-row !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    /* ========================================================================
       END VERSION 2.4.32: ORDER SUBSCRIPTION TABLE MOBILE RESPONSIVE
       ======================================================================== */

    /* ========================================================================
       VERSION 2.4.34: CERTIFICATES PAGE - HIDE LIST VIEW ON MOBILE
       ======================================================================== */

    /* Hide list view and view toggle buttons on mobile - show only card view */
    .certificates-page-wrapper #list-view,
    .certificates-page-wrapper .view-toggle-buttons {
        display: none !important;
    }

    /* Ensure card view is visible on mobile */
    .certificates-page-wrapper #card-view {
        display: grid !important;
    }

    /* Adjust certificates header for mobile */
    .certificates-page-wrapper .certificates-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }

    .certificates-page-wrapper .bulk-actions {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .certificates-page-wrapper .bulk-download-button {
        flex: 1 !important;
        justify-content: center !important;
    }

    /* ========================================================================
       END VERSION 2.4.34: CERTIFICATES PAGE - HIDE LIST VIEW ON MOBILE
       ======================================================================== */

    /* ========================================================================
       VERSION 2.4.35: COURSE REPORT TABLE - MOBILE RESPONSIVE CARDS
       ======================================================================== */

    /* Hide table header on mobile */
    .woo-table-ld-course-report thead {
        display: none;
    }

    /* Transform table to card layout */
    .woo-table-ld-course-report {
        border: none !important;
    }

    .woo-table-ld-course-report tbody tr {
        display: block;
        margin-bottom: 20px;
        border: 1px solid #e1e8ed;
        border-radius: 8px;
        padding: 15px;
        background: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    /* Stack cells vertically with labels */
    .woo-table-ld-course-report tbody td {
        display: block;
        text-align: left !important;
        padding: 8px 0 !important;
        border: none !important;
        position: relative;
        padding-left: 50% !important;
        min-height: 30px;
    }

    .woo-table-ld-course-report tbody td:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 45%;
        padding-right: 10px;
        font-weight: 700;
        color: #374151;
        text-align: left;
        font-size: 12px;
    }

    /* Make Course name prominent at top (first column) */
    .woo-table-ld-course-report tbody td:first-child {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #2872FA !important;
        padding-bottom: 12px !important;
        border-bottom: 1px solid #e1e8ed !important;
        margin-bottom: 10px !important;
        padding-left: 0 !important;
    }

    .woo-table-ld-course-report tbody td:first-child:before {
        display: none;
    }

    /* Status column - preserve inline HTML styling */
    .woo-table-ld-course-report tbody td:last-child {
        padding-top: 10px !important;
    }

    /* DataTables wrapper - optimize for mobile */
    .woo-ld-course-report_wrapper {
        width: 100%;
        max-width: 100%;
    }

    /* Export buttons - stack vertically on mobile */
    .export-buttons-container {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        margin-bottom: 15px !important;
    }

    .export-buttons-container .dt-button {
        width: 100% !important;
        justify-content: center !important;
        min-height: 44px !important;
    }

    /* DataTables search input */
    .woo-ld-course-report_wrapper .dataTables_filter input {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* DataTables pagination - mobile optimized */
    .woo-ld-course-report_wrapper .dataTables_paginate {
        text-align: center !important;
        margin-top: 15px !important;
    }

    .woo-ld-course-report_wrapper .paginate_button {
        padding: 10px 15px !important;
        margin: 0 3px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-block !important;
        font-size: 14px !important;
    }

    /* DataTables info text */
    .woo-ld-course-report_wrapper .dataTables_info {
        text-align: center !important;
        font-size: 13px !important;
        padding: 10px 0 !important;
    }

    /* Empty state messages */
    .woo-table-ld-course-report tbody tr td[colspan] {
        display: table-cell !important;
        padding: 20px !important;
        text-align: center !important;
    }

    .woo-table-ld-course-report tbody tr:has(td[colspan]) {
        display: table-row !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    /* ========================================================================
       END VERSION 2.4.35: COURSE REPORT TABLE - MOBILE RESPONSIVE CARDS
       ======================================================================== */

    /* ========================================================================
       VERSION 2.4.36: STAFF DASHBOARD TABLES - MOBILE RESPONSIVE CARDS
       ======================================================================== */

    /* Hide table headers on mobile */
    .ldcs-table thead {
        display: none;
    }

    /* Transform table to card layout */
    .ldcs-table {
        border: none !important;
    }

    .ldcs-table tbody tr {
        display: block;
        margin-bottom: 20px;
        border: 1px solid #e1e8ed;
        border-radius: 8px;
        padding: 15px;
        background: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    /* Stack cells vertically with labels */
    .ldcs-table tbody td {
        display: block;
        text-align: left !important;
        padding: 8px 0 !important;
        border: none !important;
        position: relative;
        padding-left: 50% !important;
        min-height: 30px;
    }

    .ldcs-table tbody td:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 45%;
        padding-right: 10px;
        font-weight: 700;
        color: #374151;
        text-align: left;
        font-size: 12px;
    }

    /* First column prominent (Organisation/Username/User) */
    .ldcs-table tbody td:first-child {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #2872FA !important;
        padding-bottom: 12px !important;
        border-bottom: 1px solid #e1e8ed !important;
        margin-bottom: 10px !important;
        padding-left: 0 !important;
    }

    .ldcs-table tbody td:first-child:before {
        display: none;
    }

    /* Last column (Actions) - full width, centered */
    .ldcs-table tbody td:last-child {
        padding-left: 0 !important;
        text-align: center !important;
        padding-top: 15px !important;
        padding-bottom: 0 !important;
    }

    .ldcs-table tbody td:last-child:before {
        display: none;
    }

    /* Action buttons - side by side, 50% width each with gap */
    .ldcs-table tbody td:last-child {
        display: flex !important;
        gap: 10px;
        padding: 15px 10px 0 10px !important;
    }

    .ldcs-table tbody td:last-child button {
        flex: 1;
        max-width: calc(50% - 5px);
        min-height: 44px;
        font-size: 14px;
        margin: 0;
    }

    /* Certificates table - special handling removed, using absolute positioning below */

    /* DataTables controls optimization */
    .ldcs-table_wrapper .dataTables_info {
        font-size: 13px;
        text-align: center;
        margin-bottom: 10px;
    }

    .ldcs-table_wrapper .dataTables_paginate {
        text-align: center;
        margin-top: 15px;
    }

    .ldcs-table_wrapper .paginate_button {
        padding: 10px 15px;
        margin: 0 3px;
        min-width: 44px;
        min-height: 44px;
        display: inline-block;
        font-size: 14px;
    }

    /* Search input mobile optimization */
    .woo-search-courses-staff-dashboard {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 15px !important;
        font-size: 14px !important;
        padding: 10px !important;
        min-height: 44px !important;
    }

    /* Certificate filter/download buttons */
    #download-selected-certificates,
    #open-certificate-filters {
        width: 100% !important;
        margin: 0 0 10px 0 !important;
        min-height: 44px;
        font-size: 14px !important;
        padding: 10px !important;
    }

    /* Certificate table header actions - center align buttons and full-width search */
    #ld-certificates-table_wrapper .ldcs-actions.woo-section-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        gap: 10px !important;
        text-align: center !important;
    }

    #ld-certificates-table_wrapper .ldcs-actions.woo-section-header h4 {
        width: 100% !important;
        text-align: center !important;
    }

    #ld-certificates-table_wrapper .ldcs-actions.woo-section-header a {
        margin: 0 !important;
    }

    #ld-certificates-table_wrapper .ldcs-actions button,
    #ld-certificates-table_wrapper .ldcs-actions input[type="text"] {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Certificate checkbox and name on same row - Version 2.4.36 refinement */
    #ld-certificates-table tbody tr {
        position: relative;
        padding-top: 50px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #ld-certificates-table tbody td:first-child {
        /* Checkbox - position absolute to left */
        position: absolute !important;
        top: 15px;
        left: 15px;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        width: auto !important;
    }

    #ld-certificates-table tbody td:first-child:before {
        display: none !important;
    }

    #ld-certificates-table tbody td:nth-child(2) {
        /* User name - centered at top of card */
        position: absolute !important;
        top: 15px;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 80px) !important;
        text-align: center !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #2872FA !important;
    }

    #ld-certificates-table tbody td:nth-child(2):before {
        display: none !important;
    }

    #ld-certificates-table tbody td:nth-child(3) {
        /* Course - first visible field below name/checkbox row, order 3 */
        margin-top: 0 !important;
        padding-top: 12px !important;
        border-top: 1px solid #e1e8ed !important;
        order: 3 !important;
    }

    /* Certificate column (4th column) - hide label, show buttons side by side, order 6 */
    #ld-certificates-table tbody td:nth-child(4) {
        display: block !important;
        position: static !important;
        padding: 8px 0 !important;
        padding-left: 0 !important;
        border: none !important;
        order: 6 !important;
    }

    #ld-certificates-table tbody td:nth-child(4):before {
        display: none !important;
    }

    #ld-certificates-table tbody td:nth-child(4) .cert-actions {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 0 10px !important;
    }

    #ld-certificates-table tbody td:nth-child(4) .cert-actions a {
        flex: 1 !important;
        display: block !important;
        min-height: 44px !important;
        line-height: 44px !important;
        text-align: center !important;
        padding: 0 !important;
    }

    /* Date completed column (5th column) - should display before buttons, order 5 */
    #ld-certificates-table tbody tr td:nth-child(5) {
        display: block !important;
        position: relative !important;
        padding: 8px 0 !important;
        padding-left: 50% !important;
        border: none !important;
        order: 5 !important;
        min-height: 30px !important;
    }

    #ld-certificates-table tbody tr td:nth-child(5):before {
        content: attr(data-label) !important;
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        top: 8px !important;
        width: 45% !important;
        padding-right: 10px !important;
        font-weight: 700 !important;
        color: #374151 !important;
        text-align: left !important;
        font-size: 12px !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 1 !important;
    }

    /* ========================================================================
       END VERSION 2.4.36: STAFF DASHBOARD TABLES - MOBILE RESPONSIVE CARDS
       ======================================================================== */

    /* ========================================================================
       VERSION 2.4.42: GROUP MEMBERS TABLE - MOBILE RESPONSIVE CARDS
       ======================================================================== */

    /* Hide table headers on mobile */
    .ld-custom-members-table thead {
        display: none;
    }

    /* Transform table to card layout */
    .ld-custom-members-table {
        border: none !important;
    }

    .ld-custom-members-table tbody tr {
        display: block;
        margin-bottom: 20px;
        border: 1px solid #e1e8ed;
        border-radius: 8px;
        padding: 15px;
        background: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    /* Stack cells vertically with labels */
    .ld-custom-members-table tbody td {
        display: block;
        text-align: left !important;
        padding: 8px 0 !important;
        border: none !important;
        position: relative;
        padding-left: 50% !important;
        min-height: 30px;
    }

    .ld-custom-members-table tbody td:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 45%;
        padding-right: 10px;
        font-weight: 700;
        color: #374151;
        text-align: left;
        font-size: 12px;
    }

    /* Ensure child elements display inline and don't break layout */
    .ld-custom-members-table tbody td span,
    .ld-custom-members-table tbody td a {
        display: inline;
        text-align: left;
    }

    /* Override global nth-child rules for mobile */
    .team_member_list_table.ld-custom-members-table tbody td:nth-child(2),
    .team_member_list_table.ld-custom-members-table tbody td:nth-child(3) {
        padding: 8px 0 !important;
        padding-left: 50% !important;
        text-align: left !important;
        width: 100% !important;
    }

    /* First column prominent (Team Member Name) */
    .ld-custom-members-table tbody td:first-child {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #2872FA !important;
        padding-bottom: 12px !important;
        border-bottom: 1px solid #e1e8ed !important;
        margin-bottom: 10px !important;
        padding-left: 0 !important;
    }

    .ld-custom-members-table tbody td:first-child:before {
        display: none;
    }

    /* Last column (Edit button) - full width, centered */
    .ld-custom-members-table tbody td:last-child {
        padding-left: 0 !important;
        text-align: center !important;
        padding-top: 15px !important;
        padding-bottom: 0 !important;
    }

    .ld-custom-members-table tbody td:last-child:before {
        display: none;
    }

    .ld-custom-members-table tbody td:last-child .btn_groups_plus {
        display: block !important;
        width: 100% !important;
        min-height: 44px !important;
        font-size: 14px !important;
        padding: 12px !important;
        margin: 0 !important;
    }

    /* Email icon touch-friendly */
    .ld-custom-members-table .email_icon {
        font-size: 24px !important;
        padding: 8px !important;
        min-height: 36px !important;
        display: inline-block !important;
    }

    /* Footer Export CSV button */
    .ld-custom-members-table tfoot {
        display: block;
    }

    .ld-custom-members-table tfoot tr {
        display: block;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }

    .ld-custom-members-table tfoot td {
        display: block !important;
        text-align: center !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
    }

    .ld-custom-members-table tfoot .btn_groups_plus {
        display: block !important;
        width: 100% !important;
        max-width: 300px !important;
        margin: 0 auto !important;
        min-height: 44px !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
    }

    /* Empty state handling - "No users found" message */
    .ld-custom-members-table tbody tr:has(td[colspan]) {
        display: table-row !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .ld-custom-members-table tbody td[colspan] {
        display: table-cell !important;
        padding: 20px !important;
        text-align: center !important;
    }

    /* ========================================================================
       END VERSION 2.4.42: GROUP MEMBERS TABLE - MOBILE RESPONSIVE CARDS
       ======================================================================== */

    /* Summary cards - stack vertically */
    .woo-summary-cards {
        flex-direction: column !important;
        gap: 15px !important;
        margin: 20px 0 !important;
    }

    .woo-card {
        padding: 15px !important;
    }

    .woo-card h3 {
        font-size: 14px !important;
    }

    .woo-card p {
        font-size: 22px !important;
    }

    /* Courses section - adjust grid */
    .woo-courses-section {
        grid-template-columns: 1fr !important;
    }

    /* Welcome message adjustments */
    .woo-dashboard-header .woo-welcome-message {
        font-size: 16px !important;
    }

    /* Mobile button text adjustments */
    .woo-view-all a {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
}

/* Version 1.7.1: Continue button styling for ongoing courses */
.woo-table .resume-btn a.uo-course-resume-btn {
    background-color: #2067FA !important;
    color: #fff !important;
    padding: 8px 15px;
    text-decoration: none;
    border-radius: 4px;
    font-size: 13px;
    display: block;
    width: 100%;
    text-align: center;
    transition: all 0.3s ease;
    font-weight: 500;
    box-sizing: border-box;
}

.woo-table .resume-btn a.uo-course-resume-btn:hover {
    background-color: #1554d1 !important;
    color: #fff !important;
    opacity: 0.9;
}

/* Version 1.7.6: Hide duplicate DataTables sorting arrows on dashboard tables */
.woo-ongoing-courses .woo-table thead th.sorting:before,
.woo-ongoing-courses .woo-table thead th.sorting:after,
.woo-ongoing-courses .woo-table thead th.sorting_asc:before,
.woo-ongoing-courses .woo-table thead th.sorting_asc:after,
.woo-ongoing-courses .woo-table thead th.sorting_desc:before,
.woo-ongoing-courses .woo-table thead th.sorting_desc:after,
.woo-completed-courses .woo-table thead th.sorting:before,
.woo-completed-courses .woo-table thead th.sorting:after,
.woo-completed-courses .woo-table thead th.sorting_asc:before,
.woo-completed-courses .woo-table thead th.sorting_asc:after,
.woo-completed-courses .woo-table thead th.sorting_desc:before,
.woo-completed-courses .woo-table thead th.sorting_desc:after,
.woo-available-courses .woo-table thead th.sorting:before,
.woo-available-courses .woo-table thead th.sorting:after,
.woo-available-courses .woo-table thead th.sorting_asc:before,
.woo-available-courses .woo-table thead th.sorting_asc:after,
.woo-available-courses .woo-table thead th.sorting_desc:before,
.woo-available-courses .woo-table thead th.sorting_desc:after {
    display: none !important;
}

/* Version 1.7.1: Start Course button styling for available courses */
.woo-table a.woo-btn.enroll-btn {
    background-color: #2067FA !important;
    color: #fff !important;
    padding: 8px 15px !important;
    text-decoration: none;
    border-radius: 4px;
    font-size: 13px;
    display: block;
    width: 100%;
    text-align: center;
    transition: all 0.3s ease;
    font-weight: 500;
    box-sizing: border-box;
}

.woo-table a.woo-btn.enroll-btn:hover {
    background-color: #1554d1 !important;
    color: #fff !important;
    opacity: 0.9;
}

/* Center align name columns in Group Leader Dashboard tables */
.ldcs-table-group-leader td:first-child,
.ldcs-inactive-users td:first-child,
#ld-completed-courses td:first-child,
#ld-users-progress td:first-child,
.team_member_list_table td:first-child {
    text-align: center !important;
}

/* Edit button styling */
.edit-user-btn {
    background-color: #2067fa;
    color: white !important;
    padding: 4px 12px;
    border-radius: 4px;
    text-decoration: none !important;
    font-size: 13px;
    display: inline-block;
    transition: background-color 0.2s;
}

.edit-user-btn:hover {
    background-color: #1554d1;
    color: white !important;
}

/* Style buttons on group-members page */
.team_member_list_table a.button,
.team_member_list_table a.btn,
.team_member_list_table button,
.team_member_list_table input[type="button"],
.team_member_list_table input[type="submit"],
.groups_user_table a.button,
.groups_user_table a.btn,
.groups_user_table button,
.btn_groups_plus,
a[href*="change-password"],
a[href*="export-csv"],
.export-csv-btn,
.change-password-btn {
    background-color: #2067fa !important;
    color: white !important;
    padding: 4px 12px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    font-size: 13px !important;
    display: inline-block !important;
    transition: background-color 0.2s !important;
    border: none !important;
    cursor: pointer !important;
}

.team_member_list_table a.button:hover,
.team_member_list_table a.btn:hover,
.team_member_list_table button:hover,
.team_member_list_table input[type="button"]:hover,
.team_member_list_table input[type="submit"]:hover,
.groups_user_table a.button:hover,
.groups_user_table a.btn:hover,
.groups_user_table button:hover,
.btn_groups_plus:hover,
a[href*="change-password"]:hover,
a[href*="export-csv"]:hover,
.export-csv-btn:hover,
.change-password-btn:hover {
    background-color: #1554d1 !important;
    color: white !important;
}

/* ========================================================================
   VERSION 2.4.42: GROUP MEMBERS TABLE - DESKTOP STYLES
   ======================================================================== */

/* Version 2.4.42: Group members table styling (moved from inline template CSS) */
.ld-custom-members-table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
}

.ld-custom-members-table th,
.ld-custom-members-table td {
	padding: 12px 15px;
	text-align: left;
	border-bottom: 1px solid #e0e0e0;
}

.ld-custom-members-table thead th {
	background: #f8f9fa;
	font-weight: 600;
	color: #333;
	border-bottom: 2px solid #ddd;
}

.ld-custom-members-table tbody tr:hover {
	background: #f9f9f9;
}

.ld-custom-members-table .email_icon {
	display: inline-block;
	font-size: 18px;
	color: #2067fa;
	text-decoration: none;
}

.ld-custom-members-table .email_icon:hover {
	color: #1557ea;
}

.ld-custom-members-table .btn_groups_plus {
	display: inline-block;
	padding: 8px 16px;
	margin-right: 10px;
	background: #2067fa;
	color: white !important;
	text-decoration: none;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 500;
	transition: background 0.3s ease;
}

.ld-custom-members-table .btn_groups_plus:hover {
	background: #1557ea;
}

.ld-custom-members-table .btn_groups_plus_black {
	background: #333;
}

.ld-custom-members-table .btn_groups_plus_black:hover {
	background: #000;
}

.ld-custom-members-table tfoot td {
	padding: 15px;
	background: #f8f9fa;
	border-top: 2px solid #ddd;
}

.ld-custom-members-table .groups_plus_info {
	color: #666;
	font-family: monospace;
	font-size: 13px;
}

/* ========================================================================
   VERSION 2.4.32: ORDER SUBSCRIPTION TABLE - DESKTOP STYLES
   ======================================================================== */

/* Ensure order subscription container is full-width on desktop */
.order-subscription,
.order-subscription .dataTables_wrapper,
.woo-table-order-subscription {
    width: 100%;
    max-width: 100%;
}

.order-subscription {
    overflow-x: hidden; /* Prevent horizontal scrollbar */
}

/* Ensure table displays properly on desktop (>768px) */
@media (min-width: 769px) {
    .woo-table-order-subscription {
        display: table;
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed; /* Prevent table from expanding beyond container */
    }

    .woo-table-order-subscription thead {
        display: table-header-group;
    }

    .woo-table-order-subscription tbody {
        display: table-row-group;
    }

    .woo-table-order-subscription tr {
        display: table-row;
    }

    .woo-table-order-subscription th,
    .woo-table-order-subscription td {
        display: table-cell;
    }

    /* Hide mobile labels on desktop */
    .woo-table-order-subscription tbody td:before {
        display: none;
    }
}

/* ========================================================================
   END VERSION 2.4.32: ORDER SUBSCRIPTION TABLE - DESKTOP STYLES
   ======================================================================== */

/* ========================================================================
   VERSION 2.4.35: COURSE REPORT TABLE - DESKTOP STYLES
   ======================================================================== */

/* Ensure course report table is full-width */
.woo-ld-course-report_wrapper,
.woo-table-ld-course-report {
    width: 100%;
    max-width: 100%;
}

/* Desktop display restoration */
@media (min-width: 769px) {
    .woo-table-ld-course-report {
        display: table;
        width: 100%;
        border-collapse: collapse;
    }

    .woo-table-ld-course-report thead {
        display: table-header-group;
    }

    .woo-table-ld-course-report tbody {
        display: table-row-group;
    }

    .woo-table-ld-course-report tr {
        display: table-row;
    }

    .woo-table-ld-course-report th,
    .woo-table-ld-course-report td {
        display: table-cell;
    }

    /* Hide mobile labels on desktop */
    .woo-table-ld-course-report tbody td:before {
        display: none;
    }
}

/* ========================================================================
   END VERSION 2.4.35: COURSE REPORT TABLE - DESKTOP STYLES
   ======================================================================== */

/* ========================================================================
   VERSION 2.4.36: STAFF DASHBOARD TABLES - DESKTOP STYLES
   ======================================================================== */

/* Desktop display restoration for staff dashboard tables */
@media (min-width: 769px) {
    .ldcs-table {
        display: table;
        width: 100%;
        border-collapse: collapse;
    }

    .ldcs-table thead {
        display: table-header-group;
    }

    .ldcs-table tbody {
        display: table-row-group;
    }

    .ldcs-table tr {
        display: table-row;
    }

    .ldcs-table th,
    .ldcs-table td {
        display: table-cell;
    }

    /* Hide mobile labels on desktop */
    .ldcs-table tbody td:before {
        display: none;
    }
}

/* ========================================================================
   END VERSION 2.4.36: STAFF DASHBOARD TABLES - DESKTOP STYLES
   ======================================================================== */

/* ========================================
   DataTables Export Buttons Styling
   ======================================================================== */

/* Export buttons container - position top right like certificates page */
.export-buttons-container {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin-bottom: 15px;
    width: 100%;
    gap: 10px;
}

/* Style CSV and PDF export buttons */
.dt-button.export-csv-btn,
.dt-button.export-pdf-btn {
    background-color: #fff !important;
    color: #000 !important;
    padding: 5px 15px !important;
    border-radius: 3px !important;
    border: 1px solid rgb(183, 183, 183) !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    margin-left: 10px !important;
    display: inline-block !important;
    transition: all 0.2s;
}

.dt-button.export-csv-btn:hover,
.dt-button.export-pdf-btn:hover {
    background-color: #f5f5f5 !important;
    border-color: rgb(150, 150, 150) !important;
    color: #000 !important;
}

/* Remove default DataTables button styling */
.dt-buttons {
    margin-bottom: 0 !important;
}

.dt-button:focus {
    outline: none !important;
}

/* Ensure buttons don't have extra spacing */
.dt-buttons .dt-button {
    margin-right: 0 !important;
}

/* ========================================================================
   VERSION 2.4.45: PURCHASE SEATS MODAL - PROPER CENTERED MODAL STYLING
   ======================================================================== */

/* Modal overlay - full screen with semi-transparent backdrop */
.ldcs-modal {
    display: none;
    position: fixed;
    z-index: 1000000000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}

/* When modal is shown, use flexbox centering */
.ldcs-modal[style*="display: block"],
.ldcs-modal[style*="display: flex"] {
    display: flex !important;
}

/* Modal content box - white background, centered, with shadow */
.ldcs-modal-content {
    background-color: #ffffff;
    margin: auto;
    padding: 30px;
    border: none;
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

/* Close button */
.ldcs-modal .ldcs-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    right: 15px;
    top: 10px;
    cursor: pointer;
    z-index: 1;
}

.ldcs-modal .ldcs-close:hover,
.ldcs-modal .ldcs-close:focus {
    color: #000;
    text-decoration: none;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .ldcs-modal-content {
        width: 95%;
        padding: 20px;
        margin: 10px;
    }
}