a {text-decoration:none;}
body {
    padding-top: 50px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
		}

.bg {
  /* The image used */
  background-image: url("/images/truck4000.png");

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.business-header {
	background-color:#003399;
	font-size:4em;
	text-align:center;
	margin-bottom:25px;
	
}
.headline {
	font-size:3em;
	color:#003366;
		}
		
.title-bar {
	height:80px;
	color:white;
	font-size:4em;
	text-align:center;
	background-color:#666633;
}
.tagline {
    text-shadow: 0 0 10px #000;
    color: #fff;
}

.img-center {
    margin: 0 auto;
}

.headline {
	font-size:3em;
	color:#336699;
}

.thick-bar {
	height:1.5em;
	color:black;
}
footer {margin: 50px 0;}
.btn-menu {
	width:80%;
	margin:5px;
}
.pcicolor {
	color: #ffffff;
	background-color:#666633;
}


.upsize {font-size:1.2em;}
.bg-margin {margin-top:50px;}
.bg-margin2 {margin-top:75px;}
.margin50 {margin-top:50px;margin-bottom:50px;}
.bg-yellow{background-color:yellow;}
.trademark {font-size:.7em;}
.fontxl {font-size:2.5em;}
.textsize13 {font-size:1.3em;}
.textsize12 {font-size:1.2em;}

.btn-stage2 {background-color:#330000; color: white;}
.btn-stage2:hover {background-color: #330000; color: white; opacity: 0.8;}
.btn-stage3 {background-color: orange; color: white;}
.btn-stage3:hover {background-color: orange; color: white; opacity: 0.8;}
.btn-stage4 {background-color: yellow;}
.btn-stage4:hover {background-color: yellow; opacity: 0.7; }
.btn-stage5 {background-color: brown; color: white;}
.btn-stage5:hover {background-color: brown; color: white; opacity: 0.8;}
.btn-sidebar {width:150px;}


.form-inline .form-group{display:inline-block;margin-bottom:0;vertical-align:middle}
.form-inline .form-control{display:inline-block;width:auto;vertical-align:middle}
.form-inline .form-control-static{display:inline-block}
.form-inline .input-group{display:inline-table;vertical-align:middle}
.form-inline .input-group .form-control,.form-inline .input-group .input-group-addon,.form-inline .input-group .input-group-btn{width:auto}
.form-inline .input-group>.form-control{width:100%}
.form-inline .control-label{margin-bottom:0;vertical-align:middle}
.form-inline .checkbox,.form-inline .radio{display:inline-block;margin-top:0;margin-bottom:0;vertical-align:middle}
.form-inline .checkbox label,.form-inline .radio label{padding-left:0}
.form-inline .checkbox input[type=checkbox],.form-inline .radio input[type=radio]{position:relative;margin-left:0}
.form-inline .has-feedback .form-control-feedback{top:0}}
.form-horizontal .checkbox,.form-horizontal .checkbox-inline,.form-horizontal .radio,.form-horizontal .radio-inline{padding-top:7px;margin-top:0;margin-bottom:0}


.card1 {
    background: rgb(22, 105, 173);
	color:white;
}
.card2 {
    background: rgb(203, 67, 53);
	color:white;
}
.card3 {
    background: rgb(214, 137, 16);
	color:white;
}
.card4 {
    background: rgb(40, 180, 99);
	color:white;
}
.qrcode{
	height: 700px;
	width: 700px;
}
@media print {
	a[href]:after {content: none}
	.noprint {display:none}
	.form {display:none}
	.form-inline {display:none}
	.offcanvas {display:none}

}

.bg-navy {
    background: #005A92;
	color:white;
}

.dropdown:hover>.dropdown-menu {
  display: block;
}

.dropdown>.dropdown-toggle:active {
  /*Without this, clicking will make it sticky*/
    pointer-events: none;
}

.dropstart .dropdown-menu {
  right: 100%;  
  top: 0;
}

.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    user-select: none; /* Disable text selection */
    gap: 5px; /* Add some space between cells */
}

.calendar div {
    border: 1px solid #ccc;
    padding: 5px; /* Decrease padding to make height smaller */
    text-align: center;
    font-size: 14px; /* Slightly larger font size for better readability */
    border-radius: 10px; /* Round the edges */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover and selection */
    height: 1fr; /* Set a fixed height for smaller cells */
    display: flex;
    align-items: center;
    justify-content: center;
}

.time-slot {
    cursor: pointer;
}

.time-slot:hover {
    background-color: #f0f0f0; /* Light grey background on hover */
}

.selected {
    background-color: #007bff;
    color: white;
}

.selected:hover {
    background-color: #0056b3; /* Darker blue on hover when selected */
}


.selected:hover {
    background-color: #0056b3; /* Darker blue on hover when selected */
}


.single-plan {
    background-color: #f9f9f9; /* Very light gray */
    border: 1px solid #e0e0e0;
}

.basic-plan {
    background-color: #f2f9ff; /* Very light blue */
    border: 1px solid #d0e7ff;
}

/* Standard Plan - Slightly Darker */
.standard-plan {
    background-color: #FFFFE0; /* Very light blue */
    border: 1px solid #FFFF00;
}

/* Premium Plan - Highlighted */
.premium-plan {
    background-color: #e8f9f1; /* Very light green */
    border: 1px solid #bfe3d0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.single-plan-header {
	background-color: #dc3545; /* Bootstrap Danger */
	color: white;
	padding: 10px;
	border-bottom: 1px solid #c82333;
}

.basic-plan-header {
	background-color: #007bff; /* Bootstrap Primary */
	color: white;
	padding: 10px;
	border-bottom: 1px solid #0056b3;
}

.standard-plan-header {
	background-color: #FFFF00; /* Bootstrap Success */
	color: white;
	padding: 10px;
	border-bottom: 1px solid #FFD700;
}

.premium-plan-header {
	background-color: #28a745; /* Bootstrap Success */
	color: white;
	padding: 10px;
	border-bottom: 1px solid #218838;
}

  /* Add hover effect to custom hover cards */
.hover-card:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Add a transition to the box shadow to make the hover effect smoother */
.hover-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
	user-select: none;
}

