/* ============================================================
   ADDED 2026-09-10 (Claude): shared modern palette - used across
   saawebappcss.css and dashboard.css (loaded on every authenticated
   page via layout.html). Change values here to re-theme the whole
   app; do not hardcode these colors elsewhere. Did not exist before
   this date.
   ============================================================ */
:root{
  --brand-teal:#0f8a8a;
  --brand-teal-dark:#0b6666;
  --brand-teal-light:#e6f5f5;
  --brand-pink:#ec4899;
  --ink:#1f2937;
  --muted:#6b7280;
  --border:#e2e8f0;
  --surface:#ffffff;
  --danger:#dc2626;
}
/* ============================================================
   MODIFIED 2026-09-10 (Claude): broad modernization pass through
   this whole file using the palette above - buttons (.actionbtn,
   .actionbtnBig, .cancelbtn, .actioncpybtn, .buttonCal, .button,
   plain <button>), form inputs/selects/textareas (border, radius,
   focus glow), tables (.table-scroll header), titles/labels
   (.PageTitle, .appPageTitle, .textcolor, .actionLabel, .pageLabel,
   .formLabel, .dateLabel, bare <p>), .tab-links, .modal-content/
   header/footer, and global body font-family. Old values were dated
   colors (navy #0000a0, olive #538b01, dark green #006400/#808000,
   green #4CAF50/#45a049, red #f44336, seagreen, dodgerblue) and
   Arial-only fonts; not preserved inline per-rule due to volume
   (15+ rules touched) - see session/git history for prior values.
   Smaller, later, individually-targeted fixes below (tab hover
   color, .form-control focus ring, white page background) DO have
   their old values commented inline, since those were few and
   worth keeping visible.
   ============================================================ */
/*class for */
/*snackbar / Toast */
/* The snackbar - position it at the bottom and in the middle of the screen */
#msgbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: #333; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 1; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  top: 60px; /* 30px from the top */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#msgbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {top: 0; opacity: 0;}
  to {top: 60px; opacity: 1;}
}

@keyframes fadein {
  from {top: 0; opacity: 0;}
  to {top: 60px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {top: 60px; opacity: 1;}
  to {top: 0; opacity: 0;}
}

@keyframes fadeout {
  from {top: 60px; opacity: 1;}
  to {top: 0; opacity: 0;}
}
/*overlay*/
#overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: wait; /* Add a pointer on hover */
}

/*a4 settings */
.A4 {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  padding: 10px 25px;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
  overflow-y: scroll;
  box-sizing: border-box;
}

@media print {
  .page-break {
    display: block;
    page-break-before: always;
  }

  size: A4 portrait;
}

@media print {
  body {
    margin: 0;
    padding: 0;
  }

  .A4 {
    box-shadow: none;
    margin: 0;
    width: auto;
    height: auto;
  }

  .noprint {
    display: none;
  }

  .enable-print {
    display: block;
  }
}
/*a4 settings */
/* Style the tab */
/*----- Tabs -----*/
.tabs {
	width:100%;
	display:inline-block;
	
}

/*----- Tab Links -----*/
/* Clearfix */
	.tab-links:after {
	display:block;
	clear:both;
	content:'';
}

.tab-links li {
	margin:0px -1px;
	float:left;
	list-style:none;
}

.tab-links a {
	padding:9px 15px;
	display:inline-block;
	border-radius:10px 10px 0px 0px;
	background: var(--brand-teal);
	font-size:16px;
	font-weight:600;
	color:white; /*#4c4c4c;*/
	transition:background .15s ease;
    border-top:1px solid #ddd;
	border-left:1px solid #ddd;
	border-right:1px solid #ddd;
	height:35px;

}

/* MODIFIED 2026-09-10 (Claude): added color:#000 on hover per request
   (text stayed white/hard-to-read against the teal hover background
   before). Old rule had no color line:
.tab-links a:hover {
	background:var(--brand-teal-dark);
	text-decoration:none;
}
*/
.tab-links a:hover {
	background:var(--brand-teal-dark);
	color:#000;
	text-decoration:none;
}

li.active a, li.active a:hover {
	background:#fff;
	color:#4c4c4c;
}

/*----- Content of Tabs -----*/
.tab-content {
	padding: 0px 15px 15px 15px;
	border-radius:3px;
	box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
	background:#fff;
	/*border:1px solid #ddd;*/
	margin-top:none;
}

