:host{
	contain:size style
}
button,
ul,
li,
input{
	margin:0;
	padding:0;
}
ul{
	list-style:none
}
button{
	cursor:pointer;
	border:0;
	background:0
}
.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{
    display:flex;
    flex-wrap: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;
    display: flex;
    flex-direction: column;
    row-gap: 4px;
    width: 15px;
    contain: style paint 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 rgb(0 0 0 / 10%), 0 4px 10px 2px rgb(0 0 0 / 30%);
	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
}
.container{
    max-height:70vh;
    overflow-y:auto;
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    grid-auto-rows: 250px;
    gap: 5% 2%;
    padding-inline: var(--tf_scroll_w,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;
}
.title{
    color:#444;
    text-transform:capitalize;
    width: 100%;
    border-top: 1px solid #dae1e7;
    padding-inline: 10px;
    box-sizing: border-box;
    align-items: center;
    padding-top: .5em;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
    overflow: hidden;
    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
}
.overlay{
    position:fixed;
	background:rgba(0,0,0,.7);
	transition:.3s opacity;
    contain:strict;
    z-index:999999
}