/******
* OVERVIEW
* The CSS code below allows for small changes to the look and feel of Communities pages.
* Suggestion is to use CSS updates sparingly, as future Salesforce updates may break any CSS code written here.
* SOURCE (for how to update CSS): https://developer.salesforce.com/docs/atlas.en-us.communities_dev.meta/communities_dev/communities_dev_customize_css.htm
******/

/******
* ACUMIN FONT
******/

@font-face {
    font-family: 'acumin-pro';
    src: url('https://use.typekit.net/eui1aqy.css') format('opentype');
}

@font-face {
    font-family: 'acumin-pro-condensed';
    src: url('https://use.typekit.net/eui1aqy.css') format('opentype');
}

:root,
[data-bs-theme="light"] {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-primary-text-emphasis: #052c65;
  --bs-secondary-text-emphasis: #2b2f32;
  --bs-success-text-emphasis: #0a3622;
  --bs-info-text-emphasis: #055160;
  --bs-warning-text-emphasis: #664d03;
  --bs-danger-text-emphasis: #58151c;
  --bs-light-text-emphasis: #495057;
  --bs-dark-text-emphasis: #495057;
  --bs-primary-bg-subtle: #cfe2ff;
  --bs-secondary-bg-subtle: #e2e3e5;
  --bs-success-bg-subtle: #d1e7dd;
  --bs-info-bg-subtle: #cff4fc;
  --bs-warning-bg-subtle: #fff3cd;
  --bs-danger-bg-subtle: #f8d7da;
  --bs-light-bg-subtle: #fcfcfd;
  --bs-dark-bg-subtle: #ced4da;
  --bs-primary-border-subtle: #9ec5fe;
  --bs-secondary-border-subtle: #c4c8cb;
  --bs-success-border-subtle: #a3cfbb;
  --bs-info-border-subtle: #9eeaf9;
  --bs-warning-border-subtle: #ffe69c;
  --bs-danger-border-subtle: #f1aeb5;
  --bs-light-border-subtle: #e9ecef;
  --bs-dark-border-subtle: #adb5bd;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-font-sans-serif: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu,
    Cantarell, Noto Sans, sans-serif, "Segoe UI", Roboto, "Helvetica Neue",
    "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(
    180deg,
    hsla(0, 0%, 100%, 0.15),
    hsla(0, 0%, 100%, 0)
  );
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg: #fff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: #000;
  --bs-emphasis-color-rgb: 0, 0, 0;
  --bs-secondary-color: rgba(33, 37, 41, 0.75);
  --bs-secondary-color-rgb: 33, 37, 41;
  --bs-secondary-bg: #e9ecef;
  --bs-secondary-bg-rgb: 233, 236, 239;
  --bs-tertiary-color: rgba(33, 37, 41, 0.5);
  --bs-tertiary-color-rgb: 33, 37, 41;
  --bs-tertiary-bg: #f8f9fa;
  --bs-tertiary-bg-rgb: 248, 249, 250;
  --bs-heading-color: inherit;
  --bs-link-color: #0d6efd;
  --bs-link-color-rgb: 13, 110, 253;
  --bs-link-decoration: underline;
  --bs-link-hover-color: #0a58ca;
  --bs-link-hover-color-rgb: 10, 88, 202;
  --bs-code-color: #d63384;
  --bs-highlight-color: #212529;
  --bs-highlight-bg: #fff3cd;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;
  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
  --bs-form-valid-color: #198754;
  --bs-form-valid-border-color: #198754;
  --bs-form-invalid-color: #dc3545;
  --bs-form-invalid-border-color: #dc3545;
}

:root {
  --myc-white: #fff;
  --myc-grey: #f0f8ff;
  --myc-navy: #0e1e4c;
  --myc-dark-blue: #152a66;
  --myc-blue: #3a6edb;
  --myc-blue-tint: #cce7ff;
  --myc-blue-tint-2: #f6fbff;
  --myc-yellow: #ffde00;
  --myc-red: #ea1d1b;
}

