: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;
	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
    }
}