@charset "utf-8";

/* CSS Document */
/* Global styles for dark mode */
body {
    /*background-image: url(https://office.npba.us/include/images/bg/THE-HORSE-8.png) !important;*/
    background-repeat: no-repeat !important;
    background-position: right top !important;
    background-attachment: fixed !important;
    /*color: rgba(0, 0, 0, .8) !important;  Updated subtle black tone for text */
    letter-spacing: 1.1px; /* Slight spacing for elegance */
}

main {
    margin-bottom: 2em !important;
}

.hidden {
    display: none !important;
}

.smokum-regular {
    font-family: "Smokum", serif;
    font-weight: 400;
    font-style: normal;
}

.rye-regular {
    font-family: "Rye", serif;
    font-weight: 400;
    font-style: normal;
}

p {
    /*color: #000000;*/
    line-height: 1.3; /* Better vertical readability */
    letter-spacing: 1.2px; /* Slight spacing for elegance */

}

strong {
    font-weight: 700 !important;
}

/* General Heading Styles */
h1, h2, h3, h4, h5, h6 {
    /*color: rgba(0, 0, 0, .8);  Updated subtle black tone for text */
    text-align: left; /* Align headings to the left */
    font-weight: 500; /* Highlight headers with emphasis */
    line-height: 1.3; /* Better vertical readability */
    text-shadow: none; /* Remove any shadow effects */
    transition: none; /* Remove hover-related transitions */
    margin: .2em 0 !important;
    text-decoration: none; /* Ensure it doesn't look like a link */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Slight shadow for subtle depth */
}


label {
    /*color: rgba(0, 0, 0, .8);  Updated subtle black tone for text */
    text-align: left; /* Align headings to the left */
    font-weight: 500; /* Highlight headers with emphasis */
    line-height: 1em; /* Better vertical readability */
    text-shadow: none; /* Remove any shadow effects */
    transition: none; /* Remove hover-related transitions */
    margin: .1em 0 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Slight shadow for subtle depth */
}

.datecolforsearch h4 {
    line-height: 1.3; /* Better vertical readability */
    font-size: 1.7em;
    margin: .2em 0 !important;
    padding: .25em 0 .25em .25em !important;
    background-color: rgba(0, 0, 0, 0.08); /* Light background for contrast */
    border-radius: 0.2em; /* Rounded corners */
}

.datecolforsearch h3 {
    line-height: 1.3; /* Better vertical readability */
    font-size: 1.7em;
    margin: .2em 0 !important;
    padding: .25em 0 .25em .25em !important;
    background-color: rgba(150, 0, 0, 0.8); /* red */
    border-radius: 0.2em; /* Rounded corners */
    color: rgba(255, 255, 255, .8);
}

.datecolforsearch h4 {
    background-color: rgba(0, 0, 0, 0.05); /* Light background for contrast */
    font-size: 1.35em;
    padding: .2em 0 .2em .25em !important;
}

.dateforsearch {
    text-align: center !important;
}

hr {
    margin: .5rem 0;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* Slight shadow for subtle depth */
}

ul {
    margin-top: 1em !important;
    margin-bottom: 1em !important;
}

li {
    margin-top: .15em !important;
    margin-bottom: .2em !important;
}

#adminMainLinksMenu {
    margin-top: 1em !important;
}


.row {
    margin-bottom: .25em !important;
}

.table {
    margin-top: 1em;
}

.strong {
    font-weight: 700 !important;
}

.italics {
    font-style: italic !important;
}

.bg-transparent-black {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.bg-transparent-black-w5ap {
    background-color: rgba(0, 0, 0, 0.05) !important;
    padding: .25em .5em !important;
}

.bg-transparent-for-selected-show-w5ap {
    background-color: #696969 !important;
    padding: .25em .5em !important;
    color: #ffffff !important;
}

.bg-transparent-for-selected-show-w5ap strong {
    font-size: 1.6em;
    color: #ffffff !important;
}

.bg-body-tertiary {
    background-color: rgba(0, 0, 0, 0.05) !important;
}


footer a:link {
    --bs-text-opacity: 1;
    color: rgba(33, 37, 41, 0.75) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* Slight shadow for subtle depth */
}

footer a:visited {
    --bs-text-opacity: 1;
    color: rgba(33, 37, 41, 0.75) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* Slight shadow for subtle depth */
}

footer a:hover {
    --bs-text-opacity: 1;
    color: rgba(33, 37, 41, 1) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* Slight shadow for subtle depth */
}

footer a:active {
    --bs-text-opacity: 1;
    color: rgba(33, 37, 41, 0.75) !important;
    text-decoration: none !important;
    font-weight: lighter !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* Slight shadow for subtle depth */
}

footer .text-body-secondary {
    line-height: 3em !important;
}

@media (min-width: 768px) {
    footer span {
        font-size: 1.2em;
    }
}

@media (max-width: 767px) {
    footer span {
        font-size: .75em;
    }
}

.nolist-decoration li {
    list-style: none; /* Removes the default bullet points or numbering */
    margin: 0; /* Removes any extra margins (optional) */
    padding: 0; /* Removes padding (optional) */
}

.square-decoration li {
    list-style: square; /* Removes the default bullet points or numbering */
}

.bg-red {
    background-color: #aa0000 !important;
}

.green {
    background-color: #00ff00 !important;
    padding: 2em;
}

.bg-white {
    background-color: #ffffff !important;
}

.btn-buynow {
    margin-top: .5em !important;
}

.hide-in-iframe {
    display: none;
}

#addPointsForm {
    /*margin-top: 2em;*/
}

