OwlCyberSecurity - MANAGER

Edit File: _contact-form.scss

// General Output Message
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output
,.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output {
	border-color: red;
	color: red;
}
.wpcf7 form.sent .wpcf7-response-output {
    border-color: green;
    color: var(--heading);
}
.ova-response-output-black {
	.wpcf7 form.sent .wpcf7-response-output {
	    color: var(--heading);
	}
}

// General Ova Contact Form
.ova-ctform {
	position: relative;

&.ctform2 {
		input[type='text'], input[type='email'], input[type='tel'], textarea, select:not([size]):not([multiple]) {
			border: 1px solid #E7EAEE;
			background: #fff;
			&::placeholder {
				font-size: 14px;
				color: #ACB4C3;
			}
		}
		input {
			padding: 12px;
		}
		.ova_wrap_input {
			margin-bottom: 30px;
		}
		span.label {
			font-size: 16px;
			font-weight: 500;
			color: var(--heading);
		}
		.wpcf7-submit {
			width: 100%;
		}
		textarea {
			height: 100px;
			margin-bottom: 20px;
			padding: 12px;
		}
	}

.two_column {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 20px;

@media screen and ( max-width: 600px ) {
			grid-template-columns: 1fr;
		}
	}
	.ova_wrap_input {
		margin-bottom: 20px;
	}
	.ova_wrap_submit {
		margin-top: 40px;
		display: flex;
		align-items: center;
		gap: 20px;
		row-gap: 10px;
		@media screen and ( max-width: 600px ) {
			flex-direction: column;
		}
		p {
			align-items: center;
			line-height: 1;
			padding: 20px 0 0 0;
    		border-top: 1px solid #E6E6E6;
			@media screen and ( max-width: 600px ) {
				flex-direction: column;
			}
		}
		.wpcf7-form-control-wrap {
			max-width: 200px;
			line-height: 1.3;
		}
	}

p {
		display: inherit;
		margin: 0;
	}
	label {
		display: inline-block;
		width: 100%;
	}
	span.label {
		display: inline-block;
		margin: 0 20px;
		font-size: 14px;
		color: #333333;
		&.no-margin {
			margin: 0;
		}
	}
	input[type='text'], input[type='email'], input[type='tel'], textarea, select:not([size]):not([multiple]) {
		font-size: 18px;
		font-weight: 400;
		color: #000;
		width: 100%;
		border: none;
		background: #F5F5F5;
		&::placeholder {
			color: var(--text);
			opacity: 1;
		}
		&:focus {
			border-color: var(--primary);
		}
	}

input {
		padding: 16px 24px;
	}

textarea {
		padding: 24px;
		height: 180px;
	}

.wpcf7-submit {
		font-size: 14px;
		font-weight: 600;
		letter-spacing: 0.35px;
		text-transform: uppercase;
		padding: 19px 38px;
		&:hover {
			color: var(--primary);
		}
	}
	.wpcf7-spinner {
		position: absolute;
		right: 0;
		bottom: 20px;
	}
	.wpcf7-list-item {
		margin: 0;
		font-size: 14px;
		color: #000;
		input[type='checkbox'] {
			width: 18px;
			height: 18px;
		}
		label {
			display: inline-flex;
			align-items: center;
			gap: 12px;
		}
	}
}