:root {
  /** Colors **/
  --mac_blue: #01426A;
  --mac_light_blue: #72c5e7;
  --mac_sheer_blue: #E3F2FA;
  --mac_orange: #D44420;
  --mac_sheer_gray: #E9EBEB;
  --mac_light_gray: #A5ADAF;
  --mac_gray: #5B6770;
  --mac_white: #ffffff;
  --mac_black: #181A1B;
  --mac_secondary_sky_blue: #72C5E7;
  --mac_secondary_gold: #FFB500;
  --mac_secondary_green: #658D3C;  
  --mac_secondary_plum: #8A1B61;  
  --mac_secondary_red: #C8102E;  
  /** Fonts **/
  --heading_style_light: NewslabLight;
  --heading_style_medium: NewslabMedium;
  --bodycopy_style: DIN Next W01 Regular, Helvetica Neue, Helvetica, Arial, sans-serif;
  --bodycopy_weight: normal;
  --title_size: 1.8rem;
  --h1_size: 3.0rem;
  --h2_size: 2.2rem;
  --h3_size: 1.6rem;
  --p_size: 1rem;
  --sub_size: 0.9rem;
  /** Border **/
  --border_gray: 1px solid var(--mac_gray);
  --border_sheer_gray: 1px solid var(--mac_sheer_gray);
  --border_radius: 5px;
}

/* -----------------------
   CONTENT HEADINGS
------------------------ */
#contentcontainter .overview h2 { font-size: 24px; color: #555; }
#contentcontainter .overview h3 { font-size: 16px; color: #555; font-style: italic; }
#contentcontainter .donors h2 { font-size: 20px; color: #00669e; border-bottom: solid 1px #00669e26; margin-bottom: 10px; }
#contentcontainter .funds h2 { font-size: 1.6em; color: #555; white-space: nowrap; }

.wrap_content h1,
.wrap_content > h2,
.part.headline h1,
 h1, h2, h3 {
  margin-top: 25px;
  margin-bottom: 4px;
  color: var(--mac_blue) !important;
  font-family: var(--heading_style_medium);
  line-height: 1.25;
  font-weight: 300;
  text-align: center !important;
}

h1{  font-size: var(--h1_size);}
h2{  font-size: var(--h2_size);}


 h3 {
  margin-top: 15px;
  font-family: var(--bodycopy_style);
  font-size: var(--h3_size);
  line-height: 1.25;
  font-weight: normal;
  display: block;
}

/* ------------------------------
   GLOBAL FORMAT OPTIONS
------------------------------- */

p, ul {
  line-height: 1.45em;
}

.left-align { 
  text-align: left !important; 
}

.center-align { 
  text-align: center !important; 
}

.m-top-0 {
   margin-top: 0 !important; 
}

.fw-normal{
  font-weight: normal !important;
}

.c_doc-background.cr {
  background-color: #f9f9f9 !important;
}

/* -----------------------
   MENU TABS
------------------------ */
#contentcontainter #menuTabsWrapper { width: 100%; max-width: 1100px; margin: 0 auto; }
#contentcontainter ul.menuTabs {
  list-style: none; margin: 1em 0 0; padding: 0; width: 100%;
  display: flex; flex-wrap: wrap;
}
#contentcontainter ul.menuTabs li { display: inline-block; vertical-align: bottom; margin: 0 0 -1px; padding: 0; flex: 25% 1 1; }
#contentcontainter ul.menuTabs li.fullWidth { display: inline-block; margin: 0; padding: 0; width: 100%; }
#contentcontainter ul.menuTabs li.fullWidth a { display: block; margin: 3px; text-align: center; }
#contentcontainter ul.menuTabs li a {
  height: auto; font-size: 18px; color: #555 !important; border-radius: 5px; display: block; font-weight: bold;
  margin: 3px 3px 3px 0px; padding: 11px 5px; text-decoration: none; text-align: center; line-height: 28px; background: #f1f1f1; white-space: nowrap;
}
#contentcontainter ul.menuTabs li a.active,
#contentcontainter ul.menuTabs li a:hover {
  background-color: #fff; color: #00669e !important; border: 1px solid #00669e; border-radius: 5px 5px 0 0;
}
#contentcontainter ul.menuTabs li a[data-tab='Funds'].active,
#contentcontainter ul.menuTabs li a[data-tab='Funds']:hover { margin-right: 0px; }

#contentcontainter {
  background: white; padding: 15px 10px 5px; box-shadow: 0 0 9px rgba(53, 61, 72, 0.25);
  /* max-width: 1100px; */ margin: -3px auto 0;
}

