:root {
    --font-family: "Aller";

    --font-size-xs: 0.875rem;
    --font-size-sm: 1rem;
    --font-size-md: 1.25rem;
    --font-size-lg: 1.5rem;
    --font-size-xl: 2rem;
    --font-size-xxl: 3rem;

    --metalgray-extralight: var(--metalgray-100);
    --metalgray-light: var(--metalgray-200);
    --metalgray-regular: var(--metalgray-500);
    --metalgray-medium: var(--metalgray-700);
    --metalgray-semibold: #454b54;
    --metalgray-bold: var(--metalgray-900);

    --metalgray-medium-rgb: 77, 87, 97;
    --metalgray-semibold-rgb: 69, 75, 84;

    --primary: var(--lemonyellow-400);
    --primary-rgb: 255, 240, 77;
    --primary-light: var(--lemonyellow-200);
    --primary-dark: var(--lemonyellow-600);

    --danger: #D41E11;
    --danger-rgb: 212, 30, 17;
    --danger-light: #F2645A;
    --danger-dark: #A0170D;

    --success: #3ea849;
    --success-rgb: 62, 168, 73;
    --success-light: #7DCF85;
    --success-dark: #2D7B35;

    --secondary: var(--metalgray-500);
    --secondary-rgb: 144, 152, 162;
    --secondary-light: var(--metalgray-400);
    --secondary-dark: #6f7a85;

    --secondary-on-dark: var(--metalgray-500);
    --secondary-on-light: #6f7a85;

    --color-mode-defrost: #606C79;
    --color-mode-heating: #FFA142;
    --color-mode-cooling: #3ABFD0;
    --color-mode-disabled: var(--metalgray-500);
    --color-mode-on: #3EA849;
    --color-mode-warm-water: #FF468A;

    --navbar-width: 60px;
    --sidebar-width: 220px;
    --sidebar-total-width: calc(var(--navbar-width) + var(--sidebar-width));
    --topmenu-height: var(--navbar-width);
    --editor-toolbar-width: max(20%, 20rem);

    /* lemonyellow */
    --lemonyellow-50: #fffdeb;
    --lemonyellow-100: #fffbca;
    --lemonyellow-200: #fff79e;
    --lemonyellow-300: #fff474;
    --lemonyellow-400: #fff04d;
    --lemonyellow-500: #ffea00;
    --lemonyellow-600: #e6d200;
    --lemonyellow-700: #ccbb00;
    --lemonyellow-800: #b3a400;
    --lemonyellow-900: #998c00;
    /* yelloworange */
    --yelloworange-50: #fef9ec;
    --yelloworange-100: #fcf1cf;
    --yelloworange-200: #fae4a3;
    --yelloworange-300: #f8d97c;
    --yelloworange-400: #f6ce55;
    --yelloworange-500: #f4c025;
    --yelloworange-600: #daa60b;
    --yelloworange-700: #c2940a;
    --yelloworange-800: #a57e09;
    --yelloworange-900: #886806;
    /* carrotorange */
    --carrotorange-50: #fff5eb;
    --carrotorange-100: #ffe6cc;
    --carrotorange-200: #ffcf9e;
    --carrotorange-300: #ffba75;
    --carrotorange-400: #ffa64d;
    --carrotorange-500: #ff8c1a;
    --carrotorange-600: #e57300;
    --carrotorange-700: #c76300;
    --carrotorange-800: #a85400;
    --carrotorange-900: #8f4700;
    /* khaki */
    --khaki-50: #f8f6f2;
    --khaki-100: #ede9de;
    --khaki-200: #dcd6c1;
    --khaki-300: #cdc4a7;
    --khaki-400: #bfb38d;
    --khaki-500: #ac9d6c;
    --khaki-600: #938453;
    --khaki-700: #837549;
    --khaki-800: #6f643e;
    --khaki-900: #5b5233;
    /* red */
    --red-50: #fdedec;
    --red-100: #fbd3d0;
    --red-200: #f8aba5;
    --red-300: #f58780;
    --red-400: #f2645a;
    --red-500: #ee382b;
    --red-600: #d41e11;
    --red-700: #bd1b0f;
    --red-800: #a0170d;
    --red-900: #80120a;
    /* limegreen */
    --limegreen-50: #f0f9f1;
    --limegreen-100: #daf1dc;
    --limegreen-200: #b8e5bd;
    --limegreen-300: #9adaa1;
    --limegreen-400: #7dcf85;
    --limegreen-500: #57c162;
    --limegreen-600: #3ea849;
    --limegreen-700: #379540;
    --limegreen-800: #2d7b35;
    --limegreen-900: #225d28;
    /* pinegreen */
    --pinegreen-50: #f3f7f6;
    --pinegreen-100: #e0ebe9;
    --pinegreen-200: #c3dad6;
    --pinegreen-300: #aacac4;
    --pinegreen-400: #91bab3;
    --pinegreen-500: #72A79D;
    --pinegreen-600: #588d83;
    --pinegreen-700: #4f7d75;
    --pinegreen-800: #41685f;
    --pinegreen-900: #314e4a;
    /* iceblue */
    --iceblue-50: #eefafc;
    --iceblue-100: #d4f3f7;
    --iceblue-200: #aee8ef;
    --iceblue-300: #8bdee9;
    --iceblue-400: #69d4e2;
    --iceblue-500: #3ec8da;
    --iceblue-600: #25afc1;
    --iceblue-700: #219bab;
    --iceblue-800: #1b808d;
    --iceblue-900: #14616c;
    /* purple */
    --purple-50: #fbeffb;
    --purple-100: #f4d7f4;
    --purple-200: #e9b4e9;
    --purple-300: #e094e0;
    --purple-400: #d775d7;
    --purple-500: #cb4dcb;
    --purple-600: #b234b2;
    --purple-700: #9e2e9e;
    --purple-800: #862786;
    --purple-900: #6b1e6b;
    /* metalgray */
    --metalgray-50: #f9fafb;
    --metalgray-100: #f1f2f4;
    --metalgray-200: #e3e5e8;
    --metalgray-300: #d3d6da;
    --metalgray-400: #b1b9c3;
    --metalgray-500: #9098a2;
    --metalgray-600: #656D76;
    --metalgray-700: #5d656f;
    --metalgray-800: #3C4147;
    --metalgray-900: #2f3337;
    /* neutrals */
    --neutrals-50: #ffffff;
    --neutrals-100: #f5f5f5;
    --neutrals-200: #ededed;
    --neutrals-300: #d4d4d4;
    --neutrals-400: #a6a6a6;
    --neutrals-500: #8c8c8c;
    --neutrals-600: #666666;
    --neutrals-700: #4d4d4d;
    --neutrals-800: #262626;
    --neutrals-900: #000000;

    /* Semantic colors */

    /* Areas */
    --areas-waermepumpe: #ee382b;
    --areas-warmwasser: #ee382b;
    --areas-heizen: #ff8c1a;
    --areas-photovoltaik: #f4c025;
    --areas-heizstab: #f4c025;
    --areas-netzeinspeisung: #8c8c8c;
    --areas-netzbezug: #8c8c8c;
    --areas-fehlende: #8c8c8c;
    --areas-abtauung: #588d83;
    --areas-eauto: #3ea849;
    --areas-eladestation: #3ea849;
    --areas-batterieladung: #bfb38d;
    --areas-batterieentladung: #bfb38d;
    --areas-heizkessel: #b234b2;
    --areas-kuehlen: #3ec8da;
    --areas-quellen-allgemein: #454B54;

    /* Notification */
    --notification-danger: #d41e11;
    --notification-warning: #ff8c1a;
    --notification-success: #57C162;
    --notification-info: #3ec8da;

    /* Operating */

    --operating-mode-on: #3ea849;
    --operating-mode-off: #d41e11;
    --operating-mode-disabled: #b1b9c3;

    /* Overlay */

    --overlay-dark: #454b54;
    --overlay-light: #9098a2;

    /* Energylabels */

    --energylabels-D: #d41e11;
    --energylabels-C: #ff8c1a;
    --energylabels-B: #f4c025;
    --energylabels-A: #7dcf85;
    --energylabels-A-p: #3ea849;
    --energylabels-A-pp: #2d7b35;




    /* Boxshadows */

    /* Subtle */
    --boxshadow-subtle-bottom: 0px 4px 8px rgba(0, 0, 0, 0.05);
    --boxshadow-subtle-top: 0px -4px 8px rgba(0, 0, 0, 0.05);
    --boxshadow-subtle-left: -4px 0px 8px rgba(0, 0, 0, 0.05);
    --boxshadow-subtle-right: 4px 0px 8px rgba(0, 0, 0, 0.05);

    /* Base */
    --boxshadow-base-bottom: 0px 6px 10px rgba(0, 0, 0, 0.07);
    --boxshadow-base-top: 0px -6px 10px rgba(0, 0, 0, 0.07);
    --boxshadow-base-left: -6px 0px 10px rgba(0, 0, 0, 0.07);
    --boxshadow-base-right: 6px 0px 10px rgba(0, 0, 0, 0.07);

    /* Intense */
    --boxshadow-intense-bottom: 0px 8px 12px rgba(0, 0, 0, 0.1);
    --boxshadow-intense-top: 0px -8px 12px rgba(0, 0, 0, 0.1);
    --boxshadow-intense-left: -8px 0px 12px rgba(0, 0, 0, 0.1);
    --boxshadow-intense-right: 8px 0px 12px rgba(0, 0, 0, 0.1);

}

