@keyframes leftBorderBlink {
  from,
  to {
    border-left-color: var(--border-color);
  }
  50% {
    border-left-color: transparent;
  }
}
@keyframes rightBorderBlink {
  from,
  to {
    border-right-color: var(--border-color);
  }
  50% {
    border-right-color: transparent;
  }
}


body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.nt_tool--sepbar {
    background: gray;
}

.nt_tool--sepbar.v {
    width: 100%;
    height: 5px;
}

.nt_tool--sepbar.h {
    height: 100%;
    width: 5px;
}

#nt_tool {
    width: 100%;
    height: 100%;
    display: flex;
}

#nt_tool--dict__menu {
    height: 2.6ch;
}

#nt_tool--dict {
    width: 30%;
    height: 100%;
    overflow: auto;
}

#nt_tool--text {
    width: calc(70% - 5px);
    height: 100%;
}

#nt_tool .userinfo {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
}

#nt_tool .login, #nt_tool .logout {
    width: 3ch;
    height: 100%;
}

#nt_tool .login::before {
    content: '⇛';
    position: relative;
    right: -1px;
}
#nt_tool .login::after {
    content: '▯';
    position: relative;
    right: 10px;
}

#nt_tool .logout::before {
    content: '▯';
    position: relative;
    right: 0;
}
#nt_tool .logout::after {
    content: '⇛';
    position: relative;
    right: 10px;
}

.nt_logger .inner {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    color: white;
}

.nt_logger label {
    width: 100%;
}

.nt_logger input {
    color: inherit;
    background: inherit;
    width: -webkit-fill-available;
    width: -moz-available;
    border: 1px solid white;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.nt_window,.nt_contextmenu,.nt_dialog {
    background: black;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    padding: 2px 3px;
    border-radius: 3px;
    position: absolute;
    z-index: 100;
    border: 1px solid white;
    box-sizing: border-box;
}

.nt_window > .header.draggable,
.nt_dialog > .header.draggable {
    cursor: grab;
}

.nt_window .header,
.nt_dialog .header {
    display: flex;
    color: white;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-bottom: .5ch;
    box-sizing: border-box;
}

.nt_window .button--close {
    background: red;
    width: 16px;
    height: 16px;
    border-radius: 2px;
    cursor: default;
}
.nt_window .button--close::before {
    content: "🞥";
    color: white;
    transform: rotate(45deg);
    display: block;
    top: -3px;
    left: 1px;
    position: relative;
}

.nt_contextmenu .inner {
    border-collapse: collapse;
    white-space: nowrap;
}

.nt_contextmenu .action {
    color: white;
    font-size: small;
    padding: 5px;
    cursor: context-menu;
}

.nt_contextmenu .action:hover {
    background: white;
    color: black;
}

.nt_contextmenu .action .icon {
    width: 2ch;
}

.nt_contextmenu .action .name {}

.nt_contextmenu .action .hotkeys {
    color: lightgray;
    font-size: smaller;
    vertical-align: bottom;
    padding-left: 2ch;
    text-align: end;
}

.nt_contextmenu .action .hotkeys:hover {
    color: black;
}

.nt_dialog {
    color: white;
    padding: 0 1.5ch 0.5ch 1.5ch;
}

.nt_dialog .header {
    height: 2ch;
}

.nt_dialog .actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-around;
    align-items: stretch;
    margin-top: 1ch;
    margin-bottom: 0.5ch;
}

.nt_dialog .actions > button {
    padding: 4px;
    margin: 0;
    font-size: 13px;
    border: none;
    box-sizing: border-box;
    border-radius: 2px;
}
.nt_dialog .actions > button:hover {
    opacity: 0.9;
}
.nt_dialog .nt_dialog__button--cancel {
    background: red;
    color: white;
}

@keyframes pulse {
    50% {
        transform: scale(2);
    }
}

@keyframes fade {
    100% {
        opacity: 0;
    }
}

@keyframes fadeToBottomRight {
    100% {
        opacity: 0;
        top: 55%;
        left: 55%;
    }
    75% {
        opacity: 1;
        top: 50%;
        left: 50%;
    }
}


.nt_popup {
    position: fixed;
    z-index: 100;
    margin: auto;
    color: red;
    font-weight: bold;
    opacity: 1;
    /*background: transparent;*/
    background: white;
    animation: pulse 25s linear infinite, fadeToBottomRight 1s linear 1 forwards;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    font-size: small;
}

/* NTRTEditor css begin */
.nt_rteditor > .inner {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid white;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
}

