.ui-mask {
    background-color: black;
    opacity: 0.5;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1002;
    cursor: not-allowed;
    user-select: none;
    inset: 0;
}

.modal-container {
    position: absolute;
    background-color: var(--theme-color-grey-light-light);
    border: 1px solid black;
    width: max-content;
    visibility: collapse;
    display: grid;
    grid-template-columns: 0.5em 1fr 0.5em;
    user-select: none;
    overflow: hidden;
    opacity: 1;
    z-index: 2000;
}

    .modal-dialog-container.red-focus,
    .modal-container.red-focus {
        border-color: red !important;
        border-width: 2px !important;
    }

    .modal-dialog-container:not(.minimized),
    .modal-container:not(.minimized) {
        grid-template-rows: 0.5em max-content 1fr max-content 0.5em;
        min-height: 57px;
        min-width: 85px;
        height: max-content;
    }

    .modal-dialog-container.minimized,
    .modal-container.minimized {
        grid-template-rows: 0.5em max-content 0 max-content 0.5em;
        min-height: 45px !important;
        height: max-content !important;
        min-width: 85px !important;
        width: max-content !important;
    }

        .modal-dialog-container.minimized .modal-content,
        .modal-container.minimized .modal-content {
            width: 0 !important;
            height: 0 !important;
            overflow: hidden !important;
        }

    .modal-container:not(.modal-visible) {
        width: 0;
        height: 0;
        border: none;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        opacity: 0;
        user-select: none;
        pointer-events: none;
    }

    .modal-container.modal-visible {
    }

.modal-dialog-container {
    position: absolute;
    top: 25%;
    left: 25%;
    z-index: 3000;
    background-color: var(--theme-color-grey-light-light);
    border: 1px solid black;
    display: grid;
    grid-template-columns: 0.5em 1fr 0.5em;
    user-select: none;
    overflow: hidden;
    max-width: 75%;
    max-height: 75%;
    opacity: 1;
    cursor: default !important;
}

    .modal-dialog-container:not(.no-resize, .maximized, .minimized),
    .modal-container:not(.no-resize, .maximized, .minimized) {
        resize: both !important;
    }

    .modal-dialog-container.minimized,
    .modal-dialog-container.maximized,
    .modal-dialog-container.no-resize,
    .modal-container.no-resize,
    .modal-container.minimized,
    .modal-container.maximized {
        resize: none !important;
    }

.modal-dialog-btn {
}

.modal-dialog-container .modal-content {
    background-color: var(--theme-color-text-light);
    padding: 1em;
    min-width: 100px;
    height: 100%;
    width: 100%;
    overflow: auto;
    border-bottom: 1px outset var(--theme-color-grey-light);
}

.modal-dialog-footer {
    grid-row: 4;
    grid-column: 2;
    display: flex;
    border-top: 1px solid var(--theme-color-grey-dark);
    justify-content: center;
}

.modal-dialog-controls {
    display: grid;
    grid-template-rows: max-content;
    grid-auto-columns: 1fr;
    width: max-content;
    justify-self: center;
    align-items: center;
    overflow: hidden;
    grid-column-gap: 1em;
    padding: 0 0.5em;
}

    .modal-dialog-controls > * {
        grid-row: 1;
        min-width: 100%;
        width: max-content;
    }

        .modal-dialog-controls > *:only-child {
            grid-row: 1;
            width: max-content !important;
            padding-left: 0.5em !important;
            padding-right: 0.5em !important;
            justify-self: center;
        }

        .modal-dialog-controls > *:not(:only-child) {
            width: 100% !important;
        }

.btn-modal-container-minimize {
    display: flex;
    border: none;
    color: white;
    cursor: pointer;
    height: 100%;
    width: 2.75em;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.75em;
    border-radius: 0 !important;
    background-image: url('/images/icons/color/8d8d8d/minimize-windows.svg');
}

.modal-dialog-container:not(.no-minimize) .btn-modal-container-minimize,
.modal-container:not(.no-minimize) .btn-modal-container-minimize {
    width: 2.75em;
}

.modal-dialog-container.no-minimize .btn-modal-container-minimize,
.modal-container.no-minimize .btn-modal-container-minimize {
    width: 0 !important;
    height: 0 !important;
    visibility: collapse;
}

