.container {
	margin: 0px;
	padding: 0px;
}
.progress {
	height: 8px; /* Reduced height for thinner progress bar */
}
.list-group {
	flex: 0 0 auto; /* Prevent resizing */
	margin: 0; /* Remove margin */
	padding: 0; /* Remove padding */
}
.details-container {
	display: flex;
	flex-wrap: wrap;
	width: 100%; /* Ensure it spans the container */
}
.container-fluid {
	display: flex;
	flex-wrap: wrap;
	width: 100%; /* Ensure it spans the container */
	margin: 0px;
	padding: 0px;
}
.details-wrapper {
	display: flex;
	flex-direction: column;
	flex: 1; /* Fills the remaining space */
	align-items: flex-start;	
	margin-left: 20px; /* Adds space between the list and details */
}
.spacer {
	width:100%;
}
.filler {
	height:100%;
}


/* Narrow mode settings */
@media (max-width: 767px) {
	.list-group {
		width: 100%;
		margin: 0;
	}				
	.details-wrapper {
		width: 100%;
		margin: 0;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		display: none;
		overflow-y: auto;
		background: #fff;		
	}
    .details-wrapper.active {
        display: block; /* Show when active */
    }	
    .details-header {
        position: sticky;
        top: 0;
        background: #f8f9fa;
        z-index: 1001;
        padding: 10px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ddd;
    }	
	.container-fluid {
		flex-direction: column;
	}
	.receipt-footer1,
	.receipt-footer2
	{
		text-align: center !important;
	}

	.hide-sm {
        display: none;
    }
}


/* Medium width settings - stacked details */
@media (min-width: 768px) and (max-width: 1184px) {
	.list-group {
		width: 375px;
		flex-shrink: 0; /* Prevent shrinking */
		margin: 0; /* Align to the left edge */
	}
	.details-wrapper {
		display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px; /* Space between items */
	}
	.container-fluid {
		flex-wrap: nowrap;
	}
	.next-service-box {
		flex: 1 1 48%; 
		margin-right: 20px;
	}
	.since-last-box {
		flex: 1 1 48%; 
		margin-right: 20px;
	}
	.history-box,
	.plandetails-box,
	.service-box,
	.report-area-box,
	.setting-area-box {
		flex: 1 1 100%;
		margin-right: 20px;
	}
	.receipt-footer2
	{
		text-align: end !important;
	}
}

/* Large width settings - side-by-side details */
@media (min-width: 1185px) and (max-width: 1279px) {

	.list-group {
		width: 375px;
		margin: 0;
	}
	.details-wrapper {
		display: flex; /* Show side-by-side */
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;		
		gap: 20px;
	}
	.next-service-box {
		flex: 1 1 47%; 
	}
	.since-last-box {
		flex: 1 1 47%; 
		margin-right: 20px;
	}
    .history-box,
	.plandetails-box,
	.service-box,
	.report-area-box,
	.setting-area-box {
		flex: 1 1 100%;
		margin-right: 20px;
	}
	.receipt-footer2
	{
		text-align: end !important;
	}
}

/* XL width settings - centered contents */
@media (min-width: 1280px) {
    .details-container {
        max-width: 1200px; /* Adjust based on desired maximum width */
        margin: auto; /* Centers the container */
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
    }

	.list-group {
		width: 375px;
	}
	.details-wrapper {
		display: flex; /* Show side-by-side */
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 20px;
	}
	.next-service-box,
	.since-last-box {
		width: 392px;
	}
	.history-box,
	.plandetails-box,
	.service-box,
	.report-area-box,
	.setting-area-box {
		flex: 1 1 100%;
		margin-top: 0;
	}

	.receipt-footer2
	{
		text-align: end !important;
	}
}

/* Common styling for the details boxes */
.next-service-box,
.since-last-box,
.history-box,
.plandetails-box,
.service-box,
.report-area-box,
.setting-area-box {
	background: #f8f9fa;
	padding: 20px;
	border: 1px solid #ccc;
	border-radius: 5px;
	display: block;
}

.history-records {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    font-size: 18px; /* Larger font */
}

.history-header {
    display: flex;
    background: #f8f9fa;
    font-weight: bold;
    padding: 10px 15px;
    border-bottom: 2px solid #ddd;
}

.history-row {
    display: flex;
    text-decoration: none;
    color: #333;
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
    transition: background-color 0.2s ease-in-out;
}

.history-row:hover {
    background-color: #f1f1f1;
}

.history-cell {
    flex: 1;
    padding: 5px;
    text-align: left;
}

/* Adjust column widths */
.history-cell:nth-child(1) {
    flex: 1; /* Date column */
}

.history-cell:nth-child(2) {
    flex: 1; /* Odometer column */
    text-align: center;
}

.history-cell:nth-child(3) {
    flex: 2; /* Service Location column */
}

