* {
    padding: 0;
    margin: 0;
}

html, body {
    min-height: 100vh;
}
html {
    background-color: #f0f0f0;
}
body {
    font-family: 'Tahoma', 'Arial', sans-serif;
    font-size: 8.5pt;
    font-weight: bold;
    line-height: 0.8em;
    overflow: auto;
}

.app-container {
    display: flex;
    align-items: stretch;
    position: relative;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: auto;
    border: none;
    box-sizing: border-box;
}
.context-menu,
.context-menu-style {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    min-width: 160px;
    height: auto;
    z-index: 2;
    background-color: #f5f5f5;
    font-weight: normal;
    cursor: default;
    padding: 2px;
    box-sizing: border-box;
    border: 1px solid #999;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
    user-select: none;
}
.context-menu-style {
    background-color: #ececec;
}
.context-menu div,
.context-menu-style div {
    width: 100%;
}
.context-menu .separator,
.context-menu-style .separator {
    display: block;
    width: 100%;
    border-top: 1px solid #aaa;
    margin: 1px 0;
    box-sizing: border-box;
}
.context-menu .item,
.context-menu-style .item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 3px 4px;
    box-sizing: border-box;
}
.context-menu .item:not(.disabled):hover,
.context-menu-style .item:not(.disabled):hover {
    background-color: #359aff;
    color: #fff;
}
.context-menu .item:not(.disabled):hover .item:not(:hover),
.context-menu-style .item:not(.disabled):hover .item:not(:hover) {
    color: #000;
}
.context-menu .item:before,
.context-menu-style .item:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: transparent;
    margin-right: 4px;
}
.context-menu .item.disabled,
.context-menu-style .item.disabled {
    color: #666;
}
.context-menu .item.disabled:before,
.context-menu-style .item.disabled:before {
    filter: grayscale(0) contrast(0);
}

.context-menu .item.item-add:before { background-image: url('../images/icon_item_add.png'); }
.context-menu .item.item-export-all-scripts:before { background-image: url('../images/icon_export_scripts.png'); }
.context-menu .item.item-duplicate:before { background-image: url('../images/icon_duplicate.png'); }
.context-menu .item.item-create-group:before { background-image: url('../images/icon_folder_add.png'); }
.context-menu .item.item-delete:before { background-image: url('../images/icon_delete.png'); }
.context-menu .item.item-rename:before { background-image: url('../images/icon_rename.png'); }
.context-menu .item.item-properties:before { background-image: url('../images/icon_properties.png'); }

.context-menu-style .item.item-new:before { background-image: url('../images/icon_new.png'); }
.context-menu-style .item.item-open:before { background-image: url('../images/icon_open.png'); }
.context-menu-style .item.item-save:before { background-image: url('../images/icon_save.png'); }
.context-menu-style .item.item-save-as:before { background-image: url('../images/icon_save_as.png'); }
.context-menu-style .item.item-export:before { background-image: url('../images/icon_item_export.png'); }
.context-menu-style .item.item-add:before { background-image: url('../images/icon_folder_add.png'); }
.context-menu-style .item.item-settings:before { background-image: url('../images/icon_settings.png'); }
.context-menu-style .item.item-run:before { background-image: url('../images/icon_item_run.png'); }
.context-menu-style .item.item-run-debug:before { background-image: url('../images/icon_item_run_debug.png'); }
.context-menu-style .item.item-information:before { background-image: url('../images/information.png'); }
.context-menu-style .item.item-okay:before { background-image: url('../images/okay.png'); }
.context-menu-style .item.item-okay-big:before { background-image: url('../images/icon_okay_nav.png'); }
.context-menu-style .item.item-copy:before { background-image: url('../images/icon_copy.png'); }

.context-menu-style .item.item-strip-create:before { background-image: url('../images/icon_strip_create.png'); }
.context-menu-style .item.item-strip-add:before { background-image: url('../images/icon_strip_add.png'); }
.context-menu-style .item.item-erase-color:before { background-image: url('../images/icon_image_erase_color.png'); }