:root {
  --myc-heading-1-font: var(--myc-heading-font);
  --myc-heading-1-font-size: 5rem;
  --myc-heading-1-font-weight: 800;
  --myc-heading-1-line-height: 1;
  --myc-heading-1-letter-spacing: -2px;
  --myc-heading-1-text-transform: uppercase;
  --myc-heading-1-alt-font: var(--myc-heading-font);
  --myc-heading-1-alt-font-size: 4rem;
  --myc-heading-1-alt-font-weight: 700;
  --myc-heading-1-alt-line-height: 1.15;
  --myc-heading-1-alt-letter-spacing: -1px;
  --myc-heading-1-alt-text-transform: none;
  --myc-heading-2-font: var(--myc-heading-font);
  --myc-heading-2-font-size: 3.5rem;
  --myc-heading-2-font-weight: 700;
  --myc-heading-2-line-height: 1.07;
  --myc-heading-2-letter-spacing: -1px;
  --myc-heading-2-text-transform: none;
  --myc-heading-3-font: var(--myc-heading-font);
  --myc-heading-3-font-size: 3rem;
  --myc-heading-3-font-weight: 700;
  --myc-heading-3-line-height: 1.1;
  --myc-heading-3-letter-spacing: normal;
  --myc-heading-3-text-transform: none;
  --myc-heading-4-font: var(--myc-heading-font);
  --myc-heading-4-font-size: 2.5rem;
  --myc-heading-4-font-weight: 700;
  --myc-heading-4-line-height: 1.05;
  --myc-heading-4-letter-spacing: normal;
  --myc-heading-4-text-transform: none;
  --myc-heading-5-font: var(--myc-heading-font);
  --myc-heading-5-font-size: 2rem;
  --myc-heading-5-font-weight: 700;
  --myc-heading-5-line-height: 1.12;
  --myc-heading-5-letter-spacing: normal;
  --myc-heading-5-text-transform: none;
  --myc-heading-6-font: var(--myc-heading-font);
  --myc-heading-6-font-size: 1.5rem;
  --myc-heading-6-font-weight: 800;
  --myc-heading-6-line-height: 1.3;
  --myc-heading-6-letter-spacing: normal;
  --myc-heading-6-text-transform: none;
  --myc-body-lg-font: var(--myc-text-font);
  --myc-body-lg-font-size: 1.75rem;
  --myc-body-lg-font-weight: 700;
  --myc-body-lg-line-height: 1.32;
  --myc-body-lg-letter-spacing: 0;
  --myc-body-lg-text-transform: none;
  --myc-body-md-font: var(--myc-text-font);
  --myc-body-md-font-size: 1.4375rem;
  --myc-body-md-font-weight: 700;
  --myc-body-md-line-height: 1.43;
  --myc-body-md-letter-spacing: 0;
  --myc-body-md-text-transform: none;
  --myc-body-sm-font: var(--myc-text-font);
  --myc-body-sm-font-size: 1.125rem;
  --myc-body-sm-font-weight: 500;
  --myc-body-sm-line-height: 1.5;
  --myc-body-sm-letter-spacing: normal;
  --myc-body-sm-text-transform: none;
  --myc-caption-font: var(--myc-text-font);
  --myc-caption-font-size: 0.875rem;
  --myc-caption-font-weight: 400;
  --myc-caption-line-height: 1.5;
  --myc-caption-letter-spacing: normal;
  --myc-caption-text-transform: none;
  --myc-eyebrow-lg-font: var(--myc-heading-font);
  --myc-eyebrow-lg-font-size: 1.25rem;
  --myc-eyebrow-lg-font-weight: 700;
  --myc-eyebrow-lg-line-height: 1;
  --myc-eyebrow-lg-letter-spacing: 1px;
  --myc-eyebrow-lg-text-transform: uppercase;
  --myc-eyebrow-sm-font: var(--myc-heading-font);
  --myc-eyebrow-sm-font-size: 1rem;
  --myc-eyebrow-sm-font-weight: 700;
  --myc-eyebrow-sm-line-height: 1;
  --myc-eyebrow-sm-letter-spacing: 1px;
  --myc-eyebrow-sm-text-transform: uppercase;
  --myc-interactive-font: var(--myc-heading-font);
  --myc-interactive-font-size: 1rem;
  --myc-interactive-font-weight: 700;
  --myc-interactive-line-height: 1;
  --myc-interactive-letter-spacing: 1px;
  --myc-interactive-text-transform: uppercase;
  --myc-interactive-lg-font: var(--myc-heading-font);
  --myc-interactive-lg-font-size: 1.5rem;
  --myc-interactive-lg-font-weight: 700;
  --myc-interactive-lg-line-height: 1.1;
  --myc-interactive-lg-letter-spacing: none;
  --myc-interactive-lg-text-transform: uppercase;
  --myc-stat-font: var(--myc-heading-font);
  --myc-stat-font-size: 4.5rem;
  --myc-stat-font-weight: 800;
  --myc-stat-line-height: 0.77;
  --myc-stat-letter-spacing: 0;
  --myc-stat-text-transform: uppercase;
  --myc-rich-text-m-bottom: 24px;
  --myc-rich-text-ul-p-left: 0;
  --myc-rich-text-ol-p-left: 0;
  --myc-rich-text-list-items-spacing: 20px;
  --myc-rich-text-caption-clr: var(--myc-dark-shade);
  --myc-rich-text-custom-blockquote-p: 40px;
  --myc-rich-text-custom-blockquote-figcaption-m-top: 24px;
  --myc-rich-text-ol-items-spacing: 10px;
  --myc-rich-text-ol-number-clr: var(--myc-white);
  --myc-rich-text-ol-number-bg-clr: var(--myc-blue);
  --myc-rich-text-ol-number-width: 20px;
  --myc-rich-text-ol-number-height: 20px;
  --myc-rich-text-ol-number-border-radius: 5px;
  --myc-rich-text-figure-alignleft-m-right: 40px;
  --myc-rich-text-figure-alignright-m-left: 40px;
  --myc-rich-text-p-large-clr: var(--myc-text-clr);
}

