#content {
	text-align: center;
}

#badges img {
  border: none;
}

div.hr {
  margin-bottom: 1em;
}

#contactForm table {
  table-layout: fixed;
  margin: 0 auto;
  width: 100%;
}

#contactForm td {
  width: 33%;
  margin: 0;
  border: none;
  padding: 1px;
  white-space: nowrap;
}

#contactForm td.hasWrapper {
  padding: 0px;
}

#contactForm span.inputWrapper {
  display: inline-block;
  padding: 2px;
  border: 1px solid transparent;
}

#contactForm input:not([type=submit]), #contactForm textarea {
  border: 1px solid #ccc;
  padding: 2px;
}

#contactForm textarea {
  max-width: 100%;
}

td.formError {
  color: #993300;
  font-weight: bold;
  text-align: left;
}

.inputErrorField {
  background-color: #FFE1E1 !important;
  border: 1px solid #E99 !important;
}

table.outputdata {
	border: 2px #421266 solid;
	border-collapse: collapse;
	margin-left:auto; margin-right: auto;
}

table.outputdata td {
	padding: 2px 6px 2px 6px;
	border: 2px;
	vertical-align: top;
	width: 50%;
}

table.outputdata td.even {
	background-color: #debbdf;
	border-left: #debbdf 1px solid;
	border-right: #debbdf 1px solid;
}

table.outputdata td.key {
	color: #330033;
}

table.outputdata td.value {
    font-family: Consolas,"Lucida Console","Courier New",Courier,monospace;
}

p.errorMessage {
	color:#993300;
	font-size:130%;
	font-weight:bold;
}

p.successMessage {
	color:#421266;
	font-size:130%;
	font-weight:bold;
}

.disabled label {
    color: #AAAAAA;
}

.errortip {
  display: block;
  color: #c33;
  font-size: 13px;
  margin-top: 2px;
  margin-bottom: 4px;
}

/* ======================
   Responsive: Mobile
   ====================== */
@media screen and (max-width: 806px) {
  #content {
    text-align: left;
  }

  #contactForm table { table-layout: auto; }

  #contactForm table,
  #contactForm tr,
  #contactForm td {
    display: block;
    width: 100% !important;
    white-space: normal !important;
    text-align: left;
  }

  #contactForm td[align="right"] {
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 2px;
    padding-bottom: 0;
  }

  #contactForm input:not([type=submit]):not([type=hidden]):not([type=radio]),
  #contactForm textarea,
  #contactForm select {
    display: block;
    width: 100%;
    padding: 10px;
    margin-bottom: 4px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  #contactForm #phone1,
  #contactForm #phone2,
  #contactForm #phone3 {
    display: inline-block;
    width: 28%;
    min-width: 0;
    margin: 0 1px;
    padding: 10px 6px;
  }

  #contactForm textarea { min-height: 120px; }

  #contactForm span.inputWrapper {
    display: flex;
    gap: 4px;
    align-items: center;
  }

  #contactForm span.inputWrapper select { width: auto; flex: 1; }
  #contactForm td.hasWrapper input[type="text"] { width: auto; flex: 0 0 60px; }

  #contactForm input[type=submit] {
    display: block;
    width: 100%;
    padding: 14px;
    margin-top: 16px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background-color: #770e78;
    border: none;
    border-radius: 6px;
    cursor: pointer;
  }

  #contactForm input[type=submit]:hover,
  #contactForm input[type=submit]:active {
    background-color: #49043d;
  }

  /* Radio toggle buttons */
  #contactForm .radioGroup {
    display: flex;
    gap: 0;
    margin-bottom: 4px;
  }

  #contactForm .radioGroup input[type=radio] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  #contactForm .radioGroup label {
    display: inline-block;
    flex: 1;
    text-align: center;
    padding: 10px 8px;
    margin: 0;
    font-size: 15px;
    background: #f2f0f2;
    color: #49043d;
    border: 1px solid #be86be;
    border-left: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }

  #contactForm .radioGroup label:first-of-type {
    border-radius: 4px 0 0 4px;
    border-left: 1px solid #be86be;
  }

  #contactForm .radioGroup label:last-of-type {
    border-radius: 0 4px 4px 0;
  }

  #contactForm .radioGroup input[type=radio]:checked + label {
    background: #770e78;
    color: #fff;
    border-color: #770e78;
  }

  #contactForm .radioGroup.disabled label {
    background: #e8e4e8;
    color: #aaa;
    border-color: #d0c8d0;
    cursor: default;
  }

  table.outputdata, table.outputdata tr, table.outputdata td {
    display: block;
    width: 100% !important;
  }

  table.outputdata td.key { font-weight: bold; padding-bottom: 0; }
  table.outputdata td.value { padding-top: 0; word-break: break-word; }

  p.errorMessage, p.successMessage { text-align: center; }
}