.nt_rteditor > .inner > textarea,.nt_rteditor > .inner > input,.nt_rteditor > .inner > .viewer {
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: monospace;
    box-sizing: border-box;
    border: none;
    white-space: break-spaces;
    font-size: 15px;
    padding: 3px;
    overflow-y: auto;
}
.nt_rteditor > .inner > textarea,.nt_rteditor > .inner > input {
    background: transparent;
    color: transparent;
    caret-color: red;
}
.nt_rteditor > .inner > textarea:focus-visible,.nt_rteditor > .inner > input:focus-visible {
    outline: none;
}

.nt_rteditor > .inner > textarea::selection,.nt_rteditor > .inner > input::selection {
    background: blue;
}

.nt_rteditor > .inner > .viewer {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    color: white;
}

.nt_rteditor .button-style,.dict_entry__window--translation_change .button-style {
    width: 3ch;
    height: 3ch;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.nt_rteditor .button-style.h1,.dict_entry__window--translation_change .button-style.h1 {
    box-shadow: inset 0 0 1px 1px black;
}


.button-style.mi::before {
    content: 'I';
    font-style: italic;
}
.button-style.mb::before {
    content: 'B';
    font-weight: bold;
}
.button-style.ma::before {
    content: '[.]';
}
.button-style.md::before {
    content: '{.}';
}
.button-style.mt::before {
    content: 'T';
    opacity: 0.5;
}

span[data-style-flag~="i"] {
  font-style: italic;

}
span[data-style-flag~="b"] {
  font-weight: bold;

}
span[data-style-flag~="t"] {
  display: none;

}
.nt_rteditor > .inner > .viewer span[data-style-flag~="t"],
.nt_string.is_edited  span[data-style-flag~="t"] {
    display: initial !important;
    color: #0000008c;
}

span[data-style-flag~="cn"] { /* capitalize by auto normalization */
  text-transform: uppercase;

}
span[data-style-flag~="c"] { /* capitalize by user input */
  text-transform: uppercase;

}

/* NTRTEditor css end */

.nt_expander {
    height: 100%;
    transition: transform 0.2s;
    transform: rotate(90deg);
}

.nt_expander.sub::before {
    content: "▲";
}
.nt_expander.tr::before {
    content: "▲";
    color: orange;
}

.nt_expander.opened {
    transform: rotate(180deg);

}

.nt_editor {
    height: 100%;
}

.nt_editor::before {
    content: "✎";
}

.nt_editor.active {
    background: #ffb8b8;
}

.nt_editor__menu {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: center;
}

.nt_editor--add::before {
    content: "➕";
}

.nt_editor--remove::before {
    content: "➖";
    font-weight: bold;
}

.nt_editor--permissions::before {
    content: '🗣';
    font-size: 16px;
}

.nt_editor--edit_quickrefs::before {
    content: '➦';
}

.nt_permissions_editor .inner {
    display: grid;
    grid-template-areas:
        "v e"
        "b b";
    grid-template-columns: .5fr .5fr;
    grid-template-rows: 0.9fr 0.1fr;
    align-content: center;
    justify-content: center;
    align-items: stretch;
    justify-items: center;
    color: white;
    resize: both;
    overflow-y: auto;
    width: 100%;
    height: 100%;
}

.nt_permissions_editor .inner .to_view, .nt_permissions_editor .inner .to_edit{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    width: 90%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.nt_permissions_editor .inner .to_view {
    grid-area: v;
}
.nt_permissions_editor .inner .to_edit {
    grid-area: e;
}

.nt_permissions_editor .inner button {
    grid-area: b;
    margin-top: 1ch;
}

.nt_permissions_editor textarea {
    color: inherit;
    background: inherit;
    resize: none;
    height: 100%;
    width: 100%;
}

@keyframes spin {
    100% {
        transform:rotate(360deg);
    }
}

.nt_feedback {
    height: 100%;
    min-width: 2ch;
    max-width: 2ch;
    position: relative;
    opacity: 0;
}

#nt_tool--feedback,.editing > .header > .nt_feedback,.editing > .translation > .nt_feedback,.sub > .nt_feedback,.translations > .nt_feedback {
    opacity: 1;
}


.nt_feedback[data-state=""]::before {
    content: '';
    /*content: '☰';*/
    color: transparent;
}

.nt_feedback[data-state="updating"] {
    animation: spin 2s linear infinite;
}

.nt_feedback[data-state="updating"]::before {
    content: "↻";
    color: blue;
}

.nt_feedback[data-state="success"] {
    animation: pulse 1s linear infinite;
}

#nt_tool--text__menu .nt_feedback[data-state="success"]{
    animation: none;
}

