/*.form-label {
    display: inline-block;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    margin-bottom: 8px;
    margin-right:4px;
}

.required::before {
    content: "*";
    color: var(--red-bud);
    margin-right: 4px;
}*/

/*INPUT*/
.form-label {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
}
.form-label > span{
    display:flex;
    align-items:center;
}

.required::before {
    content: "* ";
    color: var(--danger-color);
}

.input-custom {
    -webkit-appearance: none;
    background-color: var(--white);
    color: var(--text-color-main);
    /*border*/
    border-radius: var(--border-radius-default);
    border: none;
    outline: 1px solid var(--color-grey-light);
    outline-offset: -1px;
    /*typography*/
    font-size: var(--font-size-medium);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 110px; /*select options dropdown menu will therefore have same min width*/
    /*layout*/
    padding: 12px;
    height: 40px;
    width: 100%;
    transition: outline-color 0.5s ease;
}

.input-sm {
    /*layout*/
    padding: 8px;
    height: 36px;
}

@media (max-width: 768px) {
    .input-custom {
        /*layout*/
        padding: 8px;
        height: 36px;
    }

    .input-sm {
        /*layout*/
        padding: 6px 8px;
        height: 32px;
    }
}

.input-custom:hover, .textarea-custom:hover {
    outline: 1px solid var(--color-grey-dark);
}

.input-custom:focus, .textarea-custom:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

.info-text {
    margin-top: 8px;
    margin-bottom: 0px;
    color: var(--text-color-subdued);
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    font-weight: var(--font-weight-light);
}

.input-custom.error, .textarea-custom.error {
    outline: 2px solid var(--danger-color);
    outline-offset: -2px;
}

.error-message {
    display: none;
    margin-top: 8px;
    margin-bottom: 0px;
    color: var(--danger-color);
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    font-weight: var(--font-weight-light);
}

.input-custom.error ~ .error-message, .textarea-custom.error ~ .error-message {
    display: block;
}


input::placeholder,
textarea::placeholder { /* For most browsers */
    color: var(--text-color-subdued);
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder { /*For Microsoft Edge */
    color: var(--text-color-subdued);
}

input::-moz-placeholder,
textarea::-moz-placeholder { /*For Mozilla Firefox */
    color: var(--text-color-subdued);
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { /*For Safari and Chrome*/
    color: var(--text-color-subdued);
}


/*TEXT AREA*/
.textarea-custom {
    -webkit-appearance: none;
    background-color: var(--white);
    color: var(--text-color-main);
    /*border*/
    border-radius: var(--border-radius-default);
    border: none;
    outline: 1px solid var(--color-grey-light);
    outline-offset: -1px;
    /*typography*/
    font-size: var(--font-size-medium);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-light);
    /*layout*/
    padding: 10px;
    width: 100%;
    resize: none;
    overflow: auto;
    vertical-align: bottom; /*removes the extra space (inserted by browser) below text area*/
    transition: outline-color 0.5s ease;
    min-height: 40px; /*for resizable*/
}

.textarea-scrollbar {
    border-right: 4px solid transparent;
    padding-right: 0px;
    overflow-y: scroll;
}

.textarea-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.textarea-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(var(--rgb-os-bg),0.44);
    border-radius: var(--border-radius-round);
    cursor:default;
}
.textarea-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(var(--rgb-os-bg),0.55);
}
 .textarea-scrollbar::-webkit-scrollbar-thumb:active {
    background-color: rgba(var(--rgb-os-bg),0.66);
}

.resize-vertical {
    resize: vertical;
}

.resize-vertical.textarea-scrollbar {
    overflow: hidden;
}

/*bootstrap setting*/
/*textarea.input-custom {
    height: auto;
    resize: vertical;
    overflow: auto;
}*/

/*TEXTAREA WITH COUNTER STYLING*/
.textarea-custom-container > div > div {
    border-top: 1px solid var(--color-grey-light);
    padding: 8px 0px 12px 0px;
    display: flex;
}

.textarea-custom-container > div {
    padding: 0px 12px;
}

.textarea-custom-container {
    outline: 1px solid var(--color-grey-light);
    transition: outline-color 0.5s ease;
    border-radius: var(--border-radius-default);
}

.textarea-custom-container .textarea-custom {
    outline: 0px solid var(--color-grey-light);
    padding: 12px 2px 8px 12px
}

