/* Free league planner - /planner/ */

/* 1-6 step bar */
.wiz_steps { display: flex; gap: 4px; margin: 0 0 16px; padding: 0; list-style: none; counter-reset: none; }
.wiz_steps li { flex: 1; font-size: 12px; line-height: 16px; }
.wiz_steps li > a, .wiz_steps li > span { display: block; padding: 6px 6px 6px 8px; border-radius: 3px; background: #eee; color: #999; border-bottom: 3px solid #ddd; }
.wiz_steps li.reachable > a { background: #e6f1f8; color: #0166AA; border-bottom-color: #9cc4e0; }
.wiz_steps li.reachable > a:hover { background: #d4e7f4; }
.wiz_steps li.current > span { background: #0166AA; color: #fff; border-bottom-color: #01406b; font-weight: bold; }
.wiz_steps li.done_state > a, .wiz_steps li.done_state > span { border-bottom-style: double; }
.wiz_steps .num { display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 9px; background: rgba(0,0,0,.12); margin-right: 3px; font-weight: bold; }

form.planner_form { margin: 25px 100px 0; }   /* question steps: narrower box; same top gap as the landing page */
.planner_form h3 { font-size: 20px; line-height: 26px; margin: 0 0 32px; }
.wiz_nav { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.pf_dates_times .wiz_nav, .pf_adjustments .wiz_nav { margin-bottom: -50px; }   /* about half the usual gap (10px + the footer's 80px spacer row + the ad's 30px top margin) */
.wiz_nav .spacer { flex: 1; }
.wiz_nav .pbtn { padding: 8px 16px; font-size: 14px; }
.popupGen.pl_confirm .popup-inner { max-width: 420px; }   /* "Start over?" */
.pl_confirm .content p { margin: 0 0 16px; font-size: 14px; line-height: 20px; }
.pl_confirm_btns { display: flex; justify-content: flex-end; gap: 8px; }
#pf_skip_picker { margin-top: 12px; font-weight: normal; }
.planner_form h3.pf_subhead { padding-top: 30px; margin-bottom: 8px; font: bold 13px/18px Arial, Helvetica, sans-serif; letter-spacing: 0; color: #292929; }   /* looks like "League night(s):"; padding because custom.css forces h3 margin-top to 0 */
.pf_cal { flex: 1; margin-bottom: 10px; font-size: 13px; line-height: 18px; }
.pf_cal_title { display: block; font-weight: bold; }
.pf_cal small { display: block; color: #555; }
.pf_cal_key { font-size: 11px; color: #555; margin-top: 4px; }
.pf_cal_key .k { display: inline-block; width: 12px; height: 12px; vertical-align: -2px; margin: 0 2px 0 8px; border: 1px solid #999; }
.pf_cal_key .k.night { background: #0166AA; border-color: #0166AA; }
.pf_cal_key .k.first { background: #0166AA; border: 2px solid #f0a500; }
.pf_cal_key .k.skip { background: #eee; }
.pf_cal_key .k.playoff { background: #2e8b3e; border-color: #26753a; }
/* league-night calendar: our classes decide the look, not jquery-ui's selected/today state */
#pf_skip_picker .ui-datepicker { width: 100% !important; box-sizing: border-box; border: 0; padding: 0; }   /* jquery-ui sets an inline 17em-per-month width */
#pf_skip_picker.pf_across1 .ui-datepicker { padding: 3px; border: 1px solid #ccc; border-radius: 5px; }   /* a single month has no .ui-datepicker-group to put the border on */
#pf_skip_picker .ui-datepicker-multi { display: flex !important; flex-wrap: wrap; align-items: stretch; }   /* months in a row share one height (5- and 6-week months); jquery-ui sets display inline */
#pf_skip_picker .ui-datepicker-group { box-sizing: border-box; margin: 0 10px 10px 0; padding: 3px; border: 1px solid #ccc; border-radius: 5px; }
#pf_skip_picker.pf_across1 .ui-datepicker-group { width: 100% !important; }   /* all months sit in one jquery-ui row and wrap */
#pf_skip_picker.pf_across2 .ui-datepicker-group { width: calc((100% - 10px) / 2) !important; }
#pf_skip_picker.pf_across3 .ui-datepicker-group { width: calc((100% - 20px) / 3) !important; }
#pf_skip_picker.pf_across1 .ui-datepicker-group,
#pf_skip_picker.pf_across2 .ui-datepicker-group:nth-child(2n),
#pf_skip_picker.pf_across3 .ui-datepicker-group:nth-child(3n) { margin-right: 0; }   /* last in its row */
#pf_skip_picker.pf_across1 .ui-datepicker-group .ui-datepicker-header,
#pf_skip_picker.pf_across2 .ui-datepicker-group:nth-child(2n+1) .ui-datepicker-header,
#pf_skip_picker.pf_across3 .ui-datepicker-group:nth-child(3n+1) .ui-datepicker-header { border-left-width: 1px; }   /* start of a wrapped row */
#pf_skip_picker .ui-datepicker-group table { width: 96%; font-size: 12px; }
#pf_skip_picker.pf_across1 .ui-datepicker table,
#pf_skip_picker.pf_across2 .ui-datepicker-group:nth-child(2n+1):nth-last-child(2) table,
#pf_skip_picker.pf_across3 .ui-datepicker-group:nth-child(3n+1):nth-last-child(2) table { margin-bottom: 0; }   /* a month alone in its row: border right under the last week (last child is jquery-ui's row break) */
#pf_skip_picker .ui-datepicker-title { font-size: 13px; }
#pf_skip_picker td a.ui-state-default, #pf_skip_picker td span.ui-state-default { padding: .25em .1em; }
#pf_skip_picker td a.ui-state-default { text-align: center; }
#pf_skip_picker td.pl_off span.ui-state-default { background: #fff; color: #888; border-color: #e2e2e2; }
#pf_skip_picker td.pl_off.ui-state-disabled, #pf_skip_picker td.pl_off .ui-state-disabled { opacity: 1; }   /* jquery-ui fades disabled days to .35 */
#pf_skip_picker td.pl_night a.ui-state-default,
#pf_skip_picker td.pl_night a.ui-state-active,
#pf_skip_picker td.pl_night a.ui-state-highlight { background: #0166AA; color: #fff; border-color: #01548c; font-weight: bold; }
#pf_skip_picker td.pl_playoff a.ui-state-default,
#pf_skip_picker td.pl_playoff a.ui-state-active,
#pf_skip_picker td.pl_playoff a.ui-state-highlight { background: #2e8b3e; color: #fff; border-color: #26753a; }
#pf_skip_picker td.pl_first a.ui-state-default { box-shadow: inset 0 0 0 2px #f0a500; }
#pf_skip_picker td.pl_skip a.ui-state-default,
#pf_skip_picker td.pl_skip a.ui-state-active,
#pf_skip_picker td.pl_skip a.ui-state-highlight { background: #eee; color: #999; border-color: #ccc; text-decoration: line-through; }
.pf_season { margin: 4px 0 10px; }
.pf_season_title { font-weight: bold; font-size: 14px; margin-bottom: 6px; }
.pf_opt { padding: 8px 10px; margin-bottom: 8px; border: 1px solid #b9d6ea; border-radius: 4px; background: #fff; font-size: 13px; line-height: 20px; }
.pf_opt.inactive { border-color: #e2e2e2; background: #f6f6f6; color: #888; }
.pf_opt .pf_radio { display: inline; font-weight: bold; margin: 0 6px 0 0; cursor: pointer; }
.planner_form input[type=radio], .planner_form input[type=checkbox] { cursor: pointer; }
.planner_form .pf_opt select, .planner_form .pf_opt input[type=date] { display: inline-block; width: auto; margin: 0 6px 0 0; padding: 3px 5px; }
.pf_hint { display: inline-block; font-weight: bold; color: #2e8b3e; }
.pf_opt.inactive .pf_hint { color: #888; }
.pf_sub { margin: 4px 0 0 22px; font-size: 12px; }
.pf_error { display: block; color: #b00; font-size: 12px; font-weight: bold; line-height: 16px; }
.pf_error:empty { display: none; }
.planner_form input.invalid { border-color: #b00; background: #fff6f6; }
.planner { color: #292929; }
.planner_intro { font-size: 15px; margin: 0 0 16px; }
.print_only { display: none; }

.planner_form fieldset { border: 1px solid #ddd; border-radius: 4px; padding: 20px 50px 50px; margin: 0 0 14px; background: #fafafa; }
.planner_form legend { font-weight: bold; padding: 0 12px; color: #0166AA; font-size: 28px; line-height: 34px; }
.planner_form label { display: block; font-weight: bold; font-size: 13px; line-height: 18px; margin-bottom: 10px; }
.planner_form label small { font-weight: normal; color: #777; }
.planner_form input[type=text], .planner_form input[type=number], .planner_form input[type=date],
.planner_form input[type=time], .planner_form select, .planner_form textarea {
    display: block; width: 100%; box-sizing: border-box; margin-top: 3px; padding: 5px 6px;
    border: 1px solid #bbb; border-radius: 3px; font: 14px Arial, Helvetica, sans-serif; background: #fff;
}
.planner_form textarea { resize: vertical; }
.planner_form input[type=date], .planner_form input[type=time] { cursor: pointer; }
.pf_row { display: flex; gap: 18px; }
.pf_row > * { flex: 1; }
.pf_row_name { padding-bottom: 30px; }   /* step 1 */
.pf_row.pf_gap { margin-top: 24px; }
.pf_waits .pf_opt { margin-bottom: 0; }
.pf_waits b { display: block; font-size: 13px; line-height: 18px; }
.pf_waits small { display: block; margin-top: 6px; font-size: 11px; line-height: 20px; font-weight: normal; }
.planner_form .pf_waits input[type=radio] { display: inline-block; width: auto; margin: 0 3px 0 0; }
.pf_waits .pf_radio { display: inline-block; font-weight: normal; margin: 0 6px 0 0; padding: 3px 10px 3px 6px; border-radius: 9px; background-color: transparent; cursor: pointer; }
.pf_waits .pf_radio:hover { background-color: #EEE; }
.pf_days { margin: 4px 0 30px; font-weight: bold; font-size: 13px; }
.pf_days label { display: inline-block; font-weight: normal; margin: 0 6px 0 0; padding: 3px 10px 3px 6px; border-radius: 9px; background-color: transparent; cursor: pointer; }
.pf_days label:hover { background-color: #EEE; }
.pf_days input { margin-right: 3px; }

.pbtn { display: inline-block; background: #f4f4f4; border: 1px solid #bbb; border-radius: 3px; padding: 6px 12px;
    font: bold 13px Arial, Helvetica, sans-serif; color: #292929; cursor: pointer; }
.pbtn:hover { background: #e8e8e8; }
.pbtn.small { padding: 4px 10px; margin-top: 3px; }
.pbtn.primary { background: #0166AA; border-color: #0166AA; color: #fff; }
.pbtn.primary:hover { background: #01548c; }
.pbtn[disabled] { opacity: .5; cursor: default; }
.pf_org_pick form { margin: 14px 0 18px; }
.pf_org_pick .pbtn.pf_org { display: block; width: 100%; max-width: 480px; margin-bottom: 8px; padding: 10px 14px; font-size: 15px; text-align: left; }
.pf_org_inactive { color: #888; font-size: 12px; }

.pr_summary { padding: 10px 0; margin: 6px 0 12px; }
.pr_summary h3 { margin: 0; font-size: 20px; line-height: 28px; }
.planner h3.pr_page_head { margin: 0 0 6px; font-size: 22px; line-height: 28px; color: #0166AA; }
.planner h3.pr_league_name { margin: 4px 0 0; padding-top: 6px; font-size: 20px; line-height: 28px; }   /* summary: under "View full schedule" */
.pr_sport { margin: 2px 0 0; color: #555; line-height: 20px; }
.pr_facts { margin: 2px 0 8px; color: #555; }
.pr_facts li { line-height: 20px; }
a.edit { font-weight: normal; margin-right: 4px; color: #888; text-decoration: none; }
a.edit svg { vertical-align: -2px; }
a.edit:hover { color: #333; }
.pr_fixes { list-style: none !important; margin: 6px 0 0 !important; }
.pr_fixes li { margin: 0 0 4px; }
.pr_fixes form { margin: 0; }
.pr_sub { color: #555; margin-bottom: 8px; }
.pr_stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 36px 0 36px; }
.pr_stats > div { flex: 1 1 120px; background: #f2f7fb; border-radius: 4px; padding: 6px 10px; line-height: 18px; }
.pr_stats b { display: block; font-size: 24px; line-height: 30px; color: #0166AA; }
.pr_stats span { font-size: 12px; color: #555; }
.pr_stats .pr_stat_part { display: block; padding-left: 12px; font-style: normal; }
.pr_why, .pr_dates { font-size: 13px; line-height: 19px; margin: 4px 0; color: #444; }
.pr_alert { margin: 8px 0 4px; padding: 8px 12px; border-radius: 4px; line-height: 19px; }
.pr_alert ul { margin: 4px 0 0 20px; list-style: disc; }
.pr_alert.bad { background: #fff3e6; border: 1px solid #f0b37e; }
.pr_alert.good { background: #eaf7ea; border: 1px solid #9ccf9c; }

.pr_actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.pr_actions.pr_bottom { justify-content: flex-end; clear: both; }   /* summary: under everything, right side */
.pr_actions.pr_bottom .pr_view { margin-right: auto; }   /* "View full schedule" on the left, the rest stay right */
.pr_actions .pbtn.pr_view { background: #f4f4f4; border-color: #bbb; color: #292929; padding: 10px 20px; font-size: 16px; line-height: 22px; }   /* same gray as "Back to summary", bigger */
.pr_actions .pbtn.pr_view:hover { background: #e8e8e8; }
.pr_actions .pbtn { background: #2e8b3e; border-color: #26753a; color: #fff; }
.pr_actions .pbtn:hover { background: #26753a; }
.pr_cta .pbtn.primary { background: #2e8b3e; border-color: #26753a; color: #fff; }
.pr_cta .pbtn.primary:hover { background: #26753a; }
.pr_cta { display: flex; gap: 14px; align-items: center; }
.pr_cta form { margin: 0; }
.pr_cta.saved { display: block; background: #eaf7ea; border-color: #9ccf9c; }
.pr_cta form.inline { display: inline; margin-left: 12px; }
/* save box: top right, beside the page title (h2.p3 is 45px + 12px padding + 25px margin) */
.pr_save { float: right; width: min-content; box-sizing: border-box; margin: -82px 0 10px 14px; position: relative; z-index: 1; flex-direction: column; align-items: flex-start; gap: 8px; }
.pr_save form.inline { display: block; margin: 6px 0 0; }
.pr_save.saved { width: calc(33% + 80px); }   /* no "free." line to size it by */
.pr_save > div > b:first-child { display: block; white-space: nowrap; padding-right: 80px; }   /* "...on MyLeagueInfo - free." + 80px sets the box width; the rest wraps under it */
.linkbtn { background: none; border: 0; padding: 0; color: #0166AA; text-decoration: underline; cursor: pointer; font-size: 12px; }
a.pbtn { line-height: 18px; }
.print_sub { font-size: 16px; font-weight: bold; margin-bottom: 6px; }
.pr_cta { background: lightyellow; border: 1px solid #e6dd99; border-radius: 4px; padding: 8px 12px; font-size: 13px; line-height: 19px; margin-bottom: 14px; }
.pr_filter { margin-bottom: 60px; font-weight: bold; }   /* 50px extra before the schedule table */
.pr_actions.pr_float { float: right; clear: right; justify-content: flex-end; margin: 0 0 10px 14px; }   /* schedule: under the save box */
.pr_back { margin: 0 0 10px; }
.pr_filter select { padding: 3px; font-size: 14px; }

.pr_night { margin-bottom: 14px; page-break-inside: avoid; break-inside: avoid; }
.pr_night_head { background: #0166AA; color: #fff; padding: 3px 10px; border-radius: 3px 3px 0 0; }
.pr_night_head.alt_month { background: #014a7a; }   /* every other month */
.pr_night_head.pr_playoff_head { background: #2e8b3e; }
.pr_night_head.pr_playoff_head.alt_month { background: #1f6030; }
.pr_skip { background: #fbe3e4; color: #8a1f24; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
div.pr_skip { margin-bottom: 14px; padding: 3px 10px; border: 1px solid #f1c0c2; border-radius: 3px; page-break-inside: avoid; break-inside: avoid; }
.planner h2.pr_playoffs_head { margin: 30px 0 12px; font-size: 26px; line-height: 32px; color: #2e8b3e; }
.pr_night_head span { float: right; font-size: 12px; opacity: .85; }
.pr_grid, .pr_team_table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pr_grid th, .pr_grid td, .pr_team_table th, .pr_team_table td { border: 1px solid #ddd; padding: 3px 8px; text-align: left; line-height: 18px; }
.pr_grid th, .pr_team_table th { background: #f2f2f2; }
.pr_grid td.pr_time { width: 70px; white-space: nowrap; font-weight: bold; }
.pr_grid td i { color: #888; font-size: 11px; }
.pr_grid td.pr_open { color: #bbb; }
.pr_team_table tbody tr:nth-child(even) td { background: #fafafa; }
.pr_team_table tbody tr.pr_skip td { background: #fbe3e4; color: #8a1f24; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

#pf_playoff_opts select { max-width: 200px; }
/* playoff bracket: empty lines to write teams on */
.pb_wrap { margin: 24px 0 10px; }
.planner h3.pb_head { margin: 0 0 8px; font-size: 18px; line-height: 24px; color: #0166AA; }
.pb_title { margin: 12px 0 4px; font-weight: bold; font-size: 13px; }
.pb_scroll { overflow-x: auto; }
.pb_svg { display: block; font: 11px Arial, Helvetica, sans-serif; }
.pb_round { font-weight: bold; fill: #555; }
.pb_match rect { fill: #fff; stroke: #888; }
.pb_match line { stroke: #bbb; }
.pb_match.pb_if rect { stroke-dasharray: 4 3; }
.pb_when { font-size: 10px; fill: #666; }
.pb_num { font-weight: bold; fill: #0166AA; }
.pb_seed { fill: #aaa; font-size: 10px; }
.pb_line { fill: none; stroke: #888; }

/* admin progress page */
.adm_range { margin-bottom: 8px; }
.adm_funnel { width: 600px !important; margin-bottom: 8px; }
.adm_bar { height: 12px; background: #0166AA; border-radius: 2px; min-width: 1px; }
.adm_events { font-size: 13px; }
.adm_list { font-size: 12px !important; }
.pip { display: inline-block; width: 9px; height: 9px; border-radius: 5px; background: #ddd; margin-right: 2px; }
.pip.on { background: #0166AA; }

@media print {
    @page { margin: 12mm; }
    body { background: #fff !important; border: 0 !important; min-width: 0 !important; }
    header, .nav, .footer, .mainheadertr, .mainfootertr, .popupGen, .user_message,
    .planner_intro, .planner_form, .no_print, .wiz_steps, a.edit, h2.p3, ins, iframe { display: none !important; }
    .main, .grid_12, .box-shadow, .wrap { width: auto !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; border: 0 !important; background: #fff !important; }
    .print_only { display: block; }
    .print_title { font-size: 22px; font-weight: bold; margin-bottom: 6px; }
    .pr_summary { border: 1px solid #999; }
    .pr_summary h3 { display: none; }
    .pr_night_head.alt_month { background: #d6d6d6 !important; }
    .pr_night_head { background: #eee !important; color: #000; border: 1px solid #999; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .pr_night_head.pr_playoff_head, .pr_night_head.pr_playoff_head.alt_month { background: #2e8b3e !important; color: #fff; }
    .pr_grid th, .pr_grid td, .pr_team_table th, .pr_team_table td { border-color: #999; }
    .pb_wrap { page-break-before: always; break-before: page; }
    .pb_scroll { overflow: visible; page-break-inside: avoid; break-inside: avoid; }
    .pb_svg { max-width: 100%; height: auto; }
}

/* start page - /planner/ */
.planner_start { margin: 25px 50px 0; font-size: 14px; line-height: 21px; }
.planner_start fieldset { border: 1px solid #ddd; border-radius: 4px; padding: 45px; margin: 0 0 14px; background: #fafafa; }
.ps_badge { float: right; position: relative; margin: -10px 0 10px 30px; line-height: 1; }
.ps_badge .fa-calendar-alt { font-size: 180px; color: #0166AA; }
.ps_badge .fa-check-circle { position: absolute; right: -24px; bottom: -18px; font-size: 81px; color: #2e8b3e;
    background: #fafafa; border-radius: 50%; border: 6px solid #fafafa; }
.planner_start legend { font-weight: bold; padding: 0 12px; color: #0166AA; font-size: 21px; line-height: 26px; }
.planner_start h3 { font-size: 20px; line-height: 26px; margin: 0 0 10px; padding-top: 26px; color: #0166AA; }   /* padding: custom.css forces h3 margin-top to 0 */
.ps_lead { font-size: 16px; line-height: 24px; margin: 0; }
.ps_lead + h3 { padding-top: 23px; }   /* space before the next heading */
.planner_start h3.ps_first { padding-top: 0; }   /* top of the box */
.ps_green { color: #2e8b3e; }
.ps_cards { display: flex; gap: 14px; }
.ps_cards > div { flex: 1; background: #fff; border: 1px solid #e2e2e2; border-radius: 4px; padding: 12px 14px; font-size: 13px; line-height: 19px; }
.ps_cards b { display: block; font-size: 15px; margin-bottom: 4px; }
.ps_cards b i, .ps_cards b svg { font-size: 22px; color: #0166AA; margin-right: 6px; vertical-align: -3px; }   /* font awesome swaps <i> for <svg> */
.ps_options { list-style: none !important; margin: 0 !important; padding: 0; }
.ps_options li:last-child { border-bottom: 0; padding-bottom: 0; }
.ps_options li { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid #e2e2e2; font-size: 13px; line-height: 19px; }
.ps_options .pbtn { flex: 0 0 190px; box-sizing: border-box; cursor: default; background: #2e8b3e; border-color: #26753a; color: #fff; }
.ps_options .pbtn:hover { background: #2e8b3e; }
@media (max-width: 760px) {
    .planner_start { margin: 10px 0 0; }
    .planner_start fieldset { padding: 20px 16px; }
    .planner_start legend { font-size: 18px; line-height: 24px; padding: 0 6px; }
    .ps_badge { margin: 0 6px 6px 16px; }
    .ps_badge .fa-calendar-alt { font-size: 96px; }
    .ps_badge .fa-check-circle { font-size: 45px; right: -12px; bottom: -9px; border-width: 3px; }
    .ps_cards, .ps_options li { flex-direction: column; gap: 6px; }
    .ps_options .pbtn { flex-basis: auto; }
    .pr_save, .pr_save.saved { float: none; width: auto; margin: 0 0 14px; }   /* too narrow to float - full width under the title */
    .pr_save > div > b:first-child { white-space: normal; padding-right: 0; }
}