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

html, body {
   
    height: 100%; /* Update to 100% */
    padding: 0;
    margin: 0; 
    font-family: Arial, sans-serif;
}

body {
    background-color: grey; /* Set your desired background color */

   
    

}

.centered-button {
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
    margin-top: 40px;
}



.logintext {
    color: red;
    font-size: 20px;
   /* margin-right: 5px;
    padding-left:5px;
    */
}

.column4A{
      display: flex; /* Use flexbox */
    align-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    flex-direction: column; /* Stack content vertically */

    
    flex: 1 1 50%; /* Each column takes up 50% of the width */
    padding: 0 10px; /* Adjust padding as needed */
    box-sizing: border-box; /* Ensure padding doesn't affect width */



     border: 3px solid grey;
 /* background-image: url(../img/BlackDiamond1.png); */
    background-color: #FFFFFF;

}

.column4 {

     display: flex; /* Use flexbox */
    align-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    flex-direction: column; /* Stack content vertically */

    flex: 1 1 100%; /* This column takes up 100% of the width */
    padding: 0 10px; /* Adjust padding as needed */
    box-sizing: border-box; /* Ensure padding doesn't affect width */

    border: 3px solid grey;
    background-color: #FFFFFF;
}

.column4B {

     display: flex; /* Use flexbox */
    align-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    flex-direction: column; /* Stack content vertically */

    flex: 1 1 100%; /* This column takes up 100% of the width */
    padding: 0 10px; /* Adjust padding as needed */
    box-sizing: border-box; /* Ensure padding doesn't affect width */

    border: 3px solid grey;
    background-color: #FFFFFF;
}

.column4C {
  max-width: 700px;
  margin: 0 auto;
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
  background-color: white;
}






.column2A {
    flex: 0 0 45%; /* Let the 2 columns grow and shrink equally */
     

     margin: 5px;
    box-sizing: border-box; /* Include border and padding in the total width */


     border: 3px solid #ff0000;
 /* background-image: url(../img/BlackDiamond1.png); */
    background-color: #FFFFFF;
     
}



.column2 {
    flex: 0 0 80%; /* Let the 2 columns grow and shrink equally */
     

     margin: 5px;
    box-sizing: border-box; /* Include border and padding in the total width */


     border: 3px solid #ff0000;
 /* background-image: url(../img/BlackDiamond1.png); */
    background-color: #FFFFFF;
     
}
.column2a {
    flex: 0 0 15%; /* Let the 2 columns grow and shrink equally */
    

     margin: 5px;
    box-sizing: border-box; /* Include border and padding in the total width */


     border: 3px solid #ff0000;
 /* background-image: url(../img/BlackDiamond1.png); */
    background-color: #FFFFFF;
     
}
/*///////////////////three columns 1 wide 2 small same size////////////////////////////////////////////*/

.column3d {
    flex: 0 0 65%; /* Let the 2 columns grow and shrink equally */
     

     margin: 5px;
    box-sizing: border-box; /* Include border and padding in the total width */


     border: 3px solid #ff0000;
 /* background-image: url(../img/BlackDiamond1.png); */
    background-color: #FFFFFF;
     
}
.column3e {
    flex: 0 0 15%; /* Let the 2 columns grow and shrink equally */
    

     margin: 5px;
    box-sizing: border-box; /* Include border and padding in the total width */


     border: 3px solid #ff0000;
 /* background-image: url(../img/BlackDiamond1.png); */
    background-color: #FFFFFF;
     
}
/*//////////////////three unequal columns///////////////////////////////////////////*/

.column3a {
    flex: 0 0 25%; /* Let the 2 columns grow and shrink equally */
     

     margin: 5px;
    box-sizing: border-box; /* Include border and padding in the total width */


     border: 3px solid #ff0000;
 /* background-image: url(../img/BlackDiamond1.png); */
    background-color: #FFFFFF;
     
}
.column3b {
    flex: 0 0 55%; /* Let the 2 columns grow and shrink equally */
    

     margin: 5px;
    box-sizing: border-box; /* Include border and padding in the total width */


     border: 3px solid #ff0000;
 /* background-image: url(../img/BlackDiamond1.png); */
    background-color: #FFFFFF;
     
}

