html {
    --input--bg: #fff;
    --input-white-bg: #fff;
    --input--border-bottom: #dadada;
}

html.dark-mode {
    --input--bg: rgba(0,0,0,0.2);
    --input-white-bg: #232c3b;
}


.ep-control__input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.ep-textbox__input,
.k-picker,
.ep-datepicker__input {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.k-spinner-decrease,
.k-spinner-increase {
    color: var(--ep-primary) !important;
    margin-block: 1px;
    margin-right: 2px;
    border: none !important;
    background: transparent !important;
}

.ep-control__buttons,
.ep-control__buttons .ep-button,
.ep-control__buttons button {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.ep-textbox__input:focus {
    outline: none !important;
}

.ep-datepicker__input {
    flex-direction: row-reverse !important;
}


.ep-textbox.label-left,
.ep-textbox.label-right {
    background: var(--input--bg) !important;
    border-bottom: 1px solid var(--input--border-bottom) !important;

    .ep-label {
        padding-inline: 4px !important;
    }
}

.ep-textbox.-with-buttons,
.ep-textbox {
    border-bottom: 1px solid var(--input--border-bottom) !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    .ep-control__wrapper:not(label) {
        background: var(--input-white-bg) !important;
    }

    .ep-control__buttons {

        .ep-button .k-button .fa-duotone.fa-save,
        .ep-button .k-button .fa-duotone.fa-cancel,
        .ep-button .k-button .fa-duotone.fa-edit {
            color: var(--ep-primary) !important;
            transform: scale(1.05)
        }
    }
}

.ep-numeric.label-right,
.ep-numeric.label-left {
    background: var(--input--bg) !important;

    .ep-label {
        padding-inline: 4px !important;
    }
}

.-with-buttons.ep-numeric,
.ep-numeric {
    border: none !important;
    border-bottom: 1px solid var(--input--border-bottom) !important;
    border-radius: 0 !important;
    box-shadow: none !important;


    .ep-control__wrapper {
        background: var(--input--bg) !important;

        .k-input {
            background: var(--input--bg) !important;
        }
    }

    .k-numerictextbox {
        border-radius: 0 !important;
        border: none !important;
    }

    .ep-control__wrapper {
        background: var(--input--bg) !important;
    }


    .ep-control__buttons {


        .ep-button .k-button {
            width: 24px !important;
            height: 24px !important;
            min-width: 24px !important;
            padding: 0 !important;
            border-radius: 5px !important;
            box-shadow: none !important;
            margin-inline: 1px;
            color: var(--ep-primary) !important;
            transform: translateY(-2px) scale(1);
            transition: all 100ms ease !important;
        }

            .ep-button .k-button:hover {
                transform: translateY(-2px) scale(1.07);
            }
    }
}

.ep-combobox.-with-buttons.label-right,
.ep-combobox.-with-buttons.label-left {
    background: var(--input--bg) !important;

    .ep-label {
        padding-inline: 4px !important;
    }
}


.ep-combobox.-with-buttons,
.ep-combobox {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--input--border-bottom) !important;

    .ep-control__wrapper {
        background: var(--input--bg) !important;

        .k-input {
            background: var(--input--bg) !important;
        }
    }

    .ep-combobox:not(label) {
        background: var(--input--bg) !important;
    }

    .ep-combobox__input {
        border: none !important;
        border-radius: 0 !important;

        .k-input-button {
            background: transparent !important;
        }
    }


    .ep-control__buttons {


        .ep-button .k-button {
            width: 24px !important;
            height: 24px !important;
            min-width: 24px !important;
            padding: 0 !important;
            border-radius: 5px !important;
            box-shadow: none !important;
            margin-inline: 1px;
            color: var(--ep-primary) !important;
            transform: translateY(-2px) scale(1);
            transition: all 100ms ease !important;
        }

            .ep-button .k-button:hover {
                transform: translateY(-2px) scale(1.07);
            }
    }

    .k-svg-i-chevron-down,
    .k-svg-i-chevron-up {
        color: var(--textDefault);
    }
}

.ep-masked-textbox.label-left,
.ep-masked-textbox.label-right {
    background: var(--input--bg) !important;

    .ep-label {
        padding-inline: 4px !important;
    }
}

.ep-masked-textbox.-with-buttons,
.ep-masked-textbox {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--input--border-bottom) !important;

    .ep-control__wrapper {
        background: var(--input--bg) !important;
    }

    .ep-masked-textbox__input {
        .k-maskedtextbox {
            background: var(--input--bg) !important;
            border: none !important;
        }
    }

    .ep-combobox:not(label) {
        background: var(--input--bg) !important;
    }

    .ep-combobox__input {
        border: none !important;
        border-radius: 0 !important;

        .k-input-button {
            background: transparent !important;
        }
    }

    .ep-control__buttons {


        .ep-button .k-button {
            width: 24px !important;
            height: 24px !important;
            min-width: 24px !important;
            padding: 0 !important;
            border-radius: 5px !important;
            box-shadow: none !important;
            margin-inline: 1px;
            color: var(--ep-primary) !important;
            transform: translateY(-2px) scale(1);
            transition: all 100ms ease !important;
        }

            .ep-button .k-button:hover {
                transform: translateY(-2px) scale(1.07);
            }
    }
}

