.elementor-22054 .elementor-element.elementor-element-be941be{--display:flex;}.elementor-22054 .elementor-element.elementor-global-22178 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-22054 .elementor-element.elementor-global-22178.elementor-element{--align-self:stretch;}.elementor-22054 .elementor-element.elementor-element-293a44c{--display:flex;}/* Start custom CSS for global, class: .elementor-global-22178 *//* Center the leaderboard title and make it smaller */
.gamipress-leaderboard-title {
    text-align: center;
    font-size: 24px; /* Adjust the size as needed */
    font-weight: bold;
    color: #333333;  /* Optional: Customize the text color */
}

/* Style the leaderboard table */
table.dataTable {  /* Assuming it's a DataTable */
    width: 100%;
    margin: 20px auto;  /* Center the table on the page */
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    background-color: #fafafa; /* Table background color */
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);  /* Optional: Add shadow */
}

/* Style table headings */
table.dataTable th {
    background-color: #0073aa;  /* Customize heading background */
    color: white;  /* Heading text color */
    padding: 10px;
    font-size: 18px;  /* Customize heading text size */
}

/* Style table rows */
table.dataTable td {
    padding: 8px;
    text-align: center;
    font-size: 16px;  /* Adjust font size */
}

/* Optional: Style the first row (rank #1) with a different background */
table.dataTable tr:first-child {
    background-color: #ffe680;
}

/* Optional: Add hover effect to table rows */
table.dataTable tbody tr:hover {
    background-color: #f0f8ff;
}

/* Style the search bar container */
.dataTables_filter {
    text-align: right; /* Align the search bar to the right */
}

/* Style the search input */
.dataTables_filter input {
    padding: 8px 12px;
    border: 2px solid #0073aa; /* Border color */
    border-radius: 5px; /* Rounded corners */
    font-size: 14px;
    outline: none; /* Remove outline on focus */
    transition: border-color 0.3s ease; /* Smooth border transition */
}

/* Add focus effect to the search input */
.dataTables_filter input:focus {
    border-color: #ffa500; /* Change border color when focused */
    box-shadow: 0 0 5px rgba(255, 165, 0, 0.5); /* Optional glow effect */
}

/* Optional: Add a search icon inside the input */
.dataTables_filter input::before {
    content: "\f002"; /* FontAwesome search icon code */
    font-family: FontAwesome;
    margin-right: 5px;
}

/* Style the entries dropdown container */
.dataTables_length select {
    padding: 8px 10px;
    border: 2px solid #0073aa;
    border-radius: 5px;
    font-size: 14px;
    background-color: white;
    color: #333;
    outline: none;
    transition: border-color 0.3s ease;
}

/* Add hover effect to the dropdown */
.dataTables_length select:hover {
    border-color: #ffa500;
}

/* Optional: Add styling for the entire container to space it nicely */
.dataTables_length {
    margin-bottom: 20px;
}

/* Align search and entries dropdown in the same line */
.dataTables_wrapper .dataTables_length, 
.dataTables_wrapper .dataTables_filter {
    display: inline-block; /* Display them as inline elements */
    vertical-align: middle; /* Align them vertically in the center */
    margin-bottom: 20px; /* Optional: Add spacing below */
}

/* Add flexbox to the parent container */
.dataTables_wrapper {
    display: flex;
    justify-content: space-between; /* Distribute space between search and entries */
    align-items: center; /* Align them in the center vertically */
    flex-wrap: wrap; /* Ensure responsive behavior for smaller screens */
}

/* Additional styling for the dropdown */
.dataTables_length select {
    padding: 8px 10px;
    border-radius: 5px;
    border: 2px solid #0073aa;
    font-size: 14px;
}

/* Additional styling for the search input */
.dataTables_filter input {
    padding: 8px 12px;
    border-radius: 5px;
    border: 2px solid #0073aa;
    font-size: 14px;
}


/* Hide the page numbers but keep "Previous" and "Next" buttons */
.dataTables_paginate .paginate_button:not(.previous):not(.next) {
    display: none; /* Hides all page numbers */
}

/* Show only "Previous" and "Next" */
.dataTables_paginate .previous, 
.dataTables_paginate .next {
    display: inline-block; /* Ensures the Previous and Next buttons stay visible */
}

/* Hide the ellipsis */
.dataTables_paginate .ellipsis {
    display: none;
}

/* Hide the page numbers and only keep Previous and Next */
.dataTables_paginate .paginate_button:not(.previous):not(.next) {
    display: none;
}

/* Center the Previous and Next buttons */
.dataTables_paginate {
    text-align: center;
}

/* Style the Previous and Next buttons for better visibility */
.dataTables_paginate .paginate_button.previous,
.dataTables_paginate .paginate_button.next {
    padding: 8px 12px;
    background-color: #0073aa;
    color: white;
    border-radius: 5px;
    text-transform: uppercase;
    margin: 0 10px;
    cursor: pointer;
}

/* Add a hover effect for the buttons */
.dataTables_paginate .paginate_button.previous:hover,
.dataTables_paginate .paginate_button.next:hover {
    background-color: #ffa500;
}



/* Hide the 'Showing 1 to 10 of 151 entries' element */
.dataTables_info {
    display: none;
}/* End custom CSS */