/* colors */

:root {
    --prim-bg-col-light: aliceblue;
    --prim-bg-col-dark: #393955;
    --prim-bg-col: var(--prim-bg-col-light); /* sections */

    --scnd-bg-col-light: #e0e8ef;   /* a slightly muted AliceBlue */
    --scnd-bg-col-dark: #333344;
    --scnd-bg-col: var(--scnd-bg-col-light); /* default body bg */

    --altr-bg-col-light: beige;
    --altr-bg-col-dark: var(--prim-bg-col-dark);
    --altr-bg-col-dark: #334433;
    --altr-bg-col-dark: #494965;
    --altr-bg-col: var(--altr-bg-col-light); /* default postits, cart and survey blurbs */

    --prim-txt-col-on-light: #337;
    --prim-txt-col-on-dark: aliceblue;
    --prim-txt-col: var(--prim-txt-col-on-light);

    --scnd-txt-col-on-light: #334;
    --scnd-txt-col-on-dark: #e0e8ef;   /* a slightly muted AliceBlue */
    --scnd-txt-col: var(--scnd-txt-col-on-light);

    --blue-text-bg-light: lightskyblue;
    --blue-text-bg-dark: #0769ad;
    --blue-text-bg: var(--blue-text-bg-light);
    
    --green-text-col-light: seagreen;
    --green-text-col-dark: palegreen;
    --green-text-col: var(--green-text-col-light);
    --green-bg-col-light: palegreen;
    --green-bg-col-dark: seagreen;
    --green-bg-col: var(--green-bg-col-light);
    
    --med-blue-col-light: #0769ad;
    --med-blue-col-dark: deepskyblue;
    --def-link-col-light: var(--med-blue-col-light);

    --def-link-bg-col-light: var(--green-bg-col-light);
    --med-neutral-bg-col-light: #b0b0bb; /* medium grey */

    --blurb-link-light: var(--def-link-col-light);
    --blurb-link-dark: palegoldenrod;
    --blurb-link: var(--blurb-link-light);
    
    --def-link-bg-col-dark: var(--green-bg-col-dark);

    --med-blue-col: var(--med-blue-col-light);
    --med-blue-bg-col: var(--med-blue-col-light);

    --def-link-col: var(--med-blue-col);
    --def-link-bg-col: palegreen;
    --med-neutral-bg-col: #b0b0bb; /* medium grey */

    --club-open-bg-light: cornsilk;
    --club-open-bg-dark: var(--green-bg-col-dark);
    --club-full-bg-light: lightcoral;
    --club-full-bg-dark: darkred;
    --club-full-bg-dark: #723;
    --club-open-bg: var(--club-open-bg-light);
    --club-full-bg: var(--club-full-bg-light);

    --pink-alert-bg-light: lightpink;
    --pink-alert-bg-dark: mediumvioletred;
    --pink-alert-bg: var(--pink-alert-bg-light);

    --grey-text-on-light: dimgrey;
    --grey-text-on-dark: lightgrey;
    --grey-text: var(--grey-text-on-light);

    --grey-bg: var(--scnd-bg-col);

    --initials-bg-on-light: palegoldenrod;
    --initials-bg-on-dark: goldenrod;
    --initials-bg: var(--initials-bg-on-light);

    --here-bg-on-light: palegoldenrod;
    --here-bg-on-dark: darkgoldenrod;
    --here-bg: var(--here-bg-on-light);

    --khaki-bg-on-light: khaki;
    --khaki-bg-on-dark: #8D873B;
    --khaki-bg: var(--khaki-bg-on-light);

    --yellow-bg-on-light: yellow;
    --yellow-bg-on-dark: darkgoldenrod;
    --yellow-bg: var(--yellow-bg-on-light);

    --annotation-bg-col-light: papayawhip;
    --annotation-bg-col-light: thistle;
    --annotation-bg-col-light: #e8cfe8;
    --annotation-bg-col-light: #e5dcf5;
    --annotation-bg-col-dark: rebeccapurple;
    --annotation-bg-col-dark: #554477;
    --annotation-bg-col: var(--annotation-bg-col-light);
    
    --cal-vol-entry-bg-col-light: rgba(0, 0, 0, 0.06);
    --cal-vol-entry-bg-col-dark: rgba(0, 0, 0, 0.4);
    --cal-vol-entry-bg-col: var(--cal-vol-entry-bg-col-light);
}

body, a.tel, .teacher, .busOrNah, .healthI, .normalContent {
    color: var(--prim-txt-col);
    box-sizing: border-box;
}

body, section .item, .taskCounter  {
    background-color: var(--scnd-bg-col);
}
section .item  {
    XXbackground-color: var(--blue-text-bg);
}
.annotation, .busStudent .annotation, .annotationColor, table.plain tbody tr.annotation {
    /*
    background: linear-gradient(to bottom, var(--prim-bg-col), var(--med-neutral-bg-col));
    background: linear-gradient(to bottom, var(--prim-bg-col), var(--scnd-bg-col));
    background: linear-gradient(to bottom, var(--prim-bg-col), var(--annotation-bg-col));
    */
    background-color: var(--annotation-bg-col);
}

#cart {
    display: none;
    position: fixed;
    top: 0.3rem;
    right: 0.3rem;
    width: 5rem;
    max-width: 8rem;
    border: 1px solid tomato;
    padding: 0.2rem;
    border-radius: 1em;
    background-color: var(--altr-bg-col-light);
    color: tomato;
    text-align: center;
}

.theme {
    cursor: pointer;
}

.hidden, .theme.hidden, .taskCounter.hidden {
    display: none;
}

.sticky th {
    position: sticky;
    top: 0;
}

tr:nth-child(odd),
tbody:nth-child(odd), 
table.uniform tr:nth-child(even), 
table.uniform tr:nth-child(odd),
.postit, .blurb { 
    background-color: var(--altr-bg-col) 
}
tr:nth-child(even), 
tbody:nth-child(even), 
.calendar tr:nth-child(odd),
section, footer nav section, footer nav h3 span {
    background-color: var(--prim-bg-col);
}

footer nav {
    margin: 1rem 0.5rem;
}

.tabbed {
    margin-top: 1rem;
    margin-right: 1rem;
}
.tabbed.compact {
    display: inline-block;
}

footer nav h3, .tabbed h3 {
    border-bottom: 0.2rem solid var(--med-blue-bg-col);
    width: 100% !important;
}
footer nav h3 span, .tabbed h3 span {
    display: inline-block;
    margin-left: 1rem;
    margin-bottom: -0.2rem !important;
    padding: 0.2rem 0.5rem 0;
    border: 0.2rem solid var(--med-blue-bg-col);
    border-bottom-color: var(--prim-bg-col);
}
footer nav section, .tabbed section {
    border: 0 solid var(--med-blue-bg-col);
    border-left-width: 0.2rem;
    border-right-width: 0.2rem;
}
footer nav section:last-child, .tabbed section:last-child {
    border-bottom: 0.2rem solid var(--med-blue-bg-col) !important;
}

table.keyValDesc tr:nth-child(even), 
table.keyValDesc tr:nth-child(odd) { 
    background-color: var(--prim-bg-col); 
}

