body {
    background-color: rgb(255, 255, 255);
    margin: 20px;
    color: black;
    font-family: 'Poppins';
    font-weight: 400;
    font-size: 16px;
    /* text-align: center; */
    -webkit-text-size-adjust: 100%; /* Prevents font size from changing between portrait & landscape on phone */
  }

.footer {
  text-align: center;
}

.lead {
    color: black;
    font-family: 'Poppins';
    font-weight: 400;
    font-size: 16px;
  }

.highlight {
  color: black;
  font-family: 'Poppins';
  font-weight: 600;
  font-size: 16px;
  /* margin-left: 20px; */
}

.required:after {
  content:" *";
  color: red;
}

h1 {
  color: black;
  font-family: 'Poppins';
  font-weight: 700;
  font-size: 24px;
  text-align: center;
  /* margin-left: 20px; */
}

h2 {
  color: black;
  font-family: 'Poppins';
  font-weight: 700;
  font-size: 18px;
  /* margin-left: 20px; */
}

h3 {
  color: black;
  font-family: 'Poppins';
  font-weight: 500;
  font-size: 16px;
  /* margin-left: 20px; */
}

input[type=text], input[type=email], input[type=date], select, textarea {
  /* width: 100%; */
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: 'Poppins';
  font-size: 16px;
  resize: vertical;
  min-width: 90%;
  min-height: 25px;
  background-color: transparent;
  color: black;
}

input:active, input:focus, select:active, select:focus, textarea:active, textarea:focus {
  border: 1px solid green;
  outline: none;
}

input[type="file"] {
  display: none; /* Hide the file input */
}

select {
  color: black;
}

option[disabled] {
  color: grey;
}

textarea {
  background-color: rgb(255, 255, 255);
  color: black;
  font-family: 'Poppins';
  font-weight: 400;
  font-size: 16px;
  width: 100%;
}

.field-label {
  color: black;
  font-family: 'Poppins';
  font-weight: 500;
  font-size: 16px;
}

.full-width-form-field {
  width: 100%;
}

.btn {
  color: white;
  background-color:green;
  font-family: 'Poppins';
  font-weight: 400;
  font-size: 16px;
  display: inline-block;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  padding: .6rem 1rem;
  border-radius: .25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}

.btn-reject {
  color: green;
  background-color:white;
  font-family: 'Poppins';
  font-weight: 400;
  font-size: 16px;
  display: inline-block;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid green;
  padding: .6rem 1rem;
  border-radius: .25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-small {
  font-size: 12px;
}

.text-very-small {
  font-size: 10px;
}

.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}

/* Create two equal columns that floats next to each other */
.column1 {
  float: left;
  width: 100%;
  padding: 0px 0px 0px 0px;
}

/* Create two equal columns that floats next to each other */
.column2 {
  float: left;
  width: 50%;
  padding: 0px 0px 0px 0px;
}

/* Create three equal columns that floats next to each other */
.column3 {
  float: left;
  width: 33.33%;
  padding: 0px 0px 0px 0px;
}

/* Create two equal columns that floats next to each other */
.column4 {
  float: left;
  width: 25%;
  padding: 0px 0px 0px 0px;
}

/* Create 5 equal columns that floats next to each other */
.column5 {
  float: left;
  width: 20%;
  padding: 0px 0px 0px 0px;
}

/* Create 6 equal columns that floats next to each other */
.column6 {
  float: left;
  width: 16%;
  padding: 0px 0px 0px 0px;
}

/* Create 7 equal columns that floats next to each other */
.column7 {
  float: left;
  width: 13%;
  padding: 0px 0px 0px 0px;
}

/* Create 8 equal columns that floats next to each other */
.column8 {
  float: left;
  width: 12%;
  padding: 0px 0px 0px 0px;
}

/* Create 10 equal columns that floats next to each other */
.column10 {
  float: left;
  width: 10%;
  padding: 0px 0px 0px 0px;
}

/* Create 11 equal columns that floats next to each other */
.column11 {
  float: left;
  width: 9%;
  padding: 0px 0px 0px 0px;
}

/* Create 12 equal columns that floats next to each other */
.column12 {
  float: left;
  width: 8%;
  padding: 0px 0px 0px 0px;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .column {
    width: 100%;
  }
}

.work-order-grid {
  display: flex;
  flex-direction: column;
}

.work-order-row {
  display: flex;
}

.work-order-column {
  flex: 1; /* Each column takes equal space */
  padding: 10px;
  border: 1px solid #ccc;  /* Optional border for visibility */
  overflow-wrap: break-word; /* Allow long words to break and wrap onto the next line */
  word-wrap: break-word; /* For older browsers */
  overflow: hidden; /* Hide overflow content */
  white-space: normal; /* Allow text to wrap */
  position: relative; /* Position relative for color bar */
}

.work-order-column:first-child p {
  padding-left: 10px; /* Add padding to the left to make space for the color bar */
}

.work-order-header {
  font-weight: bold; /* Make header text bold */
  background-color: #f2f2f2; /* Light gray background for header */
}

.past-due {
  background-color: #D90B00 !important; /* Change the background color to red */
  width: 20px; /* Width of the color bar */
  height: 100%; /* Full height of the item */
  /*color: white; */ /* Change text color for better contrast */
}

.unassigned {
  background-color: #CAC300; /* Change the background color to red */
  /*color: white; */ /* Change text color for better contrast */
}

.in-progress {
  background-color: #558E28; /* Change the background color to red */
  /*color: white; */ /* Change text color for better contrast */
}

.color-bar {
  width: 10px; /* Width of the color bar */
  height: 100%; /* Full height of the item */
  position: absolute; /* Position it absolutely */
  left: 0; /* Align to the left */
  top: 0; /* Align to the top */
}

a {
  color: black;
  text-decoration: none;
}

.form-container {
  max-width: 600px; /* Set a max width for the form */
  margin: 0 auto; /* Center the form */
  padding: 20px;
  border: 1px solid #ccc; /* Optional border */
  border-radius: 5px; /* Optional rounded corners */
  /* background-color: #eee9e9; Optional background color */
}

.form-row {
  display: flex; /* Use flexbox for alignment */
  margin-bottom: 15px; /* Space between rows */
}

.form-column {
  flex: 1; /* Each column takes equal space */
  padding: 0 10px; /* Space between columns */
}

.full-width {
  flex: 100%; /* Make this column full width */
}