@charset "UTF-8";

.ui.modal.h11e-chemical-calculator>.content,.h11e-chemical-calculator.ui.form {
	font-size: 16px;
}
.h11e-chemical-calculator.ui.form .field .dropdown {
	height: 43px;
}
.h11e-chemical-calculatorlabel {
	display: block;
	font-weight: bold;
}
.h11e-chemical-calculator.wood-detail {
	margin-top: 35px;
	margin-bottom: 35px;
}
.h11e-chemical-calculator.wood-detail .wood-detail-header {
	padding: 14px 20px;
	margin-bottom: 20px;
	font-size: 18px;
	background-color: #FFF3E5;
	border: 1px solid #E99940;
	border-radius: 10px;
}
.h11e-chemical-calculator.wood-detail .checkbox-wrap {
	margin-bottom: 20px;
}
.h11e-chemical-calculator.wood-detail .checkbox-detail {
	margin-top: 20px;
	padding-left: 30px;
	padding-right: 5px;
	padding-bottom: 30px;
	border-bottom: 1px solid #707070;
}
.h11e-chemical-calculator.wood-detail .checkbox-wrap input:checked + label {
	color: #0065B2;
}
.h11e-chemical-calculator.wood-detail .accordion {
	margin-bottom: 25px;
}
.h11e-chemical-calculator.ui.styled.accordion .accordion>.title,
.h11e-chemical-calculator.ui.styled.accordion>.title {
	color: #000;
}
.h11e-chemical-calculator.wood-detail .accordion img {
	border-radius: 8px;
}
.h11e-chemical-calculator.wood-detail .wood-color .checkbox label:before,
.h11e-chemical-calculator.wood-detail .wood-color .checkbox label:after,
.h11e-chemical-calculator.wood-detail .wood-color .checkbox.checked label:before,
.h11e-chemical-calculator.wood-detail .wood-color .checkbox.checked label:after{
	content: none !important;
}
.h11e-chemical-calculator.wood-detail .wood-color .checkbox label {
	padding: 0;
}
.h11e-chemical-calculator.wood-detail .wood-color .checkbox label img {
	width: 120px;
	border: 1px solid #99999C;
	border-radius: 8px;
}
.h11e-chemical-calculator.wood-detail .wood-color .checkbox.checked label img {
	border: 2px solid #2A63AC;
}
.h11e-chemical-calculator.wood-detail .checkbox-detail .grouped.fields .field{
	margin-bottom: 15px;
}
.h11e-chemical-calculator.wood-detail .checkbox-detail .edging-size-option {
	display: flex;
	gap: 10px;
}
.h11e-chemical-calculator.wood-detail .checkbox-detail .edging-size-option .edging-size-input {
	min-width: 300px;
}
.h11e-chemical-calculator.wood-detail .checkbox-detail .edging-size-input > div {
	display: flex;
	gap: 10px;
	margin-bottom: 15px;
}
.h11e-chemical-calculator.wood-detail .checkbox-detail .edging-size-input > div > div {
	display: flex;
}
.h11e-chemical-calculator.wood-detail .checkbox-detail .edging-size-input > .edging-choose-color {
	display: block;
}
.h11e-chemical-calculator.wood-detail .checkbox-detail .edging-size-input > .edging-choose-color > div {
	align-items: flex-start;
}
.h11e-chemical-calculator.wood-detail .checkbox-detail .edging-size-input input {
	width: 190px;
}
.h11e-chemical-calculator.wood-detail .checkbox-detail .edging-size-input input:checked + label  {
	color: #0065B2;
}
.h11e-chemical-calculator.wood-detail .checkbox-detail .edging-size-input button {
	padding-right: 0;
	background: none;
	border: 0;
	vertical-align: sub;
}
.h11e-chemical-calculator.wood-detail .checkbox-detail .edging-size-input button.add i {
	color:#0065B2;
}
.h11e-chemical-calculator.wood-detail .checkbox-detail .edging-size-input button.remove i {
	color:#DA3731;
}
.h11e-chemical-calculator.wood-detail .checkbox-detail .edging-size-input > .edging-choose-color p {
	text-align: center;
}
.h11e-chemical-calculator.wood-intruction {
	padding: 15px 20px;
	background-color: #F5F9FC;
	border-radius: 10px;
}
.checkbox-wrap.o1 .o1-input {
	width: 100%;
	table-layout: auto;
	margin-top: 10px;
}
.checkbox-wrap.o1 .o1-input .field {
	width: 30%;
}
.checkbox-wrap.o1 .o1-input .field #wood_size_input_item_option_1_css input {
	border-top-width:1px;
	width: 100% !important;
}
.mkp-calculator-list-products-modal {
	padding: 48px;
	height: auto;
	max-height: 800px;
	overflow-y: auto;
}
.mkp-calculator-list-products-modal .header {
	color: var(--neutral-colors-gray-800, #525255) !important;
	font-feature-settings: 'clig' off, 'liga' off !important;
	font-family: Prompt !important;
	font-size: 32px !important;
	font-style: normal !important;
	font-weight: 700 !important;
	line-height: normal !important;
	background-color: #fff !important;
	padding: 0 !important;
	border: unset !important;
	margin-bottom: 24px !important;
}
.mkp-calculator-list-products-modal i.close.icon, .mkp-calculator-list-products-modal i.times.icon {
	position: absolute;
	color: var(--neutral-colors-gray-800, #525255) !important;
	font-size: 26px !important;
	top: 42px !important;
	right: 42px !important;
	text-shadow: unset !important;
	cursor: pointer;
}
.mkp-calculator-list-products-modal .chemical-cart-list-item {
	display: flex;
	gap: 16px;
}
.mkp-calculator-list-products-modal .chemical-cart-list-item .image {
	width: 120px;
	height: 120px;
	border-radius: 8px;
	border: 1px solid #99999C;
	overflow: hidden;
}
.mkp-calculator-list-products-modal .chemical-cart-list-item .detail {
	width: 56%;
	line-height: 1.4;
}
.mkp-calculator-list-products-modal .chemical-cart-list-item .detail .brand {
	font-size: 12px;
	color: #99999C;
}
.mkp-calculator-list-products-modal .chemical-cart-list-item .detail .item-title {
	font-size: 16px;
	font-weight: 600;
}
.mkp-calculator-list-products-modal .chemical-cart-list-item .detail .sku {
	font-size: 12px;
	color: #99999C;
}
.mkp-calculator-list-products-modal .chemical-cart-list-item .detail .price {
	font-size: 21px;
	font-weight: 600;
	color: red;
}
.mkp-calculator-list-products-modal .chemical-cart-list-item .detail .price .online-discount {
	display: inline-block;
	margin-left: 5px;
	font-size: 12px;
	font-weight: 400;
	color: #666666;
}
.mkp-calculator-list-products-modal .chemical-cart-list-item .detail .original-price {
	font-size: 12px;
	color: #666;
	text-decoration: line-through;
}
.mkp-calculator-list-products-modal .chemical-cart-list-item .detail .original-price span {
	display: inline-block;
	text-decoration: none;
	background-image: url('https://static.homepro.co.th/assets/images/mkp/discount-pointing.png');
	background-repeat: no-repeat;
	width: 32px;
	height: 16px;
	font-size: 8px;
	color: #fff;
	padding: 0px 7px;
	margin-left: 5px;
	line-height: 16px;
	vertical-align: text-top;
}
.mkp-calculator-list-products-modal .chemical-cart-list-item .quantity {
	align-items: end;
	display: flex;
	font-weight: 600;
	margin-bottom: 10px;
}
.mkp-calculator-list-products-modal .action {
	display: flex;
	justify-content: space-between;
	margin-top: 40px;
}
.mkp-calculator-list-products-modal .action .calculate .total {
	font-size: 26px;
	font-weight: 600;
	line-height: 1.8;
}
.mkp-calculator-list-products-modal .action .button button {
	width: 210px;
	height: 50px;
	font-size: 18px;
	border-radius: 10px;
}
.mkp-calculator-chemical-modal .actions #action_calculate_btn, .mkp-calculator-chemical-modal .actions #calculate_dimension_btn {
	width: 180px;
}
.mkp-calculator-list-products-modal .action .button button a {
	color: #fff;
}
.mkp-calculator-chemical-modal {
	padding: 48px !important;
	line-height: 1.5;
	border-radius: 10px !important;
	background: var(--neutral-colors-white, #FFF);
	height: auto;
	max-height: 800px;
	overflow-y: scroll;
}
.mkp-calculator-chemical-modal .header {
	color: var(--neutral-colors-gray-800, #525255) !important;
	font-feature-settings: 'clig' off, 'liga' off !important;
	font-family: Prompt !important;
	font-size: 32px !important;
	font-style: normal !important;
	font-weight: 700 !important;
	line-height: normal !important;
	background-color: #fff !important;
	padding: 0 !important;
	border: unset !important;
	margin-bottom: 24px !important;
}
.mkp-calculator-chemical-modal.ui.modal .header label {
	font-size: 32px !important;
}
.mkp-calculator-chemical-modal i.close.icon,
.mkp-calculator-chemical-modal i.times.icon {
	color: var(--neutral-colors-gray-800, #525255) !important;
	font-size: 26px !important;
	top: 42px !important;
	right: 42px !important;
	text-shadow: unset !important;
}
.mkp-calculator-chemical-modal > div,
.mkp-calculator-chemical-modal > div > div,
.mkp-calculator-chemical-modal form {
	background-color: #fff;
	padding: 0 !important;
	border: unset !important;
}
.mkp-calculator-chemical-modal .actions-modal {
	margin-top: 24px;
}
.tile-glue-modal.mkp-calculator-chemical-modal form {
	padding-top: 40px !important;
}
.tile-glue-modal.mkp-calculator-chemical-modal hr {
	margin-top: 30px;
	margin-left: 0px;
	margin-right: 0px;
}
.tile-glue-modal.mkp-calculator-chemical-modal .remark table {
	margin-left: 0px;
}
.tile-glue-modal.mkp-calculator-chemical-modal .remark label {
	margin-left: 0px;
}
.tile-glue-modal.mkp-calculator-chemical-modal hr {
	margin-top: 30px;
}

/* 	glue-modal */
.glue-modal.mkp-calculator-chemical-modal form {
	padding-top: 40px !important;
}
.glue-modal.mkp-calculator-chemical-modal hr {
	margin-left: 0px;
	margin-right: 0px;
}
.glue-modal.mkp-calculator-chemical-modal .remark label {
	margin-left: 0px;
}
.glue-modal.mkp-calculator-chemical-modal .remark ul li {
	list-style-position: unset;
}

#chemicalAddRows .field_length, #chemicalAddRows .field_width{
	width:180px;
}
#chemicalAddRows .field_x{
	width:20px;
}
#chemicalAddRows .field_areaUnitType, #chemicalAddRows .field_areaUnitType .input{
	width: 150p !important;
}
@media only screen and (max-width: 767.98px) {
	.mkp-calculator-chemical-modal {
		width: 95% !important;
		padding: 20px 10px !important;
		height: auto;
	}

	#chemical_form .field{
		width: 100% !important;
	}
	#chemical_form .content.ui.segment table {
		font-size: 12px;
	}
	 #chemicalAddRows .row.inline.fields.row-counter {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: 8px;
		overflow-x: auto;
	}

	#chemicalAddRows .row.inline.fields .field {
