/* === 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;
  }
} */


/*******
*
* 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: var(--site-base-500);
  color: #fff;
  border-color: var(--site-base-500);
  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: var(--site-base-500); }

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

.newsroom-read-more {
  font-weight: 500;
  color: var(--site-base-500);
  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: var(--bs-gray-100);
  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-size: 1.15em; 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; font-weight: 500; line-height: 1.3; }
.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: var(--site-base-500);
}

#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: var(--site-warning-subtle);
  color: var(--site-danger);
}


/* student pill (hotdog) nav that shows in place of hamburger.
   base .student-quickbar rule lives in _student_login.css */
.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 — base .sticky-save rule lives in style.css */
  .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 — pill styles live in _student_login.css (token-based) */
.bonus-card .progress{height:14px}
.bonus-card .pill-claimed i{color:var(--bs-gray-500)}

/* 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;
}

/* 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:var(--site-base-500);
}

.btn-gray {
  color: var(--bs-gray-800,inherit);
  background-color: var(--bs-gray-300,inherit);
  border:1px solid var(--bs-gray-600);
}

.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: var(--bs-gray-400);
  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, .was-validated {
  background-image: none !important;
}

.form-check-input.is-valid~.form-check-label, .was-validated .form-check-input:valid~.form-check-label {
  color: var(--bs-gray-900);
}

.form-check-input.is-valid:checked~.form-check-label::before, .was-validated .form-check-input:valid:checked~.form-check-label::before {
  border-color: var(--bs-gray-500);
  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 lives in the College events section further down */

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

/* sticky month headers: .month-sticky lives in style.css */

/* 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: var(--site-base-200); 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: var(--site-base-500); }
.fa-circle-z { color: #F16822; }
.fa-tiktok { color: #EE1D52; }
.fa-square-threads { color: #000000; }

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

/* Search-result cards reuse the college-profile hero at card scale: members get the photo hero,
   non-members the gradient variant. Scoped by #college-search so these beat the profile-page rules. */
#college-search .college-hero {
  height: 230px;
  margin: 0;
  border-radius: 0;
  flex: 0 0 auto;
}

#college-search .college-hero--gradient {
  height: 230px;
  min-height: 0;
  padding-top: 0;
}

/* member with no campus photo -- sage gradient, since --gradient's gold is the non-member signal */
#college-search .college-hero--sage {
  background: linear-gradient(135deg, var(--site-sage-900) 0%, var(--site-sage-700) 60%, var(--site-sage-600) 100%);
}

#college-search .college-hero__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  padding: 0 1rem 0.75rem;
  z-index: 1;
}

#college-search .college-hero__name {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 2px;
}

#college-search .college-hero__address { font-size: 0.8rem; margin-bottom: 2px; }
#college-search .college-hero__address a { color: rgba(255,255,255,.85); text-decoration: none; }
#college-search .college-hero__address a:hover { color: var(--site-sage-400); }
#college-search .college-hero--gradient .college-hero__address a:hover { color: var(--site-base-400); }

/* type | region | setting | size -- moved off the card body into the hero */
#college-search .college-hero__meta {
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,.7);
}

#college-search .college-hero__badges { margin: 6px 0 4px; gap: 6px; }
#college-search .college-hero__badge { font-size: 0.62rem; padding: 3px 9px; }

#college-search .college-hero__logo {
  top: 12px;
  right: 12px;
  max-width: 6.5rem;
  padding: 8px 10px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

#college-search .college-hero__logo img { max-height: 3.6rem; }

/* label/value rows under the hero -- the numbers a student compares schools on */
#college-search .card-fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--bs-border-color);
  font-size: 0.8rem;
}

#college-search .card-facts .card-fact:last-child { border-bottom: 0; }
#college-search .card-fact__label { color: var(--bs-secondary-color); }
#college-search .card-fact__val { font-weight: 700; white-space: nowrap; }

.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: var(--site-base-500); }

.stretched-anchor { position: relative; }
.stretched-anchor:hover a { color: var(--site-base-500); }




