.eControls .--eLabel {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-text-sm);
    line-height: var(--line-height-text-sm);
    color: var(--gray-700);
    margin-bottom: var(--eLabelMarginB, --spacing-md);

    & .spanAsteriskRequired {
        font-weight: var(--font-weight-medium);
        font-size: var(--font-size-text-lg);
        color: var(--brand-600);
        line-height: 1;
    }
}


.eControls {
    & .k-listview-content,
    & .eListView:not(.stop__min-height),
    & :not(.stop__min-height) > .k-grid .k-grid-content {
        min-height: var(--eContentMinHeight, 520px);
    }

    & .k-input-inner,
    & .k-list-item-text {
        font-size: var(--font-size-text-md);
        line-height: var(--line-height-text-md);
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    & textarea.k-input-inner {
        white-space: break-spaces !important;
        overflow: auto !important;
    }
}

.eControls .k-link {
    text-decoration: none;
    padding: 4px !important;
    min-width: 0; /* critical: allows text to shrink so ellipsis works */
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.eControls {
    & .rb-title {
        font-weight: var(--font-weight-semibold);
    }

    & .rb-sub {
        font-size: var(--font-size-text-sm);
        color: var(--gray-400);
    }

    & .e-link {
        color: var(--brand-700);
        font-weight: 600;
    }

    & .k-form-error,
    & .k-invalid-msg,
    & .field-validation-error {
        color: var(--error-500);
    }

    & span.k-invalid {
        border: 1px solid var(--error-500) !important;
    }

    & .input-validation-error ~ .k-editor .k-editor-content {
        border: 1px solid var(--error-500) !important;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    }

    & .k-input.survey-choice-desc-widget:has(> .valid) {
        border: 1px solid var(--error-500) !important;
    }

    & .k-e-notification-wrapper {
        color: var(--gray-900) !important;
    }

    & .k-notification-info,
    & .k-notification-error,
    & .k-notification-warning,
    & .k-notification-success {
        border-radius: var(--radius-lg);
        border-color: var(--gray-300);
        background-color: var(--white);
        position: relative;
    }

        & .k-notification-info::after,
        & .k-notification-error::after,
        & .k-notification-success::after,
        & .k-notification-warning::after {
            content: "";
            width: 100%;
            height: 100%;
            right: 0;
            position: absolute;
            z-index: 0;
            backdrop-filter: blur(2px);
            border-radius: var(--radius-lg);
        }

        & .k-notification-info::after {
            /*background-color: var(--brand-transparent-bg);*/
        }

        & .k-notification-error::after {
            /*background-color: #7F56D954;*/
        }

    & .k-notification-info,
    & .k-notification-success,
    & .k-notification-warning,
    & .k-notification-error {
        position: relative;
        padding: 15px 30px 15px 15px;
    }

    & .k-e-notification-wrapper {
        z-index: 4;
    }

    & .notification-icon-block {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    & .k-notification-close {
        font-size: 24px;
        cursor: pointer;
    }

    & .k-notification-title,
    & .k-notification-mess {
        color: var(--gray-900);
    }

    & .k-notification-mess {
        font-size: 14px;
    }

    & .k-animation-container {
        margin-top: var(--radius-sm);
        border-radius: var(--radius-sm);
        margin-bottom: var(--radius-sm) !important;
    }

        & .k-animation-container .k-child-animation-container .k-popup {
            border-radius: var(--radius-sm);
        }

        & .k-animation-container .k-child-animation-container .k-list {
            border-radius: var(--radius-sm);
        }

        & .k-animation-container li:where( .k-focus, .k-selected) span {
            color: var(--brand-700);
        }

    & .k-list-scroller::-webkit-scrollbar:hover *::-webkit-scrollbar-thumb { /* just in case for nested */
        border-width: 1px;
    }

    & .k-list-scroller::-webkit-scrollbar {
        width: 4px;
    }

    & .k-list-scroller::-webkit-scrollbar-thumb {
        border-width: 1px;
    }

    & .k-list .k-selected, .k-listbox .k-selected {
        background-color: var(--brand-50) !important;
    }

    & #notifications-root {
        position: fixed;
        bottom: 16px;
        right: 16px;
        z-index: 10006;
        max-height: 90vh;
        max-width: 450px;
        min-width: 250px;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        gap: 12px;
        border-radius: var(--radius-lg);
        box-shadow: 0 0 2px rgba(0,0,0,.05), 1px 2px 2px rgba(0,0,0,.07);
    }

    & body:has( #notifications-root .k-notification) > #eun-chat-widget {
        z-index: 3;
        position: relative;
    }
    /*& #notifications-root::before,
    & #notifications-root::after {
        content: "";
        position: fixed;
        right: 16px;
        max-width: 450px;
        height: 80px;
        pointer-events: none;
        z-index: 10001;
        background: rgba(204, 204, 204, 0.45);
        backdrop-filter: blur(var(--spacing-xs));
        -webkit-backdrop-filter: blur(var(--spacing-xs));
    }*/
    & #notifications-root::-webkit-scrollbar {
        width: 4px;
    }

    & #notifications-root::-webkit-scrollbar-thumb {
        border-color: var(--sb-thumb);
        border-width: 0;
    }

    & #notifications-root::-webkit-scrollbar:hover *::-webkit-scrollbar-thumb { /* just in case for nested */
        border-width: 4px;
    }


    & #notifications-root .k-notification {
        pointer-events: auto;
    }
}


