/* Holdings main stylesheet - follows the Tracker Astyle.css approach */
body { margin:0px; color: #333333; font-family: 'Titillium Web', sans-serif; font-size:16px; }
h1 { margin:15px; color:#31498f; font-weight:bold; font-size:34px; font-family: 'Staatliches'; text-wrap:balance; overflow-wrap:break-word;}
h2 { font-family: 'Staatliches'; color:#444; text-wrap:balance;}
a { text-decoration:none; font-weight:bold; color:#31498f; }
.headline2 {color:#000066; font-style:italic; font-weight: bold; font-size:24px; line-height:140%; margin:20px 0px 20px 0px; display:inline-block; vertical-align:top;}

.main_container { max-width:1200px; margin-left: auto; margin-right: auto; padding:0px 24px; color:#444; }

.button, .form_button, .form_submit { width:150px; margin:8px auto; padding:9px; background-color:#31498f; color:#FFFFFF; font-weight:normal;
	border-radius:5px; box-shadow: 0 0 5px black; text-align:center; cursor:pointer; }
.button:hover, .form_button:hover {background-color:#7ea1e8; color:#111;}
.form_button { width: auto; min-width:60px; padding: 2px 8px;  margin: 5px 2px; display: inline-block; font-size: 14px; line-height: 140%; }
.form_submit { width: 150px; padding: 9px; margin: 8px auto; display:block; font-size: 18px;}
.inline { display:inline-block; }
.dropdown { border: 0px; background: inherit; cursor:pointer; }
.all_form { cursor:pointer; border: 1px solid #ccc; padding:4px; border-radius: 6px; background:white;}
.warning { background-color: #ff9d9d; border-radius: 15px; }

.box , .form_box { min-width: 300px; background:#efefef; color: #555; box-shadow:0 0 5px black; border-radius:15px; padding:10px; margin: 10px auto; border: none; }
.form_box { font-size: 15px; font-weight: bold; line-height:30px; }
.main_task_box {background:#EAEAEA; max-width:760px; margin:5px auto; border:none; font-weight:normal; padding:10px; box-shadow:0 0 5px #999; border-radius:15px;}

.line_question { width:145px; margin:0px 10px; display:inline-block; text-align:right; vertical-align:top; font-size:1em;}
.line_answer { width:330px; display:inline-block; vertical-align:top; font-size:1em; color:#31498f;}
.line_input { width:145px; margin:0px 10px; display:inline-block; text-align:right; vertical-align:top;}

.edit_block { margin:0px 5px; padding:0px 7px; background:#e8e8e8; color:#001CAD; vertical-align:top; border-radius:5px; box-shadow: 0 0 2px black; font-size:0.75em; font-weight:normal; float:right; cursor:pointer;}
.edit_block:hover { background-color:#959595; color:#900; }
.checkout_block { width:150px; font-weight:normal; margin:8px auto; padding:9px; background-color:#1e7145; color:#FFFFFF; border-radius:5px; box-shadow: 0 0 5px black; text-align:center; cursor:pointer;}
.checkout_block:hover { background-color:#33a86a; }
/* s_link() buttons and display_box() boxes (F12, OTC studentInfo) */
.checkout_block.inline_block { display:inline-block; width:auto; min-width:120px; margin:4px; text-decoration:none; vertical-align:top; }
.item_box_members { display:inline-block; width:100%; max-width:630px; box-sizing:border-box; margin:14px 0; padding:0; border:1px solid #333; background:#FAFAFA; color:#666; box-shadow:1px 1px 5px black; position:relative; vertical-align:top; text-align:left; }
.topHeadline { background:linear-gradient(#f1f1f1,#dadada); cursor:pointer; border-bottom:1px solid #333; color:#606D96; margin:0px; padding:5px 10px 5px 20px; font-size:1.0em; }
.topHeadline2 { background:linear-gradient(#03F,#09F); color:#FFF; font-size:1.2em; }
@media (max-width:600px) { .item_box_members .line_question { width:105px; margin:0px 6px; } .item_box_members .line_answer { width:calc(100% - 122px); max-width:100%; }
	.item_box_members .edit_block[id$='_edit'] { float:none; display:table; margin:0px 8px 4px auto; } } /* display_box()'s Edit / Open button on its own line, so the first Q/A line keeps its width */
/* phones: a smaller page title that wraps into even lines ("3 Bed 2 Bath House for Rent"), Q/A lines that keep the answer beside its
   question instead of dropping it under, and quick_form questions (200px, right-aligned) stacked left over their answers */
@media (max-width:600px) {
	h1 { font-size:28px; margin:10px 4px; line-height:1.15; }
	.line_question { width:96px; margin:0px 8px 0px 0px; }
	.line_answer { width:calc(100% - 122px); } /* room for a question up to 112px (the portal terms use 105px) */
	form div[style*='width: 200px'][style*='text-align:right']:not([style*='display:block']):not([style*='display: block']) { width:auto !important; display:block !important; text-align:left !important; margin:6px 0 2px 0 !important; }
}
/* the smallest phones (320 px): .box / .form_box's 300 px floor + padding was wider than the screen (the search forms of houses, clients,
   leads, invoices, payments, rents, leases... scrolled 10 px sideways); `body` outranks quick_form's own copy of the rule */
@media (max-width:359px) { body .form_box, body .box { min-width:0; box-sizing:border-box; } }
/* quick_form's radio / checkbox boxes are a fixed 300 px (inline style): with a classic scrollbar (a desktop browser at 320 px) the page
   has 305 px and they scrolled 15 px sideways; they may shrink to their column on phones (FU3, wave3 #64) */
@media (max-width:600px) { .qf_opts { max-width:100%; box-sizing:border-box; } }

/* public listing cards */
.prop_box { display:inline-block; margin:12px; width:300px; min-height:340px; border:0px; padding:0px; background:#f5f5f5; border-radius:15px; color:#555; text-align:center; vertical-align:top; position:relative; overflow:hidden; box-shadow:0 0 6px #aaa; cursor:pointer;}
.prop_box:hover { box-shadow:0 0 10px #31498f; }
.prop_img { width:100%; height:200px; object-fit:cover; background:#ccc; }
.prop_price { font-size:1.4em; color:#1e7145; font-weight:bold; }
.prop_tag { position:absolute; top:10px; left:10px; background:#1e7145; color:white; padding:2px 10px; border-radius:10px; font-size:0.85em; font-weight:bold;}

/* slider on the property page */
.slider_box { position:relative; width:100%; max-width:900px; height:55vh; min-height:300px; margin:0px auto; border-radius:15px; overflow:hidden; background:#222;}
.slide_img { width:100%; height:100%; object-fit:cover; display:none; }
.slide_arrow { position:absolute; top:45%; font-size:2.5em; color:white; background:rgba(0,0,0,0.4); border-radius:8px; padding:0px 12px; cursor:pointer; user-select:none; z-index:5;}
.slide_arrow:hover { background:rgba(0,0,0,0.7); }

@media print	{    .no-print, .no-print * , .checkout_block, .main_menu  {        display: none !important;    } }

/* Radio buttons and checkboxes as buttons (the owner, 10-27; h/js/choice_buttons.js adds the classes): quick_form's look, white with
   blue text, filled blue when picked. The input stays inside the label, out of sight but focusable. Opt out: class hnative. */
label.hchoice { display:inline-flex !important; align-items:center; justify-content:center; position:relative; width:auto !important; min-width:44px; box-sizing:border-box;
	margin:3px 4px 3px 0; padding:4px 12px; border:1px solid #31498f; border-radius:5px; background:#fff; color:#31498f; font-weight:bold; font-size:14px; line-height:1.35;
	cursor:pointer; user-select:none; box-shadow:0 0 3px rgba(0,0,0,.35); vertical-align:middle; text-align:center; white-space:normal; }
label.hchoice:hover { background:#e8eefb; }
label.hchoice:has(input:checked), label.hchoice.hon { background:#31498f; color:#fff; }
label.hchoice:has(input:checked) *, label.hchoice.hon * { color:inherit !important; }
label.hchoice:has(input:disabled) { opacity:.5; cursor:not-allowed; }
label.hchoice:focus-within { outline:2px solid #2dbac9; outline-offset:1px; }
input.hchoice_in { position:absolute !important; opacity:0 !important; width:1px !important; height:1px !important; margin:0 !important; padding:0 !important; pointer-events:none; }
label.hchoice:has(input[type=checkbox]:checked)::before { content:'\2713'; margin-right:5px; font-weight:bold; }
.hchoice_hint { margin-left:2px; vertical-align:middle; }
label.hchoice.hchoice_line { display:flex !important; width:fit-content !important; max-width:100%; }

/* result rows: tab_block()'s fixed-width cells (OTC's look) line up on a wide screen; a long word wraps inside its cell; a phone drops the widths */
.tb { vertical-align:top; box-sizing:border-box; overflow-wrap:anywhere; }
@media (max-width:600px) { .tb { width:auto !important; max-width:100%; } }
/* quick_form's radio / checkbox rows on a computer: the room next to the 200 px question (up to 640 px), not a fixed 300 px, so a row
   holds more buttons and the form isn't mostly empty space (the owner, 10-27); phones keep the rules above */
@media (min-width:601px) { .form_box .qf_opts, form .qf_opts { width:calc(100% - 226px) !important; max-width:640px; min-width:300px; vertical-align:top; } }

/* searchable pickers (h/js/combo.js; the owner, 10-27): a text box with ▾; a click shows the whole list, typing narrows it */
.hcombo_wrap { position:relative; display:inline-block; width:min(340px,100%); max-width:100%; vertical-align:middle; text-align:left; }
.hcombo_wrap .hcombo_q { width:100%; box-sizing:border-box; padding:4px 26px 4px 8px; font-size:15px; border:1px solid #aab; border-radius:6px; background:#fff; cursor:pointer; }
.hcombo_wrap .hcombo_q:focus { cursor:text; outline:2px solid #2dbac9; outline-offset:0; }
.hcombo_tog { position:absolute; right:8px; top:50%; transform:translateY(-50%); color:#31498f; cursor:pointer; font-size:14px; user-select:none; }
.hcombo_list { display:none; position:absolute; left:0; right:0; top:100%; z-index:60; max-height:280px; overflow-y:auto; background:#fff; border:1px solid #aab;
	border-radius:0 0 6px 6px; box-shadow:0 4px 10px rgba(0,0,0,.25); font-weight:normal; line-height:1.35; }
.hcombo_wrap.open .hcombo_list { display:block; }
.hcombo_item { padding:5px 8px; cursor:pointer; border-bottom:1px solid #eef; color:#333; } .hcombo_item:hover, .hcombo_item.hi { background:#e3e8f5; }
.hcombo_item.on { font-weight:bold; color:#31498f; } .hcombo_none { padding:5px 8px; color:#888; }
select.hcombo_hidden { position:absolute !important; opacity:0 !important; width:1px !important; height:1px !important; pointer-events:none; left:0; bottom:0; }
/* quick_form's buttons on one line each (the owner, 10-27): as wide as their words (75 px at least), never wrapped */
.qf_opts .form_button { width:auto !important; min-width:75px; white-space:nowrap; padding:1px 10px; box-sizing:border-box; }
/* quick_form's Submit: the size of the form's other buttons, not a big 150 px block (the owner, 10-27) */
form button.form_submit[id^='final_button'] { display:block; width:auto; min-width:110px; margin:8px auto 4px auto; padding:4px 22px; font-size:15px; line-height:1.4; }
/* quick_form's file picker: the paper clip is a small icon everywhere (its own CSS isn't on every page: the house editor showed it full size) */
img.attach_comp { width:28px !important; height:auto; margin-top:5px; cursor:pointer; vertical-align:middle; }
/* a picture in the popup (h/js/img_overlay.js): fitted to the screen, < > beside it when there are more */
.io_wrap { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:22px; }
.io_img { max-width:min(900px, 82vw); max-height:68vh; border-radius:8px; box-shadow:0 0 6px rgba(0,0,0,.4); object-fit:contain; }
.io_nav { font-size:42px; line-height:1; color:#31498f; cursor:pointer; user-select:none; padding:0 6px; } .io_nav:hover { color:#2dbac9; }
.io_cap { text-align:center; color:#555; margin:6px 0 0 0; } .io_open { text-align:center; font-size:0.9em; margin:4px 0 0 0; color:#777; }

/* search forms (quick_form qf_search, the owner 10-30): the same space between filters, each name level with the top of its buttons,
   button choices in equal columns on a shaded box */
form.qf_search [id^=line_item_] { display:flex; align-items:flex-start; margin:0 0 14px 0; }
form.qf_search [id^=line_item_] > div:first-child { flex:0 0 auto; line-height:1.2; padding-top:0; margin-top:0 !important; }
form.qf_search [id^=line_item_]:has(.qf_opts) > div:first-child { padding-top:8px; }
form.qf_search .qf_opts { display:inline-grid !important; grid-template-columns:repeat(3,110px); gap:7px 5px; width:auto !important; min-width:0 !important; vertical-align:top; background:#d3dcef !important; border:1px solid #b4c1df; padding:7px !important; border-radius:10px !important; }
form.qf_search .qf_opts .form_button { width:auto !important; min-width:0; margin:0 !important; box-sizing:border-box; text-align:center; white-space:normal; }
@media (max-width:600px) { form.qf_search [id^=line_item_] { display:block; } form.qf_search .qf_opts { grid-template-columns:repeat(2,110px); } }

/* the top of every list page (list_head(), h/functionsForms.php; the owner 11-10: like Maintenance): one row with New <thing> and Search;
   each slides its box open under the row. The Search box is ONE grey panel: the presets (chips with counts), the search form (its own
   box look dropped), the page's tools, links to the pages that belong to the list */
.lh_top { text-align:center; margin:4px 0; }
.lh_top .form_button { display:inline-block; width:auto; min-width:60px; padding:4px 14px; margin:5px 2px; font-size:14px; line-height:140%; }
.lh_top .form_button.lh_new { background:#1e7145; } .lh_top .form_button.lh_new:hover { background:#3fa56f; color:#111; }
.lh_box { margin-left:auto; margin-right:auto; box-sizing:border-box; }
.lh_search { margin:10px auto; padding:10px; background:#efefef; color:#555; box-shadow:0 0 5px black; border-radius:15px; text-align:left; }
.lh_search form.form_box, .lh_search form.box { background:none; box-shadow:none; border-radius:0; padding:0; margin:0 auto; min-width:0; max-width:none; }
.main_task_box.st_archived { background:#cfcfcf !important; opacity:0.75; } /* a row archived from its status badge's box (11-12) */
/* the presets (the owner, 11-12): a line of the form, "Show" + a shaded box of buttons like quick_form's Status buttons, not pills on top */
.lh_show { display:flex; align-items:flex-start; justify-content:center; gap:10px; margin:0 0 14px 0; }
.lh_show_q { flex:0 0 auto; min-width:60px; text-align:right; font-weight:bold; padding-top:9px; line-height:1.2; }
.lh_chips { display:flex; flex-wrap:wrap; gap:7px 5px; max-width:640px; background:#d3dcef; border:1px solid #b4c1df; padding:7px; border-radius:10px; line-height:1.3; }
.lh_chips br { display:block; flex-basis:100%; height:0; content:''; }
.lh_chips a { flex:1 0 110px; box-sizing:border-box; text-align:center; padding:2px 10px; border-radius:7px; border:1px solid #8793b8; background:#fff; color:#31498f; font-size:15px; font-weight:normal; text-decoration:none; box-shadow:0 1px 2px rgba(0,0,0,0.25); }
.lh_chips a:hover { background:#eef1fa; }
.lh_chips a.on { background:#31498f; color:#fff; } .lh_chips a.red { background:#b00; color:#fff; border-color:#800; } /* red: work waits there */
form.lh_filter { text-align:left; max-width:560px; margin:0 auto; } form.lh_filter .lh_fq { width:110px; text-align:right; font-weight:bold; padding-top:6px; margin-right:10px; }
@media (max-width:600px) { .lh_show { display:block; } .lh_show_q { text-align:left; padding:0 0 4px 0; } .lh_chips a { flex-basis:120px; } form.lh_filter .lh_fq { width:auto; text-align:left; padding:0 0 3px 0; } }
.lh_top a.form_button.lh_link { text-decoration:none; } /* 11-12: the related pages' links are buttons in the top row */
.lh_tools, .lh_links { margin:10px 0 0 0; padding-top:8px; border-top:1px solid #cfcfcf; text-align:center; font-size:15px; font-weight:normal; line-height:1.5; }
.lh_search > .lh_tools:first-child, .lh_search > .lh_links:first-child { margin-top:0; padding-top:0; border-top:0; }
.lh_links a { display:inline-block; margin:0 7px; }
.lh_showing { text-align:center; color:#555; margin:4px 0; } .lh_showing a { font-weight:bold; }
@media (max-width:600px) { .lh_search { padding:8px; } }

/* the fold-open box (fold_box() / fold_start(), h/functionsForms.php; h/js/fold.js; the owner 11-11): the Leads row's arrow button on
   the left, a title, an optional grey summary; the body slides open. .fold_box = a framed section of a page (the house editor's
   column: all the same width); without it a light line inside another box. Never a browser <details> triangle. */
.fold { text-align:left; box-sizing:border-box; margin:6px 0; max-width:100%; }
.fold_head { display:flex; align-items:center; gap:8px; cursor:pointer; padding:2px 0; outline-offset:2px; }
.fold_arrow { flex:0 0 auto; display:inline-block; width:30px; box-sizing:border-box; text-align:center; cursor:pointer; color:#31498f; background:white;
	border:1px solid #31498f; border-radius:6px; font-style:normal; font-weight:normal; line-height:1.35; user-select:none; }
.fold_head:hover > .fold_arrow, .fold_open > .fold_head > .fold_arrow { background:#31498f; color:white; }
.fold_text { flex:1 1 0; min-width:0; overflow-wrap:anywhere; }
.fold_title { color:#31498f; } .fold_title h2, .fold_title h3, .fold_title h4 { display:inline; margin:0; }
.fold_sum { color:#666; font-size:0.86em; font-weight:normal; }
.fold_red > .fold_head .fold_title { color:#b00; } .fold_grey > .fold_head .fold_title { color:#666; }
.fold_body { padding:6px 0 2px 0; }
.fold:not(.fold_box) > .fold_head > .fold_arrow { width:24px; font-size:0.85em; }
.fold_box { max-width:640px; margin:12px auto; padding:8px 12px; border-radius:10px; background:white; box-shadow:0 0 5px #bbb; line-height:1.45; }
.fold_box > .fold_head .fold_title { font-weight:bold; font-size:1.17em; color:#9E3434; }
.fold_box > .fold_body { padding-top:8px; }
/* a form, a documents box or a notice card inside a framed fold box drops its own frame and heading (one box, not two) */
.fold_box > .fold_body form.form_box, .fold_box > .fold_body form.box { background:none; box-shadow:none; border-radius:0; padding:0; margin:0 auto; min-width:0; max-width:none; }
.fold_box > .fold_body > .doc_box { margin:0; max-width:none; } .fold_box > .fold_body > .doc_box > h3 { display:none; }
.fold_box > .fold_body > .nt_card { background:none; box-shadow:none; padding:0; margin:0 !important; max-width:none !important; } .fold_box > .fold_body > .nt_card > .nt_head { display:none; }
.fold_box > .fold_body .main_task_box { max-width:100%; box-sizing:border-box; }
@media (max-width:600px) { .fold_box { padding:8px; } }
@media print { .fold_body { display:block !important; } .fold_arrow { display:none !important; } }

/* the status badges and their box (h/status_class.php prints the same once per response): here too, so a badge redrawn by a reply that
   replaced the block holding those styles (an appointment box after a status change, 10-30) keeps its look */
.st_badge { display:inline-block; min-width:22px; padding:0 3px; margin-right:3px; box-sizing:border-box; font-size:0.8em; line-height:18px; font-weight:bold;
	color:white; text-align:center; border-radius:6px; border:1px solid black; vertical-align:middle; white-space:nowrap; cursor:default; }
.st_badge.st_click { cursor:pointer; }
.st_badge.st_click:hover { box-shadow:0 0 4px black; }
.st_box { text-align:center; max-width:560px; margin:0 auto; }
.st_choice, .st_rep { display:inline-block; margin:4px; padding:6px 10px; color:white; border-radius:6px; cursor:pointer; box-shadow:0 0 4px #333; min-width:90px; }
.st_choice:hover, .st_rep:hover { filter:brightness(1.15); }
.st_choice.st_cur { cursor:default; outline:3px solid #111; outline-offset:1px; font-weight:bold; } .st_choice.st_cur:hover { filter:none; }
.st_choice.st_off { cursor:not-allowed; opacity:0.35; box-shadow:none; } .st_choice.st_off:hover { filter:none; }
.st_notes_in { width:min(100%,420px); box-sizing:border-box; font-size:1em; padding:4px; margin:6px 0; }
.st_old_notes { text-align:left; max-height:200px; overflow:auto; font-size:0.85em; background:#f4f4f4; border-radius:8px; padding:6px; margin-top:6px; white-space:normal; }
.st_lab { font-weight:bold; color:#333; margin-top:8px; } .st_why { color:#555; font-size:0.92em; background:#f3f5fa; border-radius:8px; padding:6px 10px; margin:8px auto; max-width:460px; }
.st_go { font-weight:bold; white-space:nowrap; } .st_msg { margin:4px 0; }
.st_type { display:inline-block; margin:3px; padding:4px 10px; border:1px solid #31498f; color:#31498f; background:#fff; border-radius:6px; cursor:pointer; font-weight:bold; }
.st_type.st_type_on { background:#31498f; color:#fff; cursor:default; } .st_note_save { width:auto; padding:3px 14px; }