.get-quote-form {
	background-color: #fbfbfb;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 20px;
	margin: -20px auto 0 !important;

	.quote-heading {
		background-color: #F9F9F9;
		padding: 20px;
		margin: -20px -20px 20px -20px;
	}

	.title {
		color: #54695B;
	}

	.product-summary {
		display: flex;
		margin-bottom: 20px;
		justify-content: space-between;
	}

	.product-summary-left {
		display: flex;
		gap: 16px;
		width: 50%;

		.image-container {
			min-width: 100px;
		}

		img {
			width: 100px;
			height: 100px;
		}

		.product-details {
			display: flex;
			flex-direction: column;
			justify-content: start;
			padding: 8px 0px;
			gap: 5px;

			.product-name {
				font-size: 16px;
				font-weight: 700;
				color: #013C16;
				margin: 0px;
				line-height: 18px;
			}

			.product-description {
				color: #54695B;
				margin: 0px;
				line-height: 20px;
			}

			.instock,
			.outstock {
				width: max-content;
				padding: 4px 12px 4px 12px;
				border-radius: 20px;
				font-size: 12px;
				font-weight: 500px;
				margin: 0px;
			}

			.instock {
				background-color: #27C05D1A;
				color: #27C05D;
			}

			.outstock {
				background-color: #EC23230D;
				color: #EC2323;
			}
		}
	}

	.product-summary-right {
		display: flex;
		gap: 16px;
		width: 45%;

		img {
			width: 100px;
			height: 100px;
		}

		.category-details {
			display: flex;
			flex-direction: column;
			justify-content: start;
			padding: 8px 0px;
			gap: 5px;

			.category-name {
				font-size: 16px;
				font-weight: 700;
				color: #013C16;
				margin: 0px;
				line-height: 18px;
			}

			.categories {
				color: #54695B;
				margin: 0px;
				line-height: 20px;
			}
		}
	}

	.form-container {
		display: flex;
		gap: 40px;
	}

	.required-input::after {
		content: ' *';
		color: red;
	}

	.prevent-select {
		-webkit-user-select: none;
		/* Safari */
		-ms-user-select: none;
		/* IE 10 and IE 11 */
		user-select: none;
		/* Standard syntax */
	}

	label {
		color: #8F9591;
		margin-bottom: 5px;
	}

	.label-container {
		display: flex;
		gap: 4px;
		align-items: center;
		margin-bottom: 5px;

		label {
			margin-bottom: 0px;
		}
	}

	input,
	textarea {
		width: 100%;
		padding: 10px;
		margin-top: 0px;
		margin-bottom: 0px;
		border-color: #EAECF0;
		border-radius: 4px !important;
		text-align: left !important;
		padding-left: 15px !important;

		&::placeholder {
			color: #8F9591;
			font-weight: 500;
		}
	}

	.disabled-input-field, input:disabled {
		padding: 9px 10px;
		border: 2px solid #EAECF0;
		border-radius: 4px;
		background-color: #f3f3f3;
		height: 42px;
		opacity: 1 !important;
	}

	.form-container-left {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.first-section {
		display: flex;
		justify-content: space-between;
		gap: 10px;

		.quantity-section {
			width: 28%;
		}

		.uom-container {
			width: 22%;	

			select {
				border-radius: 4px;
				background-position: right 2px center;
				padding-right: 20px;
				padding-left: 10px;
			}
		}

		.from-date, .to-date {
			width: 24%;
		}
	}

	.delivery-options {
		display: flex;
		border: 2px solid #EAECF0;
		border-radius: 48px;
		padding: 2px;

		input {
			display: none;

			&:checked+label {
				background-color: #e0f2ff;
				color: #281D1B;

				svg {
					fill: #281D1B;
				}
			}
		}

		label {
			width: 33.33%;
			padding: 6px 10px;
			margin-bottom: 0px;
			text-align: center;
			cursor: pointer;
			border-radius: 48px;
			color: #8F9591;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 12px;
			line-height: 12px;
			gap: 2px;
		}
	}

	#weekly-selection {
		justify-content: space-between;
		padding: 10px 10px 0px 10px;

		input {
			display: none;

			&:checked+label {
				background-color: #e0f2ff;
				border-color: #598EDD;
				color: #013C16;
			}
		}

		label {
			width: 12%;
			padding: 8px;
			border: 1.5px solid #EAECF0;
			border-radius: 4px;
			text-align: center;
			font-weight: 500;
		}
	}

	#custom-dates-selection {
		padding-top: 10px;
	}

	.get-quote-calculate-total {
		display: flex;
		justify-content: space-between;
		gap: 20px;

		.delivery-time {
			width: 22%;

			input {
				border-radius: 4px;
				height: 43px;
				text-align: center !important;
				border: 2px solid #e1e1e1;
				outline: none;
				background-color: #fbfbfb;
			}
		}

		.get-quote-price {
			width: 39%;
		}

		.get-quote-total-value-section {
			width: 39%;
		}
	}

	.form-container-right {
		min-width: max-content;
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.get-quote-selected-dates-section {
		#get-quote-selected-dates {
			padding: 9px 10px;
			border: 2px solid #EAECF0;
			border-radius: 4px;
			background-color: #f3f3f3;
			max-height: 277px;
			overflow-y: auto;
			min-width: 205px;
		}

		::-webkit-scrollbar {
			width: 8px;
		}

		::-webkit-scrollbar-track {
			background: #f1f1f1;
			box-shadow: inset 0 0 2px grey;
			border-radius: 5px;
		}

		::-webkit-scrollbar-thumb {
			background: #BBB;
			border-radius: 5px;
		}
	}

	.get-quote-delivery-address {
		display: flex;
		flex-direction: column;
		gap: 15px;
		margin-top: 5px;
	}

	.get-quote-address-option-section {
		display: flex;
		border: 2px solid #EAECF0;
		border-radius: 48px;
		padding: 2px;

		input {
			display: none;

			&:checked+label {
				background-color: #e0f2ff;
				color: #281D1B;
			}
		}

		label {
			width: 50%;
			padding: 15px 10px;
			margin-bottom: 0px;
			text-align: center;
			cursor: pointer;
			border-radius: 48px;
			color: #8F9591;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 13px;
			line-height: 12px;
			gap: 2px;
		}
	}

	.get-quote-delivery-address-top {
		display: flex;
		gap: 20px;
	}

	.district-container,
	.municipality-container {
		width: 100%;
	}

	.select2-selection.select2-selection--single {
		height: 42px;
		display: flex;
		align-items: center;

		.select2-selection__arrow {
			top: auto;
		}
	}

	.select2-container .select2-selection {
		background-color: #fbfbfb;
	}

	.get-quote-delivery-address-bottom {
		display: flex;
		gap: 20px;

		#get-quote-street {
			text-align: center;
		}
	}

	.ward-container,
	.street-container,
	.house-container {
		width: 100%;
	}

	#get-quote-submit {
		background-color: #598edd;
		color: #FFFFFF;
		margin-top: 20px;
		border-radius: 4px;

		&:hover {
			background-color: #598eddd3;
			color: #FFFFFF;
		}
	}

	#get-quote-submit:disabled {
		background-color: #598edd;
		opacity: 0.9;
	}

	.disclaimer {
		margin-top: 20px;
		margin-bottom: 0px;
		line-height: 16px;
		font-size: 12px;
		color: #8F9591;
	}
}

