/* ==============================
 * GLOBAL CSS OPTIONS FOR EACH SERIES
 * ============================== */
 :root {
    /* Color palette */
    --hover-color: #171717; /* Default hover color for interactive elements */
    --border-color: rgb(0, 0, 0, .125); /* Default border color, with slight transparency */
    --shadow-color: rgba(0,0,0,.15); /* Default shadow color for depth effects */
    --background-color: #f9f9f9; /* Default background color for content areas */
    --text-color: #fff; /* Default text color, optimized for contrast against dark backgrounds */
    --primary-cancelled-color: #656565;
    --primary-postponed-color: #656565; 

    /* Font */
    --font-family: "Titillium Web", Sans-serif; /* Default font family, using Oswald from Google Fonts */
    --font-size: 14px; /* Default font size for body text */

    /* Spacing */
    --padding: 1rem; /* Default padding for elements, ensuring adequate spacing */
    --margin: 1px; /* Default margin, used sparingly for slight adjustments */
}

/* Xtreme Outlaw Series Theme Variables
 * Specific theme for the Xtreme Outlaw Series, defining a unique color palette.
 */
.xtreme-outlaw-series {
    --primary-color: #c12b2a; /* Primary theme color, a bold red */
    --secondary-color: #171717; /* Secondary theme color, a deep black for contrast */
}

/* Super DIRTcar Series Theme Variables
 * Specific theme for the Super DIRTcar Series, featuring a vibrant color palette.
 */
.super-dirtcar-series {
    --primary-color: #f51d26; /* Primary theme color, a bright red */
    --secondary-color: #fdf103; /* Secondary theme color, a vivid yellow for high visibility */
}

.volusia-speedway-park {
    --primary-color: #BD2329;
    --secondary-color: ;
}

.dirtcar-racing {
    --primary-color: #0055a5;
    --secondary-color: #ffdb12;
}

.volusia-karting {
    --primary-color: #097a3e;
}

.dirtcar-summer-nationals {
    --primary-color: #F15A22;
}

.ascs {
    --primary-color: #aa3339;
}

.dirtcar-pageheadings {
    font-family: var(--font-family);
    font-size: 36px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: -5px;
    line-height: 34px;
}

.dirtcar-subheadings {
    font-family: var(--font-family);
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    margin-top: -5px;
}

.positive {
    color: green;
}

.negative {
    color: red;
}

/* ==============================
 * DRIVER DASH
 * ============================== */
.driverdash-info {
    padding: var(--padding) !important;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 5px 10px var(--shadow-color);
    background-color: var(--background-color) !important;
}

.dash-buttons {
	display: flex;
}

.dash-button {
    border: 1px solid transparent;
    background: var(--primary-color);
    cursor: pointer;
    padding: 4px 0px;
    color: var(--text-color);
    font-family: var(--font-family);
    font-size: var(--font-size) !important;
    text-transform: uppercase;
    width: 145px !important;
    margin: var(--margin);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 44px; 
}

.dash-button:hover, .dash-button:hover {
    background: var(--hover-color);
}

.dash-button {
    background: var(--primary-color);
}

.contingency-money {
    font-weight: bold;
}

.contingency-rules, .conti-item {
    margin: 20px 0 30px 0;
}

.contingencys {
    display: flex;
	flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    text-align: center;
}

@media only screen and (max-width: 600px) {
	.dash-buttons {
		display: block;
	}	
}

/* ==============================
 * NEXT & LAST RACES
 * ============================== */
.races-widget {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #FFF;
    text-align: center;
    margin-bottom: 4px;
    border-radius: 4px;
    font-family: var(--font-family);
    text-transform: uppercase;
    min-height: 38px;
}

.race-widget-date {
    padding: 0 12px;
    font-size: 1.0rem;
    font-weight: 600;
    line-height: 18px;
    border-right: 1px solid var(--primary-color);
    width: 60px;
}

.race-widget-name {
    line-height: 16px;
    width: 240px;
}

.race-widget-logo {
    display: flex;
    padding: 2px;
    justify-content: center;
}

.race-widget-logo img {
    max-width: 45px; 
    height: auto; 
}

