.chat-window-container {
  display: flex;
  justify-content: center; /* Center horizontally */
  /* align-items: center; Center vertically (optional) */ 
  height: 100vh; /* Full viewport height (optional) */
  
  background: #FBFBFB;
  background: initial !important;
}

#chat-window {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  margin-bottom: 10vh;
  /* height: 50vh; */

  background: #fff;
  border-radius: 10px;
  padding: 40px;	
  height: initial;
  margin-top: 3vh;
}

#chat-messages {
  white-space: pre-wrap;
  display: flex;
  flex-direction: column;
} 

#input-area {
  /* margin-top: 5px; */
  justify-content: center;
  align-self: center;

  margin-top: 20px;
}

#user-input {
  background: #f4f4f4;
  border: none;
  border-radius: 50px;
  padding: 14px 24px;
  font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif;
  /* color: #0D0D0D; */
  font-size: 16px;
}

#send-button {
  cursor: pointer;
  background: #FF856D;
  color: #fff;
  border: none;
  padding: 14px 24px;
  border-radius: 50px;
  margin-left: 5px;
  font-size: 14px;
}

.bot-message::before {
  content: '';
    display: block;
    position: absolute;
    border: solid 2px #e1e1e1;
    border-radius: 50%;
    top: 0;
    width: 32px;
    height: 32px;
    padding: .25rem;
    background-image: url(https://placehold.co/400.png);
    background-size: cover;
    background-position: center;
}

.bot-message,
.user-message {
  position: relative;
  font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif;
  color: #0D0D0D;
  font-size: 16px;
}

.user-message {
  align-self: flex-end;
  /* background-color: lightgray;
  padding-left: 2px;
  padding-right: 2px;
  padding-bottom: 0px;
  margin-bottom: 3px !important; */
  border-width: 1px;
  border-radius:5px;

  background-color: #FFF3F0;
  padding-bottom: .625rem;
  padding-top: .625rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  margin: 10px 0 !important;
}

.bot-message {
  align-self: flex-start;
  /* background-color: lightblue;
  padding-left: 2px;
  padding-right: 2px;
  padding-bottom: 0px; */
  margin-top: 3px !important;
  margin-bottom: 3px !important;
  border-width: 1px;
  border-radius: 5px;

  background-color: #f4f4f4;
  padding-bottom: .625rem !important;
  padding-top: .625rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.clickable-value {
  cursor: pointer;
}

#pdf-link {
  font-size: large;
  font-weight: bolder;
}

#wait-please {
  font-size: large;
  font-weight: bolder;
  /* color: lightblue; */
  margin-top: 5px;
  align-self: center;

  color: #97C1A9;
}

.yes-no-button {
  background: #fff;
  cursor: pointer;
  padding: 8px 20px;
}

#add-to-cart-button {
  height: 25px;
  align-self: center;
}

form.select-variation-form {
  display: flex;
  flex-direction: row; /* Aligns children in a row */
  /* align-items: center; Vertically aligns children */
} 

.variation-select {
  margin-right: 5px;
  height: 25px;
}

@supports (-moz-appearance:none) {
  /* Reset styles for Firefox */
  input[type="date"] {
      all: initial;
      border: none;
      outline: none;
  }
}

#departure-date {
  margin-right: 5px;
  height: 25px;
  align-self: center;
}

/* mobile phones */
@media (min-width:320px) { 
  #chat-window {
		width: 84vw;
  }

  .bot-message::before {
    left: -9vw;
  }

  .bot-message {
    margin-left: 0vw;
  }

  #user-input {
    margin-bottom: 10px;
  }
}

/* big tablets, laptops and desktops */
@media (min-width:1025px) { 
  #chat-window {
		width: 54vw;
  }

  .bot-message::before {
    left: -4.5vw;
  }

  .bot-message {
    margin-left: 3vw;
  }
}