.modal-dialog-container.minimized .btn-modal-container-minimize,
.modal-container.minimized .btn-modal-container-minimize {
    visibility: collapse;
}

.btn-modal-container-minimize:hover:not(:active) {
    background-color: hsla(var(--hsl-color-grey), 0.25);
}

.btn-modal-container-minimize:active {
    background-color: var(--theme-color-grey-light);
}

.btn-modal-container-maximize {
    display: flex;
    border: none;
    color: white;
    cursor: pointer;
    height: 100%;
    width: 2.75em;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.75em;
    border-radius: 0 !important;
}

.modal-dialog-container:not(.no-maximize.no-minimize) .btn-modal-container-maximize,
.modal-container:not(.no-maximize.no-minimize) .btn-modal-container-maximize {
    width: 2.75em;
}

.modal-dialog-container.no-maximize.no-maximize .btn-modal-container-maximize,
.modal-container.no-maximize.no-maximize .btn-modal-container-maximize {
    width: 0 !important;
    height: 0 !important;
    visibility: collapse;
}

.modal-dialog-container.maximized .btn-modal-container-maximize,
.modal-dialog-container.minimized .btn-modal-container-maximize,
.modal-container.maximized .btn-modal-container-maximize,
.modal-container.minimized .btn-modal-container-maximize {
    background-image: url('/images/icons/color/8d8d8d/restore-windows.svg');
}

.modal-dialog-container:not(.maximized, .minimized) .btn-modal-container-maximize,
.modal-container:not(.maximized, .minimized) .btn-modal-container-maximize {
    background-image: url('/images/icons/color/8d8d8d/maximize-windows.svg');
}

.btn-modal-container-maximize:hover:not(:active) {
    background-color: hsla(var(--hsl-color-grey), 0.25);
}

.btn-modal-container-maximize:active {
    background-color: var(--theme-color-grey-light);
}

.btn-modal-container-close {
    display: flex;
    border: none;
    color: white;
    cursor: pointer;
    height: 100%;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-radius: 0 !important;
}

.modal-dialog-container:not(.no-close) .btn-modal-container-close,
.modal-container:not(.no-close) .btn-modal-container-close {
    width: 2.75em;
}

.modal-dialog-container.no-close .btn-modal-container-close,
.modal-container.no-close .btn-modal-container-close {
    width: 0 !important;
    height: 0 !important;
    visibility: collapse;
}

.btn-modal-container-close:not(:hover, :active) {
    background-image: url('/images/icons/color/8d8d8d/close-windows.svg');
}

.btn-modal-container-close:hover,
.btn-modal-container-close:active {
    background-image: url('/images/icons/color/ffffff/close-windows.svg');
}

    .btn-modal-container-close:hover:not(:active) {
        background-color: red;
    }

.btn-modal-container-close:active {
    background-color: rgb(255, 0, 0, 0.75);
}

.modal-corner-top-left {
    grid-column: 1;
    grid-row: 1;
    height: 100%;
    width: 100%;
}

.modal-container .modal-corner-top-left {
    /*cursor: nwse-resize;*/
}

.modal-title-bar {
    grid-column: 2;
    grid-row: 2;
    height: 2.1em;
    display: grid;
    grid-template-columns: 1fr max-content max-content max-content;
    column-gap: 1px;
    line-height: 2;
    align-items: center;
    border-bottom: 1px solid var(--theme-color-grey-dark);
    padding: 0 0 0 0.5em;
    cursor: move;
    overflow: hidden;
}

.modal-title-content {
    overflow: hidden;
    white-space: nowrap;
}

.modal-corner-top-right {
    grid-column: 3;
    grid-row: 1;
    height: 100%;
    width: 100%;
}

.modal-container .modal-corner-top-right {
    /*cursor: nesw-resize;*/
}

.modal-content-left {
    grid-column: 1;
    grid-row: 2 / 5;
    height: 100%;
    width: calc(100%);
    border-right: 1px solid var(--theme-color-grey-dark);
}

.modal-container .modal-content-left {
    /*cursor: ew-resize;*/
}

.modal-container .modal-content {
    height: calc(100%);
    width: calc(100%);
    overflow: hidden;
}

.modal-content {
    grid-column: 2;
    grid-row: 3;
}

    .modal-content > iframe:first-of-type {
        width: 100%;
        height: 100%;
        border: none;
        background-color: white;
    }

