#other_matches:before, ul:before, div:before, label:before {
    content:attr(data-header);
    font-size:120%;
    font-weight:bold;
	display:block;
	text-align:left;
}
ul:before{
	position:relative;
	left:-18px;
}	
#home_team_bg{
	opacity:0.03;
	position:absolute;
	height:250px;
	width:250px;
	background-repeat:no-repeat;
	background-position: center;
}
#away_team_bg{
	opacity:0.03;
	position:absolute;
	height:250px;
	width:250px;
	background-repeat:no-repeat;
	background-position: center;
}
.loader {
	position: absolute;
	top: 120px;
	left: 340px;
	width: 200px;
	height: 100px;
	z-index:2;
}
.loading_img {
	width: 200px;
	height: 100px;
}
html, body { background-color: transparent; font-family: Verdana, Geneva, sans-serif; font-size: 14px; color: #022249 }
body {
    max-width: 100%;
    overflow-x: hidden;
}
h2, .header, .card-header { font-size: 1.5rem; font-weight: 700; line-height: 1.2; margin: 0;color: rgb(250, 255, 5); background: linear-gradient(265deg, rgb(0, 20, 60) 0.85%, rgb(9, 40, 108) 102.48%);}
h3 {
    margin-top: 10px; /* Adjust as needed */
}
.input-container {
    display: flex;
    width: max-content; /* Shrink to fit content */
}

.input-group {
    display: flex-start;
	padding-right: 10px;
	width: fit-content !important;
}



.input-group label {
	margin-right: 8px;
}

.input-group input {
    width: 60px !important; /* Set input width */
    height: 24px; /* Reduce input height */
    padding: 12px; /* Adjust padding */
    font-size: 12px; /* Reduce text size */
	flex: none !important;
}

.col-auto {
    min-width: 120px; /* Adjust based on needs */
}
.fw-bold {
    font-weight: bold; /* Bold for header */
}
.lay.input-group {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: flex-start; /* Left-align contents */
}
th input {
    width: 95%;
    padding: 4px;
    box-sizing: border-box;
    font-size: 12px;
	display:none;
}
.b365 {
    color: #005641;
    background: linear-gradient(265deg, 
        rgb(0, 0, 0) 0%, 
        rgb(0, 0, 0) 5%, 
        rgb(0, 100, 0) 25%, 
        rgb(0, 100, 0) 75%, 
        rgb(0, 0, 0) 95%, 
        rgb(0, 0, 0) 100%);
}

#info.b365  {
    color: #fff !important; 
}
.b365 span {
    font-weight: bold;
}

.b365 #other_matches:before{
    content: attr(data-header);
    font-size: 120%;
    font-weight: bold;
    display: block;
    text-align: left;
    color: white !important; /* ✅ Ensures the text is always white */
}
#returnsContainer::before {
    content: attr(data-header);
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
	font-size: 1.75rem;
}
	
.b365 h2, .b365 #event {
    color: #fff; /* Adjust color as needed */
    background: none; /* Remove inherited gradient */
}
.bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.currency {
    font-weight: bold !important;
    display: flex;
    justify-content: center;
}

.currency.positive {
    color: #28a745 !important; /* Green for positive values */
}

.currency.negative {
    color: #dc3545 !important; /* Red for negative values */
}


.dataTables_length {
    order: -1; /* Moves the dropdown to the left */
}

.dataTables_paginate {
    margin-left: auto; /* Keeps pagination on the right */
}
#returnsContainer {
    max-width: 500px; /* Limit width for compact layout */
}

#returnsContainer .row {
    padding: 2px 0; /* Further reduce vertical spacing */
}

#returnsContainer .col-3:first-child {
    text-align: left; /* Keep first column aligned left */
}

#returnsContainer .col-3:not(:first-child) {
    text-align: center; /* Center Lock-In and Underlay columns */
}

