@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

/* Dark mode styles */
body {
    background-color: black;
    color: #e0e0e0;
}

/* Real-time update animations */
.flash-increase {
    animation: flash-green 6s ease-in-out;
}
.flash-decrease {
    animation: flash-red 6s ease-in-out;
}
.flash-update {
    animation: flash-yellow 6s ease-in-out;
}

@keyframes flash-green {
    0%, 100% { background-color: transparent; }
    15%, 65% { background-color: #4caf50; color: white; }
}

@keyframes flash-red {
    0%, 100% { background-color: transparent; }
    15%, 65% { background-color: #f44336; color: white; }
}

@keyframes flash-yellow {
    0%, 100% { background-color: transparent; }
    15%, 65% { background-color: #ffeb3b; }
}

/* WebSocket connection status indicator */
.connection-status {
    position: fixed;
    top: 10px;
    right: 10px;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    z-index: 1000;
}

.status-connected {
    background-color: #4caf50;
    color: white;
}

.status-disconnected {
    background-color: #f44336;
    color: white;
}

.status-connecting {
    background-color: #ff9800;
    color: white;
}

/* Debug section for POC testing */
.debug-section {
    margin: 20px;
    padding: 20px;
    background: #f5f5f5;
    border-radius: 4px;
}

#debug-log {
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto;
    font-family: monospace;
    font-size: 12px;
    background: white;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

table {
    margin-top: 0;
    width: auto; /* Adjust this if you want the table to have a specific width or let it be auto */
    border-collapse: collapse;
}

.tapped-cell {
    background-color: #f0f0f0; /* Example color change */
    transition: background-color 0.3s ease; /* Smooth transition. */
}

.Bet365 a, .B3 a, .B365 a, .b3 a, .b365 a, .bet365 a {
    color: white !important;
}

.Bet365 a, .B3 a, .B365 a, .b3 a, .b365 a, .bet365 a,
.Betrivers a, .BR a, .br a,
.Espnbet a, .EspnBet a, .ESPNBet a, .EB a, .eb a, 
.FanDuel a, .FD a, .fd a,
.DraftKings a, .DK a, .dk a,
.BetMgm a, .BetMGM a, .MG a, .mg a,
.Caesars a, .CZ a, .cz a,
.Fanatics a, .Fanatics a, .FN a, .fn a,
.BetOnline a, .BO a, .bo a, .betonline a,
.Bovada a, .BV a, .bv a,
.PropBuilder a, .PB a, .pb a,
.SuperBook a, .SB a, .sb a,
.HardRockBet a, .HR a, .hr a,
.BetFred a, .BF a, .bf a,
.Pinnacle a, .PN a, .pn a,
.Circa a, .CA a, .ca a,
.BookMaker a, .BM a, .bm a,
.YourWay a, .YW a, .yw a {
    color: inherit;
    font-weight: bold;
    transition: opacity 0.3s ease;
}

th, td {
    border: none; /* Removed all table cell borders */
    text-align: left;
    padding: 10px 12px; /* Increased padding for better spacing */
    background-color: black;
    color: #4CAF50;
    /* min-width: 80px; /* Optional: Set a minimum width */
    white-space: nowrap; /* Prevents text from wrapping */
    /* Remove position: relative !important; */
    overflow: hidden;  /* Changed from visible !important to hidden */
    vertical-align: middle !important;
    font-size: 15px; /* Slightly larger font */
}
th {
    font-weight: bold;
    
}


        th {
            cursor: pointer;
        }

        body {
            background-color: black;
            color: #4CAF50;
            font-family: 'Roboto', sans-serif;
        }
	.Bet365, .B3, .B365, .b3, .b365, .bet365 {
        background-color: green;
        color: white !important;
    }

    .BetRivers, .BR, .br {
        background-color: #070B64;
        color: #FFB717;
    }

    .EspnBet, .Espn_Bet, .ESPNBet, .EB, .eb {
        background-color: #031229;
        color: #72F0CB;
    }

    .FanDuel, .FD, .fd {
        background-color: #0078FF;
        color: white;
    }

    .DraftKings, .DK, .dk {
        background-color: #37CD3F;
        color: black;
    }

    .BetMgm, .BetMGM, .MG, .mg {
        background-color: #C1A970;
        color: black;
    }

    .Caesars, .CZ, .cz {
        background-color: #0A3532;
        color: #CBB57B;
    }

    .Fanatics, .FN, .fn {
        background-color: #080808;
        color: #E74536;
    }

    .BetOnline, .BO, .bo, .betonline {
        background-color: #2D2E2C;
        color: #EE3536;
    }
    
    .Bovada, .BV, .bv {
        background-color: #FF0000;
        color: #FFFFFF;
    }

    .PropBuilder, .PB, .pb {
        background-color: #970000;
        color: #FFFFFF;
    }
    
    .SuperBook, .SB, .sb {
        background-color: #000000;
        color: #Ffd700;
    }
    
    .HardRockBet, .HR, .hr {
        background-color: #1C1C1C;
        color: #6B52AE;
    }
    
    .BetFred, .BF, .bf {
        background-color: #0000FF;
        color: #FFFFFF;
    }
    
    .Pinnacle, .PN, .pn {
        background-color: #042D59;
        color: #fd5602;
    }
    
    .Circa, .CA, .ca {
        background-color: black;
        color: white;
    }
    
    .BookMaker, .BM, .bm {
        background-color: #000000;
        color: #FFD700;
    }

    .YourWay, .YW, .yw {
        background-color: #004C99;
        color: white;
    }
    
    /* Arbitrage page book styles in Outcomes column */
    .outcome-book {
        font-weight: bold;
    }
    
    .outcome-book.fd, .outcome-book.FD,
    .outcome-book.fd a, .outcome-book.FD a {
        color: #0078FF !important;
    }
    
    .outcome-book.dk, .outcome-book.DK,
    .outcome-book.dk a, .outcome-book.DK a {
        color: #37CD3F !important;
    }
    
    .outcome-book.mg, .outcome-book.MG,
    .outcome-book.mg a, .outcome-book.MG a {
        color: #C1A970 !important;
    }
    
    .outcome-book.cz, .outcome-book.CZ,
    .outcome-book.cz a, .outcome-book.CZ a {
        color: #CBB57B !important;
    }
    
    .outcome-book.b3, .outcome-book.B3, .outcome-book.b365, .outcome-book.B365, .outcome-book.bet365,
    .outcome-book.b3 a, .outcome-book.B3 a, .outcome-book.b365 a, .outcome-book.B365 a, .outcome-book.bet365 a {
        color: white !important;
    }
    
    .outcome-book.br, .outcome-book.BR,
    .outcome-book.br a, .outcome-book.BR a {
        color: #FFB717 !important;
    }
    
    .outcome-book.eb, .outcome-book.EB,  .ESPNBet, .espnbet, .espnbet
    .outcome-book.eb a, .outcome-book.EB a, .outcome-book.espnbet a, .outcome-book.ESPNBet a {
        color: #72F0CB !important;
    }
    
    .outcome-book.fn, .outcome-book.FN,
    .outcome-book.fn a, .outcome-book.FN a {
        color: #E74536 !important;
    }
    
    .outcome-book.bo, .outcome-book.BO, .outcome-book.betonline,
    .outcome-book.bo a, .outcome-book.BO a, .outcome-book.betonline a {
        color: #EE3536 !important;
    }
    
    .outcome-book.bv, .outcome-book.BV,
    .outcome-book.bv a, .outcome-book.BV a {
        color: #FFFFFF !important;
    }
    
    .outcome-book.pb, .outcome-book.PB,
    .outcome-book.pb a, .outcome-book.PB a {
        color: #FFFFFF !important;
    }
    
    .outcome-book.sb, .outcome-book.SB,
    .outcome-book.sb a, .outcome-book.SB a {
        color: #FFD700 !important;
    }
    
    .outcome-book.hr, .outcome-book.HR,
    .outcome-book.hr a, .outcome-book.HR a {
        color: #6B52AE !important;
    }
    
    .outcome-book.bf, .outcome-book.BF,
    .outcome-book.bf a, .outcome-book.BF a {
        color: #FFFFFF !important;
    }
    
    .outcome-book.pn, .outcome-book.PN,
    .outcome-book.pn a, .outcome-book.PN a {
        color: #fd5602 !important;
    }
    
    .outcome-book.ca, .outcome-book.CA,
    .outcome-book.ca a, .outcome-book.CA a {
        color: white !important;
    }
    
    .outcome-book.bm, .outcome-book.BM,
    .outcome-book.bm a, .outcome-book.BM a {
        color: #FFD700 !important;
    }

    .outcome-book.yw, .outcome-book.YW, .outcome-book.yourway, .outcome-book.YourWay,
    .outcome-book.yw a, .outcome-book.YW a, .outcome-book.yourway a, .outcome-book.YourWay a {
        color: white !important;
    }
    
    #tabNav {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        position: relative !important;
    }

    #tabNav a {
        border: 2px solid #4CAF50;
        color: #4CAF50;
        padding: 10px;
        text-decoration: none;
    }


    #tabNav a.active {
        font-weight: bold;
		background-color: #4CAF50;
		color: black;
    }

	#tabNav a.active, #hiddenTab.active {
		font-weight: bold;
		background-color: #4CAF50;
		color: black;
	}


    #tabNav a:hover {
        background-color: #4CAF50;
        color: black;
    }
	
	a {
    color: #4CAF50;  /* This will set all links to the green color */
    text-decoration: none;  /* This will remove underlines from links */
}

/* Add this after your existing hover styles (around line 184) */
.hovered-cell {
    background-color: #4CAF50 !important;
    color: black !important;
    transition: background-color 0.1s, color 0.1s !important;
}

/* Ensure links within hovered cells also change color */
.hovered-cell a {
    color: black !important;
    background-color: transparent !important;
    transition: color 0.1s !important;
}


