body {
  font-family: Roboto, Arial, Helvetica, Verdana, sans-serif;
  background-color: #f1f3f5;
  min-width:60vw;
  max-width:95vw;
}
:root {
--form-control-color: rebeccapurple;
--form-control-color: #c75410;
}

*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
margin: 0;
}

form {
display: grid;
place-content: top;
/* min-height: 40vh; */
}

.form-control {
font-family: Roboto, Arial, Helvetica, Verdana, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.1;
float: left;
}

.flexContainer {
    display: flex ;
    align-items: flex-start;
    justify-content: left ; /* Horizontally centers items */
}
.gridLayout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

.form-control + .form-control {
margin-top: 1em;
}

.form-control:focus-within {
color: var(--form-control-color);
}
.form-control + .form-control {
  margin-top: 1em;
}

.form-control--disabled {
  color: var(--form-control-disabled);
  cursor: not-allowed;
}

fieldset {
  padding:5px;    
  width: 450px;
  margin: 0;
  border: solid;
  float: none;
  display: inline-block;
  line-height:1.8;
}

.InformationLabel {  
  min-width:60vw;
  font-weight: bold;
  font-size:1em;
  color: #C55612;
  margin-bottom: 20px;
}

.InformationText {
  font-weight: normal;
  color: #000000;
  font-size:1em;
  margin-left: 10px;  /* Added space between 'Membership Type:' and 'Hi' */
  margin-bottom: 20px;
}

label, legend {
  font-weight: bold;
  font-size:1em;
  color: #C55612;
  margin-bottom: 20px;
}

.flexContainer {
  display: grid;
  align-items: left;
  min-width:60vw;
  max-width:80vw;
}

.instructions {
  font-weight: normal;
  color: #FF9933;
  margin-bottom: 10px;
  margin-top: 10px;
}

.progressBar {
  width: 100%;
  height: 30px;
  border: 1px solid #000;
  position: relative;
  margin-top: 20px;
}

.progressBar div {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #FF9933;
}

.progressBar span {
  position: absolute;
  bottom: 0;
  left: 2px;
  color: #000;
}
.regButton {
  width:15em; 
  height:10em;
}
.buttons {
  background-color: #FFEFDE;
  border: none;
  color: #6d7882;
  font-size: 15px;
  cursor: pointer;
  padding: 10px 20px;
  outline: 0;
  margin-top: 10px;
}

.buttons:hover {
  background-color: #c75410;
  color: white;
}
/* Optional: Give a distinct style to disabled buttons */
.buttons:disabled {
  background-color: #cccccc; /* Grey color for disabled state */
  color: #777777; /* Text color for disabled state */
}

/* Prevent color change on hover for disabled buttons */
.buttons:disabled:hover {
  background-color: inherit; /* Keeps the original background color */
  cursor: not-allowed; /* Shows a "not allowed" cursor */
}


filedset select,
fieldset textarea {
  padding: 10px;
  border: 1px solid #ccc;
  min-width: 200px;
  max-width: 300px;
  font-size: 1em;
  box-sizing: border-box;
  justify-content: left;
}
input[type="radio"] {
/* Add if not using autoprefixer */
-webkit-appearance: none;
/* Remove most all native input styles */
appearance: none;
/* For iOS < 15 */
background-color: var(--form-background);
/* Not removed via appearance */
margin: 0;

font: inherit;
color: #c75410;
width: 1.15em;
height: 1.15em;
border: 0.15em solid currentColor;
border-radius: 50%;
transform: translateY(-0.075em);

display: grid;
grid-template-columns: 1em auto;
gap: 0.5em;
place-content: center; 
}

/* Grouped styles for email, password, and text inputs */
input[type="email"], 
input[type="password"], 
input[type="text"] {
    width: 400px;
    height: 2.5em;
    border-radius: 5%;
    transition: 120ms transform ease-in-out;
    border: 1px solid #ccc;
    font-size: 15px;   /* Matching the button's font size */
    font-family: Roboto, Arial, Helvetica, Verdana, sans-serif;   /* Matching the button's font family */
    font-weight: 400;  /* Matching the button's font weight */
    color: var(--form-control-color);
    padding: 10px;
}