.context-menu .item-group-visible,
.context-menu .item-item-visible,
.context-menu-style .item-group-visible,
.context-menu-style .item-item-visible {
    display: none;
}
.context-menu.group-menu .item-group-visible,
.context-menu:not(.group-menu) .item-item-visible,
.context-menu-style.group-menu .item-group-visible,
.context-menu-style:not(.group-menu) .item-item-visible {
    display: initial;
}
.context-menu-style .item-list-option {
    position: relative;
}
.context-menu-style .item-list-option:after {
    content: '';
    display: block;
    position: absolute;
    right: 9px;
    top: calc(50% - 2px);
    width: 4px;
    height: 4px;
    border-right: 1px solid rgb(87, 87, 87);
    border-bottom: 1px solid rgb(87, 87, 87);
    transform: rotate(-45deg);
}
.item-list-option.disabled:after {
    border-right: 1px solid rgb(148, 148, 148);
    border-bottom: 1px solid rgb(148, 148, 148);
}
.context-menu-style .item-list-option > .context-menu-style {
    display: none;
    z-index: 1;
    position: absolute;
    left: 100%;
    top: -4px;
}
.context-menu-style .item-list-option:not(.disabled):hover > .context-menu-style,
.context-menu-style .item-list-option:not(.disabled) > .context-menu-style:hover {
    display: flex;
}
input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
    padding: 2px;
    font-size: 12px;
}
input[type="number"]:read-only {
    background: transparent;
    border: 1px inset #999;
}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input {
    outline: none;
}
input[type="text"] {
    padding: 2px;
    font-size: 12px;
    width: 128px;
}
input[type="checkbox"] {
    margin-right: 4px;
}
input[type="file"] {
    display: none;
}
fieldset {
    padding: 6px;
    border: 2px groove rgba(255, 255, 255, 0.5);
}
fieldset legend {
    padding: 0 4px;
}
.col-outer, .col-outer-block {
    display: block;
    min-width: 250px;
    width: auto;
    min-height: 100%;
    height: auto;
    padding: 8px;
    text-align: left;
    box-shadow: 2px 2px 1px rgba(102, 102, 102, 0.5) inset, -2px -2px 1px #fff inset;
    box-sizing: border-box;
}
.col-outer:not(:last-child), .col-outer-block:not(:last-child) {
    margin-right: 1px;
}
.col-outer-block {
    min-width: 180px;
}
.col-192,
.col-164 {
    display: block;
    width: 192px;
    height: auto;
    text-align: center;
}
.col-164 {
    width: 164px;
}
.flex-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.flex-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
}
.flex-row-evenly {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
}
.flex-fit-width {
    flex: 1;
}
.align-start {
    align-items: flex-start;
}
.justify-start {
    justify-content: flex-start;
}
button.btn, .button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    min-width: 128px;
    text-align: left;
    padding: 4px;
    font-size: 12px;
    border: 1px solid #a4a4a4;
    border-radius: 3px;
    background-color: #c8c8c8;
    background: linear-gradient(to bottom, #ebebeb 0%, #f0f0f0 49%, #dcdcdc 51%, #d2d2d2 100%);
    box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5) inset, -1px -1px 1px rgba(255, 255, 255, 0.5) inset;
    box-sizing: border-box;
    user-select: none;
}
button.btn:hover, .button.btn:hover {
    background: linear-gradient(to bottom, #eaf1fa 0%, #d2ecff 49%, #b4defb 51%, #aad4ed 100%);
}
button.btn:active, .button.btn:active {
    background: linear-gradient(to bottom, #d5e9f6 0%, #bfe3fd 49%, #8dc3e7 51%, #6897c1 100%);
    box-shadow: none;
    outline: 2px dotted rgba(0, 0, 0, 0.1);
}
button.btn img, .button.btn img {
    width: 16px;
    height: 16px;
    margin-right: 4px;
}
button.btn-icon, .button.btn-icon {
    min-width: auto;
}
button.btn-icon.btn-flat, .button.btn-icon.btn-flat {
    padding: 1px 2px;
}
button.btn-icon img, .button.btn-icon img {
    margin-right: 0;
}
.mt-2 { margin-top: 2px; }
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-64 { margin-top: 64px; }
.mb-4 { margin-bottom: 4px; }
.mb-8 { margin-bottom: 8px; }
.ml-2 { margin-left: 2px; }
.ml-4 { margin-left: 4px; }
.ml-8 { margin-left: 8px; }
.ml-16 { margin-left: 16px; }
.ml-24 { margin-left: 24px; }
.ml-64 { margin-left: 64px; }
.ml-80 { margin-left: 80px; }
.mr-2 { margin-right: 2px; }
.mr-4 { margin-right: 4px; }
.mr-8 { margin-right: 8px; }
.mr-16 { margin-right: 16px; }
.p-0 { padding: 0; }
.p-4 { padding: 4px; }
.pr-0 { padding-right: 0; }
.pr-8 { padding-right: 8px; }
.pr-24 { padding-right: 24px !important; }
.ph-8 { padding-left: 8px; padding-right: 8px; }
.pl-4 { padding-left: 4px; }
.t-2 { top: 2px; }
.fs-9 { font-size: 9px; }
.fs-11 { font-size: 11px; }
.fs-italic { font-style: italic; }
.ff-sans { font-family: sans; }
.lh-12em { line-height: 1.2em; }
.bbox { box-sizing: border-box; }
.jc-start { justify-content: flex-start; }
.jc-between { justify-content: space-between; }
.jc-center { justify-content: center !important; }
.jc-end { justify-content: flex-end; }
.ai-start { align-items: flex-start; }
.ai-center { align-items: center; }
.ai-end { align-items: flex-end; }
.d-block { display: block; }
.d-flex { display: flex !important; }
.fd-row { flex-direction: row; }
.fd-column { flex-direction: column; }
.fd-column-r { flex-direction: column-reverse !important; }
.f-grow { flex-grow: 1; }
.t-nowrap { text-wrap: nowrap; }
.fw-normal { font-weight: normal; }
.no-select { user-select: none; }
.p-relative { position: relative; }
.bg-white { background-color: #FFF; }
.of-hidden { overflow: hidden; }
.col-fieldset {
    width: calc(100% - 48px);
    text-align: left;
}
.w-full {
    width: calc(100% - 16px);
    box-sizing: border-box;
}
.w-40 { width: 40% !important; }
.w-50 { width: 50% !important; }
.w-65 { width: 65% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-min-auto { min-width: auto !important; }
.w-22px { width: 22px !important; }
.w-24px { width: 24px !important; }
.w-32px { width: 32px !important; }
.w-64px { width: 64px !important; }
.w-80px { width: 80px !important; }
.w-160px { width: 160px !important; }
.w-180px { width: 180px; }
.w-192px { width: 192px; }
.w-240px { width: 240px !important; }
.w-320px { width: 320px !important; }
.mw-600px { min-width: 600px !important; width: auto; }
.h-100 { height: 100%; }
.h-min-300px { min-height: 300px; }
.h-16px { height: 16px; }
.h-20px { height: 20px; }
.h-480px { height: 480px; }
.align-c { text-align: center; }
.align-l { text-align: left; }
.align-r { text-align: right; }
.v-hidden { visibility: hidden; }
.text-no-transform { text-transform: none; }
.modal-container .w-96 { width: 96px; }
.small-number-input { width: 32px !important; }
.icon-number-input { width: 20px !important; }
.filename { word-break: break-all; line-height: 1.2em; }
.select-resource {
    border-width: 1px;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3) inset,
                -1px -1px 0 rgba(255, 255, 255, 0.6) inset;
    max-width: 80px;
    background-color: inherit;
    outline: none;
    font-family: monospace;
    font-size: 11px;
    margin-left: 2px;
    cursor: default;
}
.select-resource.select-resource-name {
    max-width: none;
    width: 128px;
    background-color: #FFF;
}
.separator-l {
    border-left: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.6);
}
.separator-r {
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.6);
}
button.btn-small, .button.btn-small {
    display: inline-block;
    padding: 1px;
    width: auto;
    min-width: 80px;
    text-align: center;
}
button.btn-narrow {
    height: 22px;
}
button.btn-primary, .button.btn-primary {
    text-align: center;
    justify-content: center;
    border-color: #4993c4;
    box-shadow: 1px 1px 0px rgba(120, 189, 228, 0.8) inset, -1px -1px 0px rgba(120, 189, 228, 0.8) inset;
    width: auto;
    min-width: 96px;
}
button.btn-primary img, .button.btn-primary img {
    width: auto;
}
button.align-c {
    display: block;
    text-align: center;
}
button.btn-focus-outline.btn-focus {
    /*outline: 2px solid rgb(144, 183, 241);*/
    border: 1px solid rgb(109, 137, 239);
    box-shadow: 1px 1px 0 rgb(144, 183, 241) inset, -1px -1px 0 rgb(144, 183, 241) inset;
}
.btn-list, .btn-panel {
    display: inline-block;
    width: 18px;
    height: 16px;
    background-image: url('../images/list.png');
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    padding-left: 4px;
    position: relative;
    top: 4px;
}
.btn-list {
    background-color: transparent;
}
.btn-list:hover,
.btn-panel:not(.disabled):hover {
    outline: 1px solid #4993c4;
    background-color: #a8e2f7;
}
.btn-list:active { background-position-x: right; }
.btn-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 20px;
    background-image: none;
    top: 0;
    padding: 2px;
    margin-left: 2px;
    box-sizing: border-box;
}
.btn-panel:first-child {
    padding-left: 0;
}
.btn-panel > * {
    position: relative;
}
.btn-panel:not(.disabled):active > * {
    left: 1px;
}
.btn-panel.disabled {
    filter: contrast(0) opacity(0.6);
}
.btn-panel.checked:not(.disabled) {
    outline: 1px solid #4993c4;
    background-color: #a8e2f7;
}
.btn-panel.checked:not(.disabled) > * {
    left: 1px;
}

.flat-buttons {
    display: flex;
    flex-direction: column;
}
.flat-buttons.reverse {
    flex-direction: column-reverse;
}
.flat-buttons .flat-buttons-row {
    display: flex;
    flex-direction: row;
}
.flat-buttons .btn-flat {
    display: inline-block;
    min-width: 33%;
    flex-grow: 1;
    text-align: right;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 16px;
    box-sizing: border-box;
    border: 1px solid #CCC;
    border-left-width: 0;
    border-bottom-width: 0;
    background-color: #EEE;
    cursor: default;
    position: relative;
    user-select: none;
    z-index: 1;
}
.flat-buttons .flat-buttons-row .btn-flat.active:first-of-type {
    border-left-width: 0;
}
.flat-buttons .btn-flat:first-child {
    border-left-width: 1px;
}
.flat-buttons-row:last-child .btn-flat {
    border-bottom: 1px solid #CCC;
}
.flat-buttons .btn-flat:not(.disabled):not(.active):hover {
    background-color: #E4F7FF;
}
.flat-buttons .btn-flat.active {
    background-color: #FFF;
    left: -1px;
    top: -2px;
    padding-right: 18px;
    padding-top: 6px;
    z-index: 2;
    border-left-width: 1px;
    border-bottom-width: 0;
}
.flat-buttons.reverse .flat-buttons-row:last-child .btn-flat {
    border-bottom-width: 0;
}
.flat-buttons.reverse .flat-buttons-row:first-child .btn-flat {
    border-bottom: 1px solid #CCC;
}
.flat-buttons.reverse .flat-buttons-row:first-child .btn-flat.active {
    border-bottom-width: 0;
}

.event-list {
    display: block;
    width: 100%;
    min-height: 256px;
    height: 256px;
    background-color: #FFF;
    border: 1px solid #888;
    overflow-x: hidden;
    overflow-y: auto;
}
.modal-container.maximized .event-list {
    height: calc(100% - 80px);
}
.event-list .event-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: calc(100% - 2px);
    height: auto;
    overflow: hidden;
    padding: 2px 0;
    margin: 1px;
    box-sizing: border-box;
    text-align: left;
    background-color: #FFF;
    color: #000;
    font-size: 12px;
    user-select: none;
}
.event-list .event-row.selected {
    background-color: rgb(0, 120, 215);
    color: #FFF;
}
.event-list .event-row:before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-repeat: none;
    background-size: contain;
    background-position: center;
    background-color: transparent;
    margin-right: 4px;
}
.event-list .event-row-create:before { background-image: url('../images/event_create.png'); }
.event-list .event-row-mouse:before { background-image: url('../images/event_mouse.png'); }
.event-list .event-row-destroy:before { background-image: url('../images/event_destroy.png'); }
.event-list .event-row-other:before { background-image: url('../images/event_other.png'); }
.event-list .event-row-timer:before { background-image: url('../images/event_timer.png'); }
.event-list .event-row-draw:before { background-image: url('../images/event_draw.png'); }
.event-list .event-row-step:before { background-image: url('../images/event_step.png'); }
.event-list .event-row-keypress:before { background-image: url('../images/event_keypress.png'); }
.event-list .event-row-collision:before { background-image: url('../images/event_collision.png'); }
.event-list .event-row-keyup:before { background-image: url('../images/event_keyup.png'); }
.event-list .event-row-keydown:before { background-image: url('../images/event_keydown.png'); }

.outer-list-container {
    z-index: 99000;
    /* TODO */
}