.race-widget-button {
    background-color: var(--primary-color);
    color: #FFF;
    padding: 3px 4px;
    font-size: 16px; 
    border-radius: 6px;
    cursor: pointer; 
    transition: background-color 0.3s ease; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.race-widget-button:hover, .green:hover {
    background-color: var(--hover-color); 
}

.race-widget-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 2px;
}

.widget-schedule-link, .widget-schedule-link a {
    text-align: right;
    font-size: 1.0rem;
    font-family: var(--font-family);
    font-weight: 600;
    line-height: 1.2em;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: #FFF !important;
    text-decoration: none; 
}

.widget-schedule-link a:hover {
    color: var(--hover-color) !important;
}

.race-widget-button {
    background-color: var(--primary-color);
}

.green {
    background-color: #008000;
}

/* ==============================
 * SPONSORS
 * ============================== */
.sponsors-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
    background-color: #f5f5f5; /* Light gray background */
    padding: 20px; /* Padding around the content inside the container */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Drop shadow for depth */
    border-radius: 10px; /* Optional: rounds the corners of the container */
}

.sponsor-sections {
    margin: 0 0 40px 0;
    width: 100%;
    text-align: center; /* Centers the text title of each sponsor section */
}


.sponsor-sections > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
	align-items: center;
}

.sponsor-sections > div > div {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers content vertically */
    align-items: center; /* Centers content horizontally */
    text-align: center; /* Ensures text, if any, is centered */
    width: 250px; /* Adjust the width as needed, not exceeding 250px */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Drop shadow for each image */
    border-radius: 5px; /* Optional: rounds the corners of the images */
}

.sponsor-sections img {
    max-width: 100%;
    max-height: 150px; /* Or whatever your maximum image height is */
    height: auto;
    display: block; /* This can actually be removed if you're using flexbox as above */
    margin-bottom: 5px; /* Adjust or remove as necessary */
	padding: 20px;
}

.title-sponsors, .Official-sponsors, .Series-sponsors, .Track-sponsors, .series-sponsors {
    /* Specific styles for different types of sponsors can go here */
}

@media (max-width: 768px) {
    .sponsor-sections > div {
        flex-direction: column;
    }
}

/* ==============================
 * HOMEPAGE POINTS PODIUM
 * ============================== */

.podium-container {
  display: flex; 
  margin-bottom: 20px;
  gap: 20px;
}

.second-place { 
    max-width: 375px;
	grid-area: second-place; 
	align-self: end;
	display: relative;
}
.first-place { 
	grid-area: first-place; 
	align-self: end;
	display: relative;
}
.third-place { 
    max-width: 375px;
	grid-area: third-place; 
	align-self: end;
	display: relative;
}

.points-podium-position {
    position: absolute;
    margin-top: 45px;
    margin-left: 20px;
    z-index: 1;
    font-weight: 800;
    font-size: 32px;
	background: #c12b2a;
	padding: 0 22px 0 22px;
	border-radius: 80px;
}

.points-podium-image {
	background: white;
    border-radius: 22px;
	text-align: right;
}

.points-podium-image img {
	width: 80%;
}

.points-border {
	background-color: #c12b2a;
    height: 12px;
    margin-top: -13px;
    width: %;
}

.podiumlast {
	display: block;
	font-size: 28px;
	font-weight: 800;
	text-transform: uppercase;
	margin-top: -14px;
}

.podium-drivername {
	background-color: #4a4a4a;
    color: white;
    border-radius: 0 0 15px 15px;
    padding: 10px 25px 15px 25px;
	margin-top: -6px;
}

.sds-points-top5 {
	min-height: 30px;
    background-color: #f7f7f7;
    border-radius: 6px;
	margin-bottom: 2px;
}

.points-updated {
    text-align: center;
    font-size: 14px;
    text-transform: uppercase;
}

/* ==============================
 * EVENT PAGE 
 * ============================== */
.new-event-info {
    /* Assume background image and other styles are defined here */
    padding: 100px 0;
    display: flex;
    justify-content: center;
	background-size: cover !important;
    background-position: center !important;
    box-shadow: inset 0 0 0 2000px rgb(0 0 0 / 50%);
}

.event-info-box {
    display: flex;
    flex-direction: column;
    background: #f1f1f1a1;
    justify-content: space-between; /* Helps distribute content */
    max-width: 1225px;
    width:100%;
}

