body {
    font-size: 18px;
    margin: .15em;
    font-family: "Inter", sans-serif;
    max-width: 1100px;
}

@media (min-width: 650px) { /* ie Apply these styles down to the min-width, but not lower widths */
    body {
        margin-left: 1em;
    }
}

p {
    margin-top: 0.1em;
}

h1 {
    font-size: 20px;
    color: #293372;
    text-transform: uppercase;
}

h2 {
    font-size: 18px;
    margin-bottom: 0.5em;
    font-weight: 400;
}

ul {
    list-style: none;
    padding-left: 0; /* Override ul CSS default of 40px */
	margin-bottom: 0; /* Override ul CSS default of 1em */
}

/* BTC fieldset standard style */
fieldset {
    margin-top: 18px;
    background-color: skyblue;
    border: 1px solid blue;
    border-radius: 3px;
}

fieldset legend {
    background-color: navy;
    color: white;
    font-size: 16px;
    padding: 0.1em 1em 0.1em 1em;
}

a {
    /*color: #1982d1;*/ /* This light blue fails accessibility checker due to insufficient contrast */
    color: blue;
    /* text-decoration: none; */ /* Don't suppress anchor's underline as it's needed for non-color contrast accessibility differentiator */
}

a.NoHref { /* For anchors with no href attribute, display the pointer cursor */
    cursor: pointer;
}

a:focus,
a:active,
a:hover {
    text-decoration: underline;
}

a:visited {
    color: purple;
}


.alignright { /* Alignment right */
    display: inline;
    float: right;
    margin-left: 1.625em;
}

/* For input fields set to readonly */
.readonlyInput {
    background-color: lightgray;
}

/* General error message */
.ErrorMessage {
    color: red;
    font-weight: bold;
    font-size: 16px;
}

/* Required */
.required {
    color: #FF0000;
    /* Make required asterisk red */
}

.TextAlign_Right {
    text-align: right;
}

.TextAlign_Center {
    text-align: center;
}

 /*****************************************************************************/
 /****************** Top Menu, Join/Renew buttons section **********/
 /*****************************************************************************/

#divBTCMainLogo {
    margin-block-start: 0; /* Override ": where(.wp-site-blocks) > *" */
    float: initial;
     position: absolute;
}

@media (max-width: 650px) { /* ie Apply these styles upto the max-width, but not higher widths */
    #divBTCMainLogo {
        float: left;
        position: initial;
    }
}

#divBTCMainLogo a {
    display: block;
}

#divBTCMainLogo img {
    height: 100px;
    margin: 2px;
}

#navMainMenu {
    font-size: 15px;
    display: flex;
    flex-wrap: wrap;
    /* justify-content:center; */
    justify-content: space-between;
    line-height: 2em;
    padding-top: 2px;
    margin-left: 100px;
}



.divMenuTopLevel {
    float: left;
    position: relative;
    height: 2em;
    background-color: #323232;
    display: flex;
    justify-content: center;
    margin: 4px;
    border-radius: 5px;
}


/* "NoAnchor" class indicates the link should be rendered as disabled */
#navMainMenu .divMenuTopLevel .NoAnchor {
    background-color: lightgray;
    border-radius: 5px;
}

#navMainMenu a, .spanTopLevelMenu, #navMainMenu .NoAnchor {
    color: #eee;
    display: block;
    padding: 0 0.6em;
    text-decoration: none;
}

#navMainMenu .divMenuTopLevel ul {
    display: none; /* Default to hidden, display on hover */
    margin: 0;
    position: absolute;
    top: 2em; /* Must match line-height in #navMainMenu */
    z-index : 99999;
    border-radius: 5px;
    overflow: hidden; /* truncate corners of a and li sticking out of containing ul */
}

#navMainMenu .divMenuTopLevel ul a {
    font-weight: normal;
    line-height: 1.4em;
    padding: 10px 10px;
    width: 155px;
    background-color: rgba(0, 0, 0, 0.8); /* Make menu background black and translucent */
    border-bottom: 0.05em dotted #666;
    color: #FFF; /* Make menu text white */
}

