.uagb-forms__outer-wrap {
	.uagb-forms-input,
	.uagb-forms-input::placeholder,
	.uagb-forms-input-label,
	.uagb-forms-main-submit-button,
	.uagb-forms-success-message,
	.uagb-forms-failed-message {
		-webkit-transition-property: color, background-color, border-color;
		-moz-transition-property: color, background-color, border-color;
		-o-transition-property: color, background-color, border-color;
		transition-property: color, background-color, border-color;
		-webkit-transition-duration: 0.15s;
		-moz-transition-duration: 0.15s;
		-o-transition-duration: 0.15s;
		transition-duration: 0.15s;
	}

	.uagb-forms-main-form {
		.uagb-forms-input,
		input[type="text"] {
			min-height: 0 !important;

			&::-webkit-input-placeholder {
				overflow: unset;
			}
		}

		input:not( [type="checkbox"] ):not( [type="radio"] ):not( [type="file"] ),
		textarea,
		select {
			width: 100%;
			box-sizing: border-box;
		}

		.uagb-forms-checkbox-wrap .uagb-form-checkbox-option input.uagb-inner-input-view {
			width: 33%;
		}

		.uagb-forms-phone-wrap {
			.uagb-form-phone-country {
				width: 25%;
				margin-right: 5px;
			}

			.uagb-forms-phone-input {
				width: 75% !important;
			}
		}
		//Phone block css.
		.uagb-forms-phone-flex {
			display: flex;
			width: 100%;
			justify-content: space-between;

			.uagb-form-phone-country {
				width: 25%;
				margin-right: 5px;
			}
		}

		.required::after {
			color: #f00;
			content: " *";
		}

		.uagb-forms-form-hidden-data {
			display: none;
		}

		.uagb-forms-main-submit-button-wrap .uagb-forms-main-submit-button.wp-block-button__link {
			width: auto;
		}
	}

	.uagb-forms-submit-message-hide {
		display: none;
	}

	.uagb-forms-success-message {
		padding: 20px 20px;
	}

	.uagb-forms-failed-message {
		padding: 20px 20px;
	}

	span.components-spinner {
		float: none;
	}

	.uagb-forms-input.uagb-form-phone-country {
		background-color: #fff;
	}

	//Ready Classes.
	.uag-col-2-wrap {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 15px;
	}

	.uag-col-3-wrap {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		column-gap: 15px;
	}

	.uag-col-4-wrap {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		column-gap: 15px;
	}

	/* The switch - the box around the slider */

	.uagb-switch {
		position: relative;
		display: inline-block;
		width: 50px;
		height: 25px;
	}

	/* Hide default HTML checkbox */

	.uagb-switch input {
		width: 0;
		height: 0;
		opacity: 0;
	}

	/* The slider */

	.uagb-slider {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #fff;
		cursor: pointer;
		transition: 0.4s;
		-webkit-transition: 0.4s;
	}

	.uagb-switch .uagb-slider::before {
		position: absolute;
		width: 20px;
		height: 20px;
		background-color: #000;
		transition: 0.4s;
		content: "";
		-webkit-transition: 0.4s;
	}

	.uagb-switch input:checked + .uagb-slider::before {
		background-color: #fff;
	}

	.uagb-slider.round::before {
		// Important is added to override the Square Styling if Rounded is Selected.
		border-radius: 50% !important;
	}
	// Toggle Css End
}

.uagb-forms-select-box,
.uagb-form-phone-country,
.uagb-forms-phone-wrap .uagb-forms-phone-input {
	height: auto;
	-webkit-appearance: none;
	appearance: none;
}

.uagb-forms-radio-wrap input[type="radio"]:checked + label::before {
	line-height: 1.2;
	content: " ";
}

.uagb-forms-radio-wrap input[type="radio"] + label::before {
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
	margin-bottom: 5px;
	box-sizing: content-box;
	text-align: center;
	line-height: 1.2;
	content: "";
}

.uagb-forms-radio-wrap input[type="radio"].round + label::before {
	// Important is added to override the Square Styling if Rounded is Selected.
	border-radius: 100% !important;
}

select::after,
select::before {
	padding: 10px;
}

.uagb-forms-radio-wrap input[type="radio"],
.uagb-forms-checkbox-wrap input[type="checkbox"],
.uagb-forms-accept-wrap input[type="checkbox"] {
	opacity: 0;
}

.uagb-forms-checkbox-wrap input[type="checkbox"]:checked + label::before,
.uagb-forms-accept-wrap input[type="checkbox"]:checked + label::before {
	line-height: 1.2;
	content: "\2714";
}