.pricing-card {
    transform: scale(1.10);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.pricing-card:hover {
    transform: scale(1.12);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.card-img-logo {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0.5rem auto;
    display: block;
    border: 2px solid #dee2e6;
}

.list-img-small {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #dee2e6;
    
}
  
@media (max-width: 576px) {
    .card-img-logo {
        width: 100px;
        height: 100px;
        margin: 0.5rem auto 0.25rem auto;
    }
}

  .matchcard {
    border-color: #dee2e6;
    transition: transform 0.2s ease-in-out;
  }
  .matchcard:hover {
    transform: scale(1.01);
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.15);
  }

  .ad-box {
    aspect-ratio: 5 / 2; /* wider than tall */
    width: 100%;
    max-width: 100%;         
    max-height: 30vh;        
    overflow: hidden;
    background-color: #fff;
    margin-bottom: 1rem;
    position: relative;
  }
  
  .carousel-inner,
  .carousel-item {
    height: 100%;
  }
  
  .carousel-item-ad img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

.list-unstyled a {
    text-decoration: none;
    color: #0d6efd;
}
.list-unstyled a:hover {
    text-decoration: underline;
}
  
.carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    background-color: #28a745;
    border-radius: 50%;
}

.competitor-img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
    margin: 1rem auto 0.5rem auto;
    display: block;
    border: 2px solid #dee2e6;
  }
.admin-ad {
    width: 100%;
    height: 200px; 
    object-fit: cover;  
    border: 1px solid #ddd;
}


.sidebar-sticky {
  position: sticky;
  top: 100px;                   
  max-height: calc(100vh - 120px); 
  overflow-y: auto;              
  padding-top: 1rem;           
}

.tab-pane {
	display: none;
}
.tab-pane.active {
	display: block;
}
.tab-loading {
	margin-top: 2rem;
}

.doc-section {
  margin-bottom: 2rem;
  border: 1px solid #ccc;
  padding: 1rem;
  border-radius: 5px;
  background: #f9f9f9;
}
pre {
  background: #fff;
  padding: 1rem;
  overflow-x: auto;
  white-space: pre-wrap;
}

@media (max-width: 768px) {
  .card-minheight { min-height: 300px; }
}
@media (min-width: 769px) {
  .card-minheight { min-height: 500px; }
}

.scoring-table-height {
    min-height: 400px;
    height: auto;
    overflow-y: visible;
}
.cart-img {
    width: 120px;            /* fixed square width */
    height: 120px;           /* fixed square height */
    object-fit: cover;       /* crop/scale to fill square */
    object-position: center; /* center the icon inside */
    background-color: #f8f8f8; /* neutral background */
    border: 1px solid #ddd;  /* subtle border */
    border-radius: 8px;      /* rounded corners */
    display: block;
}

.club-logo-horizontal {
  width: 100px;
  height: 100px;
  object-fit: cover;
}
.marketplace-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.marketplace-card-horizontal {
  transition: all 0.3s ease;
  border-left: 4px solid transparent;
  cursor: pointer;
}
.marketplace-card-horizontal:hover {
  border-left-color: #0d6efd;
  transform: translateX(5px);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
}

.product-main-image {
			width: 100%;
			height: 400px;
			object-fit: contain;
			background: #fff;
			border: 1px solid #e5e5e5;
			border-radius: 4px;
		}
		.thumbnail-container {
			display: flex;
			gap: 8px;
			overflow-x: auto;
			padding: 8px 0;
		}
		.thumbnail-image {
			min-width: 60px;
			width: 60px;
			height: 60px;
			object-fit: cover;
			border-radius: 4px;
			cursor: pointer;
			transition: all 0.2s ease;
			border: 2px solid #e5e5e5;
		}
		.thumbnail-image:hover {
			border-color: #0071dc;
		}
		.thumbnail-image.active {
			border-color: #0071dc;
			box-shadow: 0 0 0 1px #0071dc;
		}
		.price-large {
			font-size: 2rem;
			font-weight: 700;
			color: #2e7d32;
		}

    .product-thumbnail {
	width: 60px;
	height: 60px;
	object-fit: cover;
	cursor: pointer;
	transition: border-color 0.2s ease;
}
    
.product-thumbnail-wrapper {
    flex-shrink: 0;
}

.product-thumbnail {
    width: 80px;
    height: 80px;
    object-fit: cover;
    cursor: pointer;
    transition: all 0.2s ease;
}

.product-thumbnail:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Product Details Page Styles */
.product-sticky-sidebar {
    position: sticky;
    top: 20px;
}

.product-main-image {
    max-height: 500px;
    object-fit: contain;
}

.product-quantity-input {
    width: 100px;
}