.eControls .eDropUpload {
    position: relative;
    text-align: center;
    cursor: pointer;

    &.k-dropzone-hover .e-upload-surface {
        border: 1px solid var(--brand-600) !important;
    }

    &.horizontal__eDropUpload {
        padding: 8px 20px;
    }

    &.horizontal__eDropUpload .e-upload-surface {
        display: flex;
        align-items: center;
    }

    & .e-upload-surface {
        border: 1px solid var(--gray-300) !important;
        border-radius: var(--radius-lg) !important;
        background-color: transparent;
        padding: 20px;
        transition: border-color 0.3s, background-color 0.3s;
    }

    & .k-upload {
        width: 100%;
        border-radius: var(--radius-lg);
        border: none; /*1px solid var(--gray-300)*/
        background: transparent;
        font-weight: 600;
        padding: 2px;
        position: revert !important;
    }

    & .k-upload-button {
        height: 100%;
        min-width: 7em;
        width: 100%;
        cursor: pointer;
    }

    & .k-dropzone {
        position: absolute !important;
        inset: 0;
        opacity: 0;
        cursor: pointer;
        padding: 0;
    }

    & .e-upload-icon-box {
        width: 40px;
        height: 40px;
        border: 1px solid var(--gray-300);
        border-radius: 8px;
        margin: 0 auto 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        & .e-upload-icon-box .k-icon {
            font-size: 20px;
            color: var(--gray-500);
        }

    &.horizontal__eDropUpload .e-upload-icon-box {
        margin: 0;
    }

    &.compact__eDropUpload  {
        padding: 0;
    }

    &.compact__eDropUpload .e-upload-surface {
        display: flex;
        align-items: center;
        padding: 10px;
    }

    &.compact__eDropUpload .e-upload-icon-box {
        margin: 0;
    }

    &.compact__eDropUpload .k-upload .k-actions {
        display: none;
    }

    &.compact__eDropUpload .e-upload-subtitle {
        display: none;
    }

    &.compact__eDropUpload .eDropUpload.horizontal__eDropUpload {
        padding: 0;
    }

    &.compact__eDropUpload .e-upload-surface .--eBlock {
        display: block;
    }

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

    ::file-selector-button {
        cursor: pointer;
    }

    & .k-upload-button-wrap {
        width: 100%;
        height: 100%;
    }

    & .k-upload-files {
        border-width: 0 0 1px 0;
        border-color: var(--gray-300);
        box-sizing: border-box;
        margin-bottom: 12px
    }

    & .k-file-single > .k-file-info,
    & .k-multiple-files-wrapper > .k-file-info {
        text-align: start;
    }

    & .k-icon-button {
        padding: 0;
    }

    & .k-file-name {
        color: var(--gray-900) !important;
        max-width: 350px;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    & .k-file {
        padding: 8px 12px;
    }

    & .k-icon svg {
        display: none;
    }

    & .k-icon[title="Remove"]::before {
        content: "";
        width: 14px;
        height: 16px;
        background-image: url("/images/Delet-icon.svg");
    }

    & .k-file-icon-wrapper:has( + .k-file-info [title$="png"]) .k-icon {
        background-image: url("/images/png-icon.svg");
        background-size: contain;
    }

    & .k-file-icon-wrapper:has( + .k-file-info [title$="gif"]) .k-icon {
        background-image: url("/images/gif-icon.svg");
        background-size: contain;
    }

    & .k-file-icon-wrapper:has( + .k-file-info [title$="xlsx"]) .k-icon {
        background-image: url("/images/xlsx-icon.svg");
        background-size: contain;
    }

    & .k-file-icon-wrapper:has( + .k-file-info [title$="docx"]) .k-icon {
        background-image: url("/images/docx-icon.svg");
        background-size: contain;
    }

    & .k-file-icon-wrapper:has( + .k-file-info [title$="pdf"]) .k-icon {
        background-image: url("/images/pdf-icon.svg");
        background-size: contain;
    }

    & .k-file-icon-wrapper:has( + .k-file-info [title$="doc"]) .k-icon {
        background-image: url("/images/doc-icon.svg");
        background-size: contain;
    }

    & .k-file-icon-wrapper:has( + .k-file-info [title$="xls"]) .k-icon {
        background-image: url("/images/xls-icon.svg");
        background-size: contain;
    }

    & .k-file-icon-wrapper:has( + .k-file-info [title$="bmp"]) .k-icon,
    & .k-file-icon-wrapper:has( + .k-file-info [title$="svg"]) .k-icon {
        background-image: url("/images/DefaultFile-icon.svg");
        background-size: contain;
    }

    & .k-file-icon-wrapper:has( + .k-file-info [title$="jpg"]) .k-icon {
        background-image: url("/images/jpg-icon.svg");
        background-size: contain;
    }

    & .k-file-icon-wrapper:has( + .k-file-info [title$="jpeg"]) .k-icon {
        background-image: url("/images/jpeg-icon.svg");
        background-size: contain;
    }

    & .k-file-multiple:has(> .k-multiple-files-wrapper) .k-icon:not([title="Remove"]) {
        background-image: url("/images/AllFiles-icon.svg");
        background-size: contain;
    }

    & .k-multiple-files-wrapper .k-file-info {
        border-color: var(--kendo-color-border, rgba(0, 0, 0, 0.08));
        border-width: 0 0 1px;
        border-style: solid;
        margin-bottom: 0;
        padding: 8px 0;
    }

    & .k-multiple-files-wrapper .k-file-summary {
        padding: 8px 0 0 0;
        margin: 0;
    }
}

.eControls .ai-eUpload__wrapper {
     position:relative;
     display:flex;
     flex-direction:column;
     align-items:center;
     justify-content:center;
     width: 180px;
     overflow:hidden;

    &:hover .e-upload-ai {
        visibility: visible;
        background: rgba(0, 0, 0, 0.5); 
    }

    &.ai-section + .ai-section {
        border-top:1px solid var(--gray-200);
    } 
    
    & .k-dropzone {
        border-radius:0 0 10px 10px;
        padding: 0;
    }

    & .k-upload {
        padding: 0;
    }

    & .ai-eUpload {
        width: 180px;
        height: 120px;
        position: relative;
    }

    & .e-upload-ai {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-md);
        visibility: hidden;
        transition: background .25s ease, visibility .25s ease;
    }
    
    & .eDropUpload {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 120px;
    }
    
    & .e-upload-icon-box {
        display: none;
    }

    & .bg__img {
        background: var(--white);
        background: radial-gradient(circle, var(--white) 0%, var(--brand-150) 100%);
        position: absolute;
        inset: 0 auto auto auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 180px;
        height: 120px;
        border-radius: var(--radius-md);

        & img[id] {
            width: 100%;
            height: 100%;
            z-index: 0;
            border-radius: var(--radius-md);
            object-fit: cover;
            object-position: center;
        }

        & img[id][src$=".svg"] {
            width: 120px !important;
            height: 90px !important;
        }
    }
    
    

    & .eDropUpload .--eBlock {
        font-size: 10px;
        gap: 4px !important;
    }

    & .eDropUpload {
        padding: 0;
    }

    & .e-upload-subtitle {
        display: none;
    }

    & .k-upload-button-wrap {
        width: 100%;
        height: 100%;
    }
}

@keyframes pulse {
    0% {
        border: 1px solid var(--gray-300);
    }

    100% {
        border: 1px solid rgba(from var(--gray-300) r g b / .2);
    }
}