/* === 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, var(--site-base-600) 0%, var(--site-base-500) 50%, var(--site-base-600) 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 var(--site-info); }

/* --- 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); }

/* linked panels (stretched-link cards) darken their border on hover */
.panel:has(a.stretched-link) { transition: border-color .2s ease; }
.panel:has(a.stretched-link):hover { border-color: var(--site-base-600); }
.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: var(--bs-gray-100);
  padding: 0.5rem;
  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, #FFB700);
  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, #FFF4DA);
}

/* 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 var(--site-base-500);
  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: var(--site-base-500);
  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: var(--bs-gray-150); }
.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: var(--bs-gray-700); 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: var(--site-warning-subtle); color: #856404; }
.cm-fit-reach      .cm-fit-row { background: var(--site-warning-subtle); }
.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: var(--site-base-900);
  background: rgba(0,0,0,0.08);
  border-radius: 20px;
  padding: 2px 10px;
}


/* Score bars */
.cm-score-bar-wrap {
  height: 5px;
  background: var(--bs-gray-200);
  border-radius: 3px;
  overflow: hidden;
  width: 100%;
}
.cm-score-bar {
  height: 100%;
  border-radius: 3px;
  background: var(--site-base-500);
  transition: width 0.45s ease;
  width: 0;
}
.cm-score-bar--total { background: var(--site-complete); }

/* Stat chips */
.cm-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 0.78rem;
}
.cm-stat-chip {
  background: #f4f6f9;
  border: 1px solid var(--bs-gray-300);
  border-radius: 4px;
  padding: 2px 7px;
  color: var(--bs-gray-700);
  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: var(--site-complete); font-weight: 600; }
.cm-price-warn    { color: #856404; font-weight: 600; }
.cm-price-neutral { color: var(--bs-gray-600); font-weight: 600; }
.cm-price-note    { font-size: 0.78rem; margin-left: 3px; }
.cm-tuition-source{ font-size: 0.7rem; color: var(--bs-gray-500); margin-left: 3px; }

/* Score breakdown table */
.cm-breakdown-table td { padding: 3px 4px; vertical-align: middle; }
.cm-breakdown-factor   { font-size: 0.82rem; color: var(--bs-gray-600); 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: var(--bs-gray-500); width: 42px; white-space: nowrap; }
.cm-breakdown-total td { font-weight: 600; border-top: 1px solid var(--bs-gray-300); padding-top: 6px !important; }

/* Explanation */
.cm-explanation {
  font-size: 0.875rem;
  color: var(--bs-gray-700);
  background: var(--bs-gray-100);
  line-height: 1.55;
}

/* Dev control panel */
.student-card {
  background: #fff;
  border: 1px solid var(--bs-gray-300);
  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 var(--bs-gray-300);
  border-radius: 4px;
  padding: 3px 10px;
  color: var(--bs-gray-700);
  transition: background 0.15s, color 0.15s;
}
.cm-sample-query:hover {
  background: #e8f4fd;
  border-color: var(--site-base-500);
  color: #054270;
}


/* Location Score Bars */
.score-bar-track {
  height: 6px;
  background: var(--bs-gray-200);
}

.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: var(--site-complete); } /* green, matching text-green */
.badge-fasttrak   { color: var(--site-base-500); } /* 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: var(--bs-gray-300); }

.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 var(--bs-gray-400);
  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: var(--bs-gray-600);
}

.ft-form .input-readonly,
.ft-form input[readonly],
.ft-form input[disabled],
.ft-form input[readonly][disabled] {
  background-color: #e2e8ea;
  color: var(--bs-gray-600);
  cursor: not-allowed;
}

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section.partners {
  padding:25px 0;
  overflow: hidden;
}

.section-title {
  text-align: center;
  padding-bottom: 1.50rem;
}

.section-title.collegeList {
  text-align: center;
  padding-bottom: .50rem;
}

.section-title h2 {
  font-size: 2.2rem;
  font-weight: 600;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
  color: var(--site-base-500);
}

.section-title h2.collegeList {
  margin-bottom: .50rem;
  margin-top:1.875rem;
}

.section-title h2::before {
  content: '';
  position: absolute;
  display: block;
  width: 120px;
  height: 1px;
  background: #ddd;
  bottom: 1px;
  left: calc(50% - 60px);
}

.section-title h2::after {
  content: '';
  position: absolute;
  display: block;
  width: 40px;
  height: 3px;
  background: var(--site-base-500);
  bottom: 0;
  left: calc(50% - 20px);
}

.section-title h2.text-sage::after {
  background: var(--site-sage-500);
}

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# College directory
--------------------------------------------------------------*/
#collegeList .logo {
  width:125px;
  min-width:125px;
  height:125px;
  min-height:125px;
}