.textarea-custom-container > div > div > div {
    margin-left: auto;
}

.textarea-custom-container > div > div span {
    color: var(--text-color-subdued);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-small);
}

.textarea-custom-container:hover {
    outline: 1px solid var(--color-grey-dark);
}

.textarea-custom-container:focus-within {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}


/*SEARCH*/
input[type=search].search-custom {
    --icon-size: 20px;
    -webkit-appearance: none;
    background-color: var(--white);
    color: var(--text-color-main);
    /*border*/
    border-radius: var(--border-radius-default);
    border: none;
    outline: 1px solid var(--color-grey-light);
    outline-offset: -1px;
    /*magnifying glass icon*/
    background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="%23717171" d="M17.9422 17.0578L14.0305 13.1469C15.1642 11.7857 15.7296 10.0398 15.6089 8.27244C15.4883 6.50506 14.6909 4.85223 13.3826 3.65779C12.0744 2.46334 10.356 1.81926 8.58492 1.85951C6.81388 1.89976 5.12653 2.62125 3.87389 3.87389C2.62125 5.12653 1.89976 6.81388 1.85951 8.58492C1.81926 10.356 2.46334 12.0744 3.65779 13.3826C4.85223 14.6909 6.50506 15.4883 8.27244 15.6089C10.0398 15.7296 11.7857 15.1642 13.1469 14.0305L17.0578 17.9422C17.1159 18.0003 17.1848 18.0463 17.2607 18.0777C17.3366 18.1092 17.4179 18.1253 17.5 18.1253C17.5821 18.1253 17.6634 18.1092 17.7393 18.0777C17.8152 18.0463 17.8841 18.0003 17.9422 17.9422C18.0003 17.8841 18.0463 17.8152 18.0777 17.7393C18.1092 17.6634 18.1253 17.5821 18.1253 17.5C18.1253 17.4179 18.1092 17.3366 18.0777 17.2607C18.0463 17.1848 18.0003 17.1159 17.9422 17.0578ZM3.125 8.75C3.125 7.63748 3.4549 6.54994 4.07298 5.62491C4.69106 4.69989 5.56957 3.97892 6.5974 3.55317C7.62524 3.12743 8.75624 3.01604 9.84738 3.23308C10.9385 3.45012 11.9408 3.98585 12.7275 4.77252C13.5141 5.55919 14.0499 6.56147 14.2669 7.65261C14.484 8.74376 14.3726 9.87475 13.9468 10.9026C13.5211 11.9304 12.8001 12.8089 11.8751 13.427C10.9501 14.0451 9.86252 14.375 8.75 14.375C7.25866 14.3733 5.82888 13.7802 4.77435 12.7256C3.71981 11.6711 3.12665 10.2413 3.125 8.75Z" /></svg>');
    background-size: var(--icon-size);
    background-position: 8px;
    background-repeat: no-repeat;
    /*typography*/
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    font-weight: var(--font-weight-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /*layout*/
    padding: 6px 8px 6px calc(8px + var(--icon-size) + 8px);
    height: 32px;
    width: 100%;
    transition: outline-color 0.5s ease;
}

[data-mode=dark] input[type=search].search-custom {
    background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="%23BDBDBD" d="M17.9422 17.0578L14.0305 13.1469C15.1642 11.7857 15.7296 10.0398 15.6089 8.27244C15.4883 6.50506 14.6909 4.85223 13.3826 3.65779C12.0744 2.46334 10.356 1.81926 8.58492 1.85951C6.81388 1.89976 5.12653 2.62125 3.87389 3.87389C2.62125 5.12653 1.89976 6.81388 1.85951 8.58492C1.81926 10.356 2.46334 12.0744 3.65779 13.3826C4.85223 14.6909 6.50506 15.4883 8.27244 15.6089C10.0398 15.7296 11.7857 15.1642 13.1469 14.0305L17.0578 17.9422C17.1159 18.0003 17.1848 18.0463 17.2607 18.0777C17.3366 18.1092 17.4179 18.1253 17.5 18.1253C17.5821 18.1253 17.6634 18.1092 17.7393 18.0777C17.8152 18.0463 17.8841 18.0003 17.9422 17.9422C18.0003 17.8841 18.0463 17.8152 18.0777 17.7393C18.1092 17.6634 18.1253 17.5821 18.1253 17.5C18.1253 17.4179 18.1092 17.3366 18.0777 17.2607C18.0463 17.1848 18.0003 17.1159 17.9422 17.0578ZM3.125 8.75C3.125 7.63748 3.4549 6.54994 4.07298 5.62491C4.69106 4.69989 5.56957 3.97892 6.5974 3.55317C7.62524 3.12743 8.75624 3.01604 9.84738 3.23308C10.9385 3.45012 11.9408 3.98585 12.7275 4.77252C13.5141 5.55919 14.0499 6.56147 14.2669 7.65261C14.484 8.74376 14.3726 9.87475 13.9468 10.9026C13.5211 11.9304 12.8001 12.8089 11.8751 13.427C10.9501 14.0451 9.86252 14.375 8.75 14.375C7.25866 14.3733 5.82888 13.7802 4.77435 12.7256C3.71981 11.6711 3.12665 10.2413 3.125 8.75Z" /></svg>');
}
[data-theme=blue] input[type=search].search-custom {
    background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="%237D85AB" d="M17.9422 17.0578L14.0305 13.1469C15.1642 11.7857 15.7296 10.0398 15.6089 8.27244C15.4883 6.50506 14.6909 4.85223 13.3826 3.65779C12.0744 2.46334 10.356 1.81926 8.58492 1.85951C6.81388 1.89976 5.12653 2.62125 3.87389 3.87389C2.62125 5.12653 1.89976 6.81388 1.85951 8.58492C1.81926 10.356 2.46334 12.0744 3.65779 13.3826C4.85223 14.6909 6.50506 15.4883 8.27244 15.6089C10.0398 15.7296 11.7857 15.1642 13.1469 14.0305L17.0578 17.9422C17.1159 18.0003 17.1848 18.0463 17.2607 18.0777C17.3366 18.1092 17.4179 18.1253 17.5 18.1253C17.5821 18.1253 17.6634 18.1092 17.7393 18.0777C17.8152 18.0463 17.8841 18.0003 17.9422 17.9422C18.0003 17.8841 18.0463 17.8152 18.0777 17.7393C18.1092 17.6634 18.1253 17.5821 18.1253 17.5C18.1253 17.4179 18.1092 17.3366 18.0777 17.2607C18.0463 17.1848 18.0003 17.1159 17.9422 17.0578ZM3.125 8.75C3.125 7.63748 3.4549 6.54994 4.07298 5.62491C4.69106 4.69989 5.56957 3.97892 6.5974 3.55317C7.62524 3.12743 8.75624 3.01604 9.84738 3.23308C10.9385 3.45012 11.9408 3.98585 12.7275 4.77252C13.5141 5.55919 14.0499 6.56147 14.2669 7.65261C14.484 8.74376 14.3726 9.87475 13.9468 10.9026C13.5211 11.9304 12.8001 12.8089 11.8751 13.427C10.9501 14.0451 9.86252 14.375 8.75 14.375C7.25866 14.3733 5.82888 13.7802 4.77435 12.7256C3.71981 11.6711 3.12665 10.2413 3.125 8.75Z" /></svg>');
}
[data-theme=blue][data-mode=dark] input[type=search].search-custom {
    background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="%23CED4E6" d="M17.9422 17.0578L14.0305 13.1469C15.1642 11.7857 15.7296 10.0398 15.6089 8.27244C15.4883 6.50506 14.6909 4.85223 13.3826 3.65779C12.0744 2.46334 10.356 1.81926 8.58492 1.85951C6.81388 1.89976 5.12653 2.62125 3.87389 3.87389C2.62125 5.12653 1.89976 6.81388 1.85951 8.58492C1.81926 10.356 2.46334 12.0744 3.65779 13.3826C4.85223 14.6909 6.50506 15.4883 8.27244 15.6089C10.0398 15.7296 11.7857 15.1642 13.1469 14.0305L17.0578 17.9422C17.1159 18.0003 17.1848 18.0463 17.2607 18.0777C17.3366 18.1092 17.4179 18.1253 17.5 18.1253C17.5821 18.1253 17.6634 18.1092 17.7393 18.0777C17.8152 18.0463 17.8841 18.0003 17.9422 17.9422C18.0003 17.8841 18.0463 17.8152 18.0777 17.7393C18.1092 17.6634 18.1253 17.5821 18.1253 17.5C18.1253 17.4179 18.1092 17.3366 18.0777 17.2607C18.0463 17.1848 18.0003 17.1159 17.9422 17.0578ZM3.125 8.75C3.125 7.63748 3.4549 6.54994 4.07298 5.62491C4.69106 4.69989 5.56957 3.97892 6.5974 3.55317C7.62524 3.12743 8.75624 3.01604 9.84738 3.23308C10.9385 3.45012 11.9408 3.98585 12.7275 4.77252C13.5141 5.55919 14.0499 6.56147 14.2669 7.65261C14.484 8.74376 14.3726 9.87475 13.9468 10.9026C13.5211 11.9304 12.8001 12.8089 11.8751 13.427C10.9501 14.0451 9.86252 14.375 8.75 14.375C7.25866 14.3733 5.82888 13.7802 4.77435 12.7256C3.71981 11.6711 3.12665 10.2413 3.125 8.75Z" /></svg>');
}


input[type=search].search-custom:hover {
    outline: 1px solid var(--color-grey-dark);
}

input[type=search].search-custom:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

input[type=search].search-custom::-webkit-search-cancel-button {
    --icon-size: 16px;
    -webkit-appearance: none;
    cursor: pointer;
    height: var(--icon-size);
    width: var(--icon-size);
    -webkit-mask-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.854 12.1465C12.9005 12.193 12.9373 12.2481 12.9625 12.3088C12.9876 12.3695 13.0006 12.4346 13.0006 12.5003C13.0006 12.566 12.9876 12.631 12.9625 12.6917C12.9373 12.7524 12.9005 12.8076 12.854 12.854C12.8076 12.9005 12.7524 12.9373 12.6917 12.9625C12.631 12.9876 12.566 13.0006 12.5003 13.0006C12.4346 13.0006 12.3695 12.9876 12.3088 12.9625C12.2481 12.9373 12.193 12.9005 12.1465 12.854L8.00028 8.70715L3.85403 12.854C3.76021 12.9478 3.63296 13.0006 3.50028 13.0006C3.3676 13.0006 3.24035 12.9478 3.14653 12.854C3.05271 12.7602 3 12.633 3 12.5003C3 12.3676 3.05271 12.2403 3.14653 12.1465L7.2934 8.00028L3.14653 3.85403C3.05271 3.76021 3 3.63296 3 3.50028C3 3.3676 3.05271 3.24035 3.14653 3.14653C3.24035 3.05271 3.3676 3 3.50028 3C3.63296 3 3.76021 3.05271 3.85403 3.14653L8.00028 7.2934L12.1465 3.14653C12.2403 3.05271 12.3676 3 12.5003 3C12.633 3 12.7602 3.05271 12.854 3.14653C12.9478 3.24035 13.0006 3.3676 13.0006 3.50028C13.0006 3.63296 12.9478 3.76021 12.854 3.85403L8.70715 8.00028L12.854 12.1465Z" fill="%23212121"/></svg>');
    mask-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.854 12.1465C12.9005 12.193 12.9373 12.2481 12.9625 12.3088C12.9876 12.3695 13.0006 12.4346 13.0006 12.5003C13.0006 12.566 12.9876 12.631 12.9625 12.6917C12.9373 12.7524 12.9005 12.8076 12.854 12.854C12.8076 12.9005 12.7524 12.9373 12.6917 12.9625C12.631 12.9876 12.566 13.0006 12.5003 13.0006C12.4346 13.0006 12.3695 12.9876 12.3088 12.9625C12.2481 12.9373 12.193 12.9005 12.1465 12.854L8.00028 8.70715L3.85403 12.854C3.76021 12.9478 3.63296 13.0006 3.50028 13.0006C3.3676 13.0006 3.24035 12.9478 3.14653 12.854C3.05271 12.7602 3 12.633 3 12.5003C3 12.3676 3.05271 12.2403 3.14653 12.1465L7.2934 8.00028L3.14653 3.85403C3.05271 3.76021 3 3.63296 3 3.50028C3 3.3676 3.05271 3.24035 3.14653 3.14653C3.24035 3.05271 3.3676 3 3.50028 3C3.63296 3 3.76021 3.05271 3.85403 3.14653L8.00028 7.2934L12.1465 3.14653C12.2403 3.05271 12.3676 3 12.5003 3C12.633 3 12.7602 3.05271 12.854 3.14653C12.9478 3.24035 13.0006 3.3676 13.0006 3.50028C13.0006 3.63296 12.9478 3.76021 12.854 3.85403L8.70715 8.00028L12.854 12.1465Z" fill="%23212121"/></svg>');
    background-color: var(--black);
    z-index: 6000;
    pointer-events: all;
}

.search-custom-group .dropdown-menu {
    left: 0px !important;
    right: 0px !important;
}

.search-custom-group .dropdown-item::before {
    --icon-size: 20px;
    content: "";
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M17.9422 17.0578L14.0305 13.1469C15.1642 11.7857 15.7296 10.0398 15.6089 8.27244C15.4883 6.50506 14.6909 4.85223 13.3826 3.65779C12.0744 2.46334 10.356 1.81926 8.58492 1.85951C6.81388 1.89976 5.12653 2.62125 3.87389 3.87389C2.62125 5.12653 1.89976 6.81388 1.85951 8.58492C1.81926 10.356 2.46334 12.0744 3.65779 13.3826C4.85223 14.6909 6.50506 15.4883 8.27244 15.6089C10.0398 15.7296 11.7857 15.1642 13.1469 14.0305L17.0578 17.9422C17.1159 18.0003 17.1848 18.0463 17.2607 18.0777C17.3366 18.1092 17.4179 18.1253 17.5 18.1253C17.5821 18.1253 17.6634 18.1092 17.7393 18.0777C17.8152 18.0463 17.8841 18.0003 17.9422 17.9422C18.0003 17.8841 18.0463 17.8152 18.0777 17.7393C18.1092 17.6634 18.1253 17.5821 18.1253 17.5C18.1253 17.4179 18.1092 17.3366 18.0777 17.2607C18.0463 17.1848 18.0003 17.1159 17.9422 17.0578ZM3.125 8.75C3.125 7.63748 3.4549 6.54994 4.07298 5.62491C4.69106 4.69989 5.56957 3.97892 6.5974 3.55317C7.62524 3.12743 8.75624 3.01604 9.84738 3.23308C10.9385 3.45012 11.9408 3.98585 12.7275 4.77252C13.5141 5.55919 14.0499 6.56147 14.2669 7.65261C14.484 8.74376 14.3726 9.87475 13.9468 10.9026C13.5211 11.9304 12.8001 12.8089 11.8751 13.427C10.9501 14.0451 9.86252 14.375 8.75 14.375C7.25866 14.3733 5.82888 13.7802 4.77435 12.7256C3.71981 11.6711 3.12665 10.2413 3.125 8.75Z" fill="%23717171"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M17.9422 17.0578L14.0305 13.1469C15.1642 11.7857 15.7296 10.0398 15.6089 8.27244C15.4883 6.50506 14.6909 4.85223 13.3826 3.65779C12.0744 2.46334 10.356 1.81926 8.58492 1.85951C6.81388 1.89976 5.12653 2.62125 3.87389 3.87389C2.62125 5.12653 1.89976 6.81388 1.85951 8.58492C1.81926 10.356 2.46334 12.0744 3.65779 13.3826C4.85223 14.6909 6.50506 15.4883 8.27244 15.6089C10.0398 15.7296 11.7857 15.1642 13.1469 14.0305L17.0578 17.9422C17.1159 18.0003 17.1848 18.0463 17.2607 18.0777C17.3366 18.1092 17.4179 18.1253 17.5 18.1253C17.5821 18.1253 17.6634 18.1092 17.7393 18.0777C17.8152 18.0463 17.8841 18.0003 17.9422 17.9422C18.0003 17.8841 18.0463 17.8152 18.0777 17.7393C18.1092 17.6634 18.1253 17.5821 18.1253 17.5C18.1253 17.4179 18.1092 17.3366 18.0777 17.2607C18.0463 17.1848 18.0003 17.1159 17.9422 17.0578ZM3.125 8.75C3.125 7.63748 3.4549 6.54994 4.07298 5.62491C4.69106 4.69989 5.56957 3.97892 6.5974 3.55317C7.62524 3.12743 8.75624 3.01604 9.84738 3.23308C10.9385 3.45012 11.9408 3.98585 12.7275 4.77252C13.5141 5.55919 14.0499 6.56147 14.2669 7.65261C14.484 8.74376 14.3726 9.87475 13.9468 10.9026C13.5211 11.9304 12.8001 12.8089 11.8751 13.427C10.9501 14.0451 9.86252 14.375 8.75 14.375C7.25866 14.3733 5.82888 13.7802 4.77435 12.7256C3.71981 11.6711 3.12665 10.2413 3.125 8.75Z" fill="%23717171"/></svg>');
    background-color: var(--text-color-subdued);
    width: var(--icon-size);
    height: var(--icon-size);
}

.search-recent-header {
    padding: 12px;
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    color: var(--text-color-subdued);
}

.search-result-header {
    padding: 8px;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    color: var(--text-color-subdued);
    border-bottom: 0.5px solid var(--color-grey-medium);
}


/*CHECKBOX*/
.checkbox-group, .radio-group, .switch-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.checkbox-label, .radio-label, .switch-label {
    font-size: var(--font-size-medium);
    line-height: var(--line-height-default);
    font-weight: var(--font-weight-light);
}

input[type=checkbox].checkbox {
    --checkbox-size: 16px;
    --checkbox-surround-size: 4px;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    accent-color: var(--checkbox-color);
    cursor: pointer;
}
input[type=checkbox].checkbox {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    outline: 1px solid var(--color-grey-medium);
    outline-offset: -1px;
    border-radius: var(--border-radius-small);
    margin: var(--checkbox-surround-size);
    transition: outline 0.5s ease;
}

input[type=checkbox].checkbox::after {
    content: "";
    display: block;
    width: calc(var(--checkbox-size) + 2 * var(--checkbox-surround-size));
    height: calc(var(--checkbox-size) + 2 * var(--checkbox-surround-size));
    position: absolute;
    margin-left: calc(0px - var(--checkbox-surround-size));
    margin-top: calc(0px - var(--checkbox-surround-size));
    border-radius: var(--border-radius-small);
    transition: background-color 0.5s ease;
}

input[type=checkbox].checkbox:hover,
input[type=checkbox].checkbox:focus-visible {
    outline: 1px solid var(--text-color-subdued);
}

input[type=checkbox].checkbox:hover::after,
input[type=checkbox].checkbox:focus-visible::after {
    background-color: var(--rgba-hover-light);
}


input[type=checkbox].checkbox:checked {
    position: relative;
    outline: 1px solid var(--checkbox-color);
    background-color: var(--checkbox-color);
}
input[type=checkbox].checkbox:checked::before {
    content: "";
    mask-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"> <path d="M10.7655 3.64052L4.76552 9.64052C4.73069 9.67539 4.68934 9.70305 4.64381 9.72192C4.59829 9.74079 4.54949 9.7505 4.50021 9.7505C4.45093 9.7505 4.40213 9.74079 4.35661 9.72192C4.31108 9.70305 4.26972 9.67539 4.2349 9.64052L1.6099 7.01552C1.53953 6.94516 1.5 6.84972 1.5 6.75021C1.5 6.6507 1.53953 6.55526 1.6099 6.4849C1.68026 6.41453 1.7757 6.375 1.87521 6.375C1.97472 6.375 2.07016 6.41453 2.14052 6.4849L4.50021 8.84505L10.2349 3.1099C10.3053 3.03953 10.4007 3 10.5002 3C10.5997 3 10.6952 3.03953 10.7655 3.1099C10.8359 3.18026 10.8754 3.2757 10.8754 3.37521C10.8754 3.47472 10.8359 3.57016 10.7655 3.64052Z" fill="white"/> </svg>');
    background-color: var(--white);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: calc(var(--checkbox-size) - 4px); /*12px*/
    display: block;
    position: absolute;
    width: inherit;
    height: inherit;
}


input[type=checkbox].checkbox:checked:hover::after,
input[type=checkbox].checkbox:checked:focus-visible::after {
    background-color: var(--checkbox-surround-hover);
}

.checkbox-primary {
    --checkbox-color: var(--primary-color);
    --checkbox-surround-hover: rgba(var(--primary-color-rgb), 0.12);
}

.checkbox-secondary {
    --checkbox-color: var(--crimson-blaze);
    --checkbox-surround-hover: rgba(var(--secondary-color-rgb), 0.12);
}

input[type=checkbox]:disabled {
    pointer-events: none;
    opacity: 0.6;
}

input[type=checkbox]:disabled ~ label {
    pointer-events: none;
}

input[type=checkbox]:checked:disabled {
    opacity: 0.4;
}


/*SWITCH*/
input[type=checkbox].switch {
    --switch-height: 16px;
    appearance: none;
    -webkit-appearance: none;
    height: var(--switch-height);
    width: calc(2 * var(--switch-height));
    background-color: var(--color-grey-dark);
    border-radius: var(--border-radius-round);
    cursor: pointer;
    position: relative;
    transition: background-color 0.8s var(--animation-spring-gentle);
}

input[type=checkbox].switch::before {
    --switch-internal-gap: calc(0.125 * var(--switch-height)); /*2 px for 16px height*/
    --switch-circle-size: calc(var(--switch-height) - 2 * var(--switch-internal-gap)); /*12 px for 16px height*/
    position: absolute;
    content: "";
    background-color: var(--white);
    border-radius: var(--border-radius-round);
    height: var(--switch-circle-size);
    width: var(--switch-circle-size);
    top: 50%; /*relative to parent*/
    transform: translateY(-50%); /*relative to itself*/
    left: var(--switch-internal-gap);
    box-shadow: var(--shadow-button-hover);
    transition: left 0.8s var(--animation-spring-gentle);
}

input[type=checkbox].switch:checked {
    background-color: var(--switch-color);
}

input[type=checkbox].switch:checked::before {
    left: calc(100% - var(--switch-internal-gap) - var(--switch-circle-size));
}

.switch-primary {
    --switch-color: var(--primary-color);
}
.switch-secondary {
    --switch-color: var(--secondary-color);
}


/*RADIO BUTTON*/
input[type=radio] {
    --radio-size: 16px;
    --radio-surround-size: 4px;
    width: var(--radio-size);
    height: var(--radio-size);
    accent-color: var(--radio-color);
    cursor: pointer;
}

input[type=radio] {
    --radio-padding: calc(0.25 * var(--radio-size));
    appearance: none;
    -webkit-appearance: none;
    outline: 1px solid var(--text-color-subdued);
    outline-offset: -1px;
    border-radius: var(--border-radius-round);
    margin: var(--radio-surround-size);
    background-clip: content-box;
    padding: var(--radio-padding);
    transition: outline 0.5s ease;
}

input[type=radio]::after {
    content: "";
    display: block;
    width: calc(var(--radio-size) + 2 * var(--radio-surround-size));
    height: calc(var(--radio-size) + 2 * var(--radio-surround-size));
    /*position: absolute;*/ /*causes extra height or scrollbar issues in angular webpage*/
    position: relative;
    margin-left: calc(0px - var(--radio-surround-size) - var(--radio-padding));
    margin-top: calc(0px - var(--radio-surround-size) - var(--radio-padding));
    border-radius: var(--border-radius-round);
    background-color: transparent;
    transition: background-color 0.5s ease;
}

input[type=radio]:hover::after,
input[type=radio]:focus-visible::after {
    background-color: var(--rgba-hover-light);
}

.radio-primary {
    --radio-color: var(--primary-color);
    --radio-surround-hover: rgba(var(--primary-color-rgb), 0.12);
}

.radio-secondary {
    --radio-color: var(--secondary-color);
    --radio-surround-hover: rgba(var(--secondary-color-rgb), 0.12);
}

input[type=radio]:checked {
    outline: 1px solid var(--radio-color);
    background-color: var(--radio-color);
}

input[type=radio]:checked:hover::after,
input[type=radio]:checked:focus-visible::after {
    background-color: var(--radio-surround-hover);
}

input[type=radio]:disabled {
    pointer-events: none;
    opacity: 0.4;
}

input[type=radio]:disabled ~ label {
    pointer-events: none;
}

/*custom icons input css */

.custom-icon-group{
    position:relative;
}

.custom-icon-group.input-start input{
    padding-left:28px;
}
.custom-icon-group.input-end input{
    padding-right:28px;
}
.custom-icon-group.input-start-end input{
    padding:0 28px;
}
.custom-icon-group .icon-start {
   position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left:8px
}
.custom-icon-group .icon-end {
   position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right:8px
}
.password-eye {
    color: var(--text-color-subdued);
}