/*Fluke GPT CSS START*/
/* Move back to top temporarily */
  #backtotop {
    bottom: 9rem !important;
    right: 2rem !important;
  }

  /* Define styles for the image in its normal state */
  .chat-button {
    width: 45px;
    /* Adjust the width as needed */
    height: auto;
    /* Maintain the aspect ratio */
    cursor: pointer;
    /* Change the cursor to a pointer to indicate interactivity */
    transition: transform 0.3s;
    /* Add a smooth transition for the transform property */
    position: absolute;
    right: 15px;
  }

  .box-small {
    width: 60px;
    height: 60px;
    /* Create smooth transition from box-small to box-mid */
    transition: width 0.3s, height 0.3s;
    overflow: hidden;
  }

  .box-mid {
    width: 255px;
    height: 60px;
    transition: width 0.3s, height 0.3s;
    overflow: none;
  }

  #icon-close {
    position: absolute;
    top: -22px;
    left: -22px;
  }

  /* Define styles for the image when hovered */
  .chat-button:hover {
    cursor: pointer;
    /* You can also add other styles such as changing the opacity, adding a border, or changing the background color to indicate interactivity. */
  }

  /* The left icon is the Yellow AI icon */
  #icon-left {
    overflow: hidden;
    width: 35px;
    height: 35px;
    margin: 10px;
  }

  /* The right icon is the arrow icon */
  #icon-right {
    overflow: hidden;
    width: 45px;
    height: 45px;
    margin: 10px;
  }

  /* The text-middle class is used to style the "Chat with our" text. Breaks any other text into a new line */
  #chatbox #text-middle {
    opacity: 1;
    /* Initially, set the opacity to 0 */
    text-align: left;
    color: white;
    margin: 0 10px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
  }

  .bot.typing::after {
    content: "eMaint Assistant is typing";
    animation: typing 2s steps(9, end) infinite, blink-caret 0.5s step-end infinite;
  }

  @keyframes typing {

    0%,
    100% {
      content: "eMaint Assistant is typing";
    }

    20% {
      content: "eMaint Assistant is typing.";
    }

    40% {
      content: "eMaint Assistant is typing..";
    }

    60% {
      content: "eMaint Assistant is typing...";
    }
  }

  @keyframes blink-caret {

    from,
    to {
      border-right-color: transparent;
    }

    50% {
      border-right-color: #000;
    }
  }

  .text-middle-yellow {
    color: #ffc20e;
    display: block;
  }

  .bot-hidden {
    display: none;
    opacity: 0 !important;
    /*transition for opacity is 0.3s*/
    transition: opacity 0.5s ease-in-out;
  }

  .bot-exposed {
    display: flex;
    opacity: 1 !important;
    transition: opacity 0.5s ease-in-out;
  }

  .bot-exposed-block {
    display: block;
    opacity: 1 !important;
    transition: opacity 0.5s ease-in-out;
  }

  #expand-button {
    position: absolute;
    top: 4px;
    right: -5px;
    width: 100px;
  }

  /* Container for the chatbox inputs, found at the bottom of the expanded chatbox */
  #chat-inputs {
    background: #fff;
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    padding: 15px 5px 0px 13px;
    height: 75px;
  }

  #chat-messages {
    display: inline-table;
    width: 415px;
    min-height: 415px;
    padding: 0 15px 25px;
    overflow-y: auto;
  }

  /* "Close" button, to minimize the chatbox */
  #close-button {
    background-color: white;
    color: black;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.1s ease-in-out;
    padding: 0;
  }

  /* Add the "User" icon, which is a happy lil face */
  .user:after {
    content: "";
    background-image: url('https://dam-assets.fluke.com/s3fs-public/user-avatar.png');
    background-size: 35px 35px;
    /* Set the size of the background image */
    background-repeat: no-repeat;
    width: 35px;
    /* Width of the background image */
    height: 35px;
    /* Height of the background image */
    position: absolute;
    /* Position the ::before content absolutely */
    right: 0;
    /* Position it at the left edge of the .bot div */
    bottom: -40px;
  }

  /* Add the user label */
  .user:before {
    content: "You";
    font-weight: bold;
    display: block;
    font-size: 12px;
    position: absolute;
    right: 45px;
    bottom: -22px;
  }

  /* Add the "Bot" icon, which is the Yellow DMM */
  .bot:before {
    content: "";
    background-image: url('https://dam-assets.fluke.com/s3fs-public/bot-avatar.png');
    background-size: 35px 35px;
    background-repeat: no-repeat;
    width: 35px;
    height: 35px;
    position: absolute;
    left: 0;
    bottom: -40px;
  }

  /* Add the bot label */
  .bot:after {
    content: "eMaint Assistant";
    font-weight: bold;
    display: block;
    font-size: 12px;
    position: absolute;
    left: 45px;
    bottom: -22px;
  }

  /* The Close button "X" */
  #close-button::before,
  #close-button::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 16px;
    background-color: #5E88A1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  #close-button::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  #close-button:hover {
    background-color: #c4d7f2;
  }

  /* The send button (Arrow) to the right of the user input */
  #chat-send-button {
    float: right;
  }

  #chatbox #header #text-middle {
    flex-grow: 1;
    opacity: 0;
    text-align: left;
    color: white;
    margin: 0 10px;
    font-family: 'Noto Sans', sans-serif;
    overflow: hidden;
  }

  .circle-button {
    width: 30px;
    height: 30px;
    background-color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
  }

  .circle-button::before,
  .circle-button::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 20px;
    background-color: #5E88A1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .circle-button::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  #chatbox #header #buttons button {
    color: #5E88A1;
    border: none;
    cursor: pointer;
    font-size: 16px;
    margin-right: 10px;
  }

  .input-container {
    display: inline-block;
    position: relative;
    width: 100%;
    max-width: 600px;
  }

  #clear-button {
    background-color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    cursor: pointer;
    color: #5E88A1;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    font-family: 'Noto Sans', sans-serif;
  }

  #clear-button:hover {
    background-color: #c4d7f2;
    transition: background-color 0.1s ease-in-out;
  }

  #clear-button:active {
    background-color: #ddd;
  }

  .user {
    width: 85%;
    padding: 10px;
    background-color: #edf4ff;
    border: 2px solid #edf4ff;
    width: 85%;
    padding: 10px;
    background-color: #edf4ff;
    border: 2px solid #edf4ff;
    border-radius: 10px 10px 0 10px;
    box-sizing: border-box;
    position: relative;
    color: #333;
    font-size: 16px;
    float: right;
    margin: 30px 0;
    box-sizing: border-box;
    position: relative;
    color: #333;
    font-size: 16px;
    float: right;
    margin: 30px 0;
  }

  .bot {
    width: 85%;
    padding: 10px;
    background-color: #FFEAAC;
    border: 2px solid #FFEAAC;
    border-radius: 10px 10px 10px 0;
    box-sizing: border-box;
    position: relative;
    color: #333;
    font-size: 16px;
    float: left;
    margin: 30px 0;
  }

  #chatbox #bot-content {
    flex-grow: 1;
    height: 300px;
    overflow-y: scroll;
    background-color: white;
    height: 100%;
    max-height: 415px;
    border: none;
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: #e3e3e3 transparent;
    /* Firefox */

    /* Webkit (Chrome, Safari) */
    scrollbar-width: thin;
    scrollbar-color: #e3e3e3 transparent;
    scrollbar-track-color: transparent;

    /* Internet Explorer */
    -ms-overflow-style: -ms-autohiding-scrollbar;

    /* Standard Scrollbar (for IE and Edge) */
    scrollbar-face-color: #e3e3e3;
    scrollbar-track-color: transparent;
  }

  /* Webkit (Chrome, Safari) */
  #chatbox #bot-content::-webkit-scrollbar {
    width: 12px;
  }

  #chatbox #bot-content::-webkit-scrollbar-track {
    background: transparent;
  }

  #chatbox #bot-content::-webkit-scrollbar-thumb {
    width: 6px;
    background-color: #e3e3e3;
    /* Change this color as needed */
    border-radius: 6px;
    margin: 3px 0;
    /* 3px on the top and bottom, 0 on the left and right */
  }

  #chatbox #bot-content::-webkit-scrollbar-thumb:active {
    background-color: #e3e3e3;
    /* Change this color as needed */
  }

  #expand-circle,
  .send-circle {
    fill: #edf4ff;
    box-shadow: none;
    transition: fill 0.1s ease-in-out;
  }

  .send-circle-disabled {
    fill: #dce7f2;
    box-shadow: none;
    transition: fill 0.1s ease-in-out;
  }

  #expand-circle:hover,
  #send-circle:hover {
    transition: fill 0.1s ease-in-out;
    /* The hover effect is 30% darker than edf4ff */
    fill: #c4d7f2;
  }

  /* Create media queries for different screen sizes
  $screen-xs: 526px; // Phone / very small screen
  $screen-sm: 768px; // Small screen / tablet
  $screen-md: 1033px; // Medium screen / desktop
  $screen-lg: 1280px; // Large screen / wide desktop
  $screen-xl: 1520px; // Wide desktop / very wide desktop
  $screen-xxl: 2100px; // Above Wide desktop / Above very wide desktop
  */
  #chatbox #header {
    display: flex;
    background-color: #5E88A1;
    height: 60px;
    justify-content: space-between;
    align-items: center;
  }

  .box-full {
    width: 100%;
    height: 70%;
    transition: width 0.3s, height 0.3s;
    overflow: hidden;
    right: 0px !important;
  }

  /* When the chatbox is expanded, we have more interface options and messages to style */
  #chatbox {
    position: fixed;
    bottom: 0;
    /*right: 20px;*/
    left: 20px;
    background-color: #5E88A1;
    flex-direction: column;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
    /* Create a border around the expanded chatbox */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 10px solid #5E88A1;
    z-index: 11;
  }

  #user-input {
    width: 100%;
    padding: 10px;
    background-color: #edf4ff;
    border: 2px solid #edf4ff;
    border-radius: 20px;
    box-sizing: border-box;
    color: #333;
    font-size: 16px;
    float: left;
    max-height: 50px;
    padding-right: 55px;
  }

  /* Theme the disabled input */
  #user-input:disabled {
    /* slightly darker than edf4ff */
    background-color: #dce7f2;
    border: 2px solid #dce7f2;
    /* slightly lighter than 333 */
    color: #444;
  }

  /* This is the media query for the chatbox when it is expanded */
  @media screen and (min-width: 527px) {

    /* The header is the top bar of the expanded chatbox */
    .box-full {
      width: 430px;
      height: 560px;
      right: 20px !important;
    }

    #chatbox {
      bottom: 20px;
      right: 20px;
    }

    #user-input {
      width: 85%;
      padding-right: 10px;
    }
  }
/*Fluke GPT CSS END*/