/*!
 * Crown Superior form helpers - crownsuperior.com
 */

.cf-ac {
	position: absolute;
	z-index: 100000;
	max-height: 320px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #c9ced6;
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(16, 24, 40, .18);
	font-size: 14px;
	line-height: 1.35;
}

.cf-ac-item {
	padding: 8px 12px;
	cursor: pointer;
	border-bottom: 1px solid #eef0f4;
}

.cf-ac-item:last-child {
	border-bottom: 0;
}

.cf-ac-item:hover,
.cf-ac-item.is-active {
	background: #eef4ff;
}

.cf-ac-title {
	display: block;
	font-weight: 600;
	color: #16233a;
}

.cf-ac-note {
	display: block;
	margin-top: 2px;
	color: #5d6b82;
	font-size: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cf-note {
	margin-top: 6px;
	padding: 6px 10px;
	background: #eaf6ec;
	border: 1px solid #b7dcbd;
	border-radius: 5px;
	color: #1f4d2a;
	font-size: 13px;
}

.cf-undo {
	margin-left: 8px;
	padding: 1px 8px;
	background: #fff;
	border: 1px solid #7fae89;
	border-radius: 4px;
	color: #1f4d2a;
	font-size: 12px;
	cursor: pointer;
}

.cf-problems {
	margin: 14px 0;
	padding: 12px 16px;
	background: #fdecec;
	border: 1px solid #e6a5a5;
	border-left: 4px solid #c0392b;
	border-radius: 5px;
	color: #7d1f16;
	font-size: 14px;
}

.cf-problems ul {
	margin: 8px 0 0;
	padding-left: 20px;
}

.cf-problems li {
	margin-bottom: 5px;
}

/* ---------- site search (employees) ---------- */

.cf-search {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99998;
	background: #16233a;
	box-shadow: 0 1px 6px rgba(16, 24, 40, .25);
	font-size: 14px;
}

body.cf-has-search {
	padding-top: 44px !important;
}

.cf-search-form {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 6px 14px;
}

.cf-search-icon {
	color: #f5c451;
	font-size: 16px;
	line-height: 1;
	transform: rotate(-45deg);
}

.cf-search-input {
	flex: 1;
	min-width: 0;
	height: 30px;
	padding: 0 10px;
	background: #fff;
	border: 1px solid #33415c;
	border-radius: 5px;
	color: #16233a;
	font-size: 14px;
}

.cf-search-input:focus {
	outline: 2px solid #f5c451;
	outline-offset: 0;
}

.cf-search-close {
	background: none;
	border: 0;
	color: #b9c4d6;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 0 4px;
}

.cf-search-panel {
	max-width: 1180px;
	max-height: 70vh;
	overflow-y: auto;
	margin: 0 auto;
	padding: 4px 14px 14px;
	background: #fff;
	border-top: 1px solid #e3e7ee;
	color: #16233a;
}

.cf-search-head {
	padding: 10px 2px;
	color: #5d6b82;
	font-size: 13px;
}

.cf-search-group {
	margin-bottom: 14px;
	border: 1px solid #e3e7ee;
	border-radius: 6px;
	overflow: hidden;
}

/* The heading names the page the records live on, so it has to read as a
   section header and not as another row. A dark bar separates it from the
   white rows below at a glance. */
.cf-search-group-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 11px 12px;
	background: #16233a;
	border-bottom: 1px solid #16233a;
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.25;
}

