/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/. */

:root {
    --min-paragraph-height: 18px;
    --paragraph-top-margin: 0px;

    --header-background: oklch(37% 0.006 248);
    --header-text-color: oklch(95% 0 271);

    --shadow-color      : rgba(0, 0, 0, 0.5);
    --shadow-color-light: rgba(0, 0, 0, 0.3);

    --base-strong     : oklch(17.7% 0 271);
    --base-strong-up  : oklch(35% 0 271);
    --base-strong-up-2: oklch(45% 0 271);
    --base-strong-up-3: oklch(51% 0 271);
    --base-weak       : oklch(100% 0 271);

    --faint-weak-down  : oklch(89% 0 271);
    --faint-weak-down-2: oklch(84% 0 271);
    --faint-weak-down-3: oklch(80% 0 271);
    --faint-weak       : oklch(92% 0 271);
    --faint-weak-up    : oklch(95% 0 271);

    --faint-strong-down  : oklch(60% 0.002 248);
    --faint-strong-down-2: oklch(48% 0.002 248);
    --faint-strong       : oklch(69% 0.002 248);
    --faint-strong-up    : oklch(80% 0.00009 248);
    --faint-strong-up-2  : oklch(86% 0.0001 248);

    --accent-hue: 262;

    --accent-strong-down   : oklch(48% 0.153 var(--accent-hue));
    --accent-strong        : oklch(55% 0.1596 var(--accent-hue));
    --accent-faint         : oklch(64% 0.12801 var(--accent-hue));
    --accent-faint-up      : oklch(73.526% 0.08361 var(--accent-hue));
    --accent-faint-up-2    : oklch(76.526% 0.08361 var(--accent-hue));
    --accent-faint-up-trans: oklch(73% 0.13 var(--accent-hue) / 0.2);

    --accent-weak-down: oklch(88% 0.04436 var(--accent-hue));
    --accent-weak: oklch(93% 0.01958 var(--accent-hue));
    --accent-weak-up: oklch(96% 0.00921 var(--accent-hue));

    --complement-hue: 131;
    --complement-strong: oklch(42% 0.11285 var(--complement-hue));
    --complement-faint: oklch(86% 0.12369 var(--complement-hue));
    --complement-weak: oklch(98% 0.02238 var(--complement-hue));

    --critic-hue: 28;
    --critic-strong   : oklch(57% 0.18766 var(--critic-hue));
    --critic-faint    : oklch(66% 0.15503 var(--critic-hue));
    --critic-weak-down: oklch(91% 0.02355 var(--critic-hue));
    --critic-weak     : oklch(93% 0.01549 var(--critic-hue));
    --critic-weak-up  : oklch(93% 0.01202 var(--critic-hue));

    --warning-strong: oklch(78% 0.13911 73.6);
    --warning-weak  : oklch(89% 0.1 73.6);

    --success-strong: oklch(64% 0.15903 151);
    --success-weak  : oklch(93% 0.03547 151);


    --section-delimiter-color: oklch(77% 0.00618 264);

    --control-border-radius: 4px;
    --middle-border-radius: 6px;
    --modal-border-radius: 10px;

    --page-content-font-size: 20px;

    --shadow-xs:
    inset 0 1px 1px #ffffff25,
    1px 1px 2px #00000030;

    --shadow-s:
    inset 0 1px 2px #ffffff30,
    0 1px 2px #00000030;

    --shadow-m:
    inset 0 1px 2px #ffffff50,
    0 2px 4px #00000030,
    0 4px 8px #00000015;

    --shadow-l:
    inset 0 1px 2px #ffffff70,
    0 4px 6px #00000030,
    0 6px 10px #00000015;
}


[data-theme="dark"] {
    --min-paragraph-height: 18px;
    --paragraph-top-margin: 0px;

    --header-background: oklch(33% 0 264);
    --header-text-color: oklch(89% 0 264);

    --shadow-color: rgba(0, 0, 0, 0.5);
    --shadow-color-light: rgba(0, 0, 0, 0.3);

    --base-hue: 294;
    --base-chroma: 0.018;
    --base-strong:      oklch(80% var(--base-chroma) var(--base-hue));
    --base-strong-up:   oklch(64% var(--base-chroma) var(--base-hue));
    --base-strong-up-2: oklch(58% var(--base-chroma) var(--base-hue));
    --base-strong-up-3: oklch(51% var(--base-chroma) var(--base-hue));
    --base-weak:        oklch(20% var(--base-chroma) var(--base-hue));

    --faint-weak-down-3:oklch(23% var(--base-chroma) var(--base-hue));
    --faint-weak-down-2:oklch(26% var(--base-chroma) var(--base-hue));
    --faint-weak-down:  oklch(27% var(--base-chroma) var(--base-hue));
    --faint-weak:       oklch(33% var(--base-chroma) var(--base-hue));
    --faint-weak-up:    oklch(36% var(--base-chroma) var(--base-hue));

    --faint-strong-down:  oklch(53% var(--base-chroma) var(--base-hue));
    --faint-strong-down-2:oklch(40% var(--base-chroma) var(--base-hue));
    --faint-strong:       oklch(44% var(--base-chroma) var(--base-hue));
    --faint-strong-up:    oklch(33% var(--base-chroma) var(--base-hue));
    --faint-strong-up-2:  oklch(37% var(--base-chroma) var(--base-hue));

    --accent-hue: 266;
    --accent-chroma: 0.16;

    --accent-strong-down-2: oklch(46% var(--accent-chroma) var(--accent-hue));
    --accent-strong-down:   oklch(56% var(--accent-chroma) var(--accent-hue));
    --accent-strong:        oklch(66% var(--accent-chroma) var(--accent-hue));
    --accent-faint:         oklch(69% var(--accent-chroma) var(--accent-hue));
    --accent-faint-up:      oklch(73% var(--accent-chroma) var(--accent-hue));
    --accent-faint-up-2:    oklch(83% var(--accent-chroma) var(--accent-hue));
    --accent-faint-up-trans:oklch(73% var(--accent-chroma) var(--accent-hue) / 0.2);

    --accent-weak-down: oklch(44% 0.05 252);
    --accent-weak:      oklch(34% 0.05 252);
    --accent-weak-up:   oklch(29% 0.05 252);

    --complement-strong:oklch(86% 0.092 126);
    --complement-faint: oklch(52% 0.070 126);
    --complement-weak:  oklch(45% 0.012 126);

    --critic-strong-down-2:oklch(37% 0.070 26);
    --critic-strong-down: oklch(44% 0.104 26);
    --critic-strong:      oklch(57% 0.137 26);
    --critic-strong-up:   oklch(67% 0.137 26);
    --critic-faint:       oklch(68% 0.093 26);
    --critic-weak-down:   oklch(91% 0.023 26);
    --critic-weak:        oklch(93% 0.015 26);
    --critic-weak-up:     oklch(93% 0.012 26);

    --warning-strong:oklch(78% 0.139 76);
    --warning-weak:  oklch(89% 0.047 76);

    --success-strong:oklch(64% 0.159 152);
    --success-weak:  oklch(93% 0.035 152);

    --section-delimiter-color: oklch(37% 0.002 248);

    --control-border-radius: 3px;
    --middle-border-radius: 5px;
    --modal-border-radius: 10px;

    --page-content-font-size: 20px;
}

/*********** DARK MODE *************/
[data-theme="dark"] {
    color-scheme: dark;
}
body[data-theme="dark"] {
    background: var(--base-weak);
}

[data-theme="dark"] .header {
    background: #1a1a1a;
}
[data-theme="dark"] .header .current-user .user-profile .user-name {
    color: var(--base-strong);
}

[data-theme="dark"] .header .current-user .user-profile-menu .link {
    color: var(--base-strong-up);
}

[data-theme="dark"] .header .scheme-title {
    color: var(--base-strong);
}

[data-theme="dark"] .header .right-section .theme-switcher {
    cursor: pointer;
    color: var(--base-strong);
}
[data-theme="dark"] .header .right-section .theme-switcher:hover {
    color: var(--accent-faint-up);
}
[data-theme="dark"] .header .right-section a, [data-theme="dark"]  .header .right-section span.link {
    color: var(--base-strong);
}
[data-theme="dark"] .header .right-section a:hover, [data-theme="dark"]  .header .right-section span.link:hover {
    color: var(--accent-strong);
}


[data-theme="dark"] .footer {
    background: var(--faint-weak-down-2);
    color: var(--base-strong);
    border-top: 1px solid var(--faint-strong-up);
}
[data-theme="dark"] .footer a, [data-theme="dark"] .footer .link {
    color: var(--base-strong);
}
[data-theme="dark"] .footer a:hover, [data-theme="dark"] .footer .link:hover {
    color: var(--accent-faint-up);
}

[data-theme="dark"] table.entries-table tbody .entry-link {
    color: var(--accent-faint-up);
}
[data-theme="dark"] table.entries-table tbody .entry-link .entry-link-text {
    color: var(--base-strong);
}


[data-theme="dark"] .vue-tags-input .input,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] textarea,
[data-theme="dark"] input.textfield,
[data-theme="dark"]  textarea.textfield,
[data-theme="dark"]  .vc-chrome-fields .vc-input__input,
[data-theme="dark"]  select.dropdown  {
    background: var(--faint-weak-down);
    color: var(--base-strong);
}
[data-theme="dark"]  input[type="text"].custom-event-textfield  {
    background: none;
    outline: none;
}

[data-theme="dark"]  .vc-chrome-fields .vc-input__input {
    border: 1px solid var(--faint-strong-up);
}

[data-theme="dark"] .dropdown-container .dropdown-click-area.hover-effect:hover {
    background: var(--faint-weak);
    border: 1px solid var(--faint-strong-down);
}

[data-theme="dark"]  .vue-tags-input .tag {
    background: #535465;
}
[data-theme="dark"]  .vue-tags-input > .input {
    border: 1px solid var(--faint-strong);
}

[data-theme="dark"] .dropdown-container .dropdown-popup {
    color: var(--base-strong);
    background: var(--faint-weak);
    border:1px solid var(--faint-weak-up);
}
[data-theme="dark"] .dropdown-container .dropdown-click-area {
    border: 1px solid var(--faint-strong-up);
    background: var(--faint-weak-down);
}
[data-theme="dark"] .dropdown-container .dropdown-popup .dropdown-search {
    background: var(--faint-weak);
}
[data-theme="dark"] .dropdown-container .dropdown-popup ul li.hovered {
    background: var(--faint-weak-down);
    color: var(--base-strong);
}
[data-theme="dark"] .dropdown-container svg {
    filter: invert(0.9);

}


[data-theme="dark"] .tooltip .tooltip-text {
    background: var(--faint-weak-down);
    color: var(--base-strong);
}

[data-theme="dark"] .toggle-group > .toggle-button {
    color: var(--faint-strong-down);
}
[data-theme="dark"] .toggle-group > .toggle-button.toggled {
    background: var(--base-strong);
    color: var(--base-weak);
}

[data-theme="dark"] .menu-dropdown > ul li a:hover, [data-theme="dark"] .menu-dropdown > ul li span:hover {
    background: var(--faint-strong-up);
}
[data-theme="dark"] .menu-dropdown > ul > li a, [data-theme="dark"] .menu-dropdown > ul > li span {
    color: var(--base-strong);
}

[data-theme="dark"] .msg.msg-info {
    color: var(--accent-faint-up-2);
    background: var(--accent-weak);
    border: 1px solid var(--accent-faint);
    border-radius: var(--control-border-radius);
    padding: 10px;
}

[data-theme="dark"] .btn.btn-secondary, [data-theme="dark"] .btn.btn-secondary.disabled:hover {
    color: var(--base-strong);
    background: var(--faint-strong-up-2);
    border: 1px solid var(--faint-weak);
    box-shadow: var(--shadow-s);
}

[data-theme="dark"] .btn.btn-secondary:hover {
    background: var(--faint-strong);
    color: var(--base-strong);
    border: 1px solid var(--faint-weak);
    box-shadow: var(--shadow-s);
}

[data-theme="dark"] .btn.btn-primary, [data-theme="dark"] .btn.btn-primary.disabled:hover{
    background: var(--accent-faint-up-2);
    color: var(--base-weak);
    border: none;
    box-shadow: var(--shadow-m);
}
[data-theme="dark"] .btn.btn-primary:hover {
    background: var(--accent-faint-up);
    color: var(--accent-weak-up);
    border: none;
}


[data-theme="dark"] .btn.btn-danger, [data-theme="dark"] .btn.btn-danger.disabled:hover {
    background: var(--critic-strong);
    color: var(--critic-weak-up);
    border: 1px solid var(--faint-weak);
    box-shadow: var(--shadow-s);
}
[data-theme="dark"] .btn.btn-danger:hover {
    background: var(--critic-strong-down);
    color: var(--critic-weak-up);
    border: 1px solid var(--faint-weak);
}

[data-theme="dark"] .panel {
    border-top: 1px solid oklch(43% 0.006 var(--base-hue));
    box-shadow: 0 -1px 0 oklch(26% 0.004 var(--base-hue));
}

[data-theme="dark"] .panel-title {
    color: var(--base-strong);
    font-weight: normal;
}
[data-theme="dark"] .panel-title:hover {
    color: var(--base-strong-up);
}


[data-theme="dark"] .rich-text-editor-container .editor-frame {
    border: 1px solid var(--faint-strong);
    background: var(--faint-weak-down);
}

[data-theme="dark"] .properties-table > tbody > tr:nth-child(even) {
    background: none;
}

[data-theme="dark"] ul.tabs li .tab {
    border: 1px solid var(--faint-strong);
    border-bottom: 1px solid var(--faint-strong);
    color: var(--base-strong-up);
    opacity: 0.6;
}
[data-theme="dark"] ul.tabs li .tab:hover {
    opacity: 1;
    background: var(--faint-weak-up);
    color: var(--base-strong);
    border: 1px solid var(--faint-strong-down);
    border-bottom: 1px solid var(--faint-strong-down);
}
[data-theme="dark"] .tabs-body:before {
    border-bottom: 1px solid var(--faint-strong);
}
[data-theme="dark"] ul.tabs li .tab.active, [data-theme="dark"] ul.tabs li .tab.active:hover {
    opacity: 1;
    background: var(--faint-weak);
    color: var(--base-strong);
    border: 1px solid var(--faint-strong);
    border-bottom: 1px solid var(--faint-weak);
    border-top: 1px solid var(--faint-strong-down);
}

[data-theme="dark"] .behavior-container {
    border:1px solid var(--faint-strong-up-2);
    background: var(--faint-strong);
}

[data-theme="dark"] a, [data-theme="dark"] .link {
    color: var(--accent-faint-up-2);
}
[data-theme="dark"] .icon-delete {
    color: var(--critic-strong-up);
}

[data-theme="dark"] .editor-top-hint-label {
    background: var(--accent-strong-down);
    color: var(--base-strong);
}

[data-theme="dark"] .file-upload-button {
    background: var(--faint-strong-up);
    border: 1px solid var(--faint-strong);
}

[data-theme="dark"] .item-menu .item-container img,
[data-theme="dark"] .item-selector .item-row .item img.item-icon {
    filter: invert(0.78) brightness(1);
}
[data-theme="dark"] .item-menu .item-container.item-container-template img {
    filter: none
}
[data-theme="dark"] .art-pack .item-menu .item-container img {
    filter: none
}

[data-theme="dark"] .item-selector .item-selector-items {
    overflow: scroll;
    background: var(--faint-weak-down-3);
    border: 1px solid var(--faint-strong);
}

[data-theme="dark"] .scheme-editor-component .side-panel {
    background: var(--faint-weak);
}

[data-theme="dark"] .floating-helper-panel .item-name span {
    color: var(--base-strong);
}

[data-theme="dark"] table.entries-table tbody tr:hover {
    background: var(--faint-weak-down);
}

[data-theme="dark"] .hint {
   font-style: italic;
    color: var(--base-strong-up);
}

[data-theme="dark"] .modal-container {
    background-color: var(--faint-weak);
}

[data-theme="dark"] .properties-table .value select {
    border-color: var(--faint-strong);
    background: var(--faint-weak-down);
}

[data-theme="dark"] ul.pagination li a, [data-theme="dark"] ul.pagination li a:visited {
    color: var(--accent-faint-up);
}

[data-theme="dark"] ul.script-options .script-option.selected {
    color: var(--base-weak);
    background: var(--base-strong);
}
[data-theme="dark"] ul.script-options .script-option.selected .tooltip .tooltip-icon {
    color: var(--base-weak);
    opacity: 0.4;
}

[data-theme="dark"] .msg.msg-error {
    color: var(--critic-weak);
    background: var(--critic-strong-down);
    border: 1px solid var(--critic-strong);
}

[data-theme="dark"] .system-message-panel  .message.message-error {
    color: var(--critic-weak);
    background: var(--critic-strong-down);
    border: 1px solid var(--critic-strong);
}

[data-theme="dark"] .system-message-panel .message {
    color: var(--base-strong-up);
    background: var(--base-weak);
    border: 1px solid var(--faint-strong-up);
    box-shadow: 1px 1px 10px var(--shadow-color);
}

[data-theme="dark"] table.frame-animator-matrix td.frame-animator-property .frame-item-property,
[data-theme="dark"] table.frame-animator-matrix td.frame-animator-property .frame-item-name {
    color: var(--base-weak);
}

[data-theme="dark"] table.frame-animator-matrix .btn-small {
    color: var(--base-strong);
}

[data-theme="dark"] table.frame-animator-matrix td.frame-animator-property {
    color: var(--base-strong);
}