.event-buttons {
    margin-top: auto; /* Pushes the buttons to the bottom */
    width: 100%; /* Ensures buttons span the full width of the container */
    display: flex;
    justify-content: space-between; /* Adjust button spacing as needed */
    gap: 4px;
}

.event-buttons a {
    width: 50%;
    background-color: var(--primary-color);
    text-align: center;
    color: white !important;
    font-size: 28px;
}

.event-buttons a:hover {
    background-color: var(--hover-color);
}

.event-info-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px; /* Adjusted for better responsiveness */
    min-height: 200px;
}

.event-info-track {
	margin-bottom: 0 !important;
}

.event-event-logo {
    flex-basis: 20%;
    text-align: center;
}

.event-event-logo img {
    max-width: 100%;
    height: auto;
}

.event-event-info {
    flex-grow: 1;
    padding-left: 20px;
}

.event-event-title {
    margin-bottom: 0; /* Important not necessary if using reset.css or normalize.css */
}

.event-page-info-buttons {
    text-decoration: none;
    color: white;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    background: var(--primary-color);
}

.event-page-navbar-container {
    background-color: #333; /* Dark background for contrast */
    padding: 10px 0; /* Top and bottom padding */
    text-align: center; /* Center-align the nav items */
}

.event-page-navbar {
    width: 100%;
    max-width: 1250px; /* Max width for the content */
    margin: 0 auto; /* Center the navbar in the container */
    display: flex; /* Use flexbox for alignment */
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
}

.event-page-nav-item {
    color: #fff !important;
    font-family: var(--font-family);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 20px;
    padding: 0 20px;
}

.event-page-nav-item {
    border-right: 1px solid white;
}

.event-page-nav-item:hover {
    color: var(--primary-color) !important;
}

.event-page-nav-item:last-child {
	border-right: 0px;
}

.event-page-container {
	width: 49%;
    background-color: #fff; /* Light background for readability */
    border-radius: 8px; /* Soft rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    margin: 20px auto; /* Margin top and bottom for spacing, auto centers the container */
    max-width: 1200px; /* Maximum width to ensure content is well-contained */
    padding: 20px; /* Padding inside the container */
    font-family: var(--font-family); /* Default font, replace with your choice */
}

.event-page-headers {
	position: relative;
	display: flex;
	font-family: var(--font-family);
	font-weight: bold;
	font-size: 26px;
	text-transform: uppercase;
	align-items: center;
}

.event-page-headers:after {
    content: ''; /* Required for the pseudo-element to be generated */
    flex-grow: 1; /* Allow the line to take up the remaining space */
    margin-left: 10px; /* Space between the text and the line, adjust as needed */
    height: 2px; /* Thickness of the line */
    background-color: var(--primary-color); /* Color of the line */
	align-items: center;
}

.no-margin {
    margin-bottom: 0;
}

.event-info-item-header {
    font-weight: bold; /* Makes the text bold */
    color: #333; /* Dark color for the text, adjust as needed */
    font-size: 18px; /* Increases the font size, adjust according to your design */
	font-family: var(--font-family);
	text-transform: uppercase;
}

#days, #hours, #minutes, #seconds {
    color: var(--primary-color);
}

.race-banner {
    width:100%;
}

.details-button {
    background: var(--primary-color);
    color: white !important;
    width: 100%;
    display: flex;
    max-width: 100%;
    text-align: center;
    justify-content: center;
    padding: 10px;
    font-family: var(--font-family);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.details-button:hover {
    background: var(--hover-color);
}

.fullwidth {
    width: 100% !important;
}

@media (max-width: 768px) {
    .event-info-box {
        margin: 20px;
    }
    .event-info-container {
        display: block !important;
    }
    .event-event-title {
        font-size: 26px !important;
        line-height: 22px !important;
    }
    .event-buttons {
        display: block;
    }
    .event-buttons a {
        display: block;
        width: 100%;
    }
    div.event-buttons > a:nth-child(2) {
        margin-top: 2px;
    }
    .event-page-container {
        width: 100%;
        margin: 10px;
    }
    .race-banner {
        width: unset !important;
    }
}