/* =============================== = Choices = =============================== */ .choices { position: relative; overflow: hidden; margin-bottom: var(--choices-guttering, 24px); font-size: var(--choices-font-size-lg, 16px); } .choices:focus { outline: none; } .choices:last-child { margin-bottom: 0; } .choices.is-open { overflow: visible; } .choices.is-disabled :is(.choices__inner, .choices__input) { background-color: var(--choices-bg-color-disabled, #eaeaea); cursor: not-allowed !important; -webkit-user-select: none; user-select: none; } .choices.is-disabled .choices__item { cursor: not-allowed; color: var(--choices-item-disabled-color, #fff); } .choices [hidden] { position: absolute; inset: 0; pointer-events: none; opacity: 0; } .choices[data-type*=select-one] { cursor: pointer; } .choices[data-type*=select-one] .choices__inner { padding-bottom: var(--choices-inner-one-padding, 7.5px); } .choices[data-type*=select-one] .choices__input { display: block; width: var(--choices-width, 100%); padding: var(--choices-dropdown-item-padding, 10px); border-bottom: var(--choices-base-border, 1px solid) var(--choices-keyline-color, #ddd); background-color: var(--choices-bg-color-dropdown, #fff); margin: 0; } .choices[data-type*=select-one] .choices__button { background-image: var(--choices-icon-cross-inverse, url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==")); padding: 0; background-size: 8px; position: absolute; top: 50%; right: 0; margin-top: -10px; margin-right: 25px; height: 20px; width: 20px; border-radius: 10em; opacity: 0.25; } .choices[data-type*=select-one] .choices__button:is(:hover, :focus) { opacity: var(--choices-button-opacity-hover, 1); } .choices[data-type*=select-one] .choices__button:focus { box-shadow: 0 0 0 2px var(--choices-highlight-color, #005F75); } .choices[data-type*=select-one] .choices__item[data-placeholder] .choices__button { display: none; } .choices[data-type*=select-one]::after { content: ""; height: 0; width: 0; border-style: solid; border-color: var(--choices-text-color, #333) transparent transparent transparent; border-width: var(--choices-arrow-size, 5px); position: absolute; right: var(--choices-arrow-right, 11.5px); top: 50%; margin-top: var(--choices-arrow-margin-top, -2.5px); pointer-events: none; } .choices[data-type*=select-one].is-open::after { border-color: transparent transparent var(--choices-text-color, #333); margin-top: var(--choices-arrow-margin-top-open, -7.5px); } .choices[data-type*=select-one][dir=rtl]::after { left: 11.5px; right: auto; } .choices[data-type*=select-one][dir=rtl] .choices__button { right: auto; left: 0; margin-left: 25px; margin-right: 0; } .choices:is([data-type*=select-multiple], [data-type*=text]) .choices__inner { cursor: text; } .choices:is([data-type*=select-multiple], [data-type*=text]) .choices__button { position: relative; display: inline-block; margin: 0 calc(var(--choices-button-offset, 8px) * -0.5) 0 var(--choices-button-offset, 8px); padding-left: calc(var(--choices-button-offset, 8px) * 2); border-left: 1px solid color-mix(in srgb, var(--choices-primary-color, #005F75) 90%, var(--choices-darken, black)); background-image: var(--choices-icon-cross, url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==")); background-size: var(--choices-button-dimension, 8px); width: var(--choices-button-dimension, 8px); line-height: var(--choices-button-line-height, 1); border-radius: var(--choices-button-border-radius, 0); opacity: var(--choices-button-opacity, 0.75); } .choices:is([data-type*=select-multiple], [data-type*=text]) .choices__button:is(:hover, :focus) { --choices-button-opacity: var(--choices-button-opacity-hover, 1); } .choices__inner { display: inline-block; vertical-align: top; width: var(--choices-width, 100%); background-color: var(--choices-bg-color, #f9f9f9); padding: var(--choices-inner-padding, 7.5px 7.5px 3.75px); border: var(--choices-base-border, 1px solid) var(--choices-keyline-color, #ddd); border-radius: var(--choices-border-radius, 2.5px); font-size: var(--choices-font-size-md, 14px); min-height: var(--choices-input-height, 44px); overflow: hidden; } .is-focused .choices__inner, .is-open .choices__inner { border-color: color-mix(in srgb, var(--choices-keyline-color, #ddd) 85%, var(--choices-darken, black)); } .is-open .choices__inner { border-radius: var(--choices-border-radius, 2.5px) var(--choices-border-radius, 2.5px) 0 0; } .is-invalid .choices__inner { border-color: var(--choices-invalid-color, #d33141); } .is-flipped.is-open .choices__inner { border-radius: 0 0 var(--choices-border-radius, 2.5px) var(--choices-border-radius, 2.5px); } .choices__list { margin: 0; padding-left: 0; list-style: none; } .choices__list--single { display: inline-block; padding: var(--choices-list-single-padding, 4px 16px 4px 4px); width: var(--choices-width, 100%); } [dir=rtl] .choices__list--single { padding-right: 4px; padding-left: 16px; } .choices__list--single .choices__item { width: var(--choices-width, 100%); } .choices__list--multiple { display: inline; } .choices__list--multiple .choices__item { display: inline-block; vertical-align: middle; border-radius: var(--choices-border-radius-item, 20px); padding: var(--choices-multiple-item-padding, 4px 10px); font-size: var(--choices-font-size-sm, 12px); font-weight: 500; margin-right: var(--choices-multiple-item-margin, 3.75px); margin-bottom: var(--choices-multiple-item-margin, 3.75px); background-color: var(--choices-primary-color, #005F75); border: 1px solid color-mix(in srgb, var(--choices-primary-color, #005F75) 95%, var(--choices-darken, black)); color: var(--choices-item-color, #fff); word-break: break-all; box-sizing: border-box; } .choices__list--multiple .choices__item[data-deletable] { padding-right: 5px; } [dir=rtl] .choices__list--multiple .choices__item { margin-right: 0; margin-left: var(--choices-multiple-item-margin, 3.75px); } .choices__list--multiple .choices__item.is-highlighted { background-color: color-mix(in srgb, var(--choices-primary-color, #005F75) 95%, var(--choices-darken, black)); border: 1px solid color-mix(in srgb, var(--choices-primary-color, #005F75) 90%, var(--choices-darken, black)); } .is-disabled .choices__list--multiple .choices__item { background-color: color-mix(in srgb, var(--choices-disabled-color, #eaeaea) 75%, var(--choices-darken, black)); border: 1px solid color-mix(in srgb, var(--choices-disabled-color, #eaeaea) 65%, var(--choices-darken, black)); } .choices__list--dropdown, .choices__list[aria-expanded] { display: none; z-index: var(--choices-z-index, 1); position: absolute; width: var(--choices-width, 100%); background-color: var(--choices-bg-color-dropdown, #fff); border: var(--choices-base-border, 1px solid) var(--choices-keyline-color, #ddd); top: 100%; margin-top: -1px; border-bottom-left-radius: var(--choices-border-radius, 2.5px); border-bottom-right-radius: var(--choices-border-radius, 2.5px); overflow: hidden; word-break: break-all; } .is-active.choices__list--dropdown, .is-active.choices__list[aria-expanded] { display: block; } .is-open .choices__list--dropdown, .is-open .choices__list[aria-expanded] { border-color: color-mix(in srgb, var(--choices-keyline-color, #ddd) 85%, var(--choices-darken, black)); } .is-flipped .choices__list--dropdown, .is-flipped .choices__list[aria-expanded] { top: auto; bottom: 100%; margin-top: 0; margin-bottom: -1px; border-radius: 0.25rem 0.25rem 0 0; } .choices__list--dropdown .choices__list, .choices__list[aria-expanded] .choices__list { position: relative; max-height: 300px; overflow: auto; -webkit-overflow-scrolling: touch; will-change: scroll-position; } .choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item { position: relative; padding: var(--choices-dropdown-item-padding, 10px); font-size: var(--choices-font-size-md, 14px); } [dir=rtl] .choices__list--dropdown .choices__item, [dir=rtl] .choices__list[aria-expanded] .choices__item { text-align: right; } @media (min-width: 640px) { .choices__list--dropdown .choices__item--selectable.is-highlighted[data-select-text], .choices__list[aria-expanded] .choices__item--selectable.is-highlighted[data-select-text] { padding-right: 100px; } .choices__list--dropdown .choices__item--selectable.is-highlighted[data-select-text]::after, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted[data-select-text]::after { content: attr(data-select-text); font-size: var(--choices-font-size-sm, 12px); position: absolute; right: 10px; top: 50%; transform: translateY(-50%); } [dir=rtl] .choices__list--dropdown .choices__item--selectable.is-highlighted[data-select-text], [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted[data-select-text] { text-align: right; padding-left: 100px; padding-right: 10px; } [dir=rtl] .choices__list--dropdown .choices__item--selectable.is-highlighted[data-select-text]::after, [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted[data-select-text]::after { right: auto; left: 10px; } } .choices__list--dropdown .choices__item--selectable.is-selected::after, .choices__list[aria-expanded] .choices__item--selectable.is-selected::after { content: none !important; } .choices__list--dropdown .choices__item--selectable.is-selected, .choices__list[aria-expanded] .choices__item--selectable.is-selected, .choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted { background-color: var(--choices-highlighted-color, #f2f2f2); } .choices__item { cursor: default; } .choices__item--selectable { cursor: pointer; } .choices__item--disabled { cursor: not-allowed; -webkit-user-select: none; user-select: none; opacity: 0.5; } .choices__heading { font-weight: 600; font-size: 12px; padding: 10px; border-bottom: 1px solid color-mix(in srgb, var(--choices-keyline-color, #ddd) 90%, var(--choices-lighten, white)); color: gray; } .choices__button { text-indent: -9999px; appearance: none; border: 0; background-color: transparent; background-repeat: no-repeat; background-position: center; cursor: pointer; } .choices__button:focus { outline: none; } .choices__input { display: inline-block; vertical-align: baseline; background-color: var(--choices-bg-color, #f9f9f9); font-size: var(--choices-font-size-md, 14px); margin-bottom: var(--choices-input-margin-bottom, 5px); border: 0; border-radius: 0; max-width: var(--choices-width, 100%); padding: var(--choices-input-padding, 4px 0 4px 2px); } .choices__input:focus { outline: 0; } .choices__input::-webkit-search-decoration, .choices__input::-webkit-search-cancel-button, .choices__input::-webkit-search-results-button, .choices__input::-webkit-search-results-decoration { display: none; } .choices__input::-ms-clear, .choices__input::-ms-reveal { display: none; width: 0; height: 0; } [dir=rtl] .choices__input { padding-right: 2px; padding-left: 0; } .choices__placeholder { opacity: var(--choices-placeholder-opacity, 0.5); } /* ===== End of Choices ====== */