.event-kind-list {
    display: flex;
    flex-direction: column;
    min-width: 180px;
    width: auto;
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgb(242, 242, 242);
    border: 1px solid rgb(204, 204, 204);
    border-radius: 0;
    box-shadow: 5px 5px 2px -3px rgba(0, 0, 0, 0.4);
    padding: 2px;
    box-sizing: border-box;
}
.event-kind-list.small-list {
    min-width: 146px;
}
.event-kind-list.narrow-list {
    min-width: 80px;
}
.event-kind-list .btn-list-option {
    padding: 7px 4px 7px 32px;
    cursor: default;
    user-select: none;
    position: relative;
}
.event-kind-list .btn-list-option:hover {
    background-color: rgb(145, 201, 247);
}
.event-kind-list .btn-list-option:hover > .icon-block {
    opacity: 0.5;
}
.event-kind-list .btn-list-separator {
    padding-right: 32px;
    border-top: 1px solid rgb(215, 215, 215);
    margin: 3px 0 3px 32px;
}
.event-kind-list .btn-list-option.btn-list-option-list:after {
    content: '';
    display: block;
    position: absolute;
    right: 9px;
    top: calc(50% - 2px);
    width: 4px;
    height: 4px;
    border-right: 1px solid rgb(87, 87, 87);
    border-bottom: 1px solid rgb(87, 87, 87);
    transform: rotate(-45deg);
}
.event-kind-list .btn-list-option.btn-list-option-list > .btn-list-option-list-container {
    display: none;
    z-index: 1;
    position: absolute;
    left: 100%;
    top: -4px;
}
.event-kind-list.orientation-top-at-half .btn-list-option.btn-list-option-list > .btn-list-option-list-container.orientation-top-at-half {
    top: auto;
    bottom: calc(-100% + 16px);
}
.event-kind-list .btn-list-option.btn-list-option-list:hover > .btn-list-option-list-container,
.event-kind-list .btn-list-option.btn-list-option-list > .btn-list-option-list-container:hover {
    display: flex;
}

.event-kind-list.event-kind-list-columns {
    flex-direction: row;
    min-width: auto;
}
.event-kind-list.event-kind-list-columns .event-kind-list-column {
    display: flex;
    flex-direction: column;
}
.event-kind-list.event-kind-list-columns .event-kind-list-column:not(:last-child) {
    padding-right: 1px;
    border-right: 1px solid rgb(215, 215, 215);
    margin-right: 1px;
}
.event-kind-list.event-kind-list-columns .btn-list-option {
    padding: 5px 16px;
}

.modal:not(.maximized) .actions-container {
    padding-bottom: 0;
}
.action-list {
    display: block;
    width: 100%;
    width: 180px;
    max-height: 320px;
    height: 100%;
    background-color: #FFF;
    border: 1px solid #888;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0 4px;
    box-sizing: border-box;
    outline: none;
}
.modal.maximized:not(.minimized) .action-list {
    width: 100%;
    max-height: none;
}
.action-list .action-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    max-width: 184px;
    height: 26px;
    box-sizing: border-box;
    margin: 1px;
    padding: 1px;
    cursor: default;
    user-select: none;
    background-color: #FFF;
    color: #000;
    font-size: 11px;
}
.modal.maximized:not(.minimized) .action-list .action-row {
    max-width: none;
}
.action-list .action-row.selected {
    background-color: rgb(0, 120, 215);
    color: #FFF;
}
.action-list .action-row.selected:focus,
.action-list .action-row.selected:active {
    outline: 1px dotted #000;
}
.action-list .action-row .icon {
    display: inline-block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    /*background-color: #BBB;*/
    background-repeat: no-repeat;
    background-size: 24px 24px;
    margin-right: 4px;
}
.action-list .action-row span {
    flex-shrink: 1;
    width: auto;
    height: auto;
    word-break: keep-all;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: visible;
    text-overflow: ellipsis;
    padding: 4px 0;
    box-sizing: border-box;
}
.action-list .action-row .action-icon-comment + span {
    font-style: italic;
    padding-right: 4px;
}
.action-list .action-row > * {
    user-select: none;
    pointer-events: none;
}
.action-icon-list {
    display: flex;
    width: 128px;
    height: calc(100% + 12px);
    background-color: #FFF;
    border: none;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    top: -4px;
    border-left: 1px solid #AAA;
    margin-left: 20px;
    flex-shrink: 0;
}
.modal:not(.maximized) .action-icon-list {
    height: 100%;
}
.action-icon-list .action-tabs {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #FFF;
    border: 1px solid rgb(220, 220, 220);
    border-right: 3px ridge rgb(205 205 205);
    border-bottom: 3px ridge rgb(205 205 205);
    box-sizing: border-box;
    margin-left: 2px;
    flex-shrink: 1;
    position: relative;
    z-index: 1;
}
.modal:not(.maximized) .action-tabs {
    height: 342px;
}
.modal:not(.maximized) .mw-80px {
    max-width: 80px !important;
}
.action-icon-list .action-tab-selector {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 20px;
    height: auto;
    box-sizing: border-box;
    writing-mode: vertical-lr;
}
.modal:not(.maximized) .action-tab-selector {
    height: 342px;
}
.action-icon-list .action-tab-selector .action-tab-item {
    display: block;
    width: auto;
    height: auto;
    padding: 6px 4px;
    padding-left: 8px;
    border: 1px solid rgb(220, 220, 220);
    border-right: 2px ridge rgb(205 205 205);
    border-bottom: 2px ridge rgb(205 205 205);
    border-radius: 3px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background-color: #FFF;
    border-left: none;
    cursor: default;
    user-select: none;
    position: relative;
    left: -6px;
    top: 1px;
    z-index: 0;
    margin-bottom: 1px;
}
.action-icon-list .action-tab-selector .action-tab-item.selected {
    left: -3px;
    top: 0;
    z-index: 2;
}
.action-icon-list .action-tabs .block-separator {
    display: block;
    width: 100%;
    text-align: left;
    padding: 4px 12px;
    box-sizing: border-box;
    font-size: 10px;
    position: relative;
}
.action-icon-list .action-tabs .block-separator:after {
    content: '';
    display: block;
    width: calc(100% - 4px);
    position: absolute;
    left: 2px;
    top: calc(50% - 1px);
    border-top: 1px solid #AAA;
    z-index: 1;
}
.action-icon-list .action-tabs .block-separator span {
    position: relative;
    z-index: 2;
    background-color: #FFF;
    padding: 0 4px;
    box-sizing: border-box;
}
.action-icon-list .action-tabs .block,
.action-icon-list .action-tabs .row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    padding: 2px 4px;
    box-sizing: border-box;
}
.action-icon-list .action-tabs .row {
    grid-template-rows: repeat(1, 1fr);
    margin-bottom: 2px;
}
.action-icon-list .action-tabs .action-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    /*background-color: #BBB;*/
    background-repeat: no-repeat;
    background-size: 24px 24px;
}
.action-icon-move-fixed { background-image: url('../images/library/action_move_fixed.png'); }
.action-icon-move-free { background-image: url('../images/library/action_move_free.png'); }
.action-icon-move-towards { background-image: url('../images/library/action_move_towards.png'); }
.action-icon-speed-horizontal { background-image: url('../images/library/action_speed_horizontal.png'); }
.action-icon-speed-vertical { background-image: url('../images/library/action_speed_vertical.png'); }
.action-icon-set-gravity { background-image: url('../images/library/action_set_gravity.png'); }
.action-icon-reverse-horizontal { background-image: url('../images/library/action_reverse_horizontal.png'); }
.action-icon-reverse-vertical { background-image: url('../images/library/action_reverse_vertical.png'); }
.action-icon-set-friction { background-image: url('../images/library/action_set_friction.png'); }
.action-icon-jump-to-position { background-image: url('../images/library/action_jump_to_position.png'); }
.action-icon-jump-to-start { background-image: url('../images/library/action_jump_to_start.png'); }
.action-icon-jump-to-random { background-image: url('../images/library/action_jump_to_random.png'); }
.action-icon-align-to-grid { background-image: url('../images/library/action_align_to_grid.png'); }
.action-icon-wrap-screen { background-image: url('../images/library/action_wrap_screen.png'); }
.action-icon-move-to-contact { background-image: url('../images/library/action_move_to_contact.png'); }
.action-icon-bounce { background-image: url('../images/library/action_bounce.png'); }
.action-icon-step-towards { background-image: url('../images/library/action_step_towards.png'); }
.action-icon-step-avoiding { background-image: url('../images/library/action_step_avoiding.png'); }

