html,body{
	font-family: 'Roboto', 'Helvetica', sans-serif;
	--icon-font-family: "Font Awesome 5 Free";
  background-color: var(--bs-gray-100);
}

.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

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

.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,
.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 */
}
/* 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);
}
.scroll-flex-forced{
	overflow-y:scroll;
}

/* **************** CUSTOM TAB HANDLER ***************** */
.tab-container {
	overflow: hidden;
	width: 100%;
}
.tab-container .tab-pane .table-helper{
	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)*/
}

/* when header th checkbox not visible, reserve space */
table.table-row-check th.CHB input[type="checkbox"][hidden]{
	visibility: hidden;
	display: block !important;
}

.fc-toolbar.fc-header-toolbar{	/* bring title + controls closer to the calendar */
	margin-top: .5rem;
	margin-bottom: .5rem;
}
/* be sure to wrap label+control in a form-group to get the extra margin */
.list-actions .form-group:not(:first-child){
	margin-left:1ch;
}

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

/* space out all rows */
.form-row:not(.no-row-spacing):not(:first-child){
	margin-top: .5rem;
}
.hidden{
	display: none;
}

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


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

.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: #e9ecef;
	min-height: 38px; /* BS5 form-control height */
}
.form-control{
	min-height: 38px; /* BS5 form-control height */
}

/* 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-bs-toggle="tooltip"] > i,
span[data-bs-toggle="tooltip"] > i {
	cursor: help;
}

/* 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[type="number"]::-webkit-inner-spin-button,
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;
}

/* space-between label + input/select/static div/prefixed-input/select2 or after a formcontrol/select2 + btn */
/*.form-inline label+input.form-control,
.form-inline label+select.form-control,
.form-inline label+div.form-control,
.form-inline label+div.input-group,
.form-inline label+select.searchable+span.select2,
.form-inline .form-control+.btn,
.form-inline span.select2+.btn{
	margin-left: 0.5rem;
}*/
.form-inline label,
.form-inline .form-control,
.form-inline .btn,
.form-inline span.select2,
.form-inline .input-group{
	margin-right: 0.5rem;
}
/* stop margin within input-groups */
.form-inline .form-group:last-child .form-control,
.form-inline .form-group:last-child .btn,
.form-inline .form-group:last-child span.select2,
.form-inline .form-group:last-child .input-group,
.form-inline .input-group.focus-group .form-control,
.form-inline .input-group.focus-group .btn {
	margin-right: 0;
}

/* for input groups that have a 'default' action button */
.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);
}
.input-group.focus-group:focus-within .form-control:focus {
	box-shadow: none;
}

/* middle the check + the label
.form-check.form-check-inline{
	height: 100%;
}
.form-check{
	display: flex; gap: 12px; align-items: end;
}
*/

/* spacing between a checkbox and a label*/
.form-inline .form-check-label{
	margin-left: 0.25rem;
}

/* vertical-spacing between label + input */
.form-vertical label:not(.form-check-label){
	margin-bottom: 0.1rem;
}

/* as a general rule, labels are bold to help readability */
label{ font-size: 14px; color: var(--bs-gray-800); /* #6c757d; */ font-weight: 400; }
label:not(.form-check-label){ font-weight: bold; }
label.form-check-label{ margin-top: 6px; }

/* fix repeated clicking marking up the text for the label + also change to cursor to hand */
input[type="checkbox"]~label.form-check-label,
input[type="radio"]~label.form-check-label,
label.form-check-label{
	user-select: none;
	cursor: pointer;
}

/* 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-info):not(.badge-primary):not(.badge-success):not(.badge-warning):not(.badge-danger):not(.badge-important):not(.badge-notify):not(.badge-hr):not(.badge-absence):not(.badge-payroll):not(.badge-reports):not(.badge-recruitment):not(.badge-dark){
    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);}
}

/* badges are moved up
(KP) - Commented out to stop any clashes
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;
}
.panel-default>.panel-heading{
	background-color: #d2eff9;
}

/* ************************* customized select ********************** */
option.blank-placeholder:disabled,
li.select2-results__option[aria-disabled="true"]{
	display: none;
}

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


