@layer webcpp.reset, webcpp.layout;

@layer webcpp.reset
{
body, header, footer, section, h1, h2, h3, h4, h5, p, ul, ol, li, menu, menuitem, dialog {
    margin: 0;
    border: none;
    padding: 0;
}

dialog::backdrop {
    background: none;
}

h1, h2, h3, h4, h5 {
    font-family: inherit;
    font-weight: inherit;
    font-weight: inherit;
    text-decoration: inherit;
    font-style: inherit;
    font-size: inherit;
    line-height: inherit;
}

a, a:hover, a:visited, a:hover {
    color: inherit;
    text-decoration: none;
}
}
@layer webcpp.layout
{
basic-view {
    position: relative;
}

basic-view:focus {
    outline: none;
}

.hidden {
    display: none !important;
}

.drag-handle
{
    cursor: pointer;
}

.dragging
{
    cursor: move !important;
}
}
@layer webcpp.layout
{
dialog.modallayer {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    background: none;

    &.shaded {
        background: rgba(0, 0, 0, 0.2);
    }
}
}
@layer webcpp.layout
{
checkboxlabel-view {
    user-select: none;
}
}
@layer webcpp.layout
{
colorpicker-view {
    user-select: none;

    &:focus, &.focus {
        outline: none;
    }

    &.disabled {
        filter: grayscale();
    }

    .colorpicker-label {
        overflow: hidden;

        &:before {
            content: "\A0"; /* to ensure baseline with label and text in combobox */
        }
    }
}

colorpickerpopup-view {
    position: absolute;
    left: -1px;
    top: calc(22px - 2px);
    width: 100%;
    background: rgb(240,240,240);
    box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
    z-index: 1000;
    overflow-y: auto;
    user-select: none;
    min-width: 166px;

    .colorpickerform {
        padding: 10px;

        .colorpickercircle {
            width: 30px;
            height: 30px;
            border-radius: 15px;
            background-color: aqua;
        }

        .colorpickeredit input {
            width: 40px;
            text-align: center;
        }
    }
}

colorpickercolors-view {
    position: relative;
    width: 100%;
    height: 100px;

    .colorpickercolors-sat {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
    }

    .colorpickercolors-val {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
    }

    .colorpickercolors-dragger {
        top: calc(50% - 7px);
        left: calc(50% - 7px);
        cursor: pointer;
        position: absolute;
        z-index: 1;
        width: 12px;
        height: 12px;
        border: 2px solid white;
        border-radius: 7px;
        box-shadow: 0 0 5px rgba(0,0,0,0.15);
    }
}

colorpickerhue-view {
    position: relative;
    height: 12px;
    border-radius: 2px;
    background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);

    .colorpickerhue-dragger {
        top: -2px;
        left: calc(50% - 7px);
        cursor: pointer;
        position: absolute;
        z-index: 1;
        width: 12px;
        height: 12px;
        border: 2px solid white;
        border-radius: 7px;
        box-shadow: 0 0 5px rgba(0,0,0,0.15);
    }
}
}
@layer webcpp.layout
{
combobox-view {
    user-select: none;

    &:focus, &.focus {
        outline: none;
    }

    &.disabled {
        filter: grayscale();
    }

    .combobox-icon {
        position: absolute;
        padding-top: 1px;
        padding-right: 4px;
        width: 14px;
        height: 14px;
    }

    .combobox-label {
        overflow: hidden;
    }

    .combobox-label:before {
        content: "\A0"; /* to ensure baseline with label and text in combobox */
    }
}

comboboxpopup-view {
    position: absolute;
    left: -1px;
    top: calc(22px - 2px);
    width: 100%;
    background: white;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
    z-index: 1000;
    overflow-y: auto;
    user-select: none;
}

comboboxpopupitem-view {

    .comboboxpopup-itemselected {
    }

    imagebox-view.comboboxpopupitem-icon {
    }

    textlabel-view.comboboxpopupitem-text {
        white-space: pre;
    }

    textlabel-view.comboboxpopupitem-text:before {
        content: "\A0"; /* to ensure baseline with label and text in combobox */
    }
}

comboboxpopupitemseparator-view {
}
}
@layer webcpp.layout
{
input.datetimeedit {
    display: block;
}
}
@layer webcpp.layout
{
imagebox-view {
    display: block;
}
}
@layer webcpp.layout
{
lineedit-view {
    &.focus {
    }

    &.disabled {
    }

    input[disabled] {
        background: inherit;
    }

    input {
        display: block;
        border: none;
        padding: 0;
        margin: 0;
        min-width: 0;
        background: inherit;
        font: inherit;
        color: inherit;
    }

    input:focus {
        outline: none;
    }

    .lineedit-imagebox {
    }

    .lineedit-imagebox:hover {
    }

    &.flat {
    }
}
}
@layer webcpp.layout
{
listview-view {
}

listviewheadersplitter-view {
    cursor: ew-resize;
    justify-content: center;
}

listviewheadersplitter-view > basic-view {
    width: 1px;
}

listviewheader-view {
    overflow: scroll;
    scrollbar-width: none;
}

    listviewheader-view.sizingmode {
        cursor: ew-resize;
    }

listviewbody-view {
    overflow: auto;
    outline: none;
}

listviewitem-view {
    user-select: none;

    & > * {
        overflow: hidden;
    }
}
}
@layer webcpp.layout
{
menu-view {
    position: fixed;
    background: rgb(240,240,240);
    color: black;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
}

menuitem-view {

    .menuitem-icon {
        width: 16px;
        height: 16px;
    }

    .menuitem-text {
        white-space: pre;
    }

}

menuitemseparator-view {
    height: 1px;
}
}
@layer webcpp.layout
{
menubar-view, menubarmodal-view {
}

menubarmodal-view {
    cursor: default;
}

menubarspacer-view, menubarmodalspacer-view {
}

.menubaritem, .menubarmodalitem {
    position: relative;
}
}
@layer webcpp.layout
{
toolbarbutton-view {
    user-select: none;

    &.disabled {
        opacity: 0.5;
        filter: grayscale();
    }

    &:hover {
    }

    &.disabled:hover {
    }

    &.selected {
    }
}

imagebox-view.toolbarbutton-icon {
    width: 24px;
    height: 24px;
}

toolbarseparator-view {
    width: 1px;
    height: 24px;
}

toolbardropdown-view {
}

.toolbardropdown-combobox {
    align-self: center;
    width: 150px;
}

toolbartextinput-view {
}

.toolbartextinput-edit {
    align-self: center;
    width: 200px;
}

toolbar-view {
    align-items: center;
}

.toolbar-view {
}
}
@layer webcpp.layout
{
vtoolbarbutton-view {
    width: 65px;

    &.disabled {
        opacity: 0.5;
        filter: grayscale();
    }

    &:hover {
    }

    &.disabled:hover {
        background: none;
    }

    &.selected {
    }
}

imagebox-view.vtoolbarbutton-icon {
    width: 24px;
    height: 24px;
    align-self: center;
}

textlabel-view.vtoolbarbutton-text {
    text-align: center;
}
}
@layer webcpp.layout
{
textlabel-view {
    overflow: hidden;
}
}
@layer webcpp.layout
{
tabbartab-view {
    z-index: 1;
}

tabcontrol-view.tabsAtBottom > tabbar-view > tabbartab-view {
}

.tabbartab-icon {
    width: 20px;
    height: 20px;
    padding-right: 4px;
}

.tabbartab-label {
}

tabbartab-view.selected {
}

tabcontrol-view {
}

.tabcontrol-widgetstack {
}
}
@layer webcpp.layout
{
.svgbox {
    display: block;
}
}
@layer webcpp.layout
{
radiobuttonlabel-view {
    user-select: none;
}
}
@layer webcpp.layout
{
scrollbar-view {
    background: rgb(240,240,240);
}

scrollbarcorner-view {
    background: rgb(240,240,240);
    width: 16px;
    height: 16px;
}

.scrollbar-vert {
    width: 16px;
}

.scrollbar-horz {
    height: 16px;
}

.scrollbar-vert .scrollbar-button-decr {
    width: 16px;
    height: 16px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(167,167,167)"><polygon points="8,5 3,10 13,10"/></svg>') center;
}

    .scrollbar-vert .scrollbar-button-decr:hover {
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(147,147,147)"><polygon points="8,5 3,10 13,10"/></svg>') center;
    }

.scrollbar-vert .scrollbar-button-incr {
    width: 16px;
    height: 16px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(167,167,167)"><polygon points="8,11 3,6 13,6"/></svg>') center;
}

    .scrollbar-vert .scrollbar-button-incr:hover {
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(147,147,147)"><polygon points="8,11 3,6 13,6"/></svg>') center;
    }

.scrollbar-horz .scrollbar-button-decr {
    width: 16px;
    height: 16px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(167,167,167)"><polygon points="5,8 10,3 10,13"/></svg>') center;
}

    .scrollbar-horz .scrollbar-button-decr:hover {
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(147,147,147)"><polygon points="5,8 10,3 10,13"/></svg>') center;
    }

.scrollbar-horz .scrollbar-button-incr {
    width: 16px;
    height: 16px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(167,167,167)"><polygon points="11,8 6,3 6,13"/></svg>') center;
}

    .scrollbar-horz .scrollbar-button-incr:hover {
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(147,147,147)"><polygon points="11,8 6,3 6,13"/></svg>') center;
    }

.scrollbar-vert .scrollbar-track {
    width: 16px;
}

.scrollbar-horz .scrollbar-track {
    height: 16px;
}

.scrollbar-thumb {
    background: rgb(197,197,197);
}

    .scrollbar-thumb:hover {
        background: rgb(167,167,167);
    }

    .scrollbar-vert .scrollbar-thumb {
        left: 4px;
        right: 4px;
        top: 0;
        bottom: 0;
    }

.scrollbar-horz .scrollbar-thumb {
    top: 4px;
    bottom: 4px;
    left: 0;
    right: 0;
}

.uses-scrollbar {
    scrollbar-width: none;
    overflow: scroll;
}
}
@layer webcpp.layout
{
imagecanvas-view {
    position: relative;
    & canvas {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
}
}
@layer webcpp.layout
{
splitview-view {
	overflow: hidden;
	min-width: 0;
}

splitview-divider-view {
	width: 12px;
	min-width: 12px;
	flex-shrink: 0;
	cursor: col-resize;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
}

splitview-divider-view::after {
	content: '';
	width: 3px;
	height: 32px;
	border-radius: 2px;
	background-color: #ccc;
	transition: background-color 0.15s, height 0.15s;
}

splitview-divider-view:hover::after,
splitview-divider-view.dragging::after {
	filter: brightness(0.6);
	height: 48px;
}
}



@layer controls.theme
{
@font-face {
	font-family: 'Nunito Sans';
	font-style: normal;
	font-stretch: 100%;
	font-display: swap;
	src: url('/assets/fonts/Nunito_Sans/NunitoSans-VariableFont.woff2') format('woff2');
}

@font-face {
	font-family: 'Nunito Sans';
	font-style: italic;
	font-stretch: 100%;
	font-display: swap;
	src: url('/assets/fonts/Nunito_Sans/NunitoSans-Italic-VariableFont.woff2') format('woff2');
}

@font-face {
	font-family: 'Aspekta';
	font-style: normal;
	font-weight: 50;
	font-display: swap;
	src: url('/assets/fonts/Aspekta/Aspekta-50.woff2') format('woff2');
}

@font-face {
	font-family: 'Aspekta';
	font-style: normal;
	font-weight: 100;
	font-display: swap;
	src: url('/assets/fonts/Aspekta/Aspekta-100.woff2') format('woff2');
}

@font-face {
	font-family: 'Aspekta';
	font-style: normal;
	font-weight: 150;
	font-display: swap;
	src: url('/assets/fonts/Aspekta/Aspekta-150.woff2') format('woff2');
}

@font-face {
	font-family: 'Aspekta';
	font-style: normal;
	font-weight: 200;
	font-display: swap;
	src: url('/assets/fonts/Aspekta/Aspekta-200.woff2') format('woff2');
}

@font-face {
	font-family: 'Aspekta';
	font-style: normal;
	font-weight: 250;
	font-display: swap;
	src: url('/assets/fonts/Aspekta/Aspekta-250.woff2') format('woff2');
}

@font-face {
	font-family: 'Aspekta';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('/assets/fonts/Aspekta/Aspekta-300.woff2') format('woff2');
}

@font-face {
	font-family: 'Aspekta';
	font-style: normal;
	font-weight: 350;
	font-display: swap;
	src: url('/assets/fonts/Aspekta/Aspekta-350.woff2') format('woff2');
}

@font-face {
	font-family: 'Aspekta';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/assets/fonts/Aspekta/Aspekta-400.woff2') format('woff2');
}

@font-face {
	font-family: 'Aspekta';
	font-style: normal;
	font-weight: 450;
	font-display: swap;
	src: url('/assets/fonts/Aspekta/Aspekta-450.woff2') format('woff2');
}

@font-face {
	font-family: 'Aspekta';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('/assets/fonts/Aspekta/Aspekta-500.woff2') format('woff2');
}

@font-face {
	font-family: 'Aspekta';
	font-style: normal;
	font-weight: 550;
	font-display: swap;
	src: url('/assets/fonts/Aspekta/Aspekta-550.woff2') format('woff2');
}

@font-face {
	font-family: 'Aspekta';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('/assets/fonts/Aspekta/Aspekta-600.woff2') format('woff2');
}

@font-face {
	font-family: 'Aspekta';
	font-style: normal;
	font-weight: 650;
	font-display: swap;
	src: url('/assets/fonts/Aspekta/Aspekta-650.woff2') format('woff2');
}

@font-face {
	font-family: 'Aspekta';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/assets/fonts/Aspekta/Aspekta-700.woff2') format('woff2');
}

@font-face {
	font-family: 'Aspekta';
	font-style: normal;
	font-weight: 750;
	font-display: swap;
	src: url('/assets/fonts/Aspekta/Aspekta-750.woff2') format('woff2');
}

@font-face {
	font-family: 'Aspekta';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('/assets/fonts/Aspekta/Aspekta-800.woff2') format('woff2');
}

@font-face {
	font-family: 'Aspekta';
	font-style: normal;
	font-weight: 850;
	font-display: swap;
	src: url('/assets/fonts/Aspekta/Aspekta-850.woff2') format('woff2');
}

@font-face {
	font-family: 'Aspekta';
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url('/assets/fonts/Aspekta/Aspekta-900.woff2') format('woff2');
}

@font-face {
	font-family: 'Aspekta';
	font-style: normal;
	font-weight: 950;
	font-display: swap;
	src: url('/assets/fonts/Aspekta/Aspekta-950.woff2') format('woff2');
}

@font-face {
	font-family: 'Aspekta';
	font-style: normal;
	font-weight: 1000;
	font-display: swap;
	src: url('/assets/fonts/Aspekta/Aspekta-1000.woff2') format('woff2');
}
:root {
    --laser-red-hex: #FA4244;
    --laser-red-rgb: 250,66,68;
    --laser-red-text-hex: var(--warm-grey-hex);
    --laser-red-text-rgb: var(--warm-grey-rgb);
    --warm-grey-hex: #FCF3EB;
    --warm-grey-rgb: 252,243,235;
    --warm-grey-text-hex: #000000;
    --warm-grey-text-rgb: 0,0,0;
    --warm-grey-95-hex: #EFE7DF;
    --warm-grey-95-rgb: 239,231,223;
    --warm-grey-90-hex: #E3DBD4;
    --warm-grey-90-rgb: 227,219,212;
    --warm-grey-85-hex: #D6CFC8;
    --warm-grey-85-rgb: 214,207,200;
    --warm-grey-80-hex: #CAC2BC;
    --warm-grey-80-rgb: 202,194,188;
    --dark-red-hex: #330E10;
    --dark-red-rgb: 51,14,16;
    --dark-red-text-hex: var(--warm-grey-hex);
    --dark-red-text-rgb: var(--warm-grey-rgb);
    --light-green-hex: #E1FAE1;
    --light-green-rgb: 225,250,225;
    --light-green-text-hex: #000000;
    --light-green-text-rgb: 0,0,0;
    --dark-green-hex: #07362F;
    --dark-green-rgb: 7,54,47;
    --dark-green-text-hex: var(--light-green-hex);
    --dark-green-text-rgb: var(--light-green-rgb);
    --light-yellow-hex: #FFF1B7;
    --light-yellow-rgb: 255,241,183;
    --light-yellow-text-hex: #000000;
    --light-yellow-text-rgb: 0,0,0;
    --dark-brown-hex: #483815;
    --dark-brown-rgb: 72,56,21;
    --dark-brown-text-hex: var(--light-yellow-hex);
    --dark-brown-text-rgb: var(--light-yellow-rgb);
    --light-blue-hex: #C9E4F6;
    --light-blue-rgb: 201,228,246;
    --light-blue-text-hex: var(--dark-blue-hex);
    --light-blue-text-rgb: var(--dark-blue-rgb);
    --mid-blue-hex: #1e4a6e;
    --mid-blue-rgb: 30,74,110;
    --dark-blue-hex: #132638;
    --dark-blue-rgb: 19,38,56;
    --dark-blue-text-hex: var(--light-blue-hex);
    --dark-blue-text-rgb: var(--light-blue-rgb);
    --link-blue-hex: #1a5ca0;
    --light-purple-hex: #DAD4FF;
    --light-purple-rgb: 218,212,255;
    --dark-purple-hex: #170E40;
    --dark-purple-rgb: 23,14,64;
    --dark-purple-text-hex: var(--light-purple-hex);
    --dark-purple-text-rgb: var(--light-purple-rgb);

    /* Accent color palette — used by subscription plan tiles and home tile accents */
    /* Each color has four variants:                                                */
    /*   -hex      saturated accent for light theme (text, border)                 */
    /*   -pale-hex pastel background for light theme                               */
    /*   -light-hex lighter accent for dark theme (readable on dark backgrounds)   */
    /*   -deep-hex dark tinted background for dark theme                           */
    --cobalt-hex: #2563eb;    --cobalt-pale-hex: #dbeafe; --cobalt-light-hex: #93c5fd; --cobalt-deep-hex: #1e3a5f;
    --jade-hex: #16a34a;      --jade-pale-hex: #dcfce7;   --jade-light-hex: #86efac;   --jade-deep-hex: #14532d;
    --teal-hex: #0891b2;      --teal-pale-hex: #cffafe;   --teal-light-hex: #67e8f9;   --teal-deep-hex: #164e63;
    --violet-hex: #9333ea;    --violet-pale-hex: #f3e8ff; --violet-light-hex: #c4b5fd; --violet-deep-hex: #3b0764;
    --rose-hex: #db2777;      --rose-pale-hex: #fce7f3;   --rose-light-hex: #fda4af;   --rose-deep-hex: #4c0519;
    --crimson-hex: #dc2626;   --crimson-pale-hex: #fee2e2; --crimson-light-hex: #fca5a5; --crimson-deep-hex: #450a0a;
    --amber-hex: #d97706;     --amber-pale-hex: #fef3c7;  --amber-light-hex: #fcd34d;  --amber-deep-hex: #451a03;
    --tangerine-hex: #ea580c; --tangerine-pale-hex: #fed7aa; --tangerine-light-hex: #fdba74; --tangerine-deep-hex: #431407;
    --olive-hex: #65a30d;     --olive-pale-hex: #ecfccb;  --olive-light-hex: #bef264;  --olive-deep-hex: #1a2e05;
    --slate-hex: #475569;     --slate-pale-hex: #f1f5f9;  --slate-light-hex: #94a3b8;  --slate-deep-hex: #0f172a;
}
[data-theme=light] {
    --page-font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --page-font-size: 16px;
    --page-line-height: 24px;
    --page-color: var(--warm-grey-text-hex);
    --page-bgcolor: white;
    --page-content-bgcolor: white;
    --tile-bgcolor: var(--light-green-hex);
    --tile-accent: var(--jade-hex);
    --websiteheader-bordercolor: var(--dark-blue-hex);
    --websiteheader-bgcolor: var(--dark-blue-hex);
    --websitelogo-color: var(--dark-blue-text-hex);
    --websitethemebutton-color: rgb(56, 116, 255);
    --websitethemebutton-bgcolor: rgba(133, 169, 255, 0.24);
    --websitethemebutton-hover-color: #e5edff;
    --websitethemebutton-hover-bgcolor: rgba(133, 169, 255, 0.7);
    --sidenavigation-bordercolor: var(--warm-grey-hex);
    --sidenavigation-bgcolor: var(--warm-grey-hex);
    --sidenavigationgroup-color: var(--warm-grey-text-hex);
    --sidenavigationitem-color: var(--warm-grey-text-hex);
    --sidenavigationitem-hover-bgcolor: var(--light-purple-hex);
    --sidenavigationitem-active-bgcolor: var(--warm-grey-95-hex);
    --sidenavigationitem-active-color: var(--warm-grey-text-hex);
    --topnavigation-bordercolor: var(--warm-grey-hex);
    --topnavigation-bgcolor: var(--warm-grey-hex);
    --topnavigationitem-color: var(--warm-grey-text-hex);
    --topnavigationitem-hover-bgcolor: var(--light-purple-hex);
    --topnavigationitem-active-bgcolor: var(--warm-grey-95-hex);
    --topnavigationitem-active-color: var(--warm-grey-text-hex);
    --breadcrumbitem-color: var(--dark-blue-hex);
    --breadcrumbitem-hover-color: var(--link-blue-hex);
    --breadcrumbitem-active-color: var(--dark-red-hex);
    --breadcrumbitem-arrow-color: var(--dark-red-hex);
    --pagetitle-color: black;
    --pagelist-border-color: var(--light-blue-hex);
    --pagelist-bgcolor: white;
    --pagelist-selected-color: var(--light-blue-hex);
    --pagelist-header-bgcolor: var(--warm-grey-hex);
    --pagelist-header-text-color: rgb(63,60,58);
    --formtitle-color: rgb(20, 24, 36);
    --formtitle-error: rgb(255, 25, 25);
    --signinpage-brief-color: rgb(82, 91, 117);
    --signoutpage-brief-color: rgb(82, 91, 117);
    --signuppage-brief-color: rgb(82, 91, 117);
    --forgotpasswordpage-brief-color: rgb(82, 91, 117);
    --resetpasswordpage-brief-color: rgb(82, 91, 117);
    --forbiddenpage-brief-color: rgb(82, 91, 117);
    --notfoundpage-brief-color: rgb(82, 91, 117);
    --servererrorpage-brief-color: rgb(82, 91, 117);
    --form-color: rgb(49, 55, 74);
    --lineedit-border-color: var(--light-blue-hex);
    --lineedit-background-color: white;
    --lineedit-color: var(--warm-grey-text-hex);
    --lineedit-focus-bg-color: white;
    --lineedit-focus-rgb: var(--light-blue-rgb);
    --rangeslider-accent-color: #666;
    --rangeslider-background-color: white;
    --rangeslider-focus-bg-color: white;
    --rangeslider-focus-rgb: var(--light-blue-rgb);
    --spinbox-border-color: var(--light-blue-hex);
    --spinbox-background-color: white;
    --spinbox-focus-bg-color: white;
    --spinbox-focus-rgb: var(--light-blue-rgb);
    --button-background-color: var(--light-blue-hex);
    --button-color: var(--light-blue-text-hex);
    --button-hover-background-color: var(--light-purple-hex);
    --checkbox-color: black;
    --checkbox-border-color: var(--dark-blue-hex);
    --checkbox-focus-border-color: var(--dark-blue-hex);
    --checkbox-focus-bg-color: white;
    --checkbox-focus-rgb: var(--light-blue-hex);
    --radiobutton-color: black;
    --radiobutton-border-color: var(--dark-blue-hex);
    --radiobutton-focus-border-color: var(--dark-blue-hex);
    --radiobutton-focus-bg-color: white;
    --radiobutton-focus-rgb: var(--light-blue-hex);
    --dialog-closebutton-background: var(--laser-red-hex);
    --dialog-panelcolor: white;
    --dialog-paneledge-color: var(--light-blue-rgb);
    --dialog-header-background: var(--dark-blue-hex);
    --dialog-header-color: var(--dark-red-text-hex);
    --dialog-buttonbar-background: var(--warm-grey-hex);
    --messagebox-background: white;
    --formeditor-panel-bgcolor: var(--warm-grey-hex);
    --formeditor-panel-color: black;
    --formeditor-panel-bordercolor: var(--warm-grey-95-hex);
    --formeditor-workspace-bgcolor: grey;
    --formeditor-ruler-bgcolor: var(--warm-grey-hex);
    --formeditor-ruler-bordercolor: var(--warm-grey-95-hex);
    --formeditor-ruler-linecolor: grey;
    --formeditor-ruler-textcolor: black;
    --formeditor-xmlline-tagcolor: grey;
    --formeditor-xmlline-tagnamecolor: var(--dark-blue-hex);
    --formeditor-xmlline-tagpatternbgcolor: lightgreen;
    --formeditor-xmlline-tagfieldbgcolor: lightgoldenrodyellow;
    --formeditor-jsonline-tagcolor: grey;
    --formeditor-jsonline-tagnamecolor: var(--dark-blue-hex);
    --formeditor-jsonline-tagvalueselectedbgcolor: lightgreen;
    --scrollbar-bgcolor: var(--warm-grey-hex);
    --scrollbar-thumbbgcolor: var(--warm-grey-85-hex);
    --scrollbar-thumbhoverbgcolor: var(--warm-grey-80-hex);
    --scrollbar-vert-button-decr-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(214,207,200)"><polygon points="8,5 3,10 13,10"/></svg>');
    --scrollbar-vert-button-decr-hovericon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(202,194,188)"><polygon points="8,5 3,10 13,10"/></svg>');
    --scrollbar-vert-button-incr-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(214,207,200)"><polygon points="8,11 3,6 13,6"/></svg>');
    --scrollbar-vert-button-incr-hovericon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(202,194,188)"><polygon points="8,11 3,6 13,6"/></svg>');
    --scrollbar-horz-button-decr-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(214,207,200)"><polygon points="5,8 10,3 10,13"/></svg>');
    --scrollbar-horz-button-decr-hovericon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(202,194,188)"><polygon points="5,8 10,3 10,13"/></svg>');
    --scrollbar-horz-button-incr-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(214,207,200)"><polygon points="11,8 6,3 6,13"/></svg>');
    --scrollbar-horz-button-incr-hovericon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(202,194,188)"><polygon points="11,8 6,3 6,13"/></svg>');
    --celllogtext-text-bgcolor: transparent;
    --celllogtext-text-color: black;
    --celllogtext-quoted-bgcolor: transparent;
    --celllogtext-quoted-color: rgb(172, 0, 172);
    --celllogtext-url-bgcolor: transparent;
    --celllogtext-url-color: rgb(192, 53, 217);
    --celllogtext-guid-bgcolor: transparent;
    --celllogtext-guid-color: rgb(0, 127, 127);
    --celllogtext-brackets-bgcolor: transparent;
    --celllogtext-brackets-color: rgb(0, 64, 64);
    --celllogtext-brackettext-bgcolor: transparent;
    --celllogtext-brackettext-color: rgb(0, 128, 128);
    --celllogtext-jobinfovalue-bgcolor: transparent;
    --celllogtext-jobinfovalue-color: rgb(0, 127, 127);
    --celllogtext-jobinfo-bgcolor: transparent;
    --celllogtext-jobinfo-color: rgb(175, 87, 190);
    --celllogtext-highlight-bgcolor: rgb(255, 255, 183);
    --celllogtext-highlight-color: black;

    [data-theme-only]:not([data-theme-only=light]) {
        display: none !important;
    }
}
[data-theme=dark] {
    --page-font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --page-font-size: 16px;
    --page-line-height: 24px;
    --page-color: white;
    --page-bgcolor: #1b1b1b;
    --page-content-bgcolor: #1b1b1b;
    --tile-bgcolor: var(--dark-green-hex);
    --tile-accent: var(--jade-light-hex);
    --websiteheader-bordercolor: var(--dark-blue-hex);
    --websiteheader-bgcolor: var(--dark-blue-hex);
    --websitelogo-color: var(--dark-blue-text-hex);
    --websitethemebutton-color: rgb(56, 116, 255);
    --websitethemebutton-bgcolor: rgba(133, 169, 255, 0.24);
    --websitethemebutton-hover-color: #e5edff;
    --websitethemebutton-hover-bgcolor: rgba(133, 169, 255, 0.7);
    --sidenavigation-bordercolor: #222;
    --sidenavigation-bgcolor: #222;
    --sidenavigationgroup-color: white;
    --sidenavigationitem-color: white;
    --sidenavigationitem-hover-bgcolor: var(--mid-blue-hex);
    --sidenavigationitem-active-bgcolor: #383838;
    --sidenavigationitem-active-color: white;
    --topnavigation-bordercolor: #222;
    --topnavigation-bgcolor: #222;
    --topnavigationitem-color: white;
    --topnavigationitem-hover-bgcolor: var(--mid-blue-hex);
    --topnavigationitem-active-bgcolor: #383838;
    --topnavigationitem-active-color: white;
    --breadcrumbitem-color: var(--light-blue-hex);
    --breadcrumbitem-hover-color: white;
    --breadcrumbitem-active-color: var(--light-red-hex);
    --breadcrumbitem-arrow-color: var(--light-red-hex);
    --pagetitle-color: white;
    --pagelist-border-color: #666;
    --pagelist-bgcolor: #1b1b1b;
    --pagelist-selected-color: #333;
    --pagelist-header-bgcolor: #222;
    --pagelist-header-text-color: #999;
    --formtitle-color: white;
    --formtitle-error: rgb(255, 50, 50);
    --signinpage-brief-color: rgb(138, 148, 173);
    --signoutpage-brief-color: rgb(138, 148, 173);
    --signuppage-brief-color: rgb(138, 148, 173);
    --forgotpasswordpage-brief-color: rgb(138, 148, 173);
    --resetpasswordpage-brief-color: rgb(138, 148, 173);
    --forbiddenpage-brief-color: rgb(138, 148, 173);
    --notfoundpage-brief-color: rgb(138, 148, 173);
    --servererrorpage-brief-color: rgb(138, 148, 173);
    --form-color: rgb(159, 166, 188);
    --lineedit-border-color: #666;
    --lineedit-background-color: #1b1b1b;
    --lineedit-color: white;
    --lineedit-focus-bg-color: #1b1b1b;
    --lineedit-focus-rgb: #666;
    --rangeslider-accent-color: #666;
    --rangeslider-background-color: #1b1b1b;
    --rangeslider-focus-bg-color: #1b1b1b;
    --rangeslider-focus-rgb: #666;
    --spinbox-border-color: #666;
    --spinbox-background-color: #1b1b1b;
    --spinbox-focus-bg-color: #1b1b1b;
    --spinbox-focus-rgb: #666;
    --button-background-color: var(--dark-blue-hex);
    --button-color: var(--dark-blue-text-hex);
    --button-hover-background-color: var(--mid-blue-hex);
    --checkbox-color: white;
    --checkbox-border-color: var(--light-blue-hex);
    --checkbox-focus-border-color: var(--light-blue-hex);
    --checkbox-focus-bg-color: #1b1b1b;
    --checkbox-focus-rgb: var(--dark-blue-hex);
    --radiobutton-color: white;
    --radiobutton-border-color: var(--light-blue-hex);
    --radiobutton-focus-border-color: var(--light-blue-hex);
    --radiobutton-focus-bg-color: #1b1b1b;
    --radiobutton-focus-rgb: var(--dark-blue-hex);
    --dialog-closebutton-background: var(--laser-red-hex);
    --dialog-panelcolor: #1b1b1b;
    --dialog-paneledge-color: var(--dark-blue-rgb);
    --dialog-header-background: #222;
    --dialog-header-color: white;
    --dialog-buttonbar-background: #222;
    --messagebox-background: #1b1b1b;
    --formeditor-panel-bgcolor: #222;
    --formeditor-panel-color: white;
    --formeditor-panel-bordercolor: #282828;
    --formeditor-workspace-bgcolor: #444;
    --formeditor-ruler-bgcolor: #222;
    --formeditor-ruler-bordercolor: #282828;
    --formeditor-ruler-linecolor: grey;
    --formeditor-ruler-textcolor: white;
    --formeditor-xmlline-tagcolor: grey;
    --formeditor-xmlline-tagnamecolor: var(--light-blue-hex);
    --formeditor-xmlline-tagpatternbgcolor: darkgreen;
    --formeditor-xmlline-tagfieldbgcolor: brown;
    --formeditor-jsonline-tagcolor: grey;
    --formeditor-jsonline-tagnamecolor: var(--light-blue-hex);
    --formeditor-jsonline-tagvalueselectedbgcolor: brown;
    --scrollbar-bgcolor: #222;
    --scrollbar-thumbbgcolor: #666;
    --scrollbar-thumbhoverbgcolor: #888;
    --scrollbar-vert-button-decr-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(102,102,102)"><polygon points="8,5 3,10 13,10"/></svg>');
    --scrollbar-vert-button-decr-hovericon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(136,136,136)"><polygon points="8,5 3,10 13,10"/></svg>');
    --scrollbar-vert-button-incr-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(102,102,102)"><polygon points="8,11 3,6 13,6"/></svg>');
    --scrollbar-vert-button-incr-hovericon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(136,136,136)"><polygon points="8,11 3,6 13,6"/></svg>');
    --scrollbar-horz-button-decr-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(102,102,102)"><polygon points="5,8 10,3 10,13"/></svg>');
    --scrollbar-horz-button-decr-hovericon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(136,136,136)"><polygon points="5,8 10,3 10,13"/></svg>');
    --scrollbar-horz-button-incr-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(102,102,102)"><polygon points="11,8 6,3 6,13"/></svg>');
    --scrollbar-horz-button-incr-hovericon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(136,136,136)"><polygon points="11,8 6,3 6,13"/></svg>');
    --celllogtext-text-bgcolor: transparent;
    --celllogtext-text-color: white;
    --celllogtext-quoted-bgcolor: transparent;
    --celllogtext-quoted-color: rgb(172, 50, 172);
    --celllogtext-url-bgcolor: transparent;
    --celllogtext-url-color: rgb(192, 53, 217);
    --celllogtext-guid-bgcolor: transparent;
    --celllogtext-guid-color: rgb(0, 127, 127);
    --celllogtext-brackets-bgcolor: transparent;
    --celllogtext-brackets-color: rgb(0, 164, 164);
    --celllogtext-brackettext-bgcolor: transparent;
    --celllogtext-brackettext-color: rgb(0, 128, 128);
    --celllogtext-jobinfovalue-bgcolor: transparent;
    --celllogtext-jobinfovalue-color: rgb(0, 127, 127);
    --celllogtext-jobinfo-bgcolor: transparent;
    --celllogtext-jobinfo-color: rgb(175, 87, 190);
    --celllogtext-highlight-bgcolor: rgb(100, 100, 0);
    --celllogtext-highlight-color: white;

    [data-theme-only]:not([data-theme-only=dark]) {
        display: none !important;
    }
}
breadcrumb-view {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

breadcrumbitem-view {
    cursor: pointer;
    color: var(--breadcrumbitem-color);

    &:not(.active):hover {
        color: var(--breadcrumbitem-hover-color);
        text-decoration: underline;
    }

    &.active {
        cursor: default;
        color: var(--breadcrumbitem-active-color);
        font-weight: 400;
    }
}

breadcrumbitem-view + breadcrumbitem-view {
    padding-left: 0.5rem;
}

breadcrumbitem-view + breadcrumbitem-view::before {
    padding-right: 0.5rem;
    color: var(--breadcrumbitem-arrow-color);
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='10' width='6' fill='%236e7891' viewBox='0 0 256 480'%3E%3Cpath d='M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z'/%3E%3C/svg%3E");
}
button-view {
    button {
        background: var(--button-background-color);
        color: var(--button-color);
        border: none;
        border-radius: 6px;
        text-align: center;
        cursor: pointer;
        font-family: var(--page-font-family);
        font-size: 13px;
        line-height: 15px;
        padding: 11px 24px;

        &:hover {
            background: var(--button-hover-background-color);
        }
    }
}
input[type=checkbox] {
    appearance: none;
    display: inline-block;
    background: none; /* resets gradient background on safari */
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: var(--icon-checkbox-unchecked);
    margin: 0;
    border: none;
    padding: 0;
    width: 20px;
    height: 20px;
    align-self: center;

    &:focus {
        outline: 0;
    }

    &:checked {
        background-image: var(--icon-checkbox-checked);
    }

    &:disabled {
        filter: grayscale(100%);
        opacity: 0.5;
    }
}

checkboxlabel-view {
    font-size: 13px;
    line-height: 24px;
    color: var(--checkbox-color);

    textlabel-view {
        margin-left: 2px;
    }
}
combobox-view {
    border-style: solid;
    border-width: 1px;
    border-color: var(--lineedit-border-color);
    border-radius: 6px;
    background: var(--lineedit-background-color);
    background-image: var(--icon-arrow-down);
    background-position: right 14px center;
    background-repeat: no-repeat;
    background-size: 20px;
    font-size: 13px;
    line-height: 19px;
    padding: 10px 41px 6px 16px;

    &:has(.combobox-label-hasicon) {
        padding-left: 38px;
    }
    min-height: 19px !important;
    color: var(--lineedit-color);
    position: relative;

    lineedit-view.combobox-lineedit {
        margin: 0;
        border: none;
        padding: 0;
        font-size: inherit;
        line-height: inherit;
        background: none;

        &.focus {
            box-shadow: none;
        }
    }

    .combobox-label::before {
        content: none;
    }

    imagebox-view.combobox-icon {
        position: absolute !important;
        top: 8px;
        left: 14px;
        width: 20px !important;
        height: 20px !important;
        padding: 0 !important;

        img {
            width: 20px;
            height: 20px;
        }
    }
    /*
    &.focus {
        border-color: #3874ff;
        box-shadow: inset 0 1px 2px transparent, inset 0 0 0 30px var(--lineedit-focus-bg-color), 0 0 0 0.25rem rgba(var(--lineedit-focus-rgb), 0.25);
    }
    */
}

comboboxpopup-view {
    border-style: solid;
    border-width: 1px;
    border-color: #3874ff;
    border-radius: 6px;
    background: var(--lineedit-background-color);
    font-size: 13px;
    line-height: 19px;
    padding: 8px;
    color: var(--lineedit-color);
    box-sizing: border-box;
    box-shadow: inset 0 1px 2px transparent, inset 0 0 0 30px var(--lineedit-focus-bg-color), 0 0 0 0.25rem rgba(var(--lineedit-focus-rgb), 0.25) !important;

    imagebox-view.comboboxpopupitem-icon {
        img {
            width: 20px;
            height: 20px;
        }
    }
}

comboboxpopupitem-view {
    padding: 6px;
    border-radius: 6px;

    &.comboboxpopup-itemselected {
        background: var(--lineedit-border-color);
    }
}
dialog {
    color: inherit;
}

dialog-view {
    position: fixed;
    background: var(--dialog-panelcolor);
    box-shadow: 0 0 10px rgba(0,0,0,0.25);
    border-radius: 6px;
    overflow: clip;
}

dialogheader-view {
    background: var(--dialog-header-background);
    color: var(--dialog-header-color);
    line-height: 36px;
    height: 36px;
}

textlabel-view.dialogheader-caption {
    padding-left: 40px;
    text-align: center;
}

dialogbuttonbar-view {
    padding: 10px 15px;
    gap: 10px;
    background: var(--dialog-buttonbar-background);

    button-view.dialogbuttonbar-button {
        margin: 0 5px;

        button {
            background: var(--button-background-color);
            color: var(--button-color);
            border: none;
            border-radius: 6px;
            text-align: center;
            cursor: pointer;
            font-family: var(--page-font-family);
            font-size: 13px;
            line-height: 15px;
            padding: 11px 24px 9px 24px;
            outline: 0;
            min-width: 90px;

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

            &[disabled] {
                filter: grayscale();
                opacity: 0.5;
            }
        }
    }
}

.dialogheaderbutton {
    width: 12px;
    height: 12px;
    padding: 12px 14px;
}

.dialogheader-closebutton.dialogheaderbutton:hover {
    background: var(--dialog-closebutton-background);
}

.messagebox > .dialog-centerview {
    padding: 15px 15px 45px 15px;
    border-bottom: 1px solid var(--dialog-paneledge-color);
    background: var(--messagebox-background);
}

pageform-view.dialog-centerview {
    margin: 15px 20px;
}
textlabel-view.pageformlink {
    font-size: 13px;
    a {
        text-decoration: underline;
    }
}

textlabel-view.pageformtitle {
    color: var(--formtitle-color);
    font-size: 25px;
    line-height: 25px;
    margin-top: 16px;
    margin-bottom: 16px;

    &:first-child {
        margin-top: 0;
    }
}

textlabel-view.pageformerror {
    color: var(--formtitle-error);
    font-size: 13px;
    line-height: 24px;
}

textlabel-view.pageformsubtitle {
    color: var(--formtitle-color);
    font-size: 16px;
    line-height: 16px;
    margin-top: 16px;
}

textlabel-view.pageformlabel,
textlabel-view.pageformtextlabel {
    color: var(--formtitle-color);
    font-size: 13px;
    line-height: 24px;
}

lineedit-view.pageformlineedit {
}

imagebox-view.pageformimagebox {
}

pageformline-view {
    margin: 5px 0;
}

propertiespage-view {
    overflow: auto;
}
lineedit-view {
    border-style: solid;
    border-width: 1px;
    border-color: var(--lineedit-border-color);
    border-radius: 6px;
    background: var(--lineedit-background-color);
    padding: 10px 16px 8px 16px;
    color: var(--lineedit-color);

    input {
        font-size: 13px;
        line-height: 19px;
    }

    &.focus {
        border-color: #3874ff;
        box-shadow: inset 0 1px 2px transparent, inset 0 0 0 30px var(--lineedit-focus-bg-color), 0 0 0 0.25rem rgba(var(--lineedit-focus-rgb), 0.25);
    }
}
listview-view.pagelist {
    border: 1px solid var(--pagelist-border-color);
    background-color: var(--pagelist-bgcolor);
    min-height: 88px;
    border-radius: 6px;
    overflow: clip; /* needed for border-radius to also clip the header */

    listviewheader-view {
        border-bottom: 1px solid var(--pagelist-border-color);
        padding-top: 9px;
        padding-bottom: 7px;
        line-height: 28px;
        white-space: nowrap;
        font-size: 13px;
        font-weight: 500;
        background: var(--pagelist-header-bgcolor);
        color: var(--pagelist-header-text-color);

        & > textlabel-view:first-child {
            padding-left: 28px;
            box-sizing: border-box;
        }
    }

    listviewheadersplitter-view {
        width: 10px;

        basic-view {
            border-right: 1px solid var(--pagelist-border-color);
        }
    }

    listviewbody-view {
    }

    /* Column visibility: CSS class col-N-hidden on the listview hides column N's header label and adjacent splitter.
       For column i>0: nth-child(2*i)=splitter before, nth-child(2*i+1)=label.
       For i=0: nth-child(1)=label, nth-child(2)=splitter after. */
    &.col-0-hidden listviewheader-view > :nth-child(1),
    &.col-0-hidden listviewheader-view > :nth-child(2) { display: none; }
    &.col-1-hidden listviewheader-view > :nth-child(2),
    &.col-1-hidden listviewheader-view > :nth-child(3) { display: none; }
    &.col-2-hidden listviewheader-view > :nth-child(4),
    &.col-2-hidden listviewheader-view > :nth-child(5) { display: none; }
    &.col-3-hidden listviewheader-view > :nth-child(6),
    &.col-3-hidden listviewheader-view > :nth-child(7) { display: none; }
    &.col-4-hidden listviewheader-view > :nth-child(8),
    &.col-4-hidden listviewheader-view > :nth-child(9) { display: none; }
    &.col-5-hidden listviewheader-view > :nth-child(10),
    &.col-5-hidden listviewheader-view > :nth-child(11) { display: none; }
    &.col-6-hidden listviewheader-view > :nth-child(12),
    &.col-6-hidden listviewheader-view > :nth-child(13) { display: none; }
    &.col-7-hidden listviewheader-view > :nth-child(14),
    &.col-7-hidden listviewheader-view > :nth-child(15) { display: none; }
    &.col-8-hidden listviewheader-view > :nth-child(16),
    &.col-8-hidden listviewheader-view > :nth-child(17) { display: none; }
    &.col-9-hidden listviewheader-view > :nth-child(18),
    &.col-9-hidden listviewheader-view > :nth-child(19) { display: none; }

    listviewitem-view {
        border-bottom: 1px solid var(--pagelist-border-color);
        padding-top: 5px;
        padding-bottom: 4px;
        line-height: 28px;
        white-space: nowrap;
        font-size: 13px;
        padding-left: 26px;

        .listviewitemicon {
            align-self: center;
            width: 20px;
            height: 20px;
            padding-bottom: 1px;
            padding-right: 5px;
        }

        &.focused {
        }

        &.selected {
            background-color: var(--pagelist-selected-color);
        }
    }
}

aligncellwrapper-view {
}

celltext-view {
}

cellcheckbox-view {
}

cellbutton-view {
    button-view {
        button {
            box-sizing: border-box;
            padding: 5px 12px;
        }
    }
}

celltag-view {
}

celltaglabel-view {
    padding: 0px 6px;
    border-radius: 6px;
    border-width: 1px;
    border-style: solid;
    white-space: nowrap;
    height: 26px;
    line-height: 26px;
    align-self: center;
}

[data-theme=dark] celltaglabel-view {
    background: color-mix(in srgb, currentColor 20%, #111111) !important;
}

celltagtag-view {
}

cellcombobox-view {
}

celllogtext-view {
}
textlabel-view.pagetitle {
    color: var(--pagetitle-color);
    font-weight: 500;
    font-size: 31px;
    line-height: 40px;
    margin: 5px 0;
}
paper-view {
    background: var(--formeditor-ruler-bgcolor);
}

papersheet-view {
    background: white;
    box-shadow: rgba(0,0,0,0.20) 4px 4px 4px;
}

paperworkspace-view {
    position: relative;
    background: var(--formeditor-workspace-bgcolor);
}
input[type=radio] {
    appearance: none;
    display: inline-block;
    background: none; /* resets gradient background on safari */
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: none;
    margin: 0;
    border: 1px solid var(--radiobutton-border-color);
    border-radius: 50%;
    padding: 0;
    width: 16px;
    height: 16px;
    align-self: center;

    &:focus {
        border-color: var(--radiobutton-focus-border-color);
        outline: 0;
        /*box-shadow: inset 0 0 0 30px var(--radiobutton-focus-bg-color), 0 0 0 0.25rem rgba(var(--radiobutton-focus-rgb), 0.25);*/
    }

    &:checked {
        background-color: var(--light-blue-hex);
        border-color: var(--light-blue-hex);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
    }

        &:checked:focus {
            background-color: var(--light-purple-hex);
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
            border-color: var(--radiobutton-focus-border-color);
            outline: 0;
            /*box-shadow: inset 0 0 0 30px var(--radiobutton-focus-bg-color), 0 0 0 0.25rem rgba(var(--radiobutton-focus-rgb), 0.25);*/
        }

    &:disabled:checked {
        filter: grayscale(100%);
    }

    &:disabled {
        filter: grayscale(100%);
    }
}

radiobuttonlabel-view {
    font-size: 13px;
    color: var(--radiobutton-color);

    textlabel-view {
        margin-left: 4px;
    }
}
rangeslider-view {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    line-height: 19px;
    color: var(--rangeslider-color);
    border-style: solid;
    border-width: 1px;
    border-color: transparent;
    border-radius: 6px;
    background: transparent;
    padding: 10px 16px 8px 16px;
    box-sizing: border-box;

    &.focus {
        border-color: #3874ff;
        background: var(--rangeslider-background-color);
        box-shadow: inset 0 1px 2px transparent, inset 0 0 0 30px var(--rangeslider-focus-bg-color), 0 0 0 0.25rem rgba(var(--rangeslider-focus-rgb), 0.25);
    }

    &.disabled {
        opacity: 0.5;
        pointer-events: none;
    }

    & input[type="range"] {
        display: block;
        flex: 1 1 auto;
        margin: 0;
        padding: 0;
        cursor: pointer;
        accent-color: var(--rangeslider-assent-color);
        outline: none;
    }

    & .rangeslider-value {
        display: inline-block;
        text-align: right;
        font-variant-numeric: tabular-nums;
        flex-shrink: 0;
    }
}
ruler-view {
    position: relative;

    &.vertical {
        width: 32px;
        border-right: 1px solid transparent;
    }

    &.horizontal {
        height: 32px;
        border-bottom: 1px solid transparent;
    }

    svg {
        overflow: hidden;
        position: absolute;
        width: 100%;
        height: 100%;
        font-size: 10px;
        line-height: 10px;
        --line-color: var(--formeditor-ruler-linecolor);
        --text-color: var(--formeditor-ruler-textcolor);
    }
}

rulerbackground-view {
    background: var(--formeditor-panel-bgcolor);

    &.vertical {
        width: 32px;
        border-right: 1px solid var(--formeditor-panel-bordercolor);
    }

    &.horizontal {
        height: 32px;
        border-bottom: 1px solid var(--formeditor-panel-bordercolor);
    }
}

rulercorner-view {
    background: var(--formeditor-panel-bgcolor);
}
scripteditor-view {
    position: relative;
}

scripteditorcontainer-view {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
scrollbar-view {
    background: var(--scrollbar-bgcolor);
}

scrollbarcorner-view {
    background: var(--scrollbar-bgcolor);
}

.scrollbar-thumb {
    background: var(--scrollbar-thumbbgcolor);

    &:hover {
        background: var(--scrollbar-thumbhoverbgcolor);
    }
}

.scrollbar-vert .scrollbar-button-decr {
    background: var(--scrollbar-vert-button-decr-icon) center;
}

    .scrollbar-vert .scrollbar-button-decr:hover {
        background: var(--scrollbar-vert-button-decr-hovericon) center;
    }

.scrollbar-vert .scrollbar-button-incr {
    background: var(--scrollbar-vert-button-incr-icon) center;
}

    .scrollbar-vert .scrollbar-button-incr:hover {
        background: var(--scrollbar-vert-button-incr-hovericon) center;
    }

.scrollbar-horz .scrollbar-button-decr {
    background: var(--scrollbar-horz-button-decr-icon) center;
}

    .scrollbar-horz .scrollbar-button-decr:hover {
        background: var(--scrollbar-horz-button-decr-hovericon) center;
    }

.scrollbar-horz .scrollbar-button-incr {
    background: var(--scrollbar-horz-button-incr-icon) center;
}

    .scrollbar-horz .scrollbar-button-incr:hover {
        background: var(--scrollbar-horz-button-incr-hovericon) center;
    }
sidenavigation-view {
    box-sizing: border-box;
    width: 250px;
    border-right: 1px solid var(--sidenavigation-bordercolor);
    transition: width 0.2s ease;
    background: var(--sidenavigation-bgcolor);
}

sidenavigationgroup-view {
    textlabel-view {
        text-transform: uppercase;
        font-weight: 500;
        font-size: 0.64rem;
        color: var(--sidenavigationgroup-color);
        margin-bottom: 0.5rem;
        margin-top: 1.5rem;
        padding-left: 1.6rem;
    }
}

sidenavigationitem-view {
    padding-top: 5px;
    padding-bottom: 4px;
    padding-left: 1rem;
    margin-left: 0.75rem;
    margin-right: 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;

    &.active {
        background-color: var(--sidenavigationitem-active-bgcolor);
    }

    &:hover {
        background-color: var(--sidenavigationitem-hover-bgcolor);
    }

    imagebox-view {
        padding-bottom: 2px;
        align-self: center;
    }

    img {
        width: 20px;
        object-fit: contain;
        margin-right: 0.625rem;
    }

    textlabel-view {
        font-size: 13px;
        font-weight: 500;
        word-break: break-word;
        line-height: 22px;
        white-space: nowrap;
        color: var(--sidenavigationitem-color);
    }

    &.active textlabel-view {
        color: var(--sidenavigationitem-active-color);
    }
}
spinbox-view {
    border-style: solid;
    border-width: 1px;
    border-color: var(--spinbox-border-color);
    border-radius: 6px;
    background: var(--spinbox-background-color);
    font-size: 13px;
    line-height: 19px;
    padding: 10px 16px 8px 16px;
    color: var(--spinbox-color);
    box-sizing: border-box;

    &.focus {
        border-color: #3874ff;
        box-shadow: inset 0 1px 2px transparent, inset 0 0 0 30px var(--spinbox-focus-bg-color), 0 0 0 0.25rem rgba(var(--spinbox-focus-rgb), 0.25);
    }

    &.disabled {
        opacity: 0.5;
    }

    & input {
        border: none;
        padding: 0;
        margin: 0;
        background: inherit;
        font: inherit;
        color: inherit;
        outline: none;
        width: 100%;
        box-sizing: border-box;
        height: 100%;
        vertical-align: middle;
    }

        & input:disabled {
            color: grayscale(100%);
        }
        /* === NUKE THE SPIN BUTTONS FOREVER (Chrome/Edge/Safari/Firefox) === */
        & input[type="number"]::-webkit-outer-spin-button,
        & input[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none !important;
            appearance: none !important;
            margin: 0 !important;
            display: none !important;
            width: 0 !important;
            height: 0 !important;
            opacity: 0 !important;
        }

        & input[type="number"] {
            -moz-appearance: textfield !important;
            appearance: none !important;
        }
            /* Extra safety – some browsers re-show them on focus/hover */
            & input[type="number"]:focus::-webkit-outer-spin-button,
            & input[type="number"]:focus::-webkit-inner-spin-button,
            & input[type="number"]:hover::-webkit-outer-spin-button,
            & input[type="number"]:hover::-webkit-inner-spin-button {
                display: none !important;
                -webkit-appearance: none !important;
            }
}
spreadsheet-view {
    background: var(--sidenavigation-bgcolor);
}

ssworkspace-view {
    position: relative;
}

sscell-view {
    border-right: 1px solid var(--sidenavigation-bordercolor);
    border-bottom: 1px solid var(--sidenavigation-bordercolor);
    height: 18px;
    line-height: 18px;
    font-size: 12px;
    text-align: center;
    padding: 0 2px;

    &.margin {
        background-color: #eee;
    }

    &.left {
        text-align: left;
    }

    &.right {
        text-align: right;
    }
}
.toolbarbutton-icon {
    width: 20px !important;
    height: 20px !important;
}

.toolbarcheckbox-view {
    background: var(--button-background-color);
    color: var(--button-color);
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--page-font-family);
    font-size: 13px;
    line-height: 22px;
    align-items: center;
    gap: 7px;

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

    &.disabled {
        opacity: 0.5;
        cursor: default;
    }
}

toolbar-view.pageformtoolbar {
    toolbarbutton-view {
        background: var(--button-background-color);
        color: var(--button-color);
        border: none;
        border-radius: 6px;
        text-align: center;
        cursor: pointer;
        font-family: var(--page-font-family);
        font-size: 13px;
        line-height: 22px;
        padding: 8px 24px 5px 24px;

        imagebox-view {
            margin-right: 5px;
            padding-bottom: 2px;
        }

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

    .toolbarcheckbox-view {
        padding: 8px 16px 5px 14px;
    }
}

toolbar-view.pagetoolbar {
    toolbarbutton-view {
        background: var(--button-background-color);
        color: var(--button-color);
        border: none;
        border-radius: 6px;
        text-align: center;
        cursor: pointer;
        font-family: var(--page-font-family);
        font-size: 13px;
        line-height: 22px;
        padding: 7px 24px 6px 24px;

        imagebox-view {
            margin-right: 5px;
            padding-bottom: 2px;
        }

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

    .toolbarcheckbox-view {
        padding: 7px 16px 6px 14px;
    }
}
topnavigation-view {
    box-sizing: border-box;
    border-bottom: 1px solid var(--topnavigation-bordercolor);
    background: var(--topnavigation-bgcolor);
    box-shadow: rgba(0,0,0,0.1) 0 3px 3px;
    z-index: 1;
}

topnavigationitem-view {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;

    &.active {
        background-color: var(--topnavigationitem-active-bgcolor);
    }

    &:hover {
        background-color: var(--topnavigationitem-hover-bgcolor);
    }

    img {
        width: 16px;
        object-fit: contain;
        margin-right: 0.625rem;
    }

    textlabel-view {
        vertical-align: middle;
        font-size: 13px;
        word-break: break-word;
        line-height: 1.188rem;
        white-space: nowrap;
        color: var(--topnavigationitem-color);
    }

    &.active textlabel-view {
        color: var(--topnavigationitem-active-color);
    }
}
appheaderavatar-view {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    overflow: clip;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0 4px;
    background-repeat: no-repeat;
    transition: opacity 0.15s ease-in-out;

    &:hover {
        opacity: 0.8;
    }
}
websiteheader-view {
    height: 64px;
    padding: 0 40px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--websiteheader-bordercolor);
    background: var(--websiteheader-bgcolor);
}

websitelogo-view {
    cursor: pointer;
    font-size: 22px;
    line-height: 64px;
    font-weight: 400;
    color: var(--websitelogo-color);
    font-family: "Aspekta", "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    imagebox-view img {
        width: 22px;
        object-fit: contain;
    }

    textlabel-view {
        margin-left: 8px;
    }
}

websiteavatar-view {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    overflow: clip;
    cursor: pointer;
    transition: opacity 0.15s ease-in-out;

    &:hover {
        opacity: 0.8;
    }
}

websitethemebutton-view {
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
    border-radius: 50%;
    color: var(--websitethemebutton-color);
    background-color: var(--websitethemebutton-bgcolor);

    &:hover {
        color: var(--websitethemebutton-hover-color);
        background-color: var(--websitethemebutton-hover-bgcolor);
    }
}

websiteavatarmenu-view {
    position: absolute;
    min-width: 220px;
    background: var(--dialog-panelcolor);
    border: 1px solid var(--lineedit-border-color);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    user-select: none;
}

avatarmenuavatar-view {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: clip;
    flex-shrink: 0;
}

websiteavatarmenuheader-view {
    padding: 6px 16px;
    gap: 10px;
    align-items: center;

    textlabel-view {
        font-size: 14px;
        font-weight: 500;
        color: var(--page-color);
        line-height: 1.3;
    }
}

textlabel-view.avatarmenu-description {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    opacity: 0.55;
}

websiteavatarmenuseparator-view {
    height: 1px;
    background: var(--lineedit-border-color);
}

websiteavatarmenuthemerow-view {
    padding: 6px 16px;
    gap: 10px;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;

    &:hover {
        background-color: var(--lineedit-border-color);
    }

    textlabel-view {
        font-size: 14px;
        color: var(--page-color);
    }

    websitethemebutton-view {
        pointer-events: none;

        &:hover {
            background-color: transparent;
            color: var(--websitethemebutton-color);
        }
    }
}


splitview-divider-view {
	width: 5px;
	min-width: 5px;
}

[data-theme] splitview-divider-view::after {
	background-color: var(--scrollbar-thumbbgcolor) !important;
}

[data-theme] splitview-divider-view:hover::after,
[data-theme] splitview-divider-view.dragging::after {
	filter: none !important;
	background-color: var(--scrollbar-thumbhoverbgcolor) !important;
}
windowheader-view {
    background: var(--websiteheader-bgcolor);
    color: var(--websitelogo-color);
    line-height: 30px;
    height: 30px;
    border-bottom: 1px solid var(--websiteheader-bordercolor);

    imagebox-view.icon {
        padding-left: 11px;
        padding-right: 5px;
        width: 16px;
        height: 16px;
    }

    textlabel-view.caption {
        padding-top: 2px;
        line-height: 28px;
        font-size: 14px;
        font-weight: 500;
        -webkit-app-region: drag;
    }
}

windowheaderbutton-view {
    padding: 10px;
    width: 10px;
    height: 10px;
    fill: var(--websitelogo-color);

    &:hover {
        color: var(--websitethemebutton-hover-color);
        background-color: var(--websitethemebutton-hover-bgcolor);
    }
}
}
@layer controls.layout
{
dialog-view.signindialog {
    width: 960px !important;
    height: 640px !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    flex-direction: column !important;

    .dialog-centerview {
        flex: 1 !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    signinpage-view {
        flex: 1 !important;
        min-height: 0 !important;
        height: auto !important;
    }
}
}
@layer controls.layout
{
signinpage-view {
    height: 100vh;

    signinpagecontent-view {
        width: 420px;
        margin: 0 auto;
    }

    .logo {
        height: 120px;
    }

    .title {
        margin-top: 20px;
        font-size: 25px;
        line-height: 30px;
        font-weight: 800;
        text-align: center;
    }

    .brief {
        text-align: center;
        color: var(--signinpage-brief-color);
    }

    .formLabel {
        margin-left: 16px;
        text-transform: uppercase;
        font-size: 10px;
        line-height: 12px;
        font-weight: 700;
        margin-top: 15px;
        color: var(--form-color);
    }

    .buttonSignIn, .buttonCreateAccount {
        margin-top: 30px;
    }

    .rememberMe {
        margin-top: 5px;
    }

    .errorLabel {
        margin-top: 10px;
        text-align: center;
        color: var(--error-color, #d9534f);
        font-size: 13px;
        min-height: 18px;
    }
}
}
@layer controls.layout
{
subscription-plan-tile.spt-color-cobalt    { --spt-accent: var(--cobalt-hex);    --spt-accent-light: var(--cobalt-pale-hex); }
subscription-plan-tile.spt-color-jade      { --spt-accent: var(--jade-hex);      --spt-accent-light: var(--jade-pale-hex); }
subscription-plan-tile.spt-color-teal      { --spt-accent: var(--teal-hex);      --spt-accent-light: var(--teal-pale-hex); }
subscription-plan-tile.spt-color-violet    { --spt-accent: var(--violet-hex);    --spt-accent-light: var(--violet-pale-hex); }
subscription-plan-tile.spt-color-rose      { --spt-accent: var(--rose-hex);      --spt-accent-light: var(--rose-pale-hex); }
subscription-plan-tile.spt-color-crimson   { --spt-accent: var(--crimson-hex);   --spt-accent-light: var(--crimson-pale-hex); }
subscription-plan-tile.spt-color-amber     { --spt-accent: var(--amber-hex);     --spt-accent-light: var(--amber-pale-hex); }
subscription-plan-tile.spt-color-tangerine { --spt-accent: var(--tangerine-hex); --spt-accent-light: var(--tangerine-pale-hex); }
subscription-plan-tile.spt-color-olive     { --spt-accent: var(--olive-hex);     --spt-accent-light: var(--olive-pale-hex); }
subscription-plan-tile.spt-color-slate     { --spt-accent: var(--slate-hex);     --spt-accent-light: var(--slate-pale-hex); }

/* Dark theme — lighter accent for readability, dark tinted background */
[data-theme=dark] subscription-plan-tile.spt-color-cobalt    { --spt-accent: var(--cobalt-light-hex);    --spt-accent-light: var(--cobalt-deep-hex); }
[data-theme=dark] subscription-plan-tile.spt-color-jade      { --spt-accent: var(--jade-light-hex);      --spt-accent-light: var(--jade-deep-hex); }
[data-theme=dark] subscription-plan-tile.spt-color-teal      { --spt-accent: var(--teal-light-hex);      --spt-accent-light: var(--teal-deep-hex); }
[data-theme=dark] subscription-plan-tile.spt-color-violet    { --spt-accent: var(--violet-light-hex);    --spt-accent-light: var(--violet-deep-hex); }
[data-theme=dark] subscription-plan-tile.spt-color-rose      { --spt-accent: var(--rose-light-hex);      --spt-accent-light: var(--rose-deep-hex); }
[data-theme=dark] subscription-plan-tile.spt-color-crimson   { --spt-accent: var(--crimson-light-hex);   --spt-accent-light: var(--crimson-deep-hex); }
[data-theme=dark] subscription-plan-tile.spt-color-amber     { --spt-accent: var(--amber-light-hex);     --spt-accent-light: var(--amber-deep-hex); }
[data-theme=dark] subscription-plan-tile.spt-color-tangerine { --spt-accent: var(--tangerine-light-hex); --spt-accent-light: var(--tangerine-deep-hex); }
[data-theme=dark] subscription-plan-tile.spt-color-olive     { --spt-accent: var(--olive-light-hex);     --spt-accent-light: var(--olive-deep-hex); }
[data-theme=dark] subscription-plan-tile.spt-color-slate     { --spt-accent: var(--slate-light-hex);     --spt-accent-light: var(--slate-deep-hex); }

subscription-plan-tile {
    display: flex;
    flex-direction: column;
    width: 220px;
    min-height: 440px;
    margin: 8px;
    padding: 20px 18px 18px;
    border-radius: 14px;
    border: 2px solid var(--spt-accent);
    background: var(--spt-accent-light);
    cursor: default;
    transition: box-shadow 0.15s, border-color 0.15s, filter 0.15s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);

    &:hover {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
        filter: brightness(0.96);
    }

    &.spt-selected {
        border-width: 3px;
        box-shadow: 0 0 0 3px var(--spt-accent),
                    0 6px 24px rgba(0, 0, 0, 0.22);
    }

    &.spt-disabled {
        opacity: 0.55;
    }

    .spt-badge-row {
        min-height: 24px;
        margin-bottom: 10px;
    }

    .spt-badge {
        font-size: 10px;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 20px;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .spt-badge-current {
        background: var(--spt-accent);
        color: #ffffff;
    }

    .spt-badge-legacy {
        background: rgba(0, 0, 0, 0.12);
        color: inherit;
    }

    .spt-name {
        font-size: 19px;
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 4px;
        color: var(--spt-accent);
    }

    .spt-desc {
        font-size: 12px;
        opacity: 0.65;
        line-height: 1.4;
        margin-bottom: 16px;
        min-height: 17px;
    }

    .spt-price {
        font-size: 42px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.03em;
        color: var(--spt-accent);
    }

    .spt-cycle-hint {
        font-size: 11px;
        opacity: 0.6;
        margin-top: 4px;
        margin-bottom: 14px;
        line-height: 1.4;
    }

    .spt-divider {
        height: 1px;
        background: var(--spt-accent);
        opacity: 0.2;
        margin-bottom: 12px;
    }

    .spt-features {
        flex: 1;
        margin-bottom: 18px;
    }

    .spt-feature-row {
        padding: 4px 0;
    }

    .spt-feature-check {
        font-size: 11px;
        font-weight: 700;
        color: var(--spt-accent);
        margin-right: 6px;
        flex-shrink: 0;
    }

    .spt-feature-label {
        font-size: 12px;
        opacity: 0.75;
    }

    .spt-feature-value {
        font-size: 12px;
        font-weight: 600;
        opacity: 0.75;
    }

    /* Target the inner <button> element — button-view is the outer wrapper */
    button-view.spt-btn {
        width: 100%;

        button {
            width: 100%;
            padding: 10px 0;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            border: none;
            cursor: pointer;
            font-family: var(--page-font-family);
            transition: box-shadow 0.15s;
        }
    }

    button-view.spt-btn-select button {
        background: var(--spt-accent);
        color: #ffffff;
        cursor: pointer;

        &:hover {
            box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.12);
        }
    }

    button-view.spt-btn-current button {
        background: var(--spt-accent);
        color: #ffffff;
        cursor: pointer;

        &:hover {
            box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.12);
        }
    }

    &.spt-selected button-view.spt-btn-current button {
        background: transparent;
        color: var(--spt-accent);
        cursor: default;

        &:hover {
            filter: none;
            background: transparent;
            box-shadow: none;
        }
    }

    button-view.spt-btn-pending button {
        background: var(--spt-accent);
        color: #ffffff;
        cursor: default;
        opacity: 0.7;

        &:hover {
            filter: none;
            box-shadow: none;
        }
    }
}

[data-theme=dark] subscription-plan-tile {
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.07);

    &:hover {
        box-shadow: 0 6px 20px rgba(255, 255, 255, 0.12);
        filter: brightness(1.08);
    }

    &.spt-selected {
        box-shadow: 0 0 0 3px var(--spt-accent),
                    0 6px 24px rgba(255, 255, 255, 0.15);
    }
}

.spt-tiles-container {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    padding: 8px 0 4px;
}
}

xml-view {
    font-family: Consolas, 'Courier New', monospace;
    font-size: 15px;
    line-height: 17px;
    overflow: scroll;
}

xmlbody-view {
    position: relative;
    margin: 5px 0;
}

xmlline-view {
    cursor: default;
    white-space: pre;

    .tag {
        color: var(--formeditor-xmlline-tagcolor);
    }

    .tagname {
        color: var(--formeditor-xmlline-tagnamecolor);
        font-weight: 600;
    }

    .tagvalue {
    }

    .tagfield, .tagpattern {
        display: inline-block;
        margin: 0 2px;
        border: 1px solid red;
        padding: 0 4px;
        font-size: 12px;
        line-height: 15px;
        font-weight: bold;
        cursor: move;
    }

    .tagpattern {
        background: var(--formeditor-xmlline-tagpatternbgcolor);
    }

    .tagfield {
        background: var(--formeditor-xmlline-tagfieldbgcolor);
    }

    .node-leaf, .node-open, .node-closed {
        display: inline-block;
        width: 16px;
        height: 16px;
        vertical-align: -3px;
    }

    .node-open {
        background: no-repeat center url(--icon-expand);
    }

    .node-closed {
        background: no-repeat center url(--icon-collapse);
    }
}
json-view {
    font-family: Consolas, 'Courier New', monospace;
    font-size: 15px;
    line-height: 17px;
    overflow: scroll;
}

jsonbody-view {
    position: relative;
    margin: 5px 0;
}

jsonline-view {
    cursor: default;

    .tag {
        color: var(--formeditor-jsonline-tagcolor);
    }

    .tagname {
        color: var(--formeditor-jsonline-tagnamecolor);
        font-weight: 600;
    }

    .tagvalue {
        &.selected {
            background-color: var(--formeditor-jsonline-tagvalueselectedbgcolor);
        }
    }
}
formpanel-view {
    box-sizing: border-box;
    width: 325px;
    transition: width 0.2s ease;
    background: var(--formeditor-panel-bgcolor);
}

formpanelgroup-view {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background-color: var(--formeditor-panel-bgcolor);
}

textlabel-view.formpanelgroup {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 0.64rem;
    color: var(--formeditor-panel-color);
}

textlabel-view.formpanellabel {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 0.64rem;
    color: var(--formeditor-panel-color);
    line-height: 27px;
    border: 1px solid transparent; /* For aligning with lineedit that has a border */
    min-width: 50px;
    text-align: right;
}

lineedit-view.formpanel {
    padding: 0 16px;
    font-size: 0.64rem;
    line-height: 27px;
}

button-view.formpanelbutton {
    button {
        padding-top: 0;
        padding-bottom: 0;
        line-height: 27px;
    }
}

formpanelline-view {
}
formeditor-view {
    .rightborder {
        border-right: 1px solid var(--formeditor-panel-bordercolor);
    }

    .leftborder {
        border-left: 1px solid var(--formeditor-panel-bordercolor);
    }

    .topborder {
        border-top: 1px solid var(--formeditor-panel-bordercolor);
    }

    .bottomborder {
        border-bottom: 1px solid var(--formeditor-panel-bordercolor);
    }
}

toolbar-view.formeditor {
    background: var(--formeditor-panel-bgcolor);
    padding: 0.5rem;

    toolbarbutton-view {
        height: 24px;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 0.64rem;
        line-height: 24px;
        color: var(--sidenavigationitem-color);
        border-radius: 0.5rem;
        padding: 0.5rem;
        border: 1px solid transparent;
        cursor: default;

        imagebox-view {
            padding-right: 5px;
        }

        &:hover {
            background-color: var(--sidenavigationitem-hover-bgcolor);
        }

        &.selected {
            background-color: var(--sidenavigationitem-active-bgcolor);
            color: var(--sidenavigationitem-active-color);
        }
    }

    toolbarseparator-view {
        border-left: 1px solid var(--formeditor-panel-bordercolor);
    }
}

vtoolbar-view.formeditor {
    background: var(--formeditor-panel-bgcolor);
    padding: 0.5rem 0;

    vtoolbarbutton-view {
        width: 60px;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 0.64rem;
        color: var(--sidenavigationitem-color);
        border-radius: 0.5rem;
        margin: 0 0.5rem;
        padding-top: 0.5rem;
        border: 1px solid transparent;
        cursor: default;

        &:hover {
            background-color: var(--sidenavigationitem-hover-bgcolor);
        }

        &.selected {
            background-color: var(--sidenavigationitem-active-bgcolor);
            color: var(--sidenavigationitem-active-color);
        }
    }
}

formeditorsplitter-view {
    width: 5px;
    border-left: 1px solid var(--formeditor-panel-bordercolor);
    border-right: 1px solid var(--formeditor-panel-bordercolor);
    background: var(--formeditor-panel-bgcolor);
    cursor: ew-resize;
}

formsheetlist-view {
    cursor: default;
    height: 36px;
    background: var(--formeditor-panel-bgcolor);
}

formsheettab-view {
    border: 1px solid transparent;
    border-top-color: var(--formeditor-panel-bordercolor);
    border-radius: 0 0 3px 3px;
    line-height: 30px;
    padding: 0 20px;
    margin-bottom: 5px;

    .label {
        font-weight: 600;
        font-size: 13px;
        color: var(--radiobutton-color);
        border-top: 2px solid transparent;
    }

    &.active {
        background: var(--page-content-bgcolor);
        border-color: var(--formeditor-panel-bordercolor);
        border-top-color: transparent;

        .label {
            border-top-color: dodgerblue;
        }
    }
}

formsheetspacer-view {
    border-top: 1px solid var(--formeditor-panel-bordercolor);

    &:first-child {
        width: 15px;
    }
}

pdfoutput-view {
}

wordoutput-view {
}

exceloutput-view {
}










mainpage-view {
    background: var(--page-content-bgcolor);
    width: 100vw;
    height: 100vh;
}

toolbar-view.mainpage {
    background: var(--sidenavigation-bgcolor);
    border-bottom: 1px solid var(--sidenavigation-bordercolor);
    padding: 0.5rem;

    toolbarbutton-view {
        height: 24px;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 0.64rem;
        line-height: 24px;
        color: var(--sidenavigationitem-color);
        border-radius: 0.5rem;
        padding: 0.5rem;
        border: 1px solid transparent;
        cursor: default;

        imagebox-view {
            padding-right: 5px;
        }

        &:hover {
            background-color: var(--sidenavigationitem-hover-bgcolor);
        }
    }

    toolbarseparator-view {
        border-left: 1px solid var(--sidenavigation-bordercolor);
    }
}
listpagecontent-view {

    breadcrumb-view {
        margin: 24px 40px;
        margin-bottom: 0;
    }

    textlabel-view.pagetitle {
        margin: 24px 40px;
        margin-top: 5px;
    }

    toolbar-view.pagetoolbar {
        margin: 12px 40px;
    }

    listview-view.pagelist {
        margin: 24px 40px;
        margin-top: 0;
    }
}
detailpagecontent-view {

    breadcrumb-view {
        margin: 24px 40px;
        margin-bottom: 0;
    }

    textlabel-view.pagetitle {
        margin: 24px 40px;
        margin-top: 5px;
    }

    pageform-view {
        margin: 0 40px;
    }
}
homepagecontent-view {
    .labelapplications {
        color: rgb(71,71,71);
        font-weight: 500;
        font-size: 24px;
        margin: 4px;
        line-height: 30px;
    }

    .tilerowtitle {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        opacity: 0.45;
        margin: 12px 0 2px;
    }
}

tile-view.tile-tangerine { --tile-color: var(--tangerine-hex); --tile-surface: var(--tangerine-pale-hex); }
tile-view.tile-cobalt    { --tile-color: var(--cobalt-hex);    --tile-surface: var(--cobalt-pale-hex); }
tile-view.tile-violet    { --tile-color: var(--violet-hex);    --tile-surface: var(--violet-pale-hex); }
tile-view.tile-crimson   { --tile-color: var(--crimson-hex);   --tile-surface: var(--crimson-pale-hex); }

[data-theme=dark] tile-view.tile-tangerine { --tile-color: var(--tangerine-light-hex); --tile-surface: var(--tangerine-deep-hex); }
[data-theme=dark] tile-view.tile-cobalt    { --tile-color: var(--cobalt-light-hex);    --tile-surface: var(--cobalt-deep-hex); }
[data-theme=dark] tile-view.tile-violet    { --tile-color: var(--violet-light-hex);    --tile-surface: var(--violet-deep-hex); }
[data-theme=dark] tile-view.tile-crimson   { --tile-color: var(--crimson-light-hex);   --tile-surface: var(--crimson-deep-hex); }

tile-view {
    --tile-color: var(--tile-accent);
    margin: 8px;
    padding: 14px 16px;
    cursor: pointer;
    border-radius: 12px;
    min-width: 200px;
    background-color: var(--tile-surface, var(--tile-bgcolor));
    border: 2px solid var(--tile-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    transition: box-shadow 0.15s, filter 0.15s;

    .tileicon {
        margin-right: 12px;
        flex-shrink: 0;
    }

    .tileicon img {
        height: 40px;
        width: 40px;
    }

    .tilename {
        font-weight: 600;
        font-size: 15px;
        line-height: 1.3;
        color: var(--tile-color);
    }

    .tiledesc {
        font-size: 12px;
        opacity: 0.65;
        margin-top: 2px;
        line-height: 1.3;
        min-height: 1.3em;
    }

    .tiletag {
        margin-top: 10px;
    }

    &:hover {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
        filter: brightness(0.96);
    }
}

[data-theme=dark] tile-view {
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.07);

    &:hover {
        box-shadow: 0 6px 20px rgba(255, 255, 255, 0.12);
        filter: brightness(1.08);
    }
}
forgotpasswordpage-view {
    width: 470px;
    margin: 0 auto;
    height: 100vh;

    .image {
        height: 120px;
    }

    .title {
        margin-top: 20px;
        font-size: 20px;
        line-height: 22px;
        font-weight: 700;
        text-align: center;
    }

    .brief {
        text-align: center;
        color: var(--forgotpasswordpage-brief-color);
        margin-bottom: 20px;
    }

    .buttonSend {
        width: 100px;
    }
}
lockscreenpage-view {
    width: 380px;
    margin: 0 auto;
    height: 100vh;

    .avatar {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border-radius: 50px;
    }

    .title {
        margin-top: 20px;
        font-size: 30px;
        line-height: 32px;
        font-weight: normal;
        text-align: center;

        .name {
            font-weight: 800;
        }
    }

    .brief {
        text-align: center;
        color: var(--resetpasswordpage-brief-color);
        margin-bottom: 25px;
    }

    .buttonOK {
        margin-top: 10px;
    }
}
resetpasswordpage-view {
    width: 380px;
    margin: 0 auto;
    height: 100vh;

    .image {
        height: 120px;
    }

    .title {
        margin-top: 20px;
        font-size: 20px;
        line-height: 22px;
        font-weight: 700;
        text-align: center;
    }

    .brief {
        text-align: center;
        color: var(--resetpasswordpage-brief-color);
        margin-bottom: 20px;
    }

    .buttonOK {
        margin-top: 20px;
    }
}
signoutpage-view {
    width: 380px;
    margin: 0 auto;
    height: 100vh;

    .image {
        height: 180px;
    }

    .title {
        margin-top: 20px;
        font-size: 20px;
        line-height: 22px;
        font-weight: 700;
        text-align: center;
    }

    .brief {
        text-align: center;
        color: var(--signoutpage-brief-color);
    }

    .buttonOK {
        margin-top: 30px;
    }
}
signuppage-view {
    width: 420px;
    margin: 0 auto;
    height: 100vh;

    .logo {
        height: 120px;
    }

    .title {
        margin-top: 20px;
        font-size: 25px;
        line-height: 30px;
        font-weight: 800;
        text-align: center;
    }

    .brief {
        text-align: center;
        color: var(--signuppage-brief-color);
    }

    .formLabel {
        margin-left: 16px;
        text-transform: uppercase;
        font-size: 10px;
        line-height: 12px;
        font-weight: 700;
        margin-top: 15px;
        color: var(--form-color);
    }

    .buttonSignUp {
        margin-top: 30px;
    }
}
forbiddenpage-view {
    width: 380px;
    margin: 0 auto;
    height: 100vh;

    .image {
        height: 380px;
    }

    .title {
        margin-top: 20px;
        font-size: 20px;
        line-height: 22px;
        font-weight: 700;
        text-align: center;
    }

    .brief {
        text-align: center;
        color: var(--forbiddenpage-brief-color);
    }
}
notfoundpage-view {
    width: 380px;
    margin: 0 auto;
    height: 100vh;

    .image {
        height: 380px;
    }

    .title {
        margin-top: 20px;
        font-size: 20px;
        line-height: 22px;
        font-weight: 700;
        text-align: center;
    }

    .brief {
        text-align: center;
        color: var(--notfoundpage-brief-color);
    }
}
servererrorpage-view {
    width: 380px;
    margin: 0 auto;
    height: 100vh;

    .image {
        height: 380px;
    }

    .title {
        margin-top: 20px;
        font-size: 20px;
        line-height: 22px;
        font-weight: 700;
        text-align: center;
    }

    .brief {
        text-align: center;
        color: var(--servererrorpage-brief-color);
    }
}
formeditorpage-view {
    background: var(--page-content-bgcolor);
    width: 100vw;
    height: 100vh;
}
scripteditorpage-view {
    background: var(--page-content-bgcolor);
    width: 100vw;
    height: 100vh;
}

toolbar-view.scripteditor {
    background: var(--sidenavigation-bgcolor);
    padding: 0.5rem;

    toolbarbutton-view {
        height: 24px;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 0.64rem;
        line-height: 24px;
        color: var(--sidenavigationitem-color);
        border-radius: 0.5rem;
        padding: 0.5rem;
        border: 1px solid transparent;
        cursor: default;

        imagebox-view {
            padding-right: 5px;
        }

        &:hover {
            background-color: var(--sidenavigationitem-hover-bgcolor);
        }

        &.selected {
            background-color: var(--sidenavigationitem-hover-bgcolor);
            /*border-color: var(--sidenavigationitem-active-color);*/
            color: var(--sidenavigationitem-active-color);
        }
    }

    toolbarseparator-view {
        border-left: 1px solid var(--sidenavigation-bordercolor);
    }
}body {
    background: var(--page-bgcolor);
    color: var(--page-color);
    font-family: var(--page-font-family);
    font-size: var(--page-font-size);
    line-height: var(--page-line-height);
}