: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;
}
.lightbox{
    top:0;
    left:50%;
    transform:translate(-50%,150%);
    width:950px;
    padding:40px 25px;
    max-width:90%;
    z-index:9999999;
    transition:.25s transform;
    display: grid;
    row-gap: 15px;
    contain:style layout
}
.show{
    transform:translate(-50%,5%)
}
.menu_wrap{
    align-items:center;
    border-bottom: solid 1px rgba(0,0,0,.1);
    padding-bottom: 15px;
    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:var(--tb_ui_bg_light,#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:#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: 320px;
    gap: 5% 2%;
    padding:0 10px 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: 75% 1fr 2fr;
    transition: .3s;
    transition-property: transform,box-shadow;
    content-visibility: auto;
    contain: strict;
    row-gap: 3%;
}
.item:hover{
    box-shadow: 0 5px 10px 2px 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 #dae1e7;
    contain: style paint layout;
    padding: .3em 7px 0;
    align-items: center;
    display: grid;
    grid-template-columns: 1fr auto;
    font-size: .78em;
    column-gap: 5px;
}
.bg{
    column-gap: .25rem;
    margin-left: auto;
    font-size: 1.5em;
}
.bg button{
    border-radius:100%;
    width: 1em;
    height: 1em;
    font-size: 1.1em;
    transition: transform .3s,opacity .3s
}
.white{
    background:#fff
}
.black{
    background:#000
}
.red{
    background:#e3342f
}
.green{
    background:#38c172
}
.blue{
    background:#3490dc
}
.grey{
    background:#808080
}
.bg .white{
    border:1px solid #dae1e7
}
.selected_bg{
    pointer-events:none;
    opacity:.6;
    transform:scale(.75)
}
.title{
    text-transform:capitalize;
    border-top: 1px solid #dae1e7;
    padding:.8em 7px 0;
    white-space: nowrap;
    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: 10px;
    inset-inline: auto 25px;
    contain:strict
}
.search{
    padding:8px 15px;
    color:#000;
    border:solid 1px #ccc;
    border-radius:8px;
    outline:0;
    contain:strict;
}
.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: 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;
}
.confirm{
    z-index: 99999992;
    max-width: 700px;
    row-gap: 30px;
    place-content: center;
    contain:style paint layout;
}
.msg {
    font-size: 1.2em;
}
.confirm_buttons{
    gap:10px;
    place-content: center;
}
.confirm_buttons button{
    background: #664c9e;
    color: #fff;
    font-size: 1em;
    padding:.7em 1.4em;
    border-radius: 8px;
}
.confirm_overlay{
    z-index:99999991
}