/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
<script>
 .tmyhighlighted {
      border: 2px dotted #fff;
      padding: 2px;
    }
  /* Style for the hint box */
  .hint {
    position: absolute;
    background-color: #fff; /* White background */
    border: none; /* Solid border */
    color: #333; /* Text color */
    padding: 0;
    border-radius: 20px;
    z-index: 9999; /* Ensure it's above other elements */
  }
  .bordered-cell {
    border: 1px solid black;
  }

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 9998; /* Ensure the overlay is below the popup */
}

.popup-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(25%, -5%);
  width: 70%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-box {
  color: #000; 
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  overflow-y: auto; /* Allow vertical scrolling if needed */
  max-height: 80vh; /* Set a maximum height if needed */
  width: 70%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

  /* Style for the close button */
  .save-translation-button {
    background-color: #49e;
    color: #fff;
    border: none;
    margin-top: 10px; /* Adjust the margin as needed */
    align-self: flex-end; /* Align the button to the bottom of the container */
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
  }

  .send-page-translation-button {
    background-color: #49e;
    color: #fff;
    border: none;
    margin-top: 10px; /* Adjust the margin as needed */
    align-self: flex-end; /* Align the button to the bottom of the container */
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
  }

  .close-button {
    //background-color: #49e;
    background-color: #C8C8C8;
    color: #fff;
    margin-top: 10px; /* Adjust the margin as needed */
    align-self: flex-end; /* Align the button to the bottom of the container */
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    float: right;
  }
  .translatio-logo-popup {
    display: none;
    position: fixed;
    right: 10px; /* Adjust this value to position the popup on the right */
    top: 80%;
    transform: translateY(-50%);
    background-color: #f1f1f1;
    color: black; /* Font color */
    font-weight: bold; /* Bold font */
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 999;
  }
  .table-status {
    display: inline-block;
    margin: 5px; /* Optional: Add some margin for spacing */
  }

   .tmy_loader {
     border: 4px solid #01a6d7;
     border-radius: 50%;
     display: inline-block;
     border-top: 4px solid #F3F3F3;
     width: 18px;
     height: 18px;
     -webkit-animation: spin 2s linear infinite; /* Safari */
     animation: spin 2s linear infinite;
   }

   /* Safari */
   @-webkit-keyframes spin {
     0% { -webkit-transform: rotate(0deg); }
     100% { -webkit-transform: rotate(360deg); }
   }

   @keyframes spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
   }

</script>