:root{
	--icon-font-family: "Font Awesome 5 Free";
	--box-shadow-subtle: 2px 2px 4px rgba(0,0,0,0.1);
	--box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
	--box-shadow-medium: 2px 2px 3px rgba(0,0,0,0.3);
	--box-shadow-subtle: 2px 2px 4px rgba(0,0,0,0.1);
	--box-shadow-focus: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);	/* bootstraps focus glow for a formcontrol */
	--border-color-formcontrol: #ced4da;	/* bootstraps border color */
	--border-radius-formcontrol: 0.25rem;
	--primary-color: #0188cb;
	--primary-text-color: white;	/*#444;*/
	--secondary-color: #80d4fe;

	--dropdown-active-color: var(--primary-color);
	--dropdown-hover-color: #d7ebfe;

	--tab-active-color: #d7ebfe;
	--tab-hover-color: #f0f8fe;

	--pill-active-color: #d0f3e1;
	--pill-active-text-color: #495057;
	--pill-hover-color: #e6fff2;

	--table-fixed-color: #d7ebfe;
	--table-fixed-hover-color: #c1e1ff;

	--icon-close: '\f00d';
	--icon-view: '\f06e';
}
html,body{
	height: 100%;
}
.stop-transitions,
.stop-transitions-children>*{
	transition: none !important;
}
.stop-animations,
.stop-animations-children>*{
	animation: none !important;
}

.navbar {
	padding: 0.25ch 0.5ch;
	background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
	color: var(--primary-text-color);
	display: flex;
	margin-top: 2px;
}
.narbar-full,
#divRoutineTitle{
	display: flex;
}
.navbar #divRoutineTitle{
	font-size: larger;
	font-weight: bold;
}
.navbar #divMegaMenu{
	border-color: #444;
	box-shadow: 5px 5px 2px 2px rgba(0,0,0,.25);
}
.navbar #divMegaMenu .dropdown-header{
	color: blue;
	font-weight: bold;
	font-size: 1.25rem;
}

/* override bootstrap styling */
.dropdown{
	user-select: none; /* stops text being accidently highlighted */
}
.dropdown-header{
	font-weight: bold;
	color: var(--primary-color);
	padding: .25rem .75rem;
}
.dropdown-item:focus, .dropdown-item:hover, .dropdown-item:active{
	background-color: var(--dropdown-hover-color);
}
.dropdown-item.active{
	background-color: var(--dropdown-active-color);
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:not(.active):hover,
.nav-tabs .nav-link:active{
	background-color: var(--tab-hover-color);
}
.nav-tabs .nav-link.active{
	background-color: var(--tab-active-color);
}

.nav-pills .nav-link:focus,
.nav-pills .nav-link:not(.active):hover,
.nav-pills .nav-link:active{
	background-color: var(--pill-hover-color);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
	color: var(--pill-active-text-color);
	background-color: var(--pill-active-color);
}

.clsSubmit{
	position: fixed;
	right: 0.5em;
	top: 0.5em;
}
/* want to show control IS focused when maybe not */
.focused{
	box-shadow: var(--box-shadow-focus) !important;
}
/*body[data-dev="Y"] .navbar{
	background-color: yellow;
}*/
#ancMenuIcon img{
	border-radius: 0.5rem;
}
#wrapper{
	display: flex;
	flex-direction: column;
	height: 100%;
}
#page-content-wrapper{
	flex-basis: 100%;
	flex-grow: 1;
	overflow-y:auto; /* can be overridden in specific routines to explicitly disable scrolling */
}
@media print{
	#page-content-wrapper{
		/* hide scrollbars on print */
		overflow-y: visible;
	}
}
/* global page loading to stop flashing of unstyled content */
#pageLoading{
    position: fixed;
		top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;	/* note: 999 doesn't cover navbar */
		background-color: white;
}
/* global 'clear' overlay to capture clicks (thereby avoid multiple clicks) until finished */
#pageStopClicks{
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 999999;
	cursor: wait;
}
#divRoutine {
	height: 100%;

	display: flex;
	flex-direction: column;
}

.scrolly-height-100 {
	overflow-y: auto;
	height: 100%;
}
@media print{
	.scrolly-height-100 {
		/* hide scrollbars on print */
		overflow-y: visible;
	}
}

/* any tabs/pills under the header need a margin */
.page-tabs{
	margin-top: .5rem;
}

.flex{
	display: flex;
	flex-direction: column;
}
.flex-stretch{
	flex: 1 1 100%;
	min-height: 1px;
}
.layout-flex:has(>.form-row){
  margin-left: 0;
  margin-right: 0;
  padding-left: 5px;
  padding-right: 5px;
}
/* spacing between columns (and only on immediate columns) : .col or .col-? */
.layout-flex>.form-row:not(.no-col-spacing)>.col:last-child,
.layout-flex>.form-row:not(.no-col-spacing)>[class*="col-"]:last-child{
	padding-left: 0;
	padding-right: 0;
}
.layout-flex>.form-row:not(.no-col-spacing)>.col:not(:last-child),
.layout-flex>.form-row:not(.no-col-spacing)>[class*="col-"]:not(:last-child){
	padding-left: 0;
	padding-right: 1ch;
}
.layout-flex,
.tab-container > .active,
.tab-content.layout-flex > .active{
  display: flex;
	flex-basis:100%;
	flex-direction:column;
	min-height:1px; /* prevent size of this flex-child exceeding parent (scroll fix)*/
}

.scroll-flex, /* note: be aware when using inputs within a .scroll-flex as the focus border won't bleed outside (.tab-pane has padding .2rem below to compensate) */
.tab-content.layout-flex .tab-pane.active{
	overflow-y:auto; /* allows this element to be scrollable inside layout flex */
}
.tab-pane {
	padding: 0.2rem 0;	/* only need a T+B padding on regular tabs */
	height: 100%;
}
/* allows focus glow to bleed out from buttons/input/selects, etc that sit inside tab-pane */
.tab-container > .tab-pane,
.tab-content.layout-flex .tab-pane{
	padding: 0.2rem;
}
.scroll-flex-forced{
	overflow-y:scroll;
}
#btnSubmit{
	z-index: 1;
}
input::placeholder{
	font-style: italic;
	color: #aaa;
}

.v-divider::before{
	content: "";
	border-left: 1px solid var(--border-color-formcontrol);
	width: 1ch;
}

/* **************** DROP SHADOWS ***************** */
.modal-content,
.dropdown-menu,
.select2-dropdown .select2-results,	/* dropdown list */
.btn:not(:focus,:disabled){	/* default stronger shadow for buttons */
	box-shadow: var(--box-shadow);
}
.input-group.focus-group:not([disabled]),	/* regular + custom_file */
.btn-group,
.filePickerContainer,
.form-control:not(:focus,:disabled,.focus,[disabled],[type="radio"]),
input.form-check-input:not(:focus,:disabled,.focused,[type="radio"]),
.select2:not(.select2-container--focus) .select2-selection{
	box-shadow: var(--box-shadow-subtle);
}
/* irregular shapes */
.tooltip,
.popover{
	filter: drop-shadow( var(--box-shadow) );
}
.btn-group:has(.btn[class*="btn-outline-"]),
.btn[class*="btn-outline-"]:not(:focus,:disabled,.active){ /* outlined buttons have softer shadow */
	box-shadow: 2px 2px 3px rgba(0,0,0,0.2);
}
/* .form-control:not(:disabled)[type="checkbox"], */
/*input.form-check-input:not(:disabled)[type="checkbox"]{*/	/* ignore focus for checkboxes, always show shadow! */
	/* box-shadow: var( --box-shadow-medium ); */
/* } */
.form-control:not(:disabled)[type="checkbox"],
.form-control:not(:disabled)[type="radio"],
input.form-check-input:not(:disabled)[type="checkbox"],
input.form-check-input:not(:disabled)[type="radio"]{
	filter: drop-shadow( var(--box-shadow-medium) );
}
/* stop shadow on individual controls when in an input-group / custom control */
.focus-group .form-control,
.input-group .btn:not(:disabled),
.input-group .form-control:not(:disabled),
.btn-group .btn,
.btn-group-vertical .btn,
.filePickerContainer .form-control,
.filePickerContainer .btn,
.input-group .select2{
	box-shadow: unset !important;
}

/* **************** CUSTOM TAB HANDLER ***************** */
.tab-container {
	overflow: hidden;
	width: 100%;
}
.tab-container .tab-pane .table-helper,
.tab-content .tab-pane .table-helper,
.table-helper .table-scroll-container{
	height: 100%;	/* ensure tables take up all parent height for scroll */
}

.table-helper > .table-container.layout-flex > .table-scroll-container.scroll-flex{
	flex-basis:100%; /* force scroll container to be at least as tall as its flexed parent (prevents row context div from causing scrollbar when minimal content is displayed in fixed-height table)*/
}

/* be sure to wrap label+control in a form-group to get the extra margin */
.spaced .form-group:not(:first-child),
.list-actions .form-group:not(:first-child){
	margin-left: 1ch;
}
/* any buttons that will have a shadow need some spacing when aligned right */
.list-actions .btn{
	margin-right: 4px;
}
.list-actions{
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	align-items: center;
}

/* stop jumping scrollbar by showing it regardless */
body.clsForceScrollbar:not(.modal-open) {
	overflow-y: scroll;
}