/* Note: The active class is applied by Blazor's <NavLink> component when the anchor's href matches the URL */
#navMainMenu .divMenuTopLevel ul a.active {
    font-weight:bold;
    background-color: rgba(0, 0, 0, 0.9); /* Make menu background translucent */
}

/* Top-level menu items */
#navMainMenu .divMenuTopLevel:hover>a, #navMainMenu .divMenuTopLevel:hover>span {
    background: #ccc9c9;
    color: #373737;
    border-radius: 5px;
}

/* Show drop down */
#navMainMenu .divMenuTopLevel:hover > ul {
    display: block;
}

/* Menu items in drop-down */
/* Note: The active class is applied by Blazor's <NavLink> component when the anchor's href matches the URL */
#navMainMenu li:hover > a, #navMainMenu li:hover>a.active  {
    background: #ece9e9;
    color: #373737;
}

#navMainMenu div > span {
    text-transform: uppercase; /* Make top-level menu all caps */
}

#navMainMenu div ul li a {
    text-transform: initial; /* Regular capitalization for sub-menus */
}

#navMainMenu ul ul li {
    background-color: transparent; /* This allows the embedded <a> element to control background color. */
}


/*************** Renew menu button ***********************/
#navMainMenu .RedRenewButton {
    background-color: #D90000;
}

#navMainMenu .RedRenewButton:hover {
    background-color: #8E0000;
}




/* Cart item count */
#divBTCHeaderCart a {
    height: 30px;
    /* Match color of cart icon */
    background-color: #5B5B5B;
    color: #EEE;
    padding: 0;
    border-radius: 5px;
    margin: 0 0 0 1.1em;
    color: #EEE;
    padding-right: 0.76em;
    padding-left: 0.76em;
    vertical-align: middle;
}

#divBTCHeaderCart a:hover {
    /* Don't show underline under price */
    text-decoration: none;
}

#divBTCHeaderCart a img {
    padding-right: 0.35em;
    padding-bottom: 0.17em;
    vertical-align: middle;
    height: 1em;
    width: 1.1em;
}

#divHomePageTitle {
    text-align: center;
    font-size: 30px;
    font-weight: 500;
    font-size: 40px;
}

/*****************************************************************************/
/******** Mission Statement section ********/
/*****************************************************************************/
#divMissionStatement {
    display: flex;
    justify-content: space-between;
    padding: 0.38em;
    margin-right: 0.25em;
    margin-left: 0.25em;
}

#divMissionStatement p {
    font-size: 18px;
    line-height: 1.42em;
    color: #666;
    text-shadow: 0.04em 0.04em 0 #CCC;
    margin-bottom: .23em;
    margin-left: 10px;
}


#idUSATFLogo {
    float: right;
}

.divFluffImage {
    position: relative;
    text-align: center;
    padding: 3px;
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 1em;
    margin-top: 1em;
}

.divFluffImage img {
    width: 100%; /* scale image to fit in Div */
    max-width: 900px;
    max-height: 320px;
}

/* Race results on front page */
#FrontPageRaceResults .TableLabel {
    color: brown;
    font-weight: bold;
}

#FrontPageRaceResults table {
    max-width: 300px;
    margin-bottom: 0.75em;
    padding-left: 1em;
}

#FrontPageRaceResults td {
    border: none;
}

#FrontPageRaceResults .PersonName {
    width: 100%
}

.PRCheckText {
    background-color: lightgreen;
    border-radius: 10px;
    width: 1.6em;
    height: 1.6em;
    line-height: 1.6em;
    text-align: center;
    margin: 2px;
}

.BigTextArea {
    width: 70%;
    min-width: 300px;
    height: 40px;
}


/**********************************************************************************************/
/************************* Content Pages ******************************************************/
/**********************************************************************************************/

#divBTCPageContent {
    padding: 0.23em 0.35em 0.2em 0.1em;
    min-height: 500px;
}

.h1BTC_PostTitle {
    padding-bottom: 0.25em;
    margin-bottom: 25px; /* Push content far enough down to avoid logo */
    margin-left: 100px;
}