.cf-search-group-head a {
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.cf-search-group-head a:hover {
	text-decoration: underline;
}

.cf-search-count {
	flex: none;
	background: #fff;
	color: #16233a;
	border-radius: 10px;
	padding: 1px 9px;
	font-size: 12px;
	font-weight: 700;
}

.cf-search-group-alt {
	padding: 6px 12px;
	background: #fbfcfe;
	border-bottom: 1px solid #eef0f4;
	color: #7b8798;
	font-size: 12px;
}

.cf-search-group-alt a {
	color: #2c5cc5;
	text-decoration: none;
}

.cf-search-group-alt a:hover {
	text-decoration: underline;
}

.cf-search-hit {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	padding: 8px 12px;
	border-bottom: 1px solid #eef0f4;
	color: #16233a;
	text-decoration: none;
}

.cf-search-hit-row {
	display: flex;
	align-items: stretch;
	border-bottom: 1px solid #eef0f4;
}

.cf-search-hit-row:last-child {
	border-bottom: 0;
}

.cf-search-hit-row .cf-search-hit {
	flex: 1 1 auto;
	border-bottom: 0;
	min-width: 0;
}

.cf-search-hit-edit {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	padding: 0 12px;
	color: #2c5cc5;
	font-size: 12px;
	text-decoration: none;
	border-left: 1px solid #eef0f4;
}

.cf-search-hit-edit:hover {
	background: #eef4ff;
	text-decoration: underline;
}

.cf-search-hit:last-child {
	border-bottom: 0;
}

.cf-search-hit:hover {
	background: #eef4ff;
}

.cf-search-hit-name {
	font-weight: 600;
}

.cf-search-hit-meta {
	color: #5d6b82;
	font-size: 12px;
	white-space: nowrap;
}

.cf-search-more {
	display: block;
	padding: 8px 12px;
	background: #fafbfd;
	color: #2c5cc5;
	font-size: 13px;
	text-decoration: none;
}

.cf-search-empty {
	padding: 16px 2px;
	color: #5d6b82;
}

@media (max-width: 640px) {
	.cf-search-hit {
		display: block;
	}

	.cf-search-hit-meta {
		display: block;
		margin-top: 2px;
		white-space: normal;
	}
}

/* ---------- change log panel ---------- */

.cf-log {
	max-width: 1180px;
	margin: 18px auto;
	border: 1px solid #e3e7ee;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
}

.cf-log-head {
	padding: 9px 14px;
	background: #f3f6fb;
	border-bottom: 1px solid #e3e7ee;
	color: #16233a;
	font-weight: 600;
	font-size: 14px;
}

.cf-log-body {
	margin: 0;
	padding: 12px 14px;
	max-height: 340px;
	overflow: auto;
	background: #fff;
	color: #16233a;
	font: 12px/1.6 ui-monospace, Menlo, Consolas, monospace;
	white-space: pre-wrap;
	word-break: break-word;
}

.cf-log-empty {
	padding: 12px 14px;
	color: #5d6b82;
	font-size: 13px;
}

/* --- click-to-copy policy numbers -------------------------------------- */

.cf-copy-cell {
	position: relative;
	cursor: pointer;
	border-bottom: 1px dotted #9aa7bd;
}

.cf-copy-cell:hover {
	background: #eef4ff;
}

.cf-copied {
	position: absolute;
	bottom: 100%;
	right: 0;
	z-index: 5;
	padding: 1px 7px;
	border-radius: 10px;
	background: #1f7a3d;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease-in-out;
}

.cf-copied.cf-copied-on {
	opacity: 1;
}

.cf-copy-cell.cf-copy-flash {
	background: #ddf3e2;
}

/* --- CRM rows in the site search --------------------------------------- */

.cf-search-hit-name {
	flex: 0 0 auto;
	max-width: 40%;
}

.cf-search-kind {
	display: inline-block;
	margin-right: 6px;
	padding: 1px 6px;
	border-radius: 9px;
	background: #e7edf9;
	color: #35507f;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	vertical-align: 1px;
}

.cf-search-hit-snip {
	flex: 1 1 auto;
	overflow: hidden;
	color: #5d6b82;
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.cf-search-hit-name {
		max-width: none;
	}

	.cf-search-hit-snip {
		display: block;
		margin-top: 2px;
		white-space: normal;
	}
}

/* ---------------------------------------------------------------------------
 * Printable policy documents, on screen.
 *
 * The proof-of-insurance / policy detail templates are laid out for paper. Their
 * footer blocks carry an inline position:fixed so the PDF engine repeats them at
 * the foot of every printed page. A browser reads that as "pin to the viewport",
 * so on a phone the signature blocks sit on top of the document and the page
 * runs about 60px wider than the screen with no way to scroll to it.
 *
 * This puts them back into the normal flow, on screen only. The PDF is built by
 * TCPDF straight from the template and never loads this stylesheet, so the
 * printed and downloaded documents are completely unaffected.
 *
 * Scoped to .cf-doc, which the plugin puts on <body> only for the RSForm detail
 * layout - it must not touch sticky headers or anything else on the site.
 * ------------------------------------------------------------------------- */
.cf-doc [style*="position: fixed"],
.cf-doc [style*="position:fixed"] {
	position: static !important;
	width: auto !important;
}

.cf-doc,
.cf-doc * {
	box-sizing: border-box;
}

.cf-doc table {
	max-width: 100% !important;
}

.cf-doc img {
	max-width: 100%;
	height: auto;
}

/* Long runs of underscores on the signature lines cannot wrap on their own and
   were what pushed the page sideways. Kept off table cells deliberately: there
   it also shrinks the intrinsic width, which broke short answers like "NO"
   across two lines. */
.cf-doc p,
.cf-doc span {
	overflow-wrap: anywhere;
}

.cf-doc td,
.cf-doc th {
	overflow-wrap: break-word;
}

/* Some of the document templates carry white-space:nowrap on the signature and
   date cells. On paper that keeps "Applicant's Signature: ______" on one line;
   in a 390px viewport it makes a 320px run of text sit in a 242px cell, and
   that single cell was what still pushed the page sideways after the fixed
   footers were dealt with. nowrap also defeats the wrapping rules above, so it
   has to come off explicitly. Screen only - the PDF is built by TCPDF from the
   raw template and never loads this file. */
.cf-doc [style*="nowrap"] {
	white-space: normal !important;
}

/* custom.css turns every RSForm table on a phone into a wide, side-scrolling
   data grid:

       @media screen and (max-width: 767.98px) {
         body.com_rsform #sp-component table {
           width: max-content !important; min-width: 1100px !important;
           max-width: none !important; table-layout: auto !important; }
         body.com_rsform #sp-component table th { white-space: nowrap !important; }
         ... th, td { min-width: 110px } ... td:last-child { white-space: nowrap !important }
       }

   That is right for the policy LIST, which is a grid of short columns. It is
   wrong for a policy DOCUMENT, whose last cell is a whole paragraph: forced to
   max-content and nowrap it opened the page to 11,000px, and the containers
   clip rather than scroll, so the text simply ran off the right-hand edge. It
   is the reason this only ever looked wrong on a phone.

   Undone only where a document is being read (.cf-doc), so the listings keep
   their side-scrolling behaviour untouched. The selectors are deliberately
   longer than the ones above so they win on specificity, not on load order. */
@media screen and (max-width: 767.98px) {
	html body.cf-doc #sp-component table {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		table-layout: auto !important;
	}

	html body.cf-doc #sp-component table th,
	html body.cf-doc #sp-component table td,
	html body.cf-doc #sp-component table th:last-child,
	html body.cf-doc #sp-component table td:last-child {
		min-width: 0 !important;
		white-space: normal !important;
	}
}

