/*
// form.css - Much of this styling is based on Bootstrap form styling
*/
/* Formatting of div enclosing the contact form */
#contactform-div {
  margin-bottom: 50px;
}
/* Formatting for the contact form */
#contactform {
  /*
	 * CSS variables defining various form widths
	 */
  --form-container-width: 90%; /* Default width of overall form */
  --form-container-max-width: 500px; /* Maximum width of overall form */
  /* The minimum width of non full-width field (email, phone number, city and combined state-zip) determines the form width where
		 two fields can be combined into a single row of the form.  Combining occurs when the form container is at least 2X this width.  */
  --form-field-min-width: 250px;
  /* General form styling */
  * {
    /* font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -- Dale Change */
    /* font-size: 16px; -- Dale Change */
    /* line-height: 1.5; -- Dale Change */
    color: #333333;
  }
  *, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  button, input, optgroup, select, textarea {
    margin: 0;
    font: inherit;
    font-size: inherit;
    line-height: inherit;
    font-family: inherit;
    color: inherit;
  }
  /* Form feedback message styling */
  .form-message {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
  }
  .success-font-color {
    color: #009933;
  }
  .failure-font-color {
    color: #CC0000;
  }
  /* Form grid styling */
  /* This CSS variable is used to combine two fields onto a single row in the form based on form container width on the screen.  The magic
		 constant of 0.41 (halfway between 0.33 and 0.5) is a hack to insure a max of two form group fields are combined on a single row. */
  --auto-grid-min-width: max(var(--form-field-min-width), calc(min(var(--form-container-width), var(--form-container-max-width)) * 0.41));
  .grid-container {
    width: var(--form-container-width);
    max-width: var(--form-container-max-width);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    display: grid;
    align-content: start;
    grid-template-columns: repeat(auto-fit, minmax(var(--auto-grid-min-width), 1fr));
    gap: 10px;
    /* border: 1px solid red; */
    padding: 0px;
  }
  /* This media query defines the screen width size where the form width goes changes from the usual var(--form-container-width)
		 width to the width shown below.  This change is done to maximum the form width on small screens like cell phones.  Note -
		 CSS variables cannot be used within media queries which is why the max-width is a hardcoded constant. */
  @media only screen and (max-width: 700px) {
    .grid-container {
      width: 100%;
    }
  }
	/*
  .grid-container > div {
    text-align: center;
  }
	*/
  .grid-container .full-width-row {
    grid-column: 1/-1;
  }
  .grid-container-inner-1fr-1fr {
    width: 100%;
    display: grid;
    align-content: start;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    /* border: 1px solid orange; */
    padding: 0px;
  }
  .grid-container-inner-1fr-1fr > div {
    text-align: left;
    /* border: 1px solid blue; */
  }

  /* Form input field styling */
  .form-group {
    margin-bottom: 5px;
    /* border: 1px solid aqua; */
  }
  .form-control {
    display: block;
    width: 100%;
    height: 45px;
    padding: 6px 12px;
    /* font-size: 14px; -- Dale Change */
    font-size: 1em;
    line-height: 1.4em;
    /* color: #BDBDBD; */
    color: #222222;
    background-color: #FFFFFF;
    background-image: none;
    border: 1px solid #153872;
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  }
  .form-control::placeholder {
    color: #999999;
    opacity: 1;
  }
  .form-control:focus {
    border-color: #01A4C2;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
  }
  textarea.form-control {
    height: auto;
    resize: vertical;
  }
  /* Submit button styling - based on Bootstrap */
  /* ****************************************************************************************************
	The ::-moz-focus-inner pseudo elements are not considered as valid so Chrome treats it as an invalid
	selector and caused problems in this nested CSS rule. So they are comments out here.  See
		https://stackoverflow.com/questions/77503859/bug-nested-css-vendor-prefix-breaks-chrome-css-parsing
	for more details. PAB 1/19/2024
	*******************************************************************************************************
	button::-moz-focus-inner, input::-moz-focus-inner {
		padding: 0;
		border: 0;
	} */
  #submit-button-div {
    text-align: center;
  }
  button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
  }
  .btn {
    display: inline-block;
    padding: 7px 28px;
    margin-bottom: 0;
    /* font-size: 18px; -- Dale Change */
    /* font-family: 'Roboto Condensed', sans-serif; -- Dale Change */
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.4em;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 2px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
  /* Submit button coloring */
  --red-colored-button: #ED5210;
  --green-colored-button: #000000;
  --submit-button-color: var(--green-colored-button);
  .btn-default {
    color: var(--submit-button-color);
    /* background-color: transparent; */
    background-color: #F2F2F2;
    border-color: var(--submit-button-color);
  }
  .btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active {
    color: #FFFFFF;
    background-color: var(--submit-button-color);
    border-color: var(--submit-button-color);
  }
  /* Honeypot technique, hide the fake phone and email fields */
    #email1, label[for="email1"], #phonex1, label[for="phonex1"] {
    display: none;
  }
}