[data-theme="dark"]  table.frame-animator-matrix td.frame .empty-frame-number {
    color: var(--faint-weak-down-3);
    opacity: 0.6;
}
[data-theme="dark"]  table.frame-animator-matrix tr.track-kind-function td.frame .empty-frame-number,
[data-theme="dark"]  table.frame-animator-matrix tr.track-kind-sections td.frame .empty-frame-number {
    color: var(--base-strong);
}

[data-theme="dark"] table.frame-animator-matrix td.frame .active-frame {
    color: var(--faint-weak-down-3);
    opacity: 1;
}
[data-theme="dark"] table.frame-animator-matrix tr.track-kind-sections td.frame .active-frame,
[data-theme="dark"] table.frame-animator-matrix tr.track-kind-function td.frame .active-frame {
    color: var(--base-strong);
}
[data-theme="dark"] table.frame-animator-matrix td.current {
    background: var(--base-strong-up);
}
[data-theme="dark"] table.frame-animator-matrix th.current {
    background: var(--accent-strong);
    color: var(--base-strong);
}

[data-theme="dark"] .context-menu ul li {
    color: var(--base-strong);
}

[data-theme="dark"] .diagram-picker .diagram-title {
    color: var(--base-strong);
}
[data-theme="dark"] .diagram-picker .diagram-picker-external-link {
    color: var(--accent-faint);
    opacity: 0.8;
}
[data-theme="dark"] .diagram-picker .diagram-picker-external-link:hover {
    color: var(--accent-faint-up);
    opacity: 1;
}

[data-theme="dark"] .vue-tags-input .autocomplete {
    background: var(--base-weak);
    border: 1px solid var(--faint-strong-down);
}
[data-theme="dark"] .vue-tags-input .autocomplete .selected-item {
    background: var(--accent-strong);
}

[data-theme="dark"] .toggle-button.img-button {
    filter: invert(0.9);
}
/*********** END OF DARK MODE *************/


html, body, .app-container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;
    min-height: 100vh;
}

body {
    font-family: Roboto, 'Segoe UI', 'Helvetica Neue', Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: var(--base-strong);
    background: var(--faint-weak-down);
}


select {
    padding: 5px 7px;
    border-radius: var(--control-border-radius);
    border: 1px solid var(--faint-strong);
    background: var(--base-weak);
    outline: none;
}
[data-theme="dark"] select {
    background: var(--faint-weak-down);
}

.app-container {
    display: flex;
    flex-direction: column;
}
.scheme-editor-webapp {
    flex: 1;
    height: 100%;
}
.scheme-editor-app {
    position: relative;
    height: 100%;
}

* {
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--base-strong);
}

h5 {
    margin-top: 12px;
    margin-bottom: 7px;
}

code {
    white-space: pre;
}

.text-nonselectable,
.modal-header {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select:    none;
    user-select:    none;
    -o-user-select: none;
    -webkit-touch-callout: none;
}

.section {
    margin-top: 20px;
    margin-bottom: 10px;
}

.draggable {
    cursor: grab;
}

.clickable {
    cursor: pointer;
}
.clickable:hover {
    opacity: 0.8;
}

/******************* Middle content *********************/
.middle-content {
    position: relative;
    padding-top: 10px;
    padding-bottom: 20px;
    max-width: 1100px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}


a, .link {
    text-decoration: none;
    color: var(--accent-strong);
    cursor: pointer;
}
a:hover, .link:hover {
    text-decoration: underline;
}

/******************** Message panels *****************/
.msg {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 5px;
    margin-right: 5px;
}
.msg.msg-small {
    font-size: 12px;
}
.msg.msg-info {
    color: var(--accent-strong);
    background: var(--accent-weak-up);
    border: 1px solid var(--accent-weak-down);
    border-radius: var(--control-border-radius);
    padding: 10px;
}
.msg.msg-error {
    color: var(--critic-strong);
    background: var(--critic-weak-up);
    border: 1px solid var(--critic-weak-down);
    border-radius: var(--control-border-radius);
    padding: 10px;
}


.text-centered {
    text-align: center;
}

/******************* Hints **********************/
.hint {
    margin-top: 10px;
    margin-bottom: 10px;
    font-style: italic;
    color: var(--faint-strong-down);
}
.hint.hint-small {
    font-size: 12px;
}

/************** Menu dropdown *************/

.menu-dropdown {
    display: inline-block;
}
.menu-dropdown span {
    cursor: pointer;
    color: var(--base-strong-up);
}
.menu-dropdown .menu-dropdown-title {
    display: inline-block;
}
.menu-dropdown > ul {
    z-index: 99;
    position: fixed;
    margin: 0;
    padding: 0;
    min-width: 200px;
    background: var(--base-weak);
    list-style: none;
    box-shadow: 1px 1px 10px var(--shadow-color);
    overflow: auto;;
}
.menu-dropdown > ul > li {
    padding: 0;
    margin: 0;
}
.menu-dropdown > ul > li:first-child {
    border-top: none;
}
.menu-dropdown > ul > li a, .menu-dropdown > ul > li span {
    display: block;
    font-size: 14px;
    padding: 8px 12px;
    text-decoration: none;
    color: var(--base-strong-up);
    font-weight: normal;
    white-space: nowrap;
}
.menu-dropdown > ul li a:hover, .menu-dropdown > ul li span:hover {
    color: var(--critic-weak);
    background: var(--accent-strong);
}
.menu-dropdown > ul li.disabled a, .menu-dropdown > ul li.disabled span,
.menu-dropdown > ul li.disabled a:hover, .menu-dropdown > ul li.disabled span:hover {
    color: var(--faint-strong);
    background: none;
}



/******************** Tabs *********************/
ul.tabs {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 20;
}
ul.tabs li {
    margin: 2px;
    display: inline;
}
ul.tabs li .tab {
    display: inline-block;
    padding: 3px 5px;
    border: 1px solid var(--faint-strong-up);
    background: var(--faint-strong-up-2);
    color: var(--base-strong-up);
    font-size: 10px;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    user-select: none;
    border-radius: 3px 3px 0 0;
}
@media (max-width: 900px) {
    ul.tabs li .tab {
        padding: 6px 10px;
    }
}
ul.tabs li .tab .tab-icon {
    font-size: 9px;
}
ul.tabs li .tab.active, ul.tabs li .tab.active:hover {
    background: var(--faint-weak-up);
    border-bottom: 1px solid var(--faint-weak-up);
    cursor: default;
}
ul.tabs li .tab:hover {
    background: var(--base-weak);
}
ul.tabs li .tab.disabled, ul.tabs li .tab.disabled:hover {
    border: 1px solid var(--faint-strong-up-2);
    background: var(--faint-strong-up-2);
    color: var(--faint-strong-down);
    cursor: default;
}
ul.tabs.tabs-file li .tab {
    font-size: 13px;
    text-transform: none;
    padding: 5px 10px;
}
.tabs-body {
    position: relative;
    padding-top: 4px;
    margin: 0;
}
.tabs-body:before {
    z-index: 1;
    display: block;
    top: -2px;
    left: 0;
    position: absolute;
    height: 1px;
    content: '';
    width: 100%;
    border-bottom: 1px solid var(--faint-strong-up-2);
}




/******************* Buttons *******************/
.btn {
    display: inline-block;
    padding: 7px 10px 7px 10px;
    font-size: 14px;
    cursor: pointer;
    background: var(--faint-strong-up-2);
    color: var(--base-strong-up);
    border: 1px solid var(--faint-strong-down);
    border-radius: 20px;
    text-decoration: none;
    transition: background-color 0.5s ease, color 0.5s ease;
    box-sizing: border-box;
    line-height: 1.0;
    user-select: none;
}
.btn:hover {
    background: var(--faint-weak);
    color: var(--base-strong-up);
    border: 1px solid var(--faint-strong-down);
    text-decoration: none;
}
.btn.btn-large {
    padding: 10px 15px 10px 15px;
    font-size: 20px;
}
.btn.btn-block {
    display: block;
}
.btn.btn-primary, .btn.btn-primary.disabled:hover {
    background: var(--accent-strong);
    color: var(--base-weak);
    border: 1px solid var(--accent-strong-down);
}
.btn.btn-primary:hover {
    background: var(--accent-faint);
    color: var(--base-weak);
    border: 1px solid var(--accent-strong);
}
.btn.btn-secondary, .btn.btn-secondary.disabled:hover {
    background: var(--faint-weak);
    color: var(--base-strong-up);
    border: 1px solid var(--faint-strong-up);
    box-shadow: var(--shadow-s);
}
.btn.btn-secondary:hover {
    background: var(--faint-weak-down);
    color: var(--base-strong-up);
    border: 1px solid var(--faint-strong-down);
}
.btn.btn-danger, .btn.btn-danger.disabled:hover {
    background: var(--critic-strong);
    color: var(--base-weak);
    border: 1px solid var(--critic-strong);
}
.btn.btn-danger:hover {
    background: var(--critic-faint);
    color: var(--base-weak);
    border: 1px solid var(--critic-faint);
}

.btn.disabled {
    opacity: 0.5;
}
.btn.btn-small {
    padding: 1px 5px;
    font-size: 13px;
}
.btn.btn-wide {
    display: block;
    text-align: center;
}


/******************** Textfields *******************/
textarea {
    -moz-tab-size : 4;
      -o-tab-size : 4;
         tab-size : 4;
}
input.textfield, textarea.textfield, select.dropdown  {
    display: inline-block;
    width: 100%;
    color: var(--base-strong);
    padding: 5px 10px 5px 10px;
    background: var(--base-weak);
    font-size: 16px;
    border: 1px solid var(--faint-strong);
    border-radius: var(--control-border-radius);
    transition: background-color 0.5s ease;
}
input.textfield:focus, textarea.textfield:focus, select.dropdown:focus {
    outline: 0;
}
textarea.textfield {
    height: 150px;
}
input.textfield.textfield-small, select.dropdown.dropdown-small {
    width: 140px;
    padding: 1px;
    font-size: 12px;
}
input.textfield.field-error {
    border: 1px solid var(--critic-strong);
    box-shadow: 0 0 5px var(--critic-strong);
}

/********************** Number Textfield **************/
.number-textfield-container {
    position: relative;
    width: 100%;
    height: 26px;
    padding: 0;
    overflow: hidden;
}
.number-textfield-container .wrapper {
    display: flex;
    flex-direction: row;
    height: 100%;
    align-items: center;
}
.number-textfield-container .input-wrapper {
    display: flex;
    flex: 1;
    height: 100%;
    background: var(--base-weak);
    border: 1px solid var(--faint-strong);
    border-radius: var(--control-border-radius);
}
[data-theme="dark"] .number-textfield-container .input-wrapper {
    background: var(--faint-weak-down);
}

