
  /* legacy - can get rid of this in a few months */
  .mottle-hidden {
    display: none;
}

  .mottle-bot {
    min-width: 350px;
    box-sizing: content-box;
    border-width: 2px;
    border-style: solid;
    border-radius: 0.375rem;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    padding: 1.5rem;
    margin: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity));
    --tw-shadow-color: #e5e7eb;
    --tw-shadow: var(--tw-shadow-colored);
}

  .mottle-bot.mottle-dark {
    --tw-bg-opacity: 1;
    background-color: rgb(71 85 105 / var(--tw-bg-opacity));
    --tw-border-opacity: 1 !important;
    border-color: rgb(15 23 42 / var(--tw-border-opacity)) !important;
    --tw-shadow: 0 0 #0000 !important;
    --tw-shadow-colored: 0 0 #0000 !important;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

  .mottle-chat {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 1.5rem;
    padding-right: 0.25rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
}

  .mottle-chat table {
    margin-bottom: 1rem;
}

  .mottle-chat th,
  .mottle-chat td {
    padding: 3px;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

  .mottle-chat li {
    list-style-type: disc;
    margin-left: 1.25rem;
}

  .mottle-chat.mottle-minimized {
    padding: 1rem;
}

  .mottle-chat-flex {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px !important;
}

  .mottle-chat-flex .mottle-top-bar {
    display: none;
}

  .mottle-chat-right p,
  .mottle-chat-left p {
    margin: 0px;
    padding: 0px;
}

  .mottle-chat-right {
    position: fixed;
    bottom: 0px;
    right: 0px;
    margin-right: 0.25rem;
    z-index: 50;
    width: 33.333333%;
    height: 50%;
    max-width: 350px;
    max-height: 450px;
}

  .mottle-chat-right p {
    text-align: left;
}

  .mottle-top-bar {
    display: flex;
    flex-direction: row;
    height: 18px;
    width: 100%;
}

  .mottle-expand {
    display: none;
}

  .mottle-minimize,
  .mottle-expand {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 0px;
    right: 0px;
    margin: 0.5rem;
    padding: 0px;
    cursor: pointer;
    stroke: #000;
    fill: #000;
}

  .mottle-dark .mottle-minimize,
  .mottle-dark .mottle-expand {
    stroke: #fff;
    fill: #fff;
}

  .mottle-minimized .mottle-minimize {
    display: none;
}

  .mottle-minimized .mottle-expand {
    display: flex;
}

  .mottle-minimized {
    width: 300px;
    height: 30px;
}

  .mottle-minimized .mottle-conversation,
  .mottle-minimized form,
  .mottle-minimized fieldset,
  .mottle-minimized .mottle-logo {
    display: none !important;
}

  .mottle-minimized-msg {
    min-height: 25px;
    display: none;
    cursor: pointer;
    overflow: hidden;
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity));
}

  .mottle-dark .mottle-minimized-msg {
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}

  .mottle-minimized .mottle-minimized-msg {
    display: flex;
}

  .mottle-conversation {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

  .mottle-messages {
    width: 100%;
    height: 100%;
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

  .mottle-msg-bot,
  .mottle-msg-user {
    padding: 0px;
    padding-right: 1rem;
    padding-bottom: 0.5rem;
}

  .mottle-msg-bot {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

  .mottle-msg-user {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

  .mottle-msg-bot div,
  .mottle-msg-user div {
    max-width: 28rem;
    align-items: center;
    border-radius: 0.5rem;
    padding: 0.75rem;
    overflow-wrap: break-word;
    max-width: 80%;
}

  .mottle-msg-bot div {
    --tw-bg-opacity: 1;
    background-color: rgb(147 197 253 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity));
    border-bottom-left-radius: 0px;
    text-align: left;
    overflow-x: auto;
}

  .mottle-dark .mottle-msg-bot div {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity)) !important;
    --tw-text-opacity: 1;
    color: rgb(248 250 252 / var(--tw-text-opacity));
}

  .mottle-msg-user div {
    --tw-bg-opacity: 1;
    background-color: rgb(209 213 219 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(15 23 42 / var(--tw-text-opacity));
    border-bottom-right-radius: 0px;
    text-align: right;
}

  .mottle-dark .mottle-msg-user div {
    --tw-bg-opacity: 1;
    background-color: rgb(107 114 128 / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(248 250 252 / var(--tw-text-opacity));
}

  .mottle-bot h1 {
    text-align: center;
}

  .mottle-chat h1 {
    display: none;
}

  .mottle-bot form {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    border-width: 0px;
    padding: 0px;
    margin: 0px;
}

  .mottle-bot fieldset {
    display: flex;
    flex-direction: row;
    border-width: 0px;
    padding: 0px;
    margin: 0px;
    margin-right: 0.5rem;
}

  .mottle-query {
    box-sizing: content-box;
    display: flex;
    flex-direction: column;
    border-width: 2px;
    border-right-width: 0px;
    font-size: 1.5rem;
    line-height: 2rem;
    padding: 0.5rem;
    --tw-border-opacity: 1;
    border-color: rgb(209 213 219 / var(--tw-border-opacity));
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    width: 100% !important;
}

  .mottle-chat .mottle-query {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

  .mottle-answer {
    display: flex;
    flex-direction: row;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

  @media (min-width: 768px) {
    .mottle-answer {
        width: 83.333333%;
    }
}

  .mottle-answer {
    width: 100%;
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
}

  @media (min-width: 768px) {
    .mottle-answer {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }
}

  .mottle-chat .mottle-answer {
    display: none;
}

  .mottle-button {
    display: flex;
    flex-direction: column;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
    justify-content: center;
    text-align: center;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    cursor: pointer;
    --tw-border-opacity: 1;
    border-color: rgb(31 41 55 / var(--tw-border-opacity));
    white-space: nowrap;
}

  .mottle-chat .mottle-button {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

  .mottle-wait {
    box-sizing: content-box;
    width: 65px;
    height: 19px;
    padding-top: 15px;
    padding-right: 0px;
    padding-bottom: 5px;
    padding-left: 15px;
    position: relative;
    border-radius: 9999px;
    margin-top: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}

  .mottle-wait .dot {
    float: left;
    width: 8px;
    height: 8px;
    margin-left: 4px;
    margin-right: 4px;
    --tw-bg-opacity: 1;
    background-color: rgb(71 85 105 / var(--tw-bg-opacity));
    border-radius: 9999px;
    opacity: 0;
    animation: mottleLoadingFade 1.5s infinite;
}

  .mottle-wait .dot:nth-child(1) {
    animation-delay: 0s;
  }

  .mottle-wait .dot:nth-child(2) {
    animation-delay: 0.2s;
  }

  .mottle-wait .dot:nth-child(3) {
    animation-delay: 0.4s;
  }

  @keyframes mottleLoadingFade {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0.8;
    }
    100% {
      opacity: 0;
    }
  }

  .mottle-logo {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    font-size: 0.75rem;
    line-height: 1rem;
}

  @media (min-width: 768px) {
    .mottle-logo {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
}

  .mottle-chat .mottle-logo {
    justify-content: flex-start;
    padding-top: 0.75rem;
    padding-bottom: 0.5rem;
}

  .mottle-logo img {
    vertical-align: middle;
    margin-right: 0.25rem;
    display: inline;
}

  .mottle-logo a {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity));
    text-decoration-line: none;
}

  .mottle-dark .mottle-logo a {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity));
}

  .mottle-logo a:hover {
    text-decoration-line: underline;
}

  .mottle-logo a:visited {
    --tw-text-opacity: 1;
    color: rgb(107 114 128 / var(--tw-text-opacity));
}

  .mottle-dark .mottle-logo a:visited {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity));
}
*, ::before, ::after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
}
::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x:  ;
    --tw-pan-y:  ;
    --tw-pinch-zoom:  ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position:  ;
    --tw-gradient-via-position:  ;
    --tw-gradient-to-position:  ;
    --tw-ordinal:  ;
    --tw-slashed-zero:  ;
    --tw-numeric-figure:  ;
    --tw-numeric-spacing:  ;
    --tw-numeric-fraction:  ;
    --tw-ring-inset:  ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur:  ;
    --tw-brightness:  ;
    --tw-contrast:  ;
    --tw-grayscale:  ;
    --tw-hue-rotate:  ;
    --tw-invert:  ;
    --tw-saturate:  ;
    --tw-sepia:  ;
    --tw-drop-shadow:  ;
    --tw-backdrop-blur:  ;
    --tw-backdrop-brightness:  ;
    --tw-backdrop-contrast:  ;
    --tw-backdrop-grayscale:  ;
    --tw-backdrop-hue-rotate:  ;
    --tw-backdrop-invert:  ;
    --tw-backdrop-opacity:  ;
    --tw-backdrop-saturate:  ;
    --tw-backdrop-sepia:  ;
}
.mot-mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.mot-hidden {
    display: none;
}
.mot-max-w-screen-xl {
    max-width: 1280px;
}
.mot-px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.mot-py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.mot-pb-5 {
    padding-bottom: 1.25rem;
}
.mot-text-center {
    text-align: center;
}
.mot-text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}
.mot-font-extrabold {
    font-weight: 800;
}
.mot-tracking-tight {
    letter-spacing: -0.025em;
}
.mot-text-gray-900 {
    --tw-text-opacity: 1;
    color: rgb(17 24 39 / var(--tw-text-opacity));
}
@media (prefers-color-scheme: dark) {
    .dark\:mot-text-white {
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity));
    }
}
@media (min-width: 768px) {
    .md\:mot-px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
@media (min-width: 1024px) {
    .lg\:mot-mb-10 {
        margin-bottom: 2.5rem;
    }
    .lg\:mot-text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
}

