:host{
    font:normal 14px/1em Arial, Helvetica, sans-serif;
    contain:size style
}
button,
ul,
li,
input{
    margin:0;
    padding:0;
}
ul{
    list-style:none
}
button{
    cursor:pointer;
    border:0;
    background:0
}
svg{
    width:1em;
    height:1em;
    stroke-width:0;
    stroke:currentColor;
    overflow:visible;
    fill:currentColor;
    text-rendering:optimizeSpeed;
    buffered-rendering:static;
    contain:style size
}
.flex {
    display:flex;
    flex-wrap:wrap
}
.lightbox,
.confirm{
    position:fixed;
    background:var(--tb_ui_bg_light,#fff);
    color:var(--tb_ui_color,#444);
    border-radius:12px;
    box-shadow:0 1px 20px 3px rgba(0,0,0,.4);
    padding:40px 25px;
    box-sizing:border-box
}
.lightbox{
    top:0;
    bottom:5%;
    left:50%;
    transform:translate(-50%,150%);
    width:950px;
    padding:40px 25px 25px;
    max-width:90%;
    z-index:9999999;
    transition:.25s transform;
    display:grid;
    row-gap:15px;
    contain:style layout
}
.show{
    transform:translate(-50%,3%)
}
.menu_wrap{
    align-items:center;
    border-bottom:solid 1px rgba(0,0,0,.1);
    padding-bottom: 10px;
    contain:style
}
.menu_icon{
    font-size:13px;
    transition:color .3s linear;
    z-index:10;
    row-gap:4px;
    width:15px;
    color:var(--tb_ui_color_light,#888);
    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:var(--tb_ui_color,#000)
}
.menu_icon:focus+ul{
    opacity:1;
    visibility:visible
}
.menu{
    position:absolute;
    top:100%;
    inset-inline-start:0;
    width:180px;
    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:var(--tb_ui_bg_panel_dropdown,#fff);
    z-index:5;
    display:flex;
    flex-direction:column;
    contain:style paint layout
}
.menu li{
    padding:6px 12px;
    cursor:pointer;
    font-size:13px;
    transition:background .3s linear
}
.menu li:hover,
.menu .current {
    background:var(--tb_ui_bg,rgba(180,180,180,.1));
    color:var(--tb_ui_color,#000)
}
.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:320px;
    gap:5% 2%;
    padding:2px 10px 12px;
    contain:style paint layout
}
.item{
    border-radius:12px;
    box-shadow:0px 1px 5px 0 rgba(0,0,0,.1);
    display:grid;
    place-items:center;
    grid-template-rows:75% 1fr 2fr;
    transition:.3s;
    transition-property:transform,box-shadow;
    content-visibility:auto;
    contain:strict
}
.item:hover{
    box-shadow:0 3px 8px 1px rgba(0,0,0,.3);
    transform:translateY(-1px);
}
.lottie {
    contain:style paint layout;
    place-content:center;
    content-visibility:auto;
    cursor:pointer
}
.bg_wrap{
    border-top:1px solid rgba(0,0,0,.05);
    contain:style paint layout;
    padding:5px 10px 10px;
    align-items:center;
    display:grid;
    grid-template-columns:1fr auto;
    font-size:11px;
    color:var(--tb_ui_color,#999);
    column-gap:5px
}
.bg{
    gap:6px;
    margin-left:auto;
    font-size:1.5em
}
.bg button{
    border-radius:100%;
    width:13px;
    height:13px;
    transition:transform .3s
}
.white{
    background:#fff
}
.black{
    background:#000
}
.red{
    background:#e3342f
}
.green{
    background:#38c172
}
.blue{
    background:#3490dc
}
.grey{
    background:#808080
}
.bg .white{
    border:1px solid #ddd
}
.selected_bg{
    pointer-events:none;
    transform:scale(1.4)
}
.title{
    text-transform:capitalize;
    padding:10px 10px 0;
    white-space:nowrap;
    line-height:1;
    text-overflow:ellipsis;
    contain:style paint layout;
    transform:translateY(-.4em)
}
.download{
    inset:10px 10px auto auto;
    font-size:1.2em;
    opacity:0;
    transition:opacity .3s;
    contain:style paint layout;
    color:#fff
}
.download button{
    color:inherit;
    font-size:inherit
}
.white~.download{
    color:inherit
}
.item:hover .download{
    opacity:1
}
.tf_close{
    padding:10px;
    position:absolute;
    top:12px;
    inset-inline:auto 25px;
    contain:strict;
    color:var(--tb_ui_color,#444)
}
.search{
    padding:8px 15px;
    color:var(--tb_ui_color,#000);
    background:var(--tb_input_bg,#fff);
    border:solid 1px var(--tb_input_border,#ccc);
    border-radius:8px;
    outline:0;
    contain:layout paint style
}
.bg_global{
    border:0;
    padding:0;
    margin-inline-start:auto;
    place-content:end;
    grid-template-columns:auto auto auto;
    font-size:.9em;
    column-gap:10px
}
.search:focus{
    border-color:#888
}
.search::placeholder{
    color:#000
}
.pagination{
    place-items:center;
    place-content:center;
    margin:15px 0 0;
    gap:5px
}
.pagination span{
    padding:4px;
    color:var(--tb_ui_color,#666);
    cursor:pointer;
    text-align:center
}
.pagination .selected_page{
    min-width:14px;
    background:#666;
    border-radius:100%;
    color:#fff;
    cursor:auto
}
.overlay{
    position:fixed;
    background:rgba(0,0,0,.7);
    transition:.3s opacity;
    contain:strict;
    z-index:999999
}
.confirm{
    z-index:99999992;
    max-width:700px;
    row-gap:30px;
    place-content:center;
    contain:style paint layout
}
.msg {
    font-size:1.2em;
    line-height:1.4;
}
.confirm_buttons{
    gap:10px;
    place-content:center
}
.confirm_buttons button{
    background:#664c9e;
    color:#fff;
    font-size:1em;
    padding:.7em 1.4em;
    border-radius:20px
}
.confirm_overlay{
    z-index:99999991
}
@media(max-width:768px){
	.pagination{
		margin-bottom:5px
	}
}