/* === START: components — buttons, forms, cards, callouts, modals, images === */

/***********************
*
*       nav drop down
*
************************/
/* .dropdown-menu {
  margin:.25rem 0 0 -.125rem !important;
  line-height:2.0;
  padding-bottom:1rem;
}

#dropdownMenuButton {
  width:99%;
}

@media (max-width: 768px) {
  #navbarSupportedContent .dropdown-toggle {
    padding-bottom:0.1rem;
    padding-top:0.2rem;
  }
  #navbarSupportedContent .dropdown-menu {
    border: none;
    font-size:1em;
    line-height:18px;
    padding-top:0;
  }
} */


.ui-autocomplete {
  z-index: 9999 !important;
  max-height: 420px;
  overflow-y: auto;
  /* prevent horizontal scrollbar */
  overflow-x: hidden;
  /* add padding to account for vertical scrollbar */
  padding-right: 10px;
}

/*******
*
* students list and actions menu....
*
********/
table#studentListTable thead tr th {font-weight:normal;font-size:1.0rem;}

table#agentSponsorTable thead tr th {border:none;font-weight:normal;font-size:1.0rem;}
table#agentSponsorTable td { border-top: none !important; }


#studentListTable .dropdown-menu {
  border: 1px solid #95979a;
}


img.img-picker {
  opacity:.8;
}
img.img-picker:hover {
  opacity:1;
  cursor:pointer;
}


/*******
*
* image overlays to put college name and location over a square image
*
********/
/* using img-container in a parent container shows image only and then
   on hover fades the image to teal (0,170,170 opacity 1) and puts the text
   overlay on top of that.  w/o the img-container the overlay is directly
   on the image */
#random-college-images .position-relative {
  overflow: hidden;
  border-radius: 8px;
}

#random-college-images img.roundedImage {
  width: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

#random-college-images .position-relative .img-overlay {
  position: absolute;
  top: 0;
  left: 1%;
  width: 98%;
  height: 100%;
  background: transparent;
  pointer-events: none;
}

#random-college-images .img-overlay span.block {
  position: absolute;
  width: 96%;
  bottom: 6px;
  left: 2%;
  right: 2%;
  text-align: right;
  color: white;
  background: rgba(0,0,0,0.7);
  padding: 6px 10px;
  border-radius: 6px;
  box-sizing: border-box;
}

img.square-tile {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

img.newsroom-contributors {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

span.img-overlay-spacer {
   padding:0 1px;
}

img.img-news {
  max-height: 90px !important;
  width:auto;
}

img.height-constrain-125 {
  max-height: 125px !important;
  width:auto;
}

img.height-constrain-100 {
  max-height: 100px !important;
  width:auto;
}

img.height-constrain-75 {
  max-height: 75px !important;
  width:auto;
}

img.height-constrain {
  max-height: 200px !important;
  width:auto;
}

img.height-constrain-3 {
  max-height: 300px !important;
  width:auto;
}

img.height-constrain-4 {
  max-height: 400px !important;
  width:auto;
}

img.width-constrain150 {
  max-width: 150px !important;
  height: auto;
}

img.width-constrain {
  max-width: 200px !important;
  height:auto;
}

img.collegeLogoInside {
  max-width:300px;
  max-height:125px;
}

img.map-icon-svg {
  position: relative;
  height:22px;
  width:auto;
  bottom:5px;
  left:10px;
}

img.social-icon-svg {
  height:22px;
  width:auto;
  margin-right:.75rem;
}

/* NEWSROOM */

/* Newsroom filter strip */
.newsroom-filter-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}


.newsroom-filter-strip .newsroom-filter-chip, a.newsroom-filter-chip {
  font-weight: 500;
  padding: 5px 14px;
  border-radius: 20px;
  text-decoration: none;
  color: var(--bs-secondary-color);
  background: var(--bs-secondary-bg);
  border: 1px solid var(--bs-border-color);
  transition: background 0.15s;
  display: inline-block; /* ensures padding/border render on the anchor */
}

.newsroom-filter-strip .newsroom-filter-chip.active, .newsroom-filter-strip .newsroom-filter-chip:hover, a.newsroom-filter-chip.active, a.newsroom-filter-chip:hover {
  background: #09a1e4;
  color: #fff;
  border-color: #09a1e4;
  text-decoration: none;
}

.newsroom-filter-chip {
  flex-shrink: 0;
}


@media (max-width: 640px) {
  .newsroom-filter-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Bleed to viewport edges so the fade reads as "more to scroll" */
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    /* Soft fade on the right edge */
    mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
  }

  .newsroom-filter-strip::-webkit-scrollbar {
    display: none;
  }
}

/* Category badges */
.newsroom-cat-badge {
  display: inline-block;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 4px;
}

