:root {
    --hue: 210;
    --hsl-primary-dark: var(--hue) 50% 45%;
    --hsl-primary-contrast: var(--hue) 45% 50%;
    --hsl-primary-light: var(--hue) 55% 55%;
    --text-base-lightness-light: 30%;
    --text1-light: hsl(var(--hue), 20%, var(--text-base-lightness-light));
    --text2-light: hsl(var(--hue), 17%, calc(var(--text-base-lightness-light) + 15%));
    --text3-light: hsl(var(--hue), 15%, calc(var(--text-base-lightness-light) + 30%));
    --surface-base-lightness-light: 98%;
    --surface1-light: hsl(var(--hue), 20%, calc(var(--surface-base-lightness-light) + -8%));
    --surface2-light: hsl(var(--hue), 20%, calc(var(--surface-base-lightness-light) + -3%));
    --surface3-light: hsl(var(--hue), 20%, var(--surface-base-lightness-light));
    --surface4-light: white;
    --files-border-bottom-light: 0 1px 0 0 hsl(var(--hue), 20%, calc(var(--surface-base-lightness-light) + -12%));
    --img-placeholder-bg-light: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><path fill='hsl(210, 16%, 84%)' d='M40 41H8c-2.2 0-4-1.8-4-4V11c0-2.2 1.8-4 4-4h32c2.2 0 4 1.8 4 4v26c0 2.2-1.8 4-4 4z'/><circle fill='hsl(210, 15%, 95%)' cx='35' cy='16' r='3'/><path fill='hsl(210, 16%, 62%)' d='M20 16L9 32h22z'/><path fill='hsl(210, 15%, 73%)' d='M31 22l-8 10h16z'/></svg>");
    --color-danger-light: hsl(0, 60%, 55%);
    --color-info-light: var(--text1);
    --color-success-light: hsl(105, 30%, 50%);
    --popup-bg-light: black;
    --dropdown-shadow-light: 0 8px 25px -10px hsl(var(--hue), 60%, 10%);
    --rgb-theme-light: 255, 255, 255;
    --rgb-theme-invert-light: 0, 0, 0;
    --text-base-lightness-dark: 80%;
    --text1-dark: hsl(var(--hue), 20%, var(--text-base-lightness-dark));
    --text2-dark: hsl(var(--hue), 17%, calc(var(--text-base-lightness-dark) + -15%));
    --text3-dark: hsl(var(--hue), 14%, calc(var(--text-base-lightness-dark) + -30%));
    --surface-base-lightness-dark: 8%;
    --surface1-dark: hsl(var(--hue), 20%, var(--surface-base-lightness-dark));
    --surface2-dark: hsl(var(--hue), 20%, calc(var(--surface-base-lightness-dark) + 2%));
    --surface3-dark: hsl(var(--hue), 20%, calc(var(--surface-base-lightness-dark) + 4%));
    --surface4-dark: hsl(var(--hue), 20%, calc(var(--surface-base-lightness-dark) + 6%));
    --files-border-bottom-dark: 0 0 0 0 transparent;
    --img-placeholder-bg-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><path fill='hsl(210, 20%, 20%)' d='M40 41H8c-2.2 0-4-1.8-4-4V11c0-2.2 1.8-4 4-4h32c2.2 0 4 1.8 4 4v26c0 2.2-1.8 4-4 4z'/><circle fill='hsl(210, 20%, 50%)' cx='35' cy='16' r='3'/><path fill='hsl(210, 20%, 30%)' d='M20 16L9 32h22z'/><path fill='hsl(210, 20%, 40%)' d='M31 22l-8 10h16z'/></svg>");
    --color-danger-dark: hsl(0, 50%, 45%);
    --color-info-dark: hsl(var(--hue), 20%, calc(var(--surface-base-lightness-dark) + 12%));
    --color-success-dark: hsl(105, 30%, 45%);
    --popup-bg-dark: black;
    --dropdown-shadow-dark: 0 10px 40px -15px black;
    --rgb-theme-dark: 0, 0, 0;
    --rgb-theme-invert-dark: 255, 255, 255;
    --surface-active: var(--surface3);
    --primary: hsl(var(--hue), 50%, 50%);
    --border-color: rgba(var(--rgb-theme-invert), .05);
}
.toastify-text, .dropdown-header-text, .menu-a, .crumb, .sortbar-item-text, .date, .ext-inner, .files-list .name, .files-imagelist .name, .files-imagelist .title, .files-blocks .name, .files-blocks .title, .files-grid .name, .files-rows .name, .columns-noinfo .name, .pswp__search, .popup-date, .modal-title, .modal-info-mime-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

*, ::before, ::after {
    box-sizing: border-box;
    background-repeat: no-repeat;
}



.license-feature, .exif-Model, .exif-gps, .modal-info-meta, .modal-info-exif, .modal-info-mime, .modal-info-permissions, .modal-info-date {
    display: flex;
    flex-direction: row;
    align-items: center;
}

    .files-imagelist .exif > *:not(:first-child), .popup-image-meta > *:not(:first-child), .popup-exif > *:not(:first-child), .popup-owner > *:not(:first-child), .popup-location > *:not(:first-child), .modal-info-meta > *:not(:first-child), .modal-info-exif > *:not(:first-child) {
        border-left: 1px solid var(--divider-color, var(--border-color));
        margin-left: var(--divider-space, 0.8em);
        padding-left: var(--divider-space, 0.8em);
    }

.no-pointer {
    pointer-events: none;
}

[data-theme="dark"], [data-theme="contrast"] #topbar, [data-theme="contrast"] #sidebar, [data-theme="contrast"] #sidebar-bg, .alert, .dropdown-menu, .svg-file-ext, [data-tooltip], .pswp__caption {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.toastify, .cm-s-one-dark, #topbar-info {
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
}

.body-loading:before, .form-loading:before, .updating:before, .files-spinner:before, .modal-preview-spinner:before, .toastify-loading:before, .sidebar-spinner:before, .menu-spinner:before, .dropdown-lang-loading:before, .pswp__spinner:before {
    content: '';
    display: inline-block;
    vertical-align: bottom;
    border-radius: 50%;
    animation: rotate 0.75s linear infinite,opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    width: var(--spinner-size, 24px);
    height: var(--spinner-size, 24px);
    border-style: solid;
    border-width: var(--spinner-width, 1px);
    border-color: var(--spinner-track, transparent);
    border-top-color: var(--spinner-color, currentColor);
    position: var(--spinner-position, absolute);
    margin: var(--spinner-margin, 0);
}


iframe, img, video {
    max-width: 100%;
    height: auto;
    border: 0;
}

svg {
    fill: currentColor;
}

iframe {
    border: 0;
}

.svg-icon {
    width: 1em;
    height: 1em;
    font-size: var(--svg-icon-font-size, 18px);
    vertical-align: bottom;
    pointer-events: none;
    flex-shrink: 0;
    margin: var(--svg-icon-margin, 0);
    fill: var(--svg-icon-fill, currentColor);
}