table.registrations tr:nth-child(even), 
table.registrations tr:nth-child(odd),
table.plain tr:nth-child(even), 
table.plain tr:nth-child(odd) { 
    background-color: inherit; 
}

table.registrations tr.registration td {
    border-top: 10px solid darkslateblue;
}
table.registrations tr.registration { 
    background-color: var(--prim-bg-col); 
}
table.registrations tr.payment { 
    background-color: palegreen; 
}
table.registrations tr.unpaid, .unpaid { 
    background-color: lightcoral; 
    color: var(--prim-txt-col-on-light);
}
.paidUp {
    background-color: mediumaquamarine; 
    color: var(--prim-txt-col-on-light);
}
.overpaid, .plum {
    background-color: plum;
    color: var(--prim-txt-col-on-light);
}

.sessionFee {
    /* maybe implement table structure for desktops? */
}

.sessionFeeAmount {
    display: inline-block;
    min-width: 7ch;
    text-align: right;
}

.sessionFeeFor {
    display: inline-block;
    margin: 0 0.3em;
}

.sessionFeeDetails {
    font-size: 80%;
}

.label.overdue {
    color: snow;
    background-color: crimson;
}
.label.overdue a {
    color: snow;
}
.label.overdue::before {
    content: "overdue: ";
}

ol.tight, ol.flush,
ul.tight, ul.flush {
    background-color: initial;
    margin-top: 0;
    margin-bottom: 0;
}
ol.flush, 
ul.flush {
    padding-left: 1.2em;
}
ul.DONTUSE li::marker {
    color: var(--med-blue-col);
}
ul {
    list-style-type: "☄️ ";
}
ul.plain {
    list-style-type: "";
}
ul.flushLeft {
    padding-left: 0;
}
ul.dash {
    list-style-type: "– "; /* en dash */
}
ul.tap, li.tap {
    list-style-type: "👆️ "; 
}
ul.student {
    list-style-type: "🧒️ "; 
}
ul.tip, li.tip {
    list-style-type: "ℹ️ "; 
}
header.tip::before {
    content: "ℹ️ ";
}
ul.print, li.print {
    list-style-type: "🖨️ "; 
}
ul[data-marker] {
    --ul-marker: attr(data-marker);
}
ul[data-marker] li::marker {
    content: var(--ul-marker); /* doesn’t work in FF or Chrome */
}
li[data-marker]::marker {
    content: attr(data-marker);
}

.unsavedReorderNotice,
.unsavedChangeNotice,
#unsavedChangeNotice {
    display: none;
}
.dateChooser button {
    /*display: none;*/
}

footer section {
    background-color: initial; 
}

main.blue > section {
    background-color: initial;
    border-bottom-color: var(--med-blue-bg-col);
}

.fLeft {
    float: left;
}
.fRight {
    float: right;
}
.clear {
    clear: both;
}

.weekdayBlock {
    display: flex;
}

.clubBlurb {
    flex: 1;
    text-align: left;
    border: 1px solid grey;
    border-radius: 1rem;
    padding: 0.6rem;
    margin-bottom: 0.6rem;
    margin-right: 0.6rem;
    vertical-align: top;
}
.clubBlurb:last-child {
    margin-right: 0;
}
.clubBlurb .clubDescription {
    font-size: 80%;
}
.clubByline,  .clubDiscount {
    font-style: italic;
    font-size: 90%;
}
.clubBlurb .clubByline, .clubBlurb .clubDiscount, .clubBlurb .extra {
    font-size: 70%;
}
.clubDiscount {
    text-align: right;
}

.clubBlurb.clubFull {
    background-color: var(--club-full-bg);
}
.clubBlurb.clubOpen {
    background-color: var(--club-open-bg);
}

.clubBlurb.clubOpen.selected, .clubBlurb.clubSelected {
    background-color: mediumspringgreen;
    color: var(--prim-txt-col-on-light);
}
.clubBlurb.clubRunning {
    background-color: mediumspringgreen;
    background-color: lightskyblue;
    background-color: var(--blue-text-bg);
}
em, .clubEmoji, .leftEmoji, .rightEmoji {
    font-style: normal;
    font-weight: normal;
}
.clubEmoji, .leftEmoji, .rightEmoji {
    font-size: 250%;
    display: inline-block;
    padding: 0 0.2rem;
}
.clubEmoji, .rightEmoji {
    float: right;
    padding-left: 0.6rem;
}
.leftEmoji {
    float: left;
    padding-right: 0.6rem;
}

.clubBlurb.clubOpen.selected .clubName::before {
    content: "✅ ";
}

.clubBlurb .clubSpots {
    font-weight: bold;
}
.clubBlurb.clubOpen .clubSpots::after {
    font-weight: normal;
    content: " 🙂";
}
.clubBlurb.clubFull .clubSpots::after {
    font-weight: normal;
    content: " 🙁";
}

.clubFees {
    text-align: right;
}

.today {
    background-color: var(--altr-bg-col);
    background-color: var(--yellow-bg);
    background-color: var(--green-bg-col);
}
.noClubDay {
    color: var(--grey-text);
    background-color: var(--grey-bg);
}

.calVolEntry {
    margin: 0.2rem 0;
    background-color: var(--cal-vol-entry-bg-col);
    border-radius: 0.5rem;
    padding: 0.1rem 0.2rem;
}

.calVolEntry.expanded {
    XXbackground-color: coral;
}

.calVolUnavail { /* not used yet */
    background-color: coral;
}

.itsMe {
    font-weight: bold;
    font-style: italic;
}

.volRole {
    display: none;
    cursor: pointer;
}
.volRole.selected {
    display: initial;
}
.calVolEntry.expanded .volRole {
    font-size: 200%;
    display: initial;
    padding: 0 0.3rem;
    border-radius: 0.6rem;
    --bg: transparent;
    background: repeating-linear-gradient(135deg, var(--bg), var(--bg) 45%, crimson 45%, crimson 55%, var(--bg) 55%, var(--bg)); 
    
}
.calVolEntry.expanded .volRole.selected {
    background: 0;
    background-color: palegreen;
}
.calVolEntry.expanded .volRole span {
    filter: saturate(0.2) opacity(0.5);
}
.calVolEntry.expanded .volRole.selected span {
    filter: none !important;
}

.coLead::after {
    content: " co-lead";
    font-size: 80%;
    font-style: italic;
}
.provisionalVolunteer::after {
    content: " provisional";
    color: crimson;
    font-size: 80%;
    font-style: italic;
}

select {
    max-width: 100%;
}

input.em3 {
    width: 3rem;
}
input.em5 {
    width: 5rem;
}
input.em10 {
    width: 10rem;
}

.formInput, .bottomMargin {
    margin-bottom: 1em;
}

.bottomDoubleMargin {
    margin-bottom: 2em;
}

.topDoubleMargin {
    margin-top: 2em;
}

.formInput.flush {
    margin-bottom: 0;
}

.formInput textarea, textarea.editableField {
    box-sizing: border-box;
    width: 30rem;
    height: 6rem;
    max-width: 100%;
}

.tightInputs {
    margin: 0.5em 0 0;
    padding: 0.5em;
    border: 1px solid var(--med-blue-bg-col);
    border-radius: 0.5rem;
}