.uagb-forms-checkbox-wrap input[type="checkbox"] + label::before,
.uagb-forms-accept-wrap input[type="checkbox"] + label::before {
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
	margin-bottom: 5px;
	box-sizing: content-box;
	text-align: center;
	line-height: 1.2;
	content: " ";
}

@media only screen and ( max-width: 767px ) {
	.uagb-forms__outer-wrap {
		.uagb-forms-main-form {
			//Phone block css.
			.uagb-forms-phone-flex {
				display: flex;
				width: 100%;

				& .uagb-form-phone-country {
					width: 25%;
				}
			}
		}
	}
}

.wp-block-uagb-forms {

	/* Start here - Ready Classes for Width */
	&.uagb-forms-inline-field {

		/* Start here - To manage the gap between the Forms fields. */
		&.uagb-forms-column-gap-20 .uagb-forms-main-form {
			column-gap: 20px;
		}
		&.uagb-forms-column-gap-15 .uagb-forms-main-form {
			column-gap: 15px;
		}
		&.uagb-forms-column-gap-10 .uagb-forms-main-form {
			column-gap: 10px;
		}
		&.uagb-forms-column-gap-5 .uagb-forms-main-form {
			column-gap: 5px;
		}
		/* End here - To manage the gap between the Forms fields. */

		/* Start here - To manage the submit button width for desktop. */
		&.uagb-forms-button-desk-width-20 .uagb-forms-main-submit-button-wrap {
			width: 20%;
		}
		&.uagb-forms-button-desk-width-25 .uagb-forms-main-submit-button-wrap {
			width: 25%;
		}
		&.uagb-forms-button-desk-width-33 .uagb-forms-main-submit-button-wrap {
			width: 33.33%;
		}
		&.uagb-forms-button-desk-width-40 .uagb-forms-main-submit-button-wrap {
			width: 40%;
		}
		&.uagb-forms-button-desk-width-50 .uagb-forms-main-submit-button-wrap {
			width: 50%;
		}
		&.uagb-forms-button-desk-width-60 .uagb-forms-main-submit-button-wrap {
			width: 60%;
		}
		&.uagb-forms-button-desk-width-66 .uagb-forms-main-submit-button-wrap {
			width: 66.66%;
		}
		&.uagb-forms-button-desk-width-75 .uagb-forms-main-submit-button-wrap {
			width: 75%;
		}
		&.uagb-forms-button-desk-width-80 .uagb-forms-main-submit-button-wrap {
			width: 80%;
		}
		/* End here - To manage the submit button width for desktop. */

		/* Start here - To align the forms field. */
		&.uagb-forms-align-item-flex-start .uagb-forms-main-form {
			align-items: flex-start;
		}
		&.uagb-forms-align-item-center .uagb-forms-main-form {
			align-items: center;
		}
		/* End here - To align the forms field. */

		.uagb-forms-main-form {
			/* Start here - To make the forms field inline. */
			display: flex;
			flex-wrap: wrap;
			margin: 0 -5px;
			position: relative;
			text-align: left;
			/* End here - To make the forms field inline. */

			/* Start here - To adjust the forms field width on desktop. */
			.uagb-forms-field-desk-width-20 {
				width: 20%;
			}
			.uagb-forms-field-desk-width-25 {
				width: 25%;
			}
			.uagb-forms-field-desk-width-33 {
				width: 33.33%;
			}
			.uagb-forms-field-desk-width-40 {
				width: 40%;
			}
			.uagb-forms-field-desk-width-50 {
				width: 50%;
			}
			.uagb-forms-field-desk-width-60 {
				width: 60%;
			}
			.uagb-forms-field-desk-width-66 {
				width: 66.66%;
			}
			.uagb-forms-field-desk-width-75 {
				width: 75%;
			}
			.uagb-forms-field-desk-width-80 {
				width: 80%;
			}
			/* End here - To adjust the forms field width on desktop. */
		}

	}

}

