:root {
  --homepage-color: #A00;
}

th, td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

/* background-color: var(--homepage-color) !important; */
  

.tabulator .tabulator-header .tabulator-col {
  color: white;
  background-color: var(--homepage-color);
}

.tabulator .tabulator-header .tabulator-col:hover {
  color: white;
  background-color: var(--homepage-color) !important;
}

tr:nth-of-type(even) {background-color: #f2f2f2;}

tr:hover {background-color: lightblue;}
/* tr:hover {background-color: lightgreen;} */

textarea {
  width: 31%;          /* Full width of container */
  height: 120px;        /* Fixed height */
  padding: 8px;         /* Same padding as input */
  box-sizing: border-box;
  font-size: 14px;      /* Same font size as input */
  border: 1px solid #ccc;
  border-radius: 4px;   /* Rounded corners like input */
  resize: vertical;     /* Allow vertical resize only */
}

textarea.travelplanarea {
  width: 80%;          /* Full width of container */
  height: 300px;        /* Fixed height */
  padding: 8px;         /* Same padding as input */
  box-sizing: border-box;
  font-size: 14px;      /* Same font size as input */
  border: 1px solid #ccc;
  border-radius: 4px;   /* Rounded corners like input */
  resize: vertical;     /* Allow vertical resize only */
}

  #travelPlanForm {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center;    /* Center horizontally */
  }

  #travelPlanForm textarea {
    align-items: right;
    width: 80%;          /* Full width of container */
    height: 500px;        /* Fixed height */
    padding: 8px;         /* Same padding as input */
    box-sizing: border-box;
    font-size: 14px;      /* Same font size as input */
    border: 1px solid #ccc;
    border-radius: 4px;   /* Rounded corners like input */
    resize: vertical;     /* Allow vertical resize only */
    margin: 5px 0; /* Space between elements */
  }

  #travelPlanForm button {
    margin: 5px 0; /* Space between elements */
  }

input {
    width: 30%;
    font-size: 14px;
    padding: 8px;
}

select {
    background-color: white;
    width: 31%;
    font-size: 14px;
    padding: 8px;
}

body {
    font-family: 'Inter', sans-serif; /* Using Inter font as per instructions */
    margin: 20px;
    background-color: #f4f7f6;
    color: #333;
}
h1 {
    color: #2c3e50;
    text-align: center;
    margin-bottom: 30px;
}

a {
  text-decoration: none;
  color: var(--homepage-color);
  font-weight: 500;
  font-family: 'Segoe UI', sans-serif;
  padding: 8px 12px;
  transition: all 0.2s ease-in-out;
  border-radius: 6px;
}

/* Hover state */
a:hover {
  /* background-color: #e2737346;  */
  color: var(--homepage-color);
  text-decoration: none;
}

#my-title h1 {
  color: var(--homepage-color);
}

#info-text {
    text-align: center;
}

#info-message {
  color: green;
  text-align: center;
}

#error-message {
  color: red;
  text-align: center;
}

#map_element {
    height: 600px;
    width: 100%;
  }

.description-cell {
  white-space: pre-wrap !important; /* Allow wrapping */
  word-wrap: break-word;          /* Break long words if needed */
}