.tightInputBlock {
    XXmargin-bottom: 0.5rem;
}

.tightInputLabel {
    font-size: 80%;
}
.tightInputElement {
}
.tightInputExplanation {
    font-size: 80%;
}

.fullWidth, .fw {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}
.hw {
    width: 50%;
    max-width: 50%;
}

.h10em {
    height: 10em;
}

.h25em {
    height: 25em;
}


.inputLabel {
    font-weight: bold;
    margin-bottom: 0.1rem;
}
.inputExplanation {
    margin-top: 0.3rem;
    font-size: 80%;
}
.additional {
    font-size: 80%;
}
.minor {
    font-size: 60%;
}

.optionalMarker.optional::after {
    /*
    content: "optional";
    font-style: italic;
    color: grey;
    font-size: 80%;
    */
}
input:required + span::after,
.optionalMarker.mandatory::after {
    display: inline-block;
    margin-left: 0.15em;
    margin-right: 0.2em;
    content: "*";
    font-weight: bold;
    color: tomato;
}

input:invalid {
    border: 3px solid crimson;
}
input:required:valid {
    background-color: var(--green-bg-col);
}
input:required:valid + span::after {
    content: " ✅️";
}

.new::before {
    color: tomato;
    font-size: 80%;
    font-weight: bold;
    font-style: normal;
    display: inline-block;
    margin-right: 1ch;
    content: attr(data-for);
}

.clubsHeader, .clubsInfo, #clubsFooter, .club, th, th a, .blueLegend, .q, .a, dt::before, dd::before, .blueBg, header.tip {
    background-color: var(--med-blue-bg-col);
    color: snow;
}
.blueLegend .init, .blueLegend .tinyinit {
    color: var(--prim-txt-col-on-light);
}

th.key, th.desc, .grayDesc, .greyDesc { 
    color: var(--grey-text);
    font-size: 80%;
    font-weight: normal;
}
th.key, th.desc { 
    background-color: initial; 
}
th.key { 
    text-align: right;
}
th.green, td.green {
    color: var(--prim-txt-col-on-light);
}

.sort::after { 
    font-style: normal;
    font-weight: normal;
    content: " 🔽"; /* caret-down */
}
td.val { 
    min-width: 10em;
}
/*
td.val, td.desc { 
    border: 1px solid tomato !important;
}
*/
th.desc { 
    max-width: 50%; /* no effect? */
}

.clubCode {
    color: #b0b0bb;
    font-size: 80%;
    font-weight: bold;
}

.teacher, .busOrNah, tr.teacher td, .greyBackground, .grayBackground, .na {
    background-color: var(--med-neutral-bg-col); 
}
.complete tr.teacher td {
    background: linear-gradient(to bottom, var(--med-neutral-bg-col), 66%, var(--prim-bg-col));
    background: linear-gradient(to left, LightGreen, 10%, transparent),
                linear-gradient(to bottom, var(--med-neutral-bg-col), 66%, var(--prim-bg-col));
}
.incomplete tr.teacher td {
    background: linear-gradient(to bottom, var(--med-neutral-bg-col), 22%, Salmon); /* old: dark grey to salmon */
    background: linear-gradient(to bottom, IndianRed, 22%, var(--prim-bg-col));
    background: linear-gradient(to left, Salmon, 10%, transparent),
                linear-gradient(to bottom, var(--med-neutral-bg-col), 66%, var(--prim-bg-col));
    background: linear-gradient(225deg, Salmon, 10%, transparent),
                linear-gradient(to bottom, var(--med-neutral-bg-col), 66%, var(--prim-bg-col));
    background: LightSalmon;
    background: linear-gradient(to left, LightSalmon, 10%, transparent),
                linear-gradient(to bottom, var(--med-neutral-bg-col), 66%, var(--med-neutral-bg-col));

    background: linear-gradient(to left, LightSalmon, 10%, transparent),
                linear-gradient(to bottom, var(--med-neutral-bg-col), 66%, var(--prim-bg-col));

}


.season[data-season="Early Fall"] {
    background: linear-gradient(to right, gold, 20%, var(--prim-bg-col));
}
.season[data-season="Fall"],
.season[data-season="Late Fall"] {
    background: linear-gradient(to right, orange, 20%, var(--prim-bg-col));
}
.season[data-season="Winter"] {
    background: linear-gradient(to right, skyblue, 20%, var(--prim-bg-col));
}
.season[data-season="Spring"] {
    background: linear-gradient(to right, mediumspringgreen, 20%, var(--prim-bg-col));
}

.student, .normalContent {
    background-color: var(--prim-bg-col);
}
.whitish, .scheduled2checkedin {
    color: var(--prim-bg-col); 
}

.unsaved, .nametagno {
    background: linear-gradient(to right, var(--prim-bg-col), 33%, LightCoral);
}
.unsaved.checkedInStatus, .nametagyes {
    background: linear-gradient(to right, var(--prim-bg-col), 33%, PaleGreen);
}
.unsaved.scheduledStatus,
.unsaved.stayingStatus,
.unsaved.returningStatus,
.unsaved.unknownStatus,
.unsavedStudentClub .studentClub,
.nametagremoved {
    background: linear-gradient(to right, var(--prim-bg-col), 33%, Tan);
}
.busStudent.unsaved {
    background: linear-gradient(to right, transparent, 90%, var(--yellow-bg));
}
.instructorList .busStudent.unsaved,
.busStudent.normalContent.unsaved {
    background: linear-gradient(to right, var(--prim-bg-col), 90%, var(--yellow-bg));
}
.busStudent.lessImportant.unsaved {
    XXbackground: linear-gradient(to right, var(--med-neutral-bg-col), 90%, var(--yellow-bg));
}

.childChanged {
    background-color: #663399; /* RebbecaPurple */
    background-color: salmon;
    background-color: yellow !important;
    color: var(--prim-txt-col-on-light);
}

.studentDayNote::before {
    content: "🎲 ";
}
.studentDayNote:hover {
    background: linear-gradient(to right, var(--scnd-bg-col), 33%, tan);
}

.validation, .redText {
    color: crimson;
}
.purple {
    color: snow;
    background-color: #663399;
}

.rainbow {
    background: linear-gradient(
        135deg,
        rgba(255, 0, 0, 1) 0%,
        rgba(255, 154, 0, 1) 10%,
        rgba(208, 222, 33, 1) 20%,
        rgba(79, 220, 74, 1) 30%,
        rgba(63, 218, 216, 1) 40%,
        rgba(47, 201, 226, 1) 50%,
        rgba(28, 127, 238, 1) 60%,
        rgba(95, 21, 242, 1) 70%,
        rgba(186, 12, 248, 1) 80%,
        rgba(251, 7, 217, 1) 90%,
        rgba(255, 0, 0, 1) 100%
    );
}

a.button.parentPickup,
.busList.parentPickup,
.alwaysColor.parentPickup {
    color: var(--prim-txt-col-on-light);
    background-color: beige;
    background-color: lavender;
    background-color: lightsteelblue;
}

.greenblue, .thorsten {
    background: linear-gradient(
        135deg,
        rgba(79, 220, 74, 1) 0%,
        rgba(28, 127, 238, 1) 100%
    );
}