.number-textfield-container.slider-textfield .input-wrapper {
    min-width: 50px;
    max-width: 100px;
}
.number-textfield-container input[type="text"] {
    flex: 1;
    margin: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 2px;
    font-size: 14px;
    text-align: right;
    background: none;
    border: none;
    outline: none;
}
.number-textfield-container.disabled {
    opacity: 0.5;
}
.number-textfield-container.disabled .step-controls {
    opacity: 0.5;
}
.number-textfield-container .label {
    position: absolute;
    display: inline-block;
    padding: 4px 6px;
    font-size: 14px;
    margin: 0;
    top: 0;
    left: 0;
    color: var(--faint-strong);
    user-select: none;
    -moz-user-select: none;
}
.number-textfield-container .step-controls {
    display: flex;
    flex-direction: column;
    width: 12px;
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.number-textfield-container .step-controls .step {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 10px;
    display: inline-block;
    width: 12px;
    flex: 1;
    background: var(--faint-weak);
    color: var(--base-strong-up);
    cursor: pointer;
    overflow: hidden;
}
.number-textfield-container .step-controls .step:hover {
    background: var(--faint-weak-down);
}
.number-textfield-container .step-controls .step.step-up {
    border-bottom: 1px solid var(--faint-strong);
    border-radius: 0 var(--control-border-radius) 0 0;
}
.number-textfield-container .step-controls .step.step-down {
    border-radius: 0  0 var(--control-border-radius) 0;
}
.number-textfield-container .step-controls .step i {
    margin: 0 2px 2px 2px;
    padding: 0;
}
.number-textfield-container input[type="range"] {
    flex: 4;
}

/********************** Control Labels & Groups ******************/
.ctrl-label {
    display: block;
    font-weight: bold;
    font-size: 10pt;
    margin-top: 10px;
    margin-bottom: 5px;
}
.ctrl-label-inline {
    display: inline-block;
    font-weight: bold;
    font-size: 10pt;
    margin-right: 10px;
}
.ctrl-group {
    margin-bottom: 10px;
}

/********************** Tooltip ************************/
.tooltip {
    display: inline-block;
}
.tooltip .tooltip-icon {
    color: var(--base-strong-up);
    opacity: 0.4;
}
.tooltip .tooltip-wrapper {
    display: none;
    position: fixed;
    z-index: 1000000;
}
.tooltip .tooltip-text {
    display: block;
    font-size: 13px;
    font-weight: normal;
    text-decoration: none;
    text-transform: none;
    width: 200px;
    background: var(--base-strong-up);
    color: var(--faint-weak);
    padding: 5px 7px;
    border-radius: var(--control-border-radius);
}
.tooltip:hover .tooltip-wrapper {
    display: block;
}
.tooltip:hover .tooltip-icon {
    opacity: 1.0;
}
.tooltip.disabled:hover .tooltip-icon {
    opacity: 0.4;
}


/******************* Pagination *********************/
ul.pagination {
    list-style: none;
    display: block;
    margin: 20px 0px;
    padding: 0;
}
ul.pagination li {
    display: inline;
    margin: 0;
    padding: 0;
    padding: 3px 7px 3px 7px;
}
ul.pagination li span {
    color: var(--faint-strong);
}
ul.pagination li a, ul.pagination li a:visited {
    text-decoration: none;
    display: inline-block;
    color: var(--accent-strong);
}
ul.pagination li a:hover {
    opacity: 0.8;
}
ul.pagination li a.current {
    display: inline-block;
    color: var(--faint-strong-down);
}



.scheme-editor-component {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
}

.scheme-editor-middle-section {
    height: 100%;
    position: relative;
}

.quick-helper-panel-wrapper {
    background: var(--faint-weak);
    border-bottom: 1px solid var(--faint-strong);
    display: block;
    width: 100%;
    height: 37px;
    top: 47px;
    z-index: 21;
    overflow: auto;
}
.quick-helper-panel {
    display: flex;
    align-items: center;
}
.quick-helper-panel .filler {
    flex: 1;
}
.quick-helper-panel-section {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 2px;
    margin-left: 5px;
    padding-left: 5px;
    height: 28px;
}
.quick-helper-panel-section:before {
    position: absolute;
    display: inline-block;
    width: 1px;
    height: 16px;
    top: 7px;
    left: 0;
    content: ".";
    font-size: 0;
    border-left: 1px solid var(--section-delimiter-color);
}
.quick-helper-panel-section:first-child:before {
    display: none;
}

.quick-helper-panel-section:first-child {
    border-left: none;
    margin-left: 0;
    padding-left: 0;
}

.quick-helper-panel input.textfield {
    font-size: 14px;
    padding: 3px 5px;
}

.quick-helper-panel .btn.btn-small {
    padding: 6px 8px;
    font-size: 13px;
}

.quick-helper-panel ul.button-group > li {
    white-space: nowrap;
}

.quick-helper-panel .msg {
    display: inline-block;
    position: relative;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 10px;
    padding-right: 20px;
    background: none;
    font-size: 14px;
}
.quick-helper-panel .msg .msg-close {
    position: absolute;
    top: 0;
    right: 2px;
    cursor: pointer;
}

.quick-helper-panel .schemio-logo {
    display: none;
    font-weight: normal;
    background: var(--faint-strong);
    text-decoration: none;
    padding: 2px 4px;
    height: 24px;
    border-radius: var(--control-border-radius);
}
.quick-helper-panel .schemio-logo img {
    height: 20px;
}

@media (max-width: 900px) {
    .quick-helper-panel .schemio-logo {
        display: inline-block;
    }
}


.quick-helper-panel .dropdown-container .dropdown-click-area {
    padding: 0;
}

.quick-helper-panel .reset-search {
    position: absolute;
    top: 3px;
    right: 6px;
    cursor: pointer;
    color: var(--faint-strong-up);
    opacity: 1;
}
.quick-helper-panel .reset-search:hover {
    opacity: 0.7;
}

.quick-helper-panel .number-textfield-container.quick-helper-number-textfield {
    height: 24px;
    max-width: 120px;
}
.quick-helper-panel .number-textfield-container.quick-helper-number-textfield .label {
    font-size: 12px;
}
.quick-helper-panel .number-textfield-container.quick-helper-number-textfield .text {
    font-size: 13px;
}


.scheme-error-message {
    padding-top: 20px;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.scheme-loading-icon {
    padding: 40px;
}


/******************* Zoom Control ********************/
.zoom-control {
    margin-left: 5px;
    display: flex;
    align-items: center;
    justify-items: center;
}
.zoom-control .zoom-button {
    display: inline-block;
    margin: 0;
    padding: 4px 5px;
    color: var(--base-strong-up);
    background: var(--faint-weak-up);
    font-size: 12px;
    height: 24px;
    cursor: pointer;
    border: 1px solid var(--faint-strong-up);
}
.zoom-control .zoom-button:hover {
    background: var(--faint-weak-down);
}
.zoom-control .zoom-button.zoom-out {
    border-radius: var(--control-border-radius) 0 0 var(--control-border-radius) !important;
    border-right: none;
}
.zoom-control .zoom-button.zoom-in {
    border-radius:  0 var(--control-border-radius) var(--control-border-radius) 0 !important;
    border-left: none;
}
.zoom-control .dropdown-container,
.zoom-control .dropdown-container .dropdown-click-area {
    padding: 0;
    margin: 0;
    border-radius: 0;
}
.zoom-control .dropdown-container input {
    border: none;
    padding: 2px 7px;
    height: 22px;
    width: 50px;
    font-size: 14px;
    text-align: center;
    outline: none;
}

/********************* Svg editor *******************/

.svg-editor {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.svg-editor-plot {
    width: 100%;
    height: 100%;
}
svg foreignObject h1,
svg foreignObject h2,
svg foreignObject h3,
svg foreignObject h4,
svg foreignObject h4,
svg foreignObject h6 {
    color: unset;
}
svg foreignObject ul {
    margin: 0;
}
.svg-editor-plot .grid line {
    stroke-width: 1;
}
.svg-editor-plot .grid line.grid-line-zero {
    stroke-width: 3;
}
.svg-editor-plot rect.multi-select-box {
    stroke-width: 2;
    stroke: rgb(21, 155, 218);
    fill: rgba(55, 175, 255, 0.219);
}
.svg-editor-plot .item-control-point {
    opacity: 1.0;
    cursor: pointer;
}
.svg-editor-plot .item-control-point:hover {
    opacity: 0.7;
}
.svg-editor-plot .item-control-point-textfield {
    display: block;
    width: 100%;
    background: none !important;
    border: none;
    height: 100%;
    color: white !important;
}
.svg-editor-plot rect.boundary-box {
    stroke-width: 1;
    fill: rgba(255, 255, 255, 0.01);
    opacity: 0.5;
}
.svg-editor-plot .boundary-box-dragger {
    cursor: pointer;
}
.svg-editor-plot .boundary-box-dragger:hover {
    opacity: 0.5;
}
.svg-editor-plot .boundary-box-pivot-dragger:hover {
    cursor: pointer;
    opacity: 0.3;
}

.svg-editor-plot .boundary-box-connector-starter {
    stroke: 'none';
    opacity: 0.6;
    cursor: pointer;
}
.svg-editor-plot .boundary-box-connector-starter:hover {
    opacity: 1;
}

.boundary-box-context-menu-button {
    display: none;
}
@media (max-width: 900px) {
    .boundary-box-context-menu-button {
        display: block;
    }
}

.svg-editor-plot .missing-shape rect {
    stroke-width: 2px;
    stroke: #db3a3a;
    fill: rgba(227, 120, 120, 0.3);
}
.svg-editor-plot .missing-shape div {
    color: #db3a3a;
    font-family: Arial, Helvetica, sans-serif;
    padding: 0px;
    text-align: center;
    vertical-align: middle;
    white-space: normal;
    display: table-cell;
    box-sizing: border-box;
}

/********** Item Cursor *******************/
.svg-editor-plot .item-cursor-pointer {
    cursor: pointer;
}


/**********************/
/*      Item link    */
.svg-editor-plot .item-link,
.svg-editor-plot .item-link:hover {
    text-decoration: none;
}
.svg-editor-plot .item-link p {
    margin: 0;
    padding: 0;
}
.svg-editor-plot .item-link circle {
    stroke-width: 2;
}
.svg-editor-plot .item-link .item-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: 15px;
}
.svg-editor-plot .item-link .item-link-full-title {
    font-size: 16px;
    font-weight: normal;
    font-family: "Lucida Console", monospace;
    fill: var(--base-strong-up);
}
.svg-editor-plot .item-link .item-link-title {
    display: inline-block;
    padding: 3px 6px;
    background: var(--faint-weak);
    color: var(--base-strong);
    opacity: 0.8;
    border-radius: 4px;
}
.svg-editor-plot .item-link:hover .item-link-title {
    background: var(--base-strong);
    color: var(--faint-weak);
}
.svg-editor-plot .item-edit-menu-link:hover circle {
    r: 15;
    cursor: pointer;
}
.svg-editor-plot .item-edit-menu-link text.link-icon {
    font-weight: bold;
    font-size: 12px;
    fill: var(--base-weak);
    font-family: "Font Awesome 5 Free";
    cursor: pointer;
}
.svg-editor-plot .item-edit-menu-link text.item-link-full-title {
    fill: var(--base-strong-up);
    font-size: 12px;
    display: none;
}
.svg-editor-plot .item-edit-menu-link:hover text.item-link-full-title {
    display: inline-block;
}

.item-text-container p, .in-place-edit-editor-wrapper [contenteditable="true"] p {
    margin-top: var(--paragraph-top-margin);
    margin-bottom: 0;
    padding: 0;
}

.in-place-edit-editor-wrapper [contenteditable="true"] h1,
.in-place-edit-editor-wrapper [contenteditable="true"] h2,
.in-place-edit-editor-wrapper [contenteditable="true"] h3,
.in-place-edit-editor-wrapper [contenteditable="true"] h4,
.in-place-edit-editor-wrapper [contenteditable="true"] h5,
.in-place-edit-editor-wrapper [contenteditable="true"] h6 {
    color: unset;
}

input[type="text"].in-place-text-editor,
textarea.in-place-text-editor {
    border: none;
    background: none;
    outline: none;
    resize: none;
}

.in-place-text-edit-dropdown-options {
    position: fixed;
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--faint-weak);
    color: var(--base-strong);
    overflow: auto;
}
.in-place-text-edit-dropdown-options li {
    padding: 5px 15px;
    cursor: pointer;
    white-space: nowrap;
}
.in-place-text-edit-dropdown-options li.selected,
.in-place-text-edit-dropdown-options li:hover {
    background: var(--faint-weak-down);
}

/*************** Item marker ********************/

.clickable-item-marker {
    animation: item-marker-blinker 3s linear infinite;
    opacity: 0.9;
}
@keyframes item-marker-blinker {
    0% { opacity: 0.9; }
    50% { opacity: 0.3; }
    100% { opacity: 0.9; }
}


/***************************************/
/* In place text edit                  */
/***************************************/
.in-place-edit-editor-wrapper {
    position: absolute;
}

.in-place-edit-editor-wrapper [contenteditable="true"] {
    outline: none;
}

.in-place-edit-editor-wrapper .ProseMirror ul {
    display: table;
    margin: 0 auto;
}

.in-place-edit-editor-wrapper .in-place-text-editor-menu {
    position: absolute;
    white-space: nowrap;
    background: var(--faint-weak);
    border-radius: 4px;
    z-index: 100;
}

.in-place-edit-editor-wrapper .in-place-text-editor-menu .rich-text-editor-menubar {
    padding: 3px 5px;
}



/*****************************************/
/* Hover state in create component state */
/*****************************************/
.state-createItem .svg-editor-plot .state-hover-layer {
    cursor: crosshair;
}
.state-draw .svg-editor-plot, .state-draw .svg-editor-plot .state-hover-layer {
    cursor: crosshair;
}


.state-editPath.sub-state-creating-path * {
    cursor: crosshair !important;
}
.state-editPath.sub-state-drag-object * {
    cursor: grabbing !important;
}
.sub-state-drag-screen * {
    cursor: grab !important;
}
.sub-state-drag-item * {
    cursor: grabbing !important;
}

[data-type='path-segment'],
[data-type='path-point'],
[data-type='path-control-point'] {
    cursor: pointer;
}
.path-control-points {
    opacity: 0.7;
}

/***************************************/
/* Export Picture Modal                */
/***************************************/
.export-svg-preview {
    background: white;
    border: 1px solid var(--faint-strong);
}

.export-picture-item-selector {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.export-picture-item-selector .export-picture-item-selector-all-items {
    font-style: italic;
}

.export-picture-item-selector ul {
    flex: 1;
    overflow: scroll;
    margin: 0;
    padding: 5px;
    background: var(--base-weak);
    color: var(--base-strong);
}

.export-picture-item-selector li {
    padding: 4px 8px;
    cursor: pointer;
}
.export-picture-item-selector li.selected {
    background: var(--accent-strong);
}
.export-picture-item-selector li:hover {
    background: var(--accent-faint);
}

[data-theme="light"] .export-picture-item-selector li.selected {
    color: var(--base-weak);
}
[data-theme="dark"] .export-picture-item-selector li.selected {
    background: var(--faint-weak-up);
}
[data-theme="dark"] .export-picture-item-selector li:hover {
    background: var(--faint-strong);
}

/******************************* Modal ********************************/
.modal-mask {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    display: table;
}
.modal-mask.modal-mask-transparent {
    background: none;
}
.modal-wrapper {
    z-index: 1000;
}
.modal-container {
    z-index: 1000;
    top: 0;
    left: 0;
    position: fixed;
    margin: 0 auto;
    padding: 0;
    background-color: var(--faint-weak-up);
    box-shadow: 0 2px 30px var(--shadow-color);
    border-radius: var(--modal-border-radius);
}
.modal-header {
    position: relative;
    padding: 7px 10px;
    background: var(--faint-weak-down);
    cursor: grab;
    border-radius: var(--modal-border-radius) var(--modal-border-radius) 0 0;
}
.modal-header.dragging {
    cursor: grabbing;
}
.modal-header h3 {
    margin: 0;
    font-size: 15px;
    color: var(--base-strong-up);
}
.modal-header .modal-close {
    position: absolute;
    top: 7px;
    right: 10px;
    cursor: pointer;
}
.modal-body {
    position: relative;
    padding: 10px;
    max-height: 550px;
    overflow: auto;
}
.modal-footer {
    border-top: 1px solid var(--faint-strong);
    padding: 10px;
    min-height: 40px;
}
.modal-controls {
    text-align: right;
}
.modal-default-button {
    float: right;
}




.header .right-section {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-right: 10px;
    margin-left: 10px;
}
.header .right-section .theme-switcher {
    cursor: pointer;
    color: var(--faint-weak);
}
.header .right-section .theme-switcher:hover {
    color: var(--accent-faint-up)
}
.header .right-section a, .header .right-section span.link {
    color: var(--accent-weak-down);
}

.scheme-container {
    width: 100%;
    height: 100%;
}

/*********************** Button Group **********************/

ul.button-group {
    display: block;
    margin: 0;
    padding: 2px;
    list-style: none;
}
ul.button-group > li {
    position: relative;
    display: table-cell;
    margin: 0;
    padding: 0 2px 0 2px;
    vertical-align: middle;
}
ul.button-group.disabled > li, ul.button-group > li.disabled {
    opacity: 0.2;
}

/************* Toggle Button *****************/

.toggle-button {
    display: inline-block;
    min-width: 24px;
    min-height: 24px;
    position: relative;
    text-align: center;
    padding: 7px 15px;
    color: var(--base-strong);
    background: none;
    font-size: 16px;
    cursor: pointer;
    cursor: hand;
    text-transform: capitalize;
    border-radius: var(--control-border-radius);
}
.toggle-button.toggled {
    color: var(--base-strong);
    background: var(--faint-strong-up);
    cursor: pointer;
    cursor: hand;
}
[data-theme="dark"] .toggle-button.toggled {
    background: var(--faint-weak-down);
}
.toggle-button.disabled {
    opacity: 0.2;
}
.toggle-button.dimmed {
    opacity: 0.4;
}
.toggle-button:hover {
    background: var(--faint-strong-up-2);
}
.toggle-button.disabled:hover, ul.button-group > li > .toggle-button.disabled {
    opacity: 0.2;
    background: none;
    cursor: default;
}
.toggle-button .small-letter {
    position: absolute;
    bottom: 0;
    right: 1px;
    font-size: 8px;
}
.toggle-button.small {
    padding: 2px;
}

@media (max-width: 900px) {
    .toggle-button:hover {
        background: none;
    }
    .toggle-button.toggled {
        background: var(--faint-strong-up);
    }
}

.quick-helper-panel .toggle-button {
    min-width: 25px;
    padding: 3px 5px 3px 5px;
    font-size: 14px;
}
.toggle-group {
    display: inline-block;
    padding: 0;
    font-size: 0;
    user-select: none;
}
.toggle-group > .toggle-button {
    color: var(--faint-strong);
    margin: 0;
    font-size: 12px;
    border-top: 1px solid var(--faint-strong-up);
    border-right: 1px solid var(--faint-strong-up);
    border-bottom: 1px solid var(--faint-strong-up);
    border-radius: 0;
    background: var(--faint-weak);
    text-decoration: none;
}
.toggle-group > .toggle-button:hover {
    color: var(--base-strong-up);
    margin: 0;
}
.toggle-group > .toggle-button.toggled {
    background: var(--faint-strong-up-2);
    color: var(--base-strong);
}
.toggle-group > .toggle-button:first-child {
    border: 1px solid var(--faint-strong-up);
    border-radius: 20px 0 0 20px;
}
.toggle-group > .toggle-button:last-child {
    border-top: 1px solid var(--faint-strong-up);
    border-right: 1px solid var(--faint-strong-up);
    border-bottom: 1px solid var(--faint-strong-up);
    border-radius: 0 20px 20px 0;
}
[data-theme="dark"] .toggle-group > .toggle-button:first-child {
    border: 1px solid var(--base-strong-up-3);
}
[data-theme="dark"] .toggle-group > .toggle-button:last-child {
    border-top: 1px solid var(--base-strong-up-3);
    border-right: 1px solid var(--base-strong-up-3);
    border-bottom: 1px solid var(--base-strong-up-3);
}
[data-theme="dark"] .toggle-group > .toggle-button {
    border-top: 1px solid var(--base-strong-up-3);
    border-right: 1px solid var(--base-strong-up-3);
    border-bottom: 1px solid var(--base-strong-up-3);
}

.notifier-marker {
    position: absolute;
    background: var(--accent-faint);
    display: block;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 10px;
}
.notifier-marker.notifier-error {
    background: var(--critic-faint);
}


/***************************/
/*   Side Panel            */
/***************************/
.scheme-editor-component .side-panel {
    height: 100%;
    padding-left: 2px;
    padding-right: 2px;
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 0;
    background: var(--faint-weak-up);
    box-shadow: 0 0 10px var(--shadow-color);
}
.scheme-editor-component .side-panel.side-panel-right {
    right: 0;
}
.scheme-editor-component .side-panel.side-panel-left {
    left: 0;
}
.scheme-editor-component .side-panel .side-panel-overflow {
    height: 100%;
    width: 100%;
    overflow: auto;
    position: relative;
    padding-bottom: 10px;
}
.scheme-editor-component .side-panel .side-panel-close {
    position: absolute;
    z-index: 20;
    display: none;
    top: 3px;
    right: 7px;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    background: var(--faint-weak-down-2);
    color: var(--faint-strong-down);
    padding: 3px 5px;
    border-radius: var(--control-border-radius);
}
@media (max-width: 900px) {
    .scheme-editor-component .side-panel .side-panel-close {
        display: inline-block;
        padding: 4px 8px;
    }
}
.scheme-editor-component .side-panel .side-panel-expander {
    display: inline-block;
    position: absolute;
    margin: auto;
    background: var(--faint-weak-up);
    top: 0;
    bottom: 0;
    cursor: col-resize;
    color: var(--base-strong-up);
    height: 100%;
    width: 5px;
    user-select: none;
}
.scheme-editor-component .side-panel-right .side-panel-expander {
    border-left: 1px solid var(--faint-strong);
    left: -5px;
}
.scheme-editor-component .side-panel-left .side-panel-expander {
    border-right: 1px solid var(--faint-strong);
    right: -5px;
}
.scheme-editor-component .side-panel .side-panel-expander:hover {
    /* color: var(--faint-strong-down); */
    background: var(--faint-weak-down);
}
.scheme-editor-component .side-panel .side-panel-btn-expander {
    display: inline-block;
    position: absolute;
    margin: auto;
    background: var(--faint-weak-up);
    top: 0;
    bottom: 0;
    cursor: col-resize;
    border-top: 1px solid var(--faint-strong);
    border-bottom: 1px solid var(--faint-strong);
    color: var(--base-strong-up);
    height: 40px;
    width: 12px;
    user-select: none;
}
.scheme-editor-component .side-panel.expanded .side-panel-btn-expander {
    display: none;
}
@media (max-width: 900px) {
    .scheme-editor-component .side-panel.expanded .side-panel-btn-expander {
        display: inline-block;
    }
}
.scheme-editor-component .side-panel-right .side-panel-btn-expander {
    border-left: 1px solid var(--faint-strong);
    left: -16px;
    border-radius:  3px 0 0 3px;
    cursor: pointer;
}
.scheme-editor-component .side-panel-left .side-panel-btn-expander {
    border-right: 1px solid var(--faint-strong);
    right: -16px;
    border-radius: 0 3px 3px 0;
    cursor: pointer;
}
.scheme-editor-component .side-panel .side-panel-btn-expander i {
    margin-top: 10px;
    margin-left: 0;
}


/**************** Bottom Panel ***********************/
.scheme-editor-component .bottom-panel {
    position: absolute;
    bottom: 0;
    min-height: 30px;
    background: var(--faint-weak-up);
    box-shadow: 0 0 10px var(--shadow-color);
    width: 100%;
    display: flex;
    flex-direction: column;
}
.scheme-editor-component .bottom-panel .bottom-panel-dragger {
    cursor: pointer;
    height: 7px;
    background: var(--faint-weak-down);
    border-bottom: 1px solid var(--faint-weak);
    user-select: none;
}
.scheme-editor-component .bottom-panel .bottom-panel-dragger:hover {
    background: var(--faint-weak-down-2);
}
.scheme-editor-component .bottom-panel .bottom-panel-body {
    display: flex;
    flex: 1;
    width: 100%;
}
.scheme-editor-component .bottom-panel .side-panel-filler-left {
    width: 220px;
}
.scheme-editor-component .bottom-panel .bottom-panel-content {
    flex: 1;
    display: flex;
    padding-left: 10px;
    align-items: center;
}

.scheme-editor-component .bottom-panel .bottom-panel-content .label {
    font-size: 12px;
    padding-left: 10px;
    white-space: nowrap;
}
.scheme-editor-component .bottom-panel .bottom-panel-content > .toggle-group {
    margin: 5px;
}
.scheme-editor-component .bottom-panel .bottom-panel-content > .toggle-group > .toggle-button {
    font-size: 12px;
    padding: 4px;
}
.scheme-editor-component .bottom-panel .bottom-panel-content .element-picker .picked-element {
    font-size: 12px;
}
.scheme-editor-component .bottom-panel .bottom-panel-content .diagram-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.scheme-editor-component .bottom-panel .bottom-panel-content .diagram-controls .diagram-picker-wrapper,
.scheme-editor-component .bottom-panel .bottom-panel-content .diagram-controls .element-picker {
    display: inline-block;
    width: 150px;
    margin-left: 10px;
    margin-right: 10px;
}
.scheme-editor-component .bottom-panel .bottom-panel-content .diagram-controls .diagram-picker .diagram-title {
    font-size: 12px;
}
.scheme-editor-component .bottom-panel .bottom-panel-content .first-selected-point {
    display:flex;
    align-items: center;
}
.scheme-editor-component .bottom-panel .bottom-panel-content .first-selected-point input.textfield {
    margin-left: 10px;
    padding: 4px;
    font-size: 12px;
    width: 80px;
}


/******************** Draw Side Panel Properties *********/
.draw-color-pallete-option {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: 4px;
    cursor: pointer;
    border-radius: 12px;
}
.draw-color-pallete-option:hover {
    opacity: 0.8;
}


/******************* Panel *********************/
.panel {
    position: relative;
    border-top: 1px solid #fff;
    box-shadow: 0 -1px 0 #ddd;
    margin: 2px;
    padding-top: 2px;
}
.panel.no-border, [data-theme="dark"] .panel.no-border {
    border: none;
    box-shadow: none;
}
.panel-body {
    margin-bottom: 10px;
}
.panel-close {
    position: absolute;
    right: 5px;
    top: 2px;
    cursor: pointer;
}
.panel-close:hover {
    color: var(--accent-strong);
}
.panel-title {
    position: relative;
    display: block;
    font-weight: bold;
    color: var(--base-strong-up);
    font-size: 14px;
    padding-bottom: 4px;
    padding-left: 15px;
    cursor: pointer;
}
.panel-title:before {
    position: absolute;
    display: inline-block;
    font-size: 10px;
    left: 2px;
    top: 3px;
}
.panel-title.panel-expanded:before {
    content: '\25BC';
}
.panel-title.panel-collapsed:before {
    content: '\25BA';
}
.panel-title:hover {
    color: var(--faint-strong-down-2);
}


/******************** Color Picker *******************************/
.color-picker {
    width: 100%;
    min-width: 22px;
}
.color-picker-toggle-button {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border: 1px solid var(--faint-strong);
    border-radius: var(--control-border-radius);
}
.color-picker-toggle-button.disabled {
    opacity: 0.3;
}
.color-picker-toggle-button span {
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%;
}
.color-picker-toggle-button span.color-picker-toggle-button-background {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAKElEQVQoU2M8c+bMfwY0oKenhy7EwDgUFP769QvDM5cuXcL0zBBQCADjtDObjg4SggAAAABJRU5ErkJggg==') repeat;
}
.color-picker .color-picker-tooltip {
    position: fixed;
    z-index: 1000;
    padding: 4px;
    background: var(--faint-weak);
    border: 1px solid var(--faint-strong-up);
    border-radius: 2px;
    box-shadow: 1px 1px 8px var(--shadow-color);
}

.raw-color-picker {
    padding: 4px 4px 20px 4px;
    max-width: 233px;
}
.raw-color-picker .rcp-canvas {
    user-select: none;
    position: relative;
    display: block;
    width: 225px;
    height: 124px;
    margin: auto;
    cursor: pointer;
}
.raw-color-picker .rcp-canvas .rcp-lightness-overlay,
.raw-color-picker .rcp-canvas .rcp-shadow-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
}
.raw-color-picker .rcp-canvas .rcp-lightness-overlay {
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}
.raw-color-picker .rcp-canvas .rcp-shadow-overlay {
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
    background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}
.raw-color-picker .rcp-canvas .rcp-canvas-knob {
    position: absolute;
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, .3), 0 0 1px 2px rgba(0, 0, 0, .4);
}
.raw-color-picker .rcp-controls {
    margin-top: 10px;
    margin-bottom: 10px;
}
.raw-color-picker .rcp-main-row {
    display: flex;
    width: 100%;
    gap: 8px;
    flex-direction: row;
}
.raw-color-picker .rcp-preview {
    user-select: none;
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 2px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAATtJREFUOE9lUwGSxCAII69o/f/ftP1EuSEBdOc6O1vECiGJWHO6235gZm76j9e4hjkYMhd7irUGCwBmri2HG5zH+YwxGEeuT1bCYZhzurFAftB4wPR93we+QrCrsQA7Z88E04cCQaIlgj2uIo3ASGPHm3BjCdi4LiOUn6fhGuaaHiwBbk62DgKSg/8kiMDolgWyfHevkWBjBAd75pNLAieJmqalEwihuk8ZN/Ito/u2ASuF/DWym63nSQQHTw0YBv8++abGShbLMGutPtmflW8Aw+cfZTylOrSy9e4CW6XgSB2hEeKXfo0lZ1BuvQ9d2jK3nGn6LnA4vDpF7fd522S/VSSZOOAdKEiCFwpEfj0xwubx9BzjQFD2FKi6izL4Wm/LS+N4mT7F/zz8p6TILEfq3BMknrflsHzs/wE1ldN4Iz8wtAAAAABJRU5ErkJggg==');
}
.raw-color-picker .rcp-preview .rcp-preview-color {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 2px;
}
.raw-color-picker .rcp-sliders {
    user-select: none;
    flex: 1;
}
.raw-color-picker .rcp-sliders-gap {
    height: 10px;
}
.raw-color-picker .rcp-slider {
    height: 10px;
    position: relative;
    cursor: pointer;
}
.raw-color-picker .rcp-hue-slider {
    background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.raw-color-picker .rcp-slider-checkerboard {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAATtJREFUOE9lUwGSxCAII69o/f/ftP1EuSEBdOc6O1vECiGJWHO6235gZm76j9e4hjkYMhd7irUGCwBmri2HG5zH+YwxGEeuT1bCYZhzurFAftB4wPR93we+QrCrsQA7Z88E04cCQaIlgj2uIo3ASGPHm3BjCdi4LiOUn6fhGuaaHiwBbk62DgKSg/8kiMDolgWyfHevkWBjBAd75pNLAieJmqalEwihuk8ZN/Ito/u2ASuF/DWym63nSQQHTw0YBv8++abGShbLMGutPtmflW8Aw+cfZTylOrSy9e4CW6XgSB2hEeKXfo0lZ1BuvQ9d2jK3nGn6LnA4vDpF7fd522S/VSSZOOAdKEiCFwpEfj0xwubx9BzjQFD2FKi6izL4Wm/LS+N4mT7F/zz8p6TILEfq3BMknrflsHzs/wE1ldN4Iz8wtAAAAABJRU5ErkJggg==');
}
.raw-color-picker .rcp-slider-alpha-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
}
.raw-color-picker .rcp-text-controls {
    margin-top: 10px;
}
.raw-color-picker .rcp-input {
    display: inline-block;
    width: 100%;
    color: var(--base-strong);
    padding: 5px 10px 5px 10px;
    background: var(--base-weak);
    font-size: 13px;
    border: 1px solid var(--faint-strong);
    border-radius: var(--control-border-radius);
}
.raw-color-picker .rcp-slider-knob {
    position: absolute;
    display: block;
    width: 4px;
    height: 10px;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 0 0 1.5px #fff, 0 0 1px 2px rgba(0, 0, 0, .4);
}
.raw-color-picker table.color-sliders {
    border: 0;
    width: 100%;
}
.raw-color-picker table.color-sliders tr td:first-child {
    font-size: 12px;
}
.raw-color-picker .toggle-group {
    margin-bottom: 5px;
}
.raw-color-picker .toggle-group .toggle-button {
    text-transform: uppercase;
}
/*************************** Advanced Color Picker ********************/
.advanced-color-editor {
    min-width: 20px;
    display: inline-block;
}
.advanced-color-editor.disabled {
    opacity: 0.3;
}
.advanced-color-editor .color-picker-toggle-button {
    display: block;
    height: 100%;
    width: 100%;
}
.advanced-color-editor .none-picker-toggle-button {
    border: 1px solid var(--faint-strong);
    width: 100%;
    display: block;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAKElEQVQoU2M8c+bMfwY0oKenhy7EwDgUFP769QvDM5cuXcL0zBBQCADjtDObjg4SggAAAABJRU5ErkJggg==') repeat;
    height: 100%;
    width: 100%;
    font-size: 10pt;
    padding: 2px 4px;
    border-radius: var(--control-border-radius);
    cursor: pointer;
}
.advanced-color-editor .gradient-container {
    border: 1px solid var(--faint-strong);
    display: block;
    height: 100%;
    width: 100%;
    border-radius: var(--control-border-radius);
    cursor: pointer;
}
.advanced-color-editor .gradient-container.large {
    height: 30px;
}
.advanced-color-editor .image-container {
    border: 1px solid var(--faint-strong);
    border-radius: var(--control-border-radius);
    cursor: pointer;
}
.advanced-color-editor .image-container img {
    max-width: 100%;
    min-height: 20px;
    max-height: 60px;
}
.advanced-color-editor .raw-color-picker-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