.column3c {
    flex: 0 0 15%; /* Let the 2 columns grow and shrink equally */
    

     margin: 5px;
    box-sizing: border-box; /* Include border and padding in the total width */


     border: 3px solid #ff0000;
 /* background-image: url(../img/BlackDiamond1.png); */
    background-color: #FFFFFF;
     
}


/*/////////////////////three equal columns//////////////////////////////////////////*/

.column3A {
     display: flex; /* Use flexbox */
    align-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    flex-direction: column; /* Stack content vertically */


    flex: 1; /* Let the  3 columns grow and shrink equally used in tabed onboard file*/
      width: 30%;
     margin: 10px;
     border: 3px solid grey;
      background-color: #FFFFFF;  
}


.column3 {
    flex: 1; /* Let the  3 columns grow and shrink equally */
      width: 30%;
     margin: 10px;
     border: 3px solid #ff0000;
      background-color: #FFFFFF;  
}
.column {
   
      width: 90%;
     margin: 10px auto;
     border: 3px solid #ff0000;
    background-color: #FFFFFF;  
    
}
.column-a {
   
      width: 90%;
     margin: 10px auto;
     border: 3px solid #ff0000;
    background-color: #FFFFFF;  
     display: flex; /* Use Flexbox */
      justify-content: center; /* Distribute space evenly between the columns */
       flex-wrap: wrap; /* Allow items to wrap to the next line */
}
.column-list {    /* 3 column list */
  width: 280px;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* This keeps the department label centered */
  background-color: #f9f9f9; /* Optional: just for visual structure */
  padding: 10px;
  border-radius: 6px;
    border: 1px dashed green;
}

.column-list .form-check {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}



.form-check-label {    /* 3 column list */
  display: inline-block;
  text-align: left;
  font-weight: normal;
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}




