@font-face
{
    font-family: 'Share Tech';
    src: url('fonts/ShareTech.woff2') format('woff2');
}

@font-face
{
    font-family: 'Share Tech Mono';
    src: url('fonts/ShareTechMono.woff2') format('woff2');
}

@font-face
{
    font-family: 'Material Symbols';
    src: url('fonts/MaterialSymbolsSharp.woff2') format('woff2');
}

@font-face
{
    font-family: 'Roboto';
    src: url('fonts/Roboto-Regular.woff2') format('woff2');
}

@font-face
{
    font-family: 'Roboto Condensed';
    src: url('fonts/RobotoCondensed-Regular.woff2') format('woff2');
}

@font-face
{
    font-family: 'Roboto Mono';
    src: url('fonts/Roboto-Mono-regular.woff2') format('woff2');
}

@font-face
{
    font-family: 'Fira Code';
    src: url('fonts/FiraCode-Regular.woff2') format('woff2');
}

@font-face
{
    font-family: 'Cascadia Code';
    src: url('fonts/CascadiaCode.woff2') format('woff2');
}

@font-face
{
    font-family: 'JetBrains Mono';
    src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2');
}

@font-face
{
    font-family: 'IBM Plex Condensed';
    src: url('fonts/IBMPlexSansCondensed-Regular.woff2') format('woff2');
}

@font-face
{
    font-family: 'Asap Condensed';
    src: url('fonts/AsapCondensed-Regular.woff') format('woff2');
}

@font-face
{
    font-family: 'Titillium Web';
    src: url('fonts/titillium-web-v6-latin-regular.woff2') format('woff2');
}

@font-face
{
    font-family: 'Abel Regular';
    src: url('fonts/Abel-Regular.woff2') format('woff2');
}

::placeholder
{
    color: var(--disabled-text-color);
    text-transform: none;
}

::selection
{
    background-color: var(--accent-tint);
}

::-webkit-scrollbar
{
    background-color: var(--card-color);
    width: 1em;
    height: 1em;
}

::-webkit-scrollbar-thumb
{
    background-color: rgba(var(--line-RGB), 0.2);
}

::-webkit-scrollbar-thumb:hover
{
    background-color: rgba(var(--line-RGB), 0.3);
}

::-webkit-scrollbar-corner
{
    background-color: var(--card-color);
}

*:focus
{
    outline: none;
}