/*Mobile Tweaks */
@media (max-width: 800px) { /* Adjust width as needed */
    th:nth-child(4), td:nth-child(4), th:nth-child(2), td:nth-child(2) { /* Hide the 4th column */
        display: none;
    }
	.ms-3 {
        margin-left: 0 !important; /* Removes extra left margin */
    }
	.loader {
		position: absolute;
		top: 140px;
		left: 80px;
		width: 200px;
		height: 100px;
		z-index:2;
	}
}
/*Mobile Tweaks */
@media (max-width: 800px) { /* Adjust width as needed */
    th:nth-child(6), td:nth-child(6), th:nth-child(7), td:nth-child(7), th:nth-child(8), td:nth-child(8) , th:nth-child(9), td:nth-child(9), th:nth-child(12), td:nth-child(12)  
	{ /* Hide Columns on Mobile */
        display: none;
    }
	/* Hide Search Label on Mobile */
	.dataTables_filter label {
		font-size: 0; /* Hides the label text */
	}

	.dataTables_filter input {
		font-size: 16px; /* Ensures the search box remains visible */
	}
	button.willhill {
        padding: 4px 8px; /* Reduce padding */
        font-size: 12px; /* Slightly smaller text */
        width: 100%; /* Full-width for better spacing */
        margin-bottom: 6px; /* Adds space between stacked buttons */
    }
	.filter-actions {
        flex-direction: column; /* Stack buttons */
        align-items: flex-end; /* Keep alignment to the left */
    }
}
@media (min-width: 801px) {
    /* Styles for screens larger than 800px */
	th:nth-child(11), td:nth-child(11), th:nth-child(10), td:nth-child(10) 
	{ /* Hide Columns on Mobile */
        display: none;
    }
}/* Container styling */
.top, .bottom {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #dee2e6; /* Matches Bootstrap’s default table border */
    padding: 8px; /* Adds spacing */
    border-radius: 4px; /* Optional rounded edges */
}

/* Absolute-positioned elements */
.whatsnew {
    position: absolute;
    left: 170px;
    top: 15px;
}

.explainMod {
    position: absolute;
    left: 15px;
    top: 15px;
}

/* Filters section */
.FiltersSection {
    display: flex;
    justify-content: flex-end; /* Aligns to the right */
    width: 100%;
}

/* Filtering controls row */
.filter-controls-container {
    display: flex;
    justify-content: flex-end; /* Aligns to the right */
    width: 100%;
    margin-top: 8px; /* Adds spacing below the first button */
}

.filter-actions {
    display: flex;
    flex-wrap: wrap; /* Allows stacking when necessary */
    justify-content: flex-end; /* Aligns everything to the right */
    gap: 10px; /* Keeps spacing between groups */
}

.button-group {
    display: flex;
    gap: 6px; /* Keeps buttons within each group close */
}

.highlight-th { /* Used to show a filtered columns */
    background: yellow  !important;/* Adjust as needed */
    font-weight: bold;
	background-position: center right !important;
    background-repeat: no-repeat !important;
    background-image: var(--sort-background) !important;
}

button.willhill {
    flex: none; /* Prevents buttons from stretching */
    width: auto; /* Keeps buttons only as big as needed */
}

.min-filter, .max-filter {
    width: 60px; /* Adjust width to fit "Min" & "Max" text */
    padding: 4px;
    text-align: center; /* Centers input values */
}

button.willhill {
    background: linear-gradient(265deg, rgb(0, 20, 60) 0.85%, rgb(9, 40, 108) 102.48%);
    color: yellow;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s ease-in-out, transform 0.2s ease-in-out;
}

/* Hover effect only for `.willhill` buttons */
button.willhill:hover {
    background: linear-gradient(265deg, rgb(0, 30, 90) 0.85%, rgb(15, 55, 130) 102.48%);
    transform: scale(1.05);
}

.filter-actions button {
    margin-left: 8px; /* Adds space between buttons */
}


.rating, .lay, .odds, .boosted_odds, .bettype {
	text-align:center;
}
.player {
	text-align:left;
}
.team {
	text-align:left;
}