/*
    Additions for the new site. The FCCFun look itself comes from the legacy stylesheets
    in css/legacy/ (Site.css, FccFun.css), copied unchanged, so ported pages can keep
    using the classes they always did (btnWeekPH, loginPH, schedDivPH, popupWrap, ...).
    Put new rules here rather than editing the legacy files.
*/

/* Was an inline style on Phone.Master's <body>. */
body {
    background-color: #eeeeee;
}

/* --- Header bar (Phone.Master's header table) ---------------------------------- */

.headerPH {
    color: white;
    /* Legacy fixed it at 62px; on a phone the title, copyright and version wrap onto
       more lines than that and ran over the page. Grow instead. */
    height: auto;
    min-height: 62px;
}

.headerTable {
    width: 100%;
}

.headerSide {
    text-align: center;
    width: 100px;
}

.headerCenter {
    text-align: center;
}

/* Header buttons: legacy repeated this as an inline style on every one. */
.hdrBtn {
    font-size: 14px;
    background-color: aliceblue;
    color: darkblue;
}

/* Header dropdown menu (the Tools menu, _ToolsMenu), styled after JP_Financial's Bootstrap
   dropdown. Toggled by site.js. */
.hdrMenu {
    position: relative;
    display: inline-block;
    text-align: left;
}

a.hdrMenuToggle,
a.hdrMenuToggle:link,
a.hdrMenuToggle:visited {
    color: white;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    padding: 2px 6px;
    white-space: nowrap;
}

    a.hdrMenuToggle:hover,
    .hdrMenu.open a.hdrMenuToggle {
        color: #ffff00;
    }

    /* Bootstrap's dropdown-toggle caret. */
    a.hdrMenuToggle::after {
        content: "";
        display: inline-block;
        margin-left: 0.255em;
        vertical-align: 0.255em;
        border-top: 0.3em solid;
        border-right: 0.3em solid transparent;
        border-left: 0.3em solid transparent;
    }

.hdrMenuList {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 10rem;
    margin: 2px 0 0 0;
    padding: 0.5rem 0;
    list-style: none;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.175);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.hdrMenu.open .hdrMenuList {
    display: block;
}

a.hdrMenuItem,
a.hdrMenuItem:link,
a.hdrMenuItem:visited {
    display: block;
    padding: 0.35rem 1rem;
    color: #212529;
    font-size: 16px;
    font-weight: normal;
    text-decoration: none;
    white-space: nowrap;
}

    a.hdrMenuItem:hover,
    a.hdrMenuItem:focus {
        background-color: #e9ecef;
    }

/* The Emailer home's "Emailer Tools": the header menu on a page button (at the bottom of
   the page), its list centred above it. */
.emToolsMenu .hdrMenuList {
    top: auto;
    bottom: 100%;
    left: 50%;
    margin: 0 0 2px 0;
    transform: translateX(-50%);
}

/* Bootstrap's dropdown-divider. */
.hdrMenuDivider {
    height: 0;
    margin: 0.5rem 0;
    border-top: 1px solid rgba(0, 0, 0, 0.175);
}

/* "?" after the title: the page's section of the Emailer help (ViewData["HelpTopic"]). */
a.hdrHelp,
a.hdrHelp:link,
a.hdrHelp:visited {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 6px;
    border-radius: 50%;
    background-color: aliceblue;
    color: darkblue;
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    text-align: center;
    text-decoration: none;
    vertical-align: 3px;
}

    a.hdrHelp:hover {
        background-color: #ffff00;
    }

/* The Logout button is a form post; the form mustn't add spacing. */
.hdrForm {
    display: inline;
    margin: 0;
}

/* --- Fieldset boxes (loginPH) --------------------------------------------------- */

/* Legacy Site.css had 2px on top; more room between the rows. */
fieldset p {
    margin: 12px 12px 10px 10px;
}

/* --- Home page: sign-in (legacy default.aspx div_logIn) --------------------------- */

.loginField {
    margin-left: 5px;
}

.requiredNote {
    color: red;
    font-weight: bold;
    font-size: 12px;
}

