/* Help is server-rendered next to its label, outside the disabled-field overlay. */
.XMLabel.xm-hint-label,
.xm-modern .XMFormRow:not(tr) > .XMLabel.xm-hint-label {
	display:inline;
	float:none;
	width:auto;
	max-width:100%;
	padding-bottom:0;
}
.XMLabel.xm-hint-label > .xm-label-indicators {position:static !important;}
.XMLabel.xm-hint-label > .xm-label-indicators img[src$="/clear.gif"] {display:none;}
button.xm-field-hint {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:24px;
	height:24px;
	min-width:24px;
	margin:-2px 0 4px 4px;
	padding:0;
	vertical-align:middle;
	border:0;
	border-radius:50%;
	background:transparent;
	color:var(--xmf-mute,#6b7280);
	font:normal 14px/1 sans-serif;
	text-shadow:none;
	box-shadow:none;
	cursor:help;
	touch-action:manipulation;
}
button.xm-field-hint:hover,
button.xm-field-hint[aria-describedby] {
	background:var(--xmf-accent-bg,#eef2ff);
	color:var(--xmf-accent,#2563eb);
}
button.xm-field-hint:focus-visible {
	outline:2px solid var(--xmf-accent,#2563eb);
	outline-offset:1px;
	background:var(--xmf-accent-bg,#eef2ff);
	color:var(--xmf-accent,#2563eb);
}
.XMLabel.xm-none + .xm-field-hint, button.xm-field-hint[hidden] {display:none !important;}
.xm-modern-req-marker[hidden] {display:none !important;}
.xm-field-hint-tooltip .tooltip-inner {
	max-width:min(320px,calc(100vw - 24px));
	padding:10px 12px;
	border-radius:9px;
	font-size:13px;
	line-height:1.5;
	text-align:left;
}
/* Preserve the classic label/field columns while keeping the help beside the label. */
@media (min-width:768px) {
	.XMLabel.xm-hint-label.xm-hint-side-label.col-sm-3 {display:inline-block; width:auto; max-width:calc(25% - 28px); padding-right:0;}
	.XMLabel.xm-hint-label.xm-hint-side-label.col-sm-4 {display:inline-block; width:auto; max-width:calc(33.33333333% - 28px); padding-right:0;}
	.XMLabel.xm-hint-label.xm-hint-side-label + .xm-field-hint {margin-top:5px;}
	.XMLabel.xm-hint-label.xm-hint-side-label ~ .XMFieldWrapper {float:right;}
}
/* xm-3 single-column sections, where the renderer right-aligns the label against its field (it appends
   text-align:right to the label's own style attribute; multi-column sections stay left-aligned, and there the rules
   above already keep the help beside the label). Shrink-wrapping a right-aligned label drops its text to the left of
   the column while every label without a hint stays against the field. Here the label keeps the same column box as its
   neighbours and the help button is lifted out of the flow into the gutter the column padding already leaves between
   the label and the input, so label text and required markers line up down the whole form. The row is the button's
   containing block. xm-4 stacks labels above their fields and never uses xm-hint-side-label, so it is excluded. */
/* Wrapped in @supports because the button's containing block is set with :has(); without it the button would be
   positioned against a far-away ancestor, so a browser that lacks :has() keeps the previous rendering instead. */
@supports selector(:has(*)) {
@media (min-width:768px) {
	body:not(.xm4) .XMFormRow:has(> .XMLabel.xm-hint-label.xm-hint-side-label[style*="text-align:right"]) {position:relative;}
	body:not(.xm4) .XMLabel.xm-hint-label.xm-hint-side-label[style*="text-align:right"] {display:block; float:left; max-width:100%; padding-right:15px;}
	body:not(.xm4) .XMLabel.xm-hint-label.xm-hint-side-label[style*="text-align:right"].col-sm-3 {width:25%;}
	body:not(.xm4) .XMLabel.xm-hint-label.xm-hint-side-label[style*="text-align:right"].col-sm-4 {width:33.33333333%;}
	/* Required marker back in the column's own indicator slot, where every other label puts it. */
	body:not(.xm4) .XMLabel.xm-hint-label.xm-hint-side-label[style*="text-align:right"] > .xm-label-indicators {position:absolute !important;}
	/* The button sits in the gutter between the marker and the input: a 21px target whose icon is right-aligned, so
	   the extra width reaches back over the marker's trailing space instead of over the field. */
	/* z-index because xm-3's stylesheet gives .XMFieldWrapper position:relative, and it follows the button in the row:
	   as a positioned sibling later in tree order it paints over the half of the button the icon sits in, which
	   swallowed the hover (the tooltip only opened from the button's left padding). */
	body:not(.xm4) .XMLabel.xm-hint-label.xm-hint-side-label[style*="text-align:right"] + .xm-field-hint {position:absolute; z-index:1; top:2px; justify-content:flex-end; width:21px; min-width:21px; height:16px; padding:0 1px 0 8px; margin:0; font-size:12px; border-radius:0; background:transparent;}
	body:not(.xm4) .XMLabel.xm-hint-label.xm-hint-side-label[style*="text-align:right"].col-sm-3 + .xm-field-hint {left:calc(25% - 7px);}
	body:not(.xm4) .XMLabel.xm-hint-label.xm-hint-side-label[style*="text-align:right"].col-sm-4 + .xm-field-hint {left:calc(33.33333333% - 7px);}
}
}
@media (max-width:767px) {
	button.xm-field-hint {width:28px; height:28px; min-width:28px; margin-top:0; font-size:15px;}
}

.cbWrapper {justify-content: space-between;display: -webkit-flex;display: flex; -webkit-flex-direction: column;flex-direction: column;}
.cbOptions { flex: 1 0 auto;flex-grow: 1; flex-shrink: 1;overflow:auto;}
.xmToolBar {
	flex-shrink: 0;
	border-radius: 3px;
	padding: 4px 5px;
	font-weight: normal;
	line-height: 12px;
	background-color: #eeeeee;
	border: 1px solid #ccc;	
}
/*.agency_programs_fullscreen {display:inline-block;width:120px;padding-left:20px;cursor:pointer;background:url(/lib/img/icon/icomoon/lite-gradient/expand.png) no-repeat;}
.fullScreen .agency_programs_fullscreen {background:url(/lib/img/icon/icomoon/lite-gradient/contract.png) no-repeat;}*/
.fullScreen {height:100% !important;padding:0;max-height:none !important;z-index:99;}

.chkRadOpt {display:block; padding:2px;border-bottom:1px solid #ddd;width:90%;}
.chkRadOptInline {display:inline-block; padding:2px;border-bottom:1px solid #ddd;margin-right:3px;}
.ui-sortable .sort-handle {
	display: none;
}
.ui-sortable-helper {background:#FFF8DC;}
.ui-sortable .ui-selected .sort-handle
{
	display: inline;
	padding: 0 0.5em;
	cursor: pointer;
}

label.ui-selecting { background: #FECA40; }
.clRadioCheck:checked + span {
	color:#336699;
	font-weight:bold;
	text-decoration:underline;
}

.optionalRendering {
	margin-bottom:5px;
}


.xmSiChk {
	--color-default: #dee5f2;
	--color-active: #0069ff;
	--rotate-default: 180deg;
	--rotate-active: 40deg;
	--border-size-checkmark: 2px;
	--border-size-box: 1px;
	--input-size: 20px;
	--guter: 15px;
}


.xmSiChk {
	cursor: pointer;
	position: relative;
	display: block;
	padding: 3px 15px;
	margin-bottom: -1px;
	background-color: #fff;
	border: 1px solid #ddd;
}

.xmSiChk > input[type="checkbox"],
.xmSiChk > input[type="radio"] {
	-webkit-clip-path: polygon(0 0);
			clip-path: polygon(0 0);
}

.xmSiChk .xmSiChk-label {
	vertical-align: text-top;
}

.xmSiChk .xmSiChk-label::before,
.xmSiChk .xmSiChk-label::after {
	transition: all 0.2s ease-in-out;
}

.xmSiChk .xmSiChk-label::before {
	content: '';
	display: block;
	width: var(--input-size);
	height: var(--input-size);
	border: var(--border-size-box) solid var(--color-default);
	position: absolute;
	top: 3px;
	left: 3px;
	-webkit-transform: rotate(0deg) scale(1);
			transform: rotate(0deg) scale(1);
}

.xmSiChk .xmSiChk-label:hover::before {
	border-color: var(--color-active);
}

.xmSiChk.xmSiChk-checkbox .xmSiChk-label::before {
	border-radius: var(--border-size-checkmark);
}

.xmSiChk.xmSiChk-checkbox .xmSiChk-label::after {
	content: '';
	display: block;
	width: 8px;
	height: 18px;
	border-width: 0 var(--border-size-checkmark) var(--border-size-checkmark) 0;
	border-style: solid;
	border-color: transparent var(--color-active) var(--color-active) transparent;
	position: absolute;
	top: 3px;
	left: 3px;
	-webkit-transform: rotate(var(--rotate-default)) scale(0);
			transform: rotate(var(--rotate-default)) scale(0);
}

.xmSiChk.xmSiChk-checkbox > input:checked + .xmSiChk-label::after {
	left: 8px;
	-webkit-transform: rotate(var(--rotate-active)) scale(1);
			transform: rotate(var(--rotate-active)) scale(1);
}

.xmSiChk.xmSiChk-checkbox > input:checked + .xmSiChk-label::before {
	-webkit-transform: rotate(var(--rotate-active)) scale(0);
			transform: rotate(var(--rotate-active)) scale(0);
}

.xmSiChk.xmSiChk-radio .xmSiChk-label::before,
.xmSiChk.xmSiChk-radio .xmSiChk-label::after {
	border-radius: 100%;
	top: 3px;
}

.xmSiChk.xmSiChk-radio .xmSiChk-label::after {
	content: '';
	display: block;
	position: absolute;
	width: 12px;
	height: 0;
	top: 100%;
	left: 4px;
}

.xmSiChk.xmSiChk-radio > input:checked + .xmSiChk-label::after {
	background-color: #fff;
	height: 12px;
	top: 7px;
	left: 7px;
}

.xmSiChk.xmSiChk-radio > input:checked + .xmSiChk-label::before {
	background-color: var(--color-active);
}

.xmSiChk.xmSiChk-switcher .xmSiChk-label {
	padding-left: 45px;
}

.xmSiChk.xmSiChk-switcher .xmSiChk-label::before {
	content: '';
	width: 36px;
	height: 20px;
	border-radius: 20px;
	top: 3px;
}

.xmSiChk.xmSiChk-switcher .xmSiChk-label::after {
	content: '';
	border-radius: 4px;
	width: 6px;
	height: 12px;
	background-color: var(--color-default);
	position: absolute;
	top: 3px;
	left: 7px;
}

.xmSiChk.xmSiChk-switcher > input:checked + .xmSiChk-label::before {
	background-color: var(--color-active);
	border-color: var(--color-active);
}

.xmSiChk.xmSiChk-switcher > input:checked + .xmSiChk-label::after {
	background-color: #fff;
	left: 24px;
}

.xmSiChk [data-onchecked="show"],
.xmSiChk > input:checked ~ [data-onchecked="hide"] {
	display: none;
}

.xmSiChk [data-onchecked="hide"],
.xmSiChk > input:checked ~ [data-onchecked="show"] {
	display: inline-block;
}

.xmSiChk > input:checked + .xmSiChk-label.line-across {
	text-decoration: line-through;
}

.xm-radio-button-group {
	display: flex;
	margin-bottom: 0;
	overflow: hidden;
	flex-flow:row wrap;
}

.xm-radio-button-group input {
	position: absolute !important;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	width: 1px;
	border: 0;
	overflow: hidden;
}

.xm-radio-button-group label {
	background-color: #ffffff;
	color: rgba(0, 0, 0, 0.6);
	line-height: 1;
	margin-bottom:0;
	/*
	text-align: center;
	*/
	padding: 8px 16px;
	margin-right: -1px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	transition: all 0.1s ease-in-out;
}

.xm-radio-button-group label:hover {
	cursor: pointer;
}

.xm-radio-button-group input:checked + label {
	background-color: var(--selected-bgcolor);
	color: var(--selected-color);
	box-shadow: none;
}

.xm-radio-button-group input:checked + label:not(:has(i))::before {
    content: '\f00c';
    font-family: 'FontAwesome';
    margin-right: 5px;
}

.xm-radio-button-group input:checked + label * {
	color:white !important;
}

.xm-radio-button-group label:first-of-type {
	border-radius: 4px 0 0 4px;
}

.xm-radio-button-group label:last-of-type {
	border-radius: 0 4px 4px 0;
}

.xm-radio-button-group-vertical {
	display: flex;
	margin-bottom: 0;
	overflow: hidden;
	flex-flow:column;
}

.xm-radio-button-group-vertical input {
	position: absolute !important;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	width: 1px;
	border: 0;
	overflow: hidden;
}

.xm-radio-button-group-vertical label {
	background-color: #ffffff;
	color: rgba(0, 0, 0, 0.6);
	line-height: 1;
	margin-bottom:0;
	text-align: left;
	padding: 8px 16px;
	margin-right: -1px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-bottom:0;
	transition: all 0.1s ease-in-out;
}

.xm-radio-button-group-vertical label:hover {
	cursor: pointer;
}

/* JH/Claude 7/13/26: match horizontal behavior — pick up theme colors instead of the hard-coded light blue. */
.xm-radio-button-group-vertical input:checked + label {
	background-color: var(--selected-bgcolor);
	color: var(--selected-color);
	box-shadow: none;
}

.xm-radio-button-group-vertical input + label:before {
    content: '\f111';
	color:#f6f6f6;
    font-family: 'FontAwesome';
    margin-right: 5px;
}

/* JH/Claude 7/13/26: checkmark color follows the selected text color so it stays readable on the themed background. */
.xm-radio-button-group-vertical input:checked + label:before {
    content: '\f00c';
	color: var(--selected-color);
    font-family: 'FontAwesome';
    margin-right: 5px;
}

/* JH/Claude 7/13/26: mirror of the horizontal rule at line 245 — force nested elements (emoji icons, spans, etc.)
   to the theme's selected color so they stay legible on the themed background. Using var() here rather than
   hard-coded white (as horizontal does) so it tracks whichever color the theme defines. */
.xm-radio-button-group-vertical input:checked + label * {
	color: var(--selected-color) !important;
}

.xm-radio-button-group-vertical label:first-of-type {
	border-radius: 4px 4px 0 0;
}

.xm-radio-button-group-vertical label:last-of-type {
	border-radius: 0 0 4px 4px;
	border-bottom:1px solid rgba(0, 0, 0, 0.2);
}

.mtrxFCol {
	position: sticky; left:0;z-index:9;background:white;
}
.XMFormRow.indent > td.mtrxFCol {
	padding-left:25px !important;
}
.cbCustomBox {
	display:none;
}

.cbCustomBox + label {
	display:block;
	position:absolute;
	width:100%; 
	height:100%;
	top:0;
	left:0;
	background-color:#efefef;
	cursor:pointer;
}

.cbCustomBox + label:hover ,
.cbCustomBox:checked + label {
	background-color:#007bff;
}

.cbCustomBox + label::after {
	content: '';
	position: relative;
	display: none;
	width: 18px;
	height: 30px;
	border: 3px solid #fff;
	border-top: none;
	border-left: none;
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.cbCustomBox:checked + label::after {
	display: inline-block;
	vertical-align:middle;
}