/*Style file for header section*/

/*
 The design should be mobile first to render page faster.
 This is to make small devices' design first before scaling up to bigger screens
*/



.modal-container-title,
.get-quote-title,
.contact-supplier-title {
	position: relative;
	width: 100%;
	height: 40px;
	padding: 0;
	margin: 0;
	color: #FFF;
	background-color: #2D383A;
	border-radius: 10px 10px 0 0;
}

.modal-container-close {
	position: absolute;
	top: 0;
	right: 0;
	padding: 0 10px;
	font-size: 2em;
	color: #FFF;
}

.modal-container-close:hover {
	color: red;
}

/*Style for modal forms*/
#post_requirement_form,
#sell_here_form,
#get_quote_form,
#contact_supplier_form {
	position: relative;
	width: 98%;
	height: 98%;
	margin: 1% auto;
	background-color: #E0E0E0;
	border: 1px solid #2a80b9;
	border-radius: 5px;
}



.get-quote-title,
.contact-supplier-title {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-flow: column nowrap;
	
	height: 100px;
	padding: 10px 5px;
	text-align: center;
}

.get-quote-title > span {
	font-size: 1.1em;
}

.get-quote-content,
.contact-supplier-content {
	position: relative;
	width: 100%;
	height: calc(100% - 100px - 50px);
	margin: 0;
	padding: 20px;
	overflow: auto;
}

.get-quote-content > *,
.contact-supplier-content > * {
	display: inline-block;
	margin: 0;
	margin-bottom: 15px;
	padding: 0;
}

.get-quote-info {
	width: 100%;
}

.get-quote-content label,
.contact-supplier-content label {
	width: 100%;
	margin: 0;
	margin-bottom: 5px;
	font-size: 0.85em;
	opacity: 0.9;
}

.get-quote-content input, 
.get-quote-content select,
.get-quote-content textarea,

.contact-supplier-content input, 
.contact-supplier-content select,
.contact-supplier-content textarea {
	width: 100%;
	padding: 10px;
	border-radius: 5px;
}

.contact-supplier-user-name-container,
.contact-supplier-user-email-container,
.get-quote-user-name-container,
.get-quote-user-email-container {
	display: inline-block;
	width: 100%;
	padding: 5px 0;
	margin: 0;
	margin-bottom:  10px;
}

.get-quote-industry-container {
	width: 100%;
	padding: 5px 0;
	text-align: left;
}

.get-quote-product-name-container {
	width: 100%;
	padding: 5px 0;
	text-align: left;
}

.get-quote-product-description {
	width: 100%;
	margin-left: 0;
	padding: 5px;
}

.get-quote-quantity-container,
.get-quote-budget-container {
	width: 58%;
	margin-right: 2%;
}

.get-quote-bid-container {
	width: 58%;
	margin-right: 2%;
}

.get-quote-units-container,
.get-quote-currency-container {
	width: 38%;
	margin-right: 2%;
}

.get-quote-quantity-container {

}

.get-quote-units-container {
	margin: 0;
}

.get-quote-currency-container {

}

.get-quote-budget-container {
	margin: 0;
}

.get-quote-bid-container {
	margin: 0;
}


.get-quote-footer,
.contact-supplier-footer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 0;
}

.get-quote-send-btn,
.contact-supplier-send-btn {
	position: absolute;
	bottom: 5px;
	right: 5px;
	margin: 0;
	padding: 7px 10px;
}

/*Contact supplier*/
.contact-supplier-content {

}

.contact-supplier-image-container {
	display: inline-block;
	width: 100%;
	margin: 0;
	margin-bottom: 10px;
	padding: 0;
	text-align: center;
}

.contact-supplier-image-container img {
	max-width: 100%;
}

.contact-supplier-info-container {
	display: inline-block;
	width: 100%;
	margin: 0;
	padding: 5px;
	padding-top: 0;
}

.contact-supplier-info-container::after {
	content: "";
	display: table;
	clear: both;
}

.contact-supplier-info-container * {
	display: inline-block;
}

.contact-supplier-product-name {
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 1.3em;
	font-weight: bold;
	background: transparent;
}

.contact-supplier-name {
	width: 100%;
	margin: 0;
	margin-bottom: 10px;
	padding: 0 10px;
	font-size: 0.85em;
	opacity: 0.9;
}

.contact-supplier-quantity-container,
.contact-supplier-budget-container {
	width: 50%;
	margin: 0;
}

.contact-supplier-units,
.contact-supplier-currency-container {
	width: 45% !important;
	margin: 0;
}

.contact-supplier-quantity-container,
.contact-supplier-currency-container {
	margin: 0 1% 10px 0;
}

.contact-supplier-units {
	font-size: 1.2em;
	background: transparent;
}


#post_requirement_form [type=submit]:disabled,
#sell_here_form [type=submit]:disabled,
#get_quote_form [type=submit]:disabled,
#contact_supplier_form [type=submit]:disabled {
	background-color: gray !important;
	cursor: default !important;
}


/* Check for device orientation in protrait mode */
@media only screen and (orientation: portrait){
	
}

/* Small devices (portrait phones, 481px and up) */
@media only screen and (min-width: 481px) {
	
}

/* Small devices (portrait tablets and large phones, 601px and up) */
@media only screen and (min-width: 601px) {
	.contact-supplier-user-name-container,
	.contact-supplier-user-email-container,
	.get-quote-user-name-container,
	.get-quote-user-email-container {
		width: 48%;
	}

	.contact-supplier-user-email-container,
	.get-quote-user-email-container {
		
	}

	.get-quote-industry-container {
		width: 35%;
	}

	.get-quote-product-name-container {
		float: right;
		width: 63%;
	}
} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 769px) {

	/*Style for modal forms*/
	#post_requirement_form,
	#sell_here_form,
	#get_quote_form,
	#contact_supplier_form {
		width: 80%;
		height: 95%;
	}

	.get-quote-quantity-container,
	.get-quote-budget-container {
		width: 28%;
		margin-right: 2%;
	}
    
	.get-quote-bid-container {
		width: 28%;
		margin-right: 2%;
	}


	.get-quote-units-container,
	.get-quote-currency-container {
		width: 18%;
		margin-right: 2%;
	}

	.get-quote-budget-container {
		margin: 0;
	}
	
	.get-quote-bid-container {
		margin: 0;
	}

	.contact-supplier-image-container {
		width: 30%;
		margin: 0 1% 10px 0;
	}

	.contact-supplier-info-container {
		float: right;
		width: 67%;
		margin: 0;
	}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 993px) {
	#post_requirement_form,
	#sell_here_form,
	#get_quote_form,
	#contact_supplier_form {
		width: 70%;
		max-width: 900px;
	}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1201px) {

}