/* ************************ general modal restyling ******************* */

/* overridden in harp.css
.modal-header .close{
	padding: 0;
	margin: 0;
}
.modal-header .close:after{
	content: '\d7';
	font-size: xx-large;
	position: relative;
	bottom: 0.25rem;
}
*/

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

/* ****************************** table styling ********************** */

table{font-size: inherit;}

.table{
		border-collapse: separate;
		border-spacing: 0;
}
/* round highlight bar */
.table-hover>tbody>tr>td{
  border-width: 1px;
  /*border-color: transparent; DN Removed 15/02/2024 to make list lines consistent*/
  border-top-style: solid;
  border-bottom-style: solid;
  border-left-style: none;
  border-right-style: none;
}
.table-hover>tbody>tr>td:first-child{
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-left-style: solid;
}
.table-hover>tbody>tr>td:last-child{
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-right-style: solid;
}
/* 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){
	b/*ackground-color: rgba(222, 239, 251, 0.5);*/
	/*background-color: rgba(240,249,255,1);*/
	/*background-color: #f0f9ff;*/
}
/* 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-hover>tbody>tr:not(.active):not(.selected):hover,
.table>tbody>tr.tr-hover:not(.active):not(.selected):hover{
	background-image: linear-gradient(#FCFDFE,#F2F7FE);
}
.table-hover>tbody>tr:not(.active):not(.selected):hover>td,
.table>tbody>tr.tr-hover:not(.active):not(.selected):hover>td{
	/*border-color: #84acdd;*/
}