@media (max-width: 650px) { /* ie Apply these styles upto the max-width, but not higher widths */
    .h1BTC_PostTitle {
        /* text-align: center; */
        margin-left: initial;
    }
}

/* ----------------- Home Page ------------------------- */
@media (max-width: 650px) {
    /* ie Apply these styles upto the max-width, but not higher widths */
     .h1BTC_SectionTitle {
        text-align: center;
        margin-left: initial;
    }
}


/* Sunday Run Info */
.divHomeSundayRun div {
    display: flex;
    margin-bottom: 0.2em;
}

.divHomeSundayRun div div {
    margin-right: 0.2em;
    margin-top: 0.1em;
    margin-bottom: 0.1em;
}

.divHomeSundayRun label {
    width: 110px;
    margin-right: 0.5em;
    font-weight: bold;
}




/* = Forms to get end user info. ----------------------------------------------- */
.submitButton {
    color: #ffffff;
    /*background-color: #D90000;*/ /* red-ish */
    background-color: #008000; /* green-ish */
    border-radius: 3px;
    margin-right: 3em;
    padding: 5px 8px;
}

.submitButton:hover:enabled {
    /*background-color: #8E0000;*/
    opacity: 1.0;
    background-color: #00AE00;
    text-decoration: none;
    cursor: pointer;
}

.submitButton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Hide recaptcha V2 challenge by default. Show only if needed and V3 not available */
#g-recaptchaV2 {
    display: none;
}

/* Hide V3 recaptcha badge so it doesn't remain shown on other pages populated via Blazor's SignalR circuit */
/* Instead, show recaptcha branding as per: https: //developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed */
.grecaptcha-badge {
    visibility: hidden;
}

.submitDanger {
    /* For delete buttons */
    color: #ffffff;
    background-color: #D90000;
    border-radius: 3px;
    cursor: pointer;
    margin-right: 1em;
    padding: 5px 8px;
}

.submitDanger:hover {
    background-color: #8E0000;
    text-decoration: none;
}

.submitDanger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* General table style */

table th, table td {
    border: 0.05em solid #CCC;
    padding: 0.2em;
    font-size: 15px;
}

table th.Numbers,
table td.Numbers {
    text-align: right;
}


table th {
    font-weight: bold;
    background-color: lightgray;
}




/* For contenteditable div's */
.ContentEditableToolbar {
    display: flex;
}

.ContentEditableToolbar img {
    cursor: pointer;
    margin-right: 0.3em;
}


.ContentEditable {
    border: 1px lightgrey solid;
    padding: 2px;
    overflow: auto;
    height: 20em;
}




.RecordEditFlex > div, .RecordEditFlex > div div { /* Center align divs, center align divs within divs. */
    display: flex;
    flex-wrap: wrap;
    align-items: center; /* Within each div, vertically align controls in the center of the line. */
}

.RecordEditFlex div div {
    flex: 1 0;
    /* justify-content: flex-end; */
    align-content: flex-start;
    margin-right: 0.2em;
    margin-top: 0.1em;
    margin-bottom: 0.1em;
}

.RecordEditFlex div label {
    display: inline-block;
    width: 10em;
    margin-right: 0.5em;
}


.RecordEditFlex div textarea {
    max-width: 40em;
}

.RecordEditFlex div input {
    min-width: 10em;
}

.RecordEditFlex input[type=radio],
.RecordEditFlex input[type=checkbox] {
    /* For radio buttons and checkboxes, reset min-width */
    min-width: initial;
}

.RecordEditFlex input[type=radio]+label,
.RecordEditFlex input[type=checkbox]+label {
    /* For radio button and checkbox labels, reset width */
    width: initial;
}


/* Notify user that message was successfully set. */
.classDynamicSuccessMessage {
    background-color: green;
    color: white;
    font-size: 15px;
    padding: 0.2em;
}

.ReportSpinner {
    display: inline-block;
    height: 25px;
    width: 25px;
    background-image: url("images/BTCCosmetics/ajax-loader-black.gif");
    background-size: cover;
    background-repeat: no-repeat;
}