.modal-content-top {
    grid-column: 2;
    grid-row: 1;
    height: 100%;
    width: calc(100%);
    border-bottom: 1px solid var(--theme-color-grey-dark);
}

.modal-dialog-container:not(.minimized) .modal-content-top,
.modal-container:not(.minimized) .modal-content-top {
}

.modal-container .modal-content-top {
    /*cursor: n-resize;*/
}

.modal-content-bottom {
    grid-column: 2;
    grid-row: 5;
    height: 100%;
    width: calc(100%);
}

.modal-dialog-container:not(.minimized) .modal-content-bottom,
.modal-container:not(.minimized) .modal-content-bottom {
    border-top: 1px solid var(--theme-color-grey-dark);
}

.modal-container .modal-content-bottom {
    /*cursor: n-resize;*/
}

.modal-content-right {
    grid-column: 3;
    grid-row: 2 / 5;
    height: 100%;
    width: calc(100%);
    border-left: 1px solid var(--theme-color-grey-dark);
}

.modal-container .modal-content-right {
    /*cursor: ew-resize;*/
}

.modal-corner-bottom-left {
    grid-column: 1;
    grid-row: 5;
    height: 100%;
    width: 100%;
}

.modal-container .modal-corner-bottom-left {
    /*cursor: nesw-resize;*/
}

.modal-footer-bar {
    grid-column: 2;
    grid-row: 4;
    height: max-content;
    width: calc(100%);
    display: grid;
    grid-template-columns: 1fr max-content;
    padding: 1ch;
    line-height: 2;
    align-items: center;
    border-top: 1px solid var(--theme-color-grey-dark);
}

.modal-corner-bottom-right {
    grid-column: 3;
    grid-row: 5;
    height: 100%;
    width: 100%;
}

.modal-visible {
    visibility: visible;
}

