/* ================== HOLIDAY REQUESTS (class.holiday_requests.php + class.holiday_ranking.php) ==================
   hr_ classes: the employer page (employers?a=holidays), its drawers and the grid; hrr_ the
   person's ranking drawer. borrows the block schedule's page pieces (bs_ list, grid, plus,
   lock, chips) and the meetings shell (cm_ pills, detail rows, tallies) */

/* the page */
.employer_tool_drawer_holidays .svy_intro_buttons, .employer_tool_drawer_holidays .svy_list_top .svy_create.hr_new_request { display: none; }
.hr_page, .hr_page * { min-width: 0; }
.hr_page .settings_row_label { overflow-wrap: anywhere; }
.hr_top .svy_list_sub a.hr_request_link { color: #0f7777; font-weight: 700; text-decoration: none; border-bottom: 1px dotted #0f7777; }
.hr_top .svy_list_sub a.hr_back { color: #0f7777; font-weight: 700; text-decoration: none; }
.hr_rounds { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; }
.hr_round_pill { font: inherit; font-size: 13px; font-weight: 700; color: #4b5b62; background: #fff; border: 1px solid #d3e2e3; border-radius: 999px; padding: 5px 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hr_round_pill.hr_round_on { background: #0f7777; border-color: #0f7777; color: #fff; }
/* a holiday's icon box: the month over the day */
.settings_row_icon.hr_day_icon { flex-direction: column; line-height: 1; background: #fbeee6; color: #b4532a; }
.hr_day_mon { font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hr_day_num { font-size: 16px; font-weight: 800; margin-top: 1px; }
.hr_chips .pd_chip small { font-weight: 500; opacity: .75; margin-left: 2px; }

/* the hero's drawing: a small grid of who has what off */
.hr_hero_art { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 200px; padding: 10px 0 30px; }
.hr_art { background: #fff; border: 1px solid #cfe9e8; border-radius: 16px; padding: 18px 20px; box-shadow: 0 10px 26px rgba(16, 38, 52, .08); width: 100%; max-width: 480px; }
.hr_art_grid { display: grid; gap: 5px; }
.hr_art_row { display: grid; grid-template-columns: 34px repeat(5, minmax(0, 1fr)); gap: 5px; align-items: center; }
.hr_art_h { font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #6b7b80; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr_art_who span { display: block; width: 24px; height: 24px; border-radius: 50%; background: #d9eeee; }
.hr_art_cell { height: 30px; border-radius: 7px; background: #f1f5f5; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; }
.hr_art_cell.hr_art_on { background: #0f7777; }
.hr_art_dot { width: 10px; height: 10px; border-radius: 3px; background: #0f7777; }
.hr_steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .hr_steps { grid-template-columns: 1fr; } .hr_hero_art { min-height: 0; padding: 0 0 20px; } }

/* the forms */
.hr_form_container .form-control { width: 100%; min-width: 0; box-sizing: border-box; }
.hr_form_container .pd_label:first-child { margin-top: 0; }
.hr_form_container .pd_form textarea.form-control { height: auto; resize: vertical; }
.hr_roles .pd_card { min-height: 52px; }
.hr_roles .pd_card_icon { width: 34px; height: 34px; font-size: 16px; }
/* the two count cards on the round form (pd_card like the role cards, a chevron where the
   ring would be), and the windows they open */
.hr_open_cards { margin-top: 10px; }
.hr_open_card .pd_card_name { white-space: normal; line-height: 1.25; }
.hr_open_card .pd_card_name b { color: #0f7777; }
.hr_open_card .pd_card_icon.hr_day_icon { background: #fbeee6; color: #b4532a; font-size: 18px; flex-direction: row; }
.hr_open_chevron { flex: none; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; color: #8a9a9f; font-size: 14px; }
.hr_open_card:hover .hr_open_chevron { color: #0f7777; }
.hr_card_locked, .hr_card_locked:hover { cursor: default; border-color: var(--pd_line, #dbe4e6); }
.hr_catalogue .pd_card.hide_me, .hr_roster .pd_card.hide_me { display: none; }
.hr_catalogue .pd_card:not(.pd_on), .hr_roster .pd_card:not(.pd_on) { opacity: .55; }
.hr_catalogue .pd_card_icon.hr_day_icon { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.hr_catalogue .pd_card_icon .hr_day_num { font-size: 14px; }
.hr_auto_when.hide_me { display: none; }
.hr_auto .pd_card_name, .hr_auto .pd_card_sub { white-space: normal; }
/* the footers: ordinary bootstrap-sized buttons on the right, the confirm tick on its own row above */
.hr_foot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.hr_foot .btn { flex: none; }
.hr_btn_primary, .hr_btn_primary:hover, .hr_btn_primary:focus { background: darkcyan; border-color: darkcyan; color: #fff; }
.hr_btn_primary[disabled] { background: darkcyan; border-color: darkcyan; color: #fff; opacity: .45; }
.hr_btn_danger, .hr_btn_danger:hover, .hr_btn_danger:focus { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.hr_btn_danger[disabled] { background: #b91c1c; border-color: #b91c1c; color: #fff; opacity: .45; }
.hr_confirm_container .cm_detail_text { font-size: 14.5px; line-height: 1.5; color: #2b3a3f; margin-top: 8px; }
.hr_confirm { margin-bottom: 4px; }
.hr_foot .hr_confirm .hr_confirm_box { flex: 0 0 30px; width: 30px; height: 30px; }
.hr_tools .dropdown-menu > li > a.hr_menu i { font-size: 15px; color: #0f7777; }
.hr_tools .dropdown-menu > li > a.hr_menu[style] i { color: inherit; }
.hr_request_container .alert-success { background: #e3f4ea; border-color: #bfe3cc; color: #1a5c35; }
.hr_form_container .cm_form_tail { height: 24px; }
@media (max-width: 767px) { .hr_form_container .cm_form_tail { height: 56px; } }

/* the grid */
.hr_grid th.hr_g_day b { display: block; }
.hr_grid th.hr_g_day span { display: block; font-weight: 500; color: #6b7b80; font-size: 11px; }
.hr_grid .hr_g_total { font-size: 13px; color: #0b5f5f; }
.hr_g_pill { display: inline-block; font-size: 11.5px; font-weight: 800; border-radius: 6px; padding: 3px 8px; }
.hr_g_off .hr_g_pill { background: #d9f0e2; color: #1a6a3b; }
.hr_g_work .hr_g_pill { background: #eef0f2; color: #4b5b62; }
.hr_g_pill i { font-size: 9px; opacity: .7; }
.hr_g_rank { display: block; font-size: 10.5px; font-weight: 700; color: #8a9a9f; margin-top: 2px; }
.hr_g_would { color: #b4532a; }
.hr_g_off { background: #f4fbf6; }
.hr_grid_page .alert-success { background: #e3f4ea; border-color: #bfe3cc; color: #1a5c35; }
.hr_cell_options .pd_card_icon.hr_ico_off { background: #e3f4ea; color: #1f7a45; }
.hr_cell_options .pd_card_icon.hr_ico_work { background: #eef0f2; color: #4b5b62; }

/* the person's ranking */
.hrr_container .settings_row.hrr_day { display: flex; cursor: default; }
.hrr_grip { flex: none; width: 22px; color: #b3c1c5; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; cursor: grab; margin-left: -6px; touch-action: none; }
.hrr_day.ui-sortable-helper { box-shadow: 0 8px 22px rgba(11, 61, 64, .18); background: #fff; border-radius: 8px; }
.hrr_num { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 999px; background: #0f7777; color: #fff; font-size: 12px; font-weight: 800; margin-right: 8px; vertical-align: 1px; }
.hrr_num_work { background: #eef0f2; color: #6b7b80; }
.hrr_toggle { flex: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid #e4eeee; background: #fff; color: #8a9a9f; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; margin-left: 8px; }
.hrr_toggle:hover { color: #b91c1c; border-color: #f1d3c4; background: #fdf3f3; }
.hrr_toggle_on { color: #0f7777; border-color: #b9dcdc; background: #f2f9f9; }
.hrr_work_list .settings_row_label { color: #6b7b80; }
.hrr_out { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: 2px; }
.hrr_out_off { background: #d9f0e2; color: #1a6a3b; }
.hrr_out_work { background: #eef0f2; color: #4b5b62; }
.hrr_hint { margin: 0 2px 8px; }
.hrr_container .pd_form textarea.form-control { height: auto; resize: vertical; width: 100%; box-sizing: border-box; }

/* the todo list's row */
.todo_window_icon_holiday { background: #fbeee6; color: #b4532a; }
/* the thank-you over the ranking (the survey sample's ss_ animation) */
.hrr_done { padding-top: 60px; }
.hrr_done.hide_me { display: none; }
/* the public page's way back: the header chevron and the footer link under the button */
.hrr_page_done { margin-top: 8px; }
.hrr_container .bs_foot { display: block; }
.hrr_public .bs_foot { flex-direction: column; }
.hrr_public .bs_foot .btn { flex: none; width: 100%; }
/* the confirm tick over the button: the box keeps its 30px whatever .bs_foot says of a .btn
   (flex: 1 on the site, width: 100% on the emailed page), the words take the rest */
.hrr_container .hrr_confirm { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 10px; }
.hrr_container .hrr_confirm .btn.cm_confirm_box { flex: none !important; width: 30px !important; min-width: 30px; height: 30px; margin: 0; }
.hrr_container .hrr_confirm .cm_confirm_text { flex: 1; min-width: 0; }
/* the request drawer shares the block request's roster / deadline / notification pieces (bs_rq_*, block_schedule.css); its Send spans the foot */
.hr_foot .bs_confirm .bs_confirm_box { flex: 0 0 30px; width: 30px; height: 30px; }
.hr_foot .btn.bs_send { flex: 1 1 100%; }