/* Pagination Style for All Pages */
body {
    font-family: var(--font-primary);
    font-weight: 500;
}

.pagination {
    justify-content: flex-end;
    font-size: 12px;    
    background-color: #5f5f5f;
    width: 100%;
    height: 25px;
    padding-right: 30px;
    margin-top: -25px;
    box-sizing: border-box;
    gap: 5px;
    margin-left: auto;
    margin-right: auto;
}



    /* Pagination Link Style */
    .pagination a {
        padding: 0px 5px; /* Increased padding for better click area */
        margin: 0 5px; /* More spacing between the links */
        text-decoration: none;
        color: #f5f5f5;
        border-radius: 5px; /* Rounded corners */
        transition: all 0.1s ease; /* Smooth transition for all properties */
    }

        /* Active Pagination Link */
        .pagination a.active {
            font-weight: bold;
            color: #ff5722;
            font-size: 16px;
            background-color: var(--primary); /* Highlight active link */
            //background-color: #ff5722;
            color: white; /* Text color for active link */
            transform: translateY(-3px); /* Lift the active link slightly */
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.6); /* Subtle shadow for the active link */
            transition: all 0.3s ease;
        }

        /* Hover Effect for Pagination Link */
        .pagination a:hover {
            text-decoration: underline;
            background-color: #f0f0f0; /* Subtle background change on hover */
            color: #5f5f5f; /* Maintain original color on hover */
            transform: translateY(-3px); /* Lift the link up on hover */
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); /* Slight shadow on hover */
        }

        /* Optional: Disable the links when they are not active (e.g. the "previous" or "next" link) */
        .pagination a.disabled {
            color: #ddd; /* Disabled link color */
            pointer-events: none; /* Prevent interaction */
            opacity: 0.5; /* Make disabled link slightly faded */
        }

        /* Add some space at the end of pagination links */
        .pagination a:last-child {
            margin-right: 0;
        }


    .pagination span {
        color: #ddd;
        padding-left: 5px;
        padding-right: 5px;
        font-size: 12px;
    }


.pagesize {
    color: #ddd !important;
    padding-top: 2px;
    appearance: none;
    font-size: 13px !important;
      
}

    .pagesize select {
        color: var(--primary);
        border: 1px solid #444;
    }

        .pagesize select:hover {
            color: var(--primary);
            border: 1px solid var(--primary);
        }

                
        /* On focus (highlight when clicked) */
        .pagesize select:focus {
            color: var(--primary);
            border: 1px solid var(--primary);
            outline: none; /* Remove default outline */
            box-shadow: 0 0 5px var(--primary); /* Optional glow effect */
        }