@charset "utf-8";
/* ========== MyleStyle (moved from MyleStyle.css) ========== */

.main {
  padding: 0px 0px;
  z-index: 0;
}

.show {
    display: block;
}


/* Scroll Bar - width */
::-webkit-scrollbar {
  /*width: 3px;*/
}
::-webkit-scrollbar-track {
  background: #f1f1f1; 
} 
::-webkit-scrollbar-thumb {
  background: #888; 
}
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}


A {
	color: #00bcd4;     /* cyan */
	TEXT-DECORATION: none;
	scroll-margin-top: 72px; /* href to name=a1 will compensate for fixed page header */
	cursor: pointer;
	font-weight: normal;
}

A:hover {	color: #009688 ;
	TEXT-DECORATION: none
}
BODY {
	FONT-SIZE: 16px;
	line-height:1.5;
	COLOR: #424242;
	font-family: 'Segoe UI', sans-serif;
	width: inherit;
	margin-left:auto;
    margin-right:auto;
	background-color: white;
	font-weight:400;
}

H1 {
	BORDER-RIGHT: #000000 0px solid;
	PADDING-RIGHT: 0px;
	BORDER-TOP: #000000 0px solid;
	PADDING-LEFT: 0px;
	FONT-WEIGHT: bold;
	FONT-SIZE: 35px;
	PADDING-BOTTOM: 12px;
	MARGIN-top: 12px;
	BORDER-LEFT: #000000 0px solid;
	PADDING-TOP: 0px;
	BORDER-BOTTOM: #000000 0px solid;
	TEXT-ALIGN: center
}
H2 {
	FONT-WEIGHT: bold;
	FONT-SIZE: 21px;
	COLOR: #cb6a1f;
	LINE-HEIGHT: 28px;
}
H3 {
	FONT-WEIGHT: bold;
	FONT-SIZE: 16px;
	COLOR: #00796b;		/* teal dk2 */
}
H4 {
	FONT-WEIGHT: bold;
	FONT-SIZE: 16px;
	color: #cb6a1f;
}
H5 {
	FONT-WEIGHT: bold;
	FONT-SIZE: 16px;
	color: #009688;
	margin: 0px;
	padding: 0px;
}
H6 {
	FONT-WEIGHT: bold;
	FONT-SIZE: 16px;
	COLOR: #656565;
	margin: 0px;
	padding: 0px;
}

b {
	font-weight: 500;
}
li {
	margin-bottom:8px;
}
TD {
}
SMALL {
	FONT-SIZE: 13px
}
BIG {
	FONT-SIZE: 19px;
}



.table-heading {
	background-color: #4db6ac; /* teal lt2 */
	height: 23px;
}	
TR.table-heading  TD {
	color: #FFFFFF;
	padding: 5px 5px;
}
TR.table-heading > TD > A{
	color: #001a17;
}
TR.table-heading > TD > A:hover{
	COLOR: var(--el-color-secondary);
}

TABLE.TblSrchResults {
}
TABLE.TblSrchResults .table-heading> TD {
	background-color: #80cbc4; /*teal lt3*/
	color: #001a17;   /* near black */
	color: white;   /* near black */
	padding: 5px 1px;
}
TABLE.TblSrchResults> TBODY> TR:nth-child(odd) {
	background-color: #FFFFFF;
}
TABLE.TblSrchResults> TBODY> TR:nth-child(even) {
	background-color: #e9f2f5;   /* cyan lt5 + */
}


TABLE.TblUserForm {
	background-color: #e9f2f5;
	box-shadow: 1px 1px 1px grey,  2px 2px 3px grey;
}
TABLE[border="0"].TblUserForm {
	background-color: #FAFAFA; /* grey lt5 */
}
TABLE.TblUserForm .table-heading> TD {
	background-color: #009688; /* teal */;
	color: #FFFFFF;
	padding: 2px 4px;
}
TABLE[border="1"].TblUserForm .table-heading> TD {
	font-weight: bold;
}
TABLE.TblUserForm .table-heading A{
	color: #fff59d; /* yellow lt3*/
}
TABLE.TblUserForm tr:not(.table-heading) td:first-child{
	color: gray; 
}


TABLE.TblListMenu {
	background-color: #FCF7F9; /* pink almost white */
}
TABLE.TblListMenu A{
	display: inline-block;
	color: #009688;
	padding: 2px 0px;	
}
TABLE.TblListMenu .table-heading> TD {
	background-color: #80cbc4;  /* teal lt3 */
	color: #001a17;   /* near black */
	padding: 5px 5px;
}

.btnCancel, .formSub-btn.btnCancel ,input[type="submit"].btnCancel, input[type="button"].btnCancel {
	color: #001a17;   /* near black */
}
.btnOrng, .formSub-btn.btnOrng ,input[type="submit"].btnOrng, input[type="button"].btnOrng {
	color: white;   	
	background-color: orange;   
}

.btnOrng:hover, .formSub-btn.btnOrng:hover ,input[type="submit"].btnOrng:hover, input[type="button"].btnOrng:hover {
	background-color: #eeeeee;  /* grey lt3 */
	color: #424242 ; 			/* gray dk3  */
}

.btnSend, .formSub-btn.btnSend, input[type="submit"].btnSend, input[type="button"].btnSend, button[type="submit"].btnSend {
	background-color: #009688; /* teal */ 
	color: #FFFFFF; 
}
.btnSend:hover, .formSub-btn.btnSend:hover, input[type="submit"].btnSend:hover, input[type="button"].btnSend:hover {
	background-color: #eeeeee;  /* grey lt3 */
	color: #424242 ; 			/* gray dk3  */
}
.btnDisabled, input[type="submit"].btnDisabled, input[type="button"].btnDisabled {
	background-color: lightgray; 
	color: gray; 
	cursor: default;
} 
.rounded-btn {
  display:inline-block;
  font-size:16px;	
  text-align: center;
  vertical-align:middle;
  padding: 0px 5px;
  color: white;
  background-color: #4CAF50; /* green from chat buttons */
  border: 1px solid #4CAF50;  
  border-radius: 7px;
  min-height:24px;
  line-height:24px;
  margin:2px 0px;
}

.rounded-btn:hover {
  background-color: #e0f2f1;  /* teal lt5 */
  color: #4CAF50 ; /* green from chat buttons */
  font-size:16px;
  border: 1px solid #4CAF50;
}
.rounded-btn i{
	position:relative; 
	top:2px; 
	left:0%;
	font-size: 20px;
}
.icon-text {
	padding: 0px 4px;
	min-height: 24px;
	line-height: 24px;
	vertical-align: middle;
	}
.icon-text.icon-sm{
	padding: 0px 4px;
	}
.rounded-btn.icon-text i {
	position:relative; 
	top:-2px;
	vertical-align: middle;
}
.unRead {
	background-color: red!important;
	color: white;
	position:relative; 
	top:-12px;
	vertical-align: middle;
	border: 0;
	width: 18px;
	height: 18px;
	line-height:18px;
	font-size: 14px;
	padding: 0 0 5px 0;
	margin: 0 0 5px 0;
}
@media screen and (max-width: 580px) {
	.rounded-btn.btn-sm-mob {
	  display:inline-block;
	  font-size:10px;	
	  text-align: center;
	  vertical-align:middle;
	  padding: 0px 3px;
	  color: white;
	  background-color: #4CAF50; /* green from chat buttons */
	  border-radius: 5px;
	  height:16px;
	  line-height:16px;
	}
	.rounded-btn.btn-sm-mob i{
		position:relative; 
		top:50%; transform: 
		translateY(-50%); 
		left:0%;
		font-size: 14px;
	}
}

