<style>
  .balanceCounter {font-size:1.5rem; vertical-align:middle;font-weight:bold; color:white;padding-top:5px;}
  .balanceCounter:before {content: counter(balancecounter) ".\0000a0\0000a0"; counter-increment: balancecounter;}

  .categoryCounter {font-size:1.5rem; vertical-align:middle;font-weight:bold; color:green;padding-top:5px;}
  .categoryCounter:before {content: counter(categorycounter) ".\0000a0\0000a0"; counter-increment:   categorycounter;}

  .category2Counter {vertical-align:middle;font-weight:bold; }
  .category2Counter:before {content: counter(category2counter) ".\0000a0\0000a0"; counter-increment:   category2counter;}

.sectionhead {font-size:1.5rem; vertical-align:middle;font-weight:bold; color:red;padding-top:5px;}
.sectionhead:before {content: counter(redcounter) ".\0000a0\0000a0"; counter-increment: redcounter;}


  .hundred {width:100%;}
  .center{text-align:center;}
    .pointer { cursor: pointer; }


  .table > tbody > tr > td.middle {
      vertical-align: middle;
  }
  .table > tbody > tr > td.grey {
      background-color: grey;
  }
  .bottom-buffer{margin-bottom: 10px;}
  ol {padding-left: 1.2em; }
  .panel.noborder { border: none; box-shadow: none; }
.total {border-bottom:double; border-top:solid; border-top-width:1px;}
  .right {text-align:right;}
  .clickable{background-color: blue; color:white; cursor:pointer; }
  body {counter-reset:balancecounter 0 categorycounter 0 category2counter 0 redcounter 0; }

  .row-padded {margin: 10px; padding: 5px; background-color: #bbb; border: 1px solid #DDD;  }

.centerbold {text-align:center; font-weight:bold; font-size:14px;background-color: grey; color:white;}

/* Numbered lists like 1, 1.1, 2.2.1... */
ol.multi li {display:block;} /* hide original list counter */
ol.multi > li:first-child {counter-reset: item;} /* reset counter */
ol.multi > li {counter-increment: item; position: relative;} /* increment counter */
ol.multi > li:before {content:counters(item, ".") ". "; position: absolute; margin-right: 100%; right: 10px;} /* print counter */


.loginUsernameLabel, .loginPasswordLabel {
display:block;
position:relative;
min-width: 200px;
font-size:10px;
}
.loginUsername, .loginPassword, .loginLoginButton
{
width: 208px;
margin-bottom:20px;
display:block;
line-height:20px;
height: 20px;
float:none;
}

.loginLoginButton {
border: 2px solid  #226fbe;
display:block;
min-height:40px;
height:30px;
}
.loginLoginButton:hover {
    background: transparent;
    color: #226fbe;
}

  .balance {text-align:right;}

.primary {background-color: rgb(0,123, 255);rgb(255,255,255);}
.secondary {background-color: rgb(108,117,125);rgb(255,255,255);}
.success {background-color: rgb(40,167,69);rgb(255,255,255);}
.danger {background-color: rgb(220,53,69);rgb(255,255,255);}
.warning {background-color: rgb(255,193,7);color:rgb(52,58,64);}
.info {background-color: rgb(23,162,184); color: rgb(255,255,255);}
.light {background-color: rgb(248,249,250); color: rgb(52,58,64);}
.dark {background-color: rgb(52,58,64); color: rgb(255,255,255);}
.white {background-color: rgb(255,255,255); color: rgb(52,58,64);}

@media print {
.noPrint { display:none; }
.pageBreak { page-break-before: always; }
}

.anchor-target {
  scroll-margin-top: 60px; /* Match your header height */
}

</style>