.modal-content .container-media {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: max-content max-content 1fr;
    height: 100%;
    width: auto
}

    .modal-content .container-media .thumbnail-container {
        position: relative;
        grid-row: 1;
        height: max-content;
        width: max-content;
        overflow: hidden;
        min-height: 100%;
        display: flex;
        padding-bottom: 0.5em;
    }

    .modal-content .container-media input:not(:checked) + .thumbnail-container {
        justify-self: end;
    }

    .modal-content .container-media input:checked + .thumbnail-container {
        justify-self: center;
    }

    .modal-content .container-media .thumbnail {
        margin: 0 auto;
        object-fit: contain;
        background-image: radial-gradient(circle, rgba(0, 0, 0, 1) 0%, rgba(50, 50, 50, 1) 10%, rgba(198, 198, 198, 1) 100%);
    }

    .modal-content .container-media input:not(:checked) + .thumbnail-container .thumbnail {
        height: 2.25em;
        opacity: 0;
        visibility: collapse;
    }

    .modal-content .container-media input:checked + .thumbnail-container .thumbnail {
        max-height: 20em;
        max-width: 100%;
        height: 100%;
    }

    .modal-content .container-media .thumbnail-overlay {
        position: absolute;
        z-index: 10;
        top: 0.25em;
        left: 0.25em;
        padding: 0.25em 0.5em;
        width: 4em;
        background: hsla(var(--hsl-color-grey-dark), 0.25);
    }

    .modal-content .container-media input:checked + .thumbnail-container .thumbnail-overlay {
        opacity: 0.75;
    }

    .modal-content .container-media input:not(:checked) + .thumbnail-container .thumbnail-overlay {
        opacity: 0;
        visibility: collapse;
    }

    .modal-content .container-media .thumbnail-container label.show-thumbnail {
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        background-color: var(--theme-color-grey-light-light);
        position: absolute;
        z-index: 1;
        right: 0;
        width: 1.5em;
    }

    .modal-content .container-media input:checked + .thumbnail-container label.show-thumbnail {
        bottom: 0.5em;
        background-image: url('/images/icons/color/8d8d8d/double-up-arrows.svg');
    }

        .modal-content .container-media input:checked + .thumbnail-container label.show-thumbnail:not(:hover) {
            opacity: 0.25;
        }

        .modal-content .container-media input:checked + .thumbnail-container label.show-thumbnail:hover {
            opacity: 1;
        }

    .modal-content .container-media input:not(:checked) + .thumbnail-container label.show-thumbnail {
        bottom: 0.1em;
        opacity: 1;
        background-image: url('/images/icons/color/8d8d8d/double-down-arrows.svg');
    }

    .modal-content .container-media .menu-bar {
        grid-row: 2;
        display: grid;
        grid-auto-columns: 1fr;
        grid-template-rows: max-content;
        border-bottom: 1px solid var(--theme-color-grey-dark);
        border-top: 1px solid var(--theme-color-grey-dark);
        background: linear-gradient(90deg, var(--theme-color-grey-light-light) 0%, var(--theme-color-grey-light) 100%);
    }

        .modal-content .container-media .menu-bar .menu-bar-content {
            grid-column: 1;
            display: grid;
            grid-auto-columns: 1fr;
            grid-template-rows: max-content;
            width: max-content;
        }

        .modal-content .container-media .menu-bar input[type=radio] {
            display: none;
        }

        .modal-content .container-media .menu-bar .menu-bar-area-item {
            grid-row: 1;
            min-width: 100%;
            width: max-content;
            text-align: center;
            padding: 0.25em;
            cursor: pointer;
        }

        .modal-content .container-media .menu-bar input:not(:checked) + .menu-bar-area-item:not(:first-of-type) {
            border-left: 1px solid var(--theme-color-grey-dark);
        }

        .modal-content .container-media .menu-bar input:not(:checked) + .menu-bar-area-item {
            border-right: 1px solid var(--theme-color-grey-dark);
        }

        .modal-content .container-media .menu-bar input:checked + .menu-bar-area-item:not(:first-of-type) {
            border-left: 1px solid var(--theme-color-blue-dark);
        }

        .modal-content .container-media .menu-bar input:checked + .menu-bar-area-item {
            border-right: 1px solid var(--theme-color-blue-dark);
        }

        .modal-content .container-media .menu-bar input:not(:checked) + .menu-bar-area-item:not(:hover, :active) {
            background-color: var(--theme-color-text-light);
        }

        .modal-content .container-media .menu-bar input:not(:checked) + .menu-bar-area-item:hover:not(:active) {
            background-color: var(--theme-color-grey-light);
        }

        .modal-content .container-media .menu-bar input:not(:checked) + .menu-bar-area-item:active {
            background-color: var(--theme-color-grey-light);
        }

        .modal-content .container-media .menu-bar input:checked + .menu-bar-area-item:not(:hover, :active) {
            background-color: var(--theme-color-blue-light);
        }

        .modal-content .container-media .menu-bar input:checked + .menu-bar-area-item:hover {
            background-color: var(--theme-color-blue);
        }

        .modal-content.container-media .menu-bar .menu-bar-area-info {
            /*background-image: url('/images/icons/color/8d8d8d/keywords.svg');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            width: 2em;*/
        }

    .modal-content .container-media .area-container {
        grid-row: 3;
        position: relative;
        width: 100%;
        height: 100%;
    }

        .modal-content .container-media .area-container > * {
            position: absolute;
            width: 100%;
            height: 100%;
        }

            .modal-content .container-media .area-container > *:not(.active) {
                opacity: 0;
                visibility: collapse;
            }

            .modal-content .container-media .area-container > *.active {
            }

        .modal-content .container-media .area-container .area-info {
            display: grid;
            grid-template-columns: 100%;
            grid-template-rows: 1fr max-content;
        }

.modal-content .area-info .input-fields {
    grid-row: 1;
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-template-rows: max-content 1fr max-content max-content max-content max-content max-content max-content;
    overflow: hidden;
}

.modal-content .container-media .area-info .controls {
    grid-row: 2;
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-rows: max-content;
    justify-self: center;
    column-gap: 0.5em;
    width: max-content;
}

    .modal-content .container-media .area-info .controls > * {
        width: max-content;
        min-width: 100%;
    }

.modal-content .area-info .input-fields .input-label {
    grid-column: 1;
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    padding: 0.25em;
    border-bottom: 1px solid var(--theme-color-grey-dark);
    border-right: 1px solid var(--theme-color-grey-dark);
    cursor: default;
}

.modal-content .area-info .input-fields .input-value:not(:focus) + .input-label {
    background-color: var(--theme-color-grey-light-light);
}