#nt_tool--text__menu .buttons {
    width: -webkit-fill-available;
    width: -moz-available;
}

.nt_feedback[data-state="success"]::before {
    content: "✓";
    color: green;
}

.nt_feedback[data-state="partial_success"]::before {
    content: "✓";
    color: orange;
}

.nt_feedback[data-state="changed"]::before,.nt_feedback[data-state="disconnected"]::before {
    content: "❢";
    color: orange;
}

.nt_feedback[data-state="error"]::before {
    content: "❌";
    color: red;
}

.nt_tooltip,.nt_feedback--tooltip {
    background: black;
    color: white;
    width: max-content;
    padding: 5px;
    border-radius: 5px;
    position: absolute;
    z-index: 120;
    border: 1px solid white;
}

.nt_feedback--tooltip .record .result_code {
    width: 1.5ch;
    display: inline-block;
}
.nt_feedback--tooltip .record .result_code[data-code="success"]::before {
    content: "✓";
}
.nt_feedback--tooltip .record .result_code[data-code="changed"]::before {
    content: "❢";
}
.nt_feedback--tooltip .record .result_code[data-code="error"]::before {
    content: "❌";
}
.nt_feedback--tooltip .record .result_code[data-code="updating"]::before {
    content: "↻";
}


/****************** NT STRING CSS BEGIN ******************/
:root {
    --nt-string-selection-background: lightblue;
}

.nt_string {
    min-width: 3ch;
    min-height: 2.7ch;
    white-space: break-spaces;
    flex-grow: 1;
    text-align: justify;
}

.nt_string:focus-visible {
    outline: none;
}

.nt_string.is_edited {
    background: #efefef;
}

.nt_string > * {
    /*transition: left .3s, opacity .3s, bottom .6s;*/
    font-family: monospace;
    opacity: 1;
    background: transparent;
    /*bottom: 0;*/
    /*animation: emerge .5s linear 1;*/
    width: 1ch;
    cursor: text;
    min-height: 2.333ch;
    font-size: larger;
    box-sizing: border-box;
    border-left: 1px solid transparent;
    margin-left: -1px;
    margin-right: 0px;
    border-right: 1px solid transparent;
}

.nt_string .f {
    background: red;
}

.nt_string .d {
    bottom: 4ch;
    opacity: 0;
}

.nt_string.is_edited .n {
    background: lightgreen;
    color: black;
}
.nt_string.is_edited .s.s.s.n {
    background: darkseagreen;
}


/* Table module css */
.nt_string--table__grid {
    justify-items: stretch;
    width: min-content;
    -webkit-user-select: none; /* Safari */
    user-select: none;
}
.nt_string--table__grid:focus-visible {
    outline: none;
}
.nt_string--table__grid > * {
    width: 100%;
    min-width: max-content;
}
.nt_string--table__grid > .index,
.nt_string--table__grid > .token {
    text-align: center;
    background: #ffb8b8;
}
.nt_string--table__grid > .index.ws,
.nt_string--table__grid > .token.ws {
    background: initial;
}
.nt_string--table__grid > .index.c,
.nt_string--table__grid > .token.c {
    background: #fff9c1;
}
.nt_string--table__grid > .index.t,
.nt_string--table__grid > .token.t {
    background: lightgray;
}
.nt_string--table__grid > .match.add--success {
    outline: 2px green solid;
}
.nt_string--table__grid > .match.add--change {
    outline: 2px orange solid;
}
.nt_string--table__grid > .match:invalid {
    background: inherit;
}
.nt_string--table__grid > .match{
    background: #b8e1f3;
}

/* Highlight module css */
.nt_string--highlight .token.h,
.nt_string--highlight .index.h {
    background: gray;
    color: white;
}
.nt_string--highlight .match:hover,
.nt_string--highlight .match.h,
.nt_string.nt_string--highlight > .c.h,
.nt_string.nt_string--highlight > .x.h {
    background: black;
    color: white;
}
.nt_string.nt_string--highlight > .i.h {
    background: gray;

}


/* Selection module css */
.nt_string.nt_string--selection {
    -webkit-user-select: none; /* Safari */
    user-select: none;
}

.nt_string.nt_string--selection:focus > span.s,
.nt_string.nt_string--selection.selection_freezed > span.s {
    background: var(--nt-string-selection-background);
}