:root
{
    color-scheme: dark;

    --theme-hue: 186;
    --theme-saturation: 5%;
    --line-RGB: 255, 255, 255;

    --yellow-RGB: 175, 155, 0; /* #AF9B00 */
    --yellow-shade: rgba(var(--yellow-RGB), 0.1);
    --yellow-tint: rgba(var(--yellow-RGB), 0.5);
    --yellow-text-color: rgba(var(--yellow-RGB), 0.75);
    --yellow-solid-color: rgb(var(--yellow-RGB));

    --orange-RGB: 211, 111, 11; /* #D36F0B */
    --orange-shade: rgba(var(--orange-RGB), 0.1);
    --orange-tint: rgba(var(--orange-RGB), 0.5);
    --orange-text-color: rgba(var(--orange-RGB), 0.75);
    --orange-solid-color: rgb(var(--orange-RGB));

    --red-RGB: 255, 55, 55; /* #FF3737 */
    --red-shade: rgba(var(--red-RGB), 0.1);
    --red-tint: rgba(var(--red-RGB), 0.5);
    --red-text-color: rgba(var(--red-RGB), 0.75);
    --red-solid-color: rgb(var(--red-RGB));

    --pink-RGB: 211, 55, 155; /* #D3379B */
    --pink-shade: rgba(var(--pink-RGB), 0.1);
    --pink-tint: rgba(var(--pink-RGB), 0.5);
    --pink-text-color: rgba(var(--pink-RGB), 0.75);
    --pink-solid-color: rgb(var(--pink-RGB));

    --purple-RGB: 144, 111, 255; /* #906FFF */
    --purple-shade: rgba(var(--purple-RGB), 0.1);
    --purple-tint: rgba(var(--purple-RGB), 0.5);
    --purple-text-color: rgba(var(--purple-RGB), 0.75);
    --purple-solid-color: rgb(var(--purple-RGB));

    --blue-RGB: 25, 111, 255; /* #196FFF */
    --blue-shade: rgba(var(--blue-RGB), 0.1);
    --blue-tint: rgba(var(--blue-RGB), 0.5);
    --blue-text-color: rgba(var(--blue-RGB), 0.75);
    --blue-solid-color: rgb(var(--blue-RGB));

    --teal-RGB: 25, 144, 144; /* #199090 */
    --teal-shade: rgba(var(--teal-RGB), 0.1);
    --teal-tint: rgba(var(--teal-RGB), 0.5);
    --teal-text-color: rgba(var(--teal-RGB), 0.75);
    --teal-solid-color: rgb(var(--teal-RGB));

    --green-RGB: 25, 155, 25; /* #199B19 */
    --green-shade: rgba(var(--green-RGB), 0.1);
    --green-tint: rgba(var(--green-RGB), 0.5);
    --green-text-color: rgba(var(--green-RGB), 0.75);
    --green-solid-color: rgb(var(--green-RGB));

    --background-color: hsl(var(--theme-hue), var(--theme-saturation), 12%);
    --menu-color: hsl(var(--theme-hue), var(--theme-saturation), 16%);
    --card-color: hsl(var(--theme-hue), var(--theme-saturation), 20%);

    --foreground-HSL: var(--theme-hue), var(--theme-saturation), 99%;
    --background-HSL: var(--theme-hue), var(--theme-saturation), 1%;
    --accent-HSL: var(--theme-hue), 100%, 80%;
    --line-HSL: var(--theme-hue), var(--theme-saturation), 99%;

    --accent-RGB: ;
    --accent-shade: hsla(var(--accent-HSL), 0.1);
    --accent-tint: hsla(var(--accent-HSL), 0.35);
    --accent-text-color: hsla(var(--accent-HSL), 0.75);
    --accent-solid-color: hsl(var(--accent-HSL));
    --accent-text-shadow: none;
    --accent-border: calc(1em/12) solid var(--accent-tint);

    --foreground-shade: hsla(var(--foreground-HSL), 0.25);
    --button-shade: hsla(var(--foreground-HSL), 0.05);
    --hover-tint: hsla(var(--foreground-HSL), 0.1);
    --active-tint: hsla(var(--foreground-HSL), 0.1);

    --primary-text-color: hsla(var(--line-HSL), 0.75);
    --secondary-text-color: hsla(var(--line-HSL), 0.5);
    --disabled-text-color: hsla(var(--line-HSL), 0.25);
    --light-border: calc(1em/12) solid hsla(var(--line-HSL), 0.1);
    --medium-border: calc(1em/12) solid hsla(var(--line-HSL), 0.25);
    --strong-border: calc(1em/12) solid hsla(var(--line-HSL), 0.5);
    --button-border: none;

    --shadow-shade: hsla(var(--background-HSL), 0.5);
    --background-shade: hsla(var(--background-HSL), 0.25);
    --alternate-tint: hsla(var(--background-HSL), 0.125);
    --nesting-shade: var(--background-shade);
    --menu-shadow: 0 0 0.4em var(--shadow-shade);
    --card-shadow: 0 0 0.5em var(--shadow-shade);
    --card-backdrop-filter: none;

    /* nice, but does not work with dropdown card:
    --card-color: hsla(var(--theme-hue), 10%, 20%, 0.1);
    --card-backdrop-filter: blur(1em);
    --menu-color: hsla(var(--theme-hue), 10%, 15%, 0.5);*/

    color: var(--primary-text-color);
    background-color: var(--background-color);

    letter-spacing: 0.1em;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: normal;
    font-variant-ligatures: no-common-ligatures;
    font-size: 12px;

    --led-outer-shade: hsla(var(--background-HSL), 0.25);
    --led-inner-shade: hsla(var(--foreground-HSL), 0.25);

    /*
    --background-color: #1E1E1E; hsla(0, 0%, 12%, 1)
    --menu-color: #282828; hsla(0, 0%, 16%, 1)
    --card-color: #333333; hsla(0, 0%, 20%, 1)
    --accent-RGB: 144, 244, 255; hsla(186, 100%, 78%, 1)
    */
}

