.componentTiles {direction: rtl;}
.componentTiles .tileItem {float: right;}

.componentTiles .tileItem .callout {display: flex; align-items: center; height: 84px; padding: 0; overflow: hidden;}
.componentTiles .tileItem .callout.empty {opacity: 0;}

.componentTiles .tileItem .new {font-weight: bold; font-size: 1rem; color: green;}

.componentTiles .tileItem .total {
	display: flex; align-items: center; gap: .5rem; direction: ltr; margin-right: auto;
}
.componentTiles .tileItem .total.lines {
	display: flex; flex-direction: column; gap: .5rem; align-items: start; margin-left: 1rem; text-align: left;
}
.componentTiles .tileItem .total span {font-size: 1rem;}
.componentTiles .tileItem .total > span:not(.new) {padding: 0 1rem;}
.componentTiles .tileItem .total .counts {display: flex; flex-direction: column;}
.componentTiles .tileItem .total .counts span {height: 28px; padding: 0 12px; line-height: 28px; text-align: center;}
.componentTiles .tileItem .total .counts.grid {display: grid; grid-template-columns: 1fr 1fr;}
.componentTiles .tileItem .total .counts.grid span {height: 41px; line-height: 41px;}
.componentTiles .tileItem .total .counts.grid .status_2 {grid-area: 1 / 1 / 2 / 2;}
.componentTiles .tileItem .total .counts.grid .status_1 {grid-area: 1 / 2 / 2 / 3;}
.componentTiles .tileItem .total .counts.grid .status_3 {grid-area: 2 / 1 / 3 / 2;}
.componentTiles .tileItem .total .counts.grid .status_0 {grid-area: 2 / 2 / 3 / 3;}

.componentTiles .tileItem a:not([href]) {cursor: default;}
.componentTiles .tileItem a[href]:hover .callout {background-color: #def2f8;}
.componentTiles .tileItem a i {width: 70px; text-align: center; font-size: 30px;}
.componentTiles .tileItem a .callout > span {margin-bottom: 3px; font-size: 20px;}
.componentTiles .tileItem a p {position: relative; margin-bottom: 3px; font-size: 20px;}
.componentTiles .tileItem a p .new {position: absolute; bottom: -19px; left: 0;}