.btn-txt{
	font-size:14px; 
	position: relative; 
	top: -3px;
}
@media screen and (max-width: 580px) {
	.btn-txt{
		font-size:10px; 
		position: relative; 
		top: -2px;
	}
}
.rounded-btn-outline, .rounded-btn-outline:hover {
  display:inline-block;
  font-size:16px;	
  text-align: center;
  vertical-align:middle;
  padding: 0px 5px;
  border: 1px solid #4CAF50; /* green from chat buttons */
  border-radius: 7px;
  min-height:24px;
  line-height:24px;
}
input[type="submit"], input[type="file"], button[type="submit"], .btnGo {
	display:inline-block;
	text-align: center;
	vertical-align:middle;
	padding: 6px 22px;
	color: #FFFFFF; 
	background-color: #009688; /* teal */ 
	border: 1px solid #757575;
	border-radius: 5px;
	-webkit-appearance: none!important;	/* iphone/ipad */
	-moz-appearance: none!important;
	appearance: none!important;
	margin: 2px;
	cursor: pointer;
	font-weight: normal;
	font-size: 16px;
}
input[type="button"], button, input[type="reset"], .formSub-btn{
	display:inline-block;
	text-align: center;
	vertical-align:middle;
	padding: 6px 8px;
	color: #546e7a;   /* blue-gray dk1 */ 
    background-color: #fafafa;  /* grey lt5 */
	border: 1px solid #757575;	/* grey dk1 */
	border-radius: 5px;
	-webkit-appearance: none!important;	/* iphone/ipad */
	-moz-appearance: none!important;
	appearance: none!important;
	margin: 3px 0px;
	cursor: pointer;
	font-size: 16px;
}
input[type="button"].Expit {
	padding: 6px 22px;
	background-color:#ffab40;
	color:white;
}
input[type="submit"]:hover,  input[type="button"]:hover, input[type="file"]:hover{
	background-color: #eeeeee;  /* grey lt3 */
	color: #424242 ; 			/* gray dk3  */
	cursor: pointer;
}

.floating {
  box-shadow: 1px 1px 1px gray, 2px 2px 5px gray;
}
.rounded {
  border-radius: 7px;
}