.eControls .k-calendar-container.k-popup {

    & .k-selected.k-focus .k-link {
        background-color: var(--brand-600)!important;
    }

    & .k-button-flat-primary {
        color: var(--brand-600)!important;
    }

    & .k-today .k-link  {
        color: var(--brand-600)!important;
    }

    &  .k-today.k-selected.k-focus .k-link {
        color: var(--text-on-brand) !important;
    }
}

.eControls body {
    &:not(.menu-loaded) .eAccordion-content {
        transition: none !important;
    }

    &.menu-loaded .eAccordion-content {
        transition: max-height 0.3s ease;
    }
}

.eControls .view-setting {
    width: 32px;
    display: flex;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    padding: 4px 6px;
    border: 2px solid transparent;

    &:hover {
        border: 2px solid var(--brand-500);
    } 
}

    .eControls .menu__context {
        position: fixed;
        /*top: -66px;*/
        /*left: calc(-80% + 16px);*/
        /*left: 20px;*/
        max-width: 200px;
        min-width: 120px;
        background: var(--white);
        border: 1px solid var(--gray-300);
        border-radius: 6px 6px 6px 0;
        padding: 4px;
        box-shadow: 0 4px 16px rgba(0,0,0,.15);
        z-index: 4;
        visibility: hidden;

        & button:hover {
            background: var(--gray-100);
        }

        &.is-open {
            visibility: visible;
        }

        & .menu__context-list {
            display: grid;
            list-style: none;
            margin: 0;
            padding: 0;
            gap: var(--spacing-xs);

            & img {
                margin-right: 8px;
            }
        }

            & .menu__context-list button,
            & .k-bulk-menu button {
                width: 100%;
                text-align: start;
                display: flex;
                align-items: center;
                pointer-events: revert !important;
            }

            & .menu__context-list span,
            & .k-bulk-menu span {
                font-size: 14px;
                font-weight: var(--font-weight-medium);
                color: var(--gray-900);
                word-break: break-all;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 130px;
                white-space: nowrap
            }

        & .btn.disabled,
        & .btn:disabled,
        & button:hover {
            border-color: var(--gray-300);
        }
    }

.eControls {
    & .mess__search {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    & .massege__res-search > span {
        color: var(--brand-600);
        cursor: pointer;
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 4px;

        &:hover {
            opacity: .7;
        }
    }
}

.eControls {
    & .floating-label,
    & .control-label {
        font-size: var(--font-size-text-sm);
        line-height: var(--line-height-text-sm);
        font-weight: 500;
        color: var(--gray-700);
        margin-bottom: 8px;
    }
}