/* ==========================================================================
   Project:     Tri County EMC - Interactive Bill
   Date:        07/01/25 - File created	
   Created by:  Third Wave Digital (www.thirdwavedigital.com)
   ========================================================================== */

/* ==========================================================================
	Layouts
========================================================================== */
.interactive-bill {max-width: 1300px; position: relative; display: flex; flex-direction: column; justify-self: center;}
.interactive-bill img {max-width: 100%; z-index: 0;}
.interactive-bill .btn {position: absolute; z-index: 1;}

/* ==========================================================================
	Modal
========================================================================== */
.modal {line-height: 1.8; font-family:open-sans,sans-serif;}
.modal-title {font-weight: 700 !important;}

/* ==========================================================================
	Buttons
========================================================================== */
.btn-red { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #ec1c24; color: white; font-weight: 600; font-size: 0.85rem; border: none; cursor: pointer; transition: 0.2s; box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px; }
.btn-red::after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 1px 1px #ec1c24; animation: btn-red-pulse 2s infinite; }
.btn-red:hover, .btn-red:focus {color: #fff; background-color: #d4181e;}
@keyframes btn-red-pulse { 0% { transform: scale(1); opacity: 1; } 50% { opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

/* ==========================================================================
	Media Queries
========================================================================== */
@media (min-width: 0px) {	
	/* Btn Size / Font */
	.btn-red {height: 24px; width: 24px; font-size: 0.625rem}

	/* Btn Positions */
	.btn-1 {top: 6%; left: 5.5%}
	.btn-2 {top: 11%; left: 50%}
	.btn-3 {top: 23.5%; left: 2.5%}
	.btn-4 {top: 30.5%; right: 1%}
	.btn-5 {top: 51.5%; left: 35%}
	.btn-6 {top: 65.25%; right: 23%}
	.btn-7 {top: 87%; left: 1%}
	.btn-8 {top: 51.5%; right: 5%}
}

@media (min-width: 576px) {    
	/* Btn Size / Font */
	.btn-red {height: 30px; width: 30px; font-size: 0.75rem}
	
	/* Btn Positions */
	.btn-1 {top: 6.35%; left: 5.5%}
	.btn-2 {top: 11.25%; left: 50%}
	.btn-3 {top: 23.5%; left: 5%}
	.btn-4 {top: 30.5%; right: 2.5%}
	.btn-5 {top: 52.25%; left: 35%}
	.btn-6 {top: 65.25%; right: 25%}
	.btn-7 {top: 87.25%; left: 2.5%}
	.btn-8 {top: 52.15%; right: 5%}
}

@media (min-width: 768px) {	
	/* Btn Size / Font */
	.btn-red {height: 40px; width: 40px; font-size: 0.825rem}
}

@media (min-width: 992px) {	
	/* Btn Size / Font */
	.btn-red {height:45px; width:45px; font-size: 0.875rem}
}

@media (min-width: 1200px) {	
	/* Btn Size / Font */
	.btn-red {height: 50px; width: 50px; font-size: 1rem}
}