.files-a {
    display: block;
    position: relative;
    touch-action: manipulation;
    overflow: hidden;
    color: var(--text3);
    --button-icon-color: var(--text2);
    background-color: var(--surface2);
    box-shadow: var(--box-shadow, none);
    transition: background-color 0.3s,box-shadow 0.3s,transform 0.3s var(--scale-delay, 0s);
    transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

    .files-a:hover {
        background-color: var(--surface-active);
    }

@media (hover: hover) {
    .files-a:active {
        background-color: var(--surface-active);
        outline: none;
        box-shadow: var(--box-shadow-active, none);
    }

    .files-a.cm-active:active, .files-a:has(.files-context:active) {
        box-shadow: 0 0 0 2px var(--surface-active),0 0 0 3px var(--text2);
    }

    .files-a:active:not(:has(.files-context:active)):not(.cm-active) {
        --surface-active: var(--surface4);
        transform: var(--active-scale, none);
    }

        .files-a:active:not(:has(.files-context:active)):not(.cm-active) .svg-file-ext {
            fill-opacity: .99;
        }
}

.files-a.cm-active {
    background-color: var(--surface-active);
    box-shadow: 0 0 0 3px var(--surface-active),0 0 0 4px var(--text2);
    z-index: 1;
    outline: 1px dashed var(--text2);
    outline-offset: 6px;
}

.files-a:focus {
    z-index: 2;
}

@media (hover: none) {
    .files-a:hover {
        z-index: 2;
    }
}

.files-a:focus-visible {
    outline-color: var(--text3);
    outline-offset: 2px;
}

@media (hover: hover) {
    .files-svg {
        transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .files-a-svg:active .files-svg, .cm-active .files-svg {
        filter: var(--files-svg-active-filter, none);
    }
}

.files-img, .files-svg {
    aspect-ratio: var(--ratio, 1);
    display: block;
    width: 100%;
    height: 100%;
}

.files-img {
    /*object-fit: var(--img-object-fit-ui, cover);*/
    padding: 5px;
}

.files-img-svg {
    object-fit: contain;
}

.files-img-ico {
    object-fit: scale-down;
}

.svg-file {
    padding: var(--svg-file-padding);
}

.svg-folder-large {
    --svg-folder-bg: var(--svg-folder-bg-large);
    --svg-folder-fg: var(--svg-folder-fg-large);
}

.svg-folder-bg {
    fill: var(--svg-folder-bg);
}

.svg-folder-fg {
    fill: var(--svg-folder-fg);
}

.svg-folder-symlink {
    fill: var(--svg-folder-bg);
}

.svg-file-forbidden, .svg-folder-forbidden {
    fill: var(--color-danger);
}

.path-exclamation {
    fill: white;
    fill-opacity: .85;
}

.svg-application {
    fill: var(--type-application);
}

.svg-archive {
    fill: var(--type-archive);
}

.svg-audio {
    fill: var(--type-audio);
}

.svg-cd {
    fill: var(--type-cd);
}

.svg-code {
    fill: var(--type-code);
}

.svg-default {
    fill: var(--type-default);
}

.svg-excel {
    fill: var(--type-excel);
}

.svg-font {
    fill: var(--type-font);
}

.svg-open_in_new {
    fill: var(--type-open_in_new);
}

.svg-pdf {
    fill: var(--type-pdf);
}

.svg-powerpoint {
    fill: var(--type-powerpoint);
}

.svg-text {
    fill: var(--type-text);
}

.svg-video {
    fill: var(--type-video);
}

.svg-word {
    fill: var(--type-word);
}

.svg-youtube {
    fill: var(--type-youtube);
}

.svg-vimeo {
    fill: var(--type-vimeo);
}

.svg-image, .polygon-image, .svg-panorama_variant {
    fill: var(--type-image);
}

    .svg-image .svg-file-text-bg {
        fill: var(--svg-image-text-bg);
    }

.svg-folder-large {
    --svg-folder-bg: var(--svg-folder-bg-large);
    --svg-folder-fg: var(--svg-folder-fg-large);
}

.files-img-placeholder {
    background-size: var(--img-placeholder-size, 50%);
    background-position: center;
    background-position-y: var(--img-placeholder-position-y, 50%);
    background-repeat: no-repeat;
}

    .files-img-placeholder:not(.files-lazy) {
        background-image: var(--img-placeholder-bg);
        transition: opacity .3s;
    }

@supports not (aspect-ratio: 1) {
    .files-img-placeholder {
        min-height: var(--img-placeholder-min-height, auto);
    }
}

.files-folder-preview {
    position: absolute;
    box-shadow: 0 2px 10px -5px black;
    object-position: var(--img-object-position, 50% 25%);
    object-fit: cover;
    opacity: 0;
    transition: opacity .2s;
    width: var(--folder-preview-width, 44%);
    left: var(--folder-preview-left, 50%);
    top: var(--folder-preview-top, calc(50% - 10px));
    transform: translateX(-50%) translateY(var(--folder-preview-translateY, -25%));
}

@supports (aspect-ratio: 1) {
    .files-folder-preview {
        aspect-ratio: 1;
        max-height: var(--folder-preview-max-height, none);
    }
}

@supports not (aspect-ratio: 1) {
    .files-folder-preview {
        height: var(--folder-preview-width, 44%);
    }
}

[data-theme="dark"] .dropdown-menu-topbar, [data-theme="contrast"] .dropdown-menu-topbar {
    --dropdown-top-color: var(--primary);
}

.svg-overlay-play {
    padding: 1px;
    fill: white;
    position: absolute;
    z-index: 1;
    border-radius: 3px;
    font-size: 26px;
    left: var(--svg-play-left, calc(50% - 26px/2));
    top: calc(50% - 26px/2);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1),top 0s,left 0s,margin 0s;
    background-color: var(--overlay-play-surface, rgba(0,0,0,0.3));
    opacity: 0;
}

.files-a-loaded .svg-overlay-play {
    opacity: 1;
}

.files-a-img:hover .svg-overlay-play {
    --overlay-play-surface: var(--type-color);
    transform: scale(1.1);
}

@media (hover: hover) {
    .files-a-img:active .svg-overlay-play {
        transform: scale(1.2);
        box-shadow: 0 1px 5px -2px black;
    }
}

.svg-overlay-play-embed {
    --overlay-play-surface: var(--type-color);
}

.files-icon-overlay {
    top: 0;
    position: absolute;
    z-index: 1;
    margin: calc(var(--button-padding, 0px) + var(--button-margin, 0px));
}

@media (hover: hover) {
    .files-a-loaded .files-icon-overlay {
        transition: opacity 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    .files-a-loaded:active:not(:has(.files-context:active)) .files-icon-overlay {
        opacity: 0;
    }
}

.files-context {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
}


@media (hover: hover) {
    .files-context {
        --svg-icon-font-size: 18px;
        padding: calc(var(--button-padding) + 3px);
    }
}

.files-context.cm-active {
    --button-hsl: var(--hue) 20% 30%;
}

.files-a:hover .files-context, .files-context.cm-active {
    opacity: 1;
}

@media (hover: hover) {
    .files-a-loaded:active .files-context:not(:active) {
        opacity: 0;
    }
}

.name {
    color: var(--text1);
}

.title {
    color: var(--text2);
}

.size, .dimensions, .exif, .date {
    white-space: nowrap;
}

.flex {
    display: none;
    flex-basis: 100%;
}

.ext-inner {
    color: var(--text2);
    float: right;
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    background-color: var(--surface3);
    box-shadow: inset 0 0 0 1px var(--text3);
    padding: .5em;
    line-height: 1;
    border-radius: 3px;
    max-width: 60px;
}

.files-list .files-a {
    --surface-active: var(--surface-list-hover, var(--surface4));
    --box-shadow-active: 0 0 0 3px var(--surface-active), -5px 0 0 0 var(--type-color), 0 0 0 4px var(--surface1);
}

    .files-list .files-a:not(:last-child) {
        margin-bottom: 1px;
    }

@media (min-width: 768px) {
    .files-list .files-a:active, .files-list .files-a.cm-active {
        border-radius: 3px;
    }
}

@media (hover: hover) {
    .files-list .files-a:hover {
        --box-shadow: 0 0 0 0 var(--surface-list-hover), -2px 0 0 0 var(--type-color);
    }

    .files-list .files-a:not(:active):not(:focus):not(.cm-active), .files-list .files-a .files-context:not(:hover) {
        transition-duration: 0s;
    }
}

.files-list .files-data {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    line-height: 165%;
}

.files-list .files-svg, .files-list .files-img, .files-list .title, .files-list .fileperms, .files-list .mime, .files-list .exif, .files-list .files-folder-preview, .files-list .files-icon-overlay, .files-list .svg-overlay-play {
    display: none;
}

.files-list .icon {
    order: 1;
}

.files-list .name {
    order: 2;
    flex: 1;
    padding-left: 7px;
}

.files-list .gps {
    order: 3;
    margin-left: 5px;
}

@media (max-width: 767.98px) {
    .files-list {
        --button-padding: 8px;
        --button-margin: 0 5px 0 0;
    }
}

@media (max-width: 767.98px) and (pointer: fine) {
    .files-list {
        --button-padding: 3px;
        --button-margin: 5px;
    }
}

@media (max-width: 767.98px) {
    .files-list .files-a:hover .ext {
        opacity: 0;
    }

    .files-list .files-data {
        padding: 8px 8px 8px 10px;
        font-size: .9375rem;
    }

    .files-list .name {
        font-size: 1rem;
    }

    .files-list .ext {
        order: 4;
    }

    .files-list .ext-inner {
        margin-left: 10px;
    }

    .files-list .flex {
        order: 6;
        display: block;
    }

    .files-list .date {
        order: 7;
        margin-left: 31px;
    }

    .files-list .size {
        order: 8;
    }

    .files-list .dimensions {
        order: 9;
    }

    .files-list .size, .files-list .dimensions {
        border-left: 1px solid var(--divider-color, var(--border-color));
        margin-left: var(--divider-space, 0.8em);
        padding-left: var(--divider-space, 0.8em);
    }

    .files-list .dimensions {
        flex: 1;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}

@media (max-width: 389.98px) {
    .files-list .date {
        margin-left: 2px;
    }
}

@media (max-width: 575.98px) {
    .files-list {
        --divider-space: .6em;
    }

        .files-list .files-data {
            padding-left: 7px;
        }
}

@media (min-width: 768px) {
    .files-list {
        --button-padding: 5px;
        padding: 20px;
    }
}

@media (min-width: 768px) and (pointer: fine) {
    .files-list {
        --button-padding: 2px;
        --button-margin: 3px;
    }
}

@media (min-width: 768px) {
    .files-list:before {
        border-radius: 3px 3px 0 0;
    }

    .files-list:after {
        border-radius: 0 0 3px 3px;
    }

    .files-list:before, .files-list:after {
        content: '';
        display: block;
        height: 10px;
        background-color: var(--surface3);
    }

    .files-list .files-data {
        padding: 6px 0 6px 8px;
    }

    .files-list .size, .files-list .date {
        color: var(--text2);
    }

    .files-list .dimensions {
        order: 4;
        margin-left: .5rem;
    }

    .files-list .ext {
        order: 5;
        flex-basis: 65px;
    }

    .files-list .size {
        order: 6;
        font-weight: var(--font-weight-bold);
        margin-right: 20px;
        text-align: right;
        flex-basis: 100px;
    }

    .files-list .date {
        order: 7;
        flex-basis: calc(155px + var(--list-date-flex, 3) * 8px);
    }
}

@media (min-width: 768px) and (hover: hover) {
    .files-list .files-data {
        padding: 5px 0 5px 8px;
        font-size: .9375rem;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .sidebar-closed .files-list:before, .sidebar-closed .files-list:after {
        height: 20px;
    }

    .sidebar-closed .files-list .files-data {
        padding-left: 15px;
    }

    .sidebar-closed .files-list .dimensions {
        margin-left: 1rem;
    }

    .sidebar-closed .files-list .ext {
        flex-basis: 70px;
    }

    .sidebar-closed .files-list .size {
        margin-right: 30px;
        flex-basis: 110px;
    }
}

@media (min-width: 1200px) {
    .files-list:before, .files-list:after {
        height: 20px;
    }

    .files-list .files-data {
        padding-left: 15px;
    }

    .files-list .dimensions {
        margin-left: 1rem;
    }

    .files-list .ext {
        flex-basis: 70px;
    }

    .files-list .size {
        margin-right: 30px;
        flex-basis: 110px;
    }
}

@media (min-width: 1600px) {
    #main {
        --list-max: var(--list-max-width, 1040px);
    }
}

@media (min-width: 1400px) {
    .sidebar-closed {
        --list-max: var(--list-max-width, 1040px);
    }
}

.files-list, .files-imagelist {
    max-width: var(--list-max, none);
}

    .files-list .files-a:nth-child(odd):not(.cm-active):not(:hover), .files-imagelist .files-a:nth-child(odd):not(.cm-active):not(:hover) {
        background-color: var(--surface3);
    }

.files-imagelist {
    --svg-play-left: calc(100px/2 - 26px/2);
    --folder-preview-width: 50px;
    --folder-preview-left: 50px;
    --folder-preview-top: 50%;
    --svg-file-padding: 12px;
    --svg-folder-padding: 6px;
    --img-placeholder-min-height: var(--imagelist-min-height, calc(100px / var(--ratio, 1)));
}

    .files-imagelist .files-a {
        display: flex;
        margin-bottom: 1px;
        --surface-active: var(--surface4);
        --box-shadow: 0 0 0 var(--surface-imagelist-hover);
        --box-shadow-active: 0 0 0 3px var(--surface-active), 0 0 0 4px var(--surface1);
    }

    .files-imagelist .files-img, .files-imagelist .files-svg {
        width: 100px;
        flex-shrink: 0;
        box-shadow: inset -1px 0 0 0 var(--surface1);
    }

    .files-imagelist .files-svg {
        height: 100px;
    }

    .files-imagelist .files-img {
        height: var(--imagelist-height, 100px);
        --img-object-fit: cover;
    }

    .files-imagelist .files-data {
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        flex: 1;
        align-content: flex-start;
        align-items: center;
        padding: 8px 8px 8px 12px;
        line-height: 165%;
    }

    .files-imagelist .icon, .files-imagelist .fileperms, .files-imagelist .mime, .files-imagelist .gps, .files-imagelist .files-icon-overlay .svg-path-marker {
        display: none;
    }

    .files-imagelist .name {
        order: 2;
        flex: 1;
        font-size: 1rem;
        padding-right: 1px;
    }

    .files-imagelist .title, .files-imagelist .exif {
        flex-basis: 100%;
        font-size: .9375rem;
    }

    .files-imagelist .title {
        order: 16;
    }

    .files-imagelist .exif {
        order: 17;
        display: flex;
        --svg-icon-font-size: 18px;
    }

@media (max-width: 767.98px) {
    .files-imagelist {
        --button-padding: 8px;
        --button-margin: 0 5px 0 0;
    }
}

@media (max-width: 767.98px) and (pointer: fine) {
    .files-imagelist {
        --button-padding: 3px;
        --button-margin: 5px;
    }
}

@media (max-width: 767.98px) {
    .files-imagelist .files-a:hover .ext {
        opacity: 0;
    }

    .files-imagelist .files-data {
        font-size: .9375rem;
    }

    .files-imagelist .exif {
        display: none;
    }

    .files-imagelist .title {
        order: 5;
    }

    .files-imagelist .ext {
        order: 4;
    }

    .files-imagelist .flex {
        order: 6;
        display: block;
    }

    .files-imagelist .date {
        order: 7;
    }

    .files-imagelist .size {
        order: 8;
    }

    .files-imagelist .dimensions {
        order: 9;
        margin-right: -5px;
        flex: 1;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .files-imagelist .size, .files-imagelist .dimensions {
        border-left: 1px solid var(--divider-color, var(--border-color));
        margin-left: var(--divider-space, 0.8em);
        padding-left: var(--divider-space, 0.8em);
    }
}

@media (max-width: 575.98px) {
    .files-imagelist {
        --divider-space: 3%;
    }
}

@media (min-width: 768px) {
    .files-imagelist {
        --button-padding: 7px;
        --button-margin: 3px;
    }
}

@media (min-width: 768px) and (pointer: fine) {
    .files-imagelist {
        --button-padding: 3px;
        --button-margin: 7px;
    }
}

@media (min-width: 768px) {
    .files-imagelist .files-data {
        padding: 10px 0 10px 14px;
    }

    .files-imagelist .size, .files-imagelist .date {
        color: var(--text2);
    }

    .files-imagelist .dimensions {
        order: 4;
        margin-left: .5rem;
    }

    .files-imagelist .ext {
        order: 5;
        flex-basis: 65px;
    }

    .files-imagelist .size {
        order: 6;
        font-weight: var(--font-weight-bold);
        margin-right: 20px;
        text-align: right;
        flex-basis: 100px;
    }

    .files-imagelist .date {
        order: 7;
        flex-basis: calc(160px + var(--list-date-flex, 3) * 9px);
    }
}

@media (min-width: 992px) {
    .files-imagelist {
        padding: 20px;
    }

        .files-imagelist .files-a {
            border-radius: 3px;
        }

    .sidebar-closed .files-imagelist .ext {
        flex-basis: 70px;
    }

    .sidebar-closed .files-imagelist .size {
        margin-right: 30px;
        flex-basis: 110px;
    }
}

@media (min-width: 1200px) {
    .files-imagelist .ext {
        flex-basis: 70px;
    }

    .files-imagelist .size {
        margin-right: 30px;
        flex-basis: 110px;
    }
}

.files-blocks {
    --svg-play-left: calc(var(--blocks-height, 140px)/2 - 26px/2);
    --folder-preview-width: calc(var(--blocks-height, 140px) / 2);
    --folder-preview-left: calc(var(--blocks-height, 140px) / 2);
    --folder-preview-top: 50%;
    --svg-file-padding: calc(var(--blocks-height, 140px) / 8);
    --svg-folder-padding: calc(var(--blocks-height, 140px) / 14);
    --img-object-fit-ui: var(--img-object-fit);
    --button-padding: 9px;
    --button-margin: 1px;
}

@media (pointer: fine) {
    .files-blocks {
        --button-padding: 3px;
        --button-margin: 7px;
    }
}

.files-blocks .files-a {
    --box-shadow: 0 0 0 0 var(--surface-active);
    --box-shadow-active: 0 0 0 3px var(--surface-active);
    height: var(--blocks-height, 140px);
    display: flex;
    margin: var(--blocks-margin, 1px 0);
}

    .files-blocks .files-a:hover .name {
        margin-right: 32px;
    }

.files-blocks .files-img, .files-blocks .files-svg {
    width: var(--blocks-height, 140px);
    flex-shrink: 0;
    box-shadow: inset -1px 0 0 0 var(--surface1);
}

.files-blocks .files-data {
    padding: 10px 10px 5px 15px;
    overflow: hidden;
    width: 100%;
    font-size: .9375rem;
}

.files-blocks .fileperms, .files-blocks .mime, .files-blocks .ext, .files-blocks .icon, .files-blocks .exif, .files-blocks .gps {
    display: none;
}

.files-blocks .name, .files-blocks .title, .files-blocks .dimensions, .files-blocks .size, .files-blocks .date {
    display: block;
}

.files-blocks .name {
    font-size: 1rem;
}

@media (max-width: 389.98px) {
    .files-blocks .files-data {
        padding: 8px 5px 5px 12px;
    }
}

@media (min-width: 390px) {
    .files-blocks {
        --blocks-margin: .5rem;
    }

        .files-blocks .files-a {
            border-radius: 3px;
            --box-shadow: 0 0 0 0 var(--surface-active), var(--files-border-bottom);
        }
}

@media (min-width: 576px) {
    .files-blocks {
        --blocks-margin: var(--blocks-space, calc(.9vw + 5px));
    }
}

@media (min-width: 768px) {
    .files-blocks {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(var(--blocks-width, calc(340px + 2%)), 1fr));
        grid-auto-rows: 1fr;
        margin: var(--blocks-space, calc(.9vw + 5px));
        grid-gap: var(--blocks-space, calc(.9vw + 5px));
        --blocks-margin: 0;
    }
}

@media (min-width: 1400px) {
    .files-blocks {
        margin: var(--blocks-space, 20px);
        grid-gap: var(--blocks-space, 20px);
    }
}

.files-grid {
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-size, 160px), 1fr));
    grid-auto-rows: 1fr;
    padding: var(--grid-space, calc((8vw + var(--grid-size, 160px)) / 900 * var(--grid-space-factor, 50)));
    grid-gap: var(--grid-space, calc((8vw + var(--grid-size, 160px)) / 900 * var(--grid-space-factor, 50)));
    --img-object-fit-ui: var(--img-object-fit);
    --folder-preview-max-height: 44%;
}

    .files-grid .files-a {
        border-radius: var(--grid-border-radius, 3px);
        aspect-ratio: var(--grid-aspect, 1);
    }