/* row selected - medium */
.table>tbody>tr.selected{background-image: linear-gradient(#EBF4FE,#CFE4FE);}
.table>tbody>tr.selected>td{border-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(#DCEBFC,#C1DBFC);
}

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

.table-container{
	/*border-top: 1px solid #ddd;*/
	position: relative;
}
.table-container.fixed-height{
	border: 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 */
	z-index: 1;
	top: 0;
}

/* optional footer for a table */
.table-footer{
	background-color: #d2eff9;
	padding: 4px;
	border: 1px solid #ddd;
	width: 100%;
}
.info{
	color: blue;
}
.table-footer.info,
.table-footer .info{
	color: #1864ab;
}
.table-footer.info .name-lblCount,
.table-footer.info .name-lblCheckedCount,
.table-footer .info .name-lblCount,
.table-footer .info .name-lblCheckedCount{
	font-weight: bold;
	color: black;
}
.table-footer.info .name-lblFilteredCount,
.table-footer.info .name-lblUnfilteredCount,
.table-footer .info .name-lblFilteredCount,
.table-footer .info .name-lblUnfilteredCount{
	font-weight: bold;
	color: purple;
}

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

/* .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;
	z-index: 1;
  font-family: var(--icon-font-family);
  font-weight: bold;
	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" !important;
	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" !important;
	bottom: calc(0.5em - 4px);
}
/* sorted large->small */
.table-container thead>tr>th[data-sort-indicator="D"]::after{
	content: "\f0dd" !important;
	top: calc(0.5em - 4px);
}

/* ****************** table column widths ********************* */
.table th,.table td{
	padding: 0.4rem;	/* redefine default bootstrap padding ; 0.75rem is too much */
}
.table.table-xs th,
.table.table-xs td {
  padding: 0.1rem; /* smallest possible without looking too cramped */
}

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

/* widths - define extra for each comma / padding */
.table thead>tr>th{
	--num-commas: 0ch;
	--extra_internal: 4px;	/* usual 4px padding */
	--extra: 0px;
}
.form-control{
	--num-commas: 0ch;
	/*--extra_internal: calc(0.75em * 2);*/
	--extra: 0px;
  color: #757575;
}	/* usual bootstrap padding left+right */
.table thead>tr>th[data-width].BDG{
	--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-width="18"]{width: calc(18px + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="24"]{width: calc(24px + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="32"]{width: calc(32px + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="48"]{width: calc(48px + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="64"]{width: calc(64px + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="72"]{width: calc(72px + var(--extra_internal) + var(--extra));}
thead>tr>th[data-width="96"]{width: calc(96px + var(--extra_internal) + var(--extra));}

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

/* override */
thead>tr>th[data-type="D"], tbody>tr>td.D, tfoot>tr>td.D,
thead>tr>th[data-type="T"], tbody>tr>td.T, tfoot>tr>td.T,
thead>tr>th[data-type="Z"], tbody>tr>td.Z, tfoot>tr>td.Z {
  padding-left: 4px;
  padding-right: 0;
  text-align: left;
}

/* ******************** table cell badge column ********************* */
.table>tbody>tr>td.BDG{	/* have to use full selector to override bootstrap */

  vertical-align: middle;
	line-height: 1;

}
td.BDG>span{
  /* MATCH BS Badge */
  display: inline-block;
  padding: 0.35em 0.65em; /* Corresponds to --bs-badge-padding-y and --bs-badge-padding-x */
  font-size: 0.75em; /* Corresponds to --bs-badge-font-size */
  font-weight: 700; /* Corresponds to --bs-badge-font-weight */
  line-height: 1;
  color: #fff; /* Corresponds to --bs-badge-color */
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem; /* Replace --bs-border-radius with a fixed value */
}

/* 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: 2ch;	/* note: this is effectively ignored on table-layout: fixed so we pad out the checkbox below */
	text-align: center;
	vertical-align: middle;
	padding: 0;
}
thead>tr>th.CHB input[type="checkbox"],
tbody>tr>td.CHB input[type="checkbox"]{
	display: inline-block;
	vertical-align: middle;
	will-change: opacity;
	transition: opacity 0.5s;
	margin: 0;
	margin-left: 0.5ch;
	margin-right: 0.5ch;
}
tbody>tr>td.CHB input[type="checkbox"]:not(:checked){
	opacity: 0;
}
thead>tr>th.CHB input[type="checkbox"]:not(:checked),
tbody>tr:hover>td.CHB input[type="checkbox"]:not(:checked){
	opacity: 0.5;
}
/* 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 of a dropdown 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,
.icnMore::before,
.icnRefresh::before,
.icnPrint::before,
.icnSearch::before,
.icnFilter::before,
.icnExpander::before,
.icnPrior::before,
.icnNext::before,
.icnUpload::before,
.icnDownload::before,
.icnCheckAll::before,
.icnUncheckAll::before,
.icnPassword::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'; }
.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; }
.icnPassword::before{ content: '\f023'; }


/* ******************** html5 validation/max-length-indicators ********************* */
/* little red dot indicating invalid */
/* DN Removed to have Required Fields label instead
.form-control.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]) input[type="file"]:invalid + input[type="text"][readonly],
select.form-control:invalid+.chosen-container>a,
select.form-control:invalid+.select2{

	background-image: linear-gradient(0deg, red, red) !important;
	background-size: 0.35em 0.35em !important;
	background-position: top 3px left 3px !important;
	background-repeat: no-repeat;
}
*/
/* display maxlength as line inside input (these should be the same as the sMaxLenSelector in the .js) */
/* DN 24/01/2022 Removed this section as not working and just puts blue box on text fields
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-image: linear-gradient(0deg, cornflowerblue, cornflowerblue);
	background-size: 0 2px;
	background-position: left bottom;
	background-repeat: no-repeat;
}
*/
/* debug ; missing type or maxlength attribute
input.form-control:not([type]),
input[type="text"]:not([readonly]):not([maxlength]):not(.no-maxlength-indicator):not(.chosen-search-input),
input[type="search"]:not([readonly]):not([maxlength]):not(.no-maxlength-indicator):not(.select2-search__field),
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;
}
*/

label.required::after,
span.required::after {
	content: '\25aa';
	position: relative;
	top: -8px;
	left: 2px;
	color: red;
}

/* *********************** circular button ********************* */
.btn-circle{
  text-align: center;
	padding: 0;
  border-radius: 17px;
	width: 34px;
	height: 34px;
}
.btn-circle.btn-xs{
  border-radius: 11px;
	width: 22px;
	height: 22px;
}
.btn-circle.btn-sm{
  border-radius: 15px;
	width: 30px;
	height: 30px;
}
.btn-circle.btn-lg{
  border-radius: 23px;
	width: 46px;
	height: 46px;
}

/* ********************* 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: 4.75ch;
	padding: 2px 4px;
	text-align: center;
	vertical-align: middle;
}
tr>td.CTX{
	position: relative;
}
tr:hover>td.CTX::before{
	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::before{
	transform: rotate(90deg);
}
td.CTX.in ul.row-context-menu{
	opacity: 1;
}
ul.row-context-menu {
	display: block;
	z-index: 1;
	top: -0%; 	/* top + height are based on row height with 0.4rem padding */
	/* height: 125%; */
	opacity: 0;
	transition: opacity 2s ease-in-out;
}
ul.row-context-menu>li {
	position: relative;
	/*top: 15px;*/
	/*margin-left: 0.5ch;*/
}
ul.row-context-menu {
	position: absolute;
	left: 1px;
  	display: flex;
	gap: 4px;
  /*
  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; */
  padding: .5em 1em;
  /*box-shadow: 3px 3px 4px rgba(0, 0, 0, .5);*/
  /* margin-left: 5px */
}
ul.row-context-menu>li>button:disabled{
	opacity: 1;
	color: gray;
}
/* ------ 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 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;
}

/* **************************** busy overlay ******************************** */
/* global 'clear' overlay to stop multiple clicks */
#divBusy {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 999999;
	cursor: wait;
}

/* hides an element with a busy overlay */
.busyOverlay {
	position: relative;
  z-index: 999999;
}
.busyOverlay>.background {
	background-color: black;
	opacity: 0.7;
	width: 100%;
	height: 100%;
}
.busyOverlay>.progress {
	position: relative;
	top: -50%;
	left: 50%;
	width: 90%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
}
.busyOverlay>.progress>.progress-bar {
	width: 100%;	/* full bar */
	font-weight: bold;
}

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

/* ************************************************************************** */
/* ************************************************************************** */
/* ************************************************************************** */
/* Animations *************************************************************** */

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

.marching-ants {
/*  padding: 7px;
  margin: 20px;
  background-size: 20px 2px, 20px 2px, 2px 20px, 2px 20px;
  background-position: 0 0,  0 100%,  0 0,  100% 0;
  background-repeat: repeat-x,  repeat-x,  repeat-y,  repeat-y;*/
  animation: marching-ants 2s infinite;
  animation-timing-function: linear;
}
.marching-ants:hover,
.marching-ants.marching {
  animation-play-state: running;
}
.marching-ants.reverse {
  animation-direction: reverse;
}
.marching-ants.bnw {
  background-image: linear-gradient(to right, #fff 50%, #000 50%), linear-gradient(to right, #fff 50%, #000 50%), linear-gradient(to bottom, #fff 50%, #000 50%), linear-gradient(to bottom, #fff 50%, #000 50%);
}
.marching-ants.headline {
  background-image: linear-gradient(to right, #fff 50%, #444 50%), linear-gradient(to right, #fff 50%, #444 50%), linear-gradient(to bottom, #fff 50%, #444 50%), linear-gradient(to bottom, #fff 50%, #444 50%);
  color: #fff;
}
.marching-ants.info {
  background-image: linear-gradient(to right, #dd2 50%, transparent 50%), linear-gradient(to right, #dd2 50%, transparent 50%), linear-gradient(to bottom, #dd2 50%, transparent 50%), linear-gradient(to bottom, #dd2 50%, transparent 50%);
  background-color: #ffa;
  color: #dd2;
}
.marching-ants.warning:hover, .marching-ants.warning.marching {
  animation-play-state: running;
}
.marching-ants.warning.reverse {
  animation-direction: reverse;
}

@keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%; }
  60% {
    left: 100%;
    right: -90%; }
  100% {
    left: 100%;
    right: -90%; }
}
@keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%; }
  60% {
    left: 107%;
    right: -8%; }
  100% {
    left: 107%;
    right: -8%; }
}
@keyframes marching-ants {
  0% {
    background-position: 0 0,  0 100%,  0 0,  100% 0;
  }
  100% {
    background-position: 40px 0, -40px 100%, 0 -40px, 100% 40px;
  }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* ************************************************************************** */
/* ************************************************************************** */
/* ************************************************************************** */
/* Form Controls ************************************************************ */

form {
	margin: 0;
	padding: 0;
}
/* labels closer to input */
label {
	margin-bottom: 0;
}
/* every row/form-group has a bottom padding of 15px and so the actual padding inside a modal body ends up being 30px */
.modal-body>.row:last-child,
.modal-body>.row:last-child .form-group {
	margin-bottom: 0;
}
.form-control-static {
	white-space: pre-wrap;
}

/* indicate invalid entry (customised file / input / select / textarea ) */
/*
.invalid,
.form-control:invalid,
label.upload > input[type=file]:invalid + span,
.custom_file input[type="file"]:invalid+input.filename,
select.form-control:invalid,
select.form-control:invalid+.select2>.selection>.select2-selection {
	/* small red dot
	background-image: linear-gradient(0deg, red, red);
	background-size: 0.35em 0.35em !important;	/* stop maxlen indicator size taking precedence
	background-position: top 3px left 3px;
	background-repeat: no-repeat;
}
*/
/* customised upload button ; to use this <label (to handle click)> must contain 1. an <input type=file> and then 2. a <span> for the styled button */
label.upload {
	cursor: pointer;
	margin: 0;
}
label.upload > input[type=file] {
	width: 1px;	/* stop trailing label being clickable */
	height: 1px;	/* 0px stops validation label appearing */
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
label.upload > input[type=file]:focus + span {	/* when input file has focus, style the span */
	outline: 1px dotted #000;	/* ie */
	outline: -webkit-focus-ring-color auto 5px;	/* chrome, etc */
}
label.upload + span.filename {
	margin-left: 0.5em;
}

/* very small gap between lines of address */
.address input:not(:last-child) {
	margin-bottom: 2px;
}

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

select.form-control:not(:disabled){
  background-color: #fff !important;
  -webkit-appearance: menulist!important;
  -moz-appearance: menulist!important;
  -ms-appearance: menulist!important;
  -o-appearance: menulist!important;
  appearance: menulist!important;
}

select:not(.no-hide-dropdown-arrow).form-control[disabled],
select:not(.no-hide-dropdown-arrow).form-control[readonly]{
  padding-left: calc(4px + .75rem);
  padding-top: calc(0.5px + .375rem);
}

/* ************************************************************************** */
/* ************************************************************************** */
/* ************************************************************************** */
/* Table styles ************************************************************* */

#tblList thead>tr>th, .table-container table thead>tr>th{
	/* background-color: var(--bs-secondary-bg); */
  color: var(--bs-dark) !important;
  font-weight: 500;
}

#tblList thead tr th.clsAction{
	cursor: default;
}
#tblList tbody tr td:not(.clsAction){
	cursor: pointer;
	height: 40px;
}

.card .table tbody tr>td{
	cursor: default;
}

.card .table.table-hover tbody tr>td{
	border-top: 0;
	border-right:0;
	border-left: 0;
}

.table-container thead>tr>th{
	background-color: white;
	color: darkslategray !important;
}
.table-container thead>tr>th,
.table-container tbody>tr>td{
	padding: 0 5px !important;
}
body:not([data-table-op]) .table-container:not([data-sortable="N"]) thead>tr>th:not([data-sortable="N"]):hover{
	background-color: white;
}

.table-container table thead>tr>th[data-sortable="N"]{
  cursor: default;
}

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

/* row hover */
.table-hover>tbody>tr:not(.active):not(.selected):hover,
.table>tbody>tr.tr-hover:not(.active):not(.selected):hover{
	background-image: linear-gradient(#e7e7e7,#e7e7e7);
}
.table-hover>tbody>tr:not(.active):not(.selected):hover>td,
.table>tbody>tr.tr-hover:not(.active):not(.selected):hover>td{
	/*border-color: transparent;*/
	/* border-color: #3C3C3C; */
}

/* row selected - medium */
.table>tbody>tr.selected{background-image: linear-gradient(#EBF4FE,#CFE4FE);}
.table>tbody>tr.selected>td{border-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(#DCEBFC,#C1DBFC);
}

.table-container .table thead tr>th:not(.CTX),
.table-container .table tbody tr>td:not(.CTX){
  font-size: 14px;
}


/* ************************************************************************** */
/* ************************************************************************** */
/* ************************************************************************** */
/* Select2 ****************************************************************** */

/* fix select2 wrong border color */
.select2-container--bootstrap4.select2-container--focus .select2-selection {
	border-color: #80bdff;
}
/* fix cursor ; bootstrap 4 doesn't "not-allowed" the cursor anymore, so neither should select2 */
.select2-container--bootstrap4.select2-container--disabled .select2-selection, .select2-container--bootstrap4.select2-container--disabled.select2-container--focus .select2-selection {
  cursor: auto;
}
/* fix height of an empty option for select2! */
li.select2-results__option:empty::before{
	content: "\a0";
}

.select2-container .select2-results__option, .select2-selection__rendered,
.select2-container .select2-selection--multiple .select2-selection__choice{
  color: #757575;
}

.select2-container.clsCustomMultiple .select2-selection--multiple .select2-selection__choice.clsPlaceholder{
	opacity: .5;
}

/* ************************************************************************** */
/* ************************************************************************** */
/* ************************************************************************** */
/* !Misc styles ************************************************************* */

body {
  line-height: 1.25;
}

p {font-family: Helvetica, Calibri, Georgia, "Times New Roman";}

body.modal-open, .main-panel #id-navbar, .modal-show{
	/* padding-right: .4em !important; /* same width as scrollbar ; stop content from jumping left/right */
}

body #dlgMsgXX{ width: auto; max-width: 25%; }

.ripple-container{display: none !important;}

/*
.modal.show{ background: rgba(0,0,0,.33); }
.modal.show .modal-content{ box-shadow: 0 0 10px rgba(0,0,0,.5); }

USE BS5 Class -> .is-invalid
.clsInvalidField{
	border-bottom: solid #dc3545 !important;
}

*/

.modal .modal-content .modal-header{ padding: .75em; border-bottom:1px solid #ddd; }
.modal .modal-header .modal-title *:not(#lblIdentifier){ font-weight: 500; }

.modal .modal-content .modal-footer{ padding: .75em; border-top: 1px solid #ddd; }

.form-control:read-only, .form-control[readonly], .form-control:disabled, .form-control[disabled]{
  /* background-color: #e9ecef; box-shadow:none; */
	/* cursor: not-allowed; */
}



.CurrentNotifications{background-color: #cefd68} /* identecoHR-5410 */

/* allow notifications to be closed over modals -> changed as we modal-stack now */
div[data-notify="container"].alert{
	z-index: 2000 !important;
}

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

/* identecoHR-6603 */
.nav-link.clsCardTitle {
  letter-spacing: 2px;
  font-weight: 200;
  font-size: 1em;
  padding: 10px;
}

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

.badge-danger { background-color: var(--bs-danger); }
.badge-warning { background-color: var(--bs-warning); }
.badge-success { background-color: var(--bs-success); }
.badge-info { background-color: var(--bs-info); }

/* show help cursor for info icons */
span[data-toggle="tooltip"] > i,
span[data-toggle="tooltip"] > i {
	cursor: help;
}

.navbar-fixed-side.navbar-default .navbar-nav>.active>a {
	background-color: #ff8ce2;
}

/* notification growl */
div[role="alert"] {
	box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.3);
	width: 300px;
}

/* show help cursor for info icons */
span[data-toggle="tooltip"] > i,
span[data-toggle="tooltip"] > i {
	cursor: help;
}

.navbar-fixed-side.navbar-default .navbar-nav>.active>a {
	background-color: #ff8ce2;
}

/* fix font-size otherwise it goes smaller */
.table{
	font-style: inherit;
	font-size: medium;
	font-weight: inherit;
	font-family: inherit;
}

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

label > input[type="checkbox"],
label + input[type="checkbox"],
label > input[type="radio"],
label + input[type="radio"] {
	margin-right: 0.5em;
}

/* regular button */
.btn i{
	display: inline-grid;
	line-height: 1;
	vertical-align: middle;
	font-size: 1.3em;
	width: 1.3em;
	text-align: center;;
}
.btn.btn-fab:hover, .btn.btn-just-icon:hover {
  background: transparent;
}
/* btn on a table row */
tbody tr .btn i{
	margin: -2px -4px;			/* negate bootstrap padding */
	font-size: 1.25em;
	width: 1.25em;
}
/* btn inside a group */
.input-group-btn .btn i{
	margin: 1px -5px;			/* negate bootstrap padding so button is not so wide */
}

/* increase size of checkbox */
@supports (zoom:1.5) {
	input[type="checkbox"].lg {
		zoom: 1.5;
	}
}
@supports not (zoom:1.5) {
	input[type="checkbox"].lg {
		transform: scale(1.5);
	}
}
input[type="checkbox"].lg {
	vertical-align: text-bottom;
}

[title] {
	cursor: default;
}

.modal-dialog select.form-control.filtered-select {
	width: 100%;
}

.value-is-positive {
	color: green;
}
.value-is-negative {
	color: red;
}

.errTableLoad {
	padding: 1em 2em 1em 2em;
}

/* add vertical divider between columns */
.row.vdivide [class*='col-']:not(.no-vdivide):not(:last-child):after {
  background: #e0e0e0;
  width: 1px;
  content: "";
  display: block;
  position: absolute;
  top:0;
  bottom: 0;
  right: 0;
  min-height: 70px;
}

/* widths */
.full-width {
	width: 100%;
}
.auto-width {
	width: auto;
}
/**/

/* space out inline groups */
.form-inline .form-group:not(.no-space-after):not(:last-child) {
	margin-right: 1.5em;
}
/* space out table list of actions */
.rowActions > :not(:first-child) {
	margin-left: 0.5em;
}

/* table list/dialog indeterminate progress */
[ta-source-list] .progress {
	position: absolute;
}
[ta-source-list] .progress>.progress-bar {
	width: 100%;	/* full bar */
}
[ta-source-list] .progress>.progress-bar:after{
	font-weight: bold;
	content: 'Refreshing...';
}
[ta-source-list] .info {
	font-weight: bold;
}
.lstActions {
	padding-top: 6px;
	padding-bottom: 12px;
	width: 100%;
}
@media screen {
	.lstActions.sticky {
		z-index: 100;
		top: 0;
		position: sticky;
		/*background-color: white;*/
	}
	div.lstActions+div.sticky .sticky-thead th,
	div.lstActions+div .sticky .sticky-thead th {
		top: 52px !important;
	}
}

.fixedthead thead>tr>th,
.fixedtfoot {
  background-color: #00b2ec;
  color: white;
}

.btn-decline {
  color: #fff;
  background-color: #80ccff;
  border-color: #66c2ff;
}
.btn-decline:hover,.btn-decline:focus{
  color: #fff;
  background-color: #33adff;
  border-color: #1aa3ff;
}

.clsNotesField {
  font-family: Helvetica, Calibri, Georgia, "Times New Roman";
  font-size: 14px;
}

.tooltip-inner {
  padding: 10px 15px;
  /*min-width: 130px;*/
  max-width: 350px;
  text-align: left;
  white-space: pre-wrap;
}

.popover,
.tooltip-inner {
  /*line-height: 1.5em;*/
  /* background: #fff; */
  /*border-radius: 3px;*/
  border: none;
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
  /*color: #555;*/
}

.tooltip.top .tooltip-arrow {
  border-top-color: #fff;
}

.tooltip.right .tooltip-arrow {
  border-right-color: #fff;
}

.tooltip.left .tooltip-arrow {
  border-left-color: #fff;
}

.tooltip.bottom .tooltip-arrow {
  border-bottom-color: #fff;
}

.alert.alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.alert.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.alert.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.alert.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

.alert[class*='alert-']>a, .alert[class*='alert-']>a:hover, .alert[class*='alert-']>a:focus{
  color: #337ab7 !important;
}

.bs-form-control{
  display: block;
  width: 100%;
  height: calc(1.5em + .75rem + 2px);
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.bs-form-control,.bs-form-control:focus{ background-color: #fff; }

/* ************************************************************************** */
/* ************************************************************************** */
/* ************************************************************************** */
/* Custom Popover styles; *************************************************** */
.clsPopover.bs-popover-top>.arrow::after{ border-top-color: #000; }
.clsPopover.bs-popover-right>.arrow::after{ border-right-color: #000; }
.clsPopover.bs-popover-bottom>.arrow::after{ border-bottom-color: #000; }
.clsPopover.bs-popover-left>.arrow::after{ border-left-color: #000; }
.clsPopover.bs-popover-bottom .popover-header::before{ border-bottom: 1px solid #000; }
.clsPopover ::-webkit-scrollbar{ width: 10px; }
.clsPopover ::-webkit-scrollbar-track{ background: #444; }
.clsPopover ::-webkit-scrollbar-thumb{ background: #888; }
.clsPopover ::-webkit-scrollbar-thumb:hover{ background: #666; }

.clsPopover>.popover-arrow::before,
.clsPopover>.popover-arrow::after{
	border-bottom-color: black !important;
}
.clsPopover[data-popper-placement^=right]>.popover-arrow::before,
.clsPopover[data-popper-placement^=right]>.popover-arrow::after{
	border-right-color: black !important;
}

.clsPopover{
  max-width: 50rem;
  background: black;
}
.clsPopover .popover-header{
  background-color: inherit;
  font-weight: bold;
  color: yellow;
}
.clsPopover .popover-body{
  box-sizing: content-box;
  max-height: 14rem;
  overflow-y: auto;
  color: white;
}

.clsPopover .popover-body hr{
  border-color: white;
  margin: 10px 0;
}

[data-bs-theme="dark"] .clsPopover{
	background: var(--bs-gray-700) !important;
}


/* ************************************************************************** */
/* ************************************************************************** */
/* ************************************************************************** */
/* Responsive *************************************************************** */

@media screen and (max-width: 1200px){
  .clsSDS{ /* Smaller Device Spacing */
    margin-bottom: .75em;
  }
  body #dlgMsgXX{ max-width: 75% !important; }
}

@media screen and (max-width: 576px){ /* 480px */
}