.metalgray-50 {
    color: var(--metalgray-50);
}

.metalgray-100 {
    color: var(--metalgray-100);
}

.metalgray-200 {
    color: var(--metalgray-200);
}

.metalgray-300 {
    color: var(--metalgray-300);
}

.metalgray-400 {
    color: var(--metalgray-400);
}

.metalgray-500 {
    color: var(--metalgray-500);
}

.metalgray-600 {
    color: var(--metalgray-600);
}

.metalgray-700 {
    color: var(--metalgray-700);
}

.metalgray-800 {
    color: var(--metalgray-800);
}

.metalgray-900 {
    color: var(--metalgray-900);
}

.notification-danger {
    color: var(--notification-danger);
}

.text-bold {
    font-weight: bold;
}

.text-normal {
    font-weight: normal;
}

.text-tiny {
    font-size: 0.75rem;
}

.text-sm {
    font-size: 0.875rem;
}

.text-md {
    font-size: 1rem;
}

.text-lg {
    font-size: 1.25rem;
}

.text-xl {
    font-size: 1.5rem;
}

.text-xxl {
    font-size: 2rem;
}

.text-3xl {
    font-size: 3rem;
}

.text-4xl {
    font-size: 4rem;
}

* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-style: normal;
    font-size: var(--font-size-sm);
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
}

.top-bar-container {
    display: flex;
    padding: 0 2rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid #E3E5E8;
    background-color: var(--lemonyellow-400);
    height: var(--topmenu-height);
    min-height: var(--topmenu-height);
    max-height: var(--topmenu-height);
    overflow-x: auto;
    border-bottom: 1px solid var(--lemonyellow-600);
    border-left: 1px solid var(--lemonyellow-600);
}

.top-bar-search {
    display: flex;
    /*    max-width: 1400px;*/
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.top-bar-chip-group {
    display: flex;
    /*    max-width: 1400px;*/
    width: 100%;
    gap: 48px;
}

/* Right-aligned cluster of top-bar controls (sidebar toggle + drawer button). */
.top-bar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* Toggle for the overlay sidebar — hidden on wide screens, shown via the
   small-screen media query where the sidebar becomes an overlay. */
#sidebar-overlay-toggle {
    display: none;
    cursor: pointer;
    align-items: center;
    padding: 0.25rem;
    font-size: 1.5rem;
    color: #3C4147;
}

/* Backdrop behind the open overlay sidebar — only ever shown on small screens. */
.sidebar-overlay-backdrop {
    display: none;
}

.base-container {
    display: grid;
    height: 100vh;
    height: 100dvh;
    grid-template-columns: var(--navbar-width) 1fr;
    overflow: hidden;
}

#content {
    height: auto;
    overflow: auto;
    grid-column: 2 / 3;
}

#navbar {
    background-color: var(--primary);
    height: 100%;
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-md);
    --icon-margin: 0.625rem;
    --icon-size: 1.2em;
    --icon-padding: calc((var(--navbar-width) - var(--icon-size)) / 2 - var(--icon-margin));
}

#navbar a {
    font-size: var(--font-size-md);
}

#navbar a:not(.logo-link):first-child {
    margin-top: 2rem;
}

#navbar a:not(.logo-link):last-child {
    margin-bottom: 2rem;
}

.logo-link .logo {
    width: 60px;
    height: 60px;
    background: black;
}

#navbar .icon {
    margin-right: var(--icon-padding);
    font-size: var(--icon-size);
}

#navbar a {
    text-align: left;
    padding-block: var(--icon-padding);
    color: var(--metalgray-semibold);
    padding-left: var(--icon-padding);
    white-space: nowrap;
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-inline: var(--icon-margin);
    margin-block: 0.125rem;
    border-radius: 0.25rem;
}

#navbar a.logo-link {
    margin: 0;
}

.navbar-text {
    display: none;
    width: 0;
    font-size: var(--font-size-md);
}

#navbar a.selected {
    background-color: #454b54;
    color: var(--primary)
}

#navbar:hover .navbar-text,
#navbar:focus-within .navbar-text,
#navbar.expand .navbar-text {
    display: inline-block !important;
}