.icon-sm {
	font-size: 14px;
}
.icon-text i{
	vertical-align: middle;
}
.icon-text.rounded-btn-outline i{
	position: relative;
	top: 0px;
	vertical-align: middle;
}
.icon-text.icon-sm i{
	font-size: 18px;
}
.btn-sm {
  font-size:12px!important;	
  padding: 1px 5px;
  border-radius: 5px;
  min-height:14px;
  line-height:14px;
}
.btn-secondary {
  background-color: #6c757d;
  color: #fff;
  border: 1px solid #6c757d;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
.btn-secondary:hover {
  background-color: #5a6268;
  border-color: #545b62;
}
.muted {
  color: #6c757d;
}

/* Login.asp */
.login-wrap { max-width: 600px; margin: 5rem auto; padding: 0 1rem; }
.login-inner { text-align: center; }
.login-title { margin-bottom: 1.5rem; }
.login-err { display: none; padding: 0.75rem 1rem; margin-bottom: 1rem; border-radius: 4px; background-color: #f8d7da; color: #721c24; white-space: pre-wrap; }
.login-wrap .btn-secondary { margin-top: 1rem; }

.hide {
	display: none!important;
}

@media screen and (max-width: 1024px) {
	Body {width: 100%; }
}

@media screen and (max-width: 699px) {
	.main {margin-top: 84px;} 	
}
@media screen and (min-width: 700px) {
	.main {margin-top: 0px;} 	
}


@media screen and (max-width: 560px) {
H1 {FONT-SIZE: 28px;}
}


@media screen and (max-width: 580px) {
table.TblListMenu {width: 98%;}
}

	
DIV.WrapTblScroll{
	overflow-x:auto;
}
.WrapNoScroll{
	display: inline-block;
}
.WidthMaxLim {
	width: 100%;
	max-width: 640px;
}

@media screen and (max-width: 640px) {
	DIV.WrapTblScroll{
		width: 100%;
		overflow-x:auto;
	}
	.WrapNoScroll{
		width: 100%;
	}
}
@media screen and (max-width: 460px) {
	DIV.WrapTblScroll{
		width: 460px;
		overflow-x:auto;
	}
	.WrapNoScroll{
		width: 460px;
	}
}
@media screen and (max-width: 450px) {
	DIV.WrapTblScroll{
		width: 450px;
		overflow-x:auto;
	}
	.WrapNoScroll{
		width: 450px;
	}
}
@media screen and (max-width: 440px) {
	DIV.WrapTblScroll{
		width: 440px;
		overflow-x:auto;
	}
	.WrapNoScroll{
		width: 440px;
	}
}
@media screen and (max-width: 430px) {
	DIV.WrapTblScroll{
		width: 430px;
		overflow-x:auto;
	}
	.WrapNoScroll{
		width: 430px;
	}
}
@media screen and (max-width: 420px) {
	DIV.WrapTblScroll{
		width: 420px;
		overflow-x:auto;
	}
	.WrapNoScroll{
		width: 420px;
	}
}
@media screen and (max-width: 410px) {
	DIV.WrapTblScroll{
		width: 410px;
		overflow-x:auto;
	}
	.WrapNoScroll{
		width: 410px;
	}
}
@media screen and (max-width: 400px) {
	DIV.WrapTblScroll{
		width: 400px;
		overflow-x:auto;
	}
	.WrapNoScroll{
		width: 400px;
	}
}
@media screen and (max-width: 390px) {
	DIV.WrapTblScroll{
		width: 390px;
		overflow-x:auto;
	}
	.WrapNoScroll{
		width: 390px;
	}
}
@media screen and (max-width: 380px) {
	DIV.WrapTblScroll{
		width: 380px;
		overflow-x:auto;
	}
	.WrapNoScroll{
		width: 380px;
	}
}
@media screen and (max-width: 370px) {
	DIV.WrapTblScroll{
		width: 370px;
		overflow-x:auto;
	}
	.WrapNoScroll{
		width: 370px;
	}
}
@media screen and (max-width: 360px) {
	DIV.WrapTblScroll{
		width: 360px;
		overflow-x:auto;
	}
	.WrapNoScroll{
		width: 360px;
	}
}
@media screen and (max-width: 350px) {
	DIV.WrapTblScroll{
		width: 350px;
		overflow-x:auto;
	}
	.WrapNoScroll{
		width: 350px;
		display: inline-block;
	}
}
@media screen and (max-width: 340px) {
	DIV.WrapTblScroll{
		width: 340px;
		overflow-x:auto;
	}
	.WrapNoScroll{
		width: 340px;
		display: inline-block;
	}
}
@media screen and (max-width: 330px) {
	DIV.WrapTblScroll{
		width: 330px;
		overflow-x:auto;
		display: inline-block;
	}
	.WrapNoScroll{
		width: 330px;
		display: inline-block;
	}
}

@media only screen and (min-width : 640px)  {
	.WidthMaxLim {width: 570px;}
}

@media only screen and (min-width : 320px) and (max-width : 640px) {
	body {-webkit-text-size-adjust: none;}
}


/* Show iPhone style toggle */
input.Toggle {
  display:none;
}
input.Toggle + label {
  display: block;
  position: relative;
  box-shadow: inset 0 0 0px 1px #d5d5d5;
  text-indent: -5000px;
  height: 30px;
  width: 50px;
  border-radius: 15px;
  cursor: pointer;
}

input.Toggle + label:before {
  content: "";
  position: absolute;
  display: block;
  height: 30px;
  width: 30px;
  top: 0;
  left: 0;
  border-radius: 15px;
  background: #b9f6ca;
  -moz-transition: .25s ease-in-out;
  -webkit-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

input.Toggle + label:after {
  content: "";
  position: absolute;
  display: inline;
  height: 30px;
  width: 30px;
  top: 0;
  left: 0px;
  border-radius: 15px;
  background: white;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), 0 2px 4px rgba(0, 0, 0, .2);
  -moz-transition: .25s ease-in-out;
  -webkit-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
input.Toggle:checked + label:before {
  width: 50px;
  background: #26a69a;  /* teal lt 1 */
}

input.Toggle:checked + label:after {
  left: 20px;
  box-shadow: inset 0 0 0 1px #69f0ae, 0 2px 4px rgba(0, 0, 0, .2);
}

a.dropdown-item{
	color: var(--el-color-main);
}
*,
:before,
:after {
	box-sizing: border-box;
	border-width: 0;
	border-style: solid;
	border-color: currentColor
}



html {
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji"
}

hr {
	height: 0;
	color: inherit;
	border-top-width: 1px
}

abbr:where([title]) {
	-webkit-text-decoration: underline dotted;
	text-decoration: underline dotted
}


input[type=checkbox], input[type=text] , input[type=email] , input[type=password], textarea {
	box-shadow: 1px 1px 1px gray inset, 1px 1px 3px gray inset ;
	padding:0px 3px;
}
input[type=text] , input[type=email] , input[type=password], textarea {
	height: 28px;
}
button,
select {
	text-transform: none
}

:-moz-focusring {
	outline: auto
}

:-moz-ui-invalid {
	box-shadow: none
}

progress {
	vertical-align: baseline
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto
}

[type=search] {
	-webkit-appearance: textfield;
	outline-offset: -2px
}

::-webkit-search-decoration {
	-webkit-appearance: none
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit
}

summary {
	display: list-item
}

fieldset {
	margin: 0;
	padding: 0
}

legend {
	padding: 0
}

ul,ol {  /* override bootstrap _reboot.scss */
	margin-top:1rem;
	margin-bottom:inherit;
}

menu {
	list-style: none;
	margin: 0;
	padding: 0
}

input::-moz-placeholder,
textarea::-moz-placeholder {
	opacity: 1;
	color: #9ca3af
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
	opacity: 1;
	color: #9ca3af
}

input::placeholder,
textarea::placeholder {
	opacity: 1;
	color: #9ca3af
}

button,
[role=button] {
	cursor: pointer
}

button:focus {
	outline:0;  /* override reboot that draws a blue outline */
}

:disabled {
	cursor: default
}

svg,
video,
canvas,
audio,
iframe,
embed,
object {
	display: block;
	vertical-align: middle
}

img,
video {
	max-width: 100%;
	height: auto;
	vertical-align: baseline;
}

[hidden] {
	display: none
}


/* ========== BankLib.1.01 app-specific ========== */

.topmenubar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	background-color: #00695c ; /* teal dk 4 */
}
.RLinks {
	margin-left: auto;
}
.RLinks .topmenulinks {
	FONT-WEIGHT: normal;
}
.topmenulinks{
	display:inline-block;
	FONT-WEIGHT: normal;
	FONT-SIZE: 16px;
	COLOR: white;
	background-color: #00695c;
	FONT-FAMILY: Arial;
	TEXT-DECORATION: none;
	border-radius: 4px;
	padding: 4px 2px 4px 2px;
	margin: 2px;
}
.topmenulinks:not(.topmenulinks-withimg):hover{
	COLOR: #004d40;
	background-color: #e0f2f1;
}
/* Logo + label: vertical center (overrides inline-block on .topmenulinks) */
.topmenulinks.topmenulinks-withimg {
	display: inline-flex;
	align-items: center;
	gap: 0;
}


table {
  border-collapse: collapse;
  width: 100%;
}
	
.tableFixHead thead{
	position: sticky;
	top: 0;
	color: #00695c; /* teal dk3 */
	background-color: #e0f2f1;  /* teal lt5 */
	text-align: left;
	z-index:1;
}
.tableFixHead td {
	text-align: left;
}
td, th {
	position: relative;
}
.tableFixHeadWrapper{
	overflow-y: auto;
	height: 100%;
}

.dpDn-BG{
	display:none;
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color: rgba(0,0,0,0.4);
	z-index:1000;
}
.dpDn-content .tableFixHeadWrapper{
	display: none;
	position: absolute;
	top: 20px;
	left: -30px;
	max-height: 400px;
	width: 380px;
	background-color: white;
	padding: 2px;
	box-shadow: 10px 10px 5px grey;
	z-index:2;
	resize: both;
}
.tableFixHead {
/*  position: -webkit-sticky;
  position: sticky;*/
  position: relative;
  top: 0;
}
.dpDn-content th{
	font-size: 16px;
	padding: 3px 8px 3px 0;
	background-color: #009688; /* teal */
	color: white;
}
.tdDesc, .clkSrch, .clkSrchEdit, .tdDate, .clkView {
	max-width: 300px;
	overflow: hidden;
	cursor: pointer;
	word-break: break-all;
	min-width: 130px;
}

th {
	font-weight: normal;
	font-size: 12px;
	text-align: left;
}
td {
	color: #212121;
}
tr {
	border-bottom: 1px solid rgba(0,0,0,0.12);
}
tr:nth-child(even of tr.focusDiv) {
	background-color: #fafafa;
}
TABLE.catSummary tbody td{
	font-size:14px;	
	/*color:grey;*/
}
.catSummary tbody .catTotal  td {
	color: #009688;
	font-weight: bold;
	font-size: 14px;
}
.catSummary tbody .subCatTotal  td {
	color: #424242;
/*	font-weight: bold;*/
	font-size: 14px;
}
.catSummary tbody .catAllTotal td {
	color: #424242;
	font-weight: bold;
}
.saveStatus{
	color: green;
	font-weight: bold;
}
i.check{
	color:green;
}
i.warn{
	color:red;
}
.boxConfirm{
	display: inline-block;
	border:1px solid darkgreen;
	padding: 5px 3px;
	margin: 15px 0px;
	background-color: #f9fbe7;  /* lime lt5 */
}
.boxConfirm>.accountName{
	color:green;
	font-weight: bold;
}
iframe.xtns{
	border: 2px solid #004d40;  /* teal dk4 */
}
iframe.xtns.floating{
	border: 3px solid grey;  
}
tr.noSave td {
	color: #757575 ;  /* grey dk1 */
}
.echoDesc{
	font-wieght: bold;
	word-wrap: break-word;
}

#ActionStatus{
	position: fixed; 
	top: 20px;
	right: 300px;
	width: 80px; 
	height: 30px;
	background-color: #f2f2f2;
	border: 1px solid gray;
	z-index: 2;
}
.hidden{
	visibility: hidden;
}
.popUp{
  visibility: visible;
  opacity: 1;
  transition: visibility 0s, opacity 0s;	
}
.fadeOut{
  visibility: hidden;
  opacity: 0;
  transition: visibility 4s, opacity 4s;	
}.fadeOutSlow{
  visibility: hidden;
  opacity: 0;
  transition: visibility 8s, opacity 8s;	
}
.icnDisabled{
	color: transparent; /*#9e9e9e;*/
}
.elemDisabled{
	background-color: #f2f2f2;
}
.elemBGGreen{
	background-color: #e6ffe6
}
.elemBGYellow{
	background-color: #ffffe6
}
.rowSelected{
	background-color: #ebf6f9;
}
.rowSelectedLast{
	border: 3px dotted red;
}
.rowNum {
	font-size: 10px;
}
.ErrCurr {
	border: 3px solid red;	
}
.curr {
	font-size: 12px;
}
.ErrCurr .curr {
	color: red;	
	background-color: yellow;	
}
.xtnRef {
	position: fixed;
	top: 20px;
	left: 15px;
	box-shadow: 0 0 3px grey, 5px 5px 10px grey;
	background-color: #e0f7fa;
	display: inline-block;
	padding: 3px;
	margin: 3px 0px;
	border: 1px grey solid;
	border-radius: 3px;
	z-index:2;
}
.xtnRefID{
	color: #757575;
	font-size: 13px;
}
.xtnRef .XData {
	color: green;
	font-weight: bold;
}
.RData, .XData, TR.RBAXData > TD > DIV {
	display:block;
	color: #673ab7   ; /* deep purple*/
	background-color: #ede7f6 ; /* deep purple lt5*/
	/*font-weight: bold;*/
	font-size: 13px;
	/*box-shadow: 1px 1px #f2f2f2;*/
	margin: 2px 0px 0px 0px;
	padding: 3px;
	border: 1px solid #43a047;  /* gren dk1 */
	border-radius: 4px;
}

TR.RBAXData {
	display:none;
}

.duplicate{
	background-color: #ffff8d!important; /* yellow Acc1*/
}
.view {
	display: inline-block;
	padding: 5px 12px;
	margin:1px;
	background-color: #e0f2f1;  /* teal lt5 */
	color: #009688;
	cursor: pointer;
}
.active{
	background-color: #009688;
	color: white;
}
.menuIcon {
	cursor: pointer;
	color: #424242;		/* grey dk3 */
	font-size: 19px;
	//background-color: black;
}

H2 a,H2 a:visited, H2 a:active, H2 a:hover{
	font-weight: bold;
	font-size:18px;
}
.bankXtnSrch {
	display: inline-block;
	border: 1px solid green;
	background-color: #e0f2f1; /* teal lt5 */
	border-radius: 15px 15px;
	padding: 0px 10px;
}
.bankXtnSrch span{
	padding: 0px 10px;
	margin:0px 5px;
}
.taxYearHdr, .ownerHdr {
	padding: 3px 10px;
}
.taxYearHdr span, .ownerHdr span{
	padding: 0px 10px;
}
.clear{
	position:absolute;
	top:0px;
	right:0px;
}
.descContainer{
	display:inline-block;
	position: relative;
	
}
.spBtwn{
	display: flex;
	justify-content: space-between;
}
	
.dpDn-wrapper, .popUp-wrapper {
	position: relative;
}
.dpDn-content{
    position: relative ;
    left: 50% ;
    top: 25% ;
    transform: translate(-50%, -50%) ;
    width: 90% ;
    max-width: 500px ;
    background-color: white;
    border-radius: 8px;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.4), 1px 1px 1px rgba(0, 0, 0, 0.9);
}
.popUp-content{
	/*top: -56px;*/
	display:none;
	position: absolute;	
	left: -30px;
	width: 100%;
	/*width:300px;*/
	min-width: 130px;
	max-width: 200px;
	z-index: 10;
	background-color: white;
	border: 1px black solid;
	box-shadow: 5px 5px 2px grey;
	bottom: 22px;
}
.popUp-trigger{
	cursor: pointer;
}
.dpDn-content>div, .popUp-content>div {
	font-size: 16px;
	color: #00796b;  /* teal dk2 */
	padding: 7px 10px;
}
.dpDn-content>div:nth-child(1) {
	background-color: #009688; /* teal */
	color: white;
	font-weight: bold;
	border-bottom: 1px grey solid; 
}
.dpDn-content>div:nth-child(2), .dpDn-content>div:nth-child(3), .menuFreq {
	cursor: pointer;
}
.freq TD{
	color: #616161; /* grey dk 2 */
}
.freqTableTitle {
	font-size: 14px;
	color: #212121;
}
.dpDn-content .clk,.dpDn-content .noTag {
	cursor: pointer; 
}
.dpDn-content .clk:hover,.dpDn-content .noTag:hover {
	cursor: pointer; 
	background-color: #ff9800; /* orange */
	color: white;
}
.dpDn-content input[type="text"] {
    width: calc(100% - 16px);
    margin: 8px 0;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.dpDn-content input[type="submit"],
.dpDn-content input[type="button"] {
    margin: 8px 8px 8px 0;
}
.dpDn-content > div:last-child {
    padding-bottom: 16px;
}


.lblColSrch{
	display: inline-block;
	color: #004d40;  /* teal dk4 */
	font-weight: lighter;
	text-align: right;
	padding: 3px 6px;
	border: 1px solid #4db6ac;
	background-color: white;
	border-radius: 5px;
}
.dayLabel{
	position:relative;
}
.lblMonth{
	display: inline-block;
	position: relative;
	width: 100%;
	font-size: 24px;
	font-weight: bold;
	color: white ;
	background-color: #009688; /* teal */
}
.tagIncome {
	display: inline-block;
	color: #004d40;  /* grey dk4 */
	font-weight: normal;
	text-align: center;
	padding: 3px 8px;
	border: 1px solid #009688;
	background-color: #e8f5e9;		/* green lt5 */
	border-radius: 12px;
	white-space: nowrap;
}
.tagExpense {
	display: inline-block;
	
	color: #212121;  /* grey dk4 */
	font-weight: normal;
	text-align: center;
	padding: 0px 3px;
	border: 1px solid #f57f17; 		/* yellow dk4 */
	background-color: #ffff8d;		/* yellow acc1 */
	border-radius: 0px 12px 12px 0px;
	white-space: nowrap;
}
.tagExpense div:nth-child(2) {
	color: red;  
	font-weight: bold;
}

.tagExpense.XData, .tagExpense.RData {	
	border-left: 3px #ea80fc solid;  
}
.tagExpense.taxYearExternal {	
	background-color: #fffde7;
	color: #757575;
}
.expense-wrapper{
	float:right;
}
.tagNonIncXfer {
	display: inline-block;
	color: #212121;  /* grey dk4 */
	font-weight: normal;
	text-align: center;
	padding: 0px 3px;
	border: 1px solid #e65100 ; 	/* orange dk4 */
	background-color: #ffd180 ;		/* orabge acc1 */
	border-radius: 0px 12px 12px 0px;
	white-space: nowrap;
}
.tagCurrConv {
	display: inline-block;
	color: #90a4ae;  /* blue grey lt2 */
	font-weight: normal;
	text-align: center;
	padding: 0px 3px;
	border: 1px solid #ffd180; 	/* orange acc1 */
	background-color: white ;		/* orabge lt-5 */
	border-radius: 0px 12px 12px 0px;
	font-size: 12px;
	white-space: nowrap;
}
.tagCalPlot {
	display: inline-block;
	color: #424242;  /* grey dk3 */
	font-weight: normal;
	text-align: center;
	padding: 0px 3px;
	border: 1px solid #e0e0e0;		/* grey lt2 */
	background-color: white;		/* grey lt2 */
	border-radius: 0px;
	box-shadow: 1px 1px 1px grey;
	white-space: nowrap;
}
.dateOutRange{
	background-color: #ffff00;		/* yellow Acc2 */
}
.exTaxYear {
	font-size:12px;
	color: #757575; /* grey dk */
	float:left;
}

.topR {
	font-size: 18px;
	position: relative;
	top:-6px;
	right:9px;
}
.topR:hover, .tdNote:hover, .clearTxtInput:hover {
	cursor: pointer;
}
.tdNote {
	min-width: 100px;
	min-height: 22px;
	height:100%;
	background-color: #eceff1; /* blue grey lt5 */
	border-bottom: 1px solid grey;
}
.receiptConfirmed{
	color: #4caf50 ; /* green */
	background-color: #e8f5e9 ; /* green lt5 */
	padding: 0px 0px;
}
.receiptConfirmedNot{
	color: #9e9e9e   ; /* grey */
	background-color: transparent ; 
	padding: 0px 0px;
}
.xrefLink{
	display: inline-block;
	color: #212121;  /* grey dk4 */
	font-weight: normal;
	padding: 2px 10px;
	border: 1px solid #f57f17; 		/* yellow dk4 */
	background-color: #ffff8d;		/* yellow acc1 */
	border-radius: 12px;
}

/* Calendar start */
table.calendar td th {
  border: 1px solid black;
}

table.calendar  {
  border-collapse: collapse;
}

table.calendar td {
	position: relative;
	font-size: 14px;
	width: 14.3%;
	height: 100px;
	vertical-align: top;
}
.calendarItem {
	/*display: flex;
	justify-content: space-between;*/
	border: 1px solid #009688;
	background-color: #e8f5e9;		/* green lt5 */
}
.calendarItem .desc{
	display: inline-block;
	max-width: 63px;
	white-space: nowrap;
	overflow: hidden;
	border: 0px grey solid;
}
.calendarItem .amount{
	display: inline-block;
	white-space: nowrap;
	border: 0px grey solid;
	border-radius: 5px;
}
.calendarEvent {
	border: 1px solid #fff3e0;		/* orange dk4 */
	background-color: #fff3e0;		/* orange dk1 */
	color: #212121;
}
.dayLabel{
	text-align: center;
	margin: auto;
	width: 100%;
	padding: 0px;
}

.tableFixHead.viewer {
	overflow-y: auto;
	height: calc( 100vh - 70px);
}

.calendar thead, .calendar th{
	position: sticky;
	top: 0;
	color: gray; /* teal dk3 */
	background-color: white;  /* teal lt5 */
	text-align: center;
	z-index:1;
	font-size: 14px;
}

.floating-month {
	position: sticky;
	top: 24px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 150, 136, 0.75);
	color: rgba(255, 255, 255, 0.9);
	padding: 8px 16px;
	text-align: center;
	font-weight: bold;
	border-radius: 4px;
	z-index: 5;
	display: none;
	pointer-events: none;
	width: fit-content;
	margin: 8px auto;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(4px);
}

