/*Navbar CSS*/
.navbar-container{
margin:0;
padding: 0 !important;
max-width: 100%;
}

/*Forces the navbar to scroll with the window, and sets the z-index so other side popup menus so the navbar does not sit on top of other controls. */
.navbar {
position: fixed;
display: flex;
flex-wrap: nowrap;
margin:0;
padding:0;
width: 100vw;
top: 0;
left: 0;
z-index: 1039;
transition: top 0.3s ease; 
background-color: white;
}

/* If the home button is enabled, this sets it to the far left position. If hidden this provides an empty container to set the order for the other visible controls in the navbar. */
.headerlinks{
display: flex;
order: 1 !important;
text-decoration: underline !important;
width: 100px;
justify-content: center;
}

/*Sets the container for the logo to position 2, which is the center of the navbar. */
.headerlogo{
order: 2 !important;
}

/* Moves the right margin on the left side of the logo so it sits centered in the navbar. */
.navbar-brand.nuxt-link-active{
margin-right: 0 !important;
margin-left: 1rem !important;
}

/* Sets the account and shopping cart to the far right of the screen. */
.headerutil{
display: flex;
order: 3 !important;
padding: 8px 16px;
flex-wrap: nowrap;
}

.navbar-brand{
margin:0 !important;
padding:0 !important;
}

.storeLogo{
width: 250px;
height: auto;
}	

.breadcrumb{
display: none !important;
}
	
/*Body Details Page CSS*/
.productRow1{
display:flex;
flex-wrap: wrap;
justify-content: space-evenly;
margin-top:13vh;
width: 100%;
height: auto;
}

.product-img-fluid{
max-width: 67% !important;
	position: initial !important;
} 

.product{
text-align: center;
display: flex;
flex-direction: column;
max-width: 470px;
}

.product-name {
font-weight: bold;
}

.container{
max-height:70vh;
padding-bottom: 5vh;
}
	
/*Product Details Page CSS*/
.product-title-container{
display: flex;
justify-content: center;
padding-top: 10vh;
}

.product-subtitle{
display: flex;
align-items: center;
font-size: 1.5rem;
margin-left: .25em;
}

.product-header-skeleton{
display: none;
}
[data-id="mPower-Cart1"] h3.mb-0 { margin-top: 6rem !important; }
img.vue-lb-modal-image{background-color: white !important;}
.vue-lb-info{display: none;}
.vue-lb-footer{padding-right: 1rem !important;}
.vue-lb-thumbnail{ padding: 0 30px !important; }
.vue-lb-button-close{
	margin-top: 6rem;
	z-index: 1;
}

.mb-4{
z-index: 1028;
}
.product-configure-part-group-label{
display: none;
}
.multiselect__content{
z-index:1029;
}
	
/*Footer CSS*/
.contact-info {
display: flex !important;
justify-content: space-between !important; 
align-items: center !important; 
width: 100% !important; 
padding: 0 50px !important; 
}

/* Container for the contact image */
.brand-image {
display: flex;
align-items: center; 
justify-content: flex-start; 
}

/* Container for the contact text (Contact: and email) */
.contact-text-right {
display: flex;
align-items: center; 
}

/* Styling for the email link inside the contact-text */
.email-link {
text-decoration: underline !important;
font-size: 13px;
}

/* Styling for the "Contact:" label text */
.contact-label {
margin-right: 30px;
font-size: 20px;
font-weight:bold;
}

/* Styling for the contact image */
.contact-img {
width: 170px;
height: auto;
}

/* Media query for smaller screens: Stack the text and image */
@media (max-width: 768px) {
	#mPowerProductView > div > div.row > div.col-md-6.mb-3.pt-2.product-image-col > div { z-index: 50 !important;}
	
	.storeLogo {
max-width: 40vw;
	}
	
.contact-info {
flex-direction: column; 
text-align: center; 
padding: 20px; 
}

/* Adjust the font size of the contact text on small screens */
.contact-text-right h1 {
font-size: 5vw; 
}

/* Add margin below the contact text for better spacing */
.contact-text-right {
margin-bottom: 20px; 
}

/* Adjust the size of the contact image on small screens */
.contact-img {
width: 150px; 
}

/* Adjust the font size of the email link on small screens */
.email-link {
font-size: 1.2rem; 
}
}