@supports not (aspect-ratio: 1) {
    .files-grid::before {
        content: '';
        width: 0;
        padding-bottom: calc(100% * (2.5 - var(--grid-aspect, 1)));
    }

    .files-grid::before, .files-grid .files-a:first-child {
        grid-row: 1 / 1;
        grid-column: 1 / 1;
    }

    .files-grid .files-img, .files-grid .files-svg {
        position: absolute;
    }
}

.files-grid, .files-rows, .files-columns {
    --button-padding: 9px;
    --button-margin: 3%;
}

@media (hover: hover) {
    .files-grid, .files-rows, .files-columns {
        --button-padding: 3px;
    }
}

.files-grid .files-a-loaded, .files-rows .files-a-loaded, .files-columns .files-a-loaded {
    cursor: var(--files-cursor, pointer);
    --button-icon-color: white;
    --button-hsl: var(--hue) 20% 14%;
}

.files-grid, .files-rows, .columns-noinfo {
    --img-placeholder-position-y: 45%;
    --svg-file-padding: 10% 18% calc(20px + 10%);
    --svg-folder-padding: 0 12% 20px;
    --active-scale: scale(1.02);
    --box-shadow: var(--files-border-bottom);
}

    .files-grid .files-a-loaded:not(:active), .files-rows .files-a-loaded:not(:active), .columns-noinfo .files-a-loaded:not(:active) {
        --scale-delay: .3s;
    }

    .files-grid .files-data, .files-rows .files-data, .columns-noinfo .files-data {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .files-grid .mime, .files-grid .date, .files-grid .icon, .files-grid .size, .files-grid .exif, .files-grid .dimensions, .files-grid .ext, .files-grid .title, .files-grid .gps, .files-rows .mime, .files-rows .date, .files-rows .icon, .files-rows .size, .files-rows .exif, .files-rows .dimensions, .files-rows .ext, .files-rows .title, .files-rows .gps, .columns-noinfo .mime, .columns-noinfo .date, .columns-noinfo .icon, .columns-noinfo .size, .columns-noinfo .exif, .columns-noinfo .dimensions, .columns-noinfo .ext, .columns-noinfo .title, .columns-noinfo .gps {
        display: none;
    }

    .files-grid .name, .files-rows .name, .columns-noinfo .name {
        display: block;
        font-size: var(--grid-font-size, 0.875rem);
        color: var(--text2);
        font-weight: 400;
        text-align: center;
        line-height: 1;
        padding: var(--name-padding, calc(.3em + 3%));
    }

    .files-grid .files-a-loaded .files-data, .files-rows .files-a-loaded .files-data, .columns-noinfo .files-a-loaded .files-data {
        opacity: var(--files-data-opacity, 0);
        transition: opacity var(--files-data-transition-duration, 0.5s) cubic-bezier(0.215, 0.61, 0.355, 1);
        background: linear-gradient(rgba(0,0,0,0.2), transparent 30%, transparent 60%, rgba(0,0,0,0.6));
    }

    .files-grid .files-a-loaded:hover, .files-rows .files-a-loaded:hover, .columns-noinfo .files-a-loaded:hover {
        --files-data-opacity: 1;
    }

@media (hover: hover) {
    .files-grid .files-a-loaded, .files-rows .files-a-loaded, .columns-noinfo .files-a-loaded {
        --files-data-transition-duration: 0.25s;
    }

        .files-grid .files-a-loaded.files-data-hidden .files-data, .files-grid .files-a-loaded:active:not(:has(.files-context:active)), .files-rows .files-a-loaded.files-data-hidden .files-data, .files-rows .files-a-loaded:active:not(:has(.files-context:active)), .columns-noinfo .files-a-loaded.files-data-hidden .files-data, .columns-noinfo .files-a-loaded:active:not(:has(.files-context:active)) {
            --files-data-opacity: 0;
        }
}

.files-grid .files-a-loaded.cm-active, .files-rows .files-a-loaded.cm-active, .columns-noinfo .files-a-loaded.cm-active {
    --files-data-opacity: 1;
}

.files-grid .files-a-loaded .name, .files-rows .files-a-loaded .name, .columns-noinfo .files-a-loaded .name {
    color: white;
    font-weight: normal;
}

.files-rows {
    --img-placeholder-size: calc(var(--rows-size, 150px) / 1.8);
    --img-placeholder-min-height: var(--rows-height, var(--rows-size, 150px));
    --name-padding: calc(.25em + var(--rows-size, 150px)/20);
    --button-margin: calc(var(--rows-size, 150px)/30);
    display: flex;
    flex-wrap: wrap;
    padding: var(--rows-space, calc((8% + var(--rows-size, 150px)) / 1000 * var(--rows-space-factor, 50))) 0 0 var(--rows-space, calc((8% + var(--rows-size, 150px)) / 1000 * var(--rows-space-factor, 50)));
    justify-content: var(--rows-justify-content, space-evenly);
}

    .files-rows:after {
        content: '';
        flex-grow: 9;
    }

    .files-rows .files-a {
        flex-basis: calc(var(--ratio, 1) * var(--rows-size, 150px));
        flex-grow: var(--rows-flex-grow, 1);
        height: var(--rows-height, auto);
        margin: 0 var(--rows-space, calc((8% + var(--rows-size, 150px)) / 1000 * var(--rows-space-factor, 50))) var(--rows-space, calc((8% + var(--rows-size, 150px)) / 1000 * var(--rows-space-factor, 50))) 0;
        border-radius: var(--rows-border-radius, 3px);
    }

.files-columns {
    columns: var(--columns-size, 180px);
    column-gap: var(--columns-space, calc((10vw + var(--columns-size, 180px)) / 1000 * var(--columns-space-factor, 50)));
    padding: var(--columns-space, calc((10vw + var(--columns-size, 180px)) / 1000 * var(--columns-space-factor, 50)));
    --img-placeholder-min-height: calc(var(--columns-size, 180px) / var(--ratio, 1));
}

    .files-columns .files-a {
        page-break-inside: avoid;
        break-inside: avoid-column;
        display: inline-block;
        vertical-align: middle;
        width: 100%;
        border-radius: var(--columns-border-radius, 3px);
        margin-bottom: var(--columns-space, calc((10vw + var(--columns-size, 180px)) / 1000 * var(--columns-space-factor, 50)));
        z-index: auto;
    }

    .files-columns .files-img-ico {
        width: auto;
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

.columns-info {
    --ratio: auto;
    --svg-file-padding: 15% 25%;
    --svg-folder-padding: 0% 18% 2%;
    --folder-preview-width: 36%;
    --folder-preview-top: 0;
    --folder-preview-translateY: 64%;
}

    .columns-info .files-a {
        --box-shadow: 0 0 0 0 var(--surface-active);
        --box-shadow-active: 0 0 0 3px var(--surface-active);
    }

    .columns-info .files-a-loaded:before {
        transition: opacity 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
        opacity: 0;
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        background: linear-gradient(rgba(0,0,0,0.2), transparent 100px);
    }

    .columns-info .files-a-loaded:hover:before {
        opacity: 1;
    }

    .columns-info .files-data {
        display: flex;
        flex-direction: column;
        padding: calc(.3em + 3%);
        line-height: 1.3;
        gap: .2em;
        box-shadow: 0 -1px 0 0 var(--surface1);
        font-size: .8125rem;
    }

    .columns-info .icon, .columns-info .ext, .columns-info .exif-gps {
        display: none;
    }

    .columns-info .gps {
        position: absolute;
        align-self: flex-end;
        --svg-icon-font-size: 18px;
    }

        .columns-info .gps + .name {
            padding-right: 18px;
        }

    .columns-info .files-icon-overlay .svg-path-marker {
        display: none;
    }

    .columns-info .name {
        font-size: .875rem;
        word-break: break-all;
    }

    .columns-info .title {
        word-break: break-word;
    }

@supports (-webkit-line-clamp: 3) {
    .columns-info .name, .columns-info .title {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

.columns-info .exif {
    display: flex;
    flex-wrap: wrap;
    order: 10;
    border-top: 1px solid var(--border-color);
    margin-top: .3em;
    padding-top: .5em;
    column-gap: .5em;
    row-gap: .1em;
}


[data-theme="contrast"] {
    --modal-surface: var(--surface4);
    --modal-box-shadow: 0 5px 35px -15px var(--surface1-dark);
    --modal-bg: hsl(var(--hue) 20% 14% / 85%);
    --dropdown-shadow: var(--dropdown-shadow-light);
    --files-svg-active-filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .1));
    --theme-dark-rotate: 45deg;
    --hsl-primary: var(--hsl-primary-contrast);
}

    [data-theme="contrast"] .cm-sidebar {
        --dropdown-shadow: var(--dropdown-shadow-dark);
    }

[data-theme="light"] {
    --modal-surface: var(--surface4);
    --modal-bg: hsl(var(--hue) 18% 78% / 80%);
    --modal-box-shadow: 0 5px 25px -15px hsl(var(--hue), 20%, 40%);
    --dropdown-shadow: var(--dropdown-shadow-light);
    --files-svg-active-filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .1));
    --theme-contrast-rotate: 45deg;
    --hsl-primary: var(--hsl-primary-light);
}