.dayLabel {
    position: relative;
    cursor: pointer;
}

.dayLabel .add-icon {
    display: none;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-size: 16px;
}

.dayLabel:hover .add-icon {
    display: block;
}

.dayLabel .add-icon:hover {
    color: #000;
}

.calendarEvent {
    background-color: #eceff1;
    color: #455a64;
    padding: 2px 4px;
    margin: 2px 0;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 500;
    border-left: 3px solid #78909c;
}

.calendarEvent:hover {
    background-color: #cfd8dc;
}

.calendar-items-container {
    /*max-height: 250px;
    overflow-y: auto;*/
}

.calendar-items-container::-webkit-scrollbar {
    width: 4px;
}

.calendar-items-container::-webkit-scrollbar-track {
    background: #f8f9fa;
    border-radius: 2px;
}

.calendar-items-container::-webkit-scrollbar-thumb {
    background: rgba(136, 136, 136, 0.3);
    border-radius: 2px;
}

.calendar-items-container::-webkit-scrollbar-thumb:hover {
    background: rgba(85, 85, 85, 0.5);
}

.calendarItem {
    margin: 0 0 2px 0;
    font-size: 0.9em;
    padding: 4px;
    border-radius: 3px;
    max-width: 100%;
    overflow: visible;
}

.calendarItem > div {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.calendarItem > div > div {
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
}

.calendarItem span {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    word-wrap: break-word;
}

.calendarItem .tagExpense {
    flex-shrink: 0;
    white-space: nowrap;
}

.calendarItem .material-icons {
    flex-shrink: 0;
}
i.material-icons {
	vertical-align:middle;
}
.calendar td {
    max-width: 50px;
    min-width: 120px;
    width: 14.3%;
    vertical-align: top;
    padding: 2px;
    position: relative;
}

/* Add Monday divider */
.calendar td:nth-child(2)::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to right, rgba(0,0,0,0.1), rgba(0,0,0,0));
    pointer-events: none;
}