.action-icon-create-instance { background-image: url('../images/library/action_create_instance.png'); }
.action-icon-create-moving { background-image: url('../images/library/action_create_moving.png'); }
.action-icon-create-random { background-image: url('../images/library/action_create_random.png'); }
.action-icon-change-instance { background-image: url('../images/library/action_change_instance.png'); }
.action-icon-destroy-instance { background-image: url('../images/library/action_destroy_instance.png'); }
.action-icon-destroy-at-position { background-image: url('../images/library/action_destroy_at_position.png'); }
.action-icon-change-sprite { background-image: url('../images/library/action_change_sprite.png'); }
.action-icon-transform-sprite { background-image: url('../images/library/action_transform_sprite.png'); }
.action-icon-color-sprite { background-image: url('../images/library/action_color_sprite.png'); }
.action-icon-play-sound { background-image: url('../images/library/action_play_sound.png'); }
.action-icon-stop-sound { background-image: url('../images/library/action_stop_sound.png'); }
.action-icon-check-sound { background-image: url('../images/library/action_check_sound.png'); }
.action-icon-previous-room { background-image: url('../images/library/action_previous_room.png'); }
.action-icon-next-room { background-image: url('../images/library/action_next_room.png'); }
.action-icon-restart-room { background-image: url('../images/library/action_restart_room.png'); }
.action-icon-different-room { background-image: url('../images/library/action_different_room.png'); }
.action-icon-check-previous { background-image: url('../images/library/action_check_previous.png'); }
.action-icon-check-next { background-image: url('../images/library/action_check_next.png'); }

.action-icon-set-timer { background-image: url('../images/library/action_set_timer.png'); }
.action-icon-sleep { background-image: url('../images/library/action_sleep.png'); }
.action-icon-set-time-line { background-image: url('../images/library/action_set_time_line.png'); }
.action-icon-time-line-position { background-image: url('../images/library/action_time_line_position.png'); }
.action-icon-time-line-speed { background-image: url('../images/library/action_time_line_speed.png'); }
.action-icon-start-time-line { background-image: url('../images/library/action_start_time_line.png'); }
.action-icon-pause-time-line { background-image: url('../images/library/action_pause_time_line.png'); }
.action-icon-stop-time-line { background-image: url('../images/library/action_stop_time_line.png'); }
.action-icon-display-message { background-image: url('../images/library/action_display_message.png'); }
.action-icon-show-info { background-image: url('../images/library/action_show_info.png'); }
.action-icon-splash-text { background-image: url('../images/library/action_splash_text.png'); }
.action-icon-splash-image { background-image: url('../images/library/action_splash_image.png'); }
.action-icon-splash-webpage { background-image: url('../images/library/action_splash_webpage.png'); }
.action-icon-splash-video { background-image: url('../images/library/action_splash_video.png'); }
.action-icon-splash-settings { background-image: url('../images/library/action_splash_settings.png'); }
.action-icon-restart-game { background-image: url('../images/library/action_restart_game.png'); }
.action-icon-end-game { background-image: url('../images/library/action_end_game.png'); }
.action-icon-save-game { background-image: url('../images/library/action_save_game.png'); }
.action-icon-load-game { background-image: url('../images/library/action_load_game.png'); }
.action-icon-replace-sprite { background-image: url('../images/library/action_replace_sprite.png'); }
.action-icon-replace-sound { background-image: url('../images/library/action_replace_sound.png'); }
.action-icon-replace-background { background-image: url('../images/library/action_replace_background.png'); }

.action-icon-check-empty { background-image: url('../images/library/action_check_empty.png'); }
.action-icon-check-collision { background-image: url('../images/library/action_check_collision.png'); }
.action-icon-check-object { background-image: url('../images/library/action_check_object.png'); }
.action-icon-test-instance-count { background-image: url('../images/library/action_test_instance_count.png'); }
.action-icon-test-chance { background-image: url('../images/library/action_test_chance.png'); }
.action-icon-check-question { background-image: url('../images/library/action_check_question.png'); }
.action-icon-test-expression { background-image: url('../images/library/action_test_expression.png'); }
.action-icon-check-mouse { background-image: url('../images/library/action_check_mouse.png'); }
.action-icon-check-grid { background-image: url('../images/library/action_check_grid.png'); }
.action-icon-start-block { background-image: url('../images/library/action_start_block.png'); }
.action-icon-else { background-image: url('../images/library/action_else.png'); }
.action-icon-exit-event { background-image: url('../images/library/action_exit_event.png'); }
.action-icon-end-block { background-image: url('../images/library/action_end_block.png'); }
.action-icon-repeat { background-image: url('../images/library/action_repeat.png'); }
.action-icon-call-parent-event { background-image: url('../images/library/action_call_parent_event.png'); }
.action-icon-execute-code { background-image: url('../images/library/action_execute_code.png'); }
.action-icon-execute-script { background-image: url('../images/library/action_execute_script.png'); }
.action-icon-comment { background-image: url('../images/library/action_comment.png'); }
.action-icon-set-variable { background-image: url('../images/library/action_set_variable.png'); }
.action-icon-test-variable { background-image: url('../images/library/action_test_variable.png'); }
.action-icon-draw-variable { background-image: url('../images/library/action_draw_variable.png'); }
.action-icon-clear-distribution { background-image: url('../images/library/action_clear_distribution.png'); }
.action-icon-add-distribution { background-image: url('../images/library/action_add_distribution.png'); }
.action-icon-set-distribution { background-image: url('../images/library/action_set_distribution.png'); }

.action-icon-set-score { background-image: url('../images/library/action_set_score.png'); }
.action-icon-test-score { background-image: url('../images/library/action_test_score.png'); }
.action-icon-draw-score { background-image: url('../images/library/action_draw_score.png'); }
.action-icon-show-highscore { background-image: url('../images/library/action_show_highscore.png'); }
.action-icon-clear-highscore { background-image: url('../images/library/action_clear_highscore.png'); }
.action-icon-set-lives { background-image: url('../images/library/action_set_lives.png'); }
.action-icon-test-lives { background-image: url('../images/library/action_test_lives.png'); }
.action-icon-draw-lives { background-image: url('../images/library/action_draw_lives.png'); }
.action-icon-draw-life-images { background-image: url('../images/library/action_draw_life_images.png'); }
.action-icon-set-health { background-image: url('../images/library/action_set_health.png'); }
.action-icon-test-health { background-image: url('../images/library/action_test_health.png'); }
.action-icon-draw-health { background-image: url('../images/library/action_draw_health.png'); }
.action-icon-score-caption { background-image: url('../images/library/action_score_caption.png'); }

.action-icon-create-part-system { background-image: url('../images/library/action_create_part_system.png'); }
.action-icon-destroy-part-system { background-image: url('../images/library/action_destroy_part_system.png'); }
.action-icon-clear-part-system { background-image: url('../images/library/action_clear_part_system.png'); }
.action-icon-create-particle { background-image: url('../images/library/action_create_particle.png'); }
.action-icon-particle-color { background-image: url('../images/library/action_particle_color.png'); }
.action-icon-particle-life { background-image: url('../images/library/action_particle_life.png'); }
.action-icon-particle-speed { background-image: url('../images/library/action_particle_speed.png'); }
.action-icon-particle-gravity { background-image: url('../images/library/action_particle_gravity.png'); }
.action-icon-particle-secondary { background-image: url('../images/library/action_particle_secondary.png'); }
.action-icon-create-emitter { background-image: url('../images/library/action_create_emitter.png'); }
.action-icon-destroy-emitter { background-image: url('../images/library/action_destroy_emitter.png'); }
.action-icon-burst-from-emitter { background-image: url('../images/library/action_burst_from_emitter.png'); }
.action-icon-stream-from-emitter { background-image: url('../images/library/action_stream_from_emitter.png'); }
.action-icon-set-cursor { background-image: url('../images/library/action_set_cursor.png'); }

.action-icon-draw-sprite { background-image: url('../images/library/action_draw_sprite.png'); }
.action-icon-draw-sprite-ext { background-image: url('../images/library/action_draw_sprite_ext.png'); }
.action-icon-draw-background { background-image: url('../images/library/action_draw_background.png'); }
.action-icon-draw-text { background-image: url('../images/library/action_draw_text.png'); }
.action-icon-draw-scaled-text { background-image: url('../images/library/action_draw_scaled_text.png'); }
.action-icon-draw-rectangle { background-image: url('../images/library/action_draw_rectangle.png'); }
.action-icon-horizontal-gradient { background-image: url('../images/library/action_horizontal_gradient.png'); }
.action-icon-vertical-gradient { background-image: url('../images/library/action_vertical_gradient.png'); }
.action-icon-draw-ellipse { background-image: url('../images/library/action_draw_ellipse.png'); }
.action-icon-gradient-ellipse { background-image: url('../images/library/action_gradient_ellipse.png'); }
.action-icon-draw-line { background-image: url('../images/library/action_draw_line.png'); }
.action-icon-draw-arrow { background-image: url('../images/library/action_draw_arrow.png'); }
.action-icon-set-color { background-image: url('../images/library/action_set_color.png'); }
.action-icon-set-alpha { background-image: url('../images/library/action_set_alpha.png'); }
.action-icon-set-blend { background-image: url('../images/library/action_set_blend.png'); }
.action-icon-set-line-width { background-image: url('../images/library/action_set_line_width.png'); }
.action-icon-set-font { background-image: url('../images/library/action_set_font.png'); }
.action-icon-set-full-screen { background-image: url('../images/library/action_set_full_screen.png'); }
.action-icon-take-snapshot { background-image: url('../images/library/action_take_snapshot.png'); }
.action-icon-create-effect { background-image: url('../images/library/action_create_effect.png'); }

