.form-con {
	grid-area: main;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	margin: .25em;
}

.form-wrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.form-hd-cnt {
	max-width: 26em;
}

.form-qnt-unit {
	display: flex;
	justify-content: space-between;
}

.form-ing-list {
	max-height: 11em;
	overflow-y: scroll;
}

.form-ing-search-output {
	max-width: 42em;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: .5em;
}

.form-ing-res-output {
	max-width: 43em;
	margin: 1em .5em .5em .5em;
	padding: 1em;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 	background-color: var(--lightyellow);
	border-radius: 8px;
}

.img-doodle {
	height: auto;
	width: 90%;
}

.form-rcp-ing-wrap2 {
	display: flex;
	justify-content: center;
}

.form-rcp-qnt-wrap2 {
	display: flex;
	background-color: #fff;
	border: 1px solid #dfdfdf;
	border-radius: 45px;
	touch-action: manipulation;
	width: fit-content;
	margin: .25em;
}

.form-ing-inputs {
	display: flex;
	flex-direction: column;
	flex: 1;
	margin-top: 1.5em;
}

.form-rcp-qnt-inp2 {
	text-align: center;
}

.inp-qnt2 {
	width: 3em;
	margin: 0 .2em;
}

.form-rcp-ing-wrap3 {
	background-color: var(--countyellow);
	display: flex;
	border: 1px solid #dfdfdf;
	border-radius: 45px;
	margin: 0 .25em .25em .25em;
}

.form-rcp-ing-inp-btn2 {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .5em;
	border: 2px solid #fff;
	background-color: #fff;
	box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.3);
	border-radius: 51%;
}

.form-rcp-ing-inp2 {
	margin: 0 .2em;
	border-radius: 45px;
	background-color: unset;
	padding: 0 0 0 .5em;
	flex: 1;
}

.ing-btn {
	padding: .25em .75em;
	margin: .25em;
	border-radius: 25px;
	/* border: 1px solid rgba(96,96,96,.2); */
	box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.3);
	background-color: #fff;
	height: fit-content;
}

.ing-btn-any {
	padding: .5em .75em;
	margin: .25em;
	border-radius: 25px;
	border: 1px solid rgba(96,96,96,.2);
	box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.3);
	background-color: #cdcdcd;
	height: fit-content;
}

.form-rcp-btn-area {
	/* grid-area: btns; */
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin: 1em 0 0 0;
}

.test1 {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	flex-wrap: wrap;
	padding: .5em;
	border-radius: 8px;
	margin: 0 0 1em 0;
}

.test12 {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	background-color: var(--lightyellow);
	margin: .5em;
	flex: 1;
}

.checkSvg {
	fill: #fecc17;
	height: 1.5em;
	width: auto;
	margin-right: .5em;
}

.ncnt-val-wrap {
	flex: 1;
	margin-right: 1em;
	text-align:end;
}

.ncnt-desc-wrap { 
	flex: 0 1 20em;
}

@media screen and (max-width: 1015px) {
	.form-hd-cnt {
		place-self: center;
		position: unset;
	}
    .form-ing-output {
		min-width: auto;
		margin: .5em;
    }
}

.form-rcp-ing-wrap {
	display: flex;
	justify-content: center;
	margin-top: .5em;
	background-color: var(--lightyellow);
	border-radius: 45px;
}

.form-rcp-qnt-inp {
	appearance: none;
	background-color: unset;
	width: 2.4em;
	text-align: center;
	border-radius: 25px 0 0 25px;
}

.form-rcp-ing-select {
	background-color: unset;
	border: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.form-rcp-ing-inp-wrap {
	display: flex;
	align-items: center;
	background-color: unset;
	border-radius: 0 25px 25px 0;
}

.form-rcp-ing-inp {
	background-color: unset;
	border-radius: 25px;
}

.toggle-switch {
	grid-area: main;
	display: flex;
	justify-content: center;
}

/* The switch - the box around the slider */
.switch {
	position: relative;
	display: inline-block;
	width: 3.75em;
	height: 2.1em;
	margin: 1.8em;
}

/* Hide default HTML checkbox */
.switch input {
	/* opacity: 0;
	width: 0;
	height: 0; */
	appearance: none;
}

.slider-ing {
	font-weight: 900;
	width: 8em;
	position: absolute;
	top: 4px;
	right: 34px;
}

.slider-fd {
	font-weight: 900;
	width: 8em;
	position: absolute;
	top: 4px;
	left: 66px;
}

/* The slider */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

/* .round-slider {
	border-radius: 51%;
	width: 26px;
	height: 26px;
	background-color: #af2626;
	position: absolute;
	left: 4px;
	bottom: 4px;
	-webkit-transition: .4s;
	transition: .4s;
} */

.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
	box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.2);
}

input:checked + .slider {
	background-color: var(--countyellow);
}

input:focus + .slider {
	box-shadow: 0 0 1px var(--countyellow);
	outline: var(--focus);
}

input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

input:checked + .slider-ing {
	color: aqua;
}

/* Rounded sliders */
.slider.round {
	border-radius: 34px;
}
  
.slider.round:before {
	border-radius: 50%;
}