/* Add Friday divider */
.calendar td:nth-child(6)::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to left, rgba(0,0,0,0.1), rgba(0,0,0,0));
    pointer-events: none;
}

/* Add hover effect to make dividers more visible */
.calendar:hover td:nth-child(2)::before {
    background: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0));
}

.calendar:hover td:nth-child(6)::after {
    background: linear-gradient(to left, rgba(0,0,0,0.2), rgba(0,0,0,0));
}

.calendarItem.bank-transaction {
    background-color: #e3f2fd;
    border-left: 3px solid #2196f3;
}

.calendarItem.receipt {
    background-color: #e8f5e9;
    border-left: 3px solid #4caf50;
}

.calendarItem.manual-transaction {
    background-color: #fff3e0;
    border-left: 3px solid #ff9800;
}

.calendarItem.plot-tag {
    border-right: 3px solid #9c27b0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.calendarItem.plot-tag.bank-transaction {
    background: linear-gradient(to right, #e3f2fd, #f3e5f5);
}

.calendarItem.plot-tag.receipt {
    background: linear-gradient(to right, #e8f5e9, #f3e5f5);
}

.calendarItem.plot-tag.manual-transaction {
    background: linear-gradient(to right, #fff3e0, #f3e5f5);
}

.calendarItem:hover {
    opacity: 0.9;
}

.calendarItem .tagExpense {
    font-size: 0.8em;
}

.tagExpense div {
    display: inline-block;
    margin-right: 4px;
}

.bank-account-popup {
    background: white;
    border: 1px solid #ccc;
    padding: 8px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-size: 0.9em;
    max-width: 200px;
}

.bank-account-popup a {
    color: #2196f3;
    text-decoration: none;
    cursor: pointer;
}

.bank-account-popup a:hover {
    text-decoration: underline;
}

.calendarItem.bank-transaction {
    position: relative;
    cursor: pointer;
}

/* Add isolation to popup container */
.popup-container {
    isolation: isolate;
    position: relative;
    z-index: 1000;
}
.popup-info{
	color:gray;
}
/* End of Calendar styles */

.tagAmntWrn{
	background-color: #fff8e1!important;		/*  amber lt5 */
}
.dupRow, .dupRow TD{
	background-color: #ffebee!important;		/*  red lt5 */
	color: #757575!important;		/* grey dk1 */
}


/* add Dan to avoid collision with bootstrap tooltip */
.tooltipDan {
	position: absolute;
	display: inline-block;
	background-color: black;
	color: white;
	bottom: -18px;
	right: -80px;
	left: -80px;
	bottom:48px;
	font-size: 14px;
	padding: 5px;
	margin:0 auto;
	z-index:11;
}
.tooltipped{
	position: static;
}

.tooltip {
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  top:-40px;
  right:20px;
  z-index: 1;
}
.left .tooltip .tooltiptext {
  right:200px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}


.clearTxtInput{
	position: relative;
	left: -12px;
}

.subtle-btn{
	display:inline-block;
	cursor: pointer;
	height: 36px;
	line-height:36px;
	vertical-align: bottom;
	margin:0 4px;
}
.subtle-btn:hover{
	background-color:#e0e0e0;
}
.subtle-btn i {
	height: 28px;
	line-height:28px;
	vertical-align:middle;
}

form[name="BankAccountAdd"] table {
    width: 100%;
    border-collapse: collapse;
}

form[name="BankAccountAdd"] td {
    padding: 10px;
    vertical-align: middle;
}

form[name="BankAccountAdd"] input[type="text"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type="submit"], button[type="submit"], .btnGo {
    background-color: #009688; /* teal */
    color: white;
	margin:2px;
    border: 1px solid #757575;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.lnkDelete{
	cursor: pointer;
	font-size:14px;
	color:red;
}

.error-message {
    color: #d32f2f; /* red */
    font-weight: bold;
    margin-top: 10px;
}
.lblErr{
	font-weight:bold;
	color:red!important;
}
.recViewer-container {
	position: fixed; /* Use fixed positioning to keep it within the viewport */
	top: 50px; /* Adjust as needed */
	left: 0; /* Align to the left */
	width: 470px; /* Initial width */
	height: 500px; /* Initial height */
	max-width: 90vw; /* Maximum width as a percentage of the viewport width */
	max-height: 100vh; /* Maximum height as a percentage of the viewport height */
	background-color: white;
	border: 1px solid #ccc;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	z-index: 100; /* Ensure it appears above other elements */
	resize: both; /* Allow resizing */
	overflow: auto; /* Add scrollbars if content overflows */
}

.split-view .recViewer-container {
	top: 0px
}

.recViewer-container .close {
	position: absolute;
	top: 5px;
	right: 5px;
	cursor: pointer;
}

.recViewer-container iframe {
	width: 100%;
	height: calc(100% - 30px); /* Adjust height to account for close button */
	border: none;
}

.recViewer-container {
    display: block;
    position: fixed;
    top: 60px;
    left: 0;
    /*width: 300px; */
    height: 400px; 
    overflow: hidden;
    z-index: 10;
	resize: both;
}

/*.recViewer-container .close {
    position: absolute;
    right: 12px;
    top: 0px;
    cursor: pointer;
    z-index: 11;
    background: rgba(255, 255, 255, 0.8);
    padding: 2px;
    border-radius: 3px;
	color: black;
	opacity: .5;
}*/

.recViewer-container .zoom-controls {
    position: relative;
    top: 0px;
    left: 5px;
    z-index: 11;
    background: rgba(255, 255, 255, 0.8);
    padding: 2px;
    border-radius: 3px;
}

.recViewer-container .zoom-controls button {
    margin: 0 2px;
    padding: 2px 5px;
    cursor: pointer;
}

.recViewer-container .image-container {
    width: 100%;
    height: calc(100% - 40px);
    overflow: auto;
    position: relative;
}

.recViewer-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.img-viewer {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.1s ease;
}

.hide {
    display: none;
}

#imgViewer {
  transform-origin: top center;
  display: block; /* ensure block to avoid inline image gaps */
  max-width: 100%;
  height: auto;
}

.pdfContainer {
	display:block;
	top: 20px;
	left: 30px;
	width: 630px; 
	height: 600px; 
	overflow: auto;
}


a.delLink {
	padding:4px 12px;
	color:red;
	FONT-WEIGHT: normal;
	margin: 4px 8px;
	vertical-align: middle;
	border-radius:4px;
}
a.delLink:hover {
	color: white;
	background-color:red;
}

.featherlight-content iframe {
	width: calc(100vw - 80px);
	max-width: 500px;
	height: calc(100vh - 80px);
	max-height:600px;
}

/* Modal container */
.modal {
	display: block; /* Hidden by hide class */
	position: fixed;
	z-index: 9;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(128, 128, 128, 0.8); /* gray with opacity */
}

/* Modal content */
.modal-content {
	position: relative;
	margin: 40px auto;
	padding: 0;
	width: 95%;
	/*max-width:800px;*/
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Close button */
.modal-close {
	position: absolute;
	top: 10px;
	right: 20px;
	color: #aaa;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
}

.modal-close:hover,
.modal-close:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}

/* Iframe popup (#popupModal only): fill available viewport height */
#popupModal.modal {
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	padding: 40px 0;
	min-height: 100%;
}

#popupModal .modal-content {
	margin: 0 auto;
	width: 95%;
	flex: 1 1 auto;
	max-height: calc(100vh - 80px);
	min-height: 0;
	display: flex;
	flex-direction: column;
}

