body {
  font-family: 'DM Sans', sans-serif;
  margin: 20px;
  display: flex;
  flex-direction: column; /* Adjust layout for mobile */
  color: #223548;
}

@media (min-width: 768px) {
  body {
    flex-direction: row; /* Adjust layout for larger screens */
  }
}

h2{
    margin-left: 20px;
}

.configurations{
  border: 1px solid #f5f6f7;
  padding: 20px;
  margin-bottom: 10px;
  border-radius: 5px;
  position: relative;
}

input{
  background-color: #f5f6f7;
}

input, button, .day-no, .trip-dates, .day-of-week, .transportation-type-select, .transportation-input, .currency-select{
  font-family: 'DM Sans', sans-serif;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 5px;
}

.transportation-type-select{
  background-color: #f5f6f7;
}

.transportation-input{
  margin-left: 10px;
}

.trip-dates{
    background-color: #0070F2;
    color: white;
    margin-left: 10px;
}

.day-no{
  background-color: #0070F2;
  color: white;
}

.day-of-week{
    background-color: rgb(41, 41, 41);
    color: white;
}

.planner-container {
  flex: 1;
  margin-bottom: 20px; /* Adjust margin for mobile */
}

@media (min-width: 768px) {
  .planner-container {
    margin-right: 20px; /* Adjust margin for larger screens */
    margin-bottom: 0;
  }
}

.day-container {
  border: 1px solid #f5f6f7;
  padding: 20px;
  margin-bottom: 10px;
  border-radius: 5px;
  position: relative;
}

.day-container.active {
    box-shadow: 
    -10px -10px 15px rgba(255,255,255,0.05),
    10px 10px 15px rgba(70,70,70,0.12);
}

.day-number {
  width: 50px;
}

.day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.day-header span,
.day-header input.date-input {
  font-weight: 900;
}

.trash-icon {
  font-size: 15px;
}

.trash-icon:hover::after,
.delete-location:hover::after,
.plus-button:hover::after,
.move-button:hover::after {
  content: attr(data-hover);
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  color: #fff;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
}

@media (max-width: 768px) {
  .trash-icon:hover::after,
  .delete-location:hover::after,
  .plus-button:hover::after,
  .move-button:hover::after {
    font-size: 10px;
    top: -20px;
  }
}

.location-row {
  display: flex;
  align-items: center;
  margin-top: 5px;
  position: relative;
}

.location-row input {
  margin-right: 10px;
}

.delete-location {
  cursor: pointer;
  color: red;
  font-size: 18px;
  margin-left: 10px;
}

.add-location {
  margin-top: 10px;
}

.add-day {
  margin-top: 20px;
  background-color: #0070F2;
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 5px;
}

.canvas-container {
  flex: 1;
  border: 1px solid #f5f6f7;
  padding: 10px;
  border-radius: 5px;
  overflow-y: auto;
  height: auto; /* Adjust height to auto */
  background-color: #f7f7f7; /* Set background color to gray */
}

.timeline ul {
  list-style: none;
  padding: 0;
  position: relative;
}

.timeline ul ul::before {
  content: '';
  position: absolute;
  top: calc(1.2vh / 2); /* Start from half the height of the first child */
  bottom: calc(1.2vh); /* End at half the height of the last child */
  left: 5px; /* Adjust based on bullet position */
  width: 2px;
  background: currentColor; /* Inherit color from the bullets */
  z-index: 0;
}

.timeline ul ul ul::before {
  content: none; /* Remove the vertical line for nested list in the nested list of the nested list */
}

.timeline ul > li {
  margin-bottom: 0; /* Remove spacing between list items */
  position: relative;
}

.timeline ul > li.day-separator {
  background: none; /* No background for day separator */
  padding: 0;
  margin-bottom: 10px;
}

.timeline ul > li.day-separator > span {
  font-weight: bold;
}