/*************************** Advanced Color Picker Gradient Controls *********************/
.gradient-slider-container {
    position: relative;
    padding-bottom: 30px;
}
.gradient-slider-container .gradient-slider {
    position: absolute;
}
.gradient-slider-container .gradient-slider-knob {
    position: absolute;
    cursor: pointer;
    left: -4px;
    top: -2px;
    display: block;
    width: 9px;
    border-radius: 4px 4px 1px 1px;
    border: 1px solid var(--base-strong);
    height: 15px;
}
.gradient-slider-container .gradient-slider-knob.selected {
    height: 20px;
    width: 13px;
    left: -6px;
}
.gradient-controls {
    float: left;
    width: 38%;
    padding: 0 5px 0 5px;
}
.gradient-controls .gradient-rotation-knob {
    user-select: none;
    width: 75px;
    height: 75px;
}
.gradient-controls .gradient-rotation-knob circle,
.gradient-controls .gradient-rotation-knob line {
    stroke: var(--base-strong);
    stroke-width: 1px;
    cursor: pointer;
}
.gradient-controls .gradient-rotation-knob circle.center {
    stroke-width: 1px;
    fill: var(--base-strong);
    stroke: none
}
.gradient-controls .gradient-rotation-knob circle.full {
    fill: var(--base-strong);
}
.gradient-controls .gradient-rotation-knob-container {
    padding-left: 20px;
    padding-top: 10px;
}

.gradient-color-picker {
    float: left;
    width: 60%;
}
.gradient-color-picker:after {
    content: "";
    display: block;
    clear: all;
}



/**************************** Item Properties ***********************/
.item-properties textarea {
    width: 100%;
    min-height: 150px;
}


/*************** Properties Table (Item shape props) ****************/
.properties-table {
    margin-top: 10px;
    margin-bottom: 10px;
    border-collapse: collapse;
    width: 100%;
}
.properties-table > tbody > tr > td {
    padding: 2px;
}
.properties-table > tbody > tr > td.disabled {
    opacity: 0.3;
}
.properties-table .label {
    font-size: 14px;
}
.properties-table .label.disabled {
    opacity: 0.5;
}
.properties-table .value select {
    width: 100%;
}
.properties-table .value input.textfield {
    width: 100%;
    padding: 6px 4px 6px 4px;
    font-size: 14px;
}
.properties-table > tbody > tr:nth-child(even) {
    background: var(--faint-weak);
}
.properties-table > tbody > tr:nth-child(odd) {
    background: none;
}
.properties-table .property-arg-binder {
    max-width: 44px;
}
.properties-table textarea.property-textarea {
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 4px;
    border-radius: 3px;
    width: 100%;
}
.properties-table .array-entry-container {
    display: flex;
    align-items: center;
    gap: 5px;
}
.properties-table .array-controls {
    margin-top: 10px;
    margin-bottom: 10px;
}
.properties-table .array-entry-container .array-entry {
    flex: 1;
    padding: 15px 10px 10px 10px;
    border-radius: 10px;
    border: none;
    margin: 5px;
    position: relative;
    box-shadow: var(--shadow-xs);
}
.properties-table .array-entry-container .array-entry-ops {
    position: absolute;
    top: 5px;
    right: 10px;
}
.properties-table .array-entry-container .array-entry-ops .icon {
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.5s ease;
}
.properties-table .array-entry-container .array-entry-ops .icon:hover {
    opacity: 1.0;
}
.properties-table .array-idx-label {
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    left: 10px;
    top: 5px;
    padding: 0;
}
.property-arg-binder-icon {
    opacity: 0.6;
}
.property-arg-binder-icon.binded {
    opacity: 1.0;
}
.property-arg-binder-ref {
    font-style: italic;
    color: var(--accent-strong);
}

[data-theme="dark"] .property-arg-binder-ref {
    font-style: italic;
    color: var(--accent-faint-up);
}

/************* Links in Item Properties ***************/
.scheme-details {
    user-select: text;
}
.item-details {
    user-select: text;
}
ul.links-editor, ul.links-editor {
    list-style: none;
    padding: 0px;
    margin-top: 5px;
    margin-bottom: 5px;
}
ul.links-editor li {
    position: relative;
}
ul.links-editor a {
    color: var(--base-strong-up-2);
}
ul.links-editor li i.fas {
    font-size: 12px;
}
ul.links-editor .delete-link {
    opacity: 0.1;
    color: var(--critic-strong);
}
ul.links-editor .delete-link:hover {
    opacity: 1.0;
}
ul.links-editor .edit-link {
    opacity: 0.1;
    color: var(--base-strong-up-2);
}
ul.links-editor .edit-link:hover {
    opacity: 1.0;
}



/******************** Tags Input **********************/
.vue-tags-input {
    max-width: none !important;
    width: 100% !important;
    background: none !important;
}

.vue-tags-input > .input {
    background: var(--faint-weak-down) !important;
    border-radius: var(--control-border-radius);
}

.vue-tags-input input {
    background: var(--faint-weak-down) !important;
    background: none;
}

/******************* Create Item Menu *****************/
.item-menu {
    padding: 5px 5px 15px 5px;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content:left;
    flex-wrap: wrap;
    user-select: none;
}
.item-menu .item-container {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 32px;
    margin: 2px;
    padding: 0;
    cursor: grab;
}
.item-menu .item-container img {
    display: block;
    max-width: 42px;
    max-height: 32px;
    text-align: center;
}
.item-menu .item-container span {
    font-size: 12px;
}
.item-menu .item-container:hover {
    opacity: 0.6;
}
.item-menu .item-container.selected {
    background: var(--faint-strong);
}
.item-menu .item-container.item-container-template {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    width: 80px;
    border: 1px solid var(--faint-strong-up);
    border-radius: 4px;
    padding: 5px;
}
.item-menu .item-container.item-container-template img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}
.art-pack {
    padding: 2px 2px 15px 2px;
}
.art-pack-author {
    font-size: 12px;
}


.project-art-editor .item-menu .item-container img {
    max-width: 60px;
    max-height: 60px;
}
.project-art-editor .item-menu .item-container:hover {
    opacity: 1;
}
.project-art-editor .item-menu .item-container {
    width: 60px;
    height: 60px;
    cursor: default;
}
.item-menu .item-container .remove-icon {
    color: var(--critic-strong);
    font-size: 14px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
}

.create-item-menu .buttons {
    margin: 8px;
}
.create-item-menu .preview-item {
    position: fixed;
    padding: 5px;
    min-width: 160px;
    max-width: 230px;
    background: var(--faint-weak);
    box-shadow: 1px 1px 8px var(--shadow-color);
}
.create-item-menu .preview-item h4 {
    margin: 5px 0 5px 0;
}
.create-item-menu .preview-item img.preview-art {
    max-height: 100px;
    max-width: 100%;
    min-width: 50%;
    min-height: 80px;
}
.create-item-menu .preview-item .preview-item-description {
    font-size: 12px;
}
.create-item-menu .section {
    padding-left: 10px;
    padding-right: 10px;
}
.create-item-menu .btn.btn-block {
    text-align: center;
}

/*************** File upload **********************/
.image-control {
    display: flex;
}
.image-control input.textfield {
    width: 100%;
}