/* nprogress ~ overridden so the `loading bar` will appear over modal dialogs */
#nprogress .bar {
  background: #E46527;
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
}
#nprogress .spinner {
	display: block;
	position: fixed;
	z-index: 99999;
	top: 15px;
	right: 15px;
}
#nprogress .spinner-icon {
	border-top-color: #E46527;
	border-left-color: #E46527;
}
.busy-cover{
	position: absolute;	top: 0; left: 0; bottom: 0; right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 64px;
	background-color: white;
	z-index: 1;
}

/* use to move an unlabeled checkbox/radio button down */

/*.layout-row label.empty,*/
.form-row label.empty,
.row label.empty{
	display: block;
}
/* this will ensure a dummy label will take up same space as text */
/* .layout-row label.empty::before, */
.form-row label.empty::before,
.row label.empty::before{
	content: "\a0";
}

/* this will ensure a following check/radio + label are vertically centered to a line with label+input below */
label.empty:empty+.form-check{
	margin-top: 0.25rem;
	margin-bottom: 0;
}
label.empty:empty+.form-check>.form-check-label{
	vertical-align: middle;
	padding-left: .25rem;	/* spacing between checkbox and label */
	margin-bottom: 0;
}

/* space out all rows */
/* .layout-row+.layout-row:not(.no-row-spacing), */
.form-row+.form-row:not(.no-row-spacing){
	margin-top: .375rem;
}
.hidden, .filtered{
	display: none;
}

/*form textarea.form-control,*/
.modal-content textarea {
	resize: none;
}

@media screen{
	.visible-only-for-print{
		display:none;
	}
}

.textarea{
	overflow-y: auto;
	white-space: pre-wrap;
}
/* use --rows: n to set "height" and --min-rows/--max-rows: to set "min" or "max" -height" */
.textarea.form-control,
textarea.form-control {
	--row-height: 1.5em;
	--row-extra: calc( .75rem + 2px );
	--rows: 5;
	--min-rows: 2;
	--max-rows: 10;
}
.textarea.form-control:not(.layout-flex,.flex-fill),
textarea.form-control:not(.layout-flex,.flex-fill){
	height: calc( var(--row-extra) + calc( var(--row-height) * var(--rows) ) );
	min-height: calc( var(--row-extra) + calc( var(--row-height) * var(--min-rows) ) );
	max-height: calc( var(--row-extra) + calc( var(--row-height) * var(--max-rows) ) );
}

.pre{
	white-space: pre-wrap;
}

