form.clean
{
	font-family: Arial, sans-serif;
	font-size: 1em;
	margin: 1em;
	padding: 1em 2em;
	background-color: #fff;
	border: 1px solid #eee;

}

form.clean *
{
	margin: 0;
	padding: 0;
}

form.clean p
{
	margin: .5em 0;
}

form.clean input[type=text],
form.clean input[type=password],
form.clean textarea,
form.clean select
{
	-webkit-border-radius: .4em;
	-moz-border-radius: .4em;
	border-radius: .4em;
	background-color: #fafafa;
	border: 1px solid #ddd;
	color: #666;
	font-size: 1em;
	padding: .15em;
	/*width: 100%;*/
	
}

form.clean input:hover,
form.clean textarea:hover,
form.clean select:hover
{
	background-color: #ffe;
}

form.clean fieldset
{
	-webkit-border-radius: .6em;
	-moz-border-radius: .6em;
	border-radius: .6em;
	border: 1px solid #ddd;
	margin: 1em 0;
	padding: .5em 1em;
	
}

fieldset legend {
	color: #005086;
	font-weight: bold;
	/*font-size: 1.2em;*/
	font-size: 1.1em !important;
	margin-left: .25em;
	margin: 0 0 5px 0;
}

form.clean ol
{
	list-style: none;
}

form.clean ol li
{
	margin: .5em 0;
	list-style-type: none;
}

form.clean ol li label
{
	display: block;
}

form.clean ol.table
{
	list-style: none;
	display: table;
}

form.clean ol.table li
{
	display: table-row;
}

form.clean ol.table li label[for]
{
	display: table-cell;
	text-align: right;
	padding: .5em;
}

form.clean div.col2 label
{
	float: left;
	width: 50%;
}

form.clean div.col3 label
{
	float: left;
	width: 33%;
}

form.clean div.col4 label
{
	float: left;
	width: 25%;
}

form.clean fieldset:first-child
{
	margin-top: 0;
}

form.clean input[type=button],
form.clean input[type=reset],
form.clean input[type=submit],
form.clean button
{
	-webkit-border-radius: .4em;
	-moz-border-radius: .4em;
	border-radius: .4em;
	background-color: #fafafa;
	border: 1px solid #ddd;
	color: #666;
	font-size: 1em;
	padding: .15em .4em;
	margin: 0 .3em;
}

form.clean input[type=submit]:hover,
form.clean input[type=reset]:hover,
form.clean input[type=button]:hover,
form.clean button:hover
{
	background-color: #ffd;
}



/* code below from users_wider.css */

label, .cb_rad_description {
	/*margin:2px 0 0 -205px;
	width: 100px;
	
	padding-left:0;
	*/
	display:inline;
	position:relative;
	margin-left: 0.2em;
	_top:0.2em;
	
	float:left;
	color:#000;
	
}

label.nofloat {
	/*margin-left: 0;
	float:none;
	width:auto;
	font-weight:normal;
	*/
	display: inline;
	margin-left: 0.5em;
	
	
}

form p, #recaptcha_widget_div {
	/*margin:0 0 10px 205px;*/
	width: 100%;
}
form p, #recaptcha_widget_div, ul {
	/*margin:0 0 10px 205px;*/
}
form span {
  font-weight:bold;
  padding-left:10px;
  display:inline-block;
  /*max-width:375px;*/
  vertical-align:top;
  color: #980002;
}
/*legend {
	font-weight:bold;
}*/

.ok {
  color:#0C6;
}

.alert {
	color: #F00;
	font-weight: bold;
}

.sent {
	color: #03F;
	font-size: 20px;
	font-weight: bold;
}

.required {
	color: #F00;
	font-weight: normal;
	font-size: 16px; 
}

/* 1. Reset fieldset browser defaults */
form.clean .accessible-radio-group {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column; /* Mobile first: stack question over choices */
  align-items: flex-start;
	margin-top: 10px!important;
}

/* 2. Fix the legend so it acts like an inline label */
form.clean .accessible-radio-group .radio-group-title {
  font-size: 1rem; 
  font-weight: bold;
  margin: 0 0 10px 0; /* Clear all margins, add small bottom margin on mobile */
  padding: 2px;
  width: 100%; /* Take full width on mobile */
  border: none;
  float: none !important; /* REMOVED legacy float causing the stair-step effect */
  display: block;
}

/* 3. Display the options container horizontally */
form.clean .radio-options-inline {
  display: flex;
  flex-direction: column; /* Mobile first: stack choices vertically */
  gap: 12px; 
  width: 100%;
}

/* 4. Keep individual inputs and text tightly coupled */
form.clean .radio-item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap; 
}

form.clean .radio-item input[type="radio"] {
  margin: 0 6px 0 0; 
  padding: 0;
  cursor: pointer;
  vertical-align: middle;
  float: none !important; /* Prevents input floating */
}

form.clean .radio-item label {
  margin: 0;
  padding: 0;
	padding-left: 3px;
  cursor: pointer;
  display: inline-block;
  float: none !important; /* FIXES THE STAIR-STEP EFFECT: Overrides the global float: left */
}

/* DESKTOP RESPONSIVE OVERRIDES */
@media (min-width: 768px) {
  form.clean .accessible-radio-group {
    flex-direction: row; /* Align question and options side-by-side */
    align-items: center; /* Perfect vertical alignment in a straight line */
    flex-wrap: wrap; /* Prevents overflow if question is very long */
  }

  form.clean .accessible-radio-group .radio-group-title {
    width: auto; /* Shrink to text size on desktop */
    margin: 0 20px 0 0; /* Creates space between question and first choice */
  }

  form.clean .radio-options-inline {
    flex-direction: row; /* Flatten options into a perfect horizontal line */
    flex-wrap: wrap; /* Gracefully wraps complete items if screen shrinks */
    gap: 15px; 
    width: auto;
  }
}

