body{font-family:"Anton",sans-serif;margin:0;padding:0;display:flex;justify-content:center;align-items:center;min-height:100vh;background-color:#f5f5f5;width:100%;max-width:100vw;overflow-x:hidden}#statsApp{position:relative}.stats-container{width:100vw;max-width:1200px;padding:1rem 0px;box-sizing:border-box;min-height:100vh;opacity:0;position:relative}.stats-container.show{opacity:1;transition:opacity .5s}.stats-container .top-buttons{display:flex;justify-content:space-between;align-items:center;padding:.5rem .1rem;position:absolute;top:.5rem;right:.5rem}.stats-container .top-buttons .top-button{color:#002232;padding:.5rem;border-radius:5px;font-size:1rem;cursor:pointer;display:flex;align-items:center;gap:.5rem}.stats-container .top-buttons .top-button .icon{font-size:1rem}.stats-container .top-buttons .top-button.notif.granted{color:#00c775}.stats-container .top-buttons .top-button.notif.denied{color:#a71616}.stats-container .top-buttons .top-button.stack{padding:0px;display:flex;width:2rem}.stats-container .top-buttons .top-button.stack .fa-stack{position:relative}.stats-container .top-buttons .top-button.stack .fa-stack i:last-child{color:#fff;font-size:1.1rem;right:.1em;position:relative}.stats-container .top-buttons .top-button.stack .fa-stack i:only-child,.stats-container .top-buttons .top-button.stack .fa-stack i:first-child{color:#002232;font-size:1rem;right:unset}.stats-container .top-buttons .top-button.active{background-color:#002232;color:#fff}.stats-header{display:flex;justify-content:center;align-items:flex-start;margin-bottom:1.5rem;padding:0px 1rem;flex-direction:column;position:relative}.stats-header .stats-title{font-size:.8rem;font-weight:bold;line-height:.6rem;margin:0px}.stats-header .logo{text-align:center;display:flex;flex-direction:column;align-items:center}.stats-header .logo .kmzero-logo{width:10vw;max-width:50px}.stats-header .logo .kmzero-logo img{width:100%}@media(hover: hover)and (min-width: 1024px){.stats-header .stats-title{font-size:.9rem;font-weight:bold;line-height:1rem;margin:0px}.stats-header .logo .kmzero-logo{width:15vw;max-width:70px}}.hero{text-align:center;margin:1rem 0px;padding-top:1rem;position:relative;display:flex;flex-direction:column}.hero .total-refills{font-weight:bold;height:50px;position:relative}.hero .total-refills .total-refills-text{font-size:1rem;color:#002232;position:absolute;bottom:-5px;left:50%;transform:translateX(-50%)}.hero .filter-info{font-size:1rem;color:#333}.hero .latest-info{margin-top:1rem;font-size:.8rem;color:#333}.hero .latest-info .title{margin:0px;font-size:1rem;margin-bottom:5px}@media(hover: hover)and (min-width: 1024px){.hero{margin-top:-2rem}}.filters{display:flex;flex-direction:column;gap:.1rem;margin-bottom:1rem;width:100%}.filters .filter{display:flex;flex-direction:column;gap:.5rem;padding:.5rem 0rem;margin-bottom:.2rem;width:100%;position:relative}.filters .filter .scrollers{display:none}.filters .filter-heading{display:flex;padding:.1rem 1rem;margin-bottom:-5px;font-size:.8rem;line-height:.8rem;font-weight:bold;color:#333}.filters .filter-row{display:flex;align-items:center;overflow-x:scroll;white-space:nowrap;padding:.1rem .5rem;background-color:rgba(0,0,0,0);box-sizing:border-box;width:100%;position:relative;z-index:1}.filters .filter-row::-webkit-scrollbar{display:none}.filters .filter-row .filter-option{display:flex;align-items:center;margin-right:.5rem;padding:.5rem 1rem;border-radius:20px;background-color:#eee;position:relative;font-size:.8rem;z-index:1;filter:blur(0px);transition:all .5s ease;opacity:1}.filters .filter-row .filter-option.selected{background-color:#00c775;color:#002232;font-weight:bold}.filters .filter-row .filter-option .remove-filter,.filters .filter-row .filter-option .filter-option-icon{margin-left:.5rem;cursor:pointer;color:#002232}.filters .filter-row .filter-option span{font-weight:bold;cursor:pointer}.filters .filter-row .filter-option .filter-option-disabled-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;border-radius:20px;display:none;cursor:not-allowed}.filters .filter-row .filter-option.disabled{opacity:.5;cursor:not-allowed;transition:all .5s ease}.filters .filter-row .filter-option.disabled.selected{opacity:1}.filters .filter-row .filter-option.disabled .filter-option-disabled-overlay{display:block}.filters .filter-row a{color:#002232;text-decoration:none;font-size:.8rem;margin-left:.5rem}@media(hover: hover)and (min-width: 1024px){.filters .filter{padding:0 1rem;margin-bottom:1rem}.filters .filter .scrollers{position:absolute;left:0;right:0;top:2rem;display:flex;align-items:center;justify-content:space-between;z-index:0;height:.8rem}.filters .filter .scrollers .scroller{cursor:pointer}}.stats-body{border-radius:5px;padding:1rem;box-sizing:border-box;display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap;align-content:center;justify-content:center}.stats-body .section-title{font-size:1.5rem;font-weight:bold;margin-bottom:0rem}.stats-body .section-card{background-color:rgba(255,255,255,.6);border-radius:5px;box-shadow:0px 0px 5px 0px rgba(0,0,0,.1);padding:1rem;min-width:300px;cursor:pointer;transition:transform .2s ease;position:relative}.stats-body .section-card:hover{transform:translateY(-2px)}.stats-body .section-card:hover .chart-indicator{color:#002232}.stats-body .stats-details .refills{display:flex;flex-direction:column;align-items:center;justify-content:center}.stats-body .stats-details .refills .refill-count{font-size:3rem;font-weight:bold;color:#002232}.stats-body .stats-details .refills .refill-name{font-size:1rem;font-weight:bold;color:#002232}.stats-body .stats-details .refills .refill-property{font-size:.8rem;color:#333}.stats-body .stats-details .refills .refill-client{font-size:.8rem;color:rgba(51,51,51,.6)}.stats-body .stats-details .refills .chart-indicator{position:absolute;top:10px;right:10px;color:rgba(0,34,50,.3);font-size:1.2rem;transition:color .2s ease}.stats-body .stats-details .summary,.stats-body .stats-details .time-period,.stats-body .stats-details .refills,.stats-body .stats-details .clients,.stats-body .stats-details .properties{margin-bottom:1rem}.stats-body .stats-details .summary h4,.stats-body .stats-details .time-period h4,.stats-body .stats-details .refills h4,.stats-body .stats-details .clients h4,.stats-body .stats-details .properties h4{margin-bottom:.5rem}.stats-body .stats-details .summary ul,.stats-body .stats-details .time-period ul,.stats-body .stats-details .refills ul,.stats-body .stats-details .clients ul,.stats-body .stats-details .properties ul{list-style:none;padding:0;margin:0}.stats-body .stats-details .summary ul li,.stats-body .stats-details .time-period ul li,.stats-body .stats-details .refills ul li,.stats-body .stats-details .clients ul li,.stats-body .stats-details .properties ul li{margin-bottom:.5rem}.graph-image.activate{padding:1rem}.graph-image.activate .total-refills{margin-bottom:1rem}.loading-container{display:flex;justify-content:center;align-items:center;height:100vh}.loading-container .loading{font-size:2rem;color:#002232}.hide{display:none !important}.hide .latest-info{display:none}.version{position:fixed;right:0px;bottom:5px;font-size:.9rem;opacity:.8;text-shadow:0px 1px #fff;transform:rotateZ(-90deg);padding:10px 0px;z-index:1000;color:rgba(0,34,50,.5)}.dispenser-details-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(51,51,51,.5);display:flex;justify-content:center;align-items:center;z-index:1000}.dispenser-details-modal .modal-content{background-color:#fff;padding:2rem;border-radius:8px;max-width:95%;max-height:90vh;overflow-y:auto;position:relative;width:800px;box-shadow:0px 0px 20px rgba(0,0,0,.1)}.dispenser-details-modal .close{position:absolute;right:1rem;top:1rem;font-size:1.5rem;cursor:pointer;color:#002232;opacity:.7;transition:opacity .2s ease}.dispenser-details-modal .close:hover{opacity:1}.dispenser-details-modal h2{margin-bottom:1.5rem;color:#002232;font-size:1.5rem;font-weight:bold}.dispenser-details-modal .dispenser-details{display:flex;flex-direction:column;gap:2rem}.dispenser-details-modal .details-header{display:flex;justify-content:space-between;padding-bottom:1rem;border-bottom:1px solid rgba(0,34,50,.1)}.dispenser-details-modal .details-header .total-refills,.dispenser-details-modal .details-header .last-refill{display:flex;flex-direction:column;gap:.5rem}.dispenser-details-modal .details-header .total-refills .label,.dispenser-details-modal .details-header .last-refill .label{font-size:.8rem;color:#333;opacity:.7}.dispenser-details-modal .details-header .total-refills .value,.dispenser-details-modal .details-header .last-refill .value{font-size:2rem;font-weight:bold;color:#002232}.dispenser-details-modal .time-breakdown{display:flex;flex-direction:column;gap:1rem}.dispenser-details-modal .time-breakdown h3{color:#002232;font-size:1.2rem;margin-bottom:.5rem;font-weight:bold}.dispenser-details-modal .time-breakdown .chart-container{position:relative;height:300px;width:100%;padding:1rem;background-color:#fff;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.05)}@media(max-width: 768px){.dispenser-details-modal .modal-content{padding:1.5rem;margin:1rem;width:100%}.dispenser-details-modal .details-header .total-refills .value,.dispenser-details-modal .details-header .last-refill .value{font-size:1.5rem}.dispenser-details-modal .time-breakdown .chart-container{height:250px;padding:.5rem}}
.splitflap{position:relative;min-width:50px;height:50px;margin:5px;line-height:50px;font-size:40px;font-family:"Roboto",sans-serif;text-align:center;color:#fff}.splitflap .top{position:relative;height:50%;width:100%;background-color:#002232;border-radius:10px 10px 0 0;overflow:hidden;z-index:0}.splitflap .bottom{position:relative;height:100%;width:100%;margin-top:-50%;border-radius:10px;z-index:-1;background-color:#333;background-image:linear-gradient(rgba(0, 34, 50, 0), #002232);transform-origin:center}.splitflap .nextHalf{position:relative;height:50%;width:100%;margin-top:-100%;overflow:hidden;border-radius:10px 10px 0 0;z-index:2;background-color:#333;background-image:linear-gradient(#002232, rgba(0, 34, 50, 0));transform-origin:bottom}.splitflap .nextFull{position:relative;height:100%;width:100%;background-color:#002232;margin-top:-50%;border-radius:10px;z-index:-3}.splitflap .flip1{animation:flip1 ease-in 1;animation-duration:.2s}.splitflap .flip2{animation:flip2 ease-out 1;animation-duration:.2s}.big-number{position:absolute;left:0;top:50%;margin-top:-50px;width:100%;display:flex;justify-content:center}.big-number div{perspective:500px}@keyframes flip1{0%{transform:rotateX(0deg);background-color:#002232}50%{transform:rotateX(90deg);background-color:#002232}100%{transform:rotateX(90deg)}}@keyframes flip2{0%{transform:rotateX(-90deg)}50%{transform:rotateX(-90deg)}100%{transform:rotateX(0deg);background-color:#002232}}