/**
 * SlimSelect 2.13.1
 */

 :root {
    --ss-primary-color: #5897fb;
    --ss-bg-color: #ffffff;
    --ss-font-color: #4d4d4d;
    --ss-placeholder-color: #8d8d8d;
    --ss-disabled-color: #dcdee2;
    --ss-border-color: #dcdee2;
    --ss-highlight-color: #fffb8c;
    --ss-focus-color: var(--ss-primary-color);
    --ss-success-color: #00b755;
    --ss-error-color: #dc3545;
    --ss-main-height: 40px;
    --ss-content-height: 300px;
    --ss-search-height: 40px;
    --ss-option-height: auto;
    --ss-spacing-l: 12px;
    --ss-spacing-m: 8px;
    --ss-spacing-s: 4px;
    --ss-animation-timing: 0.3s;
    --ss-border-radius: var(--br);
}

@keyframes ss-valueIn {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes ss-valueOut {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}

.ss-hide { display: none !important; }

.ss-main { display: flex; flex-direction: row; position: relative; user-select: none; color: var(--ss-font-color); min-height: var(--ss-main-height); width: 100%; padding: var(--ss-spacing-s); cursor: pointer; border: 1px solid var(--ss-border-color); border-radius: var(--ss-border-radius); background-color: var(--ss-bg-color); outline: 0; box-sizing: border-box; transition: background-color var(--ss-animation-timing); overflow: hidden; }
.ss-main:focus {  }

.ss-main.ss-disabled { opacity: 0.8; cursor: not-allowed; }
.ss-main.ss-disabled .ss-values .ss-disabled { color: var(--ss-font-color); }
.ss-main.ss-disabled .ss-values .ss-value .ss-value-delete { cursor: not-allowed; }


.ss-main .ss-values { display: inline-flex; flex-wrap: wrap; gap: 4px; flex: 1 1 100%; min-width: 0; max-width: 100%; overflow: hidden; }

.ss-main .ss-values .ss-placeholder { display: block; width: 100%; min-width: 0; padding: 4px 8px; margin: auto 0px auto 0px; color: var(--ss-placeholder-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-main .ss-values .ss-max { display: flex; user-select: none; align-items: center; width: fit-content; font-size: 12px; color: var(--ss-bg-color); line-height: 1; padding: 4px 8px; background-color: var(--ss-primary-color); border-radius: var(--ss-border-radius); }
.ss-main .ss-values .ss-single { display: block; margin: auto 0px auto 0px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; max-width: calc(100% - 20px); }

.ss-main .ss-values .ss-value { display: flex; user-select: none; align-items: center; width: fit-content; gap: 8px; padding: 4px 8px; max-width: 100%; background-color: var(--bg-clr); border-radius: var(--br-round); border: 1px solid var(--accent); animation-name: ss-valueIn; animation-duration: var(--ss-animation-timing); animation-timing-function: ease-out; animation-fill-mode: both; }
.ss-main .ss-values .ss-value.ss-value-out { animation-name: ss-valueOut; animation-duration: var(--ss-animation-timing); animation-timing-function: ease-out; }
.ss-main .ss-values .ss-value .ss-value-text { flex: 1; min-width: 0; font-size: 12px; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-main .ss-values .ss-value .ss-value-delete { display: flex; align-items: center; height: var(--ss-spacing-l); width: var(--ss-spacing-l); cursor: pointer; box-sizing: content-box; }
.ss-main .ss-values .ss-value .ss-value-delete svg { height: 8px; }
.ss-main .ss-values .ss-value .ss-value-delete svg path { fill: none; stroke: var(--accent); stroke-width: 18; stroke-linecap: round; stroke-linejoin: round; }


.ss-main .ss-deselect { flex: 0 1 auto; display: flex; align-items: center; justify-content: center; width: fit-content; height: auto; padding: 0 var(--ss-spacing-m) 0 var(--ss-spacing-m); }
.ss-main .ss-deselect svg { width: 8px; height: 8px; }
.ss-main .ss-deselect svg path { fill: none; stroke: var(--ss-font-color); stroke-width: 20; stroke-linecap: round; stroke-linejoin: round; }

.ss-main .ss-arrow { flex: 0 1 auto; display: flex; align-items: center; justify-content: flex-end; width: 12px; height: 12px; margin: auto var(--ss-spacing-m) auto var(--ss-spacing-m); }
.ss-main .ss-arrow path { fill: none; stroke: var(--ss-font-color); stroke-width: 18; stroke-linecap: round; stroke-linejoin: round; transition-timing-function: ease-out; transition: var(--ss-animation-timing); }


.ss-content { position: absolute; display: flex; height: auto; flex-direction: column; width: auto; max-height: var(--ss-content-height); box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); box-sizing: border-box; border: unset !important; background-color: var(--ss-bg-color); transition: transform var(--ss-animation-timing), opacity var(--ss-animation-timing); opacity: 0; transform: scaleY(0); overflow: hidden; z-index: 10000; border-radius: var(--br) !important; padding: 16px !important; }
.ss-content.ss-relative { position: relative; height: 100%; }
.ss-content.ss-fixed { position: fixed; }
.ss-content.ss-dir-above { transform-origin: center bottom; flex-direction: column-reverse; }
.ss-content.ss-dir-below { transform-origin: center top; }
.ss-content.ss-open { opacity: 1; transform: scaleY(1); }


.ss-content .ss-search { flex: 0 1 auto; display: flex; flex-direction: row; }
.ss-content .ss-search input { display: inline-flex; font-size: inherit; line-height: inherit; flex: 1 1 auto; width: 100%; min-width: 0px; height: var(--ss-search-height); padding: 8px 16px; border-radius: var(--br-round); margin: 0; margin-bottom: 8px; border: none; background-color: var(--ss-bg-color); outline: 0; text-align: left; box-sizing: border-box; }
.ss-content .ss-search input::placeholder { color: var(--ss-placeholder-color); vertical-align: middle; }
.ss-content .ss-search input:focus { box-shadow: none; }

.ss-content .ss-search .ss-addable { display: inline-flex; justify-content: center; align-items: center; cursor: pointer; flex: 0 0 auto; height: auto; margin: 0 0 0 var(--ss-spacing-m); border: 1px solid var(--ss-border-color); border-radius: var(--ss-border-radius); }
.ss-content .ss-search .ss-addable svg { display: flex; align-items: center; justify-content: flex-end; flex: 0 1 auto; width: 12px; height: 12px; margin: auto var(--ss-spacing-m) auto var(--ss-spacing-m); }
.ss-content .ss-search .ss-addable svg path { fill: none; stroke: var(--ss-font-color); stroke-width: 18; stroke-linecap: round; stroke-linejoin: round; }

.ss-content.ss-dir-above .ss-search { margin-bottom: unset !important; margin-top: 8px; }


.ss-content .ss-list { display: flex; flex-direction: column; height: auto; overflow-x: hidden; overflow-y: auto; gap: 8px; }
.ss-content .ss-list .ss-error { color: var(--ss-error-color); padding: var(--ss-spacing-l); }
.ss-content .ss-list .ss-searching { color: var(--ss-font-color); padding: var(--ss-spacing-l); }


.ss-content .ss-list .ss-optgroup .ss-option { transition: max-height var(--ss-animation-timing) ease, opacity var(--ss-animation-timing) ease, padding-top var(--ss-animation-timing) ease, padding-bottom var(--ss-animation-timing) ease, margin-top var(--ss-animation-timing) ease, margin-bottom var(--ss-animation-timing) ease; }
.ss-content .ss-list .ss-optgroup.ss-open .ss-option { max-height: 100px; opacity: 1; overflow: visible; }
.ss-content .ss-list .ss-optgroup.ss-close .ss-option { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; max-height: 0; opacity: 0; overflow: hidden; }

.ss-content .ss-list .ss-optgroup .ss-optgroup-label { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l); }
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-label-text { flex: 1 1 auto; font-weight: bold; color: var(--ss-font-color); }
.ss-content .ss-list .ss-optgroup .ss-optgroup-label:has(.ss-arrow) { cursor: pointer; }

.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions { flex: 0 1 auto; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--ss-spacing-m); }
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall { flex: 0 0 auto; display: flex; flex-direction: row; cursor: pointer; }
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall:hover { opacity: .5; }
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall.ss-selected svg path { stroke: var(--ss-error-color); }
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall span { flex: 0 1 auto; display: flex; align-items: center; justify-content: center; font-size: 60%; text-align: center; padding: 0 var(--ss-spacing-s) 0 0; }
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg { flex: 0 1 auto; width: 13px; height: 13px; }
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg path { fill: none; stroke: var(--ss-success-color); stroke-linecap: round; stroke-linejoin: round; }
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:first-child { stroke-width: 5; }
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-selectall svg:last-child { stroke-width: 11; }

.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable { flex: 0 1 auto; display: flex; flex-direction: row; cursor: pointer; }
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow { flex: 1 1 auto; width: 10px; height: 10px; }
.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions .ss-closable .ss-arrow path { fill: none; stroke: var(--ss-font-color); stroke-width: 18; stroke-linecap: round; stroke-linejoin: round; transition-timing-function: ease-out; transition: var(--ss-animation-timing); }

.ss-content .ss-list .ss-optgroup .ss-option { padding: var(--ss-spacing-s) var(--ss-spacing-s) var(--ss-spacing-s) calc(var(--ss-spacing-l)*3); }


.ss-content .ss-list .ss-option { display: flex; align-items: center; min-height: var(--ss-option-height); padding: 8px 16px; border-radius: var(--br-round); white-space: normal; color: var(--text-clr); background-color: var(--bg-clr); border: 1px solid var(--text-clr); cursor: pointer; user-select: none; }
.ss-content .ss-list .ss-option:hover:not(.ss-disabled) { color: var(--text-clr-invert); background-color: #000; border-color: #000; }

.ss-content .ss-list .ss-option.ss-highlighted,
.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected { background-color: var(--bg-clr); border: 1px solid var(--accent); color: var(--accent); }

.ss-content .ss-list .ss-option.ss-disabled { cursor: not-allowed; background-color: var(--ss-disabled-color); }
.ss-content .ss-list .ss-option.ss-disabled:hover { color: var(--ss-font-color); }
.ss-content .ss-list .ss-option .ss-search-highlight { display: inline-block; background-color: var(--ss-highlight-color); }
.ss-content .ss-list .ss-search { display: flex; flex-direction: row; align-items: center; padding: var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l); }