/* Existing styles */
/* General hover styles for all pages */
.hoverable-cell, .hoverable-player-names, .hoverable-text {
    cursor: pointer;
}

.hoverable-cell:hover, .hoverable-player-names:hover, .hoverable-text:hover {
    background-color: #4CAF50 !important;
    color: black !important;
    transition: background-color 0.1s, color 0.1s !important;
}

/* Ensure links within hoverable cells also change color */
.hoverable-cell:hover a, .hoverable-player-names:hover a, .hoverable-text:hover a {
    color: black !important;
    background-color: transparent !important;
    transition: color 0.1s !important;
}
  
  /* Existing styles for the popup *//* Modify hover popup styles */
.hover-popup {
    position: absolute;
    z-index: 1001;
    background: #4CAF50;
    border: 4px solid #4CAF50;
    padding: 1px;
    margin: 0;
    box-shadow: none;
    transition: none;
    border-radius: 12px !important;
    overflow: visible !important;
}

/* Style the table inside hover popup */
.hover-popup table {
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* Round the corners of cells in the first and last rows */
.hover-popup table tr:first-child th,
.hover-popup table tr:first-child td {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

.hover-popup table tr:last-child td {
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* Betslip popup specific styles */
.hover-popup.betslip-popup {
    background-color: #f9f9f9;
    border-color: #4CAF50;
    border-radius: 12px !important;
}

/* For FBB page specifically */
body[data-page="fbb"] .hover-popup {
    transition: none !important;
    border-radius: 12px !important;
}

/* FBB page table styles */
body[data-page="fbb"] .hover-popup table {
    border-radius: 8px !important;
    overflow: hidden !important;
}

body[data-page="fbb"] .hover-popup table tr:first-child th,
body[data-page="fbb"] .hover-popup table tr:first-child td {
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
}

body[data-page="fbb"] .hover-popup table tr:last-child td {
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* ===== Base Classes for Dynamic Elements ===== */

/* Base styles for hover popups - dynamic positioning handled by JavaScript */
.hover-popup-base {
    position: absolute;
    z-index: 1001;
    background: #4CAF50;
    border: 4px solid #4CAF50;
    padding: 1px;
    margin: 0;
    box-shadow: none;
    transition: none;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Base styles for info tooltips - dynamic positioning handled by JavaScript */
.info-tooltip-base {
    position: fixed;
    z-index: 2147483647; /* Maximum z-index to ensure tooltip appears above everything */
    background: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    text-align: center;
    width: max-content;
    max-width: 300px;
    border: 1px solid #4CAF50;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    display: none; /* Hidden by default, shown via JavaScript */
}

/* Close button for popups */
.popup-close-button {
    float: right;
    cursor: pointer;
    background: none;
    border: none;
    color: inherit;
    font-size: 18px;
    padding: 2px 6px;
    line-height: 1;
}

.popup-close-button:hover {
    color: #FF0000;
}

table td[data-column='rank'].rank-1 {
    background-color: #50E050 !important; /* Light Green */
    color: black !important; /* Ensures readability */
}

table td[data-column='rank'].rank-2 {
    background-color: #FFEB3B !important; /* A soft yellow */
    color: black !important; /* Ensures readability */
}

table td[data-column='rank'].rank-3 {
    background-color: #FF9800 !important; /* A moderate orange */
    color: black !important; /* Ensures readability */
}

table td[data-column='rank'].rank-4 {
    background-color: #FF7F50 !important; /* Coral, a gentler red */
    color: black !important; /* Ensures readability */
}

table td[data-column='rank'].rank-5 {
    background-color: #F44336 !important; /* A darker red, not too bright */
    color: black !important; /* Ensures readability */
}

/* Add these new styles */
#oddsTable td, #oddsTable2 td, #fbbtOddsTable td, #fbbtOddsTable2 td {
    position: relative; /* Ensure relative positioning for table cells */
}




/* Correcting the duplicate selector */
a {
  color: #4CAF50;
  text-decoration: none;
}

/* Add some top margin to the main content of your page so it doesn't overlap */
.main-content {
  margin-top: 10px; /* Adjust this value based on your actual layout and class names */
}


.inactive-link {
  color: #808080 !important; /* Grey color */
  pointer-events: none; /* Disables the link from being clickable */
  cursor: default; /* Changes cursor to default to indicate it's not clickable */
}






/* Sort indicators for table headers */
th.sorted {
    font-weight: bold;
    background-color: #4CAF50;
    color: black;
}

/* Active filter dropdown highlighting */
select.filter-active {
    border: 2px solid #FFD700 !important; /* Yellow/gold border */
    background-color: rgba(255, 215, 0, 0.1) !important; /* Subtle yellow background */
}

input.filter-active {
    border: 2px solid #FFD700 !important; /* Yellow/gold border for text inputs */
    background-color: rgba(255, 215, 0, 0.1) !important; /* Subtle yellow background */
}

/* Style adjustments for specific table structure */
#originalOddsTable, #boostedOddsTable {
    margin-left: 0;
    margin-right: auto; /* Align tables to the left of their container */
}


/* Dropdown styling */
.nav-item {
    position: relative !important; /* Make sure position is relative */
    color: #fff;
    cursor: pointer;
    padding: 0px 0;
    transition: color 0.3s ease;
    z-index: 1000; /* Add z-index */
}

.dropdown {
    position: absolute !important; /* Force absolute positioning */
    top: 100% !important; /* Position below the nav-item */
    left: 0 !important;
    
    min-width: auto;
    white-space: nowrap;
    
    z-index: 1001 !important; /* Higher z-index than nav-item */
    margin-top: 0 !important; /* Remove any margin */
}

/* Update mobile styles to handle dropdowns differently on small screens */
@media (max-width: 1024px) {
    .nav-item {
        width: 100%;
        padding: 15px;

    }

    .dropdown {
        position: static !important; /* Reset to static for mobile */

    }
}

.dropdown-content {
    display: none;
    position: absolute !important;
    background-color: black !important;
    min-width: 200px !important;
    box-shadow: none !important; /* Remove box shadow */
    border: 2px solid #4CAF50 !important; /* Single clean border */
    z-index: 1001 !important;
    border-radius: 12px !important;
}


.custom-menu-item {
    display: block;
    color: #4CAF50;
    text-decoration: none;
    padding: 8px 12px;
    transition: background-color 0.1s, color 0.1s;
    text-align: left;
    z-index: 1000;
}

.custom-menu-item:hover {
    background-color: #4CAF50;
    color: black;
    z-index: 1000;
}

/* Remove spacing between menu items */
.dropdown-content a {
    display: block;
    margin-bottom: 0; /* Remove margin between items */
    color: #4CAF50; /* Green text to match the theme */
    text-decoration: none;
    transition: background-color 0.1s, color 0.1s; /* Smooth transition for hover effect */
    text-align: left;
    padding: 0; /* Remove padding for no spacing */
    z-index: 1000;
}

.dropdown-content a:last-child {
    margin-bottom: 0; /* Remove margin for the last item */
}

.dropdown-content a:last-child {
    margin-bottom: 0;
}

/* Hover effect for dropdown items */
.dropdown-content a:hover {
    background-color: #4CAF50;
    color: black;
    z-index: 1000;
}





/* Style adjustments for the dropdown button */
#tabNav a.dropbtn {
    background-color: black;
    color: #4CAF50;
    padding: 10px;
    font-weight: bold;
    cursor: pointer;
    box-sizing: border-box;
    position: relative; /* Ensure the dropdown content is positioned relative to the button */
}

/* Ensure the dropdown content is also aligned properly */
#tabNav .dropdown-content a, #linesNav .dropdown-content a {
    text-align: left !important;
    justify-content: flex-start !important; /* Override center alignment */
    padding: 8px 12px;
    z-index: 1000;
}

/* Show the dropdown menu on hover for non-click-dropdowns */
.dropdown:not(.click-dropdown):hover .dropdown-content {
    display: block;
}

/* Initially hide dropdown-content for click-dropdowns, no need to specify hover */
.dropdown.click-dropdown .dropdown-content {
    display: none;
}


/* Custom Menu Button */
.custom-menu-button {
    background-color: #4CAF50;
    color: black;
    border: none;
    padding: 5px 10px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 2px;
    transition: background-color 0.3s ease;
    position: relative;
    z-index: 1000; /* Ensure the button is above the table cell but below the dropdown */
}


.custom-menu-button:hover {
    background-color: #367c39;
}

/* Custom Dropdown Content */
.custom-dropdown-content {
    position: fixed; /* Changed to fixed */
    background-color: black;
    min-width: 120px;
    width: max-content;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10000; /* Very high z-index */
    border: 2px solid #4CAF50;
    /* Remove display:none, as we'll control visibility with JS */
}


.custom-dropdown-content.show {
    display: block;
}

/* Custom Menu Items */
.dropdown.click-dropdown .custom-menu-item {

    display: block;
    color: #4CAF50;
    text-decoration: none;
    padding: 10px 15px; /* Increased padding on all sides */
    transition: background-color 0.1s, color 0.1s;
}

.dropdown.click-dropdown .custom-menu-item:hover {
    background-color: #4CAF50;
    color: black;
}

/* Ensure the dropdown is positioned correctly */
.dropdown.click-dropdown .custom-menu-button {

    position: relative;
}

/* Adjust the dropdown position */
.dropdown.click-dropdown .custom-menu-button {

    top: 100%;
    left: 0;
    margin-top: 0;
}


.dropdown-content.show {
  display: block !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 1001 !important; /* Increased z-index to ensure it's above everything */
}

/* Adjustments for new column titles */
#originalOddsTable th:nth-child(1) {
    text-align: left;
}

#originalOddsTable th:nth-child(2), #originalOddsTable th:nth-child(3) {
    text-align: left;
}

/* Show the dropdown menu on hover for non-click-dropdowns */
.dropdown:not(.click-dropdown):hover .dropdown-content {
    display: block;
}

