body {
    background-color: white;
}

.watermark-wrapper {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center; /* Vertically centers content */
    justify-content: center; /* Horizontally centers content */
}

.watermark-bg {
    position: absolute;
    inset: 0;
    background-image: url("../icons/bi/house-modified-xS2WOvp.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 1.0;
    z-index: 0;
    pointer-events: none;
}

.form-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 500px; /* Prevent form from getting too wide */
}


/* extension of front's theme.css display-n styling, which goes up to display-6 only
* display-1 to display-6 style text is too large
*/
.display-7 {
    font-size: calc(1.325rem + 0.9vw);
    font-weight: 600;
    line-height: 1.2
}
@media (min-width:1200px){
    .display-7{
		font-size:2.0rem
	}
}
.display-8{
    font-size:calc(1.275rem + 0.3vw);
    font-weight:600;
    line-height:1.2
}
@media (min-width:1200px){
    .display-8{
		font-size:1.5rem
	}
}

.footer_fixed_bottom {
	position:fixed;
	bottom:0;
	width:100%;
}

.content-space-1{
    padding-top:2rem!important;
    padding-bottom:0rem!important
}


/**************************************************************************************/
/* Following added to css because CSP blocks inline version */

/* set login window width. need to do it here becasue CSP policy reject inline defs */
.login-form-width-28-rem {
	max-width: 28rem;
}

.login-form-width-38-rem {
	max-width: 38rem;
}

.bg-img-start-with-style {
    background-size:cover;
    background-repeat:no-repeat;
    background-position:top center;
	background-image:url("../icons/card-11-H2J_pAV.svg")
}

.position-absolute-style-top-right {
	width:10rem;
	position:absolute;
	top:0;
	right:0
}

.position-absolute-style-top-left {
	width:10rem;
	position:absolute;
	top:0;
	left:0
}

.position-absolute-style-bottom-left {
	width:10rem;
	position:absolute;
	bottom:0;
	left:0
}

.position-absolute-style-bottom-right {
	width:10rem;
	position:absolute;
	bottom:0;
	right:0
}


.btn-width-100 {
  width: 100px;
}

.btn-width-150 {
  width: 150px;
}

.btn-width-200 {
  width: 200px;
}

.btn-width-250 {
  width: 250px;
}


.btn-width-350 {
  width: 350px;
}


.thead-custom-green {
  /*background-color: #a8d5ba !important; *//* Soft Green Hex Code */
  background-color: #D8FBF5 !important; /* Soft Green Hex Code */
  color: #333; /* Ensure text is readable against the green */
}

/**************************************************************************************/
/* circles */

progress {
	appearance: none;
}

/**************************************************************************************/
/* SVG circles */

.mycircle {
	display: flex;
	align-items: center;
	justify-content: center;
}


.mycircle svg {
	transform: rotate(-90deg);
}

.mycircle svg circle {
	fill: transparent;
	stroke:brown;
	stroke-width: 10;
	stroke-dasharray: 500;
	stroke-dashoffset: 500;
	animation: stroke 2s steps(500) forwards;
}

.mycircle .counter {
	position: absolute;
}

.mycircle .counter span {
	font-size: 25px;
	color: brown;
}

/*
@keyframes stroke {
	100%{
		stroke-dashoffset: 0
	}
}
*/

@keyframes circle-blue {
	100%{
		stroke-dashoffset: 0
	}
}
.mycircle .mycircle-blue svg circle {
	fill: transparent;
	stroke:#377dff;
	stroke-width: 10;
	stroke-dasharray: 500;
	stroke-dashoffset: 500;
	animation-name: circle-blue;
	/*animation: stroke 2s steps(500) forwards;*/
	animation-duration: 2s;
}
.mycircle .counter-blue {
	position: absolute;
}
.mycircle .counter-blue span {
	font-size: 25px;
	color: #377dff;
}


@keyframes circle-red {
	100%{
		stroke-dashoffset: 0
	}
}
.mycircle .mycircle-red svg circle {
	fill: transparent;
	stroke:#de4437;
	stroke-width: 10;
	stroke-dasharray: 500;
	stroke-dashoffset: 500;
	animation-name: circle-red;
	/*animation: stroke 2s steps(500) forwards;*/
	animation-duration: 2s;
}
.mycircle .counter-red {
	position: absolute;
}
.mycircle .counter-red span {
	font-size: 25px;
	color: #de4437;
}


@keyframes circle-blue {
	100%{
		stroke-dashoffset: 0
	}
}
.mycircle .mycircle-green svg circle {
	fill: transparent;
	stroke:#00c9a7;
	stroke-width: 10;
	stroke-dasharray: 500;
	stroke-dashoffset: 500;
	animation-name: circle-blue;
	/*animation: stroke 2s steps(500) forwards;*/
	animation-duration: 2s;
}
.mycircle .counter-green {
	position: absolute;
}
.mycircle .counter-green span {
	font-size: 25px;
	color: #00c9a7;
}

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