.dept-label {      /* 3 column list */
  text-align: center;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.column-list-2col {
  width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 6px;
    border: 1px dashed green;
}

.column-list-2col .dept-label {
  text-align: center;
  font-weight: bold;
  margin-bottom: 0.5rem;
  width: 100%;
}

.column-list-2col .form-check {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.column-list-2col .form-check-label {
  font-weight: normal;
  margin-left: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.column-a-2col {
  width: 90%;
  margin: 10px auto;
  border: 3px solid #ff0000;
  background-color: #FFFFFF;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}



/*////////////////////////////end///////////////////////////////////*/
.container-columns-stacked {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 2000px;
            margin: 10px auto;
}


.container-columns {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            max-width: 2000px;
            margin: 1px auto;
}

.columns-container {
  display: flex;
  flex-wrap: wrap;
}

.column-container {
  display: flex;
  flex-wrap: wrap;
}

.column1 {
  width: calc(50% - 10px); /* Adjust the width as needed */
    margin-right: 20px; /* Adjust the spacing between columns */
    margin-bottom: 20px; /* Adjust the spacing between rows */
}

.column1B {
    width: 100%; /* Full width for column 3 */
}


.column-stacked {
  flex-basis: 100%; /* Forces the column to take full width */
  margin-top: 20px; /* Adjust as needed */
}

@media print {
  body {
    margin: 0;
    padding: 0;
  }

  @page {
    margin: 0; /* Remove printer margins */
    size: auto;
  }

  .roster-table {
    width: 100% !important;
    margin: 0 !important;
    table-layout: fixed;
    border-collapse: collapse;
  }

  .roster-table th,
  .roster-table td {
    padding: 6px;
    font-size: 12px;
    word-break: break-word;
  }

.roster-table td:nth-child(1),
.roster-table th:nth-child(1) {
  min-width: 40px !important; /* hire date */
  max-width: 100px;
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
}

.roster-table td:nth-child(2),
.roster-table th:nth-child(2) {
  min-width: 40px !important; /* title */
  max-width: 125px;
  width:125px;
  overflow: hidden;
  white-space: nowrap;
}

.roster-table td:nth-child(3),
.roster-table th:nth-child(3) {
  min-width: 40px !important; /* badge */
  max-width: 50px;
  width: 50px;
  overflow: hidden;
  white-space: nowrap;
}




 .roster-table td:nth-child(4),
.roster-table th:nth-child(4) {
  min-width: 40px !important; /* name */
  max-width: 125px;
  width: 125px;
  overflow: hidden;
  white-space: nowrap;
}
 .roster-table td:nth-child(5),
.roster-table th:nth-child(5) {
  min-width: 40px !important; /* phone */
  max-width: 100px;
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
}


  .roster-table td:nth-child(6),
.roster-table th:nth-child(6) {
  min-width: 40px !important; /* email */
  max-width: 200px;
  width: 200px;
  overflow: hidden;
 
}

}








@media (max-width: 1250px) {
    .column,
      .column-a {
        flex-direction: column; /* Change to column layout */
        align-items: center; /* Align items in the center */
    }
    .column2,
    .column2a,
    .column3, 
    .column3a,
    .column3b,
    .column3c
    {
        flex-basis: 100%; /* Set the initial size of the columns to 100% in mobile view */
    margin: 10px 0; /* Adjust margin for mobile view */
    background-image: none;
    }
  .checkbox-container1 {
  display: flex;
  flex-direction: column;
}


    .checkbox-container1 > div {
        flex: 1;
        margin-right: 0;
        margin-bottom: 5px;
    }


}


.column-label {

  font-size: 16px; /* Adjust the font size as needed */
    color: red;
    padding-top: 10px;
    padding-bottom: 10px;

}


.container {
    width: 1000px;
    margin: auto;
    /* border: 3px solid #ff0000; */
    /* background-image: url(../img/BlackDiamond1.png); */
}

.div1 {
    text-align: left !important;
    color: white;
}

.centered-wrapperbk {
    position: relative;
    text-align: center;
    /* background-image: url(../img/BlackDiamond1.png); */
}
.centered-wrapper {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.centered-wrapper:before {
    content: "";
    position: relative;
    display: inline-block;
    width: 800px;
    height: 100%;
    vertical-align: middle;
}


.user-check-form-container {
    text-align: center;
    margin: 20px auto;
    max-width: 800px; /* Adjust the max-width as needed */
}



.user-check-form-centered-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
       max-width: 80%;
       min-width: 1000px; 
     margin: auto; 
    border: 3px solid #ff0000;
  background-image: url(../img/BlackDiamond1.png); 

}

.user-check-form form {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Adds spacing between form elements */
    max-width: 400px; /* Limits form width */
    margin: 0 auto; /* Centers the form */
}

.user-check-form  {
    display: block;
    margin-bottom: 5px; /* Space between label and input */
    color: green;
    font-weight: bold; 
}

.user-check-form-red  {
    display: block;
    margin-bottom: 5px; /* Space between label and input */
    color: red;
    font-weight: bold; 
}

h2.user-check-form {
    display: block;
    margin-bottom: 5px; /* Space between label and input */
    color: white;
    font-weight: bold; 
}


.user-check-form input[type="text"]
 {
    width: 60%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

.user-check-form input[type="submit"] {
     width: 20%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    margin-top: 10px;
    background-color: ghostwhite;
    color: black;
    border: none;
    cursor: pointer;
}

.user-check-form input[type="submit"]:hover {
    background-color: darkred;
}

.user-check-form table {
    width: 100%; /* Take up the full width of the container */
    max-width: 100%; /* Ensures the table doesn't stretch beyond the container */
    border-collapse: collapse; /* Ensures borders are merged */
}

/* Add padding to table cells */
th, td {
    padding: 10px; /* Add space inside cells */
    text-align: left; /* Align text to the left for readability */
}

/* Optional: Add spacing between columns */
th, td {
    border: 1px solid #ddd; /* Light border for readability */
}

.centered-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
       max-width: 80%;
       min-width: 2000px; 
     margin: auto; 
    border: 3px solid #ff0000;
  background-image: url(../img/BlackDiamond1.png); 

}
@media screen and (max-width: 2000px) {
    .centered-content {
        min-width: auto; /* Reset minimum width for smaller screens */
        width: 80%; /* Set a width percentage for smaller screens */
    }
}
@media screen and (max-width: 1200px) {
    .centered-content {
        min-width: auto; /* Reset minimum width for smaller screens */
        width: 80%; /* Set a width percentage for smaller screens */
    }
}

.form-group {
    text-align: center;
    margin-bottom: 10px; /* Adjust as needed */
}

.form-group label {
    display: inline-block;
    width: 150px; /* Adjust as needed */
    text-align: right;
    margin-right: 10px; /* Adjust as needed */
}


.form-container {
    text-align: center;
    margin: 20px auto;
    max-width: 800px; /* Adjust the max-width as needed */
}


.form-container2 {
 display: flex; /* Use flexbox to align columns */
}

.form-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Adjust this value as needed */
}


.form-row label {
    flex: 0 0 150px;
}


/* Universal styles for form rows */
.form-row1 {
    display: flex;
    align-items: center; /* Align items vertically */
    margin-bottom: 10px; /* Adjust this value as needed */
}

.form-row1 label {
    flex: 0 0 auto; /* Allow label to take its natural width */
    width: 150px; /* Set a fixed width for labels */
    text-align: right; /* Align text of labels to the right */
    margin-right: 10px; /* Add spacing between label and input */
}

.form-row1 input {
    flex: 1; /* Allow input to take remaining space */
    padding-left: 5px; /* Add padding to the left of the input box */
    box-sizing: border-box; /* Ensure padding is included in the width calculation */
       margin-left: auto; /* Align input box to the right by pushing it to the end of the flex container */
} 


.form-check-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px; /* Adjust based on your layout */
  display: inline-block;
  vertical-align: middle;
}










.form-row .password-input {
    flex: 2;
    display: flex; /* Align the input and button horizontally */ 
    align-items: center; /* Center items vertically */  

}

.form-row .password-input input {
    flex: 1;
}

.form-row input[type="text"],
.form-row input[type="password"] {

display: flex; 
align-items: center; 
margin-bottom: 10px; 


/*flex: 1;  */
}


.form-row .password-input button {
    margin-left: 5px; /* Adjust this value to add space between the input and button */
    /* Add any other styling you need for the toggle button */  
}


.password-input-container {
    display: flex;
    align-items: center;
}

.password-input-container input[type="password"] {
    flex: 1;
}

..form-row .password-input-container .toggle-password {
    margin-left: 10px; /* Adjust this value as needed  */ 
}





.form-row input,
.form-row select {
    width: 175px;
    padding: 5px; /* Adjust the padding as needed */  

}

.form-row textarea {
    max-width: 400px; /* Set your desired maximum width */  
    height: 30px;
    width: 100%; /* Ensure the textarea takes full width of its container */  
    box-sizing: border-box; /* Include padding and border in the total width and height */  
    overflow-y: hidden; /* Hide vertical scrollbar */   
    
}


p {
    font-size: 40px;
    line-height: 1.6;
    color: #333; /* Text color */
}

.main {
    padding-top: 20px; /* Adjust the value as needed */
}


.body1 {
    background-color: red;
}
.content {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}
.status-message {
    font-size: 40px;
    margin-top: 60px;
    
}


.button1 {
    font-size: 18px;
    padding: 10px 20px;
    background-color: #0000FF;
    color: #FFFFFF;
    border: none;
    cursor: pointer;
}

.p1 {
    font-size: 20px;
    padding: 20px; 
    color: white;
}
.success-message {
    font-size: 40px !important; 
    margin-top: 60px;
    color: white;
}

.checkbox-label {
 display: flex; 
 /*align-items: center;   */


}
.checkbox-container {
    display: block;
text-align: left;
margin-left: 10px;
}
.checkbox-container input[Type="checkbox"] {
    
    margin-left:10px;
    display: inline-block;
}
.checkbox-container label {
    color: #FF0000;  /* color red */
    display: inline-block; /* Add this line */
}


.checkbox-container1 {
    display: block;
text-align: left;
margin-left: 10px;
}
.checkbox-container1 input[Type="checkbox"] {
    
    margin-left:10px;
    display: inline-block;
}
.checkbox-container1 label {
    
    display: inline-block; /* Add this line */
}
.flex-container {
    display: flex;
    justify-content: space-between; /* Adjust as needed for spacing */
}

.firefighter-wrapper {
  display: flex;
  justify-content: center; /* <-- centers the two columns */
  gap: 3rem;               /* optional space between columns */
  flex-wrap: wrap;         /* allows wrapping on small screens */
}


.firefighter-column {
  width: 200px;          /* Fixed width (adjust if needed) */
  margin-right: 40px;    /* Space between columns */
  white-space: nowrap;   /* Prevent wrapping */
  overflow: hidden;      /* Hide overflow just in case */
  text-overflow: ellipsis; /* Optional: adds "..." if name is too long */
}

.firefighter-column label {
  display: block;
  margin-bottom: 6px;
}




.edit-form-text {
 margin-right: 5px; 
 margin-bottom: 10px;
}

/* Keep inputs narrow */
.right-aligned-input input[type="text"],
.right-aligned-input input[type="date"],
.right-aligned-input select {
    width: 250px !important;
    max-width: 100%;
    display: inline-block;
}

/* Let textareas span the full width */
.center-aligned-input textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}


.right-aligned-input {
    margin-right: 10px;
    text-align: right;
    margin-bottom: 10px;
}

.center-aligned-input {
   
    text-align: center;
    margin-bottom: 10px;
}

.center-aligned-input textarea {
   
   width: 100%;
}

.box {
  margin-right: 10px;
    text-align: right;
    margin-bottom: 10px;
    width: 60px;
 

}
.div-menu {
display: inline-block; 
vertical-align: top;
 border: 1px solid #ff0000;
 
 margin-left: 20px; /* Adjust the value as needed */
 padding: 10px; 
}
.div-menu a {
    padding: 5px; /* Padding for the links inside the div */
}

.div-cntr {
    display: block;
text-align: center;

}

/* Style for disabled checkboxes */
.checkbox-format input[type="checkbox"]:disabled + .checkmark {
  background-color: black; /* Change the background color for disabled checkboxes */
}

/* Ensure the white checkmark remains visible on disabled checkboxes */
.checkbox-format input[type="checkbox"]:disabled + .checkmark:after {
  border-color: white; /* Change the color of the checkmark */
}
.hidden {
display: none;
}


.tabcontent {
  display: none;
}

/* Show active tab content */
.tabcontent.active {
  display: block;
}

/* Style the tab buttons */
.tablink {
  background-color: #f2f2f2; /* Default background color */
  color: black; /* Default text color */
  padding: 10px 15px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* Style the active tab button */
.tablink.active {
  background-color: #ccc;
  color: white;
}

.cert-user-container {
    display: grid;
    grid-template-columns: auto auto; /* Adjust column width as needed */
    grid-gap: 10px; /* Adjust gap between columns as needed */
}

.cert-user-container > div {
    display: flex;
    flex-direction: column;
}

.cert-user-container td {
    text-align: center;
    padding: 5px; /* Adjust padding as needed */
}

.cert-user-container label {
    font-weight: bold;
    color: red; /* Set font color to red */
    font-size: 18px;
}

.cert-label {
    /* Add styles for the certification label */
    color: red; /* Example: set text color to red */
    font-weight: bold; /* Example: set font weight to bold */
    /* Add other styles as needed */
}
input.no-error-style.input-error {
    border: 1px solid #ccc; /* or whatever your normal style is */
}




.date-label {
    /* Add styles for the issue date label */
    color: red; /* Example: set text color to blue */
    font-weight: bold; /* Example: set font style to italic */
    /* Add other styles as needed */
}

.center-checkbox {
    margin: 0 auto; /* Center the checkbox horizontally */
    display: block; /* Ensure the checkbox is displayed as a block element */
}


.active-heading-cell {
   padding-left: 40px; /* Adjust as needed */
}

th {
    text-align: center; /* Center align all headings */
}

td input[type="checkbox"] {
    display: block;
    margin: 0 auto; /* Center align checkboxes */
}


/* Add this CSS to center the column headers */
#certTable th {
    text-align: center;
}

/* Add this CSS to center the button */
#addCertBtn {
    margin-left: auto;
    margin-right: auto;
    display: block;
}


