body{
    font-family: 'Roboto Condensed', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #000;
}



input.error {
 border: 2px solid red;
 /* Red border for error state */
}

input[type="checkbox"] {
 font-family: 'Roboto Condensed', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
 margin-bottom: 10px;
 accent-color: #D82231;
}
}

/* Styling for checkbox */
input[type="checkbox"]:checked {
 accent-color: #D82231;

 /* Change the check color to red */
 font-family: 'Roboto Condensed', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
 margin-bottom: 15px;

}

.required {
 color: red;
 /* Change the color to red */
}

.name-container {
 display: flex;
 flex-direction: column;
 /* Stack vertically by default (mobile) */
 min-width: 48%;
}

.input-group {
 margin-bottom: 5px;
 /* Space between rows on mobile */
 display: flex;
 /* Make label and input inline */
 flex-direction: column;
 /* Stack label and input */
}


.radio-group {
 display: flex;
width: 350px;
 /* Display radio buttons inline */
 align-items: center;
 /* Center align radio buttons */
 margin-bottom: 5px;
 /* Space between radio buttons and following content */
 font-weight: 500;
}

@media (min-width: 600px) {
 .name-container {
  flex-direction: row;
  /* Change to row layout on larger screens */
  justify-content: space-between;
  /* Space between the fields */
 }

 .input-group {
  flex: 1;
  /* Allow both fields to take equal space */
  margin-bottom: 0;
  /* Remove bottom margin for larger devices */
  display: flex;
  /* Make label and input inline */
  flex-direction: row;
  /* Align label and input in the same row  align-items: center;*/
  
  /* Center align label and input */
 }

 .input-group label {
  margin-right: 10px;
  /* Space between label and input */
  flex: 0 0 auto;
  /* Prevent label from growing */

 }
}

/* For Mobile Device */
@media (max-width: 480px) {
 firstNameMargin {
  margin-bottom: -5px !important;
 }
}


/* CSS to control display on mobile devices */
@media only screen and (max-width: 600px) {
 h1 span {
  font-size: 24px !important;
  /* Smaller font size for Manage Preference */
  line-height: 28px !important;
  /* Adjust line height */
 }

 h3 span {
  font-size: 16px !important;
  /* Smaller font size for next lines */
  font-weight: 350 !important;
 }

 .custom-line-height {
  line-height: 1.2em;
   !important
  /* Reduced line height for specific text */
 }

 h3 {
  line-height: 1.4 !important;
  /* Adjust line height for better spacing */
 }
}

/* Optional: Set a maximum width for the headings */
h2 span,
h3 span {
 max-width: 70ch;
 /* Limits the width to about 70 characters */
}


label {
 display: block;
 font-size: 12px;
 line-height: 1em;
 margin: 5px 0;
 font-weight: 600 !important;
 letter-spacing: 0.1em;
 color: #000;
}

.form-container {
 font-family: 'Roboto Condensed', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
 background-color: #F2F2F2;
 border-radius: 8px;
 padding: 20px;
 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 max-width: 800px;
 /* Maximum width for larger screens */
 width: 90%;
 /* Responsive width for smaller screens */
 margin: 20px auto;
 /* Center the container with auto margins */
 box-sizing: border-box;
 /* Include padding in width calculations */
 font-weight:700;
}

.hidden {
 display: none;
}

label {
 display: block;
 margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select {
 width: 100%;
 padding: 8px 0px 0px 0px;
 margin-bottom: 15px;
 border: 1px solid #ccc;
 border-radius: 4px;
 font-family: 'Roboto Condensed', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

input[type="submit"] {
 background-color: #D82231;
 color: white;
 padding: 10px;
 border: none;
 border-radius: 4px;
 cursor: pointer;
 font-family: 'Roboto Condensed', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 width: 100%;
 /* Make the button full-width */
 box-sizing: border-box;
 /* Include padding in the width */
}

input[type="submit"]:hover {
 background-color: #D82231;
}

.hidden {
 display: none;
 width: 100%;
}