.multiselect-wrapper,
 .uniselect-wrapper {
     --unit     : 10px;
     width      : 100%;
     font-family: sans-serif;
     position   : relative;
 }

 .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 {
     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        : 40px;
 }

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

 .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      : 8px;
     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(--text_font);
 }

 .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.2 * 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(--text_font);
     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%;
     }
 }