#navbar a:hover,
#navbar a:focus,
#navbar a.selected {
    background-color: #454b54;
    color: var(--primary)
}

#navbar a.logo-link {
    padding: 0;
    display: flex;
    margin-bottom: 1rem;
}

.icon-sm {
    width: 1rem;
    height: 1rem;
    font-size: 1rem;
}

.icon-md {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1.25rem;
}

.icon-lg {
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.5rem;
}

.flex-placeholder {
    flex: 1;
}

.flex-divider {
    border-bottom: 1px solid var(--metalgray-light);
}

.m-3 {
    margin: 1rem;
}

.text-gray-regular {
    color: var(--metalgray-regular);
}

.text-gray-medium {
    color: var(--metalgray-medium);
}

.text-gray-semibold {
    color: var(--metalgray-semibold);
}

.text-gray-bold {
    color: var(--metalgray-bold);
}

/*.button {
    --button-border-color: var(--button-color-hover);
    --button-border-width: 1px;
    --padding-x: 1.5rem;
    --padding-y: 1rem;
    text-decoration: none;
    color: initial;
    padding: calc(var(--padding-y) - var(--button-border-width)) calc(var(--padding-x) - var(--button-border-width));
    border-radius: .25rem;
    font-size: var(--font-size-sm);
    border: var(--button-border-width) solid var(--button-border-color);
    cursor: pointer;
    background-color: var(--button-color);
    color: var(--button-text-color);
    display: inline-flex;
    place-items: center;
    place-content: center;
    gap: 0.375rem;
}

.button [class^="icon-"], .button [class*=" icon-"] {
    font-size: 1.25em;
}

.button-outline {
    background-color: transparent;
    color: var(--button-color);
}

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

.button:focus-visible {
    --button-border-width: 2px;
    background-color: var(--button-color-focus);
    outline: 0;
}

.button:active {
    background-color: var(--button-color-focus);
}

.button:disabled {
    pointer-events: none;
    opacity: .65;
}

.button-outline:hover,
.button-outline:focus,
.button-outline:active {
    color: var(--button-color);
}

.button-primary {
    --button-color: var(--primary);
    --button-color-rgb: var(--primary-rgb);
    --button-text-color: var(--metalgray-semibold);
    --button-color-hover: var(--primary-dark);
    --button-color-focus: var(--primary-light);
}

.button-gray {
    --button-color: var(--secondary);
    --button-color-rgb: var(--secondary-rgb);
    --button-text-color: white;
    --button-color-hover: var(--secondary-dark);
    --button-color-focus: var(--secondary-light);
}

.button-danger {
    --button-color: var(--danger);
    --button-color-rgb: var(--danger-rgb);
    --button-text-color: white;
    --button-color-hover: var(--danger-dark);
    --button-color-focus: var(--danger-light);
}

.button-success {
    --button-color: var(--success);
    --button-color-rgb: var(--success-rgb);
    --button-text-color: white;
    --button-color-hover: var(--success-dark);
    --button-color-focus: var(--success-light);
}

.button-inverted {
    --button-color: var(--metalgray-semibold);
    --button-color-rgb: var(--metalgray-semibold-rgb);
    --button-text-color: var(--primary);
    --button-color-hover: var(--metalgray-bold);
    --button-color-focus: var(--metalgray-medium);
}

.button-white {
    --button-color: white;
    --button-color-rgb: 255, 255, 255;
    --button-text-color: var(--metalgray-medium);
    --button-border-color: var(--metalgray-light);
    --button-color-hover: white;
    --button-color-focus: white;
}

.button-lg {
    --padding-x: 1.5rem;
    --padding-y: 1rem;
}

.button-md {
    --padding-x: 1rem;
    --padding-y: .75rem;
}

.button-sm {
    --padding-x: 1rem;
    --padding-y: .5rem;
}

.button-xs {
    --padding-x: .75rem;
    --padding-y: .375rem;
}

.button-icon {
    --padding-x: var(--padding-y);
}

.button-icon [class^="icon-"], .button [class*=" icon-"] {
    font-size: 1.5em;
}

.button-xs.button-icon {
    --padding-y: .125rem;
}

.button-xs.button-icon [class^="icon-"], .button-xs.button-icon [class*=" icon-"] {
    font-size: 1.25em;
}

.button-select {
    --padding-x: 1rem;
    --padding-y: .25rem;
    border: 1px solid var(--metalgray-500);
}

.button-group {
    display: flex;
}

.button-group .button {
    border-radius: 0;
    border-right: 1px solid var(--button-color-hover);
}

.button-group .button:first-child {
    border-radius: 0.25rem 0 0 0.25rem;
}

.button-group .button:last-child {
    border-radius: 0 0.25rem 0.25rem 0;
    border-right: none;
}*/

.button-transparent {
    border-color: transparent;
    background-color: transparent;
    color: var(--idmCompButtonColorPrimaryFg);
}

.column-flex-container {
    margin: 1rem;
    gap: 1rem;
    display: flex;
    flex-direction: column;
}

.d-none,
.hidden,
.collapsed {
    display: none !important;
}

.vis-hidden {
    visibility: hidden;
}

.unstyled-button {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    /* outline: inherit; */
}

input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
    height: 2rem;
    --range: calc(var(--max) - var(--min));
    --ratio: calc((var(--value) - var(--min)) / var(--range));
    --sx: calc(0.5 * 2em + var(--ratio) * (100% - 2em));
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1rem;
    background-color: var(--lemonyellow-400);
    border-radius: 10rem;
    border: 1px solid #E3D546;
    margin-top: -0.375rem;
    color: var(--lemonyellow-400);
    cursor: grab;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.05);
}

input[type=range]::-webkit-slider-thumb:active {
    cursor: grabbing;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: .25rem;
    color: transparent;
    border-radius: .5rem;
    background: linear-gradient(#E8DB48, #E8DB48) 0/var(--sx) 100% no-repeat, var(--metalgray-200);
    cursor: pointer;
}

input[type=range]::-moz-range-thumb {
    width: 1.25rem;
    height: 1rem;
    background-color: var(--lemonyellow-400);
    border-radius: 10rem;
    border: 1px solid #E3D546;
    cursor: grab;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.05);
}

input[type=range]::-moz-range-thumb:active {
    cursor: grabbing;
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: .25rem;
    color: transparent;
    border-radius: .5rem;
    background-color: var(--metalgray-200);
    border-color: transparent;
    cursor: pointer;
}

input[type=range]::-moz-range-progress {
    background-color: #E8DB48;
    height: .25rem;
    border-radius: .5rem;
    cursor: pointer;
}

#context-menu::after,
#context-menu::before {
    right: 100%;
    top: 1rem;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
}