iframe {
    width: 100%;
    border: none;
    transition: height 0.3s ease-in-out;
}

#iframe-container {
    margin-top: 7em !important;
}

.disabled-link {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}

div.hide-no-link-li ul li:not(:has(a)) {
    display: none;
}

.hide-it {
    display: none;
}

@media screen and (min-width: 1024px) {
    .show-on-desktop-only {
        display: block; /* Replace with desired styles */
    }
}

@media screen and (max-width: 1023px) {
    .show-on-desktop-only {
        display: none;
    }
}

@media screen and (max-width: 1023px) {
    .show-on-mobile-only {
        display: block; /* Replace with desired styles */
    }
}

@media screen and (min-width: 1024px) {
    .show-on-mobile-only {
        display: none;
    }
}

@media screen and (max-width: 1023px) {
    .btn-primary {
        margin-bottom: .25em;
        margin-top: .25em;
    }

    /*adds a top margin-top to first item to a main menu list of buttons in a collapsed menu*/
    .navbar-nav .nav-item:first-of-type {
        margin-top: 1.25em;
    }

    /*adds a top margin-bottom to last item to a main menu list of buttons in a collapsed menu*/
    .navbar-nav .nav-item:last-of-type {
        margin-bottom: 1.25em;
    }
}

.navbar-toggler-icon {
    float: right;
}


.custom-btn {
    padding: 2px 5px; /* Adjust padding for a smaller button */
    font-size: 0.8rem; /* Reduce font size */
}

@media (min-width: 768px) {
    .sort-options li {
        font-size: .7em;
        text-align: center !important;
    }
}

.bg-primary {
    background-color: rgb(0 0 0) !important;
}

.badge {
    font-size: 1.3em;
}

.sort-options label,
.sort-options input[type="radio"] {
    height: 20px; /* Reduce height to 2/3 of default height */
    padding: 0 0 0 1em; /* Remove any extra padding */
    line-height: 20px; /* Align text vertically with radio button */
    font-size: 12px; /* Adjust font size to match the reduced height */
    margin-left: .6em;
}

.sort-options {
    display: inline-block;
    margin-bottom: 10px;
    padding-top: 1em;
    padding-bottom: 1em;
}

.sort-options input[type="radio"] {
    vertical-align: middle; /* Align radio button vertically */
}

.sort-options input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 50px;
    height: 22px;
    border-radius: 25px;
    border: 2px solid #333;
    background-color: rgba(0, 0, 0, 0.25) !important;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
}

.sort-options input[type="radio"]:checked {
    background-color: #4caf50 !important;
    border-color: #4caf50;
}

.sort-options input[type="radio"]::before {
    content: "";
    position: absolute;
    top: 50%; /* Position vertically at 50% */
    left: 6px;
    width: 18px; /* Create the small inner circle */
    height: 18px;
    border-radius: 50%;
    background-color: white;
    transition: transform 0.3s, top 0.3s;
    transform: translateY(-50%); /* Perfectly center the circle */
}

.sort-options input[type="radio"]:checked::before {
    transform: translateY(-50%) translateX(20px); /* Keep the inner circle centered vertically, and move it horizontally when checked */
}

/* Desktop - Center align radio buttons within the list-group-item */
@media screen and (min-width: 1024px) {
    .sort-options .list-group-item {
        display: flex; /* Use flexbox for alignment */
        justify-content: center; /* Center the content horizontally */
        align-items: center; /* Center the content vertically */
        text-align: center; /* Ensure all text is centered */
    }

    .sort-options .list-group-item input[type="radio"] {
        margin-right: 5px; /* Optional: Add some spacing between the radio button and the text */
    }
}

/* Mobile - Left align radio buttons */
@media screen and (max-width: 1023px) {
    .sort-options .list-group-item {
        display: flex; /* Use flexbox for alignment */
        justify-content: flex-start; /* Align the content to the left */
        align-items: center; /* Ensure vertical alignment stays consistent */
        text-align: left; /* Ensure the text aligns properly to the left */
    }

    .sort-options .list-group-item input[type="radio"] {
        margin-right: 5px; /* Optional: Add spacing between the radio button and text */
    }
}

.addtransparentbg {
    background-color: rgba(0, 0, 0, 0.05);
    background-repeat: repeat;
    background-position: left top;
}

.addtransparentbgwithpadding {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 10px;
}

.addtransparentbgimg {
    background-color: rgba(0, 0, 0, 0.05);
}

.addtransparentbg form .warningButton {
    color: #000000;
    background-color: #F77;
    border: 1px solid #999;
}

.showCanceled {
    color: #FF5722 !important;
    font-weight: 600 !important;
}

.specialInformation {
    color: #FF5722 !important;
    font-weight: 600 !important;
}

#pageSuccessMessage {
    color: #ffffff;
    background-color: #0C3;
}

table td #pageSuccessMessage {
    color: #ffffff;
    background-color: #0C3;
}

table td #pageErrorMessage {
    color: #fff;
    background-color: #F00;
}

#pageErrorMessage {
    color: #fff;
    background-color: #F00;
}

tr.onhovercolor {
    background-color: #a5a541;
}

@media (max-width: 768px) {
    thead {
        display: none;
    }

    tbody, .table-responsive {
        display: block;
        width: 100%;
    }

    tr {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 1rem;
    }

    th, td {
        width: 100%;
        text-align: left;
        padding: 0.5rem;
    }

    .table th {
        background-color: #f8f9fa;
        font-weight: bold;
    }

    .table td {
        border: none;
    }
}

