body {
  color: #434343 !important;
  font-family: "Roboto", sans-serif !important;
  margin: 30px !important;
  width: 630px;
  background: whitesmoke !important;
}

#params {
  margin: 20px 0 30px 0;
}

#email-signature {
  width: 630px;
  margin-bottom: 30px;
  background: white;
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
}

#toggle-html,
#button-bar label {
  margin-left: 6px; /* button spacing */
}

#toggle-plain-text,
#button-bar label {
  margin-left: 6px; /* button spacing */
}

.instructions {
  font-size: 12px;
  margin-top: 15px !important;
}

.confirmation {
  background: #5cbebf;
  color: #000000;
  padding: 5px;
  border-radius: 2px;
  display: none;
}

#email-html-textarea {
  font-family: "arial";
  height: 200px;
  background: white;
  margin-top: 15px;
}

#email-plain-text-textarea {
  font-family: "arial";
  height: 200px;
  background: white;
  margin-top: 15px;
}

#target {
  display: none;
  margin-top: 30px;
}

#target table {
  background: white;
}

.button-panel {
  background: gainsboro;
  border-radius: 5px;
  padding: 15px;
}

#button1Panel,
#button2Panel {
  display: none;
}

/*tooltip*/
.tooltip-container {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* Optional: if you want to indicate that this is hoverable */
}

.tooltip-content {
  visibility: hidden;
  width: 300px; /* Adjust based on the size of your image */
  background-color: white;
  color: #000;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0; /* Adjust padding if needed */

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -150px; /* This should be half of the width to center it */

  /* Fade in tooltip - optional */
  opacity: 0;
  transition: opacity 0.2s;
}

.tooltip-container:hover .tooltip-content {
  visibility: visible;
  opacity: 1;

  /* Increase specificity and enforce the style with !important */
.tooltip-container .tooltip-content a {
  color: #5cbebf !important; /* Change the color as needed */
  text-decoration: underline !important; /* Ensures it is clear it's a clickable link */
}

  body {
  color: #434343 !important;
  font-family: "Roboto", sans-serif !important;
  margin: 10px !important;
  width: auto; /* Allow the body to adjust to screen size */
  background: whitesmoke !important;
}

#params, #email-signature {
  width: 100%; /* Full width on small screens */
  box-shadow: none; /* Remove shadow to simplify the design */
}

.instructions, .confirmation, #email-html-textarea {
  font-size: smaller; /* Adjust font size for readability */
}

.button-panel {
  padding: 10px; /* Reduce padding on smaller screens */
}

/* Adjust tooltip container for mobile */
.tooltip-container {
  display: block; /* Full width for better readability */
  margin-bottom: 10px; /* Add space below for clarity */
}

.tooltip-content {
  width: 90%; /* Make tooltip content fit within the screen */
  left: 5%; /* Center the tooltip */
  margin-left: 0; /* Remove the negative margin */
}