.inputs-wrapper { display: flex; flex-wrap: wrap; width: 100%; padding-bottom: 40px; }
.inputs-wrapper.register { padding-top: 60px; }
.inputs-wrapper form { display: flex; flex-wrap: wrap;  width: 100%; }
.inputs-wrapper .group { flex: 0 0 48%; max-width: 48%; margin: 0 1% 0 1%; text-align: left; }
.inputs-wrapper .group.text { flex: 0 0 93% !important; max-width: 93% !important; text-align: center; font-size: 14px; margin: 20px 0; background-color: var(--third-color); padding: 10px 3%; }
.inputs-wrapper .group.full { flex: 0 0 98%; max-width: 98%; }
.inputs-wrapper .group.equal { flex: 1; margin-bottom: 0; }
.inputs-wrapper .group.smaller { flex: 0 0 auto; margin-bottom: 0; }
.inputs-wrapper .group.smaller:first-of-type { margin-left: 0; }
.inputs-wrapper .group.smaller:last-of-type { margin-right: 0; }
.inputs-wrapper .group.radiocheck { margin: 0 1% 0 1%; text-align: left; display: flex; flex-direction: column; row-gap: 10px; }
.inputs-wrapper .group.links { flex: 0 0 98%; max-width: 98%; margin: 20px 1% 0 1%; text-align: left; }
.inputs-wrapper .group.links p.forget { color: var(--color-grey); }
.inputs-wrapper .group.links p.small { line-height: 22px; font-size: 14px; }
.inputs-wrapper .group a.showpwd { line-height: 12px; font-size: 12px; padding-top: 4px; }
.inputs-wrapper button { transition: none; width: 98%; margin: 20px auto 0 auto; }
.inputs-wrapper .group .service-message { opacity: 0; height: 20px; padding-top: 6px; text-align: center; color: var(--success-color); }

p.form-text { display: block; text-transform: uppercase; font-weight: 400; font-family: var(--form-ff); font-size: var(--label-fs); line-height: var(--label-flh); color: var(--color-grey); padding: 0 0 8px 0; }

@media screen and (min-width: 1px) and (max-width: 870px) {
    .inputs-wrapper .group { flex: 0 0 98%; max-width: 98%; }
    .inputs-wrapper .group.equal { flex: 0 0 98%; max-width: 98%; }
    .inputs-wrapper .group.smaller { flex: 0 0 98%; max-width: 98%; margin: 10px 1%; }
    .inputs-wrapper .group.smaller:first-of-type { margin-left: 0; }
    .inputs-wrapper .group.smaller:last-of-type { margin-right: 0; }
    .inputs-wrapper .group .date-of-birth { display: flex; flex-direction: column; }
}

/* Errors */
.inputs-wrapper .group.invalid input { border: 1px solid var(--failed-color); }
.inputs-wrapper .group.invalid select { border: 1px solid var(--failed-color); }
.inputs-wrapper .group.invalid input[type="checkbox"] + label::before { border: 1px solid var(--failed-color); }
.inputs-wrapper .group.success input { border: 1px solid var(--success-color); }
.inputs-wrapper .group.success select { border: 1px solid var(--success-color); }
.inputs-wrapper .group.success input[type="checkbox"] + label::before { border: 1px solid var(--success-color); }
.inputs-wrapper .group .error-control { opacity: 0; height: 20px; padding-top: 4px; }
.inputs-wrapper .group.invalid .error-control { opacity: 1; color: var(--failed-color); font-size: 12px; line-height: 15px; }
.inputs-wrapper .group.invalid #psw-error-login.error-control { height: 50px; }

/* Login Switch */
.inputs-wrapper .switch { position: relative; display: inline-block; width: 41px; height: 20px; }
.inputs-wrapper .switch span.title { text-transform: none; position: absolute; left: 50px; color: var(--primary-color); font-size: 14px; line-height: 24px; white-space: nowrap; }
.inputs-wrapper .switch input { opacity: 0; width: 0; height: 0; }
.inputs-wrapper .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; border-radius: 34px; }
.inputs-wrapper .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: var(--color-white); -webkit-transition: .4s; transition: .4s; border-radius: 50%; }
.inputs-wrapper input:checked + .slider { background-color: var(--secondary-color); }
.inputs-wrapper input:focus + .slider { box-shadow: 0 0 1px var(--secondary-color); }
.inputs-wrapper input:checked + .slider:before { -webkit-transform: translateX(16px); -ms-transform: translateX(16px); transform: translateX(16px); }