.py-5 {
    padding-top: 0;
}


.ui-accordion-header {
    background-color: rgba(0, 0, 0, 0.05);
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: .5em;
}

#accordion {
    margin-top: 1em;
}

#accordion h3 small {
    font-size: .6em !important;
}

@media screen and (min-width: 1024px) {
    #accordion h3 {
        padding-left: 2em;
    }
}

@media screen and (max-width: 1023px) {
    #accordion h3 {
        padding-left: 2em;
    }
}

#accordion h3 {
    text-align: center !important;
    margin-bottom: .2em;
}

.ui-accordion-header {
    background: rgba(0, 0, 0, 0.1); /* Subtle transparent background for pop */
    color: rgba(0, 0, 0, .65); /* Updated subtle black tone for text */
    font-weight: bold; /* Emphasize the header text */
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* Slight shadow for subtle depth */
    border: 1px solid rgba(0, 0, 0, 0.2); /* Light border to frame the heading */
    padding: 0.75em 1em; /* Add spacing for a balanced look */
    border-radius: 8px; /* Slightly rounded corners for a modern feel */
    transition: background 0.3s ease, color 0.3s ease; /* Smooth hover effect */
}

.ui-accordion-header:hover {
    background: rgba(0, 0, 0, 0.2); /* Slightly darker on hover */
    color: #000; /* Text stands out more on hover */
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8); /* Stronger shadow on hover */
    cursor: pointer; /* Indicate interactivity */
}

.ui-accordion-header small {
    font-size: 0.8em; /* Smaller font for secondary text */
    color: rgba(0, 0, 0, .55); /* Updated subtle black tone for text */
    font-weight: normal; /* Keep it distinct from primary text */
}

.ui-accordion-content .list-group-item {
    background-color: rgba(0, 0, 0, 0.05);
}

#standingsTable {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 5px;
}

.headerspacing {
    margin-bottom: 50px !important;
}

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}

.b-example-divider {
    width: 100%;
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh;
}

.bi {
    vertical-align: -.125em;
    fill: currentColor;
}

.nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
}

.nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.bd-mode-toggle {
    z-index: 1500;
}

.bd-mode-toggle .dropdown-menu .active .bi {
    display: block !important;
}

/* Style for the back to top button */
#backToTop {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-color: #000000;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    padding: 4px 11px 8px 11px;
    font-size: 24px; /* Size of the chevron */
    cursor: pointer;
    display: none; /* Initially hidden */
    transition: opacity 0.3s ease;
    text-align: center;
}

#backToTop:hover {
    background-color: #ffffff;
    color: #000000;
}

.btn-primary {
    color: rgba(255, 255, 255, .65);
    background-color: rgba(0, 0, 0, .65);
    --bs-btn-border-color: #ffffff;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6d0000;
    --bs-btn-active-border-color: #ffffff;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-hover-bg: #6d0000;
    --bs-btn-hover-border-color: #000;
}

.nav-item .btn-primary {
    --bs-btn-border-color: #ffffff;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6d0000;
    --bs-btn-active-border-color: #ffffff;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-hover-bg: #6d0000;
    background-color: #aa0000;
    color: #ffffff;
    --bs-btn-hover-border-color: #000;
}

.nav-item {
    padding-right: 10px;
}

.btn-primary:active {
    background-color: #aa0000;
    color: #ffffff;
}


.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    color: rgba(255, 255, 255, .65);
    background-color: rgba(0, 0, 0, .45);
    pointer-events: none;
    border-color: rgba(0, 0, 0, .75);
    opacity: .6;

}

.viewShowResultsButton .btn.disabled, .viewShowResultsButton .btn:disabled, .viewShowResultsButton fieldset:disabled .btn {
    color: rgba(255, 255, 255, .9);
    pointer-events: none;
    background-color: rgba(0, 0, 0, .3);
    border-color: rgba(0, 0, 0, .75);
    opacity: .6;
    box-shadow: none !important;

}

/* General Table Styling */
table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

th, td {
    padding: 8px;
    border: 1px solid #ddd;
}

th {
    cursor: pointer;
    background-color: #f8f9fa;
    font-weight: bold;
}

/* Hidden Columns */
table th.hidden-column,
table td.hidden-column {
    display: none !important; /* Ensures hidden columns are not visible */
}

.hidden-column {
    display: none !important;
}

/* Styling for Totals Row */
.totals-row td {
    font-weight: bold;
}

/* Mobile View Adjustments */
@media (max-width: 768px) {
    #table {
        display: none; /* Hide the table on smaller screens */
    }

    #mobile-view {
        display: block; /* Show the card-based mobile view */
    }

    tbody, .table-responsive {
        display: block;
        width: 100%;
    }

    tr {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 1rem;
    }

    th, td {
        width: 100%;
        text-align: left;
        padding: 0.5rem;
    }
}

/* Mobile View Card Styling */
#mobile-view {
    display: none; /* Hidden by default (visible only in mobile view) */
}

#mobile-view .card {
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow for better readability */
}

#mobile-view .card-header {
    /*background-color: #f8f9fa;*/
    font-weight: bold;
    font-size: 1rem;
    border-bottom: 1px solid #dee2e6;
}

#mobile-view .card-body p {
    margin: 0.5rem 0; /* Adds spacing between content in cards */
}

/* Desktop View Adjustments */
@media (min-width: 769px) {
    #table {
        display: table; /* Show the table on larger screens */
    }

    #mobile-view {
        display: none; /* Hide mobile view on larger screens */
    }
}

