/*Navbar*/
.navbar-parent-container{
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}

.navbar-container{
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
	overflow: visible !important;
}

.navbar-logo-container{
flex: 1;
}

.navbar-brand{
display: flex !important;
margin:0;
flex: 1;
justify-content:center;
}

.navbar-nav-links-container{
flex: 5;
}

.nav{
justify-content: center !important;
}

.navbar-nav-utils-container{
margin-right: 0;
flex: 1;
}

/* Styles for tablets */
@media (min-width: 768px) and (max-width: 1024px) {
.navbar-logo-container{
flex: 15;
}
}

@media (max-width: 767px) {
/* Styles for mobile devices */
.navbar-logo-container{
flex: 16;
}
}
/*Contact*/
.contact-container{
flex: 1;
margin-top: 5%;
margin-left: 10%;
margin-right: 10%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

.contact-link{
color: blue;
text-decoration: underline;
}
/*Supplier*/
#sortingby-dropdown-button{
display: none;
}

#__layout > div > div:nth-child(1) > div:nth-child(4) > div > div.row.pb-3.d-flex.align-items-center > div.col-12.col-lg-3.d-flex.justify-content-between.justify-lg-content-end.align-items-center{
justify-content: flex-end !important;
}

.row{
margin: 0 !important;
}

.mr-3{
margin-right: 0px !important;
}

.fa-filter:before{
margin-right: .5em !important;
}
/*Website*/
/*Selectore for all components shows on the Featured Products and Contact Us pages*/
#pageData{
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}

.featured-body-container{
display: flex;
justify-content: center;
flex: 1;
overflow: auto;
}

/*Components Container - Includes all components that make up a webpage.*/
#__layout > div > div:nth-child(1){
display: flex;
flex-direction: column;
height: 100vh;
}

.title{
display: flex;
justify-content: center;
align-items: center;
}

/*Selector for the Supplier Component (above the supplier container class)*/
#__layout > div > div:nth-child(1) > div:nth-child(4){
flex: 1;
display: flex;
flex-direction: column;
overflow: auto;
}

.supplier-container {
margin-left: 2vw !important;
margin-right: 2vw !important;
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}

.row{
flex: 1;
overflow: hidden;
}

/*Selector for the filtered product results at the top of the supplier page*/
/*This div uses .row as a class, so this us to undo the changes to .row for this specific div*/
#__layout > div > div:nth-child(1) > div:nth-child(4) > div > div.row.pb-3.d-flex.align-items-center{
flex: none;
overflow: unset;
}

/*Filter tree on the left side of the supplier page*/
.product-filter{
overflow: auto;
flex: 1;
max-width: 20%;
max-height: 100%;
}

/*filtered product shown in the supplier page*/
.filtered-product{
overflow: auto;
flex: 3;
max-height: 100%;
}
/*Product*/
/*Sets the z-index of the size quantity field to be lower than the parts dropdown*/
.input-group{
z-index: 49;
}

/*Hide the product name of the original Product Detail component*/
#productName{
display: none;
}

/*Product title is the container of a component added to the Product Detail page to bring the title above the product*/
.product-title{
display: flex;
justify-content: center;
padding-top: 2em;
padding-right: 15px;
padding-left: 15px;
}

/*Product name title is the name of the div containing the title text*/
.product-name-title{
font-size: 22px;
}

/*Class for the product view component*/
.container-productview{
padding-top: 4vh !important;
}

/*canvas container is the div for displaying the product image*/
.canvas-container{
touch-action: manipulation; /* Improves scrolling behavior */
pointer-events: none; /* Prevents touch events on the image */
}

/*Decoration type dropdown*/
.justify-content-start.d-flex.text-left.align-items-center.w-100{
	overflow: hidden;
  white-space: normal;
  max-width: 75%;
}

.m-0{
	margin-right: 4px !important;
}

.container-max{
	overflow: auto;
}

/*Footer*/
.fdb-block.fp-active{
background-color: black;
width: 100%;
}