     <!--OPAL STYLESHEET-->


    .chat-popup * {
        font-family: Arial, Helvetica, sans-serif;
        box-sizing: border-box;
    }
    
    /* * {
        box-sizing: border-box;
    } */
    
    /* h2 {
        padding: 20px;
        text-align: center;
        font-size: 18pt;
    } */
    
    .open-btn {
      background-color: rgb(0, 180, 255);
      color: white;
      border: none;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      cursor: pointer;
      position: fixed;
      bottom: 40px;
      right: 40px;
      z-index: 11;
      display: none;
    }

    .open-btn:hover {
      transition: all .5s;
      transform: scale(1.5);
    }
    
    .chat-popup {
      display: none;
      position: fixed;
      bottom: 1.3em;
      right: 15px;
      /* border: 1px solid lightgrey; */
      border-radius: 10px;
      z-index: 10;
      box-shadow: -3px -4px 6px rgba(0, 0, 0, 0.3);
      font-size: 1.6rem;
      z-index: 2000;
    }
    
    .form-container {
      min-width: 400px;
      /* padding: 10px; */
      border-radius: 10px;
      background-color: #fffefb;
    }
    .form-container .stop {
      display: none;
      background-color: red;
      color: white;
      right: 80px;
    }

    
    .form-container #message_input {
      width: 100%;
      padding: 15px 70px 15px 15px;
      /* margin: 5px 0 0px 0; */
      border-radius: 10px;
      border: 1px solid lightgrey;
      resize: none;
      min-height: 70px;
    }
    
    .form-container textarea:focus {
      outline: none;
    }
    
    .form-container textarea {
        font-size: 10pt;
    }
    
    .form-container .send, .form-container .stop {
      background-color: white;
      /* color: white; */
      border: none;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      cursor: pointer;
      position: absolute;
      bottom: 22px;
      right: 20px;
    }
    
    .send img, .stop img {
        /* filter: invert(); */
        width: 42px;
        transition: transform .5s;
    }


    .send img:hover, .stop img:hover {
        /* filter: invert(); */
        transform: scale(1.2);
    }
    
    .form-container .btn:hover, .open-btn:hover {
      opacity: 1;
    }
    
    .opal-chat-main{
      background-color: #1e1951;
    }

    .chat-popup h1 {
        font-size: 12pt;
    }

    .chat-top{
      padding: 0 0 1rem 0;
      background-color: rgb(80, 155, 219);
      border-radius: 10px 10px 0px 0px;
    }

    .chat-top-text{
      padding: 1rem 0 0 1rem;
      color: white;
      margin: 0;
    }

    .chat-top-connected{
      padding: 0rem 0rem 0rem 1rem;
      font-size: 1.2rem;
      color: #9aff9a;
      font-weight: bold;
    }
    .chat-top-button{
      filter: invert(99%) sepia(4%) saturate(233%) hue-rotate(74deg) brightness(114%) contrast(100%);
    }
    
    .messages {
        overflow: scroll;
        min-height: 400px;
        max-height: 400px;
        width: 400px;
        /* border: 1px solid lightgrey; */
        border-radius: 10px;
        display: block;
    }
    
    .close-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        padding: 0 0 0 0;
        border: none;
    }
    
.share-btn {
    position: absolute;
    top: 10px;
    right: 30px;
    padding: 0 0 0 0;
    border: none;
}
.call-btn {
    position: absolute;
    top: 10px;
    right: 55px;
    padding: 0 0 0 0;
    border: none;
}
.clipboard-btn {
    position: absolute;
    top: 10px;
    right: 82.5px;
    padding: 0 0 0 0;
    border: none;
}

.clipboard-btn:hover {
    cursor: pointer;
}

.close-btn:hover, .share-btn:hover, .call-btn:hover {
    cursor: pointer;
}
    
    .close-btn:hover {
        cursor: pointer;
    }
    
  .user-message {
    /* background-color: lightgreen; */
    display: flex;
    flex-direction: column;
    align-items: end;
    width: 95%;
    padding: 1rem 0rem 1rem 2rem;
  }
    
    
    .user-message pre {
        margin: 0px;
    }

    .user-message p{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: end;
  font-size: 1.5rem;
  background-color: #f2f1f1;
  padding: 1rem;
  border-radius: 10px;
  position: relative; /* Add this line */
}

.user-message p::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  right: 6px; /* Adjust as needed, controls the horizontal position of the tail */
  top: 5px; /* Adjust as needed, controls the vertical position of the tail */
  border: 15px solid transparent; /* Adjust size of the tail */
  border-left-color: #f2f1f1; /* Color should match the bubble's background */
  border-right: 0;
  margin-top: -5px; /* Adjust to fine-tune the tail's vertical position */
  margin-right: -15px; /*Adjust to fine-tune the tail's horizontal position */
}
    
.agent-message {
  background-color: lightblue;
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 90%;
  margin-left: 1.9rem;
  margin-bottom: 1.1rem;
  font-size: 1.5rem;
  border-radius: 10px;
  padding: 1rem 2rem 1rem 2rem;
  position: relative; /* Add this line */
}

.agent-message::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  left: -10px; /* Adjust as needed, controls the horizontal position of the tail */
  top: 5px; /* Adjust as needed, controls the vertical position of the tail */
  border: 15px solid transparent; /* Adjust size of the tail */
  border-right-color: lightblue; /* Color should match the bubble's background */
  border-left: 0;
  margin-top: -5px; /* Adjust to fine-tune the tail's vertical position */
  margin-left: 0; /* Adjust to fine-tune the tail's horizontal position */
}

.agent-message table{
  margin: 1rem 0 2rem 0;
}
.agent-message table thead tr th{
  border: 1px solid black;
  padding: 0 1rem 0 1rem;
}
.agent-message table tbody tr td{
  border: 1px solid black;
  padding: 0 1rem 0 1rem;
}