.navbar-nav .nav-link.link,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.visited,
.navbar-nav .nav-link.hover,
.navbar-nav .nav-link.visible,
.navbar-nav .nav-link.visible-within,
.navbar-nav .nav-link.target,
.navbar-nav .nav-link.focus,
.navbar-nav .nav-link.show,
.navbar-nav .nav-link.loading {
    color: #ffffff !important;
}

.spinner-grow, .spinner-grow-sm {
    color: rgb(255, 241, 19) !important;
    font-size: 1.5em !important;
}

#adminMainLinksMenuUL .btn {
    margin-bottom: .2em;
}

ul #adminMainLinksMenuUL {
    list-style-type: none !important;
}

#hashorsereportanchor {
    /*nothing*/
}

/* Ensures correct alignment between text and icon */
.copy-it-to-clipboard {
    position: relative; /* Prep for inner icon adjustments within elements */
}

.copy-text {
    /*padding-top: 2px;*/
}

.bi {
    color: #aa0000; /* Applies the custom color to all icons */
}

h4 .copy-it-to-clipboard .bi {
    font-size: 1em !important; /* Match paragraph font size */
    vertical-align: baseline; /* Align icon with text */
}

.list-group {
    /*--bs-list-group-color: rgba(0, 0, 0, 0.85); */
    --bs-list-group-active-color: rgba(0, 0, 0, 0.9); /* Slightly darker black text for active sections */

    /* Eye-catching background gradient */
    /* --bs-list-group-bg: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.025) 0%,
            rgba(255, 255, 255, 0.1) 30%,
            rgba(255, 255, 255, 0.05) 100%
    );*/

    --bs-list-group-active-bg: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.07) 0%,
            rgba(255, 255, 255, 0.2) 30%,
            rgba(255, 255, 255, 0.1) 100%
    ); /* Slightly more pronounced gradient for active items */

    /* Add a radial gradient effect for depth */
    background: radial-gradient(
            circle,
            rgba(255, 255, 255, 0.15) 0%,
            rgba(255, 255, 255, 0) 70%
    ) center,
    linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.025) 0%,
            rgba(255, 255, 255, 0.1) 30%,
            rgba(255, 255, 255, 0.05) 100%
    ) !important;

    /* Styling the border for an elegant glow effect */
    --bs-list-group-active-border-color: rgba(0, 0, 0, 0.07);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
    inset 0 0 10px rgba(255, 255, 255, 0.1); /* Glowing effect around the content */

    /* Flex properties to maintain structure */
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;

    /* Smooth transition for interactions */
    transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.list-group:hover {
    background: radial-gradient(
            circle,
            rgba(255, 255, 255, 0.2) 0%,
            rgba(255, 255, 255, 0) 70%
    ) center,
    linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.07) 0%,
            rgba(255, 255, 255, 0.2) 30%,
            rgba(255, 255, 255, 0.1) 100%
    ) !important;

    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3),
    inset 0 0 12px rgba(255, 255, 255, 0.15); /* Slightly brighter glow on hover */
    transform: scale(1.02); /* Slight zoom */
}

/* 3D Effect for Badges */
.badge {
    position: relative;
    color: #fff; /* Ensures badge text is white for contrast */
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); /* Shadow under text for more depth */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), /* Outer shadow */ inset 0 -2px 4px rgba(0, 0, 0, 0.15); /* Inner shadow for 3D effect */
    border: 1px solid rgba(255, 255, 255, 0.15); /* Subtle white border for edges */
    transition: all 0.2s ease; /* Smooth animation for hover */
}

.btn {
    position: relative;
    /*color: #fff;  Ensures button text is white for contrast */
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); /* Shadow under text for depth */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), /* Outer shadow for a raised look */ inset 0 -2px 4px rgba(0, 0, 0, 0.15); /* Inner shadow for 3D push effect */
    border: 1px solid rgba(255, 255, 255, 0.15); /* Subtle white border for highlight */
    --bs-btn-padding-y: 0.5rem;
    padding: 0.7em 1.2em; /* Add padding inside the button */
    border-radius: 4px; /* Rounded corners for the button */
    text-align: center; /* Center-align button text */
    cursor: pointer; /* Add pointer cursor */
}

.btn:hover {
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2), /* Slightly smaller outer shadow */ inset 0 -1px 3px rgba(0, 0, 0, 0.1); /* Reduced inner shadow */
    transform: translateY(2px); /* Slight "click" effect */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* Enhanced text shadow on hover */
    color: #fff;
}

/* General styling for copy icon */
/* Default styles for .copy-icon across all modes and devices */
/* Default styles for .copy-icon across all modes and devices */
/* Default styles for .copy-icon */
.copy-icon {
    cursor: pointer;
    margin-left: 8px; /* Adds space between the link and the icon */
    font-size: 1.2em; /* Better sizing for visibility */
    vertical-align: middle; /* Aligns properly with text links */
    color: #aa0000; /* Red for link and default state */
    text-shadow: 0 0 3px rgba(170, 0, 0, 0.1); /* Subtle glow/shadow to make the default icon pop */
    transition: transform 0.2s ease, color 0.2s ease, text-shadow 0.2s ease; /* Smooth transitions */
}

/* Visited state (darker, muted effect) */
.copy-icon:visited {
    color: #880000; /* Darker red for visited links */
    text-shadow: 0 0 2px rgba(136, 0, 0, 0.3); /* Slightly muted glow */
}

/* Active state (pressed effect) */
.copy-icon:active {
    color: #6e6e6e; /* Medium gray for active (clicked) state */
    transform: scale(0.95); /* Slight shrink for "pressed" effect */
    text-shadow: none; /* No glow for active state */
}

