/*Needs to stay - Start*/
.content-fragment { margin: 10px; }

.layout-content.split-content .layout-region.content .content-fragment,
.layout-content.header-top-split-content .layout-region.content .content-fragment {
  margin-right: 5px;
}

.layout-content.split-content .layout-region.right-sidebar .content-fragment,
.layout-content.header-top-split-content .layout-region.right-sidebar .content-fragment {
  margin-left: 5px;
}

/* Job description lists (scoped) */
.ib-job-description ul {
  list-style: disc !important;
  font-size: 15px;
  padding-left: 16px;
  margin-top: 12px;
  margin-bottom: 12px;
}

li {line-height:22px;}

/* css to youtube embedded iframes render responsively */
iframe[src*="youtube"] {
  aspect-ratio: 16 / 9;
  /* Overrides inline width and height attrs in the default embed code */
  width: 100% !important;
  height: auto !important;
}
/*Needs to stay - End*/


/*Done - Start*/

/* ag increase vertical space between invoice logo and following text */
.ib-invoice .address { padding-top: 20px; }

/*ag styling for job expired text*/
p.ib-job-expired {
  font-size: 16px;
  text-align: center;
  margin-top: 20px;
}
p.ib-job-expired-sub1 {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}
p.ib-job-expired-sub2 {
  text-align: center;
  font-size: 16px;
  margin-bottom: 20px;
}

/* ag add responsive styling for blue box and black box title bars */
@media (max-width: 979px) {
  .content-fragment-page .blue-box.split .left-split { display: block; }
  .content-fragment-page .blue-box.split .right-split { display: none; }
}

/* ag blog list and post changes */
.blog-post-list .abbreviated-post .post-summary {
  font-size: 1.1em;
  line-height: 1.3em;
  text-align: justify;
}
.blog-post-list .post-name .internal-link.view-post {
  font-size: 1.25em;
}

/* Arlo blog post changes */
form[action^='/news/b/veterinary-news'] .blog-post .post-content h2 img { padding: 3px 0px 20px 10px; }
form[action^='/news/b/veterinary-news'] .blog-post .post-content h2 {
  padding-top: 0.5em !important;
  line-height: 21px !important;
  font-weight: normal;
  margin: 0 0 .5em 0;
  padding-bottom: 0px;
  font-size: 1.3em !important;
}
form[action^='/news/b/veterinary-news'] .blog-post .full-post .post-content p { font-size: 15px; line-height: 20px; }
form[action^='/news/b/veterinary-news'] .content-fragment.blog-post .post-date { margin-left: 33px; font-weight: normal; }
form[action^='/news/b/veterinary-news'] .content-fragment.blog-post .full-post .post-author { padding-top: 0px; }

@media only screen and (max-width: 900px) {
  form[action^='/news/b/veterinary-news'] .blog-post .post-content h2 img {
    padding: 0px;
    float: initial !important;
    margin-right: 453px !important;
    margin-bottom: 10px !important;
  }
  form[action^='/news/b/veterinary-news'] .blog-post .post-content h2 { padding-top: 0.5em !important; }
}

/* Arlo reduce spacing between job details on fp list */
.ib-latest-jobs .ib-job-type { margin-left: 3px; }

/* Arlo reduce heading font-size fp widgets so that they don't misalign on mobile */
.content-fragment.with-header .content-fragment-header { font-size: 1.440em; }
/*Done - End*/


/* enforce min font size for form fields to prevent iOS zooming on focus */
.single-column input[type="color"],
.single-column input[type="date"],
.single-column input[type="datetime"],
.single-column input[type="datetime-local"],
.single-column input[type="email"],
.single-column input[type="month"],
.single-column input[type="number"],
.single-column input[type="password"],
.single-column input[type="search"],
.single-column input[type="tel"],
.single-column input[type="text"],
.single-column input[type="time"],
.single-column input[type="url"],
.single-column input[type="week"],
.single-column select:focus,
.single-column textarea {
  font-size: 16px !important;
}

/* create / edit post styling */
.content-fragment.create-edit-post.with-header .content-fragment-header {
  background-color: #407d40;
  padding: 0 1rem;
  border: 0;
}

.content-fragment.create-edit-post.with-header .content-fragment-header > div {
  font-size: 22px;
  font-weight: 700;
  line-height: 26px;
  margin: 0;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.5rem 0;
}


/* === MODALS (FIXED): keep the modal sized, but allow inner scrolling === */
.modal {
  position: fixed !important;
  left: 50% !important;
  top: 6vh !important;
  transform: translateX(-50%) !important;

  width: min(92vw, 1100px) !important;
  height: min(92vh, 1000px) !important;

  min-width: 700px !important;
  min-height: 520px !important;

  display: flex !important;
  flex-direction: column !important;

  /* IMPORTANT: keep outer hidden so header/footer stay put */
  overflow: hidden !important;

  z-index: 2147483647 !important;
}

/* Header/footer keep natural size */
.modal .modal-title,
.modal .modal-footer {
  flex: 0 0 auto !important;
}

/* Let the content region take remaining space and scroll */
.modal .modal-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;     /* critical: allows scrolling in flex children */
  overflow: hidden !important;  /* content wrapper doesn't scroll; inner does */
  width: 100% !important;
}

/* This is the real scroll container for tall dialogs */
.modal .modal-content-2 {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  width: 100% !important;
}

/* Don’t force all nested wrappers to overflow hidden (that kills scrolling).
   Make them stretch, but allow scrolling where needed. */
.modal .modal-content-2 > div,
.modal .modal-content-2 > div > div {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

/* Iframe: fill available width; let the iframe itself scroll if its content is taller */
.modal .modal-content-2 iframe {
  display: block !important;
  width: 100% !important;
  /* give it a sensible minimum; scrolling is handled by modal-content-2 or iframe */
  min-height: 60vh !important;
  border: 0 !important;
}

/* Hide the duplicate empty modal (if it appears) */
@supports selector(:has(*)) {
  .modal:has(.modal-content-2:not(:has(*))) { display: none !important; }
}

/* Fallback: nuke the tiny duplicate */
.modal[style*="width: 48px"],
.modal[style*="height: 69px"] {
  display: none !important;
}