.file-upload-button {
    position: relative;
    overflow: hidden;
    width: 30px;
    height: 30px;
    padding: 5px;
    background: var(--faint-strong-up);
    border: 1px solid var(--base-strong);
    cursor: pointer;
    margin-left: 5px;
    border-radius: 3px;
}
.file-upload-button input[type='file']{
    position: absolute;
    cursor: pointer;
    width: 100px;
    height: 100px;
    opacity: 0;
    left: -20px;
    top: -20px;
}
.file-upload-button .icon{
    font-size: 20px;
}
.image-preview {
    display: block;
    height: 200px;
}
.image-preview img {
    max-width: 400px;
    max-height: 200px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/******************************* Rich Text Editor ******************************/
.textarea-enlarged-container {
    display: grid;
    grid-template-rows: 40px auto;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 101;
    background: var(--faint-weak);
}
.textarea-enlarged-container .textarea-enlarged-top-panel {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px;
}
.textarea-enlarged-container .editor-frame {
    width: 100%;
    height: 100%;
}
.textarea-enlarged-container textarea {
    border: 1px solid var(--faint-strong);
    width: 100%;
    height: 100%;
    padding: 4px;
}
.textarea-enlarged-container .editor-content {
    position: absolute;
    width: 100%;
    min-height: 100%;
    max-height: 100%;
    overflow: auto;
}
.textarea-enlarged-container .editor-content > div, .textarea-enlarged-container .editor-content  div.ProseMirror {
    width: 100%;
    height: 100%;
}
.textarea-enlarged-container .btn.action-close {
    position: absolute;
    right: 5px;
    top: 5px;
}

.rich-text-editor-container .editor-frame {
    position: relative;
    border: 1px solid var(--faint-strong);
    background: var(--base-weak);
    border-radius: 3px;
}
.rich-text-editor-container .editor-content {
    padding: 4px;
    overflow: auto;
}

.rich-text-editor-container .editor-frame.focused {
    box-shadow: 0 0 5px var(--shadow-color);
}

.text-editor-enlarge {
    display: inline-block;
    position: absolute;
    right: 5px;
    top: 5px;
    opacity: 0.2;
    cursor: pointer;
}
.text-editor-enlarge:hover {
    opacity: 1.0;
}

/* ensuring that the cursor is always visible when triggering text edit from void double click */
.ProseMirror {
    min-width: 20px;
}

.rich-text-editor-container .ProseMirror > p:first-child {
    margin-top: 0;
}
.rich-text-editor-container .ProseMirror > p {
    min-height: var(--min-paragraph-height);
    margin-top: var(--paragraph-top-margin);
    margin-bottom: 0;
    padding: 0;
}


.rich-text-editor-container .ProseMirror.ProseMirror-focused {
    outline: none;
}

.rich-text-editor-menubar {
    padding:  7px 5px;
}

.rich-text-editor-menubar .editor-icon {
    padding: 2px;
    display: inline-block;
    width: 24px;
    height: 22px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    border-radius: 2px;
}
.rich-text-editor-menubar .editor-icon.is-active {
    background: var(--base-strong-up);
    color: var(--base-weak);
}

.rich-text-editor-menubar .editor-icon:hover {
    background: #bbb;
    color: var(--base-strong-up);
}

.rich-text-editor-icons-modal {
    z-index: 500;
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 350px;
    height: 380px;
    background: var(--faint-weak-up);
    color: var(--base-strong-up);
    border-radius: 3px;
    border: 1px solid var(--base-strong-up-3);
    padding: 5px;
    box-shadow: 2px 2px 4px var(--shadow-color);
}
.rich-text-editor-icons-modal .icons-search-keyword {
    height: 30px;
    border: 1px solid var(--faint-strong);
    border-radius: 3px;
}
.rich-text-editor-icons-modal .icons-container {
    flex: 1;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
.rich-text-editor-icons-modal .icons-container ul.icons {
    color: var(--base-strong);
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
    grid-auto-rows: 40px;
    gap: 5px;
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
}
.rich-text-editor-icons-modal .icons-container ul.icons li {
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 3px;
}

.rich-text-editor-icons-modal .icons-container ul.icons li:hover {
    background: var(--faint-weak-down);
}
/************ Script editor ***************/
.script-editor-container {
    position: relative;
}
.script-editor-container.script-editor-enlarged {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.script-editor-container .codemirror-container {
    height: 100%;
}

ul.script-options {
    list-style: none;
    margin: 10px 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 2px;
}
ul.script-options .script-option {
    flex: 1;
    cursor: pointer;
    padding: 10px 20px;
    /* border-radius: 5px; */
    color: var(--faint-strong);
    background: var(--faint-weak-down);
}
ul.script-options .script-option.selected {
    color: var(--base-strong-up-2);
    background: var(--faint-strong-up);
}

.script-parameters {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-bottom: 10px;
}
.script-parameters .script-parameter {
    display: flex;
    flex-direction: row;
    flex: 1;
    gap: 5px;
    align-items: center;
}

.script-parameters .script-parameter .number-textfield-container {
    flex: 1;
}

/**************  Dropdown    ********************/
.dropdown-container {
    display: block;
    position: relative;
    padding: 0;
    margin: 0;
}
.dropdown-container .dropdown-click-area {
    display: block;
    padding: 4px 4px;
    border: 1px solid var(--faint-strong-up-2);
    background: var(--base-weak);
    cursor: pointer;
    border-radius: var(--control-border-radius);
}
.dropdown-container.borderless.error .dropdown-click-area,
.dropdown-container.error .dropdown-click-area {
    border: 1px solid var(--critic-faint);
}
.dropdown-container.inline {
    display: inline-block;
}
.dropdown-container.inline .dropdown-click-area {
    display: inline-block;
}
.dropdown-container .dropdown-click-area.hover-effect:hover {
    background: var(--base-weak);
    border: 1px solid var(--faint-strong-down);
}
.dropdown-container.borderless .dropdown-click-area {
    border: none;
    background: none;
    margin: 1px;
}
.dropdown-container.borderless.error .dropdown-click-area {
    border: 1px solid var(--critic-faint);
    margin: 0;
}
.dropdown-container.borderless .dropdown-click-area.hover-effect:hover {
    margin: 0;
}
.dropdown-container .dropdown-popup {
    position: fixed;
    z-index: 999;
    background: var(--base-weak);
    border: 1px solid var(--faint-strong);
    color: var(--base-strong-up-2);
    box-shadow: 2px 2px 4px var(--shadow-color);
}
.dropdown-container .dropdown-popup ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    min-width: 100px;
}
.dropdown-container .dropdown-popup ul li {
    position: relative;
    white-space: nowrap;
    padding: 4px 8px 4px 8px;
    cursor: pointer;
    text-overflow: ellipsis;
    overflow-x: hidden;
}
.dropdown-container .dropdown-popup ul li.hovered {
    background: var(--accent-strong);
    color: var(--base-weak);
}
.dropdown-container .dropdown-popup ul li i.dropdown-option-icon {
    position: absolute;
    right: 5px;
}
.dropdown-container .dropdown-popup .dropdown-search {
    width: 100%;
    display: inline-block;
    border-top: none;
    border-left: none;
    border-right: none;
    font-size: 14px;
    border-radius: 0;
    padding: 4px;
    outline: none;
}
.dropdown-container .dropdown-popup .dropdown-search::placeholder {
    opacity: 0.3;
}
.dropdown-container .dropdown-option-tooltip {
    position: fixed;
    padding: 5px;
    font-size: 12px;
    z-index: 999;
    background: var(--faint-weak-down-2);
    border: 1px solid var(--faint-strong);
    color: var(--base-strong);
    box-shadow: 2px 2px 4px var(--shadow-color);
}
.dropdown-container .dropdown-option-tooltip h3 {
    margin-top: 5px;
    font-size: 16px;
}

/******************************* Item List Popup ****************************/
.item-list-container {
    height: 400px;
    overflow: scroll;
    padding: 4px;
    border: 1px solid #ddd;
    margin-top: 5px;
    background: var(--faint-weak-up);
}
.item-list-container ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.item-list-container .unnamed-item {
    color: var(--faint-strong);
    font-style: italic;
}



/****************** Tag Filter ********************/
.tag-filter-container ul.tag-filter {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tag-filter-container ul.tag-filter li {
    margin-right: 5px;
    display: inline;
}
.tag-filter-container ul.tag-filter li .tag {
    display: inline-block;
    padding: 5px 10px;
    background: var(--faint-weak-up);
    color: var(--base-strong-up);
    font-size: 14px;
    cursor: pointer;
    border-radius: var(--control-border-radius);
}
.tag-filter-container ul.tag-filter li .tag:hover {
    background:var(--faint-strong);
    color: white;
}
.tag-filter-container ul.tag-filter li .tag.selected {
    background: var(--base-strong-up);
    color: white;
}
.tag-filter-container ul.tag-filter li .tag.selected:hover {
    background:var(--faint-strong);
    color: white;
}


/************* Behavior Properties **********************/
.behavior-container {
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
    background: var(--base-weak);
    border-radius: 6px;
    padding: 5px;
}

.behavior-event {
    position: relative;
    padding-left: 35px;
}
.behavior-event .behavior-menu {
    position: absolute;
    display: block;
    left: 4px;
    top: 0;
}
.behavior-event .dropdown-click-area {
    font-size: 14px;
}
.behavior-event .custom-event-textfield {
    border: none;
    font-size: 14px;
}

.behavior-action-container {
    position: relative;
    padding-left: 55px;
}
.behavior-action-container.disabled .action-item .picked-element,
.behavior-action-container.disabled .action-method .hover-effect,
.behavior-action-container.disabled .behavior-function
{
    text-decoration: line-through;
    opacity: 0.4;
}
.behavior-action-container > div {
    display: inline-block;
}
.behavior-action-container > div.behavior-drop-highlight {
    display: block;
    opacity: 0.5;
}
.behavior-action-container .dropdown-click-area {
    font-size: 14px;
}
.behavior-action-container .element-picker .dropdown-click-area span.element-name {
    white-space: nowrap;
}
.actions-being-dragged .behavior-action-container .icon-container {
    display: none;
}
.behavior-action-container .icon-container {
    white-space: nowrap;
    position: absolute;
    left: 5px;
    top: 3px;
    user-select: none;
}
.icon-delete {
    color: var(--critic-strong);
}
.behavior-action-container .icon-container .icon-delete {
    display: none;
    opacity: 0.6;
}
.behavior-action-container .icon-container .icon-move {
    display: none;
    cursor: grab;
}
.behavior-action-container .icon-container .icon-check {
    display: none;
    color: var(--faint-strong-down);
    cursor: pointer;
}
.behavior-action-container:hover .icon-container .icon-delete {
    display: inline-block;
}
.behavior-action-container:hover .icon-container .icon-move {
    display: inline-block;
}
.behavior-action-container:hover .icon-container .icon-check {
    display: inline-block;
}
.behavior-action-container .set-argument-editor {
    display: inline-block;
}
.behavior-action-container .set-argument-editor .set-argument-wrapper {
    display: flex;
    align-items: center;
}
.behavior-action-container .set-argument-editor .set-argument-control {
    display: inherit;
    height: 15px;
}
.behavior-action-container .set-argument-editor .set-argument-options > span {
    display: inline-block;
    padding: 2px;
    font-size: 12px;
    opacity: 0.6;
    cursor: pointer;
}
.behavior-action-container .set-argument-editor .set-argument-options > span.set-instant {
    opacity: 0.3;
}
.behavior-action-container .set-argument-editor .set-argument-options > span:hover {
    opacity: 1.0;
}
.behavior-action-container .set-argument-editor .number-textfield-container {
    width: 50px;
    height: 21px;
}
.behavior-action-container .icon-container .icon-delete:hover {
    opacity: 1.0;
}
.behavior-action-drag-preview {
    font-size: 14px;
    display:none;
    position: fixed;
    background: var(--base-weak);
    padding: 2px 5px 2px 30px;
    max-width: 250px;
    white-space: nowrap;
    /* overflow: hidden; */
    border-radius: var(--control-border-radius);
    opacity: 0.6;
}

.behavior-action-drag-preview .icon-action-copy-by-mouse {
    position: absolute;
    left: 0px;
    top: 16px;
    color: var(--complement-strong);
}

.behavior-action-drag-preview .action-name-separator {
    margin-left: 6px;
    margin-right: 6px;
}
.behavior-action-drag-preview .icon-container {
    display: none;
}
.actions-being-dragged .behavior-action-drag-preview {
    display: inline-block;
}

.behavior-event-operations {
    visibility: hidden;
    margin-top: 6px;
}
.behavior-container:hover .behavior-event-operations {
    visibility: visible;
}

.behavior-action-container .action-method-arguments-expand {
    display: inline-block;
    opacity: 0.3;
    padding: 2px 4px;
    margin: 1px;
    cursor: pointer;
    font-size: 12px;
}
.behavior-action-container .action-method-arguments-expand:hover {
    margin: 0;
    opacity: 1;
    border: 1px solid var(--faint-weak-down);
    border-radius: var(--control-border-radius);
    background: var(--base-weak);
}
.behavior-action-container.dragged {
    opacity: 0;
    height: 0;
    overflow: hidden;
    margin: 0;
}

.behavior-goto-element {
    display: inline-block;
    user-select: none;
    cursor: pointer;
    opacity: 0.6;
}
.behavior-goto-element:hover {
    opacity: 1.0;
}

/************************** Advanced Behavior Editor ****************/
.advanced-behavior-editor .item-title {
    display: block;
    font-weight: bold;
    color: var(--base-strong-up);
    margin-top: 20px;
    padding-top: 10px;
    border-top: 2px solid var(--faint-weak-down);
}

.advanced-behavior-menu {
    margin-top: 10px;
}
.advanced-behavior-menu .element-picker .picked-element.picked-element-type-none {
    color: var(--base-strong-up);
    font-style: normal;
}
.advanced-behavior-menu .element-picker .dropdown-container .dropdown-click-area {
    padding: 5px 10px 5px 10px;
    background: var(--faint-weak);
    color: var(--base-strong-up);
    border: 1px solid var(--faint-strong);
    margin: 0;
    border-radius: var(--control-border-radius);
}
.advanced-behavior-menu .element-picker .dropdown-container .dropdown-click-area.hover-effect:hover {
    padding: 5px 10px 5px 10px;
    background: var(--faint-strong-up-2);
    color: var(--base-strong-up);
    border: 1px solid var(--faint-strong-up);
    margin: 0;
}

/***************** Element Picker ****************/
.element-picker {
    display: block;
    font-size: 14px;
}
.element-picker .picked-element.picked-element-type-item {
    color: var(--complement-strong);
}
.element-picker .picked-element.picked-element-type-item-group {
    color: var(--accent-strong);
}
.element-picker .picked-element.picked-element-type-none {
    color: var(--base-strong-up);
    font-style: italic;
}
.element-picker .picked-element.picked-element-type-error {
    color: var(--critic-strong);
    font-weight: bold;
}
.element-picker.disabled .dropdown-container .dropdown-click-area {
    background: var(--faint-weak-up);
}
.element-picker.disabled .picked-element {
    opacity: 0.5;
}
/**************** Context Menu *****************/
.context-menu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 998;
}
.context-menu ul {
    position: fixed;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--base-weak);
    box-shadow: 1px 1px 5px var(--shadow-color);
}
.context-menu > ul > li > ul {
    display: none;
    left: 100px;
    top: 0;
    z-index: 999;
}
.context-menu .context-menu-suboptions-icon {
    position: absolute;
    display: inline-block;
    right: 5px;
    width: 20px;
}

.context-menu ul li:hover ul {
    display: block;
}
.context-menu ul li {
    position: relative;
    padding: 4px 30px 4px 30px;
    color: var(--base-strong-up);
    cursor: pointer;
}
.context-menu-option-name {
    white-space: nowrap;
}
.context-menu ul li i {
    position: absolute;
    left: 4px;
}
.context-menu ul li:hover {
    background: var(--faint-strong-up);
}
.context-menu ul li i.context-menu-option-checkbox {
    position: absolute;
    right: 0;
    left: unset;
    width: 20px;
}

/***************** Connector Destination Proposal ************/
.connector-destination-proposal {
    position: fixed;
    padding: 5px;
    box-shadow: 2px 2px 10px var(--shadow-color);
    background: var(--base-weak);
    max-width: 500px;
    max-height: 350px;
    overflow: auto;
    z-index: 30;
}
.connector-destination-proposal .item-container:hover {
    background: var(--faint-strong-up);
}
.connector-destination-proposal .item-container svg {
    cursor: pointer;
}

/******************** Item Tooltip ***************/
.item-tooltip {
    position: fixed;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 2px 10px var(--shadow-color);
    user-select: text;
}
.item-tooltip .item-tooltip-header {
    position: relative;
}
.item-tooltip h3 {
    margin-top: 0;
}
.item-tooltip .item-tooltip-close {
    position: absolute;
    font-size: 20px;
    top: 0px;
    right: 8px;
    opacity: 0.4;
    cursor: pointer;
}
.item-tooltip .item-tooltip-close:hover {
    opacity: 1.0;
}

.item-tooltip .item-tooltip-body {
    overflow: auto;
    flex: 1;
}

@media (max-width: 900px) {
    .item-tooltip .item-tooltip-close {
        top: -8px;
        font-size: 35px;
        right: 5px;
    }
}

.item-tooltip.item-short-details-tooltip {
    font-size: 12px;
    max-width: 300px;
    max-height: 200px;
    padding: 5px;
    border-radius: 5px;
    z-index: 100;
}
.item-tooltip.item-short-details-tooltip .item-tooltip-body p:first-child {
    margin-top: 0;
}
.item-tooltip.item-short-details-tooltip .item-tooltip-body p:last-child {
    margin-bottom: 0;
}
.item-tooltip.item-short-details-tooltip .item-tooltip-links {
    list-style: none;
    margin: 0 0 5px 0;
    padding: 0;
}
.item-tooltip.item-short-details-tooltip .item-tooltip-links > li {
    display: flex;
    align-items: center;
}
.item-tooltip.item-short-details-tooltip .item-tooltip-links > li > .icon {
    display: block;
    min-width: 20px;
    max-width: 20px;
}
.item-tooltip.item-short-details-tooltip .item-tooltip-links > li a {
    flex: 1
}

/***************** Item Selector *********************/
.item-selector .item-selector-items {
    position: relative;
    overflow: scroll;
    background: var(--base-weak);
    border: 1px solid var(--faint-strong);
    padding: 2px;
    user-select: none;
}

.item-selector .item-selector-items .item-selector-drop-line {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 100%;
    height: 5px;
    border-top: 2px solid red;
}

.item-selector .item-row {
    white-space: nowrap;
}
.item-selector .item-row .templated-item {
    color: #943e92;
}
[data-theme="dark"] .item-selector .item-row .templated-item {
    color: #f16fef;
}
.item-selector .item-row .templated-item.templated-item-root {
    color: #3161a9;
}
[data-theme="dark"] .item-selector .item-row .templated-item.templated-item-root {
    color: #83b2f9;
}
.item-selector .item-row .item-level-spacing {
    display: inline-block;
    width: 20px;
    height: 10px;
}
.item-selector .item-row .item {
    position: relative;
    display: block;
    width: 100%;
    height: 20px;
}
.item-selector .item-row .item.candidate-drop::before {
    position: absolute;
    content: " ";
    font-size: 1px;
    bottom: -1px;
    left: 0;
    width: 100%;
    border-top: 2px solid var(--faint-strong-down);
}
.item-selector .item-row .item.candidate-drop.candidate-drop-above::before {
    bottom: unset;
    top: -1px;
}
.item-selector .item-row .item.candidate-drop.candidate-drop-above.candidate-drop-inside::before,
.item-selector .item-row .item.candidate-drop.candidate-drop-inside::before {
    top: unset;
    bottom: 0;
    width: 50px;
    left: 30px;
}
.item-selector .item-row .item.candidate-drop.candidate-drop-inside::after {
    position: absolute;
    content: " ";
    font-size: 1px;
    left: 20px;
    bottom: -6px;
    transform: rotate(30deg);
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--faint-strong-down);
}
.item-selector .item-row .item img.item-icon {
    max-width: 16px;
    max-height: 16px;
}
.item-selector .item-row .item .item-collapser {
    position: absolute;
    left: -15px;
    top: 0;
    cursor: pointer;
}
.item-selector .item-row .item .item-collapser:hover {
    color: var(--accent-strong);
}
.item-selector .item-row .item .item-name {
    font-size: 12px;
    display: flex;
    gap: 3px;
    align-items: center;
    min-width: 50px;
}
.item-selector .item-row .item.selected {
    background: var(--accent-weak);
}

