:root {
    --navbar-bgimage: linear-gradient(0, black, grey);
    --button-bgimage: linear-gradient(-180deg, #FF7E31, #E62C03);
    --button-boxshadow: rgba(253, 76, 0, 0.5) 0 3px 8px;
    --deletebutton-bgimage: linear-gradient(-180deg, indianred, red);
    --messagebanner-bgcolor: lightyellow;
    --messagebanner-color: black;
    --detailpanel-bgcolor: white;
    --font-family: var(--bs-font-sans-serif);
    --background-color: white;
    --background-color-alternate: #f5f5f5; /* Light gray for subtle contrast */
    --font-color: black;
    --font-color-alternate: black;
    --table-rowbg: white;
    --table-rowbg-alternate: var(--bs-table-striped-bg);
    --background-color-actiontable-highlight: #BBBBBB;
    --font-color-actiontable-highlight: black;
    --background-color-formcontrol: var(--bs-body-bg);
    --font-color-formcontrol: var(--bs-body-color);
    --error-message-bordercolor: red;
    --error-message-bgcolor: #ffe6e6;
}

/* Dark theme */
[data-theme="dark"] {
    --navbar-bgimage: linear-gradient(0deg, #1a1a1a, #444444); /* Dark gray gradient */
    --button-bgimage: linear-gradient(-180deg, #00b4d8, #0077b6); /* Blue shades */
    --button-boxshadow: rgba(0, 180, 216, 0.5) 0 3px 8px; /* Blue shadow to match buttons */
    --deletebutton-bgimage: linear-gradient(-180deg, #ff6b6b, #d00000); /* Red shades */
    --messagebanner-bgcolor: lightyellow;
    --messagebanner-color: black;
    --detailpanel-bgcolor: #2a2a2a; /* Slightly lighter dark */
    --font-family: var(--bs-font-sans-serif); /* Keep your sans-serif */
    --background-color: #121212; /* Deep dark background */
    --background-color-alternate: #4F4F4F; /* Slightly lighter dark gray */
    --font-color: white;
    --font-color-alternate: white;
    --table-rowbg: var(--detailpanel-bgcolor);
    --table-rowbg-alternate: var(--background-color-alternate);
    --background-color-actiontable-highlight: #111111;
    --font-color-actiontable-highlight: white;
    --background-color-formcontrol: #343a40; /* Dark gray for inputs */
    --font-color-formcontrol: #e9ecef; /* Light gray text */
}

/* Nature theme */
[data-theme="nature"] {
    --navbar-bgimage: linear-gradient(0deg, #2f4f4f, #8b9a7f); /* Slate to sage green */
    --button-bgimage: linear-gradient(-180deg, #f4a261, #e76f51); /* Warm orange tones */
    --button-boxshadow: rgba(244, 162, 97, 0.5) 0 3px 8px; /* Warm orange shadow */
    --deletebutton-bgimage: linear-gradient(-180deg, #d4a5a5, #9b2226); /* Soft red to deep red */
    --messagebanner-bgcolor: #f5f5dc; /* Beige/cream */
    --messagebanner-color: #355e3b; /* Forest green text */
    --detailpanel-bgcolor: #faf7e9; /* Off-white with a warm tint */
    --font-family: var(--bs-font-sans-serif); /* Keep your font */
    --background-color: #e9ecef; /* Light gray with a natural feel */
    --background-color-alternate: white;
    --background-color-alternate: #cdc0a8; /* Tan/light brown */
    --font-color: black;
    --font-color-alternate: black;
    --table-rowbg: var(--detailpanel-bgcolor);
    --table-rowbg-alternate: var(--background-color-alternate);
    --background-color-actiontable-highlight: #d2b48c;
    --font-color-actiontable-highlight: black;
    --background-color-formcontrol: #e9f5e9; /* Pale green */
    --font-color-formcontrol: #355e3b; /* Forest green */
}

/* Cyberpunk theme */
[data-theme="cyberpunk"] {
    --navbar-bgimage: linear-gradient(0deg, #0d1b2a, #1b263b); /* Dark blue to midnight */
    --button-bgimage: linear-gradient(-180deg, #ff00ff, #9400d3); /* Magenta to purple */
    --button-boxshadow: rgba(255, 0, 255, 0.5) 0 3px 8px; /* Neon magenta shadow */
    --deletebutton-bgimage: linear-gradient(-180deg, #ff073a, #800020); /* Neon red to burgundy */
    --messagebanner-bgcolor: #00ffff; /* Cyan */
    --messagebanner-color: #000000; /* Black text for contrast */
    --detailpanel-bgcolor: #1e1e1e; /* Dark gray */
    --font-family: var(--bs-font-sans-serif); /* Your font choice */
    --background-color: #0a0a0a; /* Near-black base */
    --background-color-alternate: white;
    --background-color-alternate: #353535; /* Slightly lighter black */
    --font-color: white;
    --font-color-alternate: white;
    --table-rowbg: var(--detailpanel-bgcolor);
    --table-rowbg-alternate: var(--background-color-alternate);
    --background-color-actiontable-highlight: black;
    --font-color-actiontable-highlight: white;
    --background-color-formcontrol: #2d2d2d; /* Dark gray with neon edge */
    --font-color-formcontrol: #00ffff; /* Cyan text */
}

[data-theme="red-black"] {
    --navbar-bgimage: linear-gradient(to bottom, #ee0000, #990000); /* Matches #headerBar gradient */
    --button-bgimage: linear-gradient(to bottom, #ee0000, #990000); /* Red gradient for buttons */
    --deletebutton-bgimage: linear-gradient(to bottom, #ff6666, #990000); /* Softer red for delete */
    --messagebanner-bgcolor: lightyellow;
    --messagebanner-color: #777777; /* Light gray text, per site’s #ccc usage */
    --detailpanel-bgcolor: #ffffff; /* White, like #wrapper’s content area */
    --background-color: #000000; /* Black body background */
    --button-boxshadow: rgba(238, 0, 0, 0.5) 0 3px 8px; /* Red shadow matching #e00 */
    --background-color-alternate: #eeeeee; /* Light gray for nested contrast, like .even */
    --font-family: "Verdana, Tahoma, Helvetica, Arial, sans-serif"; /* Exact font stack from site */
    --font-color: white;
    --font-color-alternate: black;
    --table-rowbg: var(--detailpanel-bgcolor);
    --table-rowbg-alternate: var(--background-color-alternate);
    --background-color-actiontable-highlight: #BBBBBB;
    --font-color-actiontable-highlight: black;
    --background-color-formcontrol: #333333; /* Dark gray-black */
    --font-color-formcontrol: #ffcccc; /* Light red text */
}

[data-theme="ocean-breeze"] {
    --navbar-bgimage: linear-gradient(0deg, #1e3c72, #2a5298); /* Deep blue to teal */
    --button-bgimage: linear-gradient(-180deg, #48c6ef, #6f86d6); /* Sky blue to ocean blue */
    --button-boxshadow: rgba(72, 198, 239, 0.5) 0 3px 8px; /* Light blue shadow */
    --deletebutton-bgimage: linear-gradient(-180deg, #ff758c, #ff7eb3); /* Soft coral tones */
    --messagebanner-bgcolor: #e6f3fa; /* Pale blue */
    --messagebanner-color: #1e3c72; /* Dark blue text */
    --detailpanel-bgcolor: #f0f8ff; /* Alice blue */
    --font-family: var(--bs-font-sans-serif);
    --background-color: #e0f7fa; /* Light cyan */
    --background-color-alternate: #b3e5fc; /* Slightly deeper cyan */
    --font-color: #1e3c72;
    --font-color-alternate: #1e3c72;
    --table-rowbg: var(--detailpanel-bgcolor);
    --table-rowbg-alternate: var(--background-color-alternate);
    --background-color-actiontable-highlight: #a3d9f7;
    --font-color-actiontable-highlight: #1e3c72;
    --background-color-formcontrol: #d1e8f5; /* Light blue */
    --font-color-formcontrol: #1e3c72; /* Dark blue */
}

[data-theme="sunset-glow"] {
    --navbar-bgimage: linear-gradient(0deg, #ff5e62, #f39047); /* Red-orange to yellow-orange */
    --button-bgimage: linear-gradient(-180deg, #ffb347, #ffcc33); /* Golden gradient */
    --button-boxshadow: rgba(255, 179, 71, 0.5) 0 3px 8px; /* Orange shadow */
    --deletebutton-bgimage: linear-gradient(-180deg, #ff6b6b, #ff4040); /* Red gradient */
    --messagebanner-bgcolor: #ffe8cc; /* Pale peach */
    --messagebanner-color: #4a2c6b; /* Deep purple text */
    --detailpanel-bgcolor: #fff5e6; /* Off-white with warm tint */
    --font-family: var(--bs-font-sans-serif);
    --background-color: #f9e1cc; /* Light peach */
    --background-color-alternate: #f7d1a3; /* Muted orange */
    --font-color: #4a2c6b;
    --font-color-alternate: #4a2c6b;
    --table-rowbg: var(--detailpanel-bgcolor);
    --table-rowbg-alternate: var(--background-color-alternate);
    --background-color-actiontable-highlight: #f5c78e;
    --font-color-actiontable-highlight: #4a2c6b;
    --background-color-formcontrol: #fce8d4; /* Pale orange */
    --font-color-formcontrol: #4a2c6b; /* Deep purple */
}

[data-theme="forest-night"] {
    --navbar-bgimage: linear-gradient(0deg, #1b3b2f, #355e3b); /* Dark green gradient */
    --button-bgimage: linear-gradient(-180deg, #8a9a5b, #5e7550); /* Olive tones */
    --button-boxshadow: rgba(138, 154, 91, 0.5) 0 3px 8px; /* Olive shadow */
    --deletebutton-bgimage: linear-gradient(-180deg, #a0522d, #7a3c1e); /* Brown-red */
    --messagebanner-bgcolor: #3a4f3b; /* Deep green */
    --messagebanner-color: #e6ccb2; /* Light tan text */
    --detailpanel-bgcolor: #2e3b2e; /* Darker green-gray */
    --font-family: var(--bs-font-sans-serif);
    --background-color: #1f2a1f; /* Forest dark */
    --background-color-alternate: #3c4f3c; /* Slightly lighter green */
    --font-color: #e6ccb2;
    --font-color-alternate: #e6ccb2;
    --table-rowbg: var(--detailpanel-bgcolor);
    --table-rowbg-alternate: var(--background-color-alternate);
    --background-color-actiontable-highlight: #2a3b2a;
    --font-color-actiontable-highlight: #e6ccb2;
    --background-color-formcontrol: #354f3a; /* Dark green */
    --font-color-formcontrol: #d4e6b2; /* Light green-tan */
}

[data-theme="pastel-dream"] {
    --navbar-bgimage: linear-gradient(0deg, #b3cde0, #d4e4f7); /* Light blue gradient */
    --button-bgimage: linear-gradient(-180deg, #f7c6d6, #f9b5c9); /* Pale pink */
    --button-boxshadow: rgba(247, 198, 214, 0.5) 0 3px 8px; /* Pink shadow */
    --deletebutton-bgimage: linear-gradient(-180deg, #ffb6b6, #ff9999); /* Soft red */
    --messagebanner-bgcolor: #f5f5dc; /* Beige */
    --messagebanner-color: #6b8299; /* Muted blue text */
    --detailpanel-bgcolor: #f9f2f4; /* Off-white pink */
    --font-family: var(--bs-font-sans-serif);
    --background-color: #f0f4f8; /* Light gray-blue */
    --background-color-alternate: #e6e9f0; /* Slightly darker gray */
    --font-color: #6b8299;
    --font-color-alternate: #6b8299;
    --table-rowbg: var(--detailpanel-bgcolor);
    --table-rowbg-alternate: var(--background-color-alternate);
    --background-color-actiontable-highlight: #dde2eb;
    --font-color-actiontable-highlight: #6b8299;
    --background-color-formcontrol: #f2f6fb; /* Very pale blue */
    --font-color-formcontrol: #6b8299; /* Muted blue */
}

[data-theme="midnight-blue"] {
    --navbar-bgimage: linear-gradient(0deg, #0d1b3a, #1e3a6b); /* Navy gradient */
    --button-bgimage: linear-gradient(-180deg, #4682b4, #2f5d8c); /* Steel blue */
    --button-boxshadow: rgba(70, 130, 180, 0.5) 0 3px 8px; /* Blue shadow */
    --deletebutton-bgimage: linear-gradient(-180deg, #ff6b6b, #cc3333); /* Red gradient */
    --messagebanner-bgcolor: #2a4066; /* Dark blue */
    --messagebanner-color: #d3d3d3; /* Light gray text */
    --detailpanel-bgcolor: #1c2e4a; /* Darker blue */
    --font-family: var(--bs-font-sans-serif);
    --background-color: #0f172a; /* Midnight blue */
    --background-color-alternate: #2e3b57; /* Slightly lighter blue */
    --font-color: #d3d3d3;
    --font-color-alternate: #d3d3d3;
    --table-rowbg: var(--detailpanel-bgcolor);
    --table-rowbg-alternate: var(--background-color-alternate);
    --background-color-actiontable-highlight: #1a2742;
    --font-color-actiontable-highlight: #d3d3d3;
    --background-color-formcontrol: #2c3e50; /* Dark slate blue */
    --font-color-formcontrol: #b0c4de; /* Light steel blue */
}

[data-theme="golden-luxe"] {
    --navbar-bgimage: linear-gradient(0deg, #3c2f2f, #5e4b3c); /* Brown to gold-brown */
    --button-bgimage: linear-gradient(-180deg, #ffd700, #daa520); /* Gold gradient */
    --button-boxshadow: rgba(255, 215, 0, 0.5) 0 3px 8px; /* Gold shadow */
    --deletebutton-bgimage: linear-gradient(-180deg, #ff8c69, #ff4500); /* Orange-red */
    --messagebanner-bgcolor: #fff8e1; /* Pale cream */
    --messagebanner-color: #3c2f2f; /* Dark brown text */
    --detailpanel-bgcolor: #fff5e6; /* Warm off-white */
    --font-family: var(--bs-font-sans-serif);
    --background-color: #faf2e6; /* Light cream */
    --background-color-alternate: #f0e6d2; /* Muted gold */
    --font-color: #3c2f2f;
    --font-color-alternate: #3c2f2f;
    --table-rowbg: var(--detailpanel-bgcolor);
    --table-rowbg-alternate: var(--background-color-alternate);
    --background-color-actiontable-highlight: #e6d9c2;
    --font-color-actiontable-highlight: #3c2f2f;
    --background-color-formcontrol: #fef6e8; /* Very pale gold */
    --font-color-formcontrol: #5e4b3c; /* Darker brown */
}

[data-theme="arctic-chill"] {
    --navbar-bgimage: linear-gradient(0deg, #2c5364, #527896); /* Blue gradient */
    --button-bgimage: linear-gradient(-180deg, #a3bffa, #6b7280); /* Light blue to gray */
    --button-boxshadow: rgba(163, 191, 250, 0.5) 0 3px 8px; /* Pale blue shadow */
    --deletebutton-bgimage: linear-gradient(-180deg, #ff9999, #ff6666); /* Soft red */
    --messagebanner-bgcolor: #e6f0fa; /* Light icy blue */
    --messagebanner-color: #2c5364; /* Dark blue text */
    --detailpanel-bgcolor: #f7fafc; /* Near-white */
    --font-family: var(--bs-font-sans-serif);
    --background-color: #edf2f7; /* Light gray-blue */
    --background-color-alternate: #d6e4f0; /* Slightly deeper blue */
    --font-color: #2c5364;
    --font-color-alternate: #2c5364;
    --table-rowbg: var(--detailpanel-bgcolor);
    --table-rowbg-alternate: var(--background-color-alternate);
    --background-color-actiontable-highlight: #c9d9e8;
    --font-color-actiontable-highlight: #2c5364;
    --background-color-formcontrol: #e9eef5; /* Light icy blue */
    --font-color-formcontrol: #2c5364; /* Dark blue-gray */
}

[data-theme="vintage-sepia"] {
    --navbar-bgimage: linear-gradient(0deg, #4a2c1b, #6b4423); /* Brown gradient */
    --button-bgimage: linear-gradient(-180deg, #d2a679, #b5895c); /* Sepia tones */
    --button-boxshadow: rgba(210, 166, 121, 0.5) 0 3px 8px; /* Sepia shadow */
    --deletebutton-bgimage: linear-gradient(-180deg, #cc7a5c, #994422); /* Red-brown */
    --messagebanner-bgcolor: #f5e8d3; /* Light beige */
    --messagebanner-color: #4a2c1b; /* Dark brown text */
    --detailpanel-bgcolor: #faf0e6; /* Off-white sepia */
    --font-family: var(--bs-font-sans-serif);
    --background-color: #efe6d9; /* Pale sepia */
    --background-color-alternate: #e6d8c4; /* Muted beige */
    --font-color: #4a2c1b;
    --font-color-alternate: #4a2c1b;
    --table-rowbg: var(--detailpanel-bgcolor);
    --table-rowbg-alternate: var(--background-color-alternate);
    --background-color-actiontable-highlight: #d9c9b2;
    --font-color-actiontable-highlight: #4a2c1b;
    --background-color-formcontrol: #f0e4d0; /* Light sepia */
    --font-color-formcontrol: #6b4423; /* Medium brown */
}

[data-theme="emerald-city"] {
    --navbar-bgimage: linear-gradient(0deg, #1b4d3e, #2e856e); /* Dark to medium green */
    --button-bgimage: linear-gradient(-180deg, #34c759, #1e9043); /* Bright green gradient */
    --button-boxshadow: rgba(52, 199, 89, 0.5) 0 3px 8px; /* Green shadow */
    --deletebutton-bgimage: linear-gradient(-180deg, #ff6b6b, #cc3333); /* Red gradient */
    --messagebanner-bgcolor: #e6ffe6; /* Pale green */
    --messagebanner-color: #1b4d3e; /* Dark green text */
    --detailpanel-bgcolor: #f0fff0; /* Mint white */
    --font-family: var(--bs-font-sans-serif);
    --background-color: #e0f7e0; /* Light green */
    --background-color-alternate: #c2e8c2; /* Muted green */
    --font-color: #1b4d3e;
    --font-color-alternate: #1b4d3e;
    --table-rowbg: var(--detailpanel-bgcolor);
    --table-rowbg-alternate: var(--background-color-alternate);
    --background-color-actiontable-highlight: #b3dfb3;
    --font-color-actiontable-highlight: #1b4d3e;
    --background-color-formcontrol: #d9f5d9; /* Pale green */
    --font-color-formcontrol: #1b4d3e; /* Dark green */
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

span.select2-selection,
span.select2-selection__rendered,
span.select2-search,
span.select2-results,
.form-control {
    background-color: var(--background-color-formcontrol) !important;
    color: var(--font-color-formcontrol) !important;
}

input::placeholder,
input::-webkit-input-placeholder,
input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder {
    color: var(--font-color-formcontrol);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: var(--button-boxshadow);
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    background-color: var(--background-color);
    color: var(--font-color);
}

table {
    border-radius: 15px;
}

.table.table-striped thead {
    background: var(--table-rowbg) !important;
    color: var(--font-color-alternate);
}

    .table.table-striped thead.fixedHeader {
        position: sticky;
        top: 0;
        z-index: 20;
    }

        .table.table-striped thead.fixedHeader tr th {
            background: var(--table-rowbg) !important;
        }

    .table.table-striped thead tr th {
        background-color: var(--table-rowbg);
        color: var(--font-color-alternate);
    }

.table.table-striped tr:nth-of-type(even) td {
    background-color: var(--table-rowbg-alternate);
    color: var(--font-color-alternate);
}

.table.table-striped tr:nth-of-type(odd) td {
    background-color: var(--table-rowbg);
    color: var(--font-color-alternate);
}

#announcementContent {
    color: var(--font-color-alternate);
}


@media (max-width: 576px) {
    .statsTableContainer {
        max-height: 400px; /* or 100vh */
        overflow-y: auto;
    }
}

.baseballStatsButton,
.btn-primary,
.btn-danger {
    background-color: initial;
    background-image: var(--button-bgimage);
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-family: Inter,-apple-system,system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
    height: 40px;
    line-height: 40px;
    outline: 0;
    overflow: hidden;
    padding: 0 20px;
    pointer-events: auto;
    position: relative;
    text-align: center;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: top;
    white-space: nowrap;
    z-index: 9;
    border: 0;
    transition: box-shadow .2s;
    font-weight: bold;
    text-decoration: none;
}

    .baseballStatsButton:hover {
        box-shadow: var(--button-boxshadow);
        color: #FFFFFF;
    }

    .baseballStatsButton.active,
    .btn-primary.active {
        background: white;
        color: black;
        border: 2px solid #FF7E31;
    }

.btn-danger {
    background-image: var(--deletebutton-bgimage);
}

.sportStatNav {
    background-color: white;
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px;
    color: dimgrey;
    cursor: pointer;
    display: inline-block;
    font-family: Inter,-apple-system,system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
    line-height: 40px;
    outline: 0;
    overflow: hidden;
    padding: 0 20px;
    pointer-events: auto;
    position: relative;
    text-align: center;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    vertical-align: top;
    white-space: nowrap;
    z-index: 9;
    border: 1px solid darkgrey;
    transition: box-shadow .2s;
    font-weight: bold;
    text-decoration: none;
}

li.nav-item:last-child .sportStatNav,
li.nav-item:last-child .baseballStatsButton {
    margin-right: 0;
}

span.gameSummary {
    display: none;
}

@media (max-width: 576px) {
    .nav-item .sportStatNav, .nav-item .baseballStatsButton {
        width: 100%;
        margin: 5px 0;
    }
}

@media (max-width: 992px) {
    span.gameSummary {
        display: unset;
    }

    span.gameDetails {
        display: none;
    }

    th span.gameSummary {
        float: left;
    }
}

nav.navbar {
    background-image: var(--navbar-bgimage);
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .4) !important;
}

button.navbar-toggler {
    background-color: white;
}

.navbar-collapse .sportStatNav:hover {
    box-shadow: var(--button-boxshadow);
    color: black;
}

table.actionTable tbody tr:hover td {
    background-color: var(--background-color-actiontable-highlight) !important;
    color: var(--font-color-actiontable-highlight) !important;
    cursor: pointer;
}

table.actionTable tbody tr:hover td {
    background-color: transparent;
}

.tableTitle {
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
}

.detailPanel {
    box-shadow: 2px 4px 4px 4px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    margin: 5px;
    padding: 5px;
    background-color: var(--detailpanel-bgcolor);
    color: var(--font-color-alternate);
}

    .detailPanel.col-sm-12 {
        margin: 15px 5px;
    }

    .detailPanel.col-md-4 {
        padding: 15px;
    }

.buttonPanel {
    margin-top: 10px;
}

.cancelButton {
    float: right;
}

table td {
    vertical-align: middle;
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

    /* Hide default HTML checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input + .slider {
    background-image: var(--button-bgimage);
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.google-sign-in-button {
    cursor: pointer;
    transition: background-color .3s, box-shadow .3s;
    padding: 12px 16px 12px 42px;
    border: none;
    border-radius: 3px;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
    color: #757575;
    font-size: 14px;
    font-weight: 500;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
    background-color: white;
    background-repeat: no-repeat;
    background-position: 12px 11px;
}

    .google-sign-in-button:hover {
        box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25);
    }

    .google-sign-in-button:active {
        background-color: #eeeeee;
    }

    .google-sign-in-button:active {
        outline: none;
        box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25), 0 0 0 3px #c8dafc;
    }

    .google-sign-in-button:disabled {
        filter: grayscale(100%);
        background-color: #ebebeb;
        box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
        cursor: not-allowed;
    }

span.win {
    color: limegreen;
    font-weight: bold;
    text-transform: uppercase;
}

span.loss {
    color: red;
    font-weight: bold;
}

span.tie {
    color: black;
    font-weight: bold;
}

.removeButton {
    display: inline-block;
    font-weight: bold;
    color: white;
    background-image: var(--deletebutton-bgimage);
    width: 24px;
    height: 28px;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
    padding-bottom: 22px;
    margin-left: 10px;
    border: 2px solid black;
    box-shadow: 2px 4px 4px 4px rgba(0, 0, 0, 0.15);
    margin-right: 2px;
}

    .removeButton:hover {
        margin-left: 12px;
        box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.15);
        margin-right: 0;
    }

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control, table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
    display: flex;
    align-items: center;
}

    table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before, table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
        vertical-align: middle;
        flex-shrink: 0;
        width: 0;
        height: 0;
    }

span.dtr-data:has(a.baseballStatsButton) {
    display: flex; /* Use flexbox to align items horizontally */
    flex-wrap: wrap; /* Allow wrapping if the container is too small */
    gap: 1em;
}

span.dtr-data a.baseballStatsButton {
    flex: 1 0 auto; /* Allow links to grow and shrink, but base size on content */
    white-space: nowrap; /* Prevent text from wrapping inside the links */
}

span.errorGroup {
    white-space: pre-wrap;
    border: 2px solid transparent; /* Start with a transparent border */
    border-radius: 10px;
}

    /* Show border only when the element is not empty and has content */
    span.errorGroup:not(:empty) {
        border-color: red; /* Border color when visible and not empty */
    }

tr.totalsRow td {
    font-weight: bold;
}

.editing {
    border: 3px dashed #2980b9;
}

/* Alignment styles for images, videos and iframes in editable regions */

/* Center (default) */
[data-editable] iframe,
[data-editable] image,
[data-editable] [data-ce-tag=img],
[data-editable] img,
[data-editable] video {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

    /* Left align */
    [data-editable] iframe.align-left,
    [data-editable] image.align-left,
    [data-editable] [data-ce-tag=img].align-left,
    [data-editable] img.align-left,
    [data-editable] video.align-left {
        clear: none;
        float: left;
        margin-right: 0.5em;
    }

    /* Right align */
    [data-editable] iframe.align-right,
    [data-editable] image.align-right,
    [data-editable] [data-ce-tag=img].align-right,
    [data-editable] img.align-right,
    [data-editable] video.align-right {
        clear: none;
        float: right;
        margin-left: 0.5em;
    }

/* Alignment styles for text in editable regions */
[data-editable] .text-center {
    text-align: center;
}

[data-editable] .text-left {
    text-align: left;
}

[data-editable] .text-right {
    text-align: right;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top: 4px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.divisionTable {
    width: 100% !important;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.8); /* Dark background */
    border-radius: 50%; /* Make it circular */
    width: 40px; /* Adjust size */
    height: 40px;
    background-size: 50%; /* Adjust icon size */
    background-repeat: no-repeat;
    background-position: center;
}

.carousel-indicators {
    margin-bottom: -25px;
}

    .carousel-indicators [data-bs-target] {
        background-color: rgba(0, 0, 0, 0.8); /* Dark background */
        width: 12px; /* Circle size */
        height: 12px;
        border-radius: 50%; /* Make them circular */
        border: 2px solid white; /* White border */
        margin: 5px; /* Space between indicators */
        transition: transform 0.2s ease, background-color 0.2s ease;
    }

        .carousel-indicators [data-bs-target].active {
            background-color: white; /* Highlight active indicator */
            transform: scale(1.3); /* Slightly larger for the active indicator */
            border-color: black; /* Black border for active */
        }

.carouselDetailPanel {
    background-color: var(--background-color-alternate);
    color: var(--font-color-alternate);
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    min-width: 200px;
    background-color: white;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 10px;
}

    .dropdown-content > :last-child {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .dropdown-content > :first-child {
        background-image: var(--button-bgimage);
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .dropdown-content .dropdown-header {
        padding: 10px;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        background-color: #FF7E31;
        color: white;
        max-width: 200px;
        white-space: normal;
    }

    .dropdown-content a {
        color: black;
        padding: 10px 16px;
        text-decoration: none;
        display: block;
    }

        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }

    .dropdown-content.active {
        display: block;
        z-index: 10;
        top: 0;
        right: 0;
    }

.dropdown:hover .dropbtn {
    color: #007bff;
}

.control-label {
    font-weight: bold;
    font-size: 1.2em
}

.statSummary {
    vertical-align: middle;
}

td.dt-empty {
    width: 100%;
}

.messageBanner {
    font-weight: bold;
    color: var(--messagebanner-color);
    background-color: var(--messagebanner-bgcolor);
    padding: 10px 0 0 0;
    text-align: center;
}

#theme-selector {
    margin: 20px;
}

.theme-option {
    margin: 10px 0;
}

.theme-button {
    font-size: 1.2em;
    padding: 8px 16px;
    border: 2px solid #ccc;
    background-color: #f5f5f5;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

    .theme-button:hover {
        background-color: #e0e0e0;
    }

    .theme-button.selected {
        background-color: #007bff; /* Blue to indicate selection */
        color: #fff;
        border-color: #0056b3;
    }

.color-swatch {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-left: 10px;
    border: 1px solid #ccc;
}

.input-validation-error {
    border: 2px solid var(--error-message-bordercolor) !important; /* Highlight with a red border */
    background-color: var(--error-message-bgcolor); /* Light red background */
}

span.field-validation-error {
    color: var(--error-message-bordercolor);
}

#fixed-button-panel {
    transition: all 0.3s ease; /* Smooth transition when switching states */
    background-color: var(--background-color-alternate); /* Match your page background */
    padding: 10px; /* Consistent spacing */
    width: 100%; /* Full width when fixed */
    box-sizing: border-box; /* Include padding in width */
    z-index: 1000; /* Ensure it stays above other content */
    position: fixed;
    bottom: 0;
    left: 0;
}

@media (min-width: 768px) {
    #fixed-button-panel {
        left: 25%;
        width: 50%;
    }
}

.playerCheckbox {
    margin-top: 0;
    margin-right: 7px;
}

.mergeButton {
    width: 100px;
    position: absolute;
    margin-top: 10px;
    margin-left: 10px;
}

.bg-primary {
    background-color: var(--messagebanner-bgcolor) !important; /* Change to your desired color */
}

#map {
    width: 100%;
    height: 300px;
    border: 1px solid #ccc;
}

#searchResults {
    border: 1px solid black;
    border-radius: 5px;
    margin-bottom: 5px;
}

#searchResults .list-group-item {
    padding: 5px 10px;
    font-size: 14px;
}

    #searchResults .list-group-item:hover {
        background-color: #f8f9fa;
    }

ins[data-ad-status="unfilled"] {
    display: none !important;
}