/* Existing CSS */
.events-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    min-width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.event-place-card {
    border: 1px solid #ccc;
    border-radius: 8px;
    max-width: 400px;
    min-width: 400px;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    background-color: #fff;
    box-sizing: border-box;
}

.event-place-card:not(:last-child) {
    margin-right: 20px;
}

@media screen and (max-width: 900px) {
    .event-place-card {
    	max-width: 400px;
    	min-width: 400px;
    	margin-left: 25px;
    	width: calc(100% - 20px);
    }
    .page-container h1 {
    	margin-left: 25px;
    	padding-bottom: 5px;
    }
}

.page-container h1 {
	padding-bottom: 5px;
}

.event-header img {
    max-width: 100%;
    height: auto;
    border-radius: 8px 8px 0 0;
}

.event-details {
    padding: 20px;
}


.event-details-table-container {
    width: 100%;
    overflow: auto; /* Enable scrolling if content overflows */
    max-height: 180px; /* Set a maximum height */
}

.event-details-table {
    width: 100%;
    border-collapse: collapse;
}

.event-details-table td {
    padding: 8px 0;
    border-bottom: 1px solid #ccc;
    max-width: 200px; /* Set a maximum width for the cells */
    white-space: nowrap; /* Prevent content from wrapping */
    overflow: hidden; /* Enable horizontal overflow scrolling */
    text-overflow: ellipsis; /* Display ellipsis (...) for overflowing text */
}

/* Override styles when inside .short-event */
.event-container .event-details-table td {
    overflow: visible; /* Allow content to overflow */
    white-space: normal; /* Allow content to wrap */
    text-overflow: clip; /* Display the full text */
}

/* Override styles when inside .short-event */
.modal .event-details-table td {
    overflow: hidden; /* Allow content to overflow */
    overflow-x: auto;
    white-space: nowrap; /* Allow content to wrap */
    text-overflow: clip; /* Display the full text */
}


.event-buttons {
    margin-top: 20px;
}

.details-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    width: 100%;
    background-color: #0d6efd;
    color: #ffffff;
    cursor: pointer;
    font-family: "Termina", sans-serif;
  	font-weight: 700;
    transition: background-color 0.3s; /* Smooth transition */
    padding: 20px;
    margin-bottom: 20px;
}
.seeall-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    width: 100%;
    background-color: #0d6efd;
    color: #ffffff;
    cursor: pointer;
    font-family: "Termina", sans-serif;
  	font-weight: 700;
    margin-right: 10px;
    transition: background-color 0.3s; /* Smooth transition */
    padding: 20px;
    margin-bottom: 20px;
}

.join-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    width: 100%;
    background-color: #1f9617;
    color: #ffffff;
    cursor: pointer;
    font-family: "Termina", sans-serif;
  	font-weight: 700;
    margin-right: 10px;
    transition: background-color 0.3s; /* Smooth transition */
    padding: 20px;
}

.leave-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    width: 100%;
    background-color: #dc3545;
    color: #ffffff;
    cursor: pointer;
    font-family: "Termina", sans-serif;
  	font-weight: 700;
    margin-right: 10px;
    transition: background-color 0.3s; /* Smooth transition */
    padding: 20px;
}

.details-btn:hover {
    background-color: #0b5ed7;
}

.join-btn:hover {
    background-color: #1a7d13;
}

.results-btn {
    padding: 8px 16px;
    border: none;
    width: 100%;
    border-radius: 4px;
    background-color: #dc3545;
    color: #ffffff;
    cursor: pointer;
    font-family: "Termina", sans-serif;
  	font-weight: 700;
    margin-right: 10px;
    padding: 20px;
}

.results-btn:hover {
    background-color: #c82333;
}

/* New CSS for the overlay image */
.event-header {
    position: relative;
}

.event-image {
    display: block;
    border-radius: 8px 8px 0 0; /* Ensure border-radius is applied to main image */
    max-height: 126px;
    width: 100%;
}

.sim-logo {
    position: absolute;
    bottom: 0;
    left: 0;
    max-height: 70px; /* Adjust the height as needed */
    padding: 8px 8px;
    
}

.event-container {
    display: flex;
    gap: 20px; /* Space between columns */
}

.column-one {
    flex: 1 1 33.33%; /* 1/3 of the container width */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between items in this column */
}

.column-two {
    flex: 2 1 66.67%; /* 2/3 of the container width */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between items in this column */
}

.event-short,
.event-settings,
.event-description {
    border: 1px solid #ccc;           /* Border similar to .event-place-card */
    border-radius: 8px;               /* Rounded corners */
    padding: 20px;                    /* Padding inside the elements */
    background-color: #fff;           /* Background color */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Box shadow for subtle depth */
    box-sizing: border-box;           /* Ensure padding is included in element width/height */
}