/* 		width: auto !important;
 */		flex: 0 0 auto;
	}

	#chemicalAddRows .row.inline.fields .field p {
		margin: 0;
	}

	#chemicalAddRows .row.inline.fields .valueResult {
		text-align: left;
	}
	#chemicalAddRows .field_length, #chemicalAddRows .field_length .input, #chemicalAddRows .field_width, #chemicalAddRows .field_width .input{
		width:100px!important;
	}
	#chemicalAddRows .field_x{
		width:10px!important;
	}

	#chemicalAddRows .field_areaUnitType, #chemicalAddRows .field_areaUnitType .input{
		width:60px!important;
	}
	#chemicalAddRows .field_valueResult, #chemicalAddRows .field_row{
		display: none;
	}
}

.mkp-calculator-list-products-modal .action .button .outline {
	background-color: #fff;
	color: #525255;
	border: 1px solid #99999C;
}
.h11e-chemical-calculator.ui.form .field input:not(:placeholder-shown):invalid,
.h11e-chemical-calculator.ui.input>input:not(:placeholder-shown):invalid {
	color: #000;
	background: #fff;
	border: 1px solid rgba(34,36,38,.15);
}
.h11e-chemical-calculator.ui.form .field input.precise:not(:placeholder-shown):invalid,
.h11e-chemical-calculator.ui.input>input.precise:not(:placeholder-shown):invalid {
	color: #9f3a38;
	background: #fff6f6;
	border-color: #e0b4b4;
}
#h11e-chemical-form-ui #dimension_calculator_form{
	width: 100%;
	padding: 0px;
	margin-bottom: 30px;
	background-color: #F9F9FC;
}
#h11e-chemical-form-ui #dimension_calculator_form #chem-add-service-button {
	width: 72%;
	color: #525255;
	border-radius: 5px;
	border: 1px solid #99999C;
	background: white !important;
}
.ui.toast-container {
	z-index: 99999 !important;
}

.blockUI.blockOverlay {
	z-index: 999999 !important;
}
@media screen and (min-width: 1024px) {
	.h11e-chemical-calculator.mkp-calculator-chemical-modal {
		max-height: 600px;
		overflow-y: auto;
		top: 100px;
	}
	.mkp-calculator-list-products-modal {
		max-height: 600px;
		overflow-y: auto;
		top: 100px;
	}
}