CSS for Styling a Naked HubSpot Lead Capture Form

hubspot-bootstrap-4-form.css

/* Hubspot form CSS */
form.hs-form{
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: -14px;
	margin-left: -14px;
}
.hs-form-field{
	position: relative;
	width: 100%;
	padding-right: 14px;
	padding-left: 14px;
	flex: 0 0 100%;
	max-width: 100%;
}
@media screen and (min-width: 576px){
	/* col-sm-6 */
	.form-columns-2 .hs-form-field {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
	/* col-sm-4 */
	.form-columns-3 .hs-form-field {
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
}
.hs-button {
	overflow: visible;
	-webkit-appearance: button;
	display: inline-block;
	font-weight: 600;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-color: #96c93f;
	border: 1px solid #96c93f;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: 0.25rem;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	margin: 0 14px;
	color: #fff;
}
.hs-button:hover {
	color: #fff;
	background-color: #6f9a3f;
	border-color: #68913c;
	text-decoration: none;
}
.hs-button:active {
	color: #fff;
	background-color: #68913c;
	border-color: #628838;
}
.hs-form-field label {
	margin-bottom: 0.5rem;
}
.hs-input{
	display: block;
	width: 100%;
	height: calc(1.5em + 0.75rem + 2px);
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #495057;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #d8dfed;
	border-radius: 0.25rem;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;	
}
.hs-input.is-valid {
	border-color: #96c93f;
	padding-right: calc(1.5em + 0.75rem);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2396c93f' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right calc(0.375em + 0.1875rem) center;
	background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.hs-input:focus {
	color: #495057;
	background-color: #fff;
	border-color: #5ba6fa;
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgb(6 101 208 / 25%);
}
textarea.hs-input{
	height:6rem;
}
.hs-form-field{
	margin-bottom:1rem;
}
.hs-form-required{
	color:#c42032;
}
.hs-field-desc{
	font-size: 80%;
	color: #7f7f7f;
}