@font-face {
    font-family: Aller;
    src: url("../fonts/Aller_Rg.785388a9e641.ttf");
}

@font-face {
    font-family: Aller;
    src: url("../fonts/Aller_Bd.ec478fc73747.ttf");
    font-weight: bold;
}

: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: var(--metalgray-800);
    --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: var(--metalgray-600);

    --secondary-on-dark: var(--metalgray-500);
    --secondary-on-light: var(--metalgray-600);

    --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: #6f7a85;
    --metalgray-700: #5d656f;
    --metalgray-800: #454b54;
    --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);

}

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

* {
    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: #FFF;
    height: var(--topmenu-height);
    min-height: var(--topmenu-height);
    max-height: var(--topmenu-height);
    overflow-x: auto;
}

.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;
}

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

#content {
    height: 100vh;
    height: 100dvh;
    overflow: auto;
}

#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: 100%;
}

#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: var(--metalgray-800);
    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: var(--metalgray-800);
    color: var(--primary)
}

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

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

.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;
}

.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 */

.flex-row-outer-container {

}

.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: 1rem;
    align-items: center;
}

/*.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: var(--metalgray-600); 
}

.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;
}

.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: var(--metalgray-800);
    font-size: var(--font-size-sm);
    line-height: 120%;
}

.flex-row-value {
    color: var(--metalgray-800);
    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: var(--lemonyellow-400);
    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;
}

.sidebar-item:hover {
    background-color: var(--metalgray-800)!important;
    color: var(--lemonyellow-400)!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;
}

.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: var(--metalgray-800);
    color: var(--lemonyellow-400);
}

.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: var(--metalgray-800)!important;
    color: var(--lemonyellow-400) !important;
    border-radius: 4px!important;
}

.sidebar-item-dropdown-active {
    background-color: var(--lemonyellow-200);
    color: var(--metalgray-800);
    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 {
    position: absolute;
    right: -0.375rem;
    top: 4.375rem;
    display: flex;
    padding: 0.125rem;
    align-items: flex-start;
    border-radius: 100rem;
    border: 1px solid #EEE049;
    background: #FFF04D;
    z-index: 1150;
    cursor: pointer;
}

#sidebar-collapse-button:hover,
#sidebar-collapse-button:active,
#sidebar-collapse-button:focus {
    background-color: var(--metalgray-800);
    color: var(--lemonyellow-400);
}

.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;
}

.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 {
    width: 200px;
    height: 24px;
    background-color: rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    cursor: wait;
    position: relative;
    overflow: hidden;
}

.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: 1rem;
    left: 0;
    right: 0;
    margin: auto;
    width: max-content;
    gap: 0.5rem;
}


/* */

.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%;
}

.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;
}

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