:root,
:root[data-theme="light"] {
    /* widget uploader colors */
    --color-widget-uploader-bg: #f4f4f4;
    --color-widget-uploader-bg-hover: #f5fdf2;
    --color-widget-uploader-border: #eee;
    --color-widget-uploader-shadow: #dbdbdb;
    --color-widget-uploader-shadow-hover: #c0caaf;
    --color-widget-uploader-icon: #999999;
    --color-widget-uploader-icon-accent: #E21B1B;
    --color-widget-uploader-text: #8a8a8a;
    --color-widget-uploader-text-secondary: #333;
    
    /* loader colors */
    --color-widget-uploader-loader-bg: #515151;
    --color-uploader-loader-text: #fff;
    --color-widget-uploader-loader-icon-blue: #2D50A7;
    --color-widget-uploader-loader-icon-light-blue: #73A1FB;
    --color-widget-uploader-loader-icon-dark-blue: #355EC9;
    --color-widget-uploader-loader-icon-pale: #C4D9FD;
    --color-widget-uploader-loader-icon-medium: #3D6DEB;
    --color-widget-uploader-loader-icon-bright: #5286FA;
    
    /* list colors */
    --color-widget-uploader-item-border: #aaa;
    --color-widget-uploader-item-shadow: #c6c4c4;
    --color-widget-uploader-item-title: #8a8a8a;
    --color-widget-uploader-delete: #972222;
    --color-widget-uploader-delete-hover: #c73030;
    --color-widget-uploader-document-bg-start: #aaa;
    --color-widget-uploader-document-bg-end: #919191;
    --color-widget-uploader-document-text: #fff;
    
    /* error colors */
    --color-widget-uploader-error: #ff0000;
}

[data-theme="dark"] {
    /* widget uploader colors */
    --color-widget-uploader-bg: #2a2a3e;
    --color-widget-uploader-bg-hover: #323246;
    --color-widget-uploader-border: #4a4a5e;
    --color-widget-uploader-shadow: #1a1a2e;
    --color-widget-uploader-shadow-hover: #2a3a2a;
    --color-widget-uploader-icon: #a0a0b0;
    --color-widget-uploader-icon-accent: #E21B1B;
    --color-widget-uploader-text: #b0b0bc;
    --color-widget-uploader-text-secondary: #d0d0d8;
    
    /* loader colors */
    --color-widget-uploader-loader-bg: #2a2a3e;
    --color-uploader-loader-text: #fff;
    --color-widget-uploader-loader-icon-blue: #3a5ca7;
    --color-widget-uploader-loader-icon-light-blue: #5a81fb;
    --color-widget-uploader-loader-icon-dark-blue: #456ed9;
    --color-widget-uploader-loader-icon-pale: #4a5f8d;
    --color-widget-uploader-loader-icon-medium: #4d7efb;
    --color-widget-uploader-loader-icon-bright: #6296fa;
    
    /* list colors */
    --color-widget-uploader-item-border: #5a5a6e;
    --color-widget-uploader-item-shadow: #1a1a2e;
    --color-widget-uploader-item-title: #b0b0bc;
    --color-widget-uploader-delete: #d73a3a;
    --color-widget-uploader-delete-hover: #e74a4a;
    --color-widget-uploader-document-bg-start: #5a5a6e;
    --color-widget-uploader-document-bg-end: #4a4a5e;
    --color-widget-uploader-document-text: #fff;
    
    /* error colors */
    --color-widget-uploader-error: #ff4444;
}

.obji-contrainer .widgetUploader {max-width:340px;}

.widgetUploader {padding:10px 20px;position:relative;}

.fu--data {display:none;}