.nt_string.nt_string--selection:focus > span.cr1,
.nt_string.nt_string--selection.selection_freezed > span.cr1 {
    --border-color: red;
    border-right-style: solid;
    border-right-width: 1px;
    z-index: 10;
    animation: rightBorderBlink 0.75s infinite/*, emerge .5s linear 1*/;
}

.nt_string.nt_string--selection:focus > span.cr2,
.nt_string.nt_string--selection.cr2:focus::before,
.nt_string.nt_string--selection.selection_freezed > span.cr2,
.nt_string.nt_string--selection.selection_freezed.cr2::before {
    --border-color: red;
    border-left-style: solid;
    border-left-width: 1px;
    animation: leftBorderBlink 0.75s infinite;
    left: 0;
    top: 0;
    z-index: 10;

    /*
    background:-webkit-linear-gradient(90deg, #ff0000 0, #ff0000 1px, #ffffff00 1px, #ffffff00 100%);
    background:-o-linear-gradient(90deg, #ff0000 0, #ff0000 1px, #ffffff00 1px, #ffffff00 100%);
    background:-moz-linear-gradient(90deg, #ff0000 0, #ff0000 1px, #ffffff00 1px, #ffffff00 100%);
    background:linear-gradient(90deg, #ff0000 0, #ff0000 1px, #ffffff00 1px, #ffffff00 100%);*/

}

/* Move module css */
.nt_string.nt_string--move {

}

.nt_string--move__drag_clone {
    position: absolute;
    z-index: 11;
    padding: 0px 3px 2px;
    transform: translateX(50%);
    margin-top: 0.4ch;
    background: var(--nt-string-selection-background);
}

.nt_string.nt_string--move.is_edited .s {
    cursor: grab;
}

.nt_string.nt_string--move.dragging {
    cursor: grabbing !important;
}

.nt_string.nt_string--move.dragging .s {
    cursor: grabbing !important;
}

.nt_string.nt_string--move.dragging .s.dr {
    opacity: 0.2;
}

.nt_string.nt_string--move > .h2 {
    --border-color: red;
    border-right: 1px dashed red;
    animation: rightBorderBlink 0.75s infinite/*, emerge .5s linear 1*/;
}

.nt_string.nt_string--move > .h1 {
    --border-color: red;
    border-left: 1px dashed red;
    animation: leftBorderBlink 0.75s infinite/*, emerge .5s linear 1*/;
}

/* Text module css */
:is(.nt_string,.nt_string--editor) > span:not(.d).x[data-scls="r"] {
    opacity: 0.7;
}
:is(.nt_string,.nt_string--editor) > span:not(.d).x[data-scls="r"]:has(+ span:not(.d):not([data-scls="r"]))::after,
:is(.nt_string,.nt_string--editor) > span:not(.d).x[data-scls="r"]:last-child::after {
    content: "}";
}
:is(.nt_string,.nt_string--editor) > span:not(.d):not([data-scls="r"]) + span:not(.d).x[data-scls="r"]::before,
:is(.nt_string,.nt_string--editor) > span:not(.d).x[data-scls="r"]:first-child::before{
    content: "{";
}

:is(.nt_string,.nt_string--editor) > span:not(.d).x[data-scls="a"]:has(+ span:not(.d):not([data-scls="a"]))::after,
:is(.nt_string,.nt_string--editor) > span:not(.d).x[data-scls="a"]:last-child::after {
    content: "]";
}
:is(.nt_string,.nt_string--editor) > span:not(.d):not([data-scls="a"]) + span:not(.d).x[data-scls="a"]::before,
:is(.nt_string,.nt_string--editor) > span:not(.d).x[data-scls="a"]:first-child::before{
    content: "[";
}

:is(.nt_string,.nt_string--editor) > span:not(.d).x[data-scls="r"] + span:not(.d).x[data-scls="a"]::before {
    content: "→["
}

/* Notes module css */
:is(.nt_string,.nt_string--editor) > .j > .counter {
    position: relative;
    bottom: 2ch;
    font-size: 8px;
    pointer-events: none;
}

/* Insertions module css */
:is(.nt_string,.nt_string--editor) > .i.bl::before {
    content: '[';
    font-style: normal;
    font-weight: normal;
}
:is(.nt_string,.nt_string--editor) > .i.br::after {
    content: ']';
    font-style: normal;
    font-weight: normal;
}
:is(.nt_string,.nt_string--editor) > .i.br.s::after {
    color: initial;

}