.modal-content .area-info .input-fields .input-value:focus + .input-label {
    background-color: var(--theme-color-blue-light);
}

.modal-content .area-info .input-fields .input-value {
    grid-column: 2;
}

.modal-content .area-info .input-fields > .input-value,
.modal-content .area-info .input-fields > textarea.input-value,
.modal-content .area-info .input-fields > input[type=number].input-value,
.modal-content .area-info .input-fields > input[type=text].input-value {
    border-radius: 0;
    height: 100%;
    border-top: none;
    border-right: none;
    border-bottom: 1px solid var(--theme-color-grey-dark);
    border-left: none;
    background-color: var(--theme-color-text-light);
    user-select: text;
    font-size: 1em;
}

.modal-content .area-info .input-fields > label.input-value {
    padding: 0.15em;
}

.modal-content .area-info .input-fields > textarea.input-value {
    resize: none;
    min-height: 1.9em;
    padding: 0.2em;
}

.modal-content .area-info .input-fields > select.input-value {
    width: 100%;
    border-radius: 0;
    border-top: none;
    border-right: none;
    border-bottom: 1px solid var(--theme-color-grey-dark);
    border-left: none;
    padding: 0;
}

.modal-content .area-info .input-fields > .name {
    grid-row: 1;
}

.modal-content .area-info .input-fields > .description {
    grid-row: 2;
}

.modal-content .area-info .input-fields > .geoprojects {
    grid-row: 3;
}

.modal-content .area-info .input-fields > .keywords {
    grid-row: 4;
}

.modal-content .area-info .input-fields > .latitude {
    grid-row: 5;
}

.modal-content .area-info .input-fields > .longitude {
    grid-row: 6;
}

.modal-content .area-info .input-fields > .altitude {
    grid-row: 7;
}

.modal-content .area-info .input-fields > .altitude-mode {
    grid-row: 8;
}

.modal-content .area-info .input-fields > .utc-time {
    grid-row: 9;
}

.modal-content .area-info .input-fields > .local-time {
    grid-row: 10;
}

.modal-content .area-info .input-fields > .has-tl-data {
    grid-row: 11;
}

.modal-content .area-info .input-fields > .size {
    grid-row: 12;
}


