/**
 * @file: CiviCRM Stylesheet
 *
 * NOTE: The main civicrm container has both class and id of crm-container
 * Other civi blocks outside the main container also have the class crm-container (but not the id)
 * All styles should start with .crm-container unless they are specific to the main div only
 */

#editrow-onbehalf_contact_sub_type {
  display: none;
}

/* Use this class to hide text that should only be there for screen readers */
.crm-container fieldset {
  display: contents;
}
.crm-container.crm-public .select2-container {
  width: 75% !important;
}
#crm-container.crm-public input[type="text"] {
  width: 75%;
}
.crm-container fieldset legend {
  background-color: #cde8fe;
  font-size: 15px;
  font-weight: bold;
  color: #121a2d;
  padding: 4px 6px;
  margin: 0 0 0.3em;
}
.crm-container .description {
  background-color: floralwhite;
}
@media (min-width: 480px) {
  .crm-container .crm-section .label {
    width: 25%;
  }
}
@media (min-width: 480px) {
  .crm-container .crm-section .content {
    margin-left: 28%;
  }
}
.crm-container .description {
  margin-right: 17%;
}
.crm-container .help {
  font-size: 15px;
}
.crm-container th {
  font-size: 15px;
}
.crm-container table {
  font-size: 15px;
}
.overflow-table-div{
  overflow:auto !important;
  font-size: 15px;
}
.crm-container .crm-multiple-checkbox-radio-options {
  display: flex;
  --gap: 0.5em;
}
.crm-option-label-pair {
  flex-basis: 100%;
}
/* Age field in individual membership*/
#custom_216 {
  pointer-events: none;
  background-color: #f0f0f0;
  background-image: none;
}
/* Post help text as popup on hover from a question mark bubble */
.helprow-post {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
    background-color: #0073aa;
    color: white !important;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    cursor: help;
    font-size: 13px;
    font-weight: bold;
    transform: translateY(-31px);
}

.form-item .content {
  margin-left: 10%;
}

@media (min-width: 480px) {
  .helprow-post {
    transform: translateY(-50px);
  }

  .form-item .label {
    margin-left: 2%;
    text-align: left !important;
  }
  .form-item .content {
    margin-left: 29% !important;
  }
}

/* Add the question mark inside the circle */
.helprow-post::before {
    content: "?";
}

/* 2. Target the specific CiviCRM content div */
.helprow-post .content.description {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 25px; /* Positions the text below the question mark */
    left: 7vw;
    width: 60vw; /* Fixed width prevents the "one letter per row" issue */
    background: #ffffff;
    color: #333333;
    padding: 10px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    font-weight: normal;
    font-size: 13px;
    line-height: 1.4;
    z-index: 999;
    transition: opacity 0.4s ease, visibility 0s linear 3s;
    text-align: left; /* Resets the centering from the circle */
}

@media (min-width: 480px) {
  .helprow-post .content.description {
      left: 1.2vw;
  }
}

/* 3. Show the content on Hover or Tap */
.helprow-post:hover .content.description,
.helprow-post:active .content.description {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

/* 1. Ensure the fieldsets don't "clip" the tooltips */
fieldset {
    overflow: visible !important;
    position: relative;
    z-index: 1;
}

/* 2. The Secret Sauce: Higher Z-Index on Hover */
/* When you hover over a row, we "lift" that entire row 
   above the next fieldset so the tooltip can overlap it. */
.crm-section:hover, 
.helprow-post:hover {
    z-index: 1000 !important;
}

/* If the help icon is at the very bottom of a fieldset: */
fieldset:hover {
    z-index: 100;
}
/* END - Post help text as popup on hover from a question mark bubble*/