.service-header,
.page-header {
	font-size: 1.5rem;
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}

.service-icon {
	margin-right: 8px;
	font-size: 2rem;
}

.service-type {
	font-size: 2rem;
	font-weight: bold;
}

.service-location {
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 16px;
}

.service-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 16px;
}

.service-column {
	flex: 1;
	padding: 8px;
}

.service-label {
	font-size: 0.75rem;
	color: #666;
	display: block;
	margin-bottom: 4px;
}

.service-value {
	font-size: 1.25rem;
	font-weight: bold;
}

.service-cost,
.service-estimate {
	margin-bottom: 16px;
}

.service-section {
	margin-bottom: 16px;
}

.service-section-header {
	font-size: 1rem;
	font-weight: bold;
	margin-bottom: 8px;
	margin-top: 8px;
}

.service-list {
	list-style-type: none;
	padding: 0 15px;
	margin: 0;
}

.service-list li {
	margin-bottom: 4px;
}

.btn {
	display: block;
	text-align: center;
	padding: 10px 15px;
	font-size: 1rem;
	font-weight: bold;
}

/* General styling for list items */
.service-record-item,
.service-plan-item,
.report-item,
.setting-item {
    position: relative;
    transition: background-color 0.3s ease;
}

/* Styling for the selected item */
.service-record-item.selected,
.service-plan-item.selected,
.report-item.selected,
.setting-item.selected {
    background-color: #f0f0f0; /* Slightly darker gray */
    border-right: 4px solid #007bff; /* Blue bar on the right */
}

/* Add a hover effect for better UX */
.service-record-item:hover,
.service-plan-item:hover,
.report-item:hover,
.setting-item:hover {
    background-color: #e9ecef; /* Slightly lighter gray on hover */
}


#chartCanvas {
    display: block;
    width: 100% !important; /* Ensure full width */
    height: auto;           /* Maintain aspect ratio */
}

/* css for settings page */

.setting-area-box {
    border: 1px solid #ccc; /* Optional: Add a border to distinguish the area */
    padding: 15px;
    border-radius: 5px;
    background-color: #f9f9f9; /* Light background for better visibility */
    /* margin: 0 auto; /* Center the box */
}

.setting-area-box h4 {
    font-size: 1.5em;
    margin-bottom: 10px;
}


#setting-area-box .list-group {
    width: 100%; /* Allow the list to take full width */
    flex-grow: 1; /* Let it expand within its container */
    max-width: none; /* Remove any maximum width restrictions */
}


.setting-area-content {
    margin-top: 20px;
}

.setting-area-content .input-group {
    max-width: 400px; /* Limit the width of the filter box */
    margin-bottom: 20px; /* Space below the filter box */
}

#setting-list {
    padding: 0; /* Remove padding from the list */
}

	
#setting-list .list-group-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 5px 10px; /* Adjust padding for better spacing */
    border: 1px solid #ddd; /* Optional: Add a border between items */
    background-color: #fff; /* White background for contrast */
}

#setting-list .list-group-item span {
    flex: 1; /* Allow the category name to grow and take space */
    text-overflow: ellipsis; /* Truncate long text */
    overflow: hidden; /* Hide overflow text */
    white-space: nowrap; /* Prevent wrapping */
}

#setting-list .list-group-item .d-flex a {
    margin-left: 5px; /* Space between the buttons */
}

#setting-list .list-group-item .btn {
    padding: 5px 10px; /* Compact button size */
    font-size: 0.8em; /* Smaller font size for buttons */
	width: 35px; /* Fixed width for uniformity */
    text-align: center; /* Center the text and icons */
}











.vehicle-details-container {
  margin-top: 20px;
}

.vehicle-overview, .mileage-details, .ownership-costs {
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.vehicle-overview h2, .mileage-details h2, .ownership-costs h2 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: #007bff;
  border-bottom: 2px solid #ddd;
  padding-bottom: 5px;
}

.receipt-amount {
  text-align: end !important;
}

.receipt-total {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  padding: 10px 0;
  font-size: 1.2em !important; 
  border-top: 2px solid #ddd;
}

.label {
  width: 100px; /* Fixed width for the labels */
  text-align: left; /* Ensure labels are left-aligned */
  flex-shrink: 0; /* Prevent the label from shrinking */
}

.value {
  text-align: left; /* Align the value text to the left */
  flex-grow: 1; /* Allow values to take the remaining space */
}

.button-small {
	height: 25px; /* Set a fixed height for the button */
	width: 25px;
	padding: 2px 8px; /* Reduce padding for a compact look */
	font-size: 12px; /* Adjust font size to fit the smaller button */
	line-height: 1; /* Ensure proper alignment of text inside the button */
}

.button-xsmall {
    padding: 0.5rem 0.5rem;
    font-size: 0.8rem;
    line-height: 1;
    border-radius: 0.2rem;
}