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