.balance{border-collapse:collapse;width:100%;font-variant-numeric:proportional-nums}.balance td{width:50%;padding:.3em 0}.balance td span{padding:0 .3em}.balance td .bar{display:inline-block;text-align:right;background-color:#00cb00;transition:width 1s}.balance td:first-child{border-right:.5px solid;text-align:right;padding-left:.5rem}.balance td:first-child .bar{float:right;direction:rtl;text-align:left;background-color:#ff6161}.balance td:last-child{padding-right:.5rem}
.loader>*{opacity:0;animation-duration:2s;animation-name:loader;animation-iteration-count:infinite}.loader>*:nth-child(2){animation-delay:.5s}.loader>*:nth-child(3){animation-delay:1s}@keyframes loader{from{opacity:0}25%{opacity:1}50%{opacity:0}to{opacity:0}}
.task-list{border-collapse:collapse}.task-list td{vertical-align:baseline;padding:.5rem}.task-list .done{background-color:#00cb00;transition:background-color 1s}.task-list .room{font-weight:600}.task-list .room::after{content:": "}.task-list .points{text-align:right;font-variant-numeric:tabular-nums}.task-list button{width:100%}
.login-form{padding:1em}.login-form form{margin-top:2em}.login-form form>*{margin-bottom:1rem}.login-form form label{display:block}.login-form form label>*{width:100%;margin-bottom:.5em}.login-form form .checking{padding-left:1em}
.absence-list{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%;padding:.5rem}.absence-list td{vertical-align:baseline;padding:.5rem}.absence-list .points{text-align:right}.absence-list .new{animation-duration:5s;animation-name:new-absence}@keyframes new-absence{from{background-color:#00cb00}to{background-color:#fff}}.add-absence{width:100%}.add-absence>form{padding:.5rem;border:1px solid #eee;border-radius:.5rem;width:21em;max-width:100%;font-variant-numeric:tabular-nums}.add-absence>form>*{display:flex;align-items:baseline}.add-absence>form>* .stretch{flex-grow:1}.add-absence>form input{flex-grow:1;flex-basis:0}.add-absence>form button{min-width:9em}.add-absence>form .success{margin-top:.5rem}
body{font-family:system-ui,"Segoe UI",sans-serif;line-height:1.4;margin:0;margin-top:.5rem}main{margin:auto;width:40em;max-width:100%}main>*{margin:2em 0;text-align:center;width:100%}main>*>*{text-align:initial}nav{border-radius:.5rem}nav>*{margin:0 .5rem .5rem .5rem}nav.right{float:right}nav.left{float:left}nav .icon{cursor:pointer;width:2em;height:2em;padding:.2em;border-radius:.5rem}nav .icon:hover{background-color:#eee}h1{font-size:1em;text-align:left;margin-left:.5rem;margin-right:.5rem;padding-top:.4em}.right-aligned{float:right}*{box-sizing:border-box}form button{margin-top:.5rem}input,button{font:inherit}.error{margin-top:.5rem;color:#b30000}