/* Placeholder */
input::placeholder { font-size: var(--form-fs); line-height: var(--form-flh); font-family: var(--form-ff); color: var(--form-placeholder-color); }
input::-ms-input-placeholder { font-size: var(--form-fs); line-height: var(--form-flh); font-family: var(--form-ff); color: var(--form-placeholder-color); }
input:-moz-placeholder { font-size: var(--form-fs); line-height: var(--form-flh); font-family: var(--form-ff); color: var(--form-placeholder-color); opacity: 1; }
input::-moz-placeholder { font-size: var(--form-fs); line-height: var(--form-flh); font-family: var(--form-ff); color: var(--form-placeholder-color); opacity: 1; }
input::-webkit-input-placeholder { font-size: var(--form-fs); line-height: var(--form-flh); font-family: var(--form-ff); color: var(--form-placeholder-color); }
/* Label */
label { display: block; text-transform: uppercase; font-weight: 400; font-family: var(--form-ff); font-size: var(--label-fs); line-height: var(--label-flh); color: var(--color-grey); padding: 0 0 4px 0; }
/* Inputs */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 50px #fff inset !important; -webkit-text-fill-color: var(--primary-color) !important; }
input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 50px #fff inset !important; -webkit-text-fill-color: var(--primary-color) !important; }

/* Dark theme overrides for DataTables search and show inputs */
html.theme-dark input[type="search"],
html.theme-dark select,
html.theme-dark .dataTables_filter input,
html.theme-dark .dataTables_length select {
    color: #FFFFFF !important;
    background-color: #374151 !important;
    border: 1px solid #4B5563 !important;
}

html.theme-dark .dataTables_filter input::placeholder {
    color: #9CA3AF !important;
}

html.theme-dark .dataTables_length label,
html.theme-dark .dataTables_filter label {
    color: #F9FAFB !important;
}