.Roboto_Mono
{
    font-family: "Roboto Mono", monospace;
    letter-spacing: normal;
}

.Roboto_Condensed
{
    font-family: "Roboto Condensed", sans-serif;
    letter-spacing: 0.1em;
}

.Share_Tech
{
    font-family: "Share Tech", sans-serif;
    letter-spacing: normal;
}

.Share_Tech_Mono
{
    font-family: "Share Tech Mono", monospace;
    letter-spacing: normal;
}

.JetBrains_Mono
{
    font-family: "JetBrains Mono", monospace;
    letter-spacing: normal;
}

.IBM_Plex_Condensed
{
    font-family: "IBM Plex Condensed", sans-serif;
    letter-spacing: 0.05em;
}

.Abel_Regular
{
    font-family: "Abel Regular", sans-serif;
    letter-spacing: 0.1em;
}

html[data-theme="light"]
{
    color-scheme: light;

    --line-RGB: 0, 0, 0;

    --background-color: hsl(var(--theme-hue), var(--theme-saturation), 80%);
    --menu-color: hsl(var(--theme-hue), var(--theme-saturation), 90%);
    --card-color: hsl(var(--theme-hue), var(--theme-saturation), 90%);

    --foreground-HSL: var(--theme-hue), var(--theme-saturation), 99%;
    --background-HSL: var(--theme-hue), var(--theme-saturation), 1%;
    --accent-HSL: var(--theme-hue), 40%, 40%;
    --line-HSL: var(--theme-hue), var(--theme-saturation), 1%;

    --shadow-shade: hsla(var(--background-HSL), 0.3);
    --background-shade: hsla(var(--foreground-HSL), 0.75);
    --button-shade: hsla(var(--foreground-HSL), 0.5);

    --hover-tint: hsla(var(--background-HSL), 0.05);

    --nesting-shade: hsla(var(--foreground-HSL), 0.5);
    --alternate-tint: hsla(var(--foreground-HSL), 0.25);
    --active-tint: hsla(var(--foreground-HSL), 0.6);

    --primary-text-color: hsla(var(--line-HSL), 1);
    --secondary-text-color: hsla(var(--line-HSL), 0.75);
    --disabled-text-color: hsla(var(--line-HSL), 0.5);

    --led-outer-shade: hsla(var(--background-HSL), 0.1);
    --led-inner-shade: hsla(var(--background-HSL), 0.25);
}

html[data-theme="synthwave"]
{
    color-scheme: dark;

    --foreground-RGB: var(--line-RGB);
    --background-color: rgb(25, 20, 25);
    --menu-color: rgb(35, 25, 45);
    --card-color: rgb(45, 35, 55);
    --line-RGB: 255, 175, 0;
    --accent-RGB: 255, 111, 111;
    --primary-text-color: rgba(var(--line-RGB), 0.9);
    --accent-text-color: rgba(var(--accent-RGB), 1);
    --accent-text-shadow: 0 0 0.5em;
}

body, html
{
    margin: 0;
    padding: 0;
    background: var(--background-color);

    overflow: hidden;
    cursor: default;
    user-select: none;
}

pre
{
    line-height: normal;
    padding: 0;
    margin: 0;
}

h1
{
    font-size: 2rem;
    margin: 1.5rem 0 0.5rem 0;
}