.rememberLabel {
    color: black;
    font-weight: bold;
}

.loginHelp {
    text-align: center;
    font-weight: bold;
}

.loginFamilyNote {
    color: blue;
}

.loginHint {
    font-style: italic;
    color: red;
}

    .loginHint a {
        color: darkblue;
    }

/* --- Home page: Select Activity (legacy div_selGrp, div_actDesc) ------------------ */

.selLegend {
    font-size: 18px;
    font-weight: bold;
}

.selRow {
    margin: 15px 0 15px 5px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

.selDropdown {
    font-size: 18px;
    font-weight: bold;
}

.selNote {
    font-size: 18px;
    font-style: italic;
    color: red;
}

/* a:link/:visited too: the legacy sheets colour links white. */
a.selLink,
a.selLink:link,
a.selLink:visited {
    font-size: 18px;
    font-style: italic;
    font-weight: bold;
    color: blue;
    text-decoration: underline;
}

#div_actDesc {
    color: darkblue;
    max-width: 90%;
    min-width: 90%;
    margin: auto;
}

.actDescTitle {
    font-size: 18px;
    font-weight: bold;
    text-decoration-line: underline;
}

.actDescImage {
    max-width: 100%;
}

/* Link inside a dialog message (e.g. "No Activities Available"). */
a.dlgLink,
a.dlgLink:link,
a.dlgLink:visited {
    font-weight: bold;
    color: blue;
}

/* --- Profile popup (_ProfilePopup; legacy phone.cs inline styles) ----------------- */

.profRow {
    height: 28px;
}

.profRowSm {
    height: 26px;
}

.profSmall {
    font-size: 12px;
}

.profName {
    width: 150px;
}

.profMemNum {
    width: 35px;
}

.profWide {
    width: 265px;
}

.profPhone {
    width: 90px;
}

.profGroups {
    width: 190px;
    cursor: pointer;
}

.profCred {
    width: 120px;
}

.profPadLeft {
    padding-left: 9px;
}

.profPadLeftSm {
    padding-left: 5px;
}

.profPadRight {
    padding-right: 10px;
}

.profPadRightSm {
    padding-right: 7px;
}

.profNoWrap {
    white-space: nowrap;
}

.profGuestOf {
    color: black;
    font-weight: bold;
}

/* Right-hand checkboxes (Share Email, +Fam, Member Active) and the Emailer's "List Size
   Settings" link (own profile only) all end on one line. A checkbox has a 3px right
   margin of its own, hence 11px + 3px = 14px. */
.profRightGroup {
    float: right;
    margin-right: 11px;
    white-space: nowrap;
}

a.profListSettings {
    float: right;
    margin-right: 14px;
    margin-left: 6px;
    font-size: 12px;
    line-height: 22px;
    white-space: nowrap;
}

.profControls {
    background-color: darkblue;
    height: 40px;
}

/* "Assign Activities" sub-popup. */
.grpTitle {
    text-align: center;
    font-size: 18px;
    background-color: darkblue;
    color: white;
}

.grpChecks {
    margin-left: 25%;
}

.grpButtons {
    text-align: center;
    padding-bottom: 12px;
}

/* --- Schedule grid (legacy schedule.aspx / getPageHTML inline styles) ------------- */

.schedNavTable {
    width: 100%;
    border-bottom: 1px solid black;
}

.schedNavSide {
    width: 40px;
}

.schedNavLeft {
    text-align: left;
}

.schedNavRight {
    text-align: right;
}

.schedNoDates {
    height: 56px;
}

    .schedNoDates td {
        text-align: center;
        font-size: 24px;
    }

.schedCommentHint {
    font-size: 12px;
    font-weight: normal;
    font-style: italic;
    text-align: center;
}

/* A date with a comment: click to read it. */
.schedHasComment {
    cursor: pointer;
    color: darkblue;
    background-color: lightblue;
}

.schedLoc {
    font-size: 12px;
}

.schedName {
    text-decoration-line: underline;
    cursor: pointer;
}