/* Hover state (you loved this one, keeping it!) */
.copy-icon:hover {
    color: #000000; /* Black for hover state */
    transform: scale(1.1); /* Slight enlargement for "pop" effect */
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8); /* Stronger shadow for hover to add depth */
}

/* Styles for the custom toast */
#custom-toast {
    background-color: #fff113;
    color: #000000;
    padding: 12px 16px;
    border-radius: 8px;

    :root {
        --border-color: #000000;
    }

    border-color: var(--border-color);;
    font-size: 1rem;
    font-weight: bold;
    z-index: 1055;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

#custom-toast.visible {
    opacity: 1;
    visibility: visible;
}

#month-dropdown {
    font-size: 1rem;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    background-color: #f8f9fa;
}

#adminMainLinksMenuUL {
    list-style-type: none; /* Remove default list styling */
    padding: 0 0 .5em 0;
    margin: 0;
}

#adminMainLinksMenuUL li {
    /*display: inline;  Make list items display inline */
    margin-left: 0; /* Add left margin to list items */
}

#adminMainLinksMenuUL li .btn {
    width: 100% !important;
}

/* Remove left margin for the first list item */
#adminMainLinksMenuUL li:first-child {
    margin-left: 0;
}

.pageEditForm {
    margin-top: 1em !important;
    margin-bottom: 1em !important;
    display: flex;
    flex-direction: column;
    gap: .1em; /* Add spacing between elements */
    margin: 0 auto; /* Center the form horizontally on the page */
    padding: 1em; /* Add some padding around the form */
    border: 1px solid #ccc; /* Optional border for better visibility */
    border-radius: 8px; /* Add rounded corners for a modern look */
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.pageEditForm label {
    line-height: 1.5em;
    font-weight: 500; /* Make the label bold for readability */
    margin-bottom: 0.5em;
    margin-top: .5em !important;
    background-color: rgba(0, 0, 0, 0.15) !important;
    padding: 0.5em 1em 0.5em 0.5em !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* Slight shadow for subtle depth */
}

.pageEditForm .col-lg-6, .col-lg-12 {
    margin-bottom: 2em !important;
}


select {
    padding: 0.5em; /* Add padding inside the select dropdown */
    font-size: 1rem; /* Make the text in the select box larger */
    border: 1px solid #ccc; /* Add a slight border */
    border-radius: 4px; /* Rounded corners for select box */
    background-color: rgba(0, 0, 0, 0.3) !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* Slight shadow for subtle depth */
}

input[type="text"], input[type="number"], input[type="password"], textarea {
    background-color: rgba(0, 0, 0, 0.3) !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* Slight shadow for subtle depth */
}

input[type="email"] {
    background-color: rgba(0, 0, 0, 0.3) !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* Slight shadow for subtle depth */
}
input[type="date"] {
    background-color: rgba(0, 0, 0, 0.3) !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* Slight shadow for subtle depth */
}
input[type="tel"] {
    background-color: rgba(0, 0, 0, 0.3) !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* Slight shadow for subtle depth */
}

input[type="radio"] {
    transform-origin: center; /* Ensure it scales from the center */
    margin: 10px; /* Optional: Add some spacing */
}

/* seems to have no affect */
input[type="radio"]:checked {
    color: #aa0000 !important;
}

input, select {
    display: block;
    width: 100%;
    margin-bottom: .25em;
    margin-top: .5em;
    padding: 0.5em;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* Slight shadow for subtle depth */
}

#pageEditForm .input-group input {
    width: 70%;
}

.pageEditForm .btn {
    padding: 0.7em 1.2em; /* Add padding inside the button */
    font-size: 1rem; /* Make the button text larger */
    border-radius: 4px; /* Rounded corners for the button */
    text-align: center; /* Center-align button text */
    cursor: pointer; /* Add pointer cursor */
    margin-top: 2em !important;
}


.pageEditForm .btn-sm {
    padding: .25em !important;
    font-size: .85rem; /* Make the button text larger */
    border-radius: 4px; /* Rounded corners for the button */
    text-align: center; /* Center-align button text */
    cursor: pointer; /* Add pointer cursor */
    margin-top: 0.1em !important;
    width: auto !important;
}

.btn-sm {
    padding: .25em !important;
    font-size: .85rem; /* Make the button text larger */
    border-radius: 4px; /* Rounded corners for the button */
    text-align: center; /* Center-align button text */
    cursor: pointer; /* Add pointer cursor */
    margin-top: 0.1em !important;
    width: auto !important;
}

/*using #pageEditForm  for the archive page here probably need to change it */
#pageEditForm form {
    margin: 0 auto;
    padding: 1em;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.05) !important;
}

#pageEditForm fieldset {
    border: 1px solid #ddd;
    padding: 1em;
    border-radius: 5px;
}

#pageEditForm legend {
    font-weight: bold;
    padding: 0 5px;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* Slight shadow for subtle depth */
}


#pageEditForm button {
    display: block;
    width: 100%;
}


#pageEditForm input[disabled], select[disabled], button[disabled] {
    background-color: rgba(0, 0, 0, 0.3) !important;
    cursor: not-allowed;
}

#pageEditForm option {
    background-color: rgba(0, 0, 0, 0.3) !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* Slight shadow for subtle depth */
}

legend {
    font-weight: bold;
    padding: 0 5px;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* Slight shadow for subtle depth */
}

option {
    background-color: rgba(0, 0, 0, 0.3) !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* Slight shadow for subtle depth */
}