.event-short {
    flex: 1;
}

.event-settings {
    flex: 1;
}

.registered-results {
    flex: 1;
}

/* Media query for smaller screens to stack columns */
@media screen and (max-width: 768px) {
    .event-container {
        flex-direction: column;
    }

    .column-one,
    .column-two {
        flex: 1 1 100%; /* Each column takes full width on smaller screens */
    }
}

.event-register {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    border: 1px solid #ccc;           /* Border similar to .event-place-card */
    border-radius: 8px;               /* Rounded corners */
    padding: 20px;                    /* Padding inside the elements */
    background-color: #545353;           /* Background color */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Box shadow for subtle depth */
    box-sizing: border-box;           /* Ensure padding is included in element width/height */
}


.event-register-button {
    /* Existing styles */
    display: inline-block;
    padding: 10px 20px;
    background-color: #1f9617; /* Green background color */
    color: #fff;
    font-family: "Termina", sans-serif;
    font-weight: 700;
    line-height: 2.375rem;
    text-decoration: none;
    border-radius: 3px; /* Rounded corners */
    transition: background-color 0.3s; /* Smooth transition */
    
    /* New styles */
    border: none; /* Remove border */
    cursor: pointer; /* Change cursor to pointer */
    outline: none; /* Remove outline */
}

.banner-text .event-register-button, .banner-text .event-unregister-button {
    margin-top: 1.25rem !important;

}

/* Add hover effect */
.event-register-button:hover {
    background-color: #0c5f0e; /* Darker green on hover */
}

.event-unregister-button {
    /* Existing styles */
    display: inline-block;
    padding: 10px 20px;
    background-color: #dc3545; /* Red background color */
    color: #fff;
    font-family: "Termina", sans-serif;
    font-weight: 700;
    line-height: 2.375rem;
    text-decoration: none;
    border-radius: 3px; /* Rounded corners */
    transition: background-color 0.3s; /* Smooth transition */
    
    /* New styles */
    border: none; /* Remove border */
    cursor: pointer; /* Change cursor to pointer */
    outline: none; /* Remove outline */
}

/* Add hover effect */
.event-unregister-button:hover {
	background-color: #9c1f2c; /* Darker red on hover */
}

.registered-results {
    border: 1px solid #ccc;           /* Border similar to .event-place-card */
    border-radius: 0px  8px 8px 8px;               /* Rounded corners */
    padding: 20px;                    /* Padding inside the elements */
    background-color: #fff;           /* Background color */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Box shadow for subtle depth */
    box-sizing: border-box;           /* Ensure padding is included in element width/height */
}

.tab-container {
    width: 100%;
    margin: 0 auto;
}

.tabs {
    display: flex;
}

.tab-link {
	border-radius: 8px  8px 0px 0px;
    padding: 10px;
    width: 150px;
    text-align: center;
    cursor: pointer;
    background-color: #EAEAEA;
    border: 1px solid #ccc;
    border-bottom: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Box shadow for subtle depth */
    box-sizing: border-box;
}

.tab-link:hover {
    background-color: #fff;
}

.tab-link.active {
    background-color: #fff;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: flex;
}

/* Remove bullets from the list */
.car-classes {
    list-style-type: none;
    padding-left: 0;
}

.car-list {
    list-style-type: none;
    padding-left: 20px;
}

/* Style for the class headers */
.class-header {
    cursor: pointer;
    display: flex;
    align-items: center;
}

/* Styling for the arrow icon */
.arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: #333 transparent transparent transparent;
    margin-left: 5px;
    transition: transform 0.3s;
}

/* Rotate arrow when class is expanded */
.expanded .arrow {
    transform: rotate(180deg);
}

/* Prevent checkbox from expanding the class */
.class-header input[type="checkbox"] {
    cursor: auto;
}

/* Adjust the width of the input field */
#practice, #qualy, #race1, #race2, #race3 {
    width: 45px; /* Set the desired width */
}

#race1Type, #race2Type, #race3Type {
	width: 80px;
}

.car-image-button {
    border: none; /* Remove default button border */
    border-radius: 8px;
    padding: 0; /* Remove padding to fit image size */
    cursor: pointer; /* Change cursor to pointer */
    width: 250px;
    margin: 5px;
}

.car-image-button img {
    display: block; /* Make the image a block element */
    width: 100%; /* Ensure the image fills the button horizontally */
    height: auto; /* Automatically adjust the height to maintain aspect ratio */
}

.car-image-button:hover {
    opacity: 0.8; /* Reduce opacity on hover */
}

.selected {
    border: 2px solid blue; /* Add blue border to selected button */
}

.details-row {
    display: none; /* Hide details rows by default */
}

.spacer-row {
    display: none; /* Hide spacer row by default */
}