/* Initially hide dropdown-content for click-dropdowns, no need to specify hover */
.dropdown.click-dropdown .dropdown-content {
    display: none;
}

#oddsTable th, #oddsTable2 th, #fbbtOddsTable th, #fbbtOddsTable2 th {
    text-align: center; /* Center-align text content */
}

#oddsTable th .info-icon, #oddsTable2 th .info-icon, #fbbtOddsTable th .info-icon, #fbbtOddsTable2 th .info-icon {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 1;
}

.dropdown-content {
    display: none;
}

.info-icon {
    position: relative;
    display: inline-block;
    cursor: pointer;
    transition: opacity 0.3s ease, z-index 0.1s ease;
    z-index: 100; /* Base z-index */
}

/* Ensure hovered info-icon is above others */
.info-icon:hover {
    z-index: 1000 !important;
}

@media (max-width: 768px) {
    .info-icon::after {
        bottom: auto;
        top: 100%;
    }
}

#tabNav a, #linesNav a {
    border: 2px solid #4CAF50;
    color: #4CAF50;
    padding: 10px;
    text-decoration: none;
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: center;  /* Center horizontally */

    height: 100%; /* Ensure full height alignment */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}



#tabNav a, #linesNav a {
    border: 2px solid #4CAF50;
    color: #4CAF50;
    padding: 10px;
    text-decoration: none;
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: center;  /* Center horizontally */

    height: 100%; /* Ensure full height alignment */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

#tabNav a.active, #linesNav a.active {
    font-weight: bold;
    background-color: #4CAF50;
    color: black;
}

#tabNav a:hover, #linesNav a:hover {
    background-color: #4CAF50;
    color: black;
}

#tabNav .dropdown {
    position: relative !important; /* Ensures the .dropdown-content is positioned relative to this */
}

#tabNav .dropdown-content {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background-color: black !important;
    min-width: 200px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    z-index: 1001 !important;
}

#tabNav .dropdown-content {
    border: none !important; /* Removes the extra 'second' border */
    margin: 0 !important;    /* Ensures no extra gap that appears like a border */
    box-shadow: none !important; /* Just in case there's a faint box shadow */
}



#tabNav .dropbtn {
    padding: 5px 10px; /* Match padding with other nav items */
}


#linesNav {
    display: flex; /* Ensure it aligns horizontally */
    height: 100%; /* Ensure full height alignment */
    align-items: center; /* This will vertically center-align the items */
    gap: 0;
}


.over-under-tab {
    margin: 0; /* No spacing between Over and Under tabs */
}

.line-tabs-container {
    display: flex;
    gap: 0; /* Flush line tabs */
    margin-left: 10px; /* Add a gap before the first line tab */
}

.line-tab {
    margin: 0; /* Remove extra margin */
}

a[href="/"] img {
    background-color: transparent !important;
}
a[href="/"]:hover img {
    background-color: transparent !important;
}

/* Sub-menu positioning */
.sub-menu-container {
    position: relative !important;
}

.sub-menu-button {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    color: #4CAF50;
    background-color: black;
    border: none;
    text-align: left;
    width: 100%;
    cursor: pointer;
}

.sub-menu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background-color: black;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 9999;
}

.sub-menu-button:hover {
    background-color: #4CAF50;
    color: black;
}



.sub-menu-container:hover .sub-menu {
    display: block;
}

.sub-menu a {
    color: #4CAF50;
    padding: 8px 12px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.sub-menu a:hover {
    background-color: #4CAF50;
    color: black;
}

/* ... existing code ... */
button,
.button,
a.button,
input[type="submit"] {
  background-color: #4CAF50;
  color: #000;
  border: none;
  padding: 5px 5px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 2px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
}

button:hover,
.button:hover,
a.button:hover,
input[type="submit"]:hover {
  background-color: #367c39;
}

/* Select elements (picklists) styling */
select {
  background-color: black;
  color: #4CAF50;
  border: 1px solid #4CAF50;
  padding: 2px 4px;
  font-size: inherit;
  border-radius: 2px;
  cursor: pointer;
  font-family: 'Roboto', sans-serif;
  transition: border-color 0.3s ease;
}

select:hover {
  border-color: #367c39;
}

select:focus {
  outline: none;
  border-color: #367c39;
  box-shadow: 0 0 3px rgba(76, 175, 80, 0.3);
}

/* Style the select options */
select option {
  background-color: black;
  color: #4CAF50;
  padding: 2px;
}

select option:hover {
  background-color: #4CAF50;
  color: black;
}

/* Input text elements styling */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea {
  background-color: black;
  color: #4CAF50;
  border: 1px solid #4CAF50;
  padding: 2px 4px;
  font-size: inherit;
  border-radius: 2px;
  font-family: 'Roboto', sans-serif;
  transition: border-color 0.3s ease;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
textarea:hover {
  border-color: #367c39;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus {
  outline: none;
  border-color: #367c39;
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
}

/* Placeholder text styling */
input::placeholder,
textarea::placeholder {
  color: #4CAF50;
  opacity: 0.6;
}

/* Disabled form elements */
input:disabled,
select:disabled,
textarea:disabled {
  background-color: #1a1a1a;
  color: #4CAF50;
  opacity: 0.5;
  cursor: not-allowed;
}

/* Checkbox styling */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 16px;
  height: 16px;
  background-color: black;
  border: 1px solid #4CAF50;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  margin: 0 4px;
  transition: all 0.3s ease;
}

input[type="checkbox"]:hover {
  border-color: #367c39;
}

input[type="checkbox"]:checked {
  background-color: #4CAF50;
  border-color: #4CAF50;
}

input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 6px;
  height: 10px;
  border: solid black;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 3px rgba(76, 175, 80, 0.3);
}

input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Label styling for checkboxes */
label:has(input[type="checkbox"]) {
  cursor: pointer;
  color: #4CAF50;
}


#betslip-container {
    position: fixed;
    right: -300px;
    top: 0;
    width: 300px;
    height: 100%;
    background-color: black;
    border-left: 1px solid #4CAF50;
    color: #4CAF50;
    transition: right 0.3s ease;
    overflow-y: auto;
    z-index: 9999; /* Lowered from 1002 */
}

#betslip-container.visible {
    right: 0; /* Slide in when visible */
}
.betslip-item {
    padding: 5px;
    border-bottom: 1px solid #4CAF50;
    position: relative;
    font-size: 16px;
    line-height: 1.2;
}

.betslip-item > * {
    margin: 2px 0;
}

/* New styles for book abbreviations in betslip */
.betslip-item .book-abbr {
    display: inline-block;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: bold;
    font-size: 14px;
}

.betslip-item .fd {
    background-color: #0078FF;
    color: white;
}

.betslip-item .dk {
    background-color: #37CD3F;
    color: black;
}

.betslip-item .mg {
    background-color: #C1A970;
    color: black;
}

.betslip-item .cz {
    background-color: #0A3532;
    color: #CBB57B;
}

.betslip-item .b3,
.betslip-item .B3,
.betslip-item .b365,
.betslip-item .B365,
.betslip-item .bet365,
.betslip-item .BET365,
.betslip-item .bet365 a,
.betslip-item .BET365 a {
    background-color: green;
    color: white;
}


.betslip-item .br {
    background-color: #070B64;
    color: #FFB717;
}

.betslip-item .eb {
    background-color: #031229;
    color: #72F0CB;
}

.betslip-item .fn {
    background-color: #080808;
    color: #E74536;
}

.betslip-item .bo {
    background-color: #2D2E2C;
    color: #EE3536;
}

.betslip-item .bv {
    background-color: #FF0000;
    color: #FFFFFF;
}
.betslip-item .bv {
    background-color: #FF0000;
    color: #FFFFFF;
}


.betslip-item .sb {
    background-color: #000000;
    color: #Ffd700;
}

.betslip-item .hr {
    background-color: #1C1C1C;
    color: #6B52AE;
}

.betslip-item .bf {
    background-color: #0000FF;
    color: #FFFFFF;
}

.betslip-item .pn {
    background-color: #0B1523;
    color: #fd5602;
}
.betslip-item .ca {
    background-color: black;
    color: white;
}

.betslip-item .bm,
.betslip-item .BM {
    background-color: #000000;
    color: #FFD700;
}

.betslip-item .yw,
.betslip-item .YW {
    background-color: #004C99;
    color: white;
}

.remove-bet {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: none;
    color: #4CAF50;
    font-size: 18px;
    cursor: pointer;
}

.remove-bet:hover {
    color: #FF0000;
}

#betslip-toggle {
    z-index: 800; /* Lowered to match container */
    background-color: #2e7d32 !important; /* Darker green to differentiate from active elements */
    color: #fff !important; /* White text for better contrast */
    border: none;
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin-left: 15px;
    align-self: center;
}

#betslip-toggle:hover {
    background-color: #388e3c !important; /* Slightly lighter green on hover */
}

#betslip-toggle.bet-added {
    animation: betAdded 1s ease;
}

@keyframes betAdded {
    0% {
        background-color: #2e7d32;
        transform: scale(1);
    }
    50% {
        background-color: #FFA500;
        transform: scale(1.1);
    }
    100% {
        background-color: #2e7d32;
        transform: scale(1);
    }
}

#clear-all-bets {
    background-color: #FF0000;
    color: white;
    border: none;
    padding: 5px 10px;
    margin: 10px;
    cursor: pointer;
    border-radius: 3px;
}

#clear-all-bets:hover {
    background-color: #CC0000;
}

/* Share Link Button Styling */
#share-betslip {
    background-color: #4CAF50;
    color: black;
    border: none;
    padding: 5px 10px;
    margin: 10px;
    cursor: pointer;
    border-radius: 3px;
    transition: background-color 0.3s ease;
}

#share-betslip:hover {
    background-color: #367c39;
}