/* Fix dropdown arrow visibility in dark mode */
html.theme-dark select {
    background-image: url("data:image/svg+xml,<svg width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path fill='%23FFFFFF' d='m0,6l12,12l12,-12l-24,0z'/><path fill='none' d='m0,0l24,0l0,24l-24,0l0,-24z'/></svg>"), linear-gradient(to right, #4B5563, #4B5563) !important;
    background-position: calc(100% - 11px), calc(100% - 32px) 10px !important;
    background-size: 12px 12px, 2px 20px !important;
    background-repeat: no-repeat !important;
}

/* Dark theme for KS multiselect search input */
html.theme-dark .ks-multiselect-seach input {
    color: #FFFFFF !important;
    background-color: #374151 !important;
    border: 1px solid #4B5563 !important;
}

html.theme-dark .ks-multiselect-seach input::placeholder {
    color: #9CA3AF !important;
}

/* Force autofill styles in dark mode */
html.theme-dark input:-webkit-autofill,
html.theme-dark input:-webkit-autofill:hover,
html.theme-dark input:-webkit-autofill:focus,
html.theme-dark input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 50px #374151 inset !important;
    -webkit-text-fill-color: #FFFFFF !important;
}
/* Input type text */
input { text-indent: 14px !important; font-family: var(--form-ff); font-size: var(--form-fs); width: 100%; -webkit-appearance: none; margin: 0 !important; padding: 0 !important; box-sizing: border-box; background-color: var(--form-bgcolor); height: var(--form-input-h); border-radius: var(--form-borderradius); border: var(--form-border); color: var(--primary-color); -webkit-appearance: none !important; -webkit-border-radius: 0 !important; }
/* Textarea */
textarea {height: 150px; padding: 12px 20px; box-sizing: border-box; resize: none; font-family: var(--form-ff); font-size: var(--form-fs); width: 100%; background-color: var(--form-bgcolor); border-radius: var(--form-borderradius); border: var(--form-border); color: var(--primary-color); }
/* Select */
select { text-transform: uppercase; font-family: var(--form-ff); font-size: 13px; width: 100%; min-width: 180px; height: var(--form-input-h); box-sizing: border-box; cursor: pointer; margin: 0 !important; background-color: var(--form-bgcolor); border-radius: var(--form-borderradius); border: var(--form-border); color: var(--primary-color); text-indent: 14px !important; -webkit-appearance: none !important; -moz-appearance: none !important; -ms-appearance: none !important; -o-appearance: none !important; appearance: none !important; background-image: url("data:image/svg+xml,<svg width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path fill='%23545454' d='m0,6l12,12l12,-12l-24,0z'/><path fill='none' d='m0,0l24,0l0,24l-24,0l0,-24z'/></svg>"), linear-gradient(to right, #ccc, #ccc); background-position: calc(100% - 11px), calc(100% - 32px) 10px; background-size: 12px 12px, 2px 20px; background-repeat: no-repeat; }
option { text-transform: uppercase; font-size: 13px; }
/* Checks */
input[type="checkbox"] + label::before, input[type="checkbox"] + label::after { position: absolute; top: 0; left: 0; display: block; width: 20px; height: 20px; }
input[type="checkbox"] { position: absolute; opacity: 0; z-index: -1; }
input[type="checkbox"] + label { font-weight: var(--fw-base); text-transform: none; position: relative; display: inline-block; font-family: var(--form-ff); font-size: var(--form-fs); line-height: 1.4rem; padding: 0 0 0 32px; cursor: pointer; width: fit-content; }
input[type="checkbox"] + label a { font-weight: 400; font-family: var(--form-ff); font-size: var(--label-fs); line-height: var(--label-flh); }
input[type="checkbox"].multicheck + label { color: var(--primary-color); }
input[type="checkbox"] + label::before { content: " "; border: var(--form-border); }
input[type="checkbox"] + label::after { content: "\2714"; color: var(--form-ele); line-height: 20px; text-align: center; border: var(--form-border); }
/* Square Radio */
input[type=radio].squareradio + label::before, input[type=radio].squareradio + label::after { width: 30px; height: 29px; line-height: 30px; font-size: var(--form-fs); text-align: center; border-radius: 0 !important;}
input[type="radio"].squareradio + label::before { content: attr(data-content); color: var(--form-ele); background: var(--color-white); border: var(--form-border); }
input[type="radio"].squareradio + label::after { content: attr(data-content); color: var(--color-white); background: var(--secondary-color); top: 0; left: 0; border: var(--form-border); border-color: var(--secondary-color); cursor: default; }
input[type="radio"].squareradio + label { line-height: 30px; color: transparent; padding: 0px 0 0 22px; }
input[type="radio"].squareradio + label:last-of-type { margin-right: 10px; }
input[type="radio"].squareradio + label::before, input[type="radio"].squareradio + label::after { position: absolute; top: 0px; left: 0; }
/* Button Style Radio */
/* Button Style Radio */
input[type="radio"].buttonradio + label { text-indent: 10px; padding: 0 10px 0 0; border: var(--form-border); background: var(--color-white); color: var(--form-ele); line-height: 30px; color: transparent; white-space: nowrap; }
input[type="radio"].buttonradio:checked + label { text-indent: 10px; padding: 0 10px 0 0; border: var(--form-border); background: var(--secondary-color); color: var(--color-white); line-height: 30px; color: transparent; white-space: nowrap; }
input[type="radio"].buttonradio + label:last-of-type { margin-left: -1px; }
input[type="radio"].buttonradio:checked + label::before, input[type="radio"].buttonradio:checked + label::after { content: attr(data-content); position: absolute; top: 0; left: 0; width: fit-content; height: 29px; line-height: 30px; font-size: var(--form-fs); text-align: center; border-radius: 0 !important; }
input[type="radio"].buttonradio + label::before, input[type="radio"].buttonradio + label::after { content: attr(data-content); position: absolute; top: 0; left: 0; width: fit-content; height: 29px; line-height: 30px; font-size: var(--form-fs); text-align: center; border-radius: 0 !important; }
input[type="radio"].buttonradio + label::before { border: none; padding: 0; color: var(--form-ele); background: var(--color-white); }
input[type="radio"].buttonradio + label::after { border: none; padding: 0 10px 0 0; color: var(--form-ele); background: var(--color-white); }
input[type="radio"].buttonradio:checked + label::before { border: none; padding: 0; background: var(--secondary-color); color: var(--color-white); }
input[type="radio"].buttonradio:checked + label::after { border: none; padding: 0 10px 0 0; background: var(--secondary-color); color: var(--color-white); }

/* Checks Checked */
input[type="checkbox"]:checked + label::before { background: transparent; border-color: transparent; }
input[type="checkbox"] + label::after { transform: scale(0); }
input[type="checkbox"]:checked + label::after { transform: scale(1); }
/* Checks Transition */
input[type="checkbox"] + label::before, input[type="checkbox"] + label::after { transition: .25s all ease; }
/* Radio */
input[type="radio"] + label::before, input[type="radio"] + label::after { position: absolute; top: 2px; left: 0; display: block; width: 14px; height: 14px; }
input[type="radio"] { position: absolute; opacity: 0; z-index: -1; }
input[type="radio"] + label { font-weight: var(--fw-base); text-transform: none; position: relative; display: inline-block; font-family: var(--form-ff); color: var(--primary-color); font-size: var(--form-fs); line-height: 1.4rem; padding: 0 0 0 28px; cursor: pointer; width: fit-content; }
input[type="radio"] + label::before { content: " "; border: 1px solid var(--form-ele); border-radius: 20%; }
input[type="radio"] + label::before { border-radius: 50%; }
input[type=radio] + label::after { content: " "; top: 2px; left: 0; width: 14px; height: 14px; background: var(--secondary-color); border: 1px solid var(--secondary-color); border-radius: 50%; }
/* Radio Checked */
input[type="radio"]:checked + label::before { background: transparent; border-color: transparent; }
input[type=radio] + label::after { transform: scale(0); }
input[type=radio]:checked + label::after { transform: scale(1); }
/* Type Date */
input[type="date"] { position: relative; text-indent: 4px !important; background-image: linear-gradient(to right, #ccc, #ccc), url('data:image/svg+xml;utf8,<svg width="100%" height="100%" viewBox="0 0 641 641" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"> <g transform="matrix(1,0,0,1,-2738.21,-818.139)"> <g transform="matrix(1,0,0,1,-0.807646,0.384468)"> <g transform="matrix(5.20597,0,0,5.20597,2739.52,818.255)"> <path d="M81.61,4.73C81.61,2.12 84.19,0 87.38,0C90.57,0 93.15,2.12 93.15,4.73L93.15,25.45C93.15,28.06 90.57,30.18 87.38,30.18C84.19,30.18 81.61,28.06 81.61,25.45L81.61,4.73ZM66.11,105.66C65.31,105.66 65.31,95.56 66.11,95.56L81.9,95.56C82.7,95.56 82.7,105.66 81.9,105.66L66.11,105.66ZM15.85,68.94C15.05,68.94 15.05,58.84 15.85,58.84L31.64,58.84C32.44,58.84 32.44,68.94 31.64,68.94L15.85,68.94ZM40.98,68.94C40.18,68.94 40.18,58.84 40.98,58.84L56.77,58.84C57.57,58.84 57.57,68.94 56.77,68.94L40.98,68.94ZM66.11,68.94C65.31,68.94 65.31,58.84 66.11,58.84L81.9,58.84C82.7,58.84 82.7,68.94 81.9,68.94L66.11,68.94ZM91.25,58.84L107,58.84C107.8,58.84 107.8,68.94 107,68.94L91.25,68.94C90.45,68.94 90.45,58.84 91.25,58.84ZM15.85,87.3C15.05,87.3 15.05,77.2 15.85,77.2L31.64,77.2C32.44,77.2 32.44,87.3 31.64,87.3L15.85,87.3ZM41,87.3C40.2,87.3 40.2,77.2 41,77.2L56.77,77.2C57.57,77.2 57.57,87.3 56.77,87.3L41,87.3ZM66.13,87.3C65.33,87.3 65.33,77.2 66.13,77.2L81.9,77.2C82.7,77.2 82.7,87.3 81.9,87.3L66.13,87.3ZM91.27,87.3C90.47,87.3 90.47,77.2 91.27,77.2L107,77.2C107.8,77.2 107.8,87.3 107,87.3L91.27,87.3ZM15.87,105.66C15.07,105.66 15.07,95.56 15.87,95.56L31.64,95.56C32.44,95.56 32.44,105.66 31.64,105.66L15.87,105.66ZM41,105.66C40.2,105.66 40.2,95.56 41,95.56L56.77,95.56C57.57,95.56 57.57,105.66 56.77,105.66L41,105.66ZM29.61,4.73C29.61,2.12 32.19,0 35.38,0C38.57,0 41.15,2.12 41.15,4.73L41.15,25.45C41.15,28.06 38.57,30.18 35.38,30.18C32.19,30.18 29.61,28.06 29.61,25.45L29.61,4.73ZM6.4,43.47L116.47,43.47L116.47,21.47C116.462,20.695 116.153,19.953 115.61,19.4C115.062,18.85 114.317,18.54 113.54,18.54L103,18.54C101.245,18.54 99.8,17.095 99.8,15.34C99.8,13.585 101.245,12.14 103,12.14L113.55,12.14C118.662,12.156 122.864,16.358 122.88,21.47L122.88,113.56C122.864,118.672 118.662,122.874 113.55,122.89L9.33,122.89C4.214,122.874 0.011,118.666 0,113.55L0,21.47C0.016,16.358 4.218,12.156 9.33,12.14L20.6,12.14C22.355,12.14 23.8,13.585 23.8,15.34C23.8,17.095 22.355,18.54 20.6,18.54L9.33,18.54C8.555,18.548 7.813,18.857 7.26,19.4C6.71,19.948 6.4,20.693 6.4,21.47L6.4,43.47ZM116.48,49.88L6.4,49.88L6.4,113.55C6.408,114.325 6.717,115.067 7.26,115.62C7.808,116.17 8.553,116.48 9.33,116.48L113.55,116.48C114.325,116.472 115.067,116.163 115.62,115.62C116.17,115.072 116.48,114.327 116.48,113.55L116.48,49.88ZM50.43,18.54C48.675,18.54 47.23,17.095 47.23,15.34C47.23,13.585 48.675,12.14 50.43,12.14L71.92,12.14C73.675,12.14 75.12,13.585 75.12,15.34C75.12,17.095 73.675,18.54 71.92,18.54L50.43,18.54Z" style="fill:rgb(157,155,155);fill-rule:nonzero;stroke:rgb(157,155,155);stroke-width:0.19px;"/> </g> </g> </g> </svg>'); background-position: calc(100% - 37px) 10px, calc(100% - 9px) 10px; background-size: 1px 20px, 20px 20px; background-repeat: no-repeat; font-family: var(--form-ff); font-size: var(--form-fs); width: 100%; -webkit-appearance: none; margin: 0 !important; padding: 0 !important; box-sizing: border-box; background-color: var(--form-bgcolor); height: var(--form-input-h); border-radius: var(--form-borderradius); border: var(--form-border); color: var(--primary-color); -webkit-appearance: none !important; -webkit-border-radius: 0 !important; }
input[type="date"]::-webkit-clear-button { display: none; }
input[type="date"]::-webkit-inner-spin-button { display: none; }
input[type="date"]::-webkit-inner-spin-button { display: none; }
input[type="date"]::-webkit-calendar-picker-indicator { background-position: right; background-size: auto; background: transparent; cursor: pointer; position: absolute; bottom: 0; left: 0; right: 0; top: 0; width: 100%; height: var(--form-input-h); }
/* Remove arrows from type number */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }
/* Type File */
input[type="file"] { display: none; }
.custom-file-upload { display: inline-block; margin: 0; padding: 12px 18px; color: var(--bt-color); background: var(--bt-color-bck); min-width: 120px; max-width: inherit; width: auto; height: auto; border: 1px solid var(--bt-color-bck); border-radius: var(--bt-br); transition: 0.5s; text-transform: uppercase; text-decoration: none; text-align: center; font-size: var(--bt-fs); font-family: var(--ff-base); font-weight: var(--fw-base); cursor: pointer; }
.custom-file-upload:hover { color: var(--bt-color-hover) !important; background: var(--bt-color-bck-hover) !important; border: 1px solid var(--bt-color-bck-hover); text-decoration: none;  }
#inputFilename { display: inline-block; position: absolute; top: 28px; left: 150px; font-size: 12px; }

/* Custom KS Multi Select */
.ks-multiselect-btn { position: relative; font-family: var(--form-ff); font-size: 13px; text-transform: uppercase; text-align: left; padding: 10px;padding-right: 60px; height: var(--form-input-h); box-sizing: border-box; cursor: pointer; margin: 0 !important; background-color: var(--form-bgcolor); border-radius: var(--form-borderradius); border: var(--form-border); color: var(--primary-color); background-image: url("data:image/svg+xml,<svg width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path fill='%23545454' d='m0,6l12,12l12,-12l-24,0z'/><path fill='none' d='m0,0l24,0l0,24l-24,0l0,-24z'/></svg>"), linear-gradient(to right, #ccc, #ccc); background-position: calc(100% - 11px), calc(100% - 32px) 10px; background-size: 12px 12px, 2px 20px; background-repeat: no-repeat; }
.ks-multiselect-btn:hover { color: var(--primary-color); background-image: url("data:image/svg+xml,<svg width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path fill='%23545454' d='m0,6l12,12l12,-12l-24,0z'/><path fill='none' d='m0,0l24,0l0,24l-24,0l0,-24z'/></svg>"), linear-gradient(to right, #ccc, #ccc); background-position: calc(100% - 11px), calc(100% - 32px) 10px; background-size: 12px 12px, 2px 20px; background-repeat: no-repeat; background-color: var(--color-light-grey); }
.ks-multiselect-btn:disabled { background-color: #D9D9D9; pointer-events: none; }
.ks-multiselect-btn .ks-multiselect-clear-btn { position: absolute; right: 40px; top: 9px; width: 20px; height: 20px; cursor: pointer; rotate: -45deg; }
.ks-multiselect-btn .ks-multiselect-clear-btn:after { content: ''; position: absolute; transform: translate(-50%, -50%); height: 2px; width: 50%; background-color: var(--form-ele); top: 50%; left: 50%; }
.ks-multiselect-btn .ks-multiselect-clear-btn:before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: var(--form-ele); height: 50%; width: 2px; }
.ks-multiselect-btn .ks-multiselect-clear-btn:hover:before { background-color: var(--alert-color); }
.ks-multiselect-btn .ks-multiselect-clear-btn:hover:after { background-color: var(--alert-color); }
.ks-multiselect-contents { display: none; z-index: 2; text-align: left; min-width: 178px !important; max-width: 94% !important; max-height: 350px; overflow-y: auto; overflow-x: hidden; position: absolute; top: 39px; left: 0; background-color: var(--form-bgcolor); padding: 0; border: var(--form-border); color: var(--primary-color); }
.ks-multiselect-contents.show { display: block; }
.ks-multiselect-selection { padding: 0 10px 5px 10px; font-size: 13px; font-weight: var(--fw-medium); }
.ks-multiselect-selection a { display: inline-block; padding: 0 5px 0 0; }
.ks-multiselect-selection a:last-of-type { padding: 0 0 0 5px; }
.ks-multiselect-check { padding: 5px 10px; font-size: 13px; cursor: pointer; text-transform: uppercase; }
.ks-multiselect-check:hover { background-color: var(--color-light-blue); }
.ks-multiselect-check input[type="checkbox"] + label::before, .ks-multiselect-check input[type="checkbox"] + label::after { width: 16px; height: 16px; }
.ks-multiselect-check input[type="checkbox"] + label::after { line-height: 16px; }
.ks-multiselect-check input[type="checkbox"] + label { width: 85%; word-wrap: break-word; color: var(--primary-color); font-size: 13px !important; padding: 0 0 0 24px; line-height: 16px; }
.ks-multiselect-seach { padding: 10px !important; }
.ks-multiselect-seach input { height: 22px; line-height: 22px; font-size: 13px; text-indent: 6px !important; }
.ks-multiselect-seach input::placeholder { font-size: 13px; }
.ks-multiselect-seach input::-ms-input-placeholder { font-size: 13px; }
.ks-multiselect-seach input:-moz-placeholder { font-size: 13px; }
.ks-multiselect-seach input::-moz-placeholder { font-size: 13px; }
.ks-multiselect-seach input::-webkit-input-placeholder { font-size: 13px; }
.ks-multiselect-check.ks-multiselect-disabled { background-color: #D9D9D9; pointer-events: none; }
.ks-multiselect-check.ks-multiselect-disabled input[type="checkbox"] + label { color: #A6A6A6; }

/* Dark theme for KS multiselect */
html.theme-dark .ks-multiselect-btn {
    background-color: #374151 !important;
    color: #ffffff !important;
    border: 1px solid #4B5563 !important;
    background-image: url("data:image/svg+xml,<svg width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path fill='%23FFFFFF' d='m0,6l12,12l12,-12l-24,0z'/><path fill='none' d='m0,0l24,0l0,24l-24,0l0,-24z'/></svg>"), linear-gradient(to right, #4B5563, #4B5563) !important;
}

html.theme-dark .ks-multiselect-contents {
    background-color: #374151 !important;
    color: #ffffff !important;
    border: 1px solid #4B5563 !important;
}

html.theme-dark .ks-multiselect-check input[type="checkbox"] + label {
    color: #ffffff !important;
}

html.theme-dark .ks-multiselect-check input[type="checkbox"] + label::before {
    border-color: #4B5563 !important;
}

html.theme-dark .ks-multiselect-check input[type="checkbox"] + label::after {
    color: #ffffff !important;
    border-color: #4B5563 !important;
}

html.theme-dark .ks-multiselect-check:hover {
    background-color: #4B5563 !important;
}

html.theme-dark .ks-multiselect-btn .ks-multiselect-clear-btn:after,
html.theme-dark .ks-multiselect-btn .ks-multiselect-clear-btn:before {
    background-color: #ffffff !important;
}