/* Vendor-prefixed properties used by different rendering engines of browsers:
   -webkit (for Chrome, Safari, and Opera-blink)
   -moz    (for Firefox-gecko)
   -ms     (for Internet Explorer-Trident)
*/

/* Additional HTML Element Styles */
html { 
	scroll-behavior: smooth;
	scroll-padding-top: 1rem;		/* adjust as needed for fixed headers */
}

form {
  position:relative;
  width: 100%;
  /* height: 100%; */
  min-height: 100vh;		/* allow container to expand further for scrollbar */
  margin: 0;
  padding: 0;
  text-align: center;
  background: #ffffff;		/* white (was #ecf0f1 = ivory) */
}

.hidden-paragraph {
	display: none;			/* elements with none are NOT read by screen readers */
}

.form-title {
	font-family: Arial;		/* was Arial, Helvetica, sans-serif; */
	font-size: 21px;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	color: #0063a3;     	/* marine blue */
}

.student-info {
	font-family: Arial;		/* was Arial, Helvetica, sans-serif; */
	font-size: 19px;
	font-weight: bold;
	text-align: center;
	color: black;
}

.instructions-container {
	font-family: Arial;		/* was Arial, Helvetica, sans-serif; */
	font-size: 1.1rem;
	background-color: #f9f9f9;
	border: 1px soid #ccc;
	padding: 1.5rem;
	max-width: 90%;
	text-align: left;
}

.instructions-list {
	line-height: 1.6;		/* improves readability */
	margin-bottom: 0.75rem;	/* space between steps */
	font-size: 1.1rem;
}

fieldset {
	display: flex;			/* makes fieldset a flex container for the legend and radio-group */
	align-items: flex-start;
	/*display: grid;*/
	/*define 2 columns: auto for legend, rest for the inputs */
	/*grid-template-columns: auto auto;*/  /* was auto 1fr */
	/*grid-columns-auto: 50% 50%;*/
	/*gap: 10px;*/					/* adds space between options */
}

legend {
	width: 50%;
	/*grid-column: 1;*/				/* place legend in first column */
	vertical-align: top;		/* ensure vertical alignment */
}

.radio-group {
	/*grid-column: 2;*/				/* place radio buttons in second column */
	/*vertical-align: top;*/		/* ensure vertical alignment */
	display: flex;
	/*justify-content: flex-end;*/	/* pushes the group to the right */
	width: 50%;					/* takes up remaining space */
	gap: 10px;					/* adds space between options */
	background-color: light-blue;
}

.radio-group input[type="radio"] {
	display: inline-block;
	width: auto;
	font-size: 19px;
}

.radio-group label {
	margin-right: 5px;			/* add some space between the button and the next label */
	width: auto;
}

.radio-val1 {
	background-color: lightyellow;	/* #FFFFCC */
}

.radio-val2 {
	background-color: lightgreen;	/* #E1F5A9 */
}

.radio-val3 {
	background-color: lightblue;	/* #FFCC99 */
}

.radio-val4 {
	background-color: lightpink;	/* #FF99CC */
}

.radio-val5 {
	background-color: magenta;		/* #FF66FF */
}

.legends-container {
	font-size: 1.1rem;
	border: 1px soid #ccc;
	padding: 1.5rem;
	max-width: 70%;
	background-color: #f9f9f9;
}

.radio-container {
	font-size: 1.1rem;
	font-weight: 600;
	position: relative;
	float: left;		/* added */
	/*width: 25%;	*/	/* was 40% */
	max-width: 60%;
	background-color: light-blue;
}

strong {
	font-size: 18px;
	font-weight: bold;
	color: red;
}

.flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;	/* Horizontal alignment */
	align-items: center;			/* Vertical alignment */
}

.flex-container div {
	font-size: 18px;
	float: left;
}

.label-wrapper {
  font-size: 18px;
  font-weight: 600;
  position: relative;
  float: left;		/* added */
  /*width: 25%;	*/	/* was 40% */
  color: #000;
}

.input-wrapper{
  font-size: 18px;		/* added */
  font-weight: 300;		/* added */
  /*width: 60%;	*/		/* was 80% */
  position: relative;	/* added */
  float: left;			/* added - was right */
}