#collegeList .btn {
  display:inline-block;
  font-weight:500;
  text-align:center;
  vertical-align:middle;
  color:#ffffff;
  user-select:none;
  border:1px solid transparent;
  padding:.4375rem 1.3125rem;
  line-height:1.5;
  border-radius:.25rem;
  white-space: nowrap;
  cursor:pointer;
  font-size:.9375rem;
  transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

#collegeList .btn-collegeList {
  height:38px;
  background-color:var(--site-base-500) !important;
  border-color:var(--site-base-500) !important;
  padding-left:40px;
  padding-right:40px;
}

.college-state-list {
  z-index:1;
}

/*--------------------------------------------------------------
# Newsroom library cards
--------------------------------------------------------------*/
.library-card .card-header {
  position: relative;
  padding: 0;
}

.library-card .card-header .library-card-img {
  opacity:0.8;
  max-width: 100%;
  width: 100%;
  height: auto;
}

.library-card .card-header .library-card-img:hover {
  opacity:1;
}

.library-card .card-header .library-card-title {
  color: white;
  padding: 0.3rem;
  background-color: rgba(var(--site-base-500-rgb), 0.7);
  z-index: 990;
  position: absolute;
  left:0;
  right:0;
  margin: 0 auto;
  bottom: .25rem;
  width:94%;
  letter-spacing: 1px;
}

.library-card .card-body ul {
  margin-left:0;padding-left:25px;padding-right:10px;
}

.library-card .card-body ul li {
  line-height:1.15
}

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

.event_body span.collapse:not(.show) {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    -webkit-mask-image: linear-gradient(180deg, var(--site-dark) 60%, transparent);
    mask-image: linear-gradient(180deg, var(--site-dark) 60%, transparent);
}

.event_body span.collapse.collapsing {
    min-height: 80px !important;
    -webkit-line-clamp: unset;
    line-clamp: unset;
}

.event_body > a.more.collapsed:after  {
    content: '+ Read More';
    font-size: 0.85rem;
}

.event_body > a.less:not(.collapsed):after {
    content: '- Read Less';
    font-size: 0.85rem;
}

a.event-readmore {
  text-decoration: none;
  color: rgb(109,109,109);
  font-size:.7325em;
}

a.event-address  {
  text-decoration: none;
  font-size:.7825em;
}

a.modal-event-title, a.college-profile-name  {
  text-decoration: none;
  color:rgb(13, 10, 253);
}

.event-location {
  white-space: nowrap;
  overflow:hidden;
}

/*--------------------------------------------------------------
# Misc shared components
--------------------------------------------------------------*/
a.tweeter {
  background-color: #1877f2;
  height: 28px;
  padding-left: 12px;
  padding-right: 12px;
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: bold;
}

a.tweeter:hover {
  color: white;
}

@media (max-width: 767.98px) {
  .table-custom th,
  .table-custom td {
      padding: .35em !important;
      font-size:85%;
  }
  .table-custom td.w-33 {
    width:30%!important;
  }
  .table-custom td.w-66 {
    width:70%!important;
  }
}

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

/* Leaflet map popup (assets/js/home/college/map.js) still renders this card markup -- the search
   result cards moved to the college-hero treatment, these stay for the popup. */
#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;
}
img.search-background { width: 100%!important; height: 200px; object-fit: cover; }