.timeline ul > li.day-content {
  background-color: white; /* Set background color to white for each day's list */
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.timeline ul > li.day-content > ul {
  margin-left: 10px;
}

.timeline ul > li.day-content > ul > li::before,
.timeline ul > li.day-content > ul > li > ul > li::before {
  font-family: 'FontAwesome';
  content: '\f111';
  position: absolute;
  top: 4.5px;
  color: #0070F2;
  background: none;
  font-size: 10px;
  z-index: 1;
}

.timeline ul > li.day-content > ul > li > span {
  display: flex;
  align-items: center;
  margin-left: 30px;
  font-weight: bold;
}

.timeline ul > li.day-content > ul > li > ul {
  margin-left: 30px;
  position: relative;
}

.timeline ul > li.day-content > ul > li > ul > li {
  position: relative;
}

.timeline ul > li.day-content > ul > li > ul > li::before {
  font-family: 'FontAwesome';
  content: attr(data-timestamp) ' '; /* Replace missing timestamp with whitespace */
  display: inline-block;
  width: 7vh; /* Adjust width to align bullets */
  text-align: left;
  margin-left: 50vh;
}

.timeline ul > li.day-content > ul > li > ul > li > ul > li {
  position: relative; /* Use relative positioning for alignment */
  left: 0; /* Align to the left */
  margin-left: 0; /* Remove margin */
}

.timeline ul > li.day-content > ul > li > ul > li > ul > li::before {
  content: attr(data-timestamp) ' '; /* Align timestamps and replace missing ones with whitespace */
  display: inline-block;
  width: 7vh; /* Adjust width to align timestamps */
  text-align: left;
  margin-left: 50vh;
}

.timeline ul > li.day-content > ul > li > ul > li > ul > li {
  position: absolute; /* Use absolute positioning for alignment */
  left: 0; /* Align to the left */
  margin-left: 0; /* Remove margin */
}

.timeline ul > li.day-content > ul > li > ul > li > ul > li::before {
  content: attr(data-timestamp); /* Align timestamps */
  display: inline-block;
  width: 7vh; /* Adjust width to align timestamps */
  text-align: left;
  margin-left: 50vh;
}

.timeline ul > li.day-content > ul > li > ul > li.future-destination {
  color: #0070F2;
}

.timeline ul > li.day-content > ul > li > ul > li.current-or-future-destination {
  color: #0070F2;
}

.download-button {
  background-color: #0070F2;
  color: white;
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.download-button i {
  margin-right: 5px;
}

.itinerary-info {
  color: gray;
  opacity: 0.7;
  margin-left: 20px;
  margin-bottom: 10px;
}

.fas{
  cursor: pointer;
  font-size: 12px;
}

.plus-button {
  cursor: pointer;
  font-size: 18px;
  margin-left: 10px;
}

.menu {
  position: absolute;
  right: 0;
  top: 100%;
  background: white;
  border: 1px solid #f5f6f7;
  border-radius: 5px;
  display: none;
  z-index: 1000;
}

.menu button {
  display: block;
  width: 100%;
  padding: 5px 10px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}

.menu button:hover {
  background: #f0f0f0;
}

.past-item {
  color: gray;
}

.past-item::before {
  background: gray;
}

.past-item::after {
  background: gray;
}

.move-button {
  cursor: pointer;
  font-size: 18px;
  margin-left: 10px;
}

.control-buttons {
  display: flex;
  gap: 10px;
}

.control-buttons button {
  background-color: #0070F2;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 5px;
}

.move-day-button {
  cursor: pointer;
  font-size: 18px;
  margin-left: 10px;
}

.day-header .move-day-button {
  margin-left: 0;
}

.download-menu {
  position: absolute;
  right: 0;
  top: 100%;
  background: white;
  border: 1px solid #f5f6f7;
  border-radius: 5px;
  display: none;
  z-index: 1000;
}

.download-menu button {
  display: block;
  width: 100%;
  padding: 5px 10px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}

.download-menu button:hover {
  background: #f0f0f0;
}

.timestamp-input {
  width: 100px;
  margin-right: 10px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
  margin-left: 10px; /* Add margin for better spacing */
}

@media (max-width: 768px) {
  .switch {
    width: 28px;
    height: 16px;
  }
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

@media (max-width: 768px) {
  .slider:before {
    height: 12px;
    width: 12px;
    left: 2px;
    bottom: 2px;
  }
}

input:checked + .slider {
  background-color: #0070F2;
}

input:checked + .slider:before {
  transform: translateX(14px);
}

@media (max-width: 768px) {
  input:checked + .slider:before {
    transform: translateX(12px);
  }
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.currency-select {
  margin-left: 10px;
  padding: 5px;
  border-radius: 5px;
  border: none;
  background-color: #f5f6f7;
}

.budget-input {
  margin-left: 10px;
  padding: 5px 10px;
  border-radius: 5px;
  border: none;
  background-color: #f5f6f7;
  width: 80px;
}

.destination-icon{
  width: 35px;
  margin-left: 20px;
}