@import "https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Rubik+Spray+Paint&display=swap";*{box-sizing:border-box;color:#fff;text-align:center;margin:0;padding:0;font-family:Nunito,sans-serif}h1,h2,h3,h4,h5,h6{text-shadow:0 0 5px #000000b3;font-family:Rubik Spray Paint,cursive;font-weight:100}body{background:linear-gradient(135deg,#00ffc3,#006b52);min-height:100dvh;padding:20px}#root{flex-direction:column;align-items:center;gap:20px;display:flex}.bar-chart{grid-template-rows:repeat(auto-fill,1fr);gap:4px;display:grid}.bar-chart.bars-12{grid-template-columns:repeat(12,1fr)}.bar-chart.bars-12 .bar{width:50px}.bar-chart.bars-12 .bar.bar-0{border-top-left-radius:30px;border-bottom-left-radius:30px}.bar-chart.bars-12 .bar.bar-11{border-top-right-radius:30px;border-bottom-right-radius:30px}.bar-chart.bars-24{grid-template-columns:repeat(12,1fr)}.bar-chart.bars-24 .bar{width:50px}.bar-chart.bars-24 .bar.bar-0{border-top-left-radius:30px}.bar-chart.bars-24 .bar.bar-11{border-top-right-radius:30px}.bar-chart.bars-24 .bar.bar-12{border-bottom-left-radius:30px}.bar-chart.bars-24 .bar.bar-23{border-bottom-right-radius:30px}.bar-chart.bars-48{grid-template-columns:repeat(12,1fr)}.bar-chart.bars-48 .bar{width:50px;height:50px;font-size:10px;line-height:50px}.bar-chart.bars-48 .bar.bar-0{border-top-left-radius:30px}.bar-chart.bars-48 .bar.bar-11{border-top-right-radius:30px}.bar-chart.bars-48 .bar.bar-36{border-bottom-left-radius:30px}.bar-chart.bars-48 .bar.bar-47{border-bottom-right-radius:30px}.bar-chart.bars-96{grid-template-columns:repeat(12,1fr)}.bar-chart.bars-96 .bar{width:50px;height:50px;font-size:10px;line-height:50px}.bar-chart.bars-96 .bar.bar-0{border-top-left-radius:30px}.bar-chart.bars-96 .bar.bar-11{border-top-right-radius:30px}.bar-chart.bars-96 .bar.bar-84{border-bottom-left-radius:30px}.bar-chart.bars-96 .bar.bar-95{border-bottom-right-radius:30px}abbr{text-decoration:none}.bar{cursor:pointer;color:#000;text-align:center;-webkit-user-select:none;user-select:none;background-color:#fff;border:1px solid #000;border-radius:8px;height:80px;font-size:12px;line-height:80px;transition:all .2s ease-in-out;box-shadow:0 0 5px #000000b3}.bar:hover{background-color:#c8c8c8;transform:scale(1.05)}.bar:active{opacity:.8;transform:scale(.95)}.bar.active{color:#fff}@media (width<=675px){.bar-chart.bars-12{grid-template-columns:repeat(6,1fr)}.bar-chart.bars-12 .bar.bar-0{border-bottom-left-radius:8px}.bar-chart.bars-12 .bar.bar-5{border-top-right-radius:30px;border-bottom-right-radius:8px}.bar-chart.bars-12 .bar.bar-6{border-bottom-left-radius:30px}.bar-chart.bars-12 .bar.bar-11{border-top-right-radius:8px}.bar-chart.bars-24{grid-template-columns:repeat(6,1fr)}.bar-chart.bars-24 .bar.bar-11{border-top-right-radius:8px}.bar-chart.bars-24 .bar.bar-12{border-bottom-left-radius:8px}.bar-chart.bars-24 .bar.bar-5{border-top-right-radius:30px}.bar-chart.bars-24 .bar.bar-18{border-bottom-left-radius:30px}.bar-chart.bars-48{grid-template-columns:repeat(6,1fr)}.bar-chart.bars-48 .bar.bar-11{border-top-right-radius:8px}.bar-chart.bars-48 .bar.bar-5{border-top-right-radius:30px}.bar-chart.bars-48 .bar.bar-36{border-bottom-left-radius:8px}.bar-chart.bars-48 .bar.bar-42{border-bottom-left-radius:30px}.bar-chart.bars-96{grid-template-columns:repeat(6,1fr)}.bar-chart.bars-96 .bar.bar-11{border-top-right-radius:8px}.bar-chart.bars-96 .bar.bar-5{border-top-right-radius:30px}.bar-chart.bars-96 .bar.bar-84{border-bottom-left-radius:8px}.bar-chart.bars-96 .bar.bar-90{border-bottom-left-radius:30px}}@media (width<=400px){.bar-chart{scale:.9}}.tag-switcher{flex-wrap:wrap;justify-content:center;align-items:center;gap:20px;margin-top:20px;display:flex}select{cursor:pointer;color:#000;background-color:#fff;border:1px solid #ccc;border-radius:8px;padding:3px 6px;font-size:16px;box-shadow:0 0 5px #000000b3;text-align:left!important}select option{color:#000;text-align:left}.switch-tag-select{width:150px}label{align-items:center;gap:5px;font-size:14px;display:flex}input[type=color]{width:35px;height:35px;padding:none;cursor:pointer;background:0 0;border:none;transition:all .2s ease-in-out}input[type=color]:hover{transform:scale(1.05)}input[type=color]:active{opacity:.8;transform:scale(.95)}.new-label-create{align-items:center;gap:12px;font-size:14px;display:flex}input[type=text]{color:#000;background-color:#fff;border:1px solid #ccc;border-radius:8px;width:150px;padding:3px 6px;font-size:16px;box-shadow:0 0 5px #000000b3;text-align:left!important}button{cursor:pointer;border-radius:8px;padding:3px 6px;transition:all .2s ease-in-out;box-shadow:0 0 5px #000000b3}button:hover{transform:scale(1.05)}button:active{opacity:.8;transform:scale(.95)}.create-button{background-color:green;border:1px solid #006400}.delete-tag{background-color:red;border:1px solid #8b0000;padding:6px 12px}.reset-chart{background-color:orange;border:1px solid #ff8c00;font-size:16px}@media (width<=400px){.color-key{scale:.9}}.color-key{grid-template-columns:150px 150px;gap:10px;padding:10px;display:grid}.color-item{cursor:pointer;border-radius:8px;padding:2px 0;transition:all .2s ease-in-out;box-shadow:0 0 5px #000000b3}.color-item:hover{transform:scale(1.05)}.color-item:active{opacity:.8;transform:scale(.95)}h1{text-align:center;margin:20px 0;font-size:36px}