.tab {
	display:none;
	margin:none;
}

.tab.active {
	display:block;
}
/*form css */
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  /* background-color: yellow; */
  /* padding: 50px; */
  /* font-size: 20px; */
}
.cursorhelp{
cursor:help;
}
html.busy, html.busy * {  
  cursor: wait !important;  
}  

input:invalid:required {
  background-image: linear-gradient(to right, pink, lightgreen);
}
select:invalid:required{
 background-image: linear-gradient(to right, pink, lightgreen);
}
input:invalid {
    border-color: red;
}
input,
input:valid {
    border-color: #ccc;
}
object:focus {
  outline: red;
}
/*css for text color and Gradient*/
.PageTitle {
        font-size:20px;
        color:var(--ink);
        font-weight:700;
		text-align:left;
		width:100%
      }
.appPageTitle {
        font-size:16px;
        color:var(--brand-teal-dark);
        font-weight:600;
        font-style:normal;
		text-align:left;
		width:100%
      }
	  .textcolor {
        font-size:14px;
        color:var(--brand-teal-dark);
         font-weight:600;
       /* font-style:italic; */
      }
	  .atext {
		color:var(--danger);
        font-weight:bold;
        font-style:italic;
      }
 p {
        font-size:14px;
        color:var(--ink);
        font-weight:normal;
        font-style:normal;
      }
      .dateLabel {
        color: var(--danger);
      }
      .actionLabel { /* OK, a bit contrived... */
        color: var(--brand-teal-dark);
      }
	  .pageLabel { /* OK, a bit contrived... */
        color: var(--brand-teal-dark);
      }
	  .formLabel { /* OK, a bit contrived... */
        color: var(--muted);
        font-weight:600;
      }
	  .hideColumn{
		display:none;
		/*visibility:collapse;*/
	  }
/* primary Selection */
.primaryselection{
	margin-left:15px;
	height:25px;
}
/* */
/*Sidebar 2nd level*/
.sidebar .fa.arrow:before {
  content: "\f105";
  margin-left: 3px;
}

.nav-second-level {
  display: none;
}
/* */
	/* Change the link color on hover */
/* 	li a:hover {
	  background-color: #555;
	  color: white;
	} */
/* 	.active {
  background-color: #006400;
  color: white;
} */
/* MODIFIED 2026-09-10 (Claude): background kept plain white on every
   page per explicit request. Old rule:
.divGrad {
  background-image: linear-gradient(white, blue);
}
*/
.divGrad {
  background-color: #ffffff;
}
/* ADDED 2026-09-10 (Claude): safety net so no page/theme can
   reintroduce a colored page background - did not exist before. */
body, html {
  background-color: #ffffff;
}
/*end of css for text Color */
/*css for Modal form */
body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;}

/* Full-width input fields */
input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;

}
input[type=text]:focus, input[type=password]:focus {
  border-color: var(--brand-teal);
  box-shadow: 0 0 0 3px rgba(15,138,138,.15);
  outline: none;
}

/* Set a style for all buttons */
button {
  background-color: var(--brand-teal);
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  transition: filter .15s ease;
}

button:hover {
  filter: brightness(1.08);
  opacity: 1;
}
/* Extra styles for the cancel button */
.fiveelementsize {width: 18%;margin:1%;float: left;}
.fourelementsize {width: 23%;margin:1%;float: left;}
.threeelementsize {width: 30%;margin:1%;float: left;}
.twoelementsize {width: 9%;margin:1%;float: center;}
.actioncpybtn {
  width: auto;
  padding: 10px 18px;
  background-color: var(--muted);
  color: white;
  border-radius: 8px;
  height:30px;
  text-align:center;
  display:table-cell;
  vertical-align:middle;
  line-height:12px;
  margin:1px;
  white-space:normal;
  min-width:75px;
  -moz-outline:0 none;
  transition: filter .15s ease;
 }
.actionbtn {
  width: auto;
  padding: 10px 18px;
  background-color: var(--brand-teal);
  color: white;
  border-radius: 8px;
  height:30px;
  text-align:center;
  display:table-cell;
  vertical-align:middle;
  line-height:12px;
  margin:1px;
  white-space:normal;
  min-width:75px;
  -moz-outline:0 none;
  transition: filter .15s ease;
 }