.progress{
    display:flex;
    height: 20px;
    overflow:hidden;
    font-size:0.75rem;
    background-color:#e7eaf3;
    border-radius:0.5rem;
}

.progress-bar{
    display:flex;
    flex-direction:column;
    justify-content:center;
    overflow:hidden;
    color:#fff;
    text-align:center;
    white-space:nowrap;
    background-color:#377dff;
    transition:width 0.6s ease;
	width: 100%;
}

/*****************************************************************/
/* for the transaction controller */


.hidden {
    display: none;
}


/* Highlighted row during edit */
/* Override the Bootstrap default table-info background color */
.table-info {
    /* background-color: #add8e6; *//* Light blue for editing rows */
	/* --bs-table-bg: lightblue; */
	--bs-table-bg: #cce5ff;
}

.icon-color-red {
  color: red;
}

.icon-color-blue {
  color: blue;
}

/*****************************************************************/
/* special width used only for Bootstrap Cards on Dashboard */
.card-w-19-rem {
	width: 19rem;
}

.card-w-17-rem {
	width: 17rem;
}


.update-table-box {
	max-height: 700px;
}

.obligations-table-box {
	max-height: 500px;
}

.ledger-table-box {
	max-height: 600px;
}


.table-row-hide {
	display:none;
}

.table-row-show {
	display:table-row;
}

.custom-btn {
	background-color: #EB3324;
	filter: brightness(100%);
	color: #fff;
}


.input-amount-width {
	width: 90px;
}


.sticky-header {
	position:sticky;
    top: 0;
}


/*****************************************************************/
/* Overrides Bootstrap card-title color for better contrast */
.card-title {
  color: #343a40; /* This is a dark gray that passes WCAG AA easily */
}

.card-text {
  color: #343a40; /* This is a dark gray that passes WCAG AA easily */
}



.lead {
  color: #343a40; /* This is a dark gray that passes WCAG AA easily */
}

/* Override Bootstrap Link Color for Accessibility */
:root {
  --bs-link-color: #1e60d9;      /* Standard links */
  --bs-link-hover-color: #164ab3; /* Darken slightly on hover for extra contrast */
}

/* Optional: Ensure visited links are also dark enough */
:root {
  --bs-link-visited-color: #0d47a1;
}

/* Override paragraph/body text color for accessibility */
p {
  color: #343a40; /* Dark gray that passes WCAG AA/AAA */
}

/* Or override body globally to affect all text */
body {
  color: #343a40;
}

/* Override list text color */
ul li, ol li {
  color: #343a40; /* Matches your accessible body/paragraph text */
}


/* Make the main H1 smaller and match your design */
.main-title {
  font-size: 1.7rem; /* Adjust this value until it looks right to you */
  font-weight: 700;  /* Keep it bold if needed */
  margin-bottom: 1rem;

  /* Optional: Reset Bootstrap's default huge margins */
  margin-top: 0;
}

.text-danger-accessible {
  color: #b02a37 !important;
}


.border-danger {
  border-color: #b02a37 !important;
}



/* New accessible button class */
.btn-primary-accessible {
  background-color: #0052cc;
  border-color: #0052cc;
  color: #ffffff !important; /* Force text to stay white */
}

/* Hover state - Ensure text stays white AND background stays dark enough */
.btn-primary-accessible:hover {
  background-color: #0040a0;
  border-color: #0040a0;
  color: #ffffff !important; /* CRITICAL: Keep text white here */
}

/* Focus/Active state */
.btn-primary-accessible:focus,
.btn-primary-accessible:active {
  background-color: #003893; /* Even slightly darker for active state */
  border-color: #003893;
  box-shadow: 0 0 0 0.25rem rgba(0, 82, 204, 0.5);
  color: #ffffff !important;
}


/* Custom high-contrast primary text for light backgrounds */
.text-primary-dark {
    /* This hex code (#0045b8) is a deep blue that contrasts well with bg-light (#f8f9fa) */
    /* Ratio is approx 6.5:1, which passes AA for normal text */
    color: #0045b8 !important;
}

.text-success-dark {
    /* A darker green that passes 4.5:1 on white/light backgrounds */
	/* color: #0f5132 !important; */
	/* color: #117a40 !important; */
	color: #0d6e36 !important;
}


/* Target the specific class you want to override */
.btn-soft-primary {
    /* Override text color to a darker, accessible blue */
    color: #0045b8 !important;

    /* Optional: Ensure border matches the text for consistency */
    border-color: #0045b8 !important;
}

/* Handle the hover state specifically */
.btn-soft-primary:hover,
.btn-soft-primary:focus {
    /* Darken the text further on hover for better interaction visibility */
    color: #00338d !important;

    /* Optionally darken the background slightly if your theme allows */
    background-color: #eef6fc !important; /* Adjust this hex to match your desired "soft" look but ensure it contrasts with #00338d */
    border-color: #00338d !important;

    /* Ensure accessibility focus ring is visible */
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 69, 184, 0.25);
}


