/* Base desktop styling */
.rsp-table {
  width: 640px;
  border-collapse: collapse;
  margin: 20px 0;
}

.rsp-table th, 
.rsp-table td {
  padding: 12px;
  text-align: left;
  border: 1px solid #ddd;
}

/* Mobile responsive layout */
@media screen and (max-width: 600px) {
  /* Hide the traditional table header entirely */
  .rsp-table thead {
    display: none;
  }

  /* Force table elements to act like a stacked block layout */
  .rsp-table, 
  .rsp-table tbody, 
  .rsp-table tr, 
  .rsp-table td {
    display: block;
    width: 100%;
  }

  /* Style each row like an isolated card */
  .rsp-table tr {
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    padding: 8px;
  }

  /* Align data rows side-by-side inside the card */
  .rsp-table td {
    text-align: right;
    padding-left: 50%;
    position: relative;
    border: none;
    border-bottom: 1px solid #eee;
  }

  .rsp-table td:last-child {
    border-bottom: 0;
  }

  /* Inject the headers dynamically from data attributes */
  .rsp-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 12px;
    width: 45%;
    text-align: left;
    font-weight: bold;
    color: #333;
  }

.choice{
list-style-position: inside;
color: #0033FF;
text-align:left;
width:300px;
height: 200px;
}

ul.choice li{
	border: 1px solid blue;
	border-radius:8px;
	width:300px;
	height:32px;
	color: #0033FF;
	background-color: #99CCFF;
	text-align:left;
	line-height: 32px;
	margin:22px 0 2px 0;
}

ul.choice a{
text-align:left;
font-size:1.125em;
line-height:1.25em;
color: #0033FF;
font-weight: 600;
}


.choice_pic {
	border-width:1px;
	border-radius:10px;
	border-style:solid;
	border-color:#0099ff;
	padding:2px
}


.partbox {
width:100%;
border:solid 2px grey;
border-radius:10px;
padding: 60px 10px 90px;
margin:50px 10px;
background:#ccc;
}

.smalllogo {
border: none;
margin:0 0 12px 0;
width:auto;
}

/* Style the form - display items horizontally */
.flexiform { 
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  max-width: 800px;
box-sizing: none;
}

fieldset {
	border:0px;
}

/* Style the input fields */

.flexiform input {
  flex: 1;
  width:90px;
  height:28px;
  vertical-align: middle;
  margin: 2px 0 0 18px;
  padding: 4px;
  background-color: #fff;
  border: 0;
  border-radius: 5px;
}

/* Style the select fields */
.flexiform select {
  vertical-align: middle;
  margin-left: 8px;
  padding: 2px 5px;
  background-color: #fff;
  border: 0;
border-radius: 5px;
}

/* Style the submit button */
.flexiform button {
  padding: 5px 10px;
  margin-left: 8px;
  background-color: blue;
  border: 0;
  border-radius: 5px;
  color: white;
}

.flexiform button:hover {
  background-color: royalblue;
}

/* Add responsiveness - display the form controls vertically instead of horizontally on screens that are less than 800px wide */
@media (max-width: 800px) {

.choice{
margin-left:4px;
text-decoration:none;
width:320px;
height: 284px;
}

ul.choice li{
margin:20px 0 5px;
}

ul.choice a{
font-size: 1.25em;
line-height:.5em;
}


.partbox {
padding: 10px 10px 20px;
margin:10px;
}


  .flexiform input {
	flex-basis: 100%;
	margin: 15px 0;
	width:150px;
	height:24px;
	font-size:14px;
  }

  .flexiform select {
    margin: 15px 0;
  }

  .flexiform {
    flex-direction: column;
    align-items: stretch;
border: none;
    width: 90%;
  }
}

* Add responsiveness - display the form controls vertically instead of horizontally on screens that are less than 600px wide */
@media (max-width: 600px) {

ul.choice{
width:320px;
height: 320px;
}

ul.choice li{
	height:48px;
	line-height: 48px;
	margin:0;
	padding:0.2em;
	display: inline-block;
}

/* Ensure box sizes include borders and padding */
* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  padding: 16px;
  background-color: #f9f9f9;
}

/* Mobile-first layout: 100% width, single vertical column */
.responsive-form {
  max-width: 100%;
  margin: 0 auto;
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px; /* Spacing between fields */
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px; /* Spacing between label and input */
}

label {
  font-weight: bold;
  font-size: 14px;
}

/* Make inputs large enough for touch targets (minimum 44px height recommended) */
input, textarea {
  width: 100%;
  padding: 12px; 
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px; /* Prevents iOS auto-zoom on focus */
}

button {
  width: 100%;
  padding: 14px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}
}

/* Screen sizes 768px (Tablets / Desktops) and wider */
@media (min-width: 768px) {
  .responsive-form {
    max-width: 600px; /* Restrict width so it doesn't span infinitely */
    display: grid;
    grid-template-columns: 1fr 1fr; /* Split into 2 equal columns */
  }

  /* Full-width overrides for textareas and buttons */
  .form-group:nth-child(3),
  button {
    grid-column: span 2; 
  }

  button {
    width: auto; /* Shrink button from full-width to natural content width */
    align-self: flex-start;
  }
}