.newsroom-cat-articles-advice     { background: #E6F1FB; color: #0C447C; }
.newsroom-cat-member-college-news { background: #EAF3DE; color: #27500A; }
.newsroom-cat-press-releases      { background: #EEEDFE; color: #3C3489; }

/* Hero */
.newsroom-featured-row {
  min-height: 500px;
}

.newsroom-featured-row .col-md-7 {
  display: flex;
  flex-direction: column;
}

.newsroom-hero-img-wrap {
  position: relative;
  flex-grow: 1;
  min-height: 200px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
}

.newsroom-hero-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.newsroom-hero-title {
  font-weight: 500;
  line-height: 1.35;
}

/* Side stories */
.newsroom-side-col {
  border-left: 0.5px solid var(--bs-border-color);
}

.newsroom-side-title {
  font-weight: 500;
  line-height: 1.4;
}

/* Shared */
.newsroom-story-link {
  color: var(--bs-body-color);
  text-decoration: none;
}

.newsroom-story-link:hover { color: #09a1e4; }

.newsroom-desc {
  color: var(--bs-secondary-color);
  line-height: 1.6;
  margin-bottom: 6px;
}

.newsroom-read-more {
  font-weight: 500;
  color: #09a1e4;
  text-decoration: none;
}

.newsroom-read-more:hover { text-decoration: underline; }

.newsroom-section-eyebrow {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bs-secondary-color);
  margin-bottom: 0;
}

.newsroom-section-heading {
  font-weight: 500;
  color: var(--bs-body-color);
}

.newsroom-topic-tile {
  border: 0.5px solid #B5D4F4;
  border-radius: 8px;
  padding: 16px 18px;
  height: 100%;
  background: #E6F1FB;
  transition: border-color 0.15s, background 0.15s;
  display: flex;
  align-items: center;
  gap: 14px;
}

.newsroom-topic-tile:hover {
  border-color: #85B7EB;
  background: #d0e8f8;
}

.newsroom-topic-title {
  font-weight: 500;
  color: #0C447C;
  margin-bottom: 3px;
}

.newsroom-topic-summary {
  color: #185FA5;
  line-height: 1.5;
}

.newsroom-topic-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #185FA5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.newsroom-topic-icon i {
  color: #fff;
  font-size: 14px;
}

.newsroom-pick-card {
  border: 0.5px solid var(--bs-border-color);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.newsroom-pick-img-wrap {
  height: 160px;
  overflow: hidden;
  background: var(--bs-secondary-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.newsroom-pick-img-wrap--tall {
  height:185px;
}

.newsroom-pick-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.newsroom-pick-img--center {
  object-position: center;
}
.newsroom-pick-img--top {
  object-position: top;
}

.newsroom-pick-img--logo {
  width: auto;
  height: auto;
  max-height: 120px;
  max-width: 80%;
  object-fit: contain;
}

.newsroom-pick-body {
  padding: 14px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.newsroom-pick-title {
  font-weight: 500;
  line-height: 1.4;
}

.newsroom-pick-body .newsroom-read-more {
  margin-top: auto;
  padding-top: 10px;
}

.newsroom-contributors-strip {
  border: 0.5px solid var(--bs-border-color);
  background: #f8f9fa;
  border-radius: 10px;
  padding: 2rem 2.5rem;
  margin-top: 2.5rem;  /* increase from 1.5rem */
}

.newsroom-contributors-avatar {
  width: 240px;
  height: 240px;
  object-fit: cover;
  flex-shrink: 0;
}
.newsroom-article-title { font-weight: 500; line-height: 1.3; }

.newsroom-search-pull {
  position: absolute;
  top: 0;
  right: 0;
}
.newsroom-member-thumb {
  width: 10em;
  aspect-ratio: 1 / 1; /* Moves the square shape to the container */
  flex-shrink: 0;
  overflow: hidden;    /* Keeps everything inside the square */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Forces content to the top */
  padding-top:.25em;
}

/* The Logo */
.newsroom-member-thumb img.square-tile {
  width: 100%;
  height: auto;        /* Let the height adjust naturally */
  aspect-ratio: auto;  /* Overrides the 1/1 so it doesn't stretch */
  object-fit: contain; /* Ensures the whole logo is visible */
}

/* ============================================
   NEWSROOM FONT SIZES — adjust here
   Base assumption: 16px root
   ============================================ */

.newsroom-filter-chip      { font-size: 0.9em; }   /* pills — kept smaller intentionally */
.newsroom-cat-badge        { font-size: 0.75em; }  /* pills — kept smaller intentionally */
.newsroom-hero-title       { font-size: 1.5em; }
.newsroom-side-title       { font-size: 1.05em; }
.newsroom-pick-title       { font-size: 1.05em; }
.newsroom-desc-sm          { font-size: 0.9em; }
.newsroom-read-more        { font-size: 0.9em; }
.newsroom-section-eyebrow  { font-size: 0.825em; }
.newsroom-section-heading  { font-size: 1.5em; }
.newsroom-topic-title      { font-size: 0.975em; }
.newsroom-topic-summary    { font-size: 0.825em; }
.newsroom-article-title    { font-size: 1.05em; }
.newsroom-desc             { font-size: 0.8em; }

.newsroom-article-thumb {
  width: 7.5em;
  flex-shrink: 0;
}

.newsroom-article-h1 {
  font-size: 2em;
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

.newsroom-article-deck {
  font-size: 1.1em;
  color: var(--bs-secondary-color);
  line-height: 1.6;
  margin-bottom: 0;
}

.newsroom-article-img-float {
  float: left;
  width: 280px;
  max-width: 40%;
  height: auto;
  border-radius: 8px;
  margin: 0 1.5rem 1rem 0;
}

/* Scope body heading sizes without touching DB content */
.newsroom-article-body h1,
.newsroom-article-body h2 { font-size: 1.4em; font-weight: 500; color: var(--bs-body-color); }
.newsroom-article-body h3 { font-size: 1.2em; font-weight: 500; color: var(--bs-body-color); }
.newsroom-article-body h4,
.newsroom-article-body h5 { font-size: 1.05em; font-weight: 500; color: var(--bs-body-color); }
.newsroom-article-body p  { font-size: 0.975em; line-height: 1.75; }

.newsroom-author-bio {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  border: 0.5px solid var(--bs-border-color);
  border-radius: 10px;
  padding: 1.25rem;
  margin-top: 2rem;
}

.newsroom-author-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.newsroom-author-name {
  font-size: 1em;
  font-weight: 500;
}



img.newsroom-main     { width:100%; aspect-ratio: 1.5/1;  object-fit:cover; }
img.newsroom-picks    { width:100%; aspect-ratio: 1.25/1; object-fit:cover; }
img.newsroom-sections { width:100%; aspect-ratio: 2/1;    object-fit:cover; }
img.newsroom-sidebar  { width:100%; }/*  aspect-ratio: 1/1;    object-fit:cover;  */
img.newsroom-logo {
  display: block;
  max-width: 100%;
  max-height: 95px;
  width: auto;
  height: auto;
}

/* on newsroom/members _editors_picks.cfm this constrains the height of the divs for the 3 logo files so they align horizontally */
.news-image-wrapper {height: 130px;display: flex;align-items: center;justify-content: center;}

/**************************
*
* forms and controls
*
**************************/

label {margin-left:.1rem;}

div.form-container {
  border: .2rem solid #f7f7f9;
  padding: 1.5rem;
  margin: 0 auto 1.5rem auto;
}

input:focus, select:focus{
  outline: 0 0 0 0  !important;
  box-shadow: 0 0 0 0 !important;
}

/* changes border color on all form inputs sitewide */
.form-control, .form-select {
  border-color: var(--bs-gray-500,inherit);
}
/* changes border color on all focused form inputs sitewide */
.form-control:focus, .form-select:focus {
  border-color: #FFB700;
}

#profileForm input[type=radio] {
  transform:scale(1.5);
}

/* remove button glow */
.btn-primary:focus,
.btn-primary:active{
    box-shadow:none !important;
    outline:0px !important;
}

.btn-green {
  background-color:rgb(40, 167, 69);
  border-color:rgb(30, 157, 59);
  color:rgb(255,255,255);
}
.btn-green:hover {
  background-color: rgb(60, 187, 89);
  border-color:rgb(30, 157, 59);
  color:rgb(255,255,255);
}

.btn-light {
  background-color: #d8d8d8;
  border-color:#d8d8d8;
}
.btn-light:hover {
  background-color: #b8b8b8;
  border-color:#b8b8b8;
}

.btn.btn-royal {
  background-color: var(--bs-royal);
  color:#ffffff;
  text-decoration: none;
}
.btn.btn-royal:hover {
  background-color: var(--bs-royal-hover,inherit);
  color:#ffffff;
  text-decoration: none;
}
.btn.btn-royal:active, .btn.btn-royal.active {
  background: var(--bs-royal-active,inherit);
  color: #fff;
  text-decoration: none;
}

.form-section-divider {
  width: 80%;
  margin: 1.5rem auto;
  border-top: 1px solid #9ca3af;
}

/* Sage outline button variant */
.btn-outline-sage {
  --bs-btn-color: var(--bs-royal, #0276b1);
  --bs-btn-border-color: var(--bs-royal, #0276b1);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-royal, #0276b1);
  --bs-btn-hover-border-color: var(--bs-royal, #0276b1);
  --bs-btn-focus-shadow-rgb: 2,118,177;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-royal, #0276b1);
  --bs-btn-active-border-color: var(--bs-royal, #0276b1);
  --bs-btn-disabled-color: var(--bs-royal, #0276b1);
  --bs-btn-disabled-border-color: var(--bs-royal, #0276b1);
}

.btn-outline-danger {
  background:#FFF;
}
.btn-outline-danger:hover {
  background: #fff3cd;
  color: #DC3545;
}


/* student pill (hotdog) nav that shows in place of hamburger */
/* Keep the scroll snapping row feel */
.student-quickbar{
  position: sticky;
  top: var(--fixed-header-h, 74px); /* fallback if JS doesn’t run */
  z-index: 1020;
  background: #fff;
  padding: .5rem 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.student-quickbar .quickbar-scroll {
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: .25rem;
}

/* Chip pill feel */
.student-quickbar .btn-outline-sage {
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 50rem;
  padding: .25rem .75rem;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.student-quickbar .btn-outline-sage:hover {
  background-color: var(--sage-light, #f0f5f2);
  border-color: var(--sage, #3b6f5c);
  color: var(--sage, #3b6f5c);
}

/* student profile submit sticky button */
  .sticky-save{position:sticky;bottom:0;z-index:1030;padding:1rem 0;margin-top:2rem}
  .sticky-save .bar{border-top:1px solid var(--bs-border-color)} /* add bar class to <div class='container pt-2 to add a light gray top border */





/* student bonus point buttons */
/* ----- Bonus pills (scoped) -------------------------------------------- */
.bonus-card .progress{height:14px}
.bonus-card .grid{display:flex;flex-wrap:wrap;gap:.5rem}
.bonus-card .grid>a{margin:0}

/* Base pill */
.bonus-card .pill{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .9rem .5rem .9rem;border-radius:9999px;border:1px solid transparent;text-decoration:none;font-weight:600;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.bonus-card .pill:focus-visible{outline:0;box-shadow:0 0 0 .2rem rgba(30,158,111,.35)} /* a11y focus */

/* Icons inside pills */
.bonus-card .pill i{font-size:.9rem;position:relative;top:1px}

/* Available (unclaimed) */
.bonus-card .pill-claim{background-color:#1E9E6F;color:#fff;border-color:#1E9E6F}
.bonus-card .pill-claim i{color:#fff}
.bonus-card .pill-claim:hover{background-color:#21976c;border-color:#21976c;color:#fff;text-decoration:none}

/* +points badge inside available pills */
.bonus-card .pill-claim .points{display:inline-block;padding:.2rem .5rem;border-radius:.5rem;font-size:.8em;font-weight:700;line-height:1;margin-left:.25rem;background-color:#fff;color:#1E9E6F;box-shadow:0 1px 2px rgba(0,0,0,.08);transition:background-color .2s ease,color .2s ease,transform .12s ease}
.bonus-card .pill-claim:hover .points{background-color:#d9f2e7;color:#145c45}

/* Claimed */
.bonus-card .pill-claimed{background-color:var(--bs-gray-100);color:var(--bs-gray-600);border-color:var(--bs-gray-300)}
.bonus-card .pill-claimed i{color:var(--bs-gray-500)}
.bonus-card .pill-claimed .points{background-color:#fff;color:var(--bs-gray-600)}

/* standardized test scores */
.form-check-input-lg { width: 1.25rem; height: 1.25rem; }
/* small helper tone down */
.text-helper { font-size: .925rem; color: var(--bs-secondary-color, #6c757d); }
.testing .score-card .card-header{ border-bottom:0 }
.testing .score-card .card-header .title{ font-weight:600 }
.testing .score-card .chip{ padding:.25rem .5rem; border-radius:999px; background:var(--bs-gray-100) }
.testing .score-card .input-group-text{ background:var(--bs-gray-100) }
.testing .score-card .hint{ font-size:.875rem; color:var(--bs-gray-600) }
.testing .score-card .list-empty{ font-style:italic; color:var(--bs-gray-600) }
.testing .score-card .section-divider{ border-top:1px solid var(--bs-border-color) }

.exam-card .btn[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); transition: transform .2s ease; }
.exam-card .btn[aria-expanded="false"] .fa-chevron-down { transform: rotate(0deg);    transition: transform .2s ease; }

.score-card .btn[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); transition: transform .2s ease; }
.score-card .btn[aria-expanded="false"] .fa-chevron-down { transform: rotate(0deg);    transition: transform .2s ease; }

.sage-info-card {
  background-color: var(--bs-gray-100);
  border-left: 0.25rem solid var(--bs-sage-border);
  border-radius: 0.5rem;
}

/* Responsive type tweak */
@media (max-width:576px){.bonus-card .pill{font-size:.95rem}}

/* student high school / GPA page */
#gpa-section .form-control {
  border-top-right-radius: .375rem !important;
  border-bottom-right-radius: .375rem !important;
  /* adds right side form input corner round inside of input-group div */
}
#gpa-section .form-control:valid, #gpa-section .form-control:invalid {
  border-color: var(--bs-border-color);
  box-shadow: none;
}


.btn.btn-sage {
  color: #fff;
  background-color:var(--bs-royal);
}

.btn.btn-sage:hover {
  color: #fff;
  background-color:var(--bs-royal-hover,inherit);
}

.btn.btn-sage:active, .btn.btn-sage.active {
  color: #fff;
  background: var(--bs-royal-active,inherit);
}

#btnStep2.btn-sage:disabled {
  color: #fff;
  background-color:var(--bs-gray-600,inherit);
}

.btn-prime {
  color:#fff;
  background-color:var(--bs-prime,inherit);
}
.btn-prime:hover {
  color: #fff;
  background-color:#007bb0;
}

.btn-mango {
  color: #000;
  background-color:#ffb700;
}

.btn-gray {
  color: var(--bs-gray-800,inherit);
  background-color: var(--bs-gray-300,inherit);
  border:1px solid #6c757d;
}
.btn-tiny { padding: 0.125rem 0.25rem; font-size: .75rem; min-width: 1.3rem; }

.btn-floating {
  opacity: 0.6!important;
  position: absolute;
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}

.btn-floating:hover {
  opacity:1!important;
}

.btn-href-disabled {
  background-color: var(--bs-gray-200,inherit)!important;
  border-color: var(--bs-gray-400,inherit)!important;
}

/************************
* form validation to override bootstrap
*************************/
.form-control.no-validate:valid, .form-control.no-validate.is-valid {
  border-color: #ced4da;
  padding-right: .75rem;
  background: none;
}

/* remove tick mark on valid form entries - leaves green border */
.form-control.is-valid, .form-control:valid, .was-validated {
  background-image: none !important;
}
/* remove red X on valid form entries - leaves red border */
.form-control.is-invalid, .form-control:invalid {
  background-image: none !important;
}

.form-check-input.is-valid~.form-check-label, .was-validated .form-check-input:valid~.form-check-label {
  color: #212529;
}

.form-check-input.is-valid:checked~.form-check-label::before, .was-validated .form-check-input:valid:checked~.form-check-label::before {
  border-color: #adb5bd;
  background-color: #34ce57;
}

#collegeCustomSearch input[type='checkbox'] {
  margin-top:.45em;
}

/* Icon alignment (same width for all left icons) */
.otp-setup-form .input-group-text {
  width: 45px;
  justify-content: center;
  padding: 0; /* Remove excess padding */
}

/* Match input height to Bootstrap defaults */
.otp-setup-form .form-control {
  height: calc(2.375rem + 2px); /* Matches regular form-control height */
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

/* Normalize buttons (same height and width) */
.otp-setup-form .btn-sage {
  min-width: 150px;
  white-space: nowrap;
}
.otp-setup-form .form-floating > label {
  padding-top: 0.5rem;
  padding-left: 0.5rem;
}


/**************************
*
* images
*
**************************/

img.collegelogo {
  max-width:300px;
  height: auto;
  margin:5px;
}

img.collegeLogoRightColumn {
  margin:0 1.2rem 3rem 1.2rem;
}

img.newSchoolLogo {
  max-height:125px;
  width:auto;
}

img.partnerLogo {
  float: right;
  max-width: 180px;
  max-height: 80px;
  width: auto;
  height: auto;
  margin: 0 0 12px 16px;
}

.scrollable-menu {
  height: auto;
  max-height: 400px;
  overflow-x: hidden;
}

.inpageanchor {
  position: relative;
  border-top: 100px solid transparent;
  margin: -100px 0 0;
  z-index:-1;/* slide it under layer above so it's not visually down thanks to border-top */
}

.inpageanchor-profile {
  position: relative;
  border-top: 130px solid transparent;/*transparent*/
  margin: -130px 0 0;
  z-index:-1;/* slide it under layer above so it's not visually down thanks to border-top */
}


/* this works better maybe - see faq.cfm */
.anchor {
  position: relative;
}

.anchor a {
  position: absolute;
  left: 0px;
  top: -125px;
}




/* === START: custom-width helpers, calendar/events, social icon colors === */

/* Default for xs and sm (small devices and smaller) */
.custom-width {
  width: 90%;
}

/* Medium devices (md, ≥768px) */
@media (min-width: 768px) {
  .custom-width-md-75 {
    width: 75%;
  }
}

/* Large devices (lg, ≥992px) */
@media (min-width: 992px) {
  .custom-width-lg-50 {
    width: 50%;
  }
}

/* Extra large devices (xl, ≥1200px) */
@media (min-width: 1200px) {
  .custom-width-xl-50 {
    width: 50%;
  }
}

#step_cec_body {
  min-height:35vh;resize:both;overflow:auto
}

.event_body {
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
  mask-image: linear-gradient(180deg, #000 60%, transparent);
  font-size: inherit;
  line-height: inherit;
}

.calendar_tile {
  height: 6rem;
  width: 6rem;
}

/* Sticky month headers (works for students AND non-students) */
.month-sticky{
  position: sticky;
  /* sit below fixed header + (optional) student quickbar */
  top: calc(var(--fixed-header-h, 64px) + var(--quickbar-h, 0px) + 8px);
  z-index: 1010;
  background: #fff;
  padding: .25rem 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

/* Event card look & feel (aligned with student UI) */
.event-card{ border-radius: .75rem; }
.event-card .card-body{ padding: 1rem 1rem; }          /* compact, like other student cards */
.event-card .calendar_tile{ border-radius: .75rem; }    /* reuse your existing tile */
.event-card .badge-prime{
  background: #ffe9bf; color: #8a5a00;
  border-radius: .5rem; padding: .2rem .5rem;
  font-size: .8rem;
}

/* Tidy little visual touches */
.event-card .list-inline{ margin-bottom: .25rem; }
.event-card a.btn, .event-card .btn{ border-radius: 50rem; }


.fa-youtube { color: #FF0000; }
.fa-vimeo { color: #1AB7EA; }
.fa-square-facebook { color: #4267B2; }
.fa-facebook-messenger { color: #00B2FF; }
.fa-snapchat { color: #000000; }
.fa-x-twitter { color: #000000; }
.fa-instagram { color: #8841a6; }
.fa-linkedin-in { color: #0A66C2; }
.fa-pinterest { color: #F0002A; }
.fa-flickr { color: #ff0084; }
.fa-head-side-goggles { color: #09A1E4; }
.fa-circle-z { color: #F16822; }
.fa-tiktok { color: #EE1D52; }
.fa-square-threads { color: #000000; }

/* used to keep the social icons in the footer always white on blue */
#footer .footer-top .social-links i.fa-instagram, #footer .footer-top .social-links i.fa-linkedin-in {
  background: #209dd8;
  color: #fff;
  text-decoration: none;
}

#college-search img.square-175 {
  width: 175px;
  height: 175px;
  object-fit: cover;
}

#college-search img.search-background {
  width: 300px;
  height: 200px;
  object-fit:cover;
}

#college-search .college-search-image {
  z-index: -1;
}

#college-search .college-logo {
  height: 4.5rem;
  z-index: 10;
  align-items: center;
  border-radius: 0.5rem;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
  display: flex;
  justify-content: center;
  overflow: hidden;
  width: 4.5rem;
  background-color: #ffff;
}

#college-search .sage-logo {
  left: 2rem;
  margin-top: -3.5rem !important;
  margin-bottom: 1.5rem;
  position: absolute;
}

#college-search .cap-contain {
  right: 0.5rem;
  margin-top: -4.5rem !important;
  order: 1;
  overflow: hidden;
  width: 4.5rem;
  position: absolute;
  z-index: 10;
  height: 3rem;
}

#college-search .sage-cap-image {
  padding: 0.6rem;
  border-radius: 50%;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
  position:absolute;
  display: flex;
  justify-content: center;
}

.clickable:hover {
  background-color: var(--bs-gray-200,inherit);
  cursor:pointer;
}
.clickable:hover span.label {
  text-decoration: underline;
}
.disabled:hover {
  cursor:not-allowed;
}

.btn-delete-img {
  position: absolute;
  right: 7px;
  top: 5px;
  opacity: .8;
  border-radius: 0 !important;
}

.upload-thumbnail { border-color: var(--bs-sage-border); background-color: #e0eeee; }
.forum-thumbnail { width: 3.5rem; height: 3.5rem; border-color: var(--bs-sage-border); border-radius: 50%; }
.thread-thumbnail { width: 128px; height: 128px; border-color: #0c4040; }
.thread-user { min-width: 156px; }
.thread-message { min-height: 156px; border-radius: 1rem !important; }
.bg-forum { background-color: #e0eeee; }
.bg-forum-light { background-color: #fafafa; }
#forum a { color: #0c4040; }
#forum a:hover { color: #09a1e4; }

.stretched-anchor { position: relative; }
.stretched-anchor:hover a { color: #09a1e4; }




/* === START: stream/newsroom, pdf-library, stepper === */

/* --- Section scaffolding ------------------------------------------------ */
/* ----- Stream (scoped to .stream wrapper) ------------------------------- */
.stream .section { padding-top:1.25rem; margin-top:1.25rem;}
.stream .section-header { display:flex; align-items:center; gap:.5rem; margin-bottom:.75rem; }
.stream .section-header .eyebrow { font-size:.8rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--bs-gray-600); }
/* Stronger gradient HR with brand colors */
.stream .hr-section {
  height: 4px;
  border: 0;
  margin: 1.5rem 0;
  border-radius: 999px;
  opacity: 1;
  background: linear-gradient(90deg, #0276b1 0%, #09a1e4 50%, #0276b1 100% );
}

/* --- News list ---------------------------------------------------------- */
.stream .news .card { overflow:hidden; }
.stream .news .card .card-body { padding:1rem 1.125rem; }
.stream .news .card-title { font-size:1.125rem; line-height:1.25; margin-bottom:.25rem; }
.stream .news .card-text { color:var(--bs-gray-700); }
.stream .news .clamp-2 { display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.stream .news .clamp-3 { display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Alternate the second news card for a visual break */
.stream .news .card:nth-child(2) { background:linear-gradient(180deg,#f8fbfd 0%,#ffffff 25%); border-left:4px solid #0276b1; }

/* --- Events ------------------------------------------------------------- */
.stream .events .card .card-body { padding:1rem 1.125rem; }
.stream .cal { width:86px; }
.stream .cal .month { background:var(--bs-danger); color:#fff; font-weight:600; padding:.25rem; border-top-left-radius:.375rem; border-top-right-radius:.375rem; text-align:center; }
.stream .cal .day { font-size:1.75rem; font-weight:700; text-align:center; padding:.25rem 0; }
.stream .cal .dow { color:var(--bs-danger); font-weight:600; text-align:center; padding-bottom:.25rem; }

.stream .cal-link{ text-decoration:none }
.stream .cal-link .calendar_tile{ transition:transform .12s ease, box-shadow .12s ease }
.stream .cal-link:hover .calendar_tile{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.12) }

#sage_map {
  height: calc(80vh - 56px);
}


.panel { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background-color: var(--bs-gray-100); padding: 1.5rem; color: var(--site-dark); }
img.search-background { width: 100%!important; height: 200px; object-fit: cover; }
.leaflet-container {
  font-family: unset!important;
  font-size: unset!important;
  line-height: unset!important;
}
img.huechange { filter: hue-rotate(120deg); }

/* SFC agent library */
#pdf-library .card-img-top {
  width: 100%;
  height: 280px;
  object-fit: contain;     /* no cropping */
  background-color: #f8f9fa;
  padding: 0.5rem;         /* optional breathing room */
  border: 1px solid #e5e7eb;
  border-radius: 0.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

#pdf-library .card {
  border-radius: 0.5rem;
}

#pdf-library .card-title {
  font-size: 1.05rem;
  font-weight: 600;
}

#pdf-library .card-text {
  font-size: 0.95rem;
  color: #555;
}

/* Optional: subtle hover affordance */
#pdf-library .card:hover {
  transform: translateY(-2px);
  transition: transform 0.15s ease-in-out;
}

/* ============================================================
   SAGE Stepper (100% Replacement CSS)
   Clean horizontal stepper with subtle connector rail
   ============================================================ */

.sage-stepper {
  position: relative;
}

/* Step item wrapper */
.sage-step {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

/* Number circle */
.sage-step-num {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 0.95rem;
  /* White background prevents underline effect */
  background: #fff;
  color: var(--bs-sage, #099fe4);
  border: 2px solid rgba(9, 159, 228, 0.55);
  /* Subtle depth */
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05);
}

/* Text block alignment */
.sage-step-body {
  padding-top: 0.15rem;
}

.sage-step-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.sage-step-text {
  margin-bottom: 0;
}

/* Hover enhancement (optional but nice) */
.sage-step:hover .sage-step-num {
  background: var(--bs-sage-bg-subtle, #e7f5ff);
}

/* Mobile: stack steps cleanly with subtle separators */
@media (max-width: 767.98px) {
  .sage-step {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--bs-gray-200);
  }

  .sage-step:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
}

.sage-note {
  padding-left: 1rem;
  border-left: 3px solid rgba(9, 159, 228, 0.35);
  color: var(--bs-gray-700);
}

/* Tuition Rewards acknowledgment checkbox */
.ack-checkbox {
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.2rem;
  cursor: pointer;
}
/* ─────────────────────────────────────────────────────────
   College Match  (AI feature)
   Used by: app/views/site/student/college/collegematch.cfm
   JS:      assets/js/claude/college_match.js
   Add this block to the bottom of _components.css
   ───────────────────────────────────────────────────────── */

.cm-filter-bar {
  background: #fff8e1;
  border: 1px solid #FFB700;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
  color: #5a3e00;
}

.cm-beta-badge {
  position:relative;
  top:13px;
}
.cm-college-logo {
  min-height:80px;
  background:#fff;
  border-bottom:0;
}

#spinner-overlay { display: none; text-align: center; padding: 2.5rem 0; }
#results-section { display: none; }
#error-alert     { display: none; }

/* ── Result card ──────────────────────────────────────── */

/* No custom border — inherits standard Bootstrap card style */
.cm-card-header {
  min-height: 130px;
}
/* Logo placeholder (when no logo available) */
.cm-logo-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #e8f4fd;
  color: #09a1e4;
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.college-match .card-body { padding-top: 0; }

/* Fit badges */
/* Fit badge row */
.cm-fit-strong-match .card-body,
.cm-fit-good-match .card-body,
.cm-fit-possible-match .card-body,
.cm-fit-reach .card-body,
.cm-fit-likely .card-body { padding-top: 0; }

.cm-fit-strong-match .cm-card-header,
.cm-fit-good-match .cm-card-header,
.cm-fit-possible-match .cm-card-header,
.cm-fit-reach .cm-card-header,
.cm-fit-likely .cm-card-header { border-bottom: none; }

.cm-fit-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 1rem;
  margin: 0 -1rem 0.75rem -1rem;
  border-bottom: 1px solid rgba(0,0,0,0.7);
  border-top: 1px solid rgba(0,0,0,0.7);
}
/* row background */
.cm-fit-strong-match   .cm-fit-row { background: #d1e7dd; }
.cm-fit-good-match     .cm-fit-row { background: #e8f4fd; }
.cm-fit-possible-match .cm-fit-row { background: #f0f0f0; }
.cm-fit-likely         .cm-fit-row { background: #d2f4ea; }


/* Score pill — dark background per fit type */
.cm-fit-strong-match   .cm-score-pill { background: #0a3622; color: #fff; }
.cm-fit-good-match     .cm-score-pill { background: #054270; color: #fff; }
.cm-fit-possible-match .cm-score-pill { background: #495057; color: #fff; }
.cm-fit-reach          .cm-score-pill { background: #856404; color: #fff; }
.cm-fit-likely         .cm-score-pill { background: #0a3622; color: #fff; }

/* Reach — gold/warning instead of red */
.cm-badge-reach    { background: #fff3cd; color: #856404; }
.cm-fit-reach      .cm-fit-row { background: #fff3cd; }
.cm-fit-reach      .card-header { border-bottom-color: #ffc107; }

/* Fit badge */
.cm-fit-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 20px;
}


/* Score pill */
.cm-score-pill {
  font-size: 0.83rem;
  font-weight: 700;
  color: #0a2540;
  background: rgba(0,0,0,0.08);
  border-radius: 20px;
  padding: 2px 10px;
}


/* Score bars */
.cm-score-bar-wrap {
  height: 5px;
  background: #e9ecef;
  border-radius: 3px;
  overflow: hidden;
  width: 100%;
}
.cm-score-bar {
  height: 100%;
  border-radius: 3px;
  background: #09a1e4;
  transition: width 0.45s ease;
  width: 0;
}
.cm-score-bar--total { background: #198754; }

/* Stat chips */
.cm-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 0.78rem;
}
.cm-stat-chip {
  background: #f4f6f9;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 2px 7px;
  color: #495057;
  font-size: 0.78rem;
}
.cm-stat-selective { background: #d1e7dd; border-color: #a3cfbb; color: #0a3622; }
.cm-stat-moderate  { background: #cfe2ff; border-color: #9ec5fe; color: #084298; }

/* Price */
.cm-price-line    { font-size: 0.85rem; margin-top: 0.35rem; }
.cm-price-ok      { color: #198754; font-weight: 600; }
.cm-price-warn    { color: #856404; font-weight: 600; }
.cm-price-neutral { color: #6c757d; font-weight: 600; }
.cm-price-note    { font-size: 0.78rem; margin-left: 3px; }
.cm-tuition-source{ font-size: 0.7rem; color: #adb5bd; margin-left: 3px; }

/* Score breakdown table */
.cm-breakdown-table td { padding: 3px 4px; vertical-align: middle; }
.cm-breakdown-factor   { font-size: 0.82rem; color: #6c757d; width: 130px; }
.cm-breakdown-score    { font-size: 0.82rem; text-align: right; padding-right: 6px !important; width: 32px; }
.cm-breakdown-max      { font-size: 0.75rem; color: #adb5bd; width: 42px; white-space: nowrap; }
.cm-breakdown-total td { font-weight: 600; border-top: 1px solid #dee2e6; padding-top: 6px !important; }

/* Explanation */
.cm-explanation {
  font-size: 0.875rem;
  color: #495057;
  background: #f8f9fa;
  line-height: 1.55;
}

/* Dev control panel */
.student-card {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.cm-sample-query {
  font-size: 0.78rem;
  font-weight: 400;
  cursor: pointer;
  background: #f4f6f9;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 3px 10px;
  color: #495057;
  transition: background 0.15s, color 0.15s;
}
.cm-sample-query:hover {
  background: #e8f4fd;
  border-color: #09a1e4;
  color: #054270;
}


/* Location Score Bars */
.score-bar-track {
  height: 6px;
  background: #e9ecef;
}

.score-bar-fill-walk,
.score-bar-fill-transit,
.score-bar-fill-bike    { height: 6px; }

.score-bar-fill-walk    { background: #1a9be6; }
.score-bar-fill-transit { background: #7c4dff; }
.score-bar-fill-bike    { background: #00b97a; }

.score-bar-map { height: 320px; width: 100%; }

/* Transport chips */
.transport-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bs-secondary-bg, #f1f3f5);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 20px;
  padding: 2px 7px;
  font-size: 0.7rem;
  color: var(--bs-secondary-color, #6c757d);
  white-space: nowrap;
}

.transport-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.transport-chip-dot--walk    { background-color: #1D9E75; }
.transport-chip-dot--transit { background-color: #7F77DD; }
.transport-chip-dot--bike    { background-color: #378ADD; }

.transport-chip-score {
  font-weight: 600;
  color: var(--bs-body-color, #212529);
}

.transport-chip-na {
  color: var(--bs-tertiary-color, #adb5bd);
}

/* Badge row (Fee Waiver / FastTrak / SAGE Prime) */
.badge-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  vertical-align: middle;
}

.badge-item i {
  line-height: 1;
  display: block;
  font-size: 0.85rem;
}

.badge-item span {
  line-height: 1;
  display: block;
}

.badge-fee-waiver { color: #198754; } /* green, matching text-green */
.badge-fasttrak   { color: #e6a817; } /* mango */
.badge-sage-prime { color: var(--color-prime, #0d6efd); } /* match your existing text-prime */


.neighborhood-score-bar-fill { height: 8px; }

/* Neighborhood section */
.neighborhood-score-num {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  color: #1a1a2e;
}

.neighborhood-category-header {
  margin-top: 0.5rem;
}

.density-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 0 2px;
}

.dot-high  { background: #1a9be6; }
.dot-empty { background: #dee2e6; }

.score-muted-0 { color: var(--bs-gray-200); }
.score-muted-1 { color: var(--bs-gray-300); }
.score-muted-2 { color: var(--bs-gray-500); }
.score-muted-3 { color: var(--bs-gray-700); }
.score-muted-4 { color: var(--bs-gray-900); }

.score-label-text {
  min-height: 2.8em;  /* enough for two lines */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.score-card-top {
  min-height: 70px;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}
.score-card-inner {
  display: flex;
  flex-direction: column;
}

.score-card-inner .score-bar-track {
  margin-top: auto;
}

/* ── ft-form ───────────────────────────────────── */
.ft-form .form-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: #333;
  margin-bottom: 0.2rem;
}

.ft-form .form-control,
.ft-form .form-select {
  background-color: #f5fcff;
  border: 1px solid #ced4da;
  border-radius: 6px;
}
.ft-form .form-control.no-validate {
  background-color: #f5fcff;
}

.ft-form .form-control:focus,
.ft-form .form-select:focus {
  background-color: #fff;
  border-color: #86b7fe;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

.ft-form .row {
  row-gap: 0.25rem;
}

.ft-form .help-text,
.ft-form .form-text {
  font-size: 0.8rem;
  color: #6c757d;
}

.ft-form .input-readonly,
.ft-form input[readonly],
.ft-form input[disabled],
.ft-form input[readonly][disabled] {
  background-color: #e2e8ea;
  color: #6c757d;
  cursor: not-allowed;
}

/* ---- senior submit alert on sponsor home page ---- */
.tr-submit-alert { background: #fff; border: 1px solid rgba(220, 53, 69, .35); border-radius: .65rem; overflow: hidden; box-shadow: 0 .125rem .35rem rgba(0, 0, 0, .04); }
.tr-submit-alert-intro { background: rgba(220, 53, 69, .035); }
.tr-submit-alert-intro p { font-size: .95rem; }
.tr-submit-alert-icon { width: 44px; height: 44px; border: 3px solid var(--bs-danger); border-radius: 50%; color: var(--bs-danger); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.tr-submit-student { border-left: 1px solid var(--bs-border-color);}
.tr-submit-student-name { font-size: 1.1rem; font-weight: 600; line-height: 1.25; margin-bottom: .2rem;}
.tr-submit-student-points { margin-top: .75rem; margin-bottom: .75rem; font-size: .9rem; font-weight: 500; color: var(--bs-secondary-color); }
.tr-submit-btn { font-weight: 600; white-space: nowrap; }
.tr-submit-deadline { border-left: 1px solid var(--bs-border-color); background: rgba(248, 249, 250, .65); }
.tr-submit-deadline p { line-height: 1.35; }
.tr-submit-calendar { color: var(--bs-danger); font-size: 1.6rem; line-height: 1; }

.tr-submit-student-profile {
  margin-top: .5rem;
  font-size: .85rem;
}

.tr-submit-student-profile a {
  color: var(--bs-secondary-color);
  text-decoration: none;
}

.tr-submit-student-profile a:hover {
  text-decoration: underline;
}


.tr-submit-alert-intro,
.tr-submit-student > .h-100,
.tr-submit-deadline > .h-100 {
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}


@media (max-width: 991.98px) {
  .tr-submit-student,
  .tr-submit-deadline {
    border-left: 0;
    border-top: 1px solid var(--bs-border-color);
  }

  .tr-submit-btn {
    width: 100%;
  }
}
/* Tuition Rewards submission support */

.tr-submit-help-rule {
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  background: var(--bs-tertiary-bg);
}

.tr-submit-help-icon {
  width: 2.25rem;
  min-width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-danger);
  font-size: 1.1rem;
}

.tr-submit-faq {
  border-top: 1px solid var(--bs-border-color);
}

.tr-submit-faq-item {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--bs-border-color);
}

.tr-submit-faq-item h5 {
  font-weight: 600;
  margin-bottom: .5rem;
}

.tr-submit-faq-item p:last-child {
  margin-bottom: 0;
}


/* === END: components === */