.modal-objects-add-action-template .applies-block {
    border: 1px solid rgb(220, 220, 220);
}
.modal-objects-add-action-template .icon {
    flex-shrink: 0;
    display: inline-block;
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    background-color: #BBB;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    margin-top: 6px;
}

.action-settings {
    position: relative;
    min-height: 192px;
    height: auto;
    border-color: rgba(220, 220, 220, 0.5);
    padding-bottom: 36px;
}
.action-settings .action-input {
    width: 140px;
}
.action-settings .settings-row {
    display: flex;
    align-items: center;
    height: 20px;
    margin-right: 8px;
    margin-top: 4px;
    text-align: right;
    position: relative;
    padding-right: 24px;
}
.action-settings .settings-row .btn-list {
    position: absolute;
    right: 0;
    top: 2px;
}
.action-settings .settings-row span {
    font-size: 11px;
}
.action-settings .settings-row > span {
    margin-right: 4px;
}
.action-settings .settings-row input,
.action-settings .settings-row select {
    height: 20px;
}
.action-settings .settings-row input[type="text"] {
    padding: 0 2px;
    box-sizing: border-box;
    font-size: 11px;
}
.options-row {
    display: flex;
    position: absolute;
    bottom: 50px;
    width: 100%;
}
.options-row input {
    margin-right: 0;
}
.options-row .option-relative-container {
    position: relative;
    left: 120px;
}
.options-row .option-not-container {
    position: relative;
    left: 156px;
}

.action-settings .settings-row.action-settings-move-container {
    margin: 32px 70px 38px 0;
}
.action-settings .settings-row .move-directions-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 1px;
    grid-row-gap: 1px;
}
.action-settings .settings-row .move-directions-container label input[type="checkbox"] {
    display: none;
}
.action-settings .settings-row .move-directions-container label .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    border: 1px solid #AAA;
    background-color: #DDD;
    box-sizing: border-box;
}
.action-settings .settings-row .move-directions-container label input[type="checkbox"]:checked + .btn-icon {
    border-color: #005499;
    background-color: #CCE4F4;
}
.action-settings .settings-row .move-directions-container label input[type="checkbox"]:checked + .btn-icon img {
    filter: hue-rotate(135deg) brightness(0.8);
}

.modal-container .modal-in-modal .action-settings .settings-row {
    width: 100%;
    justify-content: flex-end;
    padding-right: 0;
    margin-right: 0;
}
.modal-container .modal-in-modal .action-settings .settings-row .action-input {
    width: 40px;
}

/* ************************************ */

.panel-navbar,
.modal-container .panel-nav {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 28px;
    position: absolute;
    top: 0;
    left: 0;
    padding-left: 8px;
    background-color: #ececec;
    user-select: none;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;
    z-index: 2;
}
.panel-navbar .navbar-menu,
.modal-container .panel-nav .nav-menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.panel-navbar .navbar-menu > li,
.modal-container .panel-nav .nav-menu > li {
    padding: 6px 8px;
    margin: 2px 0;
    border: 1px solid transparent;
    cursor: default;
    text-transform: capitalize;
    position: relative;
    outline: none;
}
.panel-navbar .navbar-menu > li:hover,
.modal-container .panel-nav .nav-menu > li:hover {
    border: 1px solid #fff;
    border-right-color: #999;
    border-bottom-color: #999;
}
.panel-navbar .navbar-menu > li:active,
.panel-navbar .navbar-menu > li:focus,
.modal-container .panel-nav .nav-menu > li:active,
.modal-container .panel-nav .nav-menu > li:focus {
    border: 1px solid #fff;
    border-left-color: #999;
    border-top-color: #999;
}

.panel-navbar .navbar-menu > li > ul,
.modal-container .panel-nav .nav-menu > li > ul {
    display: none;
    position: absolute;
    left: -1px;
    top: 100%;
}
.panel-navbar .navbar-menu > li:active > ul,
.panel-navbar .navbar-menu > li:focus > ul,
.panel-navbar .navbar-menu > li > ul:focus,
.modal-container .panel-nav .nav-menu > li:active > ul,
.modal-container .panel-nav .nav-menu > li:focus > ul,
.modal-container .panel-nav .nav-menu > li > ul:focus {
    display: block;
}

.app-container.modal-backdrop .panel-navbar:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: transparent;
}