ul
{
    list-style-type: none;
}

table, tr, th, td
{
    margin: 0;
    padding: 0;
    border: 0;
    border-spacing: 0;
    border-collapse: collapse;
}

input
{
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    height: calc(26em/12);
    padding: 0 calc(5em/12);
    border: none;
    box-sizing: border-box;
    background-color: var(--background-shade);
}

input:read-only
{
    color: var(--disabled-text-color);
}

input:disabled
{
    color: var(--disabled-text-color);
    /*background-color: var(--background-color);*/
    user-select: none;
}

json-input
{
    position: relative;
    /*display: block;*/
    height: calc(26em/12);
    color: var(--primary-text-color);
    background-color: var(--background-shade);
}

json-input:disabled
{
    color: var(--disabled-text-color);
    fill: var(--disabled-text-color);
}

/*input:autofill
{
    transition: background-color 9999s ease-in-out 0s !important;
}*/

textarea
{
    resize: none;
    padding: calc(6em/12) calc(5em/12); /* first line like input element */
    overflow: auto;
    border: none;
    white-space: pre;
    word-wrap: normal;
    box-sizing: border-box;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    color: var(--primary-text-color);
    background-color: var(--background-shade);
}

textarea:read-only
{
    color: var(--disabled-text-color);
}

drop-box > textarea
{
    background-color: transparent;
}

drop-box > textarea:read-only
{
    color: inherit;
}

button
{
    font: inherit;
    letter-spacing: inherit;
    height: calc(26em/12);
    margin: 0;
    padding: 0 calc(7em/12);
    color: var(--primary-text-color);
    background-color: transparent;
    border: none;
}

button:hover:enabled
{
    background-color: var(--hover-tint);
}

button:disabled
{
    color: var(--disabled-text-color);
}

/*#logoFrame
{
    display: flex;
    align-items: center;
}

#logoIcon
{
    width: 8vmin;
    height: 8vmin;
    margin: auto;
    background-image: url('images/mcIcon.svg');
    box-shadow: var(--card-shadow);
    backdrop-filter: var(--card-backdrop-filter);
    border-radius: 13%;
}*/

#loadingFrame
{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    width: 200px;

    display: flex;
    flex-direction: column;
    gap: 5px;

    transform: translateY(-50%) scale(2);
}

#loadingBar
{
    width: 100%;
    height: 0.25em;
    border-radius: 0.25em;
}

#sidebar
{
    display: flex;
    flex-direction: column;
    position: fixed;
    gap: 5px;
    padding: 5px;
    top: 0;
    bottom: 26px;
    left: 0;
    width: 36px;
    background: var(--menu-color);
    box-shadow: 0 -0.4em 0.4em var(--shadow-shade);
    box-sizing: border-box;
    /*border-top: var(--light-border);*/
    border-bottom: var(--light-border);
}

#toolbar button
{
    max-width: 26px;
    padding: 4px;
    font-size: inherit; /* for popup text size */
}

#sidebar:hover
{
    width: auto;
}

#toolbarFrame
{
    position: fixed;
    /*z-index: 1;*/
    right: 0;
    top: 0;
    /*width: 50%;*/
    height: 36px;
    /*padding: 0 5px;*/
    border-left: 36px solid transparent;
    border-top: 36px solid var(--menu-color);
    filter: drop-shadow(var(--menu-shadow));
    pointer-events: none !important;
}

#toolbar
{
    position: fixed;
    /*z-index: 1;*/
    right: 0;
    top: 0;
    /*width: 50%;*/
    height: 36px;

    /*width: 100%;
    height: 100%;*/
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 0 5px;
    /*margin-top: -36px;*/
}

.iconButton
{
    width: calc(26em/12);
    flex: 0 !important;
    padding: calc(4em/12);
}

.iconButtonFrame
{
    display: inherit;
    gap: inherit;
    align-items: inherit;
}