.actionbtnBig {
  width: auto;
  padding: 12px 20px;
  background-color: var(--brand-teal);
  color: white;
  border-radius: 8px;
  height:45px;
  text-align:center;
  display:table-cell;
  vertical-align:middle;
  line-height:12px;
  margin:5px;
  white-space:normal;
  min-width:100px;
  -moz-outline:0 none;
  transition: filter .15s ease;
 }
.actioncpybtn:hover, .actionbtn:hover, .actionbtnBig:hover {
  filter: brightness(1.1);
}
/* Extra styles for the cancel button */
.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: var(--danger);
  color: white;
  border-radius: 8px;
   height:30px;
  text-align:center;
  line-height:12px;
  margin:1px;
  min-width:75px;
  -moz-outline:0 none;
  transition: filter .15s ease;
}
.cancelbtn:hover {
  filter: brightness(1.1);
}

/* Center the image and position the close button */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
  position: relative;
}

img.avatar {
  width: 40%;
  border-radius: 50%;
}

.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}
.modal-header,
.modal-footer {
  background-color:#f8fafc;
  border-color: var(--border);
  }

.modal-content,
.modal-dialog{
	overflow-y: initial !important;
	overflow: hidden;
	height:80%;
}
.modal-body{
	max-height: calc(100% -120px);
	overflow-y:auto;
}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 85%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
 overflow:scroll;
 }

/* Modal Content/Box */
.modal-content {
  background-color: var(--surface);
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,.2);
  width: 80%; /* Could be more or less, depending on screen size */

}

/* The Close Button (x) */
.close {
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
}
  
@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}

/*End of css for Modal form */
/* css for responsive forms commented on 1/13 */
textarea:focus{
  border-color: var(--brand-teal);
  box-shadow: 0 0 0 3px rgba(15,138,138,.15);
  outline: none;
}
legend {
  display: block;
  padding-left: 2px;
  padding-right: 2px;
  border: none;
  font-size: 8px;
}
* {
  box-sizing: border-box;
}

form{
height:auto;
}
.ddlist{
	width: 100%;
	height:100%;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  resize: vertical;
  font-size:18px;
}
select#vhoaselectedPL-init {
	width: 100%;
	height:100%;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  resize: vertical;
  font-size:18px;
}
select#vhoaselected-init {
	width: 100%;
	height:100%;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  resize: vertical;
  font-size:18px;
}
select#vyearselected-init{
	width: 100%;
	height:100%;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  resize: vertical;
  font-size:18px;
}
input[type=text],select, textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  resize: vertical;
  transition: border-color .15s ease, box-shadow .15s ease;

}
select:focus {
  border-color: var(--brand-teal);
  box-shadow: 0 0 0 3px rgba(15,138,138,.15);
  outline: none;
}
/* ADDED 2026-09-10 (Claude): did not exist before - Bootstrap's
   .form-control:focus (blue ring) is more specific than the
   bare-element rules above, so it wins by default - override it explicitly
   to keep every dropdown/input on-brand. */
.form-control:focus {
  border-color: var(--brand-teal) !important;
  box-shadow: 0 0 0 3px rgba(15,138,138,.15) !important;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

input[type=submit] {
  background-color: var(--brand-teal);
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  float: right;
  transition: filter .15s ease;
}

input[type=submit]:hover {
  filter: brightness(1.08);
}

.container {
  border-radius: 5px;
  background-color: white; /*#f2f2f2;*/
  padding: 20px;
}

.col-25 {
  float: left;
  width: 8%;
  margin-top: 6px;
  display:flex;
  margin:0 auto;
  height:50px;
  font-weight:bold;
  color: var(--brand-teal-dark);

}
/* this is to align item in center */
/*div{
align-items: center; 
}*/
/*Grid Flex layout css for layout.html header */
/* Style the header with a grey background and some padding */
.header {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 20px 10px;
}

/* Style the header links */
.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

/* Change the background color on mouse-over */
.header a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active/current link*/
.header a.active {
  background-color: dodgerblue;
  color: white;
}

/* Float the link section to the right */
.header-right {
  float: right;
}

/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  .header-right {
    float: none;
  }
}