/* Optional: Add active state for when button is clicked */
#share-betslip:active {
    transform: scale(0.98);
}


@media (max-width: 768px) {
    #betslip-container {
        width: 100%;
        right: -100%;
    }

    #betslip-toggle {
        right: 5px;
        bottom: 5px;
        padding: 8px 12px;
        font-size: 14px;
        align-self: center;
    }
}

.betslip-item {
    position: relative;
}

.reorder-container {
    position: absolute;
    bottom: 5px;
    right: 5px;
}

.reorder-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 2px;
}


/* Betslip Popup Specific Styles */


.all-books-odds {
    margin-left: 10px; /* Space between Book and All Books Odds */
    padding: 2px 8px;
    background-color: #4CAF50;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    display: inline-block;
}

.all-books-odds:hover {
    background-color: #45a049;
}

/* START OF NEW BETTING TOOLS Calculator Styles */

.calculator-page body {
    background-color: black;
    color: #4CAF50;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 20px;
    min-height: 100vh;
}

.calculator-page .content-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
    align-items: flex-start;
    display: flex;
    flex-direction: column;
}

.calculator-container {
    background-color: black;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #4CAF50;
    width: 350px;
    margin: 0;
    color: #4CAF50;
    text-align: left;
}

.calculator-page .input-group {
    margin-bottom: 15px;
}

.calculator-page label {
    display: block;
    margin-bottom: 5px;
    color: #4CAF50;
}

.calculator-page input[type="number"] {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    background-color: black;
    border: 1px solid #4CAF50;
    color: #4CAF50;
    border-radius: 4px;
}

.calculator-page input[type="number"]:focus {
    outline: none;
    border-color: #367c39;
}

.calculator-page .button {
    background-color: #4CAF50;
    color: #000;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
    width: 100%;
}

.calculator-page .button:hover {
    background-color: #367c39;
}

.calculator-page .result {
    margin-top: 20px;
    padding: 15px;
    background-color: black;
    border: 1px solid #4CAF50;
    border-radius: 4px;
    color: #4CAF50;
    text-align: left;
}

.calculator-page .info-section {
    text-align: left;
    margin: 20px 0;
    max-width: 800px;
    line-height: 1.6;
}

.calculator-page .info-section h2, 
.calculator-page .info-section h3 {
    color: #4CAF50;
    margin-bottom: 15px;
}

.calculator-page .info-section ul, 
.calculator-page .info-section ol {
    margin-left: 20px;
    margin-bottom: 15px;
}

.calculator-page .info-section li {
    margin-bottom: 8px;
}

.calculator-page .info-section p {
    margin-bottom: 15px;
}

#arbCalculator {
    text-align: left;
    margin: 0;
}

#result {
    text-align: left !important;
    margin: 0;
}

#result table {
    margin: 0;
    width: auto;
}

/* Arbitrage Calculator Specific Responsive Styles */
@media (max-width: 768px) {
    .calculator-page .content-container {
        transform: none;
        width: 100%;
        max-width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .calculator-container {
        width: 100%;
        max-width: 100%;
        margin: 10px 0;
        box-sizing: border-box;
        padding: 15px;
    }

    .info-section {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .calculator-page .content-container {
        transform: none;
        width: 100%;
        max-width: 100%;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .calculator-page .content-container {
        transform: none;
        width: 100%;
        max-width: 100%;
    }
}

.calculator-page .footer-content {
    text-align: left;
}

.calculator-page .social-icons a {
    color: #4CAF50 !important;
    font-size: 24px;
    padding: 5px;
    margin: 0 10px;
    display: inline-block;
    background-color: transparent !important;
    text-decoration: none;
}

.calculator-page .social-icons a:hover {
    color: #4CAF50 !important;
    background-color: transparent !important;
    text-decoration: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.footer-brand-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Default alignment for desktop */
}

.social-icons {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    justify-content: flex-start;
}

@media (max-width: 768px) {
    .footer-brand-section {
        align-items: center !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .social-icons {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 15px auto !important;
        padding: 0 !important;
        gap: 15px !important;
        flex-wrap: nowrap !important;
        text-align: center !important;
    }

    .social-icons a {
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
}

/* Footer section styles - with !important and explicit positioning */
.footer {
    width: 100% !important;
    margin: 0 !important;
    padding: 20px !important;
    border-top: 1px solid #4CAF50 !important;
}

.footer-content {
    max-width: 1400px !important;
    margin: 0 !important;
    margin-left: 20px !important;  /* Add explicit left margin */
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 40px !important;
    text-align: left !important;
    justify-content: start !important;  /* Add this */
}

.footer-section {
    padding: 10px !important;
    text-align: left !important;
    justify-content: start !important;  /* Add this */
}

.footer-brand-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: start !important;  /* Add this */
}

.social-icons-wrapper {
    width: 100%;
    display: flex;
    justify-content: flex-start !important; /* Force left alignment */
}

/* Mobile styles - maintain left alignment */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 20px;
        text-align: left !important; /* Force left alignment even on mobile */
    }

    .footer-section {
        padding: 5px;
        text-align: left !important; /* Force left alignment even on mobile */
    }

    .footer-brand-section {
        align-items: flex-start !important; /* Force left alignment even on mobile */
        text-align: left !important;
        width: 100%;
    }

    .social-icons-wrapper {
        justify-content: flex-start !important; /* Force left alignment even on mobile */
        width: 100%;
    }

    .social-icons {
        justify-content: flex-start !important; /* Force left alignment even on mobile */
        margin: 15px 0 !important;
    }
}

/* Add these new styles (not already present in styles.css) */

.dropdown-content a {
    white-space: nowrap;
}

.dropdown-content {
    min-width: 200px;
}

.inactive-odds {
    color: #888;
    opacity: 0.7;
}

.dropdown-header {
    font-weight: bold;
    padding: 8px 16px;
    background-color: #f1f1f1;
}

/* Dropdown positioning fixes */
.dropdown {
    position: relative;
}

.dropdown-content {
    position: absolute !important;
    left: 0;  /* Default position */
    top: 100%;
    min-width: 200px;
    z-index: 1001 !important;
}

/* New class for left-opening dropdowns */
.dropdown-content.open-left {
    left: auto;
    right: 0;
}

/* Sub-menu specific positioning - default is to the right */
.sub-menu {
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 200px;
}

/* New class for downward-opening sub-menus */
.sub-menu.open-down {
    left: 0;
    top: 100%;
    /* Ensure it appears above other elements */
    z-index: 1001;
}

/* Media query for mobile devices */
@media (max-width: 768px) {
    .dropdown-content,
    .sub-menu {
        max-width: 80vw;
    }
    
    /* Force left-opening for last dropdowns */
    .dropdown:last-child .dropdown-content,
    .dropdown:nth-last-child(2) .dropdown-content {
        left: auto;
        right: 0;
    }
    
    /* Force downward-opening for sub-menus that would clip */
    .sub-menu-container:hover .sub-menu {
        left: 0;
        top: 100%;
        position: relative;
        /* Ensure proper stacking */
        z-index: 1001;
    }

    /* Adjust sub-menu container for downward opening */
    .sub-menu-container {
        position: relative;
        width: 100%;
    }

    /* Ensure sub-menu items are properly aligned when opening down */
    .sub-menu-container .sub-menu {
        width: 100%;
        box-sizing: border-box;
    }
}

/* Update the dropdown menu items to handle wrapping */
.dropdown-content a, .sub-menu a {
    display: block;
    color: #4CAF50;
    text-decoration: none;
    transition: background-color 0.1s, color 0.1s;
    text-align: left;
    padding: 8px 12px;
    white-space: pre-line; /* Preserve line breaks while wrapping text */
    word-wrap: break-word; /* Break long words if necessary */
    line-height: 1.3; /* Slightly increase line height for better readability */
    min-width: 200px;
    max-width: 300px;
    font-size: 14px; /* Slightly reduce font size for long tournament names */
    overflow-wrap: break-word; /* Ensure long words break */
    hyphens: auto; /* Enable automatic hyphenation */
}

/* Ensure sub-menus can accommodate wrapped text */
.sub-menu {
    min-width: 220px; /* Slightly increase minimum width */
    max-width: 320px; /* Slightly increase maximum width */
    width: max-content;
    padding: 4px 0; /* Add some vertical padding */
}

/* Container adjustments */
.sub-menu-container {
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
}

/* Update sub-menu button styles to handle wrapping */
.sub-menu-button {
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.2;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
}

/* Update dropdown menu items with higher specificity and calculator page support */
.calculator-page .dropdown-content a,
.calculator-page .sub-menu a,
.dropdown-content a,
.sub-menu a {
    display: block !important;
    color: #4CAF50 !important;
    text-decoration: none !important;
    transition: background-color 0.1s, color 0.1s !important;
    text-align: left !important;
    padding: 8px 12px !important;
    white-space: pre-line !important; /* Preserve line breaks while wrapping text */
    word-wrap: break-word !important; /* Break long words if necessary */
    line-height: 1.3 !important; /* Slightly increase line height for better readability */
    min-width: 200px !important;
    max-width: 300px !important;
    font-size: 14px !important; /* Slightly reduce font size for long tournament names */
    overflow-wrap: break-word !important; /* Ensure long words break */
    hyphens: auto !important; /* Enable automatic hyphenation */
    width: auto !important; /* Override any fixed widths */
}



/* Ensure sub-menus can accommodate wrapped text - with calculator page support */
.calculator-page .sub-menu,
.sub-menu {
    min-width: 220px !important;
    max-width: 320px !important;
    width: max-content !important;
    padding: 0px 0 !important;
}

/* Container adjustments with calculator page support */
.calculator-page .sub-menu-container,
.sub-menu-container {
    width: 100% !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure dropdown content is properly sized */
.calculator-page .dropdown-content,
.dropdown-content {
    min-width: 220px !important;
    max-width: 320px !important;
    width: max-content !important;
}

/* Update hover styles for dropdown items */
.dropdown-content a:hover,
.sub-menu a:hover,
.sub-menu-button:hover {
    background-color: #4CAF50 !important;
    color: black !important; /* Force black text on hover */
}

/* Ensure active/selected items also have black text */
.dropdown-content a.active,
.sub-menu a.active,
.sub-menu-button.active {
    background-color: #4CAF50 !important;
    color: black !important;
}

/* Update the centered footer styles to be more specific and use !important */
.centered-footer.footer {
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 0 !important;
    border-top: 1px solid #4CAF50 !important; /* Single border at the top */
    border-bottom: none !important; /* Remove bottom border */
}

.centered-footer.footer .footer-content {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 40px !important;
    text-align: left !important;
    justify-content: center !important;
    border: none !important;
}

.centered-footer.footer .footer-section {
    padding: 10px !important;
    text-align: left !important;
    justify-content: flex-start !important;
    border: none !important;
}

.centered-footer.footer .footer-brand-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
}

.centered-footer.footer .social-icons-wrapper {
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
}

.centered-footer.footer .social-icons {
    display: flex !important;
    justify-content: flex-start !important;
    margin: 15px 0 !important;
    gap: 15px !important;
}

@media (max-width: 768px) {
    .centered-footer.footer .footer-content {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        text-align: left !important;
    }

    .centered-footer.footer .footer-section {
        text-align: left !important;
    }

    .centered-footer.footer .footer-brand-section {
        align-items: flex-start !important;
        text-align: left !important;
    }

    .centered-footer.footer .social-icons-wrapper,
    .centered-footer.footer .social-icons {
        justify-content: flex-start !important;
    }
}

/* Add consistent padding for main content areas */
.content-container {
    padding: 0 20px;  /* Add horizontal padding */
    max-width: 1200px;  /* Limit maximum width for better readability */
    margin: 0 auto;  /* Center the container */
}

/* Specific padding for calculator pages */
.calculator-page {
    padding: 20px;  /* Add padding on all sides */
}

/* Add spacing for info sections */
.info-section {
    padding: 20px;
    margin: 20px 0;
}

/* Improve calculator container spacing */
.calculator-container {
    padding: 20px;
    margin: 20px 0;
}

/* Ensure proper spacing for lists */
.info-section ul, 
.info-section ol {
    padding-left: 20px;  /* Add left padding for list items */
    margin: 10px 0;  /* Add vertical margin */
}

/* Add spacing for paragraphs */
.info-section p {
    margin: 15px 0;  /* Add vertical margin */
    line-height: 1.6;  /* Improve readability */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .content-container {
        padding: 0 15px;  /* Slightly reduce padding on mobile */
    }
    
    .calculator-page,
    .info-section,
    .calculator-container {
        padding: 15px;  /* Reduce padding on mobile */
    }
}

#controlsTable {
    width: auto;
    margin-right: auto;
    margin-left: 0;
}

.header-container {
    width: 100%;
    padding: 10px 0 20px 0;  /* top right bottom left */
}

.logo-status-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.logo-link {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo-image {
    height: 60px;
    width: auto;
    margin: 0;
}

#marketHeader {
    margin: 0;
    white-space: nowrap;
    /* Remove flex-grow to prevent pushing status to the right */
}

#updateMessaging {
    display: flex;
    align-items: center;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    margin-left: 20px; /* Add space between title and status */
}

