﻿
body {
	font-family: Arial, Helvetica, sans-serif;
}

* {
	box-sizing: border-box;
}

/* Full-width input fields */
.contact-us-input{
	width: 100%;
	padding: 5px;
	margin: 10px 0 5px 0;
	display: inline-block;
	border: none;
	background: #f1f1f1;
}

/* Add a background color when the inputs get focus */
.contact-us-input:focus {
	background-color: #ddd;
	outline: none;
}
.contact-us-phone-hint {
	font-size: 10px;
	padding-left: 5px;
}

/* Set a style for all buttons */
.contact-us-modal button {
	background-color: #4CAF50;
	color: white;
	padding: 14px 20px;
	margin: 8px 0;
	border: none;
	cursor: pointer;
	width: 100%;
	opacity: 0.9;
}

	.contact-us-modal button:hover {
		opacity: 1;
	}

/* Extra styles for the cancel button */
.contact-us-cancelbtn {
	padding: 14px 20px;
	background-color: #f44336 !important;
}

/* Float cancel and signup buttons and add an equal width */
.contact-us-cancelbtn, .contact-us-signupbtn {
	float: left !important;
	width: 50% !important;
}

/* The Modal (background) */
.contact-us-modal {
	display: none;
	position: absolute;
	right: 20px;
	bottom: 50px;
	z-index: 10040;
	overflow: auto;
	overflow-y: auto;
	margin-left: auto;
	margin-top: auto;
	width: 450px;
	height: 575px;
}

/* Modal Content/Box */
.contact-us-modal-content {
	background-color: #fefefe;
	border: 1px solid #888;
	width: 100%; /* Could be more or less, depending on screen size */
}

/* Style the horizontal ruler */
hr {
	border: 1px solid #f1f1f1;
	margin-bottom: 0px;
}

/* The Close Button (x) */
.contact-us-close {
	position: absolute;
	right: 10px;
	top: 10px;
	font-size: 40px;
	font-weight: bold;
	color: black;
}

	.contact-us-close:hover,
	.contact-us-close:focus {
		color: #f44336;
		cursor: pointer;
	}

/* Clear floats */
.contact-us-clearfix::after {
	content: "";
	clear: both;
	display: table;
}

/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
	.contact-us-cancelbtn, .contact-us-signupbtn {
		width: 100%;
	}
}

.contact-us-controls {
	width: min-content;
	padding: 16px;
}

.message {
	padding: 15px;
	background: #f1f1f1;
	resize: none;
	margin-top: 20px;
}

.message:active {
	background: white;
}