#context-menu:after {
    border-right-color: white;
    border-width: calc(.5rem - 1px);
    margin-top: calc(-.5rem + 1px);
}

#context-menu:before {
    border-right-color: rgba(0, 0, 0, .15);
    border-width: .5rem;
    margin-top: -.5rem;
}

.dropdown-menu {
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: 10rem;
    padding: .5rem 0;
    margin: 0;
    font-size: var(--font-size-sm);
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: white;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: .25rem;
}

.pointer {
    cursor: pointer;
}

.dropdown-item {
    display: block;
    padding: .25rem 1rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

.dropdown-item:focus,
.dropdown-item:hover {
    color: #1e2125;
    background-color: #e9ecef;
}

.dropdown-menu.show {
    display: block;
}

.nav-tabs {
    border-bottom: 1px solid #dee2e6;
}

.nav-item {
    flex: 1 1 content;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin: 0;
    list-style: none;
    height: fit-content;
}

.nav-link {
    display: block;
    padding: .5rem 0;
    color: #0d6efd;
    text-decoration: none;
    text-align: center;
}

.nav-tabs .nav-link {
    margin-bottom: -1px;
    background: white;
    border: 1px solid transparent;
    border-bottom-color: #ddd;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    cursor: pointer;
}

.nav-link.active {
    color: black;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}

.form-control {
    border-radius: 0.25rem;
    display: block;
    outline: none;
    width: 100%;
    padding: .375rem .75rem;
    font-size: var(--font-size-sm);
    font-weight: 400;
    line-height: 1.5;
    color: var(--metalgray-bold);
    background: white;
    background-clip: padding-box;
    border: 1px solid var(--metalgray-400);
}

.form-control-lg {
    height: 3.5rem;
}

.form-control-sm {
    padding: .125rem .5rem;
}

.rotate {
    -moz-transition: all .5s linear;
    -webkit-transition: all .5s linear;
    transition: all .5s linear;
}

.rotate.down {
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.vertical-divider {
    border-left: 1px solid var(--metalgray-light);
}

.rotate-1 {
    rotate: 0deg;
}

.rotate-2 {
    rotate: 90deg;
}

.rotate-3 {
    rotate: 180deg;
}

.rotate-4 {
    rotate: 270deg;
}

.counter-mirror,
.counter-rotate {
    --counter-rotate: 0deg;
    --counter-scale: 1, 1;
    transform: scale(var(--counter-scale)) rotate(var(--counter-rotate));
}

.rotate-1 .counter-rotate {
    --counter-rotate: 0deg;
}

.rotate-2 .counter-rotate {
    --counter-rotate: -90deg;
}

.rotate-3 .counter-rotate {
    --counter-rotate: -180deg;
}

.rotate-4 .counter-rotate {
    --counter-rotate: -270deg;
}

.mirrored-vertical {
    transform: scale(1, -1);
}

.mirrored-horizontal {
    transform: scale(-1, 1);
}

.mirrored-horizontal.mirrored-vertical {
    transform: scale(-1, -1);
}

.mirrored-vertical .counter-mirror {
    --counter-scale: 1, -1;
}

.mirrored-horizontal .counter-mirror {
    --counter-scale: -1, 1;
}

.mirrored-horizontal.mirrored-vertical .counter-mirror {
    --counter-scale: -1, -1;
}

.spin {
    animation: spin linear 3s infinite;
    transform-origin: center center;
}

.move {
    animation: move linear 1s infinite;
    transform-origin: center center;
}

.fade-inner {
    animation: fade-inner 3s linear infinite;
    animation-fill-mode: forwards;
}

.fade-outer {
    animation: fade-outer 3s linear infinite;
    animation-fill-mode: forwards;
}

.paused-animation,
.paused-animation * {
    animation-play-state: paused !important;
}

.no-animation,
.no-animation * {
    animation: none !important;
}

.no-animation .fade-inner,
.no-animation .fade-outer {
    opacity: 1;
}

.table {
    border-collapse: collapse;
}

.table tr,
.table th,
.table td {
    border: 1px solid var(--metalgray-light);
}

.bg-defrost {
    background-color: var(--color-mode-defrost);
}

.bg-heating {
    background-color: var(--color-mode-heating);
}

.bg-cooling {
    background-color: var(--color-mode-cooling);
}

.bg-off {
    background-color: var(--color-mode-disabled);
}

.bg-warm_water {
    background-color: var(--color-mode-warm-water);
}

.bg-on {
    background-color: var(--color-mode-on);
}

.color-heating {
    color: var(--color-mode-heating);
}

.color-cooling {
    color: var(--color-mode-cooling);
}

.color-off {
    color: var(--color-mode-disabled);
}

.color-warm_water {
    color: var(--color-mode-warm-water);
}

.color-defrost {
    color: var(--color-mode-defrost);
}

.color-on {
    color: var(--color-mode-on);
}

.color-success {
    color: var(--success);
}

.color-danger {
    color: var(--danger);
}

.circle {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

.circle-sm {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
}

.circle-tiny {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
}

.mode-indicator {
    --mode-indicator-width: 0.625rem;
    border-radius: calc(var(--mode-indicator-width) / 2);
    display: inline-block;
    margin-block: auto;
    width: var(--mode-indicator-width);
    height: var(--mode-indicator-width);
}

.mode-indicator-lg {
    --mode-indicator-width: 1rem;
}


/* Flex table */

.progress-container,
.pie-chart-container {
    position: relative;
    width: max-content;
    height: max-content;
    color: #3D454D;
}

.progress-container svg circle {
    transition: stroke-dashoffset 0.5s ease-out;
}

.progress-text-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 1rem;
    place-items: center;
    font-weight: bold;
}

.flex-row-outer-container {
    overflow: auto;
    max-height: 100%;
}

.flex-row-container {
    display: flex;
    flex-direction: column;
    padding-block: 1.5rem;
    max-width: 1400px;
    margin: auto;
}

.flex-row {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid var(--metalgray-200);
    background: white;
    padding: 0.75rem 1.5rem;
}

.flex-row .flex-row-cell {
    flex: 1;
}

.flex-row-cell {
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
    align-items: center;
}

.flex-row-cell[data-col] {
    cursor: pointer;
    border-left: 1px solid #D3D6DA;
    padding-left: 8px;
    line-height: 170%;
}

/*.flex-row-cell i {
    font-size: var(--font-size-xl);
}*/

.flex-row-container .header {
    border-radius: 0.25rem 0.25rem 0rem 0rem;
    border-bottom: 1px solid var(--metalgray-300);
    background: white;
    font-size: var(--font-size-xs);
    color: #6f7a85;
}

.flex-row-container .header .flex-row-cell {}

.flex-row-container .flex-row:first-child {
    border-radius: 0.25rem 0.25rem 0rem 0rem;
}

.flex-row-container .flex-row:last-child {
    border-radius: 0 0 0.25rem 0.25rem;
}

.flex-row-icon-cell {
    display: flex;
    gap: 16px;
}

.inactive-icon {
    color: #DFE2E5;
}

.flex-row-icon-container {
    position: relative;
}

.header i {
    font-size: var(--font-size-sm);
}

.sort {
    background: var(--lemonyellow-200);
}

.stacked-title-value {
    display: flex;
    flex-direction: column;
}

.stacked-title {
    color: var(--metalgray-500);
    font-size: var(--font-size-xs);
    line-height: 150%;
}

.stacked-value {
    color: #454b54;
    font-size: var(--font-size-sm);
    line-height: 120%;
}

.flex-row-value {
    color: #454b54;
    font-size: var(--font-size-sm);
    line-height: 100%;
    display: flex;
    align-items: center;
}

.flex-fixed-auto {
    flex: 0 0 auto;
}

.button-chip input {
    visibility: hidden;
    height: 0;
    width: 0;
    position: absolute;
}

input[type="checkbox"] {
    border-radius: 0.25rem;
    border: 1px solid var(--metalgray-400);
    background: white;
    appearance: none;
    width: 1rem;
    height: 1rem;
}

input[type="checkbox"]:checked {
    background-color: var(--lemonyellow-200);
    background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14.4711%204.02864C14.7314%204.28899%2014.7314%204.7111%2014.4711%204.97145L6.47108%2012.9714C6.21073%2013.2318%205.78862%2013.2318%205.52827%2012.9714L2.02827%209.47145C1.76792%209.2111%201.76792%208.78899%202.02827%208.52864C2.28862%208.26829%202.71073%208.26829%202.97108%208.52864L5.99967%2011.5572L13.5283%204.02864C13.7886%203.76829%2014.2107%203.76829%2014.4711%204.02864Z%22%20fill%3D%22%23454B54%22%2F%3E%3C%2Fsvg%3E");
}

input[type="checkbox"].checkbox-lg {
    width: 1.25rem;
    height: 1.25rem;
}

.fade-out {
    opacity: 0;
    transition: opacity 1s;
}

.progress-bar {
    width: 109px;
    height: 9px;
    background: #E1E1E1;
}

.progress {
    width: 0%;
    height: 100%;
    background: #606C79;
}

.my-badge {
    display: flex;
    min-width: 1.25rem;
    padding: 0.1875rem 0.25rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 100rem;
    background: #8B96A3;
    color: white;
    box-sizing: border-box;
    font-size: 0.875rem;
    line-height: 1;
}

@keyframes move {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(24px);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes fade-inner {
    0% {
        opacity: 0;
    }

    25%,
    75% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fade-outer {

    0%,
    25% {
        opacity: 0;
    }

    50%,
    75% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@media (prefers-reduced-motion) {
    * {
        transition: none !important;
        animation: none !important;
    }

    .fade-inner,
    .fade-outer {
        opacity: 1;
    }
}

/* Sidebar */


.sidebar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;

    width: var(--sidebar-total-width);
    height: 100vh;
    height: 100dvh;
    background-color: #EFF1F3;
    color: var(--metalgray-900);

    position: relative;
}

.sidebar-top {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;

    width: var(--sidebar-total-width);
    height: var(--topmenu-height);

    text-decoration: none;
    color: unset;
}

.sidebar-header {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0px 20px;
    gap: 8px;
    width: 100%;
    height: 100%;
    background: var(--lemonyellow-400);
    border-bottom: 1px solid var(--lemonyellow-600);
}

.sidebar-icon {
    width: 60px;
    height: 60px;
    background: black;
}

.sidebar-bottom {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    align-self: stretch;
    padding: 48px 11px 24px 11px;
    height: 100%;
    z-index: 1040;
    overflow: auto;
}

.sidebar-items {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 4px;
}

.sidebar-item-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.sidebar-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
    width: 258px;
    padding: 8px 12px;
    gap: 12px;
    cursor: pointer;
    border-radius: 4px;
    position: relative;
    color: #3C4147 !important;
}

.sidebar-item:hover {
    background-color: white !important;
    color: #3C4147 !important;
    border-radius: 4px !important;
}

.sidebar-item-extended {
    max-height: 0px;
    overflow: hidden;
    flex-direction: column;
    background: var(--lemonyellow-200);
    border-radius: 0px 0px 4px;
    transition: max-height .442s cubic-bezier(.4, 0, .6, 1) 80ms;
}

.sidebar-item-extended>.sidebar-item {
    background: transparent;
    justify-content: space-between;
    border-radius: 0px
}

.sidebar-item-icon {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    box-sizing: border-box;
    min-width: 20px;
}

.sidebar-item-textarea {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;

    width: 210px;
    box-sizing: border-box;
    justify-content: space-between;
}

.sidebar-item-textarea .navigation-md {
    text-overflow: ellipsis;
    overflow: hidden;
    margin-right: 40px;
    white-space: nowrap;
}

.sidebar-toggle-caret {
    padding: 12px;
    position: absolute;
    right: 0;
}

.sidebar-items-meta {
    display: flex;
    padding: 0px 0px 16px 0px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: 2px;
}

.sidebar-item-meta {
    display: flex;
    padding: 8px 12px;
    align-items: center;
    gap: 12px;
    align-self: stretch;
    border-radius: 4px;
    box-sizing: border-box;
    width: 258px;

    cursor: pointer;
}

.sidebar-item-meta:hover {
    background-color: white;
    color: #3C4147;
}

.sidebar-item-meta:hover .sidebar-item-meta-textarea {
    justify-content: space-between;
}

.sidebar-item:hover .sidebar-item-textarea {
    justify-content: space-between;
}

.sidebar-item-meta-icon {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.sidebar-item-meta-textarea {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 210px;
    box-sizing: border-box;
    gap: 8px;
}

.sidebar-notification {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 1px 6px;
    gap: 10px;
    width: 22px;
    height: 24px;
    border-radius: 4px;

    box-sizing: border-box;
    justify-content: center;
}

.sidebar-notification-success {
    background: var(--notification-success);
}

.sidebar-notification-warning {
    background: var(--notification-warning)
}

.sidebar-item-active {
    background-color: white !important;
    color: #3C4147 !important;
    border-radius: 4px !important;
}

.sidebar-item-dropdown-active {
    background-color: var(--lemonyellow-200);
    color: #454b54;
    border-radius: 4px 4px 0px 0px;
}

.sidebar-item-dropdown-active .icon-caret-down {
    rotate: 180deg;
}

.sidebar-item-extended .sidebar-item {
    padding-left: 48px;
}

.sidebar-item-extended .sidebar-item-extended .sidebar-item {
    padding-left: 64px;
}

.sidebar-item-extended .sidebar-item-extended .sidebar-item-extended .sidebar-item {
    padding-left: 80px;
}

#sidebar-collapse-button {
    display: flex;
    padding: 0.125rem;
    align-items: flex-start;
    z-index: 1150;
    cursor: pointer;
}

.collapsed-sidebar #sidebar-collapse-button i {
    rotate: 180deg;
}

.collapsed-sidebar .sidebar-bottom {
    padding: 48px 8px 24px 8px;
}

.collapsed-sidebar .sidebar-item,
.collapsed-sidebar .sidebar-item-meta {
    width: calc(var(--navbar-width) - 16px);
    overflow: hidden;
}

.collapsed-sidebar .sidebar-item-extended .sidebar-item {
    display: none;
}

.collapsed-sidebar .sidebar-header {
    display: none;
}

.collapsed-sidebar {
    --sidebar-total-width: var(--navbar-width)
}

.collapsed-sidebar .sidebar-toggle-caret {
    display: none
}

.collapsed-sidebar .sidebar-item-dropdown-active {
    background: unset;
    color: unset;
}

.hidden-sidebar .sidebar-bottom {
    display: none;
}

.hidden-sidebar #content {
    grid-column: 1 / 3;
}

.hidden-sidebar #sidebar-collapse-button {
    display: none;
}