.candycane, #marked4DeletionXX section {
    background: repeating-linear-gradient(135deg, ivory, ivory 10px, tomato 10px, tomato 20px); 
}
.candycane .inner {
    background-color: rgba(255, 255, 240, 0.95);
    margin: 0.3rem 0.2rem;
    padding: 0.3rem 0.4rem;
}
.rainbow .inner, .greenblue .inner, .thorsten .inner {
    background-color: rgba(255, 255, 240, 0.95);
    margin: 0.5rem 0.3rem;
    padding: 0.3rem 0.4rem;
}

.amPickup {
    /* background-color: yellow; */
}

tr:nth-child(even).noClubAttendance, 
tr:nth-child(odd).noClubAttendance,
table.uniform tr:nth-child(even).noClubAttendance, 
table.uniform tr:nth-child(odd).noClubAttendance,
table.plain tr.noClubAttendance,
.noClubAttendance {
    background-color: var(--yellow-bg);
}

tr:nth-child(even).withdrawn, 
tr:nth-child(odd).withdrawn,
table.uniform tr:nth-child(even).withdrawn, 
table.uniform tr:nth-child(odd).withdrawn,
table.plain tr.withdrawn,
.withdrawn {
    background-color: var(--pink-alert-bg);
}
a.withdrawn, .rescinded, .withdrawnFromClub {
    text-decoration: line-through;
    color: grey; 
}

.parentPickup,
.daycareVan,
.bus8,
.southAbingtonSchoolVan,
.otherTransport {
}

.errorMsg, .problemMsg {
    color: crimson !important;
    font-style: italic;
}

.confirmationMsg {
    color: var(--green-text-col) !important;
}

.error::before {
    content: "Error: ";
    color: tomato;
}
/* link */
a, .fontsize {
    color: var(--def-link-col);
}
a {
    background-color: var(--def-link-bg-col);
}
a.redLink {
    background-color: tomato;
}
a.disabled, tr.disabled {
    color: #666;
    background-color: #aaa;
}
a.plain, a.none {
    background-color: transparent;
}
a.none {
    text-decoration: none;
}
a:active, a.clicked, .label, .inlineLabel, .khaki, .khakiBg, .transitionnote {
    background-color: var(--khaki-bg);
}
a.button, .button {
    display: inline-block;
    color: var(--prim-txt-col);
    background-color: var(--prim-bg-col);
    font-size: 90%;
    border: 1px solid var(--scnd-txt-col);
    border-radius: 2em;
    padding: 0.1rem 0.5rem 0.2rem;
    text-decoration: none;
    margin: 0.4rem 0;
    cursor: pointer;
}
a.button.selected, .button.selected, .button:hover {
    box-shadow: 2px 2px 2px var(--scnd-txt-col);
}

.button.here, .here, .attendanceStatus, .message {
    background-color: var(--here-bg);
}

.button:active {
    background-color: var(--scnd-bg-col);
}
.red {
    color: snow;
    background-color: crimson;
}
.red .label {
    color: var(--prim-txt-col);
}
.redBus, a.button.redBus {
    background-color: tomato;
}
.purpleBus, a.button.purpleBus {
    background-color: plum;
    color: var(--prim-txt-col-on-light);
}
.orangeBus, .orange, a.button.orangeBus {
    background-color: orange;
    color: var(--prim-txt-col-on-light);
}
.yellowBus, a.button.yellowBus {
    background-color: gold;
    color: var(--prim-txt-col-on-light);
}
.gold {
    background-color: gold;
    color: var(--prim-txt-col-on-light);
}
.yellow {
    background-color: yellow;
    color: var(--prim-txt-col-on-light);
}
.greenBus, .greenBackground, .green, a.button.greenBus {
    background-color: var(--green-bg-col);
}
.greenColor {
    color: yellowgreen;
}
.blue {
    color: snow;
    background-color: dodgerblue;
}
.blueBus, a.button.blueBus {
    background-color: deepskyblue;
    color: var(--prim-txt-col-on-light);
}
.sky {
    background-color: lightskyblue;
    color: var(--prim-txt-col-on-light);
}
.navy {
    color: snow;
    background-color: navy;
}
.brownBus, .brown, a.button.brownBus {
    background-color: burlywood;
    color: var(--prim-txt-col-on-light);
}
.pinkBus, .pink, a.button.pinkBus {
    background-color: pink;
    color: var(--prim-txt-col-on-light);
}
.van, .daycareVan, a.button.van, a.button.daycareVan {
    background: linear-gradient(
        135deg,
        #ddd 40%,
        gold 100%
    );
    color: var(--prim-txt-col-on-light);
}

.toggleSwitch {
    --toggle-col: var(--green-bg-col-dark);
    display: inline-block;
    display: inline-table;
    font-size: 90%;
    border: 1px solid var(--toggle-col);
    border-radius: 2em;
    padding: 0;
    margin: 0.2rem;
}
.toggleOption {
    display: inline-block;
    display: table-cell;
    padding: 0.1rem 0.25rem 0.2rem;
    cursor: pointer !important;
    background-color: var(--prim-bg-col);
}
.toggleOption.selected {
    background-color: var(--toggle-col);
    color: var(--prim-txt-col-on-dark);
}
.toggleOption:first-child {
    border-top-left-radius: 2em;
    border-bottom-left-radius: 2em;
}
.toggleOption:last-child {
    border-top-right-radius: 2em;
    border-bottom-right-radius: 2em;
}

.hilite, .hiliter {
    color: #000;
    background-color: yellow;
}

section, .hr th, .hr td, div.hr {
    border-bottom-color: var(--scnd-bg-col) !important;
}
.hrb4 th, .hrb4 td {
    border-top-color: var(--scnd-bg-col) !important;
    border-top-width: 0.4rem !important;
    border-top-style: solid !important;
}

/* layout */
body {
    /*position: relative;*/
    /*font-family: "Caecilia LT Std", sans-serif;*/
    font-synthesis: none;
    margin: 0;
    padding: 0;
    z-index: 50; 
}

body.beta {
    XXbackground-attachment: fixed;
    background-image: url("data:image/svg+xml;utf8, \
  <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='180px' height='100px'> \
    <text x='85' y='75' \
      style='text-anchor: middle' fill='lightslategray' fill-opacity='0.3' font-size='64' \
      transform='rotate(-25,85,25)'> \
      βῆτα \
    </text> \
  </svg>\
");
    background-image: url("data:image/svg+xml;utf8, \
  <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='180px' height='100px'> \
    <text x='85' y='75' \
      style='text-anchor: middle' fill='lightslategray' fill-opacity='0.2' font-size='30' \
      transform='rotate(-25,65,25)'> \
      just testing \
    </text> \
  </svg>\
");
    background-image: url("data:image/svg+xml;utf8, \
  <svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='180px' height='100px'> \
    <text x='85' y='30' \
      style='text-anchor: middle' fill='lightslategray' fill-opacity='0.2' font-size='30' \
      XXtransform='rotate(0,65,25)'> \
      just testing \
    </text> \
  </svg>\
"), linear-gradient(to left, hotpink, 10%, var(--scnd-bg-col));
}