.ep-multiselect.-with-buttons.label-left,
.ep-multiselect.-with-buttons.label-right {
    background: var(--input--bg) !important;

    .ep-label {
        padding-inline: 4px !important;
    }
}

.ep-multiselect.-with-buttons,
.ep-multiselect {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--input--border-bottom) !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    .ep-control__wrapper {
        background: var(--input--bg) !important;
    }

    .k-multiselect, .k-input-values, .k-input-inner {
        background: var(--input--bg) !important;
        border-radius: 0 !important;
    }

    .ep-multiselect:not(label) {
        background: var(--input--bg) !important;
    }

    .ep-multiselect__label {
        background: transparent !important;
    }



    .ep-multiselect__input {
        border: none !important;
    }

    .ep-control__buttons {

        .ep-button .k-button {
            width: 24px !important;
            height: 24px !important;
            min-width: 24px !important;
            padding: 0 !important;
            border-radius: 5px !important;
            box-shadow: none !important;
            margin-inline: 1px;
            color: var(--ep-primary) !important;
            transform: translateY(-2px) scale(1);
            transition: all 100ms ease !important;
        }

            .ep-button .k-button:hover {
                transform: translateY(-2px) scale(1.07);
            }
    }
}

.ep-lookup.-with-buttons.label-right,
.ep-lookup.-with-buttons.label-left {
    background: var(--input--bg) !important;

    .ep-label {
        padding-inline: 4px !important;
    }
}

.ep-lookup.-with-buttons,
.ep-lookup {
    border: none !important;
    border-bottom: 1px solid var(--input--border-bottom) !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    .ep-control__wrapper {
        background: var(--input--bg) !important;
    }

    .ep-lookup__wrapper {
        background: var(--input--bg) !important;

        .k-input-inner {
            background: var(--input--bg) !important;
        }
    }

    .ep-lookup:not(label) {
        background: var(--input--bg) !important;
    }

    .ep-control__buttons {


        .ep-button .k-button {
            width: 24px !important;
            height: 24px !important;
            min-width: 24px !important;
            padding: 0 !important;
            border-radius: 5px !important;
            box-shadow: none !important;
            margin-inline: 1px;
            color: var(--ep-primary) !important;
            transform: translateY(-2px) scale(0.95);
            transition: all 100ms ease !important;
        }

            .ep-button .k-button:hover {
                transform: translateY(-2px) scale(1.07);
            }
    }
}

    .ep-lookup.label-right,
    .ep-lookup.label-left {

        .ep-lookup__label.k-label {
            background: var(--input--bg) !important;
        }

        .ep-label {
            padding-inline: 4px !important;
        }
    }

.ep-datepicker.label-right,
.ep-datepicker.label-left {
    background: var(--input--bg) !important;

    .ep-datepicker__input {
        background: var(--input--bg) !important;

        .k-icon-button {
            background: var(--input--bg) !important;
            border: transparent !important;
        }
    }

    .ep-label {
        padding-inline: 4px !important;
    }
}