.tabbar-item {
    cursor: pointer;
}

.tabbar-web>.tabbar-item {
    min-height: calc(var(--idmCompNavTabScreenWebSizeContainerMinHeight) - var(--idmCompNavTabBorderwidthContainer));
}


/* Icon size */

.icon-2xs {
    height: 16px;
    width: 16px;
    font-size: 16px;
}

.icon-xs {
    height: 20px;
    width: 20px;
    font-size: 20px
}

.icon-s {
    height: 24px;
    width: 24px;
    font-size: 24px;
}

.icon-m {
    height: 32px;
    width: 32px;
    font-size: 32px;
}

.icon-l {
    height: 40px;
    width: 40px;
    font-size: 40px;
}

.icon-xl {
    height: 50px;
    width: 50px;
    font-size: 50px;
}

.icon-2xl {
    height: 64px;
    width: 64px;
    font-size: 64px;
}

.icon-3xl {
    height: 80px;
    width: 80px;
    font-size: 80px;
}


/* Placeholder/Loading-Spinner */

.placeholder,
.text-placeholder {
    background-color: rgba(0, 0, 0, 0.12) !important;
    border-radius: 4px;
    cursor: wait;
    position: relative;
    overflow: hidden;
}

.placeholder {
    width: 200px;
    height: 24px;
}