input[disabled], select[disabled], button[disabled] {
    background-color: rgba(0, 0, 0, 0.3) !important;
    cursor: not-allowed;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #aa0000 !important;
    color: #ffffff !important;
}

.siteForm {
    margin-top: 1em !important;
    margin-bottom: 1em !important;
    display: flex;
    flex-direction: column;
    gap: .1em; /* Add spacing between elements */
    margin: 0 auto; /* Center the form horizontally on the page */
    padding: 1em; /* Add some padding around the form */
    border: 1px solid #ccc; /* Optional border for better visibility */
    border-radius: 8px; /* Add rounded corners for a modern look */
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/*
<div class="siteForm">
    <fieldset>
        <label for="editShow"><strong>*</strong>New Show Created ID: <span class="copy-it-to-clipboard">' . $_GET['showId'] . '</span></label>';
    </fieldset>
</div>
*/
.siteForm input, .siteForm select {
    width: 100%;
    margin-bottom: .25em;
    padding: 0.5em;
    font-size: 1rem;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* Slight shadow for subtle depth */
}

.siteForm label {
    font-weight: bold;
    margin-bottom: 1.5em !important;
    margin-top: .5em !important;
    background-color: rgba(0, 0, 0, 0.15) !important;
    padding: 0.5em 1em 0.5em 0.5em !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* Slight shadow for subtle depth */
}

.siteForm fieldset {
    border: 1px solid #ddd;
    padding: 1em;
    border-radius: 5px;
}

.text-state {
    font-size: 2em; /* Slightly larger than default for minor prominence */
    color: #aa0000; /* Subtle dark red to stand out elegantly */
    letter-spacing: .4rem; /*Slight space between letters for refinement */
    text-decoration: none; /* Ensure it doesn't look like a link */
    font-family: "Smokum", serif;
    font-weight: 400;
    font-style: normal;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* Slight shadow for subtle depth */
    margin-top: -5px !important;
}

.text-state:hover {
    font-size: 2em; /* Slightly larger than default for minor prominence */
    color: #aa0000; /* Subtle dark red to stand out elegantly */
    letter-spacing: .4rem; /*Slight space between letters for refinement */
    text-decoration: none; /* Ensure it doesn't look like a link */
    font-family: "Smokum", serif;
    font-weight: 400;
    font-style: normal;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* Slight shadow for subtle depth */
    margin-top: -5px !important;
    pointer-events: none;
}

/* Target the specific form "showform" */
.showform .form-check {
    display: inline-flex; /* Align the checkbox and label in a single line */
    align-items: center; /* Proper label alignment with checkbox */
    margin: 5px 10px; /* Add spacing between checkboxes */
    min-width: 16em !important;
}

/* Ensure the wrapping flow */
.showform .col-lg-12 {
    display: flex; /* Apply Flexbox behavior to Bootstrap columns */
    flex-wrap: wrap; /* Wrap items when out of space */
    gap: 10px; /* Space between items */
}


.showform label {
    font-size: 18px; /* Adjust font size to match the reduced height */
    margin-left: .6em;
    margin-right: 1.5em !important;
    font-weight: 500; /* Make the label bold for readability */
    margin-bottom: 0.5em;
    margin-top: .5em !important;
    background-color: rgba(0, 0, 0, 0.15) !important;
    padding: 0.5em 1em 0.5em 1.5em !important;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8); /* Slight shadow for subtle depth */
}

hr {
    color: #000000 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Slight shadow for subtle depth */
    background-color: rgba(255, 255, 255, 0.8) !important;
}

/* General Styles for Input Containers (Works on Both) */
.form-check {
    display: flex; /* Align input and labels side by side */
    align-items: center; /* Vertically align inputs and labels */
    margin-bottom: 1rem; /* Add a bit of spacing between rows */
}

/* Uniform Sizing for Checkboxes AND Radio Buttons */
.form-check-input {
    width: 1.5rem; /* Adjust size down */
    height: 1.5rem; /* Adjust size down */
    margin-right: 0.5rem; /* Space between input and label */
    cursor: pointer; /* Pointer for better UX */
    appearance: none; /* Reset default browser styles */
    border: 2px solid #aa0000 !important; /* Add a visible border */
    border-radius: 0.3rem; /* Default square for checkboxes */
    background-color: #fff; /* Default background */
    transition: all 0.3s ease; /* Smooth transition for hover/focus */
}

/* Add Hover & Focus Effects */
.form-check-input:hover {
    border-color: #fff113; /* Darker border when hovered */
}

.form-check-input:focus {
    outline: 2px solid #aa0000; /* Blue outline when focused */
    outline-offset: 2px;
}

/* Checked State - Affects Both Checkboxes and Radios */
.form-check-input:checked {
    background-color: #000000; /* Blue fill when checked */
    border-color: #fff113; /* Border matches fill */
    color: #fff;
}

/* Label Styling (Enlarged Clickable Area) */
.form-check-label {
    font-size: 1.1rem; /* Slightly larger text for better readability */
    cursor: pointer; /* Clickable label */
    user-select: none; /* Prevent accidental text selection */
}

form .col-lg-6, form .col-lg-12 {
    margin-top: .75em;
}

/* Style only invalid fields on failure */
input:invalid:focus, select:invalid:focus, textarea:invalid:focus {
    border: 3px solid #FF0000; /* Bright red border */
    box-shadow: 0 0 10px 3px rgba(255, 0, 0, 0.7); /* Red glow */
    outline: none; /* Remove default outline */
    background-color: rgba(255, 0, 0, 0.1); /* Light red background to alert users */
}