/******
* Font sizes
******/
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #012169;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 0;
  margin-top: 0;
  text-transform: uppercase;
}
h1 {
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  h1 {
    font-size: 2.5rem;
  }
}
h2 {
  font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
  h2 {
    font-size: 2rem;
  }
}
h3 {
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  h3 {
    font-size: 1.75rem;
  }
}
h4 {
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  h4 {
    font-size: 1.5rem;
  }
}
h5 {
  font-size: 1.25rem;
}
h6 {
  font-size: 1rem;
}
p {
  color:#181818;
  font-size: 1rem;
  margin-bottom: 0;
  margin-top: 0;
}

h1.normal-case, 
h2.normal-case, 
h3.normal-case, 
h4.normal-case, 
h5.normal-case, 
h6.normal-case {
    text-transform: none !important;
}

.normal-case * {
    text-transform: none !important;
}

/******
* removes Contact Support button from Contact Support & Ask Button Support component
******/
.siteforceNapiliFooter #contactSupport {
    display: none;
}

/******
* removes Search Bar from header
* since we do not have any articles or discussion posts at this time, including the Search Bar may only cause confusion for users
* SOURCE: https://success.salesforce.com/answers?id=9063A000000iWJaQAM (answer by chetan bhatla on 7/22/2018)
******/
.search-container{
    display: none;
}

/******
* TBD
******/
.lightnksdnCommunityCustomButton .label {
    color:#ffffff;
    opacity: 1;
}

/******
* Remove "My Account" from Profile Menu
SOURCE: https://success.salesforce.com/answers?id=90630000000DSADAA4
******/
.myAccount{
  display:none;  
}

/******
* Makes Header dark blue instead of gray and profile name/trigger down arrow white
******/
.cHeaderOverlay{
    background-color: #012169 !important;
}

.profileName, .triggerDownArrow {
    color: #FFFFFF !important;
}

/******
* control font color of "Forgot Your Password" link on login page
******/

body .salesforceIdentityLoginForm2 .inverseTextColor{
    color: rgb(37, 116, 169);
}

.settingsData{
    display: none;
}

/******
* eliminates ability for users to update their email on the My Settings page, due to Salesforce limitation
******/

.settingsEmail.settingsData.input.uiInput.uiInputEmail.uiInput--default.uiInput--input {
    display:none;
}

.settingsLabel.required.uiLabel {
    display: none;
}

/******
* Settings for Communities Footer, along with Sponsor and Social Media logos
******/
.communities-footer {
	display: flex;
	flex-wrap: wrap;
	margin-top: 46px;
}

.sponsor-footer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
    padding-left: 25px;
    padding-right: 100px;
}

.social-footer {
    padding-right: 100px;
	}

.social-logo {
    width: 56px;
    height: auto;
    padding: 5px;
}

.sponsor-logo {
	max-height: 56px;
	width: auto;
    padding: 10px;
}






/******
* encloses text in a yellow tile
******/
.yellowTile {
    background-color: #FDD10C;
    padding: 10px 10px 10px 10px;
}