.text-placeholder {
    width: 1em;
    display: block;
    white-space: pre;
}

.placeholder:before,
.text-placeholder:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: wave 1.5s linear .5s infinite;
}

@keyframes wave {
    0% {
        transform: translateX(-100%)
    }

    100% {
        transform: translateX(100%)
    }
}

.placeholder-alt {
    display: inline-block;
    min-height: 1em;
    vertical-align: middle;
    cursor: wait;
    background-color: currentColor;
    opacity: .5;
    -webkit-animation: placeholder-glow 2s ease-in-out infinite;
    animation: placeholder-glow 2s ease-in-out infinite;
    border-radius: 4px;
}

@keyframes placeholder-glow {
    50% {
        opacity: 0.2;
    }
}

@keyframes spinner-border {
    to {
        transform: rotate(360deg)
    }
}

.spinner-border {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.125em;
    border-radius: 50%;
    border: 0.25em solid currentcolor;
    border-right-color: transparent;
    -webkit-animation: 0.75s linear infinite spinner-border;
    animation: 0.75s linear infinite spinner-border;
    flex: none;
}

.spinner-sm {
    width: .75em;
    height: .75em;
    border-width: .125em;
}

.spinner-fit-height {
    height: 100%;
    width: unset;
    aspect-ratio: 1 / 1;
    animation-duration: 2s;
}

.spinner-fit-width {
    width: 100%;
    height: unset;
    aspect-ratio: 1 / 1;
    animation-duration: 2s;
}

.sticky-top {
    position: sticky;
    top: 0;
    z-index: 1050;
}

.tabbar-web {
    padding: 0;
}

.tabbar-container {
    padding: 0px calc(var(--idmCompNavTabScreenWebInset));
}

.reset-filter {
    align-self: center;
    white-space: nowrap;
}

.player-bar-button {
    background: white;
    color: #646C75;
    border: 1px solid #ADB3BA;
    border-radius: 4px
}

.player-bar-button-selected {
    background: #FFFABE;
    color: #3A3E43;
    border: 1px solid #ADB3BA;
}

.player-bar-button:hover {}

#notifications {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    width: max-content;
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 16px;
}


/* */

.col-3 {
    width: 25%;
}

.col-4 {
    width: 33.3333%;
}

.col-6 {
    width: 50%;
}

.col-12 {
    width: 100%;
}

.select-sm {
    padding: calc(var(--idmCompSelectSmInsetSm)) calc(var(--idmCompSelectSmInsetMd));
    line-height: 115%;
    padding-right: 2rem;
}

.select-i-before {
    width: calc(var(--idmCompSelectSmSizeIcon));
    height: calc(var(--idmCompSelectSmSizeIcon));
    font-size: calc(var(--idmCompSelectSmSizeIcon));
    top: calc(50% - (var(--idmCompSelectSmSizeIcon) / 2));
    left: calc(var(--idmCompSelectSmInsetMd));
}

.circle-primary {
    border-radius: 50%;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--idmCompButtonColorPrimaryEnabledBg);
    display: grid;
    place-content: center;
    margin: 0;
}

p {
    margin: 0;
}

.underlined {
    text-decoration-line: underline;
}

hr {
    width: 100%;
    height: 0;
    color: inherit;
    border-top-width: 1px;
    border: none;
    border-top: 1px solid #ddd;
    border-color: #e5e7eb;
}

.drawer-wrapper {
    position: fixed;
    inset: 0;
    z-index: 1160;
    display: flex;
}

.drawer-backdrop {
    background-color: #0000004d;
    flex: 1;
    height: 100%;
}