/* String Editor widget css */
/* to support any String Unit module css working in String Editor
   just supply ".nt_string--editor > " prefix as alternative selector for these css!
   or make them absolute, nt_string independent!
*/
.nt_string--editor {
    min-width: 10ch;
    min-height: 2.5ch;
    width: 30ch;
    height: 10ch;
    resize: both;
    overflow-y: auto;
    padding: 0.4ch;
    white-space: break-spaces;
    cursor: text;
    margin: 0.4ch;
    border: 1px solid white;
    caret-color: red;
    color: white;
}
.nt_string--editor:focus-within {
    outline: none;
}

.nt_string--editor > * {

}

.nt_string--editor__menu {
    font-family: monospace;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: stretch;
}

.nt_string--editor__menu > .nt_string--editor__button {
    padding: 0;
    margin: 0;
    width: 20px;
    height: 20px;
    min-width: 20px;
    max-width: 20px;
    min-height: 20px;
    max-height: 20px;
    display: inline-flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}

.nt_string--editor__menu > .nt_string--editor__button.inactive {
    display: none;
}

.nt_string--editor__menu > .nt_string--editor__button.undo::before {
    content: '↶';
    width: 100%;
    height: 100%;
    display: inline-flex;
    box-sizing: border-box;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    padding-top: 1px;
}
.nt_string--editor__menu > .nt_string--editor__button.redo::before {
    content: '↷';
    width: 100%;
    height: 100%;
    display: inline-flex;
    box-sizing: border-box;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    padding-top: 1px;
}
.nt_string--editor__menu > .nt_string--editor__button.undo.inactive,
.nt_string--editor__menu > .nt_string--editor__button.redo.inactive {
    display: inline-flex;
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
}

.nt_string--editor__menu > .nt_string--editor__button.mi::before {
    content: 'I';
    font-style: italic;
    width: 100%;
    height: 100%;
    display: inline-flex;
    box-sizing: border-box;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    padding-top: 1px;
    padding-right: 1px;
}
.nt_string--editor__menu > .nt_string--editor__button.mb::before {
    content: 'B';
    font-weight: bold;
    width: 100%;
    height: 100%;
    display: inline-flex;
    box-sizing: border-box;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    padding-top: 1px;
}
.nt_string--editor__menu > .nt_string--editor__button.ui::before {
    content: 'I';
    font-style: italic;
    width: 100%;
    height: 100%;
    display: inline-flex;
    box-sizing: border-box;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0px 0px 1px 1px black;
    padding-top: 1px;
    padding-right: 1px;
}
.nt_string--editor__menu > .nt_string--editor__button.ub::before {
    content: 'B';
    font-weight: bold;
    width: 100%;
    height: 100%;
    display: inline-flex;
    box-sizing: border-box;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0px 0px 1px 1px black;
    padding-top: 1px;
}

.nt_string--editor__menu > .nt_string--editor__button.ma::before {
    content: '[.]';
    width: 100%;
    height: 100%;
    display: inline-flex;
    box-sizing: border-box;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    padding-top: 1px;
}
.nt_string--editor__menu > .nt_string--editor__button.ua::before {
    content: '[.]';
    width: 100%;
    height: 100%;
    display: inline-flex;
    box-sizing: border-box;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0px 0px 1px 1px black;
}
.nt_string--editor__menu > .nt_string--editor__button.md::before {
    content: '{.}';
    width: 100%;
    height: 100%;
    display: inline-flex;
    box-sizing: border-box;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    padding-top: 1px;
}
.nt_string--editor__menu > .nt_string--editor__button.ud::before {
    content: '{.}';
    width: 100%;
    height: 100%;
    display: inline-flex;
    box-sizing: border-box;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0px 0px 1px 1px black;
}

.nt_string--editor__menu > .nt_string--editor__button.an::before {
    content: 'a*';
    width: 100%;
    height: 100%;
    display: inline-flex;
    box-sizing: border-box;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    padding-top: 1px;
}
.nt_string--editor__menu > .nt_string--editor__button.en::before {
    content: 'a*';
    width: 100%;
    height: 100%;
    display: inline-flex;
    box-sizing: border-box;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0px 0px 1px 1px black;
}


/****************** NT STRING CSS END ******************/


.nt_change_records--menu,.nt_editor--menu {
    position: absolute;
    background: black;
    color: white;
    padding: 0.5ch 1ch 1ch 1ch;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: flex-start;
}