#progress.agent-message {
  background-color: lightblue;
  display: flex;
  flex-direction: column;
  align-items: start;
  width: fit-content;
  margin-left: 1.9rem;
  margin-bottom: 1.1rem;
  font-size: 1.5rem;
  border-radius: 10px;
  padding: 1rem 2rem 1rem 2rem;
  position: relative; /* Add this line */
}
    .form-group {
        position: absolute;
        top: 20px;
        right: 20px;
    }
    
    .help {
        text-align: center;
        height: 80%;
        vertical-align: center;
        font-size: 18px;
    }

      #intro-options {
        list-style: none
      }

      /* .intro-item{
        border-bottom: 1px solid black;
      } */
      .intro-item:hover{
        background-color: #e5eaef;
      }

    /* Animation */
    .fadeInAnimation {
        animation: fadeIn ease 3s forwards;
        animation-delay: 5s; /* Delay to start animation */
    }

    @keyframes fadeIn {
        to {
            opacity: 1;
        }
    } 

    .open-btn {
      display: none;
    }

    #opal-chat-intro, #opal-chat-minimized{
      /* height: 30vh; */
      display: flex;
      flex-direction: column;
      justify-content: center;
      /* padding-top: 2em; */
    }

    #intro-options{
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .intro-item{
      /* height: 20%; */
      width: 100%;
      text-align: center;
      /* display: flex;
      flex-direction: column;
      justify-content: center; */
    }
    .intro-option-span{
      height: 1em;
      width: 2em;
      margin-left: 1em;
    }
    .intro-option-img{
      height: 1em;
    }
    .option-hr{
      background-color: black;
      height: 2px;
      border: none;
      margin: 0;
    }

    .input-area{
      background-color: rgb(80, 155, 219);
      padding: 1rem;
    }

    @media only screen and (max-width: 1000px) and (orientation: portrait){
      .chat-popup {
        display: none;
        position: fixed;
        bottom: 0;
        right: 0;
        /* border: 1px solid lightgrey; */
        border-radius: 10px;
        box-shadow: -3px -4px 6px rgba(0, 0, 0, 0.3);
        font-size: 1.6rem;
        z-index: 2000;
      }
      .messages {
        overflow: scroll;
        min-height: 400px;
        max-height: 400px;
        width: 100vw;
        /* border: 1px solid lightgrey; */
        border-radius: 10px;
        display: block
      }
      .form-container .send, .form-container .stop
        {
          background-color: white;
          /* color: white; */
          border: none;
          width: 50px;
          height: 50px;
          border-radius: 0;
          cursor: pointer;
          position: absolute;
          bottom: 22px;
          right: 20px;
          padding: 0;
        }
      }

      #opal-chat-main{
        min-width: 0;
      }
    

  
    /* Media Query that isn't activating */
    /*@media only screen and (min-width: 390px) and (max-width: 800px) and  (orientation: landscape){*/
    /*@media only screen and (max-width: 1000px) and (orientation: landscape){ */
    @media only screen and (max-height: 450px){ 


          .messages {
            overflow: scroll;
            min-height: 180px;
            width: 400px;
            border-radius: 10px;
            display: block;
            z-index: 2000;
            max-height: 180px;
          }
        .chat-popup {
              display: none;
              height: fit-content;
              position: fixed;
              bottom: 1.3em;
              /* border: 1px solid lightgrey; */
              right: 0;
              border-radius: 10px;
              z-index: 2000;
              box-shadow: -3px -4px 6px rgba(0, 0, 0, 0.3);
          }
          .send img, .stop img {
          width: 42px;
          transition: transform .5s;
          /* line-height: ; */
          position: absolute;
          right: 10px;
          top:0;
        }
        .questions{
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
          margin-top: 3rem;
          /* height: 100px; */
        }
  }
    span.cursor::after {
      content: ""; 
      width: 20px;
      border-radius: 50%;
      height: 20px;
      background: rgb(99, 145, 208);
      display: inline-block;
      animation: cursor-blink 1s steps(3) infinite;
    }
    .open-btn img {
          position: absolute;
          bottom: 10px;
          left: 10px;
    }

    .questions{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      margin-top: 3rem;
    }

    .questions .prompt {
      width: 50%;
      background-color: rgb(238, 238, 238);  
      border-radius: 10px;
      padding: 1rem;
      margin: 1rem 0 1rem 0;
      text-align: center;
      color: black;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    }

    #clipboard-text { /* do not make distplay:none as can't copy */
        height:0px;
        opacity: 0;
        position:absolute;
        z-index: -9999;
    }


/* Start Loading Animation */

@keyframes wave {
    0%, 100% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(-5px);
    }
    40% {
        transform: translateY(5px);
    }
    60% {
        transform: translateY(-5px);
    }
    80% {
        transform: translateY(5px);
    }
}


@@keyframes wave {
    0%, 100% {
        transform: translateY(0);
    }
    10% {
        transform: translateY(-10px);
    }
    20% {
        transform: translateY(10px);
    }
    30% {
        transform: translateY(-10px);
    }
    40% {
        transform: translateY(10px);
    }
    50% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(10px);
    }
    70% {
        transform: translateY(-10px);
    }
    80% {
        transform: translateY(10px);
    }
    90% {
        transform: translateY(-10px);
    }
}

#progress b span {
    display: inline-block;
    animation: wave 1.5s infinite;
}

#progress b span:nth-child(1) {
    animation-delay: 0s;
}

#progress b span:nth-child(2) {
    animation-delay: 0.3s;
}

#progress b span:nth-child(3) {
    animation-delay: 0.6s;
}

/* End Loading Animation */


   <!-- End OPAL STYLESHEET-->