.drawer {
    width: 400px;
    height: 100%;
    flex-basis: 400px;
    padding-inline: 1.25rem;
    padding-block: 1rem;
    background: white;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.tabbar-web {
    max-width: unset;
}

.integer-range-radio {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}

.integer-range-radio-option-container {
    flex: 1;
    cursor: pointer;
}

.integer-range-radio-option-container>input {
    display: none;
}

.integer-range-radio-option-container>input:checked~.integer-range-radio-option {
    background: var(--lemonyellow-400);
}

.integer-range-radio-option {
    display: grid;
    padding: 0.75rem;
    place-content: center;
    cursor: pointer;
    border: 1px solid var(--metalgray-200);
    border-radius: 0.25rem;
}

.survey-question-row {
    margin-bottom: 1.5rem;
}

.survey-question-min-max-texts {
    display: flex;
    justify-content: space-between;
    width: 100%;
    color: #6f7a85;
    margin-top: 0.25rem;
}

.survey-question-min-max-texts div:last-child {
    text-align: end;
}

@media screen and (max-width: 768px) {
    .integer-range-radio {
        gap: 0rem;
    }

    .integer-range-radio-option {
        padding-inline: 0.5rem;
    }

    .base-container {
        grid-template-columns: 1fr;
        grid-template-rows: 60px 1fr;
    }
}

.icon-switch {
    color: #8B96A3;
    font-size: 1.5rem;
    width: 4rem;
    height: 2rem;
    border-radius: 0.25rem;
    border: 1px solid #ADB3BA;
    display: flex;
    background: var(--metalgray-100);
}

.icon-switch-choice {
    padding: calc(0.25rem - 0.5px);
    border-radius: 0.25rem;
    cursor: pointer;
}

.icon-switch-choice-selected {
    background: white;
    color: #656D76;
}

.user-icon {
    background-color: #3D454D;
    color: white;
}

.modal-dialog {
    flex-direction: column;
    position: absolute;
    border-radius: .5rem;
    inset: 0;
    margin: auto;
    width: 400px;
    height: fit-content;
    border: 1px solid gray;
    background: white;
}

dialog[open] {
    display: flex !important;
}

.modal-header {
    font-weight: bold;
    font-size: 1.25rem;
    line-height: 140%;
    color: #454B54;
    flex: 1;
    padding: 1rem;
}

.modal-body {
    flex: 1;
    padding: 1rem;
}

.modal-footer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem;
}

.backdrop,
::backdrop {
    background: rgba(144, 152, 162, 0.8);
}

modal[open] {
    display: flex;
}

input:user-invalid {
    border: 1px solid var(--idmCompInputColorDangerBorder);
}

.error {
    color: var(--idmCompInputColorDangerBorder);
}

.tooltip-web>.tooltiptext {
    max-width: 400px;
    width: 400px;
}

.tooltip-content {
    padding: 16px;
    border-radius: 8px;
    display: none;
    z-index: 1150;
    max-width: 400px;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
    color: rgb(69 75 84);
    background-color: white;
    border: 1px solid #e5e7eb;
}

.tooltip-content::after,
.tooltip-content::before {
    content: "";
    position: absolute;
    border-style: solid;
}

.tooltip-content[data-popper-placement]::after {
    --size: 10px;
    --color: white;
}

.tooltip-content[data-popper-placement]::before {
    --size: 12px;
    --color: #e5e7eb;
}

/* Arrow pointing down (tooltip-content above element, or chart caret on bottom edge) */
.tooltip-content[data-popper-placement^="top"]::after,
.tooltip-content[data-popper-placement^="top"]::before,
.chartjs-html-tooltip[data-caret="bottom"]::after {
    bottom: calc(var(--size) * -1);
    left: 50%;
    transform: translateX(-50%);
    border-width: var(--size) var(--size) 0 var(--size);
    border-color: var(--color) transparent transparent transparent;
}

/* Arrow pointing up (tooltip-content below element, or chart caret on top edge) */
.tooltip-content[data-popper-placement^="bottom"]::after,
.tooltip-content[data-popper-placement^="bottom"]::before,
.chartjs-html-tooltip[data-caret="top"]::after {
    top: calc(var(--size) * -1);
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 var(--size) var(--size) var(--size);
    border-color: transparent transparent var(--color) transparent;
}

/* Arrow pointing right (tooltip-content left of element, or chart caret on right edge) */
.tooltip-content[data-popper-placement^="left"]::after,
.tooltip-content[data-popper-placement^="left"]::before,
.chartjs-html-tooltip[data-caret="right"]::after {
    top: 50%;
    right: calc(var(--size) * -1);
    transform: translateY(-50%);
    border-width: var(--size) 0 var(--size) var(--size);
    border-color: transparent transparent transparent var(--color);
}

/* Arrow pointing left (tooltip-content right of element, or chart caret on left edge) */
.tooltip-content[data-popper-placement^="right"]::after,
.tooltip-content[data-popper-placement^="right"]::before,
.chartjs-html-tooltip[data-caret="left"]::after {
    top: 50%;
    left: calc(var(--size) * -1);
    transform: translateY(-50%);
    border-width: var(--size) var(--size) var(--size) 0;
    border-color: transparent var(--color) transparent transparent;
}

.top-right-badge {
    position: absolute;
    top: -14px;
    left: 10px;
}

.badge-white {
    color: #454B54;
    border: 1px solid #DFE2E5;
    background: white
}

.justify-end {
    justify-content: end;
}

.bg-expanded-list {
    background: #EFF1F380;
}

.lh-1 {
    line-height: 1;
}

.overflow-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
    text-overflow: ellipsis;
}

.dotted-placeholder {
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 1rem;
}

.dotted-placeholder::before {
    content: "................................................................................";
    white-space: nowrap;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 8px);
    text-align: center;
    pointer-events: none;
    color: #D3D6DA;
}

.fade-inner {
    animation: fade-inner 3s linear infinite;
    animation-fill-mode: forwards;
}

.fade-outer {
    animation: fade-outer 3s linear infinite;
    animation-fill-mode: forwards;
}

.paused-animation,
.paused-animation * {
    animation-play-state: paused !important;
}

.no-animation,
.no-animation * {
    animation: none !important;
}

.no-animation .fade-inner,
.no-animation .fade-outer {
    opacity: 1;
}

.player-bar-button {
    background: white;
    color: #646C75;
    border: 1px solid #ADB3BA;
    border-radius: 4px
}

.player-bar-button-selected {
    background: #FFFABE;
    color: #3A3E43;
    border: 1px solid #ADB3BA;
}

.player-bar-button:hover {}

#live-button {
    align-items: center;
    padding: 0 1rem;
    font-weight: 700;
    display: flex;
    gap: 0.25rem;
}

.button-xs {
    padding-block: calc(0.5rem - 1px);
    padding-inline: 0.75rem;
    font-size: 0.875rem;
}

#system-select-container {
    padding-inline: 1rem;
    padding-block: 1.5rem;
    width: 100%;
}

.collapsed-sidebar #system-select-container {
    opacity: 0;
    pointer-events: none;
}

#legend-dropdown {
    background: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    border: 1px solid #ADB3BA;
    z-index: 1080;
}

.legend-container {
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
}

#legend-dropdown .legend-container {
    flex-direction: column;
    gap: 0.75rem;
}

.legend-item {
    align-items: center;
    display: flex;
    flex-direction: row;
    margin-left: 10px;
    gap: 1.25rem;
    font-size: 0.875rem;
}