.fu--fileselect {position:relative;}
.fu--src_select {display: flex;cursor: pointer;flex-direction: row;justify-content: flex-start;background: var(--color-widget-uploader-bg);padding: 7px;border: 1px solid var(--color-widget-uploader-border);box-shadow: 3px 3px 3px var(--color-widget-uploader-shadow);}
.fu--src_select:hover {background: var(--color-widget-uploader-bg-hover);box-shadow: 3px 3px 3px var(--color-widget-uploader-shadow-hover);}
.fu--src_select span {display: block;align-self: center;margin-left: 15px;font-size: 14px;}
.fu--src_select i {display:block;width:40px;height:40px;background-size: cover;background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cpath style='fill:%23999999;' d='M512,0h-40v16h24v32h16V0z M432,0h-40v16h40V0z M352,0h-40v16h40V0z M272,0h-40v16h40V0z M192,0h-40 v16h40V0z M112,0H72v16h40V0z M32,0H0v16h32V0z M16,48H0v40h16V48z M16,128H0v40h16V128z M16,208H0v40h16V208z M16,288H0v40h16V288z M16,368H0v40h16V368z M16,448H0v40h16V448z M56,496H16v16h40V496z M136,496H96v16h40V496z M216,496h-40v16h40V496z M296,496h-40v16 h40V496z M376,496h-40v16h40V496z M456,496h-40v16h40V496z M512,488h-16v8l0,0v16h16V488z M512,408h-16v40h16V408z M512,328h-16v40 h16V328z M512,248h-16v40h16V248z M512,168h-16v40h16V168z M512,88h-16v40h16V88z'/%3E%3Cg%3E%3Crect x='244' y='175.976' style='fill:%23E21B1B;' width='24' height='160.08'/%3E%3Crect x='175.976' y='244' style='fill:%23E21B1B;' width='160.08' height='24'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");}
[data-theme="dark"] .fu--src_select i {background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cpath style='fill:%23a0a0b0;' d='M512,0h-40v16h24v32h16V0z M432,0h-40v16h40V0z M352,0h-40v16h40V0z M272,0h-40v16h40V0z M192,0h-40 v16h40V0z M112,0H72v16h40V0z M32,0H0v16h32V0z M16,48H0v40h16V48z M16,128H0v40h16V128z M16,208H0v40h16V208z M16,288H0v40h16V288z M16,368H0v40h16V368z M16,448H0v40h16V448z M56,496H16v16h40V496z M136,496H96v16h40V496z M216,496h-40v16h40V496z M296,496h-40v16 h40V496z M376,496h-40v16h40V496z M456,496h-40v16h40V496z M512,488h-16v8l0,0v16h16V488z M512,408h-16v40h16V408z M512,328h-16v40 h16V328z M512,248h-16v40h16V248z M512,168h-16v40h16V168z M512,88h-16v40h16V88z'/%3E%3Cg%3E%3Crect x='244' y='175.976' style='fill:%23E21B1B;' width='24' height='160.08'/%3E%3Crect x='175.976' y='244' style='fill:%23E21B1B;' width='160.08' height='24'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");}
.fu--requiments {display: block;font-size: 12px;color: var(--color-widget-uploader-text);padding: 10px;}

.fu--loader {position: absolute;z-index: 2;top: 0;left: 0;width: 100%;height: 100%;background: var(--color-widget-uploader-loader-bg);display: flex;flex-direction: column;justify-content: center;color: var(--color-uploader-loader-text);text-align: center;}
.fu--loader div {display:flex;flex-direction:row;justify-content: center;}
.fu--loader div i {display:block; width:32px;height:32px; background-size: cover; margin-right:15px;background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cpath style='fill:%232D50A7;' d='M267.636,0c-12.853,0-23.273,10.42-23.273,23.273v93.091c0,12.853,10.42,23.273,23.273,23.273 c12.853,0,23.273-10.42,23.273-23.273V23.273C290.909,10.42,280.489,0,267.636,0z'/%3E%3Cpath style='fill:%2373A1FB;' d='M267.638,372.364c-12.853,0-23.273,10.42-23.273,23.273v93.091c0,12.853,10.42,23.273,23.273,23.273 c12.853,0,23.273-10.42,23.273-23.273v-93.091C290.911,382.784,280.491,372.364,267.638,372.364z'/%3E%3Cpath style='fill:%23355EC9;' d='M185.355,140.808L119.529,74.98c-9.086-9.089-23.822-9.089-32.912,0 c-9.089,9.089-9.089,23.824,0,32.912l65.826,65.828c4.544,4.544,10.501,6.817,16.455,6.817c5.955,0,11.913-2.273,16.455-6.817 C194.444,164.631,194.444,149.897,185.355,140.808z'/%3E%3Cg%3E%3Cpath style='fill:%23C4D9FD;' d='M477.091,232.727h-46.545c-12.853,0-23.273,10.42-23.273,23.273 c0,12.853,10.42,23.273,23.273,23.273h46.545c12.853,0,23.273-10.42,23.273-23.273 C500.364,243.147,489.944,232.727,477.091,232.727z'/%3E%3Cpath style='fill:%23C4D9FD;' d='M382.83,338.283c-9.087-9.089-23.823-9.087-32.912,0c-9.089,9.089-9.087,23.823,0,32.912 l65.828,65.825c4.544,4.544,10.501,6.816,16.457,6.816c5.956,0,11.913-2.273,16.455-6.816c9.089-9.089,9.089-23.824,0-32.912 L382.83,338.283z'/%3E%3C/g%3E%3Cpath style='fill:%233D6DEB;' d='M151.273,256c0-12.853-10.42-23.273-23.273-23.273H34.909c-12.853,0-23.273,10.42-23.273,23.273 c0,12.853,10.42,23.273,23.273,23.273H128C140.853,279.273,151.273,268.853,151.273,256z'/%3E%3Cpath style='fill:%235286FA;' d='M185.355,338.283c-9.087-9.089-23.824-9.089-32.912,0l-65.825,65.825 c-9.089,9.087-9.089,23.824,0,32.912c4.544,4.544,10.501,6.816,16.457,6.816c5.956,0,11.913-2.271,16.455-6.816l65.825-65.825 C194.444,362.108,194.444,347.372,185.355,338.283z'/%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A");}
.fu--loader .fu--loader_title {display: block;font-size: 13px;align-self: center;}
.fu--loader .fu--loader_text {display:flex;flex-direction:column;}
.fu--loader .fu--loader_text > * {font-style: normal;font-weight: normal;font-size: 12px;}

.fu--title {padding-bottom: 15px;font-weight: bold;font-size: 14px;}

.fu--list {display: grid;grid-template-columns: 1fr 1fr;padding-bottom: 15px;grid-gap: 10px;}
.fu--list .fu--item_image {display: grid;grid-template-columns: 90px 1fr;grid-column-gap: 13px}
.fu--list .fu--item_image .fu--image {display: flex;justify-content: center;}
.fu--list .fu--item_image img {border: 1px solid var(--color-widget-uploader-item-border);box-shadow: 3px 3px 9px 0px var(--color-widget-uploader-item-shadow);max-width: 100%;aspect-ratio: auto;align-self: baseline;}

.fu--list .fu--item_info {display: flex;flex-direction: column;justify-content: center;align-items: baseline;}
.fu--list .fu--item_title {color: var(--color-widget-uploader-item-title);font-size: 14px;padding: 5px 0;}
.fu--list .fu--delete {color: var(--color-widget-uploader-delete);font-size: 14px;margin: 5px 0;border-bottom: 1px dotted var(--color-widget-uploader-delete);cursor: pointer;padding-bottom: 3px;}
.fu--list .fu--delete:hover {color: var(--color-widget-uploader-delete-hover);border-bottom-color: var(--color-widget-uploader-delete-hover);}

.fu--list .fu--item_document {display: grid;grid-template-columns: 90px 1fr;grid-column-gap: 13px}
.fu--list .fu--item_document .fu--document {display: flex;flex-direction: column;justify-content: center;min-height:75px; background: linear-gradient(var(--color-widget-uploader-document-bg-start),var(--color-widget-uploader-document-bg-end));border: 1px solid var(--color-widget-uploader-item-border);box-shadow: 3px 3px 9px 0px var(--color-widget-uploader-item-shadow);color: var(--color-widget-uploader-document-text);text-align: center;width: 100%;height: 100%;padding: 0;margin: 0;}
.fu--list .fu--item_document .fu--doctype {display:block;font-weight: bold;font-size: 120%;padding: 0 0 7px 0;}
.fu--list .fu--item_document .fu--docsize {display:block; font-size:80%;}


.fu--errors p {color:var(--color-widget-uploader-error); font-size: 13px;font-weight: bold; padding:7px 10px;}
.fu--list > :not(:nth-last-child(1)) { margin-bottom:10px;}

.widgetUploader[data-loading="0"] .fu--loader {display:none;}

/* loader icon for dark theme */
[data-theme="dark"] .fu--loader div i {filter: brightness(1.3);}