body {
    background-color: white;
}

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

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


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