@media screen and (max-width: 1024px) {
	.get-quote-form {
		.form-container {
			gap: 20px;
		}
	}
}

@media screen and (max-width: 815px) {
	.get-quote-form {
		.first-section {
			flex-direction: row;
            flex-wrap: wrap;
            gap: 10px;

			.quantity-section, .uom-container, .from-date, .to-date {
				width: 48%;
                flex-wrap: wrap;
                display: flex;
			}
		}

		#weekly-selection {
			padding: 5px 0px 0px 0px;

			label {
				width: 13.5%;
				font-size: 12px;
				margin-bottom: 0px;
			}
		}

		.get-quote-calculate-total {
			flex-wrap: wrap;
			gap: 5px;

			.delivery-time {
				width: 49%;
			}

			.get-quote-price {
				width: 49%;
			}

			.get-quote-total-value-section {
				display: flex;
				flex-direction: column;
				flex: 1;
			}
		}

		.form-container-left {
			gap: 10px;
		}

		.get-quote-delivery-address-top {
			gap: 10px;
		}

		.get-quote-delivery-address-bottom {
			gap: 10px;
		}

		.form-container-right {
			gap: 10px;
		}
	}
}

@media screen and (max-width: 600px) {
	.get-quote-form {
		.product-summary {
			flex-direction: column;
			gap: 20px;
		}

		.product-summary-left {
			width: auto;
		}

		.product-summary-right {
			width: auto;
		}

		.form-container {
			flex-direction: column;
		}

		.get-quote-delivery-address {
			gap: 10px;
		}

		.pickup-address-message {
			font-size: 12px;
		}

		.form-container-right {
			flex-direction: row;
			justify-content: space-between;
		}

		.get-quote-total-deliveries-section {
			width: 35%;
			order: 2;
		}

		.get-quote-selected-dates-section {
			width: 60%;
			order: 1;

			#get-quote-selected-dates {
				min-width: auto;
				font-size: 12px;
			}
		}

		button {
			padding: 10px 15px;
			min-height: auto;
			font-size: 12px;
		}
	}
}

@media screen and ( max-width: 380px ) {
	.get-quote-form {
		.first-section {
			flex-direction: column;
			.quantity-section, .uom-container, .from-date, .to-date {
				width: 100%;
			}	
		}

		.get-quote-calculate-total {
			flex-direction: column;

			.delivery-time,
			.get-quote-price,
			.get-quote-total-value-section {
				width: 100%;
			} 
		}

		.get-quote-delivery-address-top,
		.get-quote-delivery-address-bottom {
			flex-direction: column;
		}

		.form-container-right {
			flex-direction: column;
		}

		.get-quote-total-deliveries-section,
		.get-quote-selected-dates-section {
			width: 100%;
			order: initial;
		}
	}
}