body.beta {
}

.beta section {
}

.debug {
    display: none;
}

body.local .debug {
    display: inherit;
}

.inline {
    display: inline;
}

[data-tooltip] {
    position: relative;
    display: inline-block;
}

[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    visibility: visible;
    background-color: rgba(0, 0, 0, 0.7);
    color: snow;
    font-size: 80%;
    font-weight: bold;
    text-align: center;
    border-radius: 0.5rem;
    padding: 0.5rem;
    position: absolute;
    z-index: 1;
    top: 100%;
    right: 0;
    min-width: 3rem;
    margin-left: -5rem;
    margin-top: 0.5rem;
}

.redlinethru {
    text-decoration: line-through;
    color: crimson;
    font-weight: bold;
}

.clubEnrollmentOverview {
    margin-top: 1rem;
    page-break-inside: avoid;
}

.clubEnrollment + .clubEnrollment {
    /*background-color: khaki;*/
    margin-top: 0.25rem;
}

table.calendar {
    table-layout: fixed;
    width: 100%;
    page-break-inside: avoid;
    margin-bottom: 1rem;
    /*background-color: orange !important;*/
}
table.calendar.flush {
    margin-bottom: 0;
}
table.calendar col {
    width: 20%;
}

.together {
    page-break-inside: avoid;
}

table.calendar th {
    border: none;
    text-align: center;
}

table.calendar tr.month th {
    font-weight: bold;
    padding-top: 1rem;
    color: inherit;
    background-color: inherit;
}
table.calendar tr.month:first-child th {
    padding-top: 0;
    /*background-color: orange;*/
}

table.calendar td {
    vertical-align: top;
}

.calendarDay {
}
.calendarDay td {
}

table.calendar .dayNum {
    float: left;
    width: 2rem;
    font-size: 125%;
    padding-right: 0.3em;
    font-weight: bold;
    text-align: right;
    /*background-color: lightpink;*/
}
table.calendar .dayContent {
    /*background-color: lightgreen;*/
    padding-left: 3rem;
}

table.calendar .dayComment {
    font-style: italic;
    color: var(--grey-text);
    text-align: right;
}

table.keyValDesc table {
    border: 0;
    margin: 0.8em 0;
}

.expandable tr.studentRow, .expandable .ifexpanded {
    display: none;
}
.expandable.expanded tr.studentRow {
    display: table-row;
}
.expandable .ifexpanded.expanded {
    display: initial;
}
.expandable ul.ifexpanded.expanded {
    display: block;
}

.expandable tr.teacher td {
    cursor: pointer;
}
.expandable tr.teacher td:last-child::after {
    content: " ⏬";
}
.expandable.expanded tr.teacher td:last-child::after {
    content: " ⏫";
}

h1, h2, h3, h4 {
    margin-top: 0;
    margin-bottom: 0;
    /*background-color: khaki;*/
}

.padBottom {
    padding-bottom: 1rem;
}

h2 {
    font-size: 100%;
}
h3 {
    font-size: 90%;
}
h1, table.calendar tr.month th {
    font-size: 115%;
}

.huge {
    font-size: 250%;
}

.right {
    text-align: right;
}

.pWide {
    width: 50rem;
    max-width: 100%;
}

.tawrap {
    XXbackground-color: PaleGreen;
    width: 100%;
    max-width: 100% !important;
}

textarea.pMax100 {
    /*
    width: 50rem;
    */
    display: block;
    width: 98%;
    max-width: 100% !important;
}

textarea {
    /*width: 50rem;*/
    max-width: 100% !important;
}