/* Between your family and everyone else. */
.schedSeparator {
    background-color: lightgray;
    font-size: 2px;
}

.schedTotals {
    border-top: 1px solid white;
}

.schedTotalsHint {
    font-style: italic;
    color: yellow;
}

.schedTotal {
    cursor: pointer;
}

/* Signup Order popup. */
.popupTitle {
    text-align: center;
    font-size: 18px;
    background-color: darkblue;
    color: white;
}

.popupFooter {
    text-align: center;
    background: darkblue;
    padding-bottom: 12px;
}

.popupClose {
    font-weight: bold;
    background: aliceblue;
    color: darkblue;
}

.signupList {
    width: 100%;
    text-align: center;
    background: aliceblue;
    overflow-y: auto;
    max-height: 360px;
    min-height: 360px;
}

.signupTable {
    padding-left: 25px;
    font-size: 18px;
    width: 355px;
}

.signupHeading {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

.signupRow {
    outline: thin solid;
}

.signupNum {
    width: 30px;
    text-align: right;
}

.signupName {
    text-align: left;
    width: 170px;
}

.signupWhen {
    text-align: center;
}

/* --- All Members (legacy allActive.aspx) ----------------------------------------- */

/* Long email addresses wrap inside their cell instead of widening the page on a phone. */
.membersTable td {
    overflow-wrap: anywhere;
}

.membersIcon {
    cursor: pointer;
}

.membersBanner {
    height: 32px;
    font-size: 18px;
    font-weight: bold;
    font-style: italic;
    text-align: center;
}

a.membersShowAll,
a.membersShowAll:link,
a.membersShowAll:visited {
    color: yellow;
    font-size: 14px;
}

.memberName {
    font-weight: bold;
    text-decoration-line: underline;
    cursor: pointer;
}

.searchBtn {
    background: darkblue;
}

/* --- Set Teams (legacy setTeams.aspx) ---------------------------------------------- */

.teamsBanner {
    width: 100%;
    color: white;
    background: darkblue;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

.teamsAuto {
    margin-left: 30px;
}

.teamsHdrName {
    font-size: 12px;
    font-weight: normal;
    font-style: italic;
}

/* The emailed team list, shown in the dialog. */
.teamsList {
    font-family: inherit;
    white-space: pre-wrap;
    text-align: left;
    margin: 0 0 8px 0;
}

.teamsMailError {
    color: red;
}

/* --- Edit Calendar (legacy editCalendar.aspx inline styles) ------------------------ */

.calColDate {
    min-width: 105px;
    max-width: 105px;
    width: 105px;
}

.calColTime {
    min-width: 42px;
    max-width: 42px;
    width: 42px;
}

.calColLoc {
    min-width: 96px;
    max-width: 96px;
    width: 96px;
}

.calColAbbr {
    min-width: 40px;
    max-width: 40px;
    width: 40px;
    text-align: center;
}

.calRow {
    cursor: pointer;
}

.calDate {
    text-align: right;
    padding-right: 8px;
}

.calNoWrap {
    height: 28px;
    white-space: nowrap;
}

.calNoteRow {
    height: 18px;
}

.calSuggest {
    text-align: left;
    padding-left: 17px;
}

.calDateBox {
    width: 90px;
}

.calLoc {
    width: 150px;
}

.calAbbr {
    width: 50px;
}

.calComment {
    width: 275px;
}

.calPadTime {
    padding-left: 35px;
}

.calPadLeft {
    padding-left: 15px;
}

.calPadSm {
    padding-left: 5px;
}

.calPadDow {
    padding-left: 6px;
}

.calRight {
    text-align: right;
}

.calNote {
    font-size: 12px;
    font-style: italic;
    color: red;
    font-weight: bold;
    vertical-align: top;
}

.calNoteLeft {
    padding-left: 65px;
}

.calNoteRight {
    padding-right: 15px;
}

.calHalf {
    width: 50%;
    text-align: center;
}

.calAddLabel {
    color: green;
    font-size: 18px;
}

.calDelLabel {
    color: red;
    font-size: 18px;
}

.calButtons {
    height: 40px;
}

/* --- Emailer (plan D3: the FCCFun look, not the app's colours) ---------------------- */

.emPage {
    max-width: 700px;
    margin: 0 auto;
    padding: 6px;
}

.emNote {
    font-style: italic;
    color: darkblue;
}

/* Emailer home: as wide as its widest fieldset (at least schedDivPH's 280px), so both match. */
.emHome {
    max-width: none;
    width: fit-content;
}

.emBtn {
    min-width: 200px;
    margin: 4px;
}

    .emBtn:disabled,
    #btnSave:disabled {
        opacity: 0.4;
        cursor: default;
    }

/* At most the screen's width: a long option ("Joe's News (Joe Smith) (68)") is cut off in
   the closed box, not the page widened (the open list shows it whole). No percentage: the
   Emailer home is as wide as its content, and a percentage wouldn't limit that. */
.emListSelect {
    max-width: calc(100vw - 40px);
}

    .emListSelect optgroup {
        background-color: darkblue;
        color: white;
        font-weight: bold;
    }

    .emListSelect option {
        background-color: white;
        color: black;
        font-weight: normal;
    }

.emCount {
    font-weight: bold;
    font-size: 16px;
}

.emOver {
    color: red;
}

.emRecipients {
    text-align: center;
    font-size: 16px;
}

.emRadio {
    margin-left: 12px;
    font-weight: bold;
    white-space: nowrap;
}

/* Clipboard fallback (Copy Addresses, a template's body): off screen. */
.emCopyArea {
    position: fixed;
    left: -9999px;
}

/* Member list (Lookup and the picker). Rows are display:flex, which would otherwise
   beat the hidden attribute the search sets. */
.emPicker [hidden] {
    display: none !important;
}

.emPicker {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.emSearchBar {
    padding: 6px 0;
}

.emSearch {
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    padding: 6px;
}

/* The picker's "Show Selected" (left), "Show Contacts" and "Show Active" (together, right). */
.emFilterRow {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 6px;
}

.emFilterGroup {
    display: inline-flex;
    gap: 10px;
}

.emSelOnlyLabel {
    display: inline-block;
    font-weight: bold;
    color: darkblue;
}

/* "Contact" after a contact's label (picker, list editor). */
.emTag {
    display: inline-block;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: 3px;
    background-color: darkblue;
    color: white;
    font-size: 11px;
    font-weight: bold;
    vertical-align: middle;
}

/* The list editor's Import Emails: the paste box and the summary. */
.emImportBox {
    width: 100%;
    box-sizing: border-box;
    font-size: 16px; /* 16px or more: iPhone doesn't zoom in */
    font-family: inherit;
    resize: vertical;
}

.emImportSummary {
    font-size: 16px;
}

.emSummaryHead {
    margin: 10px 0 2px;
    font-weight: bold;
    color: darkblue;
}

.emSummaryList {
    margin: 0;
    padding-left: 20px;
    overflow-wrap: anywhere;
}

    .emSummaryList li {
        margin-bottom: 3px;
    }

/* Manage Contacts' dialog. */
.emContactBox {
    width: 100%;
    box-sizing: border-box;
    font-size: 16px; /* 16px or more: iPhone doesn't zoom in */
}

.emListWrap {
    position: relative;
    flex: 1;
    min-height: 0;
}

#lookupList .emListWrap {
    height: calc(100vh - 170px);
}

.emList {
    position: relative;
    height: 100%;
    overflow-y: auto;
    padding-right: 26px;
    background-color: white;
    border: 1px solid darkblue;
}

.emLetter {
    background-color: darkblue;
    color: white;
    font-weight: bold;
    padding: 2px 8px;
    position: sticky;
    top: 0;
}

.emMember {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-bottom: 1px solid #dddddd;
    background: white;
    color: black;
    text-align: left;
    font: inherit;
    cursor: pointer;
    box-sizing: border-box;
}

    .emMember:hover,
    .emMemberBtn:focus {
        background-color: aliceblue;
    }

.emNoEmail .emEmail {
    color: gray;
}

label.emNoEmail {
    cursor: default;
    color: gray;
}

.emCheck {
    width: 20px;
    height: 20px;
    flex: none;
}

.emMemberText {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.emName {
    font-size: 16px;
}

.emEmail {
    font-size: 13px;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
}

.emNone {
    text-align: center;
    font-style: italic;
}

/* A-Z jump bar down the right of the list. */
.emJump {
    position: absolute;
    top: 0;
    right: 2px;
    bottom: 0;
    width: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
}

    .emJump a,
    .emJump a:link,
    .emJump a:visited {
        color: darkblue;
        text-decoration: none;
    }

    .emJump span {
        color: #bbbbbb;
    }

/* Emailer dialogs (member popup, picker): the look site.js gives the shared #dialog
   (dark blue title bar and buttons on #f0f0f0), instead of the legacy green theme. */
.emDialog.ui-dialog {
    background: #f0f0f0;
    border: 1px solid darkblue;
    padding: 0;
}

.emDialog .ui-dialog-titlebar {
    background: darkblue;
    color: white;
    text-align: center;
    border: 0;
    border-radius: 0;
}

.emDialog .ui-dialog-title {
    float: none;
}

.emDialog .ui-dialog-content,
.emDialog .ui-dialog-buttonpane {
    background: #f0f0f0;
    color: black;
}

    .emDialog .ui-dialog-buttonpane .ui-button {
        background: darkblue;
        color: white;
        border: 0;
        min-width: 90px;
    }

.emPickerDialog .ui-dialog-content {
    padding: 4px;
}

/* Manage Lists. */
.emTabs {
    display: flex;
    margin-bottom: 4px;
}

a.emTab,
a.emTab:link,
a.emTab:visited {
    flex: 1;
    text-align: center;
    padding: 8px 4px;
    color: darkblue;
    background-color: aliceblue;
    border: 1px solid darkblue;
    font-weight: bold;
    text-decoration: none;
}

a.emTab.emTabOn {
    background-color: darkblue;
    color: white;
}

.emListsTable td {
    padding: 4px;
}

.emListName {
    font-weight: bold;
}

.emColCount {
    white-space: nowrap;
    text-align: center;
}

.emColBtns {
    white-space: nowrap;
    text-align: right;
}

.emSmallBtn {
    font-size: 14px;
}

.emNoLists {
    font-style: italic;
    padding: 12px;
}

/* List editor: label | name box, then count | Sort Order (right edge = the name box's). */
.emNameGrid {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 8px;
    row-gap: 10px;
    max-width: 440px;
    margin: 15px auto;
}

.emNameLabel {
    font-size: 18px;
    font-weight: bold;
}

.emNameBox {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.emSortCell {
    justify-self: end;
    font-weight: bold;
    font-size: 16px;
    white-space: nowrap;
}

.emSortBox {
    width: 5em;
    font-size: 16px;
    text-align: right;
    box-sizing: border-box;
}

/* Template editor: full-width subject and body under the list editor's name grid. */
.emTplEditor .selRow,
.emTplEditor .emRecipients {
    margin: 12px auto;
    max-width: 440px;
}

.emTplField,
.emTplBodyHead {
    max-width: 440px;
    margin: 12px auto 4px;
    font-size: 16px;
}

.emTplBodyHead {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.emTplSubject,
.emTplBody {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px; /* 16px or more: iPhone doesn't zoom in */
}

.emTplBody {
    max-width: 440px;
    margin: 0 auto;
    font-family: inherit;
    resize: vertical;
}

.emCurrent {
    margin-top: 8px;
    background: white;
    border: 1px solid darkblue;
}

.emCurrentRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-bottom: 1px solid #dddddd;
}

.emRemove {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 0;
    background-color: darkred;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

/* List Size Settings. */
.emSettingRow {
    margin: 12px 5px;
    font-size: 16px;
}

.emVarInput {
    font-size: 16px; /* 16px or more: iPhone doesn't zoom in */
}

/* Open Email's picture rows and Insert Picture's sizes. */
.emPicRow {
    margin: 12px 5px;
    font-size: 16px;
}

.emPicBox {
    min-height: 60px;
    margin: 6px 0;
    padding: 4px;
    border: 1px dashed #888;
    background: white;
    text-align: center;
    font-size: 16px; /* 16px or more: iPhone doesn't zoom in */
}

    .emPicBox:empty::before {
        content: "Paste a picture here";
        color: #888;
        font-style: italic;
        line-height: 50px;
    }

    .emPicBox img {
        max-width: 100%;
        max-height: 120px;
    }

.emPicFile {
    display: none;
}

/* A picture's Previous: thumbnails of the user's earlier pictures. */
.emPrevGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 4px;
}

.emPrevPic {
    width: 96px;
    height: 96px;
    padding: 0;
    border: 1px solid #888;
    background: white;
    cursor: pointer;
}

    .emPrevPic:hover,
    .emPrevPic:focus {
        border: 2px solid darkblue;
    }

    .emPrevPic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* Open Email's member rows: the member chosen. */
.emLinkMember {
    margin: 6px 0;
    text-align: center;
}

    .emLinkMember .emEmail {
        font-size: 14px;
        color: #555;
    }

.emPicSize {
    margin-top: 4px;
    margin-bottom: 4px;
}

.emNumber {
    width: 80px;
    font-size: 16px;
}

.emHint {
    font-size: 13px;
    color: #555555;
}

/* --- Narrow phones ------------------------------------------------------------------ */

/* The legacy popups are a fixed 380px, centred with margin-left -190px: on phones
   narrower than that (375px is common) they'd stick out. Shrink them to the screen. */
@media (max-width: 384px) {
    .golferPopup,
    .signUpPopup,
    .edCalPopup,
    .addDaysPopup {
        width: calc(100vw - 6px);
        margin-left: calc(-50vw + 3px);
        box-sizing: border-box;
    }

    /* ...and the profile popup's boxes a little, so each row still fits on one line. */
    .profName {
        width: 135px;
    }

    .profPhone {
        width: 84px;
    }

    .profShareLabel {
        padding-left: 2px;
    }

    .profRightGroup {
        margin-right: 4px;
    }

    a.profListSettings {
        margin-right: 7px;
    }

    .profCred {
        width: 105px;
    }

    .profGroups {
        width: 175px;
    }

    .profWide {
        width: 250px;
    }
}

/* --- General -------------------------------------------------------------------- */

/* A fixed header (Schedule, All Members): the page header, an optional .fixedStrip under
   it (e.g. Prev/Next) and a table's .fixedHead row stay at the top while the rows
   scroll. FCC.fixedHeader() (site.js) adds .fixedTop to <body> and measures the first
   two into --fixedHdrH / --fixedTableTop: the header's height varies on phones. */
.fixedTop .headerPH {
    position: sticky;
    top: 0;
    z-index: 30;
}

.fixedTop .fixedStrip {
    position: sticky;
    top: var(--fixedHdrH, 62px);
    z-index: 29;
    background-color: #eeeeee;
}

/* Sticky works on cells, not rows; each needs its own background. 1px up, under the
   header: the table's collapsed top border isn't part of the cells and scrolls away,
   which would leave a 1px slit the rows show through. */
.fixedTop .fixedHead td {
    position: sticky;
    top: calc(var(--fixedTableTop, 62px) - 1px);
    z-index: 28;
    background-color: darkblue;
}

    .fixedTop .fixedHead td.schedHasComment {
        background-color: lightblue;
    }


.centerText {
    text-align: center;
}

/* An <a> that looks like a btnWeekPH button. */
a.linkButton,
a.linkButton:link,
a.linkButton:visited {
    display: inline-block;
    padding: 2px 12px;
    color: white;
    text-decoration: none;
}

/* Development-only exception text on the Error page. */
.errorDetails {
    white-space: pre-wrap;
    text-align: left;
    font-size: 11px;
    color: #333;
    max-height: 300px;
    overflow: auto;
}