/* ************************************ */

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    bottom: -32px;
    width: 100%;
    height: 32px;
    border-top: 1px solid #888;
    background: #f0f0f0;
    background: -moz-linear-gradient(top, #f0f0f0 0%, #d2d2d2 100%);
    background: -webkit-linear-gradient(top, #f0f0f0 0%, #d2d2d2 100%);
    background: linear-gradient(to bottom, #f0f0f0 0%, #d2d2d2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f0', endColorstr='#d2d2d2',GradientType=0);
    z-index: 6;
    cursor: pointer;
    user-select: none;
    font-size: 10px;
}
.logo:link, .logo:visited {
    text-decoration: none;
    color: inherit;
}
.panel-sidebar {
    min-width: 144px;
    width: 180px;
    max-width: 40vw;
    height: calc(100vh - 32px - 28px);
    margin-bottom: -2px;
    padding-top: 28px;
    position: relative;
    z-index: 1;
    overflow: visible;
    background-color: #fff;
    border-right: 1px solid #888;
}
.panel-sidebar .resource-groups {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: calc(100vh - 28px - 16px - 16px);
    padding: 6px 8px 6px 24px;
    margin-top: 0;
    position: relative;
    white-space: nowrap;
    overflow: auto;
    user-select: none;
}
.panel-sidebar .resource-groups ul {
    list-style-type: none;
    position: relative;
}
.panel-sidebar .resource-groups ul.outer-group {
    display: block;
    min-height: 16px;
    padding-right: 8px;
}
.panel-sidebar .resource-groups ul.outer-group li.expandable > .btn-toggle {
    display: inline-block;
    position: absolute;
    left: -20px;
    top: -1px;
    width: 16px;
    height: 16px;
    background-image: url('../images/icon_sign_plus.png');
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}
.panel-sidebar .resource-groups ul.outer-group li.expandable.open > .btn-toggle {
    background-image: url('../images/icon_sign_minus.png');
}
.panel-sidebar .resource-groups ul.outer-group li.inner-group {
    display: block;
    min-height: 16px;
    padding-left: 22px;
    position: relative;
    top: 0;
    box-sizing: border-box;
    white-space: nowrap;
    cursor: pointer;
}
.panel-sidebar .resource-groups ul.outer-group li.inner-group > span:hover {
    animation: anim-blink 0.05s linear;
}
.panel-sidebar .resource-groups ul.outer-group li.inner-group:before {
    content: '';
    display: inline-block;
    background: transparent url('../images/line_dotted_center.png') no-repeat 2px 0;
    width: 20px;
    height: 16px;
    position: absolute;
    left: -20px;
    top: -3px;
}
.panel-sidebar .resource-groups ul.outer-group li.inner-group:first-child:before {
    background: transparent url('../images/line_dotted_start.png') no-repeat 2px 0;
}
.panel-sidebar .resource-groups ul.outer-group li.inner-group:last-child:before {
    background: transparent url('../images/line_dotted_end.png') no-repeat 2px 0;
}
.panel-sidebar .resource-groups ul.outer-group li.inner-group.default-resource:not(.expandable) {
    min-height: 17px;
    font-family: 'Arial', sans-serif;
    font-weight: normal;
}
.panel-sidebar .resource-groups ul.outer-group li.inner-group.default-resource:not(.expandable) > span:hover {
    animation: none;
    color: #4676a2;
    text-decoration: underline;
}
.panel-sidebar .resource-groups ul.outer-group li.inner-group.default-resource:not(.expandable).selected > span {
    color: #000;
}
.panel-sidebar .resource-groups.active ul.outer-group li.inner-group.default-resource:not(.expandable).selected > span {
    color: #fff;
}
.panel-sidebar .resource-groups ul.outer-group li.inner-group span {
    position: relative;
    top: 3px;
    margin-right: 8px;
}
.panel-sidebar .resource-groups ul.outer-group li.inner-group span:after {
    content: '';
    background-image: url('../images/icon_folder.png');
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    left: -21px;
    top: -1px;
}
.panel-sidebar .resource-groups ul.outer-group li.inner-group.btn-game-information span:after {
    background-image: url('../images/icon_information.png');
}
.panel-sidebar .resource-groups ul.outer-group li.inner-group.btn-game-settings span:after {
    background-image: url('../images/icon_settings.png');
}
.panel-sidebar .resource-groups ul.outer-group li.inner-group.selected > span {
    outline: 2px solid #f0f0f0;
    background-color: #f0f0f0;
    color: #000;
}
.panel-sidebar .resource-groups.active ul.outer-group li.inner-group.selected > span {
    outline: 1px solid #359aff;
    background-color: #359aff;
    color: #fff;
}
.panel-sidebar .resource-groups ul.outer-group li.inner-group.expandable.open > span:after {
    background-image: url('../images/icon_folder_open.png');
}
.panel-sidebar .resource-groups ul.outer-group li.inner-group.expandable.open:not(:last-child) ul:before {
    content: "";
    display: block;
    width: 16px;
    height: 100%;
    position: absolute;
    left: -42px;
    top: 0;
    margin-left: 2px;
    margin-top: 1px;
    background-color: transparent;
    background-image: url('../images/line_dotted_vertical.png');
    background-repeat: repeat-y;
    background-position: left top;
}
.panel-sidebar .resource-groups ul.outer-group li.inner-group.expandable.open ul {
    display: block;
    position: relative;
    top: 4px;
    font-family: 'Arial', sans-serif;
    font-weight: normal;
    padding: 4px 0 4px 18px;
}
.panel-sidebar .resource-groups ul.outer-group li.inner-group.expandable.open ul li {
    display: block;
    height: 16px;
    padding-top: 0;
    position: relative;
}
.panel-sidebar .resource-groups ul.outer-group li.inner-group.expandable.open ul li.expandable > ul {
    display: none;
}
.panel-sidebar .resource-groups ul.outer-group li.inner-group.expandable.open ul li.expandable.open {
    height: auto;
}
.panel-sidebar .resource-groups ul.outer-group li.inner-group.expandable.open ul li.expandable.open > ul {
    display: block;
    height: auto;
}
.panel-sidebar .resource-groups ul.outer-group li ul > li.expandable {
    padding-left: 0;
}
.panel-sidebar .resource-groups ul.outer-group li ul > li.expandable .item.btn-toggle {
    left: -40px;
}
.panel-sidebar .resource-groups ul.outer-group li.inner-group ul.inner-group > li.expandable ul.inner-group:before {
    left: -40px;
}
.panel-sidebar .resource-groups ul.outer-group li.inner-group ul.inner-group > li.expandable:last-child > ul.inner-group:before {
    display: none;
}
.panel-sidebar .resource-groups ul.outer-group li.inner-group.expandable.open ul li:before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    left: -40px;
    top: -3px;
    margin-left: 2px;
    background-color: transparent;
    background-image: url('../images/line_dotted_vertical.png');
    background-repeat: no-repeat;
    background-position: left top;
}
.panel-sidebar .resource-groups ul.outer-group li.inner-group.expandable.open ul li:not(:last-child):before {
    background-image: url('../images/line_dotted_center.png');
}
.panel-sidebar .resource-groups ul.outer-group li.inner-group.expandable.open ul li:last-child:before {
    background-image: url('../images/line_dotted_end.png');
}
.panel-sidebar .resource-groups ul.outer-group li.inner-group.expandable.open ul li > span:hover {
    color: #4676a2;
    text-decoration: underline;
}
.panel-sidebar .resource-groups ul.outer-group li.inner-group.expandable.open ul li.selected > span {
    outline: 2px solid #F0F0F0;
    background-color: #F0F0F0;
    color: #000;
}
.panel-sidebar .resource-groups.active ul.outer-group li.inner-group.expandable.open ul li.selected > span {
    outline: 1px solid #359AFF;
    background-color: #359AFF;
    color: #FFF;
}
.panel-sidebar .resource-groups ul.outer-group li.inner-group.expandable.open ul li:not(.expandable) > span:after {
    background-image: none;
}
.panel-sidebar .resource-groups ul.outer-group li.inner-group.expandable.open ul li > .icon-block {
    display: inline-block;
    position: absolute;
    left: -20px;
    top: -1px;
    width: 16px;
    height: 16px;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
}
@keyframes anim-blink {
    0%, 100% {
        color: inherit;
   }
    50% {
        color: transparent;
   }
}

.panel-sidebar .resource-groups li.expandable:not(.open) ul {
    display: none;
}

.panel-left-border.resize {
    display: block;
    width: 8px;
    height: 100vh;
    position: absolute;
    right: -8px;
    top: 0;
    background-color: transparent;
    cursor: col-resize;
    z-index: 10;
}

.app-container.modal-backdrop .panel-sidebar:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% + 8px);
    height: 100vh;
    z-index: 10;
    background: transparent;
}


/* ************************************ */

.panel-playground {
    display: block;
    width: auto;
    flex: 1;
    height: calc(100vh - 28px);
    position: relative;
    top: 28px;
    z-index: 0;
    margin-left: 5px;
    background-color: #e6e6e6;
    box-shadow: -1px 0 2px #000;
    overflow-x: hidden;/*auto;*/
    overflow-y: hidden;
}


/* ************************************ */


