html {
    /* background: radial-gradient(rgb(0 0 0 / 10%)), rgb(0 0 0 / 25%), linear-gradient(#2a2e3a, #131826); */
    background: radial-gradient(#3645652b, transparent), linear-gradient(#0b2535, #051c2a);
    min-height: 100%;
}
body {
    height: 100%;
}


.lux.chart {
    position:relative;
    width:100%;
    height:100%;
}
.lux.chart canvas {
    pointer-events: none;
}
.lux.chart * {
    user-select: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11.5px;
    box-sizing: border-box;
}
.lux.chart::before {
    content: '';
    position: absolute;
    inset:0;

    /* background:url('/static/images/school.avif');
    background-size: 25%;
    opacity:3%; */

}
.lux.chart > :is(canvas, div) {
    position:absolute;
    inset:0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.lux.chart > canvas.c1 {
    z-index: 10;
}

.lux.chart > div > div {
    position: absolute;
}

.lux.chart .range-view {
    top: 100px;
    left: 100px;
    width: 400px;
    height: 100px;
    display: grid;
    grid-template-columns: 25% 1fr 15%;
    border-top: solid 1px rgb(255 255 255 / 20%);
    border-bottom: solid 1px rgb(255 255 255 / 20%);
}
.lux.chart .range-view > div:nth-child(1),
.lux.chart .range-view > div:nth-child(3) {
    background-color: rgb(0 0 0 / 25%);
    backdrop-filter: blur(2px)
    /* cursor:pointer; */
}
.lux.chart .range-view > div:nth-child(2) {
    position: relative;
    border-left:solid 2px rgb(255 255 255 / 25%);
    border-right:solid 2px rgb(255 255 255 / 25%);
    cursor:grab;
}
.lux.chart .range-view > div:nth-child(2).drag {
    cursor:grabbing;
}
.lux.chart .range-view .grip {
    position:absolute;
    top:50%;
    width:6px;
    height:50%;
    translate: -50% -50%;
    border-radius: 3px;
    background-color: rgb(255 255 255 / 75%);
    border: solid 1px rgb(0 0 0  / 100%);
    /* outline: solid 1px rgb(0 0 0  / 35%); */
    cursor:ew-resize;
    z-index: 1;
}
.lux.chart .range-view .grip:nth-child(1) {
    left: calc(0% - 0.5px);
}
.lux.chart .range-view .grip:nth-child(2) {
    left: calc(100% + 0.5px);
}

.lux.chart .event-ctl.c-ew {
    cursor:ew-resize;
}

.lux.chart .event-ctl.drag {
    cursor:grabbing;
}
.lux.chart .event-ctl.c-ew.drag {
    cursor:ew-resize;
}

.lux.chart > .login-container {
    inset: 100px;
    width: calc(100% - 200px);
    height: calc(100% - 200px);
    pointer-events: none;
    overflow:hidden;
}

.lux.chart .chart-login {
    background-color: rgb(15 17 25);
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    translate: -50%;
    pointer-events: all;
    padding: 20px;
    border-radius: 5px;
}

/* GRAPH DOT */

.lux.chart .dot {
    display:none;
    width: 10px;
    height: 10px;
    border: solid 2px #000;
    border-radius: 50%;
    translate: -50% -50%;
}
.lux.chart.playing .dot {
    display:block;
}

/* TOOLTIP */

.lux.chart .tt {
    position:absolute;
    overflow:hidden;
}
.lux.chart .tt.menu {
    position:fixed;
    border-radius:5px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    opacity:0;
}
.lux.chart .tt.menu.v {
    pointer-events:all;
    transition: opacity 0.15s ease;
    opacity:1;
}
.lux.chart .tt.menu * {
    background-color: #2a2c33;

}
.lux.chart .tt.menu .group {
    padding:5px 0px;
    border-bottom:solid 1px rgb(255 255 255 / 20%);
}
.lux.chart .tt.menu .group:last-child {
    border-bottom:none;
}
.lux.chart .tt.menu .item {
    color:#ffffffe0;
    padding:7px 20px;
    width:fit-content;
    white-space: nowrap;
}

.lux.chart .tt.menu .item:hover {
    background-color: #404552;
}

/* SLIDER */

.slider
{
    width:100%;
    height:100%;
    border: solid 1px #ffffff33;
    padding:2px;
    cursor:pointer;
    border-radius: 5px;
}
.slider .marker
{
    position: relative;
    visibility: hidden;
    background-color: rgb(255 255 255 / 50%);
    backdrop-filter: hue-rotate(180deg);
    border: solid 1px #000000C0;
    border-radius: 3px;
}
.slider .marker::before {
    position:absolute;
    /* opacity:65%; */
}
.slider .marker.v {
    visibility: visible;
}
.slider.horizontal .marker {
    cursor:ew-resize;
    height: 100%;
}
.slider.horizontal .marker::before {
    content:'\f0d8';
    font-family: var(--font-awesome);
    top:100%;
    left:50%;
    translate:-50% 3px;
}
.slider.vertical .marker {
    cursor:ns-resize;
    width: 100%;
}
.slider.vertical .marker::before {
    content:'\f0d9';
    font-family: var(--font-awesome);
    top:50%;
    left:100%;
    translate:7px -50%;
}

/* TAB CONTROL */

.tab-control .tabs {
    display:flex;
    flex-wrap: wrap;
}
.tab-control .tabs > div {
    padding: 5px 0;
    user-select:none;
    cursor:pointer;
    border: solid 1px transparent;
    border-top: solid 1px #ffffff30;
    border-bottom: solid 1px #ffffff30;
    transition:all 0.15s ease;
    white-space: nowrap;
    flex-grow: 1;
    text-align: center;
}
.tab-control .tabs > div:hover {
    box-shadow: var(--hl-shadow);
    border: var(--hl-border);
    color:var(--i-blue);
}
.tab-control .tabs > div.active {
    background-color: var(--i-blue);
    pointer-events: none;
    cursor: default;
    color: #fff;
}
.tab-control .panes {
    translate: 0px -1px;
}
.tab-control .panes > div {
    display:none;
}
.tab-control .panes > div.active {
    display:block;
}

/* TAB SELECTOR */

.tab-selector {
    display:flex;
    grid-template-columns: minmax(100px, 150px) auto;
    max-height: 80vh;
}
.tab-selector .tabs > div {
    padding: 3px 20px;
    user-select: none;
    cursor: pointer;
    border: solid 1px transparent;
    border-bottom: solid 1px #ffffff30;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.tab-selector .tabs > div.active,
.tab-selector .tabs > div:hover {
    border: var(--hl-border);
    color:var(--i-blue);
}
.tab-selector .tabs > div.active {
    box-shadow: var(--hl-shadow);
    cursor:default;
}
.tab-selector .panes {
    border-left: solid 1px #ffffff30;

}
.tab-selector .panes > div {
    display:none;
    padding: 10px 15px;
}
.tab-selector .panes > div.active {
    display: block;
}



/* CHART LOGO */

.chart-container .logo {
    pointer-events: none;
    translate: 0 -100%;
    margin:-10px 10px;
    opacity: 75%;
}
.chart-container .logo > svg {
    width: 175px;
}
.chart-container.no-logo .logo {
    display:none;
}

/* CHART TOP LEGEND */

.lux.chart .legend-top,
.lux.chart .right-controls {
    display:flex;
    flex-direction: column;
    margin:5px;
    pointer-events: none;
    z-index: 2;
}
.lux.chart .legend-top.collapsed {
    display:none;
}
.lux.chart .legend-top * {
    pointer-events: all;
    font-size: 11px;
}
.lux.chart .legend-top .drop-down-list * {
    font-size: 12px;
}
.lux.chart .legend-top > .left-controls {
    /* margin: 5px 0 0 5px; */
    margin-top: 5px;
    order: 1000;
}
.lux.chart .legend-top > .left-controls > * {
    margin-bottom: 5px;
}
.lux.chart.no-controls .legend-top > .left-controls {
    display:none;
}
.lux.chart .legend-top > .item {
    position:relative;
    display:flex;
    flex-wrap: nowrap;
    align-items: center;
    width: fit-content;
    border: solid 1px transparent;
    border-radius: 3px;
    overflow: hidden;
    /* height:22px; */
}
.lux.chart .legend-top :is(.as.v) {
    transition: all 0.5s ease !important;
}

.lux.chart.no-animation .legend-top :is(.as.v) {
    transition: none !important;
}

.lux.chart .legend-top > .item:nth-child(1) {
    margin-bottom:5px;
}
.lux.chart .legend-top.no-primary > .item:nth-child(1) {
    margin-bottom:0;
}
.lux.chart .legend-top > .item * {
    font-size:12px;
}
.lux.chart .legend-top .item:has(.title:hover,.controls:hover) {
    background-color: #131720;
    border: var(--hl-border);
}
.lux.chart .legend-top > .item > div {
    background-color: rgb(9 34 50 / 70%);
}
.lux.chart .legend-top > .item > .title {
    padding: 2px 10px 2px 5px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
.lux.chart .legend-top > .item > .title * {
    font-size:12px;
}
.lux.chart .legend-top > .item:nth-child(1) .title > :nth-child(1) {
    font-size:15px;
}
.lux.chart .legend-top.no-primary > .item:nth-child(1) .title > :nth-child(1) {
    font-size:12px;
}

.lux.chart .legend-top > .item > .title > div {
    color: #ffffff80;
}
.lux.chart .legend-top > .item > .title > div:nth-child(1) {
    color: inherit;
}
.lux.chart .legend-top > .item > .title > div:nth-child(1)::before {
    content:none;
}
.lux.chart .legend-top > .item > .title > div::before {
    content: '·';
    margin: 0 5px;
    font-weight: 700;
    color: var(--font-color);
}
.lux.chart .legend-top .value {
    /* font-size:12px; */
    line-height:14px;
    padding: 2px 5px 2px 0;
}
.lux.chart .legend-top .value.multiple {
    display: flex;
    align-items: center;
    grid-gap: 2px 6px;
}
.lux.chart .legend-top .value.multiple.stacked {
    display: grid;
}
.lux.chart .legend-top .value.multiple > div {
    color:inherit;
    line-height:12px;
}
.lux.chart .legend-top .value.multiple > div::before 
{
    content: attr(data-title);
    color: #ffffff80;
    margin-right: 5px;
    /* font-size:11px; */
}
.lux.chart .legend-top .value.multiple.small > div {
    /* margin-right:5px; */
    display: flex;
    justify-content: space-between;
}
.lux.chart .legend-top .value.multiple.small > div:last-child {
    margin-right: 0;
}
.lux.chart .legend-top .value.multiple.small > div::before 
{
    color: #ffffff80;
}

.lux.chart .legend-top .item:has(:is(.title:hover,.controls:hover)) .value {
    display:none;
}
.lux.chart .legend-top .item:not(:has(.controls)) .value {
    display:flex !important;
}

.lux.chart .legend-top .value sup {
    vertical-align:top;
    font-size: 10px;
    color:inherit;
}
.lux.chart .legend-top .controls {
    display:flex;
    flex-wrap: nowrap;
    padding: 1px;
    height:20px;
}
.lux.chart .legend-top .controls > div {
    display:none;
    cursor:pointer;
}
.lux.chart .legend-top .item:has(:is(.title:hover,.controls:hover)) .controls > div {
    display:block;
}
.lux.chart .legend-top .item.hidden:has(:is(.title:hover,.controls:hover)) .controls > .settings {
    display:none;
}
.lux.chart .legend-top .controls > div {
    position: relative;
    width: 25px;
}
.lux.chart .legend-top .controls > div::after {
    position:absolute;
    inset:0 auto;
    width:22px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    font-family: var(--font-awesome);
    font-size:13px;
    padding-bottom: 2px;
}
.lux.chart .legend-top .controls > div:hover::after {
    background-color: #404552;
    color: var(--i-blue);
}
.lux.chart .legend-top .controls .settings::after {
    content: '\f013';
}
.lux.chart .legend-top .controls .hide::after {
    content: '\f06e';
}
.lux.chart .legend-top .controls .single::after {
    content: '\f204';
}
.lux.chart .legend-top .item.single .controls .single::after {
    content: '\f205';
}


.lux.chart .legend-top .item.hidden > div {
    opacity:0.5;
}
.lux.chart .legend-top .item.hidden .controls .hide {
    display: block;
}
.lux.chart .legend-top .item.hidden .value {
    display:none;
}
.lux.chart .legend-top .item.hidden .hide::after {
    content: '\f070';
}

/* CHART POPUP LEGEND */

.lux.chart .legend-popup {
    translate: calc(-100% + 10px) -50%;
    padding:15px;
    display:none;
    z-index:1;
}
.lux.chart .legend-popup.right {
    translate: -10px -50%;
}
.lux.chart .legend-popup * {
    user-select: none;
    cursor:default;
}
.lux.chart .legend-popup.v {
    display:block;
}

.lux.chart .legend-popup > div {
    padding: 10px 15px;
    border-radius: 10px;
    /* background-color: #a0a0ff10; */
    background: linear-gradient(#2a2e3aA0, #131826A0);
    backdrop-filter: blur(3px);
    box-shadow: 2px 2px 40px rgb(0 0 0 / 40%), 2px 2px 15px rgb(0 0 0 / 20%);
}

.lux.chart .legend-popup :is(.title) {
    border-top: solid 1px #ffffff33;
    padding-bottom: 5px;
}
.lux.chart .legend-popup .title {
    margin: 5px 0px 2px 0px;
}
.lux.chart .legend-popup .x-value {
    margin: 5px 0px 2px 0px;
    width: max-content;
}
.lux.chart .legend-popup .value.multiple > div {
    display: flex;
    justify-content: space-between;
    color: inherit;
}
.lux.chart .legend-popup .value.multiple > div::before {
    content: attr(data-title);
    display: inline-block;
    color: #ffffffd0;
    margin-right: 5px;
    font-size:11px;
    min-width:65px;
}
.lux.chart .legend-line {
    display: none;
    border-left: dotted 1px #fff;
}
.lux.chart .legend-line.v {
    display: block;
}

/* PALETTE */

.palette {
    padding: 15px;
}

.palette.standard > div {
    display:grid;
    grid-template-columns: repeat(10, 1fr);
    grid-gap:5px;
}
.palette.standard > div > div {
    width: 17px;
    height: 17px;
    cursor: pointer;
    border-radius: 3px;
    border:solid 1px #ffffff33;
}
.palette.standard > div > div.selected {
    border: solid 1px #000;
    outline: solid 1px #fff;
}

.palette .custom {
    display:block;
}

/* PALETTE COLOR */

.palette.color {
    border-top: solid 1px #ffffff30;
    padding: 15px;
}
.palette.color > div {
    display:grid;
    grid-template-columns: 1fr 80px;
    grid-gap: 5px;
    height: 25px;
}
.palette.color > div > div {
    position:relative;
    border: solid 1px #ffffff30;
    border-radius: 5px;
}
.palette.color > div > div:nth-child(1) > :is(.bg-1 .bg2) {
    position:absolute;
    inset:2px;
}
.palette.color > div > div:nth-child(1) > .bg-1 {
    background-image: var(--bg-checkered);
}
.palette.color > div > div > * {
    position:absolute;
    inset:2px;
}
.palette.color input[type="text"] {
    background-color:transparent;
    border:none;
    text-align: center;
    cursor:pointer;
}
.palette.color input[type=text]:focus {
    outline: none;
}
.palette.color > div > div:nth-child(2):has(input[type=text]:focus) {
    border: var(--hl-border);
    box-shadow: var(--hl-shadow);
}
.palette.color > div > div:nth-child(2):has(input[type=text].err) {
    background-color:#d0000020;
}
.palette.color > div > div:nth-child(2):has(input[type=text].err:focus) {
    border-color: #f70036;
    box-shadow: 0px 0px 17px #f70036;
}
.palette.color > div > div:nth-child(2) input[type=text].err {
    color: #ff406a;
}

/* PALETTE CUSTOM */

.palette.custom .gradient {
    display:grid;
    grid-template-columns: 187px 20px;
    grid-gap:8px;
}
.palette.custom .gradient .slider-container {
    height:100%;
}
.palette.custom .gradient > div:nth-child(1) {
    border: solid 1px #ffffff30;
    position:relative;
    width:187px;
    height:187px;
}
.palette.custom .gradient > div:nth-child(1) > div {
    pointer-events: none;
    position:absolute;
    inset:1px;
}
.palette.custom .gradient > div:nth-child(1) > div:nth-child(1) {
    pointer-events: all;
    cursor: pointer;
}
.palette.custom .gradient > div:nth-child(1) > div:nth-child(2) {
    background: linear-gradient(to right, #fff, transparent);
}
.palette.custom .gradient > div:nth-child(1) > div:nth-child(3) {
    background: linear-gradient(to bottom, transparent, #000);
}
.palette.custom .gradient > div:nth-child(1) > div.marker {
    background-color: rgb(255 255 255 / 50%);
    backdrop-filter: hue-rotate(180deg);
    border: solid 1px #000000C0;
    
    /* background-color: rgb(255 255 255 / 25%); */

    /* backdrop-filter: grayscale(25%) invert(75%); */
    /* border: solid 1px #00000080; */
    width: 10px;
    height: 10px;
    border-radius: 50%;
    translate: -50% -50%;
    top: 0%;
    left: 100%;
}
.palette.custom .gradient > div:nth-child(2) {
    position:relative;
}
.palette.custom .gradient > div:nth-child(2) .bg {
    position:absolute;
    pointer-events: none;
    inset:2px;
    background: linear-gradient(to bottom, #ff0000, #ff00ff 16.67%, #0000ff 33.33%, #00ffff 50%, #00ff00 66.67%, #ffff00 83.33%, #ff0000);
}

/* PALETTE opacity */

.palette.opacity {
    border-top:solid 1px #ffffff30;
    padding:15px;
}
.palette.opacity .title {
    font-size:12px;
}
.palette.opacity > .container {
    position:relative;
    height:20px;
    margin-top:10px;
}
.palette.opacity > .container > :is(.bg-1, .bg-2) {
    position:absolute;
    pointer-events: none;
    inset:2px;
}
.palette.opacity > .container > .bg-1 {
    image-rendering: pixelated;
    background-image: var(--bg-checkered);
    opacity:50%;
}
.palette.opacity > .container > .bg-2 {
    background:linear-gradient(to right, transparent, #fff);
}
.palette.opacity > .container > .slider-container {
    position:absolute;
    inset:0;
}

/* .palette .cancel {
    display: flex;
    justify-content: center;
    padding-top: 15px;
    margin-top: 15px;
    border-top: solid 1px #ffffff30;
} */


/* PALETTE CONTROLS */

.palette.controls {
    border-top: solid 1px #ffffff30;
    padding: 15px;
    display: flex;
    justify-content: center;
    grid-gap: 5px;
}


/* lAYOUT */

.separator {
    position:absolute;
    background-color: #262b38;
    pointer-events: none;
    transition: border 0.15s ease, background-color 0.15s ease;
}
.separator.collapsed {
    display:none;
}
:is(.separator.hover, .separator:hover) {
    background-color: var(--i-blue);
    /* border-color: #000 !important; */
    transition: border 0.15s 0.15s ease, background-color 0.15s 0.15s ease;
}
.separator.vertical {
    border-top: solid 1px #262b38;
    border-bottom: solid 1px #262b38;
    height: 5px;
}
.separator.horizontal {
    border-left: solid 1px #262b38;
    border-right: solid 1px #262b38;
    width: 5px;
}
:is(.separator.vertical.hover, .separator.vertical:hover) {
    border-top: var(--hl-border);
    border-bottom: var(--hl-border);
}
:is(.separator.horizontal.hover, .separator.horizontal:hover) {
    border-left: var(--hl-border);
    border-right: var(--hl-border);
}

:is(.expand-view, .collapse-view, .full-screen-view) {
    display: grid;
    translate: calc(-100% - 10px) calc(-100% - 10px);
    grid-template-columns: auto auto;
    background-color: rgb(20 20 20 / 30%);
    backdrop-filter: blur(5px);
    border-radius: 3px;
    border: solid 1px #ffffff33;
    padding: 0 10px 0 2px;
    align-items: center;
    cursor: pointer;
    opacity: 0.65;
    z-index: 8;
    visibility: hidden;
}
.full-screen-view {
    translate: 0;
}
:is(.expand-view.v, .collapse-view.v, .full-screen-view.v) {
    visibility: visible;
}
:is(.expand-view, .collapse-view, .full-screen-view) * {
    font-size: 12px !important;
    white-space: nowrap;
    overflow:hidden;
    transition: all 0.15s ease;
}
:is(.expand-view.out, .collapse-view.out) {
    padding: 0 3px;
}
.full-screen-view.out {
    padding: 0 3px;
}
:is(.expand-view.out, .collapse-view.out, .full-screen-view.out) > div:nth-child(2) {
    width: 0 !important;
}
:is(.expand-view, .collapse-view, .full-screen-view):hover {
    /* box-shadow: var(--hl-shadow); */
    box-shadow: none;
    border: var(--hl-border);
    opacity:1;
}
:is(.expand-view, .collapse-view, .full-screen-view):hover * {
    color: var(--l-blue);
    fill: var(--l-blue);
}
:is(.expand-view, .collapse-view, .full-screen-view) .svg-icon {
    width: 22px;
    height: 19px;
}
:is(.expand-view, .collapse-view, .full-screen-view) .svg-icon > svg {
    height: 75%;
}
:is(.expand-view, .collapse-view, .full-screen-view) :is(.svg-icon, .svg-icon:hover) {
    box-shadow:none;
    border:none;
}
:is(.expand-view, .collapse-view, .full-screen-view) .svg-icon:hover > svg {
    fill: var(--font-color);
}
.full-screen-view {
    padding-left: 5px;
    grid-gap: 3px;
    opacity: 1;
}
.full-screen-view.out {
    grid-gap: 0;
    opacity: 0.65;
}


/* RESET TO DEFAULT */

.reset-defaults {
    border-top: solid 1px #ffffff30;
    padding: 15px;
    display: flex;
    justify-content: center;
}
.reset-defaults button::before {
    content: '\f2ea';
    font-family: var(--font-awesome);
    margin-right: 7px;
}

/* MOUSE OVER DOT */

.lux.chart .cursor-dot {
    width: 10px;
    height: 10px;
    translate: -50% -50%;
    pointer-events: none;
    border-radius: 50%;
    box-shadow: 0px 0px 2px 1px rgb(0 0 0 / 75%);
    opacity: 0;
    scale: 0;
    transition: all 0.5s ease;
}
/* .lux.chart .cursor-dot::after {
    content: '';
    position:absolute;
    width: 25px;
    height: 25px;
    background-color: #fff;
} */
.lux.chart .cursor-dot.v {
    opacity: 1;
    scale: 1;
}

/* MOUSE OVER VALUE */

.lux.chart .cursor-legend {
    padding: 4px 6px;
    border-radius: 3px;
    box-shadow: 1px 1px 5px 0px rgb(0 0 0 / 50%);
    border: solid 1px rgba(255 255 255 / 15%);
    outline: solid 1px rgb(0 0 0 / 25%);
    pointer-events: none;
    color: #a0ffff;
    backdrop-filter: blur(5px);
    opacity: 0;
    z-index: 2;
    transition: opacity 0.25s ease;
}
.lux.chart .cursor-legend.v {
    opacity: 1;
    /*
    transition: top                 0.15s ease,
                left                0.15s ease,
                background-color    0.15s ease,
                color               0.15s ease,
                opacity             0.15s ease;
    */
}
.lux.chart .cursor-legend > * {
    display:flex;
    justify-content: space-between;
    gap:10px;
    color: inherit;
    margin-top: 1px;
    white-space: nowrap;
    text-shadow: 0px 1px 2px rgb(0 0 0 / 50%);
}
.lux.chart .cursor-legend > *:first-child {
    margin-top:0;
}
.lux.chart .cursor-legend > *[title] {
    color: #fff080;
}
.lux.chart .cursor-legend > *[title]::before {
    content: attr(title);
    color: #fff;
    margin-top: 1px;
    text-shadow: 0px 1px 1px rgb(0 0 0 / 50%);
}
.lux.chart .cursor-legend > *:not([title]) + *[title] {
    margin-top: 5px;
}
.lux.chart .cursor-legend > *:not([title]):not(:first-child) {
    margin-top: 5px;
}
.lux.chart .cursor-legend > *[title] + *:not([title]) {
    border-top: solid 1px rgb(255 255 255 / 10%);
    padding-top: 5px;
}
.lux.chart .cursor-legend .date {
    display: flex;
    justify-content: center;
    border-top: solid 1px rgb(255 255 255 / 10%);
    padding-top: 4px !important;
    font-size: 11px;
    color: #fff;
}



/* SCALE */

.lux.chart .tt.scale {
    display:flex;
    /* background-color: #1a73e8; */
    background-color: #404552;
    color:#ffffffd0;
    
    font-size:11px;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    opacity:0;
    transition: opacity 0.15s ease;

    /* display: flex;
    background-color: #1a73e8;
    background-color: #404552;
    font-size: 11.5px;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.15s ease;
    background-color: #40455280;
    background-color: transparent;
    backdrop-filter: 3px;
    opacity: 100%;
    border: var(--hl-border);
    box-shadow: 0px 0px 5px var(--i-blue);
    box-shadow: var(--hl-shadow);
    translate: 0px -3px;
    text-shadow: 0px 0px 4px var(--i-blue), 0px 0px 4px var(--i-blue);
    background-color: rgb(0 0 0 / 85%); */
}

.lux.chart .tt.scale.v {
    opacity:1;
}
.lux.chart .tt.scale.x {
    translate: -50%;
    width: auto;
    padding: 0 10px;
}
.lux.chart .tt.scale.y {
    translate: 0 -50%;
    padding: 3px 0;
}
.lux.chart .tt.last {
    overflow: visible;
    translate: 0 -50%;
    pointer-events: none;
    user-select: none;
    display:none;
}
.lux.chart.no-last .tt.last {
    display: none;
}


/* LAST MARKER */

.lux.chart .tt.last.v {
    display:block;
}
.lux.chart .tt.last .value {
    position: absolute;
    display:flex;
    font-size:11px;
    justify-content: center;
    align-items: center;
    padding: 3px 0;
    color:#ffffffd0;
    translate: 0 -50%;
}
.lux.chart .tt.last .line {
    position: absolute;
    display: block;
    border-top: dotted 1px transparent;
    top: 50%;
}

/* LAST DOT */

.lux.chart .tt.last-dot {
    overflow:visible;
    display:none;
    pointer-events: none;
}
.lux.chart .tt.last-dot.v {
    display:block;
}
.lux.chart .tt.last-dot > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    translate: -50% -50%;
    pointer-events: none;
}
.lux.chart .tt.last-dot .dot {
    pointer-events: none;
    border: none;
    box-shadow: 0px 0px 2px 1px rgb(0 0 0 / 75%);
}
.lux.chart .tt.last-dot .pulse {
    opacity:50%;
    animation-name: kf-pulse;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
}
.lux.chart .tt.last-dot.v > * {
    display:block !important;
}

@keyframes kf-pulse {
    0% {
        opacity: 0.65;
        scale: 0;
    }

    100% {
        opacity: 0;
        scale: 5;
    }
}

/* ZOOM */

.lux.chart .zoom-toggle {
    display:none;
    translate: calc(-100% - 10px) calc(-100% - 10px);
    z-index:8;
}
.lux.chart .zoom-toggle:hover {
    border: solid 1px transparent;
    box-shadow: none;
}
.lux.chart .zoom-toggle:hover > svg {
    fill: var(--font-color);
}
.lux.chart .zoom-toggle.active {
    box-shadow: var(--hl-shadow);
    border: var(--hl-border);
}
.lux.chart .zoom-toggle.active > svg {
    fill: var(--l-blue);
}

.lux.chart .zoom {
    padding: 25px 0;
    translate: 0 -100%;
    z-index:7;
}


.lux.chart .zoom > div {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    left: 50%;
    width: fit-content;
    translate: -50%;
    opacity: 0;
    pointer-events: none;
    transition: all 0.15s ease;
}

.lux.chart :is(.zoom:hover, .zoom.active) > div {
    pointer-events: all;
    opacity:1;
}



.lux.chart .zoom > div > div {
    width: 32px;
    height: 32px;
    background-color: #2a2c33;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    opacity:75%;
    text-shadow: 0px 0px 5px var(--i-blue);
    transition: all 0.15s ease;
}
.lux.chart .zoom > div > div:after {
    position:absolute;
    width:100%;
    height:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    color:#fff;
    transition: all 0.15s ease;
    box-sizing: border-box;
}
.lux.chart .zoom > div > .out:after {
    content: '–';
    translate: 1px -2px;
}
.lux.chart .zoom > div > .in:after {
    content: '+';
}
.lux.chart .zoom > div > .left:after {
    content: '\25C1';
    font-size:16px;
    padding: 2px 1px 0 0;
}
.lux.chart .zoom > div > .right:after {
    content: '\25B7';
    font-size:16px;
    padding: 2px 0 0 3px;
}
.lux.chart .zoom > div > .reset > svg {
    height: 75%;
}

.lux.chart .zoom > div > div:hover {
    background-color: #40455280;
    background-color: transparent;
    /* backdrop-filter: 3px; */
    /* box-shadow: 2px 2px 3px rgb(0 0 0 / 100%); */
    opacity:100%;
    border: var(--hl-border);
    /* box-shadow: 0px 0px 5px var(--i-blue); */
    box-shadow: var(--hl-shadow);
    backdrop-filter: blur(5px);
    translate: 0px -3px;
}
.lux.chart .zoom > div > div:hover:after {
    color: var(--l-blue);
    /* text-shadow: 0px 0px 4px var(--i-blue), 0px 0px 4px var(--i-blue); */
}

.lux.chart .zoom > div > :is(.year, .in, .right) {
    margin-right: 5px;
}

.lux.chart .zoom .year .year-list {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 5px;
    top: 0;
    left: 0;
    translate: 0 -100%;
    padding: 0 0 10px 0;
    cursor: default;
    visibility:hidden;
    pointer-events: none;
    opacity:0;
}
.lux.chart .zoom .year:hover .year-list {
    visibility:visible;
    pointer-events: all;
    opacity:1;
}
.lux.chart .zoom .year .year-list > div {
    display: flex;
    justify-content: center;
    white-space: nowrap;
    align-items: center;
    background-color: #2a2c33;
    font-size:12px;
    text-shadow: none;
    height: 32px;
    padding: 0 14px;
    border-radius: 5px;
    position: relative;
    backdrop-filter: blur(1px);
    border:solid 1px transparent;
    transition: all 0.15s ease;
    cursor: pointer;
}
.lux.chart .zoom .year .year-list > div.separator {
    grid-column: 1 / 6;
    background: transparent;
    height: 0;
    padding: 0;
    visibility: hidden;
    pointer-events:none;
}
.lux.chart .zoom .year .year-list > div:hover {
    border: var(--hl-border);
    box-shadow: var(--hl-shadow);
    color: var(--l-blue);
    background-color: #2a2c3360;
}

@media screen and (max-width: 800px) {
    .lux.chart .zoom-toggle {
        display: flex;
    }
    .lux.chart .zoom {
        padding-bottom: 60px;
    }
    .lux.chart .zoom:hover > div {
        pointer-events: none;
        opacity:0;
    }
    .lux.chart .zoom.active > div {
        pointer-events: all !important;
        opacity: 1;
    }
    .lux.chart .zoom .year .year-list {
        grid-gap: 3px;
    }
    .lux.chart .zoom .year .year-list > div {
        font-size: 11px;
        height: 28px;
        padding: 0 10px;
    }
    .chart-container .logo > svg {
        width: 125px;
    }
}


/* DRAWING */

.lux.chart .editor {
    pointer-events: none;
    z-index: 6;
}
.lux.chart .editor .view {
    overflow:hidden;
    pointer-events: none;
}
.lux.chart .editor .view > div {
    position: absolute;
    pointer-events: all;
}

.lux.chart .editor {
    pointer-events: none;
    z-index: 6;
}
.lux.chart .editor .e2-editor-view {
    overflow:hidden;
    pointer-events: none;
}
.lux.chart .editor .e2-editor-view.active {
    background-color:#7dff8110;
    border: solid 1px #7dff8140;
}
.lux.chart .editor .e2-editor-view > div {
    position: absolute;
    pointer-events: all;
}



/* POPUPS */

.lux.chart .popups {
    pointer-events: none;
    z-index: 11;
}

/* SCALES */

.lux.chart .scales {
    z-index: 11;
    pointer-events: none;
}
.lux.chart .scales * {
    pointer-events: all;
}
.lux.chart .mouseover {
    pointer-events: none;
    z-index: 13;
}

/* OVERLAY */

.lux.chart .overlay {
    position: fixed;
    pointer-events: none;
    z-index: 10;
    inset: 60px 0 0 0;
    width: auto;
    height: auto;
}
.lux.chart .overlay > div > div {
    margin-right:15px;
}

.lux.chart .overlay > .btc-logo {
    position: absolute;
    display: block;
    right: 55px;
    bottom: 35px;
    height: 7vh;
}
.lux.chart .overlay > .bca-logo {
    position: absolute;
    display: block;
    left: 55px;
    bottom: 35px;
    height: 7vh;
}
.lux.chart .overlay > .bca-twitter {
    position: absolute;
    display: block;
    right: 55px;
    bottom: 35px;
    font-family: serif;
    font-size: 5rem;
    text-shadow: 1px 1px 2px rgb(0 0 0 / 100%);
}
.lux.chart .overlay > .bch-logo {
    inset: auto auto 35px 50%;
    translate: -50%;
    width: 15vh;
    height: 15vh;
}
.lux.chart .overlay > .bch-logo > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: solid 3px #fff;
}
.lux.chart .overlay > :is(.btc-logo, .bca-logo) > svg {
    width: 100%;
    height: 100%;
}

.lux.chart .overlay > .content :is(.rem-4, .rem-4 *) {
    font-size: 4vh !important;
}
.lux.chart .overlay > .content :is(.rem-5, .rem-5 *) {
    font-size: 5vh !important;
}
.lux.chart .overlay > .content :is(.rem-6, .rem-6 *) {
    font-size: 6vh !important;
}
.lux.chart .overlay > .content :is(.rem-7, .rem-7 *) {
    font-size: 7vh !important;
}
.lux.chart .overlay > .content :is(.rem-8, .rem-8 *) {
    font-size: 8vh !important;
}
.lux.chart .overlay > .content :is(.rem-9, .rem-9 *) {
    font-size: 9vh !important;
}
.lux.chart .overlay > .content :is(.rem-10, .rem-10 *) {
    font-size: 10vh !important;
}

.lux.chart .overlay > .content .h-125 {
    height:125px;
}

.lux.chart .overlay > .content {
    position: absolute;
    inset: 35px 55px;
}


.lux.chart .overlay > .content * {
    /* text-transform: uppercase; */
    font-size: 6rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 1px 1px 6px rgb(0 0 0 / 100%);
    /* width: fit-content; */
    margin-right: 0;
}

.lux.chart .overlay > .content .title {
    color: #ffff00;
    margin-bottom: 100px;

}
.lux.chart .overlay > .content .title .today {
    font-size: 6vh !important;
}   

.lux.chart .overlay > .content .values {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    display: grid;
    grid-gap: 20px 50px;
}
.lux.chart .overlay > .content .values > div {
    display: flex;
    align-items: flex-end;
}
.lux.chart .overlay > .content .values.x2 {
    grid-template-columns: repeat(2, auto);
}
.lux.chart .overlay > .content .values.x3 {
    grid-template-columns: repeat(3, auto);
}

.lux.chart .overlay > .content .values.x3 .c-3 {
    grid-column: 1 / 4;
}
.lux.chart .overlay > .content .values.x3 .c-12 {
    grid-column: 1 / 3;
}
.lux.chart .overlay > .content .values.x3 .c-23 {
    grid-column: 2 / 4;
}

.lux.chart .overlay > .content .sep {
    grid-column: 1 / 4;
}
.lux.chart .overlay > .content .sep.x25 {
    height: 25px;
}

.lux.chart .overlay > .content .sub-title {
    text-transform: uppercase;
    color: #ffff00
}

.lux.chart .overlay > .content .val {
    color: #ffff00;
}

.lux.chart .overlay > .content .pos {
    color: #02fb91;
}

.lux.chart .overlay > .content .neg {
    color: #f82664;
}

.lux.chart .overlay > .content .min {
    color: #f82664;
    text-decoration: underline;
}
.lux.chart .overlay > .content .r {
    justify-content: flex-end;
}


/* EDITOR */

.factory {
    position: fixed;
    inset: 0;
    pointer-events: none;
}
.factory * {
    font-size:11.5px;
    pointer-events: none;
}
.factory > div {
    position: absolute;
    pointer-events: none !important;
}

:is(.factory, .editor) .pen svg {
    /* background-color: #ff000020; */
    width: 100%;
    height: 100%;
}
.editor .pen {
    position: relative;
}
.editor .pen svg {
    position:absolute;
    inset:0;
    overflow:visible;
}


.lux.chart.no-editor .editor {
    display: none;
}

.chart-page:has(.editor.no-events) * {
    /* .editor.no-events * { */
    pointer-events: none !important;
}

.editor > div {
    pointer-events: all;
    overflow: hidden;
}

.note {
    background-color: #e5e5fff0;
    padding:10px;
    width: max-content;
    max-width: 250px;
    border-radius: 5px;
    backdrop-filter: blur(3px);
    box-shadow: 0px 5px 10px -5px rgb(0 0 0 / 65%), 0px 1px 2px rgb(0 0 0 / 75%);
}

.editor .measure {
    position:relative;
    top: 0 !important;
    left: 0 !important;
}

.measure.pos {
    background-color:#0240d260;
}
.measure.neg {
    background-color:#da003660;
}

:is(.note) {
    font-size: 12px;
    color: #000;
}

.editor .measure .text {
    position:absolute;
    inset:10px;
    overflow:hidden;
    color: #fff;
    cursor: text;
}
.editor .measure .text * {
    font-size: inherit;
    color: inherit;
}

.editor .container:has(.measure .text:active, .measure .text:focus) .text:empty::before {
    content: 'Start typing...';
    font-size: inherit;
    color:inherit;
}

:is(.factory, .editor) .grip {
    position: absolute;
    width: 15px;
    height: 15px;
    max-width:50%;
    max-height:50%;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    cursor: move;
    transition: all 0.15s ease;
}

.editor .container .grip {
    background-color: #4796ff80;
    border-color: var(--i-blue) !important;
}
.editor .container.active .grip {
    pointer-events: all;
    visibility: visible;
    opacity: 1;
}

/* TOP LEFT */

.editor .container .grip.top-left {
    inset: 5px auto auto 5px;
    border-top: solid 1px;
    border-left: solid 1px;
}

/* TOP RIGHT */

.editor .container .grip.top-right {
    inset: 5px 5px auto auto;
    border-top: solid 1px;
    border-right: solid 1px;
}

/* BOTTOM LEFT */

.editor .container .grip.bottom-left {
    inset: auto auto 5px 5px;
    border-left: solid 1px;
    border-bottom: solid 1px;
}

/* BOTTOM RIGHT */

.editor .container .grip.bottom-right {
    inset: auto 5px 5px auto;
    border-right: solid 1px;
    border-bottom: solid 1px;
}

/* NO RESIZING */

.editor .container.no-resize .grip {
    display: none !important;
}

.factory .measure > .grip {
    visibility: visible;
    opacity: 1;
}

.editor :is(.container.resizing, .container:hover) > .measure > .grip {
    visibility: visible;
    pointer-events: all;
    opacity: 1;
    transition: border-color 0.15s ease;
}

.measure.pos > .grip {
    border-color: #0240d2 !important;
    background-color: #0240d280;
}
.measure.neg > .grip {
    border-color: #da0036 !important;
    background-color: #da003680;
}

.editor .container .grip:hover,
.editor .measure > .grip:hover {
    border-color: var(--l-blue) !important;
    background-color: #92c8fb80 !important;
}

/* TOP LEFT */

.measure.neg.frwd > .grip.start,
.measure.pos.bkwd > .grip.end {
    inset: 0 auto auto 0;
    border-top: solid 1px;
    border-left: solid 1px;
}

/* TOP RIGHT */

.measure.neg.bkwd > .grip.start,
.measure.pos.frwd > .grip.end {
    inset: 0 0 auto auto;
    border-top: solid 1px;
    border-right: solid 1px;
}

/* BOTTOM LEFT */

.measure.pos.frwd > .grip.start,
.measure.neg.bkwd > .grip.end {
    inset: auto auto 0 0;
    border-left: solid 1px;
    border-bottom: solid 1px;
}

/* BOTTOM RIGHT */

.measure.pos.bkwd > .grip.start,
.measure.neg.frwd > .grip.end {
    inset: auto 0 0 auto;
    border-right: solid 1px;
    border-bottom: solid 1px;
}

.measure > .arrow {
    position:absolute;
}
.measure.small > .arrow {
    display:none;
}

.measure > .arrow.x {
    inset:50% 0 auto 0;
}
.measure > .arrow.y {
    inset:0 auto 0 50%;
}

.measure.pos > .arrow {
    border-color: #0240d2 !important;
}
.measure.neg > .arrow {
    border-color: #da0036 !important;
}

.measure.pos > .arrow.x {
    border-top: solid 1px;
}
.measure.neg > .arrow.x {
    border-top: solid 1px;
}

.measure.pos > .arrow.y {
    border-left: solid 1px;
}
.measure.neg > .arrow.y {
    border-left: solid 1px;
}

.measure > .arrow::after {
    content: '';
    position:absolute;
    width: 5px;
    height: 5px;
    transform-origin: 0 0;
    border-color: inherit !important;
}
.measure.pos > .arrow.y::after {
    transform: rotate(45deg);
    border-top: solid 1px;
    border-left: solid 1px; 
}
.measure.neg > .arrow.y::after {
    top: 100%;
    transform: rotate(-135deg);
    border-top: solid 1px;
    border-left: solid 1px; 
}

.measure.pos > .arrow.x::after {

    border-top: solid 1px;
    border-left: solid 1px; 
}
.measure.neg > .arrow.x::after {

    border-top: solid 1px;
    border-left: solid 1px; 
}

.measure.frwd > .arrow.x::after {
    left: 100%;
    transform: rotate(135deg);
}
.measure.bkwd > .arrow.x::after {
    transform: rotate(-45deg);
}

.measure > .legend-measure {
    position: absolute;
    top: 100%;
    left: 50%;
    translate: -50% 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    border-radius: 3px;
    padding: 5px 10px;
    transition: translate 0.15s ease;
}
.measure.top-legend > .legend-measure {
    top: 0;
    translate: -50% calc(-100% - 3px);
}

.editor :is(.container.active, .container:hover) .measure > .legend-measure {
    translate: -50% 10px;
}

.editor :is(.container.active, .container:hover) .measure.top-legend > .legend-measure {
    translate: -50% calc(-100% - 37px);
}

.measure > .legend-measure * {
    white-space: nowrap;
    font-size:11px;
    color: #fff;
}
.measure.pos > .legend-measure {
    background-color: #0240d2;
}
.measure.neg > .legend-measure {
    background-color: #da0036;
}

:is(.note *) {
    font-size: inherit !important;
    color: inherit !important;
}

.note:empty::before {
    content: 'New Text Note';
    color: inherit;
}
.editor .container:has(.note:active, .note:focus) .note:empty::before {
    content: 'Start typing...';
    font-size: inherit;
    color:inherit;
}
.editor .note:hover {
    cursor: text;
}

.editor .container {
    position: absolute;
    padding: 5px;
    border: solid 1px transparent;
    transition: border 0.15s ease;
    z-index: 3;
}
.editor .container.animate {
    transition: all 0.15s ease;
}
.editor .container.no-events,
.editor .container.no-events * {
    pointer-events: none;
}

.editor .container.dragging,
.editor .container.active,
.editor .container:hover,
.editor .container:has(:is(.note:active, .note:focus)) {
    border: dashed 1px var(--i-blue);
}
.editor .container.active {
    z-index: 5;
}
.editor .container > .toolbar {
    display:flex;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: all 0.15s ease;
}
.editor .container > .toolbar.top {
    gap: 3px;
    min-width: 100%;
    padding-bottom: 5px;
    translate: 0 -100%;
    min-height: 25px;
}
.editor .container > .toolbar.left {
    flex-direction: column;
    min-height: 100%;
    padding-right: 5px;
    translate: -100% -30px;
}
.editor .container > .toolbar.right {
    top: unset;
    left: 100%;
    bottom: -2px;
    padding-left: 5px;
}

.editor .container.dragging > .toolbar,
.editor .container.active > .toolbar,
.editor .container:hover > .toolbar,
.editor .container:has(:is(.note:active, .note:focus)) > .toolbar {
    visibility:visible;
    opacity: 1;
    pointer-events: all;
}

.editor .container:has(.pen) {
    pointer-events: none !important;
}
.editor .container:has(.pen):hover {
    pointer-events: none;
    border: solid 1px transparent;
}

.editor .container:has(.pen):hover .toolbar {
    visibility:hidden;
    opacity: 0;
    pointer-events:none;
}

.editor .container.active:has(.pen):hover {
    border: dashed 1px var(--i-blue);
}
.editor .container.active:has(.pen):hover .toolbar {
    visibility:visible;
    opacity: 1;
    pointer-events: all;
}

.editor .container .pen svg path {
    cursor: pointer;
    pointer-events: all;
}

.editor .container:has(.pen svg path:hover) {
    border: dashed 1px var(--i-blue);
}
.editor .container:has(.pen svg path:hover) .toolbar {
    visibility:visible;
    opacity: 0.5;
    pointer-events: all;
}

.editor .container > .toolbar :is(.svg-icon, .custom) {
    position: relative;
    width: 26px;
    height: 25px;
    border-radius: 5px;
    background-color: #2a2c33;
    transition: all 0.15s ease;
}
.editor .container > .toolbar :is(.svg-icon, .custom):hover {
    opacity: 1;
    background-color: #000000a0;
}
.editor .container > .toolbar .svg-icon svg {
    height: 70%;
}
.editor .container > .toolbar .svg-icon:hover svg {
    height: 70%;
}
.editor .container > .toolbar > .drop-down > div:nth-child(2) {
    position: absolute;
    padding-top: 5px;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: all 0.15s ease;
}
.editor .container > .toolbar > .drop-down:hover > div:nth-child(2) {
    pointer-events: all;
    visibility: visible;
    opacity: 1;
}
.editor .container.no-drop-down > .toolbar > .drop-down:hover > div:nth-child(2) {
    display:none;
}

.editor .container > .toolbar > .drop-down > div:nth-child(2) > div {
    margin-bottom: 1px;
}

.editor .container > .toolbar:has(.chart-1) > :is(.chart-0, .chart-1, .anchor-0, .anchor-1)::after {
    position: absolute;
    top: calc(100% - 2px);
    left: calc(100% - 2px);
    translate: -100% -100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 9px;
    width: 11px;
    height: 11px;
    border-radius: 10px;
    background-color: var(--i-blue);
    color:#fff;
}
.editor .container > .toolbar:has(.chart-1) > :is(.chart-0, .anchor-0)::after {
    content: '1';
}
.editor .container > .toolbar:has(.chart-1) > :is(.chart-1, .anchor-1)::after {
    content: '2';
}

.editor .container > .toolbar .svg-icon.move {
    margin-bottom: 4px;
    cursor: grab;
}

.editor .container.dragging > .toolbar > .svg-icon.move {
    background-color: #000000a0;
    box-shadow: var(--hl-shadow);
    border: var(--hl-border);
    opacity: 1;
    cursor: grabbing;
}
.editor .container.dragging > .toolbar > .svg-icon.move > svg {
    fill: var(--l-blue);
}

.editor .container > .anchor {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 200px;
    transform-origin: top left;
    border-top: solid 1px var(--font-color);
}

.editor .container > .toolbar.top .custom {
    border: solid 1px #2a2c33;
    position: relative;
    color: var(--font-color);
    cursor: pointer;
}
.editor .container > .toolbar.top .custom:hover {
    box-shadow: var(--hl-shadow);
    border: var(--hl-border);
    color: var(--l-blue);
}
.editor .container > .toolbar.top .custom:hover * {
    color: var(--l-blue);
}
.editor .container > .toolbar.top .custom.text-increase::before {
    content: 'A';
    position: absolute;
    font-size: 19px;
    translate: 4px 2px;
}
.editor .container > .toolbar.top .custom.text-decrease::before {
    content: 'A';
    position: absolute;
    font-size: 17px;
    translate: 4px 4px;
}
.editor .container > .toolbar.top :is(.custom.text-increase, .custom.text-decrease)::after {
    position: absolute;
    font-size: 15px;
    top: 0px;
    left: 15px;
    color: var(--l-blue);
}

.editor .container > .toolbar.top .custom.text-increase::after {
    content: '+';
    left: 15px;
}
.editor .container > .toolbar.top .custom.text-decrease::after {
    content: '–';
    font-size: 16px;
    translate: -1px -1px;
    scale: 0.65 1;
}

.editor .container > .toolbar :is(.svg-icon.text-color, .svg-icon.fill-color) > svg {
    translate: 1px;
}
.editor .container > .toolbar 
    :is(
        .svg-icon.text-color,
        .svg-icon.fill-color,
        .svg-icon.line-color
    ) > div {
    
    position: absolute;
    width: 8px;
    height: 8px;
    left: 2px;
    bottom: 2px;
    border: solid 1px var(--l-blue);
}
.editor .container > .toolbar .svg-icon.text-color > div {
    background-color:#000;
}
.editor .container > .toolbar .svg-icon.fill-color > div {
    background-color:#fff;
}
.editor .container > .toolbar .svg-icon.line-color > div {
    background-color: #ffd000;
    left:auto;
    right: 2px;
}

.editor .container > .toolbar 
    :is(
        .svg-icon.line-width-increase,
        .svg-icon.line-width-decrease
    ) svg 
{
    height: 100%;
}


/* E2 */

.e2-factory {
    position: fixed;
    inset: 0;
    pointer-events: none;
}
.e2-factory > * {
    position: absolute;
}


/* E2.TOOLBAR */

.e2-toolbar {
    position: fixed;
    display: flex;
    flex-wrap: nowrap;
    border-radius: 5px;
    background-color: #2a2c33;
    translate: -50% -100%;
    pointer-events: none;
    overflow: visible !important;
    opacity: 0;
    z-index: 1;
    box-shadow: 0px 1px 5px 0px rgba(0 0 0 / 35%);
    transition: scale   0.15s ease,
                opacity 0.15s ease;
}
.editor:has(.e2-item.modify) .e2-toolbar {
    pointer-events: none !important;
    opacity: 0 !important;
}
.e2-toolbar.active {
    pointer-events: all;
    opacity: 1;
}
.e2-toolbar .e2-group {
    display: flex;
    flex-wrap: nowrap;
    grid-gap: 3px;
}
.e2-toolbar .hidden {
    display:none !important;
}
.e2-toolbar .svg-icon {
    width: 25px;
    height: 25px;
    border-radius: 5px;
    position:relative;
    transition: all 0.25s ease;
}
.e2-toolbar .svg-icon:hover {
    background-color: #000000a0;
}


.e2-toolbar .custom {
    border: solid 1px #2a2c33;
    width:25px;
    border-radius: 5px;
    position: relative;
    color: var(--font-color);
    cursor: pointer;
    transition: all 0.25s ease;
}
.e2-toolbar .custom:hover {
    background-color: #000000a0;
    box-shadow: var(--hl-shadow);
    border: var(--hl-border);
    color: var(--l-blue);
}
.e2-toolbar .custom:hover * {
    color: var(--l-blue);
}

.e2-toolbar .svg-icon.text-color > svg,
.e2-toolbar .svg-icon.line-color > svg {
    height: 75%;
}

.e2-toolbar .svg-icon.fill-color > svg {
    height: 73%;
}

.e2-toolbar .svg-icon.line-width-increase > svg,
.e2-toolbar .svg-icon.line-width-decrease > svg {
    height:100%;
}

.e2-toolbar 
    :is(
        .text-color,
        .fill-color,
        .line-color
    ) > div {
    
    position: absolute;
    width: 8px;
    height: 8px;
    left: 2px;
    bottom: 2px;
    border: solid 1px var(--l-blue);
}

.e2-toolbar .svg-icon.text-color > div {
    background-color:#000;
}
.e2-toolbar .svg-icon.fill-color > div {
    background-color:#fff;
}
.e2-toolbar .svg-icon.line-color > div {
    background-color: #ffd000;
    left:auto;
    right: 2px;
}

.e2-toolbar .custom.text-increase::before {
    content: 'A';
    position: absolute;
    font-size: 19px;
    translate: 3px 2px;
}
.e2-toolbar .custom.text-decrease::before {
    content: 'A';
    position: absolute;
    font-size: 17px;
    translate: 3px 4px;
}
.e2-toolbar :is(.custom.text-increase, .custom.text-decrease)::after {
    position: absolute;
    font-size: 15px;
    top: 0px;
    left: 15px;
    color: var(--l-blue);
}

.e2-toolbar .custom.text-increase::after {
    content: '+';
    left: 13px;
}
.e2-toolbar .custom.text-decrease::after {
    content: '–';
    font-size: 16px;
    translate: -2px -1px;
    scale: 0.65 1;
}

.e2-toolbar :is(.chart-0, .chart-1, .anchor-0, .anchor-1)::after {
    position: absolute;
    top: calc(100% - 2px);
    left: calc(100% - 2px);
    translate: -100% -100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 9px;
    width: 11px;
    height: 10.5px;
    border-radius: 10px;
    background-color: var(--i-blue);
    color:#fff;
}
.e2-toolbar :is(.e2-btn.active)::after {
    background-color: #2a2c33 !important;
}
.e2-toolbar :is(.chart-0, .anchor-0)::after {
    content: '1';
}
.e2-toolbar :is(.chart-1, .anchor-1)::after {
    content: '2';
}

.e2-toolbar .e2-btn {
    display: none;
    position:relative;
}
.e2-toolbar .e2-btn.active {
    background-color: var(--d-blue);
    pointer-events: none;
}
.e2-toolbar :is(.anchor-0, .anchor-1) {
    pointer-events: all !important;
}
.e2-toolbar .e2-btn.hidden {
    display: none;
}
.e2-toolbar.t-pen .e2-btn.for-pen {
    display: flex;
}
.e2-toolbar.t-highlighter .e2-btn.for-highlighter {
    display: flex;
}
.e2-toolbar.t-line .e2-btn.for-line {
    display: flex;
}
.e2-toolbar.t-spline .e2-btn.for-spline {
    display: flex;
}
.e2-toolbar.t-note .e2-btn.for-note {
    display: flex;
}
.e2-toolbar.t-measure .e2-btn.for-measure {
    display: flex;
}

/* E2.TOOLBAR-R */

.e2-item .e2-toolbar-r {
    position: absolute;
    left: 100%;
    top: -5px;
    padding-left: 10px;
    opacity: 0;
    pointer-events: all;
    transition: all 0.15s ease;
}
.e2-item.no-events {
    pointer-events: none !important;
}


/* E2.ITEM */

.e2-item,
.e2-item * {
    overflow:visible;
    cursor:pointer;
}

.e2-item:active,
.e2-item:active * {
    cursor:unset;
}
/* .e2-item.dragging {
    cursor:grabbing;
} */

/* TOP LEFT */

.e2-item .e2-grip {
    position: absolute;
    width: 15px;
    height: 15px;
    max-width:50%;
    max-height:50%;
    pointer-events: none;
    /* background-color: #4796ff80; */
    border: solid 1px var(--i-blue);
    opacity: 0;
    cursor: move;
    transition: all 0.15s ease;
}
.e2-item :is(.e2-grip:hover, .e2-grip.resizing) {
    background-color: #000000a0;
    box-shadow: var(--hl-shadow) !important;
    border: var(--hl-border) !important;
    opacity: 1 !important;
}

:is(.e2-item.active) .e2-grip {
    pointer-events: all;
    opacity: 0.5;
}

.e2-item .e2-grip.top-left {
    top: -1px;
    left: -1px;
    /* border-top: solid 1px; */
    /* border-left: solid 1px; */
}

/* TOP RIGHT */

.e2-item .e2-grip.top-right {
    top: -1px;
    right: -1px;
    /* border-top: solid 1px; */
    /* border-right: solid 1px; */
}

/* BOTTOM LEFT */

.e2-item .e2-grip.bottom-left {
    left: -1px;
    bottom: -1px;
    /* border-left: solid 1px; */
    /* border-bottom: solid 1px; */
}

/* BOTTOM RIGHT */

.e2-item .e2-grip.bottom-right {
    right: -1px;
    bottom: -1px;
    /* border-right: solid 1px; */
    /* border-bottom: solid 1px; */
}

.e2-item:hover .e2-toolbar-r {
    opacity: 0.65;
}
.e2-item.active .e2-toolbar-r {
    opacity: 1 !important;
}
.e2-toolbar-r:hover {
    opacity: 1 !important;
}
.e2-item .e2-toolbar-r > .svg-icon {
    width: 26px;
    height: 25px;
    border-radius: 5px;
    background-color: #2a2c33;
    transition: all 0.15s ease;
}
.e2-item .e2-toolbar-r > .svg-icon > svg {
    height: 70%;
}


.e2-border {
    position:absolute;
    inset: -5px -5px -4px -5px;
    border: dashed 1px var(--i-blue);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: all 0.15s ease;
}
:is(.e2-item:hover, .e2-item.active) .e2-border {
    visibility: visible;
    opacity: 1;
}

.e2-anchor {
    display: none;
    position: absolute;
    width: 200px;
    transform-origin: top left;
    border-top: solid 1px var(--font-color);
}
.e2-anchor.v {
    display:block;
}

/* .e2-measure {
    background-color: #d0000080;
} */
.e2-measure.pos {
    background-color:#0240d260;
}
.e2-measure.neg {
    background-color:#da003660;
}

.e2-measure > .grip {
    position: absolute;
    width: 15px;
    height: 15px;
    max-width:50%;
    max-height:50%;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    cursor: move;
    transition: all 0.15s ease;
}

.e2-measure:hover > .grip {
    visibility: visible;
    pointer-events: all;
    opacity: 1;
    transition: border-color 0.15s ease;
}

.e2-measure > .grip:hover {
    border-color: var(--l-blue) !important;
    background-color: #92c8fb80 !important;
}

/* TOP LEFT */

.e2-measure.neg.frwd > .grip.start,
.e2-measure.pos.bkwd > .grip.end {
    inset: 0 auto auto 0;
    border-top: solid 1px;
    border-left: solid 1px;
}

/* TOP RIGHT */

.e2-measure.neg.bkwd > .grip.start,
.e2-measure.pos.frwd > .grip.end {
    inset: 0 0 auto auto;
    border-top: solid 1px;
    border-right: solid 1px;
}

/* BOTTOM LEFT */

.e2-measure.pos.frwd > .grip.start,
.e2-measure.neg.bkwd > .grip.end {
    inset: auto auto 0 0;
    border-left: solid 1px;
    border-bottom: solid 1px;
}

/* BOTTOM RIGHT */

.e2-measure.pos.bkwd > .grip.start,
.e2-measure.neg.frwd > .grip.end {
    inset: auto 0 0 auto;
    border-right: solid 1px;
    border-bottom: solid 1px;
}

.e2-measure > .arrow {
    position:absolute;
}
.e2-measure.small > .arrow {
    display:none;
}

.e2-measure > .arrow.x {
    inset:50% 0 auto 0;
}
.e2-measure > .arrow.y {
    inset:0 auto 0 50%;
}

.e2-measure.pos > .arrow {
    border-color: #0240d2 !important;
}
.e2-measure.neg > .arrow {
    border-color: #da0036 !important;
}

.e2-measure.pos > .arrow.x {
    border-top: solid 1px;
}
.e2-measure.neg > .arrow.x {
    border-top: solid 1px;
}

.e2-measure.pos > .arrow.y {
    border-left: solid 1px;
}
.e2-measure.neg > .arrow.y {
    border-left: solid 1px;
}

.e2-measure > .arrow::after {
    content: '';
    position:absolute;
    width: 5px;
    height: 5px;
    transform-origin: 0 0;
    border-color: inherit !important;
}
.e2-measure.pos > .arrow.y::after {
    transform: rotate(45deg);
    border-top: solid 1px;
    border-left: solid 1px; 
}
.e2-measure.neg > .arrow.y::after {
    top: 100%;
    transform: rotate(-135deg);
    border-top: solid 1px;
    border-left: solid 1px; 
}

.e2-measure.pos > .arrow.x::after {

    border-top: solid 1px;
    border-left: solid 1px; 
}
.e2-measure.neg > .arrow.x::after {

    border-top: solid 1px;
    border-left: solid 1px; 
}

.e2-measure.frwd > .arrow.x::after {
    left: 100%;
    transform: rotate(135deg);
}
.e2-measure.bkwd > .arrow.x::after {
    transform: rotate(-45deg);
}

.e2-measure > .legend-measure {
    position: absolute;
    top: 100%;
    left: 50%;
    translate: -50% 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    border-radius: 3px;
    padding: 5px 10px;
    transition: translate 0.15s ease;
}
.e2-measure.top-legend > .legend-measure {
    top: 0;
    translate: -50% calc(-100% - 3px);
}

:is(.e2-measure:hover, .e2-measure.active) > .legend-measure {
    translate: -50% 10px;
}

.e2-measure.top-legend:hover > .legend-measure {
    translate: -50% calc(-100% - 37px);
}

.e2-measure > .legend-measure * {
    white-space: nowrap;
    font-size:11px;
    color: #fff;
}
.e2-measure.pos > .legend-measure {
    background-color: #0240d2;
}
.e2-measure.neg > .legend-measure {
    background-color: #da0036;
}
.e2-measure.pos > .grip {
    border-color: #0240d2 !important;
    background-color: #0240d280;
}
.e2-measure.neg > .grip {
    border-color: #da0036 !important;
    background-color: #da003680;
}


/* E2.NOTE */

.e2-note .content {
    background-color: #e5e5fff0;
    font-size: 12px;
    color: #000;
    padding:10px;
    width: max-content;
    max-width: 250px;
    border-radius: 5px;
    backdrop-filter: blur(3px);
    box-shadow: 0px 5px 10px -5px rgb(0 0 0 / 65%), 0px 1px 2px rgb(0 0 0 / 75%);
    pointer-events: none;
    cursor: text;
}
.e2-note .content * {
    font-size: inherit;
    color: inherit;
}
.e2-note.active {
    cursor: default;
}
.e2-note.active .content {
    pointer-events: all;
}
.e2-note .content:empty::before {
    content: 'New Text Note';
    font-size: inherit;
    color: inherit;
}
.e2-note:has(.content:active, .content:focus) .content:empty::before,
.e2-note.active .content:empty::before {
    content: 'Start typing...';
    font-size: inherit;
    color:inherit;
}

/* E2.PEN */

.e2-pen,
.e2-line,
.e2-spline {
    top:0;
    left:0;
    width:100%;
    height:100%;
}

/* E2-ITEM SVG */

.e2-item > svg {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.e2-item > svg path {
    cursor: pointer;
    pointer-events: stroke;
}

/* E2-CP */

.e2-item > svg .e2-cp {
    fill: #000000A0;
    stroke: var(--i-blue);
    pointer-events: all !important;
    stroke-width: 2px;
    opacity: 0;
    cursor: move;
    transition: all 0.15s ease;
}
:is(.e2-item.active, .e2-item.modify, .e2-item:hover) > svg .e2-cp {
    opacity: 0.75;
}
:is(.e2-item.active, .e2-item:hover) > svg .e2-cp:hover {
    opacity: 1;
}