#popupModal .popup-modal {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

#popupModal #popupIframe {
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	height: auto;
	border: none;
	padding: 8px;
	box-sizing: border-box;
}

/* End Modal */		

.clkSrchEdit-input{
	min-width:200px;
}
.clkSrchEdit-input[name='txtFNameSrch'], .clkSrchEdit-input[name='txtFNameClientSrch'], .clkSrchEdit-input[name='txtNoteSE']{
	width: 95%;
	max-width:500px;
}

/* Select2 renders a .select2-container as the next sibling of the <select>; .hide on the select alone does not hide it. */
#clkSrchEditModal select.hide + .select2-container {
	display: none !important;
}

/* ShowSelectListH */
.selH-wrapper {
	position: relative;
	font-family: Arial, sans-serif;
	width: 90%;
}

/* Header styles */
.selH-header {
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 8px 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	background: white;
}

/* Dropdown styles */
.selH-dropdown {
	position: absolute;
	width: 100%;
	background: white;
	border: 1px solid #ccc;
	border-radius: 4px;
	margin-top: 4px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	z-index: 1000;
}

/* Search container */
.search-container {
	position: relative;
	display: flex;
	align-items: center;
	padding: 8px;
	border-bottom: 1px solid #eee;
}

.cat-search {
	width: 100%;
	padding: 8px 30px 8px 8px; /* Combined padding */
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}

/* Clear icon */
.clear-icon {
	position: absolute;
	right: 12px;
	cursor: pointer;
	color: #999;
	font-size: 18px;
	font-weight: bold;
	padding: 0 8px;
	user-select: none;
}

.clear-icon:hover {
	color: #666;
}

/* Select container and items */
.selH-container {
	position: relative;
	overflow-y: auto;
	overflow-x: scroll;
	border-bottom: 1px solid #eee;
}

.custom-select {
	border: 1px solid #ccc;
	border-radius: 4px;
	height: 300px;
	max-height: 300px;
	overflow-y: scroll;
}

.selH-items {
	padding: 8px 0;
}

.selH-items option {
	display: none;
}