.ep-datepicker.-with-buttons,
.ep-datepicker {
    border-bottom: 1px solid var(--input--border-bottom) !important;

    .ep-control__wrapper {
        background: var(--input--bg) !important;
    }

        .ep-control__wrapper:not(label) {
            background: var(--input--bg) !important;
        }

    .ep-datepicker__input {
        background: var(--input--bg) !important;

        .k-icon-button {
            background: var(--input--bg) !important;
            border: transparent !important;
        }
    }

    .k-button-text {
        border-radius: 2px;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
    }

    .ep-control__buttons {

        .ep-button .k-button {
            width: 24px !important;
            height: 24px !important;
            min-width: 24px !important;
            padding: 0 !important;
            border-radius: 5px !important;
            box-shadow: none !important;
            margin-inline: 1px;
            color: var(--ep-primary) !important;
            transform: translateY(-2px) scale(1);
            transition: transform 100ms ease !important;
        }

            .ep-button .k-button:hover {
                transform: translateY(-2px) scale(1.07);
            }
    }

    .k-svg-i-clock,
    .k-svg-i-calendar {
        color: var(--ep-primary);
    }
}

html.dark-mode .ep-datepicker.-with-buttons,
html.dark-mode .ep-datepicker {

    .k-svg-i-clock,
    .k-svg-i-calendar {
        color: var(--textStrong);
    }
}


.ep-dropdownlist:not(.custom--toolbar__container *),
.ep-dropdownlist.-with-buttons:not(.custom--toolbar__container *) {
    border-bottom: 1px solid var(--input--border-bottom) !important;

    .ep-control__wrapper {
        background: var(--input--bg) !important;
    }

    .ep-datepicker__input {
        background: var(--input--bg) !important;

        .k-icon-button {
            background: var(--input--bg) !important;
            border: transparent !important;
        }
    }

    .ep-control__buttons {
        background: var(--input--bg) !important;

        .ep-button .k-button {
            background: var(--input--bg) !important;
            width: 24px !important;
            height: 24px !important;
            min-width: 24px !important;
            padding: 0 !important;
            border-radius: 5px !important;
            box-shadow: none !important;
            margin-inline: 1px;
            color: var(--ep-primary) !important;
            transform: translateY(-2px) scale(1);
            transition: all 100ms ease !important;
        }

            .ep-button .k-button:hover {
                transform: translateY(-2px) scale(1.07);
            }
    }
}


.ep-dropdownlist.-with-buttons.label-right, .ep-dropdownlist.label-right, .ep-dropdownlist.-with-buttons.label-left, .ep-dropdownlist.label-left {
    background: var(--input--bg) !important;

    .ep-label {
        padding-inline: 4px !important;
    }
}

.ep-textarea.ep-control {
    .k-button-text .fa-duotone.fa-save {
        color: var(--ep-primary) !important;
    }
}

.k-daterangepicker .k-dateinput {
    border: none !important;
    border-radius: 0px !important;
    border-bottom: 1px solid var(--ep-primary) !important;
}

.k-clear-value {
    background: transparent !important;
}




html.dark-mode {
    .k-button,
    .k-button.k-button-base,
    .k-button.k-button-solid {
        background: transparent !important;
        color: var(--textDefault) !important;

        .k-button-text {
            color: var(--textDefault) !important;
        }
    }
}