[data-theme="dark"] {
    --modal-bg: hsl(var(--hue) 20% var(--surface-base-lightness-dark) / 90%);
    --modal-surface: hsl(var(--hue), 20%, calc(var(--surface-base-lightness-dark) + 7%));
    --modal-box-shadow: 0 5px 25px -15px black;
    --files-svg-active-filter: drop-shadow(0 7px 15px rgba(0, 0, 0, .25));
    --dropdown-shadow: var(--dropdown-shadow-dark);
    --theme-light-rotate: 45deg;
    --hsl-primary: var(--hsl-primary-dark);
}

[data-theme="light"], [data-theme="contrast"] {
    color-scheme: light;
    --text1: var(--text1-light);
    --text2: var(--text2-light);
    --text3: var(--text3-light);
    --surface1: var(--surface1-light);
    --surface2: var(--surface2-light);
    --surface3: var(--surface3-light);
    --surface4: var(--surface4-light);
    --files-border-bottom: var(--files-border-bottom-light);
    --img-placeholder-bg: var(--img-placeholder-bg-light);
    --color-danger: var(--color-danger-light);
    --color-info: var(--color-info-light);
    --color-success: var(--color-success-light);
    --popup-bg: var(--popup-bg-light);
    --rgb-theme: var(--rgb-theme-light);
    --rgb-theme-invert: var(--rgb-theme-invert-light);
    --svg-file-bg: hsl(60, 17%, calc(var(--surface-base-lightness-light) - 12%));
    --svg-file-flip: hsl(52, 16%, calc(var(--surface-base-lightness-light) - 20%));
    --svg-file-icon: hsl(19, 13%, calc(var(--surface-base-lightness-light) - 27%));
    --svg-folder-bg: hsl(var(--hue), 45%, 55%);
    --svg-folder-fg: hsl(var(--hue), 50%, 65%);
    --svg-folder-bg-large: hsl(var(--hue), 50%, 65%);
    --svg-folder-fg-large: hsl(var(--hue), 55%, 75%);
    --type-default: hsl(var(--hue), 15%, 65%);
    --type-application: hsl(var(--hue), 65%, 55%);
    --type-archive: hsl(39, 76%, 60%);
    --type-audio: hsl(21, 77%, 55%);
    --type-excel: hsl(135, 30%, 59%);
    --type-word: hsl(205, 84%, 59%);
    --type-pdf: hsl(359, 50%, 55%);
    --type-cd: hsl(15, 72%, 70%);
    --type-code: hsl(10, 69%, 62%);
    --type-text: hsl(210, 50%, 60%);
    --type-open_in_new: var(--type-text);
    --type-powerpoint: hsl(13, 65%, 51%);
    --type-font: hsl(286, 45%, 65%);
    --type-video: hsl(357, 79%, 65%);
    --type-youtube: hsl(0, 90%, 55%);
    --type-vimeo: hsl(195, 83%, 51%);
    --type-image: hsl(92, 36%, 58%);
    --svg-image-text-bg: hsl(92, 32%, 50%);
    --svg-image-sun: hsl(48, 85%, 65%);
    --font-weight-bold: 500;
    --font-weight-letter-spacing: normal;
    --surface-list-hover: var(--surface1-light);
}

