:host{
    contain:size style
}
button,
ul,
li,
input{
    margin:0;
    padding:0;
}
ul{
    list-style:none
}
button{
    cursor:pointer;
    border:0;
    background:0
}
.flex{
    display:flex;
    flex-wrap:wrap;
}
.lightbox{
    position:fixed;
    top:110%;
    left:50%;
    transform:translate(-50%,5%);
    background:#fff;
    color:#666;
    width:900px;
    padding: 40px 25px;
    max-width:90%;
    z-index:9999999;
    font: normal 14px/1em Arial, Helvetica, sans-serif;
    border-radius:12px;
    box-shadow:0 1px 20px 3px rgba(0,0,0,.4);
    transition:.3s top;
    display: grid;
    row-gap: 15px;
    contain:style layout
}
.menu_wrap{
    align-items:center;
    border-bottom: solid 1px rgba(0,0,0,.1);
    padding-bottom: 15px;
    color:#666;
    contain:style
}
.menu_icon{
    font-size:13px;
    transition:color .3s linear;
    z-index:10;
    row-gap: 4px;
    width: 15px;
    color:inherit;
    contain:style layout
}
.menu_icon:before,
.menu_icon:after{
    content:"";
    width: 100%;
    height: 8px;
    border-top:2px solid;
    border-bottom:2px solid;
    box-sizing:border-box;
}
.menu_icon:after{
    border-bottom:0;
}
.menu_icon:hover{
    color:#000
}
.menu_icon:focus+ul{
    opacity:1;
    visibility:visible
}
.menu{
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    min-width: 140px;
    max-height: 220px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 4px 10px 2px rgba(0,0,0,.3);
    border-radius: 8px;
    padding: 6px 0;
    overflow-y: auto;
    transition: opacity .25s linear,visibility .25s linear;
    background-color: #fff;
    z-index: 5;
    display: flex;
    flex-direction: column;
    contain:style paint layout
}
.menu li{
    padding: 6px 12px;
    color: #444;
    cursor: pointer;
    font-size: 13px;
    transition:background .3s linear;
}
.menu li:hover,
.menu .current {
    background:#f1f1f1
}
.selected_cat{
    position: absolute;
    inset-inline-end: -5px;
    transform: translateX(100%);
    width: max-content;
    margin-top: 1px;
}
.container{
    max-height:70vh;
    overflow-y:auto;
    display:grid;
    grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
    grid-auto-rows: 250px;
    gap: 5% 2%;
    padding-inline:10px;
    padding-bottom:10px;
    contain: style paint layout;
}
.item{
    border-radius:.5rem;
    box-shadow:0 3px 8px 0 rgba(0,0,0,.06);
    display: grid;
    place-items: center;
    grid-template-rows: 6fr 1fr;
    cursor: pointer;
    transition: .3s;
    transition-property: transform,box-shadow;
    box-sizing: border-box;
    content-visibility: auto;
    contain: strict;
}
.item:hover{
    box-shadow: 0 5px 10px 2px rgba(0,0,0,.3);
    transform: translateY(-1px);
}
.lottie {
    contain: style paint layout;
    place-content: center;
}
.title{
    color:#444;
    text-transform:capitalize;
    border-top: 1px solid #dae1e7;
    padding-inline: 10px;
    padding-top: .5em;
    white-space: nowrap;
    text-overflow: ellipsis;
    contain: style paint layout;
}
.tf_close{
    padding: 10px;
    position: absolute;
    top: 10px;
    inset-inline: auto 25px;
    contain:strict
}
.search{
    padding:8px 15px;
    color:#000;
    background-color:#fff;
    border:solid 1px #ccc;
    border-radius:8px;
    margin-inline-start:auto;
    outline:0;
    contain:strict;
}
.clear{
    color:#bbb;
    position:absolute;
    right:6px;
    top:50%;
    transform:translateY(-50%);
    padding:8px;
    margin-top:-7.5px
}
.search:invalid+.clear{
    display:none
}
.search:focus{
    border-color:#888
}
.search::placeholder{
    color:#000
}
.pagination{
    place-items: center;
    place-content: center;
    margin: 25px 0;
    gap: 5px;
}
.pagination span{
    padding: .4em;
    color: #b8c2cc;
    cursor: pointer;
}
.selected_page{
    background:#000;
    border-radius: 100%;
    cursor: auto;
}
.overlay{
    position:fixed;
    background:rgba(0,0,0,.7);
    transition:.3s opacity;
    contain:strict;
    z-index:999999
}