:root{
	--secondary-color-rgb: 0,121,192;
	--secondary-text-color-rgb: 255,255,255; /**/

	--accent-color-rgb: 63,128,199;
	--accent-text-color-rgb: 255,255,255;

	--selected-color-rgb: 148,176,209;
	--selected-text-color-rgb: var(--accent-text-color-rgb);

	/* menu / dropdown */
	--hover-color-rgb: 125,170,220;

	--active-tab-color-rgb: 221, 236, 244;
	--active-tab-text-color-rgb: 0,0,0;

	--thead-color-rgb: var(--accent-color-rgb);
	--thead-text-color-rgb: 255,255,255;
	--thead-hover-color-rgb: 95,150,210;
	--tbody-hover-color-rgb: 255,195,235;

	--stripe-color-rgb: 240,250,255;

	--tfoot-color-rgb: var(--accent-color-rgb);
	--tfoot-text-color-rgb: 255,255,255;
}

:root{
	--sidebar-width: 225px;

	--icon-font-family: "Font Awesome 6 Free";

	--secondary-color: rgb(var(--secondary-color-rgb));
	--secondary-text-color: rgb(var(--secondary-text-color-rgb));

	--accent-color: rgb(var(--accent-color-rgb));
	--accent-text-color: rgb(var(--accent-text-color-rgb));

	--selected-color: rgb(var(--selected-color-rgb));
	--selected-text-color: rgb(var(--selected-text-color-rgb));

	--hover-color: rgb(var(--hover-color-rgb));

	--thead-color: rgb(var(--thead-color-rgb));
	--thead-text-color: rgb(var(--thead-text-color-rgb));
	--thead-hover-color: rgb(var(--thead-hover-color-rgb));
	--tbody-hover-color: rgb(var(--tbody-hover-color-rgb));
	--stripe-color: rgb(var(--stripe-color-rgb));

	--tfoot-color: rgb(var(--tfoot-color-rgb));
	--tfoot-text-color: rgb(var(--tfoot-text-color-rgb));

	--active-tab-color: rgb(var(--active-tab-color-rgb));
	--active-tab-text-color: rgb(var(--active-tab-text-color-rgb));

	--disabled-color: #e9ecef; /* as per bootstrap */
	--readonly-color: #f4f4f4; /* we will make readonly a lighter gray */

	--box-shadow-subtle: 2px 2px 4px rgba(0,0,0,0.1);
	--box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
	--border-color-formcontrol: #ced4da;	/* as per bootstrap */
	--border-radius-formcontrol: 0.25rem;	/* as per bootstrap */
	--box-shadow-focus: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);	/* bootstraps focus glow for a formcontrol */
}

html,body{
	height: 100%;
	overflow-y: hidden;
}

/* one we are live, enable these:
body[data-baseurl$=".dev"] #navTopbar,
body[data-baseurl$=".dev"] #navSidebar{
	background-color: yellow;
} */
body[data-standalone] #navTopbar .navbar-brand,
body[data-standalone] #navTopbar .navbar-toggler,
body[data-standalone] #navTopbar .navbar-collapse{
	display: none !important;
}

/* 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;
}
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;
}

/* bootstrap buttons as tab get background-color: buttonface! */
.nav.nav-tabs .nav-item button.nav-link {
	background-color: transparent;
}

a[disabled]{
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;	/* disabled will stop keyboard focusing */
}

.hidden, .filtered{
	display: none;
}

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

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

.no-transitions,.no-transitions *{
	transition: none;
}
.no-animations,.no-animations *{
	animation: none;
}

/* override bootstrap colours */
.dropdown-header{
	font-weight: bold;
	color: var(--accent-color);
	padding: .25rem .75rem;
}
.bg-accent{
	background-color: var(--accent-color);
	color: var(--accent-text-color);
}

/* **************** SHADOWS ON CONTROLS ***************** */
.modal-content,
.dropdown-menu,
.select2-dropdown,
.btn:not(:focus):not([disabled]){	/* default stronger shadow for buttons */
	box-shadow: var(--box-shadow);
}
.tooltip,
.popover{
	filter: drop-shadow( var(--box-shadow) );
}
.input-group.focus-group,
.filePickerContainer,
.form-control:not(:focus):not([disabled]),
input.form-check-input:not(:focus):not([disabled]),
.select2:not(.select2-container--focus){
	box-shadow: var(--box-shadow-subtle);
}
/* stop shadow on individual controls when in an input-group / custom control */
.input-group .form-control:not([disabled]),
.input-group .btn:not([disabled]),
.filePickerContainer .form-control,
.filePickerContainer .btn,
.input-group .select2{
	box-shadow: unset !important;
}

.dropdown-menu .dropdown-item.active:hover{
	filter: brightness(1.5);
}