.required-field {
    background-color: yellow !important; /* Yellow background for required fields */
}

.highlight-checkbox {
    background-color: yellow !important;  /* Background color */
  
}

#firefighterTitles select.input-error,
#firefighterTitles input.input-error {
    border: 2px solid red !important;
}

#requiredInput select.input-error,
#requiredInput input.input-error {
    border: 2px solid red !important;
}

#passwordFields {
    transition: all 0.3s ease;
}

select.input-error, 
input.input-error {
    border: 2px solid red !important; /* Forces red border */
}


/* Red border for invalid fields */
.input-error {
    border: 2px solid red !important;
}

/* Yellow background for highlighted fields */
.input-highlight {
    background-color: yellow; /* Change this to any color */
}

/* Red border for new rows (for dynamic rows added to the table) */
.new-row select,
.new-row input[type="date"] {
    border: 2px solid red;
}

/* New method — allows selective control with class */
.new-row .highlight-border {
    border: 2px solid red;
}

/* Styling for the select dropdowns */
select {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    width: 100%;
}

/* Styling for input date fields */
input[type="date"] {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    width: 100%;
}

/* Center the Show On Runs checkbox */
td input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
}

/* Style for the Remove button */
button {
    padding: 5px 10px;
    background-color: #e74c3c;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #c0392b;
}

/* Styling for table rows */
#deptMemberTable tr {
    background-color: #f9f9f9;
    padding: 10px;
}

#deptMemberTable td {
    padding: 8px;
}

/* Styling for invalid input fields (if you don't use .input-error) */
select:invalid, input:invalid {
    border: 2px solid red;
}

/* Additional styling for focus on invalid fields */
select:invalid:focus, input:invalid:focus {
    border: 2px solid red;
}
select:disabled,
input[type="checkbox"]:disabled {
    background-color: transparent;
    color: #000;
    opacity: 1;
    pointer-events: none;
    border: 1px solid #ccc;
    cursor: default;
}

textarea {
    overflow: hidden;
    transition: height 0.2s ease;
    resize: none; /* Optional: disables manual resizing */
}
/* Full-width section under the two columns */
.responding-section {
    margin-top: 1.5rem;
}

/* Header label centered */
.responding-header {
    text-align: center;
    margin-bottom: 0.5rem;
}

/* Flex container for multiple department columns */
.multi-column-section {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

/* Each department column */
/*
.column-list {

    min-width: 200px;
} */

/* Department label (PVFD / WLFD / WFD) */
/*
.dept-label {
    font-weight: bold;
    display: block;
    margin-bottom: 0.25rem;
}
*/