:host{content-visibility:auto;contain:style paint layout;cursor:auto}#container{contain:strict;display:flex;flex-direction:column;font-family:Arial,sans-serif;height:90px;margin:30px auto;max-width:518px;outline:0;padding-bottom:30px;place-items:center;z-index:1}.add_btn{background:hsla(0,0%,67%,.5);border-radius:50%;color:#fff;font-size:50px;height:55px;line-height:57px;opacity:1;transition:opacity .3s,height .3s;width:55px}.add_btn:hover{background:#aaa}.grids{gap:3.25%;grid-template-columns:repeat(7,1fr);height:0;max-width:94%;outline:0;transition:.3s;transition-property:height,opacity,visibility;z-index:2}.tb_grid{cursor:pointer;height:46px}#container:not(.hide):focus-within .grids{height:100%;opacity:1;visibility:visible}#container:not(.hide):focus-within .add_btn{height:0;opacity:0}.block{cursor:pointer;flex-direction:column}.block,.block:before{align-items:center;display:flex}.block:before{background:#3e3e3e;border-radius:50%;color:#fff;content:"+";font-size:28px;height:31px;justify-content:center;width:31px}.block:hover:before{background:#000}.plus{font-size:13px;opacity:.4}.block:hover .plus{opacity:1}@media (max-width:620px){.tb_grid{height:36px}.plus{display:none}}