/* Style for the support button */
.support-button {
    position: fixed;
    z-index:102;
    bottom: 20px;
    left: 5px;
    color: white;
    cursor: pointer;
    
  }
  .support-button img{
    width: 60px;
    height: 60px;
  }

  /* Style for the chat box */
  .chat-box {
    display: none;
    position: fixed;
    z-index:102;
    bottom: 80px;
    left: 5px;
    width: 300px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    font-size: small;

  }

  /* Style for the message display section */
  .chat-messages {
    max-height: 350px;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    
    
  }

  /* Style for each individual message */
  .message {
    margin: 5px;
    padding: 2px;
    border-radius: 8px;
    max-width: 80%;
  }

  /* Style for user messages (aligned to the right) */
  .user-message {
    align-self: flex-end;
    background-color: #007bff;
    color: white;
    font-size: small;
  }

  /* Style for chatbot replies (aligned to the left) */
  .chatbot-reply {
    align-self: flex-start;
    background-color: #f2f2f2;
    color: black;
  }

  /* Style for the input box section */
  .chat-input-section {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-top: 1px solid #ccc;
  }

  /* Style for the input box */
  .chat-input {
    flex: 1;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

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

  /* Style for the default message card */
  .default-message-card {
    flex-direction: column;
    align-items: center;
    padding: 10px;
    text-align: center;
    background-color: #f2f2f2;
    border-radius: 5px;
  }

  /* Style for the default message image */
  .default-message-image {
    /* max-width: 100px; */
    width: 255px;
    border-radius: 5px;
    /* height: 100px; */
  }

  /* Style for the default message text */
  .default-message-text {
    margin-top: 10px;
    font-weight: bold;
  }

  /* Style for the default message button */
  .default-message-button {
    margin-top: 5px;
    border: none;
    background-color: #f9c016;
    border-radius:5px;
    color: #080808;
    font-weight: bold;
    
  }
  .default-message-button:hover{
   background-color: #ffcf3e;
  }