/* Grouped hover effects for email, password, text inputs and checkbox */
input[type="email"]:hover, 
input[type="password"]:hover, 
input[type="text"]:hover,
input[type="checkbox"]:hover {
  background-color: #f1dcc7;   /* light saffron color */
}

/* Checkbox styles */


input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background-color: var(--form-background);
  /* Not removed via appearance */
  margin: 0;

  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid currentColor;
  border-radius: 0.15em;
  transform: translateY(-0.075em);

  display: grid;
  place-content: center;
}

input[type="checkbox"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    border-radius: 5%;  /* Slight rounding for checkboxes */
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--form-control-color);
    /* Windows High Contrast Mode */
    background-color: CanvasText;
}

input[type="checkbox"]:checked::before {
    transform: scale(1);
}

input[type="checkbox"]:checked::after {
    transform: scale(1);
}

input[type="checkbox"]:focus {
    outline: max(2px, 0.15em) solid currentColor;
    outline-offset: max(2px, 0.15em);
}

/* Radio button styles */
input[type="radio"]::before {
    content: "";
    width: 0.50em;
    height: 0.50em;
    border-radius: 25%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--form-control-color);
    /* Windows High Contrast Mode */
    background-color: CanvasText;
}

input[type="radio"]:checked::before {
    transform: scale(1);
}

input[type="radio"]:checked::after {
    transform: scale(1);
}

input[type="radio"]:focus {
    outline: max(2px, 0.15em) solid currentColor;
    outline-offset: max(2px, 0.15em);
}

button {
    margin-top: 10px;
}

.ButtonLabel {
    font-weight: bold;
    margin: 0;
    padding: 0;
    font-size: 1em;
    color: #000000;
}


.errorMsg {
  font-size: 0.6em;
  color: red;
  padding: 10px 20px;
  border-radius: 25px;
  background-color: #ffe6e6;
  border: 1px solid #ff4c4c;
  display: none;
  margin: 5px 0;
  text-align: center;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.mandatory {
  color: red;
  font-weight: bold;
}
.mandatory-note {
  font-size: 0.9em;
  margin-top: 5px;
}
/* Table styles */
.formLayoutTable {
  width: 90%;
  max-width: 450px;
  border-collapse: separate;
  border-spacing: 0 10px; /* horizontal spacing: 0, vertical spacing: 10px */
  padding: 0;
}

/* Column styles */
.formLayoutTable .tabCol1 {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding-right: 5px;
}

.formLayoutTable .tabCol2 {
  width: 10px;
}

.formLayoutTable .tabCol3 {
  width: calc(100% - 210px); /* 100% minus widths of tabCol1 and tabCol2 */
  padding-left: 0.5em;
}

/* For rows with only two columns */
.formLayoutTable .tabCol2_mod {
  width: calc(100% - 200px); /* 100% minus width of tabCol1 only, because tabCol2 isn't present */
  padding-left: 0.5em;
}

/* For rows with only two columns */
.formLayoutTable .tabCol1_mod {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding-right: 5px;
}

/* For rows with only one columns, 3 span, left align */
.formLayoutTable .tabCol1_mod_leftAlign {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  padding-right: 5px;
}
/* For rows with only one columns, 3 span, right align */
.formLayoutTable  .tabCol1_mod_rigtAlign {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding-left: 5px;
}



.formLayoutLabelHeading {
  font-family: Roboto, Arial, Helvetica, Verdana, sans-serif;
  font-weight: bold;
  font-size: 2em;
  color: #C55612;
  box-sizing: border-box;  /* to ensure any padding or border doesn't expand the div beyond the td */
  width: 100%;             /* to make it span the full width of the td */
  white-space: normal;     /* to ensure text wraps to the next line */
}

.formLayoutLabelField {
  font-family: Roboto, Arial, Helvetica, Verdana, sans-serif;
  font-weight: bold;
  font-size: 1em;
  color: #C55612;
  box-sizing: border-box;  /* to ensure any padding or border doesn't expand the div beyond the td */
  width: 100%;             /* to make it span the full width of the td */
  white-space: normal;     /* to ensure text wraps to the next line */
}