[data-theme="contrast"], [data-theme="light"] {
    --surface-base-lightness-dark: 12%;
    --text-base-lightness-dark: 84%;
}

    [data-theme="dark"], [data-theme="contrast"] #topbar, [data-theme="contrast"] #sidebar, [data-theme="contrast"] #sidebar-bg {
        color-scheme: dark;
        color: var(--text1);
        --text1: var(--text1-dark);
        --text2: var(--text2-dark);
        --text3: var(--text3-dark);
        --surface1: var(--surface1-dark);
        --surface2: var(--surface2-dark);
        --surface3: var(--surface3-dark);
        --surface4: var(--surface4-dark);
        --files-border-bottom: var(--files-border-bottom-dark);
        --img-placeholder-bg: var(--img-placeholder-bg-dark);
        --color-danger: var(--color-danger-dark);
        --color-info: var(--color-info-dark);
        --color-success: var(--color-success-dark);
        --popup-bg: var(--popup-bg-dark);
        --rgb-theme: var(--rgb-theme-dark);
        --rgb-theme-invert: var(--rgb-theme-invert-dark);
        --svg-file-bg: hsl(var(--hue), 20%, calc(var(--surface-base-lightness-dark) + 10%));
        --svg-file-flip: hsl(var(--hue), 18%, calc(var(--surface-base-lightness-dark) + 16%));
        --svg-file-icon: hsl(var(--hue), 16%, calc(var(--surface-base-lightness-dark) + 32%));
        --svg-folder-bg: hsl(var(--hue), 40%, 30%);
        --svg-folder-fg: hsl(var(--hue), 35%, 40%);
        --svg-folder-bg-large: hsl(var(--hue), 30%, 20%);
        --svg-folder-fg-large: hsl(var(--hue), 25%, 28%);
        --type-default: hsl(var(--hue), 20%, 40%);
        --type-application: hsl(var(--hue), 50%, 55%);
        --type-archive: hsl(39, 51%, 57%);
        --type-audio: hsl(21, 50%, 50%);
        --type-excel: hsl(135, 20%, 49%);
        --type-word: hsl(205, 54%, 49%);
        --type-pdf: hsl(359, 39%, 50%);
        --type-cd: hsl(15, 42%, 50%);
        --type-code: hsl(10, 45%, 50%);
        --type-text: hsl(210, 40%, 50%);
        --type-open_in_new: var(--type-text);
        --type-powerpoint: hsl(13, 50%, 51%);
        --type-font: hsl(286, 30%, 55%);
        --type-video: hsl(357, 45%, 55%);
        --type-youtube: hsl(0, 60%, 50%);
        --type-vimeo: hsl(195, 60%, 50%);
        --type-image: hsl(92, 28%, 52%);
        --svg-image-text-bg: hsl(92, 29%, 44%);
        --svg-image-sun: hsl(48, 60%, 55%);
        --font-weight-bold: 400;
        --font-weight-letter-spacing: 0.02ch;
    }

[data-theme="contrast"] {
    --modal-surface: var(--surface4);
    --modal-box-shadow: 0 5px 35px -15px var(--surface1-dark);
    --modal-bg: hsl(var(--hue) 20% 14% / 85%);
    --dropdown-shadow: var(--dropdown-shadow-light);
    --files-svg-active-filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .1));
    --theme-dark-rotate: 45deg;
    --hsl-primary: var(--hsl-primary-contrast);
}

    [data-theme="contrast"] .cm-sidebar {
        --dropdown-shadow: var(--dropdown-shadow-dark);
    }

[data-theme="light"] {
    --modal-surface: var(--surface4);
    --modal-bg: hsl(var(--hue) 18% 78% / 80%);
    --modal-box-shadow: 0 5px 25px -15px hsl(var(--hue), 20%, 40%);
    --dropdown-shadow: var(--dropdown-shadow-light);
    --files-svg-active-filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .1));
    --theme-contrast-rotate: 45deg;
    --hsl-primary: var(--hsl-primary-light);
}

.columns-info .exif .svg-icon {
    display: none;
}

.columns-info .svg-overlay-play {
    margin-top: -39px;
}
    


:root {
    --spacing: 1em;
    --form-padding-x: .9em;
    --form-padding-y: .6em;
    --form-line-height: 1.3;
    --hsl-danger: 0 50% 50%;
    --hsl-success: 105 30% 50%;
    --button-color: rgba(255, 255, 255, .95);
    --button-hsl: var(--hsl-primary);
    --input-active-hsl: var(--hsl-primary);
    --input-active-hsl-empty: var(--hue) 20% 45%;
    --input-box-shadow: 0 0 0 1px hsl(var(--input-active-hsl-empty) / 20%);
    --input-active-box-shadow-alpha: 25%;
}