.item-selector .item-row .item .item-right-panel {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 14px;
    white-space: nowrap;
}

.item-selector .item-row .item .item-right-panel .icon .icon-unlocked {
    opacity: 0.3;
}
.item-selector .item-row .item .item-right-panel .icon .icon-locked {
    opacity: 0.6;
}
.item-selector .item-row .item .item-right-panel .icon .icon-visible {
    opacity: 0.6;
}
.item-selector .item-row .item .item-right-panel .icon .icon-invisible {
    opacity: 0.3;
}

.item-selector .item-row .item input[type='text'] {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 1px;
    height: 20px;
    width: 250px;
    border: 1px solid var(--faint-strong);
}
.item-selector .item-selector-drag-preview {
   background: var(--faint-strong);
   opacity: 0.5;
   cursor: default;
   overflow: hidden;
   max-height: 300px;
}
.item-selector .item-selector-drag-preview .item-name {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
}
.item-selector .item-selector-drag-preview .item-name .item-icon {
    max-width: 16px;
    max-height: 16px;
}
.item-selector .item-selector-drag-preview .preview-0 {
    opacity: 1.0;
}
.item-selector .item-selector-drag-preview .preview-1 {
    opacity: 0.6;
}
.item-selector .item-selector-drag-preview .preview-2 {
    opacity: 0.3;
}

.item-selector .item-selector-resize-dragger {
    cursor: row-resize;
    height: 7px;
    background: var(--faint-weak-down);
    border-bottom: 1px solid var(--faint-weak);
    user-select: none;
}
.item-selector .item-selector-resize-dragger:hover {
    background: var(--faint-weak-down-2);
}