/* Add this to push any remaining space to the right */
.logo-status-wrapper::after {
    content: '';
    flex-grow: 1;
}

/* Add new page wrapper styles */
.page-wrapper {
    padding-top: 20px;
    padding-left: 40px;
    padding-right: 20px;
    margin: 0
}

/* Mobile optimization for page wrapper */
@media (max-width: 768px) {
    .page-wrapper {
        padding-top: 10px;    /* Reduced from 20px */
        padding-left: 10px;   /* Reduced from 40px */
        padding-right: 10px;  /* Reduced from 20px */
    }
    
    /* Reduce nav tab padding on mobile */
    #tabNav a, #linesNav a {
        padding: 6px 8px;     /* Reduced from 10px */
        font-size: 14px;      /* Slightly smaller text */
    }
    
    /* Reduce dropdown button padding to match */
    #tabNav .dropbtn {
        padding: 6px 8px;     /* Match other nav items */
    }
}

/* Remove or comment out any other tooltip styles in the file */

[data-tooltip] {
    position: relative;
    z-index: 1; /* Base z-index for the element */
}

/* Disabled - using JavaScript tooltip instead
[data-tooltip]:before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 12px;
    background: #333;
    color: white;
    border: 2px solid #4CAF50;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    width: max-content;
    max-width: 300px;
    z-index: 10000;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
[data-tooltip]:hover:before {
    visibility: visible;
    opacity: 1;
}
*/

/* Arrow for info-icon tooltips is now properly styled above */

/* Ensure info icons can show tooltips above sticky headers */
.info-icon[data-tooltip] {
    position: relative !important;
    z-index: 100; /* Base z-index */
}

/* When hovering, raise the z-index of the hovered icon */
.info-icon[data-tooltip]:hover {
    z-index: 1000 !important; /* Higher than other info icons */
}

/* Info tooltip styles - now using dedicated elements */
.info-tooltip {
    background: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    text-align: center;
    width: max-content;
    max-width: 300px;
    border: 1px solid #4CAF50;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.info-tooltip-arrow {
    position: fixed;
    z-index: 2147483647;
    display: none;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #333;
    pointer-events: none;
}

/* DEBUG: Visual debugging for tooltip z-index issues */
.debug-tooltips [data-tooltip]:before {
    background: red !important;
    border: 2px solid yellow !important;
}

.debug-tooltips .info-icon {
    outline: 2px solid lime !important;
}

.debug-tooltips #oddsTable thead th {
    outline: 1px dashed cyan !important;
}

/* Force tooltip above by removing transforms that might affect stacking */
#oddsTable thead [data-tooltip]:before {
    position: absolute !important;
    z-index: 2147483647 !important; /* Maximum 32-bit integer */
    pointer-events: none !important;
    /* Try removing transform to see if it helps */
    transform: translateX(-50%) translateZ(999px) !important;
}

/* Try to break out of stacking context */
#oddsTable thead th .info-icon {
    /* Create isolated stacking context */
    isolation: isolate !important;
    z-index: 9999 !important;
}

/* Remove the outline approach - not needed */

/* Info-icon styles are defined earlier in the file with data-tooltip */

/* Ensure dropdown menus stay above info-icons */
.dropdown-content {
    z-index: 1000 !important;
}

@media (max-width: 768px) {
    .info-icon::after {
        bottom: auto;
        top: 100%;
    }
}

#tabNav a, #linesNav a {
    border: 2px solid #4CAF50;
    color: #4CAF50;
    padding: 10px;
    text-decoration: none;
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: center;  /* Center horizontally */

    height: 100%; /* Ensure full height alignment */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

#tabNav a, #linesNav a {
    border: 2px solid #4CAF50;
    color: #4CAF50;
    padding: 10px;
    text-decoration: none;
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: center;  /* Center horizontally */

    height: 100%; /* Ensure full height alignment */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

#tabNav a.active, #linesNav a.active {
    font-weight: bold;
    background-color: #4CAF50;
    color: black;
}

#tabNav a:hover, #linesNav a:hover {
    background-color: #4CAF50;
    color: black;
}

/* Ensure dropdowns don't have extra space */
#tabNav .dropdown {
    display: flex;
    align-items: center;
}

#tabNav .dropbtn {
    padding: 5px 10px; /* Match padding with other nav items */
}


#linesNav {
    display: flex; /* Ensure it aligns horizontally */
    height: 100%; /* Ensure full height alignment */
    align-items: center; /* This will vertically center-align the items */
    gap: 0;
}


.over-under-tab {
    margin: 0; /* No spacing between Over and Under tabs */
}

.line-tabs-container {
    display: flex;
    gap: 0; /* Flush line tabs */
    margin-left: 10px; /* Add a gap before the first line tab */
}

.line-tab {
    margin: 0; /* Remove extra margin */
}

a[href="/"] img {
    background-color: transparent !important;
}
a[href="/"]:hover img {
    background-color: transparent !important;
}

.sub-menu-container {
    position: relative;
}

.sub-menu-button {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    color: #4CAF50;
    background-color: black;
    border: none;
    text-align: left;
    width: 100%;
    cursor: pointer;
}

.sub-menu {
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
    background-color: black !important;
    min-width: 200px !important;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2) !important;
    z-index: 1002 !important;
}

.sub-menu-button:hover {
    background-color: #4CAF50;
    color: black;
}



.sub-menu-container:hover .sub-menu {
    display: block;
}

.sub-menu a {
    color: #4CAF50;
    padding: 8px 12px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.sub-menu a:hover {
    background-color: #4CAF50;
    color: black;
}

#betslip-container {
    position: fixed;
    right: -300px;
    top: 0;
    width: 300px;
    height: 100%;
    background-color: black;
    border-left: none; /* No border when collapsed */
    color: #4CAF50;
    transition: right 0.3s ease, border-left 0.3s ease;
    overflow-y: auto;
    z-index: 1002; /* Lowered from 1002 */
}

#betslip-container.visible {
    right: 0; /* Slide in when visible */
    border-left: 1px solid #4CAF50 !important; /* Show green border when expanded */
    z-index: 10005 !important; /* Higher than menu dropdowns (10001) */
}
.betslip-item {
    padding: 5px;
    border-bottom: 1px solid #4CAF50;
    position: relative;
    font-size: 16px;
    line-height: 1.2;
}

.betslip-item > * {
    margin: 2px 0;
}

/* New styles for book abbreviations in betslip */
.betslip-item .book-abbr {
    display: inline-block;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: bold;
    font-size: 14px;
}

.betslip-item .fd {
    background-color: #0078FF;
    color: white;
}