/* General invalid fields after form interaction */
input:invalid, select:invalid, textarea:invalid {
    border: 2px solid #FF0000; /* Red border */
}

/* Labels for failed fields */
label[for]:has(input:invalid),
label[for]:has(select:invalid),
label[for]:has(textarea:invalid) {
    color: #FF0000; /* Bright red label to visually indicate associated field failure */
    font-weight: bold;
}

/* Reset dropdown option text styling */
select option {
    color: black; /* Keep dropdown options text color default */
}

/* Hover effect for failed fields to emphasize interaction */
input:invalid:hover, select:invalid:hover, textarea:invalid:hover {
    border-color: #FF2222; /* Slightly brighter hover border color */
    box-shadow: 0 0 12px 4px rgba(255, 0, 0, 0.8); /* Stronger glow effect for hover */
}

/* OPTIONAL: Prevent any validation styling until user interacts */
form :not(:focus):not(:hover):invalid {
    border: 1px solid #0a0a0a; /* Back to default border for untouched fields */
    background-color: transparent;
}

/*SHOWS DISPLAY CSS https://office.npba.us/view/shows/*/
.card.h-100 {
    display: flex;
    flex-direction: column;
}

#showsContainer .card-footer {
    margin-top: auto;
}

#showsContainer .card-header {
    background-color: rgba(0, 0, 0, 0.09) !important;
    font-weight: bold;
    display: flex; /* Enables flexbox layout */
    justify-content: space-between; /* Spaces the items: one to the left, one to the right */
    align-items: center; /* Aligns items vertically */
}

#showsContainer .card {
    background-color: rgba(0, 0, 0, 0.065) !important;

}

#showsContainer #pagination {
    margin-top: 1rem;
}

#showsContainer .pagination .page-link {
    min-width: 40px;
    text-align: center;
}

#showsContainer .footer-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

#showsContainer .subFooter {
    font-size: 0.85rem;
    color: #6c757d;
    text-align: right;
    border-top: 0;
}

/* day-of-week color classes */
#showsContainer .sundayBadge {
    /*background-color: #f9c8e2 !important;*/
    background-color: rgba(0, 0, 0, 0.08) !important; /* Uniform transparent black background */
    color: inherit; /* Keep the text color consistent */
    border: 1px solid rgba(0, 0, 0, 0.3) !important; /* Light transparent border */
    box-shadow: none; /* Remove all shadows */
}

#showsContainer .mondayBadge {
    /*background-color: #aae0aa !important;
    background-color: rgba(0, 0, 0, 0.08) !important; /* Uniform transparent black background */
    color: inherit; /* Keep the text color consistent */
    border: 1px solid rgba(0, 0, 0, 0.3) !important; /* Light transparent border */
    box-shadow: none; /* Remove all shadows */
}

#showsContainer .tuesdayBadge {
    /*background-color: #ffdca8 !important;*/
    background-color: rgba(0, 0, 0, 0.08) !important; /* Uniform transparent black background */
    color: inherit; /* Keep the text color consistent */
    border: 1px solid rgba(0, 0, 0, 0.3) !important; /* Light transparent border */
    box-shadow: none; /* Remove all shadows */
}

#showsContainer .wednesdayBadge {
    /*background-color: #ffe98f !important;*/
    background-color: rgba(0, 0, 0, 0.08) !important; /* Uniform transparent black background */
    color: inherit; /* Keep the text color consistent */
    border: 1px solid rgba(0, 0, 0, 0.3) !important; /* Light transparent border */
    box-shadow: none; /* Remove all shadows */
}

#showsContainer .thursdayBadge {
    /*background-color: #ffb3b3 !important;*/
    background-color: rgba(0, 0, 0, 0.08) !important; /* Uniform transparent black background */
    color: inherit; /* Keep the text color consistent */
    border: 1px solid rgba(0, 0, 0, 0.3) !important; /* Light transparent border */
    box-shadow: none; /* Remove all shadows */
}

#showsContainer .fridayBadge {
    /*background-color: #dab3ff !important;*/
    background-color: rgba(0, 0, 0, 0.08) !important; /* Uniform transparent black background */
    color: inherit; /* Keep the text color consistent */
    border: 1px solid rgba(0, 0, 0, 0.3) !important; /* Light transparent border */
    box-shadow: none; /* Remove all shadows */
}

#showsContainer .saturdayBadge {
    /*background-color: #9eeaf9 !important;*/
    background-color: rgba(0, 0, 0, 0.08) !important; /* Uniform transparent black background */
    color: inherit; /* Keep the text color consistent */
    border: 1px solid rgba(0, 0, 0, 0.3) !important; /* Light transparent border */
    box-shadow: none; /* Remove all shadows */
}

#showsContainer .disabledField {
    opacity: 0.5;
    pointer-events: none;
}

/*SHOWS DISPLAY CSS https://office.npba.us/view/shows/*/
#showsContainer .badge {
    font-size: 1em;
}


.card-header .badge {
    font-size: 1.1em !important;
}

/* Styling badges in the second card-header only */
.card .card-header:nth-of-type(2) .badge {
    font-size: .7em !important;

}

.card-footer a {
    font-size: 1.15em !important;
    background-color: rgba(0, 0, 0, 0.15) !important;
}

#showsContainer .subFooter {
    border-top: 1px solid rgba(0, 0, 0, 0.2) !important;
}

