html[data-layer="1086"] .content-wrapper:has(.document-filters-wrapper) {overflow-x: clip; padding-inline: 0; --page-padding-inline: 80px;}
html[data-layer="1086"] .content-wrapper > div:has(.document-filters-wrapper) {display: grid; grid-template-columns: 1fr auto; }
html[data-layer="1086"] .content-wrapper > div:has(.document-filters-wrapper) > *:not(.document-filters-wrapper) {  padding-inline: var(--page-padding-inline);}
html[data-layer="1086"] .content-wrapper > div:has(.document-filters-wrapper) > *:not(.document-filters-wrapper):not(.document-wrapper) {grid-column: span 2;}
html[data-layer="1086"] .content-wrapper > div:has(.document-filters-wrapper.toggle) > .list-document-wrapper {max-width: calc(100% - 100px - (var(--page-padding-inline) * 2));}
.document-filters-wrapper { width: 100%; max-width: min-content; z-index: 500; border-radius: 8px; height: auto; transition: 0.3s linear; display: flex; flex-direction: column; position: sticky; margin-left: auto; top:91px; transform: translateX(calc(80px));}
.document-filters-wrapper.hide { opacity: 0; pointer-events: none; }
.document-filters-wrapper.toggle {transform: translateX(calc(0px));}
.document-filters-wrapper .filter-container-label {  padding:10px; cursor: pointer; font-weight: 400; transition: .3s ease-in-out; color: var(--primary-color); text-align: center; display: flex; align-items: center; justify-content: start; gap:15px; width: 100%; max-width: min-content; font-size: .8rem; user-select: none; height: fit-content; min-width: 100px; background-color: var(--quinary-color);}
.document-filters-wrapper .filter-container-label > svg { /*display: none !important;*/ display: block; height: 20px; width: 20px; }
.document-filters-container { display: flex; flex-direction: column; align-items: start; justify-content: start; height: auto; width:100%; transition: 0s; opacity: 0; pointer-events: none; background-color: #eee; position: absolute; top: 40px; left: 0; overflow-y:scroll;}
.document-filters-container::-webkit-scrollbar {width: 1px !important;}
.document-filters-container::-webkit-scrollbar-track {width: 1px !important;}
.document-filters-container::-webkit-scrollbar-thumb {width: 1px !important;}
.document-filters-container::-webkit-scrollbar-button {width: 1px !important;}
.document-filters-wrapper.toggle .document-filters-container { opacity: 1; pointer-events: all; max-height: 190px;  transition: 0.3s linear; }
.filter-box { display: flex; align-items: center; flex-shrink: 0; padding: 12px; cursor: pointer; transition: all 0.3s; width: 100%; max-width: 100%; max-width: stretch; max-width: -webkit-fill-available; max-width: -moz-available; background-color: #eee;}
.document-filters-wrapper.hide .filter-box {pointer-events: none;}
.filter-box:not(:last-child) { border-bottom: 1px solid rgba(0,0,0,.2) }
.filter-box.selected {background-color: var(--tertiary-color);}
.filter-box.selected > .image-container > svg { fill: var(--primary-color); display: none; }
.filter-box.selected > .image-container > svg + svg { display: block; }
.filter-box.selected > span { color: var(--primary-color); }
.filter-box > span { color: #000; display: inline-block; transition: all 0.3s; }
.filter-box > .image-container { display: none; align-items: center; justify-content: center }
.filter-box > .image-container > svg { width: 16px; margin-right: 6px; fill: var(--greyOff); transition: all 0.3s }
.filter-box > .image-container > svg + svg { display: none; }
.filter-container-count { margin-left: 2px; font-size: 0.95rem; letter-spacing: -0.06rem; position: absolute; top: -10px; left: -10px; box-shadow: 0 0 5px rgba(0,0,0,.2); background-color: #fff; border-radius: 50%; height: auto; aspect-ratio: 1; width: 15px; padding: 3px; color: #000; }
.filter-container-count[data-count="0"] { display: none; }


@media (pointer: fine) {
    .document-filters-wrapper .filter-box:hover {filter: brightness(90%);}
    .document-filters-wrapper .filter-box:hover > .image-container > svg { fill: var(--primary-color); }
    .document-filters-wrapper .filter-container-label:hover { filter: brightness(120%); background-color: var(--primary-color); color:#FFF; }
}

@media (max-width:1200px) {
    .filter-box > span { font-size: 0.95rem; }
    .filter-box > .image-container > svg { width: 12px; }
    html[data-layer="1086"] .content-wrapper:has(.document-filters-wrapper) {--page-padding-inline: 60px;}
}

@media (max-width:767px) {
    .document-filters-wrapper { background: none; }
    .document-filters-wrapper .filter-container-label { pointer-events: all;  justify-content: center }
    .filter-box {padding:10px 8px;}
    .filter-box > .image-container > svg {width:10px; margin-right: 5px;}
    html[data-layer="1086"] .content-wrapper:has(.document-filters-wrapper) {--page-padding-inline: 40px;}
}

@media (max-width:600px) {
    html[data-layer="1086"] .content-wrapper > div:has(.document-filters-wrapper) {display: flex; flex-direction: column;}
    html[data-layer="1086"] .content-wrapper > div:has(.document-filters-wrapper) > *:not(.document-filters-wrapper) {margin-bottom: 0;}
    html[data-layer="1086"] .content-wrapper > div:has(.document-filters-wrapper.toggle) > .list-document-wrapper {max-width: unset;}
    .document-filters-wrapper {margin-block:20px; margin-inline:10px; transform: translateX(0px); flex-direction: row; top:105px; max-width: 100%; max-width: stretch; max-width: -webkit-fill-available; box-shadow: 0 0 5px rgba(0,0,0,.2);}
    .document-filters-wrapper .document-filters-container {max-width: 0;}
    .document-filters-wrapper.toggle .document-filters-container {flex-direction: row; position: unset; max-height: unset; max-width: 100%;}
    .document-filters-wrapper .filter-container-label {min-width: unset;}
    .filter-box {width: auto; height: auto; height: -webkit-fill-available; height: -moz-available; height: fill-available; flex:1;}
    .filter-box:not(:last-child) {border-bottom: unset; border-right:1px solid #000;}
    .document-filters-container::-webkit-scrollbar {height: 1px !important;}
}

@media (max-width:480px) {
    html[data-layer="1086"] .content-wrapper:has(.document-filters-wrapper) {--page-padding-inline: 20px;}
}