.betslip-item .dk {
    background-color: #37CD3F;
    color: black;
}

.betslip-item .mg {
    background-color: #C1A970;
    color: black;
}

.betslip-item .cz {
    background-color: #0A3532;
    color: #CBB57B;
}

.betslip-item .b3,
.betslip-item .B3,
.betslip-item .b365,
.betslip-item .B365,
.betslip-item .bet365,
.betslip-item .BET365,
.betslip-item .bet365 a,
.betslip-item .BET365 a {
    background-color: green;
    color: white;
}


.betslip-item .br {
    background-color: #070B64;
    color: #FFB717;
}

.betslip-item .eb {
    background-color: #031229;
    color: #72F0CB;
}

.betslip-item .fn {
    background-color: #080808;
    color: #E74536;
}

.betslip-item .bo {
    background-color: #2D2E2C;
    color: #EE3536;
}

.betslip-item .bv {
    background-color: #FF0000;
    color: #FFFFFF;
}
.betslip-item .bv {
    background-color: #FF0000;
    color: #FFFFFF;
}


.betslip-item .sb {
    background-color: #000000;
    color: #Ffd700;
}

.betslip-item .hr {
    background-color: #1C1C1C;
    color: #6B52AE;
}

.betslip-item .bf {
    background-color: #0000FF;
    color: #FFFFFF;
}

.betslip-item .pn {
    background-color: #0B1523;
    color: #fd5602;
}
.betslip-item .ca {
    background-color: black;
    color: white;
}

.betslip-item .bm,
.betslip-item .BM {
    background-color: #000000;
    color: #FFD700;
}

.betslip-item .yw,
.betslip-item .YW {
    background-color: #004C99;
    color: white;
}

.remove-bet {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: none;
    color: #4CAF50;
    font-size: 18px;
    cursor: pointer;
}

.remove-bet:hover {
    color: #FF0000;
}

#betslip-toggle {
    z-index: 100; /* Lowered to match container */
    background-color: #4CAF50;
    color: black;
    border: none;
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin-left: 15px;
    align-self: center;
}

#betslip-toggle:hover {
    background-color: #367c39;
}

#betslip-toggle.bet-added {
    animation: betAdded 1s ease;
}

@keyframes betAdded {
    0% {
        background-color: #2e7d32;
        transform: scale(1);
    }
    50% {
        background-color: #FFA500;
        transform: scale(1.1);
    }
    100% {
        background-color: #2e7d32;
        transform: scale(1);
    }
}

#clear-all-bets {
    background-color: #FF0000;
    color: white;
    border: none;
    padding: 5px 10px;
    margin: 10px;
    cursor: pointer;
    border-radius: 3px;
}

#clear-all-bets:hover {
    background-color: #CC0000;
}

@media (max-width: 768px) {
    #betslip-container {
        width: 100%;
        right: -100%;
    }

    #betslip-toggle {
        right: 5px;
        bottom: 5px;
        padding: 8px 12px;
        font-size: 14px;
        align-self: center;
    }
}
.betslip-item {
    position: relative;
}

.reorder-container {
    position: absolute;
    bottom: 5px;
    right: 5px;
}

.reorder-button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 2px;
}


/* Betslip Popup Specific Styles */
.hover-popup.betslip-popup {
    background-color: #f9f9f9;
    border-color: #4CAF50;
    border-radius: 8px !important;
    /* Add any additional styles specific to betslip popups */
}

.all-books-odds {
    margin-left: 10px; /* Space between Book and All Books Odds */
    padding: 2px 8px;
    background-color: #4CAF50;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    display: inline-block;
}

.all-books-odds:hover {
    background-color: #45a049;
}


/* MENU STYLES - HIGH PRIORITY OVERRIDES */
/* Place these at the very bottom of your CSS file */

/* Base container */
.menu-button-container {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    z-index: 1!important;
}

/* Table cell specific styling */
td .menu-button-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1 !important;
}

/* Dropdown container */
.menu-button-container .dropdown {
    position: relative !important;

    z-index: 1 !important;
}

/* When a dropdown is open, increase its container's z-index */
.menu-button-container:has(.dropdown-content.show) {
    z-index: 10001 !important; /* Higher than all other elements including table resize handle */
}

/* Elevate z-index on hover */
.menu-button-container:hover {
    z-index: 10001 !important; /* Same high z-index as when active */
}

/* Ensure non-hovered containers stay below */
.menu-button-container:not(:hover):not(:has(.dropdown-content.show)) {
    z-index: 1 !important;
}

/* Menu button */
/* Menu button */
.menu-button {
    position: relative !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background-color: transparent !important;
    background-position: center !important;
    background-size: 20px 20px !important;
    background-repeat: no-repeat !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s ease !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20viewBox='0%200%2024%2024'%20stroke-width='1.5'%20stroke='%234CAF50'%3E%3Cpath%20stroke-linecap='round'%20stroke-linejoin='round'%20d='M3.75%205.25h16.5M3.75%2012h16.5M3.75%2018.75h16.5'%20/%3E%3C/svg%3E") !important;
    z-index: 1 !important; /* Lower than betslip when visible */
}

/* Menu button hover state */
.menu-button:hover {
    background-color: #4CAF50 !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20viewBox='0%200%2024%2024'%20stroke-width='1.5'%20stroke='black'%3E%3Cpath%20stroke-linecap='round'%20stroke-linejoin='round'%20d='M3.75%205.25h16.5M3.75%2012h16.5M3.75%2018.75h16.5'%20/%3E%3C/svg%3E") !important;
    
}

/* Open state */
.menu-button.open {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20viewBox='0%200%2024%2024'%20stroke-width='1.5'%20stroke='%234CAF50'%3E%3Cpath%20stroke-linecap='round'%20stroke-linejoin='round'%20d='M6%2018L18%206M6%206l12%2012'%20/%3E%3C/svg%3E") !important;
}

/* Open state hover */
.menu-button.open:hover {
    background-color: #4CAF50 !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20viewBox='0%200%2024%2024'%20stroke-width='1.5'%20stroke='black'%3E%3Cpath%20stroke-linecap='round'%20stroke-linejoin='round'%20d='M6%2018L18%206M6%206l12%2012'%20/%3E%3C/svg%3E") !important;
}



/* Show dropdown - Removed hover behavior, now click-only */
/* .menu-button-container .dropdown:hover .dropdown-content,
.menu-button-container .dropdown-content:hover {
    display: block !important;
} */


/* Ensure all other menu buttons stay below when one dropdown is open or hovered */
.menu-button-container:not(:has(.dropdown-content.show)):not(:hover) {
    z-index: 1 !important;
}

/* ... existing code ... */

/* Dropdown positioning with edge detection */
.menu-button-container .dropdown-content,
.menu-button-container .click-dropdown .dropdown-content {
    position: fixed !important; /* Changed to fixed to escape table overflow */
    /* Position will be set by JavaScript */
    min-width: 200px !important;
    z-index: 10001 !important;
    transition: none !important; /* Prevent transition animation when switching sides */
    display: none; /* Hidden by default */
    background-color: #0a0a0a !important; /* Ensure background is visible */
    border: 2px solid #4CAF50 !important; /* Green border */
    border-radius: 8px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5) !important;
    padding: 8px 0 !important;
}

/* Show dropdown when it has the 'show' class */
.menu-button-container .dropdown-content.show,
.menu-button-container .click-dropdown .dropdown-content.show,
.click-dropdown .dropdown-content.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important; /* Override any absolute positioning */
}

/* Style dropdown menu items */
.menu-button-container .dropdown-content a {
    display: block !important;
    padding: 8px 16px !important;
    color: #4CAF50 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.menu-button-container .dropdown-content a:hover {
    background-color: #1a1a1a !important;
    color: #5fd662 !important;
}


/* Add a class for left-aligned dropdowns */
.menu-button-container .dropdown-content.align-left {
    left: auto !important;
    right: 0 !important;
}

/* Show dropdown on hover - Removed, now click-only */
/* .menu-button-container .dropdown:hover .dropdown-content,
.menu-button-container .dropdown-content:hover {
    display: block !important;
} */

/* Media query for mobile devices */
@media (max-width: 768px) {
    .menu-button-container {
        position: relative !important;
    }
    
    .menu-button-container .dropdown-content.align-left {
        left: auto !important;
        right: 0 !important;
    }
}

.movement-tooltip {
    position: relative;
    display: inline-block;
}

.movement-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    background: #333;
    color: #fff;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 100001;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 5px;
    border: 1px solid #4CAF50;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    width: auto;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.movement-tooltip:hover::after {
    opacity: 1;
}

.movement-tooltip::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 100001;
}

.movement-tooltip:hover::before {
    opacity: 1;
}

/* Ensure movement tooltips work inside hover popups */
.hover-popup .movement-tooltip {
    position: relative;
    display: inline-block;
}

.hover-popup .movement-tooltip::after {
    z-index: 100002 !important;
}

.hover-popup .movement-tooltip::before {
    z-index: 100002 !important;
}

/* Ensure table cells don't clip tooltips */
.hover-popup td {
    position: relative;
    overflow: visible !important;
}

/* CSS Arrow Icons - Replace image-based arrows */
.arrow-up, .arrow-down {
    display: inline-block;
    vertical-align: middle;
    margin-left: 3px;
    width: 0;
    height: 0;
    border-style: solid;
}

.arrow-up {
    border-width: 0 5px 8px 5px;
    border-color: transparent transparent #4CAF50 transparent;
    padding-bottom: 5px;
}

.arrow-down {
    border-width: 8px 5px 0 5px;
    border-color: #f44336 transparent transparent transparent;
}

/* Alternative: Unicode arrows (even lighter weight) */
.arrow-unicode {
    display: inline-block;
    vertical-align: middle;
    margin-left: 3px;
    font-size: 14px;
    font-weight: bold;
}