.iconButtonFrame:not(:has(icon-label))
{
    display: none;
}

.iconButtonFrame > icon-label
{
    padding: 4px;
    box-sizing: border-box;
    /* font-size: 13px; */
}

.iconButtonFrame > icon-label:hover
{
    background-color: var(--hover-tint);
}

#toolbar .iconButtonFrame > icon-label
{
    width: 26px;
    height: 26px;
}

#toolbarMoreSelect
{
    width: 26px;
    padding: 0;
}

#toolbarMoreSelect:not(:has(icon-label))
{
    display: none;
}

#toolbarMoreSelect > *
{
    /* small size for option children */
    font-size: 12px;
}

#toolbarMoreSelect:not(:hover)
{
    background-color: inherit;
}

#toolbarMoreSelect:hover
{
    background-color: var(--hover-tint);
}

#toolbarMoreSelect.open
{
    background-color: var(--hover-tint);
}

#toolbarMoreSelect > .separator:first-child, #toolbarMoreSelect > .separator:last-child
{
    display: none;
}

#footer
{
    position: fixed;
    width: 100%;
    height: calc(26em/12);
    line-height: calc(26em/12);
    padding: 0 calc(10em/12);
    bottom: 0;
    background: var(--menu-color);
    box-shadow: var(--menu-shadow);
    box-sizing: border-box;
}

#userDialogContentWrapper
{
    display: flex;
    flex-direction: column;
    width: 200px;
}

#cuiFrame
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: calc(26em/12);
    left: 0;
    background-color: var(--background-color);
}

#cuiFrame button:not(:hover)
{
    background-color: var(--button-shade);
}

#mapFrame
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: calc(26em/12);
    left: 36px;
    background-color: var(--background-color);
    /*box-shadow: var(--menu-shadow) inset;*/
}

#mapCanvas
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}