.modal-content .container-media .area-container .area-refitems {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: max-content 1fr max-content;
    background: var(--theme-color-grey-dark);
}

    .modal-content .container-media .area-container .area-refitems .controls {
        grid-row: 1;
        display: flex;
        column-gap: 0.5em;
        width: 100%;
        align-items: center;
        justify-content: center;
        background: var(--theme-color-grey-light-light);
        border-style: solid;
        border-color: var(--theme-color-grey);
        border-width: 0 0 1px 0;
    }

        .modal-content .container-media .area-container .area-refitems .controls > * {
            height: 1.9em;
            margin: 0.25em;
        }

        .modal-content .container-media .area-container .area-refitems .controls .sort-type {
        }

        .modal-content .container-media .area-container .area-refitems .controls .thumbnail-size {
            display: flex;
            align-items: center;
        }

        .modal-content .container-media .area-container .area-refitems .controls .label-upload.btn {
        }

            .modal-content .container-media .area-container .area-refitems .controls .label-upload.btn img {
                padding: 0;
                margin: 0;
                height: 100%;
            }

    .modal-content .container-media .area-container .area-refitems .ref-item-list {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        background-color: white;
        margin: 0;
        transition: 0.25s ease-in-out;
        height: 100%;
        width: 100%;
        align-content: flex-start;
        overflow: hidden auto;
    }

        .modal-content .container-media .area-container .area-refitems .ref-item-list.size-1 .reference-item {
            width: 75px;
            transition: 0.25s ease-in-out;
        }

        .modal-content .container-media .area-container .area-refitems .ref-item-list.size-2 .reference-item {
            width: 150px;
            transition: 0.25s ease-in-out;
        }

        .modal-content .container-media .area-container .area-refitems .ref-item-list.size-3 .reference-item {
            width: 225px;
            transition: 0.25s ease-in-out;
        }

        .modal-content .container-media .area-container .area-refitems .ref-item-list.size-4 .reference-item {
            width: 330px;
            transition: 0.25s ease-in-out;
        }

        .modal-content .container-media .area-container .area-refitems .ref-item-list.size-5 .reference-item {
            width: 375px;
            transition: 0.25s ease-in-out;
        }

        .modal-content .container-media .area-container .area-refitems .ref-item-list .reference-item:not(.selected) {
            border: 2px solid var(--theme-color-text-dark);
        }

        .modal-content .container-media .area-container .area-refitems .ref-item-list .reference-item.selected {
            border: 2px solid var(--theme-color-green);
        }

        .modal-content .container-media .area-container .area-refitems .ref-item-list .reference-item {
            height: max-content;
            display: grid;
            grid-template-columns: 100%;
            grid-template-rows: max-content 1fr max-content;
            margin: 0.25em;
            background-color: var(--theme-color-grey-light);
            user-select: none;
        }

            .modal-content .container-media .area-container .area-refitems .ref-item-list .reference-item .item-title {
                background-color: var(--theme-color-blue-dark);
                color: var(--theme-color-text-light);
                text-align: start;
                white-space: nowrap;
                overflow: hidden;
                height: max-content;
                padding: 0.25em;
            }

        .modal-content .container-media .area-container .area-refitems .ref-item-list.size-1 .reference-item .item-thumbnail-container {
            height: 56px;
            transition: 0.25s ease-in-out;
        }

        .modal-content .container-media .area-container .area-refitems .ref-item-list.size-2 .reference-item .item-thumbnail-container {
            height: 112px;
            transition: 0.25s ease-in-out;
        }

        .modal-content .container-media .area-container .area-refitems .ref-item-list.size-3 .reference-item .item-thumbnail-container {
            height: 168px;
            transition: 0.25s ease-in-out;
        }

        .modal-content .container-media .area-container .area-refitems .ref-item-list.size-4 .reference-item .item-thumbnail-container {
            height: 225px;
            transition: 0.25s ease-in-out;
        }

        .modal-content .container-media .area-container .area-refitems .ref-item-list.size-5 .reference-item .item-thumbnail-container {
            height: 281px;
            transition: 0.25s ease-in-out;
        }

        .modal-content .container-media .area-container .area-refitems .ref-item-list .reference-item .item-thumbnail-container {
            position: relative;
            width: 100%;
            cursor: pointer;
            overflow: hidden;
        }

            .modal-content .container-media .area-container .area-refitems .ref-item-list .reference-item .item-thumbnail-container .media-message:not(.active) {
                opacity: 0;
            }

            .modal-content .container-media .area-container .area-refitems .ref-item-list .reference-item .item-thumbnail-container .media-message {
                position: absolute;
                top: 0;
                right: 0;
                display: flex;
                max-width: 100%;
                width: max-content;
                height: max-content;
                padding: 0.25em;
                background-color: hsla(var(--hsl-color-grey-light-light), 0.7);
                color: var(--theme-color-text-dark);
                border-bottom-left-radius: 0.25em;
                z-index: 10;
                font-size: 0.9em;
                font-weight: 700;
            }

                .modal-content .container-media .area-container .area-refitems .ref-item-list .reference-item .item-thumbnail-container .media-message.active.pending {
                }

                    .modal-content .container-media .area-container .area-refitems .ref-item-list .reference-item .item-thumbnail-container .media-message.active.pending::before {
                    }

                .modal-content .container-media .area-container .area-refitems .ref-item-list .reference-item .item-thumbnail-container .media-message.active.processing {
                }

                    .modal-content .container-media .area-container .area-refitems .ref-item-list .reference-item .item-thumbnail-container .media-message.active.processing::before {
                        content: ' ';
                        width: 0.5em;
                        height: 0.5em;
                        animation: rotate 2s infinite;
                        animation-timing-function: linear;
                        background-image: linear-gradient(var(--theme-color-blue), var(--theme-color-blue)), radial-gradient(circle at top left, var(--theme-color-green) 0%, var(--theme-color-white) 100%);
                        background-origin: border-box;
                        background-clip: content-box, border-box;
                        border: solid 4px transparent;
                        border-radius: 50%;
                        margin-right: 0.25em;
                        padding: 0.1em;
                    }

.media-item .media-message.active.error {
    color: var(--theme-color-red-dark);
}

    .media-item .media-message.active.error::before {
        content: '!';
        height: 100%;
        width: 1em;
        margin-right: 0.25em;
        color: var(--theme-color-text-light);
        background: var(--theme-color-red-dark);
        padding: 0 0.1em;
        text-align: center;
    }