/************** Shape Styles Preview ***************/
ul.shape-styles-preview {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.shape-styles-preview > li {
    display: inline-block;
}
ul.shape-styles-preview > li > div.shape-style {
    cursor: pointer;
    position: relative;
}
ul.shape-styles-preview > li > div.shape-style:hover {
    background: var(--accent-strong);
}
ul.shape-styles-preview > li > div.shape-style .link-remove-style {
    position: absolute;
    right: 2px;
    top: 0px;
    color: var(--critic-strong);
    font-size: 20px;
}
ul.shape-styles-preview > li > div.shape-style .link-remove-style:hover {
    color: var(--critic-strong);
}

/*********************** System messages **************/
.system-message-panel {
    max-width: 500px;
    position: fixed;
    right: 0;
    top: 40px;
    padding: 10px;
    z-index: 1005;
}

.system-message-panel .message {
    margin: 20px;
    position: relative;
    display: block;
    padding: 10px 25px 10px 10px;
    color: var(--base-strong-up);
    background: var(--faint-weak);
    border: 1px solid var(--faint-strong);
    box-shadow: 1px 1px 10px var(--shadow-color);
    border-radius: 5px;
    transition: opacity 0.3s ease;
}
.system-message-panel  .message.message-error {
    background: var(--critic-weak-up);
    border: 1px solid var(--critic-weak-down);
    color: var(--critic-strong);
}
.system-message-panel  .message .close-button {
    position: absolute;
    top: 4px;
    right: 7px;
    cursor: pointer;
}
.system-message-enter {
    opacity: 0;
}
.system-message-leave-active {
    opacity: 0;
}




/*************** Title with edit button **********************/


.title-with-edit {
    display: flex;
    width: 100%;
}
.title-with-edit h1, .title-with-edit h2, .title-with-edit h3 {
    width: 100%;
}
.title-with-edit .edit-button {
    align-self: center;
    white-space: nowrap;
    display: inline-block;
    text-decoration: none;
    padding: 5px 20px 5px 10px;
    font-weight: bold;
    cursor: pointer;
    color: var(--accent-strong);
    background-color: var(--accent-weak-down);
    border-radius: var(--control-border-radius);
    transition: background-color 0.2s ease;
}
.title-with-edit .edit-button:hover {
    background-color: var(--accent-weak-up);
}


/******************** Shape Exporter Modal ********************/
.shape-exporter-modal-body {
    max-height: 500px;
    overflow: auto;
}
.shape-exporter-modal-body .shape-exporter-shapes table {
    margin-top: 10px;
    border-collapse: collapse;
    background: var(--base-weak);
    width: 100%;
}
.shape-exporter-modal-body .shape-exporter-shapes table th,
.shape-exporter-modal-body .shape-exporter-shapes table td {
    border: 1px solid var(--faint-strong-up);
    padding: 5px 10px;
}


/*********************** Effects Editor ***************************/
ul.effects-list {
    list-style: none;
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 0;
    border-radius: var(--middle-border-radius);
    user-select: none;
}
ul.effects-list > li {
    position: relative;
    border-bottom: 1px solid var(--faint-strong-up);
    background: var(--faint-weak-down);
}
ul.effects-list > li:first-child {
    border-bottom: 1px solid var(--faint-strong-up);
}
ul.effects-list > li .effect-name {
    padding: 8px;
    font-size: 13px;
    cursor: pointer;
}
ul.effects-list > li .effect-right-panel {
    position: absolute;
    right: 5px;
    top: 7px;
    display: none;
}
ul.effects-list > li:hover .effect-right-panel {
    display: block;
}
ul.effects-list > li .effect-right-panel .icon {
    cursor: pointer;
    opacity: 0.6;
    color: var(--base-strong-up-2);
}
ul.effects-list > li .effect-right-panel .icon:hover {
    cursor: pointer;
    opacity: 1.0;
}
ul.effects-list > li .effect-right-panel .icon-effect-delete {
    color: var(--critic-faint);
}

ul.effects-list > li.dragged-effect {
    background: none;
}

ul.effects-list > li.dragged-effect .effect-entry-container {
    opacity: 0.5;
}

ul.effects-list .dragged-effect .effect-right-panel {
    display: none;
}

ul.effects-list > li.effect-drop-destination.effect-drop-above {
    border-top: 4px solid var(--accent-faint);
}
ul.effects-list > li.effect-drop-destination.effect-drop-below {
    border-bottom: 4px solid var(--accent-faint);
}

.effect-drag-preview {
    position: fixed;
    white-space:nowrap;
    border: 1px solid var(--base-strong-up-2);
    background: var(--faint-weak);
    padding: 8px;
    font-size: 13px;
    font-style: italic;
    min-width: 150px;
}

/************************ Frame Animator *************************/
.frame-animator-panel {
    height: 100%;
    flex: 1;
}
.frame-animator-panel .frame-animator-light {
    padding: 5px;
}
.frame-animator-panel .frame-animator-light .frame-animator-title {
    font-weight: bold;
    margin-left: 10px;
}
.frame-animator-panel .frame-animator-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.frame-animator-panel .frame-animator-header {
    position: relative;
    display: flex;
    padding: 4px;
    font-size: 14px;
    background: var(--faint-weak-down);
    border-bottom: 1px solid var(--faint-strong-up-2);
}
.frame-animator-panel .frame-animator-title {
    width: 200px;
    white-space: nowrap;
    padding-left: 20px;
    overflow: hidden;
}
.frame-animator-panel .frame-animator-title h3 {
    display: inline;
    font-weight: bold;
    font-size: 14px;
}
.frame-animator-panel .frame-animator-controls {
    flex: 1;
    user-select: none;
    display: flex;
}
.frame-animator-panel .frame-animator-controls .frame-animator-player-buttons {
    display: flex;
    align-items: center;
    margin-right: 10px;
    height: 30px;
}
.frame-animator-panel .frame-animator-controls .frame-animator-frame-input {
    display: inline-block;
    min-width: 100px;
}
.frame-animator-panel .frame-animator-controls .btn {
    min-width: 22px;
    text-align: center;
}
.frame-animator-panel .frame-animator-right-panel {
    width: 60px;
    text-align: right;
    padding-right: 20px;
}
.frame-animator-panel .frame-animator-right-panel .icon {
    cursor: pointer;
}
.frame-animator-panel .frame-animator-canvas {
    position: relative;
    overflow: scroll;
    flex: 1;
    min-height: 50px;
}
table.frame-animator-matrix {
    border-collapse: collapse;
    position: absolute;
    user-select: none;
}
table.frame-animator-matrix th, table.frame-animator-matrix td {
    font-weight: normal;
    border: 1px solid var(--faint-weak-down);
}
table.frame-animator-matrix th:first-child, table.frame-animator-matrix td:first-child {
    min-width: 200px;
    max-width: 200px;
}
table.frame-animator-matrix th, table.frame-animator-matrix td.frame-animator-property {
    color: var(--base-strong-up);
}
table.frame-animator-matrix th {
    cursor: pointer;
    min-width: 40px;
    max-width: 40px;
    overflow: hidden;
    font-size: 12px;
}
table.frame-animator-matrix td.frame-animator-property {
    position: relative;
    font-size: 12px;
    overflow: hidden;
    max-height: 30px;
    padding: 4px 4px 4px 20px;
    text-align: left;
}
table.frame-animator-matrix tr.track-missing td.frame-animator-property,
table.frame-animator-matrix tr.track-missing td.frame {
    color: var(--critic-strong);
    text-decoration: line-through;
}
table.frame-animator-matrix td.frame-animator-property .frame-item-name {
    font-weight: bold;
}
table.frame-animator-matrix td.frame-animator-property .btn-small {
    padding: 3px 6px;
}
table.frame-animator-matrix td.frame-animator-property .frame-item-property {
    font-style: italic;
    white-space: nowrap;
}
table.frame-animator-matrix td.frame-animator-property-panel-buttons, table.frame-animator-matrix .frame-animator-buttons {
    text-align: left;
    padding: 3px 10px;
}
table.frame-animator-matrix td.frame-animator-property .frame-property-operations {
    position: absolute;
    display: none;
    top: 2px;
    right: 2px;
    text-align: right;
}
table.frame-animator-matrix td.frame-animator-property .frame-property-operations .toggle-button {
    padding: 3px;
    font-size: 11px;
    min-height: 14px;
    min-width: 14px;
}
table.frame-animator-matrix td.frame-animator-property:hover .frame-property-operations {
    display: block;
}
table.frame-animator-matrix td.frame-animator-property-function-header {
    border: none;
    background: none;
    padding: 0;
}
table.frame-animator-matrix td.frame-animator-property-function-header .function-animator-track-header {
    margin-top: 20px;
    padding: 6px 4px 6px 20px;
    background: var(--faint-weak-down);
}
table.frame-animator-matrix td.frame-animator-property.frame-animator-property-function-header .frame-property-operations {
    top: unset;
    bottom: 2px;
}
table.frame-animator-matrix th.current {
    background: var(--accent-strong);
    color: var(--base-weak);
}
table.frame-animator-matrix td.current {
    background: var(--faint-strong-up);
}
table.frame-animator-matrix tbody tr.selected-track td.current {
    background: var(--accent-faint);
}

table.frame-animator-matrix td.frame {
    text-align: center;
}
table.frame-animator-matrix td.frame .active-frame {
    font-size: 12px;
    opacity: 0.5;
}
table.frame-animator-matrix td.frame .empty-frame-number {
    font-size: 10px;
    opacity: 0.2;
}
table.frame-animator-matrix td.frame.drop-candidate {
    background: var(--critic-weak-down);
}
table.frame-animator-matrix thead tr.drop-above th,
table.frame-animator-matrix tbody tr.drop-above td {
    border-top: 1px solid var(--accent-strong);
}
table.frame-animator-matrix thead tr.drop-below th,
table.frame-animator-matrix tbody tr.drop-below td {
    border-bottom: 1px solid var(--accent-strong);
}

.frame-animator-panel .frame-drag-preview {
    position: fixed;
    display: none;
    width: 40px;
    height: 23px;
    white-space: nowrap;
    font-size: 12px;
    color: var(--base-strong-up);
    border: 1px solid var(--faint-weak-down);
    background: var(--faint-weak);
    text-align: center;
}
.frame-animator-panel .frame-drag-preview.is-dragging {
    display: block;
}

.frame-animator-panel .track-drag-preview {
    position: fixed;
    display: none;
    height: 23px;
    padding: 4px;
    white-space: nowrap;
    font-size: 12px;
    color: var(--base-strong-up);
    border: 1px solid var(--faint-weak-down);
    background: var(--faint-weak);
}
.frame-animator-panel .track-drag-preview.is-dragging {
    display: inline-block;
}


ul.toggle-menu {
    display: inline;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul.toggle-menu > li {
    display: inline;
}
ul.toggle-menu > li > span.toggle-menu-button {
    display: inline-block;
    white-space: nowrap;
    margin: 2px;
    padding: 5px 10px;
    border-radius: 5px;
    background: var(--faint-weak-down);
    color: var(--base-strong-up);
    cursor: pointer;
}
ul.toggle-menu > li > span.toggle-menu-button:hover {
    background: var(--faint-strong-up-2);
}
ul.toggle-menu > li > span.toggle-menu-button.selected {
    background: var(--accent-strong);
    color: var(--base-weak);
}
ul.toggle-menu > li > span.toggle-menu-button.selected:hover {
    background: var(--accent-faint);
}


.editor-top-hint-label {
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    text-align: center;
    background: var(--accent-strong-down);
    color: var(--accent-weak-up);
    font-weight: bold;
    padding: 5px;
    margin: 0 auto;
    opacity: 0.8;
}


.scheme-search-results {
    width: 100%;
}
.scheme-search-results .scheme-row {
    padding: 5px;
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid var(--faint-weak-down);
}
.scheme-search-results .scheme-row:last-child {
    border-bottom: none;
}
.scheme-search-results .scheme-row .scheme-icon {
    width: 50px;
}
.scheme-search-results .scheme-row .scheme-preview {
    max-width: 40px;
    max-height: 30px;
}
.scheme-search-results .scheme-row .scheme-title {
    flex: 1;
}
.scheme-search-results .scheme-row:hover {
    background: var(--base-weak);
}



/***************************** Stroke Control ***********************************/
.stroke-control {
    position: relative;
}
.stroke-control .stroke-control-toggle-button {
    display: inline-block;
    width: 18px;
    height: 18px;
    cursor: pointer;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAKElEQVQoU2M8c+bMfwY0oKenhy7EwDgUFP769QvDM5cuXcL0zBBQCADjtDObjg4SggAAAABJRU5ErkJggg==') repeat;
    border-radius: var(--control-border-radius);
}
.stroke-control .stroke-control-dropdown {
    position: fixed;
    padding: 5px;
    display: flex;
    background: var(--faint-weak);
    z-index: 100;
    box-shadow: 1px 1px 10px var(--shadow-color);
}
.stroke-control .stroke-control-dropdown .stroke-control-other-controls {
    display: flex;
    padding-left: 5px;
    flex-direction: column;
    height: 100%;
    gap: 5px;
}
.stroke-control .stroke-control-dropdown .stroke-control-other-controls .stroke-control-patterns {
    flex: 1;
    overflow-y: scroll;
    background: white;
    height: 100%;
}

.stroke-control .stroke-control-dropdown .stroke-control-other-controls .stroke-control-patterns .stroke-control-pattern-option {
    overflow: hidden;
    height: 30px;
}
[data-theme="dark"] .stroke-control .stroke-control-dropdown .stroke-control-other-controls .stroke-control-patterns .stroke-control-pattern-option {
    background: var(--faint-weak-down);
}
.stroke-control .stroke-control-dropdown .stroke-control-other-controls .stroke-control-patterns .stroke-control-pattern-option:hover ,
.stroke-control .stroke-control-dropdown .stroke-control-other-controls .stroke-control-patterns .stroke-control-pattern-option.selected {
    background: var(--accent-strong);
    color: var(--base-weak);
}
[data-theme="dark"] .stroke-control-pattern-option svg path {
    stroke: #eeeeee;
}

/***************************** Text Style Control ***********************************/
.text-style-control {
    position: relative;
}
.text-style-control .text-style-control-toggle-button {
    display: inline-block;
    width: 18px;
    height: 20px;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    padding-bottom: 2px;
}
.text-style-control .text-style-control-dropdown {
    position: fixed;
    padding: 5px;
    display: flex;
    background: var(--faint-weak);
    z-index: 100;
    box-shadow: 1px 1px 10px var(--shadow-color);
}
.text-style-control .text-style-control-dropdown .text-style-control-other-controls {
    display: flex;
    padding-left: 5px;
    flex-direction: column;
    height: 100%;
    max-width: 200px;
}

.text-style-control .text-style-control-dropdown .text-style-control-other-controls > div {
    margin-bottom: 5px;
}


/************************** Schemio Icons ***************************/
.schemio-icon {
    display: inline-block;
    min-width: 15px;
    min-height: 15px;
    background-repeat: no-repeat;
}
.schemio-icon-valign-top {
    background: url('/assets/images/icons/valign-top.svg') no-repeat;
}
.schemio-icon-valign-middle {
    background: url('/assets/images/icons/valign-middle.svg') no-repeat;
}
.schemio-icon-valign-bottom {
    background: url('/assets/images/icons/valign-bottom.svg') no-repeat;
}
[data-theme="dark"] .schemio-icon-valign-top,
[data-theme="dark"] .schemio-icon-valign-middle,
[data-theme="dark"] .schemio-icon-valign-bottom {
    filter: invert(0.9);
}



/************************** Schemio App ****************************/
.page-content {
    font-size: var(--page-content-font-size);
}

.footer {
    background: var(--base-strong-up);
    color: var(--base-weak);
    padding: 20px;
    padding-bottom: 20px;
}

.footer .footer-body {
    position: relative;
    max-width: 1100px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer ul li {
    padding: 5px;
}
.footer a, .footer .link {
    color: var(--base-weak);
    text-decoration: none;
}
.footer a:hover, .footer .link:hover {
    color: var(--base-weak);
}



/******************** Header *********************/
.header {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    background: var(--header-background);
    padding: 0;
    margin: 0;
    z-index: 100;
}
.header .header-body {
    display: flex;
    flex: 1;
}
.header .header-loader-container {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
}
.header .header-middle-section {
    flex: 1;
    display: inline-block;
    /* overflow: hidden; */
}
.header .header-middle-section > div {
    display: flex;
    align-items: center;
}
.header > a, .header > .link {
    margin-left: 10px;
    margin-right: 10px;
}
.header a, .header .link {
    color: var(--header-text-color);
    text-decoration: none;
}
.header a.header-caption {
    display: flex;
    align-items: center;
    position: relative;
    color: var(--header-text-color);
    font-weight: normal;
    font-size: 18px;
    text-decoration: none;
}
.header a.header-caption img {
    padding-left: 5px;
    padding-right: 5px;
}
.header .modal-container a, .header .modal-container .link {
    color: var(--accent-strong);
}

.header .scheme-title {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 40px;
    color: var(--base-weak);
}
.header .scheme-title .icon {
    padding-right: 5px;
}
.header .scheme-title span {
    display: inline-block;
    margin: 0;
    min-width: 40px;
}

.header .header-breadcrumbs {
    display: inline-block;
    list-style: none;
    margin: 0;
}
.header .header-breadcrumbs li {
    display: inline-block;
    margin-right: 10px;
    color: var(--base-weak);
}
.header .header-breadcrumbs li .breadcrumb-separator {
    margin-left: 10px;
}

.header .header-middle-section {
    display: flex;
    align-items: center;
}

.header ul.header-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
}
.header ul.header-menu > li {
    display: inline-block;
    height: 100%;
}
.header ul.header-menu > li > a,
.header ul.header-menu > li > span {
    display: inline-block;
    cursor: pointer;
    color: var(--base-weak);
    height: 100%;
    padding: 12px 20px 10px 20px;
}
.header ul.header-menu > li > a:hover {
    background: var(--base-strong-up);
}
.header .current-user {
    position: relative;
}
.header .current-user .user-profile-menu {
    position: absolute;
    right: 10px;
    display: none;
    min-width: 150px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--base-weak);
    border: 1px solid var(--faint-strong);
}
.header .current-user .user-profile-menu .link {
    color: var(--accent-strong);
    display: block;
    padding: 5px 10px;
    white-space: nowrap;
}
.header .current-user .user-profile-menu .link:hover {
    background: var(--accent-strong);
    color: var(--base-weak);
}
.header .current-user:hover .user-profile-menu {
    display: block;
}

.header .current-user .user-profile {
    display: flex;
    align-items: center;
    justify-content: center;
}
.header .current-user .user-profile .user-avatar {
    max-width: 32px;
    max-height: 32px;
    border-radius: 16px;
    margin-right: 10px;
}
.header .current-user .user-profile .user-name {
    color: var(--base-weak);
}

.scheme-editor-view {
    height: 100%;
    display: flex;
    flex-direction: column;
}

@media (max-width: 900px) {
    .scheme-editor-view .header {
        display: none;
    }
    .scheme-editor-view.diagram-404-view .header {
        display: block;
    }
    .scheme-editor-view.diagram-404-view .middle-content {
        padding-left: 40px;
    }
}


table.entries-table {
    margin-top: 20px;
    border-collapse: collapse;
    width: 100%;
}
table.entries-table thead tr {
    border-bottom: 2px solid var(--faint-weak-down);
}
table.entries-table thead th {
    text-align: left;
    font-weight: bold;
}
table.entries-table tbody .icon-column {
    width: 60px;
}
table.entries-table tbody .entry-link {
    display: block;
    padding: 4px;
    text-align: left;
    align-items: center;
    height: 40px;
    color: var(--accent-strong-down);
    text-decoration: none;
}
table.entries-table tbody .entry-link span {
    display: block;
    padding-top: 5px;
}
table.entries-table tbody .entry-link > .icon {
    width: 50px;
}
table.entries-table tbody .entry-link .scheme-preview {
    max-width: 50px;
    max-height: 40px;
}
table.entries-table tbody tr {
    border-bottom: 1px solid var(--faint-weak);
}
table.entries-table tbody tr:last-child {
    border-bottom: none;
}
table.entries-table tbody tr:hover {
    background: var(--faint-weak);
}
table.entries-table tbody td.operation-column {
    width: 1%;
    white-space: nowrap;
}
table.entries-table tbody td.time-column {
    width: 1%;
    white-space: nowrap;
    font-size: 14px;
}
@media (max-width: 900px) {
    table.entries-table tbody td.time-column,
    table.entries-table thead th.time-column {
        display: none;
    }
}




.entries-container {
    height: 400px;
    overflow: auto;
    border: 1px solid var(--faint-strong);
    background: var(--base-weak);
    padding: 5px;
}
.entries-container ul.entries {
    list-style: none;
    margin: 0;
    padding: 0;
}
.entries-container ul.entries li {
    position: relative;
}
.entries-container ul.entries li .entry {
    display: flex;
    width: 100%;
    align-items: center;
    height: 40px;
    width: 100%;
    padding: 2px 5px;
    color: var(--accent-strong-down);
    border-bottom: 1px solid var(--faint-weak);
    cursor: pointer;
    cursor: hand;
}
.entries-container ul.entries li .entry .entry-link-text {
    margin-left: 10px;
    flex: 1;
    white-space: nowrap;
}
.entries-container ul.entries li .entry:hover {
    background: var(--accent-weak);
}
.entries-container ul.entries li .entry:last-child {
    border-bottom: none;
}
.entries-container ul.entries li .entry.disabled {
    opacity: 0.3;
}
.entries-container ul.entries li .entry.disabled:hover {
    background: none;
    cursor: default;
}
.entries-container ul.entries li .entry-move-button {
    position: absolute;
    right: 5px;
    top: 5px;
    display: none;
}
.entries-container ul.entries li:hover .entry-move-button {
    display: inline-block;
}



ul.breadcrumbs {
    list-style: none;
    margin: 10px 0 10px 0;
    padding: 0;
}
ul.breadcrumbs li {
    display: inline-block;
}
ul.breadcrumbs li .breadcrumb-link {
    color: var(--accent-strong);
    cursor: pointer;
    cursor: hand;
}
ul.breadcrumbs li .breadcrumb-link:hover {
    color: var(--accent-faint);
}
ul.breadcrumbs li .breadcrumb-separator {
    color: var(--base-strong-up-2);
    margin-left: 5px;
    margin-right: 5px;
}

.web-view .middle-content {
    padding: 10px;

}
.fs-toolbar input[type='text'] {
    max-width: 250px;
    border-radius: 20px;
}
.fs-toolbar > * {
    margin-top: 10px;
}


.search-panel {
    display: flex;
    flex-direction: row;
    margin-top: 10px;
    margin-bottom: 10px;
    max-width: 600px;
}
.search-panel input.textfield {
    flex: 1;
    margin-right: 10px;
}

/************** Login Box ******************/

.login-modal-wrapper {
    display: table-cell;
    vertical-align: middle;
}
.login-modal {
    max-width: 400px;
    z-index: 1000;
    margin: 0 auto;
    vertical-align: middle;
    position: relative;
    width: 500px;
    background: var(--base-weak);
    box-shadow: 1px 1px 10px var(--shadow-color);
}
.login-modal .login-modal-body {
    padding: 20px 40px 60px 40px;
}

.login-modal h2 {
    text-align: center;
}
.login-modal .modal-close {
    position: absolute;
    top: 7px;
    right: 10px;
    cursor: pointer;
    color: var(--faint-strong);
}

.login-modal .error-message {
    display: block;
    font-style: italic;
    padding: 5px 10px;
    margin-top: 10px;
    color: var(--critic-strong);
    background: var(--critic-weak);
    border-radius: var(--control-border-radius);
}
.login-modal .ctrl-label {
    margin-top: 20px;
}
.login-modal input.textfield::placeholder {
    font-style: italic;
}
.login-modal input.textfield {
    display: block;
    padding: 10px 10px;
    margin-bottom: 20px;
}
.login-modal .btn-login {
    margin-top: 20px;
    display: block;
    text-align: center;
    font-size: 18px;
    padding: 10px;
}
.login-modal .login-alternative-caption {
    margin-top: 20px;
    color: var(--faint-strong-down);
    text-align: center;
}
.login-modal .btn-login-alt {
    position: relative;
    color: var(--base-strong-up);
    text-decoration: none;
    background: var(--faint-weak-up);
    border: 1px solid var(--faint-weak-down);
}
.login-modal .btn-login-alt:hover {
    text-decoration: none;
    background: var(--accent-weak-up);
}
.login-modal .btn-login-google-drive::after {
    display: block;
    position: absolute;
    left: 6px;
    top: 6px;
    width: 30px;
    height: 30px;
    background: url('https://ssl.gstatic.com/images/branding/product/1x/drive_2020q4_48dp.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    content: "";
}


/*********************** Home ******************************/
.home-page > h1,
.home-option > p,
.home-buttons {
    text-align: center;
}

.home-screenshot {
    max-width: 100%;
    display: block;
    text-decoration: none;
}

.home-screenshot img {
    max-width: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

/*********************** Loader Line ***********************/
.loader {
    overflow: hidden;
    width: 100%;
    height: 5px;
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    z-index: 100000;
}

.loader-element {
    height: 5px;
    width: 100%;
    background: var(--accent-faint-up);
}

.loader-element:before {
    content: '';
    display: block;
    background-color: var(--accent-strong);
    height: 5px;
    width: 0;
    animation: getWidth 3s ease-in infinite;
}

@keyframes getWidth {
    100% { width: 100%; }
}

/********************* Patch *************************/
.patch-menu-wrapper {
    position: absolute;
    top: 55px;
    display: flex;
    height: 1px;
    width: 100%;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.patch-menu-popup {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 8px;
    background: var(--faint-weak);
    border-radius: var(--middle-border-radius);
    box-shadow: 1px 1px 10px var(--shadow-color);
}

.patch-menu-popup,
.patch-menu-popup > div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.patch-menu-popup .toggle-button {
    padding: 5px;
}

.patch-additions {
    color: var(--complement-strong);
}

.patch-deletions {
    color: var(--critic-strong);
}

.patch-modifications {
    color: var(--accent-strong);
}

.patch-items-container {
    padding-left: 20px;
}

ul.patch-field-list {
    margin: 0;
    padding-left: 20px;
    padding-bottom: 10px;
    list-style: none;
}

.patch-expander {
    display: inline-block;
    width: 10px;
}


/************ Floating Helper Panel ****************/
.floating-helper-panel {
    position: absolute;
    display: flex;
    background: var(--faint-weak-up);
    box-shadow: 1px 1px 7px var(--shadow-color);
    border-radius: var(--control-border-radius);
}

.floating-helper-panel-enter-active,
.floating-helper-panel-leave-active {
    transition: opacity 0.2s ease;
}

.floating-helper-panel-enter-from,
.floating-helper-panel-leave-to {
    opacity: 0;
}
.floating-helper-panel-enter-to,
.floating-helper-panel-leave-from {
    opacity: 1.0;
}

.floating-helper-panel .floating-helper-panel-inner {
    position: relative;
    padding: 0 14px 0 0;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.floating-helper-panel .floating-helper-panel-inner .panel-close {
    font-size: 12px;
    display: none;
    right: 4px;
    top: 1px;
    color: var(--faint-strong-down);
}
.floating-helper-panel:hover .floating-helper-panel-inner .panel-close {
    display: inline-block;
}

.floating-helper-panel .item-name {
    display: inline-block;
    width: 130px;
    height: 25px;
    margin: 0;
}
.floating-helper-panel .item-name span {
    display: block;
    width: 130px;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 25px;
    font-size: 14px;
    cursor: pointer;
    color: var(--base-strong-up-2);
    padding: 6px 2px 2px 2px;
    margin: 0;
    white-space: nowrap;
    border: 1px solid var(--faint-weak);
    border-radius: var(--control-border-radius);
}
.floating-helper-panel .item-name span:hover {
    background: var(--base-weak);
}
.floating-helper-panel .item-name input[type='text'] {
    display: block;
    outline: none;
    width: 130px;
    height: 25px;
    padding: 6px 2px 2px 2px;
    margin: 0;
    font-size: 14px;
    border: 1px solid var(--faint-strong);
    border-radius: var(--control-border-radius);
}
.floating-helper-panel .toggle-button {
    padding: 3px 5px;
}

.floating-helper-panel .styles-popup {
    position: absolute;
    width: 420px;
    height: 150px;
    overflow: auto;
    padding: 5px;
    background: var(--faint-weak);
    box-shadow: 1px 1px 10px var(--shadow-color);
}

/**************** Color Matrix *********************/
.color-component-selector ul {
    list-style: none;
    margin: 0;
}
.color-component-selector ul li span {
    display: block;
    padding: 2px 4px;
}
.color-component-inputs {
    display: table;
    width: 100%;
}
.color-component-inputs .color-component-field {
    display: table-row;
}
.color-component-inputs .color-component-field > * {
    display: table-cell;
    padding: 2px;
}


/************** Range slider ********************/

.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    background: var(--faint-weak-down);
    outline: none;
    opacity: 0.7;
    border-radius: 2px;
    border: 1px solid var(--faint-strong);
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    background: var(--faint-weak-down);
    border: 1px solid var(--faint-strong);
    border-radius: 10px;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 15px;
    height: 15px;
    background: var(--faint-weak-down);
    border: 1px solid var(--faint-strong);
    border-radius: 10px;
    cursor: pointer;
}


/****************** Progress bar ******************/

.progress-bar-container {
    height: 10px;
    position: relative;
}
.progress-bar.progress-bar-hovering {
    position: absolute;
    width: 100%;
    margin: 0;
    height: 5px;
}
.progress-bar {
    display: block;
    height: 100%;
    animation: progress-animation 30s linear infinite;
    background: linear-gradient(90deg, var(--accent-strong-down) 0%, var(--accent-faint-up) 25%, var(--accent-faint-up) 50%, var(--accent-strong-down) 75%) 0% 0% / 60% 100%;
}
.progress-bar.progress-bar-default {
    margin-top: 10px;
    margin-bottom: 10px;
    height: 5px;
}

@keyframes progress-animation {
    0% {
        background-position: 0%
    }
    100% {
        background-position: 6000%
    }
}


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

.external-shapes {
    display: flex;
    flex-direction: row;
    height: 100%;
}
.external-shapes .external-shapes-list {
    flex: 1;
    height: 100%;
    overflow: auto;
    background: var(--faint-weak-down);
}
.external-shapes .external-shapes-list li {
    position: relative;
}
.external-shapes .external-shapes-list li .btn-add {
    position: absolute;
    top: 3px;
    right: 3px;
}
.external-shapes .external-shapes-list li .added {
    position: absolute;
    right: 10px;
    font-style: italic;
    font-size: 12px;
    color: var(--faint-strong-down);
}
.external-shapes .external-shapes-list li .preview {
    display: flex;
    align-items: center;
    justify-content: right;
    position: absolute;
    right: 2px;
    top: 2px;
    height: 30px;
    width: 180px;
    gap: 5px;
}
.external-shapes .external-shapes-list li .preview .preview-icon {
    height: 30px;
}
.external-shapes .external-shapes-list li .preview img {
    width: 100%;
    height: 100%;
}
.external-shapes .external-shapes-list .missing-extra-shapes {
    color: var(--faint-weak-down);
    font-style: italic;
}
.external-shapes .external-shape-preview {
    padding: 10px;
    height: 100%;
    flex: 1;
	display: flex;
    flex-direction: column;
}
.external-shapes .external-shape-preview .external-shape-content {
    height: 100%;
    overflow: auto;
}
.external-shapes .external-shape-preview .title {
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 10px;
}
.external-shapes .external-shape-preview .author {
    padding-bottom: 5px;
}
.external-shapes .external-shape-preview .preview {
    flex: 1;
}
.external-shapes .external-shape-preview .preview.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 100px);
}
.external-shapes .external-shape-preview .preview img.large {
    max-width: 90%;
    max-height: 100%;
    height: 300px;
}
.external-shapes .external-shape-preview .preview .preview-icon {
    display: flex;
    margin: 10px;
    flex-direction: column;
}
.external-shapes .external-shape-preview .preview .preview-icon .icon-container {
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}
.external-shapes .external-shape-preview .preview .preview-icon img {
    max-width: 100%;
    max-height: 100%;
}
.external-shapes .external-shape-preview .preview .preview-icon .name {
    height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    text-align: center;
}
.external-shapes .external-shapes-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.external-shapes .external-shapes-list ul li {
    padding: 7px 10px;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 1px solid var(--faint-weak);
}
.external-shapes .external-shapes-list ul li.selected {
    background: var(--faint-strong-up);
}
.external-shapes .external-shapes-list ul li:hover {
    background: var(--faint-strong-up-2);
}

/***************** Diagram picker **************/
.diagram-picker-wrapper {
    display: block;
}
.diagram-picker {
    display: flex;
    background: var(--base-weak);
    border: 1px solid var(--faint-weak-down);
    border-radius: var(--control-border-radius);
}
.diagram-picker:hover {
    border: 1px solid var(--faint-strong);
}
.diagram-picker.disabled:hover {
    border: 1px solid var(--faint-weak-down);
}
.diagram-picker > *{
    /* display: inline-block; */
    padding: 4px;
    cursor: pointer;
}
.diagram-picker .diagram-title {
    flex: 1;
    font-size: 14px;
    color: var(--base-strong-up-2);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.diagram-picker.disabled {
    background: var(--faint-weak-up);
}
.diagram-picker.disabled .diagram-title {
    color: var(--faint-strong);
}
.diagram-picker > .icon {
    color: var(--faint-strong-down);
}
.diagram-picker .diagram-title .diagram-placeholder {
    color: var(--faint-strong);
    font-style: italic;
}
.diagram-picker .diagram-picker-external-link {
    padding: 2px 5px;
    background: var(--accent-weak);
    color: var(--accent-strong);
    opacity: 0.3;
    border-radius: 0 var(--control-border-radius) var(--control-border-radius) 0;
}
.diagram-picker.specified .diagram-picker-external-link {
    display: none;
}
.diagram-picker.specified:hover .diagram-picker-external-link {
    display: inline-block;
}
.diagram-picker.disabled.specified:hover .diagram-picker-external-link {
    display: none;
}
.diagram-picker .diagram-picker-external-link:hover {
    opacity: 1;
}



.edit-box-controls-enter-active,
.edit-box-controls-leave-active {
    transition: opacity 0.2s ease;
}

.edit-box-controls-enter-from,
.edit-box-controls-leave-to {
    opacity: 0;
}
.edit-box-controls-enter-to,
.edit-box-controls-leave-from {
    opacity: 1.0;
}
.edit-box-outline {
    cursor: grab;
}


.row {
    display: flex;
}
.vertical {
    flex-direction: column;
    height: 100%;
}
.col-1 { flex: 1; }
.col-2 { flex: 2; }
.col-3 { flex: 3; }
.col-4 { flex: 4; }
.col-5 { flex: 5; }
.col-6 { flex: 6; }
.col-7 { flex: 7; }
.col-8 { flex: 8; }
.col-9 { flex: 9; }
.col-10 { flex: 10; }
.col-11 { flex: 11; }
.col-12 { flex: 12; }
.padded {
    padding: 4px;
}
.row.centered {
    align-items: center;
}
.row.gap {
    gap: 5px;
}


.mobile-debugger-log {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mobile-debugger-log > li {
    background: var(--base-weak);
    margin-bottom: 2px;
    font-size: 10px;
    font-family: 'Courier New', Courier, monospace;
    border-radius: 2px;
}


.template-export-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.template-export-container > div {
    flex: 1;
    width: 100%;
}
.template-export-container .preview {
    margin-top: 10px;
}
.template-export-container .preview img {
    width: 100%;
}
.template-export-container .template-export-code {
    display: flex;
    flex-direction: column;
}
.template-export-container textarea {
    flex: 1;
    height: 100%;
    width: 100%;
    font-size: 10px;
}

.auto-layout-rules-container .auto-layout-rule {
    display: flex;
    align-items: center;
}
input.condition-function-send-event {
    font-size: 16px;
    padding: 4px;
    border: 1px solid var(--faint-strong-up-2);
    border-radius: 3px;
}


.item-details-marker-icon {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    align-content: center;
    border-radius: 3px;
    border: 1px solid var(--faint-strong-up);
    background: rgba(250, 250, 250, 0.3);
    color: var(--faint-strong-down);
    font-size: 11px;
}

ul.properties-button-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.properties-button-list > li {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
}
ul.properties-button-list > li > .btn {
    display: block;
    min-width: 200px;
}


/************** Template properties ********************/

.template-properties  ul.template-editor-panel-items-container {
    list-style: none;
    margin: 0;
    padding: 0;
}
.template-properties  ul.template-editor-panel-items-container > li {
    display: inline-block;
    margin: 5px;
    background: none;
    border: 1px solid rgba(0,0,0,0.0);
    border-radius: 5px;
    cursor: pointer;
}
.template-properties  ul.template-editor-panel-items-container > li:hover {
    border: 1px solid var(--faint-weak-down-2);
    background: var(--base-weak);
}

.template-properties  ul.template-editor-panel-items-container > li.toggled {
    border: 1px solid var(--faint-weak-down);
    background: var(--faint-weak-down);
}

.starter-proposal-modal-wrapper {
    position: absolute;
    background: rgba(0,0,0,0.4);
    display: flex;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    align-items: center;
    justify-content: center;
}

.starter-proposal-modal {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--faint-strong);
    background: var(--faint-weak);
    box-shadow: 1px 1px 10px var(--shadow-color);
    height: 100%;
    max-width: 800px;
    max-height: 700px;
}
.starter-proposal-body {
    flex: 1;
    overflow-y: auto;
    padding-right: 40px;
    padding-bottom: 40px;
}

.starter-proposal-header {
    display: flex;
    padding: 10px;
}
.starter-proposal-header .title {
    flex: 1;
    font-weight: bold;
    font-size: 16px;
}
.starter-proposal-header .link {
    color: var(--base-strong-up);
}

.starter-proposal-modal ul.starter-proposals {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

}
.starter-proposal-modal ul.starter-proposals > li {
    width: 300px;
    max-width: 100%;
    height: 200px;
}
.starter-proposal-modal ul.starter-proposals > li > .starter-proposal-container {
    position: relative;
    margin: 20px;
    padding: 20px;
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    gap: 10px;
    border: 1px solid rgba(0, 0, 0, 0.0);
    cursor: pointer;
}
.starter-proposal-modal ul.starter-proposals > li > .starter-proposal-container:hover {
    border: 1px solid var(--faint-weak-down-2);
}
.starter-proposal-modal ul.starter-proposals > li > .starter-proposal-container > .title {
    display: block;
    width: 100%;
    max-height: 25px;
    text-align: center;
    font-size: 16px;
}

.starter-proposal-modal ul.starter-proposals > li > .starter-proposal-container .icon {
    display: block;
    width: 100%;
    max-height: 90%;
    flex: 1;
}

.start-proposal-loading-overlay {
    position: absolute;
    position: absolute;
    background: rgba(100, 100, 100, 0.4);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.starter-proposal-modal ul.starter-proposals > li > .starter-proposal-container .empty-icon {
    display: block;
    width: 100%;
    background: var(--base-weak);
    border: 1px solid var(--faint-weak-down);
    border-radius: var(--middle-border-radius);
    flex: 1;
}




/************ Rule Guides **************/
.edit-box-rule-guide {
    cursor: pointer;
    opacity: 0.7;
}

.edit-box-rule-guide:hover {
    cursor: pointer;
    opacity: 1.0;
}


/********** Auto-layout editor ************/
.auto-layout-editor-plot {
    margin: 10px;
}
.auto-layout-editor-plot table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--faint-strong-down);
}
.auto-layout-editor-plot table td {
    height: 80px;
    background: var(--base-weak);
}
.auto-layout-editor-plot table .guide-container {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.auto-layout-editor-plot table .guide-container .guide {
    flex: 1;
}
.auto-layout-editor-plot table .guide-top .guide-container,
.auto-layout-editor-plot table .guide-bottom .guide-container {
    flex-direction: column;
}
.auto-layout-editor-plot table .guide-top .guide-container .guide,
.auto-layout-editor-plot table .guide-bottom .guide-container .guide {
    width: 3px;
}
.auto-layout-editor-plot table .guide-left .guide-container .guide,
.auto-layout-editor-plot table .guide-right .guide-container .guide {
    height: 3px;
}
.auto-layout-editor-plot table .guide-center .box {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    border: 2px solid var(--faint-strong-down-2);
    background: var(--faint-weak);
}

.auto-layout-editor-plot table .guide-center .box .label-width {
    position: absolute;
    right: 10px;
    top: 4px;
    cursor: pointer;
}
.auto-layout-editor-plot table .guide-center .box .label-height {
    position: absolute;
    left: 4px;
    bottom: 10px;
    cursor: pointer;
}
.auto-layout-editor-plot table .guide-center .box .label:hover {
    border: 1px solid var(--accent-strong);
    color: var(--accent-strong);
}
.auto-layout-editor-plot table .guide-center .box .label:hover .label-width-arrow,
.auto-layout-editor-plot table .guide-center .box .label:hover .label-height-arrow {
    color: var(--accent-strong);
}
.auto-layout-editor-plot table .guide-center .box .label-width-arrow {
    position: absolute;
    right: -9px;
    top: 3px;
    color: var(--accent-faint);
}
.auto-layout-editor-plot table .guide-center .box .label-height-arrow {
    position: absolute;
    bottom: -10px;
    left: calc(50% - 4px);
    color: var(--accent-faint);
}
.auto-layout-editor-plot table .guide-side.guide-type-removed .guide-container .guide {
    background: var(--accent-weak-up);
}
.auto-layout-editor-plot table .guide-side .guide-container .guide {
    background: var(--accent-faint-up);
}
.auto-layout-editor-plot table .label {
    display: inline-block;
    position: absolute;
    font-size: 10px;
    background: var(--base-weak);
    border: 1px solid var(--accent-faint);
}
.auto-layout-editor-plot table .label .guide-input {
    padding: 2px 4px;
    outline: none;
    min-width: 15px;
    display: inline-block;
    text-align: right;
}
.auto-layout-editor-plot table .label .dropdown-click-area .fa-xmark {
    opacity: 0.4;
}


.script-console-container {
    background: var(--base-weak);
    min-height: 200px;
    padding: 4px;
    user-select: text;
}
.script-console-entries {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
}
.script-console-entries > li {
    padding-top: 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--faint-weak);
    display: flex;
    gap: 5px;
}
.script-console-entries > li > .console-status-label {
    width: 60px;
    border-radius: 4px;
    padding: 4px 8px;
    color: var(--base-weak);
    text-align: center;
    font-size: 10px;
    max-height: 20px;
}
.script-console-entries > li.status-info > .console-status-label {
    background: var(--accent-strong);
}
.script-console-entries > li.status-error > .console-status-label {
    background: var(--critic-faint);
}
.script-console-entries > li > .console-message {
    white-space: pre;
}
.script-console-entries > li.status-error > .console-message {
    color: var(--critic-strong);
}


.navbar-functions-list {
    list-style: none;
    margin-top: 10px;
    padding: 0px;
}
.navbar-functions-list > li {
    position: relative;
    border: 1px solid rgba(0,0,0,0);
}
.navbar-functions-list > li:hover {
    background-color: var(--faint-weak-down);
    border: 1px solid var(--faint-strong);
}
.navbar-functions-list .func-name {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    font-family: monospace;
    padding: 4px 8px;
    cursor: pointer;
}
.navbar-functions-list .operations {
    position: absolute;
    display: none;
    top: 3px;
    right: 0;
    padding-left: 20px;
    padding-right: 5px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--faint-weak) 50%);
}
.navbar-functions-list >li:hover .operations {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--faint-weak-down) 50%);
}
.navbar-functions-list > li:hover .operations {
    display: inline-block;
}