p, .p, .postit, .blurb, .info, .text, h1, h2, .clubBlurb, .qContent {
    max-width: 50rem;
}
p, .p {
    margin-top: 0;
    margin-bottom: 0;
}
.trad {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.doubleTopMargin {
    margin-top: 2em;
}
p + p, .p + .p, .topMargin, ul.topMargin {
    margin-top: 1em;
}
.topPadding {
    padding-top: 1em;
}
.conditionalSaveBlock {
    display: none;
    background-color: yellow;
    color: var(--prim-txt-col-on-light);
    padding: 1em;
}
.saveBlock {
    padding: 1em;
}
.halfTopMargin {
    margin-top: 0.5em;
}
.halfBottomMargin {
    margin-bottom: 0.5em;
}
.halfLeftMargin {
    margin-left: 0.5em;
}
.halfRightMargin {
    margin-right: 0.5em;
}
.halfTopPadding {
    padding-top: 0.5em;
}
.halfBottomPadding {
    padding-bottom: 0.5em;
}
.info, .i {
    font-style: italic;
}
.upright {
    font-style: normal;
}
.note::before {
    content: "Note: ";
    color: tomato;
}
.postitWrapper {
    margin-bottom: 0.4rem;
}
.postit, .i {
    font-style: italic;
}
.postit, .blurb, .needsBlurb {
    display: inline-block;
}

img {
    max-width: 100%;
}
img.contain {
    max-height: 100vh;
}

.center {
    text-align: center;
}
.centeredNote {
    margin-top: 2em;
}
.centeredNote p {
    padding-left: 1em;
    padding-right: 1em;
    margin-left: auto;
    margin-right: auto;
}

a, .hilite, .transport, .postit, .blurb, .q, .a,
i.green, i.yellow,
i.gold, i.red,
i.pink, i.brown,
i.blue, i.purple,
.day, .label, .inlineLabel, .transitionnote, .item, li.today, .attendanceStatus, .message {
    border-radius: 0.5rem;
    padding: 0.1em 0.4em;
}
.mini, .labe.mlini, .transport.mini {
    padding-top: 0;
    padding-bottom: 0;
}
.postit .inner, .blurb .inner, .needsBlurb {
    border-radius: 0.5rem;
}

.needsBlurb {
    border: 1px solid var(--grey-text);
    margin: 0 0 0.3rem;
    padding: 0.1rem 0.2rem 0.2rem;
}

a, .hilite, .transport {
    display: inline-block;
}
.item.margin, a.margin, .margin {
    display: inline-block;
    margin-bottom: 0.2em;
}
.transport, .fit {
    white-space: nowrap;
}
a.plain, a.none {
    display: inline;
    border-radius: 0;
    padding: 0;
}
a.help::after {
    font-size: 60%;
    vertical-align: super;
    content: "❓️";
    text-decoration: none;
}
a.disabled {
    text-decoration: none;
}
a.mail::before {
    content: "📧 ";
}
.qa {
    display: table;
    max-width: 100%;
    border-spacing: 0.6rem;
}
.qRow, .aRow {
    display: table-row;
}
.qContent, .aContent {
    padding-top: 0.3rem;
    padding-left: 0.3rem;
    display: table-cell;
}
.aContent {
}
.q, .a {
    display: table-cell;
    font-weight: bold;
    vertical-align: top;
    width: 1rem;
}

.rainEmoji::before {
    content: "🌧️ ";
}
.sunCloudEmoji::before {
    content: "⛅️ ";
}

.mirrored {
    display: inline-block;
    transform: scaleX(-1);
}

main, footer, .userLine {
    /*font-size: 130%;*/
}

.fontsize {
    font-weight: bold;
}
.fontsize.larger {
    font-size: larger;
    cursor: pointer;
}
.fontsize.smaller {
    font-size: smaller;
    cursor: pointer;
}

textarea, main.normalSize, footer.normalSize {
    font-size: 100%;
}

table {
    /* needed to keep borders with sticky headers 
    border-collapse: collapse;
    */
    border-collapse: separate;
    border-spacing: 0;
    min-width: 100%;
}

table.compact {
    border-collapse: collapse;
    min-width: 0;
}

th {
    text-align: left;
    font-weight: normal;
}

th, td {
    border: 0.5px solid #bdb;
    padding: 0.2em 0.3em;
}
.groupedRows tbody tr:first-child td {
    border-top: 4px solid #bdb;
}

th.plain, td.plain {
    border: 0;
}

.weekdays, .day {
    font-weight: bold;
}
.day {
    background-color: PaleGreen;
}

.label, .nowrap, .transitionnote {
    white-space: nowrap;
}

.desc, .weekdays, .day, .label, .inlineLabel, .transitionnote {
    font-size: 80%;
}
.desc {
    font-weight: normal;
}

.normalWeight {
    font-weight: normal;
}

.weekdays .day {
    font-size: 100%;
}

th.key, td.val, th.desc {
    border: 0;
}

tr.teacher td {
    padding-top: 1.2em;
}

td.guardiansOrContacts .phone {
    display: none;
}
td.guardiansOrContacts:hover .phone {
    display: inline-block;
}

td.guardiansOrContacts .guardianOrContact::before {
    content: ", ";
}
td.guardiansOrContacts .guardianOrContact:first-child::before {
    content: "";
}
td.guardiansOrContacts:hover .guardianOrContact {
    display: block;
}
td.guardiansOrContacts:hover .guardianOrContact::before {
    content: "";
}

.shorten5, .shorten10 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
span.shorten5, span.shorten10 {
    display: inline-block;
}
.shorten5 {
    max-width: 5em;
}
.shorten10 {
    max-width: 10em;
}
.shorten5:hover, .shorten10:hover {
    max-width: auto;
    max-width: initial;
    overflow: initial;
    white-space: initial;
    text-overflow: initial;
}

.noClub {
    background: repeating-linear-gradient(
	-45deg,
	rgba(128, 80, 100, 0.2),
	rgba(128, 80, 100, 0.2) 3px,
	rgba(255, 255, 255, 0) 3px,
	rgba(255, 255, 255, 0) 6px
    )
}

.canceled {
    text-decoration: line-through;
    background: LightCoral;
}

.inactive, tr.noCheckDue {
    text-decoration: line-through;
    background: lightgrey;
    color: var(--prim-txt-col-on-light);
}

header, section, aside {
    padding: 0.6rem 1rem;
}
header.largeLead {
    margin-top: 2rem;
}
.topFlush {
    padding-top: 0;
    margin-top: 0;
}
.bottomFlush {
    padding-bottom: 0;
    margin-bottom: 0;
}

section.nopad {
    padding: 0rem 0.4rem;
}

section.clubImpressions {
    padding-left: 0;
    padding-right: 0;
}
.impressionTitle,
.impressionComment,
.impressionThanks {
    margin: 0 1rem;
}
.impressionClub {
    font-weight: bold;
}
.impressionComment,
.impressionThanks {
    font-style: italic;
}
.impressionThanks {
    text-align: right;
}

.userLine {
    text-align: right;
    padding: 0.3rem 1rem;
}

.sectionVertical {
    padding: 0.6rem 0;
}
.topDoubleSpace {
    padding-top: 1.2rem;
}

aside {
    margin-bottom: 1rem;
    font-size: 80%;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

section, .hr th, .hr td {
    border-bottom-width: 0.4rem;
    border-bottom-style: solid;
}
section.flush {
    border-bottom: none;
}

.clubtitle strong {
    font-weight: normal;
}

.blueLegend {
    padding: 0.6rem 1rem;
}

.busList {
    margin-bottom: 1rem;
    padding: 0.2rem 0.4rem 0.2rem 0.4rem;
}
.busList .busName {
    font-weight: bold;
}
.busOrNah {
    padding: 0 0.4rem 0.4rem;
    margin-bottom: 0.2rem;
}
.busOrNah.flush {
    padding: 0;
}
.busStudent {
    padding-top: 0.5rem;
}
.busStudentName, .busStudent .annotation {
    padding: 0 0.2rem;
}

.clubsHeader, .clubsInfo, .club, main.blueX {
    padding-left: 1.5rem;
    padding-top: 0.5rem;
}
.club.binClub {
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}
.clubsHeaderLine {
    display: inline-block;
    padding: 0.5rem 1.5rem;
}
.clubsInfo.topPadding {
    padding-top: 1rem;
}
.club, #clubsFooter {
    padding-bottom: 0.5rem;
    position: relative;
    /*margin-bottom: 0.2rem;*/
}
#clubsFooter {
    display: none;
    padding-left: 1em;
}

.clubsidebar {
    /* unclear if those two do annything */
    display: block;
    height: auto;
    
    position: absolute;
    bottom: 0;
    left: 0;
    text-transform: uppercase;
    letter-spacing: 0.2rem;

    transform-origin: 0 0;
    transform: rotate(270deg);
    overflow: visible;
    
    text-overflow: clip !important;
    white-space: nowrap !important;
    /*
    font-size: 200%;
    border: 1px solid linen;
    */
}

.scheduled2checkedin, .checkedin2dismissed, .klickbar {
    cursor: pointer;
}

.teacher {
    padding-left: 1em;
    padding-bottom: 0.5rem;
    margin-bottom: 0.2rem;
}
.annotation {
    display: none;
}
.annotation:last-child {
    margin-bottom: 0.6em;
}
.annotation .contact {
    text-align: right;
}
.annotation.plain, .busStudent .annotation.plain {
    background: transparent;
    padding: 0;
}
.annotation.plain:last-child {
    margin-bottom: 0;
}

.studentCount {
    display: inline-block;
    min-width: 1.5em;
    text-align: right;
    margin-right: 0.1em;
    /*border: 1px dotted CadetBlue;*/
}

.healthI {
    display: inline-block;
    color: black;
    width: 1em;
    text-align: center;
}

.studentInfo::after {
    content: " 📄";
}
.studentInfo.expanded::after {
    content: "";
}

.remind::after {
    content: " 📲 ";
}

.attendanceZone:hover {
    cursor: pointer;
    /*
    background: repeating-linear-gradient(
	-45deg,
	rgba(128, 80, 100, 0.2),
	rgba(128, 80, 100, 0.2) 3px,
	rgba(255, 255, 255, 0) 3px,
	rgba(255, 255, 255, 0) 6px
    )
    */
}

.attendanceZone::before {
    display: inline-block;
    content: "❓";
    min-width: 1.5em;
    text-align: center;
    padding: 0;
    margin-left: 0.2em;
    /*border: 1px dotted CadetBlue;*/
}

/* experimental */