/* custom.css carries, for the policy LISTING tables, a rule that keeps the
   right-hand action column on one line:
       body.com_rsform #sp-component table th
       body.com_rsform #sp-component table th:last-child, ... td:last-child
   Those selectors also match the document tables, where the last cell is a
   whole paragraph - which is what was still holding the page open to 11,000px
   on a phone. It only needs undoing where a document is being read, so it is
   scoped to .cf-doc and leaves the listings exactly as they were. */
.cf-doc #sp-component table th,
.cf-doc #sp-component table td {
	white-space: normal !important;
}

/* ---------- start from an existing record (employees, blank forms) ---------- */

.cf-recall {
	margin: 0 0 18px;
	border: 1px solid #c7d3e6;
	border-left: 4px solid #0345bf;
	border-radius: 6px;
	background: #f6f9ff;
	font-size: 14px;
}

.cf-recall-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
}

.cf-recall-title {
	font-weight: 600;
	color: #16233a;
	margin-right: 4px;
}

.cf-recall-q {
	flex: 1 1 220px;
	min-width: 0;
	max-width: 100%;
	padding: 6px 10px;
	border: 1px solid #b8c4d8;
	border-radius: 4px;
	background: #fff;
	font-size: 14px;
	color: #16233a;
}

.cf-recall-go {
	padding: 6px 14px;
	border: 1px solid #0345bf;
	border-radius: 4px;
	background: #0345bf;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.cf-recall-hide {
	padding: 2px 9px;
	border: 1px solid #b8c4d8;
	border-radius: 4px;
	background: #fff;
	color: #5d6b82;
	font-size: 16px;
	line-height: 1.2;
	cursor: pointer;
}

.cf-recall-body:empty {
	display: none;
}

.cf-recall-body {
	padding: 0 12px 12px;
}

.cf-recall-h {
	margin: 6px 0 6px;
	padding: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #5d6b82;
}

.cf-recall-card {
	display: block;
	width: 100%;
	margin: 0 0 6px;
	padding: 8px 12px;
	border: 1px solid #c9d5e6;
	border-radius: 5px;
	background: #fff;
	text-align: left;
	cursor: pointer;
}

.cf-recall-card:hover,
.cf-recall-card:focus {
	border-color: #0345bf;
	background: #eef4ff;
}

.cf-recall-line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.cf-recall-name {
	font-weight: 600;
	color: #16233a;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cf-recall-date {
	flex: 0 0 auto;
	color: #5d6b82;
	font-size: 12px;
	white-space: nowrap;
}

