.bylit-sau {
	width: 260px;
	max-width: 100%;
	color: #26383e;
	font-family: inherit;
}

.bylit-sau *, .bylit-sau *::before, .bylit-sau *::after { box-sizing: border-box; }
.bylit-sau h3 { margin: 0 0 .55rem; color: #26383e; font-size: 1.45rem; font-weight: 500; line-height: 1.2; }

.bylit-sau__reservoir {
	width: 200px;
	height: 300px;
	margin-left: 30px;
	position: relative;
	overflow: hidden;
	border: 2px solid #26383e;
	border-radius: 5px 5px 2px 2px;
	background-color: #f7fbfc;
	background-image: url('../img/EsglesiaSau.png'), linear-gradient(180deg, #f7fbfc 0%, #eef5f6 100%);
	background-repeat: no-repeat;
	background-size: 79% 66%, 100% 100%;
	background-position: center 24px, center;
	box-shadow: 0 5px 16px rgba(28, 56, 66, .09);
}

.bylit-sau__water {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
	overflow: hidden;
	background: rgba(17, 165, 253, .7);
	transition: height .7s ease-in-out;
}

.bylit-sau__waves {
	position: absolute;
	top: -22px;
	left: 0;
	width: 200%;
	height: 30px;
	border-radius: 70%;
	background: rgba(255, 255, 255, .7);
	animation: bylit-sau-wave 6s infinite linear;
}

@keyframes bylit-sau-wave {
	0% { transform: translateX(-100%); }
	100% { transform: translateX(50%); }
}

.bylit-sau__value {
	width: 100%;
	text-align: center;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	line-height: 1.15;
}

.bylit-sau__value--inside {
	position: absolute;
	top: .35rem;
	left: 0;
	color: #fff;
	font-size: 2rem;
	text-shadow: 0 1px 3px rgba(0, 48, 76, .3);
}

.bylit-sau__value--outside {
	display: none;
	position: absolute;
	top: .65rem;
	left: 0;
	color: #26383e;
	font-size: 2rem;
}

.bylit-sau__value--outside.is-active { display: block; }

.bylit-sau__meta {
	display: flex;
	flex-direction: column;
	gap: .12rem;
	margin: .45rem 0 0;
	color: #596a70;
	font-size: .68rem;
	line-height: 1.35;
	text-align: center;
}

.bylit-sau__meta time { color: #718087; }
.bylit-sau__meta time:empty { display: none; }
.bylit-sau__notice:not(:empty) { color: #8b5b10; font-weight: 650; }
.bylit-sau--unavailable .bylit-sau__reservoir { filter: grayscale(.45); }

@media (max-width: 600px) {
	.bylit-sau { width: 100%; }
	.bylit-sau__reservoir { margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.bylit-sau__waves { animation: none; }
	.bylit-sau__water { transition: none; }
}