.modal-container {
    display: flex;
    flex-direction: column;
    box-sizing: content-box;
    width: auto;
    height: auto;
    min-width: 192px;
    min-height: 38px;
    max-width: calc(100%);
    max-height: calc(100%);
    position: absolute;
    left: 0;
    top: 0;
    background-color: #bdcfe0;
    background: linear-gradient(to bottom, #bcc6d1 0%, #d8dce0 15%, #e9eff7 49%, #dde4eb 51%, #e0e4eb 100%);
    box-shadow: 1px 1px 0 #fff inset, -1px -1px 0 #7d8488 inset, -2px -2px 0 #c2cfd4 inset, -3px -3px 0 #e9f8ff inset;
    color: #000;
    border: 1px solid #000;
    border-radius: 6px 6px 0 0;
    padding: 0 5px 5px 5px;
}
.modal-container .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 28px;
}
.modal-container .modal-header .modal-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    user-select: none;
    font-weight: bold;
    margin-right: 4px;
    color: #666;
}
.modal-container .modal-header .modal-title .modal-title-text {
    white-space: nowrap;
    max-width: 500px;
    min-height: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
}
.modal-container .modal-header .modal-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: transparent none no-repeat center center/contain;
    user-select: none;
    margin-right: 4px;
}
.modal-container .modal-header .modal-icon.icon-code,
.modal-container .modal-header .modal-icon.icon-sprite-editor {
    position: relative;
    left: 4px;
    top: -2px;
    margin-right: 8px;
}
.modal-container .modal-header .modal-icon.icon-code {
    background-image: url('../images/icon_code.png');
}
.modal-container .modal-header .modal-icon.icon-sprite-editor {
    background-image: url('../images/icon_sprite.png');
}
.modal-container .modal-header .modal-buttons {
    display: flex;
    position: relative;
    top: 2px;
}
.modal-container .modal-header .modal-buttons .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 14px;
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    background-color: #c0d3e5;
    background: linear-gradient(to bottom, #d3dbe6 0%, #d1d9e2 50%, #b4bac2 51%, #d6dce2 100%);
    color: #fff;
    text-shadow: 1px 0 0 #000, 0 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000;
    user-select: none;
    cursor: default;
}
.modal-container .modal-header .modal-buttons .btn:not(:last-child) {
    margin-right: 2px;
}
.modal-container .modal-header .modal-buttons .btn:active {
    background-color: #8caccd;
    background: linear-gradient(to bottom, #b0c4cc 0%, #86b7c9 50%, #6cbfd8 51%, #99c0cf 100%);
}
.modal-container .modal-header .modal-buttons .btn.disabled {
    background-color: #bbb;
    background: linear-gradient(to bottom, #c6c6c6 0%, #a8a8a8 50%, #939393 51%, #848484 100%);
}
.modal-container .modal-header .modal-buttons .btn-close {
    background-color: #e2adad;
    background: linear-gradient(to bottom, #ebc3b8 0%, #ffd2c3 50%, #b6806b 51%, #d3ab9b 100%);
}
.modal-container .modal-header .modal-buttons .btn-close:not(.disabled):active {
    background-color: #c76060;
    background: linear-gradient(to bottom, #bd9595 0%, #bd5757 49%, #7e3434 52%, #c54444 68%, #b38a40 95%, #ffbf9c 100%);
}
.modal-container .modal-body {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #eee;
    border: 1px solid #666;
    border-right-color: #f0f0f0;
    border-bottom-color: #f0f0f0;
    box-sizing: border-box;
    overflow: auto;
    max-width: 100%;
    max-height: 100%;
    font-weight: normal;
    font-size: 12px;
}
.modal-container.focus {
    background-color: #8dbae7;
    background: linear-gradient(to bottom, #96b4d5 0%, #bccee8 15%, #d0e2f8 49%, #b4d0ea 51%, #b9cef0 100%);
    box-shadow: 1px 1px 0 #fff inset, -1px -1px 0 #426f89 inset, -2px -2px 0 #67b9db inset, -3px -3px 0 #88dcff inset;
}
.modal-container.focus .modal-header .modal-buttons .btn:not(.disabled) {
    background-color: #8dbae7;
    background: linear-gradient(to bottom, #c0d3eb 0%, #bccfe5 50%, #99aec7 51%, #b2c9e4 100%);
}
.modal-container.focus .modal-header .modal-buttons .btn:not(.disabled):hover {
    background-color: #a5caee;
    background: linear-gradient(to bottom, #b7deed 0%, #71ceef 50%, #21b4e2 51%, #b7deed 100%);
}
.modal-container.focus .modal-header .modal-buttons .btn:not(.disabled):active {
    background-color: #8caccd;
    background: linear-gradient(to bottom, #99c0cf 0%, #53b0d1 50%, #21b4e2 51%, #99c0cf 100%);
}
.modal-container.focus .modal-header .modal-buttons .btn-close:not(.disabled) {
    background-color: #e78d8d;
    background: linear-gradient(to bottom, #f2ad9a 0%, #fca182 50%, #b95832 51%, #d98e71 100%);
}
.modal-container.focus .modal-header .modal-buttons .btn-close:not(.disabled):hover {
    background-color: #fa5252;
    background: linear-gradient(to bottom, #ff7c7c 0%, #cc2020 49%, #840303 52%, #ce0606 68%, #f77f07 95%, #fb955e 100%);
}
.modal-container.focus .modal-header .modal-buttons .btn-close:not(.disabled):active {
    background-color: #ca4242;
    background: linear-gradient(to bottom, #c07c7c 0%, #cc2020 49%, #840303 52%, #ce0606 68%, #c17f07 95%, #fb955e 100%);
}
.modal-container.focus .modal-header .modal-title {
    color: #000;
}
.modal-container.maximized:not(.minimized) {
    box-sizing: border-box;
    left: 0 !important;
    top: 0 !important;
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: 0;
    padding: 0;
}
.modal-container.maximized:not(.minimized) .modal-header {
    box-sizing: border-box;
    padding: 0 6px 0 4px;
}
.modal-container.maximized:not(.minimized).focus {
    box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3) inset, -1px -1px 0 #426f89 inset, -2px -2px 0 #67b9db inset, -3px -3px 0 #88dcff inset;
}
.modal-container.minimized {
    min-height: auto;
    padding-bottom: 0;
    top: auto !important;
    bottom: 0 !important;
}
.modal-container.minimized .modal-body {
    display: none;
    visibility: hidden;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
}
.preview-block {
    margin: 2px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: auto;
    max-width: 246px;
    height: 100%;
    max-height: 340px;
    overflow: auto;
    position: relative;
    z-index: 1;
    image-rendering: pixelated;
}
.preview-block img {
    background: transparent url('../images/background_transparent.png') repeat 0px 0px / 32px 32px;
}
.room-tab-objects .preview-block {
    width: calc(100% - 4px);
    min-height: 180px;
    height: auto;
    border: 2px inset #BBB;
    overflow: hidden;
    box-sizing: border-box;
    background-color: #F0F0F0;
}
.modal-sprites-sprite-editor-content .preview-block {
    width: 100%;
    min-height: 32px;
    height: 180px;
    margin: 4px 0;
    border: 1px inset #BBB;
    overflow: auto;
    box-sizing: border-box;
    background-color: #F0F0F0;
    position: relative;
    left: -4px;
}
.modal-sprites-sprite-editor-content .preview-block canvas {
    background-color: #999;
}
.modal-container.maximized .preview-block {
    width: 100%;
    max-width: none;
    height: 100vh;
    max-height: calc(100vh - 64px);
}
.modal-container.maximized .room-tab-objects .preview-block {
    width: calc(100% - 4px);
    max-height: calc(100vh - 542px);
}
.modal-container.maximized .modal-sprites-sprite-editor-content .preview-block {
    max-height: calc(100vh - 266px);/*242*/
}
.modal-container.minimized .modal-buttons .modal-not-minimized,
.modal-container:not(.minimized) .modal-buttons .modal-minimized {
    display: none;
}
.modal-container.maximized .modal-buttons .modal-not-maximized,
.modal-container:not(.maximized) .modal-buttons .modal-maximized {
    display: none;
}
.modal-container.minimized.maximized .modal-buttons .modal-maximized { display: none; }
.modal-container.minimized.maximized .modal-buttons .modal-not-maximized { display: initial; }
.modal-container .preview-block .image-origin {
    display: block;
    width: 64px;
    height: 64px;
    pointer-events: none;
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    background-image: url('../images/origin.png');
    mix-blend-mode: difference;
}
.modal-container .preview-block .modal-sprite-image:active {
    cursor: default;
}
.modal-container .preview-block .image-origin-container {
    display: block;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
    mix-blend-mode: difference;
}
.modal-container .icon-block,
.event-kind-list .icon-block {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: relative;
    top: 4px;
}
.modal-container .icon-box {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: relative;
    top: 4px;
    flex-shrink: 0;
}

.modal-container .strip-image-form .preview-block {
    max-width: none;
    max-height: calc(100% - 2px);
}

.event-kind-list .icon-block {
    position: absolute;
    left: 8px;
    top: 3px;
    user-select: none;
    pointer-events: none;
}
.event-kind-list .icon-block.icon-group {
    background-image: url('../images/icon_folder.png');
}

.event-list .icon-block {
    top: 0;
    margin-right: 4px;
}

.modal-container.modal-action {
    background: #FFF;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4) !important;
    border-radius: 0;
    padding: 0;
    border: 0;

    left: 100px;
    top: 100px;
}
.modal-container.modal-action .modal-header {
    z-index: 11;
}
.modal-container.modal-action .modal-body {
    z-index: 11;
    border: 0;
    padding: 8px;
}
.modal-container.modal-action .modal-backdrop {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background: transparent;
}
.modal-container.modal-action .modal-title {
    margin-left: 4px;
}
.modal-container.modal-action .modal-buttons {
    margin-right: 4px;
}

.modal-container.modal-action-window {
    border: 1px solid #888;
}
.modal-container.modal-action-window .modal-buttons {
    top: 0;
    height: 100%;
}
.modal-container.modal-action-window .modal-buttons .btn {
    height: 24px;
    border-radius: 0;
    border-color: transparent;
}
.modal-container.modal-action-window .modal-buttons .btn:not(:hover),
.modal-container.modal-action-window .modal-buttons .btn.disabled {
    background: transparent !important;
}
.modal-container.modal-action-window .modal-buttons .btn.disabled {
    color: #CCC;
}
.modal-container.modal-action-window .modal-body {
    padding: 0px;
    padding-top: 8px;
}
.modal-container.modal-room .modal-body {
    padding: 0px;
    padding-top: 8px;
}
.modal-container.modal-room .content {
    height: calc(100% - 40px);
    top: -2px;
}

.modal-container .panel-nav {
    height: 26px;
    padding-left: 1px;
    background-color: #FFF;
}
.modal-container .panel-nav .nav-menu > li:hover {
    border-top-color: #EEE;
    border-left-color: #EEE;
}
.modal-container .panel-nav .nav-menu > li:active,
.modal-container .panel-nav .nav-menu > li:focus {
    border-color: #EEE;
    border-left-color: #999;
    border-top-color: #999;
}
.modal-container .panel {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    top: 2px;
    left: 0;
    width: 100%;
    height: 28px;
    background-color: rgb(240, 240, 240);
    padding: 2px 8px;
    box-sizing: border-box;
    border-bottom: 1px solid #888;
}
.modal-container .panel-nav + .panel {
    top: 26px;
}
.modal-container .panel-relative {
    position: relative;
    top: auto;
    left: auto;
}
.modal-container .panel .panel-separator {
    display: inline-block;
    width: 1px;
    height: 90%;
    background-color: #888;
    margin: 0 4px;
    flex-shrink: 0;
}
.modal-container .panel .panel-separator.separator-light {
    background-color: #BBB;
    margin-left: 24px;
    margin-right: 8px;
}
.modal-container .content {
    margin-top: 22px;
    position: relative;
}
.modal-container .panel-nav + .panel + .content {
    margin-top: 46px;
}

.modal-sprites-sprite-editor-keyframes-container {
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    max-height: 300px;
    column-gap: 1px;
    row-gap: 16px;
    padding: 2px;
}
.modal-sprites-sprite-editor-keyframes-container .subimage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1px 10px;
    box-sizing: border-box;
    border: 1px solid transparent;
}
.modal-sprites-sprite-editor-keyframes-container .subimage span {
    margin-top: 6px;
    user-select: none;
    pointer-events: none;
}
.modal-sprites-sprite-editor-keyframes-container .subimage:hover {
    background-color: rgba(192, 220, 242, 0.5);
}
.modal-sprites-sprite-editor-keyframes-container .subimage.selected {
    background-color: rgb(192, 220, 242);
}
.modal-sprites-sprite-editor-keyframes-container .subimage.selected:hover {
    border-color: rgb(110, 181, 236);
}
.modal-container.maximized .modal-sprites-sprite-editor-keyframes-container {
    width: auto !important;
    max-height: none;
}
.modal-sprites-sprite-editor-keyframes-outer-container {
    outline: none;
}
.modal-container.maximized .modal-sprites-sprite-editor-keyframes-outer-container {
    height: calc(100vh - 137px); /*114*/
}

.code-editor {
    display: block;
    position: relative;
    min-width: 600px;
    width: 100%;
    min-height: 96px;
    height: 400px;
    color: transparent;
    caret-color: #000;
    background-color: transparent;
    outline: none;
    overflow: scroll;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 17px;
    white-space: pre;
    word-break: keep-all;
    /*border: 1px solid #888;*/
    border: none;
    padding: 0;
    padding-left: 2px;
    box-sizing: border-box;
    z-index: 1;
}
.code-editor::selection {
    background-color: #5068A0;
    color: transparent;
}
.modal-container.maximized .code-editor {
    height: calc(100vh - 86px);
}
.code-editor-layout {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 1;
    color: #000;
    background-color: transparent;
    white-space: pre;
    word-break: keep-all;
}
.code-editor-layout .value {
    color: #00F;
}
.code-editor-layout .globals {
    color: #800000;
}
.code-editor-layout .resource {
    color: #808000;
}
.code-editor-layout .comment {
    color: #008000;
    font-style: italic;
}
.code-editor-layout .keyword {
    color: #000080;
    font-weight: bold;
}
.code-editor-layout .selection {
    color: #FFF;
}
.code-editor-current-row {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 17px;
    background-color: #FAFAE0;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.code-editor-lines {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    background-color: #F8F8F8;
    color: #999ACC;
    border-right: 1px solid #6666AA;
    min-width: 38px;
    height: 384px;
    max-height: calc(100% - 16px);
    box-sizing: border-box;
    user-select: none;
    overflow: hidden;
}
.modal-container.maximized .code-editor-lines {
    height: calc(100vh - 102px);
}
.code-editor-lines span {
    display: block;
    text-align: right;
    padding-right: 4px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 17px;
    height: 17px;
}
.code-editor-lines span.current-row {
    font-weight: bold;
    color: #6666AA;
}
.asd123 {
    /**/color: #000080; /* keywords */
    /**/color: #00F; /* values szám-string */
    /**/color: #800000; /* constants global functions */
    /**/color: #800000; /* global variables */
    color: #800080; /* script names */
    /**/color: #808000; /* resource names */
    color: #FAFAE0; /* current line */
    /**/color: #5068A0; /* selection */
    color: #0FF; /* selected pair of brackets background */

    /* var self other noone all global if else break continue return with { } switch case default repeat do until while for and or -> keyword félkövér */
}

.room-navigation {
    background-color: #FFF;
    width: 100%;
    height: auto;
    flex-grow: 1;
    flex-shrink: 1;
    max-height: calc(100% - 182px);
    overflow-y: auto;
    margin-bottom: 2px;
}
.room-tabs {
    max-height: calc(100vh - 352px);
}
.room-tabs .room-tab {
    display: none;
    height: auto;
}
.room-tabs .room-tab.active {
    display: block;
}
.room-minimap-container {
    display: block;
    width: 100%;
    height: 180px;
    flex-shrink: 0;
    border: 1px inset #DDD;
    box-sizing: border-box;
}
.room-minimap {
    width: 100%;
    height: 100%;
}

.modal-room-background-color-input {
    width: 64px;
    height: 18px;
}
.room-navigation .backgrounds-list,
.room-navigation .views-list {
    overflow: hidden;
    font-size: 12px;
    width: 160px;
    outline: none;
}
.room-navigation .views-list {
    overflow-y: scroll;
}
.room-navigation .backgrounds-list .visible,
.room-navigation .views-list .visible {
    font-weight: bold;
}

.room-preview-container {
    flex-grow: 1;
    background: transparent url('../images/background_transparent.png') repeat;
    border: 1px inset #D7D7D7;
    border-right: none;
    position: relative;
    top: 1px;
    min-width: 720px;
    min-height: 480px;
    overflow: hidden;
}
.room-preview {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    image-rendering: pixelated;
}
.room-preview-grid {
    display: none;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    background: transparent url('../images/origin.png') repeat left top;
    mix-blend-mode: difference;
    image-rendering: pixelated;
    z-index: 2;
    user-select: none;
    pointer-events: none;
}

.room-info-x,
.room-info-y,
.room-info-cursor,
.room-info-other {
    position: relative;
    top: 2px;
    height: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.object-menu {
    width: 224px;
}

.modal-container .modal-in-modal {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #EEE;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
}
.modal-container .modal-in-modal > .flex-row {
    height: 100%;
}

.modal-container .strip-image-form .strip-grid {
    display: block;
    width: auto;
    height: auto;
    pointer-events: none;
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    background-color: transparent;
    mix-blend-mode: difference;
}

.modal-container .modal-in-modal.image-effect-form .action-settings {
    width: 408px;
    min-height: auto;
    padding-bottom: 12px;
}
.modal-container .modal-in-modal.image-effect-form .action-settings .settings-row {
    justify-content: flex-start;
}
.modal-container .image-effect-form .image-effect-preview-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    border: 2px inset #DDD;
    background-color: #C0C0C0;
    margin: 8px;
    overflow: auto;
    position: relative;
}
.modal-container .image-effect-form  .image-new-container.zoom .image-effect-preview-box {
    display: block;
}
.modal-container .image-effect-form .image-effect-preview-box img,
.modal-container .image-effect-form .image-effect-preview-box canvas {
    max-width: 100%;
    max-height: 100%;
    background-color: transparent;
    background-image: url('../images/background_transparent.png');
    image-rendering: pixelated;
}

.modal-container .image-effect-form .image-original,
.modal-container .image-effect-form .image-new {
    pointer-events: none;
    user-select: none;
}

.modal-container .image-effect-form .image-new-container {
    position: relative;
}
.modal-container .image-effect-form .image-effect-preview-zoom-container {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: absolute;
    left: 10%;
    right: auto;
    top: auto;
    bottom: 16px;
    width: 80%;
    height: auto;
}
.modal-container .image-effect-form .image-new-container:hover .image-effect-preview-zoom-container,
.modal-container .image-effect-form .image-new-container:focus .image-effect-preview-zoom-container,
.modal-container .image-effect-form .image-new-container:focus-within .image-effect-preview-zoom-container {
    display: flex;
}
.modal-container .image-effect-form .image-new-container .image-effect-preview-zoom {
    width: 100%;
    margin-bottom: 6px;
}
.modal-container .image-effect-form .image-new-container.zoom .image-effect-preview-zoom-container {
    width: calc(80% - 16px);
    bottom: 32px;
}

.modal-container .image-effect-form .image-new-container.zoom .image-effect-preview-box img,
.modal-container .image-effect-form .image-new-container.zoom .image-effect-preview-box canvas {
    max-width: none;
    max-height: none;
    background-attachment: fixed;
}


.hidden {
    display: none !important;
}


.not-implemented, .not-implemented * {
    color: #B00 !important;
}/**/
.action-icon.not-implemented {
    opacity: 0.5;
    filter: grayscale(1) saturate(0.5);
    position: relative;
}/**/
.action-icon.not-implemented:hover {
    filter: none;
}
.action-icon.not-implemented:hover:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 0, 0, 0.5);
    pointer-events: none;
}