.navbar-balance {
	display: flex;
	flex-direction: column;
	gap: 3px;

	font-size: 13px;
	line-height: 1;
	color: #555;

	> .money {
		font-weight: 600;
		&.danger {
			color: red;
		}
	}

	> .hours {
		font-weight: 600;
		&.danger {
			color: red;
		}
		&.critical {
			color: red;
			display: inline-block;
			animation: navbar-balance-heart-pulse 0.9s infinite ease-out;
		}
	}

	> .rate {
		margin-top: 2px;
		font-size: x-small;
	}

	+ [popover] > div {
		> .tables {
			display: flex;
			flex-direction: columns;

			color: #333;
			text-align: left;
			font-size: 13px;

			> table:first-child {
				border-right: 1px solid lightgray;
			}

			> table {
				> caption {
					font-size: 14px;
					font-weight: 600;
					padding-bottom: 5px;
				}
				> tbody > tr > td {
					padding: 1px 10px;
					&.red {
						color: red;
					}
				}
				> tfoot > tr > td {
					padding: 1px 10px;
					font-weight: 600;
				}
			}
		}
		> .hours-left {
			margin-top: 1em;
			text-align: center;
			font-style: italic;
			font-size: 12px;
		}
	}
}

@keyframes navbar-balance-heart-pulse {
	0% {
		transform: scale(0.85);
	}
	50% {
		transform: scale(1);
	}
	70% {
		transform: scale(0.97);
	}
	100% {
		transform: scale(0.85);
	}
}