/* Success button accessibility overrides */
.btn-soft-success {
    color: #00656d !important;
    border-color: #00856d !important;
}

.btn-soft-success:hover,
.btn-soft-success:focus {
    color: #006b5d !important;
    border-color: #006b5d !important;

    /* Optional: subtle background darkening if applicable */
    background-color: #e8fdf9 !important;

    /* Focus visibility for keyboard users */
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 133, 109, 0.25);
}

/* Info Button: Force accessible contrast */
.btn-soft-info {
    /* Deep blue for maximum contrast against white */
    color: #0056b3 !important;

    /* Pure white background */
    background-color: #efffff !important;

    /* Border matches text color */
    border-color: #0056b3 !important;

    /* Remove any default gradients or tinted backgrounds from the theme */
    background-image: none !important;
}

/* Hover and Focus states */
.btn-soft-info:hover,
.btn-soft-info:focus {
    /* Darken text slightly for hover feedback */
    color: #004494 !important;

    /* Keep background white or slightly off-white for depth */
    background-color: #f0f7ff !important;

    border-color: #004494 !important;

    /* Ensure keyboard focus is visible (WCAG Requirement) */
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 86, 179, 0.25);
}



/* Danger Button: Force accessible contrast */
.btn-soft-danger {
    /* Deep blue for maximum contrast against white */
    color: #b02a37 !important;

    /* Pure white background */
    background-color: #ffffff !important;

    /* Border matches text color */
    border-color: #b02a37 !important;

    /* Remove any default gradients or tinted backgrounds from the theme */
    background-image: none !important;
}

/* Hover and Focus states */
.btn-soft-danger:hover,
.btn-soft-danger:focus {
    /* Darken text slightly for hover feedback */
    color: #b02a37 !important;

    /* Keep background white or slightly off-white for depth */
    background-color: #fff7ff !important;

    border-color: #b01a37 !important;

    /* Ensure keyboard focus is visible (WCAG Requirement) */
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 86, 179, 0.25);
}





/* danger Button Accessibility Override */
.btn-danger {
    /* Darken the background to ensure white text passes 4.5:1 */
    /* #b02a37 is a deep red that passes against white */
    background-color: #b02a37 !important;


    /* Text stays white */
    color: #ffffff !important;

    /* Border should match the new background */
    border-color: #b02a37 !important;
}

/* Hover State */
.btn-danger:hover,
.btn-danger:focus {
    /* Darken slightly more for hover feedback */
    background-color: #902a37 !important;
    color: #ffffff !important;
    border-color: #902a37 !important;

    /* Ensure focus ring is visible */
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 69, 184, 0.25);
}




.btn-success {
  background-color: #1e7e34 !important; /* Darker green */
  border-color: #1e7e34 !important;
  color: #ffffff !important;
}

.btn-success:hover,
.btn-success:focus {
  background-color: #176a27 !important;
  border-color: #176a27 !important;
  color: #ffffff !important;
}

.btn-success:active,
.btn-success.active {
  background-color: #13561f !important;
  border-color: #13561f !important;
}






/* primary Button Accessibility Override */
.btn-primary {
    /* Darken the background to ensure white text passes 4.5:1 */
    /* #0045b8 is a deep blue that passes against white */
    background-color: #0045b8 !important;

    /* Text stays white */
    color: #ffffff !important;

    /* Border should match the new background */
    border-color: #0045b8 !important;
}

/* Hover State */
.btn-primary:hover,
.btn-primary:focus {
    /* Darken slightly more for hover feedback */
    background-color: #00338d !important;
    color: #ffffff !important;
    border-color: #00338d !important;

    /* Ensure focus ring is visible */
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 69, 184, 0.25);
}





/* Foundation */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem; /* Resizable base size */
  min-width: 600px; /* Prevents horizontal squeeze at small widths */
}

th, td {
  padding: 0.75rem 1rem;
  text-align: left;
  line-height: 1.5;
}


td {
  color: #b02a37 !important;
  font-weight: bold;
}



.alert-success {
	/* color: #0f5132 !important; */
	/* color: #117a40 !important; */
	background-color: #117a40 !important;
	border-color: #117a40 !important;
}

.alert-primary {
	background-color: #0056b3 !important;
	border-color: #0056b3 !important;
}

.alert-danger {
	background-color: #b02a37 !important;
	border-color: #b02a37 !important;
}




.bg-success {
	background-color: #117a40 !important;
}


.bg-info {
    /* Deep blue for maximum contrast against white */
    background-color: #0056b3 !important;
}





.btn-info {
  background-color: #0c7d9d !important; /* Darker teal */
  border-color: #0c7d9d !important;
  color: #ffffff !important;
}

.btn-info:hover,
.btn-info:focus {
  background-color: #096b85 !important;
  border-color: #096b85 !important;
  color: #ffffff !important;
}



.btn-info:active,
.btn-info.active {
  background-color: #085a72 !important;
  border-color: #085a72 !important;
}