﻿.reportbody
{
   color: black;
   display: flex;
   flex-direction: column;
   height: 100%;
}

.reportbody > div:first-child { margin-left: auto; margin-right: auto; font-size: 2em; }

.yeardd { margin-left: 12.5%; }

.reportdata { display: flex; flex-direction: column; align-self: center; width: 75%; }
#datarows { display: flex; flex-direction: column; height: calc(100vh - 10em); overflow-y: auto; }

.reportrow { display: flex; flex-direction: column; }
.datarow  { display: flex; flex-direction: row; }
.monthslist { display: flex; flex-direction: column; }
.weekslist { display: flex; flex-direction: column; }

.headerrow { display: flex; flex-direction: row; background-color: #222288; color: white; margin-bottom: .25em; flex: 0; }

.year-total
{
   border-top: 1px solid #aaaaaa;
   border-bottom: 1px solid #aaaaaa;
}

.month-total
{
   margin-left: 3em;
   border-top: 1px solid #aaaaaa;
   border-bottom: 1px solid #aaaaaa;
}

.monthblock
{
   margin-bottom: 1em;
}

.branch-icon { width: 1.25rem; height: 1.25rem; margin-right: .5em; }

.weekblock
{
   margin-left: 3em;
   /*border-left: 1px solid #aaaaaa;*/
   margin-bottom: .5em;
}

.col1 { width: 17rem; display: flex; flex-direction: row; }
.col1 > img { width: 1.25rem; height: 1.25rem; }
.col2, .col3, .col4 { width: 12rem; display: flex; flex-direction: row; justify-content: flex-end; }

.headerrow { margin-top: 1em; font-size: 1.4em; }
.headerrow > .col1 { width: 14rem; }
.headerrow > .col2 { width: 8rem; margin-left: 0em; }
.headerrow > .col3 { width: 12rem; }
.headerrow > .col4 { width: 12rem; }

.monthblock > .datarow > .col1,
.year-total > .datarow > .col1
{
   width: 14rem;
}

.col2 { width: 8rem; margin-left: 0em; }
.col3 { width: 12rem; margin-left: 3rem;}
.col4 { width: 12rem; margin-left: 3rem;}

.weekblock > .datarow > .col1,
.month-total > .datarow > .col1
{
   width: 11em;
}


.expiredaccountsdatarows{ display: flex; flex-direction: column; }
.expiredaccountsdatarows > div { display: flex; }
.expiredaccountsdatarows > div:nth-of-type(2n+1) { background-color: #ececec;}
.expiredaccountsdatarows > div > span { width: 20%; overflow-x: hidden; text-overflow: ellipsis; margin-right: .5em; }