*.no_selection { user-select: none; /* standard syntax */ -webkit-user-select: none; /* webkit (safari, chrome) browsers */ -moz-user-select: none; /* mozilla browsers */ -khtml-user-select: none; /* webkit (konqueror) browsers */ -ms-user-select: none; /* IE10+ */ }

.select_all_label { user-select: none; }

.checkbox_wrapper { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; column-gap: 12px; margin-top: 12px; background-color: transparent; cursor: pointer; }

.checkbox_wrapper input[type="checkbox"] { visibility: hidden; display: none; width: 0; height: 0; }

.checkbox_wrapper .checkbox { box-sizing: border-box; width: 16px; height: 16px; border: 1px solid #18181b; border-radius: 4px; cursor: pointer; }

.checkbox_wrapper .checkbox svg { width: 14px; height: 16px; color: #fafafa; }

.checkbox_wrapper .checkbox.active { background: #18181b; }

.checkbox_wrapper .checkbox_text { font-size: 14px; font-weight: 500; line-height: 14px; color: #09090b; user-select: none; }

.radio_wrapper_wrapper { margin-top: 12px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; row-gap: 8px; }

.radio_wrapper_wrapper .radio_wrapper { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; column-gap: 12px; user-select: none; }

.radio_wrapper_wrapper .radio_wrapper:hover { cursor: pointer; background: white; }

.radio_wrapper_wrapper .radio_wrapper input[type="radio"] { visibility: hidden; display: none; width: 0; height: 0; }

.radio_wrapper_wrapper .radio_wrapper .radio { box-sizing: border-box; width: 16px; height: 16px; border: 1px solid #18181b; border-radius: 99px; padding-bottom: 1px; line-height: 16px; }

.radio_wrapper_wrapper .radio_wrapper .radio svg { width: 14px; height: 14px; color: transparent; fill: transparent; margin-bottom: 1px; }

.radio_wrapper_wrapper .radio_wrapper .radio.active svg { color: #18181b; fill: #18181b; margin-bottom: 1px; }

.radio_wrapper_wrapper .radio_wrapper .radio_text { font-size: 14px; font-weight: 500; line-height: 14px; color: #09090b; pointer-events: none; }

.input_sub { color: #71717a; font-size: 12.8px; line-height: 19.2px; margin-top: 8px; }

.item_wrapper { margin-top: 32px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }

.toggle_with_label { display: flex; flex-direction: row; align-items: center; column-gap: 12px; }

.toggle_with_label .label_inactive { display: inline; }

.toggle_with_label .label_active { display: none; }

.toggle_with_label.active .label_inactive { display: none; }

.toggle_with_label.active .label_active { display: inline; }

.toggle_label { font-size: 14px; font-weight: 500; line-height: 14px; color: #71717a; user-select: none; }

.toggle { width: 36px; height: 19px; background: #e4e4e7; border-radius: 190px; position: relative; display: inline-block; margin-top: 5px; margin-bottom: 5px; margin-left: 5px; cursor: pointer; }

.toggle .circle { background: white; width: 15px; height: 15px; border-radius: 100%; position: absolute; top: 2px; left: 2px; transition: 0.15s all cubic-bezier(0.4, 0, 0.2, 1); }

.toggle.active { background: #0062ff; }

.toggle.active .circle { transform: translateX(17px); }

.toggle.disabled { cursor: auto; }

form .info_block { margin-bottom: 8px !important; }

.info_block { border: 1px solid #e4e4e7; border-radius: 8px; padding: 12px 16px; display: flex; flex-direction: row; justify-content: flex-start; width: 670px; max-width: 670px; margin-bottom: 16px; column-gap: 12px; }

.info_block.auto_width { width: 100% !important; }

.info_block svg { min-width: 16px; width: 16px; height: 16px; min-height: 16px; margin-right: 0; color: #18181b; }

.info_block > div { display: flex; flex-direction: column; }

.info_block > div > span { line-height: 19px; font-size: 13px; color: #71717a; margin-top: 2px; }

.info_block > div > span.title { color: #18181b; margin-top: -2px; font-size: 14px; font-weight: 500; line-height: 20px; }

.info_block.warning svg { color: #FF8000; }

.info_block .info_block_main { display: flex; flex-direction: column; }

.info_block .info_block_main .info_block_header { font-size: 16px; font-weight: 500; line-height: 24px; margin-bottom: 2px; }

.info_block .info_block_main .info_block_sub { margin-top: 0 !important; line-height: 19px; font-size: 13px; color: #71717a; }

.toggle_wrapper { border: 1px solid #e4e4e7; border-radius: 8px; padding: 16px; display: flex; flex-direction: row; justify-content: space-between; width: 670px; margin-bottom: 16px; }

.toggle_wrapper .setting_info { display: flex; flex-direction: column; }

.toggle_wrapper .setting_info .setting_header { font-size: 16px; font-weight: 500; line-height: 24px; }

.toggle_wrapper .setting_info .setting_sub { line-height: 19px; font-size: 13px; color: #71717a; margin-top: 2px; }

.toggle_wrapper .setting_switch { display: flex; flex-direction: column; justify-content: center; align-items: center; }

.dropdown { /* @improve: - single div dropdown met attr eg title="Students", en alle opties direct descendents worden gecut/paste in nieuwe subdiv menu etc -> js zet om in volle html met svg, cleans up your html, kijk af van shadcdn dropdown html render code - dropdown menu autom width of largest button, auto size/grow/shrink ipv hard coded - dropup/down obv class - align dropdown menu left righ obv class - narrow/tiny etc classes opruimen - width override via css attr width="70px" set by js as style - cramped style als default? - andere svg? */ display: flex; flex-direction: row; margin-top: 8px; -webkit-transform: scale(1); background: white; position: relative; width: 200px; height: 32px; position: relative; user-select: none; margin-right: 0; }

.dropdown:not(.dropdown_checked_v3) { width: 200px; }

.dropdown.disabled { opacity: 0.5; pointer-events: none; }

.dropdown.cramped .dropdown_text { padding: 8px 12px; }

.dropdown.tiny { width: 110px; }

.dropdown.tiny .dropdown_menu, .dropdown.tiny .dropdown_text { width: 110px; }

.dropdown.small { width: 150px; }

.dropdown.small .dropdown_menu, .dropdown.small .dropdown_text { width: 150px; }

.dropdown.small .dropdown_text span { max-width: 130px; /* Set max width */ white-space: nowrap; /* Prevent wrapping */ overflow: hidden; /* Hide overflow */ text-overflow: ellipsis; /* Add "..." when text overflows */ }

.dropdown.medium { width: 300px; }

.dropdown.medium .dropdown_menu, .dropdown.medium .dropdown_text { width: 300px; }

.dropdown.wide { width: 400px; }

.dropdown:hover { -webkit-transform: scale(1); }

.dropdown .dropdown_menu { min-width: 200px; }

.dropdown .dropdown_text svg { width: 16px; min-width: 16px; height: 16px; min-height: 16px; margin-right: 0; }

.dropdown .dropdown_text svg:last-of-type { margin-right: -8px; }

.dropdown.menu_dropdown .dropdown_text svg { color: #09090b; }

.dropdown:not(.dropdown_checked_v3) .dropdown_text { width: 200px; border: 1px solid #e4e4e7; border-radius: 6px; display: flex; padding: 8px 16px; font-weight: 500; height: 100%; font-size: 14px; color: #71717a; flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 2px; cursor: pointer; }

.dropdown:not(.dropdown_checked_v3) .dropdown_text span.chosen { color: #09090b; }

.dropdown:not(.dropdown_checked_v3) .dropdown_text span { white-space: nowrap; /* Prevent line breaks */ overflow: hidden; /* Hide overflowed content */ text-overflow: ellipsis; /* Show "..." when text is clipped */ display: inline-block; /* Ensure width constraints apply */ max-width: 100%; }

.dropdown:not(.dropdown_checked_v3) .dropdown_text svg { height: 16px; color: #71717a; opacity: 0.5; }

.dropdown .dropdown_option { flex-direction: row; justify-content: flex-start; align-items: center; display: flex; height: 36px; }

.dropdown .dropdown_option:not(.chosen) svg { color: transparent !important; }

.dropdown .dropdown_option.chosen svg { color: #18181b; }

.dropdown .dropdown_option.disabled { pointer-events: none; opacity: 0.5; }

.dropdown .dropdown_option svg { width: 16px; min-width: 16px; height: 16px; min-height: 16px; margin-top: 4px; margin-left: 8px; margin-right: 0px; flex: 0 0 auto; }

.dropdown.droptop .dropdown_menu { top: 0 !important; margin-top: calc(-100% - 11px); }

.dropdown.dropup .dropdown_menu { bottom: 36px; top: auto !important; -webkit-transition: opacity .2s ease, -webkit-transform .2s ease; transition: opacity .2s ease, transform .2s; }

.dropdown .dropdown_menu { position: absolute; top: calc(32px + 3px); left: 0; padding: 4px; background: white; opacity: 1; height: 0; max-height: 300px; overflow: auto; /* only shows scrollbars when needed */ border: 1px solid #e4e4e7; border-radius: 6px; flex-direction: column; -webkit-transition: opacity .2s ease, -webkit-transform .2s ease; transition: opacity .2s ease, transform .2s; opacity: 0; -webkit-transform: scale(0.95); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); }

.dropdown .dropdown_menu.align_right { left: auto; right: 0; }

.dropdown .dropdown_menu.active { height: auto; visibility: visible; opacity: 1; -webkit-transform: scale(1); -webkit-transition: opacity .2s ease, -webkit-transform .2s ease; transition: opacity .2s ease, transform .2s; }

.dropdown .dropdown_menu.closing { -webkit-transition: all .2s ease; opacity: 0; -webkit-transform: scale(0.95); }

.dropdown .dropdown_menu.closed { opacity: 0; visibility: hidden; }

.dropdown .dropdown_menu .dropdown_option { padding: 6px 8px; color: #18181b; border-radius: 4px; line-height: 20px; font-size: 14px; text-wrap: nowrap; }

.dropdown .dropdown_menu .dropdown_option:hover { background: #f4f4f5; cursor: pointer; }

.dropdown .dropdown_menu .dropdown_option.active { background: #f4f4f5; }

.dropdown .dropdown_menu .table_total { padding-left: 4px; }

.dropdown.dropdown_checked_v3 { width: auto !important; border: 1px dashed #e4e4e7 !important; border-radius: 6px !important; padding: 0 12px; display: flex; align-items: center; cursor: pointer; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: .15s; }

.dropdown.dropdown_checked_v3:hover { background-color: #f4f4f5; }

.dropdown.dropdown_checked_v3 .dropdown_menu { min-width: 150px; max-width: 150px; }

.dropdown.dropdown_checked_v3 .dropdown_text { border: none !important; padding: none !important; display: flex; align-items: center; column-gap: 8px; }

.dropdown.dropdown_checked_v3 .dropdown_text span.title { color: #09090b; font-size: 12px; line-height: 16px; font-weight: 500; }

.dropdown.dropdown_checked_v3 .dropdown_text > svg { width: 16px; height: 16px; color: #09090b; }

.dropdown.dropdown_checked_v3 .dropdown_text .selection_indicator { display: flex !important; column-gap: 4px; align-items: center; flex-wrap: nowrap; }

.dropdown.dropdown_checked_v3 .dropdown_text .selection_indicator span { font-weight: 400; line-height: 16px; font-size: 12px; color: #18181b; padding: 2px 4px; border-radius: 4px; background-color: #f4f4f5; }

.dropdown.dropdown_checked_v3 .dropdown_text .selection_indicator .separator { margin: 0 12px 0 8px; width: 1px; height: 16px; background-color: #e4e4e7; }

.dropdown.dropdown_checked.dropdown_checked_v2:not(.dropdown_checked_v3) .dropdown_text { display: flex; }

.dropdown.dropdown_checked.dropdown_checked_v2:not(.dropdown_checked_v3) .dropdown_text svg { margin-left: auto; margin-right: 12px; }

.dropdown.dropdown_checked:not(.dropdown_checked_v2):not(.dropdown_checked_v3) { width: auto; border: 1px dashed #e5e5e5; border-radius: 6px; }

.dropdown.dropdown_checked:not(.dropdown_checked_v2):not(.dropdown_checked_v3) .dropdown_text { border: none; padding: 8px 10px; border-radius: 0; border-left: 1px solid #e5e5e5; }

.dropdown.dropdown_checked:not(.dropdown_checked_v2):not(.dropdown_checked_v3):hover { background: #f5f5f5; }

.dropdown.dropdown_checked:not(.dropdown_checked_v2):not(.dropdown_checked_v3) .dropdown_checked_selection { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; column-gap: 4px; height: 100%; background: transparent; border-radius: 6px; padding: 0 0; }

.dropdown.dropdown_checked:not(.dropdown_checked_v2):not(.dropdown_checked_v3) .dropdown_checked_selection span { white-space: nowrap; font-size: 12px; font-weight: 400; background: #f5f5f5; border-radius: 6px; line-height: 16px; padding: 2px 4px; }

.dropdown.dropdown_checked:not(.dropdown_checked_v2):not(.dropdown_checked_v3) .dropdown_checked_selection span:first-of-type { margin-left: 10px; }

.dropdown.dropdown_checked:not(.dropdown_checked_v2):not(.dropdown_checked_v3) .dropdown_checked_selection span:last-of-type { margin-right: 10px; }

.dropdown.dropdown_checked:not(.dropdown_checked_v2):not(.dropdown_checked_v3) svg, .dropdown.dropdown_checked:not(.dropdown_checked_v2):not(.dropdown_checked_v3) .dropdown_text { color: #09090b; opacity: 1; }

.dropdown.dropdown_checked:not(.dropdown_checked_v2):not(.dropdown_checked_v3).new { flex-direction: column; row-gap: 4px; height: auto !important; border: none !important; }

.dropdown.dropdown_checked:not(.dropdown_checked_v2):not(.dropdown_checked_v3).new:hover { background-color: transparent !important; }

.dropdown.dropdown_checked:not(.dropdown_checked_v2):not(.dropdown_checked_v3).new .dropdown_checked_selection { border: none; padding-top: 0; padding-bottom: 0; justify-content: flex-end; }

.dropdown.dropdown_checked:not(.dropdown_checked_v2):not(.dropdown_checked_v3).new .dropdown_checked_selection span { margin-top: 4px; margin-bottom: 4px; }

.dropdown.dropdown_checked:not(.dropdown_checked_v2):not(.dropdown_checked_v3).new .dropdown_text { border: 1px solid #e5e5e5; border-radius: 6px; padding-top: 6px; padding-bottom: 6px; }

.dropdown.dropdown_checked:not(.dropdown_checked_v2):not(.dropdown_checked_v3).new .dropdown_text:hover { background: #f5f5f5; }

.dropdown_reset { border-radius: 6px; padding: 8px 12px; font-size: 14px; font-weight: 500; color: #09090b; line-height: 20px; height: 30px; display: flex; align-items: center; column-gap: 8px; cursor: pointer; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: .15s; }

.dropdown_reset:hover { background-color: #f4f4f5; }

.dropdown_reset svg { width: 16px; height: 16px; }