.nt_change_records--menu .record,.nt_editor--menu .nt_menu--addunit .unit_type {
    padding: 0 2px;
    border-radius: 2px;
    width: 100%;
}
.nt_change_records--menu .record:hover,.nt_editor--menu .nt_menu--addunit .unit_type:hover {
    background: white;
    color: black;
}

#nt_tool--text {
    overflow: auto;
}

.nt_text_unit {
    margin-top: 0.7ch;
    width: 100%;
}

.nt_text_unit .header,.nt_dict .header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.nt_text_unit .data[contenteditable="true"] {
    outline: 1px solid blue;
    min-width: 3ch;
}

.nt_text_unit .data .char.h {
    background: black;
    color: white;
}


.nt_text_unit > .sub,.nt_text_unit > .translations {
    margin-left: 2.5ch;
}

.nt_text_unit > .sub > .content,.nt_text_unit > .translation > .content {
    display: grid;
    align-content: stretch;
    justify-content: start;
    align-items: stretch;
    justify-items: start;
}

#nt_tool--text__menu {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    height: 2.6ch;
}

/* TRANSLATION TABLE */
.nt_tr_data {
    margin-bottom: 2.5ch;
}

.nt_tr_data .grid {
    justify-items: stretch;
}

.nt_tr_data .translation {
    display: grid;
    grid-template-areas: 'tfb t' 'sfb s';
    grid-template-columns: 2ch 1fr;
}

.nt_tr_data .translation .table {
    grid-area: t;
    overflow: auto;
}

.nt_tr_data .translation .nt_feedback[data-scope="table"] {
    grid-area: tfb;
    height: fit-content;
}

.nt_tr_data .translation .nt_feedback[data-scope="string"] {
    grid-area: sfb;
    height: fit-content;
}

.nt_tr_data .translation .table:focus-within {
    outline: 1px solid black;
}

.nt_tr_data .grid:focus-visible {
    outline: none;
}

.nt_tr_data .grid > * {
    width: 100%;
    min-width: max-content;
}
.nt_tr_data .grid > .index,.nt_tr_data .grid > .token {
    text-align: center;
    background: #ffb8b8;
}
.nt_tr_data .grid > .index.c,.nt_tr_data .grid > .token.c {
    text-align: center;
    background: #fff9c1;
}
.nt_tr_data .grid > .index.t,.nt_tr_data .grid > .token.t {
    text-align: center;
    background: lightgray;
}

.nt_tr_data .grid > .token.h,.nt_tr_data .grid > .index.h {
    background: gray;
    color: white;
}

.nt_tr_data .grid > .match.add--success {
    outline: 2px green solid;
}
.nt_tr_data .grid > .match.add--change {
    outline: 2px orange solid;
}

.nt_tr_data .grid > .match:invalid {
    background: inherit;
}

.nt_tr_data .grid > .match:hover,.nt_tr_data .grid > .match.h, .nt_tr_data .string > .c.h {
    background: black;
    color: white;
}

.nt_tr_data .string > .i.h {
    background: gray;
}

.nt_tr_data .grid > .match{
    background: #b8e1f3;
}