@media (min-width: 768px) and (max-width: 1024px) {
	.wp-block-uagb-forms {

		&.uagb-forms-inline-field {

			.uagb-forms-main-form {

				/* Start here - To adjust the forms field width on tablet. */
				.uagb-forms-field-tablet-width-20 {
					width: 20%;
				}
				.uagb-forms-field-tablet-width-25 {
					width: 25%;
				}
				.uagb-forms-field-tablet-width-33 {
					width: 33.33%;
				}
				.uagb-forms-field-tablet-width-40 {
					width: 40%;
				}
				.uagb-forms-field-tablet-width-50 {
					width: 50%;
				}
				.uagb-forms-field-tablet-width-60 {
					width: 60%;
				}
				.uagb-forms-field-tablet-width-66 {
					width: 66.66%;
				}
				.uagb-forms-field-tablet-width-75 {
					width: 75%;
				}
				.uagb-forms-field-tablet-width-80 {
					width: 80%;
				}
				.uagb-forms-field-tablet-width-100 {
					width: 100%;
				}
				.uagb-forms-field-tablet-width-unset {
					width: auto;
				}
				/* End here - To adjust the forms field width on tablet. */
			}

			/* Start here - To adjust the forms submit button width on tablet. */
			&.uagb-forms-button-tablet-width-20 .uagb-forms-main-submit-button-wrap {
				width: 20%;
			}
			&.uagb-forms-button-tablet-width-25 .uagb-forms-main-submit-button-wrap {
				width: 25%;
			}
			&.uagb-forms-button-tablet-width-33 .uagb-forms-main-submit-button-wrap {
				width: 33.33%;
			}
			&.uagb-forms-button-tablet-width-40 .uagb-forms-main-submit-button-wrap {
				width: 40%;
			}
			&.uagb-forms-button-tablet-width-50 .uagb-forms-main-submit-button-wrap {
				width: 50%;
			}
			&.uagb-forms-button-tablet-width-60 .uagb-forms-main-submit-button-wrap {
				width: 60%;
			}
			&.uagb-forms-button-tablet-width-66 .uagb-forms-main-submit-button-wrap {
				width: 66.66%;
			}
			&.uagb-forms-button-tablet-width-75 .uagb-forms-main-submit-button-wrap {
				width: 75%;
			}
			&.uagb-forms-button-tablet-width-80 .uagb-forms-main-submit-button-wrap {
				width: 80%;
			}
			&.uagb-forms-button-tablet-width-100 .uagb-forms-main-submit-button-wrap {
				width: 100%;
			}
			&.uagb-forms-button-tablet-width-unset .uagb-forms-main-submit-button-wrap {
				width: auto;
			}
			/* End here - To adjust the forms submit button width on tablet. */
		}
	}
}

@media (max-width: 767px) {
	.wp-block-uagb-forms {

		&.uagb-forms-inline-field {

			.uagb-forms-main-form {

				/* Start here - To adjust the forms field width on mobile. */
				.uagb-forms-field-mobile-width-20 {
					width: 20%;
				}
				.uagb-forms-field-mobile-width-25 {
					width: 25%;
				}
				.uagb-forms-field-mobile-width-33 {
					width: 33.33%;
				}
				.uagb-forms-field-mobile-width-40 {
					width: 40%;
				}
				.uagb-forms-field-mobile-width-50 {
					width: 50%;
				}
				.uagb-forms-field-mobile-width-60 {
					width: 60%;
				}
				.uagb-forms-field-mobile-width-66 {
					width: 66.66%;
				}
				.uagb-forms-field-mobile-width-75 {
					width: 75%;
				}
				.uagb-forms-field-mobile-width-80 {
					width: 80%;
				}
				.uagb-forms-field-mobile-width-100 {
					width: 100%;
				}
				.uagb-forms-field-mobile-width-unset {
					width: auto;
				}
				/* End here - To adjust the forms field width on mobile. */
			}

			/* Start here - To adjust the forms submit button width on mobile. */
			&.uagb-forms-button-mobile-width-20 .uagb-forms-main-submit-button-wrap {
				width: 20%;
			}
			&.uagb-forms-button-mobile-width-25 .uagb-forms-main-submit-button-wrap {
				width: 25%;
			}
			&.uagb-forms-button-mobile-width-33 .uagb-forms-main-submit-button-wrap {
				width: 33.33%;
			}
			&.uagb-forms-button-mobile-width-40 .uagb-forms-main-submit-button-wrap {
				width: 40%;
			}
			&.uagb-forms-button-mobile-width-50 .uagb-forms-main-submit-button-wrap {
				width: 50%;
			}
			&.uagb-forms-button-mobile-width-60 .uagb-forms-main-submit-button-wrap {
				width: 60%;
			}
			&.uagb-forms-button-mobile-width-66 .uagb-forms-main-submit-button-wrap {
				width: 66.66%;
			}
			&.uagb-forms-button-mobile-width-75 .uagb-forms-main-submit-button-wrap {
				width: 75%;
			}
			&.uagb-forms-button-mobile-width-80 .uagb-forms-main-submit-button-wrap {
				width: 80%;
			}
			&.uagb-forms-button-mobile-width-100 .uagb-forms-main-submit-button-wrap {
				width: 100%;
			}
			&.uagb-forms-button-mobile-width-unset .uagb-forms-main-submit-button-wrap {
				width: auto;
			}
			/* End here - To adjust the forms submit button width on mobile. */
		}
	}
}