.input-class {
  display: inline;
  width: 50%; 			/* was 315px */
  position: relative;	/* added */
  float: left;			/* added - was right */
  padding: 2%;			/* was 14px */
  margin-bottom: 12px;
  border: 2px solid black;	/* was 0 */
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
      -ms-border-radius: 6px;
          border-radius: 6px;
  color: #000;
  background: #fff;
  placeholder: #000;
  font-size: 18px;
  font-weight: 600;
}

.input-class:focus {
  background:#f0f8ff;	/* was #fafafa */
}

.email-wrapper{
  font-size: 18px;		/* added */
  font-weight: 300;		/* added */
  /*width: 60%;	*/		/* was 80% */
  position: relative;	/* added */
  float: left;			/* added - was right */
}


.email-class {
  display: inline;
  width: 75%;			/* was 315px */
  position: relative;	/* added */
  float: left;			/* added - was right */
  padding: 2%;			/* was 14px */
  margin-bottom: 12px;
  border: 2px solid black;	/* was 0 */
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
      -ms-border-radius: 6px;
          border-radius: 6px;
  color: #000;
  background: #fff;
  placeholder: #000;
  font-size: 18px;
  font-weight: 600;
}

.email-class:focus {
  background:#f0f8ff;	/* was #fafafa */
}

.error-msg {
  display: inline;
  visibility: visible;
  /*width: 25%;	*/		/* was 315px */
  position: relative;	/* added */
  float: left;			/* added - was right */
  padding: 0;			/* was 14px */
  margin: 0;			/* was 12px */
  border: 0;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
      -ms-border-radius: 6px;
          border-radius: 6px;
  color: #000;
  background: #fff;
  placeholder: #000;
  font-size: 18px;
  font-weight: 600;
}

.error-msg.hidden {
  display: inline;
  visibility: hidden;
  /*width: 25%;	*/			/* was 315px */
  /*position: relative; */	/* added */
  /*float: right; */		/* added - was right */
  padding: 0;				/* was 14px */
  margin: 0;				/* was 12px */
  border: 0;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
      -ms-border-radius: 6px;
          border-radius: 6px;
  color: #000;
  background: #fff;
  placeholder: #000;
  font-size: 18px;
  font-weight: 600;
}

select {
  display: inline;
  /*width: 50%;	*/		/* was 315px */
  position: relative;	/* added */
  float: left;			/* added, was right */
  padding: 2%;			/* was 14px */
  -webkit-border-radius:6px;
     -moz-border-radius:6px;
      -ms-border-radius:6px;
          border-radius:6px;
  border: 2px solid black;	/* was 0 */
  margin-bottom: 12px;
  /*color:#7f8c8d;*/
  color: #000 !important;
  background: #fff;
  font-size: 18px;
  font-weight: 600;
}

select:focus {
  background:#f0f8ff;	/* was #fafafa */
}

.pwd-error {
	position: fixed;
	top: 0;
	left: 2%;
	/*transform: translateX(-50%);*/
	font-size: 2em;
	font-weight: 400;
	color: #b30000;
	list-style: none;
}


.comments-title {
	font-family: Arial;		/* was Arial, Helvetica, sans-serif; */
	font-size: 16px;
	font-weight: bold;
	text-align: left;
	color: black;
}

/* table styling */
th, td {
	border: 1px solid black;
}
/* Align column headers to the center (default, but explicit) */
.column-header {
	text-align: center;
}
/* Align row headers to the left */
.row-header {
	text-align: left;
}

/* These did nothing */
/*
a:focus-visible {
	outline: 2px solid red;
	background-color:  #f0f8ff;
}

input:focus-visible {
	outline: 2px solid red;
	background-color:  #f0f8ff;
}

textarea:focus-visible {
	outline: 2px solid red;
	background-color:  #f0f8ff;
}
*/

/* Moved these to topapp-acc.css */
/*
.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 1em;
	background-color: #000;
	color: #fff;
}

.skip-link:focus {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

#backBtn {
	position: fixed;
	bottom: 120px;
	right: 30px;
	z-index: 99;
	cursor: pointer;
	padding: 15px;
	border-radius: 10px;
	font-size: 18px;
	border: none;
	outline: none;
	background-color: darkred;
	color: white;
	transition: background-color 0.3s;
}

#backBtn:hover {
	background-color: red;
}
*/