/* Item styles */
.selH-item {
	padding: 8px 12px;
	cursor: pointer;
	display: flex;
	align-items: center;
	font-weight: normal;
	color: #424242;
}

.selH-item:hover {
	background-color: #f0f0f0;
}

.selH-item.selected {
	background-color: #e0e0e0;
}

/* Level-specific styles */
.selH-item[data-level="0"] {
	font-weight: bold;
	color: #495057;
}

.selH-item[data-level="1"] {
	color: #495057;
}

.selH-item[data-level="2"],
.selH-item[data-level="5"] {
	color: brown;
}

.selH-item[data-level="3"] {
	color: green;
}

.selH-item[data-level="4"] {
	color: #495057;
}

/* Icons */
.expand-icon {
	cursor: pointer;
	margin-right: 8px;
	transition: transform 0.2s;
	font-size: 16px;
}

.collapsed .expand-icon {
	transform: rotate(-90deg);
}

.dropdown-icon {
	font-size: 20px;
	color: #666;
}

/* Edit link */
.selH-item > a.edit {
	margin-left: auto;
}

.selH-item > a.edit > .material-icons {
	font-size: 18px;
}

/* Footer */
.selH-footer {
	padding: 8px;
	background: #f9f9f9;
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}

.footer-link {
	text-decoration: none;
	padding: 4px 8px;
}

.footer-link:hover {
	text-decoration: underline;
}

/* H2 dropdown links (Tax Year, Cat) - indicate clickable */
h2 a.h2-select {
	cursor: pointer;
	text-decoration: none;
}
h2 a.h2-select:hover {
	text-decoration: underline;
}
h2 a.h2-select .material-icons {
	opacity: 0.8;
}

/* ReceiptsView: Tax Year dropdown opened from H2 – no table TH */
.receipts-taxyear-dpdn {
	display: inline-block;
	width: 0;
	height: 0;
	overflow: visible;
	position: relative;
}
.receipts-taxyear-dpdn .dpDn-trigger {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
}
.receipts-taxyear-dpdn .dpDn-content {
	position: fixed !important;
	left: 50% !important;
	top: 12% !important;
	transform: translate(-50%, 0);
	z-index: 1000;
	background: #fff;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	border-radius: 4px;
	min-width: 200px;
}

.truncate-2rows {
  display: -webkit-box;
  -webkit-box-orient: vertical;  /* REQUIRED - MISSING! */
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.4em;
  max-height: 2.8em;  /* 2 × 1.4em */
}

/* ========== From ASP pages (moved into central CSS) ========== */

/* Pagination - from BankLib.asp */
.PageNumBig {
	display: inline-block;
	padding: 6px 10px;
	margin: 1px 0px;
	border-radius: 4px;
	color: gray;
	font-size: 12px;
	background-color: #f5f2f0;
	border: 1px solid gray;
}
.PageNumBig:hover {
	font-size: 12px;
	background-color: #cccccc;
}
.PageNumActive {
	display: inline-block;
	padding: 6px 10px;
	margin: 1px 0px;
	border-radius: 4px;
	color: black;
	font-size: 12px;
	font-weight: bold;
	background-color: white;
	border: 1px solid #cb6a1f;
}
.PageArrow {
	display: inline-block;
	padding: 6px 24px;
	margin: 1px 0px;
	border-radius: 4px;
	color: gray;
	font-size: 12px;
	background-color: #f5f2f0;
	border: 1px solid gray;
}
.PageArrow:hover {
	font-size: 12px;
	background-color: #cccccc;
}
.PageGoBtn {
	display: inline-block;
	padding: 6px 10px;
	margin: 1px 0px;
	font-size: 12px;
	border: 1px outset slategray;
	border-radius: 6px;
}
.spltPgNav {
	cursor: pointer;
}

/* Column toggle - shared by IncomesView, ExpensesView, ReceiptsViews */
.column-toggle {
	background: #f0f0f0;
	border: 1px solid #ccc;
	padding: 5px 10px;
	margin: 5px;
	border-radius: 3px;
	cursor: pointer;
	font-size: 12px;
}
.column-toggle:hover {
	background: #e0e0e0;
}
.column-toggle.active {
	background: #007cba;
	color: white;
}

/* Reports - category path */
.cat-path {
	display: inline-block;
	max-width: 50px;
	overflow: hidden;
	text-overflow: hidden;
	vertical-align: top;
	border: 1px solid green;
	border-radius: 4px;
	padding: 0 1px;
	margin: 0 2px;
}
.cat-path > span {
	display: inline-block;
	width: 40px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: top;
}

/* Select2 above modals (e.g. ReceiptsView) */
.select2-container--open,
.select2-dropdown {
	z-index: 10002 !important;
}

/* ========== Merged from ASP pages (all inline CSS moved here) ========== */