/*header*/
.headwrapper {
        display: grid;
		grid-gap: 1px;
        grid-template-columns: [col1-start] 33.33%  [col2-start] 33.33%  [col3-start] 33.33% [col3-end];
        grid-template-rows: [rowhead-start]30px [row1-start] 30px [row2-start] 10px [row2-end];
		grid-template-areas:
				'rowheader rowheader rowheader'
				'row1 row1 row1'
				'rowfooter rowfooter rowfooter';
		grid-auto-rows: 2fr;
         background-color: #fff;
        color: #444; 
    }

    .headbox {
         background-color: lightgreen;
        color: #fff; 
        border-radius: 5px;
        padding: 5px;
		text-align:middle;
       font-size: 150%;
		
    }
	.headrowh1{
	   grid-column: col1-start;
        grid-row: rowhead-start ;
	}
	.headrowh2{
	   grid-column: col2-start;
        grid-row: rowhead-start ;
	}
	.headrowh3{
	   grid-column: col3-start;
        grid-row: rowhead-start ;
	}
    .heada {
        grid-column: col1-start;
        grid-row: row1-start ;
    }
    .headb {
        grid-column: col2-start ;
        grid-row: row1-start ;
    }
	  .headc {
        grid-column: col3-start / col3-end ;
		grid-row: row1-start / row2-end;
    }
	
    .headd{
        grid-column: col1-start / col3-start;
        grid-row: row2-start ;
    }
/* Grid/flex Layout Css */

.wrapper {
        display: grid;
		grid-gap: 1px;
        grid-template-columns: [col1-start] 33.33%  [col2-start] 33.33%  [col3-start] 33.33% [col3-end];
        grid-template-rows: [rowhead-start]40px [row1-start] 300px [row2-start] 425px [row3-start] 300px [row4-start] 300px [row4-end];
		grid-template-areas:
				'rowheader rowheader rowheader'
				'row1 row1 row1'
				'row2 row2 row2'
				'row3 row3 row3'
				'rowfooter rowfooter rowfooter';
		grid-auto-rows: 2fr;
     /*    background-color: #fff;
        color: #444; */
    }

    .box {
       /*  background-color: lightgreen;
        color: #fff;  */
        border-radius: 5px;
        padding: 5px;
		text-align:middle;
       /* font-size: 150%;*/
	   position:relative;
	   
		
    }
	.rowh1{
	   grid-column: col1-start;
        grid-row: rowhead-start ;
	}
	.rowh2{
	   grid-column: col2-start;
        grid-row: rowhead-start ;
	}
	.rowh3{
	   grid-column: col3-start;
        grid-row: rowhead-start ;
	}
    .a {
        grid-column: col1-start;
        grid-row: row1-start ;
    }
    .b {
        grid-column: col2-start ;
        grid-row: row1-start ;
    }
	  .c {
        grid-column: col3-start / col3-end ;
		grid-row: row1-start / row3-start;
    }
	
    .d{
        grid-column: col1-start / col3-start;
        grid-row: row2-start ;
    }
	.e{
        grid-column: col1-start / col3-end;
        grid-row: row3-start ;
    }
	.f{
        grid-column: col1-start / col3-end;
        grid-row: row4-start ;
    }
/* Grid Layout */
.propertydetails
{
	color:blue; 
	font-size:20px;
}
/* col-150 for graphs */
.col-100 {
  float: left;
  width: 33.33%;
  margin-top: 6px;
  height:40%; /*250px;*/
}
.col-100L {
  float: left;
  width: 33.33%;
  margin-top: 6px;
  height:80%; /*250px;*/
}
.col-150 {
  float: left;
  width: 50%;
  margin-top: 6px;
  height:40%;
}
.col-200 {
  float: left;
  width: 66.66%;
  margin-top: 6px;
  height:50%; /*400px;*/
}
.col-300 {
  float: left;
  width: 100%;
  margin-top: 6px;
  height:40%;
}
.col-225 {
  float: left;
  width: 65%;
  margin-top: 6px;
  height:50px;
}
.col-75 {
  float: left;
  width: 25%;
  margin-top: 6px;
  height:50px;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}
/* above css is for responsive forms */
 /*search box css use #idOfElement for css on specific element*/
.clearfix{
display:inline-block; /*this is to keep two div in same line */
}
.searchinput{
float: right; /*this is to align element to right */
padding:6px 0px 0px 0px;
}
#searchInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
 /* padding: 12px 20px 12px 40px;*/
  border: 1px solid shadow #ddd;
  margin-bottom: 12px;
 
  
}

/*search box css */
/*Snackbar ...toast */
#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  top: 30px;
  font-size: 17px;
}

#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {top: 0; opacity: 0;} 
  to {top: 30px; opacity: 1;}
}