@media only screen and (min-width: 615px) {
  #contentcontainter { background: linear-gradient(180deg, #fff 902px, #f1f1f1 0); border-top: 1px solid var(--mac_blue); }
  div.part.giving-tabs { background: #f1f1f1; }
  .wrap-content-body { background: linear-gradient(180deg, #00669e 30%, transparent 60%); padding: 0 1px; border-radius: 4px; }
  #contentcontainter ul.menuTabs li a.active,
  #contentcontainter ul.menuTabs li a:hover { border-bottom: 1px solid #fff; }
}

/*  -----------------------
   Navbar section 
------------------------ */

/* Stored in the page, something is werid and it needs to be in the section editor */


/* -----------------------
   OVERVIEW
------------------------ */
div.part.overview { box-shadow: 0 0 9px rgba(53, 61, 72, 0.25); border-radius: 9px; padding: 20px 15px; }

div.part.overview div#wrapper { display: flex; flex-wrap: wrap; }

div#wrapper > div { flex: auto; }

div#wrapper > div.fullWidth { flex-basis: 100%; }

div.centered { text-align: center; font-size: 1.7rem; }

div#wrapper > div#video { flex: 0 1 60%; align-self: center; }

div#wrapper > div#aside { flex: 0 1 35%; padding: 5px; align-self: center; }

@media only screen and (max-width: 615px) {
  div#wrapper > div { flex-basis: 100% !important; }
  #contentcontainter ul.menuTabs li { flex-basis: 50% !important; }
}

/*------------------------
  BREADCRUMBS
-------------------------- */

/* Stored in the Nav bar page due to goofiness of css needing to be stored in section editor */



/* -----------------------
   GENERIC PROGRESS BARS
------------------------ */
.progress-bar { color: var(--mac_white) !important; background-color: var(--mac_gray); margin: 16px 0 !important; padding: 3px 0; }
.grey-progress-bar { color: #000 !important; background-color: #f1f1f1; margin: 16px 0 !important; }
.green-progress-bar { background-color: var(--mac_secondary_green); padding: 10px; }
.progress-bar-orange { background-color: var(--mac_blue); padding: 10px; }
/* Preserving original class despite leading hyphen */
.-progress-bar-light-blue { background-color: var(--mac_secondary_sky_blue); padding: 10px; }
.progress-label { margin: 0 auto; width: 90%; text-align: center; }
.ofGoalText { font-size: 12px; font-weight: bold; color: #555; padding-bottom: 15px; }

/* -----------------------
   BUTTONS
------------------------ */
.give-button {
  width: 50%; 
  background-color: var(--mac_blue); 
  color: white !important; 
  padding: 14px 20px; 
  margin: 8px 0; 
  border: none; 
  border-radius: 5px;
  font-size: 25px; 
  display: inline-block; 
  text-align: center; 
  text-decoration: none;
}
.give-button:hover { background-color: var(--mac_gray) !important; }

.button-orange {
  min-width: 250px; 
  background-color: var(--mac_orange) !important; 
  color: white !important; 
  padding: 5px 10px; 
  margin: 8px 0; 
  border: none; 
  border-radius: 5px;
  font-size: 25px; 
  display: inline-block; 
  text-align: center;
  text-decoration: none;
}

.button-orange:hover {
  filter: brightness(0.92) !important;
}

.button {
  min-width: 250px; 
  background-color: var(--mac_blue) !important; 
  color: white !important; 
  padding: 5px 10px; 
  margin: 8px 0; 
  border: none; 
  border-radius: 5px;
  font-size: 25px; 
  display: inline-block; 
  text-align: center;
  text-decoration: none;
}
/* Fixed var name: was --mac_grayy */
.button:hover { background-color: var(--mac_gray) !important; }
.button.button-small { font-size: .8em; padding: 2px; margin: 2px; font-weight: lighter; }

/* -----------------------
   GOALS GRID
------------------------ */
div.part.goals div.goal-wrapper { display: flex; flex-wrap: wrap; }
div.goal-wrapper > div { flex: 1 1 225px; }

div.individual-goal { margin: 10px 5px; padding: 15px; box-shadow: 0 0 9px rgba(53, 61, 72, 0.15); border-radius: 9px; transition: all 0.5s ease; }
.individual-goal h2 { font-size: 1.8em !important; }
.individual-goal:hover { box-shadow: 0 20px 30px 0 rgba(53, 61, 72, 0.15); }
.individual-goal-nofloat:hover { margin-top: 10px !important; box-shadow: 0 20px 30px 0 rgba(53, 61, 72, 0.15); }

.give-goal-button {
  width: 100%; background-color: #00669e; color: white !important; padding: 9px 10px; margin: 3px auto; border: none; border-radius: 4px; font-size: 14px; font-weight: bold; display: inline-block; text-align: center; text-decoration: none;
}
.give-goal-button:hover { background-color: #80d2ff !important; }

/* -----------------------
   DONORS TAB
------------------------ */
div.part.donors:not(.ten-recent) { margin-bottom: 5px; }
span.report_export { display: none; }
table.report_chart thead th, div.report_row table thead th { display: none; }
table.report_chart tbody tr td { border: none !important; }
.report_rows_static tr.header > th { background: #f1f1f1; }

/* -----------------------
   DIALOG / MODAL
------------------------ */
.supports-boxshadow .dialog_host .dialog { border-radius: 9px; }
.dialog .header { background: #f1f1f1; color: #555; }
.dialog .part.give-now-form { margin-bottom: 0px; }
.dialog .part.give-now-form div.action { border-top: 1px solid #f9f9f9; padding: 5px 10px; }

/* -----------------------
   CONTENT CONTAINER
------------------------ */
#contentcontainter > table.fixed > tbody > tr > td { padding: 0px !important; }
#contentcontainter { width: 100%; background: #FFF; margin: 10px auto 0; padding: 5px 0% 0px !important; box-sizing: border-box; }
#contentcontainter * { box-sizing: border-box; }

/* -----------------------
   EMBEDDED GIVE FORM
------------------------ */
.part.give-now-form {
  max-width: 775px; width: 100%; background: #FFF; margin: 0 auto; padding: 65px 5% 15px 5% !important;
  box-shadow: 0 0 18px rgba(53, 61, 72, 0.25); border-radius: 10px; box-sizing: border-box;
}
form h1 { font-size: 2.5em; color: #00669e; text-align: center; }

div.form_h2[data-type=h2] .form_label { font-size: 1.75em; font-weight: bold; font-style: italic; color: var(--mac_secondary_green); text-align: left; padding: 20px 0px !important; }

.form_container input:not([type="checkbox"]):not([type="radio"]),
.form_container select,
.form_container textarea {
  font-size: 16px; padding: 9px; margin: 6px 0 4px; border: 1px solid #ccc; color: #000; font-family: sans-serif; line-height: normal; box-sizing: border-box; border-radius: 3px;
}
.form_container select { background-color: #f1f1f1; }
.form_container input:not([type="checkbox"]):not([type="radio"]), .form_container textarea { width: 100%; }
.form_container select:not([aria-label="Month"]):not([aria-label="Day"]):not([aria-label="Year"]):not([aria-label^="Recurring"]) { width: 100%; }
.form_container textarea { min-height: 100px; resize: vertical; }
.form_container input:focus, .form_container select:focus, .form_container textarea:focus { background: #f9f9f9 !important; }
.form_container fieldset .form_response { padding: 2px 0; }

form button.default { width: 99%; background-color: var(--mac_blue); color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; font-size: 20px; }
form button.default:hover,
form button.default:focus { background-color: var(--mac_light_blue) !important; }

.form_container .form_label { font-size: 16px; font-weight: bold; color: #555; }
.form_question.form_payment > label { padding-top: 15px !important; }
.form_container div.form_question:not(.form_payment):not(.form_h2):not(.form_p) .form_label,
.form_container div.form_question:not(.form_payment):not(.form_h2):not(.form_p) label { vertical-align: middle !important; }

#payment_form th, label[for='recurring'], #recurring_questions tr > td:first-child { font-weight: bold; color: #555; }
#payment_form table.plain col:first-of-type { width: 175px !important; }
#payment_form table.plain #displayAmount { font-size: 16px; color: #555; }

div#card-location { padding: 9px; margin: 6px 0 4px; border: 1px solid #ccc; box-sizing: border-box; border-radius: 3px; }

/* -----------------------
   REPLICATE BLOCKS
------------------------ */
a:link.replicate_insert { color: #00669e; text-decoration: underline; font-size: 14px; font-weight: bold; padding-left: 8px; }
a:hover.replicate_insert, a:hover.replicate_delete { color: #72a130 !important; }
.replicate_destination tr.column > th a:link { color: #00669e; text-decoration: underline; }
.replicate_destination tr.column { font-weight: bold; color: #555; padding: 4px 5px !important; background-color: #fff; border-bottom: 1px solid #f3f3f3; }
.replicate_destination tr.column th { background-color: #fff; }
.replicate_insert_container td { padding: 8px 0 !important; }

@media only screen and (max-width: 736px) {
  .replicate_destination tr.column { display: grid; }
  #payment_form th, #recurring_questions tr > td:first-child { background-color: #f3f3f3; }
}

/* -----------------------
   MODAL
------------------------ */
#myBtn { margin-left: 150px; border-radius: 2px; }
@media only screen and (max-width: 480px) { #myBtn { margin-left: 0px; } }

.modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); -webkit-animation-name: fadeIn; -webkit-animation-duration: 0.4s; animation-name: fadeIn; animation-duration: 0.4s; }
.modal-content { position: fixed; bottom: 0; background-color: #fefefe; width: 100%; -webkit-animation-name: slideIn; -webkit-animation-duration: 0.4s; animation-name: slideIn; animation-duration: 0.4s; }
.close { color: white; float: right; font-size: 22px; font-weight: bold; }
.close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; }
.modal-header { padding: 7px 16px; background-color: #00669e; }
.modal-header h2 { margin: 2px 0px; color: white; }
.modal-body { padding: 12px 16px 50px; }
@-webkit-keyframes slideIn { from { bottom: -300px; opacity: 0 } to { bottom: 0; opacity: 1 } }
@keyframes slideIn { from { bottom: -300px; opacity: 0 } to { bottom: 0; opacity: 1 } }
@-webkit-keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

/* -----------------------
   ANNOUNCEMENTS
------------------------ */
div#announce-container { padding: 10px; border: solid 2px grey; border-radius: 4px; }
div.announce_section { padding: 10px 0px; border-top: solid; }
.announce_section_time { padding: 5px; background-color: slategray; color: white; }

/* -----------------------
   LAYOUT WRAPPER
------------------------ */
.wrap_content { 
  width: 100%; 
  max-width: 1325px; 
  margin: 0 auto; 
  padding: 0 20px 25px 20px; 
}

.content_section_wrapper {
  border-radius: 5px;
  box-shadow: 0 4px 7px 7px rgba(0, 0, 0, 0.1);
  margin: 30px 0 !important;
  background-color: white;  
  padding: 15px 25px 25px 25px !important;
}

.main_hero { /* display: flex; */ align-items: center; flex-direction: row; }
.tier2_goal { width: 80%; margin: auto; }

.main_banner { flex-grow: 1; border-radius: 5px; }
/* TK slightly less wide progress bar, 11.5.25 */
.main_goal {
  font-size: 1.2rem; color: var(--mac_light_blue); display: flex; align-content: flex-start; justify-content: space-between; flex-wrap: wrap; padding-top: 20px; margin-left: 15%; margin-right: 15%;
}

@media (max-width: 768px) {
  .main_hero { flex-direction: column; align-items: center; }
  .main_banner { width: 100%; margin-bottom: 20px; }
  .main_goal {
    margin-left: 0;
    margin-right: 0;
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (max-width: 615px) {
  .button,
  .give-button {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 1.1rem !important;
    padding: 12px 14px !important;
  }
}


/* -----------------------
   GOAL STATS
------------------------ */
.goal_stat { display: flex; flex-direction: column; align-items: flex-start; flex-grow: 1; }
.goal_stat_label { width: 100%; font-size: 1.4rem; }
.goal_stat_label_tile { width: 100%; font-size: 1.4rem; }

.goal_stat#donor_count { order: 1; flex-basis: 40%; }
.goal_stat#donor_count_number, .goal_stat#dollar_count_number { font-size: 1.4em; font-weight: bold; color: var(--mac_blue); }
.goal_stat#donor_count_label, .goal_stat#dollar_count_label { font-size: 1.4em; font-weight: bold; color: var(--mac_blue) !important; margin-bottom: unset; }

.goal_stat#donor_count_progress_stat { order: 2; flex-basis: 60%; text-align: right; align-self: flex-end; }
.goal_stat#donor_count_progress_bar,
.goal_stat#dollar_count_progress_bar { flex-basis: 100%; height: 35px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); overflow: hidden; margin: 15px 0px; }
.goal_stat#donor_count_progress_bar { order: 3; }
.goal_stat#donor_count_progress_bar_progress, .goal_stat#dollar_count_progress_bar_progress { min-width: 50px; background: var(--mac_blue); padding: 3px; }
.goal_stat#dollar_count_progress_stat { order: 7; flex-basis: 60%; text-align: right; align-self: flex-end; }
.goal_stat#dollar_count_progress_bar { order: 5; }
.goal_stat_progress_label { margin: 4px 0px auto; width: 90%; text-align: center; font-size: 1em; font-weight: bold; color: var(--mac_white); }
.goal_stat#dollar_count { order: 6; flex-basis: 40%; }

.tile_hero .goal_stat#donor_count_progress_bar,
.tile_hero .goal_stat#dollar_count_progress_bar { height: 24px; }
.tile_hero .goal_stat_progress_label { font-size: 1em; margin: 0px auto; }

/* Parent Goals */
.parent_goal .goal_stat#donor_count_label,
.parent_goal .goal_stat#dollar_count_label,
.parent_goal .goal_stat#dollar_count_number,
.parent_goal .goal_stat#donor_count_number,
.parent_goal .goal_stat_label { font-size: 1.6em; }

/* TK 11.6.25 adding more emphasis to give button */
#main_give { order: 8; flex-basis: 100%; font-weight: bold; margin-top: 2em;}

.css_define_section { display: none; }

/* -----------------------
   TIER TWO (Related Projects section)
   - Consolidated & fixed to allow natural height growth.
------------------------ */
.tiertwo_title {
  /*font-size: 1.5em; 
  font-weight: bold; 
  text-align: center; */
  padding: 5px; 
  /*min-height: 3em;*/
  display: flex; 
  align-items: center; 
  justify-content: center;
}

/* Ensure images are centered and consistent */
.tile_hero { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }
.tile_banner img { max-width: 100%; max-height: 200px; object-fit: contain; }

.tiertwo_wrapper {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-around; align-items: stretch; /* equal height per row */
}

.tiertwo_item {
  flex: 1 1 calc(25% - 16px); max-width: calc(25% - 16px); min-width: 250px; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: flex-start; height: auto; /* allow content-driven height */
}

/* Make tier-two tiles behave like real links */
.tiertwo_item > a,
a.tile-link {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Preserve hover behavior when wrapped in <a> */
.tiertwo_item > a:hover .tile,
a.tile-link:hover {
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
}


@media (max-width: 1000px) {
  .tiertwo_item { flex: 1 1 calc(50% - 16px); max-width: calc(50% - 16px); }
}
@media (max-width: 600px) {
  .tiertwo_item { flex: 1 1 calc(100% - 16px); max-width: calc(100% - 16px); }
}

/* -----------------------
   GENERIC TILES (used elsewhere)
------------------------ */
.tile-container { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 20px; 
  justify-content: center; 
}
.tile { 
  background-color: white; 
  border-radius: 8px; 
  padding: 15px; 
  margin: 10px; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
  width: 250px; 
  text-align: center; 
  transition: transform 0.2s; 
}
.tile:hover { box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1); }
.complete { background-color: #c8e6c9; }
.challenge_complete {
  padding: 25px; 
  border-radius: 5px; 
  margin: -10px; 
  font-size: 2em; 
  font-weight: bold;
  background-image: url('https://engage.macalester.edu/www/images/portal-elements/greencheck.png');
  background-repeat: no-repeat; 
  background-size: contain; 
  text-align: right; 
  text-shadow: 1px 2px 5px white;
}

.tile-advocate {
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  margin: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 250px;
  text-align: center;
  transition: transform 0.2s;
  position: relative;
}
.tile-advocate>* {
  position: relative;
  z-index: 1;
}
.tile-advocate::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("https://engage.macalester.edu/www/images/mac/Mac%20shield.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.1;
  z-index: 0;
}

/* -----------------------
   QUOTE STYLING
------------------------ */


.pull-quote {
  max-width: 1000px;
  width: 100%;
  position: relative;
  margin-left: 40px;
  padding:10px 48px 10px 40px;
  background: transparent;
}

.pull-quote .opening-mark {
  position: absolute;
  top: 20px;
  left: 12px;
  font-family: Garamond, Georgia, serif;
  font-size: 65px;
  color: #01426A;
  font-style: italic;
  font-weight: 700;
}

.pull-quote blockquote {
  font-family: NewslabLight, georgia, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
  line-height: 1.6;
  color: var(--mac_gray);
  font-style: italic;
  font-weight: 400;
  margin-bottom: 5px;
  margin-inline-start: 10px !important;
  margin-inline-end: 10px !important;
}

.pull-quote .closing-mark {
  font-family: Garamond, Georgia, serif;
  font-style: italic;
  color: var(--mac_gray);
  font-size: 22px;
  padding-left: 5px;
  line-height: 1;
}

.attribution {
  font-family: DIN Next W01 Regular, serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--mac_gray);
  text-transform: uppercase;
  font-style: normal;
  padding-top: 5px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
}

.attribution::before {
  content: '—';
  color: var(--mac_gray);
  font-style: normal;
  flex-shrink: 0;
}