/* General styles for filters on all report pages */
.divGeneralReportFilters {
    background-color: lightblue;
    padding: 3px;
    margin-top: 1em; /* To get below bottom of logo */
}

.divGeneralReportFilters div {
    display: inline-block;
    margin-right: 1em;
}

.TableReport tr:nth-child(even) {
    background-color: rgb(222, 231, 234)
}
.TableReport tr:nth-child(odd) {
    background-color: #EDEEF0;
}


/* --------------------------------------------------------------- */
/* ------------------ Specific Page Styles ----------------------- */
/* --------------------------------------------------------------- */

/* ---------------- Home Page Events ---------------------------- */
#divSundayRunSection {
    min-height: 7em;
}

/*---------------- BTC Committee and Bylaws --------------*/
.ulCommittee {
    line-height: 1.5em;
}

/* =Sponsors Page
----------------------------------------------- */
.BTC_SponsorsParters_div {
    display: flex;
    flex-wrap: wrap;
}

.BTC_sponsors_logo {
    flex: 0 0;
    /* Grow, shrink, initial size */
    margin-right: 1em;
}

.BTC_sponsors_description {
    flex: 1 1;
    min-width: 20em;
}

.BTC_sponsors_link {
    display: block;
    text-align: right;
    margin-bottom: 3em;
}

@media (max-width: 650px) { /* ie Apply these styles upto the max-width, but not higher widths */
    .BTC_SponsorsParters_div_outer:nth-of-type(even) { /* select alternate rows */
        background-color: #DAE4EF;
    }

    .BTC_sponsors_logo img {
        border: 1px solid black;
        margin: 1px 0 0 1px;
    }
}

/* =Notable Athletes page
----------------------------------------------- */
.BTC_athletes_list {
    display: flex;
    flex-wrap: wrap;
}

.BTC_athletes_list li {
    margin: 0 40px 40px 0;
    height: 255px;
    background-color: #EDEEF0;
    border: 3px solid #E1E1E1;
    box-shadow: 0 6px 17px #888;
    position: relative;
}

.BTC_athletes_list img {
    width: 170px;
    height: 255px;
}

.BTC_athletes_list h2 {
    text-align: center;
    vertical-align: bottom;
    padding-top: 45px;
    font-size: 12.5px;
    color: #FFF;
}

.BTC_athlete_list_fade {
    background-image: url("images/BTCCosmetics/bg_athlete_gradient.png");
    background-repeat: repeat-x;
    position: absolute;
    height: 73px;
    width: 100%;
    bottom: 0;
    left: 0;
}

.MembershipPerks {
    list-style-type: disc;
    margin-top: 0.5em;
    margin-bottom: 1em;
    padding-left: 2em;
}

/* Enter Race results page */
.EditRaceResultsForm .RadioButtonText {
    font-size: 16px;
    font-weight: bold;
}

.EditRaceResultsForm #divEnterNewEvent {
    flex-wrap: wrap;
    align-items: center;
}

.EditRaceResultsForm .InlineBlockDiv {
    display: inline-block;
    margin-bottom: 0.2em;
    margin-right: 0.2em;
}

.EditRaceResultsForm #StateCode, .EditRaceResultsForm #Country {
    width: 3em;
}

.EditRaceResultsForm #EventRaces {
    width: 15em;
}

.EditRaceResultsForm #RaceOtherDistance {
    width: 4em;
    margin-bottom: 0.2em;
}

.EditRaceResultsForm #ResultsArea {
    display: flex;
}

.EditRaceResultsForm #ResultsArea label {
    display: inline-block;
    width: 7em;
    margin-right: 0.5em;
    margin-bottom: 0.5em;
}

.EditRaceResultsForm #DivSelectParticipant {
    display: none;
    margin-right: 0.5em;
}

.EditRaceResultsForm #ParticipantsFilter {
    width: 4em;
}

.EditRaceResultsForm #Participants {
    width: 17em;
}

.EditRaceResultsForm #SingleParticipantName {
    display: block;
}

.EditRaceResultsForm #RaceTime {
    width: 5em;
}