.media-item .media-message.active.complete {
}

    .media-item .media-message.active.complete::before {
    }

.reference-item.protected .item-thumbnail-container::after {
    position: absolute;
    content: url(/images/icons/color/8d8d8d/padlock.svg);
    top: 0;
    right: 0;
    background: hsl(var(--hsl-color-text-light), 0.5);
    border-bottom: 1px solid var(--theme-color-text-dark);
    border-left: 1px solid var(--theme-color-text-dark);
    backdrop-filter: blur(2px);
    max-width: 100%;
    pointer-events: none;
}

.modal-content .container-media .area-container .area-refitems .ref-item-list .reference-item .item-thumbnail-container .item-thumbnail {
    width: 100%;
    max-height: 100%;
    object-fit: contain;
    background-color: var(--theme-color-grey-light);
}

.modal-content .container-media .area-container .area-refitems .ref-item-list .reference-item .item-thumbnail-container .extension {
    position: absolute;
    bottom: 0;
    right: 0;
    background: hsl(var(--hsl-color-text-light), 0.5);
    border-top: 1px solid var(--theme-color-text-dark);
    border-left: 1px solid var(--theme-color-text-dark);
    backdrop-filter: blur(2px);
    max-width: 100%;
    padding: 0.25em;
    pointer-events: none;
}

.modal-content .container-media .area-container .area-refitems .ref-item-list .reference-item .item-name {
    background-color: var(--theme-color-grey-light-light);
    color: var(--theme-color-text-dark);
    display: inline-block;
    cursor: pointer;
    user-select: none;
    width: 100%;
    border-radius: 0;
    border-top: 1px solid black;
    border-right: none;
    border-bottom: none;
    border-left: none;
    transition: 0s;
    border-radius: 0;
}

.modal-content .container-media .area-container .area-refitems .upload-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    min-height: 1em;
    height: max-content;
    max-height: 12em;
    width: 100%;
    background: var(--theme-color-grey-light-light);
    border-top: 1px solid var(--theme-color-grey-light);
    overflow: hidden auto;
}

    .modal-content .container-media .area-container .area-refitems .upload-container .upload-item:not(.started, .paused, .cancelled, .error, .complete) {
        background: var(--theme-color-grey-light);
    }
    .modal-content .container-media .area-container .area-refitems .upload-container .upload-item.started {
        background: var(--theme-color-blue-light);
    }
    .modal-content .container-media .area-container .area-refitems .upload-container .upload-item.paused {
    }
    .modal-content .container-media .area-container .area-refitems .upload-container .upload-item.cancelled,
    .modal-content .container-media .area-container .area-refitems .upload-container .upload-item.error {
        background: var(--theme-color-red-light);
    }
    .modal-content .container-media .area-container .area-refitems .upload-container .upload-item.complete {
        background: var(--theme-color-green-light);
    }

    .modal-content .container-media .area-container .area-refitems .upload-container .upload-item {
        display: grid;
        grid-template-rows: 3em max-content;
        grid-template-columns: 1fr max-content max-content;
        width: 18em;
        height: max-content;
        margin: 0.25em;
        border-style: solid;
        border-color: var(--theme-color-grey-dark);
        border-width: 1px;
        border-radius: 0.25em;
    }

        .modal-content .container-media .area-container .area-refitems .upload-container .upload-item .name {
            grid-column: 1;
            grid-row: 1;
            height: 100%;
            width: 100%;
            padding: 0.25em;
            background: var(--theme-color-text-light);
            border-style: solid;
            border-width: 0 1px 0 0;
            border-color: var(--theme-color-grey);
            border-radius: 0.25em 0 0 0;
            align-content: center;
            overflow: hidden;
            word-break: break-all;
        }
        .modal-content .container-media .area-container .area-refitems .upload-container .upload-item .progress {
            grid-column: 2;
            grid-row: 1;
            height: 100%;
            padding: 0.25em;
            /*border-style: solid;*/
            /*border-width: 1px 0 1px;*/
            align-content: center;
            overflow: hidden;
            font-family: monospace!important;
            text-align: end;
        }
        .modal-content .container-media .area-container .area-refitems .upload-container .upload-item .btn-cancel {
            grid-column: 3;
            grid-row: 1 / 3;
            height: 100%;
            margin: 0;
            border-width: 0 0 0 1px;
            border-color: var(--theme-color-grey);
            border-radius: 0 0.25em 0.25em 0;
            color: var(--theme-color-red-dark);
            cursor: pointer;
        }
        
        .modal-content .container-media .area-container .area-refitems .upload-container .upload-item .error {
            grid-column: 1 / 3;
            grid-row: 2;
            height: max-content;
        }
            .modal-content .container-media .area-container .area-refitems .upload-container .upload-item .error:has(*) {
                padding: 0.25em;
                border-style: solid;
                border-color: var(--theme-color-grey);
                border-width: 1px 0 0 0;
            }