/* keep showing inline transport even for scheduled students with clear attendance */
/*
.inlineTransport {
    display: none;
}
.student.attendanceUnclear.scheduledStatus .inlineTransport {
    display: initial;
}
.student.attendanceUnclear.scheduledStatus .inlineTransport.parentPickup,
.student.attendanceUnclear.scheduledStatus .inlineTransport.daycareVanAM {
    display: none;
}
*/

.inlineTransport {
    display: none;
}
.student.scheduledStatus .inlineTransport,
.student.stayingStatus .inlineTransport,
.student.returningStatus .inlineTransport,
.student.unknownStatus .inlineTransport {
    display: initial;
}
.student.wontAttendStatus .inlineTransport,
.student.scheduledStatus .inlineTransport.parentPickup,
.student.scheduledStatus .inlineTransport.daycareVanAM {
    display: none;
}

.student.attendanceUnclear.scheduledStatus .attendanceZone, .noAttendanceInfo {
    background: gold;
    background: linear-gradient(to right, HotPink, transparent);
    background: linear-gradient(to right, gold, 50%, var(--prim-bg-col));
}

button.checkInOrOut {
    display: none;
}
.instructorList button.checkInOrOut,
.expected4kc .returningStatus button.checkInOrOut,
.expected4kc .stayingStatus button.checkInOrOut,
.expected4kc .scheduledStatus button.checkInOrOut,
.expected4kc .checkedInStatus button.checkInOrOut {
    display: initial;
}
.stayingStatus button.checkInOrOut::before,
.returningStatus button.checkInOrOut::before,
.scheduledStatus button.checkInOrOut::before {
    content: " ✅️";
}
.checkedInStatus button.checkInOrOut::before {
    content: "undo ✅️";
}

button.dismiss::before {
    content: " 👋 ";
}
.dismissedStatus button.dismiss::before {
    content: "undo 👋 ";
}

.statusButton::before {
    display: inline-block;
    margin-right: 0.2rem;
}
.button.scheduledStatus::before {
    content: "❓️";
}
.button.checkedInStatus::before,
.student.checkedInStatus .attendanceZone::before {
    content: "✅";
}
.button.dismissedStatus::before,
.student.dismissedStatus .attendanceZone::before {
    content: "👋";
}
.button.wontAttendStatus::before,
.student.wontAttendStatus .attendanceZone::before {
    content: "❎";
}
.student.withdrawnStatus .nameZone {
    color: grey;
    text-decoration: line-through;
}
.button.withdrawnStatus::before,
.student.withdrawnStatus .attendanceZone::before {
    content: "⛔";
}
.button.stayingStatus::before,
.student.stayingStatus .attendanceZone::before {
    content: "❗️";
}
.button.returningStatus::before,
.student.returningStatus .attendanceZone::before {
    content: "↪️";
}
.button.unknownStatus::before,
.student.unknownStatus .attendanceZone::before {
    content: "🤷";
}

/* obsolete */
.button.clubCanceledStatus::before,
.student.clubCanceledStatus .attendanceZone::before {
    content: "🚫";
}
.button.otherStatus::before,
.student.otherStatus .attendanceZone::before {
    content: "···";
    font-weight: bold;
}
/* end obsolete */

a.tel {
    text-decoration: none;
}

a.tel::before {
    content: " 📞 ";
}

.clear {
    clear: both;
}

.prewrap {
    white-space: pre-wrap;
}

.moveUp, .moveDown, #surveyQuestions .undelete, #marked4Deletion .mark4Deletion {
    display: none;
}
.moveUp, .moveDown, .mark4Deletion {
    cursor: pointer;
}
.reorderable:not(:first-child) .moveUp, 
.reorderable:not(:last-child) .moveDown {
    display: initial;
}

@media screen and (orientation: landscape) and (min-width: 40em) {
    /* do certain things only on non-mobile */
    /* used to show .moveUp and .moveDown only here, but no more */
}

#marked4Deletion section {
    background-color: coral; 
}
#marked4Deletion .undelete {
    display: initial;
}


[data-hover]:hover::before {
    content: attr(data-hover);
    color: white;
    position: fixed;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 0.3em 0.6em 0.3em;
    font-size: 80%;
    border-top-left-radius: 0.5em;
    z-index: 160;
    max-width: 50%;
}

dt {
}
dd {
    margin-left: 0;
    margin-bottom: 0.8em;
}
dt::before, dd::before {
    display: inline-block;
    text-align: center;
    width: 3ch;
    margin-right: 1ch;
    font-weight: bold;
}
dt::before {
    content: "Q";
}
dd::before {
    content: "A";
}

dl.inField {
    margin-top: 0;
}
.inField dt {
    margin-left: 1.5ch;
}
.inField dd {
    margin-left: 3ch;
    margin-bottom: 0.4em;
    font-weight: bold;
}
.inField dt::before,
.inField dt::after,
.inField dd::before {
    display: inline-block;
    text-align: left;
    font-weight: normal;
    width: auto;
    font-size: 80%;
    background-color: inherit;
    color: var(--grey-text);
}
.inField dt::before,
.inField dd::before {
    margin-right: 1ch;
}
.inField dt::before {
    content: "In the";
}
.inField dt::after {
    content: "field:";
    margin-left: 1ch;
}
.inField dd::before {
    content: "";
}
.onlyPrint {
    display: none;
}

@media screen and (max-width: 60em) {
    .weekdayBlock {
	flex-direction: column;
    }
    .clubBlurb {
	margin-left: 0;
	margin-right: 0;
    }

    header, section {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
    }   
    .impressionTitle,
    .impressionComment,
    .impressionThanks {
	margin-left: 0.5rem;
	margin-right: 0.5rem;
    }
}

@media screen and (max-width: 40em) {
    table.calendar {
	font-size: 50%;
    }
    table.calendar .dayNum {
	width: 1rem;
	padding-right: 0;
    }
    table.calendar .dayContent {
	padding-left: 1.25rem;
    }
    .hw {
	width: 100%;
	max-width: 100%;
    }
}

@media screen and (max-width: 50em) {
    .tightInputs td {
	display: table-row;
    }
    .tightInputs td.tightInputLabel {
	padding-top: 0.5em;
    }
    
    /*
    .tightInputBlock {
	display: table-row;
	width: auto;
    }
    
    .tightInputLabel,
    .tightInputElement,
    .tightInputExplanation {
	float: left;
	display: table-column;
	width: 33%;
    }
    */
}

