.editor-mode {

    table {
        width: 100%;
    }

    #editorScreen {
        display: grid;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        pointer-events: none;
        grid-template-rows: auto 1fr auto;
        color: #000000;
        grid-template-columns: 1fr auto auto;
    }

    #editorToolbar {
        pointer-events: all;
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        background-color: rgba(255, 255, 255, 0.8);
        grid-row: 1;
        grid-column: 1 / span 3;
        border-bottom: 1px solid #333333;
    }

    #propertyEditors {
        grid-row: 2;
        grid-column: 2;
        overflow: hidden;
    }

    .propertyEditor {
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        background-color: rgba(255, 255, 255, 0.8);
        padding: 6px;
        font-size: 13px;
        font-weight: 600;
        pointer-events: all;
        user-select: none;
        border: 1px solid #333333;
        margin: 12px 0px 12px 12px;
        width: 360px;
        border-radius: 8px;
    }

    .propertyEditorLabel {
        font-size: 12px;
    }

    .propEditorButtons {
        margin-top: 12px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    #mainSidebar {
        grid-row: 2;
        grid-column: 3;
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        background-color: rgba(255, 255, 255, 0.8);
        padding: 6px;
        font-size: 13px;
        pointer-events: all;
        user-select: none;
        overflow: hidden;
        border-radius: 8px;
        margin: 12px;
        width: 430px;
        border: 1px solid #333333;
        display: grid;
        grid-template-rows: auto 1fr;
    }

    #sidebarContent {
        overflow: auto;
    }

    #statusBar {
        grid-row: 3;
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        background-color: rgba(255, 255, 255, 0.8);
        padding: 6px;
        font-size: 13px;
        font-weight: 600;
        pointer-events: all;
        user-select: none;
        grid-column: 1 / span 3;
        border-top: 1px solid #333333;
    }

    .placeItemHilight {
        color: #43A047 !important;
        outline: 2px solid #ff0000;
    }

    .terrainCard {
        border: 1px solid #999999;
        border-radius: 8px;
        padding: 6px 12px;
        margin: 6px;
        cursor: pointer;
        user-select: none;
    }

    .terrainCardName {
        font-weight: 600;
        font-size: 13px;
    }

    .terrainCardId {
        font-weight: 400;
        font-size: 12px;
        opacity: 0.6;
    }

    #sidebarSectionTilemap {
        display: grid;
        grid-template-rows: auto 1fr;
        overflow: hidden;
    }

    #editorTilemapListing {
        overflow: auto;
    }

    .tileCard {
        position: relative;
        margin: 2px;
        height: 63px;
        width: 63px;
        border: 1px solid #999999;
        border-radius: 8px;
        cursor: pointer;
        user-select: none;
        display: inline-block;
        color: #ffffff;
    }

    .tileCardName {
        position: absolute;
        bottom: 2px;
        left: 2px;
        width: calc(100% - 4px);
        text-shadow: 1px 1px 0px #000000,
                     1px -1px 0px #000000,
                     -1px 1px 0px #000000,
                     -1px -1px 0px #000000;
        font-weight: 600;
        font-size: 10px;
    }

    .editorColorPickerBox {
        height: 24px;
        margin: 2px;
        border-radius: 6px;
        cursor: pointer;
        border: 1px solid #999999;
        background-color: rgba(130, 130, 130, 0.5);
    }

    #sidebarSectionEmitters {
        display: grid;
        grid-template-rows: auto 1fr;
        overflow: hidden;
    }

    #editorEmittersListing {
        overflow: auto;
    }

    #editorEmittersButtons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    #sidebarSectionNPC {
        display: grid;
        grid-template-rows: auto 1fr;
        gap: 12px;
        overflow: hidden;
    }

    #npcListing {
        overflow: auto;
    }

    .editorPopup {
        display: none;
    }

    .editorPopup.open {
        position: absolute;
        top: 50%;
        left: 50%;
        height: calc(90% - 24px);
        width: calc(90% - 24px);
        overflow: hidden;
        padding: 12px;
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid #333333;
        border-radius: 12px;
        display: grid;
        transform: translate(-50%, -50%);
        grid-template-columns: 1fr auto;
        gap: 12px;
        align-items: center;
        grid-template-rows: auto 1fr;
        user-select: none;
    }

    .editorPopupTitle {
        grid-column: 1;
        grid-row: 1;
        font-weight: 600;
    }

    .editorPopupClose {
        grid-column: 2;
        grid-row: 1;
        cursor: pointer;
        transition: 0.2s;
    }

    .editorPopupClose:hover {
        font-weight: 800;
        color: #C62828;
    }

    .editorPopupContent{
        grid-column: 1 / span 2;
        grid-row: 2;
        height: 100%;
        overflow: auto;
    }

    #itemEditorContent {
        overflow: hidden !important;
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 12px;
    }

    .editorIconButton {
        display: inline-block;
        align-content: center;
    }

    .destructiveButton {
        background-color: #C62828;
        color: #ffffff;
    }

    #itemEditorContentSidebar {
        display: grid;
        grid-template-rows: auto 1fr;
        overflow: hidden;
        border-right: 1px solid #333333;
        padding-right: 12px;
    }

    #itemListing {
        overflow: auto;
    }

    #itemEditorContentMain {
        overflow: auto;
        padding-bottom: 24px;
    }

    .itemEditorCard {
        border: 1px solid #999999;
        border-radius: 8px;
        padding: 6px 12px;
        margin: 6px 0px;
        cursor: pointer;
        user-select: none;
        font-weight: 600;
        font-size: 13px;
    }

    .inventoryOptionItem {
        display: grid;
        align-items: center;
        grid-template-columns: 1fr auto auto;
        gap: 6px;
        padding: 6px;
        border: 1px solid #999999;
        border-radius: 8px;
        margin: 6px 0px;
    }
}