/* **************** HOME PAGE ***************** */
#page-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}
#page-content-wrapper {
    flex-basis: 100%;
    flex-grow: 1;
    overflow-y: auto;
}
#page-content-wrapper>.container-fluid {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.layout-flex.hidden {
	display: none;
}
@media print{
	#divMainContent{
		/* hide scrollbars on print */
		overflow-y: visible;
	}
}
/* 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;
}
body[data-iframe]{
	background-color: transparent;
}
body[data-iframe] #divMain{
	display: none;
}


#imgPrintableLogo{
	height: 6rem;
}
#divRoutineContent{
	padding: .5rem;
	flex-basis: 100%;
	flex-grow: 1;
	overflow-y: auto;
	display: flex;
}
#divRoutineTopBar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-transform: capitalize;
	font-size: 18pt;
	font-weight: bold;
	color: var(--accent-text-color);
	background-color: var(--accent-color);
}
#divRoutineTopBar .logo a {
	display: inline-block;
	width: 11rem;
	height: 4rem;
}
#divRoutineTopBar .logo img {
	width: 100%;
	height: 100%;
}
#divRoutineTopBar .btn {
	margin-right: 1rem;
	background-color: white;
	border-color: white;
	min-width: 10rem;
}

/* **************** FLEX UTIL CLASSES ***************** */
.layout-flex{
  display: flex;
	flex-basis:100%;
	flex-direction:column;
	min-height:1px; /* prevent size of this flex-child exceeding parent (scroll fix)*/
}
.scroll-flex{
	overflow-y:auto; /* allows this element to be scrollable inside layout flex */
}
.scroll-flex-forced{
	overflow-y:scroll;
}
.scrolly-height-100 {
	overflow-y:auto;
	height: 100%;
}
@media print{
	.scrolly-height-100 {
		/* hide scrollbars on print */
		overflow-y: visible;
	}
}


/* **************** THIN PROGRESS LINE ***************** */
/* `loading bar` to appear over modal dialogs */
#nprogress .bar {
  background: #29d;
  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;
}


/* **************** OVERRIDE BOOTSTRAP COLORS ***************** */
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:not(.active):hover{
	background-color: var(--hover-color);
}
.nav-pills .nav-link.active,.nav-pills .nav-link:active,.nav-pills .show>.nav-link,
.dropdown-item:active,.dropdown-item.active,.nav-tabs .nav-item .na{
	color: var(--selected-text-color);
	background-color: var(--selected-color);
}

.nav-tabs .nav-item button.nav-link.active {
	background-color: var(--active-tab-color);
	color: var(--active-tab-text-color);
}

/* **************** CUSTOM TAB HANDLER ***************** */
.tab-container {
	overflow: hidden;
	width: 100%;
}
.tab-pane {
	padding: 0.2rem 0;	/* only need a T+B padding on regular tabs */
	height: 100%;
}
/* active tab panes are made visible with display:block, this overrides to use display flex instead (and allows scroll) */
.tab-content.layout-flex > .tab-pane.active,
.tab-container.layout-flex > .tab-pane.active{
  display: flex;
	flex-basis: 100%;
	flex-direction: column;
	min-height: 1px; /* prevent size of this flex-child exceeding parent (scroll fix)*/
}
.tab-content.layout-flex > .tab-pane:not(.scroll-flex-none){
	overflow-y: auto; /* allows this element to be scrollable inside layout flex */
}
/* 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: calc(0.2rem + 2px);
}


/* **************** TABLE HELPER ***************** */
/* when header th checkbox not visible, reserve space */
table.table-row-check th.CHB input[type="checkbox"][hidden]{
	visibility: hidden;
	display: block !important;
}
.table-helper > .table-container.layout-flex > .table-scroll-container.scroll-flex,
.table-helper > .table-container.layout-flex > .table-scroll-container.scroll-flex-forced{
	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)*/
}
.list-actions, .table-actions,
.fc-toolbar.fc-header-toolbar{	/* bring title + controls closer to the calendar */
	margin-top: 0;
	margin-bottom: .5rem;
}

.fixedtfoot {
	background-color: var(--tfoot-color);
	color: var(--tfoot-text-color);
}
.table-helper {
	border: 1px solid var(--border-color-formcontrol);
}
.table thead tr:last-child th, .stickythead thead tr:last-child th {
	background-color: var(--thead-color);
	color: var(--thead-text-color);
	font-weight: 500;
}
.table thead tr:last-child th::after, .stickythead thead tr:last-child th::after {
	font-weight: 700;
}


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

.memo-view {
	overflow-y: auto;
	white-space: pre-wrap;
}
/* .rows allows using css --rows: n to specify height */
.memo-view.rows {
	--rows: 5;
	height:  calc((1.5em * var(--rows)) + .75rem + 2px);
}