.svg-file-icon {
    fill: var(--svg-file-icon);
}

.svg-code {
    fill: var(--type-code);
}

.svg-file-bg {
    fill: var(--svg-file-bg);
}

.svg-file-flip {
    fill: var(--svg-file-flip);
}

.svg-file-icon {
    fill: var(--svg-file-icon);
}

.svg-file-ext {
    font-family: Menlo, 'Fira Mono', 'Cascadia Mono', 'Roboto Mono', 'Droid Sans Mono', 'DejaVu Sans Mono', 'Oxygen Mono', Consolas, 'Ubuntu Mono', Monaco, monospace;
    font-size: 12px;
    fill: white;
    fill-opacity: .9;
    text-transform: uppercase;
    text-anchor: middle;
    dominant-baseline: middle;
}

.button, .uppy-Dashboard-browse, .button-icon {
    touch-action: manipulation;
    cursor: pointer;
    outline: none;
    transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    --button-surface: var(--primary);
    --button-box-shadow-active: inset 0 0 0 50px rgba(0, 0, 0, .1), 0 0 0 3px rgba(var(--rgb-theme-invert), .1);
}

    .button:hover, .uppy-Dashboard-browse:hover, .button-icon:hover {
        box-shadow: var(--button-box-shadow-hover, none);
    }

@supports (background-color: HSL(50 50% 50%/50%)) {
    .button, .uppy-Dashboard-browse, .button-icon {
        --button-surface: hsl(var(--button-hsl));
        --button-box-shadow-active: inset 0 0 0 50px rgba(0, 0, 0, .1), 0 0 0 3px hsl(var(--button-hsl) / 30%);
    }
}

.button:active, .uppy-Dashboard-browse:active, .button-icon:active, .button:focus-visible, .uppy-Dashboard-browse:focus-visible, .button-icon:focus-visible {
    box-shadow: var(--button-box-shadow-active);
}

.button, .uppy-Dashboard-browse {
    position: relative;
    --button-box-shadow-hover: inset 0 0 0 50px rgba(255, 255, 255, .1);
    border-bottom: 1px solid rgba(var(--rgb-theme-dark), 0.1);
    color: var(--button-color);
    background-color: var(--button-surface);
    line-height: var(--form-line-height);
    padding: var(--form-padding-y) var(--form-padding-x) calc(var(--form-padding-y) - 1px) var(--form-padding-x);
    min-width: 6em;
    border-radius: 3px;
    display: inline-block;
    text-align: center;
}

    .button:hover, .uppy-Dashboard-browse:hover, .button:active, .uppy-Dashboard-browse:active {
        --button-color: white;
    }

    .button:not(:first-of-type), .uppy-Dashboard-browse:not(:first-of-type) {
        margin-left: 10px;
    }

.button-secondary {
    color: currentColor;
    --button-surface: rgba(var(--rgb-theme-invert), .05);
    --button-box-shadow-hover: inset 0 0 0 50px var(--button-surface);
    --button-box-shadow-active: var(--button-box-shadow-hover), 0 0 0 3px rgba(var(--rgb-theme-invert), .05);
    border-bottom-color: rgba(0,0,0,0.05);
}

.button-success {
    --button-hsl: var(--hsl-success);
}

.button-icon {

    padding: var(--button-padding, 10px);
    margin: var(--button-margin, 0);
    border-radius: 50%;
	border : none;
    display: inline-flex;
    line-height: 1;
    color: white !important;
}

.mouse-hover .button-icon {
    transition-delay: var(--mouse-hover-transition-delay, 0.25s);
}

.button-icon .svg-icon {
    will-change: transform;
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    transform: scale(var(--button-icon-scale, 1));
}

.button-icon:hover, .button-icon:active, .button-icon.cm-active, .dropdown:hover .button-icon, .button-icon:focus-visible {
    color: white;
    fill: white;
    background-color: var(--primary) !important;
    --mouse-hover-transition-delay: 0s;
}

.button-icon:active {
    --button-icon-scale: .9583333333;
}

#contextmenu_album , #contextmenu_file {
    position: fixed;
    display: none;
    z-index: var(--z-index-contextmenu);
}






.context-button {
    display: inline-flex;
}

    .context-button .svg-path-dots, .context-button .svg-path-close_thin {
        transition: transform, fill-opacity;
        transition-duration: .25s;
        transition-timing-function: cubic-bezier(0.15, 0.3, 0, 1);
        transform-origin: center;
    }

    .context-button .svg-path-close_thin {
        fill-opacity: 0;
        transform: rotate(-45deg);
    }

    .context-button.cm-active .svg-path-dots {
        fill-opacity: 0;
        transform: rotate(45deg);
    }

    .context-button.cm-active .svg-path-close_thin {
        fill-opacity: 1;
        transform: rotate(0deg);
    }

:root {
    --dropdown-surface: hsl(var(--hue), 20%, 20%);
    --dropdown-surface-header: hsl(var(--hue), 20%, 14%);
    --dropdown-text: hsl(var(--hue), 20%, 96%);
    --dropdown-divider-color: hsl(var(--hue), 20%, 26%);
    --dropdown-top-color: var(--dropdown-surface-header);
}

.input {
    line-height: var(--form-line-height);
    transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    width: 100%;
    padding: var(--form-padding-y) var(--form-padding-x);
    border-radius: 3px;
    outline: none;
    margin-bottom: var(--spacing);
    background-color: var(--input-surface, var(--surface2));
    box-shadow: var(--input-box-shadow);
    --input-box-shadow-active: 0 0 0 1px hsl(var(--input-active-hsl) / var(--input-active-box-shadow-alpha)), 0 0 0 var(--input-active-spread) hsl(var(--input-active-hsl) / var(--input-active-box-shadow-alpha));
    --input-active-spread: 4px;
}

    .input:placeholder-shown {
        --input-active-hsl: var(--input-active-hsl-empty);
    }

    .input:hover {
        --input-box-shadow: 0 0 0 1px hsl(var(--input-active-hsl-empty) / 40%);
    }

    .input:focus, .input[aria-invalid] {
        --input-box-shadow: var(--input-box-shadow-active);
    }

    .input:active {
        --input-active-spread: 5px;
    }

    .input[aria-invalid="true"] {
        --input-active-hsl: var(--hsl-danger);
    }

    .input[aria-invalid="false"] {
        --input-active-hsl: var(--hsl-success);
    }

    .input::placeholder {
        color: var(--text3);
        opacity: .8;
    }

.input-label .input {
    margin-top: .5em;
}



#search-container {
    position: relative;
    margin-right: .5rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    --filter-padding-right: 5px;
}

@media (min-width: 576px) {
    #search-container {
        --filter-reset-display: block;
        --filter-padding-right: 32px;
    }
}

@media (max-width: 767.98px) {
    #search-container {
        flex-grow: 1;
    }
}

@media (min-width: 768px) {
    #search-container {
        min-width: 200px;
    }

        #search-container:after {
            content: attr(data-input);
            padding: 0 calc(var(--filter-padding-right) + 4px) 0 40px;
            height: 0;
            overflow: hidden;
            visibility: hidden;
        }
}

#search {
    padding: 0 var(--filter-padding-right) 0 40px;
    --spacing: 0;
    flex-grow: 1;
}

    #search::placeholder {
        opacity: 1;
        transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
        text-transform: capitalize;
    }

    #search:placeholder-shown:hover::placeholder {
        color: var(--text2);
    }

    #search:placeholder-shown:not(:hover):not(:focus) + .filter-search-icon {
        fill: var(--text2);
    }

.filter-match #search:not(:placeholder-shown), .filter-nomatch #search:not(:placeholder-shown) {
    --input-box-shadow: var(--input-box-shadow-active);
    --input-active-box-shadow-alpha: 50%;
}

@supports not (-moz-appearance: none) {
    #search:focus + .filter-search-icon {
        transform: scale(1.125);
    }
}

#search:focus::placeholder {
    opacity: 0;
}

@media (max-width: 575.98px) {
    #search:not(:placeholder-shown) {
        padding: 0 12px;
    }

        #search:not(:placeholder-shown) + .filter-search-icon {
            opacity: 0;
        }
}

#search:placeholder-shown ~ .filter-reset, #search:not(:focus):not(:hover) ~ .filter-reset:not(:hover) {
    opacity: 0;
    pointer-events: none;
}

#search:disabled {
    opacity: .5;
}

    #search:disabled + .filter-search-icon {
        opacity: .5;
    }

.filter-match {
    --input-active-hsl: var(--hsl-success);
    --button-hsl: var(--hsl-success);
}

.filter-nomatch {
    --input-active-hsl: var(--hsl-danger);
    --button-hsl: var(--hsl-danger);
}

.filter-search-icon, .filter-reset {
    position: absolute;
}

.filter-search-icon {
    transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    top: 7px;
    left: 10px;
    will-change: transform, opacity, fill;
}

.filter-reset {
    display: var(--filter-reset-display, none);
    right: 0;
    --button-margin: 4px;
    --button-padding: 3px;
}

