.filter{--bg-color:var(--gray);--padding-x:var(--spacer);--padding-y:var(--spacer);--col-gap:var(--spacer2);--row-gap:var(--spacer);--cols:1;--item-title-fs:.9rem;--item-title-color:var(--dark);--field-bg-color:#fff;--field-border-radius:var(--border-radius);--field-border-width:1px;--field-border-color:rgba(0,0,0,.075);--field-border-color-hover:rgba(0, 0, 0, .075);--field-border-color-active: rgba(0, 0, 0, .075);--field-placeholder-color:var(--input-placeholder-color);--color-hover:var(--primary-lighten);--color-active:var(--primary);--dp-bg-color:#fff;--dp-title-fw:500;--box-shadow:0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));padding-inline:var(--gap);padding-block:var(--gap);background-color:var(--bg-color);column-gap:var(--col-gap);row-gap:var(--row-gap);border-radius:var(--border-radius)}@media(min-width:768px){.filter{--cols:2}}@media(min-width:992px){.filter{--cols:3}}@media(min-width:1200px){.filter{--cols:4}}.filter-item{display:flex;flex-direction:column;gap:calc(var(--spacer) / 2)}.filter-item-header{font-size:var(--item-title-fs);color:var(--item-title-color);position:relative}.filter-item-body{display:flex;flex-wrap:nowrap;gap:var(--spacer);position:relative}.filter-item-body>*{flex:1;min-width:0}.filter-dropdown{position:relative}.filter-dropdown-header{display:flex;align-items:center;gap:var(--gap);padding-inline:var(--padding-x);padding-block:var(--padding-y);border-radius:var(--field-border-radius);background-color:var(--field-bg-color);border:var(--field-border-width) solid var(--field-border-color);cursor:pointer;transition:border var(--transition-duration) linear,color var(--transition-duration) linear}.filter-dropdown-header:hover{border-color:var(--field-border-color-hover);transition:border var(--transition-duration) linear,color var(--transition-duration) linear;color:var(--color-hover)}.filter-dropdown-header:after{content:"";display:inline-block;width:.4em;height:.4em;margin-left:auto;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform var(--transition-duration) linear;transform-origin:center;flex-shrink:0}.filter-dropdown-header-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:var(--dp-title-fw)}.filter-dropdown-body{display:flex;flex-direction:column;gap:.5em;max-height:200px;overflow-y:auto;background-color:var(--dp-bg-color);padding-block:var(--padding-y);position:absolute;left:1px;right:1px;top:100%;border-radius:0 0 var(--border-radius) var(--border-radius);box-shadow:var(--box-shadow);border-color:var(--field-border-color-active);z-index:1;opacity:0;visibility:hidden;pointer-events:auto;transition:opacity var(--transition-duration) linear}.filter-dropdown--top .filter-dropdown-body{top:auto;bottom:100%;border-radius:var(--border-radius) var(--border-radius) 0 0}.filter-dropdown.is-open .filter-dropdown-body{opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--transition-duration) linear}.filter-dropdown-body>*{padding-inline:var(--padding-x)}.filter-dropdown.is-open .filter-dropdown-header{border-radius:var(--border-radius) var(--border-radius) 0 0}.filter-checkbox{--checkbox-size: 1rem;--border-radius:4px;--tick-size: .5rem;--gap:.25rem;transition:color var(--transition-duration) linear}.filter-checkbox:hover{color:var(--color-hover);transition:color var(--transition-duration) linear}.filter-checkbox-label{margin-left:.5em}.filter-checkbox [type=checkbox]{accent-color:var(--color-active)}.filter-checkbox:has(input:disabled){pointer-events:none;opacity:.3}.filter-field{--field-border-color-hover:var(--primary-lighten);--field-border-color-active: var(--primary)}.filter-field>input{width:100%;padding-inline:var(--padding-x);padding-block:var(--padding-y);border-radius:var(--field-border-radius);background-color:var(--field-bg-color);border:var(--field-border-width) solid var(--field-border-color)}.filter-field>input:hover{border-color:var(--field-border-color-hover)}.filter-field>input:focus{border-color:var(--field-border-color-active)}.filter-field>input:focus-visible{box-shadow:none}.filter-field:has(input:disabled){pointer-events:none;opacity:.3}.filter-tags{--tags-gap: var(--semispacer);--tag-padding-x: var(--semispacer);--tag-padding-y: 0;--tag-gap:0;--tag-fs: .85rem;--tag-fw: 400;--tag-border-radius: var(--border-radius);--tag-border-width: 1px;--tag-border-color: transparent;--tag-color: var(--p-color);--tag-color-hover: var(--dark);--tag-bg-color:rgba(0,0,0,.05);--tag-bg-color-hover:var(--primary-lighten);display:flex;flex-wrap:wrap;gap:var(--tags-gap)}.filter-tags:empty{display:none}.filter-tag{font-size:var(--tag-fs);font-weight:var(--tag-fw);color:var(--tag-color);display:flex;flex-wrap:nowrap;align-items:center;gap:var(--tag-gap);padding-inline:var(--tag-padding-x);padding-block:var(--tag-padding-y);border:var(--tag-border-width) solid var(--tag-border-color);border-radius:var(--tag-border-radius);background-color:var(--tag-bg-color);transition:background-color var(--transition-duration) linear}.filter-tag:hover{background-color:var(--tag-bg-color-hover);transition:background-color var(--transition-duration) linear}.filter-tag-text{text-wrap:nowrap}.filter-tag-value{font-weight:bolder}.filter-tag-btn{--padding-x:var(--semispacer) 0;--padding-y: 0;--fs:2em;--fw:300;--border-width:0;--color:rgba(0,0,0,.2);--color-hover:rgba(0,0,0,.5);box-shadow:none!important;line-height:1;cursor:pointer}.filter-tag-btn:focus,.filter-tag-btn:active,.filter-tag-btn:focus-within{box-shadow:none}.filter--vertical{display:flex;flex-direction:column;height:100%;padding:0;background-color:transparent;border-radius:0}.filter--vertical .filter-item{gap:calc(var(--spacer) / 2)}.filter--vertical .filter-item-header{font-size:1rem;font-weight:500}.filter--vertical .filter-item-body{flex-wrap:wrap}.filter--vertical .filter-checks{display:flex;flex-direction:column;gap:.5rem;width:100%;max-height:220px;overflow-y:auto;padding-right:.25rem}.filter-offcanvas{--offcanvas-width: min(380px, 90vw);--offcanvas-pad-x: var(--spacer);--offcanvas-pad-y: var(--spacer);--offcanvas-bg: #fff;--offcanvas-duration: .25s;position:fixed;inset:0 auto 0 0;width:var(--offcanvas-width);max-width:none;height:100%;max-height:none;margin:0;padding:0;border:none;background-color:var(--offcanvas-bg);box-shadow:0 0 40px #0003;overflow:hidden;transform:translate(-100%);transition-behavior:allow-discrete;transition:transform var(--offcanvas-duration) ease-out,display var(--offcanvas-duration) allow-discrete,overlay var(--offcanvas-duration) allow-discrete}.filter-offcanvas:not([open]){transform:translate(-100%);pointer-events:none}@starting-style{.filter-offcanvas:not([open]){transform:translate(0)}}.filter-offcanvas[open]{transform:translate(0)}@starting-style{.filter-offcanvas[open]{transform:translate(-100%)}}.filter-offcanvas::backdrop{background-color:#00000080;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:opacity var(--offcanvas-duration) ease-out,display var(--offcanvas-duration) allow-discrete,overlay var(--offcanvas-duration) allow-discrete}.filter-offcanvas:not([open])::backdrop{opacity:0}@starting-style{.filter-offcanvas:not([open])::backdrop{opacity:1}}.filter-offcanvas-header{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--spacer);padding:var(--offcanvas-pad-y) var(--offcanvas-pad-x);border-bottom:1px solid var(--gray-darken)}.filter-offcanvas-title{font-size:1.15rem;font-weight:600;color:var(--dark)}.filter-offcanvas-close{padding:0;background-color:transparent;border:none;display:flex;justify-content:center;align-items:center;width:2rem;height:2rem;flex:none;cursor:pointer;color:var(--secondary);border-radius:50%;transition:background-color var(--transition-duration) ease,color var(--transition-duration) ease}.filter-offcanvas-close svg{width:1.25rem;height:1.25rem}@media(any-hover:hover){.filter-offcanvas-close:hover:not(:disabled):not(.is-active){background-color:var(--gray);color:var(--dark)}}@media(any-hover:none){.filter-offcanvas-close:active:not(:disabled):not(.is-active){background-color:var(--gray);color:var(--dark)}}.filter-offcanvas-body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:var(--spacer);padding:var(--offcanvas-pad-y) var(--offcanvas-pad-x)}.filter-offcanvas-footer{flex:none;display:flex;align-items:center;gap:var(--semispacer);padding:var(--offcanvas-pad-y) var(--offcanvas-pad-x);border-top:1px solid var(--gray-darken)}.filter-offcanvas-reset{padding:0;border:none;flex:none;cursor:pointer;padding:.75rem 1.1rem;border:1px solid var(--gray-darken);border-radius:var(--border-radius);background-color:transparent;color:var(--secondary);font-family:inherit;font-size:1rem;line-height:1.1;transition:border-color var(--transition-duration) ease,color var(--transition-duration) ease}@media(any-hover:hover){.filter-offcanvas-reset:hover:not(:disabled):not(.is-active){border-color:var(--secondary);color:var(--dark)}}@media(any-hover:none){.filter-offcanvas-reset:active:not(:disabled):not(.is-active){border-color:var(--secondary);color:var(--dark)}}.filter-offcanvas-apply{padding:0;background-color:transparent;border:none;flex:1 1 auto;cursor:pointer;padding:.75rem 1.1rem;border:1px solid var(--primary);border-radius:var(--border-radius);background-color:var(--primary);color:var(--dark);font-family:inherit;font-size:1rem;font-weight:500;line-height:1.1;transition:background-color var(--transition-duration) ease}@media(any-hover:hover){.filter-offcanvas-apply:hover:not(:disabled):not(.is-active){background-color:var(--primary-darken)}}@media(any-hover:none){.filter-offcanvas-apply:active:not(:disabled):not(.is-active){background-color:var(--primary-darken)}}