.EditRaceResultsForm #GenderPlace,
#DivisionPlace {
    width: 3em;
}

.EditRaceResultsForm #Comment, #StravaActivityURL {
    width: 35em;
}

#StravaRaceActivityLinkDiv {
    background-color: lightgray;
    padding: 4px;
    margin: 10px 2px 2px 2px;
}

#StravaRaceActivityLinkDiv #ShowHideInstructions {
    inline-size: 100px;
    display: inline-block;
}

#StravaRaceActivityLinkDiv #divStravaLinkInstructions {
    padding: 1em;
}

#StravaRaceActivityLinkDiv #divStravaLinkInstructions ul {
    list-style: revert;
    padding-left: revert;
    margin-bottom: none;
}

/* Edit Role Members page */
#ulRoleMembers li {
    display: none;
    white-space: nowrap;
    width: 12em;
}

/* Mark inactive members yellow in both Training Group emails page and Group Members selection page */
.InactiveGroupMember {
    background-color: yellow;
}

/* Edit Sunday Run page */
.EditSundayRun #Miles {
    width: 4em;
    min-width: initial;
}

.EditSundayRun #LocationName, #LocationMapURL,
.EditSundayRun #CourseMapURL {
    width: 30em;
}



/* General record editing */

.RecordEditFlex .PRTime {
    width: 4em;
    min-width: initial;
}



.DeleteCartLine {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: darkred;
    font-size: 1.25em;
    text-decoration: none;
    font-weight: 700;
}

.DeleteCartLine:focus,
.DeleteCartLine:active,
.DeleteCartLine:hover {
    text-decoration: underline;
    cursor:pointer;
}

/* FAQ Page */
.faqQuestion {
color: red;
}



/* General and Training Group emails pages */
.divAttachmentUploadingArea {
    background-color: burlywood;
    padding-left: 1em;
    font-size: smaller;
}

.PrepareEmail #Subject {
    width: 20em;
}

.PrepareEmail input {
    margin-top: 0.2em;
}

.PrepareEmail #AdditionalAddresses {
    width: 30em;
}

.PrepareEmail progress {
    display: none;
}


/* Training Group emails page */
.PrepareEmail #CheckAll,
.PrepareEmail #UncheckAll {
    font-size: 10px;
    margin-left: 5em;
}

.PrepareEmail #GroupMembers {
    max-width: 95%;
    overflow: auto;
    resize: both;
    margin-left: 0px; /* Override theme default */
}

.PrepareEmail #GroupMembers li {
    white-space: nowrap;
    width: 13em;
    display: inline-block;
    font-size: 10px;
}

.PrepareEmail #GroupMembers li label .InactiveGroupMember {
    background-color: yellow;
}

.PrepareEmail #GroupMemberEmails {
    overflow: scroll;
    resize: both;
    width: 95%;
    margin-left: 0px; /* Override theme default */
}

/* Sunday Runs page */
#RunStartTime {
    width: 5em;
    margin-right: 3em;
}

/* Sunday Run Email Setup pages */
#SundayRunForm #divEditableContent {
    height: 4em;
}

#SundayRunForm h2 {
    margin-top: 1em;
}

#SundayRunForm #EmailHeader {
    margin-left: 2em;
    margin-right: 2em;
}

#SundayRunForm #EmailHeader span {
    margin-right: 2em;
}

#SundayRunForm #divEmailBodyPreview {
    margin-left: 2em;
    margin-right: 2em;
    border: 1px solid lightblue;
    padding: .2em;
}

#divRaceResultsPage h2 {
    clear: both;
}

/* Race Results Page */
#divRaceResultsPage {
    font-size: 85%;
}

#tabGeneralResults div div {
    display: inline-block;
}

.MedalBadgeLegend {
    width: 2em;
    padding: 0.3em;
    margin-right: 0.5em;
}

#Gold.MedalBadgeLegend {
    background-color: gold;
}

#Silver.MedalBadgeLegend {
    background-color: silver;
}

#Bronze.MedalBadgeLegend {
    background-color: #cd7f32;
}