.arrow-unicode.up {
    color: #4CAF50;
}

.arrow-unicode.down {
    color: #f44336;
}

.hover-table {
    overflow: visible !important;
}

.hover-table td {
    overflow: visible !important;
}

/* Table Wrapper to handle rounded corners and border */
.table-wrapper {
    border: 2px solid #4CAF50; /* Ultra-thin border color */
    border-radius: 12px; /* Rounded corners */
    overflow: hidden; /* Clip content to maintain rounded corners and prevent border cutoff */
    display: inline-block; /* Adjust as needed based on your layout */
    margin: 0px 0; /* Optional: Adds vertical spacing around the table */
    position: relative; /* Ensure proper stacking context */
}

/* Adjust table styles within the wrapper */
.table-wrapper table {
    border-collapse: collapse; /* Clean, single-pixel borders */
    width: auto; /* Let table size to its content */
}

.table-wrapper th,
.table-wrapper td {
    border: none; /* Removed internal borders - using only outer table border */
    padding: 8px; /* Consistent cell padding */
    background-color: black; /* Black background for cells */
    color: #4CAF50; /* Text color */
    white-space: nowrap; /* Prevent text from wrapping */
    box-sizing: border-box; /* Include padding and borders within the cell's total width and height */
}

/* Optional: Adjust padding for better aesthetics */
.table-wrapper th,
.table-wrapper td {
    padding: 10px 8px; /* Top/Bottom | Left/Right */
}

/* Rounded corners for the first and last cells */
.table-wrapper table th:first-child {
    border-top-left-radius: 12px;
}

.table-wrapper table th:last-child {
    border-top-right-radius: 12px;
}

.table-wrapper table tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

.table-wrapper table tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

/* Remove double borders caused by table and wrapper borders */
.table-wrapper table th:first-child,
.table-wrapper table td:first-child {
    border-left: none;
}

.table-wrapper table th:last-child,
.table-wrapper table td:last-child {
    border-right: none;
}

.table-wrapper table tr:first-child th,
.table-wrapper table tr:first-child td {
    border-top: none;
}

.table-wrapper table tr:last-child td {
    border-bottom: none;
}

/* Ensure responsiveness */
@media (max-width: 768px) {
    .table-wrapper {
        width: 100%; /* Full width on smaller screens */
        border-radius: 8px; /* Slightly smaller radius for mobile */
    }

    .table-wrapper table th,
    .table-wrapper table td {
        padding: 8px; /* Adjust padding for mobile */
    }
}

/* Update the table wrapper styles to not override book styling */
.table-wrapper th,
.table-wrapper td {
    border: none; /* Removed internal borders - using only outer table border */
    padding: 7px;
    background-color: black; /* Default background */
    color: #4CAF50;
    white-space: nowrap;
    box-sizing: border-box;
}

/* Ensure book styles take precedence */
.table-wrapper td.Bet365, .table-wrapper td.B3, .table-wrapper td.B365, .table-wrapper td.b3, .table-wrapper td.b365, .table-wrapper td.bet365,
.table-wrapper td.BetRivers, .table-wrapper td.BR, .table-wrapper td.br,
.table-wrapper td.EspnBet, .table-wrapper td.Espn_Bet, .table-wrapper td.ESPNBet, .table-wrapper td.EB, .table-wrapper td.eb,
.table-wrapper td.FanDuel, .table-wrapper td.FD, .table-wrapper td.fd,
.table-wrapper td.DraftKings, .table-wrapper td.DK, .table-wrapper td.dk,
.table-wrapper td.BetMgm, .table-wrapper td.MG, .table-wrapper td.mg,
.table-wrapper td.Caesars, .table-wrapper td.CZ, .table-wrapper td.cz,
.table-wrapper td.Fanatics, .table-wrapper td.FN, .table-wrapper td.fn,
.table-wrapper td.BetOnline, .table-wrapper td.BO, .table-wrapper td.bo, .table-wrapper td.betonline,
.table-wrapper td.Bovada, .table-wrapper td.BV, .table-wrapper td.bv,
.table-wrapper td.PropBuilder, .table-wrapper td.PB, .table-wrapper td.pb,
.table-wrapper td.SuperBook, .table-wrapper td.SB, .table-wrapper td.sb,
.table-wrapper td.HardRockBet, .table-wrapper td.HR, .table-wrapper td.hr,
.table-wrapper td.BetFred, .table-wrapper td.BF, .table-wrapper td.bf,
.table-wrapper td.Pinnacle, .table-wrapper td.PN, .table-wrapper td.pn,
.table-wrapper td.Circa, .table-wrapper td.CA, .table-wrapper td.ca,
.table-wrapper td.BookMaker, .table-wrapper td.BM, .table-wrapper td.bm,
.table-wrapper td.YourWay, .table-wrapper td.YW, .table-wrapper td.yw {
    /* Preserve existing book background colors and text colors */
    background-color: inherit;
    color: inherit;
}

/* Reapply specific book styles with higher specificity */
.table-wrapper td.Bet365, .table-wrapper td.B3, .table-wrapper td.B365, .table-wrapper td.b3, .table-wrapper td.b365, .table-wrapper td.bet365 {
    background-color: green !important;
    color: white !important;
}

.table-wrapper td.BetRivers, .table-wrapper td.BR, .table-wrapper td.br {
    background-color: #070B64 !important;
    color: #FFB717 !important;
}

.table-wrapper td.EspnBet, .table-wrapper td.Espn_Bet, .table-wrapper td.ESPNBet, .table-wrapper td.EB, .table-wrapper td.eb {
    background-color: #031229 !important;
    color: #72F0CB !important;
}

.table-wrapper td.FanDuel, .table-wrapper td.FD, .table-wrapper td.fd {
    background-color: #0078FF !important;
    color: white !important;
}

.table-wrapper td.DraftKings, .table-wrapper td.DK, .table-wrapper td.dk {
    background-color: #37CD3F !important;
    color: black !important;
}

.table-wrapper td.BetMgm, .table-wrapper td.BetMGM, .table-wrapper td.MG, .table-wrapper td.mg {
    background-color: #C1A970 !important;
    color: black !important;
}

.table-wrapper td.Caesars, .table-wrapper td.CZ, .table-wrapper td.cz {
    background-color: #0A3532 !important;
    color: #CBB57B !important;
}

.table-wrapper td.Fanatics, .table-wrapper td.FN, .table-wrapper td.fn {
    background-color: #080808 !important;
    color: #E74536 !important;
}

.table-wrapper td.BetOnline, .table-wrapper td.BO, .table-wrapper td.bo, .table-wrapper td.betonline {
    background-color: #2D2E2C !important;
    color: #EE3536 !important;
}

.table-wrapper td.Bovada, .table-wrapper td.BV, .table-wrapper td.bv {
    background-color: #FF0000 !important;
    color: #FFFFFF !important;
}

.table-wrapper td.PropBuilder, .table-wrapper td.PB, .table-wrapper td.pb {
    background-color: #970000 !important;
    color: #FFFFFF !important;
}

.table-wrapper td.SuperBook, .table-wrapper td.SB, .table-wrapper td.sb {
    background-color: #000000 !important;
    color: #Ffd700 !important;
}

.table-wrapper td.HardRockBet, .table-wrapper td.HR, .table-wrapper td.hr {
    background-color: #1C1C1C !important;
    color: #6B52AE !important;
}

.table-wrapper td.BetFred, .table-wrapper td.BF, .table-wrapper td.bf {
    background-color: #0000FF !important;
    color: #FFFFFF !important;
}

.table-wrapper td.Pinnacle, .table-wrapper td.PN, .table-wrapper td.pn {
    background-color: #042D59 !important;
    color: #fd5602 !important;
}

.table-wrapper td.Circa, .table-wrapper td.CA, .table-wrapper td.ca {
    background-color: black !important;
    color: white !important;
}

.table-wrapper td.BookMaker, .table-wrapper td.BM, .table-wrapper td.bm {
    background-color: #000000 !important;
    color: #FFD700 !important;
}

.table-wrapper td.YourWay, .table-wrapper td.YW, .table-wrapper td.yw {
    background-color: #004C99 !important;
    color: white !important;
}

/* Ensure links within book cells maintain proper styling */
.table-wrapper td[class*="Bet365"] a,
.table-wrapper td[class*="B3"] a,
.table-wrapper td[class*="B365"] a,
.table-wrapper td[class*="b3"] a,
.table-wrapper td[class*="b365"] a,
.table-wrapper td[class*="bet365"] a,
.table-wrapper td[class*="BetRivers"] a,
.table-wrapper td[class*="BR"] a,
.table-wrapper td[class*="br"] a,
.table-wrapper td[class*="EspnBet"] a,
.table-wrapper td[class*="Espn_Bet"] a,
.table-wrapper td[class*="EB"] a,
.table-wrapper td[class*="eb"] a,
.table-wrapper td[class*="FanDuel"] a,
.table-wrapper td[class*="FD"] a,
.table-wrapper td[class*="fd"] a,
.table-wrapper td[class*="DraftKings"] a,
.table-wrapper td[class*="DK"] a,
.table-wrapper td[class*="dk"] a,
.table-wrapper td[class*="BetMgm"] a,
.table-wrapper td[class*="MG"] a,
.table-wrapper td[class*="mg"] a,
.table-wrapper td[class*="Caesars"] a,
.table-wrapper td[class*="CZ"] a,
.table-wrapper td[class*="cz"] a,
.table-wrapper td[class*="Fanatics"] a,
.table-wrapper td[class*="FN"] a,
.table-wrapper td[class*="fn"] a,
.table-wrapper td[class*="BetOnline"] a,
.table-wrapper td[class*="BO"] a,
.table-wrapper td[class*="bo"] a,
.table-wrapper td[class*="Bovada"] a,
.table-wrapper td[class*="BV"] a,
.table-wrapper td[class*="bv"] a,
.table-wrapper td[class*="PropBuilder"] a,
.table-wrapper td[class*="PB"] a,
.table-wrapper td[class*="pb"] a,
.table-wrapper td[class*="SuperBook"] a,
.table-wrapper td[class*="SB"] a,
.table-wrapper td[class*="sb"] a,
.table-wrapper td[class*="HardRockBet"] a,
.table-wrapper td[class*="HR"] a,
.table-wrapper td[class*="hr"] a,
.table-wrapper td[class*="BetFred"] a,
.table-wrapper td[class*="BF"] a,
.table-wrapper td[class*="bf"] a,
.table-wrapper td[class*="Pinnacle"] a,
.table-wrapper td[class*="PN"] a,
.table-wrapper td[class*="pn"] a,
.table-wrapper td[class*="Circa"] a,
.table-wrapper td[class*="CA"] a,
.table-wrapper td[class*="ca"] a,
.table-wrapper td[class*="BookMaker"] a,
.table-wrapper td[class*="BM"] a,
.table-wrapper td[class*="bm"] a,
.table-wrapper td[class*="YourWay"] a,
.table-wrapper td[class*="YW"] a,
.table-wrapper td[class*="yw"] a {
    color: inherit !important;
    text-decoration: none !important;
}