/* ReceiptsViews.asp */
body.receipts-views-page { padding: 15px; font-family: sans-serif; }
body.receipts-views-page .view { display: inline-block; margin: 4px 8px 4px 0; padding: 6px 12px; cursor: pointer; border-radius: 4px; background: #eee; }
body.receipts-views-page .view.active { background: #333; color: #fff; }
body.receipts-views-page .view:hover { background: #ddd; }
body.receipts-views-page .view.active:hover { background: #555; }
.views-section { margin-bottom: 16px; }
.column-section { margin-top: 16px; }

/* IncomesView / ExpensesView / Reports - viewer height override */
.tableFixHead.viewer {
	overflow-y: auto;
	height: calc(100vh - 120px);
}

/* ReceiptsView.asp - table has .tableFixHead without .viewer */
body.receipts-view-page .tableFixHead {
	overflow-y: auto;
	height: calc(100vh - 180px);
}
.hide-add-columns th.col-add-date,
.hide-add-columns td.col-add-date,
.hide-add-columns th.col-added-by,
.hide-add-columns td.col-added-by,
.hide-add-columns th.col-parsed-date,
.hide-add-columns td.col-parsed-date { display: none; }
.hide-parse-columns th.col-parse-log,
.hide-parse-columns td.col-parse-log,
.hide-parse-columns th.col-bank-account,
.hide-parse-columns td.col-bank-account,
.hide-parse-columns th.col-bax-per-rec,
.hide-parse-columns td.col-bax-per-rec { display: none; }
.hide-amazon-columns th.col-order-id,
.hide-amazon-columns td.col-order-id,
.hide-amazon-columns th.col-amzn-payment-type,
.hide-amazon-columns td.col-amzn-payment-type,
.hide-amazon-columns th.col-amzn-payment-card-num,
.hide-amazon-columns td.col-amzn-payment-card-num,
.hide-amazon-columns th.col-amzn-charge-id,
.hide-amazon-columns td.col-amzn-charge-id { display: none; }
.pdfContainer {
	display: block;
	position: fixed;
	top: 100px;
	left: 140px;
	width: 470px;
	height: 500px;
	overflow: auto;
	border: 3px grey solid;
	z-index: 10;
}

/* IncomesView.asp - column toggles */
.hide-AddDate .col-AddDate,
.hide-AddDate td:nth-child(2),
.hide-EditDate .col-EditDate,
.hide-EditDate td:nth-child(3) { display: none; }
.hide-ApplyPct .col-ApplyPct,
.hide-ApplyPct .td-ApplyPct,
.hide-AmountCurrXtn .col-AmountCurrXtn,
.hide-AmountCurrXtn .td-AmountCurrXtn,
.hide-ApplyHSTPct .col-ApplyHSTPct,
.hide-ApplyHSTPct .td-ApplyHSTPct,
.hide-HSTCurrXtn .col-HSTCurrXtn,
.hide-HSTCurrXtn .td-HSTCurrXtn,
.hide-HST .col-HST,
.hide-HST .td-HST { display: none; }

/* ExpensesView.asp - column toggles */
.hide-ApplyAmntCurrXtn .col-ApplyAmntCurrXtn,
.hide-ApplyAmntCurrXtn .td-ApplyAmntCurrXtn,
.hide-ApplyHSTAmntCurrXtn .col-ApplyHSTAmntCurrXtn,
.hide-ApplyHSTAmntCurrXtn .td-ApplyHSTAmntCurrXtn,
.hide-ApplyHSTAmnt .col-ApplyHSTAmnt,
.hide-ApplyHSTAmnt .td-ApplyHSTAmnt { display: none; }
.hide-UCC .col-UCC,
.hide-UCC .td-UCC { display: none; }

/* ReceiptAddM.asp - upload UI */
.copy-icon { cursor: pointer; display: inline-block; margin-left: 10px; color: blue; }
.upload-container { margin: 10px 0; padding: 15px; border: 1px solid #ddd; border-radius: 4px; }
.file-icon { width: 24px; height: 24px; margin-right: 10px; vertical-align: middle; }
.progress-bar { height: 10px; background-color: #f0f0f0; border-radius: 5px; margin: 10px 0; }
.progress-fill { height: 100%; background-color: #4CAF50; border-radius: 5px; width: 0%; transition: width 0.3s ease; }
body.upload-page .button { padding: 5px 10px; margin: 0 5px; border-radius: 3px; border: 1px solid #ddd; cursor: pointer; }
body.upload-page .button:disabled { opacity: 0.5; cursor: not-allowed; }
.upload-action-btn { padding: 8px 16px; font-size: 16px; font-weight: 600; border-radius: 5px; }
.upload-action-btn-green { background-color: #4CAF50; color: #fff; border: 1px solid #3d8c40; }
.upload-action-btn-green:hover { background-color: #449d48; color: #fff; }
body.upload-page #doneBtn {
	display: inline-block;
	padding: 8px 16px;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	color: #546e7a;
	background-color: #fafafa;
	border: 1px solid #757575;
	border-radius: 5px;
}
body.upload-page #doneBtn:hover { background-color: #eeeeee; color: #424242; }
.speed-info { font-size: 0.9em; color: #666; margin: 5px 0; }
body.upload-page .button-group { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
#totalCount, #totalRequested { white-space: nowrap; }
#uploadProgressBar { height: 25px; background-color: #f0f0f0; border-radius: 12px; overflow: hidden; margin-top: 10px; position: relative; }
#uploadProgressFill { height: 100%; background-color: #4CAF50; width: 0%; transition: width 0.4s ease; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; }
.progress-row { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 10px; }
.progress-stats { text-align: center; font-size: 16px; color: #666; font-weight: bold; margin-bottom: 5px; }
.progress-bar-row { display: flex; align-items: center; gap: 25px; width: 100%; }
.progress-icon { font-size: 32px; color: #4CAF50; }
#uploadStatusIcon { font-size: 32px; margin-top: 15px; text-align: center; }

/* ReceiptParseAuto.asp */
.split-view { display: flex; flex-direction: row; width: 100%; height: 90vh; gap: 10px; }
.split-view .viewer { flex: 1; height: 100%; padding: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.split-view .results { flex: 1; height: 100%; padding: 8px; overflow: auto; }
@media (max-width: 480px) {
	.split-view { flex-direction: column; }
	.split-view .viewer { height: 60vh; }
	.split-view .results { height: auto; }
}
body.parse-auto .img-viewer { width: 100%; height: 100%; object-fit: contain; transition: transform 0.1s ease; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); min-width: 100%; min-height: 100%; }
body.parse-auto .recViewer-container { width: 100%; height: 100%; position: relative; }
body.parse-auto .recViewer-container .zoom-controls { position: absolute; top: 5px; left: 5px; z-index: 11; background: rgba(255,255,255,0.8); padding: 2px; border-radius: 3px; }
body.parse-auto .recViewer-container .zoom-controls button { margin: 0 2px; padding: 2px 5px; cursor: pointer; }
body.parse-auto .results table { width: 100%; border-collapse: collapse; }
body.parse-auto .results th,
body.parse-auto .results td { border: 1px solid #ddd; padding: 4px; text-align: left; }
body.parse-auto .results td:nth-child(3),
body.parse-auto .results td:nth-child(4),
body.parse-auto .results td:nth-child(5) { font-weight: 500; color: #1a73e8; }
body.parse-auto .results td:nth-child(5) { font-weight: 600; font-size: 1.1em; }
body.parse-auto .results thead th:nth-child(3),
body.parse-auto .results thead th:nth-child(4),
body.parse-auto .results thead th:nth-child(5) { background-color: #f8f9fa; border-bottom: 2px solid #1a73e8; }
body.parse-auto .success { color: green; }
body.parse-auto .error { color: red; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
body.parse-auto .spinner { animation: spin 1s linear infinite; display: inline-block; }

/* BankXtnsAddFolder.asp */
body.BankXtnsAddFolder .XtnDetails,
body.BankXtnsAddFolder .Header { display: none; }

/* CalendarEventUpdate.asp */
body.calendar-event-form .form-container { padding: 20px; max-width: 500px; margin: 0 auto; }
body.calendar-event-form .form-group { margin-bottom: 15px; }
body.calendar-event-form .form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
body.calendar-event-form .form-group input[type="text"],
body.calendar-event-form .form-group textarea { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
body.calendar-event-form .form-group textarea { height: 100px; resize: vertical; }
body.calendar-event-form .error { color: red; font-size: 0.9em; margin-top: 5px; }
body.calendar-event-form .button-group { margin-top: 20px; text-align: right; }
body.calendar-event-form .button-group button { padding: 8px 16px; margin-left: 10px; border: none; border-radius: 4px; cursor: pointer; }
body.calendar-event-form .button-group button[type="submit"] { background-color: #4CAF50; color: white; }
body.calendar-event-form .button-group button[type="button"] { background-color: #f44336; color: white; }

/* CalendarPlotData.asp */
body.calendar-plot-data .modal-content { padding: 20px; }
body.calendar-plot-data .checkbox-group { margin: 15px 0; }
body.calendar-plot-data .checkbox-group label { display: block; margin: 5px 0; }
body.calendar-plot-data .eq-btn-group { margin-top: 20px; text-align: right; }
body.calendar-plot-data .eq-btn-group button { margin-left: 10px; }

/* TagUpdate.asp - suggestion list */
.suggestion-list { background: white; border: 1px solid #ccc; border-radius: 4px; list-style: none; margin: 0; padding: 0; z-index: 9999; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.suggestion-list li { padding: 8px 12px; cursor: pointer; }
.suggestion-list li:hover { background-color: #f0f0f0; }

/* Calendar.asp - gen modal (JS-created) */
.gen-modal-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.gen-modal-content { width: 90%; max-width: 1200px; height: 90%; background-color: white; border-radius: 4px; position: relative; }
.gen-modal-close { position: absolute; right: 10px; top: 10px; border: none; background: none; font-size: 24px; cursor: pointer; z-index: 1; }
.gen-modal-content iframe { width: 100%; height: 100%; border: none; }

/* ShowSelectListH */