#showsContainer .card-footer.footer-line .btn {
    background-color: rgba(0, 0, 0, 0.05) !important; /* Uniform transparent black background */
    color: inherit; /* Keep the text color consistent */
    border: 1px solid rgba(0, 0, 0, 0.05) !important; /* Light transparent border */
    box-shadow: none; /* Remove all shadows */
}

#showsContainer .card-footer.footer-line .pointsreportbtn {
    /* Your custom styles here */
    background-color: #007bff !important;
    padding: 0.5rem 1rem !important;
}


.dowBadgeRight {
    font-weight: normal;
    font-size: .9em;
    margin-left: 0;
}

.dateTextBadgeLeft {
    background-color: rgba(225, 225, 255, 0.08) !important; /* Uniform transparent black background */
    color: inherit; /* Keep the text color consistent */
    border: 1px solid rgba(0, 0, 0, 0.3) !important; /* Light transparent border */
    box-shadow: none; /* Remove all shadows */
    margin-right: 0;
}


/* Ensure container and child columns expand properly */
#showsContainer .container {
    max-width: 100%;
    padding: 15px;
}

/* Optional override: only if col classes aren't properly working */
@media (min-width: 768px) and (max-width: 991.98px) {
    #showsContainer .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Prevent cards from exceeding layout constraints */
#showsContainer .card {
    max-width: 100%;
    margin-bottom: 15px; /* Add spacing if rows look crowded */
}

.has-points {
    background-color: #ffcccc !important;
}

.section-divider {
    border-top: 2px solid #ddd;
    margin: 20px 0;
}

/* Additional spacing for mobile */
@media (max-width: 576px) {
    .row {
        margin-bottom: 15px;
    }
}

.has-points {
    background-color: #ffcccc !important;
    color: #FF0000 !important;
}

/* Force the <td> elements of "has-points" class row to red
tr.has-points td {
    background-color: red !important;
    color: white !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #aa0000 !important;
}*/
tr.has-points {
    background-color: rgba(0, 0, 0, 0.9) !important;
    color: white !important;
    border: 1px solid #aa0000 !important;
}

/*.bi-check2 {
    color: #FFFFFF !important;
}

.bi-x-lg {
    color: #FFFFFF !important;
}*/
.alert-custom {
    font-size: 1.25rem;
    border-left: 5px solid #17a2b8;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    animation: fadeIn 0.5s ease-in-out;
    background-color: #e9f7fd; /* Slightly tweaked background */
    display: flex;
    align-items: center;
}

.alert-custom .alert-icon {
    font-size: 2rem;
    margin-right: 10px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-header {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    margin-bottom: 0;
    color: var(--bs-card-cap-color);
    background-color: var(--bs-card-cap-bg);
    border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);

    /* Added enhancements */
    border-top-left-radius: calc(var(--bs-border-radius) - var(--bs-card-border-width));
    border-top-right-radius: calc(var(--bs-border-radius) - var(--bs-card-border-width));
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s ease;
}

/* Custom styling for the accordion button */
.custom-accordion-button {
    background: linear-gradient(135deg, #007bff, #00d4ff);
    color: #fff;
    font-weight: 600;
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.half-font-size {
    font-size: 0.5em !important;
}

.em75-font-size {
    font-size: 0.75em !important;
}

.state-sub-badge-pill {
    font-size: 0.65em !important;
    padding: 1px 3px 1px 3px !important;
}

.theme-icon-active {
    color: #aa0000 !important;
}

.big-dropdown .select2-results__options {
    max-height: 500px; /* or 'none' if you want no limit */
}

.parent-option {
    background-color: #aa5500 !important;
}

.alert-success {
    /* General Styling */
    font-size: 1.5rem; /* Larger text */
    font-weight: bold; /* Bold text */
    text-align: center; /* Center the message */
    padding: 20px; /* More padding for spacing */
    border-radius: 10px; /* Rounded corners */

    /* Background and Border */
    background: linear-gradient(135deg, #4caf50, #8bc34a); /* Gradient background */
    border: 1px solid #ffffff; /* Strong border */

    /* Add a subtle shadow */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);

    /* Animation - Pulse */
    animation: pulse 1.5s infinite;
}

#pointsRowsContainer {
    background-color: rgba(255, 255, 255, 1);
}

.points-row {
    margin-bottom: .5em !important;
}

fieldset .accordion {
    margin-bottom: 5em;
}

fieldset .accordion-body {
    background-color: rgba(0, 0, 0, 0.04);
}

fieldset .accordion-button {
    font-weight: bold !important;
    font-size: 1em !important;
}

.newRiderForm {
    background-color: rgba(0, 0, 0, 0.2);
    padding: .2em;
}

.newRiderForm .form-check {
    display: flex;
    align-items: center;
    margin-bottom: .1rem;
}

.standings-accordian .badge {
    padding: 2px 4px !important;
    font-size: .75em !important;
}

.standings-accordian h2 .badge {
    padding: 1em !important;
    font-size: .75em !important;
}

.standings-accordian .accordion-butto {
    font-width: bold !important;
}

.btn-standings-view-show-results {
    padding-top: .3em !important;
    padding-bottom: .3em !important;
    font-size: .85em !important;
}

.btn-standings-view-show-results-2 {
    padding-top: .3em !important;
    padding-bottom: .3em !important;
    font-size: .85em !important;
}

tfoot .totals {
    background-color: rgb(0, 0, 0, 0.4) !important;
    color: #FFFFFF !important;
    font-weight: bolder !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.has-points {
    background-color: #ffcccc !important;
}

.section-divider {
    border-top: 2px solid #ccc;
    margin: 1.5rem 0;
}
.report-type {
    color: #aa0000;
}