/* ===== Navigation Menu Styling ===== */

/* Navigation menu and betting tools button styling */
.dropbtn-navigation-menu {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.dropbtn-betting-tools {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Base styles for all navigation buttons */
.dropbtn {
    border: 2px solid #4CAF50;
}

/* ===== Tab Group Styling ===== */

/* Tab container layout */
#linesNav {
    display: flex;
    gap: 0;
}

/* Remove default tab margins */
.over-under-tab, .yes-no-tab {
    margin: 0;
}

/* First tab in groups - left rounded corners */
a[href*="over-under=all"], 
a[href*="all&line"], 
a[href*="favorite-underdog=all"],
.yes-no-tab:first-child {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

/* Last tab in groups - right rounded corners */
a[href*="over-under=under"], 
a[href*="under&line"],
a[href*="favorite-underdog=underdog"],
a[href$="underdog"],
a[href*="spreads?favorite_underdog=underdog"],
.yes-no-tab:last-child {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* Remove double borders between connected tabs */
.over-under-tab + .over-under-tab,
.yes-no-tab + .yes-no-tab,
.favorite-underdog-tab + .favorite-underdog-tab {
    border-left: none;
}

/* Remove double borders between connected tabs */
.over-under-tab + .over-under-tab,
.yes-no-tab + .yes-no-tab,
.favorite-underdog-tab + .favorite-underdog-tab {
    border-left: none;
}

/* Remove all individual item border radius */
.dropdown-content > a,
.dropdown-content > .sub-menu-container,
.dropdown-content > .dropdown-header,
.sub-menu > a,
.sub-menu-container .sub-menu-button {
    border-radius: 0 !important;
}

/* Remove hover state border radius */
.dropdown-content > a:hover,
.dropdown-content > .sub-menu-container:hover,
.sub-menu > a:hover,
.sub-menu-container .sub-menu-button:hover {
    border-radius: 0 !important;
}

/* Ensure clean edges for sub-menu containers */
.sub-menu-container {
    border-radius: 0 !important;
}

/* Ensure first and last items in dropdowns follow the rounded corners */
.dropdown-content > a:first-child,
.dropdown-content > .sub-menu-container:first-child,
.dropdown-content > .dropdown-header:first-child {
    border-top-left-radius: 11px !important;
    border-top-right-radius: 11px !important;
}

.dropdown-content > a:first-child:hover,
.dropdown-content > .sub-menu-container:first-child:hover,
.dropdown-content > .sub-menu-container:first-child .sub-menu-button:hover {
    border-top-left-radius: 11px !important;
    border-top-right-radius: 11px !important;
}

.dropdown-content > a:last-child,
.dropdown-content > .sub-menu-container:last-child {
    border-bottom-left-radius: 11px !important;
    border-bottom-right-radius: 11px !important;
}

.dropdown-content > a:last-child:hover,
.dropdown-content > .sub-menu-container:last-child:hover,
.dropdown-content > .sub-menu-container:last-child .sub-menu-button:hover {
    border-bottom-left-radius: 11px !important;
    border-bottom-right-radius: 11px !important;
}

/* Sub-menu items rounding */
.sub-menu > a:first-child {
    border-top-left-radius: 11px !important;
    border-top-right-radius: 11px !important;
}

.sub-menu > a:first-child:hover {
    border-top-left-radius: 11px !important;
    border-top-right-radius: 11px !important;
}

.sub-menu > a:last-child {
    border-bottom-left-radius: 11px !important;
    border-bottom-right-radius: 11px !important;
}

.sub-menu > a:last-child:hover {
    border-bottom-left-radius: 11px !important;
    border-bottom-right-radius: 11px !important;
}

/* Ensure sub-menu containers don't interfere with rounding */
.sub-menu-container {
    border-radius: 0 !important;
}

/* Remove border radius from middle items */
.dropdown-content > *:not(:first-child):not(:last-child),
.sub-menu > *:not(:first-child):not(:last-child) {
    border-radius: 0 !important;
}

.dropdown-content > *:not(:first-child):not(:last-child):hover,
.sub-menu > *:not(:first-child):not(:last-child):hover {
    border-radius: 0 !important;
}

/* Add background colors to ensure clean edges */
.dropdown-content,
.sub-menu {
    background-color: black !important;
}

/* Ensure clean edges for sub-menu containers */
.sub-menu-container:not(:first-child):not(:last-child) {
    border-radius: 0 !important;
}.sub-menu-container:first-child .sub-menu-button {
    border-top-left-radius: 11px !important;
    border-top-right-radius: 11px !important;
}

.sub-menu-container:last-child .sub-menu-button {
    border-bottom-left-radius: 11px !important;
    border-bottom-right-radius: 11px !important;
}





/* Remove borders from outer cells */
.table-wrapper table {
    border-collapse: collapse;
    width: 100%;
    border: none; /* Remove table border */
}

/* Fix for header cells */
.table-wrapper table thead tr:first-child th {
    border-top: none;
}

.table-wrapper table thead tr:first-child th:first-child {
    border-top-left-radius: 12px;
}

.table-wrapper table thead tr:first-child th:last-child {
    border-top-right-radius: 12px;
}

/* Fix for bottom corners */
.table-wrapper table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

.table-wrapper table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

/* Keep internal borders */
.table-wrapper table th,
.table-wrapper table td {
    border: 1px solid #4CAF50;
}


.table-wrapper table th:first-child,
.table-wrapper table td:first-child {
    border-left: none;
}

.table-wrapper table th:last-child,
.table-wrapper table td:last-child {
    border-right: none;
}

.table-wrapper table tr:last-child td {
    border-bottom: none;
}

/* Fix for colspan header */
.table-wrapper table thead tr:first-child th[colspan] {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-top: none;
    border-left: none;
    border-right: none;
}



/* ... existing code ... */

/* Remove borders between regular dropdown items */
#tabNav .dropdown-content > a:not(:last-child):not(.sub-menu-button) {
    border-bottom: 0px solid #4CAF50 !important;
}

/* Thin borders for submenu buttons inside */
#tabNav .dropdown-content .sub-menu-container:not(:last-child) .sub-menu-button {
    border-bottom: 0px solid #4CAF50 !important;
}

/* Thicker border for the bottom of the submenu */
#tabNav .dropdown-content .sub-menu-container:last-child .sub-menu-button {
    border-bottom: 2px solid #4CAF50 !important;
}

/* Thin borders for sub-menu items */
#tabNav .sub-menu > a:not(:last-child) {
    border-bottom: 0px solid #4CAF50 !important;
}

/* Thicker border for last item in sub-menu */
#tabNav .sub-menu > a:last-child {
    border-bottom: 2px solid #4CAF50 !important;
}

/* ... existing code ... */

/* No changes needed here, but showing for context */
.menu-button-container:has(.dropdown-content.show) {
    z-index: 1002 !important; /* Higher than all other elements */
}

/* Elevate z-index on hover */
.menu-button-container:hover {
    z-index: 1002 !important; /* Same high z-index as when active */
}

/* Ensure non-hovered containers stay below */
.menu-button-container:not(:hover):not(:has(.dropdown-content.show)) {
    z-index: 1 !important;
}

/* Ensure table rows have a stacking context */
#oddsTable tbody tr, #oddsTable2 tbody tr {
    position: relative; /* Important: Establish stacking context */
}

/* Cell styles - Keep position relative, but remove explicit z-index */
.table-wrapper td {
    position: relative;
    overflow: hidden; /* Changed from visible !important to contain content */
    white-space: nowrap;
    vertical-align: middle !important;
    /* z-index: 2;  REMOVE THIS */
}

/* WebSocket Row Addition/Removal Animations */

/* Row removal animation */
.fade-out {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

/* New row highlight animation */
.new-row-highlight {
    animation: highlight-new 3s ease-out;
}

/* Apply animation to all cells in the new row for better visibility */
.new-row-highlight td {
    animation: highlight-new-cell 3s ease-out;
}

@keyframes highlight-new {
    0% {
        background-color: #4CAF50;
        transform: translateY(-5px);
    }
    10% {
        background-color: #66BB6A;
        transform: translateY(0);
    }
    40% {
        background-color: #81C784;
    }
    100% {
        background-color: transparent;
    }
}

@keyframes highlight-new-cell {
    0% {
        background-color: #4CAF50 !important;
        color: white !important;
    }
    10% {
        background-color: #66BB6A !important;
        color: white !important;
    }
    40% {
        background-color: #81C784 !important;
        color: white !important;
    }
    70% {
        background-color: #A5D6A7 !important;
        color: inherit;
    }
    100% {
        background-color: transparent;
        color: inherit;
    }
}