.highlighted-word {
    background-color: yellow; /* or any other highlighting style */
  }
  
   /* CSS style for the modal */
   .modal {
      width: 100vw; /* Set modal width to 100% of the viewport width */
      height: 100vh; /* Set modal height to 100% of the viewport height */
      z-index: 99999;
  }
  /* Loader Overlay Styles */
     /* Loader styles */
     .plag-loader-overlay {
              position: fixed;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: rgba(245, 245, 245, 0.7); /* Semi-transparent white background */
              display: flex;
              flex-direction: column; /* Align items vertically */
              justify-content: center;
              align-items: center;
              z-index: 9999; /* Ensure the loader is on top of other elements */
          }
  
          .plag-loader {
          transform: rotateZ(45deg);
          perspective: 1000px;
          border-radius: 50%;
          width: 48px;
          height: 48px;
          color: #000;
        }
          .plag-loader:before,
          .plag-loader:after {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: inherit;
            height: inherit;
            border-radius: 50%;
            transform: rotateX(70deg);
            animation: 1s plag-spin linear infinite;
          }
          .plag-loader:after {
            color: #FF3D00;
            transform: rotateY(70deg);
            animation-delay: .4s;
          }
          .plag-loader-text {
              font-weight: bold;
              margin-top: 2px; /* Adjust the margin as needed */
              font-size: 24px; /* Set the font size as needed */
              color: #000; /* Text color */
          }
  
        @keyframes plag-rotate {
          0% {
            transform: translate(-50%, -50%) rotateZ(0deg);
          }
          100% {
            transform: translate(-50%, -50%) rotateZ(360deg);
          }
        }
  
        @keyframes plag-rotateccw {
          0% {
            transform: translate(-50%, -50%) rotate(0deg);
          }
          100% {
            transform: translate(-50%, -50%) rotate(-360deg);
          }
        }
  
        @keyframes plag-spin {
          0%,
          100% {
            box-shadow: .2em 0px 0 0px currentcolor;
          }
          12% {
            box-shadow: .2em .2em 0 0 currentcolor;
          }
          25% {
            box-shadow: 0 .2em 0 0px currentcolor;
          }
          37% {
            box-shadow: -.2em .2em 0 0 currentcolor;
          }
          50% {
            box-shadow: -.2em 0 0 0 currentcolor;
          }
          62% {
            box-shadow: -.2em -.2em 0 0 currentcolor;
          }
          75% {
            box-shadow: 0px -.2em 0 0 currentcolor;
          }
          87% {
            box-shadow: .2em -.2em 0 0 currentcolor;
          }
        }
  
  
        .bot-header {
          margin: 0px;
          font-family: "Open Sans", sans-serif;
          font-weight: 600;
          font-size: 12px;
          line-height: 16px;
          color: rgb(129, 129, 129);
      }
  
      /* Custom CSS for the Popover */
      .popover {
          border-radius: 13px;
          border-color: #fff;
          background-color: #ffffff; /* White background for the popover */
          width: 250px; /* Set width */
          transform: translate3d(31px, 338.5px, 0px); /* Positioning using transform */
          box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 22px 0px;
      }
  
   
       .popover-header {
          background-color: #ffffff; /* White background for the popover header */
          border: none; /* No border for the popover header */
          border-radius: 13px;
      }
  
      .popover-body {
      padding-bottom: 0px;
          background-color: #ffffff; /* White background for the popover body */
          border-radius: 13px;
          width: 250px;
      }
      .popover .popover-arrow {
      border-width: none!important;
      display: none!important;
      }
      
      .bot-body {
          margin: 2px 0;
      }
  
     .text-correction {
      font-family: "Open Sans", sans-serif;
      color: #05735a;
      font-weight: 600;
      font-size: 17px;
      margin-bottom: 5px!important;
    }
  .text-error {
         font-family: "Open Sans", sans-serif;
      font-weight: 600;
      font-size: 17px;
       color: #d31332;
        text-decoration: line-through;
        margin-bottom: 5px!important;
  }
  .suggestion-box {
      padding-left: 5px;
      display: flex;
      align-items: center; /* Vertically center the text */
      align-content: center;
      margin-bottom: 2px;
      padding-bottom: 2px;
      transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add box-shadow transition */
  }
  
  /* Hover effect for suggestion-box */
  .suggestion-box:hover {
      transform: scale(1.05) translateX(3px); /* Move text slightly to the right on hover */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Box shadow on hover */
  }
  .bot-footer {
      overflow: hidden;
      box-sizing: border-box;
      display: flex;
      flex-flow: wrap;
      width: 100%;
      margin: 5px 0px;
      place-content: center space-between;
      align-items: center;
  
  }
  .btn-ignore {
      margin: 0px;
      font-family: "Open Sans", sans-serif;
      font-weight: 600;
      font-size: 12px;
      line-height: 16px;
      color: rgb(129, 129, 129);
  }
  
  /* Define the animation for the marquee */
  @keyframes marquee {
      0% {
          transform: translateX(100%);
      }
      100% {
          transform: translateX(-100%);
      }
  }
  
  .marquee-container {
      display: flex;
      align-items: center;
      margin-left: 10px;
      flex-shrink: 0; /* Prevent the container from shrinking beyond its content */
      overflow: hidden;
      max-width: 150px;
  }
  
  /* Apply the animation to the text element */
  .marquee-text {
      white-space: nowrap;
      
      animation: marquee 7s linear infinite;
      font-size: 12px;
      font-weight: 600;
      color: rgb(129, 129, 129);
  }
  .overlay {
    position: absolute;
    border-bottom: 3px solid #FF8080;
    /* transition: all 0.3s ease-in-out; */
    /* pointer-events: none; Allows click events to pass through the overlay */
    z-index: 0;
    cursor: text; /* Change cursor to pointer when hovered */
}
.overlay:hover {
    background-color: rgba(234, 21, 55, 0.157) !important; /* Light red background color when hovered */
    /* pointer-events: none; */
}