.ellipsis,
.form-control[data-width]{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.memo{
	white-space: pre;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* standalone hint icon that usually follows a label */
@media screen{
	span ~ .icnHint::before,
	label ~ .icnHint::before{
		margin-left: 0.25em;
	}
}
.icnHint{
	color: purple;
}
/* show help cursor for info icons */
.icnHint,
span[data-toggle="tooltip"] > i,
span[data-toggle="tooltip"] > i {
	cursor: help;
}

/* ****************************** */

/* FORM CONTROLS */

/* x for search */
input.show-clear,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
}

/* hide step buttons when step="0" */
input.no-step,
input[step="0"] {
	-moz-appearance: textfield;
	appearance: textfield;
}
input.no-step::-webkit-inner-spin-button,
input[step="0"]::-webkit-inner-spin-button,
input.no-step::-webkit-outer-spin-button,
input[step="0"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* as a general rule, labels are bold to help readability */
label:not(.form-check-label,.form-control-plaintext){
	font-weight: bold;
}

/* bootstrap: reduce spacing between bottom of label and input */
label {
	margin-bottom: 0;
}
/* but have a little spacing between a vertical label + input */
.form-vertical label:not(.form-check-label){
	margin-bottom: 0.1rem;
}
/* reduce spacing between form groups */
.form-group{
	margin-bottom: .5rem;
}

.focus-within-border:focus-within{
	outline: 0;
	border-color: #80bdff;
	box-shadow: var(--box-shadow-focus);
}

/* for input groups that have a 'default' action button */
.input-group.focus-group:focus-within,
.focus-border {
  color: #495057;
  background-color: #fff;
  outline: 0;
	border-radius: 0.25rem;
	border-color: #80bdff;
  box-shadow: var(--box-shadow-focus);
}
/* but stop the individual glow */
.input-group.focus-group:focus-within .form-control:focus,
.input-group.focus-group:focus-within .btn{
	box-shadow: none;
}
.input-group.focus-group .btn[class*="btn-outline"] {
	border-color: #ced4da;	/* usual grey when not group-focused */
}
.input-group.focus-group:focus-within .btn[class*="btn-outline"]{
	border-color: #66afe9;	/* usual blue when group-focused */
}
.input-group.focus-group:focus-within .form-control:focus {
	box-shadow: none;
}

/* make some space-between label + control */
.form-inline label,
.form-inline .form-control,
.form-inline .btn,
.form-inline span.select2,
.form-inline .input-group{
	margin-right: 0.5rem;
}
/* make some space-between controls */
.form-inline#frmListActions .form-group:not(:last-child){
	margin-right: 2ch;
}
/* suppress margin between label + control for last one of a group or input-group */
.form-inline .form-group:last-child .form-control,
.form-inline .form-group:last-child .btn,
.form-inline .form-group:last-child .input-group,
.form-inline .form-group:last-child .form-check-label,
.form-inline .form-group:last-child span.select2,
.form-inline .btn-group .btn,
.form-inline .input-group.focus-group .form-control,
.form-inline .input-group.focus-group .btn{
	margin-right: 0;
}

/* checkbox/radio same size as text */
input[type="checkbox"],
input[type="radio"]{
	height: 1.25em;
	width: 1.25em;
	display: inline-block;
}
/* spacing between a radio/checkbox and a label wrapping it [the non-standard bootstrap way] */
label>input[type="checkbox"],
label>input[type="radio"]{
	padding-right: .25rem;
}
/* not using a margin as it isn't clickable ; instead we use padding-left on the label */
.form-check-input[type="radio"]:has(~label.form-check-label),
.form-check-input[type="checkbox"]:has(~label.form-check-label){
	margin-right: 0;
}
/* bootstrap : spacing between a radio/checkbox and following label as radio/checkbox is now larger */
.form-check-input[type="radio"]~label.form-check-label,
.form-check-input[type="checkbox"]~label.form-check-label{
	padding-left: .25rem;
}
/* only needed for radiobutton (not checkbox) */
.form-check .form-check-input[type="radio"]{
	margin-top: 0.15em;
}

/* browser fix : stop repeated clicking marking up the text for the label + also change to cursor to hand */
.form-check-input~label.form-check-label,
label.form-check-label{
	user-select: none;
}

/* show cursor as hand when over labels associated with an input */
.form-check-input:not(:disabled)~label.form-check-label{
	cursor: pointer;
}

/* fix cursor ; bootstrap 4 doesn't use "not-allowed" the cursor anymore, so neither should select2 */
.select2-container.select2-container--disabled .select2-selection{
  cursor: auto;
}

/* as a general rule, input's that are disabled have no need for a placeholder */
input[disabled]:not(.placeholder-always-visible)::placeholder{
	color: transparent;
}

/* wider button */
.btn.wide,
.btn-group .btn.wide,
.btn.btn-sm.exwide{
	min-width: 15ch;
}
.btn.btn-sm.wide,
.btn-group-sm .btn.wide{
	min-width: 10ch;
}
.btn.exwide,
.btn.btn-lg.wide,
.btn-group-lg .btn.wide{
	min-width: 20ch;
}
/* smaller */
.btn.btn-xs,
.btn-group-xs>.btn{
	padding: 0.15rem .5rem;
	font-size: smaller;
}

textarea.code {
	font-size: smaller;
	overflow: auto;
	font-family: monospace;
	padding: 4px;
}
textarea.code.wrap {
	white-space: pre-wrap;
}
textarea.code:not(.wrap) {
	white-space: pre;
}

/* ************************* badge indicators ********************** */
.badge:not([class^='badge-'],[class*=' badge-']){
	background-color: #777;	/* default as grey color */
	color: #fff;
}
.badge.badge-important {
	color: #fff;
	background-color: red;
	font-weight: bold;
}
.jump {
	animation: jump 5s ease 2s infinite normal;
}
@keyframes jump {
  0%{transform: translateY(0);}
  5%{ransform: translateY(0);}
  10%{transform: translateY(-0.75em);}
  12.5%{transform: translateY(0);}
  15%{transform: translateY(-0.50em);}
  20%{transform: translateY(0);}
  25%{transform: translateY(0);}
}

.flip-rotate{
	animation: flip-rotate 10s ease 1s infinite normal;
	transform-origin: 50% 50%;
}
@keyframes flip-rotate {
  0% {
		transform: perspective(32px)rotate(0deg)
  }
	16% {
		transform: perspective(32px)rotateX(180deg)rotateY(0);
  }
	24% {
		transform: perspective(32px)rotateX(180deg)rotateY(180deg);
  }
	32% {
		transform: perspective(32px)rotateX(0)rotateY(180deg);
  }
	40% {
		transform: perspective(32px)rotateX(0)rotateY(0);
  }
}
/* badges are moved up */
a span.badge {
    position: relative;
    top: -0.5rem;
		margin-left: 0.5ch;
}

/* ************************* generic table badges ********************** */
tr[data-statusdescr="inactive"]{
	color: graytext;
}
tr[data-statusdescr="inactive"]>td.BDG[data-statusdescr]>span{
	color: white;
	background-color: black;
}
tr[data-statusdescr="active"]>td.BDG[data-statusdescr]>span{
	color: white;
	background-color: green;
}

/* *** animation for auto-changed values/"look"; might need changing *** */
.feedback-changed{
	--bg-color: var(--primary-color);
	transition: background-color;
	animation: feedback_changed 1s 1 ease-out;
}
@keyframes feedback_changed {
	25% {
		background-color: var(--bg-color);
	}
}
.feedback-look{
	--bg-color: var(--danger);
	transition: background-color;
	animation: feedback_changed 1s ease-out, bounce 1s ease-out;
}

/* ************************* customized select ********************** */
option.blank-placeholder[disabled],
select:not(.searchable) option[disabled]:not(.option-divider),	/* options that are no longer pickable are disabled [the option is subsequently hidden so it won't be in the dropdown list] */
li.select2-results__option[aria-disabled="true"]{
	display: none;
}
option.option-divider,	/* regular select option */
.select2-results__option.option-divider{
	font-size: 0.25px;
	background-color: #ced4da;
}
option.option-divider.size-2,
.select2-results__option.option-divider.size-2{
	font-size: 0.5px;
}
option.option-divider.size-3,
.select2-results__option.option-divider.size-3{
	font-size: 0.75px;
}
option.option-divider.size-4,
.select2-results__option.option-divider.size-4{
	font-size: 1px;
}

/* ************************* generic msg dialogs ********************** */
.modal.msg.msg-warning .modal-header{
  background-image: linear-gradient(#fcf8e3 0%, #f8efc0 100%);
  border-color: #f5e79e;
}
.modal.msg.msg-error .modal-header{
  background-image: linear-gradient(#f2dede 0%, #e7c3c3 100%);
  border-color: #dca7a7;
}
.modal.msg.msg-confirm .modal-header{
  background-image: linear-gradient(#d9edf7 0%, #b9def0 100%);
  border-color: #9acfea;
}

/* notification growl */
div[data-notify="container"]  {
	width: unset !important;
	min-width: 10rem;
	max-width: 33%;
	z-index: 9999 !important;	/* set notify msg above modal backdrop */
}
div[data-notify="container"] [role="alert"] {
	box-shadow: var(--box-shadow);
}
div[data-notify="container"] [role="alert"] [data-notify="dismiss"] {
	top: -2px !important;
	right: 4px !important;
}
div[data-notify="container"] .close~[data-notify="message"]{
	white-space: pre-wrap;
}
/* puts an empty <p> after message */
div[data-notify="container"] [role="alert"]>p:empty{
	display: none;
}

/* ************************ general modal restyling ******************* */
.modal-header{
	padding: 0.25rem 0.5rem;
	align-items: center;
	background-color: #abcbe7;
}
.modal-footer{
	padding: 0.5rem;
}
.modal-title{
	font-size: large;
	line-height: 1.7rem;		/* vertical centre */
	font-weight: bold;
}

.modal-header .close{
	padding: 0;
	margin: 0;
}
.modal-header .close:after{
	content: var(--icon-close);
	font-family: var(--icon-font-family);
}

/* remove slide effect but keep fade */
.modal:not(.msg) .modal-dialog {
	transform: none;
  transition: none !important;
}

/* add attribute to element to hide if dialog mode = V|A|E|C|D */
.modal-dialog[data-mode="V"] [data-mode-hide*="V"],
.modal-dialog[data-mode="A"] [data-mode-hide*="A"],
.modal-dialog[data-mode="E"] [data-mode-hide*="E"],
.modal-dialog[data-mode="C"] [data-mode-hide*="C"],
.modal-dialog[data-mode="D"] [data-mode-hide*="D"]{
	display: none !important;
}

.modal-dialog[data-mode="A"] .modal-title .name-mode::before,
.modal-dialog[data-mode="C"] .modal-title .name-mode::before{
	content: 'Add ';
}
.modal-dialog[data-mode="V"] .modal-title .name-mode::before{
	content: 'View ';
}
.modal-dialog[data-mode="E"] .modal-title .name-mode::before{
	content: 'Edit ';
}

.modal-title .name-identifier:not(:empty)::before{content: " (";}
.modal-title .name-identifier:not(:empty)::after{content: ")";}
.modal-title .name-identifier{
	vertical-align: super;
	font-weight: normal;
	font-size: small;
}
.modal-dialog form{
	margin-bottom: 0;
}

/* ****************************** table animations ********************** */

/* stop scrollbars appearing while animations are playing */
body:not(.clsForceScrollbar).row-animating:not(.row-showing),
body:not(.clsForceScrollbar).row-animating:not(.row-showing) .table-scroll-container table{
	overflow-y: hidden;
	overflow-x: hidden;
}
tr.row-updating,tr.row-inserting,tr.deleting{
	pointer-events: none;
}
tr.row-updating,tr.row-inserting,tr.row-updated,tr.row-inserted,tr.row-selected{
	background-color: #fffde7 !important;
}
tr.row-deleting>td{
	background-color: #f9c8c8 !important;
}
tr.row-deleting{
	animation-name: rollOut;
	animation-fill-mode: both;
	animation-duration: 0.75s;
}
tr.row-inserting>td{
	animation-name: rollIn;
	animation-fill-mode: both;
	animation-duration: 0.75s;
}
tr.row-updating>td{
	animation-name: rubberBand;
	animation-fill-mode: both;
	animation-duration: 0.5s;
}
tr.row-showing>td{
	transition: background-color;
	animation: feedback_changed 1s 1 linear;
	animation-iteration-count: 2;
}

/* ****************************** table styling ********************** */
table{font-size: inherit;}

.table{
	border-collapse: separate;
	border-spacing: 0;
	--default-vpadding: 0.4rem;		/* redefine default BS 4.x padding ; .75rem is too much! */
	--default-hpadding: 0.4rem;
}
.table-sm{
	--default-vpadding: 0.3rem;	/* BS 4.x default */
}
.table.table-xs{
	--default-vpadding: 0.1rem;	/* smallest possible without looking too cramped */
}
.table th,.table td{
	padding: var(--default-vpadding) var(--default-hpadding);
}
/* rectangle highlight bar */
.table-hover>tbody>tr:not(.active,.selected):hover,
.table>tbody>tr.tr-hover:not(.active,.selected):hover{
	outline-offset: -1px;
	outline: 1px solid rgb(183 209 255);
}
.table-helper[disabled] .table-hover>tbody>tr:not(.active,.selected):hover,
.table-helper[disabled] .table>tbody>tr.tr-hover:not(.active,.selected):hover{
	outline: unset;
}

/* striped effect */
.table-striped>tbody>tr:nth-of-type(odd){	/* stop bootstrap striping */
  background-color: transparent;
}

.table-striped:not(.filtered-striped)>tbody>tr:nth-of-type(odd),	/* every odd row */
.table-striped.filtered-striped>tbody>tr.filtered-stripe,	/* forced per row */
.list-striped:not(.list-striped-even) .list-row:nth-of-type(odd),
.list-striped.list-striped-even .list-row:nth-of-type(even){
	background-color: rgba(200, 235, 255, 0.25);
}
/* hover row effect: use table.table-hover for all rows or tr.tr-hover for specific */
.table-hover>tbody>tr,
.table>tbody>tr.tr-hover{
	cursor: pointer;
}
.table-helper[disabled] .table-hover>tbody>tr,
.table-helper[disabled] .table>tbody>tr.tr-hover{
	cursor: unset;
}
.table-hover>tbody>tr:not(.active,.selected):hover,
.table>tbody>tr.tr-hover:not(.active,.selected):hover{
	background-image: linear-gradient(#F9FBFD,#EBF3FD);
	clip-path: border-box;	/* background to clip to rounded corners */
	border-radius: 6px;
}
.table-helper[disabled] .table-hover>tbody>tr:not(.active,.selected):hover,
.table-helper[disabled] .table>tbody>tr.tr-hover:not(.active,.selected):hover{
	background-image: unset;
}
/* note: not easy to style away row hover on table-striped so don't bother! */

/* row selected - medium */
.table>tbody>tr.selected{
	background-image: linear-gradient(#EBF4FE,#CFE4FE);
	clip-path: border-box;	/* background to clip to rounded corners */
	border-radius: 6px;
	outline: 1px solid #78a4da !important;
  outline-offset: -1px;
}
/* as we use outline to display a border around hover/selected rows, switch off separator line on following row */
.table:not(.table-striped).table-hover>tbody>tr:hover+tr td,
.table:not(.table-striped).table-hover>tbody>tr.selected+tr td{
	border-top-color: transparent;
}
/* hovering over selected row ; darken */
.table-hover>tbody>tr.active,
.table-hover>tbody>tr.selected:hover,
.table>tbody>tr.tr-hover.active,
.table>tbody>tr.tr-hover.selected:hover{
	background-image: linear-gradient(#f5f8fb, #dfecfd);	/*linear-gradient(#DCEBFC,#C1DBFC);*/
}
.table-helper[disabled] .table-hover>tbody>tr.selected:hover,
.table-helper[disabled] .table>tbody>tr.tr-hover.selected:hover{
	background-image: unset;
}

.info{
	color: blue;
}
.info .name-lblCountSuffix:not(:empty)::before{
	content: ' ';
}

/* *************** table with sticky headers/footer/actions *************** */
/* a table container with a fixed height (usually used in dialogs) */
.table-container{
	position: relative;
	min-height: 6rem;	/* in case page height goes really small; enough for header, one row and footer */
}
.table-helper[disabled]{
	filter: grayscale(1);
	background-color: rgba(0,0,0,0.05);
}
.table-helper:not(.has-footer) .table-footer{
	display: none;
}
.alert-black{
	color: white;
	background-color: black;
	outline: 1px solid white;
  outline-offset: -5px;
}
.alert-black[role="alert"]{
	transform: translate(-41vw, 44vh);
}
.table-helper .clsLimited.alert-dismissible:not(.show),
.table-helper .table-footer .clsLimited:not(.show){
	display: none;
}
.table-helper .table-container:not(:has(.table-header.info)){
	border-top: 1px solid #ddd;
}
.table-helper .table-scroll-container{
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}
.table-helper.has-footer .table-scroll-container{
	border-bottom: 0;
}
.table-container table{	/* table-container handles sticky col/row headings */
	position: relative;
	table-layout: fixed;
	margin-bottom: 0;
}
.table-container table>thead{
	user-select: none;
}
/* table-container handles sticky row headings */
.table-container thead>tr>th{
	position: sticky;	/* also needs non-static for sort indicator */
	background-color: var(--table-fixed-color);
	z-index: 1;
	top: 0;
}
.table-scroll-container{
	--scroll-padding-top: 0px;
	scroll-padding-top: var(--scroll-padding-top);	/* when using scrollIntoView, we need to take into account the header height */
	outline: 0;  /* shift key + mouse down causes outline to show */
}
/* optional footer for a table */
.table-footer{
	background-color: var(--table-fixed-color);
	padding: 0 1px;
	border: 1px solid #ddd;
	display: flex;
	flex: 0 0 auto;
	height: 35px; /* if no filter, info is not as tall */
	align-items: center;
	justify-content: space-between;
}
.table-footer .info{
	color: #1864ab;
	padding-left: 0.5rem;
}
.info .name-lblCount,
.info .name-lblCheckedCount{
	font-weight: bold;
	color: black;
}
.btn .name-lblCheckedCountCss{
	font-weight: bold;
	color: yellow;
}
.info .name-lblFilteredCount,
.info .name-lblUnfilteredCount{
	font-weight: bold;
	color: purple;
}
.table-footer .name-divFilter{
	max-width: 50%;
	min-width: 25ch;
	width: 25%;
  flex-flow: nowrap;
}
.table-footer .name-divFilter:not(:has(.name-edtFilter:placeholder-shown)) .icnFilter{
	color: var(--light);
	background-color: var(--primary);
}

/* *** table with checkboxes */
.table-helper .dropright.checkbox-select-menu .dropdown-menu{
	margin-left: 0;	/* cancel bootstrap margin */
}
.table-helper .checkbox-checked-menu{
	position: absolute;
	left: 100%;		/* after the checkbox */
	top: 0;
	bottom: 0;
	z-index: 1;	/* for tables that use transform: translate */
	/* for button within */
	display: flex;
	align-items: center;
	width: max-content;
}
.table-helper[data-checked-count="0"] .checkbox-checked-menu{
	display: none;
}

/* when header th checkbox not visible, reserve space */
table.table-row-check th.CHB input[type="checkbox"][hidden]{
	visibility: hidden;
	display: block !important;
}
table.table-row-check{
	user-select: none !important;
}
.table-helper:not([readonly],[disabled]) table.table-row-check>tbody>tr{
	cursor: cell;
}


/* ********************* table column sorting ****************** */
/* .table-container thead>tr>th requires position: {not}static for sort indicator */
body:not([data-table-op]) .table-container:not([data-sortable="N"]) thead>tr>th:not([data-sortable="N"],[data-sort-indicator])::after,/* can sort table and can sort column */
.table-container thead>tr>th[data-sort-indicator]::after{	/* column already sorted */
	content: "";
	position: absolute;
	z-index: 1;
  font-family: var(--icon-font-family);
	color: darkgrey;
	text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
	text-align:center;
	right: 0; left: 0;
	bottom: -4px;
}
body:not([data-table-op]) .table-container:not([data-sortable="N"]) thead>tr>th:not([data-sortable="N"]):hover{
	background-color: var(--table-fixed-hover-color);
}
body:not([data-table-op]) .table-container:not([data-sortable="N"]) thead>tr>th:not([data-sortable="N"],[data-sort-indicator]):hover::after,
.table-container thead>tr>th[data-sort-indicator]:hover::after{
	color: var(--primary-color);
	animation: swing 2s linear infinite;
}
/* hovering indicates can sort */
body:not([data-table-op]) .table-container:not([data-sortable="N"]) thead>tr>th:not([data-sortable="N"],[data-sort-indicator]):hover::after,
.table-container:not([data-sortable="N"]) thead>tr>th:not([data-sortable="N"],[data-sort-indicator]):hover::after{
  content: "\f0dc" !important;
}
/* sorted small->large */
.table-container thead>tr>th[data-sort-indicator="A"]::after{
	content: "\f0de";
	top: -4px;
	animation-name: none !important;
}
/* sorted large->small */
.table-container thead>tr>th[data-sort-indicator="D"]::after{
	content: "\f0dd";
	bottom: -4px;
	animation-name: none !important;
}
/* currently sorting */
.table-container thead>tr>th[data-sorting]::after{
	content: "\f110" !important;
	animation: fa-spin 2s infinite linear;
}

/* ****************** table column widths ********************* */

/* stop data overflowing into other cells except for CHB (maybe an embedded menu) */
.table thead>tr>th:not(.CHB,.CTX,.EXP),
.table tbody td:not(.CHB,.CTX,.EXP){
	box-sizing: border-box;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

body{
	--default-width-D: 10ch;
	--default-width-T: 5ch;
	--default-width-T-S: 8ch;
	--default-width-Z: 16ch;
	--default-width-Z-S: 19ch;
	--default-width-B: 3ch;
	--default-width-CTX: 4.75ch;
	--default-width-CHB: 1.75rem;
	--default-width-EXP: 2em;
}

/* widths - define extra for each comma / padding */
.table thead>tr>th{
	--num-commas: 0ch;
	--extra_internal: calc(var(--default-hpadding) *2);	/* usual padding */
	--extra: 0px;
}
.data-width,
.form-control{
	--num-commas: 0ch;
	--extra_internal: calc(1em * 2);	/* slightly more bootstrap padding left+right */
	--extra: 0px;
}
select.form-control{
	--extra: 1em;	/* slightly more for the dropdown arrow */
}
.form-control[data-type="D"],.form-control[data-type="DA"],
.form-control[data-type="T"],
.form-control[data-type="Z"],
.form-control[data-type^="N"],
.form-control[data-type="M"]{
	--extra_internal: calc(.75em * 2);	/* usual bootstrap padding left+right */
}

/* date ; default width */
thead>tr>th[data-type="D"]:not([data-width]),
.form-control[data-type="D"]:not([data-width]){
	--width: calc(var(--default-width-D) + var(--extra_internal) + var(--extra));
}

/* time (no seconds) ; default width */
thead>tr>th[data-type="T"]:not([data-width],[data-seconds]),
thead>tr>th[data-type="T"]:not([data-width])[data-seconds="N"],
.form-control[data-type="T"]:not([data-width],[data-seconds]),
.form-control[data-type="T"]:not([data-width])[data-seconds="N"]{
	--width: calc(var(--default-width-T) + var(--extra_internal) + var(--extra));
}
/* time with seconds ; default width */
thead>tr>th[data-type="T"]:not([data-width])[data-seconds="Y"],
.form-control[data-type="T"]:not([data-width])[data-seconds="Y"]{
	--width: calc(var(--default-width-T-S) + var(--extra_internal) + var(--extra));
}

/* date+time (no seconds) ; default width */
thead>tr>th[data-type="Z"]:not([data-width],[data-seconds]),
thead>tr>th[data-type="Z"]:not([data-width])[data-seconds="N"],
.form-control[data-type="Z"]:not([data-width],[data-seconds]),
.form-control[data-type="Z"]:not([data-width])[data-seconds="N"]{
	--width: calc(var(--default-width-Z) + var(--extra_internal) + var(--extra));
	--extra_internal: calc(.75em * 2);	/* usual bootstrap padding left+right */
}
/* date+time with seconds ; default width */
thead>tr>th[data-type="Z"]:not([data-width])[data-seconds="Y"],
.form-control[data-type="Z"]:not([data-width])[data-seconds="Y"]{
	--width: calc(var(--default-width-Z-S) + var(--extra_internal) + var(--extra));
	--extra_internal: calc(.75em * 2);	/* usual bootstrap padding left+right */
}

/* boolean Yes|No ; default width */
thead>tr>th[data-type="B"]:not([data-width]),.form-control[data-type="B"]:not([data-width]){
	--width: calc(var(--default-width-B) + var(--extra_internal) + var(--extra));
}

/* handle commas (usually numeric/size) */
thead>tr>th[data-width="4"][data-commas="Y"],.form-control[data-width="4"][data-commas="Y"],.data-width[data-width="4"][data-commas="Y"],
thead>tr>th[data-width="5"][data-commas="Y"],.form-control[data-width="5"][data-commas="Y"],.data-width[data-width="5"][data-commas="Y"],
thead>tr>th[data-width="6"][data-commas="Y"],.form-control[data-width="6"][data-commas="Y"],.data-width[data-width="6"][data-commas="Y"]{
	--num-commas: 1ch;
}

thead>tr>th[data-width="7"][data-commas="Y"],.form-control[data-width="7"][data-commas="Y"],.data-width[data-width="7"][data-commas="Y"],
thead>tr>th[data-width="8"][data-commas="Y"],.form-control[data-width="8"][data-commas="Y"],.data-width[data-width="8"][data-commas="Y"],
thead>tr>th[data-width="9"][data-commas="Y"],.form-control[data-width="9"][data-commas="Y"],.data-width[data-width="9"][data-commas="Y"]{
	--num-commas: 2ch;
}

thead>tr>th[data-width="10"][data-commas="Y"],.form-control[data-width="10"][data-commas="Y"],.data-width[data-width="10"][data-commas="Y"],
thead>tr>th[data-width="11"][data-commas="Y"],.form-control[data-width="11"][data-commas="Y"],.data-width[data-width="11"][data-commas="Y"],
thead>tr>th[data-width="12"][data-commas="Y"],.form-control[data-width="12"][data-commas="Y"],.data-width[data-width="12"][data-commas="Y"]{
	--num-commas: 3ch;
}

thead>tr>th[data-width="13"][data-commas="Y"],.form-control[data-width="13"][data-commas="Y"],.data-width[data-width="13"][data-commas="Y"],
thead>tr>th[data-width="14"][data-commas="Y"],.form-control[data-width="14"][data-commas="Y"],.data-width[data-width="14"][data-commas="Y"],
thead>tr>th[data-width="15"][data-commas="Y"],.form-control[data-width="15"][data-commas="Y"],.data-width[data-width="15"][data-commas="Y"]{
--num-commas: 4ch;
}

/* any type with a width */
thead>tr>th[data-width="1"],.form-control[data-width="1"],.data-width[data-width="1"]{--width: calc(1ch + var(--num-commas) + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="2"],.form-control[data-width="2"],.data-width[data-width="2"]{--width: calc(2ch + var(--num-commas) + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="3"],.form-control[data-width="3"],.data-width[data-width="3"]{--width: calc(3ch + var(--num-commas) + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="4"],.form-control[data-width="4"],.data-width[data-width="4"]{--width: calc(4ch + var(--num-commas) + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="5"],.form-control[data-width="5"],.data-width[data-width="5"]{--width: calc(5ch + var(--num-commas) + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="6"],.form-control[data-width="6"],.data-width[data-width="6"]{--width: calc(6ch + var(--num-commas) + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="7"],.form-control[data-width="7"],.data-width[data-width="7"]{--width: calc(7ch + var(--num-commas) + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="8"],.form-control[data-width="8"],.data-width[data-width="8"]{--width: calc(8ch + var(--num-commas) + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="9"],.form-control[data-width="9"],.data-width[data-width="9"]{--width: calc(9ch + var(--num-commas) + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="10"],.form-control[data-width="10"],.data-width[data-width="10"]{--width: calc(10ch + var(--num-commas) + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="11"],.form-control[data-width="11"],.data-width[data-width="11"]{--width: calc(11ch + var(--num-commas) + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="12"],.form-control[data-width="12"],.data-width[data-width="12"]{--width: calc(12ch + var(--num-commas) + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="13"],.form-control[data-width="13"],.data-width[data-width="13"]{--width: calc(13ch + var(--num-commas) + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="14"],.form-control[data-width="14"],.data-width[data-width="14"]{--width: calc(14ch + var(--num-commas) + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="15"],.form-control[data-width="15"],.data-width[data-width="15"]{--width: calc(15ch + var(--num-commas) + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="16"],.form-control[data-width="16"],.data-width[data-width="16"]{--width: calc(16ch + var(--num-commas) + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="17"],.form-control[data-width="17"],.data-width[data-width="17"]{--width: calc(17ch + var(--num-commas) + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="18"],.form-control[data-width="18"],.data-width[data-width="18"]{--width: calc(18ch + var(--num-commas) + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="19"],.form-control[data-width="19"],.data-width[data-width="19"]{--width: calc(19ch + var(--num-commas) + var(--extra_internal) + var(--extra));}

/* strings can also use these widths */
thead>tr>th[data-width="20"],.form-control[data-width="20"],.data-width[data-width="20"]{--width: calc(20ch + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="25"],.form-control[data-width="25"],.data-width[data-width="25"]{--width: calc(25ch + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="30"],.form-control[data-width="30"],.data-width[data-width="30"]{--width: calc(30ch + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="35"],.form-control[data-width="35"],.data-width[data-width="35"]{--width: calc(35ch + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="40"],.form-control[data-width="40"],.data-width[data-width="40"]{--width: calc(40ch + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="45"],.form-control[data-width="45"],.data-width[data-width="45"]{--width: calc(45ch + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="50"],.form-control[data-width="50"],.data-width[data-width="50"]{--width: calc(50ch + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="60"],.form-control[data-width="60"],.data-width[data-width="60"]{--width: calc(60ch + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="80"],.form-control[data-width="80"],.data-width[data-width="80"]{--width: calc(80ch + var(--extra_internal) + var(--extra));}
/* images only use these widths (as they are defined in pixels) */
thead>tr>th[data-type="I"][data-width="16"]{--width: calc(16px + var(--extra_internal) + var(--extra));}
thead>tr>th[data-type="I"][data-width="20"]{--width: calc(20px + var(--extra_internal) + var(--extra));}
thead>tr>th[data-type="I"][data-width="24"]{--width: calc(24px + var(--extra_internal) + var(--extra));}
thead>tr>th[data-type="I"][data-width="28"]{--width: calc(28px + var(--extra_internal) + var(--extra));}
thead>tr>th[data-type="I"][data-width="32"]{--width: calc(32px + var(--extra_internal) + var(--extra));}
thead>tr>th[data-type="I"][data-width="40"]{--width: calc(40px + var(--extra_internal) + var(--extra));}
thead>tr>th[data-type="I"][data-width="48"]{--width: calc(48px + var(--extra_internal) + var(--extra));}
thead>tr>th[data-type="I"][data-width="64"]{--width: calc(64px + var(--extra_internal) + var(--extra));}
thead>tr>th[data-type="I"][data-width="72"]{--width: calc(72px + var(--extra_internal) + var(--extra));}
thead>tr>th[data-type="I"][data-width="96"]{--width: calc(96px + var(--extra_internal) + var(--extra));}

thead>tr>th[data-type],
thead>tr>th.CTX,
tbody>tr>td.CTX,
.data-width[data-width],
.form-control[data-width],
.form-control[data-type="D"],.form-control[data-type="T"],.form-control[data-type="Z"],
.form-control[data-type="N"],.form-control[data-type="NI"],.form-control[data-type="NF"],
.form-control[data-type="B"],.form-control[data-type="SS"]{
	width: var(--width);
}

/* **************** table column alignments ********************* */
thead>tr>th.AL,tbody>tr>td.AL,
thead>tr>th.S:not(.BDG,.AR,.AC),
tbody td.S:not(.BDG,.AR,.AC){	/* string but not badge */
	text-align: left;
	padding-right: var(--default-hpadding);
	padding-left: var(--default-hpadding);
}
.form-control[data-type="D"],.form-control[data-type="T"],.form-control[data-type="Z"],
.form-control[data-type="N"],.form-control[data-type="NI"],.form-control[data-type="NF"],
.form-control[data-type="M"],.form-control[data-type="SS"],
thead>tr>th.AR,tbody>tr>td.AR,
thead>tr>th[data-type="D"],tbody>tr>td.D,thead>tr>th[data-type="T"],tbody>tr>td.T,thead>tr>th[data-type="Z"],tbody>tr>td.Z,
thead>tr>th[data-type="N"],tbody>tr>td.N,thead>tr>th[data-type="NI"],tbody>tr>td.NI,thead>tr>th[data-type="NF"],tbody>tr>td.NF,
thead>tr>th[data-type="M"],tbody>tr>td.M,thead>tr>th[data-type="SS"],tbody>tr>td.SS{
	text-align: right;
}
thead>tr>th[data-type="D"],thead>tr>th[data-type="T"],thead>tr>th[data-type="Z"],thead>tr>th[data-type="N"],thead>tr>th[data-type="NI"],thead>tr>th[data-type="NF"],thead>tr>th[data-type="M"],thead>tr>th[data-type="SS"],
tbody>tr>td.D,tbody>tr>td.T,tbody>tr>td.Z,tbody>tr>td.N,tbody>tr>td.NI,tbody>tr>td.NF,tbody>tr>td.M,tbody>tr>td.SS
{
	padding-left: var(--default-hpadding);
	padding-right: var(--default-hpadding);
}
thead>tr>th.AC,tbody>tr>td.AC,
tbody>tr>td.B,thead>tr>th[data-type="B"],.form-control[data-type="B"],
tbody>tr>td.I,thead>tr>th[data-type="I"],.form-control[data-type="I"],
thead>tr>th.BDG,tbody>tr>td.BDG{
  text-align: center;
}
tbody>tr>td.I{
  padding: 0.15rem;
}

/* ******************** table cell badge column ********************* */
.table thead>tr>th[data-width].BDG{
	--num-commas: 0ch;
	--extra_internal: 2ch;
	--extra: 0px;
}	/* badge only has padding left+right */

.table>tbody>tr>td.BDG{	/* have to use full selector to override bootstrap */
	vertical-align: middle;
	line-height: 1;
}
td.BDG>span,
td.BDG>div>span{
	padding: 0.25em 1ch 0.35em 1ch;	/* un-even top+bottom to compensate for lowercase */
	display: inline-block;
	border-radius: 4px;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 0.75em;
	margin-top: calc(0.05em / 2);	/* in case of row-expandable & text-align: top */
}

/* boolean display as image */
td.B.Y{
	background: url('images/bool-y.png') center center no-repeat;
}
td.B.N{
	background: url('images/bool-n.png') center center no-repeat;
}
td.B>span{
	opacity: 0;	/* don't display but allow selection of text */
}

/* **************** table checkbox column ********************* */
thead>tr>th.CHB,
tbody>tr>td.CHB{
	--default-vpadding: 2px;
	--default-hpadding: 4px;
	text-align: center;
	vertical-align: middle;
	/* padding: 0; */
}
thead>tr>th.CHB:not([data-width]),
tbody>tr>td.CHB:not([data-width]){
	--width: calc(0.5ch + 1.75rem + 0.5ch);
}
thead>tr>th.CHB input[type="checkbox"],
tbody>tr>td.CHB input[type="checkbox"]{
	vertical-align: middle;
	will-change: opacity;
	transition: opacity 0.5s;
	/* margin: 0 var(--default-hpadding); */
}
thead>tr>th.CHB input[type="checkbox"]:not([hidden]){
	display: inline-block;
}
tbody>tr>td.CHB input[type="checkbox"]:not(:checked){
	opacity: 0.3;
}
thead>tr>th.CHB input[type="checkbox"]:not(:checked), /* header checkbox always full opacity */
tbody>tr:hover>td.CHB input[type="checkbox"]:not(:checked), /* else full opacity only chen hovering */
thead>tr>th.CHB:hover input[type="checkbox"]:not(:checked),
tbody>tr:hover>td.CHB:hover input[type="checkbox"],
.table-helper[disabled] tbody>tr>td.CHB input[type="checkbox"]{ /* or table is disabled */
	opacity: 1;
}
/* increase size of checkbox */
input[type="checkbox"].lg,
thead>tr>th.CHB input[type="checkbox"],
tbody>tr>td.CHB input[type="checkbox"]{
	width: 1.75rem;
	height: 1.75rem;
}
/* in case of a dropdown menu */
thead>tr>th.CTX,
thead>tr>th.CHB{
	z-index: 2;
}

/* ********************* table row context menu ****************** */
thead>tr>th.CTX,
tbody>tr>td.CTX{
	--default-vpadding: 2px;
	--default-hpadding: 4px;
	text-align: center;
	vertical-align: middle;
}
thead>tr>th.CTX:not([data-width]),
tbody>tr>td.CTX:not([data-width]){
	--width: 2.35rem;	/* a single button */
}
tr>td.CTX.in{
	position: relative;
}
tr:hover>td.CTX::before{
	content: "\f142";
  -webkit-font-smoothing: antialiased;
  font-family: var(--icon-font-family);
  font-weight: bold;
	display: block;
  text-align: center;
	color: #38a3e6;
	transform: rotate(0deg);
	transition: transform 0.25s ease-in-out;
}
thead th.CTX .icnMore{
	color: #38a3e6;
}
tr:hover>td.CTX.in::before{
	transform: rotate(90deg);
}
ul.row-context-menu {
	list-style-type: none;
	margin-left: 0.5ch;
	padding: 0; /* remove list padding */
  position: absolute;
	top: 1px;
	left: calc(100% - 4px);	/* let | show */
  display: inline-block;
	z-index: 1;
	white-space: nowrap;
  width: fit-content;
	opacity: 0;
	transition: opacity 2s ease-in-out;
}
.table-sm ul.row-context-menu{
	margin-left: 0;
}
td.CTX.in ul.row-context-menu{
	opacity: 1;
}
ul.row-context-menu>li {
	/* position: relative; */
  display: inline-block;
}
ul.row-context-menu>li>button{
  box-sizing: content-box;
  padding: .2em 2ch;
  box-shadow: 3px 3px 4px rgba(0, 0, 0, .5);
}
ul.row-context-menu>li>button:disabled{
	opacity: 1;
	color: gray;
}
.colOps .btn{
	width: 2.5em;
}
@media print {
  thead>tr>th.CTX,
	tbody>tr>td.CTX{
    display: none !important;
  }
}
.row-context-container{
	display: none;
}

/* ********************* table row expandable ****************** */
.table-rows-expandable th.EXP,
.table-rows-expandable td.EXP{
	width: var(--default-width-EXP);
	--default-lpadding: .5em;
	padding-left: var(--default-lpadding);
}
.table-rows-expandable td {
	vertical-align:top !important;
}
.table-rows-expandable td.EXP{
	cursor: pointer;
}
.table-rows-expandable td.EXP .icnExpander{
	position: relative;
	display: block;
	height: 1.5rem;
	padding: 0 .5ch;
	color: var(--primary-color);
}
.table-rows-expandable td.EXP .icnExpander::before{
	filter: drop-shadow( var(--box-shadow) );
	position: absolute;
	top: -0.25em !important;
	font-size: 1.75rem;
	transition: transform 200ms ease-in;
}
.table-rows-expandable.table-xs td.EXP .icnExpander::before,
.table-rows-expandable.table-sm td.EXP .icnExpander::before{
	font-size: 1.5rem;
}
.table-rows-expandable tr.expanded td.EXP .icnExpander::before {
	transform: rotate(90deg);	/* note: shows above header bug */
	transition: transform 200ms ease-in;
}
tr.expanded{
	cursor: pointer;
	user-select: none; /* stop any text selection going into the regular table columns while row is expanded */
}
tr.expanded .row-expander{
	z-index: -1;
	background-color: var(--secondary-color);
	width: calc( var(--tablehelper-width) - var(--scrollbar-width) - calc( var(--default-lpadding) * 2) );
}
.table-rows-expandable td.colOps{
	padding-top: calc( var(--default-vpadding) - 4px ) !important;
	padding-bottom: 0;
}
.row-expandable{
	cursor: default;
	user-select: text;
	overflow: hidden;
	outline: 0;
	scrollbar-width: thin;
	position: relative;	/* capture click over the full width (otherwise would register click on TD's) */
	width: calc( var(--tablehelper-width) - var(--scrollbar-width) - calc( var(--default-lpadding) * 2) );
}
.row-expandable.show{
	overflow: auto;
}
.row-expandable.collapsing{
	overflow: visible;	/* no scrollbars (especially while animating) */
}

/* ******************** global icons ********************* */
/* add to an element to include an icon */
.icn,
.icn-before::before,	/* add icn-before or icn-after to an element to handle an icon in the pseduo element */
.icn-after::after,
.icnHint::before,
.icnView::before,
.icnAdd::before,
.icnEdit::before,
.icnCopy::before,
.icnDelete::before,.icnRecover::before,
.icnMore::before,
.icnRefresh::before,
.icnPrint::before,
.icnSearch::before,
.icnFilter::before,
.icnExpander::before,
.icnPrior::before,.icnNext::before,
.icnUpload::before,.icnDownload::before,
.icnImport::before,.icnExport::before,
.icnCheckAll::before,.icnUncheckAll::before,
.icnPassword::before,
.icnMoveUp::before,.icnMoveDown::before,
.icnMoveTop::before,.icnMoveBottom::before,
.icnClose::before,
.icnClear::before,
.icnSpinner::before{
	font-family: var(--icon-font-family);
	font-weight: bold;
	font-style: normal;
	display: inline-block;
}
.icn.far{
	font-weight: normal;
	line-height: inherit; /* fontawesome redefines this to 1?! */
}
.icnHint::before{ content: '\f05a'; }
.icnView::before{ content: var(--icon-view); }
.icnAdd::before{ content: '\f067'; }
.icnEdit::before{ content: '\f304'; }
.icnCopy::before{ content: '\f0c5'; }
.icnDelete::before{ content: '\f1f8'; }
.icnRecover::before{ content: '\f0e2'; }
.icnMore::before{ content: '\f142'; }
.icnRefresh::before{ content: '\f021'; }
.icnPrint::before{ content: '\f02f'; }
.icnSearch::before{ content: '\f002'; }
.icnFilter::before{ content: '\f0b0'; }
.icnExpander::before{ content: '\f0da'; }
.icnExpander.left::before{ content: '\f0d9'; }
.icnPrior::before{ content: '\f053'; }
.icnNext::before{ content: '\f054'; }
.icnUpload::before{ content: '\f093'; }
.icnDownload::before{ content: '\f019'; }
.icnImport::before{ content: '\f56f'; }
.icnExport::before{ content: '\f56e'; }
.icnCheckAll::before{ content: '\f14a'; font-weight: normal; }
.icnUncheckAll::before{ content: '\f0c8'; font-weight: normal; }
.icnPassword::before{ content: '\f023'; }
.icnMoveUp::before{ content: '\f106'; }
.icnMoveDown::before{ content: '\f107'; }
.icnMoveTop::before{ content: '\f102'; }
.icnMoveBottom::before{ content: '\f103'; }
.icnClose::before{ content: var(--icon-close); }
.icnClear::before{ content: var(--icon-close); }
.icnSpinner::before{
	content: '\f110';
	transform: rotate(0deg);
	animation: fa-spin 2s infinite linear;
}
/* spacing between icon and text within a button */
button>img+span,
i[class^="icn"]+span,i[class*=" icn"]+span,
span+i[class^="icn"],span+i[class*=" icn"]{
	margin-left: 0.5ch;
}

/* ******************** animated icon expander ********************* */
.icnExpander::before{
	display: inline-block;	/* can't transform inline elements */
	width: 0.75em;	/* slightly wider due to rotate */
	text-align: center;
	transition: transform 0.25s linear;
}
[data-toggle="collapse"] .icnExpander::before,
.collapser .icnExpander::before{	/* use .collapser if you don't use [data-toggle="collapse"] and instead control collapse with javascript but want styling */
	transform: rotate(90deg);
}
[data-toggle="collapse"]:not(.collapsed) .icnExpander.left::before,
.collapser:not(.collapsed) .icnExpander.left::before{
	transform: rotate(-90deg);
}
[data-toggle="collapse"].horizontal .icnExpander::before,
.collapser.horizontal .icnExpander::before{
	transform: rotate(180deg) !important;
}
[data-toggle="collapse"].horizontal:not(.collapsed) .icnExpander::before,
.collapser.horizontal:not(.collapsed) .icnExpander::before{
	transform: rotate(360deg) !important;
}

/* ******************** copy to clipboard ********************* */
input.click-to-copy,
.click-to-copy:not(:empty){
	cursor: copy !important;
}
.copied:has(+input.copied)::before,
.copied::before{
	position: absolute;	/* not restrained to container */
	z-index: 4; /* group controls have 3! */
	padding-left: 0.25em;
	padding-right: 0.25em;
	font-weight: bold;
	font-size: larger;
	color: blue;
	opacity: 0; /* for fade */
	transition: opacity 1.5s ease-in-out;
}
.copied:has(+input.copied.animated)::before,
.copied.animated::before{
	content: 'Copied' !important;
	animation: fadeOutUp 1.5s;
}

/* ******************** html5 validation/max-length-indicators ********************* */

/* display maxlength as line inside input (these should be the same as the sMaxLenSelector in the .js) */
input[type="text"][maxlength]:not(.no-maxlength-indicator):valid:focus,
input[type="tel"][maxlength]:not(.no-maxlength-indicator):valid:focus,
input[type="email"][maxlength]:not(.no-maxlength-indicator):valid:focus,
input[type="url"][maxlength]:not(.no-maxlength-indicator):valid:focus,
input[type="password"][maxlength]:not(.no-maxlength-indicator):valid:focus,
textarea[maxlength]:valid:focus{
	--background-height: 0.125rem;
	background-position: left bottom;
	background-size: 0 var(--background-height);
	background-repeat: no-repeat;
	background-image: linear-gradient(0deg, cornflowerblue, cornflowerblue);
}

.maxlength-indicator-animated:valid {
	transition: background-size 0.5s linear;
}

/* little red dot indicating invalid */
.form-control.invalid::after,label.invalid::after,span.invalid::after,legend.invalid::after,					/* manual class add/remove to indicate invalid */
.form-control:invalid,
.form-vertical label.upload > input[type="file"]:invalid + span,
.form-horizontal label.upload > input[type="file"]:invalid + span,
.custom_file:not([disabled],[readonly]) input[type="file"]:invalid + input[type="text"][readonly],
select.form-control:invalid+.chosen-container>a,
select.form-control:invalid+.select2>.selection>.select2-selection{
/* select.form-control:invalid+.select2{ old v4.0.3 */
	/* small red dot */
	background-image: linear-gradient(0deg, red, red) !important;	/* invalid is more important than maxlength indicator */
	background-size: 0.35em 0.35em !important;
	background-position: top 3px left 3px !important;
	background-repeat: no-repeat;
}
.form-control.invalid::after,label.invalid::after,span.invalid::after,legend.invalid::after{
	content: '\a0';
	display: inline-flex;
	width: 0.35em;
	background-position: top 0px left 0px !important;
}
/* debug ; missing type or maxlength attribute */
input.form-control:not([type]),
input[type="text"]:not([readonly],[maxlength],.no-maxlength-indicator,.chosen-search-input),
input[type="search"]:not([readonly],[maxlength],.no-maxlength-indicator,.select2-search__field),
input[type="tel"]:not([readonly],[maxlength],.no-maxlength-indicator),
input[type="email"]:not([readonly],[maxlength],.no-maxlength-indicator),
input[type="url"]:not([readonly],[maxlength],.no-maxlength-indicator),
input[type="password"]:not([readonly],[maxlength],.no-maxlength-indicator),
input[type="number"]:not([readonly],[min],.no-maxlength-indicator),
input[type="number"]:not([readonly],[max],.no-maxlength-indicator),
textarea:not([readonly],[maxlength],.no-maxlength-indicator){
  background-color: red;
}

/* *********************** circular button ********************* */
.btn-circle{
  text-align: center;
	padding: 0;
  border-radius: 50%;
	width: 38px;
	height: 38px;
}
.btn-circle.btn-sm{
	width: 32px;
	height: 32px;
}
.btn-circle.btn-lg{
	width: 49px;
	height: 49px;
}


/* pseudo readonly for some elements that don't support readonly */
select[readonly],
select[readonly]+span.select2 .select2-selection,
.bootstrap-select select[readonly]+button.dropdown-toggle,
input[type="checkbox"][readonly],input[type="checkbox"][readonly]+label[for],
input[type="radio"][readonly],input[type="radio"][readonly]+label[for],
.form-check[readonly]{
	pointer-events: none;
	cursor: no-drop;
}
select[disabled],
select[readonly]{
	appearance: none;
	/* for Firefox */
	-moz-appearance: none;
	/* for Chrome */
	-webkit-appearance: none;
}
select[disabled]+span.select2 .select2-selection__arrow,
select[readonly]+span.select2 .select2-selection__arrow,
.bootstrap-select select[readonly]+button.dropdown-toggle::after{
	visibility: hidden;
}

select[readonly] option,select[readonly] optgroup{
	display:none;
}
select.form-control[disabled],
select.form-control[readonly]{
	padding-left: calc(4px + .75rem);
	padding-top: calc(0.5px + .375rem);
}
select.form-control.form-control-sm[disabled],
select.form-control.form-control-sm[readonly]{
	padding-left: calc(4px + .5rem);
	padding-top: calc(0.5px + .25rem);
}
.form-control[data-name]:not([class*="badge"]), /* should be class|="badge" but doesnt work?! */
.pre[readonly],
select[readonly],
select[readonly]+span.select2 .select2-selection,
.bootstrap-select select[readonly]+button.dropdown-toggle{
	background-color: #e9ecef;
}
input[type="checkbox"][readonly],
input[type="radio"][readonly],
.form-check[readonly]{
	opacity: 0.6;
}
/* ------ custom file prefixed with browse button and optional trailing clear button ----------*/
.custom_file input[type="file"] {
	position: absolute;
	opacity: 0;		/* purposely not display: none so custom validity works */
}

.custom_file[disabled] [type="file"],
.custom_file[disabled] .browse,
.custom_file[disabled] .filename,
.custom_file[disabled] .clear{
	pointer-events: none;
}
.custom_file[disabled] .filename{
	background-color: #eee  !important;
}
.custom_file[disabled] .browse,
.custom_file[disabled] .clear{
	opacity: .5;
}

/*.custom_file [type="file"]:disabled + .filename{
	background-color: #eee  !important;
	pointer-events: none;
}*/

.custom_file:not([disabled],[readonly]) input[type="text"][readonly] {	/* override bootstrap */
	background-color: white;
}
.file-upload-each-size,
.file-upload-total-count,
.file-upload-total-size{
	font-weight: bold;
	color: #0040ff;
}
.file-upload-ext{
	font-weight: bold;
}
.tooltip .file-upload-each-size,
.tooltip .file-upload-total-count,
.tooltip .file-upload-total-size{
	color: yellow;
}

/* TOOLTIPS */

/* defaults */
.tooltip {
	--color: black;
	--text-color: white;
}
.tooltip-inner {
	max-width: 400px;
	white-space: pre-wrap;
	background-color: var(--color);
	color: var(--text-color);
}
.bs-tooltip-top .arrow::before,
.bs-tooltip-auto [x-placement^="top"] .arrow{
	border-top-color: var(--color);
}
.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto [x-placement^="bottom"] .arrow{
	border-bottom-color: var(--color);
}
.bs-tooltip-left .arrow::before,
.bs-tooltip-auto [x-placement^="left"] .arrow{
	border-left-color: var(--color);
}
.bs-tooltip-right .arrow::before,
.bs-tooltip-auto [x-placement^="right"] .arrow{
	border-right-color: var(--color);
}
.tooltip hr{
	border-color: var(--text-color);
	margin-top: 0;
	margin-bottom: 0;
}

.ttClientHelp{
	--color: #fcffdf;
	--text-color: black;
}
.ttClientHelp .tooltip-inner {
	box-sizing: content-box;
	max-width: 30rem;
	white-space: unset;
}

/* ------ custom date range optionally prefixed with a field selector ----------*/
.input-group.custom_date-range select{
	margin-left: .75rem;
	border: none;
	outline: none;
	background-color: transparent;
}
.input-group.custom_date-range select:hover{
	background-color: white;
}
.input-group.custom_date-range .input-group-prepend{
	z-index: 1;
}
.input-group.custom_date-range .input-group-prepend .input-group-text{
    border-right: none;
}
.input-group.custom_date-range .input-group-prepend .input-group-text~.form-control{
	border-radius: 0;
}
.input-group.custom_date-range .input-group-prepend~.input-group-append{
	z-index: 0;
}
.input-group.custom_date-range .input-group-prepend~.input-group-append:focus-within{
	z-index: 3;
}
.input-group.custom_date-range .input-group-append~.input-group-append{
	z-index: 2;
}
.input-group.custom_date-range .input-group-append button{
	border-radius: 0;
    border: 1px solid silver;
}
.input-group.custom_date-range .input-group-append>.form-control{
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}


/* **** FIELD PICKER (IMPLEMENTED AS PREPENDED ADD-ON TO AN INPUT-GROUP ***** */
.input-group-prepend.clsFieldPicker select{
	border: none;
	outline: none;
	background-color: transparent;
}
.input-group-prepend.clsFieldPicker .input-group-text{
	background-color: #ffffe0;
}
.input-group-prepend.clsFieldPicker select:hover{
	background-color: white;
}


/* *** FULLCALENDAR CUSTOM STYLES ******************************************* */
.fc-view-container{
	overflow: auto;
}
/* stop list moving around when emptying + re-populating */
.ca-calendar[data-view-type="dayGridMonth"] .fc-view-container{
	overflow-y: scroll;
}
/* height + contentHeight don't work now flexed so force auto height */
.ca-calendar[data-view-type="dayGridMonth"] .fc-row.fc-week.table-bordered,
.ca-calendar[data-view-type="dayGridMonth"] .fc-scroller{
	height: auto !important;
}

.fc-axis,
.fc-axis.fc-time{
	width: 2em !important;
	min-width: 2em !important;
}

/* calendar time-slot sidebar styles */
.fc tr[data-time*=":00:"] td {
	border-top-color: darkgrey;
}
.fc tr[data-time*=":15:"] td,
.fc tr[data-time*=":30:"] td,
.fc tr[data-time*=":45:"] td{
	border-top-style: dotted;
}

.the-hour {
	font-weight: bold;
	position: relative;
	top: -6px;
}

.the-mins,
.only-mins {
	font-size: xx-small;
	position:relative;
	margin-right: -2px;
}
.the-mins {
	top:-10px;
}
.only-mins {
	top:-8px;
}

/* calendar event styles */
.editable.fc-event,
.editable.fc-list-item {
	cursor: pointer;
}
.editable.fc-event:hover {
	filter: brightness(110%);
}
.editable.fc-list-item:hover {
	filter: brightness(75%);
}

/* *** dropdown menu submenu ************************************************ */
.dropdown-item-submenu {
	position: relative;
}
/* position slightly overlapping parent menu */
.dropdown-item-submenu>.dropdown-menu {
  top: -0.5em;
  left: 100%;
  margin-top: 0;
  margin-left: -0.25em;
}
.dropdown-item-submenu:hover>.dropdown-menu {
	display: block;
}
.dropdown-item-submenu {
	position: relative;
}
/* right > */
.dropdown-item-submenu::after {
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
	position: absolute;
	top: calc( 50% - 0.25em);
  right: 0.5em;
}

/* *** !MISC **************************************************************** */
/*
	Make the button appear pressed down when used to open/close for a collapsible panel (eg. see Assets)
	Note: styles were taken from BS3 since the `btn-default` class dosen`t really do a lot since BS4
				introduced: .btn-outline-* classes as well as the other .btn-* classes
*/
/* collapse colour */
button.visualPressed.btn-outline-secondary[aria-expanded="true"]{
	color: #333;
	background-color: #e6e6e6;
	border-color: #adadad;

	background-image: none;
	outline: 0;
	-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
	box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}

/* collapse indicator */
button.visualPressed .clsCaret::before{
	transition: transform 200ms ease-in;
	font-family: var(--icon-font-family);
	font-weight: bold;
	transform: rotate(0deg);
	vertical-align: middle;
	display: inline-block;
	content: "\f0da";
	width: 0.75em;
}
button.visualPressed[aria-expanded="true"] .clsCaret::before {
	transform: rotate(90deg);
	transition: transform 200ms ease-in;
}

/* used for page based forms (see HR discussion for example) */
.form-fixed-width{
	max-width: 1140px;	/* override as needed */
}

/* *** PRINT STYLES ********************************************************* */
.visible-print{
	display: none !important;
}

@media print {
	.visible-print{
		display: block !important;
	}
  .hidden-print {
    display: none !important;
  }
	.print-heading1 {
		width: 100%;
	}
	.print-heading2 {
		width: 100%;
		border-bottom: 1px solid black;
	}
}

/* *************** POPOVER WITH WINDOW MAX/RESTORE/CLOSE ******************/
.popover-header .icn{
	line-height: 1;
}
.file-preview-titlebar,
.file-preview-title,
.file-preview-buttons{
	display: flex;
	align-self: stretch;
	align-items: center;
}
.popover-header button{
  border: 0;
	display: flex;
	align-self: stretch;
	align-items: center;
	justify-content: center;
	color: #666;
	font-size: 1rem;
	width: 2.5rem;
	background-color: transparent;
	transition: background-color .5s, color .5s;
}
/* if maxmised, unset element style grab cursor */
.popover[data-window-state="maximised"] [style*="grab"].file-preview-title{
	cursor: unset !important;
}
.popover:not([data-window-state="maximised"]) [style*="grab"].file-preview-title:hover{
	background-color: #beeaf9;
}
.popover:not([data-window-state="maximised"]) .popover-header .active-drag-handle.file-preview-title{
	cursor: grabbing !important;
	background-color: #00a0d7;
}
.popover.dragging .arrow,
.popover.dragged .arrow{
	display: none; /* if popover moving/moved, hide arrow that pointed to source element */
}
.popover-header button.close:hover{
	color: white;
	background-color: rgba(232, 17, 35, 1);
}
.popover-header button[data-window-set]:hover{
	color: #222;
	background-color: rgba(0,0,0,.075);
}
.popover[data-window-state="maximised"]{
	max-width: none !important;
	max-height: none !important;
	transform: none !important;
	margin: 0 !important;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
}
.ttPreviewDoc[data-window-state="maximised"] .popover-header button[data-window-set="maximise"],
.ttPreviewDoc:not([data-window-state="maximised"]) .popover-header button[data-window-set="restore"]{
	display: none;
}

/* *************** SELECT2 ******************/
/* keep original styling/width/etc as HTML validation uses it to point to center of control (it is position: absolute anyway!) BUT it does need to be visible so can be focused */
.form-control.select2-hidden-accessible{
	pointer-events: none;
	color: transparent !important;
	background-color: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
}

/* allow user to resize dropdown list */
.select2-results{
  resize: both;
	overflow: hidden; /* needed for resize property */
	height: 33vh;	/* default height for initial show */
	min-height: 200px;
}
.select2-results__options{
	max-height: 100% !important;
}
/* */

/* handle our blank option */
.select2-results__option:empty::before{
	content: "\a0";
}
.select2-container .select2-selection,
.select2-search .select2-search__field{
	padding: .375em .75em;
}
.select2-search{
	padding: 0 0.75em 0 0;	/* clickable arrow to close up */
}
/* allow shadow */
.select2-container--bootstrap .select2-dropdown{
	overflow:visible;
}
/* border on just the search part */
.select2-dropdown {
	border: none;
}
/* border around search */
.select2-dropdown .select2-search{
	border: 1px solid #80bdff;
	border-radius: 0.25em;
	box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
}
/* shadow */
.select2-results{
	border: 1px solid #767676;
	border-radius: 0;
	box-shadow: 2px 3px 3px rgb(0 0 0 / 25%);
	position: relative;	/* pos + bg to stop blur bleeding into list */
	background-color: white;
}
/* already currently selected */
.select2-container--bootstrap .select2-results__option[aria-selected=true]{
	color: white;
	background-color: var(--dropdown-active-color);
}
.select2-container--bootstrap .select2-results__option--highlighted{
	color: black;
	background-color: var(--dropdown-hover-color);
}
/* put Search... placeholder overtop of label */
.select2-dropdown{
	--input-height: calc(1.5em + .75rem + 1px);
	top: calc( var(--input-height)*-1 );
}
/* handle select2 ABOVE input */
.select2-dropdown--above{
	display: flex;
	flex-direction: column;
}
.select2-dropdown--above .select2-results{
	z-index: 1; /* paint shadow over focus blur */
}
.select2-dropdown--above>.select2-search{
	order: 1; /* put AFTER results list */
}
.select2-dropdown.select2-dropdown--above{
	top: var(--input-height);
}
/* ABOVE */

.select2-container--bootstrap .select2-search--dropdown .select2-search__field{
	border: none;
}
/* make option look more like a regular one */
.select2-results__options>.select2-results__option{
	padding: 0 0 0 0.75rem;	/* size tweaked to match regular select list */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
/* make drop arrow look more like a regular one */
.select2-container--bootstrap.select2-container .select2-selection--single .select2-selection__arrow{
	top: 0;
	bottom: 0;
	right: 0;
	width: 1em;
}
.select2-container--bootstrap.select2-container .select2-selection__arrow b,
.select2-container--bootstrap.select2-container.select2-container--open .select2-selection__arrow b,
.select2-search::after{
	border: none;
	border-bottom: 0.15em solid #202040;
	border-right: 0.15em solid #202040;
	position: absolute;
	top: calc(calc(100% - 0.65em)/2);
	left: unset;
	right: 0.4em;
	width: 0.45em;
	height: 0.45em;
	transform: rotate(45deg);
	margin-top: unset;
	margin-left: unset;
}
/* when dropped, create an arrow so can click to drop back up */
.select2-search{
	position: relative;
}
.select2-search::after{
	content: '';
	right: 0.3em; /* from right: 0.4em - 0.1em */
}