.dropdown-menu {
    color-scheme: dark;
    --dropdown-item-padding-y: .3em;
    --dropdown-item-padding-x: 1em;
    --svg-icon-font-size: 18px;
    --svg-icon-margin: 0 .5em 0 0;
    --svg-icon-fill: var(--text1-dark);
    color: var(--dropdown-text);
    background-color: var(--dropdown-surface);
    outline: none;
    border-radius: 3px;
    box-shadow: var(--dropdown-shadow);
    padding-bottom: .5em;
	z-index:2000;
}

[data-theme="light"] .dropdown-menu {
    --primary: hsl(var(--hsl-primary-contrast));
}

@media (hover: hover) and (pointer: fine) {
    .dropdown-menu {
        font-size: .875rem;
    }
}

.dropdown-menu:before {
    content: '';
    position: absolute;
    border: solid 5px;
    border-color: transparent transparent var(--dropdown-top-color) transparent;
    top: -10px;
    left: var(--nub-left);
    transform: translateX(-50%);
}

.dropdown-menu.nub-bottom:before {
    top: 100%;
    border-color: var(--dropdown-surface) transparent transparent transparent;
}

.dropdown-header {
    width: 0px;
    min-width: 100%;
    padding: 0.6875em var(--dropdown-item-padding-x);
    margin-bottom: .3em;
    background-color: var(--dropdown-surface-header);
    border-radius: 3px 3px 0 0;
    font-weight: 500;
    color: hsl(var(--hue), 20%, 95%);
    box-shadow: inset 0 2px 0 -1px var(--dropdown-top-color);
}

.dropdown-header, .dropdown-item {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.dropdown-item {
    touch-action: manipulation;
    outline: none;
    text-transform: capitalize;
    text-align: left;
    width: 100%;
    padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
}

	.dropdown-item:hover, .dropdown-item:active, .dropdown-item.active, .dropdown-item:focus-visible {
        --svg-icon-fill: currentColor;
        background-color: var(--primary)!important;
        color: white;
    }

    .dropdown-item:focus, .dropdown-item:active {
        transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .dropdown-item:active {
        box-shadow: inset 0 0 0 99em rgba(0,0,0,0.15);
    }
	
    .dropdown-item:active, .dropdown-item:focus-visible {
        --svg-icon-fill: currentColor;
        background-color: var(--primary) !important;
        color: white;
    }

    .dropdown-item:hover {
        background-color: var(--primary)    !important;
    }

    .dropdown-item:active {
        background-color: var(--primary)   !important;
    }

.dropdown-item:focus, .dropdown-item:active {
        transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    }

.dropdown-item:active {
        box-shadow: inset 0 0 0 99em rgba(0,0,0,0.15);
    }


.dropdown {
    position: relative;
}

.dropdown-menu-topbar {
    display: none;
    position: absolute;
    z-index: 1;
    min-width: 200px;
    margin-top: 1rem;
    /*transform: translateY(-2px) translateX(50%);*/
    right: calc(50% - var(--offset, 0px));
    --nub-left: calc(50% - var(--offset, 0px));
    visibility: hidden;
    opacity: 0;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    transition: visibility 0s .2s, opacity .2s, transform .2s;
}

.mouse-hover .dropdown-menu-topbar {
    transition: visibility 0s .4s, opacity .2s .2s, transform 0s .4s;
}

.touch-open .dropdown-menu-topbar, .mouse-hover:hover .dropdown-menu-topbar {
    z-index: var(--z-index-dropdown-open);
    transition: visibility 0s, opacity .2s, transform .2s;
    visibility: visible;
    opacity: 1;
    /*transform: translateY(0) translateX(50%);*/
}

.mouse-hover:hover .dropdown-menu-topbar {
    transition-delay: .2s;
}

.dropdown-menu-topbar .dropdown-header {
    text-transform: uppercase;
}

.dropdown-item-sort .svg-icon-sort {
    order: 2;
    --svg-icon-margin: 0 0 0 auto;
}

.dropdown-item-sort .svg-path-sort_name_desc, .dropdown-item-sort .svg-path-sort_kind_desc, .dropdown-item-sort .svg-path-sort_size_asc, .dropdown-item-sort .svg-path-sort_date_asc {
    display: none;
}

.sort-asc .svg-path-sort_size_asc, .sort-asc .svg-path-sort_date_asc {
    display: block;
}

.sort-asc .svg-path-sort_size_desc, .sort-asc .svg-path-sort_date_desc {
    display: none;
}

.sort-desc .svg-path-sort_name_desc, .sort-desc .svg-path-sort_kind_desc {
    display: block;
}

.sort-desc .svg-path-sort_name_asc, .sort-desc .svg-path-sort_kind_asc {
    display: none;
}

.svg-path-sort_size_asc {
    transform-origin: center;
    transform: scaleY(-1);
}

#layout-options {
    padding: 1em var(--dropdown-item-padding-x) 0.5em;
    border-top: 1px solid var(--dropdown-divider-color);
    margin-top: .5em;
}

    #layout-options .checkbox-label {
        margin-top: .25em;
    }

    #layout-options .checkbox {
        font-size: 18px;
    }

    #layout-options label {
        transition: color .2s;
    }

    #layout-options > *:not(:hover) {
        color: hsl(var(--hue), 20%, 88%);
    }

.checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    margin-right: .0rem;
	cursor:pointer;
}

.layout-range-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.layout-label-type {
    font-size: .7em;
    background-color: var(--dropdown-divider-color);
    padding: .3em .6em;
    border-radius: 3px;
    z-index: 1;
}

.layout-aspect-ratio {
    font-family: var(--font-family-monospace);
    letter-spacing: -1px;
}

.form-range {
    width: 100%;
    height: 1.25rem;
    background: none;
    outline: none;
    z-index: 1;
    position: relative;
    --range-border-color: hsl(var(--hue), 20%, 28%);
    --range-thumb-color: hsl(var(--hue), 20%, 50%);
}

    .form-range::-webkit-slider-runnable-track {
        width: 100%;
        height: .25rem;
        border-radius: 2px;
        background-color: var(--range-border-color);
        transition: .2s;
    }

    .form-range::-moz-range-track {
        width: 100%;
        height: .25rem;
        border-radius: 2px;
        background-color: var(--range-border-color);
        transition: .2s;
    }

    .form-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 1.25rem;
        height: 1.25rem;
        margin-top: -.5rem;
        border: 1px solid var(--dropdown-surface);
        box-shadow: 0 0 15px -5px black;
        box-sizing: border-box;
        border-radius: 50%;
        background-color: var(--range-thumb-color);
        cursor: pointer;
        transition: .2s;
        transform: scale(var(--range-thumb-scale, 1));
    }

    .form-range::-moz-range-thumb {
        -webkit-appearance: none;
        width: 1.25rem;
        height: 1.25rem;
        margin-top: -.5rem;
        border: 1px solid var(--dropdown-surface);
        box-shadow: 0 0 15px -5px black;
        box-sizing: border-box;
        border-radius: 50%;
        background-color: var(--range-thumb-color);
        cursor: pointer;
        transition: .2s;
        transform: scale(var(--range-thumb-scale, 1));
    }

    .form-range:hover {
        --range-border-color: hsl(var(--hue), 20%, 34%);
        --range-thumb-color: hsl(var(--hue), 20%, 70%);
    }

    .form-range:active, .form-range:focus-visible {
        --range-thumb-color: var(--primary);
        --range-thumb-scale: 1.25;
    }

    .form-range:before {
        content: '';
        transition: .2s;
        width: 6px;
        height: 6px;
        background-color: var(--range-border-color);
        position: absolute;
        z-index: -1;
        border-radius: 50%;
        margin-top: 6px;
        left: calc(var(--range-default-pos, .5) * 100% - var(--range-default-pos, .5) * 1rem + 1rem / 2 - 6px / 2);
    }

.dropdown-lang-loading {
    --spinner-size: 48px;
    --spinner-margin: -5px 0 0 -1px;
    cursor: not-allowed;
}

    .dropdown-lang-loading .dropdown-item-lang {
        opacity: .7;
        pointer-events: none;
    }

.button-lang:after {
    line-height: 24px;
    content: attr(data-text);
    text-transform: uppercase;
    width: 24px;
    display: block;
    font-family: var(--font-family-monospace);
    font-weight: bold;
}

.dropdown-lang-items {
    padding: 8px 16px;
    display: grid;
    grid-gap: 12px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.dropdown-item-lang {
    padding: 18px;
    border-radius: 50%;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

    .dropdown-item-lang:after {
        transition: .2s;
        font-size: 10px;
        line-height: 1;
        width: 20px;
        padding: 5px 0;
        content: attr(data-action);
        position: absolute;
        z-index: 1;
        font-weight: 700;
        text-transform: uppercase;
        white-space: nowrap;
        top: -5px;
        left: -5px;
        color: white;
        background-color: var(--surface1-dark);
        border-radius: inherit;
    }

    .dropdown-item-lang:hover, .dropdown-item-lang.dropdown-lang-active {
        box-shadow: 0 0 0 3px var(--text1-dark);
    }

    .dropdown-item-lang:active {
        transform: scale(1.1);
    }

    .dropdown-item-lang:active, .dropdown-item-lang:focus {
        transition: .2s;
    }

#topbar-breadcrumbs {
    line-height: 24px;
    background-color: var(--surface3);
    padding: .5rem .5rem .5rem 39px;
    border-bottom: 1px solid var(--surface1);
    font-size: 14px;
}

@media (min-width: 768px) {
    #topbar-breadcrumbs {
        padding: .5rem .5rem .5rem 48px;
    }
}