.cf-recall-meta {
	display: block;
	margin-top: 2px;
	color: #5d6b82;
	font-size: 12px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cf-recall-empty {
	margin: 4px 0 0;
	color: #5d6b82;
	font-size: 13px;
}

.cf-recall-done {
	padding: 8px 10px;
	border: 1px solid #b7dcbd;
	border-radius: 5px;
	background: #eaf6ec;
	color: #1f4d2a;
	font-size: 13px;
}

@media (max-width: 575.98px) {
	.cf-recall-head {
		padding: 8px 10px;
	}

	.cf-recall-title {
		flex: 1 1 100%;
	}

	.cf-recall-body {
		padding: 0 10px 10px;
	}
}

/* Send proof: attach what is already on file */
.cf-attach{margin:10px 0 18px;padding:12px 14px;border:1px solid #d8dde7;border-left:4px solid #2c5cc5;background:#f6f9ff;border-radius:4px}
.cf-attach-title{margin:0 0 8px;font-weight:700;font-size:14px;color:#16233a}
.cf-attach-row{display:flex;align-items:flex-start;gap:9px;margin:5px 0;font-size:14px;cursor:pointer}
.cf-attach-row input{margin-top:3px}
.cf-attach-off{opacity:.55;cursor:default}
.cf-attach-note{font-style:normal;color:#8a93a4;font-size:12px}

/* Transaction Complete - a derived Yes/No beside BAL on the policy lists.
   Nothing is stored; the value is read off the BAL cell in the same row. */
.cf-tx{
    white-space: nowrap;
    font-weight: 700;
}

.cf-tx-yes{
    color: #1b5e20;
}

.cf-tx-no{
    color: #b3261e;
}

/* BAL was never filled in - neither Yes nor No would be true */
.cf-tx-none{
    color: #8a97a6;
    font-weight: 400;
}

/* Comm - worked out from the down payment / auto club amount on the row */
.cf-comm{
    white-space: nowrap;
}

.cf-comm-none{
    color: #8a97a6;
}

/* ------------------------------------------------------------------ *
 * Section headings on the policy change forms
 *
 * These are freeText fields. The heading markup lives in the field's own
 * text, not in the layout, so a form save in the RSForm admin regenerates
 * the block around it and the heading still comes out.
 * ------------------------------------------------------------------ */
.cf-section-title{
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #b8232f;
    margin: 30px 0 14px 0;
    padding-top: 12px;
    border-top: 5px solid #b8232f;
}

/* ------------------------------------------------------------------ *
 * The main questions on the policy change form
 *
 * Bold, so that when a question opens up a run of sub-questions the
 * next main one is still easy to find. The list is the fields that no
 * condition reveals - i.e. the ones always on screen - so if a new
 * top-level question is added it needs adding here too.
 * ------------------------------------------------------------------ */
.rsform-block-agency-code > .formControlLabel,
.rsform-block-policy-number > .formControlLabel,
.rsform-block-first-name > .formControlLabel,
.rsform-block-middle-name > .formControlLabel,
.rsform-block-last-name > .formControlLabel,
.rsform-block-email > .formControlLabel,
.rsform-block-phone-number > .formControlLabel,
.rsform-block-change-address > .formControlLabel,
.rsform-block-second-driver > .formControlLabel,
.rsform-block-update-driver-info > .formControlLabel,
.rsform-block-add-a-vehicle > .formControlLabel,
.rsform-block-remove-a-vehicle > .formControlLabel,
.rsform-block-change-coverages > .formControlLabel,
.rsform-block-select-nrde-plan > .formControlLabel,
.rsform-block-change-lienholder > .formControlLabel,
.rsform-block-add-lienholder > .formControlLabel,
.rsform-block-remove-lienholder > .formControlLabel,
.rsform-block-monthly-payment > .formControlLabel,
.rsform-block-notes > .formControlLabel,
.rsform-block-information-disclosure > .formControlLabel{
    font-weight: 800 !important;
    color: #1f2933;
}

/* JoomCRM documents list.

   A long filename pushed the table past the right edge of its card. The name
   sits inside a Bootstrap .dropdown-toggle, which carries white-space:nowrap,
   so that cell could never wrap and the table grew to whatever the longest
   filename needed. Letting just that one link wrap is enough - the other
   columns keep their own widths. The container is allowed to scroll as a last
   resort, for a table that still cannot fit. */
#com_joomcrm .joomcrm-ajax-pagination-content {
    overflow-x: auto;
}
#com_joomcrm table.com_joomcrm_table {
    width: 100% !important;
    max-width: 100%;
}
#com_joomcrm table.com_joomcrm_table td .dropdown > .dropdown-toggle {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* A section heading on the submissions edit screen, which otherwise lists
   every field in one unbroken run. */
.cf-dir-heading{
    margin: 26px 0 10px;
    padding: 0 0 6px;
    border-bottom: 2px solid #b3202b;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #1f2933;
}