@keyframes emerge {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.nt_tr_data .tstring {
    grid-area: s;
    margin-top: 1ch;
    -webkit-user-select: none; /* Safari */
    user-select: none; /* Standard syntax */
    cursor: text;
}

.nt_tr_data .string {
    grid-area: s;
    position: relative;
    /*min-height: 4.5ch;*/
    -webkit-user-select: none; /* Safari */
    user-select: none; /* Standard syntax */
    cursor: text;
    overflow-x: auto;
    overflow-y: hidden;
    margin-top: 1ch;
}

.nt_tr_data .string.editing {
    padding-bottom: 2.5ch;
}

.nt_tr_data .string:focus-within {
    outline: 1px solid blue;
}


.nt_tr_data .string > * {
    transition: left .3s, opacity .3s, bottom .6s;
    font-family: monospace;
    opacity: 1;
    background: transparent;
    bottom: 0;
    animation: emerge .5s linear 1;
    width: 1ch;
    /*height: 100%;*/
    min-height: 2.333ch;
    font-size: larger;
    box-sizing: border-box;
    border: 1px solid transparent;
}

.nt_tr_data .string.editing > * {
    position: absolute;
}

.nt_tr_data .string > .j > .counter {
    position: relative;
    bottom: 2ch;
    font-size: 8px;
    pointer-events: none;
}

.nt_tr_data .string .f {
    background: red;
}

.nt_tr_data .string .d {
    bottom: 4ch;
    opacity: 0;
}

.nt_tr_data .string .h2 {
    border-right: 1px dashed red;
    animation: rightBorderBlink 0.75s infinite, emerge .5s linear 1;
}
.nt_tr_data .string .h1 {
    border-left: 1px dashed red;
    animation: leftBorderBlink 0.75s infinite, emerge .5s linear 1;
}

/*
.nt_tr_data .string .h2 {
    transform: scale(1.5);
    top: -1.3ch;
    background: #000000a3 !important;
    color: white;
    width: 1.6ch;
    height: 2.992ch;
    z-index: 10;
}
.nt_tr_data .string.dragging .h2 {
    padding: 0 0.4ch 0 0px;
}

.nt_tr_data .string.dragging .h2::before {
    position: absolute;
    top: -1.22ch;
    right: -0.2ch;
    color: white;
    content: "⬎";
}*/

.nt_tr_data .string .s {
    background: lightgray;
    cursor: text;
}

.nt_tr_data .string.editing .s.s.s.n {
    background: darkseagreen;
}

.nt_tr_data .string.editing .s {
    cursor: grab;
}
.nt_tr_data .string:focus .s,.drag_clone {
    /*background: #3367d1 !important;*/
    background: #2ba1ff !important;
    /*color: white !important;*/
}

.nt_tr_data .string.dragging {
    cursor: grabbing !important;
}
.nt_tr_data .string.dragging .s {
    cursor: grabbing !important;
}

.nt_tr_data .string.dragging .s.dr {
    opacity: 0.2;
}

.nt_tr_data .string .s2.s2.s2 {
    background: lightgreen;
}

.nt_tr_data .string .i.bl::before {
    content: '[';
    left: -0.55ch;
    z-index: 11; /* this must be greater than .cr2,.cr1 z-index (10) */
    bottom: 10%;
    font-size: 1.5ch;
    font-style: normal;
    font-weight: normal;
}
.nt_tr_data .string .i.br::after {
    content: ']';
    left: .8ch;
    z-index: 11; /* this must be greater than .cr2,.cr1 z-index (10) */
    bottom: 10%;
    font-size: 1.5ch;
    font-style: normal;
    font-weight: normal;
}
.nt_tr_data .string:focus .i.br.s::after {
    color: initial;

}
.nt_tr_data .string.editing .i.bl::before,.nt_tr_data .string.editing .i.br::after {
    position: absolute;

}

.nt_tr_data.editing .string .n {
    background: lightgreen;
    color: black;
}


.nt_tr_data .string .cr1.cr1.cr1 {
    --border-color: black;
    border-right-style: solid;
    border-right-width: 1px;
    z-index: 10;
    animation: rightBorderBlink 0.75s infinite, emerge .5s linear 1;
}
.nt_tr_data .string:focus .cr1.cr1.cr1 {
    --border-color: red;
}

.nt_tr_data .string .cr2.cr2.cr2,.nt_tr_data .string.cr2::before {
    --border-color: black;
    border-left-style: solid;
    border-left-width: 1px;
    left: 0;
    top: 0;
    z-index: 10;
    animation: leftBorderBlink 0.75s infinite, emerge .5s linear 1;
}
.nt_tr_data .string:focus .cr2.cr2.cr2,.nt_tr_data .string.cr2:focus::before {
    --border-color: red;
}

.nt_tr_data .string.editing:focus .cr2.cr2.cr2,.nt_tr_data .string.editing.cr2:focus::before {
    position: absolute;
}

.nt_tr_data .string.editing .ws:hover {
    background: lightgray;
}

.nt_tr_data .string span[style~="left:0ch;"] {
    text-transform: capitalize;
}

.nt_tr_data .string span[data-tr-valid="-"] {
    background: red;
}

.nt_tr_data .string span[data-tr-name]:hover::before {
    position: absolute;
    top: -100%;
    left: 0;
    content: attr(data-tr-name);
    background: black;
    color: white;
    font-size: small;
    padding: 0.3ch;
    border-radius: 3px;
    opacity: 0;
    animation: emerge 0.5s linear 1 forwards;
    animation-delay: 0.5s;
}


.drag_clone {
    position: absolute;
    z-index: 11;
    padding: 0px 3px 2px;
    transform: translateX(50%);
    margin-top: 0.4ch;
}

/* NT INSERTION EDITOR WINDOW */
/*
.nt_insertion_editor {

}
.nt_insertion_editor .inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
}

.nt_insertion_editor .textarea {
    min-width: 30ch;
    min-height: 4ch;
    border: 1px solid white;
    margin: 3px 0px;
    resize: both;
    overflow: auto;
    color: white;
    padding: 2px;
    cursor: text;
    white-space: pre;
    background: inherit;
}
.nt_insertion_editor .textarea:focus {
    outline: none;
}
*/

.nt_variant_select .inner {
    color: white;
    margin: 5px 0;
}

.nt_variant_select .variant {
    padding: 0px 3px;
}

.nt_variant_select .variant:hover {
    color: black;
    background: white;
    cursor: auto;
}


.nt_transform_select .inner {
    color: white;
    max-height: 35ch;
    overflow-y: auto;
}

.nt_transform_select .inner > * {
    margin: 1ch 0;
}

.nt_transform_select table {
    border-collapse: collapse;
}

.nt_transform_select .header {
    text-align: center;
    padding-top: 15px;
    background-image: linear-gradient(180deg, #000000 0%, #000000 67%, #ffffff00 67%, #ffffff00 72%, #000000 72%, #000000 100%), repeating-linear-gradient(90deg, #ffffff00 0, #ffffff00 0.4ch, #ffffff .4ch, #ffffff 1ch);
}

.nt_transform_select .header span {
    background: black;
}


.nt_transform_select .variant:hover {
    background: white;
    color: black;
    cursor: context-menu;
}

/* DICTIONARY */
.dict__window--quickrefs__editor .inner {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: start;
}

.dict__window--quickrefs__editor .add_button,
.dict__window--quickrefs__editor .remove_button {
    background: transparent;
}

.dict__window--quickrefs__editor .add_button::before {
    content: "🞥";
    color: white;
    cursor: auto;
}
.dict__window--quickrefs__editor .remove_button::before {
    content: "⨯";
    color: white;
    cursor: auto;
}
.dict__window--quickrefs__editor .quickref {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
}

.dict__window--quickrefs .inner {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
}

.dict__window--quickrefs .inner > a {
    padding: 0.5ch;
    color: white;
    text-decoration: none;
}
.dict__window--quickrefs .inner > a:hover {
    background: white;
    color: black;
}

/* DICTIONARY ENTRY */
.dict_entry__window--translation_change {
    position: absolute;
}

.dict_entry__window--translation_change > .inner {
/*    display: grid;
    grid-template-areas:
        "hv hvs"
        "i v"
        "b b";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0.1fr 0.8fr 0.1fr;
    justify-content: space-around;
    justify-items: center;
    align-items: center;*/
    resize: both;
    overflow: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}
.dict_entry__window--translation_change > .inner > div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: 100%;
}
.dict_entry__window--translation_change > .inner > div > div {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    width: 46%;
    height: 100%;
    margin: 0 2%;
}
.dict_entry__window--translation_change .inner .header--values {
    /*grid-area: hv;*/
    color: white;
}
.dict_entry__window--translation_change .inner .header--variants {
    /*grid-area: hvs;*/
    color: white;
}


.dict_entry__window--translation_change .inner .initials {
    /*grid-area: i;*/
    width: 100%;
    flex-grow: 1;
}
.dict_entry__window--translation_change .inner .variants {
    /*grid-area: v;*/
    width: 100%;
    flex-grow: 1;
}

.dict_entry__window--translation_change textarea {
    width: 100%;
    height: 100%;
    resize: none;
}

.dict_entry__window--translation_change .value {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

.dict_entry__window--translation_change input {
    width: 100%;
}

.dict_entry__window--translation_change textarea,.dict_entry__window--translation_change input {
    background: black;
    color: white;
    cursor: text;
}

.dict_entry__window--translation_change .nt_translation_variants_editor {
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
}
.dict_entry__window--translation_change .nt_translation_variants_editor .inner {
    flex-grow: 1;
}

.dict_entry__window--translation_change button {
    grid-area: b;
}

.dict_entry__window--translation_change .remove_button::before {
    content: "⨯";
    color: white;
    cursor: auto;
}

.dict_entry__window--translation_change .add_button::before {
    content: "🞥";
    color: white;
    cursor: auto;
}


.dict_entry__window--translation_change button,.dict_entry__window--token_change button,.nt_insertion_editor button,.nt_variant_select button,.nt_permissions_editor button,.nt_logger button {
    margin: 3px;
    background: green;
    color: white;
    font-weight: bold;
    padding: 6px;
    border-radius: 6px;
}

.dict_entry__window--token_change .inner {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    color: white;
}

.dict_entry__window--token_change input {
    color: inherit;
    background: black;
    border: 1px solid white;
}