.multiselect-wrapper,
 .uniselect-wrapper {
     /* --unit  : 10px; */
     width: 100%;
     position: relative;
     cursor: pointer;
     user-select: none;
 }

 .multiselect-wrapper .select-box,
 .uniselect-wrapper .select-box {
     width: 100%;
     padding: calc(1 * var(--unit)) calc(3 * var(--unit)) calc(1 * var(--unit)) calc(1 * var(--unit));
 }

 /* .multiselect-wrapper .select-box {
     border       : solid 1px rgba(21, 43, 110, 0.3);
     padding      : calc(0.5 * var(--unit)) 0 calc(0.5 * var(--unit)) calc(0.5 * var(--unit));
     background   : white;
     cursor       : pointer;
     user-select  : none;
     border-radius: 8px;
     min-height   : calc(4.4 * var(--unit));
     display      : flex;
     align-items  : center;
 }

 .uniselect-wrapper .select-box {
     border       : solid 1px rgba(21, 43, 110, 0.3);
     padding      : 0;
     background   : white;
     cursor       : pointer;
     user-select  : none;
     border-radius: 8px;
     height       : calc(4.4 * var(--unit));
 } */

 .select-box:focus {
     outline: none;
 }

 .options-container {
     display: none;
     position: absolute;
     background: rgba(245, 250, 255, 1);
     /* backdrop-filter   : blur(5px); */
     border: 1px solid #ccc;
     /* box-shadow        : 0 3px 6px rgba(0, 0, 0, 0.15); */
     width: fit-content;
     max-height: calc(20 * var(--unit));
     overflow-y: auto;
     z-index: 1000;
     border-radius: calc(.7 * var(--unit));
     top: 100%;
     left: 0;
     margin-top: 1px;
     margin-bottom: calc(5 * var(--unit));
 }

 .select-box.active {
     color: inherit;
 }

 .select-box.active .options-container {
     display: block;
 }

 .options-container .options-list label.option-item {
     display: flex;
     flex-direction: row;
     padding: 0;
     margin: 0;
     cursor: pointer;
     align-items: center;
     padding: 0 calc(1 * var(--unit));
     font-size: calc(1.5 * var(--unit));
     color: #333;
     gap: calc(1 * var(--unit));
     height: calc(4 * var(--unit));
     min-height: calc(4 * var(--unit));
     border: none;
     border-radius: 0;
     user-select: none;
 }

 .options-container .options-list label:not(:last-child) {
     border-bottom: 1px solid #ccc;
     min-height: auto;
 }

 .options-container .options-list label:has(input:checked) {
     background-color: #e4e9ed;
 }

 .options-container .options-list label input[type=checkbox] {
     appearance: none;
     -moz-box-shadow: none;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     -webkit-box-shadow: none;
     box-shadow: none;
     border: solid 1px rgba(21, 43, 110, 0.3);
     background-color: #fff;
     margin: 0;
     padding: 0;
     cursor: pointer;
     min-width: 20px;
     width: 20px;
     height: 20px;
     vertical-align: middle;
     border-radius: calc(.3 * var(--unit));
 }

 .options-container .options-list label input[type=radio] {
     appearance: none;
     display: none;
 }

 .options-container .options-list label input[type=checkbox]:checked {
     background: #fff url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMTQwcHgiIGhlaWdodD0iMTQwcHgiIHZpZXdCb3g9IjAgMCAxNDAgMTQwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPiAgICAgICAgPHRpdGxlPlNoYXBlPC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPjwvZGVmcz4gICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8ZyBpZD0ib2stc2xpbSIgZmlsbD0iIzU4NTg1OCI+ICAgICAgICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBwb2ludHM9IjExMy41MzE1MjEgMjMgNTYuNDQ0NDAyMSA3OS45MDU1ODE2IDI2Ljk5NDIwMjggNTAuNTYwOTIzNSA4IDY5LjUzOTgzNjcgNTYuNDQ0NDAyMSAxMTcuODYzMDU2IDEzMi40OTE0NjkgNDEuOTc4NTYxMiI+PC9wb2x5Z29uPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+) no-repeat center center;
     background-size: 75% 75%;
 }

 .options-container input[type=text].search-box {
     width: 100%;
     box-sizing: border-box;
     padding: var(--unit) calc(1 * var(--unit));
     border-radius: 0;
     border: none;
     border-bottom: 1px solid #ccc;
     outline: none;
     height: unset;
 }

 .search-box:focus {
     outline: none;
     border-bottom: 1px solid #007bff;
 }

 .uniselect-wrapper .select-box .selected,
 .multiselect-wrapper .select-box .selected {
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
     padding: 0 calc(4 * var(--unit)) 0 calc(1 * var(--unit));
     /* background-image   : url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEsSURBVHgB7dg7C4JQFMDxY58gegzR0BRUW1BtTX3atpqaWmqrIBp6QFNDNPRAkIZqqI6i+L7elzjc/yB4Rc5PdFC17z/IUDnIWApESoFIKRApBSLlAd3uOqSZYTwDaw5oud7DcDyFw/EEaYQXj/NwbgCEi4v1zlyYzlfSUYgZTWbwen/MuW5UDg/aGDuZKDfGDuefL1cLVCrmYdDvBE6UgQrDYN12E6qVsgXCTaNek46Kw/TaLWffeahlopJiPCBZKBpMACQaRYsJBYlCsWAiQbwoVkwsiBXFgyGCaFG8mESgpCgRGEyj+S7D4YjwhwM32yM3hhoUh/LHgsGoX9Cibp8IDBMICCgeDDMIIlC8GC4Q+FAiMJgm4u/H7aFDqZAHEWnqdwwhBSKVOdAPZ8gJcS32i54AAAAASUVORK5CYII=);
     background-size       : 18px 18px;
     background-repeat     : no-repeat;
     background-position   : right 12px center; */
     height: 100%;
     font-weight: normal;
     font-family: var(--font-body);
 }

 .multiselect-wrapper .select-box .selected {
     width: 100%;
     display: flex;
     flex-wrap: wrap;
     gap: 5px;
     padding-left: 0px;
 }

 .multiselect-wrapper .select-box .selected .tag {
     background: #e7f0f8;
     border: solid 1px #ccc;
     border-radius: calc(0.4 * var(--unit));
     height: calc(3 * var(--unit));
     gap: calc(1 * var(--unit));
     font-size: calc(1.3* var(--unit));
     display: flex;
     align-items: center;
     padding: 0 0 0 calc(1 * var(--unit));
     overflow: hidden;
 }

 .uniselect-wrapper .select-box .selected .tag {
     background: transparent;
     border: none;
     font-family: var(--font-body);
     font-size: var(--field_font_size);
     display: flex;
     align-items: center;
 }

 .tag button.remove {
     appearance: none;
     background: rgba(0, 0, 0, 0.1);
     border: none;
     font-family: Arial, sans-serif;
     cursor: pointer;
     width: calc(2.8 * var(--unit));
     height: 100%;
     font-size: 18px;
     line-height: 18px;
     /* display            : inline-flex;
            align-items    : center;
            justify-content: center; */
     color: #333;
     padding: 0;
     border-left: 1px solid #ccc;
     border-radius: 0;
 }

 .collapsible-multi .collapsible-block {
     display: none;
 }

 .collapsible-multi .switch-inputs {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     align-items: center;
     gap: 1rem;
     margin-bottom: .5rem;
 }

 .collapsible-multi .switch-inputs label {
     cursor: pointer;
     display: flex;
     align-items: center;
     flex-grow: 1;
     height: 48px;
     border: solid 1px rgba(21, 43, 110, 0.3);
     border-radius: 24px;
     padding: 0 14px;
 }

 .collapsible-multi .switch-inputs label input {
     width: 20px;
     min-width: 20px;
     height: 20px;
     border: solid 1px rgb(40 45 104);
 }

 .collapsible-multi .switch-inputs label input:checked {
     background: rgb(40 45 104);
 }

 .collapsible-multi .switch-inputs label:has(input[type=radio]:checked) {
     border-color: rgb(40 45 104);
     background-color: rgb(220 217 254);
 }

 .collapsible-multi:has(input[type=radio][value=yes]:checked) .collapsible-block {
     display: block;
 }

 @media (max-width: 600px) {
     .multiselect-wrapper {
         max-width: 100%;
     }

     dialog>div {
         width: 100%;
     }
 }