.product-subscription-form {
	background-color: #fbfbfb;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 20px;
	margin: auto;

	.title {
		color: #54695B;
	}

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

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

		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;
			}
		}
	}

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

	.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;
	}

	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;
		}
	}

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

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

		span {
			opacity: 0.7;
		}
	}

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

		label {
			margin-bottom: 0px;
		}
	}

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

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

		.quantity-section {
			width: 50%;
		}

		.uom-container {
			width: 45%;	
		}

		.warehouse-container {
			width: 48%;
		}

		.price-per-unit-container {
			width: 40%;
		}
	}

	.dates-section {
		display: flex;
		justify-content: space-between;
		gap: 20px;

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

	.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;
	}

	.product-subscription-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;
			}
		}

		.product-subscription-price {
			width: 39%;
		}

		.product-subscription-total-value-section {
			width: 39%;
		}
	}

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

	.product-subscription-selected-dates-section {
		#product-subscription-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;
		}
	}

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

	.product-subscription-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;
		}
	}

	.product-subscription-delivery-address-top {
		display: flex;
		gap: 20px;
	}

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

	.product-subscription-delivery-address-top-pickup {
    	display: none;
	}
	
	.select2-selection.select2-selection--single {
		height: 42px;
		display: flex;
		align-items: center;

		.select2-selection__arrow {
			top: auto;
		}
	}

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

	.product-subscription-delivery-address-bottom {
		display: flex;
		gap: 20px;

		#product-subscription-street {
			text-align: center;
		}
	}

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

	.shipping-charge-section {
		display: flex;
		gap: 20px;
		justify-content: space-between;
	}

	.shipping-charge-per-dispatch-container {
		width: 100%;
		min-width: 130px;
	}

	.total-shipping-charge-container {
		width: 100%;
		min-width: 145px;
	}

	.total-value-with-shipping-charge-container {
		width: 100%;
		min-width: 216px;
	}

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

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

	#product-subscription-submit:disabled {
		background-color: #598edd;
		opacity: 0.9;
	}
}

@media screen and (max-width: 815px) {
	.product-subscription-form {
		.form-container {
			flex-direction: column;
		}

		.first-section {
			flex-direction: row;
            flex-wrap: wrap;
            gap: 10px;

			.quantity-section, .uom-container, .warehouse-container, .price-per-unit-container {
				width: 48%;
			}
		}

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

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

		.product-subscription-calculate-total {
			flex-wrap: wrap;
			gap: 5px;

			.delivery-time {
				flex: 100%;
				width: 100px;
				justify-items: center;

				input {
					width: 150px;
				}
			}

			.product-subscription-price {
				width: 49%;
			}

			.product-subscription-total-value-section {
				width: 49%;
			}
		}

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

		.form-container-right {
			gap: 20px;
			flex-direction: row;
		}

		.product-subscription-total-deliveries-section {
			width: 31%;
			min-width: 105px;
			order: 2;
		}

		.product-subscription-selected-dates-section {
			width: 32%;
			min-width: 180px;
			order: 1;

			#product-subscription-selected-dates {
				min-width: auto;
				font-size: 12px;
			}
		}

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

@media screen and ( max-width: 600px ) {
	.product-subscription-form {
		.dates-section {
			gap: 12px;
		}

		.product-subscription-delivery-address {
			gap: 10px;
		}

		.product-subscription-delivery-address-top {
			gap: 10px;
		}

		.product-subscription-delivery-address-bottom {
			gap: 10px;
		}

		.shipping-charge-section {
			flex-wrap: wrap;
		}

		.shipping-charge-per-dispatch-container {
			width: calc(50% - 10px);
		}

		.total-shipping-charge-container {
			width: calc(50% - 10px);
		}
	
		.total-value-with-shipping-charge-container {
			width: calc(50% - 10px);
		}
	}
}

@media screen and ( max-width: 380px ) {
	.product-subscription-form {
		.first-section {
			.quantity-section, .uom-container, .warehouse-container, .price-per-unit-container {
				width: 100%;
			}
		}

		.dates-section {
			flex-direction: column;
			.from-date, .to-date {
				width: 100%;
			}
		}

		.product-subscription-calculate-total {
			.product-subscription-price, .product-subscription-total-value-section {
				width: 100%;
			}
		}
		
		.product-subscription-delivery-address-top {
			flex-direction: column;
		}

		.product-subscription-delivery-address-bottom {
			flex-direction: column;
		}
		
		.shipping-charge-per-dispatch-container, .total-shipping-charge-container, .total-value-with-shipping-charge-container {
			width: 100%;
		}

		.form-container-right {
			flex-direction: column;
		}
		
		.product-subscription-total-deliveries-section {
			width: 100%;
			order: 1;
		}
		
		.product-subscription-selected-dates-section {
			width: 100%;
			order: 2;
		}
	}
}