#divRaceResultsGeneralTabAdditionalFilters div {
    padding: 2px;
    margin-right: 1em;
}



/* Base style for all race results tabs */
#idUlRaceResults .LiRaceResults {
    border-radius: 3px;
    border: 1px solid #c5c5c5;
    border-bottom-width: 0;
    background-color: #f6f6f6;

    float: left;
    margin: .1em .2em 0 0;
    padding: .25em .5em;
}

/* Style for tabs with hover */
#idUlRaceResults .LiRaceResults:hover {
    cursor: pointer;
    color: #2b2b2b;
    background-color: #ededed;
}

/* Style for both active tab and active tab with hover */
#idUlRaceResults .ActiveRaceResultsTab, #idUlRaceResults .ActiveRaceResultsTab:hover {
    background-color: #007fff;
    color: #ffffff;
}


#tableTopProlific,
#tableTopEvents,
#tableTopLocations {
    width: initial; /* Don't use 100% */
}

.PRCheckMark {
    background-color: lightgreen;
    border-radius: 10px;
    width: 1.6em;
    height: 1.6em;
    line-height: 1.6em;
    text-align: center;
    margin: auto;
}

.PRShownText {
    display: inline-block; /* Override display:none in PRCheckText */
}






/************** Store Page ***********************/
#idStoreProducts td {
    padding:0.5em;
}


/************ Sign-in page ************/
#OptionsArea {
    background-color: lightgray;
    padding: 5px;
    border-radius: 12px;
}

.divSSOOption {
    display: flex;
    margin-bottom: 10px; /* align-items: center; */
    align-items: center;
    padding: 5px;
}

.divSSOOption:hover {
    background-color: aliceblue;
}

.divSSOOption .SSOConfig {
    display: none;
    margin-left: 10px;
}

.divSSOOption input[type=button], .divSSOOption button {
    cursor: pointer;
    background-color: lightgreen;
}

.divSSOOption input[type=button]:disabled, .divSSOOption button:disabled {
    cursor: not-allowed;
    background-color: lightgray;
}

.divSSOOption .imgFederatedProvider {
    border: none;
    display: inline-block;
    height: 18px;
    vertical-align: middle;
    width: 18px;
    margin-left: 3px;
    margin-right: 3px;
}

#divSSOPhoneNum {
    display: flex;
    align-items: center;
}

#divSSOPhoneNum #SignInWithPhone {
    margin-left: 5px;
}

#divSSOPhoneNum #SignInWithPhone #MySMS-recaptcha-container {
    display: inline-block;
}

.spanXSmallText {
    font-size: x-small
}

#divSMSCode {
    display: none;
    margin-top: 10px;
}

#divSMSCode #SMSCode {
    background-color: rgb(208, 247, 208);
}

#SubmitSMSCode {
    background-color: rgb(208, 247, 208);
    padding: 5px;
    height: 34px;
}



/* =Footer
----------------------------------------------- */

#colophon {
    border:#323232;
    border-top-style:double;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-top: 3em;
}

#colophon div {
    margin-right: 25px;
    margin-left: 25px;
    padding-left: 3px;
    min-width: 12em;
}

#BTC_footer_Sponsors_logos a {
    display: inline-block;
    margin: 5px;
    border-radius: 0.2em;
    vertical-align:middle;
}

#BTC_footer_Sponsors_logos a img {
    border-radius: 0.2em;
}

#BTC_facebook_link {
    background: url('images/BTCCosmetics/social_sprite2.png') no-repeat -20px 0;
    width: 15px;
    height: 15px;
    display: inline-block;
}

#BTC_facebook_link:hover {
    background-position: -20px -20px;
}


#BTC_instagram_link {
    background: url('images/BTCCosmetics/social_sprite2.png') no-repeat -40px 0;
    width: 15px;
    height: 15px;
    display: inline-block;
}

#BTC_instagram_link:hover {
    background-position: -40px -20px;
}


/* Animation to fade success messages. Start hidden, then switch to fading opacity */
.HideIt {
    display: none;
}
.fade-out {
    animation: fade 3s linear forwards;
}
@keyframes fade {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}