html.dark-mode {
    .ep-textbox.-with-buttons,
    .ep-textbox {
        .k-button,
        .k-button.k-button-base,
        .k-button.k-button-solid {
            background: transparent !important;
            color: var(--textDefault) !important;
        }

        .ep-control__buttons {

            .ep-button .k-button .fa-duotone.fa-save,
            .ep-button .k-button .fa-duotone.fa-cancel,
            .ep-button .k-button .fa-duotone.fa-edit {
                color: #bbb !important;
                transform: scale(1.05)
            }
        }
    }

    .ep-numeric.-with-buttons,
    .ep-numeric {
        .k-button,
        .k-button.k-button-base,
        .k-button.k-button-solid {
            background: transparent !important;
            color: var(--textDefault) !important;
        }

        .ep-control__buttons {

            .ep-button .k-button .fa-duotone.fa-save,
            .ep-button .k-button .fa-duotone.fa-cancel,
            .ep-button .k-button .fa-duotone.fa-edit {
                color: #ddd !important;
                transform: scale(1.05)
            }
        }
    }

    .ep-dropdownlist.-with-buttons,
    .ep-dropdownlist {
        .k-button,
        .k-button.k-button-base,
        .k-button.k-button-solid {
            background: var(--input-bg) !important;
            color: var(--textDefault) !important;
        }

        .ep-control__buttons {

            .ep-button .k-button .fa-duotone.fa-save,
            .ep-button .k-button .fa-duotone.fa-cancel,
            .ep-button .k-button .fa-duotone.fa-edit {
                color: #ddd !important;
            }
        }
    }


    .ep-combobox.-with-buttons,
    .ep-combobox {
        .k-button,
        .k-button.k-button-base,
        .k-button.k-button-solid {
            background: transparent !important;
            color: var(--textDefault) !important;
        }

        .ep-control__buttons {

            .ep-button .k-button .fa-duotone.fa-save,
            .ep-button .k-button .fa-duotone.fa-cancel,
            .ep-button .k-button .fa-duotone.fa-edit {
                color: #ddd !important;
            }
        }

        .ep-control__wrapper {
            background: var(--input-bg) !important;
        }
    }

    .ep-textarea.-with-buttons,
    .ep-textarea {
        .k-button,
        .k-button.k-button-base,
        .k-button.k-button-solid {
            background: transparent !important;
            color: var(--textDefault) !important;
        }

        .ep-control__buttons {

            .ep-button .k-button .fa-duotone.fa-save,
            .ep-button .k-button .fa-duotone.fa-cancel,
            .ep-button .k-button .fa-duotone.fa-edit {
                color: #ddd !important;
            }
        }
    }

    .ep-multiselect.-with-buttons,
    .ep-multiselect {
        .k-button,
        .k-button.k-button-base,
        .k-button.k-button-solid {
            background: transparent !important;
            color: var(--textDefault) !important;
        }

        .ep-control__buttons {
            background: var(--input--bg) !important;

            .ep-button .k-button {
                background: transparent !important;
                width: 24px !important;
                height: 24px !important;
                min-width: 24px !important;
                padding: 0 !important;
                border-radius: 5px !important;
                box-shadow: none !important;
                margin-inline: 1px;
                color: var(--ep-primary) !important;
                transform: translateY(-2px) scale(1);
                transition: all 100ms ease !important;
            }

                .ep-button .k-button:hover {
                    transform: translateY(-2px) scale(1.07);
                }
        }


        .ep-control__buttons {

            .ep-button .k-button .fa-duotone.fa-save,
            .ep-button .k-button .fa-duotone.fa-cancel,
            .ep-button .k-button .fa-duotone.fa-edit {
                color: #ddd !important;
            }
        }

        .ep-control__wrapper {
            background: var(--input-bg) !important;
        }
    }
}


.ep-textbox:focus .ep-control__wrapper,
.ep-textbox:active .ep-control__wrapper,
.ep-textbox:focus-within .ep-control__wrapper,
.ep-numeric:focus .ep-control__wrapper,
.ep-numeric:active .ep-control__wrapper,
.ep-numeric:focus-within .ep-control__wrapper,
.ep-combobox:focus .ep-control__wrapper,
.ep-combobox:active .ep-control__wrapper,
.ep-combobox:focus-within .ep-control__wrapper,
.ep-masked-textbox:focus .ep-control__wrapper,
.ep-masked-textbox:active .ep-control__wrapper,
.ep-masked-textbox:focus-within .ep-control__wrapper,
.ep-multiselect:focus .ep-control__wrapper,
.ep-multiselect:active .ep-control__wrapper,
.ep-multiselect:focus-within .ep-control__wrapper,
.ep-lookup:focus .ep-control__wrapper,
.ep-lookup:active .ep-control__wrapper,
.ep-lookup:focus-within .ep-control__wrapper,
.ep-datepicker:focus .ep-control__wrapper,
.ep-datepicker:active .ep-control__wrapper,
.ep-datepicker:focus-within .ep-control__wrapper,
.ep-dropdownlist:focus .ep-control__wrapper,
.ep-dropdownlist:active .ep-control__wrapper,
.ep-dropdownlist:focus-within .ep-control__wrapper {
    border-bottom: 1px solid var(--ep-primary) !important;
}