/* Keep room for the scrollbar so filtering a short list doesn't shift the page sideways */ html { scrollbar-gutter:stable; } /* Tennis Sessions brand: deep purple ink, violet actions, magenta one-offs, pink ongoing */ #ct-app [hidden] { display:none !important; } #ct-app { --ct-bg:#f7f4fa; --ct-card:#ffffff; --ct-ink:#310069; --ct-muted:#6e6585; --ct-line:#e9e2f1; --ct-green:#310069; --ct-green-ink:#ffffff; --ct-open:#f4e6fb; --ct-taken:#f1eef5; --ct-soft:#f6f2fa; --ct-oneoff:#9400c1; --ct-ongoing:#e8005a; --ct-oneoff-grad:linear-gradient(90deg,#9400c1,#a812d0); --ct-ongoing-grad:linear-gradient(90deg,#ff015b,#e8005a); --ct-amber:#fff3c4; --ct-amber-ink:#7a5200; --ct-red:#fde2e2; --ct-red-ink:#8a1c1c; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:var(--ct-ink); background:transparent; max-width:640px; margin:0 auto; padding:24px 16px 16px; box-sizing:border-box; line-height:1.4; -webkit-font-smoothing:antialiased; } #ct-app *, #ct-app *::before, #ct-app *::after { box-sizing:border-box; } #ct-app, #ct-app * { cursor:auto !important; } #ct-app button, #ct-app select, #ct-app input[type="date"], #ct-app .ct-link, #ct-app label, #ct-app a, #ct-app a *, #ct-app button * { cursor:pointer !important; } /* Whole buttons and labels show the hand, including their text and the boxes inside them (1.54.7) */ #ct-app label *, #ct-app .ct-btn, #ct-app .ct-btn *, #ct-app input[type="checkbox"], #ct-app input[type="radio"], #ct-app input[type="file"], #ct-app summary { cursor:pointer !important; } #ct-app label.ct-btn { user-select:none; -webkit-user-select:none; } #ct-app input[type="text"], #ct-app input[type="email"], #ct-app input[type="password"], #ct-app input[type="number"], #ct-app input[type="url"], #ct-app input[type="search"], #ct-app input[type="tel"], #ct-app input:not([type]), #ct-app textarea { cursor:text !important; } #ct-app .ct-sticky { position:sticky; top:var(--ct-sticky-top, 0px); z-index:50; background:#f6f7fb; padding-top:4px; margin:0 -4px 14px; padding-left:4px; padding-right:4px; border-bottom:1px solid var(--ct-line); } #ct-app .ct-head { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:1fr auto; align-items:end; gap:6px 12px; margin-bottom:22px; } #ct-app .ct-head-left { grid-column:1; grid-row:1 / 3; justify-self:start; display:flex; flex-direction:row; align-items:baseline; gap:10px; } #ct-app #ct-offer-btn { grid-column:2; grid-row:2; justify-self:end; } #ct-app .ct-title { font-size:clamp(22px, 7.2vw, 30px); white-space:nowrap; font-weight:800; margin:0; line-height:1.1; letter-spacing:-0.01em; } #ct-app .ct-title-more { display:none; } #ct-app h1.ct-title { display:block; } #ct-app .ct-logo { display:block; height:80px; width:auto; } @media (max-width:479px) { #ct-app #ct-offer-btn { font-size:13px; padding:8px 11px; } #ct-app .ct-who { font-size:13px; } } @media (max-width:369px) { #ct-app .ct-head { gap:6px; } #ct-app #ct-offer-btn { padding:7px 9px; } } @media (max-width:369px) { #ct-app .ct-logo { height:66px; } #ct-app .ct-head-left { gap:6px; } #ct-app .ct-club { font-size:14px; } } @media (max-width:339px) { #ct-app .ct-logo { height:62px; } #ct-app .ct-club { font-size:13px; } #ct-app #ct-offer-btn { font-size:12px; padding:7px 8px; } #ct-app .ct-who { font-size:12px; } } @media (min-width:600px) { #ct-app .ct-logo { height:84px; } } /* Header (all sizes): logo + club on the left; name, name field (first visit) and button stacked on the right */ #ct-app .ct-sticky { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:1fr auto auto; column-gap:12px; } #ct-app .ct-who { position:relative; } #ct-app .ct-who .ct-who-select { inset:-6px -4px; } #ct-app .ct-who-select { position:absolute; inset:-6px -4px; width:calc(100% + 8px); height:calc(100% + 12px); opacity:0; font-size:16px; cursor:pointer !important; -webkit-appearance:menulist; appearance:auto; } #ct-app .ct-head { display:contents; } #ct-app .ct-head-left { grid-column:1; grid-row:1 / 4; align-self:end; margin-bottom:32px; } #ct-app .ct-who { grid-column:2; grid-row:1; align-self:end; margin-bottom:6px; } #ct-app .ct-sticky .ct-me { grid-column:2; grid-row:2; justify-self:end; width:158px; margin:0 0 6px; } #ct-app .ct-sticky .ct-me .ct-select { padding:7px 28px 7px 10px; background-position:right 10px center; } #ct-app #ct-offer-btn { grid-column:2; grid-row:3; align-self:end; justify-self:end; margin-bottom:32px; } #ct-app .ct-filter { grid-column:1 / -1; grid-row:4; } #ct-app .ct-adminbar { grid-column:1 / -1; grid-row:5; } @media (min-width:600px) { /* desktop: name (or name field) and button drop down so the button lines up with the filter chips */ #ct-app .ct-head-left { margin-bottom:6px; } #ct-app .ct-who { grid-row:3; } #ct-app .ct-sticky .ct-me { width:220px; grid-row:3; } /* filters use the full width under the name field, stopping short of the Offer button on the same row */ #ct-app .ct-filter { grid-column:1 / -1; grid-row:4; align-self:end; padding-right:170px; } #ct-app .ct-filter { pointer-events:none; } #ct-app .ct-filter > * { pointer-events:auto; } #ct-app #ct-offer-btn { position:relative; z-index:2; } #ct-app #ct-offer-btn { grid-row:4; margin-bottom:10px; } } /* phones: the Offer button sits higher, under the name, so a long club name can run beneath it */ @media (max-width:599px) { #ct-app #ct-offer-btn { margin-bottom:68px; } #ct-app .ct-head-left { margin-bottom:22px; } #ct-app .ct-filter .ct-chip[data-kind] { display:none; } } @media (max-width:339px) { #ct-app .ct-sticky .ct-me { grid-column:1 / -1; grid-row:4; width:100%; margin:0 0 10px; } #ct-app .ct-filter { grid-row:5; } #ct-app .ct-adminbar { grid-row:6; } } @media (min-width:600px) { #ct-app .ct-head-left { gap:20px; } #ct-app .ct-head-left .ct-club { font-size:18px; } } #ct-app .ct-vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } #ct-app .ct-club { margin:0; line-height:1; white-space:nowrap; font-size:15px; font-weight:700; letter-spacing:0; color:var(--ct-ongoing); } @media (min-width:600px) { #ct-app .ct-title { font-size:32px; } #ct-app .ct-title-more { display:inline; } } #ct-app .ct-sub { margin:0; font-size:13px; color:var(--ct-muted); } #ct-app .ct-label { display:block; font-size:12px; font-weight:600; color:var(--ct-muted); text-transform:uppercase; letter-spacing:0.04em; margin:10px 0 4px; } #ct-app .ct-hint { margin:4px 0 0; font-size:12px; color:var(--ct-muted); } #ct-app .ct-select, #ct-app .ct-input { min-height:46px; line-height:1.4; display:block; } #ct-app input[type="date"].ct-input, #ct-app input[type="time"].ct-input { -webkit-appearance:none; appearance:none; text-align:left; display:block; min-width:0; max-width:100%; } #ct-app input[type="time"].ct-input, #ct-app input[type="date"].ct-input { height:46px; } #ct-app input[type="date"].ct-input::-webkit-date-and-time-value, #ct-app input[type="time"].ct-input::-webkit-date-and-time-value { text-align:left; min-height:1.4em; } #ct-app .ct-select, #ct-app .ct-input { width:100%; font:inherit; font-size:16px; padding:10px 12px; border:1px solid var(--ct-line); border-radius:6px; background:var(--ct-card); color:var(--ct-ink); appearance:none; -webkit-appearance:none; } #ct-app .ct-select { background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; } /* Name picker: just the field, right-aligned under the name, about the width of the Offer button */ #ct-app .ct-me { width:220px; max-width:100%; margin:0 0 12px auto; } #ct-app .ct-me .ct-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } #ct-app .ct-me .ct-select { min-height:40px; padding:7px 32px 7px 12px; } #ct-app .ct-me.ct-set { display:none; } #ct-app .ct-me .ct-signin { width:100%; min-height:40px; } #ct-app .ct-notme { font:inherit; background:none; border:0; padding:0; color:inherit; text-decoration:underline; cursor:pointer; } #ct-app .ct-empty [data-signin] { display:block; margin:12px auto 0; } #ct-app .ct-who { grid-column:2; grid-row:1; font-size:14px; justify-self:end; text-align:right; line-height:1.3; white-space:nowrap; } #ct-app .ct-who:empty { display:none; } #ct-app .ct-who b { font-weight:700; } #ct-app .ct-btn { font:inherit; font-size:14px; font-weight:600; padding:9px 14px; border-radius:6px; border:1px solid var(--ct-line); background:var(--ct-card); color:var(--ct-ink); cursor:pointer; white-space:nowrap; } #ct-app .ct-btn:active { transform:translateY(1px); } #ct-app .ct-btn-primary { background:var(--ct-green); border-color:var(--ct-green); color:var(--ct-green-ink); } #ct-app .ct-btn[disabled] { opacity:0.5; cursor:default; } #ct-app .ct-more { margin:2px 0 16px; text-align:left; } #ct-app .ct-more button { font:inherit; font-size:14px; font-weight:400; background:none; border:0; padding:8px 0; color:inherit; text-decoration:underline; text-underline-offset:2px; cursor:pointer; } #ct-app .ct-link { font:inherit; font-size:13px; color:var(--ct-green); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; } #ct-app .ct-filter { display:flex; flex-wrap:wrap; gap:4px; margin:0 0 10px; align-items:center; } #ct-app .ct-chip { font:inherit; font-size:11px; font-weight:700; padding:2px 6px; border-radius:6px; border:1px solid var(--ct-line); background:var(--ct-soft); color:var(--ct-muted); line-height:1.5; white-space:nowrap; } #ct-app .ct-chip.ct-on { background:var(--ct-green); border-color:var(--ct-green); color:#fff; } #ct-app .ct-status { display:block; width:auto; max-width:100%; border-radius:6px; padding:8px 12px; font-size:14px; margin:12px 0; } #ct-app .ct-status[hidden] { display:none; } #ct-app .ct-status.ct-err { background:var(--ct-red); color:var(--ct-red-ink); } #ct-app .ct-status.ct-ok { background:var(--ct-open); color:var(--ct-green); } #ct-app .ct-loading, #ct-app .ct-empty { color:var(--ct-muted); font-size:14px; padding:24px 0; text-align:center; } #ct-app .ct-card { background:var(--ct-card); border:1px solid var(--ct-line); border-radius:6px; margin-bottom:10px; overflow:hidden; } /* Light tint matching each card's header: violet for one-off, pink for ongoing */ #ct-app .ct-card .ct-card-body { background:#f3e6fb; } #ct-app .ct-card.ct-standing .ct-card-body { background:#ffe8f0; } #ct-app .ct-card .ct-lvl, #ct-app .ct-card .ct-pill.ct-open, #ct-app .ct-card .ct-pill.ct-taken, #ct-app .ct-card .ct-btn:not(.ct-btn-primary) { background:#fff; } #ct-app .ct-card-head { display:flex; justify-content:space-between; align-items:center; padding:7px 14px; background:var(--ct-oneoff-grad); color:#fff; font-size:13px; font-weight:700; letter-spacing:0.02em; } #ct-app .ct-card.ct-standing .ct-card-head { background:var(--ct-ongoing-grad); } #ct-app .ct-card-head .ct-kind { font-weight:600; font-size:11px; opacity:0.9; text-transform:uppercase; letter-spacing:0.06em; } #ct-app .ct-card-body { padding:10px 14px 12px; display:grid; grid-template-columns:1fr auto; gap:6px 12px; align-items:start; } #ct-app .ct-main { min-width:0; } #ct-app .ct-side { display:flex; flex-direction:column; align-items:flex-end; gap:8px; } #ct-app .ct-side .ct-btn { font-size:13px; padding:8px 12px; } #ct-app .ct-cls { font-size:15px; font-weight:700; margin:0 0 4px; display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; } #ct-app .ct-lvl { font-size:11px; font-weight:700; color:var(--ct-muted); border:1px solid var(--ct-line); background:var(--ct-soft); border-radius:6px; padding:2px 7px; letter-spacing:0.03em; white-space:nowrap; } #ct-app .ct-meta { font-size:13px; color:var(--ct-muted); margin:0; } #ct-app .ct-meta b { font-weight:700; color:var(--ct-green); } #ct-app .ct-pill { font-size:12px; font-weight:700; padding:4px 9px; border-radius:6px; white-space:nowrap; } #ct-app .ct-pill.ct-open { background:var(--ct-open); color:var(--ct-green); } #ct-app .ct-pill.ct-taken { background:var(--ct-taken); color:var(--ct-muted); } #ct-app .ct-weather { font-size:13px; color:#5f5a73; margin:4px 0 0; } #ct-app .ct-weather.ct-wet { color:var(--ct-red-ink); } #ct-app .ct-alert { display:flex; gap:12px; align-items:flex-start; background:#c8102e; color:#fff; border-radius:8px; padding:14px 16px; margin:0 0 14px; box-shadow:0 2px 8px rgba(200,16,46,.25); } #ct-app .ct-alert[hidden] { display:none; } #ct-app .ct-alert svg { flex:0 0 26px; width:26px; height:26px; margin-top:1px; } #ct-app .ct-alert-body { flex:1; min-width:0; } #ct-app .ct-alert-title { margin:0 0 2px; font-size:16px; font-weight:800; letter-spacing:.02em; color:#fff; } #ct-app .ct-alert-msg { margin:0; font-size:15px; line-height:1.4; color:#fff; } #ct-app .ct-alert-until { margin:4px 0 0; font-size:12px; opacity:.85; color:#fff; } #ct-app .ct-alert .ct-btn { background:#fff; color:#c8102e; border-color:#fff; font-size:13px; padding:6px 10px; align-self:center; white-space:nowrap; } #ct-app .ct-card.ct-washed .ct-card-head { background:#c8102e; color:#fff; } #ct-app .ct-card.ct-washed .ct-card-body { background:#f1f1f1; } #ct-app .ct-card.ct-washed .ct-main { opacity:.7; } /* Rain over the right half of a washed-out card, falling at an angle and fading out */ #ct-app .ct-card.ct-washed .ct-card-body { position:relative; } #ct-app .ct-card.ct-washed .ct-card-body > * { position:relative; z-index:1; } #ct-app .ct-card.ct-washed .ct-card-body::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2036%2036%22%3E%3Cg%20stroke%3D%22%237b8ea8%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.3%22%3E%3Cpath%20d%3D%22M8%202l-3%209%22/%3E%3Cpath%20d%3D%22M26%206l-3%209%22/%3E%3Cpath%20d%3D%22M17%2017l-3%209%22/%3E%3Cpath%20d%3D%22M33%2022l-3%209%22/%3E%3Cpath%20d%3D%22M6%2025l-3%209%22/%3E%3C/g%3E%3C/svg%3E") repeat; background-size:36px 36px; -webkit-mask-image:linear-gradient(to left, #000 0, #000 30%, transparent 55%); mask-image:linear-gradient(to left, #000 0, #000 30%, transparent 55%); } /* Views: open sessions, who's playing, my sessions */ #ct-app .ct-views { display:flex; gap:4px; margin:0 0 12px; background:var(--ct-soft); border:1px solid var(--ct-line); border-radius:8px; padding:3px; } #ct-app .ct-view { flex:1 1 0; font:inherit; font-size:13px; font-weight:700; color:var(--ct-muted); background:none; border:0; border-radius:6px; padding:8px 6px; white-space:nowrap; } #ct-app .ct-view.ct-on { background:#fff; color:var(--ct-ink); box-shadow:0 1px 3px rgba(49,0,105,.15); } @media (max-width:374px) { #ct-app .ct-view { font-size:12px; padding:8px 3px; } } #ct-app .ct-names { display:flex; flex-wrap:wrap; gap:4px; margin:6px 0 0; padding:0; list-style:none; } #ct-app .ct-names li { font-size:12px; font-weight:400; background:#fff; border:1px solid var(--ct-line); border-radius:999px; padding:2px 9px; color:var(--ct-ink); } #ct-app .ct-names li.ct-fill { border:1.5px dashed #7a4fb0; padding:1.5px 8.5px; } #ct-app .ct-names li.ct-me-tag { background:var(--ct-ink); border-color:var(--ct-ink); color:#fff; } #ct-app .ct-away { font-size:12px; color:var(--ct-muted); margin:6px 0 0; } #ct-app .ct-pill.ct-pill.ct-full { background:#5b6070; color:#fff; border-color:#5b6070; } #ct-app .ct-mine { border:1px solid var(--ct-line); border-radius:8px; background:#fff; margin:0 0 12px; overflow:hidden; } #ct-app .ct-mine h3 { margin:0; font-size:14px; padding:9px 14px; background:var(--ct-soft); border-bottom:1px solid var(--ct-line); color:var(--ct-ink); } #ct-app .ct-mrow { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--ct-line); font-size:14px; } #ct-app .ct-mrow:last-child { border-bottom:0; } #ct-app .ct-mrow small { display:block; color:var(--ct-muted); font-size:12px; } #ct-app .ct-mrow .ct-btn { flex:0 0 auto; font-size:13px; padding:7px 10px; } #ct-app .ct-mrow .ct-tag { font-size:12px; font-weight:700; color:var(--ct-muted); white-space:nowrap; } #ct-app .ct-mempty { padding:10px 14px; font-size:14px; color:var(--ct-muted); margin:0; } #ct-app .ct-roll { border:1px solid var(--ct-line); border-radius:8px; margin:0 0 10px; overflow:hidden; } #ct-app .ct-roll h4 { margin:0; font-size:14px; padding:8px 12px; background:var(--ct-soft); display:flex; justify-content:space-between; gap:8px; } #ct-app .ct-roll h4 small { font-weight:600; color:var(--ct-muted); } #ct-app .ct-rollrow { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:6px 12px; border-top:1px solid var(--ct-line); font-size:14px; } #ct-app .ct-rollrow small { color:var(--ct-muted); } #ct-app .ct-rmark { display:flex; gap:8px; flex:0 0 auto; } #ct-app .ct-rmark .ct-btn { color:var(--ct-muted); } #ct-app .ct-rmark .ct-btn.ct-yes.ct-on { background:#1f7a3a; border-color:#1f7a3a; color:#fff; } #ct-app .ct-rmark .ct-btn.ct-no.ct-on { background:#5b6070; border-color:#5b6070; color:#fff; } #ct-app .ct-checklist { max-height:320px; overflow:auto; border:1px solid var(--ct-line); border-radius:8px; margin-top:8px; } #ct-app .ct-checklist label { display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--ct-line); font-size:15px; text-transform:none; letter-spacing:0; color:var(--ct-ink); font-weight:600; margin:0; } #ct-app .ct-checklist label:last-child { border-bottom:0; } #ct-app .ct-checklist input { width:20px; height:20px; flex:0 0 auto; } #ct-app .ct-checklist small { color:var(--ct-muted); font-weight:400; margin-left:auto; } /* Suspended venue: slate header, light hatching, nothing to book */ #ct-app .ct-subbar { border-radius:8px; padding:10px 14px; margin:0 0 14px; font-size:14px; line-height:1.4; border:1px solid; } #ct-app .ct-subbar[hidden] { display:none; } #ct-app .ct-subbar a { color:inherit; } #ct-app .ct-sub-trial { background:#e8f3ff; border-color:#b9dbfb; color:#0b4f8a; } #ct-app .ct-sub-grace { background:#fff6e0; border-color:#f3d27a; color:#5c3d00; } #ct-app .ct-sub-paused { background:#fde2e2; border-color:#f0c4c4; color:#8a1c1c; } #ct-app .ct-closures { margin:0 0 14px; } #ct-app .ct-closures[hidden] { display:none; } #ct-app .ct-term { border:1px solid #c9d6e8; background:#f2f6fb; color:#23344d; border-radius:8px; padding:10px 14px; margin:0 0 14px; font-size:14px; line-height:1.45; } #ct-app .ct-term[hidden] { display:none; } #ct-app .ct-term p { margin:0; } #ct-app .ct-term p + p { margin-top:4px; } #ct-app .ct-dayoff { border:1px dashed #c9d6e8; border-radius:8px; padding:10px 14px; margin:0 0 10px; font-size:14px; color:#4a5a70; background:#f8fafc; } #ct-app .ct-dayoff b { margin-right:6px; color:#23344d; } #ct-app .ct-trow { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid #eee; font-size:14px; } #ct-app .ct-trow > div { flex:1; min-width:0; } #ct-app .ct-trow small { display:block; color:#6b7280; } #ct-app .ct-trow .ct-btn { font-size:13px; padding:6px 10px; } #ct-app .ct-trow.ct-runs > div { opacity:.55; text-decoration:line-through; } #ct-app .ct-tsec { margin:18px 0 6px; font-size:15px; } #ct-app .ct-pushrow { display:flex; align-items:center; gap:10px; border:1px solid #e3e0ea; border-radius:8px; padding:10px 12px; margin:12px 0 14px; font-size:14px; } #ct-app .ct-pushrow > div { flex:1; min-width:0; } #ct-app .ct-pushrow small { display:block; color:#6b7280; margin-top:2px; line-height:1.35; } #ct-app .ct-pushrow .ct-btn { font-size:13px; padding:7px 12px; white-space:nowrap; } #ct-app textarea.ct-input { min-height:120px; resize:vertical; font:inherit; } #ct-app .ct-chips { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; } #ct-app .ct-chips .ct-btn { font-size:13px; padding:7px 10px; } #ct-app .ct-tblwrap { overflow-x:auto; margin:8px 0; } #ct-app .ct-tbl { width:100%; border-collapse:collapse; font-size:14px; } #ct-app .ct-tbl th, #ct-app .ct-tbl td { text-align:left; padding:6px 8px; border-bottom:1px solid #eee; } #ct-app .ct-tbl th { font-size:12px; color:#6b7280; font-weight:600; } #ct-app .ct-tbl .n { text-align:right; white-space:nowrap; } #ct-app .ct-tbl td:first-child { min-width:120px; } #ct-app .ct-big { font-size:15px; margin:8px 0; } #ct-app .ct-impbox { border:1px solid #e3e0ea; border-radius:8px; padding:10px 12px; margin:10px 0; font-size:14px; } #ct-app .ct-impbox ul { margin:4px 0 10px 18px; padding:0; } #ct-app input[type=file].ct-input { padding:6px 10px; min-height:0; } #ct-app .ct-row.ct-cedit { border:1.5px solid #310069 !important; border-radius:8px; background:#f7f4fb; padding:10px 12px !important; margin:6px 0; } #ct-app .ct-ehead { margin:0 0 8px; font-size:15px; } #ct-app .ct-cedit .ct-select, #ct-app .ct-cedit .ct-input { width:100% !important; max-width:none !important; flex:none !important; } #ct-app .ct-ehead .ct-lvl { margin-left:4px; } #ct-app .ct-input.ct-amt { width:84px; min-height:38px; padding:4px 8px; flex:0 0 auto; } #ct-app .ct-reach { font-size:13px; color:#4a5a70; margin:8px 0 0; } #ct-app .ct-closure { display:flex; gap:10px; align-items:flex-start; background:#fff6e0; border:1px solid #f3d27a; color:#5c3d00; border-radius:8px; padding:10px 14px; margin-bottom:8px; font-size:14px; line-height:1.4; } #ct-app .ct-closure svg { flex:0 0 20px; width:20px; height:20px; margin-top:1px; color:#b07400; } #ct-app .ct-closure p { margin:0; color:#5c3d00; } #ct-app .ct-closure b { color:#5c3d00; } #ct-app .ct-card.ct-closed .ct-card-head { background:#5b6070; color:#fff; } #ct-app .ct-card.ct-closed .ct-card-body { background:repeating-linear-gradient(-45deg,#f3f3f5 0 10px,#ebebef 10px 20px); } #ct-app .ct-card.ct-closed .ct-main { opacity:.75; } #ct-app .ct-pill.ct-pill.ct-closedpill { background:#5b6070; color:#fff; border-color:#5b6070; } #ct-app .ct-note.ct-closednote { color:#5c3d00; font-weight:600; } #ct-app .ct-pill.ct-pill.ct-wash { background:#c8102e; color:#fff; border-color:#c8102e; } #ct-app .ct-adminbar .ct-btn.ct-wash-btn.ct-wash-on { background:#c8102e; border-color:#c8102e; color:#fff; } #ct-app .ct-checkrow { display:flex; align-items:flex-start; gap:10px; font-size:15px; font-weight:500; margin:6px 0 12px; cursor:pointer; } #ct-app .ct-checkrow input { width:22px; height:22px; accent-color:#c8102e; margin:0; } #ct-app .ct-washopts[hidden] { display:none; } #ct-app .ct-weather { display:flex; flex-wrap:wrap; column-gap:12px; row-gap:2px; } #ct-app .ct-wpart { display:inline-flex; align-items:baseline; white-space:nowrap; min-width:0; } #ct-app .ct-wpart:first-child { white-space:normal; } #ct-app .ct-wpart > svg { flex:0 0 auto; align-self:center; } #ct-app .ct-who-name { position:relative; display:inline-block; } #ct-app .ct-bell { background:none; border:0; padding:2px 4px; margin:0 4px 0 0; color:var(--ct-muted); vertical-align:-3px; line-height:0; } #ct-app .ct-bell svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } #ct-app .ct-bell.ct-bell-on { color:var(--ct-ongoing); } #ct-app .ct-bell.ct-bell-on svg { fill:currentColor; } #ct-app .ct-cal, #ct-app .ct-waitnote { font-size:13px; margin:6px 0 0; color:var(--ct-muted); } #ct-app .ct-cal a { display:inline-flex; align-items:center; gap:5px; color:var(--ct-ink); font-weight:600; text-decoration:underline; text-underline-offset:2px; } #ct-app .ct-cal a:hover { color:var(--ct-oneoff); } #ct-app .ct-cal a svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; } #ct-app .ct-prompt { display:flex; gap:12px; align-items:center; background:var(--ct-amber); color:var(--ct-amber-ink); border-radius:8px; padding:12px 14px; margin:0 0 14px; font-size:14px; } #ct-app .ct-prompt[hidden] { display:none; } #ct-app .ct-prompt p { margin:0; flex:1; } #ct-app .ct-prompt .ct-btn { font-size:13px; padding:6px 10px; white-space:nowrap; } #ct-app .ct-prompt .ct-x2 { background:none; border:0; font-size:20px; line-height:1; color:inherit; padding:0 2px; } #ct-app .ct-log { max-height:60vh; overflow:auto; margin:0 -4px; padding:0 4px; } #ct-app .ct-log .ct-row { display:block; } #ct-app .ct-log small { display:block; color:var(--ct-muted); font-size:12px; } #ct-app .ct-playerrows .ct-row .ct-lvlsel { flex:1 1 60px !important; padding-right:24px !important; background-position:right 6px center !important; width:auto !important; min-width:0; } #ct-app .ct-credits { display:inline-flex; align-items:center; gap:4px; flex:0 0 auto; font-size:12px; color:var(--ct-muted); } #ct-app .ct-credits b { min-width:16px; text-align:center; font-size:15px; color:var(--ct-ink); } #ct-app .ct-credits-lbl { margin-right:2px; } @media (max-width:479px) { #ct-app .ct-credits-lbl { display:none; } #ct-app .ct-credits button { width:32px; } #ct-app .ct-playerrows .ct-row { gap:6px; } } #ct-app .ct-credits button { width:38px; height:38px; border-radius:8px; border:1px solid var(--ct-line); background:#fff; color:var(--ct-ink); font-size:18px; line-height:1; padding:0; } #ct-app .ct-share-msg { background:var(--ct-soft); border-radius:8px; padding:10px 12px; font-size:14px; margin:8px 0 4px; white-space:pre-wrap; } #ct-app .ct-wa { background:#0e6b37 !important; border-color:#0e6b37 !important; color:#fff !important; text-decoration:none !important; display:inline-flex; align-items:center; } #ct-app .ct-steps { margin:6px 0 0 18px; padding:0; font-size:14px; } #ct-app .ct-steps li { margin:4px 0; } #ct-app .ct-classrows .ct-row { flex-wrap:wrap; row-gap:8px; } #ct-app .ct-classrows .ct-row .ct-row-main { flex:1 1 100%; } #ct-app .ct-classrows .ct-row .ct-coachsel { flex:1 1 auto; width:auto; } #ct-app .ct-classrows button[data-cls] { flex:0 0 auto; width:auto; min-width:84px; padding-left:12px; padding-right:12px; white-space:nowrap; } /* Cancel class fits (1.64.0) */ #ct-app .ct-classrows button[data-roster] { flex:0 0 auto; width:auto; min-width:84px; padding-left:12px; padding-right:12px; white-space:nowrap; } #ct-app .ct-cls .ct-coach { font-size:13px; font-weight:400; color:#5f5a73; white-space:nowrap; } #ct-app .ct-checkrow.ct-checksm { font-size:15px; font-weight:500; margin:8px 0 0; } #ct-app .ct-checkrow.ct-checksm input { width:18px; height:18px; accent-color:var(--ct-ink); } #ct-app .ct-subhead { margin:18px 0 6px; font-size:15px; color:var(--ct-ink); } #ct-app .ct-subhead.ct-subhead-first { margin-top:4px; } #ct-app .ct-wsep { margin:0 5px; } #ct-app .ct-wi { width:15px; height:15px; vertical-align:-3px; margin-right:3px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } #ct-app .ct-note { font-size:12px; margin:6px 0 0; } #ct-app .ct-note.ct-level { background:var(--ct-amber); color:var(--ct-amber-ink); padding:6px 8px; border-radius:6px; } #ct-app .ct-foot { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--ct-muted); margin-top:18px; gap:10px; flex-wrap:wrap; } #ct-app .ct-modal { position:fixed; inset:0; background:rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; z-index:9999; padding:16px; } #ct-app .ct-modal[hidden] { display:none; } #ct-app .ct-modal-card { background:var(--ct-card); width:100%; max-width:640px; border-radius:6px; padding:18px 18px 22px; max-height:92vh; overflow:auto; } #ct-app .ct-modal-card { position:relative; } #ct-app .ct-modal-card h2 { font-size:18px; margin:0 0 2px; padding-right:36px; } #ct-app .ct-plans-frame { display:block; width:100%; min-height:360px; border:0; margin:12px 0 0; background:transparent; } #ct-app .ct-x { position:absolute; top:12px; right:8px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; font:inherit; font-size:26px; line-height:1; color:var(--ct-muted); background:none; border:0; border-radius:6px; padding:0 0 3px; } #ct-app .ct-x:hover { background:var(--ct-soft); color:var(--ct-ink); } #ct-app .ct-subhead { margin:22px 0 8px; font-size:14px; font-weight:600; color:#4A5163; } #ct-app .ct-modal-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; margin-top:18px; } #ct-app .ct-foot-links { display:flex; gap:14px; align-items:center; white-space:nowrap; } #ct-app .ct-link.ct-quiet { color:var(--ct-muted); } #ct-app .ct-adminbar { display:flex; flex-wrap:wrap; align-items:center; gap:6px; border:1.5px solid #9400c1; border-radius:6px; padding:8px 10px; margin:0 0 10px; background:#fff; } /* the app's own colour, like Juniors pink and Comp navy (1.64.0) */ #ct-app .ct-adminbar[hidden] { display:none; } #ct-app .ct-adminbar .ct-btn[hidden] { display:none; } #ct-app .ct-adminbar .ct-btn { font-size:13px; padding:7px 10px; } #ct-app .ct-admin-tag { flex:0 0 100%; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--ct-ongoing); } #ct-app .ct-adminbar .ct-btn { flex:1 1 auto; } @media (max-width:479px) { #ct-app .ct-adminbar:not([hidden]) { display:grid; grid-template-columns:1fr 1fr; } #ct-app .ct-admin-tag { grid-column:1 / -1; } #ct-app .ct-wash-btn { grid-column:1 / -1; } #ct-app .ct-adminbar .ct-btn { padding:8px 6px; } } #ct-app .ct-btn-danger { color:var(--ct-red-ink); border-color:#f0c4c4; } #ct-app .ct-btn-sm { font-size:13px; padding:7px 10px; } #ct-app .ct-side .ct-btn.ct-manage { font-size:12px; padding:5px 10px; color:var(--ct-muted); } #ct-app .ct-seg { display:flex; gap:6px; } #ct-app .ct-seg .ct-btn { flex:1; } #ct-app .ct-seg .ct-btn.ct-on { background:var(--ct-green); border-color:var(--ct-green); color:#fff; } #ct-app .ct-sub2 { margin:2px 0 0; font-size:13px; color:var(--ct-muted); } #ct-app .ct-notebody { font-size:16px; line-height:1.5; margin:14px 0; } #ct-app .ct-rows { margin-top:8px; border-top:1px solid var(--ct-line); } #ct-app .ct-row { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--ct-line); font-size:14px; } #ct-app .ct-row .ct-row-main { flex:1; min-width:0; } #ct-app .ct-row .ct-row-main small { display:block; color:var(--ct-muted); font-size:12px; } #ct-app .ct-row .ct-select { width:auto; min-height:38px; padding:6px 30px 6px 10px; font-size:16px; } #ct-app .ct-addrow { display:flex; gap:8px; align-items:center; padding-bottom:10px; } #ct-app .ct-addrow .ct-input { min-height:38px; padding:6px 12px; } #ct-app .ct-lvlsel { flex:0 0 116px !important; width:116px !important; min-height:38px; padding:6px 30px 6px 10px; } #ct-app .ct-rowbtn { flex:0 0 84px; width:84px; min-height:38px; text-align:center; } #ct-app .ct-addrow .ct-input { flex:1; min-width:0; } #ct-app .ct-addrow .ct-select { width:auto; flex:0 0 auto; } /* Email and phone (1.78.0) */ #ct-app .ct-addrow-c .ct-in-name { flex:1 1 120px; min-width:112px; } #ct-app .ct-addrow-c .ct-in-email { flex:1.4 1 0; } #ct-app .ct-addrow-c .ct-in-phone { flex:0 1 120px; } #ct-app .ct-contact { flex:1 1 100%; display:flex; gap:6px; margin-top:2px; } #ct-app .ct-contact .ct-input { min-height:34px; padding:5px 10px; font-size:13px; } #ct-app .ct-contact [data-cf="email"] { flex:1.6 1 0; min-width:0; } #ct-app .ct-contact [data-cf="phone"] { flex:1 1 0; min-width:0; } #ct-app .ct-contact .ct-input.ct-saved { border-color:#1E7A34; box-shadow:0 0 0 1px #1E7A34; } #ct-app #ct-a-clist .ct-row { flex-wrap:wrap; row-gap:6px; } @media (max-width:599px) { #ct-app .ct-addrow-c { flex-wrap:wrap; } #ct-app .ct-addrow-c .ct-in-name, #ct-app .ct-addrow-c .ct-in-email { flex:1 1 100%; } #ct-app .ct-addrow-c .ct-in-phone { flex:1 1 120px; } } @media (max-width:479px) { #ct-app .ct-addrow.ct-addrow-p { flex-wrap:wrap; } #ct-app .ct-addrow.ct-addrow-p .ct-input { flex:1 1 100%; } #ct-app .ct-addrow.ct-addrow-p .ct-lvlsel { flex:1 1 auto !important; width:auto !important; } } #ct-app .ct-two { display:grid; grid-template-columns:1fr 1fr; gap:0 10px; } #ct-app .ct-two > div { min-width:0; } #ct-app .ct-row.ct-off .ct-row-main { color:var(--ct-muted); } #ct-app .ct-row.ct-off .ct-row-main b { text-decoration:line-through; } #ct-app .ct-row .ct-lvl { margin-left:4px; } /* Page chrome hidden on the cardio page only: ink. logo (also add to the page's own style block to avoid a flash) */ .ccm-custom-style-navigation-1107 { display:none !important; } body footer:not(.ct-foot) { display:none !important; } /* ink. site footer (services, abn, privacy) */ @media (max-width:599px) { #ct-app { padding:24px 16px 12px; width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } #ct-app .ct-sticky { margin-left:-16px; margin-right:-16px; padding-left:16px; padding-right:16px; } #ct-app .ct-sticky::after { left:16px; right:16px; } } @media (max-width:374px) { #ct-app .ct-filter { gap:3px; } #ct-app .ct-chip { padding:2px 4px; font-size:10.5px; } } /* Events and invitations */ #ct-app .ct-ev-empty { margin:4px 0 6px; padding:18px 14px; border:1px dashed #d9dce6; border-radius:8px; text-align:center; color:#6b7280; font-size:14px; } #ct-app .ct-ev-sec { font-size:18px; margin:6px 0 10px; } #ct-app .ct-ev { border:1px solid #d9dce6; border-radius:8px; background:#fff; margin:0 0 12px; overflow:hidden; } #ct-app .ct-ev.cancelled { opacity:.7; } #ct-app .ct-ev-head { display:flex; justify-content:space-between; gap:10px; padding:7px 14px; background:var(--ct-oneoff-grad); color:#fff; font-size:13px; font-weight:700; } #ct-app .ct-ev-kind { text-transform:uppercase; letter-spacing:.06em; font-size:11px; opacity:.95; } #ct-app .ct-ev-body { padding:10px 14px 12px; } #ct-app .ct-ev-title { font-size:16px; font-weight:700; margin:0 0 4px; } #ct-app .ct-ev-meta { font-size:13px; color:#5b6070; margin:2px 0 0; } #ct-app .ct-ev-details { font-size:14px; margin:8px 0 4px; line-height:1.45; } #ct-app .ct-ev-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:8px 0 0; margin-top:8px; border-top:1px solid #eceef3; font-size:14px; } #ct-app .ct-ev-btns { display:flex; gap:6px; margin-left:auto; } #ct-app label input[type=checkbox], #ct-app label input[type=radio] { flex-shrink:0; } #ct-app input[type=file]::file-selector-button { font:inherit; font-size:14px; padding:6px 12px; margin-right:10px; border:1px solid #c9cfdb; border-radius:6px; background:#f3f5f9; color:#1b2433; cursor:pointer; } #ct-app .ct-checkrow input { margin-top:2px; flex-shrink:0; } #ct-app .ct-hint + .ct-label { margin-top:14px; } #ct-app .ct-hint + .ct-input, #ct-app .ct-hint + .ct-trow, #ct-app .ct-hint + .ct-select { margin-top:10px; } #ct-app .ct-ev-row select, #ct-app .ct-trow select { min-height:36px; padding-top:6px; padding-bottom:6px; font-size:15px; } #ct-app .ct-chip { font-size:12px; } @media (max-width:479px) { #ct-app .ct-trow:has(> .ct-btn ~ .ct-btn ~ .ct-btn), #ct-app .ct-trow:has(> select) { flex-wrap:wrap; } #ct-app .ct-trow:has(> .ct-btn ~ .ct-btn ~ .ct-btn) > div, #ct-app .ct-trow:has(> select) > div { flex:1 1 100%; } } #ct-app .ct-ev-st { font-size:12px; font-weight:700; padding:3px 8px; border-radius:6px; background:#eef0f4; color:#5b6070; } #ct-app .ct-ev-st.yes { background:#e3f4e8; color:#1f7a3a; } #ct-app .ct-ev-st.wait { background:#fff4d6; color:#8a5a00; } #ct-app .ct-ev-st.no { background:#fde8e8; color:#b42318; } #ct-app .ct-ev-cal { margin:10px 0 0; font-size:13px; } #ct-app .ct-ev-cal a { color:inherit; font-weight:600; } #ct-app .ct-ev-pick { max-height:260px; overflow:auto; border:1px solid #d9dce6; border-radius:8px; margin-top:8px; } #ct-app .ct-ev-pick[hidden] { display:none; } #ct-app .ct-ev-pick label { display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid #eceef3; font-size:15px; font-weight:600; margin:0; } #ct-app .ct-ev-pick input { width:20px; height:20px; flex:0 0 auto; } /* Club documents */ #ct-app a.ct-btn { text-decoration:none; display:inline-block; color:inherit; } #ct-app .ct-docs { margin:18px 0 6px; } #ct-app .ct-docs-h { font-size:16px; margin:0 0 8px; } #ct-app .ct-docs-sub { font-size:15px; margin:18px 0 4px; } #ct-app a.ct-doc { display:flex; gap:10px; align-items:center; padding:9px 12px; border:1px solid #d9dce6; border-radius:8px; background:#fff; margin:0 0 6px; color:inherit; text-decoration:none; } #ct-app a.ct-doc b { font-size:14px; } #ct-app a.ct-doc small { display:block; color:#6b7280; font-size:12px; } #ct-app .ct-doc-k { flex:0 0 auto; font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--ct-green); border-radius:4px; padding:3px 6px; min-width:38px; text-align:center; } #ct-app .ct-doc-i.ct-doc-ia { width:24px; margin:0 10px 0 2px; align-self:center; } #ct-app .ct-ca { margin-top:14px; } #ct-app .ct-ca-row { margin:0 0 12px; } #ct-app .ct-ca-row .ct-label { display:flex; align-items:center; gap:8px; text-transform:none; letter-spacing:0; font-size:14px; font-weight:700; margin:0 0 6px; } #ct-app .ct-ca-in { display:flex; gap:8px; align-items:center; } #ct-app .ct-ca-in .ct-input { flex:1; min-width:0; } #ct-app .ct-doc-svg { display:block; } #ct-app .ct-doc-pg { fill:#fff; } html.th-dark #ct-app .ct-doc-pg { fill:#232733; } #ct-app .ct-mystats { font-size:13px; font-weight:500; color:#5b6070; margin:0; } #ct-app h2.ct-mysec { margin:18px 0 8px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; } #ct-app .ct-kstats { font-size:13px; font-weight:500; color:#5b6070; } /* Accessibility (v1.22.7): visible keyboard focus, 24px+ targets on chips, bell and footer links, reduced motion */ #ct-app :focus-visible { outline:2px solid #2457D6; outline-offset:2px; } #ct-app .ct-chip { min-height:30px; padding-top:6px; padding-bottom:6px; } #ct-app .ct-bell { min-width:32px; min-height:32px; padding:6px; } #ct-app .ct-foot-links a, #ct-app .ct-foot-links button { display:inline-block; padding:6px 0; } #ct-app .ct-cal a, #ct-app .ct-link { padding-top:4px; padding-bottom:4px; } @media (prefers-reduced-motion: reduce) { #ct-app * { animation-duration:1ms !important; transition-duration:1ms !important; scroll-behavior:auto !important; } } /* Admin: This week and the grouped menu */ #ct-app .ct-adminbar:not([hidden]) { display:block; } #ct-app .ct-atop { display:flex; flex-wrap:wrap; align-items:center; gap:6px; } #ct-app .ct-atop .ct-admin-tag { flex:1 1 auto; } #ct-app .ct-adminbar .ct-atop .ct-btn { flex:0 0 auto; } #ct-app .ct-adminbar .ct-amore { display:none; } #ct-app .ct-week { margin:0 0 14px; } #ct-app .ct-week[hidden] { display:none; } #ct-app .ct-week-h { font-size:13px; font-weight:700; margin:0 0 6px; color:#1B2233; } #ct-app .ct-week-h span { font-weight:400; color:#5F6678; } #ct-app .ct-wlist { display:grid; gap:6px; } #ct-app .ct-wcard { display:flex; align-items:center; gap:10px; border:1px solid #D9DDE6; border-left:4px solid #2457D6; border-radius:6px; padding:8px 10px; background:#fff; text-align:left; } #ct-app .ct-wcard.ct-w-no { border-left-color:#C62828; } #ct-app .ct-wcard.ct-w-warn { border-left-color:#B45309; } #ct-app .ct-wcard.ct-w-ok { border-left-color:#2E7D32; } #ct-app .ct-wtxt { flex:1; min-width:0; } #ct-app .ct-wtxt b { display:block; font-size:14px; line-height:1.3; color:#1B2233; } #ct-app .ct-wtxt small { white-space:pre-line; display:block; font-size:13px; line-height:1.35; color:#4A5163; margin-top:2px; } #ct-app .ct-wcard .ct-btn { flex:0 0 auto; font-size:13px; padding:7px 12px; } #ct-app .ct-week-more { font-size:13px; color:#5F6678; margin:6px 0 0; } #ct-app .ct-amenu { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:10px; } #ct-app .ct-agroup { flex:0 1 auto; min-width:0; } #ct-app .ct-agroup[hidden] { display:none; } #ct-app .ct-aglabel { display:block; font-size:12px; font-weight:700; color:#5F6678; margin:0 0 4px; } #ct-app .ct-agbtns { display:flex; flex-wrap:wrap; gap:6px; } @media (max-width:599px) { #ct-app .ct-adminbar .ct-amore { display:inline-block; } #ct-app .ct-amenu { display:none; } #ct-app .ct-adminbar.ct-menu-open .ct-amenu { display:block; } #ct-app .ct-agroup { margin-top:8px; } #ct-app .ct-agbtns { display:grid; grid-template-columns:1fr 1fr; } } #ct-app .ct-viewbar { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; border:1.5px dashed #8A93A6; border-radius:6px; padding:8px 12px; margin:0 0 14px; font-size:14px; color:#1B2233; background:#fff; } #ct-app .ct-viewbar[hidden] { display:none; } #ct-app .ct-plan-btn { margin-left:8px; font-size:13px; padding:6px 12px; vertical-align:middle; } /* Tabs: bottom bar on phones and tablets, rail on the left on desktop */ /* Room for the fixed tab bar goes below the page footer, not between the theme switch and the footer (1.54.2) */ #ct-app.ct-tabbed { padding-bottom:16px; } @media (max-width:999px) { body:has(#ct-app.ct-tabbed) { padding-bottom:calc(64px + env(safe-area-inset-bottom)); } } #ct-app .ct-tabs { position:fixed; left:0; right:0; bottom:0; z-index:80; display:flex; gap:2px; background:#fff; border-top:1px solid #D9DDE6; padding:4px 6px calc(4px + env(safe-area-inset-bottom)); box-shadow:0 -2px 10px rgba(20,24,40,.06); } #ct-app .ct-tab { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:54px; padding:4px 2px; border:0; border-radius:10px; background:none; color:#4A5163; font:600 12px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; cursor:pointer !important; } #ct-app .ct-tab svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; } #ct-app .ct-tab span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } #ct-app .ct-tab.on { color:#310069; background:#f4e6fb; } #ct-app .ct-tab:focus-visible { outline:2px solid #2457D6; outline-offset:-2px; } #ct-app .ct-modal { z-index:1000; } @media (min-width:1000px) { #ct-app.ct-tabbed { padding-bottom:16px; } #ct-app .ct-tabs { top:110px; bottom:auto; right:auto; left:max(12px, calc(50% - 320px - 200px)); width:180px; flex-direction:column; border:1px solid #D9DDE6; border-radius:14px; padding:6px; box-shadow:none; } #ct-app .ct-tab { flex:0 0 auto; flex-direction:row; justify-content:flex-start; gap:10px; min-height:44px; padding:0 12px; font-size:15px; } } @media print { #ct-app .ct-tabs { display:none; } } /* What each tab shows */ #ct-app.ct-tabbed .ct-amore { display:none !important; } #ct-app.ct-tabbed .ct-amenu { display:flex !important; } @media (max-width:599px) { #ct-app.ct-tabbed .ct-amenu { display:block !important; } } #ct-app.ct-tabbed:not([data-tab="admin"]) .ct-adminbar { display:none !important; } #ct-app.ct-tabbed[data-tab="admin"] .ct-sticky { position:relative; } #ct-app.ct-tabbed:not([data-tab="week"]) .ct-week, #ct-app.ct-tabbed:not([data-tab="week"]) .ct-alert, #ct-app.ct-tabbed:not([data-tab="week"]) .ct-subbar, #ct-app.ct-tabbed:not([data-tab="week"]) .ct-closures, #ct-app.ct-tabbed:not([data-tab="week"]) .ct-prompt { display:none !important; } #ct-app.ct-tabbed:not([data-tab="sessions"]) .ct-filter { display:none !important; } #ct-app.ct-tabbed:not([data-tab="club"]) #ct-docs { display:none !important; } #ct-app.ct-tabbed:not([data-tab="club"]) #ct-clubev { display:none !important; } #ct-app.ct-tabbed[data-tab="admin"] #ct-main, #ct-app.ct-tabbed[data-tab="admin"] #ct-list, #ct-app.ct-tabbed[data-tab="admin"] .ct-views { display:none !important; } #ct-app.ct-tabbed:not([data-tab="sessions"]) .ct-views { display:none !important; } #ct-app.ct-tabbed .ct-views [data-view="mine"] { display:none !important; } #ct-app.ct-tabbed[data-tab="club"] #ct-list { display:none !important; } #ct-app.ct-tabbed:not([data-tab="week"]) #ct-events { display:none !important; } #ct-app.ct-tabbed:not([data-tab="club"]) #ct-term { display:none !important; } /* Filters keep their place on wider screens so the header doesn't jump between tabs */ @media (min-width:600px) { #ct-app.ct-tabbed:not([data-tab="sessions"]) .ct-filter { display:flex !important; visibility:hidden; } } /* Your week shows the player's filters: their courts and This week / Next week (1.55.3) */ #ct-app.ct-tabbed[data-tab="week"] .ct-filter.ct-fshow { display:flex !important; visibility:visible; } #ct-app .ct-filter .ct-chip[hidden] { display:none !important; } #ct-app .ct-filter .ct-chip.ct-chip-off { opacity:.35; cursor:default; pointer-events:none; } /* Two panes on wide screens: in the Admin tab, the menu stays on the left and each tool opens beside it */ @media (min-width:1360px) { #ct-app.ct-tabbed[data-tab="admin"].ct-paneopen { margin-left:212px; } /* the footer under the page moves left with it, so the open tool doesn't cover it */ body:has(#ct-app.ct-tabbed[data-tab="admin"].ct-paneopen) .ct-powered { max-width:640px; margin-left:212px; margin-right:auto; } #ct-app.ct-tabbed[data-tab="admin"].ct-paneopen .ct-tabs { left:12px; } #ct-app.ct-tabbed[data-tab="admin"] #ct-amodal { left:auto; right:0; width:calc(100vw - 212px - 640px - 28px); background:transparent; pointer-events:none; padding:0; align-items:stretch; justify-content:stretch; } #ct-app.ct-tabbed[data-tab="admin"] #ct-amodal > * { pointer-events:auto; max-width:none; width:100%; height:100vh; max-height:none; border-radius:0; border-top:0; border-right:0; border-bottom:0; border-left:1px solid #D9DDE6; box-shadow:-8px 0 24px rgba(20,24,40,.08); padding:24px 24px 32px; } } /* Touch screens: every chip answers a 44px-tall tap without changing how it looks */ @media (pointer:coarse) { #ct-app .ct-chip { position:relative; } #ct-app .ct-chip::after { content:""; position:absolute; left:-2px; right:-2px; top:50%; height:44px; transform:translateY(-50%); } } /* App header: icon tile on the left, app name over club name beside it, controls on the right at the same height */ #ct-app .ct-head { display:flex; align-items:stretch; justify-content:space-between; gap:12px; --ct-hd:64px; } #ct-app .ct-brand { display:flex; flex-direction:row; align-items:stretch; gap:12px; min-width:0; flex:1 1 auto; margin:0; } #ct-app .ct-mark { display:block; flex:0 0 auto; width:var(--ct-hd); height:var(--ct-hd); line-height:0; } #ct-app .ct-markimg { width:100%; height:100%; display:block; } #ct-app .ct-brandtext { display:flex; flex-direction:column; justify-content:space-between; min-width:0; padding:4px 0 6px; } #ct-app .ct-brandtext h1 { display:block; margin:0; padding:0; line-height:1.1; font-size:inherit; white-space:nowrap; } #ct-app .ct-name { display:block; font-size:22px; font-weight:800; letter-spacing:-.01em; line-height:1.1; color:#310069; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #ct-app .ct-brandtext .ct-club, #ct-app .ct-brandtext .ct-section { margin:0; font-size:14px; font-weight:500; letter-spacing:0; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #ct-app .ct-head-right { display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; flex:0 0 auto; min-height:var(--ct-hd); gap:6px; } @media (max-width:479px) { #ct-app .ct-head { --ct-hd:58px; gap:10px; } #ct-app .ct-brand { gap:10px; } #ct-app .ct-name { font-size:19px; } #ct-app .ct-brandtext .ct-club, #ct-app .ct-brandtext .ct-section { font-size:13px; } } #ct-app .ct-sticky { display:block; } #ct-app .ct-head { margin-bottom:14px; } #ct-app .ct-who { display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; height:100%; margin:0; text-align:right; font-size:14px; line-height:24px; white-space:nowrap; } #ct-app .ct-who-top { display:block; } /* "Not you?" exactly as in Juniors and Comp: same size, a 32px box, text sitting on a 24px line (1.56.1) */ #ct-app .ct-who > .ct-who-name { display:block; height:32px; line-height:24px; } #ct-app .ct-who > .ct-who-name > .ct-link { display:inline-block; font-size:inherit; line-height:24px; padding:4px 0; } #ct-app .ct-who, #ct-app .ct-who > .ct-who-name > .ct-link { color:#1f2a44; } #ct-app .ct-head-right:has(> .ct-who:not(:empty)) { height:var(--ct-hd); min-height:0; } #ct-app .ct-who:empty { display:none; } #ct-app .ct-head .ct-me { width:180px; max-width:none; margin:0; } #ct-app .ct-head .ct-me .ct-select { min-height:0; height:30px; padding:0 28px 0 10px; font-size:16px; line-height:28px; background-position:right 10px center; } #ct-app #ct-offer-btn { margin:0; height:30px; padding:0 14px; font-size:14px; line-height:1; display:inline-flex; align-items:center; } #ct-app .ct-filter { padding-right:0; } @media (max-width:479px) { #ct-app .ct-head .ct-me { width:124px; } #ct-app .ct-head .ct-me .ct-select { height:28px; line-height:26px; } #ct-app #ct-offer-btn { height:28px; padding:0 11px; font-size:13px; } #ct-app .ct-who { font-size:13px; } } @media (pointer:coarse) { #ct-app #ct-offer-btn { position:relative; } #ct-app #ct-offer-btn::after { content:""; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%); } } /* Appearance switch under the footer: Auto follows the device, or Light, or Dark (set in the page head) */ #ct-app .ct-themes { display:flex; justify-content:center; align-items:center; gap:8px; margin:50px 0 0; font-size:12px; color:var(--ct-muted); } #ct-app .ct-thseg { display:inline-flex; border:1px solid var(--ct-line); border-radius:999px; padding:2px; } #ct-app .ct-thseg button { font:inherit; font-size:12px; font-weight:600; border:0; background:none; color:var(--ct-muted); padding:5px 12px; border-radius:999px; cursor:pointer; min-height:0; } #ct-app .ct-thseg button[aria-pressed="true"] { background:#310069; color:#ffffff; } /* detail pass 1.40.2 */ #ct-app p, #ct-app small, #ct-app li, #ct-app h2, #ct-app h3, #ct-app .ct-hint { text-wrap:pretty; } #ct-app .ct-filter { gap:8px; } #ct-app .ct-chip { min-height:34px; padding-left:11px; padding-right:11px; font-size:12.5px; color:var(--ct-ink); background:#fff; } #ct-app .ct-foot .ct-link.ct-quiet { color:var(--ct-green); } #ct-app .ct-foot-links { display:inline-flex; flex-wrap:wrap; gap:6px 18px; } #ct-app .ct-sticky { border-bottom-color:transparent; } #ct-app .ct-sticky::after { content:""; position:absolute; left:4px; right:4px; bottom:-1px; height:1px; background:var(--ct-line); pointer-events:none; } /* Locked (no code yet): just the header and the code box (1.60.2) */ #ct-app.ct-locked .ct-sticky::after, #ct-app.ct-locked #ct-filter, #ct-app.ct-locked .ct-foot { display:none !important; } #ct-app.ct-locked .ct-head { margin-bottom:0 !important; } #ct-app.ct-locked #ct-tabs { display:none !important; } #ct-app.ct-locked .ct-sticky { margin-bottom:24px !important; padding-bottom:0 !important; } #ct-app .ct-codeadmin { margin:16px 0 0 !important; padding-top:14px; border-top:1px solid rgba(127,127,127,.3); font-size:14px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; } #ct-app .ct-codeadmin button { font:inherit; font-weight:700; background:none; border:1.5px solid currentColor; border-radius:999px; padding:8px 16px; color:inherit; cursor:pointer; } #ct-app .ct-plan-btn { display:block; width:max-content; margin:10px 0 0; font-size:14px; font-weight:600; } #ct-app .ct-ccrow { align-items:center; } #ct-app .ct-ccode { flex:1; font-size:20px; letter-spacing:0.15em; font-variant-numeric:tabular-nums; } #ct-app .ct-codebox { border:2px solid #c99be6; border-radius:10px; padding:18px; background:#f7effc; margin-bottom:16px; } #ct-app .ct-codebox h2 { margin:0 0 4px; font-size:18px; color:var(--ct-ink); } #ct-app .ct-codebox p { margin:0 0 10px; color:var(--ct-muted); font-size:14px; } #ct-app .ct-codebox .ct-codeerr { margin:8px 0 0; color:#b42318; font-weight:600; } #ct-app .ct-row2 { display:flex; gap:8px; } #ct-app .ct-row2 .ct-input { flex:1; min-width:0; } #ct-app .ct-code { text-transform:uppercase; letter-spacing:0.15em; font-weight:700; font-size:16px; min-height:44px; } #ct-app .ct-code::placeholder { text-transform:none; letter-spacing:normal; font-weight:400; } #ct-app .ct-row2 .ct-btn { min-height:44px; padding:0 14px; } #ct-app.ct-locked #ct-me, #ct-app.ct-locked #ct-who, #ct-app.ct-locked #ct-tourlink, #ct-app.ct-locked #ct-offer-btn, #ct-app.ct-locked #ct-filter, #ct-app.ct-locked #ct-views, #ct-app.ct-locked #ct-list, #ct-app.ct-locked #ct-clubev, #ct-app.ct-locked #ct-docs, #ct-app.ct-locked #ct-clubhead, #ct-app.ct-locked #ct-week, #ct-app.ct-locked .ct-myfoot, #ct-app.ct-locked #ct-term, #ct-app.ct-locked #ct-prompt, #ct-app.ct-locked #ct-events { display:none !important; } #ct-app .ct-subbtns { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; } #ct-app .ct-subbtns .ct-plan-btn { margin:0; } #ct-app input[type=checkbox], #ct-app input[type=radio] { accent-color:var(--ct-green); } #ct-app .ct-trow .ct-btn, #ct-app .ct-ev-row .ct-btn { min-height:36px; } #ct-app .ct-trow .ct-input, #ct-app .ct-trow select { min-height:36px; } #ct-app a.ct-btn { text-decoration:none; } #ct-app .ct-nb { white-space:nowrap; } #ct-app .ct-x { width:40px; height:40px; } #ct-app textarea { resize:vertical; } @media (max-width:599px) { #ct-app .ct-sticky::after { left:16px; right:16px; } } /* one size for small buttons everywhere (1.40.12) */ #ct-app .ct-btn { min-height:40px; } #ct-app .ct-btn-sm, #ct-app .ct-btn.ct-btn-sm, #ct-app .ct-side .ct-btn, #ct-app .ct-side .ct-btn.ct-manage, #ct-app .ct-mrow .ct-btn, #ct-app .ct-trow .ct-btn, #ct-app .ct-row .ct-btn, #ct-app .ct-pushrow .ct-btn, #ct-app .ct-wcard .ct-btn, #ct-app .ct-chips .ct-btn, #ct-app .ct-prompt .ct-btn, #ct-app .ct-adminbar .ct-btn, #ct-app .ct-alert .ct-btn, #ct-app .ct-ev-btns .ct-btn, #ct-app .ct-ev-row .ct-btn, #ct-app .ct-addrow .ct-btn, #ct-app .ct-plan-btn, #ct-app .ct-rmark .ct-btn, #ct-app .ct-fam-h .ct-btn, #ct-app .ct-r .ct-btn { font-size:13px; padding:8px 12px; min-height:36px; line-height:1.2; } #ct-app .ct-credits button { width:36px; height:36px; } #ct-app .ct-input + .ct-hint, #ct-app .ct-select + .ct-hint, #ct-app .ct-input + .ct-sub, #ct-app .ct-select + .ct-sub, #ct-app .ct-two + .ct-hint, #ct-app .ct-two + .ct-sub { margin-top:6px; } #ct-app #ct-a-rolls { margin-top:16px; } #ct-app .ct-head-right .ct-btn { min-height:0; } /* the header pair stays compact so it lines up with the icon */ #ct-app .ct-doc-go { margin-left:auto; flex:0 0 auto; font-size:13px; font-weight:600; text-decoration:underline; } #ct-app .ct-doc-k.ct-doc-wa { background:#0e6b37; } #ct-app .ct-clubhint { margin:18px 0 0; font-size:13px; } #ct-app .ct-doc-k { min-width:56px; box-sizing:border-box; text-align:center; } #ct-app .ct-doc-i { flex:0 0 auto; width:56px; display:flex; justify-content:center; } /* room for descenders (p, g, y) in clipped one-line text (1.41.5) */ #ct-app .ct-name, #ct-app .ct-brandtext .ct-club, #ct-app .ct-brandtext .ct-section { padding-bottom:.24em; margin-bottom:-.24em; } #ct-app .ct-steplink { margin:8px 0 0; display:block; width:max-content; background:#fff; } /* admin menu: setup order, clearer labels, a rain-blue Washout (1.43.0) */ #ct-app .ct-admin-tag { text-transform:none; letter-spacing:0; font-size:16px; font-weight:800; color:#310069; } #ct-app .ct-aglabel { font-size:15px; font-weight:700; margin:16px 0 8px; } #ct-app .ct-agroup:first-child .ct-aglabel { margin-top:6px; } #ct-app .ct-amenu .ct-agroup { flex:0 0 100%; } @media (min-width:480px) { #ct-app .ct-agbtns .ct-btn { flex:0 0 auto; } } #ct-app .ct-adminbar .ct-btn.ct-wash-btn { background:#1565c0; border-color:#1565c0; color:#fff; } #ct-app .ct-again { margin-top:28px; padding-top:6px; border-top:1px solid #f0c4c4; } #ct-app .ct-againask { margin:14px 0 8px; } #ct-app .ct-againscope { display:flex; flex-direction:column; gap:8px; margin:12px 0 4px; } #ct-app.ct-tabbed[data-tab="admin"] .ct-sticky::after { display:none; } /* the admin box has its own border: no extra line under it */ /* Light mode: secondary buttons and chips take a soft tint of the app colour (1.46.0). Primary, danger, selected and buttons on coloured boxes are unchanged */ html:not(.th-dark) #ct-app :is(.ct-btn, .ct-chip):not(.ct-btn-primary):not(.ct-btn-danger):not(.ct-wash-btn):not(.ct-wash-on):not(.on):not(.ct-on):not([aria-pressed="true"]):not(:is(.ct-alert, .ct-closure, .ct-status, .ct-sub-trial, .ct-sub-grace, .ct-sub-paused) *) { background:#f8f0fd; border-color:#efe0f7; } @media (hover:hover) { html:not(.th-dark) #ct-app :is(.ct-btn, .ct-chip):not(.ct-btn-primary):not(.ct-btn-danger):not(.ct-wash-btn):not(.ct-wash-on):not(.on):not(.ct-on):not([aria-pressed="true"]):not(:is(.ct-alert, .ct-closure, .ct-status, .ct-sub-trial, .ct-sub-grace, .ct-sub-paused) *):hover:not(:disabled) { background:#f4e6fb; } } #ct-app.ct-wopen .ct-openhint { display:none; } #ct-app .ct-tourbtn .ct-tl { display:none; } @media (max-width:479px) { #ct-app .ct-tourbtn .ct-tf { display:none; } #ct-app .ct-tourbtn .ct-tl { display:inline; } } /* Cards in every tab carry a colour line down its left edge (1.51.0) */ #ct-app .ct-mine, #ct-app .ct-ev { border-left:4px solid #9400c1; } #ct-app .ct-mine.ct-openhint { border-left-color:#2457D6; } #ct-app .ct-mine.ct-mine-got { border-left-color:#2E7D32; } #ct-app .ct-mine.ct-mine-off { border-left-color:#e8005a; } #ct-app .ct-mine.ct-mine-wait { border-left-color:#B45309; } #ct-app .ct-mine.ct-mine-cred { border-left-color:#0f766e; } #ct-app .ct-card { border-left:4px solid #9400c1; } #ct-app .ct-card.ct-standing { border-left-color:#ff015b; } #ct-app .ct-card.ct-washed { border-left-color:#c8102e; } #ct-app .ct-card.ct-closed { border-left-color:#5b6070; } #ct-app .ct-ev.cancelled { border-left-color:#8a8f9c; } #ct-app h2.ct-sec { font-size:17px; margin:18px 0 0; color:#310069; } #ct-app h2.ct-sec.ct-mysec { margin-bottom:8px; } /* the same gap under section headings as Juniors and Comp (1.61.4) */ #ct-app .ct-clubhead { margin:0 0 14px; } #ct-app .ct-clubhead:empty { display:none; } #ct-app .ct-clubhead h2.ct-sec { margin-top:4px; margin-bottom:0; } #ct-app .ct-clubhead .ct-hint { margin:6px 0 0; } #ct-app.ct-tabbed:not([data-tab="club"]) #ct-clubhead { display:none !important; } /* Drag to reorder (1.54.1) */ #ct-app .ct-grip { flex:0 0 auto; width:28px; min-height:40px; padding:0; margin:0 -2px 0 -4px; display:inline-flex; align-items:center; justify-content:center; border:0; background:none; color:#9aa1ad; cursor:grab !important; touch-action:none; border-radius:6px; } #ct-app .ct-grip:hover, #ct-app .ct-grip:focus-visible { color:#4a5163; background:#f1f2f6; } @media (max-width:479px) { #ct-app .ct-drow { position:relative; padding-left:66px; min-height:40px; } #ct-app .ct-drow > .ct-grip { position:absolute; left:0; top:6px; margin:0; } #ct-app .ct-drow > .ct-doc-ia { position:absolute; left:32px; top:8px; margin:0; } } /* the type icon sits beside the title on phones (1.81.2) */ #ct-app .ct-sorting, #ct-app .ct-sorting * { cursor:grabbing !important; user-select:none; -webkit-user-select:none; } #ct-app .ct-drow.ct-dragging { background:#fff; box-shadow:0 6px 18px rgba(20,24,40,.14); border-radius:8px; position:relative; z-index:2; } /* Attendance words and colours, the same in every app (1.55.0): Coming green, Can't make it red, Waitlist amber, No reply / Absent / Rostered off grey, Playing navy */ #ct-app .ct-ans { display:inline-flex; gap:6px; flex:0 0 auto; } #ct-app .ct-ans .ct-btn.on[data-ans="yes"], #ct-app .ct-ev-btns .on { background:#1f7a3a; border-color:#1f7a3a; color:#fff; } #ct-app .ct-ans .ct-btn.on[data-ans="no"], #ct-app .ct-ev-btns .on[data-evr="no"] { background:#b42318; border-color:#b42318; color:#fff; } #ct-app .ct-ev-st { white-space:nowrap; } #ct-app .ct-evnudge { margin:0 0 14px; } /* A card on its own runs the full width; two or more sit side by side on wider screens (1.56.1) */ #ct-app .ct-wlist > .ct-wcard:only-child { grid-column:1 / -1; } @media (max-width:479px) { #ct-app .ct-card-body:has(> .ct-side .ct-ans) { grid-template-columns:1fr; } #ct-app .ct-card-body > .ct-side:has(.ct-ans) { justify-self:stretch; display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:8px; } } #ct-app #ct-offer-btn { display:none !important; } #ct-app .ct-listtop { display:flex; justify-content:flex-end; margin:0 0 10px; } #ct-app .ct-later { margin:12px 0 0; text-align:right; } /* Can't make a session? on the right (1.61.7) */ #ct-app .ct-listfoot { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:2px 0 16px; } #ct-app .ct-listfoot > p { margin:0; } #ct-app .ct-more button, #ct-app .ct-listfoot .ct-link { color:var(--ct-green); font-size:14px; } /* both links the same colour and size */ html.th-dark #ct-app .ct-more button, html.th-dark #ct-app .ct-listfoot .ct-link { color:#c38fff; } @media (max-width:479px) { #ct-app .ct-card-body:has(.ct-ans) { flex-wrap:wrap; } #ct-app .ct-card-body > .ct-side:has(.ct-ans) { flex:1 1 100%; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; align-items:center; } #ct-app .ct-mrow:has(> .ct-ans) { flex-wrap:wrap; } #ct-app .ct-mrow > .ct-ans { flex:1 1 100%; } } #ct-app .ct-ev-st.pick { background:#e6eaf7; color:#12266e; } html.th-dark #ct-app .ct-ans .ct-btn.on[data-ans="yes"], html.th-dark #ct-app .ct-ev-btns .on { background:#1f7a3a; border-color:#1f7a3a; color:#fff; } html.th-dark #ct-app .ct-ans .ct-btn.on[data-ans="no"], html.th-dark #ct-app .ct-ev-btns .on[data-evr="no"] { background:#b42318; border-color:#b42318; color:#fff; } #ct-app .ct-modal-card { border:1px solid #d9dce6; box-shadow:0 10px 30px rgba(0,0,0,.18); } /* thin border on every overlay, like the guided tours (1.61.8) */ /* Overlays in the app's own style: a colour band along the top, rounder corners, the heading in the app colour (1.76.0). Side panels on wide screens keep their plain edge. */ html #ct-app .ct-modal-card { border-top:4px solid #9400c1; border-radius:12px; } html #ct-app .ct-modal-card h2 { color:#310069; } html.th-dark body #ct-app .ct-modal-card { border-top:4px solid #9400c1; } html.th-dark body #ct-app .ct-modal-card h2 { color:#c9a2ff; } /* Club tab: courts and documents in the neutral ink, like Juniors and Comp (1.64.0) */ #ct-app .ct-doc b, #ct-app .ct-docs-h, #ct-app .ct-doc-go { color:#1f2a44; } /* In-app confirm and prompt pop-ups (1.66.0) */ #ct-app .ct-ask { z-index:2147483000; } #ct-app .ct-ask .ct-modal-card { max-width:440px; } #ct-app .ct-ask-msg { margin:0; font-size:16px; line-height:1.5; white-space:pre-line; overflow-wrap:anywhere; } #ct-app .ct-ask-in { margin-top:12px; } #ct-app .ct-ask button { cursor:pointer !important; } /* Make-up credits side by side, 4 a row (2 on phones) (1.66.2) */ #ct-app .ct-credgrid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; padding:12px 14px; } #ct-app .ct-cred { border:1px solid var(--ct-line); border-radius:6px; padding:8px 10px; font-size:14px; min-width:0; } #ct-app .ct-cred b { display:block; } #ct-app .ct-cred small { display:block; color:var(--ct-muted); font-size:12px; } @media (max-width:479px) { #ct-app .ct-credgrid { grid-template-columns:repeat(2, minmax(0, 1fr)); } } /* Answers and chips (1.82.0): unchosen answers are outlined, the chosen one is filled with a tick. Selected chips are filled with a tick. Court chips sit apart from the week chips. */ #ct-app :is(.ct-ans, .ct-ev-btns, .ct-rmark) .ct-btn:not(.on):not(.ct-on) { background:transparent !important; border:1.5px solid var(--ct-line) !important; } #ct-app :is(.ct-ans, .ct-ev-btns, .ct-rmark) .ct-btn:is(.on, .ct-on)::before, #ct-app .ct-filter .ct-chip.ct-on::before { content:"\2713"; order:2; margin-left:5px; font-weight:800; } #ct-app :is(.ct-ans, .ct-ev-btns, .ct-rmark) .ct-btn:is(.on, .ct-on), #ct-app .ct-filter .ct-chip.ct-on { display:inline-flex; align-items:center; justify-content:center; } #ct-app .ct-filter .ct-chip.ct-on { box-shadow:0 1px 3px rgba(0,0,0,.18); } #ct-app .ct-filter [data-venue] + :not([data-venue]) { margin-left:12px; } /* Washout (1.82.0): one storm-grey weather button in every app, red while a washout is on */ #ct-app .ct-adminbar .ct-btn.ct-wash-btn { background:#3f4f5c !important; border-color:#3f4f5c !important; color:#fff !important; display:inline-flex; align-items:center; justify-content:center; gap:6px; } #ct-app .ct-adminbar .ct-btn.ct-wash-btn::before { content:""; width:16px; height:16px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 15a4 4 0 1 1 1-7.9A5 5 0 0 1 18 9a3.5 3.5 0 0 1-.5 7H7z'/%3E%3Cpath d='M9 19l-1 2M13 19l-1 2M17 19l-1 2'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 15a4 4 0 1 1 1-7.9A5 5 0 0 1 18 9a3.5 3.5 0 0 1-.5 7H7z'/%3E%3Cpath d='M9 19l-1 2M13 19l-1 2M17 19l-1 2'/%3E%3C/svg%3E") center/contain no-repeat; } #ct-app .ct-adminbar .ct-btn.ct-wash-btn.ct-wash-on { background:#c8102e !important; border-color:#c8102e !important; } html.th-dark #ct-app .ct-adminbar .ct-btn.ct-wash-btn:not(.ct-wash-on) { background:#4a5c6a !important; border-color:#5d707e !important; } /* Sessions cards (1.82.0): Ongoing in deep brand purple with a label, Open and Taken as flat status text, Covered by tag, 44px targets */ #ct-app .ct-card.ct-standing .ct-card-head { background:#4a1484; } #ct-app .ct-card.ct-standing .ct-card-body { background:#f6f0fc; } #ct-app .ct-card.ct-standing { border-left-color:#4a1484; } #ct-app .ct-card-head .ct-kind { background:rgba(255,255,255,.22); padding:1px 8px; border-radius:10px; font-size:11px; letter-spacing:.04em; text-transform:uppercase; } #ct-app .ct-card .ct-pill.ct-open, #ct-app .ct-card .ct-pill.ct-taken { background:transparent !important; border:0 !important; box-shadow:none !important; padding:4px 0; display:inline-flex; align-items:center; gap:5px; } #ct-app .ct-card .ct-pill.ct-open::before, #ct-app .ct-card .ct-pill.ct-taken::before { content:""; width:8px; height:8px; border-radius:50%; background:currentColor; } #ct-app .ct-ev-st.cover { background:#efe6fb; color:#4a1484; } html.th-dark #ct-app .ct-ev-st.cover { background:#241433 !important; color:#c9a6f5 !important; } html.th-dark #ct-app .ct-card.ct-standing .ct-card-head { background:#3b1170 !important; } html.th-dark #ct-app .ct-card.ct-standing .ct-card-body { background:#1b1324 !important; } html.th-dark #ct-app .ct-card.ct-standing { border-left-color:#6a2bb0 !important; } #ct-app .ct-cal a { display:inline-flex; align-items:center; min-height:44px; } #ct-app .ct-side .ct-btn[data-act="waitJoin"], #ct-app .ct-side .ct-btn[data-act="waitLeave"] { min-height:44px; } #ct-app .ct-psearch { margin:0 0 12px; } #ct-app .ct-psearch .ct-input { width:100%; min-height:44px; } #ct-app .ct-rows > .ct-row[hidden] { display:none !important; } #ct-app .ct-credits button { min-width:44px; min-height:44px; } #ct-app .ct-ca-row { display:grid; gap:6px; margin:0 0 14px; } #ct-app .ct-ca-new .ct-btn { justify-self:start; } html.th-dark #ct-app .ct-filter .ct-chip.ct-on { background:#7b2fd0 !important; border-color:#7b2fd0 !important; color:#fff !important; } #ct-app .ct-codereg { margin-top:6px; } #ct-app .ct-regkid { border:1px solid var(--ct-line); border-radius:8px; padding:8px 12px 10px; margin:12px 0; } #ct-app .ct-regkid legend { font-weight:700; padding:0 4px; } #ct-app .ct-regh { margin:16px 0 4px; font-size:15px; } #ct-app .ct-reg { border:1px solid var(--ct-line); border-radius:8px; padding:10px 12px; margin:0 0 10px; } #ct-app .ct-reg.done { opacity:.7; } #ct-app .ct-reg p { margin:4px 0; } #ct-app .ct-reg-h { display:flex; justify-content:space-between; gap:8px; } #ct-app .ct-med { color:#b42318; font-weight:600; } html.th-dark #ct-app .ct-med { color:#f08a80 !important; } #ct-app .ct-feed { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; border:1px solid var(--ct-line); border-radius:10px; padding:12px; margin:18px 0; } #ct-app .ct-feed small { display:block; color:var(--ct-muted); } #ct-app .ct-feedbtns { display:flex; flex-wrap:wrap; gap:8px; } #ct-app .ct-feedbtns .ct-btn { min-height:44px; display:inline-flex; align-items:center; text-decoration:none; } #ct-app [data-admin="regs"][data-count]:not([data-count=""])::after { content:attr(data-count); display:inline-block; min-width:18px; margin-left:6px; padding:0 5px; border-radius:9px; background:#b42318; color:#fff; font-size:11px; line-height:18px; } #ct-app .ct-paycard { display:flex; justify-content:space-between; align-items:center; gap:10px; border:1px solid var(--ct-line); border-radius:10px; padding:10px 12px; margin:0 0 14px; } #ct-app .ct-paycard.on { border-color:#1f7a3a; } #ct-app .ct-paycard small { display:block; color:var(--ct-muted); } #ct-app .ct-paybtns { display:flex; gap:6px; flex-wrap:wrap; } #ct-app .ct-paybtns a { text-decoration:none; } #ct-app .ct-ro-need { background:#fff4f2; } html.th-dark #ct-app .ct-ro-need { background:#2a1715 !important; } #ct-app .ct-ro-flag { color:#b42318; font-weight:700; } #ct-app .ct-ro-pick { max-width:150px; } #ct-app .ct-ww { border:1px solid var(--ct-line); border-radius:8px; padding:8px 10px; margin:0 0 8px; } #ct-app .ct-ww-h { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; } #ct-app .ct-ww-h small { color:var(--ct-muted); } #ct-app .ct-ww-in { display:grid; grid-template-columns:1fr 1fr auto; gap:6px; margin-top:6px; } #ct-app .ct-ww-st { margin-left:auto; font-size:12px; font-weight:700; padding:2px 8px; border-radius:10px; } #ct-app .ct-ww-st.ok { background:#e3f4e8; color:#1f7a3a; } #ct-app .ct-ww-st.warn { background:#fff4d6; color:#8a5a00; } #ct-app .ct-ww-st.bad { background:#fde8e8; color:#b42318; } #ct-app .ct-ww-st.miss { background:#eef0f4; color:#5b6070; } html.th-dark #ct-app .ct-ww-st { background:#1b1d20 !important; } #ct-app .ct-ml { border-top:1px solid var(--ct-line); padding:8px 0; } #ct-app .ct-ml small { display:block; color:var(--ct-muted); } #ct-app .ct-ml p { margin:4px 0 0; font-size:13.5px; } #ct-app .ct-ml-miss { color:#8a5a00; } html.th-dark #ct-app .ct-ml-miss { color:#e3a046 !important; } #ct-app .ct-le-add { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:6px 10px; } @media (max-width:479px) { #ct-app .ct-ww-in { grid-template-columns:1fr 1fr; } #ct-app .ct-ww-in [data-wn] { grid-column:1 / -1; } } /* White boxes on the light grey page (1.86.8) */ #ct-app .ct-feed { background:#fff; } html.th-dark #ct-app .ct-feed { background:transparent; } /* Open sessions / Who's playing in dark mode: a clear track and a raised, outlined choice (1.86.12) */ html.th-dark #ct-app .ct-views { background:#0b0c10 !important; border-color:#3a3d47 !important; } html.th-dark #ct-app .ct-view { color:#b7bac2 !important; } html.th-dark #ct-app .ct-view.ct-on { background:#2b2140 !important; color:#fff !important; box-shadow:inset 0 0 0 1px #7d4fc4 !important; } #ct-app .ct-modal[data-wait] { opacity:0; } /* Until the first data arrives, the footer, theme switcher and "Made by" line stay hidden and the page keeps its height, so nothing jumps when switching apps (1.86.15) */ #ct-app.ct-boot { min-height:100vh; } #ct-app.ct-boot .ct-loading { visibility:hidden; } #ct-app.ct-boot .ct-foot, #ct-app.ct-boot [data-themes] { visibility:hidden; } body:has(#ct-app.ct-boot) .ct-powered { visibility:hidden; } /* Quick fade (1.86.16): a new tab's content and every window fade in over 0.15s, like switching apps. Off for people who ask for less motion */ @keyframes ct-fadein { from { opacity:0; } } @keyframes ct-cardin { from { opacity:0; transform:translateY(6px); } } @keyframes ct-dimin { from { background-color:transparent; } } #ct-app.ct-fade > :not(.ct-sticky):not(.ct-tabs):not(.ct-modal):not(.ct-status):not(header) { animation:ct-fadein .15s ease-out; } #ct-app .ct-modal:not([hidden]) { animation:ct-dimin .15s ease-out; } #ct-app .ct-modal:not([hidden]) > .ct-modal-card { animation:ct-cardin .15s ease-out; } @media (prefers-reduced-motion:reduce) { #ct-app.ct-fade > *, #ct-app .ct-modal, #ct-app .ct-modal > .ct-modal-card { animation:none !important; } } /* dark:start */ html.th-dark #ct-app { --ct-bg:#19151d; --ct-card:#131313; --ct-ink:#d9c7ef; --ct-muted:#bab7c2; --ct-line:#443b4e; --ct-open:#211428; --ct-taken:#1d1a21; --ct-soft:#1a151f; --ct-amber:#3c3417; --ct-amber-ink:#eddfc2; --ct-red:#2b1313; --ct-red-ink:#e78888; color:#c38fff; } html.th-dark #ct-app .ct-sticky { background:#131313; } html.th-dark #ct-app .ct-select, html.th-dark #ct-app .ct-input { color:#c38fff; } html.th-dark #ct-app .ct-btn { color:#c38fff; } html.th-dark #ct-app .ct-link { color:#c38fff; } html.th-dark #ct-app .ct-status.ct-err { color:#eca2a2; } html.th-dark #ct-app .ct-status.ct-ok { color:#c38fff; } html.th-dark #ct-app .ct-card .ct-card-body { background:#201428; } html.th-dark #ct-app .ct-card.ct-standing .ct-card-body { background:#280f18; } html.th-dark #ct-app .ct-card .ct-lvl, html.th-dark #ct-app .ct-card .ct-pill.ct-open, html.th-dark #ct-app .ct-card .ct-pill.ct-taken, html.th-dark #ct-app .ct-card .ct-btn:not(.ct-btn-primary) { background:#131313; } html.th-dark #ct-app .ct-meta b { color:#c38fff; } html.th-dark #ct-app .ct-pill.ct-open { color:#c38fff; } html.th-dark #ct-app .ct-weather { color:#bab8c2; } html.th-dark #ct-app .ct-weather.ct-wet { color:#eca2a2; } html.th-dark #ct-app .ct-alert .ct-btn { background:#131313; color:#f47b8f; border-color:#454545; } html.th-dark #ct-app .ct-card.ct-washed .ct-card-body { background:#1e1e1e; } html.th-dark #ct-app .ct-view.ct-on { background:#131313; color:#c38fff; } html.th-dark #ct-app .ct-names li { background:#131313; color:#c38fff; } html.th-dark #ct-app .ct-pill.ct-pill.ct-full { background:#35373b; border-color:#61636b; } html.th-dark #ct-app .ct-mine { background:#131313; } html.th-dark #ct-app .ct-mine h3 { color:#c38fff; } html.th-dark #ct-app .ct-rmark .ct-btn.ct-no.ct-on { background:#35373b; border-color:#61636b; } html.th-dark #ct-app .ct-checklist label { color:#c38fff; } html.th-dark #ct-app .ct-sub-trial { background:#0f1b28; border-color:#2c465d; color:#bbd5eb; } html.th-dark #ct-app .ct-sub-grace { background:#2d2511; border-color:#5c4f2e; color:#f0e3ca; } html.th-dark #ct-app .ct-sub-paused { background:#2b1313; border-color:#553434; color:#e78888; } html.th-dark #ct-app .ct-term { border:1px solid #3a4350; background:#131920; color:#ccd7e8; } html.th-dark #ct-app .ct-dayoff { border:1px dashed #3a4350; color:#b5bbc5; background:#13171b; } html.th-dark #ct-app .ct-dayoff b { color:#ccd7e8; } html.th-dark #ct-app .ct-trow { border-bottom:1px solid #454545; } html.th-dark #ct-app .ct-trow small { color:#b9bcc0; } html.th-dark #ct-app .ct-pushrow { border:1px solid #43404a; } html.th-dark #ct-app .ct-pushrow small { color:#b9bcc0; } html.th-dark #ct-app .ct-tbl th, html.th-dark #ct-app .ct-tbl td { border-bottom:1px solid #454545; } html.th-dark #ct-app .ct-tbl th { color:#b9bcc0; } html.th-dark #ct-app .ct-impbox { border:1px solid #43404a; } html.th-dark #ct-app .ct-row.ct-cedit { background:#18141e; } html.th-dark #ct-app .ct-reach { color:#b5bbc5; } html.th-dark #ct-app .ct-closure { background:#2d2511; border:1px solid #5c4f2e; color:#f0e3ca; } html.th-dark #ct-app .ct-closure svg { color:#ffce70; } html.th-dark #ct-app .ct-closure p { color:#f0e3ca; } html.th-dark #ct-app .ct-closure b { color:#f0e3ca; } html.th-dark #ct-app .ct-card.ct-closed .ct-card-head { background:#35373b; } html.th-dark #ct-app .ct-card.ct-closed .ct-card-body { background:repeating-linear-gradient(-45deg,#1a1a1c 0 10px,#1f1f22 10px 20px); } html.th-dark #ct-app .ct-pill.ct-pill.ct-closedpill { background:#35373b; border-color:#61636b; } html.th-dark #ct-app .ct-note.ct-closednote { color:#f0e3ca; } html.th-dark #ct-app .ct-checkrow input { accent-color:#f47b8f; } html.th-dark #ct-app .ct-cal a { color:#c38fff; } html.th-dark #ct-app .ct-cal a:hover { color:#e58fff; } html.th-dark #ct-app .ct-prompt { color:#ffda8f; } html.th-dark #ct-app .ct-credits b { color:#c38fff; } html.th-dark #ct-app .ct-credits button { background:#131313; color:#c38fff; } html.th-dark #ct-app .ct-cls .ct-coach { color:#bab8c2; } html.th-dark #ct-app .ct-checkrow.ct-checksm input { accent-color:#c38fff; } html.th-dark #ct-app .ct-subhead { color:#c38fff; } html.th-dark #ct-app .ct-note.ct-level { color:#ffda8f; } html.th-dark #ct-app .ct-x:hover { color:#c38fff; } html.th-dark #ct-app .ct-subhead { color:#b7bac2; } html.th-dark #ct-app .ct-adminbar { background:#131313; } html.th-dark #ct-app .ct-btn-danger { color:#eca2a2; border-color:#553434; } html.th-dark #ct-app .ct-ev-empty { border:1px dashed #3f424b; color:#b9bcc0; } html.th-dark #ct-app .ct-ev { border:1px solid #3f424b; background:#131313; } html.th-dark #ct-app .ct-ev-meta { color:#b9bbc1; } html.th-dark #ct-app .ct-ev-row { border-top:1px solid #3f424b; } html.th-dark #ct-app input[type=file]::file-selector-button { border:1px solid #3f434a; background:#16191e; color:#d6dde9; } html.th-dark #ct-app .ct-ev-st { background:#1b1d20; color:#b9bbc1; } html.th-dark #ct-app .ct-ev-st.yes { background:#1b281f; color:#8de2a6; } html.th-dark #ct-app .ct-ev-st.wait { background:#322a13; color:#ecdcbe; } html.th-dark #ct-app .ct-ev-st.no { background:#271212; color:#ee8981; } html.th-dark #ct-app .ct-ev-pick { border:1px solid #3f424b; } html.th-dark #ct-app .ct-ev-pick label { border-bottom:1px solid #3f424b; } html.th-dark #ct-app a.ct-doc { border:1px solid #3f424b; background:#131313; } html.th-dark #ct-app a.ct-doc small { color:#b9bcc0; } html.th-dark #ct-app .ct-mystats { color:#b9bbc1; } html.th-dark #ct-app .ct-kstats { color:#b9bbc1; } html.th-dark #ct-app .ct-week-h { color:#d6dbe9; } html.th-dark #ct-app .ct-week-h span { color:#b8bbc1; } html.th-dark #ct-app .ct-wcard { border:1px solid #3f434b; background:#131313; } html.th-dark #ct-app .ct-wtxt b { color:#d6dbe9; } html.th-dark #ct-app .ct-wtxt small { color:#b7bac2; } html.th-dark #ct-app .ct-week-more { color:#b8bbc1; } html.th-dark #ct-app .ct-aglabel { color:#b8bbc1; } html.th-dark #ct-app .ct-viewbar { border:1.5px dashed #5f646d; color:#d6dbe9; background:#131313; } html.th-dark #ct-app .ct-tabs { background:#131313; border-top:1px solid #3f434b; } html.th-dark #ct-app .ct-tab { color:#b7bac2; } html.th-dark #ct-app .ct-tab.on { color:#d9c7ef; background:#211428; } @media (min-width:1000px) { html.th-dark #ct-app .ct-tabs { border:1px solid #3f434b; } } @media (min-width:1360px) { html.th-dark #ct-app.ct-tabbed[data-tab="admin"] #ct-amodal > * { border-left:1px solid #3f434b; } } html.th-dark #ct-app .ct-name { color:#d9c7ef; } html.th-dark #ct-app .ct-who, html.th-dark #ct-app .ct-who > .ct-who-name > .ct-link { color:#cfd6e9; } html.th-dark #ct-app .ct-chip { color:#c38fff; background:#131313; } html.th-dark #ct-app .ct-foot .ct-link.ct-quiet { color:#c38fff; } html.th-dark #ct-app .ct-codebox { border:2px solid #493455; background:#1c1222; } html.th-dark #ct-app .ct-codebox h2 { color:#c38fff; } html.th-dark #ct-app .ct-codebox .ct-codeerr { color:#ee8981; } html.th-dark #ct-app input[type=checkbox], html.th-dark #ct-app input[type=radio] { accent-color:#c38fff; } html.th-dark #ct-app .ct-steplink { background:#131313; } html.th-dark #ct-app .ct-admin-tag { color:#d9c7ef; } html.th-dark #ct-app .ct-again { border-top:1px solid #553434; } html.th-dark #ct-app .ct-card.ct-closed { border-left-color:#61636b; } html.th-dark #ct-app .ct-ev.cancelled { border-left-color:#62646a; } html.th-dark #ct-app h2.ct-sec { color:#d9c7ef; } html.th-dark #ct-app .ct-grip { color:#b9bcc1; } html.th-dark #ct-app .ct-grip:hover, html.th-dark #ct-app .ct-grip:focus-visible { color:#b7bac2; background:#191a1e; } html.th-dark #ct-app .ct-drow.ct-dragging { background:#131313; } html.th-dark #ct-app .ct-more button, html.th-dark #ct-app .ct-listfoot .ct-link { color:#c38fff; } html.th-dark #ct-app .ct-ev-st.pick { background:#181c27; color:#c1caed; } html.th-dark #ct-app .ct-modal-card { border:1px solid #3f424b; } html.th-dark #ct-app .ct-doc b, html.th-dark #ct-app .ct-docs-h, html.th-dark #ct-app .ct-doc-go { color:#cfd6e9; } html.th-dark #ct-app .ct-doc b, html.th-dark #ct-app .ct-docs-h, html.th-dark #ct-app .ct-doc-go { color:#b2bedc; } html.th-dark #ct-app .ct-clubhead h2.ct-sec { color:#c38fff; } html.th-dark #ct-app .ct-adminbar { border-color:#7b3fd6; } html.th-dark #ct-app .ct-admin-tag { color:#c38fff; } html.th-dark #ct-app .ct-modal-card { border-color:#2c313c; } html.th-dark #ct-app { color-scheme:dark; } html.th-dark #ct-app .ct-names li, html.th-dark #ct-app .ct-names li.ct-me-tag { color:#ffffff; } html.th-dark #ct-app .ct-tabs { background:#14111b; } html.th-dark #ct-app .ct-sticky { background:#101217; } html.th-dark #ct-app .ct-tab.on { background:#2a1f3d; color:#e9d9ff; } html.th-dark #ct-app .ct-tab { color:#b9b2c9; } html.th-dark #ct-app .ct-tabs { border-color:#2c2638; box-shadow:none; } html.th-dark #ct-app .ct-logo { background:#fff; border-radius:12px; padding:4px 6px; } html.th-dark #ct-app .ct-club { color:#ff5c9a; } html.th-dark #ct-app .ct-btn-primary { background:#5b2bb0; border-color:#5b2bb0; color:#fff; } html.th-dark #ct-app .ct-ev-btns .on { background:#1f7a3a; border-color:#1f7a3a; color:#fff; } html.th-dark #ct-app .ct-ev-btns .on[data-evr="no"] { background:#b42318; border-color:#b42318; color:#fff; } html.th-dark #ct-app input[type=checkbox], html.th-dark #ct-app input[type=radio] { accent-color:#b07cff; } html.th-dark #ct-app input[type=file]::file-selector-button { background:#262626; color:#eee; border-color:#4a4a4a; } html.th-dark #ct-app .ct-wcard { border-left:4px solid #6f9bf5; } html.th-dark #ct-app .ct-wcard.ct-w-no { border-left-color:#ef6b6b; } html.th-dark #ct-app .ct-wcard.ct-w-warn { border-left-color:#e3a046; } html.th-dark #ct-app .ct-wcard.ct-w-ok { border-left-color:#5cbf6a; } /* dark:end */