@keyframes fadein {
  from {top: 0; opacity: 0;}
  to {top: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {top: 30px; opacity: 1;} 
  to {top: 0; opacity: 0;}
}

@keyframes fadeout {
  from {top: 30px; opacity: 1;}
  to {top: 0; opacity: 0;}
}
/* css for fixed html table header and fixed first column */
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
.intro {
  /*max-width: 1280px;*/
  margin: 1em auto;
}
.table-scroll {
  position: relative;
  width: 100%;
  z-index: 1;
  margin: auto;
  overflow: auto;
  height: 350px;
  /* ADDED 2026-09-11 (Claude): rounded corners to match .dashtable-scroll */
  border-radius: 15px;
}
.table-scroll .selected, .table-scroll tbody .selected
{
    background-color: lightgrey; /*#3CB371; /*27AE60;*/
    color: blue; /*lightgreen; /*fff;*/
}
.table-scroll table {
  width: 250%; /* this is to control width of List on Tabular data */
  min-width: 1280px;
  margin: auto;
  border-collapse: separate;
  border-spacing: 0;
  overflow-x:auto;
}
.table-wrap {
  position: relative;
   overflow-x:scroll;
    overflow-y:visible;
    width:200px;
    margin-left: 120px;
}

/* MODIFIED 2026-09-11 (Claude): border color softened from harsh
   #000 black to the shared border color - was overlooked during the
   2026-09-10 palette pass, which only recolored thead th (below).
   Old: border: 1px solid #000; */
.table-scroll th,
.table-scroll td {
  padding: 5px 10px;
  border: 1px solid var(--border, #e2e8f0);
 /* background: #fff;*/
  vertical-align: top;

  width: 50px;
  cursor:pointer;
}
.table-scroll tbody td {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
/* ADDED 2026-09-11 (Claude): zebra striping + distinct hover color,
   matching the styling applied to the Dashboard's Fee/Alert tables
   and the other page-specific *table-scroll classes. .table-scroll
   itself was missed in that pass since it has no name prefix - this
   is actually the most-used table class in the app (22 templates:
   Property, Vendor, Fee, Alert, Master, User, Tablecodes, and more),
   so this was the highest-impact gap to close. Did not exist before. */
.table-scroll tbody tr:nth-child(even) td {
  background-color: #f8fafc;
}
.table-scroll tbody tr:hover td {
  background-color: var(--brand-teal-light, #e6f5f5);
}
.table-scroll thead th {
  background: var(--brand-teal-dark);
  color: #fff;
  position: -webkit-sticky;
  position: sticky;
  top: 0;

  /*background-image: linear-gradient(white, green);*/ /* use it if we need colors */
}
/* safari and ios need the tfoot itself to be position:sticky also */
.table-scroll tfoot,
.table-scroll tfoot th,
.table-scroll tfoot td {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  background: #666;
  /* color: #fff; */
  z-index:4;
}
/* MODIFIED 2026-09-11 (Claude): checked Property.html/Vendor.html (2 of
   the 22 templates using .table-scroll) and both always render an
   empty <tfoot> row, same as the Dashboard's Fee/Alert tables did -
   at the full th/td padding (5px 10px) that renders as a heavy,
   pointless solid-grey bar under every table using this class.
   Shrunk it the same way as .dashtable-scroll's tfoot was: a thin
   strip instead of hidden outright, in case some page does put real
   totals in it. */
.table-scroll tfoot th,
.table-scroll tfoot td {
  padding: 2px 10px;
}

a:focus {
  background: none; /*this is for navbar*/
} /* testing links added .table-scroll from this point down 1/11/2020*/
/* .table-scroll td:nth-child(2),.table-scroll th:nth-child(2)  { 
position: -webkit-sticky;
position:sticky;
  left:140px;
  z-index:2;

  
 } 2/5/20 saa */
 /* 
.table-scroll thead th:nth-child(2),
.table-scroll tfoot th:nth-child(2) 
{
  z-index: 5;
} 2/5/20 */

.table-scroll th:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
 /* background: white; /*#f2f2f2; #ccc;*/ 
}

/* .table-scroll tbody th {
  position: -webkit-sticky; 
  position: sticky;
  left: 0;
  background:white;
} */
.table-scroll td:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
  background: white; /*required for x-scrolling*/
}
.table-scroll thead th:first-child,
.table-scroll tfoot th:first-child {
  z-index: 5;
}
.table-scroll thead th,
.table-scroll tfoot th {
  z-index: 2;
}
/* ------------end of CSS for html header and first column */
/* toast css */
/* stripped color */
.table-striped>tbody>tr:nth-child(odd)>td, 
.table-striped>tbody>tr:nth-child(odd)>th {
   background-color: none; // Choose your own color here
 }
.table>tr:nth-child(n+1)>td {
  background-color: lightgrey;
}

/* height and width of data-tables */
.fixed_header .selected, .fixed_header tbody .selected
{
    background-color: #27AE60;
    color: #fff;
}
.fixed_header th a, .fixed_header th a:link, .fixed_header th a:visited, .fixed_header th a:active
{
    color: #F9F9F9;
    text-decoration: none;
}
.fixed_header{
    width: 400px;
    table-layout: fixed;
    border-collapse: collapse;
	margin: 0px 10px 10px 0;
    box-shadow: 3px 3px 4px #bbb;    
}
.fixed_headcol {
  position: absolute;
  width: 5em;
  left: 0;
  top: auto;
  border-top-width: 1px;
  /*only relevant for first row*/
  margin-top: -1px;
  /*compensate for top border*/
}
.fixed_header tbody{
  display:block;
  width: 100%;
  overflow: auto;
  height: 275px;
}

.fixed_header thead tr {
   display: block;
}

.fixed_header thead {
  background: #566573;
  color:#fff;
}

.fixed_header th, .fixed_header td {
  padding: 5px;
  text-align: left;
  width: 200px;
  cursor:pointer;
}
.fixed_header div {
	border-bottom: 2px solid black;
	/*width: 500px;*/
  overflow-x: scroll;
  margin-left: 5em;
  overflow-y: visible;
  padding: 0;
}


table.scroll {
    /* width: 100%; */ /* Optional */
    /* border-collapse: collapse; */
    border-spacing: 0;
    border: 2px solid black;
}

table.scroll tbody,
table.scroll thead { display: block; }

thead tr th { 
    height: 30px;
    line-height: 30px;
    /* text-align: left; */
}

table.scroll tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: auto; /*hidden;*/
}

/* tbody { border-top: 2px solid black; } 2/5/20 saa*/

/* thead th {
broder-right: 2px solid grey;
} 2/5/20 saa*/
/* 
tbody td{
   
    border-right: 1px solid black;
   
} 2/5/20 saa */
/* 
tbody td:last-child, thead th:last-child {
    border-right: none;
} 2/5/20 saa */

.datatables{
display: block;
height: 200px;
overflow-x: auto;
overflow-y: auto;
white-space: nowrap;
/*border: 1px;*/
}
/*all button to appear rounded*/
.buttonCal {
  background-color: var(--brand-teal-dark);
  border: none;
  border-radius: 8px;
  color: white;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition: filter .15s ease;
}
.buttonCal:hover { filter: brightness(1.1); }

.button {
  background-color: var(--brand-teal);
  border: none;
  border-radius: 8px;
  color: white;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition: filter .15s ease;
}
.button:hover { filter: brightness(1.1); }
.buttonRounded{border-radius:49px;}
/* popup container special*/
 #popContainer {
        position: relative;
        top: 150px;
        left: 50px;
        width: 160px;
        text-align: right;
        background: tomato;
    }
    
    .sf-popup-panel {
        display: inline-block;
		visibility: hidden;
        position: absolute;
        background-color: white;
        border: 1px solid #ccc;
        width: 200px;
		 z-index: 1;
    }
    
    .sf-popup-panel.popup {
        top: auto;
        right: 0;
        bottom: 100%;
        left: auto;
		position:relative;
    }
	.sf-pop-panel.show{
		display:block;
	}
    
    .sf-popup-panel.open {
        display: inline-block;
		visibility: visible;
    }
    
    .sf-popup-panel.popup.open:before {
        position: absolute;
        display: inline-block; 
        content: " ";
        border: 14px solid transparent;
        border-top-color: #ccc;
        top: 100%;
        right: 40px;
        width: 0px;
        margin-left: -1px;
    }
    
    .sf-popup-panel.open:after {
        position: absolute;
        display: inline-block; 
        content: " ";
        border: 13px solid transparent;
        border-top-color: white;
        top: 100%;
        right: 40px;
        width: 0px;
    }
    
    .sf-su-response {
        padding: 1px;    
    }

/* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px; 
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}