table.function-arguments {
    width: 100%;
    padding-bottom: 10px;
}
table.function-arguments thead th {
    text-align: left;
}

table.function-arguments .function-argument-value > div {
    height: 100%;
    display: flex;
    align-items: center;
}

.function-import-container {
    background: var(--base-weak);
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
}
.function-import-container ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.function-import-container li {
    padding-top: 5px;
    padding-bottom: 5px;
}


/********* item classes ************/
.item-class-labels {
    margin-top: 5px;
    margin-bottom: 10px;
}
.item-class-labels .item-class-label {
    display: inline-block;
    margin-right: 10px;
    position: relative;
    background: var(--accent-faint);
    color: var(--base-weak);
    padding: 4px 10px;
    border-radius: 3px;
}
[data-theme="dark"] .item-class-labels .item-class-label {
    background: var(--accent-faint-up);
    color: var(--faint-weak);
}
.item-class-labels .item-class-label .item-class-delete {
    position: absolute;
    display: none;
    top: 0;
    right: 1px;
    font-size: 12px;
    cursor: pointer;
}
.item-class-labels .item-class-label:hover .item-class-delete {
    display: block;
}

.item-class-args-container {
    margin-top: 5px;
    margin-bottom: 10px;
}
.item-class-name-separator {
    position: relative;
    display: block;
    height: 1px;
    border-top: 1px solid var(--faint-strong-up-2);
    margin-top: 15px;
    margin-bottom: 20px;
}
[data-theme="dark"] .item-class-name-separator {
    border-top: 1px solid var(--faint-strong);
}
.item-class-name-separator .item-class-name {
    display: block;
    position: absolute;
    margin-inline: auto;
    width: fit-content;
    padding: 0 4px;
    top: -9px;
    left: 0;
    right: 0;
    height: 20px;
    font-size: 13px;
    background: var(--faint-weak);
    color: var(--base-strong);
    white-space: nowrap;
    overflow: hidden;
}


blockquote {
    position: relative;
    background: var(--faint-weak-up);
    color: var(--base-strong-up-2);
    margin: 1.5em 10px;
    padding: 0.5em 10px;
    quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
    position: absolute;
    left: 2px;
    top: -10px;
    color: var(--faint-strong);
    content: open-quote open-quote;
    font-size: 4em;
}
blockquote p {
    display: block;
    margin: 0 30px;
    padding: 0;
}


svg input.item-shape-textfield,
svg textarea.item-shape-textfield {
    color: unset;
}

svg .editor-custom-area {
    fill: rgba(155, 183, 255, 1);
    opacity: 0;
}
.state-dragItem.sub-state-idle svg .editor-custom-area:hover {
    opacity: 0.5;
}

.choice-options-editor .choice-options-preview {
    position: relative;
    border: 1px solid var(--faint-strong);
    background: var(--faint-weak-down);
    color: var(--base-strong);
    border-radius: var(--control-border-radius);
    padding: 5px 2px;
    overflow: hidden;
    display: block;
    width: 100%;
    cursor: pointer;
    max-width: 300px;
}
.choice-options-editor .choice-options-preview .choice-option-label {
    background: var(--faint-weak-up);
    padding: 4px 10px;
    border-radius: 20px;
    margin-right: 5px;
    font-size: 12px;
}
.choice-options-editor .choice-options-preview .choice-option-label.selected {
    background: var(--base-strong-up);
    color: var(--base-weak);
}
.choice-options-editor .choice-options-preview .edit-link {
    position: absolute;
    display: none;
    right: 5px;
    top: 7px;
    font-size: 12px;
}
.choice-options-editor .choice-options-preview:hover .edit-link {
    display: inline-block;
}
.choice-options-editor .choice-options-preview .placeholder {
    font-style: italic;
    font-size: 14px;
}
.choice-options-editor .choice-options-editor-list {
    list-style: none;
    padding: 0;
}
.choice-options-editor .choice-options-editor-list > li {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 5px;
}