.legend-item .legend-text {
    color: #7A838F;
    font-size: 0.875rem;
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.dropdown-toggle {
    display: flex;
    padding-inline: 0.75rem;
    padding-block: 0.5rem;
    border: 1px solid #ADB3BA;
    cursor: pointer;
    border-radius: 0.25rem;
    gap: 1rem;
    align-content: space-between;
    font-size: 0.875rem;
    color: #646C75;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
    font-weight: 400;
    line-height: 1;
}

.inline-1 {
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
}

.inline-2 {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}

.inline-3 {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.inline-4 {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
}

.inline-5 {
    display: flex;
    flex-direction: row;
    gap: 2rem;
}

.stacked-1 {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stacked-2 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stacked-3 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stacked-4 {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.stacked-5 {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.flex-1 {
    flex: 1;
}

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

.space-between {
    justify-content: space-between;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: var(--lemonyellow-400);
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #393939;
    border-color: var(--lemonyellow-400);
}

.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)) {
    -webkit-box-shadow: -10px 0 0 var(--lemonyellow-400);
    box-shadow: -10px 0 0 var(--lemonyellow-400);
}

.input-field-area-sm>input.date-range-display {
    min-height: calc(var(--idmCompInputSmSizeContainerMinHeight) - 6px);
    margin: 3px;
    background: none;
    color: #7A838F;
}

.date-range-input-field {
    background: #EFF1F3;
}

.date-selected.input-field-area-sm>input.date-range-display {
    background: white;
    color: #646C75;
}

#btn-today-range {
    border: none;
    padding-block: calc(0.5rem - 4px);
    margin-left: 3px;
    padding-inline: 0.75rem;
    background: white;
    color: #646C75;
}

.date-selected #btn-today-range {
    background: none;
    color: #7A838F;
}

.flatpickr-calendar.open {
    padding: 24px;
    box-sizing: content-box;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    margin: 24px;
}

span.flatpickr-weekday {
    font-size: 0.75rem;
    color: #7A838F;
    font-weight: bold;
}

.cur-year {
    pointer-events: none !important;
    font-weight: bold !important;
}

.arrowUp,
.arrowDown {
    display: none !important;
}

.numInputWrapper:hover,
.cur-month:hover {
    background: none !important;
}

.chart-container svg {
    width: 100%;
    height: 100%;
}

.chart-container.placeholder {
    width: 100%;
    line-height: 0;
}

.w-1em {
    width: 1em;
}

.w-1-5em {
    width: 1.5em;
}

.w-2em {
    width: 2em;
}

.w-4em {
    width: 4em;
}

.w-6em {
    width: 6em;
}

.w-8em {
    width: 8em;
}

.items-baseline {
    place-items: baseline;
}

.chartjs-html-tooltip {
    opacity: 0;
    position: absolute;
    pointer-events: none;
    transition: opacity .3s ease, top .3s ease, left .3s ease;
    z-index: 1150;
    padding: 12px;
    border-radius: 8px;
    background: #00000099;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
    color: #FFFFFF;
    backdrop-filter: blur(10px);
}

/* Caret shares directional geometry with .tooltip-content (see arrow rules above);
   only the size/color differ. */
.chartjs-html-tooltip::after {
    content: "";
    position: absolute;
    border-style: solid;
    --size: 8px;
    --color: #00000099;
}

.chartjs-html-tooltip-time {
    display: flex;
    gap: 0.25rem;
    place-items: center;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

.chartjs-html-tooltip-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    min-width: 14rem;
}

.chartjs-html-tooltip-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    white-space: nowrap;
}

.chartjs-html-tooltip-name {
    margin: 0;
    padding: 0;
    color: #C0C0C0;
}

.chartjs-html-tooltip-value {
    font-weight: bold;
}

.chartjs-html-tooltip-unit {
    width: 3rem;
    color: #FFFFFF;
}

.cost-value-container {
    padding: 4px 8px;
    background: #EFF1F3;
    border: 1px solid #3C4147;
    border-radius: 4px;
}

/* ---------------------------------------------------------------
   Responsive: tablet & small-laptop adjustments.
   The app's primary inline grid (.start) uses var(--sidebar-total-width),
   so overriding the variable in a media query collapses the sidebar
   without fighting inline `grid-template-columns`.
   --------------------------------------------------------------- */

/* Landscape tablet (iPad Pro 11 ~1194px) and small laptops:
   hide the sidebar entirely (rather than collapsing it to icon-only) and let
   #content span the full width. The sidebar becomes a fixed overlay that slides
   in over the content via the #sidebar-overlay-toggle button, without shifting
   the rest of the layout. */
@media (max-width: 1366px) {

    /* Collapse the grid's sidebar column to zero so #content fills the width. */
    .start:not(.hidden-sidebar) {
        --sidebar-total-width: 0;
    }

    /* With the sidebar pulled out of the grid (fixed overlay below), the empty
       zero-width first column would otherwise swallow the auto-placed top-bar.
       Pin it to the content column so it stays full-width and visible. */
    .start:not(.hidden-sidebar) #top-bar {
        grid-column: 2 / 3;
    }

    /* Pull the sidebar out of the grid into a fixed overlay, parked off-screen. */
    .start:not(.hidden-sidebar) .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: calc(var(--navbar-width) + var(--sidebar-width));
        height: 100vh;
        height: 100dvh;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 1170;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.2);
    }

    /* Keep the header full width (the grid variable would otherwise zero it). */
    .start:not(.hidden-sidebar) .sidebar-top {
        width: calc(var(--navbar-width) + var(--sidebar-width));
    }

    /* Slide the overlay in when toggled open. */
    .start.sidebar-overlay-open:not(.hidden-sidebar) .sidebar {
        transform: translateX(0);
    }

    /* Backdrop behind the open overlay. */
    .start:not(.hidden-sidebar) .sidebar-overlay-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 1165;
    }

    .start.sidebar-overlay-open:not(.hidden-sidebar) .sidebar-overlay-backdrop {
        display: block;
    }

    /* Show the overlay toggle; the in-sidebar collapse caret is irrelevant here. */
    .start:not(.hidden-sidebar) #sidebar-overlay-toggle {
        display: flex;
    }

    .start:not(.hidden-sidebar) #sidebar-collapse-button {
        display: none;
    }
}

/* Disabled toggle */
.toggle input:disabled+.toggle-slider {
    cursor: not-allowed;
    opacity: 0.6;
    background: var(--idmCompToggleColorUnselectedDisabledBg);
}

.toggle input:disabled+.toggle-slider:before {
    background: var(--idmCompToggleColorUnselectedDisabledFg);
}

.toggle input:checked:disabled+.toggle-slider {
    background: var(--idmCompToggleColorSelectedDisabledBg);
}

.toggle input:checked:disabled+.toggle-slider:before {
    background: var(--idmCompToggleColorSelectedDisabledFg);
}