.ellipsis,
.form-control[data-width]{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.form-control[data-name]{
	background-color: var(--readonly-color);
}

/* 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;
}
/* an icon with following span of text */
i[class*=" icn"]~span, i[class^=icn]~span{
	margin-left: 0.5ch;
}

/* as a general rule, labels are bold to help readability */
label:not(.form-check-label):not(.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{
	margin-bottom: 0.1rem;
}

/* for input groups that have a 'default' action button - glow the entire group + any buttons in it */
.input-group.focus-group:focus-within {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
	border-radius: 0.25rem;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
/* but stop the individual glow */
.input-group.focus-group:focus-within .form-control:focus,
.input-group.focus-group:focus-within .btn{
	-webkit-box-shadow: none;
	box-shadow: none;
	outline: 0;
}
.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:not(.form-check-label){
	margin-right: 0.5rem;
}
/* make some space-between controls */
.form-inline .form-group:not(:last-child){
	margin-right: 2ch;
}

/* use to move an unlabeled checkbox/radio button down */
.form-row label.empty,
.row label.empty{
	display: block;
}
.form-row label.empty::before,
.row label.empty::before{
	content: "\a0";
}

/* space out all rows */
.form-row+.form-row:not(.no-row-spacing){
	margin-top: .5rem;
}
.form-row .form-group{
	margin-bottom: 0;
}
/* this will ensure a following check/radio + label are vertically centered to a line with label+input below */
label.empty:empty+.form-check{
	height: calc(1.5em + .75rem + 2px);	/* same as a form-control */
	display: flex;
	align-items: center;
}
/* now uses flexbox to center */
label.empty:empty+.form-check>.form-check-input{
	position: static;
	margin-top: 0;
}

/* checkbox/radio same size as text */
input[type="checkbox"],
input[type="radio"]{
	height: 1.25em;
	width: 1.25em;
/* we now use flex to center the checkbox
	display: inline-block;
	vertical-align: bottom; */
}
/* spacing between a radio/checkbox and a label wrapping it [the non-standard bootstrap way] */
label>input[type="checkbox"],
label>input[type="radio"]{
	margin-right: 0.25em;
}
.form-check-input{
	margin-top: 0.2em;	/* adjust from bootstrap default due to new 1.25em size */
}
/* space between checkbox and label is not clickable when using a margin so convert to padding on the label instead */
.form-check-inline .form-check-input {
	margin-right: unset;
}
/* bootstrap : spacing between a checkbox/radio now uses padding instead of margin so clickable */
.form-check-input~label.form-check-label{
	padding-left: 0.3125em;	/* use padding instead of margin so empty space can be clicked */
}
[class^="col"] label~.text-muted{
	height: calc(1.5em + .75rem + 2px);
	padding: 0.375rem 0.75rem;
}

/* 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;
	cursor: pointer;
}
/* browser fix */
textarea{
	cursor: auto;	/* overwise, mouse over scrollbar in textarea's leaves it as the text-cursor "|" */
}
/* prevent textarea resize when in a modal */
.modal-content textarea {
	resize: none;
}

/* fix cursor ; bootstrap 4 doesn't "not-allowed" the cursor anymore, so neither should select2 */
select[readonly]+.select2.select2-container .select2-selection.select2-selection--single,
select[disabled]+.select2.select2-container .select2-selection.select2-selection--single,
.select2.select2-container.select2-container--disabled .select2-selection.select2-selection--single {
  cursor: auto;
}
/* fix height of an empty option for select2! */
li.select2-results__option:empty::before{
	content: "\a0";
}

/* wider button */
.btn.wide{
	min-width: 15ch;
}

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(.badge-success):not(.badge-info):not(.badge-warning):not(.badge-danger):not(.badge-success):not(.badge-primary):not(.badge-secondary):not(.badge-important) {
	/* background-color: #777;
	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);}
}
/* badges are moved up */
a span.badge,
button span.badge {
  position: relative;
  top: -0.5rem;
	margin-left: 0.5ch;
}


/* ********************** simple pie chart to display a % ******************* */
/*
eg, <div class="pie" style="--pct: 20">	<div class="pie-label">20%</div> </div>
	.pie-label optional
*/

/* registering this variable means we can animate it : doesn't work on firefox/safari */
@property --pct{
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
.pie {
	--size: 1.75em;	/* overall size of element */
  --pct: 0;				/* percentage to show */
  --segment-thickness: 0.25em;	/* thickness of border when not using .pie-segment-fill	*/
  --segment-color: #bbb;

  width: var(--size);
  height: var(--size);
  position: relative;
  display: inline-grid;
  place-content: center;
}
.pie::before,
.pie::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.pie::before {
  inset: 0;
	background:
	    radial-gradient(farthest-side,var(--segment-color) 98%,#0000) top/var(--segment-thickness) var(--segment-thickness) no-repeat,
	    conic-gradient(var(--segment-color) calc(var(--pct)*1%),#0000 0);
	  -webkit-mask: radial-gradient(farthest-side,#0000 calc(99% - var(--segment-thickness)),#000 calc(100% - var(--segment-thickness)));	/* chrome */
	          mask: radial-gradient(farthest-side,#0000 calc(99% - var(--segment-thickness)),#000 calc(100% - var(--segment-thickness)));
}
.pie::after {
  inset: calc(50% - var(--segment-thickness)/2);
  background: var(--segment-color);
  transform: rotate(calc(var(--pct)*3.6deg)) translateY(calc(50% - var(--size)/2));
}
.pie.pie-segment-fill::before,	/* no round ends for filled pie */
.pie.pie-no-round-ends::before {
  background-size: 0 0, auto;
}
.pie.pie-segment-fill::after,	/* no round ends for filled pie */
.pie.pie-no-round-ends::after {
  content: none;
}
.pie.pie-segment-fill::before{
	background: conic-gradient(var(--segment-color) calc(var(--pct)*1%),#0000 0);
	-webkit-mask: unset;
	mask: unset;
}
.pie.pie-outline{
	border-radius: 50%;
	outline: 1px solid var(--segment-color);
	outline-offset: -1px;
}

.pie-label{
	font-size: calc(var(--size) / 2.5);
	color: var(--primary-color);
}
.pie.pie-segment-fill .pie-label{
	color: white;
	mix-blend-mode: difference;	/* inverts text color where it overlays segment */
}

.pie.animate {
	animation: animated-pie 1s .5s both;
}
@keyframes animated-pie{
  from{--pct:0}
}


/* ************************* 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;
}
.panel-default>.panel-heading{
	background-color: #d2eff9;
}


/* **************** animation for auto-changed values *************** */
.feedback-changed{
	transition: background-color;
	animation: feedback_changed 1s 1 ease-out;
}
@keyframes feedback_changed {
	25% {
		background-color: var(--primary);
	}
}
@keyframes feedback_invalid {
	25% {
		background-color: var(--danger);
	}
}
.feedback-enabled{
	animation: feedback_enabled 1s 1 ease-out;
}
@keyframes feedback_enabled {
	25% {
		background-color: #aaaaaa;
	}
}

/* ************************* customized select ********************** */
option.blank-placeholder:disabled,
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] */
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: var(--secondary-color);
}
option.option-divider.size-2 {
		font-size: 0.5px;
}
option.option-divider.size-3 {
		font-size: 0.75px;
}
option.option-divider.size-4 {
		font-size: 1px;
}

/* *************** SELECT2 ******************/
/* 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]{
	background-color: #81C1FF;
	color: white;
}
/* put Search... placeholder overtop of label */
.select2-dropdown.select2-dropdown--below{
	top: calc(calc(1.5em + .75rem + 1px) *-1);
}
.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.35em;
	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;
}

/* ************************* 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"] [role="alert"] {
	box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.3);
}
div[data-notify="container"]  {
	width: unset !important;
	min-width: 10rem;
	max-width: 33%;
}
div[data-notify="container"] .close~[data-notify="message"]{
	padding-right: 1.25rem;	/* reserve move space for the x */
	white-space: pre-wrap;
}

/* ************************ general modal restyling ******************* */
.modal-header{
	padding: 0.25rem 0.5rem;
	align-items: center;
	color: var(--accent-text-color);
	background-color: var(--accent-color);
}
.modal-footer{
	padding: 0.75rem;
}
.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: '\f00d';
	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 styling ********************** */
table{font-size: inherit;}

.table{
	border-collapse: separate;
	border-spacing: 0;
}
/* rectangle highlight bar */
.table-hover>tbody>tr:not(.active):not(.selected):hover,
.table>tbody>tr.tr-hover:not(.active):not(.selected):hover{
	/* outline: 1px solid var(--accent-color);
	outline-offset: -2px; */
	background-color: var(--tbody-hover-color);
}

/* striped effect */
.table-striped.filtered-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 .list-row:nth-of-type(odd){
	background-color: var(--stripe-color);
}
/* 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;
}
/* row selected - medium */
.table>tbody>tr.selected{
	/* background-image: linear-gradient(#EBF4FE,#CFE4FE); */
	background-color: var(--thead-hover-color) !important; /* override stripe */
}
/* 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(#DCEBFC,#C1DBFC); */
	background-color: var(--tbody-hover-color) !important; /* override stripe */
}

/* stop scrollbars appearing while animations are playing */
body:not(.clsForceScrollbar).row-animating:not(.row-showing),
body:not(.clsForceScrollbar).row-animating:not(.row-showing) table.row-animating{
 	/* note overflow: hidden would be preferred but causes sticky headings to disappear */
	contain: layout;
}
tr.row-deleting,tr.row-inserting,tr.row-updating{
	pointer-events: none;
}
tr.row-updating,tr.row-inserting,tr.row-updated,tr.row-inserted{
	background-color: #fffde7 !important;
}
tr.row-deleting>td{
	background-color: #f9c8c8 !important;
}
tr.row-deleting{
	animation-name: flipOutX;
	animation-fill-mode: both;
	animation-duration: 1s;
}
tr.row-inserting>td{
	animation-name: fadeInUp;
	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;
}
tr.invalid.row-showing>td{
	transition: background-color;
	animation: feedback_invalid 1s 1 linear;
	animation-iteration-count: 2;
}

/* *************** table with sticky headers/footer/actions *************** */
/* a table container with a fixed height (usually used in dialogs) */

.table-container{
	position: relative;
}
.table-helper:not(.has-footer) .table-footer{
	display: none;
}
.table-helper.has-footer .table-container{
	border-top: 1px solid #ddd;
}
.table-helper.has-footer .table-container{
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
}
.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 */
	color: var(--thead-text-color);
	background-color: var(--thead-color);
	z-index: 1;
	top: 0;
}
/* optional footer for a table */
.table-footer{
	color: var(--thead-text-color);
	background-color: var(--thead-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{
	color: blue;
}
.info .name-lblCountSuffix:not(:empty)::before{
	content: ' ';
}
.info .value,
.info .name-lblCount,
.info .name-lblCheckedCount{
	font-weight: bold;
	color: black;
}
.info .name-lblFilteredCount,
.info .name-lblUnfilteredCount{
	font-weight: bold;
	color: purple;
}
.table-footer .name-divFilter{
	max-width: 50%;
	min-width: 30ch;
	width: 25%;
}

/* ********************* table column sorting ****************** */
body:not([data-table-op]) .table-container:not([data-sortable="N"]) thead>tr>th:not([data-sortable="N"]):hover{
	background-color: var(--thead-hover-color);
}

/* .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"]):not([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;
	right: 3px;
	bottom: 0.5rem;
	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;
}
body:not([data-table-op]) .table-container:not([data-sortable="N"]) thead>tr>th:not([data-sortable="N"]):not([data-sort-indicator]):hover::after,
.table-container thead>tr>th[data-sort-indicator]:hover::after{
	color: #38a3e6;
}
/* hovering indicates can sort */
body:not([data-table-op]) .table-container:not([data-sortable="N"]) thead>tr>th:not([data-sortable="N"]):not([data-sort-indicator]):hover::after,
.table-container:not([data-sortable="N"]) thead>tr>th:not([data-sortable="N"]):not([data-sort-indicator]):hover::after{
  content: "\f0dc" !important;
	vertical-align: middle;
}
/* currently sorting */
.table-container thead>tr>th[data-sort-indicator="~"]::after{
	content: "\f110";
	bottom: calc(0.5em - 4px);
	animation: fa-spin 2s infinite linear;
}
/* sorted small->large */
.table-container thead>tr>th[data-sort-indicator="A"]::after{
	content: "\f0de";
	bottom: calc(0.5em - 4px);
}
/* sorted large->small */
.table-container thead>tr>th[data-sort-indicator="D"]::after{
	content: "\f0dd";
	top: calc(0.5em - 4px);
}

/* ****************** table column widths ********************* */
/* stop data overflowing into other cells except for CHB (maybe an embedded menu) */
.table thead>tr>th:not(.CHB):not(.CTX),
.table tbody td:not(.CHB):not(.CTX){
	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;
}

.table thead>tr>th,
.table td{
	padding: 0.4rem;	/* redefine default bootstrap padding ; 0.75rem is too much */
	--extra_internal: 0.8rem;
}
.table.table-xs th,
.table.table-xs td {
  padding: 0.1rem; /* smallest possible without looking too cramped */
	--extra_internal: 0.2rem;
}

/* widths - define extra for each comma / padding */
.table thead>tr>th{
	--num-commas: 0ch;
	--extra: 0px;
}

.form-control{
	--num-commas: 0ch;
	--extra_internal: calc(0.75em * 2);
	--extra: 0px;
}	/* usual bootstrap padding left+right */
.table thead>tr>th[data-width].BDG,
.table thead>tr>th[data-width].BDGS{
	--num-commas: 0ch;
	--extra_internal: calc(1ch + 1ch);
	--extra: 0px;
}	/* badge only has 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));
	max-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]):not([data-seconds]),.form-control[data-type="T"]:not([data-width]):not([data-seconds]),
thead>tr>th[data-type="T"]:not([data-width])[data-seconds="N"],.form-control[data-type="T"]:not([data-width])[data-seconds="N"]{
	width: calc(var(--default-width-T) + var(--extra_internal) + var(--extra));
	max-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));
	max-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]):not([data-seconds]),.form-control[data-type="Z"]:not([data-width]):not([data-seconds]),
thead>tr>th[data-type="T"]:not([data-width])[data-seconds="N"],.form-control[data-type="T"]:not([data-width])[data-seconds="N"]{
	width: calc(var(--default-width-Z) + var(--extra_internal) + var(--extra));
	max-width: calc(var(--default-width-Z) + var(--extra_internal) + var(--extra));
}

/* 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));
	max-width: calc(var(--default-width-Z-S) + var(--extra_internal) + var(--extra));
}

/* 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));
}

thead>tr>th[data-width="4"][data-commas="Y"],.form-control[data-width="4"][data-commas="Y"],
thead>tr>th[data-width="5"][data-commas="Y"],.form-control[data-width="5"][data-commas="Y"],
thead>tr>th[data-width="6"][data-commas="Y"],.form-control[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"],
thead>tr>th[data-width="8"][data-commas="Y"],.form-control[data-width="8"][data-commas="Y"],
thead>tr>th[data-width="9"][data-commas="Y"],.form-control[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"],
thead>tr>th[data-width="11"][data-commas="Y"],.form-control[data-width="11"][data-commas="Y"],
thead>tr>th[data-width="12"][data-commas="Y"],.form-control[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"],
thead>tr>th[data-width="14"][data-commas="Y"],.form-control[data-width="14"][data-commas="Y"],
thead>tr>th[data-width="15"][data-commas="Y"],.form-control[data-width="15"][data-commas="Y"]
{--num-commas: 4ch;}

thead>tr>th[data-width="1"],.form-control[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"]{width: calc(2ch + var(--num-commas) + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="3"],.form-control[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"]{width: calc(4ch + var(--num-commas) + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="5"],.form-control[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"]{width: calc(6ch + var(--num-commas) + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="7"],.form-control[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"]{width: calc(8ch + var(--num-commas) + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="9"],.form-control[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"]{width: calc(10ch + var(--num-commas) + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="11"],.form-control[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"]{width: calc(12ch + var(--num-commas) + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="13"],.form-control[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"]{width: calc(14ch + var(--num-commas) + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="15"],.form-control[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"]{width: calc(16ch + var(--num-commas) + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="17"],.form-control[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"]{width: calc(18ch + var(--num-commas) + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="19"],.form-control[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"]{width: calc(20ch + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="25"],.form-control[data-width="25"]{width: calc(25ch + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="30"],.form-control[data-width="30"]{width: calc(30ch + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="35"],.form-control[data-width="35"]{width: calc(35ch + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="40"],.form-control[data-width="40"]{width: calc(40ch + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="45"],.form-control[data-width="45"]{width: calc(45ch + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="50"],.form-control[data-width="50"]{width: calc(50ch + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="60"],.form-control[data-width="60"]{width: calc(60ch + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="80"],.form-control[data-width="80"]{width: calc(80ch + var(--extra_internal) + var(--extra));}
/* images can also pick from these widths */
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="24"]{width: calc(24px + 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));}

/* **************** table column alignments ********************* */
thead>tr>th.AL,tbody>tr>td.AL,	/* align left */
thead>tr>th.S:not(.BDG):not(.BDGS):not(.AR):not(.AC),
tbody td.S:not(.BDG):not(.BDGS):not(.AR):not(.AC){	/* string but not badge */
	text-align: left;
}
thead>tr>th.AR,tbody>tr>td.AR,	/* align right */
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,
.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"]{
	text-align: right;
}
thead>tr>th.AC,tbody>tr>td.AC,	/* align center */
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,
thead>tr>th.BDGS,tbody>tr>td.BDGS{
  text-align: center;
}
tbody>tr>td.I,tbody>tr>td.BDG,
tbody>tr>td.I,tbody>tr>td.BDGS{
  padding: 0 0.15rem;	/* no need for y-padding as we center vertical */
	vertical-align: middle;
}

/* ******************** table cell badge column ********************* */
.table>tbody>tr>td.BDG,	/* have to use full selector to override bootstrap */
.table>tbody>tr>td.BDGS{
	vertical-align: middle;
	line-height: 1;
}
td.BDG>span,
td.BDGS>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;
}

/* 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 ********************* */
.table>thead>tr>th.CHB,
.table>tbody>tr>td.CHB{
	width: calc(0.5ch + 1.75rem + 0.5ch);
	text-align: center;
	vertical-align: middle;
	padding: 0;
}
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 0.5ch;
}
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),
tbody>tr:hover>td.CHB input[type="checkbox"]:not(:checked){
	opacity: 1;
}
/* full show checkbox when cell hovered */
thead>tr>th.CHB:hover input[type="checkbox"]:not(:checked),
tbody>tr:hover>td.CHB:hover input[type="checkbox"]{
	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 it has a checkbox hover menu */
thead>tr>th.CHB{
	z-index: 2;
}

/* ******************** 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,
.icnCheckAll::before,
.icnUncheckAll::before,
.icnDocument::before,
.icnPassword::before,
.icnBold::before,
.icnItalic::before,
.icnUnderline::before,
.icnUndo::before,
.icnRedo::before{
	font-family: var(--icon-font-family);
	font-weight: bold;
	font-style: normal;
	display: inline-block;
}
.icnHint::before{ content: '\f05a'; }
.icnView::before{ content: '\f06e'; }
.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'; }
.icnPrior::before{ content: '\f053'; }
.icnNext::before{ content: '\f054'; }
.icnUpload::before{ content: '\f574'; }
.icnDownload::before{ content: '\f019'; }
.icnCheckAll::before{ content: '\f14a'; font-weight: normal; }
.icnUncheckAll::before{ content: '\f0c8'; font-weight: normal; }
.icnDocument::before{ content: '\f15c'; font-weight: normal; }
.icnPassword::before{ content: '\f023'; }
.icnBold::before{ content: '\f032'; }
.icnItalic::before{ content: '\f033'; }
.icnUnderline::before{ content: '\f0cd'; }
.icnUndo::before{ content: '\f0e2'; }
.icnRedo::before{ content: '\f0e2'; transform: scale(-1,1); }


/* ******************** copy to clipboard ********************* */
.animated-copy{
	position: relative;
}
.animated-copy::before{
	position: absolute;
	font-weight: bold;
	display: inline-block;
	top: 0;
	right: 0;
	padding-left: 0.25em;
	padding-right: 0.25em;

	opacity: 0;
	transition: opacity 1s ease-in-out;
}
.animated-copy.copied::before{
	content: 'Copied' !important;
	color: blue;
	animation: fadeOutUp 1.5s;
	z-index: 3;
}


/* ******************** 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]:not(.no-maxlength-indicator):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{
	transition: background-size 0.5s linear;
}

/* indicate invalid entry (customised file / input / select / textarea ) */
label.invalid::after,.invalid.invalid-after::after,
.invalid:not(label):not(.invalid-after),
.form-control:invalid,
label.upload > input[type=file]:invalid + span,
.custom_file:not([disabled]):not([readonly]) input[type="file"]:invalid+.filename,
.clsTickListControl:not([disabled]):not([readonly]) input:invalid+.form-control,
select.form-control:invalid,
select.form-control:invalid+.select2>.selection>.select2-selection{	/* select2 */
	/* 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;	/* stop maxlen indicator size taking precedence */
	background-position: top 3px left 3px !important;
	background-repeat: no-repeat;
}
/* small dot to indicate invalid entry but follows controls via :after (not background) */
label.invalid::after,.invalid.invalid-after::after{
	content: '';
	display: inline-block;
  width: 1em;
	height: 1em;
	background-position: top left !important;
}

/* debug ; missing type or maxlength/min/max attribute */
input.form-control:not([type]),
input[type="text"]:not([readonly]):not([maxlength]):not(.no-maxlength-indicator):not(.chosen-search-input):not(.search-txt),						/* chosen + sumo */
input[type="search"]:not([readonly]):not([maxlength]):not(.no-maxlength-indicator):not(.select2-search__field):not([role="combobox"]):not(.search-txt),	/* select2 */
input[type="tel"]:not([readonly]):not([maxlength]):not(.no-maxlength-indicator),
input[type="email"]:not([readonly]):not([maxlength]):not(.no-maxlength-indicator),
input[type="url"]:not([readonly]):not([maxlength]):not(.no-maxlength-indicator),
input[type="password"]:not([readonly]):not([maxlength]):not(.no-maxlength-indicator),
input[type="number"]:not([readonly]):not([min]):not(.no-maxlength-indicator),
input[type="number"]:not([readonly]):not([max]):not(.no-maxlength-indicator),
textarea:not([readonly]):not([maxlength]):not(.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;
}

/* ********************* table row context menu ****************** */
@media print {
  thead>tr>th.CTX,
	tbody>tr>td.CTX{
    display: none !important;
  }
}
.row-context-container{
	display: none;
}
thead>tr>th.CTX{
	width: 4ch;
	padding: 2px 4px;
}
td.CTX{
	padding: 0;
	text-align: center;
	vertical-align: middle;
}
td.CTX .div-row-context{
	position: relative;
	z-index: 1;
	top: -1px;
}
tr:hover>td.CTX::after{
	content: "\f142";
  -webkit-font-smoothing: antialiased;
  font-family: var(--icon-font-family);
  font-weight: bold;
	display: block;
	width: 100%;
	margin-left: 0.5ch;
  text-align: center;
	color: #38a3e6;
	transform: rotate(0deg);
	transition: transform 0.25s ease-in-out;
}
tr:hover>td.CTX.in::after{
	transform: rotate(90deg);
}
td.CTX.in ul.row-context-menu{
	opacity: 1;
}
ul.row-context-menu{
	opacity: 0;
	transition: opacity 1s ease-in-out;
	left: -2px;
	top: -4px;
	margin: 0;
}
ul.row-context-menu>li {
	position: relative;
	margin-left: 0.5ch;
}
ul.row-context-menu {
  position: absolute;
	left: 1px;
  display: inline-block;
	white-space: nowrap;
  width: fit-content;
  list-style-type: none;
	padding-right: 15px;
}
ul.row-context-menu>li {
  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,
ul.row-context-menu>li>button[disabled]{
	opacity: 1;
	color: gray;
}


/* pseudo readonly for some elements that don't support readonly */
/* select[readonly],
select[readonly]+span.select2 .select2-selection, these are now handled via javascript */
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[disabled],
select[readonly]{
	appearance: none;
	/* for Firefox */
	-moz-appearance: none;
	/* for Chrome */
	-webkit-appearance: none;
	padding-right: 24px;	/* where the dropdown arrow would be ; stops width changing */
}
select:disabled+span.select2 .select2-selection__arrow,
select[disabled]+span.select2 .select2-selection__arrow,
select[readonly]+span.select2 .select2-selection__arrow{
	visibility: hidden;
}

select[readonly] option,
select[readonly] optgroup{
	display: none;
}
select.form-control:disabled,
select.form-control[disabled],
select.form-control[readonly]{
	padding-left: calc(4px + .75rem);
  padding-top: calc(0px + .375rem);
}

select.form-control.form-control-sm:disabled,
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[readonly],
select[readonly]+span.select2.select2-container .select2-selection, /* where select is not also disabled */
select[readonly]+span.select2.select2-container--disabled .select2-selection,	/* where select is also disabled */
select[readonly]+span.select2.select2-container--disabled .select2-selection--multiple .select2-selection__choice{
	background-color: var(--readonly-color);
}
/* disabled will be preferred over the readonly color if it has both attributes */
.pre:disabled,
.pre[disabled],
select:disabled,
select[disabled]{
	background-color: var(--disabled-color);
}
select:disabled+button.dropdown-toggle,
select:disabled+span.select2.select2-container .select2-selection,
select:disabled+span.select2.select2-container--bootstrap.select2-container--disabled .select2-selection,
select:disabled+span.select2.select2-container--bootstrap.select2-container--disabled .select2-selection--multiple .select2-selection__choice,
select[disabled]+button.dropdown-toggle,
select[disabled]+span.select2.select2-container .select2-selection,
select[disabled]+span.select2.select2-container--bootstrap.select2-container--disabled .select2-selection,
select[disabled]+span.select2.select2-container--bootstrap.select2-container--disabled .select2-selection--multiple .select2-selection__choice{
	background-color: var(--disabled-color) !important;
}
input[type="checkbox"][readonly],
input[type="radio"][readonly],
.form-check[readonly],
.form-check-input[readonly]+.form-check-label{
	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 */
	pointer-events: none;
}

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

.custom_file:not([disabled]):not([readonly]) input[type="text"][readonly] {	/* override bootstrap */
	background-color: white;
}
.file-upload-each-size,
.file-upload-total-count,
.file-upload-total-size,
.file-upload-ext{
	font-weight: bold;
	color: #0040ff;
}
.file-upload-exts .file-upload-ext::after{
	font-weight: initial;
	color: initial;
}
.file-upload-exts .file-upload-ext:not(:last-child):not(:nth-last-child(2))::after{
	content: ", ";
}
.file-upload-exts .file-upload-ext:nth-last-child(2)::after{
	content: " or ";
}
.custom_file[multiple] .file-upload-exts .file-upload-ext:nth-last-child(2)::after,
.file-upload-exts[data-multiple] .file-upload-ext:nth-last-child(2)::after{
	content: " and ";
}
.tooltip .file-upload-each-size,
.tooltip .file-upload-total-count,
.tooltip .file-upload-total-size{
	color: yellow;
}


/* ------ 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;
}


/* **** CUSTOM DROP AREA FOR FILE/S and/or SCREENSHOT/S ***** */
.pasteContainerDiv,
.filedropContainerDiv{
	position: relative;
}
.pasteableDiv,
.filedropDiv{
	outline: none;
	border: 4px dotted #aaa;
	padding: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background-color: var(--drop-color);
}
.pasteableDiv:focus-within,
.pasteableDiv[data-dialog-open]{
	background-color: white;
}
.pasteContainerDiv[disabled],
.filedropContainerDiv[disabled]{
	pointer-events: none;
	filter: grayscale(1);
	opacity: 0.5;
}
.filedropContainerDiv.dragging-onto:not([data-pasted]) .filedropDiv,
.pasteContainerDiv.dragging-onto:not([data-pasted]) .pasteableDiv{
	border-color: blue;
}
.filedropContainerDiv.dragging-onto:not([data-pasted]) .filedropDiv::after{
  content: 'Drop here...';
	pointer-events: none;	/* don't want it interfering with the drop event */
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	font-size: 64px;
  color: white;
	background-color: rgba(0, 102, 153, 0.5);
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pasteableDiv{
	caret-color: transparent;	/* no flashing cursor */
	cursor: default;	/*arrow instead of I-beam */
}
/* hide selection marking */
.pasteableDiv::selection,.pasteableDiv *::selection{
	color: initial;
	background: transparent;
}
.pasteableDiv:not([data-dialog-open]):not(:focus-within) [data-focused="true"],
.pasteableDiv[data-dialog-open] [data-focused="false"],
.pasteableDiv:focus-within [data-focused="false"]{
	display: none;
}
.filedrop,
.pasteableDiv .b{
	font-weight: bold;
}
.filedrop .n,
.filedrop .or,
.pasteableDiv .n,
.pasteableDiv .or{
	height: 3rem;
	display: flex;
	place-items: center;
}


/* **** 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:focus,
.input-group-prepend.clsFieldPicker select:hover{
	background-color: white;
}


/* ************************* advisory messages ********************** */
.clsPopoverAdvisoryMessage {
	max-width: 30rem;
	--back-color: white;
	--head-color: black;
	--body-color: black;
	background-color: var(--back-color);
}
.clsPopoverAdvisoryMessage .popover-header {
	font-weight: bold;
	color: var(--head-color);
	background-color: inherit;
}
.clsPopoverAdvisoryMessage .popover-body {
	box-sizing: content-box;
	max-height: 14rem;
	overflow-y: auto;
	color: var(--body-color);
	white-space: pre-wrap;
}
.clsPopoverAdvisoryMessage.bs-popover-top>.arrow::after{
	border-top-color: var(--back-color);
}
.clsPopoverAdvisoryMessage.bs-popover-right>.arrow::after{
	border-right-color: var(--back-color);
}
.clsPopoverAdvisoryMessage.bs-popover-bottom>.arrow::after{
	border-bottom-color: var(--back-color);
}
.clsPopoverAdvisoryMessage.bs-popover-left>.arrow::after{
	border-left-color: var(--back-color);
}


/* *** 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%);
}

/*
	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 */
}

/* *** CSS SIMPLE PIE-STYLE */
.pie[data-pct="100"].hide-100pct{
	--segment-color: green;
	border: 4px solid white;
}
.pie[data-pct="0"].hide-0pct .pie-label,
.pie[data-pct="100"].hide-100pct .pie-label{
	visibility: hidden;
}

/* *** DATE RANGER PICKER STYLES ******************************************** */
.date-range-helper [data-drh-hide-options~="past"] [data-drh^="-"],
.date-range-helper [data-drh-hide-options~="present"] [data-drh^="+0"],
.date-range-helper [data-drh-hide-options~="future"] [data-drh*="+1"],
.date-range-helper [data-drh-hide-options~="day"] [data-drh$="D"],
.date-range-helper [data-drh-hide-options~="week"] [data-drh$="W"],
.date-range-helper [data-drh-hide-options~="month"] [data-drh$="M"],
.date-range-helper [data-drh-hide-options~="year"] [data-drh$="Y"]{
	display: none;
}
/* flipping into columns not needed until lots more options
 .date-range-helper [data-drh=""],
.date-range-helper [data-drh=""]+.dropdown-divider{
	column-span: all;
}
.date-range-helper .dropdown-menu{
	column-count: 2;
	column-fill: balance;
} */

/* *** 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;
	}
}


/****************************************/
/* STOLEN FROM CW FOR MODAL FILE PICKER */
/****************************************/

/* ---- table with expanding button group for operations per row --- */

.row-ops-container{
	display: none !important;
}
.row-ops-table th.colOps{
	padding-top: 4px;
	padding-bottom: 4px;
}
.row-ops-table th.colOps {
	min-width: 46px;
	width: 46px;
}
.row-ops-table th.colOps{
	height: 2.5rem;
}
.row-ops-table td.colOps:hover{
	position: relative;
}
/* .row-ops-table td.colOps>.btn,
.row-ops-table td.colOps .row-ops-items{
	box-shadow: var(--box-shadow);
} */
.row-ops-table .row-ops-items{
	position: absolute;
	z-index: 1000;
	/* box-shadow: var(--box-shadow); */
	width: max-content;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .1s linear;
}
.row-ops-items.expand{
	transform: scaleX(1);
}
.row-ops-table .row-ops-items :disabled{
	pointer-events: none;/* allow mouseleave event to function (disabled elements seem to not bubble to parent */
}

.row-ops-table .row-ops-items .row-ops-button{
	display: none;
}
.row-ops-table .row-ops-button{
	visibility: hidden;
}
.row-ops-table tr:hover .row-ops-button{
	visibility: visible !important;
}
/**/