#mapLabels
{
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#mapSVG .alerted *
{
    animation: blinker 1s linear infinite;
}

#mapSVG .selected
{
    /* problem with filter: objects without opacity can't be revealed */
    /* filter: invert(13%) sepia(93%) saturate(7169%) hue-rotate(359deg) brightness(111%) contrast(120%) !important; */
    /* filter: drop-shadow(1px 1px 0px #3e68ff) drop-shadow(-1px 1px 0px #3e68ff) drop-shadow(1px -1px 0px #3e68ff) drop-shadow(-1px -1px 0px #3e68ff) !important; */

    stroke: var(--accent-text-color);
    animation: none;
}

#mapSVG .selected *
{
    fill: var(--accent-tint);
    stroke: var(--accent-text-color);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
    animation: none;
}

#waypointConnections .selected, #waypointConnections .highlighted
{
    stroke: var(--accent-tint);
    marker-start: url(#linkEndMarker);
    marker-mid: url(#linkMidMarker);
    marker-end: url(#linkEndMarker);

    /*stroke-dasharray: 0 20%;
    stroke-dashoffset: 20%;
    animation: dash 1s linear infinite;*/
}

/*#mapSVG .highlighted
{
    stroke-dasharray: 10% 20%;
    stroke-dashoffset: 20%;
    stroke-linecap: butt;

    stroke: var(--accent-text-color);
    animation: dash 1s linear infinite;
}*/

#selectBox
{
    position: absolute;
    border: var(--accent-border);
    background-color: var(--accent-shade);
    pointer-events: none;
    display: none;
}

#modalDialogBarrier
{
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
}

#textDialog > div
{
    padding: 5px;
    background: var(--background-shade);
    box-sizing: border-box;
}

#uploadDialogDropBox
{
    width: 300px;
}

popup-window, resource-editor
{
    /* applies before loading corresponding component */
    display: none;
}

resource-editor monaco-editor
{
    width: calc(800em/12);
    height: calc(600em/12);
}

.toolbarButton
{
    display: block;
    width: 26px;
    height: 26px;
    margin-top: 5px;
    padding: 4px;
}

.toolbarButton svg
{
    width: 100%;
    height: 100%;
}

.toolbarButton:first-child
{
    margin: 0;
}

.material-symbols
{
    font-family: 'Material Symbols';
    font-weight: 300;
    font-style: normal;
    font-size: 18px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

icon-label.red
{
    color: var(--red-text-color);
    font-variation-settings: 'FILL' 1;
}

.iconButtonSeparator
{
    height: 26px;
    border-left: var(--strong-border);
}

.selectableText
{
    user-select: text;
}

.input
{
    height: 26px;
    padding: 0 5px;
    background-color: var(--background-shade);
}

.hidden
{
    visibility: hidden;
    opacity: 0;
}

.flexRow
{
    display: flex;
    gap: 5px;
}

.flexRow > *
{
    flex: 1;
}

.flexRow input
{
    width: 100%;
}

.flexColumn
{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

popup-window button
{
    background-color: var(--button-shade);
    border: var(--button-border);
}

/*.flexRow > button, .flexColumn > button
{
    background-color: var(--button-shade);
    border: var(--button-border);
}*/

.flexColumn > .inputHeading
{
    margin: 4px 0 -2px 0;
}

.flexColumn > .separator
{
    margin: 4px 0 1px 0;
}

.inputHeading
{
    margin: 9px 0 3px 0;
    color: var(--secondary-text-color);
}

.inputHeading:first-child
{
    margin-top: 0;
}

page-view-page > .flexColumn > .inputHeading:first-child
{
    margin-top: 4px;
}

/*.separator
{
    margin: 9px 0 6px 0;
    color: var(--secondary-text-color);
    border-bottom: var(--medium-border);
}*/

.licenseDialogSeparator
{
    width: 50%;
    color: darkgray;
    border-bottom: 0.1em solid silver;
    text-transform: uppercase;
}

.dialogGlass
{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.3);
    visibility: hidden;
    opacity: 0;
}

.progressBarBackground
{
    position: relative;
    height: 6px;
    margin-bottom: 2px;
    background: silver;
    box-shadow: 0 0 2px black inset
}

.progressBarForeground
{
    position: absolute;
    opacity: 0;
    width: 0;
    height: 100%;
    background: lime;
    box-sizing: border-box;
    border: 1px solid forestgreen;
    box-shadow: 0 0 2px limegreen inset;
    transition: width 500ms, opacity 500ms;
}

.mapSVG
{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden; /* because of IE */
    touch-action: none;
}

.mapNoRotate
{
    pointer-events: none;
}

.mapDrawMarkers
{
    mix-blend-mode: difference;
}

.mapNodeMarker
{
    stroke-dasharray: 5%;
    stroke-dashoffset: 10%;
    animation: dash 1s linear infinite;
}

.mapTargetOutline
{
    stroke: black;
    fill: none;
}

.mapTargetBlinker
{
    opacity: 0;
    transition: fill 1s;
}

.mapTargetGhost
{
    opacity: 0.5;
}

.mapLabelTable
{
    margin: 0 0 0.25em 0;
    padding: 0;
    border: 0;
    border-spacing: 1px;
    border-collapse: separate;
}

.mapLabelTable th, .mapLabelTable td
{
    vertical-align: top;
    white-space: pre;
    padding: 0 3px;
}

.mapLabelTable td
{
    background-color: var(--background-shade);
}

.mapLabelTable tr:nth-child(even)
{
    background: var(--alternate-tint);
}

.mapLabelTable th
{
    text-align: left;
    text-transform: uppercase;
    font-weight: normal;
    color: var(--secondary-text-color);
    background-color: var(--alternate-tint);
}

.boxFrame
{
    position: absolute;
    padding: 0 5px 5px 5px;
    background: var(--card-color);
    box-shadow: var(--card-shadow);
    backdrop-filter: var(--card-backdrop-filter);
    visibility: hidden;
    opacity: 0;
    z-index: 0;
}

.boxTitleBar
{
    height: 28px;
    touch-action: none;
}

.boxTitleLabel
{
    max-width: 0;
    float: left;
    line-height: 23px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.boxTitleButton
{
    float: right;
    height: 22px; /* to align with boxTitleInput */
    line-height: 23px;
    padding: 0 7px;
    text-align: center; /* only for fixed width buttons */
}

.icon
{
    width: 100%;
    height: 100%;
    fill: var(--primary-text-color);
}

.icon.red
{
    fill: var(--red-text-color);
    /* filter: drop-shadow(0 0 10px var(--red-text-color)); */
}

.boxTitleButton.selected, .boxTitleButton.selected:hover
{
    background-color: var(--hover-tint);
}

.boxTitleButton svg
{
    width: 13px;
    height: 13px;
}

.boxTitleButton:hover
{
    background-color: var(--hover-tint);
    /*background-color: silver;
    transition: color 100ms, border 100ms, background-color 100ms;*/
}

.boxTitleInput
{
    float: right;
    width: 100px;
    height: 23px;
    /*border-top: none;
    border-right: none;
    border-left: 1px solid silver;
    border-bottom: 1px solid silver;*/
}

.boxIconButton
{
    width: 23px;
    padding: 0;
    background-repeat: no-repeat;
    background-origin: content-box;
    background-size: 13px;
    background-position: center;
}

.boxCloseButton
{
    width: 22px;
    font-size: 28px;
    padding: 0;
    /*border-right: 1px solid silver;*/
    overflow: hidden;
}

.boxCloseButton:hover
{
    /*color: white;*/
    /*border-color: red;*/
    /*background-color: red;*/
    /*color: black;
    background-color: #CF6679;*/
    background-color: var(--red-tint);
}

.boxSubmitButton:hover
{
    /*color: white;
    border-color: green;
    background-color: green;*/
    /*color: var(--accent-text-color)*/
}

.boxOptionButton
{
    color: white;
    border-color: dimgray;
    background-color: dimgray;
}

.boxOptionButton:hover
{
    background-color: var(--hover-tint);
}

.tableHeader
{
    border-left: var(--light-border);
}

.tableHeaderItem
{
    border-top: var(--light-border);
    border-right: var(--light-border);
    padding: 3px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* for different language fonts */
    height: 14px;
    line-height: 14px;
    vertical-align: middle;
}

.tableHeaderItem svg
{
    width: 13px;
    height: 13px;
}

.tableHeaderItem:hover
{
    background-color: var(--hover-tint);
    /*background-color: silver;
    transition: background-color 100ms;*/
}

.tableShadow
{
    pointer-events: none;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    height: 10px;
    color: black; /* this way the shadow color can be overridden */
    box-shadow: 0 5px 5px -5px var(--shadow-shade) inset;
    z-index: 1;
}

.tableRow
{
    position: relative;
    padding: 3px 1px;
}

.tableRow:nth-child(odd)
{
    background: var(--alternate-tint);
}

.tableRow:hover:not(.selected)
{
    /*box-shadow: 0 0 10px silver inset;
    border: 1px solid silver;
    border-radius: 3px;*/
    /*background-color: var(--background-color);*/
    background-color: var(--hover-tint);
}

.tableRow.selected
{
    /*color: white !important;*/
    background-color: var(--accent-tint);
    /*border: 1px solid DimGray;
    border-radius: 3px;*/
}

.tableRowOverflow .tableCell
{
    text-overflow: clip;
    white-space: normal;
    word-break: break-all;
}

.tableRowDetailFrame
{
    display: flex;
    flex-wrap: wrap;
    pointer-events: none;
}

.tableRowDetailTitle
{
    color: var(--secondary-text-color);
    padding: 0 3px 3px 3px;
}

.tableRowDetailBox
{
    display: flex;
    /*color: white;*/
    background-color: var(--background-shade);
    /*border: 1px solid DimGray;
    border-radius: 3px;*/
    padding: 3px;
    margin: 3px 0 -2px 0;
    flex-direction: column;
    flex-grow: 1;
}

.tableRowDetailBoxContent
{
    /*color: black;*/
    padding: 3px;
    background-color: var(--background-shade);
    overflow: hidden;
    flex-grow: 1;
}

.tableCell
{
    display: inline-block;
    margin-right: 4px;
    padding: 0 4px 0 3px;
    border-radius: 3px;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ledTableCell
{
    display: inline-block;
    width: 11px;
    margin-right: 4px;
    padding: 0 4px 0 3px;
    vertical-align: top;
}

.pickDialogTable
{
    width: 150px;
    padding: 5px;
    background: var(--background-color);
}

.pickDialogTable td
{
    padding: 0 3px;
    border: 1px solid silver;
}

.detailBoxTable
{
    width: 100%;
    border-style: hidden; /* overrides td border */
    margin: -3px;
}

.detailBoxTable th
{
    text-align: left;

    /*color: white;
    background-color: dimgray;*/
    text-transform: uppercase;
    font-weight: normal;

    padding: 0 3px;
    border: var(--light-border);
    border-bottom-width: 3px;
    position: relative;
    overflow: hidden;
}

.detailBoxTable td
{
    padding: 0 3px;
    /*text-align: right;*/
    border: var(--light-border);
    position: relative;
    overflow: hidden;
}

.detailBoxTable tr:nth-child(even)
{
    background-color: var(--alternate-tint);
}

.notClickable
{
    pointer-events: none;
}

.clickable:hover
{
    background-color: var(--hover-tint);
}

.tableInputButton
{
    width: 15px;
    padding: 0;
    text-align: center !important;
    box-sizing: border-box;
}

.tableInputButton:hover
{
    background-color: var(--hover-tint);
}

.tableInputCheckbox
{
}

.tableInputCheckbox:hover
{
    background-color: var(--hover-tint);
}

.jobsEditorKeyTextBox
{
    text-transform: uppercase;
}

.exceptionList
{
    list-style: disc inside;
    white-space: nowrap;
    color: red;
    margin: 0;
    padding: 1em;
}

.scrollContainer
{
    background: var(--background-color);
    border: 1px solid #E5E5E5;
    width: 100%;
    height: 75px;
    overflow: auto;
}

.dummyFormElement
{
    height: 26px;
    background-color: white;
    border: 1px dashed silver;
    box-sizing: border-box;
}

/*.dashboardEditorColorsTable
{
    display: block;
    background: var(--menu-color);
}

.dashboardEditorColorsTable tr:nth-child(even)
{
    background: var(--alternate-tint);
}

.dashboardEditorColorsTable tr:nth-child(2)
{
    border-top: var(--light-border);
    border-top-width: 3px;
}

.dashboardEditorColorsTable td
{
    padding: 0 5px;
    height: 18px;
    border: var(--light-border);
}

.dashboardEditorColorsTable td > *
{
    width: 150px;
    height: 100%;
    padding: 0;
    margin: 0;
    box-sizing: content-box;
    background-color: transparent;
}

.dashboardEditorColorsTable tr:not(:first-child) > td:nth-child(2)
{
    padding: 0;
}

.dashboardEditorColorsTable .tableButton
{
    text-align: center;
    min-width: 10px;
    width: 10px;
}

.dashboardEditorColorsTable .tableButton:hover
{
    background-color: var(--hover-tint);
}*/

.active > svg
{
    fill: var(--accent-text-color);
}

.active > span
{
    color: var(--accent-text-color);
}

@keyframes blinker
{
    50%
    {
        fill: var(--red-tint);
        stroke: var(--red-text-color);
        stroke-width: 1px;
        vector-effect: non-scaling-stroke;
    }
}

@keyframes dash
{
    to
    {
        stroke-dashoffset: 0;
    }
}