.dockable-container-window {
}

    .dockable-container-window .modal-title-content {
    }

    .dockable-container-window .dockable-title {
        height: 100%;
        width: 100%;
        display: grid;
        grid-template-rows: 100%;
        grid-auto-columns: 1fr;
    }

.modal-message-list {
    display: grid;
    grid-template-columns: 100%;
    grid-auto-rows: max-content;
    padding: 0.5em 0;
    background: var(--theme-color-white);
    overflow: hidden auto;
}

    .modal-message-list:not(:has(:nth-child(2))) > label {
        padding: 0.5em 0.5em 0.5em 0;
        text-wrap: pretty;
        white-space-collapse: preserve-breaks;
        line-height: 1.4;
    }

    .modal-message-list.prompt > * {
        width: calc(100% - 1em);
        margin: 0 auto;
    }

    .modal-message-list label {
        grid-column: 1;
        display: flex;
        min-width: 100%;
        border: none;
        padding-right: 0.5em;
        cursor: text;
        user-select: text; 
    }

        .modal-message-list label:not(:hover) {

        }

        .modal-message-list label:hover {
            background: var(--theme-color-grey-light-light);
        }

        .modal-message-list label:only-child::before,
        .modal-message-list label.title::before {
            content: ' ';
            height: calc(100% - 1px);
            margin: 0 0.25em 0 0;
            align-self: start;
            min-width: 0.5em;
            border-color: transparent;
            border-style: solid;
            border-width: 1px 1px 1px 0;
        }

        .modal-message-list label:not(:only-child, .title)::before {
            content: ' ';
            height: calc(100% - 1px);
            margin: 0 0.25em 0 0;
            align-self: start;
            min-width: 0.5em;
            background-color: var(--theme-color-grey-light);
            border-color: var(--theme-color-grey-dark);
            border-style: solid;
            border-width: 1px 1px 1px 0;
        }

.modal-dialog-prompt-container.choices {
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}

    .modal-dialog-prompt-container.choices .modal-choice-item {
        flex: 1 1 0px;
        min-width: 2em;
        padding: 0.25em;
        border-style: solid;
        border-width: 1px;
        font-size: 1.1em;
        cursor: pointer;
        text-align: center;
    }

        .modal-dialog-prompt-container.choices .modal-choice-item[selected='false']:not(:hover, :active) {
            border-color: var(--theme-color-grey-dark);
            background-color: var(--theme-color-grey-light-light);
            color: var(--theme-color-grey-dark);
        }

        .modal-dialog-prompt-container.choices .modal-choice-item[selected='false']:hover:not(:active) {
            border-color: var(--theme-color-grey-dark);
            background-color: var(--theme-color-grey-light);
            color: var(--theme-color-grey-dark);
        }

        .modal-dialog-prompt-container.choices .modal-choice-item[selected='false']:active {
            border-color: var(--theme-color-grey-light);
            background-color: var(--theme-color-grey-dark);
            color: var(--theme-color-grey-light);
        }

        .modal-dialog-prompt-container.choices .modal-choice-item[selected='true']:not(:hover, :active) {
            border-color: var(--theme-color-blue-dark);
            background-color: var(--theme-color-blue-light);
        }

        .modal-dialog-prompt-container.choices .modal-choice-item[selected='true']:hover:not(:active) {
            border-color: var(--theme-color-blue-dark);
            background-color: var(--theme-color-blue-light);
        }

        .modal-dialog-prompt-container.choices .modal-choice-item[selected='true']:active {
            border-color: var(--theme-color-blue-dark);
            background-color: var(--theme-color-blue-light);
        }

.btn.default {
    border-width: 2px;
}