.breadcrumbs-info {
    color: var(--text2);
    float: right;
    font-size: 14px;
    margin: 0 10px 0 20px;
    animation: opacity .2s forwards;
}

@media (max-width: 767.98px) {
    .breadcrumbs-info {
        display: none;
    }
}

.breadcrumbs-info:empty {
    display: none;
}

.breadcrumbs-info-type {
    display: inline-block;
}

.breadcrumbs-info-size {
    margin-left: .4em;
}

    .breadcrumbs-info-size:before {
        margin-right: .4em;
        content: '·';
    }

#breadcrumbs {
    display: flex;
    flex-wrap: wrap;
}

.crumb:not(:first-child):before {
    content: '/';
    opacity: .5;
}

.crumb:first-child {
    margin-left: -40px;
}

.crumb-link {
    padding: 0 8px;
}

@media (hover: hover) {
    .crumb-link:hover {
        text-decoration: underline;
    }
}

#folder-actions {
    float: right;
    --button-margin: -8px 4px 0 0;
    --button-padding: 8px;
    animation: opacity .2s forwards;
}

#files-sortbar {
    font-size: .875rem;
    line-height: 24px;
    background-color: var(--surface2);
    border-bottom: 1px solid var(--surface1);
    display: none;
}

@media (min-width: 768px) {
    #files-sortbar {
        display: var(--sortbar-display, none);
    }
}

.sortbar-list, .sortbar-imagelist {
    --sortbar-display: block;
}

.sortbar-inner {
    display: flex;
    max-width: calc(var(--list-max) - 20px);
}

.sortbar-item {
    display: flex;
    align-items: center;
    overflow: hidden;
    flex-shrink: 0;
    padding-top: 4px;
    padding-bottom: 4px;
    touch-action: manipulation;
    cursor: pointer;
    transition: .2s;
    --svg-icon-margin: 0 0 0 3px;
    --svg-icon-font-size: 18px;
    box-shadow: inset -1px 0 0 var(--surface1);
}

    .sortbar-item:not(:hover):not(.sortbar-active) {
        color: var(--text2);
    }

    .sortbar-item:hover {
        background-color: var(--surface3);
    }

.sortbar-active {
    background-color: var(--surface3);
    font-weight: 500;
    letter-spacing: -.02ch;
}

.sortbar-name {
    flex: 1;
    padding-left: 59px;
}

.sortbar-kind {
    padding-left: 15px;
    padding-right: 5px;
}

.sortbar-size {
    justify-content: flex-end;
    flex-basis: 100px;
    padding-right: 5px;
}

.sortbar-date {
    --date-base: 165px;
    flex-basis: calc(var(--date-base) + var(--list-date-flex, 3) * 8px);
    padding-left: 10px;
    padding-right: 5px;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .sidebar-closed .sortbar-name {
        padding-left: 66px;
    }

    .sidebar-closed .sortbar-kind {
        padding-right: 10px;
    }

    .sidebar-closed .sortbar-size {
        flex-basis: 110px;
        padding-right: 10px;
    }

    .sidebar-closed .sortbar-date {
        --date-base: 170px;
        padding-left: 15px;
    }
}

@media (min-width: 1200px) {
    .sortbar-name {
        padding-left: 66px;
    }

    .sortbar-kind {
        padding-right: 10px;
    }

    .sortbar-size {
        flex-basis: 110px;
        padding-right: 10px;
    }

    .sortbar-date {
        --date-base: 170px;
        padding-left: 15px;
    }
}

.sortbar-list {
    padding: 0 20px 0 0;
}

.sortbar-imagelist .sortbar-name {
    padding-left: 115px;
}

.sortbar-imagelist .sortbar-date {
    --date-base: 170px;
    flex-basis: calc(var(--date-base) + var(--list-date-flex, 3) * 9px);
}

@media (min-width: 992px) {
    .sortbar-imagelist {
        padding: 0 20px 0 0;
    }

        .sortbar-imagelist .sortbar-name {
            padding-left: 135px;
        }

    .sidebar-closed .sortbar-imagelist .sortbar-date {
        --date-base: 175px;
    }
}

@media (min-width: 1200px) {
    .sortbar-imagelist .sortbar-date {
        --date-base: 175px;
    }
}

.svg-icon-sort path {
    transition: fill-opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1),transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.svg-icon-sort .svg-path-chevron_up {
    fill-opacity: var(--up, 0);
    transform: translateY(var(--upy, -4px));
}

.svg-icon-sort .svg-path-chevron_down {
    fill-opacity: var(--down, 0);
    transform: translateY(var(--downy, 4px));
}

.sortbar-item:hover, .dropdown-item-sort:hover {
    --up: 1;
    --down: 1;
    --upy: -5px;
    --downy: 5px;
}

.sortbar-name:not(.sortbar-active):active, .sortbar-kind:not(.sortbar-active):active {
    --down: .3;
}

.sortbar-size:not(.sortbar-active):active, .sortbar-date:not(.sortbar-active):active {
    --up: .3;
}

.sort-asc {
    --upy: 0;
    --up: 1;
    --down: 0;
}

    .sort-asc:hover:not(:active) {
        --upy: 0;
        --down: 0;
    }

    .sort-asc:active {
        --up: .3;
    }

.sort-desc {
    --downy: 0;
    --up: 0;
    --down: 1;
}

    .sort-desc:hover:not(:active) {
        --downy: 0;
        --up: 0;
    }

    .sort-desc:active {
        --down: .3;
    }

#topbar-info {
    display: flex;
    align-items: flex-start;
    color: rgba(255,255,255,0.9);
    line-height: 24px;
    background-color: var(--topbar-info-surface);
    padding: .5rem .5rem .5rem 7px;
    font-size: 14px;
    animation: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

    #topbar-info:empty {
        display: none;
    }

@media (min-width: 768px) {
    #topbar-info {
        padding: .5rem .5rem .5rem 1rem;
    }
}


/*!
 * Toastify js 1.12.0
 * https://github.com/apvarun/toastify-js
 * @license MIT licensed
 *
 * Copyright (C) 2018 Varun A P
 */

.toastify {
    --toast-padding: 15px;
    --toastify-color: var(--dropdown-text);
    color: var(--toastify-color);
    --toastify-bg: var(--dropdown-surface);
    background-color: var(--toastify-bg);
    box-shadow: var(--dropdown-shadow);
    position: fixed;
    display: flex;
    align-items: center;
    padding: 12px 18px;
    font-size: .9375rem;
    font-weight: 400;
    border-radius: 3px;
    z-index: 2147483647;
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
    opacity: 0;
    --svg-icon-margin: 0 8px 0 -5px;
    --svg-icon-font-size: 18px;
    left: var(--toast-padding);
    right: var(--toast-padding);
    bottom: var(--toast-padding);
}

@media (min-width: 576px) {
    .toastify {
        left: auto;
        max-width: calc(100% - var(--toast-padding) * 2);
    }
}

@media (min-width: 768px) {
    .toastify {
        max-width: 50%;
    }
}

@media (min-width: 1200px) {
    .toastify {
        max-width: 480px;
    }
}

.toastify.on {
    opacity: 1;
}

.toastify-right {
    right: var(--toast-padding);
}

.toastify-left {
    left: var(--toast-padding);
}

.toastify-top {
    top: -150px;
}

.toastify-bottom {
    bottom: calc(var(--toast-padding) * -1);
}

.toastify-success, .toastify-danger {
    --toastify-color: rgba(255, 255, 255, .9);
}

.toastify-success {
    --toastify-bg: hsl(105, 30%, 50%);
}

.toastify-danger {
    --toastify-bg: var(--color-danger);
}

.toastify-text {
    display: inline-block;
    flex: 1;
}

    .toastify-text::first-letter {
        text-transform: uppercase;
    }

.toastify-link {
    cursor: pointer;
}

    .toastify-link:hover {
        text-decoration: underline;
    }

.toastify-loading {
    --svg-icon-margin: 0;
    --spinner-position: static;
    --spinner-margin: 0 10px 0 -5px;
}

.toastify-percent {
    font-family: var(--font-family-monospace);
    font-weight: normal;
    min-width: 40px;
    padding-left: 10px;
    display: flex;
    justify-content: flex-end;
}

.toastify-progress-bar {
    border-radius: 0 0 3px 3px;
    height: 3px;
    width: 100%;
    background-color: var(--primary);
    position: absolute;
    left: 0;
    bottom: 0;
    transform-origin: 0px 0px;
    transform: scaleX(0);
    transition: transform .2s;
}