.dark, .light .dark {
    --prim-bg-col: var(--prim-bg-col-dark);
    --scnd-bg-col: var(--scnd-bg-col-dark);
    --altr-bg-col: var(--altr-bg-col-dark);

    --prim-txt-col: var(--prim-txt-col-on-dark);
    --scnd-txt-col: var(--scnd-txt-col-on-dark);
    --green-text-col: var(--green-text-col-dark);

    --green-bg-col: var(--green-bg-col-dark);
    
    --med-blue-col: var(--med-blue-col-dark);
    --def-link-col: lightcyan;
    --def-link-bg-col: var(--def-link-bg-col-dark);
    --med-neutral-bg-col: #80808b; /* medium grey */
    --blue-text-bg: var(--blue-text-bg-dark);
    --blurb-link: var(--blurb-link-dark);
    --club-open-bg: var(--club-open-bg-dark);
    --club-full-bg: var(--club-full-bg-dark);
    --pink-alert-bg: var(--pink-alert-bg-dark);
    --grey-text: var(--grey-text-on-dark);
    --grey-bg: var(--scnd-bg-col);
    --initials-bg: var(--initials-bg-on-dark);
    --here-bg: var(--here-bg-on-dark);
    --khaki-bg: var(--khaki-bg-on-dark);
    --yellow-bg: var(--yellow-bg-on-dark);
    --annotation-bg-col: var(--annotation-bg-col-dark);
    --cal-vol-entry-bg-col: var(--cal-vol-entry-bg-col-dark);
}
.dark .postit .inner,
.dark .blurb .inner {
    background-color: var(--prim-bg-col-dark);
    color: var(--prim-txt-col);
    margin: 0.5rem 0.3rem;
    padding: 0.4rem 0.4rem;
}
.dark input, .dark textarea, .dark button, .dark select, .dark select > option {
    background-color: #333;
    color: #ddd;
}
.dark a.plain, .dark a.none, .dark .fontsize {
    color: var(--med-blue-col);
}
.dark em {
    display: inline-block;
    padding: 0.1rem 0.2rem;
    margin: 0 0.2rem;
    border-radius: 0.5rem;
    background-color: rgba(255, 255, 255, 0.3);
}
.dark em.plain {
    display: initial;
    padding: initial;
    margin: initial;
    border-radius: initial;
    background-color: initial;
}
.dark .inner em {
    margin: 0;
}
.dark .inner em.leftEmoji {
    margin-right: 0.4rem;
}
.dark .inner em.rightEmoji,
.dark .inner em.clubEmoji {
    margin-left: 0.4rem;
}
.light, .dark .light {
    --prim-bg-col: var(--prim-bg-col-light);
    --scnd-bg-col: var(--scnd-bg-col-light);
    --altr-bg-col: var(--altr-bg-col-light);
    --green-text-col: var(--green-text-col-light);
    
    --prim-txt-col: var(--prim-txt-col-on-light);
    --scnd-txt-col: var(--scnd-txt-col-on-light);
    
    --def-link-col: var(--def-link-col-light);
    --def-link-bg-col: var(--def-link-bg-col-light);
    --med-neutral-bg-col: var(--med-neutral-bg-col-light);
    --blue-text-bg: var(--blue-text-bg-light);
    --club-open-bg: var(--club-open-bg-light);
    --club-full-bg: var(--club-full-bg-light);
    --pink-alert-bg: var(--pink-alert-bg-light);

    --blurb-link: var(--blurb-link-light);
    --grey-text: var(--grey-text-on-light);
    --grey-bg: var(--scnd-bg-col-light);
    --initials-bg: var(--initials-bg-on-light);
    --here-bg: var(--here-bg-on-light);
    --khaki-bg: var(--khaki-bg-on-light);
    --yellow-bg: var(--yellow-bg-on-light);
    --cal-vol-entry-bg-col: var(--cal-vol-entry-bg-col-light);
}
.light2dark {
    background: linear-gradient(to bottom, var(--prim-bg-col-light), 50%, var(--prim-bg-col-dark));
}

.taskCounter {
    display: inline-block;
    margin-top: 0.1rem;
    border-radius: 0.3rem;
    padding: 0 0.2rem;
    min-width: 1em;
}
.taskCounter.insufficient {
    background-color: crimson;
    color: snow;
}
.taskCounter.min {
    background-color: orange;
    color: var(--prim-txt-col-on-light);
}
.taskCounter.ok {
    background-color: yellow;
    color: var(--prim-txt-col-on-light);
}
.taskCounter.good, .taskCounter.full {
    background-color: palegreen;
    color: var(--prim-txt-col-on-light);
}
.taskCounter.max {
    background-color: seagreen;
    color: var(--prim-txt-col-on-dark);
}

.Mo, .monthday {
    display: inline-block;
    /*background-color: khaki;*/
}
.Mo {
    min-width: 3.25ch;
}
.monthday {
    min-width: 4.5ch;
}

.init {
    font-weight: bold;
    background-color: var(--initials-bg);
    margin-top: 0.1rem;
    border-radius: 0.3rem;
    min-width: 1em;
    text-align: center;
    font-style: normal;
}
label.init {
    padding-right: 0.2rem;
}

.grey, .gray {
    color: var(--grey-text);
}

.clubBlurb a.none {
    color : var(--blurb-link);
}

@page { 
    /* size: 8.5in 5.5in; */
    margin: 0.2in;
    margin: 10mm;
} 

@media (min-width: 1201px) {
    .club.binClub {
	padding-left: 1rem;
	padding-right: 1rem;
    }
}

@media print {

@media print {
    .noPrint, .noprint, #msgLine {
	display: none;
    }
    .onlyPrint {
	display: inherit;
    }
    body, .club, .teacher, .student {
	background-color: white !important;
    }
    body {
	font-synthesis: none !important;
	/*font-size: 50% !important;*/
	/*font-size: 8pt !important;*/
	/*font-size: 3mm !important;*/
	/*font-family: serif;*/
	margin: 0;
	padding: 0;
    }
    body, .club, .teacher {
	color: #000 !important;
    }
    section, .hr th, .hr td {
	border-bottom: 0;
    }
    .clubsHeader {
	display: none;
    }
    .clubHeaderPrint {
	text-align: right;
	font-style: italic;
    }
    .userLine, .clubsInfo, .clubCount, .postits, .scheduled2checkedin, .noPrint, .noprint, .aRow {
	display: none;
    }
    .club, .teacher {
	padding-left: 0;
    }
    .together, .qa {
	page-break-inside: avoid;
    }
    .club {
	/*background-color: #aaa;*/
	padding-top: 0;
	border: 1.5mm solid #aaa;
	margin: 0 0 3mm 0;
	page-break-inside: avoid;
	/*page-break-after: always;*/ /* just temp for Yoga */
    }
    /*
    .club:not(:first-child) {
	page-break-before: always;
	page-break-inside: avoid;
    }
    */
    .clubtitle strong {
	font-size: 150%;
	font-weight: bold;
    }
    .teacher {
	border-top: 0.5mm solid #aaa;
	clear: both;
    }
    .student {
	float: right;
	width: 70%;
    }
    .studentInfo::after {
	content: " ℹ";
    }
    .clubsidebar {
	display: none;
    }


    .attendanceZone::before {
	content: "" !important;
    }
    /*
    .checkedIn .attendanceZone::before {
	content: "✓";
    }
    .wontAttend .attendanceZone::before {
	content: "×";
    }
    .wontAttend {
	text-decoration: line-through;
    }
    */

    table.calendar .dayNum {
	width: 1.25rem;
	padding-right: 0;
    }
    table.calendar .dayContent {
	padding-left: 1.75rem;
    }

    table.calendar .dayComment {
	/*color: #aaa !important;*/
	/*border: 2px dashed green;*/
	color: rgba(0, 0, 0, 0) !important;
        text-shadow: 0 0 0 #666 !important;
    }

    footer {
	display: none;
    }
    footer.print {
	display: block;
	width: 100%;
	position: fixed;
	bottom: 0;
    }
}