#root{margin-left:auto;margin-right:auto;text-align:center}body{margin:0}.header{display:flex;align-items:center;height:65px;background:linear-gradient(90deg,#248318 1.18%,#248318 100%);color:#fff;padding:20px;box-shadow:0 0 8px #0009;position:sticky;top:0;z-index:10}.header--image{height:100%;margin-right:10px}.header--title{font-size:1.25rem;margin-right:auto}.header--connect{font-size:.95rem;font-weight:500;border:2px solid white;padding:.2em .7em;cursor:pointer;border:2px solid rgba(255,255,255,.329);border-radius:41px}.header--connect:hover{background:#19640f}.header--connected{position:relative;font-size:.95rem;font-weight:500;border:2px solid white;padding:.2em 1.1em;cursor:pointer;border:2px solid rgba(255,255,255,.329);border-radius:40px}.header--connected p{margin:0}.address--copy .header--connected--address:hover{font-weight:700}.header--connected:hover{background:#19640f}.header--connected--title{font-weight:500;font-size:.9rem}.header--connected--address{font-weight:400}.tooltip{position:absolute;bottom:0;left:20px;top:55px}.month--container--consumption{margin-bottom:1.5em}.month--consumption{margin-left:1em;margin-right:1em;margin-top:2em}.month--data{display:flex;gap:2em;justify-content:center}.energy--consumed{border-radius:20px;box-shadow:0 4px 8px #0003;transition:.3s;max-width:280px;width:50%;display:flex;justify-content:center;align-items:center;padding:1em .5em}.month--bill{border-radius:20px;box-shadow:0 4px 8px #0003;transition:.3s;max-width:280px;width:50%;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:1em .5em}.month--bill h2{margin:0 0 .4em}.month--bill h3{font-size:1.3rem;margin:0}.month--paid{border-radius:20px;box-shadow:0 4px 8px #0003;transition:.3s;background-color:#2eb34b42;max-width:280px;width:50%;padding:1em .5em}.month--paid .title--paid{margin-top:0;margin-bottom:.6em}.month--pending--payment{border-radius:20px;box-shadow:0 4px 8px #0003;transition:.3s;background-color:#2559c773;max-width:280px;width:50%;cursor:pointer;padding:1em .5em}.month--pending--payment h2{margin-top:0;margin-bottom:.6em}.month--pending--payment:hover{position:relative;background-color:#2558c7a1;box-shadow:0 12px 18px #0003}.month--paid .payment--image,.month--pending--payment .payment--image{width:50px;height:auto}.month--pending--payment .payment--image--processing{width:50px;height:auto;animation:rotation 2s infinite linear}.text--processing{margin-bottom:0;margin-top:.6em}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(359deg)}}span.button{display:inline-block;background:linear-gradient(90deg,#248318 1.18%,#248318 100%);color:#fff;padding:10px 20px;border-radius:25px;cursor:pointer;text-decoration:none;transition:all .3s ease 0s;font-size:18px;line-height:24px;border:none;text-align:center;margin:-.3em 10px 1.5em;user-select:none;box-shadow:0 4px 6px #32325d1c,0 1px 3px #00000014}span.button:hover{background:linear-gradient(90deg,#248318 1.18%,#248318 100%);transform:translateY(-2px);box-shadow:0 7px 14px #32325d1a,0 3px 6px #00000014}span.button:active{background:linear-gradient(90deg,#248318 1.18%,#248318 100%);transform:translateY(1px)}.backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;z-index:1000}.popup{background:#fff;padding:20px;border-radius:10px;max-width:475px;width:75%;box-shadow:0 5px 15px #0000001a;position:relative;animation-name:animate;animation-duration:.5s}.popup p{font-size:18px;text-align:center;margin-bottom:40px}.close-btn{position:absolute;border:none;background:#248318;color:#fff;padding:10px 20px;border-radius:100px;font-size:18px;cursor:pointer;transition:all .3s ease;right:-10px;top:-20px}.close-btn:hover{background:#19640f}@media screen and (max-width: 500px){.main--title,.energy--consumed h1{font-size:1.5rem}.month--bill h2{font-size:1.3rem}.month--bill h3{font-size:1.1rem}.month--pending--payment h2{font-size:1.2rem}.totals--consumed h1{font-size:1.5rem}.header--title{text-align:left}}.previous--months--container{margin-left:1em;margin-right:1em;margin-bottom:1.5em}.consumption--table{width:100%;border-collapse:collapse;max-width:1200px;margin:auto}.consumption--table th,.consumption--table td{border:1px solid #ddd;padding:8px;text-align:center}.consumption--table th{background:linear-gradient(90deg,#248318 1.18%,#248318 100%);color:#fff}.consumption--table tr:nth-child(even){background-color:#f2f2f2}.data--item--month{cursor:pointer;font-weight:700}.data--item--month:hover{background-color:#24831821!important}.payment--image--table{width:29px;height:auto}.pending--payment--image--table{width:31px;height:auto}.totals--container{margin-left:1em;margin-right:1em;margin-bottom:1.5em}.totals--data{display:flex;gap:2em;justify-content:center}.totals--unpaid{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:1em .5em}.totals--unpaid p,.totals--unpaid h2,.totals--unpaid h3{margin:0}.totals--unpaid{border-radius:20px;box-shadow:0 4px 8px #0003;transition:.3s;background-color:#db000047;max-width:280px;width:50%}.totals--unpaid .title--unpaid{margin-bottom:.5em;font-weight:300}.totals--consumed{border-radius:20px;box-shadow:0 4px 8px #0003;transition:.3s;max-width:280px;width:50%;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:1em .5em}.backdrop--initial{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;z-index:1000}.popup--initial{background:#fff;padding:20px;border-radius:10px;max-width:450px;width:75%;box-shadow:0 5px 15px #0000001a;position:relative;animation-name:animate;animation-duration:.5s}.popup--initial p{font-size:21px;text-align:center;margin-bottom:40px;font-weight:700;color:#000}.close--btn--initial{position:absolute;border:none;background:#248318;color:#fff;padding:10px 20px;border-radius:100px;font-size:18px;cursor:pointer;transition:all .3s ease;right:-10px;top:-20px}.close--btn--initial:hover{background:#19640f}@keyframes animate{0%{transform:scale(.7)}to{transform:scale(1)}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#000;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}