/******
* adds extra padding at end of DIV tag
******/
.endOfPara {
    padding-bottom: 16px;
}

/******
* sets style of text within a blue hyperlink tile to Yellow, with same font size and weight as H5 font
******/
.yellowHyperlinkButtonTile {
	color:#FDD10C;
	font-family:"acumin-pro",sans-serif;
	font-weight:900;
	text-transform:uppercase;
	line-height:0.85;
	-moz-osx-font-smoothing:grayscale;
	-webkit-font-smoothing:antialiased;
    font-size:20px;
	letter-spacing:-0.4px
	font-smoothing:antialiased
}

/******
* sets style of a tile in LWC to appear blue, with set height, adds more customized styling
******/
.blueButtonTileFormat { 
    height: 80px;
    position: relative;
    border: 1px solid #FDD10C;
    background-color: #012169;
    border-radius: 6px;
    padding: 10px 10px 10px 10px;
}

.whiteButtonTileFormat { 
    height: 80px;
    position: relative;
    border: 1px solid #012169;
    background-color: white;
    border-radius: 6px;
    padding: 10px 10px 10px 10px;
}

/******
* sets any text within a button tile to be centered both vertically and horizontally
******/
.buttonTileText {
    text-align: center;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/******
* upon hover on a button tile, font color changes to white as opposed to yellow
******/
.buttonTileText>a:hover {
	color:white;
	transition:color 400ms ease
}

/******
* sets formatting for how Jacket and T-shirts should appear, color-wise, in volunteer check-in
******/
.redJacket { 
    height: 80px;
    position: relative;
    border: 1px solid #012169;
    background-color: #FF7A7A;
    border-radius: 6px;
    padding: 10px 10px 10px 10px;
}

.greenJacket { 
    height: 80px;
    position: relative;
    border: 1px solid #012169;
    background-color: #6AE770;
    border-radius: 6px;
    padding: 10px 10px 10px 10px;
}

.yellowJacket{ 
    height: 80px;
    position: relative;
    border: 1px solid #012169;
    background-color: #FAE155;
    border-radius: 6px;
    padding: 10px 10px 10px 10px;
}

.orangeJacket { 
    height: 80px;
    position: relative;
    border: 1px solid #012169;
    background-color: #FFA500;
    border-radius: 6px;
    padding: 10px 10px 10px 10px;
}

.whiteJacket { 
    height: 80px;
    position: relative;
    border: 1px solid #012169;
    background-color: #DDDDDD;
    border-radius: 6px;
    padding: 10px 10px 10px 10px;
}

/******
* sets look and feel for various banner text areas, similar to Toast messages
* red, yellow, and green
******/

.warningRed{
    background-color: #ed0000;
    padding: 16px;
    color: white;
	font-family:"acumin-pro",sans-serif;
	font-weight:900;
	text-transform:uppercase;
	line-height:0.85;
	-moz-osx-font-smoothing:grayscale;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
    font-size:30px;
    letter-spacing:-1px
}

.noticeYellow{
    background-color: #FB9439;
    padding: 8px;
    color: black;
	font-family:"acumin-pro",sans-serif;
	font-weight:900;
	text-transform:uppercase;
	line-height:0.85;
	-moz-osx-font-smoothing:grayscale;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
    font-size:18px;
    letter-spacing:-1px
}

.confirmGreen{
    background-color: #2F844A;
    padding: 8px;
    color: white;
	font-family:"acumin-pro",sans-serif;
	font-weight:900;
	text-transform:uppercase;
	line-height:0.85;
	-moz-osx-font-smoothing:grayscale;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
    font-size:18px;
    letter-spacing:-1px
}




@media (min-width: 640px){
	.module-container{
        border-color: #150900;
		width:100%;
		display:inline-block;
		vertical-align:middle
}
}
@media (min-width: 1280px){
	.module-container{
        border-color: #150900;
		width:100%;
		display:inline-block;
		vertical-align:middle
}
}

.module-tile-yellow{
    background-color: #FDD10C;
    border-radius: 25px;
}
.module-tile-blue{
    background-color: #012169;
    border-radius: 25px;
}

.module-tile-medium-blue{
    background-color: #152A66;
    border-radius: 25px;
}

.header-white :is(h1, h2, h3, h4, h5, h6) {
    color: #FFFFFF
}

.header-yellow :is(h1, h2, h3, h4, h5, h6){
    color:#FFD10C;
}

.text-white{
    color: #FFFFFF;
}

.text-yellow{
    color: #FFD10C;
}

.text-container h3{
	margin-bottom:0;
	color:#3a6edb;
	text-transform:uppercase;
	display:inline-block;
	width:100%;
	line-height:0.8
}

.text-container h3 span{
	width:100%;
	color:#012169;
	display:inline-block
}

.module-tile{
	position:relative;
	height:15vh;
	min-height:148px
}

.module-tile.on{
	background-color:#ffde00
}
.module-tile.on .text-container h3{
	color:#012169
}
.data-label{
  color: var(--myc-blue);
  flex-shrink: 0;
  width: 150px;
  font-family: acumin-pro-condensed, serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
}

.data-value{    
  flex-shrink: 0;
  font-family: acumin-pro, serif;
  font-size: 1.25rem;
  letter-spacing: 1px;
  padding-bottom: 6px;
}

.stat-group-volunteers{
    /*display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 32px;
    gap: 32px;*/
}

.stat-box{
    background-color: var(--myc-dark-blue);
    border-radius: 24px;
    padding: 40px 48px;
    position: relative;
}

.stat-value{
    color: var(--myc-yellow);
    font-family: acumin-pro-condensed, serif;
    font-size: 7.5rem;
    font-weight: 800;
    text-align: center;
}

.stat-label{
    color: var(--myc-white);
    font-family: acumin-pro-condensed, serif;   
    font-size: 1.4375rem;
    font-weight: 700;
    letter-spacing: var(--myc-body-md-letter-spacing);
    line-height: var(--myc-body-md-line-height);
    text-align: center;
}

/* this is CSS for the My Last Race section on the home page */
.my-last-race-box{
    background-color: var(--myc-yellow);
    border-radius: 24px;
    padding: 40px 48px;
    position: relative;
}

.my-last-race-box:hover{
    cursor: pointer;
    background-color: var(--myc-blue-tint);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.my-last-race-name{
    color: var(--myc-dark-blue);
    font-family: acumin-pro-condensed, serif;
    font-size: clamp(1.5rem, 15vw, 5rem);
    font-weight: 800;
    text-align: center;    
}

.my-last-race-values{
    color: var(--myc-dark-blue);
    font-family: acumin-pro-condensed, serif;
    font-size: clamp(1rem, 10vw, 2rem);
    font-weight: 700;
    text-align: center;      
}

.my-last-race-label{
    color: var(--myc-black);
    font-family: acumin-pro-condensed, serif;   
    font-size: 1.4375rem;
    font-weight: 700;
    letter-spacing: var(--myc-body-md-letter-spacing);
    line-height: var(--myc-body-md-line-height);
    text-align: center;        
}

.my-last-race-learn-more{
    color: var(--myc-dark-blue);
    font-family: acumin-pro-condensed, serif;
    font-size: clamp(1.5rem, 15vw, 5rem);
    font-weight: 800;
    text-align: center;     
}

.finish-time-box{
    background-color: var(--myc-yellow);
    border-radius: 24px;
    padding: 20px 24px;
    position: relative;  
}

.finish-time-label{
    color: var(--myc-black);
    font-family: acumin-pro-condensed, serif;   
    font-size: 1.4375rem;
    font-weight: 700;
    letter-spacing: var(--myc-body-md-letter-spacing);
    line-height: var(--myc-body-md-line-height);
    text-align: center;         
}

.finish-time-values{
    color: var(--myc-dark-blue);
    font-family: acumin-pro-condensed, serif;
    font-size: clamp(1.5rem, 15vw, 5rem);
    font-weight: 800;
    text-align: center;        
}

/* this is CSS for the Volunteer Loyalty Number and Years of Service section */
.vol-loyalty-box{
    background-color: var(--myc-yellow);
    border-radius: 24px;
    padding: 40px 48px;
    position: relative;
}

.vol-loyalty-value{
    color: var(--myc-dark-blue);
    font-family: acumin-pro-condensed, serif;
    font-size: clamp(2rem, 15vw, 5rem);
    font-weight: 800;
    text-align: center;    
}
.vol-loyalty-label{
    color: var(--myc-black);
    font-family: acumin-pro-condensed, serif;   
    font-size: 1.4375rem;
    font-weight: 700;
    letter-spacing: var(--myc-body-md-letter-spacing);
    line-height: var(--myc-body-md-line-height);
    text-align: center;    
}

.custom-container{
	color : black;
}


/* for custom forms on Flow pages */    
.custom-card {
	font-size: 1rem; /* Or use 18px, or whatever size you want */
    --lwc-colorTextDefault: #333; /* Example: Set default text color for contrast */
    border: 1px solid #d8dde6; /* Dark blue border */
    border-radius: 0.25rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* optional shadow */
    transition: all 0.3s ease;
}

/* For hovering UI, specifically for My Races and My Volunteer Opportunities*/
.is-hoverable_lightBlue:hover {
    cursor: pointer;
    background-color: var(--myc-blue-tint);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.is-active:active {
    background-color: #f3f3f3 !important;
    transform: scale(0.98); /* Subtle "press-in" effect */
    transition: transform 0.1s ease;
}

/* Hide the arrow on Desktop */
@media (min-width: 768px) {
    .mobile-only-arrow {
        display: none;
    }
}

/* Ensure it's visible on Mobile */
@media (max-width: 767px) {
    .mobile-only-arrow {
        display: block;
        opacity: 0.5; /* Subtle enough not to distract, but clear */
    }
}

.constrained-image {
    max-height: 400px; 
    max-width: 100%; 
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.card-link {
    text-decoration: none;
    color: inherit;
    display: block; /* Makes the anchor behave like a block element */
}


.custom-card-header {
    background-color: var(--myc-yellow);
    color: var(--myc-dark-blue);
    padding: 0.75rem 1rem;
    font-weight: bold;
    border-radius: 0.25rem 0.25rem 0 0;
	/** Stretch to full width **/
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

.card-error{
	font-size: 1rem; /* Or use 18px, or whatever size you want */
	--lwc-colorTextDefault: #333; /* Example: Set default text color for contrast */
    --sds-c-card-color-background: pink; /* Set the body background */	
    border: 1px solid darkred; /* Dark blue border */
    border-radius: 0.25rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* optional shadow */
}

.card-error-header {
    background-color: #FF3333;
    color: white;
    padding: 0.75rem 1rem;
    font-weight: bold;
    border-radius: 0.25rem 0.25rem 0 0;
	/** Stretch to full width **/
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

.card-success{
	font-size: 1rem; /* Or use 18px, or whatever size you want */
	--lwc-colorTextDefault: #333; /* Example: Set default text color for contrast */
    --sds-c-card-color-background: #8DD290; /* Set the body background */	
    border: 1px solid #225725; /* Dark blue border */
    border-radius: 0.25rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* optional shadow */
}

.card-success-header {
    background-color: #388E3C;
    color: white;
    padding: 0.75rem 1rem;
    font-weight: bold;
    border-radius: 0.25rem 0.25rem 0 0;
	/** Stretch to full width **/
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

.white-icon {
    --slds-c-icon-color-foreground-default: white;
}

.text {
    position: fixed;
    top: 10%;
    left: 80%;
}

.responsive-img {
    width: 50%;
    height: auto;
}

@media (max-width: 480px) {
    .responsive-img {
        width: 20%;
    }
}

.tile {
    cursor: pointer;
    border: 2px solid #dddbda;
    border-radius: .25rem;
    transition: all 0.2s ease;
}

.tile:hover{
    background-color: var(--myc-blue-tint-2);
}


.tile.selected {
    border-color: var(--myc-dark-blue);
    background-color: var(--myc-blue-tint);
    border-width: 4px solid;

}

.tile.disabled{
    cursor: not-allowed;
    opacity: 0.5;
    filter: grayscale(1);
    background-color: var(--bs-gray);
    pointer-events: none; /* Prevents the click handler from firing */
}



/* "learn more" buttons*/
.component-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  gap: var(--myc-mod-buttons-gap);
}

.component-columns-buttons {
  align-items: flex-start;
  flex-direction: column;
  margin-top: auto;
}
.component-columns-item-content > :has(+ .component-columns-buttons) {
  margin-bottom: 32px;
}

.component-columns-button.btn {
  background-color: #3a6edb;
  background-color: var(--myc-btn-primary-bg-clr);
  border-color: initial;
  border-color: var(--myc-btn-primary-border-clr);
  color: #fff;
  color: var(--myc-btn-primary-clr);
}