:root {
  /*DO NOT USE THIS FILE FOR DEVELOPMENT AS OF NOW */
  /* core */
  /* colors */
  --brand-accent-green: hsl(162 100% 27%);
  --brand-accent-red: hsl(354 67% 43%);
  --brand-primary: hsl(202 92% 19%);
  --brand-secondary: hsl(208 82% 39%);
  --brand-thertiary: hsl(206 22% 36%);
  --brand-gray-light-gray: hsl(210 7% 94%);
  --brand-gray-textbody: hsl(0 0 20%);
  --color-black: #000000;
  --color-white: #fcfcfc;
  /* blue */
  --color-blue-200: hsl(202 58% 58%);
  --color-blue-300: hsl(202 63% 48%);
  --color-blue-400: hsl(202 86% 38%);
  --color-blue-500: hsl(204 96% 37%);
  --color-blue-600: #0062ad;
  --color-blue-700: hsl(206 100% 23%);
  --color-blue-800: hsl(210 100% 15%);
  /* gray */
  --color-gray-neutral-050: rgb(242, 242, 242);
  --color-gray-neutral-100: rgb(230, 230, 230);
  --color-gray-neutral-200: rgb(204, 204, 204);
  --color-gray-neutral-300: rgb(179, 179, 179);
  --color-gray-neutral-400: rgb(153, 153, 153);
  --color-gray-neutral-500: rgb(128, 128, 128);
  --color-gray-neutral-600: rgb(102, 102, 102);
  --color-gray-neutral-700: rgb(77, 77, 77);
  --color-gray-neutral-800: rgb(51, 51, 51);
  --color-gray-neutral-900: rgb(26, 26, 26);
  --color-gray-neutral-950: #0d0d0d;
  /* lime */
  --color-lime-300: hsl(87 58% 65%);
  --color-lime-400: hsl(92 54% 49%);
  --color-lime-500: hsl(96 70% 38%);
  --color-lime-600: hsl(120 100% 25%);
  --color-lime-700: hsl(95 74% 21%);
  --color-lime-800: hsl(96 59% 16%);
  /* red */
  --color-red-200: hsl(5 95% 94%);
  --color-red-300: hsl(5 95% 88%);
  --color-red-400: hsl(5 95% 76%);
  --color-red-500: hsl(5 95% 62%);
  --color-red-600: hsl(4 85% 46%);
  --color-red-700: hsl(5 88% 34%);
  --color-red-800: hsl(6 81% 25%);
  /* turquoise */
  --color-turquoise-300: hsl(188 67% 70%);
  --color-turquoise-400: hsl(186 94% 41%);
  --color-turquoise-500: hsl(189 79% 39%);
  --color-turquoise-600: hsl(190 92% 30%);
  --color-turquoise-700: hsl(191 84% 23%);
  /* yellow */
  --color-yellow-200: hsl(50 89% 72%);
  --color-yellow-300: hsl(47 92% 53%);
  --color-yellow-400: hsl(44 83% 46%);
  --color-yellow-500: hsl(37 88% 44%);
  --color-yellow-600: hsl(39 77% 33%);
  --color-yellow-700: hsl(32 60% 27%);
  /* radius */
  --radius-none: 0px;
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 7px;
  /* spacing */
  --spacing-000: 0px;
  --spacing-005: 4px;
  --spacing-010: 8px;
  --spacing-015: 12px;
  --spacing-020: 16px;
  --spacing-030: 24px;
  --spacing-040: 32px;
  --spacing-050: 40px;
  --spacing-060: 48px;
  --spacing-070: 56px;
  --spacing-080: 64px;
  --spacing-090: 72px;
  --spacing-100: 80px;
  --spacing-110: 88px;
  --spacing-120: 96px;
  --spacing-130: 104px;
  --spacing-160: 128px;
  /* typography tokens */
  --font-family-primary: "Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-secondary: "Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-tertiary: "Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-code: 'Roboto Mono', monospace;
  --font-size-base: 16px;
  --font-size-sm: .8706em;
  --font-size-md: 1em;
  --font-size-lg: 1.1487em;
  --font-size-xl: 1.3195em;
  --font-size-xxl: 1.5157em;
  --font-size-xxxl: 1.7411em;
  --font-size-xxxxl: 2em;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900; }

:root {
  /*DO NOT USE THIS FILE FOR DEVELOPMENT AS OF NOW */
  --old-elevation-800: 3px 3px 2px 0px rgba(0, 0, 0, 0.18);
  --old-elevation-600: 0 2px 5px -3px rgba(0, 0, 0, 0.25);
  --old-elevation-100: 5px 0 10px rgba(0, 0, 0, 0.05);
  --old-elevation-50: 0px 0px 10px rgba(0, 0, 0, 0.2);
  --old-elevation-200: 0 2px 5px -1px rgba(0, 0, 0, 0.25);
  --old-elevation-300: 0 2px 5px -3px rgba(0, 0, 0, 0.25);
  /* collapsible box shaddow */
  --old-sink-200: inset 0 8px 8px -8px var(--surface-primary), inset 0 -8px 8px -8px var(--surface-secondary);
  --old-sink-100: inset -1px 1px 1px rgba(0, 0, 0, 0.075);
  /* elevation */
  --elevation-000: none;
  --elevation-100: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --elevation-200: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  --elevation-300: 0 1px 5px 0 rgba(0, 0, 0, 0.15);
  --elevation-400: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
  --elevation-500: 0 1px 10px 0 rgba(0, 0, 0, 0.25);
  --elevation-600: 0 1px 14px 0 rgba(0, 0, 0, 0.3);
  --elevation-700: 0 1px 18px 0 rgba(0, 0, 0, 0.35);
  --elevation-800: 0 2px 16px 1px rgba(0, 0, 0, 0.4);
  --elevation-900: 0 3px 14px 2px rgba(0, 0, 0, 0.45);
  --elevation-1000: 0 3px 16px 2px rgba(0, 0, 0, 0.5);
  /* sink */
  --sink-000: none;
  --sink-100: inset 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --sink-200: inset 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  --sink-300: inset 0 1px 5px 0 rgba(0, 0, 0, 0.15);
  --sink-400: inset 0 1px 8px 0 rgba(0, 0, 0, 0.2);
  --sink-500: inset 0 1px 10px 0 rgba(0, 0, 0, 0.25);
  --sink-600: inset 0 1px 14px 0 rgba(0, 0, 0, 0.3);
  --sink-700: inset 0 1px 18px 0 rgba(0, 0, 0, 0.35);
  --sink-800: inset 0 2px 16px 1px rgba(0, 0, 0, 0.4);
  --sink-900: inset 0 3px 14px 2px rgba(0, 0, 0, 0.45);
  --sink-1000: inset 0 3px 16px 2px rgba(0, 0, 0, 0.5); }

:root {
  /* colors */
  --border-bold: var(--color-blue-600);
  --border-contrast: var(--color-gray-neutral-900);
  --border-minimal: var(--color-gray-neutral-200);
  --border-moderate: var(--color-gray-neutral-600);
  --border-reversed: var(--color-white);
  --border-subtle: var(--color-gray-neutral-400);
  --status-error: var(--color-red-600);
  --text-error-inverted: var(--color-red-600);
  --status-danger: var(--color-red-600);
  --status-info: var(--color-turquoise-500);
  --status-success: var(--color-lime-500);
  --status-warning: var(--color-yellow-400);
  --surface-bold: var(--color-blue-600);
  --surface-contrast: var(--color-black);
  --surface-error: var(--color-red-400);
  --surface-info: var(--color-turquoise-300);
  --surface-primary: var(--color-white);
  --surface-primary-inverted: var(--color-gray-neutral-800);
  --surface-secondary: var(--color-gray-neutral-100);
  --surface-strong: var(--color-blue-700);
  --surface-success: var(--color-lime-300);
  --surface-tertiary: var(--color-gray-neutral-300);
  --surface-warning: #ff871f;
  --surface-error: var(--color-red-600);
  --text-error: var(--color-red-600);
  --text-highlight: var(--color-blue-600);
  --text-info: var(--color-turquoise-400);
  --text-link: var(--color-blue-600);
  --text-primary: var(--color-gray-neutral-800);
  --text-primary-inverted: var(--color-gray-neutral-050);
  --text-secondary: var(--color-gray-neutral-700);
  --text-secondary-inverted: var(--color-gray-neutral-100);
  --text-muted: var(--color-gray-neutral-500);
  --text-success: var(--color-lime-500);
  --text-warning: var(--color-yellow-400);
  /* numbers */
  --panel-width-xs: 180px;
  --panel-width-sm: 310px;
  --panel-width-md: 440px;
  --panel-width-lg: 570px;
  --panel-width-xlg: 845px;
  --panel-width-xxlg: 985px;
  --panel-width-3xlg: 1125px;
  --panel-width-4xlg: 1265px;
  --panel-width-5xlg: 1405px;
  --panel-width-6xlg: 1545px;
  --space-xs: var(--spacing-005);
  --space-sm: var(--spacing-010);
  --space-md: var(--spacing-020);
  --space-lg: var(--spacing-030);
  --space-xl: var(--spacing-040);
  --space-xxl: var(--spacing-060); }

@media (prefers-color-scheme: light) {
  :root {
    /* colors */
    --border-bold: var(--color-blue-600);
    --border-contrast: var(--color-gray-neutral-900);
    --border-minimal: var(--color-gray-neutral-200);
    --border-moderate: var(--color-gray-neutral-600);
    --border-reversed: var(--color-white);
    --border-subtle: var(--color-gray-neutral-400);
    --status-error: var(--color-red-200);
    --text-error-inverted: var(--color-red-600);
    --status-danger: var(--color-red-600);
    --status-info: var(--color-turquoise-500);
    --status-success: var(--color-lime-500);
    --status-warning: var(--color-yellow-400);
    --surface-bold: var(--color-blue-600);
    --surface-contrast: var(--color-black);
    --surface-error: var(--color-red-400);
    --surface-info: var(--color-turquoise-300);
    --surface-primary: var(--color-white);
    --surface-primary-inverted: var(--color-gray-neutral-800);
    --surface-secondary: var(--color-gray-neutral-100);
    --surface-strong: var(--color-blue-700);
    --surface-success: var(--color-lime-300);
    --surface-tertiary: var(--color-gray-neutral-300);
    --surface-warning: #ff871f;
    --surface-success: var(--status-success);
    --text-error: var(--color-red-600);
    --text-highlight: var(--color-blue-600);
    --text-info: var(--color-turquoise-400);
    --text-link: var(--color-blue-600);
    --text-primary: var(--color-gray-neutral-900);
    --text-primary-inverted: var(--color-gray-neutral-050);
    --text-secondary: var(--color-gray-neutral-700);
    --text-secondary-inverted: var(--color-gray-neutral-100);
    --text-muted: var(--color-gray-neutral-500);
    --text-success: var(--color-lime-500);
    --text-warning: var(--color-yellow-400);
    /* numbers */
    --panel-width-xs: 155px;
    --panel-width-sm: 285px;
    --panel-width-md: 415px;
    --panel-width-lg: 545px;
    --panel-width-xlg: 820px;
    --panel-width-xxlg: 960px;
    --panel-width-3xlg: 1100px;
    --panel-width-4xlg: 1240px;
    --panel-width-5xlg: 1380px;
    --panel-width-6xlg: 1520px;
    --space-xs: var(--spacing-005);
    --space-sm: var(--spacing-010);
    --space-md: var(--spacing-020);
    --space-lg: var(--spacing-030);
    --space-xl: var(--spacing-040);
    --space-xxl: var(--spacing-060); } }

@media (prefers-color-scheme: dark) {
  :root {
    /* colors */
    --border-bold: var(--color-blue-200);
    --border-contrast: var(--color-gray-neutral-050);
    --border-minimal: var(--color-gray-neutral-700);
    --border-moderate: var(--color-gray-neutral-300);
    --border-reversed: var(--color-gray-neutral-800);
    --border-subtle: var(--color-gray-neutral-500);
    --status-error: var(--color-red-500);
    --status-info: var(--color-turquoise-400);
    --status-success: var(--color-lime-400);
    --status-warning: var(--color-yellow-300);
    --surface-info: var(--color-turquoise-400);
    --surface-warning: #ff871f;
    --surface-error: var(--color-red-200);
    --surface-success: var(--status-success);
    --surface-primary: var(--color-gray-neutral-800);
    --surface-primary-inverted: var(--color-gray-neutral-200);
    --surface-secondary: var(--color-gray-neutral-700);
    --surface-strong: var(--color-blue-700);
    --surface-success: var(--color-lime-300);
    --surface-tertiary: var(--color-gray-neutral-600);
    --surface-bold: var(--color-blue-500);
    --surface-contrast: var(--color-white);
    --text-error: var(--color-red-400);
    --text-error-inverted: var(--color-red-600);
    --text-highlight: var(--color-blue-400);
    --text-info: var(--color-turquoise-300);
    --text-link: var(--color-blue-400);
    --text-primary: var(--color-gray-neutral-050);
    --text-primary-inverted: var(--color-gray-neutral-050);
    --text-secondary: var(--color-gray-neutral-200);
    --text-secondary-inverted: var(--color-gray-neutral-700);
    --text-muted: var(--color-gray-neutral-500);
    --text-success: var(--color-lime-400);
    --text-warning: var(--color-yellow-300);
    /* numbers */
    --panel-width-xs: 155px;
    --panel-width-sm: 285px;
    --panel-width-md: 415px;
    --panel-width-lg: 545px;
    --panel-width-xlg: 820px;
    --panel-width-xxlg: 960px;
    --panel-width-3xlg: 1100px;
    --panel-width-4xlg: 1240px;
    --panel-width-5xlg: 1380px;
    --panel-width-6xlg: 1520px;
    --space-xs: var(--spacing-005);
    --space-sm: var(--spacing-010);
    --space-md: var(--spacing-020);
    --space-lg: var(--spacing-030);
    --space-xl: var(--spacing-040);
    --space-xxl: var(--spacing-060); } }

/*------------------------------*/
/* Printing styles */
/*------------------------------*/
#marker {
  position: absolute;
  bottom: 0; }

[class^='col-expanded-'] {
  max-width: 1100px; }

.print,
.print .wf-panel-body {
  background: transparent !important;
  max-width: 1100px; }

.print .btn-default.btn-circle[aria-expanded="true"],
.print .btn-default[aria-expanded="true"] .print .fadeIn {
  animation-name: none !important; }

/*---------------------------------------------*/
/* Printing styles for pdf serverside printing */
/*---------------------------------------------*/
@media screen {
  .print-only {
    visibility: hidden !important;
    display: none !important; } }

@media print {
  .print-hidden {
    visibility: hidden !important;
    display: none !important; }
  .print,
  .print .wf-panel-body {
    max-width: 1100px !important; }
  .wf-panel-body {
    overflow-y: visible !important;
    overflow-x: visible !important; }
  span,
  div {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact; }
  .wf-organizational-unit-list {
    page-break-inside: avoid; }
  .btn-group {
    page-break-inside: avoid; }
  .list-group-item {
    page-break-inside: avoid; }
  .wf-panel-head.has-top-toolbar ~ .wf-panel-body.has-head {
    margin-top: 110px !important; }
  .wf-panel-head.has-top-filter ~ .wf-panel-body.has-filter {
    margin-top: 60px !important; }
  .wf-panel-top-filter {
    visibility: hidden !important; } }

@media print {
  .c3-legend-item-hidden {
    visibility: hidden !important; }
  .c3-tooltip-container {
    visibility: hidden !important; } }

/*------------------------------*/
/*       CSS animations         */
/*------------------------------*/
.row {
  transition: background-color 0.4s; }

.animated-background-color {
  transition: background-color 0.4s ease-in-out; }

@keyframes colorAccentToWhite {
  0% {
    color: var(--i4c-accent-color); }
  50% {
    color: var(--i4c-inverted-foreground); }
  100% {
    color: var(--i4c-accent-color); } }

@keyframes bgAccentToWhite {
  0% {
    background-color: var(--i4c-accent-color); }
  50% {
    background-color: var(--i4c-inverted-foreground); }
  100% {
    background-color: var(--i4c-accent-color); } }

/*--------------------------------------
    Pulse animation
----------------------------------------*/
@keyframes pulse {
  0% {
    opacity: 0.5;
    transform: scale(0.3); }
  80% {
    opacity: 0.1;
    transform: scale(2); }
  100% {
    opacity: 0;
    transform: scale(2.5); } }

/*--------------------------------------
    FadeIn - FadeOut - FadeIn animation
----------------------------------------*/
@keyframes animation-fade {
  0% {
    opacity: 1.0; }
  50% {
    opacity: 0.2; }
  100% {
    opacity: 1; } }

.fadeInOut {
  animation: animation-fade 1s infinite; }

/*--------------------------------------
    Blinking animation
----------------------------------------*/
@keyframes blinking {
  0%,
  50%,
  100% {
    opacity: 1; }
  25%,
  75% {
    opacity: 0; } }

.blinking {
  animation: blinking 1.5s infinite; }

/*--------------------------------------
    Spinner animation
----------------------------------------*/
@keyframes spinner_animation {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@keyframes spinner_animation_inverse {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(-360deg); } }

/* Display animation */
@keyframes displayAnimation {
  0% {
    display: none; }
  100% {
    display: block; } }

/*----------------------------------------------------------------
  Marquee - Wish we could turn back time, to the good ol' days ...
----------------------------------------------------------------*/
.wf-marquee {
  position: relative;
  overflow: hidden; }

.wf-marquee span {
  float: left;
  white-space: nowrap;
  animation: marquee 10s linear infinite; }

.wf-marquee:hover span {
  animation-play-state: paused; }

@keyframes marquee {
  0% {
    opacity: 0; }
  10% {
    transform: translateX(0);
    opacity: 1; }
  100% {
    transform: translateX(-100%); } }

/*-------------------------------------------------------------------
  Extension to animate.css framework 
  slideOutLeftVisible keep the animated container visible 
  at the end of the animation 
-------------------------------------------------------------------*/
@keyframes slideOutLeftVisible {
  0% {
    transform: translate3d(0, 0, 0); }
  100% {
    transform: translate3d(-100%, 0, 0); } }

.slideOutLeftVisible {
  animation-name: slideOutLeftVisible; }

.animated-delay-500 {
  animation-delay: .5s; }

.animated-delay-750 {
  animation-delay: .75s; }

.animated-delay-1000 {
  animation-delay: 1s; }

.animated-delay-1500 {
  animation-delay: 1.5s; }

.animated-delay-2000 {
  animation-delay: 2s; }

/*-------------------------------------------------------------------
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT
Copyright (c) 2015 Daniel Eden
---------------------------------------------------------------------*/
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT
Copyright (c) 2015 Daniel Eden
*/
.animated {
  animation-duration: 1s;
  animation-fill-mode: both; }

.animated.infinite {
  animation-iteration-count: infinite; }

.animated.hinge {
  animation-duration: 2s; }

.animated.bounceIn,
.animated.bounceOut {
  animation-duration: .75s; }

.animated.flipOutX,
.animated.flipOutY {
  animation-duration: .75s; }

@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0); }
  40%,
  43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0); }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0); }
  90% {
    transform: translate3d(0, -4px, 0); } }

.bounce {
  animation-name: bounce;
  transform-origin: center bottom; }

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1; }
  25%,
  75% {
    opacity: 0; } }

.flash {
  animation-name: flash; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1); }
  50% {
    transform: scale3d(1.05, 1.05, 1.05); }
  to {
    transform: scale3d(1, 1, 1); } }

.pulse {
  animation-name: pulse; }

@keyframes rubberBand {
  from {
    transform: scale3d(1, 1, 1); }
  30% {
    transform: scale3d(1.25, 0.75, 1); }
  40% {
    transform: scale3d(0.75, 1.25, 1); }
  50% {
    transform: scale3d(1.15, 0.85, 1); }
  65% {
    transform: scale3d(0.95, 1.05, 1); }
  75% {
    transform: scale3d(1.05, 0.95, 1); }
  to {
    transform: scale3d(1, 1, 1); } }

.rubberBand {
  animation-name: rubberBand; }

@keyframes shake {
  from,
  to {
    transform: translate3d(0, 0, 0); }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translate3d(-10px, 0, 0); }
  20%,
  40%,
  60%,
  80% {
    transform: translate3d(10px, 0, 0); } }

.shake {
  animation-name: shake; }

@keyframes swing {
  20% {
    transform: rotate3d(0, 0, 1, 15deg); }
  40% {
    transform: rotate3d(0, 0, 1, -10deg); }
  60% {
    transform: rotate3d(0, 0, 1, 5deg); }
  80% {
    transform: rotate3d(0, 0, 1, -5deg); }
  to {
    transform: rotate3d(0, 0, 1, 0deg); } }

.swing {
  transform-origin: top center;
  animation-name: swing; }

@keyframes tada {
  from {
    transform: scale3d(1, 1, 1); }
  10%,
  20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
  30%,
  50%,
  70%,
  90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%,
  60%,
  80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  to {
    transform: scale3d(1, 1, 1); } }

.tada {
  animation-name: tada; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@keyframes wobble {
  from {
    transform: none; }
  15% {
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
  30% {
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
  45% {
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
  60% {
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
  75% {
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
  to {
    transform: none; } }

.wobble {
  animation-name: wobble; }

@keyframes jello {
  from,
  11.1%,
  to {
    transform: none; }
  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg); }
  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg); }
  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg); }
  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg); }
  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg); }
  77.7% {
    transform: skewX(0.39063deg) skewY(0.39063deg); }
  88.8% {
    transform: skewX(-0.19531deg) skewY(-0.19531deg); } }

.jello {
  animation-name: jello;
  transform-origin: center; }

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3); }
  20% {
    transform: scale3d(1.1, 1.1, 1.1); }
  40% {
    transform: scale3d(0.9, 0.9, 0.9); }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03); }
  80% {
    transform: scale3d(0.97, 0.97, 0.97); }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1); } }

.bounceIn {
  animation-name: bounceIn; }

@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0); }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0); }
  75% {
    transform: translate3d(0, -10px, 0); }
  90% {
    transform: translate3d(0, 5px, 0); }
  to {
    transform: none; } }

.bounceInDown {
  animation-name: bounceInDown; }

@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0); }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0); }
  75% {
    transform: translate3d(-10px, 0, 0); }
  90% {
    transform: translate3d(5px, 0, 0); }
  to {
    transform: none; } }

.bounceInLeft {
  animation-name: bounceInLeft; }

@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0); }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0); }
  75% {
    transform: translate3d(10px, 0, 0); }
  90% {
    transform: translate3d(-5px, 0, 0); }
  to {
    transform: none; } }

.bounceInRight {
  animation-name: bounceInRight; }

@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0); }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0); }
  75% {
    transform: translate3d(0, 10px, 0); }
  90% {
    transform: translate3d(0, -5px, 0); }
  to {
    transform: translate3d(0, 0, 0); } }

.bounceInUp {
  animation-name: bounceInUp; }

@keyframes bounceOut {
  20% {
    transform: scale3d(0.9, 0.9, 0.9); }
  50%,
  55% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1.1); }
  to {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3); } }

.bounceOut {
  animation-name: bounceOut; }

@keyframes bounceOutDown {
  20% {
    transform: translate3d(0, 10px, 0); }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0); }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0); } }

.bounceOutDown {
  animation-name: bounceOutDown; }

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, 0, 0); }
  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0); } }

.bounceOutLeft {
  animation-name: bounceOutLeft; }

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0); }
  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0); } }

.bounceOutRight {
  animation-name: bounceOutRight; }

@keyframes bounceOutUp {
  20% {
    transform: translate3d(0, -10px, 0); }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, 20px, 0); }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0); } }

.bounceOutUp {
  animation-name: bounceOutUp; }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.fadeIn {
  animation-name: fadeIn; }

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0); }
  to {
    opacity: 1;
    transform: none; } }

.fadeInDown {
  animation-name: fadeInDown; }

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    transform: translate3d(0, -2000px, 0); }
  to {
    opacity: 1;
    transform: none; } }

.fadeInDownBig {
  animation-name: fadeInDownBig; }

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0); }
  to {
    opacity: 1;
    transform: none; } }

.fadeInLeft {
  animation-name: fadeInLeft; }

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0); }
  to {
    opacity: 1;
    transform: none; } }

.fadeInLeftBig {
  animation-name: fadeInLeftBig; }

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0); }
  to {
    opacity: 1;
    transform: none; } }

.fadeInRight {
  animation-name: fadeInRight; }

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    transform: translate3d(2000px, 0, 0); }
  to {
    opacity: 1;
    transform: none; } }

.fadeInRightBig {
  animation-name: fadeInRightBig; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0); }
  to {
    opacity: 1;
    transform: none; } }

.fadeInUp {
  animation-name: fadeInUp; }

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    transform: translate3d(0, 2000px, 0); }
  to {
    opacity: 1;
    transform: none; } }

.fadeInUpBig {
  animation-name: fadeInUpBig; }

@keyframes fadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

.fadeOut {
  animation-name: fadeOut; }

@keyframes fadeOutDown {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0); } }

.fadeOutDown {
  animation-name: fadeOutDown; }

@keyframes fadeOutDownBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0); } }

.fadeOutDownBig {
  animation-name: fadeOutDownBig; }

@keyframes fadeOutLeft {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0); } }

.fadeOutLeft {
  animation-name: fadeOutLeft; }

@keyframes fadeOutLeftBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0); } }

.fadeOutLeftBig {
  animation-name: fadeOutLeftBig; }

@keyframes fadeOutRight {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0); } }

.fadeOutRight {
  animation-name: fadeOutRight; }

@keyframes fadeOutRightBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0); } }

.fadeOutRightBig {
  animation-name: fadeOutRightBig; }

@keyframes fadeOutUp {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    transform: translate3d(0, -100%, 0); } }

.fadeOutUp {
  animation-name: fadeOutUp; }

@keyframes fadeOutUpBig {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0); } }

.fadeOutUpBig {
  animation-name: fadeOutUpBig; }

@keyframes flip {
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    animation-timing-function: ease-out; }
  40% {
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    animation-timing-function: ease-out; }
  50% {
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    animation-timing-function: ease-in; }
  80% {
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
    animation-timing-function: ease-in; }
  to {
    transform: perspective(400px);
    animation-timing-function: ease-in; } }

.animated.flip {
  backface-visibility: visible;
  animation-name: flip; }

@keyframes flipInX {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in; }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1; }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
  to {
    transform: perspective(400px); } }

.flipInX {
  backface-visibility: visible !important;
  animation-name: flipInX; }

@keyframes flipInY {
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0; }
  40% {
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    animation-timing-function: ease-in; }
  60% {
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1; }
  80% {
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  to {
    transform: perspective(400px); } }

.flipInY {
  backface-visibility: visible !important;
  animation-name: flipInY; }

@keyframes flipOutX {
  from {
    transform: perspective(400px); }
  30% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1; }
  to {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0; } }

.flipOutX {
  animation-name: flipOutX;
  backface-visibility: visible !important; }

@keyframes flipOutY {
  from {
    transform: perspective(400px); }
  30% {
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1; }
  to {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0; } }

.flipOutY {
  backface-visibility: visible !important;
  animation-name: flipOutY; }

@keyframes lightSpeedIn {
  from {
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0; }
  60% {
    transform: skewX(20deg);
    opacity: 1; }
  80% {
    transform: skewX(-5deg);
    opacity: 1; }
  to {
    transform: none;
    opacity: 1; } }

.lightSpeedIn {
  animation-name: lightSpeedIn;
  animation-timing-function: ease-out; }

@keyframes lightSpeedOut {
  from {
    opacity: 1; }
  to {
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0; } }

.lightSpeedOut {
  animation-name: lightSpeedOut;
  animation-timing-function: ease-in; }

@keyframes rotateIn {
  from {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0; }
  to {
    transform-origin: center;
    transform: none;
    opacity: 1; } }

.rotateIn {
  animation-name: rotateIn; }

@keyframes rotateInDownLeft {
  from {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; }
  to {
    transform-origin: left bottom;
    transform: none;
    opacity: 1; } }

.rotateInDownLeft {
  animation-name: rotateInDownLeft; }

@keyframes rotateInDownRight {
  from {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; }
  to {
    transform-origin: right bottom;
    transform: none;
    opacity: 1; } }

.rotateInDownRight {
  animation-name: rotateInDownRight; }

@keyframes rotateInUpLeft {
  from {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; }
  to {
    transform-origin: left bottom;
    transform: none;
    opacity: 1; } }

.rotateInUpLeft {
  animation-name: rotateInUpLeft; }

@keyframes rotateInUpRight {
  from {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0; }
  to {
    transform-origin: right bottom;
    transform: none;
    opacity: 1; } }

.rotateInUpRight {
  animation-name: rotateInUpRight; }

@keyframes rotateOut {
  from {
    transform-origin: center;
    opacity: 1; }
  to {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0; } }

.rotateOut {
  animation-name: rotateOut; }

@keyframes rotateOutDownLeft {
  from {
    transform-origin: left bottom;
    opacity: 1; }
  to {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0; } }

.rotateOutDownLeft {
  animation-name: rotateOutDownLeft; }

@keyframes rotateOutDownRight {
  from {
    transform-origin: right bottom;
    opacity: 1; }
  to {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; } }

.rotateOutDownRight {
  animation-name: rotateOutDownRight; }

@keyframes rotateOutUpLeft {
  from {
    transform-origin: left bottom;
    opacity: 1; }
  to {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0; } }

.rotateOutUpLeft {
  animation-name: rotateOutUpLeft; }

@keyframes rotateOutUpRight {
  from {
    transform-origin: right bottom;
    opacity: 1; }
  to {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0; } }

.rotateOutUpRight {
  animation-name: rotateOutUpRight; }

@keyframes hinge {
  0% {
    transform-origin: top left;
    animation-timing-function: ease-in-out; }
  20%,
  60% {
    transform: rotate3d(0, 0, 1, 80deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out; }
  40%,
  80% {
    transform: rotate3d(0, 0, 1, 60deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
    opacity: 1; }
  to {
    transform: translate3d(0, 700px, 0);
    opacity: 0; } }

.hinge {
  animation-name: hinge; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@keyframes rollIn {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); }
  to {
    opacity: 1;
    transform: none; } }

.rollIn {
  animation-name: rollIn; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@keyframes rollOut {
  from {
    opacity: 1; }
  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } }

.rollOut {
  animation-name: rollOut; }

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3); }
  50% {
    opacity: 1; } }

.zoomIn {
  animation-name: zoomIn; }

@keyframes zoomInDown {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomInDown {
  animation-name: zoomInDown; }

@keyframes zoomInLeft {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomInLeft {
  animation-name: zoomInLeft; }

@keyframes zoomInRight {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomInRight {
  animation-name: zoomInRight; }

@keyframes zoomInUp {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomInUp {
  animation-name: zoomInUp; }

@keyframes zoomOut {
  from {
    opacity: 1; }
  50% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3); }
  to {
    opacity: 0; } }

.zoomOut {
  animation-name: zoomOut; }

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  to {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomOutDown {
  animation-name: zoomOutDown; }

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); }
  to {
    opacity: 0;
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform-origin: left center; } }

.zoomOutLeft {
  animation-name: zoomOutLeft; }

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); }
  to {
    opacity: 0;
    transform: scale(0.1) translate3d(2000px, 0, 0);
    transform-origin: right center; } }

.zoomOutRight {
  animation-name: zoomOutRight; }

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  to {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } }

.zoomOutUp {
  animation-name: zoomOutUp; }

@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible; }
  to {
    transform: translate3d(0, 0, 0); } }

.slideInDown {
  animation-name: slideInDown; }

@keyframes slideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible; }
  to {
    transform: translate3d(0, 0, 0); } }

.slideInLeft {
  animation-name: slideInLeft; }

@keyframes slideInRight {
  from {
    transform: translate3d(100%, 0, 0);
    visibility: visible; }
  to {
    transform: translate3d(0, 0, 0); } }

.slideInRight {
  animation-name: slideInRight; }

@keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible; }
  to {
    transform: translate3d(0, 0, 0); } }

.slideInUp {
  animation-name: slideInUp; }

@keyframes slideOutDown {
  from {
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    transform: translate3d(0, 100%, 0); } }

.slideOutDown {
  animation-name: slideOutDown; }

@keyframes slideOutLeft {
  from {
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    transform: translate3d(-100%, 0, 0); } }

.slideOutLeft {
  animation-name: slideOutLeft; }

@keyframes slideOutRight {
  from {
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    transform: translate3d(100%, 0, 0); } }

.slideOutRight {
  animation-name: slideOutRight; }

@keyframes slideOutUp {
  from {
    transform: translate3d(0, 0, 0); }
  to {
    visibility: hidden;
    transform: translate3d(0, -100%, 0); } }

.slideOutUp {
  animation-name: slideOutUp; }

.animated.slow {
  animation-duration: 3s; }

/**
 * Skeleton Text
 */
.skeleton-text:empty {
  background-color: var(--i4c-light-gray-background);
  border-radius: var(--i4c-border-radius);
  animation: skeleton-text 1s ease-in-out 0s infinite reverse; }

@keyframes skeleton-text {
  0% {
    opacity: 0.5; }
  50% {
    opacity: 1; }
  100% {
    opacity: 0.5; } }

/*------------------------------*/
/* Modifiers styles */
/*------------------------------*/
/* Display none modifier */
.display-none {
  display: none !important; }

.hidden {
  visibility: hidden !important; }

.visible {
  visibility: visible !important; }

.scroll-x {
  overflow-x: auto;
  max-width: 100%; }

.scroll-y {
  overflow-y: auto;
  max-width: 100%; }

.no-after-content:after {
  content: none !important; }

.no-before-content:before {
  content: none !important; }

/* x-overflow-hidden and h-overflow-hidde classnames are depricated and will be removed in future, pls use overflow-x-hidden instead*/
.overflow-x-hidden {
  overflow-x: hidden !important; }

.overflow-x-hidden {
  overflow-x: hidden; }

/* y-overflow-hidden and v-overflow-hidde classnames are depricated and will be removed in future, pls use overflow-y-hidden instead*/
.y-overflow-hidden,
.v-overflow-hidden,
.overflow-y-hidden {
  overflow-y: hidden !important; }

.draggable {
  cursor: move; }

.draggable.dragging {
  background-color: rgba(34, 116, 172, 0.95);
  color: #ffffff;
  opacity: .9;
  cursor: move;
  scale: 1.01; }

/* Panel layout specific modifier class names*/

/*--------------------------------------------------------------
    Background colors
    To be used for filled areas & fill color of UI elements
 -------------------------------------------------------------*/
.bg-accent1 {
  color: var(--i4c-main-accent-foreground);
  background-color: var(--i4c-main-accent-background);
  background-image: none; }

.bg-accent2 {
  color: var(--i4c-secondary-accent-foreground);
  background-color: var(--i4c-secondary-accent-background);
  background-image: none; }

.bg-white {
  background-color: var(--i4c-white-background) !important; }

.bg-lighter {
  background-color: var(--i4c-lighter-background);
  background-image: none; }

.bg-light {
  background-color: var(--i4c-light-background);
  background-image: none; }

.bg-light-grey {
  background-color: var(--i4c-light-gray-background);
  background-image: none; }

.bg-grey {
  background-color: var(--i4c-gray-background);
  background-image: none; }

.bg-dark {
  background-color: var(--i4c-dark-background);
  background-image: none; }

.bg-darker {
  background-color: var(--i4c-darker-background);
  background-image: none; }

.bg-inverted {
  color: var(--i4c-main-inverted-foreground);
  background-color: var(--i4c-black-background);
  background-image: none; }

/*-----------------------------------
    Bootstrap predefined color
 ----------------------------------*/
.bg-primary {
  color: var(--i4c-main-inverted-foreground);
  background-color: var(--i4c-primary-color);
  background-image: none; }

a.bg-primary:hover {
  color: var(--i4c-main-inverted-foreground);
  background-color: var(--i4c-primary-color-action);
  background-image: none; }

.bg-success {
  color: var(--i4c-main-inverted-foreground);
  background-color: var(--i4c-success-color);
  /*#51ae30;*/ }

a.bg-success:hover {
  color: var(--i4c-main-inverted-foreground);
  background-color: var(--i4c-success-color-action); }

.bg-info {
  color: var(--i4c-secondary-inverted-foreground);
  background-color: var(--i4c-primary-color); }

a.bg-info:hover {
  color: var(--i4c-secondary-inverted-foreground);
  background-color: var(--i4c-primary-color-action); }

.bg-warning {
  background-color: var(--i4c-yellow-color); }

a.bg-warning:hover {
  background-color: var(--i4c-yellow-color-action); }

.bg-danger {
  background-color: var(--i4c-danger-color);
  /*#ff871f;*/ }

a.bg-danger:hover {
  background-color: var(--i4c-danger-color-action); }

.bg-highlighted {
  background-color: var(--i4c-main-background); }

/*--------------------------------------------------------------
    Background Image modifiers
--------------------------------------------------------------*/
.background-cover {
  background-size: cover !important;
  background-position: center center; }

.background-contain {
  background-size: contain !important;
  background-position: center center; }

.background-no-repeat {
  background-repeat: no-repeat; }

.background-x-repeat {
  background-repeat: repeat-x; }

.background-y-repeat {
  background-repeat: repeat-y; }

.transparent {
  background-color: transparent; }

.borderless {
  border: 0 solid transparent !important;
  box-shadow: none !important; }

.border-radius-round {
  border-radius: 50%; }

.b-0 {
  border: none !important; }

.has-border,
.b-a {
  border: 1px solid #ccc; }

.has-border-bottom,
.b-b {
  border-bottom: 1px solid #ccc; }

.has-border-top,
.b-t {
  border-top: 1px solid #ccc; }

.has-border-left,
.b-l {
  border-left: 1px solid #ccc; }

.has-border-right,
.b-r {
  border-right: 1px solid #ccc; }

/* DEPRICATED CLASS NAMES */
/* Depricated - Will be removed in future*/
/* use "stretched" class instead */
.stretch {
  height: 100%;
  width: 100%; }

.top-preset {
  margin-top: -15px; }

/* Flexbox modifiers */
/* Great flexbox explanations: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
.flexbox {
  display: flex !important; }

.flexbox-gap {
  gap: 0.5em; }

.flexbox-row {
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row; }

.flexbox-row-reverse {
  -ms-flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse; }

.flexbox-direction {
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column; }

.flexbox-column {
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column; }

.flexbox-column-reverse {
  -ms-flex-direction: column-reverse;
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse; }

.flexbox-wrap {
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap; }

.flexbox-h-start {
  justify-content: flex-start; }

.flexbox-h-end {
  justify-content: flex-end; }

.flexbox-h-center {
  justify-content: center; }

.flexbox-h-justified {
  justify-content: space-between; }

.flexbox-h-justified-around {
  justify-content: space-around; }

.flexbox-h-justified-even {
  justify-content: space-evenly; }

.flexbox-v-start {
  align-items: flex-start; }

.flexbox-v-end {
  align-items: flex-end; }

.flexbox-v-center {
  align-items: center; }

.flexbox-v-stretched {
  align-items: stretch; }

/* Let the item size be dependent to its width and height but also to stretch it over available space in its parent container */
.flex-auto {
  flex: 1 1 auto; }

/* Overwrites the min-width auto default, that allows flex children to grow outside of their parent container. */
.flex-min {
  min-width: 0; }

.flex-self-start {
  align-self: flex-start; }

.flex-self-end {
  align-self: flex-end; }

.flex-self-center {
  align-self: center; }

.flex-self-stretch {
  align-self: stretch; }

.flex-self-baseline {
  align-self: baseline; }

/*---------------------------------------------------------------------- 
    Width related classes
----------------------------------------------------------------------*/
.wf-width-xs {
  width: 120px; }

.wf-width-sm {
  width: 185px; }

.wf-width-md {
  width: 250px; }

.wf-width-lg {
  width: 380px; }

.wf-width-xlg {
  height: 510px; }

.wf-width-2xlg,
.wf-width-xxlg {
  height: 640px; }

.wf-width-3xlg {
  height: 770px; }

/*---------------------------------------------------------------------- 
    Maximum Width related classes
----------------------------------------------------------------------*/
.wf-max-width-xs {
  width: 120px; }

.wf-max-width-sm {
  width: 185px; }

.wf-max-width-md {
  width: 250px; }

.wf-max-width-lg {
  width: 380px; }

.wf-max-width-xlg {
  height: 510px; }

.wf-width-2xlg,
.wf-width-xxlg {
  height: 640px; }

.wf-max-width-3xlg {
  height: 770px; }

.pointer-events-none {
  pointer-events: none; }

.clickable {
  cursor: pointer; }

.cursor-hand {
  cursor: pointer; }

.vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%); }

.fixed-top {
  position: fixed;
  right: 0;
  left: 0; }

.stretched,
.wf-embed-stretch {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  height: 100%;
  width: 100%; }

.relative {
  position: relative !important; }

.absolute {
  position: absolute !important; }

.block {
  display: block !important; }

/* .inline {
    display: inline !important;
} */
.inline,
.inlineblock {
  display: inline-block !important; }

.h-centered,
.centered {
  margin: 0 auto; }

.absolute.h-centered,
.absolute.centered {
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%); }

.v-centered {
  margin-top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%); }

.fluid {
  width: 100%; }

/*---------------------------------------------------------------------- 
    Size related classes - primary for fix sizing symbols and icons 
----------------------------------------------------------------------*/
.wf-1x {
  font-size: 14px;
  width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center; }

.wf-2x {
  font-size: 28px;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center; }

.wf-3x {
  font-size: 42px;
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center; }

.wf-4x {
  font-size: 56px;
  width: 56px;
  height: 56px;
  line-height: 56px;
  text-align: center; }

.wf-5x {
  font-size: 70px;
  width: 70px;
  height: 70px;
  line-height: 70px;
  text-align: center; }

.wf-6x {
  font-size: 84px;
  width: 84px;
  height: 84px;
  line-height: 84px;
  text-align: center; }

/* Table of Contents */
/* 
Spacing modifiers - Gap
Spacing modifiers - Padding sizes: 0, xs, sm, md, lg, xlg, xxlg, 3xlg
Spacing modifiers - Margin sizes: 0, xs, sm, md, lg, xlg, xxlg, 3xlg
*/
.gap-xs {
  gap: 2px; }

.gap-sm {
  gap: 4px; }

.gap-md {
  gap: 8px; }

.gap-lg {
  gap: 16px; }

/*-------------------------------------------------*/
/* Spacing modifiers - Padding */
/* Sizes: 0, xs, sm, md, lg, xlg, xxlg, 3xlg */
/*-------------------------------------------------*/
/* Spacing modifiers - clearing paddings */
.p-a-0 {
  padding: 0 !important; }

.p-t-0 {
  padding-top: 0 !important; }

.p-r-0 {
  padding-right: 0 !important; }

.p-b-0 {
  padding-bottom: 0 !important; }

.p-l-0 {
  padding-left: 0 !important; }

.p-x-0 {
  padding-left: 0 !important;
  padding-right: 0 !important; }

.p-y-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important; }

/* Small sized paddings */
.p-a-xs {
  padding: 5px !important; }

.p-t-xs {
  padding-top: 5px !important; }

.p-r-xs {
  padding-right: 5px !important; }

.p-b-xs {
  padding-bottom: 5px !important; }

.p-l-xs {
  padding-left: 5px !important; }

.p-x-xs {
  padding-right: 5px !important;
  padding-left: 5px !important; }

.p-y-xs {
  padding-top: 5px !important;
  padding-bottom: 5px !important; }

/* Default sized paddings */
.p-a {
  padding: 10px !important; }

.p-t {
  padding-top: 10px !important; }

.p-r {
  padding-right: 10px !important; }

.p-b {
  padding-bottom: 10px !important; }

.p-l {
  padding-left: 10px !important; }

.p-x {
  padding-right: 10px !important;
  padding-left: 10px !important; }

.p-y {
  padding-top: 10px !important;
  padding-bottom: 10px !important; }

/* Medium sized paddings */
.p-a-md {
  padding: 15px !important; }

.p-t-md {
  padding-top: 15px !important; }

.p-r-md {
  padding-right: 15px !important; }

.p-b-md {
  padding-bottom: 15px !important; }

.p-l-md {
  padding-left: 15px !important; }

.p-x-md {
  padding-right: 15px !important;
  padding-left: 15px !important; }

.p-y-md {
  padding-top: 15px !important;
  padding-bottom: 15px !important; }

/* Large sized paddings */
.p-a-lg {
  padding: 30px !important; }

.p-t-lg {
  padding-top: 30px !important; }

.p-r-lg {
  padding-right: 30px !important; }

.p-b-lg {
  padding-bottom: 30px !important; }

.p-l-lg {
  padding-left: 30px !important; }

.p-x-lg {
  padding-right: 30px !important;
  padding-left: 30px !important; }

.p-y-lg {
  padding-top: 30px !important;
  padding-bottom: 30px !important; }

/* XLarge sized paddings */
.p-a-xlg {
  padding: 45px !important; }

.p-t-xlg {
  padding-top: 45px !important; }

.p-r-xlg {
  padding-right: 45px !important; }

.p-b-xlg {
  padding-bottom: 45px !important; }

.p-l-xlg {
  padding-left: 45px !important; }

.p-x-xlg {
  padding-right: 45px !important;
  padding-left: 45px !important; }

.p-y-xlg {
  padding-top: 45px !important;
  padding-bottom: 45px !important; }

/* XXLarge sized paddings */
.p-a-xxlg {
  padding: 60px !important; }

.p-t-xxlg {
  padding-top: 60px !important; }

.p-r-xxlg {
  padding-right: 60px !important; }

.p-b-xxlg {
  padding-bottom: 60px !important; }

.p-l-xxlg {
  padding-left: 60px !important; }

.p-x-xxlg {
  padding-right: 60px !important;
  padding-left: 60px !important; }

.p-y-xxlg {
  padding-top: 60px !important;
  padding-bottom: 60px !important; }

/* 3XLarge sized paddings */
.p-a-3xlg {
  padding: 75px !important; }

.p-t-3xlg {
  padding-top: 75px !important; }

.p-r-3xlg {
  padding-right: 75px !important; }

.p-b-3xlg {
  padding-bottom: 75px !important; }

.p-l-3xlg {
  padding-left: 75px !important; }

.p-x-3xlg {
  padding-right: 75px !important;
  padding-left: 75px !important; }

.p-y-3xlg {
  padding-top: 75px !important;
  padding-bottom: 75px !important; }

/*-------------------------------------------------*/
/* Spacing modifiers - Margin */
/* Sizes: 0, xs, sm, md, lg, xlg, xxlg, 3xlg */
/*-------------------------------------------------*/
/* Spacing modifiers - clearing margins */
.m-a-0 {
  margin: 0 !important; }

.m-t-0 {
  margin-top: 0 !important; }

.m-r-0 {
  margin-right: 0 !important; }

.m-b-0 {
  margin-bottom: 0 !important; }

.m-l-0 {
  margin-left: 0 !important; }

.m-x-0 {
  margin-left: 0 !important;
  margin-right: 0 !important; }

.m-y-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important; }

/* XS -XSmall sized Margins */
.m-a-xs {
  margin: 2px !important; }

.m-x-xs {
  margin-right: 2px !important;
  margin-left: 2px !important; }

.m-y-xs {
  margin-top: 2px !important;
  margin-bottom: 2px !important; }

.m-t-xs {
  margin-top: 2px !important; }

.m-r-xs {
  margin-right: 2px !important; }

.m-b-xs {
  margin-bottom: 2px !important; }

.m-l-xs {
  margin-left: 2px !important; }

/* SM - Small sized Margins */
.m-a-sm {
  margin: 5px !important; }

.m-y-sm {
  margin-top: 5px !important;
  margin-bottom: 5px !important; }

.m-x-sm {
  margin-right: 5px !important;
  margin-left: 5px !important; }

.m-t-sm {
  margin-top: 5px !important; }

.m-r-sm {
  margin-right: 5px !important; }

.m-b-sm {
  margin-bottom: 5px !important; }

.m-l-sm {
  margin-left: 5px !important; }

/* Default sized Margins */
.m-a {
  margin: 10px !important; }

.m-x {
  margin-right: 10px !important;
  margin-left: 10px !important; }

.m-y {
  margin-top: 10px !important;
  margin-bottom: 10px !important; }

.m-t {
  margin-top: 10px !important; }

.m-r {
  margin-right: 10px !important; }

.m-b {
  margin-bottom: 10px !important; }

.m-l {
  margin-left: 10px !important; }

/* Medium sized Margins */
.m-a-md {
  margin: 15px !important; }

.m-x-md {
  margin-right: 15px !important;
  margin-left: 15px !important; }

.m-y-md {
  margin-top: 15px !important;
  margin-bottom: 15px !important; }

.m-t-md {
  margin-top: 15px !important; }

.m-r-md {
  margin-right: 15px !important; }

.m-b-md {
  margin-bottom: 15px !important; }

.m-l-md {
  margin-left: 15px !important; }

/* Large sized margin */
.m-a-lg {
  margin: 30px !important; }

.m-x-lg {
  margin-right: 30px !important;
  margin-left: 30px !important; }

.m-y-lg {
  margin-top: 30px !important;
  margin-bottom: 30px !important; }

.m-t-lg {
  margin-top: 30px !important; }

.m-r-lg {
  margin-right: 30px !important; }

.m-b-lg {
  margin-bottom: 30px !important; }

.m-l-lg {
  margin-left: 30px !important; }

/* XLarge sized margin */
.m-a-xlg {
  margin: 45px !important; }

.m-x-xlg {
  margin-right: 45px !important;
  margin-left: 60px !important; }

.m-y-xlg {
  margin-top: 45px !important;
  margin-bottom: 60px !important; }

.m-t-xlg {
  margin-top: 45px !important; }

.m-r-xlg {
  margin-right: 45px !important; }

.m-b-xlg {
  margin-bottom: 45px !important; }

.m-l-xlg {
  margin-left: 45px !important; }

/* XXLarge sized margin */
.m-a-xxlg {
  margin: 60px !important; }

.m-x-xxlg {
  margin-right: 60px !important;
  margin-left: 60px !important; }

.m-y-xxlg {
  margin-top: 60px !important;
  margin-bottom: 60px !important; }

.m-t-xxlg {
  margin-top: 60px !important; }

.m-r-xxlg {
  margin-right: 60px !important; }

.m-b-xxlg {
  margin-bottom: 60px !important; }

.m-l-xxlg {
  margin-left: 60px !important; }

/* 3XLarge sized margin */
.m-a-3xlg {
  margin: 75px !important; }

.m-x-3xlg {
  margin-right: 75px !important;
  margin-left: 60px !important; }

.m-y-3xlg {
  margin-top: 75px !important;
  margin-bottom: 60px !important; }

.m-t-3xlg {
  margin-top: 75px !important; }

.m-r-3xlg {
  margin-right: 75px !important; }

.m-b-3xlg {
  margin-bottom: 75px !important; }

.m-l-3xlg {
  margin-left: 75px !important; }

/* Spacing modifiers - auto margins */
.m-l-auto {
  margin-left: auto; }

.m-r-auto {
  margin-right: auto; }

/* ----------------------------------
Negative margin Modifiers
---------------------------------- */
.m-t-n-xs {
  margin-top: -5px !important; }

.m-r-n-xs {
  margin-right: -5px !important; }

.m-b-n-xs {
  margin-bottom: -5px !important; }

.m-l-n-xs {
  margin-left: -5px !important; }

.m-x-n-xs {
  margin-left: -5px !important;
  margin-right: -5px !important; }

.m-y-n-xs {
  margin-top: -5px !important;
  margin-bottom: -5px !important; }

.m-a-n-xs {
  margin: -5px !important; }

.m-t-n {
  margin-top: -10px !important; }

.m-r-n {
  margin-right: -10px !important; }

.m-b-n {
  margin-bottom: -10px !important; }

.m-l-n {
  margin-left: -10px !important; }

.m-x-n {
  margin-left: -10px !important;
  margin-right: -10px !important; }

.m-y-n {
  margin-top: -10px !important;
  margin-bottom: -10px !important; }

.m-a-n {
  margin: -10px !important; }

.m-t-n-md {
  margin-top: -15px !important; }

.m-r-n-md {
  margin-right: -15px !important; }

.m-b-n-md {
  margin-bottom: -15px !important; }

.m-l-n-md {
  margin-left: -15px !important; }

.m-x-n-md {
  margin-left: -15px !important;
  margin-right: -15px !important; }

.m-y-n-md {
  margin-top: -15px !important;
  margin-bottom: -15px !important; }

.m-a-n-md {
  margin: -15px !important; }

.m-t-n-lg {
  margin-top: -30px !important; }

.m-r-n-lg {
  margin-right: -30px !important; }

.m-b-n-lg {
  margin-bottom: -30px !important; }

.m-l-n-lg {
  margin-left: -30px !important; }

.m-x-n-lg {
  margin-left: -30px !important;
  margin-right: -30px !important; }

.m-y-n-lg {
  margin-top: -30px !important;
  margin-bottom: -30px !important; }

.m-a-n-lg {
  margin: -30px !important; }

.m-t-n-xlg {
  margin-top: -45px !important; }

.m-r-n-xlg {
  margin-right: -45px !important; }

.m-b-n-xlg {
  margin-bottom: -45px !important; }

.m-l-n-xlg {
  margin-left: -45px !important; }

.m-x-n-xlg {
  margin-left: -45px !important;
  margin-right: -45px !important; }

.m-y-n-xlg {
  margin-top: -45px !important;
  margin-bottom: -45px !important; }

.m-a-n-xlg {
  margin: -45px !important; }

.m-t-n-xxlg {
  margin-top: -60px !important; }

.m-r-n-xxlg {
  margin-right: -60px !important; }

.m-b-n-xxlg {
  margin-bottom: -60px !important; }

.m-l-n-xxlg {
  margin-left: -60px !important; }

.m-x-n-xxlg {
  margin-left: -60px !important;
  margin-right: -60px !important; }

.m-y-n-xxlg {
  margin-top: -60px !important;
  margin-bottom: -60px !important; }

.m-a-n-xxlg {
  margin: -60px !important; }

.m-t-n-3xlg {
  margin-top: -75px !important; }

.m-r-n-3xlg {
  margin-right: -75px !important; }

.m-b-n-3xlg {
  margin-bottom: -75px !important; }

.m-l-n-3xlg {
  margin-left: -75px !important; }

.m-x-n-3xlg {
  margin-left: -75px !important;
  margin-right: -75px !important; }

.m-y-n-3xlg {
  margin-top: -75px !important;
  margin-bottom: -75px !important; }

.m-a-n-3xlg {
  margin: -75px !important; }

/* x-overflow-hidden and h-overflow-hidde classnames are depricated and will be removed in future, pls use overflow-x-ellipsis instead*/
.x-overflow-ellipsis,
.h-overflow-ellipsis,
.overflow-x-ellipsis {
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap !important; }

.text-overflow {
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis; }

.word-wrap-break-word {
  word-wrap: break-word; }

.nowrap {
  white-space: nowrap; }

.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently not supported by any browser */ }

.text-cursor {
  cursor: text !important; }

/* To be used for orientation related symbols like arrows */
.wf-n {
  display: inline-block;
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg); }

.wf-s {
  display: inline-block;
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg); }

.wf-w {
  display: inline-block;
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg); }

.wf-ne {
  display: inline-block;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg); }

.wf-se {
  display: inline-block;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg); }

.wf-nw {
  display: inline-block;
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg); }

.wf-sw {
  display: inline-block;
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg); }

.wf.wf-i4 {
  /*background: url('../images/webfactory_logo_white.png') center center no-repeat;*/
  /*background: url('../images/login_logo.svg') center center no-repeat;*/
  line-height: 80px;
  width: 200px;
  margin: -35px 0 0 -10px;
  font-size: 170px; }

.wf.wf-i4:before {
  content: "\e6ea";
  font-family: 'WFIconFont'; }

[data-icon="wf wf-i4"] .wf-tile-title {
  position: absolute;
  width: 100%;
  margin-top: 75px !important;
  margin-left: 40px !important; }

/*!
 *  WEBfactory Icon Font 3.8.0 by - http://webfactory-world.de
 *  WEBfactory Large Icon Font 2.10.0 (deprecated) by - http://webfactory-world.de
 *  WEBfactory Detailed Icon Font 2.8.2 by - http://webfactory-world.de
 */
/* FONT PATH
 * -------------------------- */
/* WEBfactory Icon Font */
@font-face {
  font-family: 'WFIconFont';
  src: url("../fonts/WFIconFont.eot?bbg2sq");
  src: url("../fonts/WFIconFont.eot?bbg2sq#iefix") format("embedded-opentype"), url("../fonts/WFIconFont.ttf?bbg2sq") format("truetype"), url("../fonts/WFIconFont.woff?bbg2sq") format("woff"), url("../fonts/WFIconFont.svg?bbg2sq#WFIconFont") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'WFDetailedIconFont';
  src: url("../fonts/WFDetailedIconFont.eot?36chh");
  src: url("../fonts/WFDetailedIconFont.eot?36chh#iefix") format("embedded-opentype"), url("../fonts/WFDetailedIconFont.ttf?36chh") format("truetype"), url("../fonts/WFDetailedIconFont.woff?36chh") format("woff"), url("../fonts/WFDetailedIconFont.svg?36chh#WFDetailedIconFont") format("svg");
  font-weight: normal;
  font-style: normal; }

/*------------ Deprecated font--------------*/
@font-face {
  font-family: 'WFLargeIconFont';
  src: url("../fonts/WFDetailedIconFont.eot?337mcq");
  src: url("../fonts/WFDetailedIconFont.eot?337mcq#iefix") format("embedded-opentype"), url("../fonts/WFDetailedIconFont.ttf?337mcq") format("truetype"), url("../fonts/WFDetailedIconFont.woff?337mcq") format("woff"), url("../fonts/WFDetailedIconFont.svg?337mcq#WFDetailedIconFont") format("svg");
  font-weight: normal;
  font-style: normal; }

.wf,
.wf-lg,
.medium-icon {
  -webkit-speak: none;
  -moz-speak: none;
  -ms-speak: none;
  -o-speak: none;
  speak: none;
  font-style: normal;
  font-weight: normal;
  -webkit-font-variant: normal;
  -moz-font-variant: normal;
  -ms-font-variant: normal;
  -o-font-variant: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  display: inline-block;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.wf,
.medium-icon {
  font-family: 'WFIconFont'; }

.wf-lg,
.medium-icon-lg {
  font-family: 'WFLargeIconFont', 'WFDetailedIconFont'; }

/* Placeholder Icons
 * -------------------------- */
.wf-blank-character:before {
  content: "\e749"; }

/* ICONS
 * -------------------------- */
.wf-add:before {
  content: "\e600"; }

.wf-add-round:before {
  content: "\e601"; }

.wf-add-round-o:before {
  content: "\e602"; }

.wf-advanced-filter:before {
  content: "\e603"; }

.wf-alarm:before {
  content: "\e604"; }

.wf-alarm-clock:before {
  content: "\e605"; }

.wf-alarm-reload:before {
  content: "\e606"; }

.wf-alert:before {
  content: "\e607"; }

.wf-alert-o:before {
  content: "\e608"; }

.wf-analysis:before {
  content: "\e609"; }

.wf-archive:before {
  content: "\e60a"; }

.wf-arrow:before {
  content: "\e60b"; }

.wf-arrow-metro:before {
  content: "\e60c"; }

.wf-arrow-redo:before {
  content: "\e60d"; }

.wf-arrow-refresh-left:before {
  content: "\e60e"; }

.wf-arrow-refresh-right:before {
  content: "\e60f"; }

.wf-arrow-round:before {
  content: "\e610"; }

.wf-arrow-round-o:before {
  content: "\e611"; }

.wf-arrow-undo:before {
  content: "\e612"; }

.wf-atmospheric-pressure:before {
  content: "\e613"; }

.wf-attach:before {
  content: "\e614"; }

.wf-bag:before {
  content: "\e615"; }

.wf-battery-empty:before {
  content: "\e616"; }

.wf-battery-full:before {
  content: "\e617"; }

.wf-battery-half:before {
  content: "\e618"; }

.wf-bell:before {
  content: "\e619"; }

.wf-bin:before {
  content: "\e61a"; }

.wf-blinds:before {
  content: "\e61b"; }

.wf-blower:before {
  content: "\e61c"; }

.wf-book-opened-o:before {
  content: "\e61d"; }

.wf-box:before {
  content: "\e61e"; }

.wf-brightness:before {
  content: "\e61f"; }

.wf-building:before {
  content: "\e620"; }

.wf-building-administrative:before {
  content: "\e621"; }

.wf-buildings:before {
  content: "\e622"; }

.wf-business-man:before {
  content: "\e623"; }

.wf-calendar:before {
  content: "\e624"; }

.wf-calendar-day:before {
  content: "\e625"; }

.wf-calendar-day-detailed:before {
  content: "\e626"; }

.wf-calendar-empty:before {
  content: "\e627"; }

.wf-calendar-month:before {
  content: "\e628"; }

.wf-calendar-week:before {
  content: "\e629"; }

.wf-callout:before {
  content: "\e62a"; }

.wf-car:before {
  content: "\e62b"; }

.wf-catalog:before {
  content: "\e62c"; }

.wf-catalog-o:before {
  content: "\e62d"; }

.wf-chart:before {
  content: "\e62e"; }

.wf-chart-curve:before {
  content: "\e62f"; }

.wf-chart-line:before {
  content: "\e630"; }

.wf-chart-pie:before {
  content: "\e631"; }

.wf-chart-ranking:before {
  content: "\e632"; }

.wf-chart-sankey:before {
  content: "\e633"; }

.wf-chart-scatter:before {
  content: "\e634"; }

.wf-chart-spectral:before {
  content: "\e635"; }

.wf-check:before {
  content: "\e636"; }

.wf-check-round:before {
  content: "\e637"; }

.wf-check-round-o:before {
  content: "\e638"; }

.wf-chemical-waste:before {
  content: "\e639"; }

.wf-clock:before {
  content: "\e63a"; }

.wf-close-label:before {
  content: "\e63b"; }

.wf-close-round:before {
  content: "\e63c"; }

.wf-cloud:before {
  content: "\e63d"; }

.wf-cloud-o:before {
  content: "\e63e"; }

.wf-clouds:before {
  content: "\e63f"; }

.wf-clouds-o:before {
  content: "\e640"; }

.wf-co2:before {
  content: "\e641"; }

.wf-cog:before {
  content: "\e642"; }

.wf-cogs:before {
  content: "\e643"; }

.wf-collapse-arrow-in:before {
  content: "\e644"; }

.wf-collapse-arrow-out:before {
  content: "\e645"; }

.wf-cooling-tower:before {
  content: "\e646"; }

.wf-cost:before {
  content: "\e647"; }

.wf-cut:before {
  content: "\e648"; }

.wf-damper:before {
  content: "\e649"; }

.wf-dashboard:before {
  content: "\e64a"; }

.wf-data:before {
  content: "\e64b"; }

.wf-database:before {
  content: "\e64c"; }

.wf-data-register:before {
  content: "\e64d"; }

.wf-data-reload:before {
  content: "\e64e"; }

.wf-detach:before {
  content: "\e64f"; }

.wf-details:before {
  content: "\e650"; }

.wf-door-closed:before {
  content: "\e651"; }

.wf-door-opened:before {
  content: "\e652"; }

.wf-download:before {
  content: "\e653"; }

.wf-drinking-water:before {
  content: "\e654"; }

.wf-drop:before {
  content: "\e655"; }

.wf-drop-o:before {
  content: "\e656"; }

.wf-edit:before {
  content: "\e657"; }

.wf-elevator:before {
  content: "\e658"; }

.wf-emission:before {
  content: "\e659"; }

.wf-energy:before {
  content: "\e65a"; }

.wf-environment:before {
  content: "\e65b"; }

.wf-exit-fullscreen:before {
  content: "\e65c"; }

.wf-expand-arrow-in:before {
  content: "\e65d"; }

.wf-expand-arrow-out:before {
  content: "\e65e"; }

.wf-eye:before {
  content: "\e65f"; }

.wf-fan:before {
  content: "\e660"; }

.wf-fan-symbol:before {
  content: "\e661"; }

.wf-file:before {
  content: "\e662"; }

.wf-file-o:before {
  content: "\e663"; }

.wf-files:before {
  content: "\e664"; }

.wf-files-o:before {
  content: "\e665"; }

.wf-filter:before {
  content: "\e666"; }

.wf-filter-o:before {
  content: "\e667"; }

.wf-fire:before {
  content: "\e668"; }

.wf-flag:before {
  content: "\e669"; }

.wf-flap:before {
  content: "\e66a"; }

.wf-flash:before {
  content: "\e66b"; }

.wf-flask:before {
  content: "\e66c"; }

.wf-floor-plan:before {
  content: "\e66d"; }

.wf-folder:before {
  content: "\e66e"; }

.wf-football-field:before {
  content: "\e66f"; }

.wf-full-screen:before {
  content: "\e670"; }

.wf-garbage-container:before {
  content: "\e671"; }

.wf-gas:before {
  content: "\e672"; }

.wf-gauge:before {
  content: "\e673"; }

.wf-gavel:before {
  content: "\e674"; }

.wf-graduation:before {
  content: "\e675"; }

.wf-graph:before {
  content: "\e676"; }

.wf-hand:before {
  content: "\e677"; }

.wf-handcuffs:before {
  content: "\e678"; }

.wf-hand-o:before {
  content: "\e679"; }

.wf-hard-disk:before {
  content: "\e67a"; }

.wf-heat:before {
  content: "\e67b"; }

.wf-home:before {
  content: "\e67c"; }

.wf-home-o:before {
  content: "\e67d"; }

.wf-image:before {
  content: "\e67e"; }

.wf-info:before {
  content: "\e67f"; }

.wf-key:before {
  content: "\e680"; }

.wf-label:before {
  content: "\e681"; }

.wf-light-bulb:before {
  content: "\e682"; }

.wf-light-bulb-eco:before {
  content: "\e683"; }

.wf-light-bulb-o:before {
  content: "\e684"; }

.wf-light-bulb-symbol:before {
  content: "\e685"; }

.wf-link:before {
  content: "\e686"; }

.wf-lock:before {
  content: "\e687"; }

.wf-login:before {
  content: "\e688"; }

.wf-logout:before {
  content: "\e689"; }

.wf-mail:before {
  content: "\e68a"; }

.wf-marker:before {
  content: "\e68b"; }

.wf-maximize:before {
  content: "\e68c"; }

.wf-megaphone:before {
  content: "\e68d"; }

.wf-menu:before {
  content: "\e68e"; }

.wf-message:before {
  content: "\e68f"; }

.wf-meter:before {
  content: "\e690"; }

.wf-meter-gauge:before {
  content: "\e691"; }

.wf-minimize:before {
  content: "\e692"; }

.wf-mining:before {
  content: "\e693"; }

.wf-mist:before {
  content: "\e694"; }

.wf-mixer:before {
  content: "\e695"; }

.wf-mobile:before {
  content: "\e696"; }

.wf-motor:before {
  content: "\e697"; }

.wf-motor-electric:before {
  content: "\e698"; }

.wf-oil-pump:before {
  content: "\e699"; }

.wf-oil-rig:before {
  content: "\e69a"; }

.wf-ok:before {
  content: "\e69b"; }

.wf-outlet:before {
  content: "\e69c"; }

.wf-pause-round:before {
  content: "\e69d"; }

.wf-pause-round-o:before {
  content: "\e69e"; }

.wf-pc:before {
  content: "\e69f"; }

.wf-plane:before {
  content: "\e6a0"; }

.wf-plant:before {
  content: "\e6a1"; }

.wf-play-round:before {
  content: "\e6a2"; }

.wf-play-round-o:before {
  content: "\e6a3"; }

.wf-plug:before {
  content: "\e6a4"; }

.wf-pointer:before {
  content: "\e6a5"; }

.wf-police:before {
  content: "\e6a6"; }

.wf-power:before {
  content: "\e6a7"; }

.wf-power-grid:before {
  content: "\e6a8"; }

.wf-power-on:before {
  content: "\e6a9"; }

.wf-printer:before {
  content: "\e6aa"; }

.wf-pump-symbol:before {
  content: "\e6ab"; }

.wf-rain:before {
  content: "\e6ac"; }

.wf-rain-o:before {
  content: "\e6ad"; }

.wf-recycle:before {
  content: "\e6ae"; }

.wf-remove:before {
  content: "\e6af"; }

.wf-remove-round:before {
  content: "\e6b0"; }

.wf-remove-round-o:before {
  content: "\e6b1"; }

.wf-report:before {
  content: "\e6b2"; }

.wf-reports:before {
  content: "\e6b3"; }

.wf-save:before {
  content: "\e6b4"; }

.wf-search:before {
  content: "\e6b5"; }

.wf-server:before {
  content: "\e6b6"; }

.wf-server-alert:before {
  content: "\e6b7"; }

.wf-service:before {
  content: "\e6b8"; }

.wf-ship:before {
  content: "\e6b9"; }

.wf-shopping-cart:before {
  content: "\e6ba"; }

.wf-shower-rain:before {
  content: "\e6bb"; }

.wf-shower-rain-o:before {
  content: "\e6bc"; }

.wf-signal-bars:before {
  content: "\e6bd"; }

.wf-signal-types:before {
  content: "\e6be"; }

.wf-signal-wifi:before {
  content: "\e6bf"; }

.wf-sitemap:before {
  content: "\e6c0"; }

.wf-small-x:before {
  content: "\e6c1"; }

.wf-small-x-round:before {
  content: "\e6c2"; }

.wf-snow:before {
  content: "\e6c3"; }

.wf-snow-flake:before {
  content: "\e6c4"; }

.wf-solar-pannel:before {
  content: "\e6c5"; }

.wf-speed-gauge:before {
  content: "\e6c6"; }

.wf-staircase-down:before {
  content: "\e6c7"; }

.wf-staircase-up:before {
  content: "\e6c8"; }

.wf-stop-round:before {
  content: "\e6c9"; }

.wf-stop-round-o:before {
  content: "\e6ca"; }

.wf-stop-sign:before {
  content: "\e6cb"; }

.wf-store:before {
  content: "\e6cc"; }

.wf-sun:before {
  content: "\e6cd"; }

.wf-sun-o:before {
  content: "\e6ce"; }

.wf-tank:before {
  content: "\e6cf"; }

.wf-tank-horizontal:before {
  content: "\e6d0"; }

.wf-tank-vertical:before {
  content: "\e6d1"; }

.wf-target:before {
  content: "\e6d2"; }

.wf-temperature:before {
  content: "\e6d3"; }

.wf-thermometer:before {
  content: "\e6d4"; }

.wf-thumbs:before {
  content: "\e6d5"; }

.wf-thunder-storm:before {
  content: "\e6d6"; }

.wf-thunder-storm-o:before {
  content: "\e6d7"; }

.wf-tiles:before {
  content: "\e6d8"; }

.wf-toolbox:before {
  content: "\e6d9"; }

.wf-transformator:before {
  content: "\e6da"; }

.wf-truck:before {
  content: "\e6db"; }

.wf-unlock:before {
  content: "\e6dc"; }

.wf-upload:before {
  content: "\e6dd"; }

.wf-user:before {
  content: "\e6de"; }

.wf-user-id:before {
  content: "\e6df"; }

.wf-user-log:before {
  content: "\e6e0"; }

.wf-users:before {
  content: "\e6e1"; }

.wf-valve:before {
  content: "\e6e2"; }

.wf-valve-handle:before {
  content: "\e6e3"; }

.wf-valve-symbol:before {
  content: "\e6e4"; }

.wf-warning-reload:before {
  content: "\e6e5"; }

.wf-waste:before {
  content: "\e6e6"; }

.wf-waste-water:before {
  content: "\e6e7"; }

.wf-water:before {
  content: "\e6e8"; }

.wf-weather:before {
  content: "\e6e9"; }

.wf-wflogo:before {
  content: "\e6ea"; }

.wf-wind:before {
  content: "\e6eb"; }

.wf-wind-blow:before {
  content: "\e6ec"; }

.wf-windmill:before {
  content: "\e6ed"; }

.wf-window:before {
  content: "\e6ee"; }

.wf-window-opened:before {
  content: "\e6ef"; }

.wf-window-opened-half:before {
  content: "\e6f0"; }

.wf-world:before {
  content: "\e6f1"; }

.wf-wrench:before {
  content: "\e6f2"; }

.wf-arrow-down-over:before {
  content: "\e6f3"; }

.wf-arrow-down-under:before {
  content: "\e6f4"; }

.wf-arrow-up-over:before {
  content: "\e6f5"; }

.wf-arrow-up-under:before {
  content: "\e6f6"; }

.wf-alarm-clock-o:before {
  content: "\e6f7"; }

.wf-clipboard:before {
  content: "\e6f8"; }

.wf-close-round-o:before {
  content: "\e6f9"; }

.wf-user-id-o:before {
  content: "\e6fa"; }

.wf-column-chart:before {
  content: "\e6fb"; }

.wf-column-chart-1:before {
  content: "\e6fc"; }

.wf-column-chart-2:before {
  content: "\e6fd"; }

.wf-column-chart-3:before {
  content: "\e6fe"; }

.wf-line-chart:before {
  content: "\e6ff"; }

.wf-line-chart-1:before {
  content: "\e700"; }

.wf-spline-chart:before {
  content: "\e701"; }

.wf-spline-chart-1:before {
  content: "\e702"; }

.wf-pie-chart:before {
  content: "\e703"; }

.wf-donut-chart:before {
  content: "\e704"; }

.wf-bar-chart:before {
  content: "\e705"; }

.wf-bar-chart-1:before {
  content: "\e706"; }

.wf-area-chart:before {
  content: "\e707"; }

.wf-area-chart-1:before {
  content: "\e708"; }

.wf-scatter-chart:before {
  content: "\e709"; }

.wf-stock-chart:before {
  content: "\e70a"; }

.wf-stock-chart-1:before {
  content: "\e70b"; }

.wf-surface-chart:before {
  content: "\e70c"; }

.wf-surface-chart-1:before {
  content: "\e70d"; }

.wf-pyramid-chart:before {
  content: "\e70e"; }

.wf-heating-motor:before {
  content: "\e70f"; }

.wf-hvac-cooling-tower-icon:before {
  content: "\e710"; }

.wf-hvac-icon:before {
  content: "\e711"; }

.wf-air-pump:before {
  content: "\e712"; }

.wf-isometric:before {
  content: "\e713"; }

.wf-converge:before {
  content: "\e714"; }

.wf-isometric-o:before {
  content: "\e715"; }

.wf-compressed-air:before {
  content: "\e716"; }

.wf-isometrics:before {
  content: "\e717"; }

.wf-diverge:before {
  content: "\e718"; }

.wf-isometrics-o:before {
  content: "\e719"; }

.wf-chemical-reaction:before {
  content: "\e71a"; }

.wf-nitrogen:before {
  content: "\e71b"; }

.wf-heating-oil:before {
  content: "\e71c"; }

.wf-oil:before {
  content: "\e71d"; }

.wf-compressed-air1:before {
  content: "\e71e"; }

.wf-oxygen:before {
  content: "\e71f"; }

.wf-heating-oil-o:before {
  content: "\e720"; }

.wf-pressurised-gas:before {
  content: "\e721"; }

.wf-argon:before {
  content: "\e722"; }

.wf-production-robot:before {
  content: "\e723"; }

.wf-production-robot1:before {
  content: "\e724"; }

.wf-delta-chart:before {
  content: "\e725"; }

.wf-excel-doc:before {
  content: "\e726"; }

.wf-excel-doc-1:before {
  content: "\e727"; }

.wf-excel-doc-2:before {
  content: "\e728"; }

.wf-excel-doc-3:before {
  content: "\e729"; }

.wf-alarm-o:before {
  content: "\e72a"; }

.wf-bell-o:before {
  content: "\e72b"; }

.wf-fire-o:before {
  content: "\e72c"; }

.wf-garbage-container-o:before {
  content: "\e72d"; }

.wf-user-o:before {
  content: "\e72e"; }

.wf-users-o:before {
  content: "\e72f"; }

.wf-cog-o:before {
  content: "\e730"; }

.wf-cogs-o:before {
  content: "\e731"; }

.wf-close-round-o2:before {
  content: "\e732"; }

.wf-arrow-metro-o:before {
  content: "\e733"; }

.wf-power-off:before {
  content: "\e734"; }

.wf-mail-o:before {
  content: "\e735"; }

.wf-flag-o:before {
  content: "\e736"; }

.wf-car-o:before {
  content: "\e737"; }

.wf-callout-o:before {
  content: "\e738"; }

.wf-small-add:before {
  content: "\e739"; }

.wf-small-add-round:before {
  content: "\e73a"; }

.wf-small-add-round-o:before {
  content: "\e73b"; }

.wf-small-x-round-o:before {
  content: "\e73c"; }

.wf-temperature-o:before {
  content: "\e73d"; }

.wf-average:before {
  content: "\e73e"; }

.wf-max:before {
  content: "\e73f"; }

.wf-min:before {
  content: "\e740"; }

.wf-room1:before {
  content: "\e741"; }

.wf-room2:before {
  content: "\e742"; }

.wf-room3:before {
  content: "\e743"; }

.wf-chart-gap:before {
  content: "\e744"; }

.wf-compare-object:before {
  content: "\e745"; }

.wf-compare-time:before {
  content: "\e746"; }

.wf-consumption-media:before {
  content: "\e747"; }

.wf-consumption-media-1:before {
  content: "\e748"; }

.wf-ammonium:before {
  content: "\e74a"; }

.wf-broken-cake:before {
  content: "\e74b"; }

.wf-canteen:before {
  content: "\e74c"; }

.wf-cinema-1:before {
  content: "\e74d"; }

.wf-cinema-2:before {
  content: "\e74e"; }

.wf-cinema:before {
  content: "\e74f"; }

.wf-city-hall:before {
  content: "\e750"; }

.wf-city-hall-1:before {
  content: "\e751"; }

.wf-city-hall-2:before {
  content: "\e752"; }

.wf-city:before {
  content: "\e753"; }

.wf-cooling-water:before {
  content: "\e754"; }

.wf-cup:before {
  content: "\e755"; }

.wf-data-center:before {
  content: "\e756"; }

.wf-data-center-1:before {
  content: "\e757"; }

.wf-fire-alarm:before {
  content: "\e758"; }

.wf-fire-extinguisher:before {
  content: "\e759"; }

.wf-fire-hydrant:before {
  content: "\e75a"; }

.wf-food:before {
  content: "\e75b"; }

.wf-hamburger:before {
  content: "\e75c"; }

.wf-helium:before {
  content: "\e75d"; }

.wf-hospital:before {
  content: "\e75e"; }

.wf-hospital-1:before {
  content: "\e75f"; }

.wf-hotel:before {
  content: "\e760"; }

.wf-hotel-1:before {
  content: "\e761"; }

.wf-hydrogen:before {
  content: "\e762"; }

.wf-luggage:before {
  content: "\e763"; }

.wf-map:before {
  content: "\e764"; }

.wf-map-1:before {
  content: "\e765"; }

.wf-map-2:before {
  content: "\e766"; }

.wf-mixed-building:before {
  content: "\e767"; }

.wf-museum:before {
  content: "\e768"; }

.wf-museum-1:before {
  content: "\e769"; }

.wf-process-heat:before {
  content: "\e76a"; }

.wf-residence:before {
  content: "\e76b"; }

.wf-residence-1:before {
  content: "\e76c"; }

.wf-restaurant:before {
  content: "\e76d"; }

.wf-room-cooling:before {
  content: "\e76e"; }

.wf-sawtooth-wave:before {
  content: "\e76f"; }

.wf-school:before {
  content: "\e770"; }

.wf-sharp-pulse:before {
  content: "\e771"; }

.wf-sine-wave:before {
  content: "\e772"; }

.wf-sports-hall:before {
  content: "\e773"; }

.wf-square-wave:before {
  content: "\e774"; }

.wf-stadium:before {
  content: "\e775"; }

.wf-stadium-1:before {
  content: "\e776"; }

.wf-swimming-pool:before {
  content: "\e777"; }

.wf-tree-structure:before {
  content: "\e778"; }

.wf-tree-structure-1:before {
  content: "\e779"; }

.wf-tree-structure-2:before {
  content: "\e77a"; }

.wf-tree-structure-3:before {
  content: "\e77b"; }

.wf-tree-structure-4:before {
  content: "\e77c"; }

.wf-tree-structure-5:before {
  content: "\e77d"; }

.wf-warehouse:before {
  content: "\e77e"; }

.wf-warehouse-1:before {
  content: "\e77f"; }

.wf-cake:before {
  content: "\e780"; }

.wf-dough:before {
  content: "\e781"; }

.wf-workshop:before {
  content: "\e782"; }

.wf-workshop-1:before {
  content: "\e783"; }

.wf-pin-left:before {
  content: "\e784"; }

.wf-pin-top:before {
  content: "\e785"; }

.wf-pin-right:before {
  content: "\e786"; }

.wf-sports:before {
  content: "\e787"; }

.wf-sigma:before {
  content: "\e788"; }

.wf-agregate:before {
  content: "\e789"; }

.wf-chip:before {
  content: "\e78a"; }

.wf-chip-1:before {
  content: "\e78b"; }

.wf-co2-cloud:before {
  content: "\e78c"; }

.wf-edit-field:before {
  content: "\e78d"; }

.wf-ethernet-socket:before {
  content: "\e78e"; }

.wf-password:before {
  content: "\e78f"; }

.wf-password-field:before {
  content: "\e790"; }

.wf-password-field-1:before {
  content: "\e791"; }

.wf-plc:before {
  content: "\e792"; }

.wf-redo:before {
  content: "\e793"; }

.wf-reload-arrow:before {
  content: "\e794"; }

.wf-save-and-add-new:before {
  content: "\e795"; }

.wf-save-and-close:before {
  content: "\e796"; }

.wf-save-and-open:before {
  content: "\e797"; }

.wf-select-all:before {
  content: "\e798"; }

.wf-select-all-1:before {
  content: "\e799"; }

.wf-sub-units:before {
  content: "\e79a"; }

.wf-sub-units-1:before {
  content: "\e79b"; }

.wf-unselect-all:before {
  content: "\e79c"; }

.wf-unselect-all-1:before {
  content: "\e79d"; }

.wf-clear:before {
  content: "\e79e"; }

.wf-no-conection:before {
  content: "\e79f"; }

.wf-no-conection-1:before {
  content: "\e7a0"; }

.wf-signal-wifi-slash:before {
  content: "\e7a1"; }

.wf-parent-unit:before {
  content: "\e7a2"; }

.wf-list:before {
  content: "\e7a3"; }

.wf-counter-list:before {
  content: "\e7a4"; }

.wf-device-list:before {
  content: "\e7a5"; }

.wf-language:before {
  content: "\e7a6"; }

.wf-test-dummy:before {
  content: "\e7a7"; }

.wf-i4analytics:before {
  content: "\e7a8"; }

.wf-i4energy:before {
  content: "\e7a9"; }

.wf-i4maintenance:before {
  content: "\e7aa"; }

.wf-i4monitoring:before {
  content: "\e7ab"; }

.wf-i4scada:before {
  content: "\e7ac"; }

.wf-device:before {
  content: "\e7ad"; }

.wf-save-filter:before {
  content: "\e7ae"; }

.wf-open-filter:before {
  content: "\e7af"; }

.wf-shared-filter:before {
  content: "\e7b0"; }

.wf-personal-filter:before {
  content: "\e7b1"; }

.wf-parts:before {
  content: "\e7b2"; }

.wf-puzzle:before {
  content: "\e7b3"; }

.wf-article:before {
  content: "\e7b4"; }

.wf-document:before {
  content: "\e7b5"; }

.wf-event-duration:before {
  content: "\e7b6"; }

.wf-event-count:before {
  content: "\e7b7"; }

.wf-mtbf:before {
  content: "\e7b8"; }

.wf-oee:before {
  content: "\e7b9"; }

.wf-time-cost:before {
  content: "\e7ba"; }

.wf-availability-1:before {
  content: "\e7bb"; }

.wf-availability-2:before {
  content: "\e7bc"; }

.wf-chevron-down:before {
  content: "\e7bd"; }

.wf-chevron-left:before {
  content: "\e7be"; }

.wf-chevron-right:before {
  content: "\e7bf"; }

.wf-chevron-up:before {
  content: "\e7c0"; }

.wf-quality-1:before {
  content: "\e7c1"; }

.wf-quality-2:before {
  content: "\e7c2"; }

.wf-script-1:before {
  content: "\e7c3"; }

.wf-script-2:before {
  content: "\e7c4"; }

.wf-script-3:before {
  content: "\e7c5"; }

.wf-script-4:before {
  content: "\e7c6"; }

.wf-scripts-1:before {
  content: "\e7c7"; }

.wf-scripts-2:before {
  content: "\e7c8"; }

.wf-scripts-3:before {
  content: "\e7c9"; }

.wf-scripts-4:before {
  content: "\e7ca"; }

.wf-stopwatch-1:before {
  content: "\e7cb"; }

.wf-traceability-1:before {
  content: "\e7cc"; }

.wf-traceability-2:before {
  content: "\e7cd"; }

.wf-move-tile-1:before {
  content: "\e7ce"; }

.wf-pin-tile:before {
  content: "\e7cf"; }

.wf-pin-tile-1:before {
  content: "\e7d0"; }

.wf-step-backward:before {
  content: "\e7d1"; }

.wf-fast-backward:before {
  content: "\e7d2"; }

.wf-step-forward:before {
  content: "\e7d3"; }

.wf-fast-forward:before {
  content: "\e7d4"; }

.wf-reset:before {
  content: "\e7d5"; }

.wf-defrost:before {
  content: "\e7d6"; }

.wf-shape-circle:before {
  content: "\e7d7"; }

.wf-shape-square:before {
  content: "\e7d8"; }

.wf-shape-triangle:before {
  content: "\e7d9"; }

.wf-wurm-connector:before {
  content: "\e7da"; }

.wf-carel-connector:before {
  content: "\e7db"; }

.wf-event-groups:before {
  content: "\e7dc"; }

.wf-calendar-events:before {
  content: "\e7dd"; }

.wf-events:before {
  content: "\e7de"; }

.wf-event-types:before {
  content: "\e7df"; }

.wf-calendar-number:before {
  content: "\e7e0"; }

.wf-key-1:before {
  content: "\e7e1"; }

.wf-circle-sector:before {
  content: "\e7e2"; }

.wf-eye-slash:before {
  content: "\e7e3"; }

.wf-blinds-1x2:before {
  content: "\e7e4"; }

.wf-blinds-1x3:before {
  content: "\e7e5"; }

.wf-blinds-2x3:before {
  content: "\e7e6"; }

.wf-info-1:before {
  content: "\e7e7"; }

.wf-cog-simple:before {
  content: "\e7e8"; }

.wf-sun-direction:before {
  content: "\e7e9"; }

.wf-sun-direction-1:before {
  content: "\e7ea"; }

.wf-cloud-server:before {
  content: "\e7eb"; }

.wf-cloud-server-connection-off:before {
  content: "\e7ec"; }

.wf-moon:before {
  content: "\e7ed"; }

.wf-cloud-download:before {
  content: "\e7ee"; }

.wf-cloud-upload:before {
  content: "\e7ef"; }

.wf-light-bulb-eco-o:before {
  content: "\e7f0"; }

.wf-external-link-o:before {
  content: "\e7f1"; }

.wf-external-link:before {
  content: "\e7f2"; }

.wf-azure-iot:before {
  content: "\e7f3"; }

.wf-modbus-connector:before {
  content: "\e7f4"; }

.wf-csv-connector:before {
  content: "\e7f5"; }

.wf-beck-connector:before {
  content: "\e7f6"; }

.wf-beck-connector-1:before {
  content: "\e7f7"; }

.wf-mqtt-connector:before {
  content: "\e7f8"; }

.wf-sql-connector:before {
  content: "\e7f9"; }

.wf-bell-slash:before {
  content: "\e7fa"; }

.wf-bell-o-slash:before {
  content: "\e7fb"; }

.wf-question-mark-round:before {
  content: "\e7fc"; }

.wf-question-mark-round-o:before {
  content: "\e7fd"; }

.wf-info-round:before {
  content: "\e7fe"; }

.wf-info-round-o:before {
  content: "\e7ff"; }

.wf-documentation:before {
  content: "\e800"; }

.wf-server-1:before {
  content: "\e801"; }

.wf-server-1-off:before {
  content: "\e802"; }

.wf-min-gauge:before {
  content: "\e803"; }

.wf-max-gauge:before {
  content: "\e804"; }

.wf-average-gauge:before {
  content: "\e805"; }

.wf-sort-ato-z:before {
  content: "\e806"; }

.wf-sort-z-to-a:before {
  content: "\e807"; }

.wf-table:before {
  content: "\e808"; }

.wf-tables:before {
  content: "\e809"; }

.wf-add-table:before {
  content: "\e80a"; }

.wf-remove-table:before {
  content: "\e80b"; }

.wf-analisys:before {
  content: "\e80c"; }

.wf-database-1:before {
  content: "\e80d"; }

.wf-database-backup-1:before {
  content: "\e80e"; }

.wf-database-backup-2:before {
  content: "\e80f"; }

.wf-crane:before {
  content: "\e810"; }

.wf-lego-piece:before {
  content: "\e811"; }

.wf-light:before {
  content: "\e812"; }

.wf-light-off:before {
  content: "\e813"; }

.wf-panel-1:before {
  content: "\e814"; }

.wf-panel-2:before {
  content: "\e815"; }

.wf-pellets:before {
  content: "\e816"; }

.wf-dots:before {
  content: "\e817"; }

.wf-connector-closed:before {
  content: "\e818"; }

.wf-connector-open:before {
  content: "\e819"; }

.wf-i4-logo:before {
  content: "\e81a"; }

.wf-phone:before {
  content: "\e81b"; }

.wf-split-2:before {
  content: "\e81c"; }

.wf-split-3:before {
  content: "\e81d"; }

.wf-loop:before {
  content: "\e81e"; }

.wf-scale:before {
  content: "\e81f"; }

.wf-weight:before {
  content: "\e820"; }

.wf-tv:before {
  content: "\e821"; }

.wf-key-hole:before {
  content: "\e822"; }

.wf-select:before {
  content: "\e823"; }

.wf-unselect:before {
  content: "\e824"; }

.wf-check-sm:before {
  content: "\e825"; }

.wf-calendar-timespan:before {
  content: "\e826"; }

.wf-clock-timespan:before {
  content: "\e827"; }

.wf-logtag-1:before {
  content: "\e828"; }

.wf-logtag-2:before {
  content: "\e829"; }

.wf-start-time:before {
  content: "\e82a"; }

.wf-end-time:before {
  content: "\e82b"; }

.wf-start-time-1:before {
  content: "\e82c"; }

.wf-end-time-1:before {
  content: "\e82d"; }

.wf-start-date:before {
  content: "\e82e"; }

.wf-end-date:before {
  content: "\e82f"; }

.wf-start-date-1:before {
  content: "\e830"; }

.wf-end-date-1:before {
  content: "\e831"; }

.wf-gantt-chart:before {
  content: "\e832"; }

.wf-transformator-1:before {
  content: "\e833"; }

.wf-transformator-2:before {
  content: "\e834"; }

.wf-transformator-3:before {
  content: "\e835"; }

.wf-clock-o:before {
  content: "\e836"; }

.wf-message-o:before {
  content: "\e837"; }

.wf-modal-dialog:before {
  content: "\e838"; }

.wf-modal-dialog-1:before {
  content: "\e839"; }

.wf-navigation-button:before {
  content: "\e83a"; }

.wf-navigation-button-1:before {
  content: "\e83b"; }

.wf-volkswagen:before {
  content: "\e83c"; }

.wf-service-team:before {
  content: "\e83d"; }

/*---- Deprecated icon class names ----*/
.wf-city-hall_1:before {
  content: "\e751"; }

.wf-city-hall_2:before {
  content: "\e752"; }

.wf-data-center_1:before {
  content: "\e757"; }

.wf-hospital_1:before {
  content: "\e75f"; }

.wf-hotel_1:before {
  content: "\e761"; }

.wf-map_1:before {
  content: "\e765"; }

.wf-map_2:before {
  content: "\e766"; }

.wf-museum_1:before {
  content: "\e769"; }

.wf-residence_1:before {
  content: "\e76c"; }

.wf-stadium_1:before {
  content: "\e776"; }

.wf-tree-structure_1:before {
  content: "\e779"; }

.wf-tree-structure_2:before {
  content: "\e77a"; }

.wf-tree-structure_3:before {
  content: "\e77b"; }

.wf-tree-structure_4:before {
  content: "\e77c"; }

.wf-tree-structure_5:before {
  content: "\e77d"; }

.wf-warehouse_1:before {
  content: "\e77f"; }

.wf-sportshall:before {
  content: "\e773"; }

.wf-sportshall:before {
  content: "\e773"; }

.wf-workshop_1:before {
  content: "\e783"; }

/*---- Deprecated font classes ----*/

/*-----------------------------------
    Fonts
 ----------------------------------*/
@font-face {
  font-family: "Regular";
  font-weight: normal;
  font-style: normal;
  src: url("../../fonts/DINWeb.eot");
  src: url("../../fonts/DINWeb.eot?#iefix") format("embedded-opentype"), url("../../fonts/DINComp.ttf") format("truetype"), url("../../fonts/DINWeb.woff") format("woff"); }

@font-face {
  font-family: "Medium";
  font-weight: normal;
  font-style: normal;
  src: url("../../fonts/DINWeb-Medium.eot");
  src: url("../../fonts/DINWeb-Medium.eot?#iefix") format("embedded-opentype"), url("../../fonts/DINWeb-Medium.woff") format("woff"), url("../../fonts/DINComp-Medium.ttf") format("truetype"); }

/*-----------------------------------
    Typography
 ----------------------------------*/
h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4,
.wf-title {
  color: var(--i4c-title-foreground);
  font-weight: bold; }

h5,
h6,
.h5,
.h6,
.wf-subtitle {
  color: var(--i4c-subtitle-foreground); }

h5,
h5 {
  font-size: 13px; }

/*-----------------------------------------
    Bootstrap predefined color for text
 ----------------------------------------*/
.text-muted {
  color: var(--i4c-text-muted-foreground) !important;
  fill: var(--i4c-text-muted-foreground) !important; }

.text-primary {
  color: var(--i4c-primary-color) !important;
  fill: var(--i4c-primary-color) !important; }

.text-warning {
  color: var(--i4c-warning-color) !important;
  fill: var(--i4c-warning-color) !important; }

.text-danger {
  color: var(--i4c-danger-color) !important;
  fill: var(--i4c-danger-color) !important; }

.text-success {
  color: var(--i4c-success-color) !important;
  fill: var(--i4c-success-color) !important; }

.text-info {
  color: var(--i4c-info-color) !important;
  fill: var(--i4c-info-color) !important; }

a.text-primary:hover {
  color: var(--i4c-primary-color) !important; }

a.text-warning:hover {
  color: var(--i4c-warning-color-action) !important; }

a.text-danger:hover {
  color: var(--i4c-danger-color-action) !important; }

a.text-success:hover {
  color: var(--i4c-success-color-action) !important; }

a.text-info:hover {
  color: var(--i4c-info-color-action) !important; }

/*--------------------------------------------------
    Additional customer / CI specific accent colors for text
 -------------------------------------------------*/
.text-accent1 {
  color: var(--i4c-text-accent-color); }

.btn-default:hover .text-accent1 {
  color: var(--i4c-button-default-foreground-hover); }

.text-variant {
  color: var(--i4c-text-variant-color) !important; }

.text-highlighted {
  color: var(--i4c-highlight-color) !important;
  font-weight: bold; }

/*-----------------------------------
    Typographie
 ----------------------------------*/
small,
.small {
  font-size: 85%;
  color: var(--i4c-small-foreground); }

:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) :is(small, .small) {
  color: inherit;
  font-weight: normal;
  line-height: 1; }

h1,
h2,
h3 {
  margin-bottom: 10px;
  margin-top: 20px; }

h4,
h5,
h6 {
  margin-bottom: 10px;
  margin-top: 10px; }

h1,
.h1 {
  font-size: 36px; }

h2,
.h2 {
  font-size: 30px; }

h3,
.h3 {
  font-size: 24px; }

h4,
.h4 {
  font-size: 18px; }

h5,
.h5 {
  font-size: 14px; }

h6,
.h6 {
  font-size: 12px; }

:is(h1, h2, h3) :is(small, .small) {
  font-size: 65%; }

:is(h4, h5, h6) :is(small, .small) {
  font-size: 75%; }

p {
  margin: 0 0 10px; }

.title-color,
.wf-title {
  color: #333333; }

.bold {
  font-weight: bold !important; }

/*--------------------------------------------------
    Bootstrap Forms
 -------------------------------------------------*/
.form-horizontal .control-label {
  padding-top: 9px; }

/*--------------------------------------------------
   List groups with selectable components 
 -------------------------------------------------*/
.form-group-grid {
  display: grid;
  gap: 4px;
  margin-bottom: 12px; }

.form-group-pull-right {
  justify-self: end; }

.form-label {
  display: inline-block;
  max-width: 100%;
  margin: 0;
  font-weight: 700; }

.form-group {
  position: relative; }

td .form-group {
  margin-bottom: 0; }

/* Alarm components */
/*.wf-alarm-list {
}*/
.wf-alarm-table {
  background-color: #ffffff;
  table-layout: fixed; }

.wf-alarm-table tr th {
  padding-right: 15px; }

/*.wf-alarm-table tr td {
    padding-right: 15px;
}*/
.wf-alarm-table tr {
  border-left: 3px solid transparent; }

.wf-alarm-table tr:hover:not(:first-child) {
  cursor: pointer;
  border-left-color: var(--i4c-brand-color); }

/* Alarm tables cols */
.wf-alarm-table col.wf-alarm-checkbox {
  width: 24px; }

.wf-alarm-table col.wf-alarm-priority {
  width: 70px; }

.wf-alarm-table col.wf-alarm-event {
  width: auto; }

.wf-alarm-table col.wf-alarm-metadata {
  width: auto; }

.wf-alarm-table col.wf-alarm-ack {
  width: 120px; }

.wf-alarm-table col.wf-alarm-owner {
  width: auto; }

.wf-alarm-table col.wf-alarm-source {
  width: auto; }

.wf-alarm-table col.wf-alarm-start {
  width: 130px; }

.wf-alarm-table col.wf-alarm-end {
  width: 130px; }

.wf-alarm-table col.wf-alarm-status {
  width: 70px; }

.wf-panel-title .wf-alarm-item-prio, .wf-panel-title .wf-alarm-item-status {
  margin-top: 0; }

.wf-panel-title .wf-alarm-item-prio {
  margin-right: 5px; }

.wf-alarm-prio-indicator {
  top: 15px;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  border: 1px solid white; }

.wf-alarm-item-status {
  display: inline-block;
  width: 14px;
  margin-right: 5px;
  font-size: 14px;
  text-align: center;
  color: #eeeeee; }

.wf-alarm-item-status:before {
  margin-top: 1px;
  font-family: 'WFIconFont'; }

.wf-alarm-status-open {
  color: #ff871f;
  -webkit-animation: swing 800ms;
  -moz-animation: swing 800ms;
  -ms-animation: swing 800ms;
  -o-animation: swing 800ms;
  animation: swing 800ms;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite; }

.wf-alarm-status-open:before {
  content: "\e619"; }

.wf-alarm-status-acked {
  color: #3498db; }

.wf-alarm-status-acked:before {
  content: "\e65f"; }

.wf-alarm-status-closed {
  color: #51ae30; }

.wf-alarm-status-closed:before {
  content: "\e69b"; }

.wf-alarm-pulsar {
  background-color: #df292f;
  color: #ffffff;
  -webkit-animation: pulse_warning_danger 0.8s infinite, infinite;
  -moz-animation: pulse_warning_danger 0.8s infinite, infinite;
  -ms-animation: pulse_warning_danger 0.8s infinite, infinite;
  -o-animation: pulse_warning_danger 0.8s infinite, infinite;
  animation: pulse_warning_danger 0.8s infinite, infinite; }

.wf-alarm-priority-badge {
  border: 1px solid white;
  padding: 7px; }

/*--------------------------------------------------
    Arc component styles
--------------------------------------------------*/
.wf-arc-component {
  text-align: center;
  position: relative; }

.wf-arc-content {
  position: absolute;
  width: 100%;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%); }

.wf-arc-value {
  font-weight: bold;
  font-size: 28px; }

.wf-arc-icon {
  font-size: 28px;
  line-height: 28px;
  color: #aaa;
  margin-top: -14px; }

.wf-arc-unit {
  line-height: 16px;
  color: #aaa;
  font-size: 16px;
  font-weight: normal; }

.badge {
  display: inline-block;
  min-width: 10px;
  max-width: fit-content;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: 2px;
  border: 1px solid white;
  background-color: #777777; }

/* Badges */
.btn-default:hover .badge-default,
.btn-default:active .badge-default {
  color: #33434c;
  background-color: #fff; }

/*------------------------------------------------
    || Breadscrumbs
-------------------------------------------------*/
.wf-breadcrumb {
  --background: var(--i4c-lighter-background);
  --border: var(--i4c-button-default-foreground-hover);
  --foreground: #333;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px 1px;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0;
  margin: 0;
  overflow-wrap: anywhere;
  list-style: none;
  line-height: 1; }

.wf-breadcrumb li {
  display: inline-block;
  color: var(--foreground);
  background: var(--background);
  border: 1px solid;
  border-color: var(--border);
  border-radius: 2px; }

/* .wf-breadcrumb > li + li {
    border-left: 0;
} */
.wf-breadcrumb.wf-breadcrumb-xs li {
  padding: 2px 4px;
  font-size: 10px; }

.wf-breadcrumb.wf-breadcrumb-md li {
  padding: 4px 6px;
  font-size: 12px; }

/* Used to show Mqtt Topic */
.mqtt-topic-root {
  padding: 4px;
  margin-bottom: 16px;
  list-style: none;
  background-color: #f5f5f5;
  border-radius: 4px;
  width: fit-content;
  overflow-wrap: anywhere; }

/*--------------------------------------------------
    1. Bootstrap Buttons
--------------------------------------------------*/
.btn {
  position: relative; }

.btn,
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
  outline: none;
  border-radius: var(--i4c-border-radius); }

.btn:active,
.btn.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1), inset 0 2px 4px rgba(0, 0, 0, 0.1);
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.1), inset 0 2px 4px rgba(0, 0, 0, 0.1); }

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  background-color: #565656; }

.dropdown-toggle .filter-option-inner-inner {
  font-size: 14px; }

.bootstrap-select .dropdown-toggle:focus {
  outline: unset; }

/* e.g. collapse control */
tr.bg-highlighted,
.bg-highlighted .btn-default:hover,
.bg-highlighted .btn-default[aria-expanded="true"] {
  background-color: var(--i4c-button-highlighted-background-active) !important;
  color: var(--i4c-button-highlighted-foreground-active) !important; }

.bg-highlighted .btn-default[aria-expanded="true"] {
  -webkit-animation: colorAccentToWhite 1.5s infinite;
  -moz-animation: colorAccentToWhite 1.5s infinite;
  -ms-animation: colorAccentToWhite 1.5s infinite;
  -o-animation: colorAccentToWhite 1.5s infinite;
  animation: colorAccentToWhite 1.5s infinite; }

/*-------------------------------------------
    Buttons content
-------------------------------------------*/
.wf-btn-subtitle {
  display: block;
  word-wrap: break-word;
  color: var(--i4c-button-subtitle-foreground);
  border-radius: var(--i4c-border-radius); }

.wf-btn-path {
  color: var(--i4c-button-foreground);
  background-color: var(--i4c-light-background);
  border-radius: 3px;
  padding: 2px 4px; }

.wf-btn-desc__text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  white-space: break-spaces;
  word-break: break-all; }

.text-l2 {
  -webkit-line-clamp: 2; }

.text-l3 {
  -webkit-line-clamp: 3; }

button .fa {
  font-size: 14px; }

button .wf-icon-right,
.btn .wf-icon-right {
  position: absolute;
  right: 10px;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1000;
  border-radius: var(--i4c-border-radius); }

.delete-lock-icon {
  position: absolute;
  right: 33px;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1000; }

button:hover .wf-btn-title,
.btn:hover .wf-btn-title,
button:hover .wf-btn-title .wf-title,
.btn:hover .wf-btn-title .wf-title {
  color: var(--i4c-button-title-foreground-hover); }

button:hover:focus .wf-btn-title,
.btn:hover:focus .wf-btn-title,
button:hover:focus .wf-btn-title .wf-title,
.btn:hover:focus .wf-btn-title .wf-title {
  color: var(--i4c-button-default-foreground-focus); }

button:hover:disabled .wf-btn-title,
.btn:hover:disabled .wf-btn-title,
button:hover:disabled .wf-btn-title .wf-title,
.btn:hover:disabled .wf-btn-title .wf-title {
  color: #333; }

button:hover .wf-btn-icon,
.btn:hover .wf-btn-icon,
button:hover .wf-icon-hover,
.btn:hover .wf-icon-hover {
  color: var(--i4c-button-icon-color-hover); }

button:hover .wf-btn-icon path,
.btn:hover .wf-btn-icon path {
  fill: var(--i4c-button-icon-color-hover); }

button:hover:focus .wf-btn-icon,
.btn:hover:focus .wf-btn-icon,
button:hover:focus .wf-icon-hover,
.btn:hover:focus .wf-icon-hover {
  color: var(--i4c-button-default-foreground-focus); }

button.active:hover .wf-btn-icon,
.btn.active:hover .wf-btn-icon,
button.active:hover .wf-icon-hover,
.btn.active:hover .wf-icon-hover {
  color: var(--i4c-button-icon-color-active-hover); }

button:hover .wf-btn-path,
.btn:hover .wf-btn-path {
  background-color: var(--i4c-white-background);
  color: var(--i4c-button-subtitle-foreground); }

button:hover:focus .wf-btn-subtitle,
.btn:hover:focus .wf-btn-subtitle {
  color: var(--i4c-button-subtitle-foreground); }

/*-------------------------------------------
    Buttons content
-------------------------------------------*/
.wf-btn-content {
  display: flex;
  align-items: center;
  gap: 0.5em; }

.wf-btn-content .wf-btn-title {
  min-height: 20px; }

.wf-btn-content-main {
  display: flex;
  align-items: flex-start;
  flex-direction: column; }

.wf-btn-content-main ul {
  margin: 0 !important; }

.wf-btn-title {
  overflow-x: hidden;
  word-wrap: break-word;
  overflow: hidden; }

.wf-icon-right,
button .wf-icon-right,
.btn .wf-icon-right {
  position: absolute;
  right: 10px;
  top: 50%;
  z-index: 1000;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%); }

.delete-lock-icon {
  position: absolute;
  right: 33px;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1000; }

.wf-icon-hover,
button .wf-icon-hover,
.btn .wf-icon-hover {
  display: none; }

.has-hover-icon:hover .wf-icon-hover,
button:hover .wf-icon-hover,
.btn:hover .wf-icon-hover {
  display: initial; }

:is(.has-hover-icon[disabled],
button[disabled],
.btn[disabled]):hover .wf-icon-hover {
  display: none; }

button.active .wf-btn-subtitle,
.btn.active .wf-btn-subtitle {
  color: inherit; }

button:hover .wf-btn-subtitle,
.btn:hover .wf-btn-subtitle {
  color: var(--i4c-main-accent-foreground); }

/*----------------------------------------------------------*/
/* Admin UI - Drill-down button list / group                */
/*----------------------------------------------------------*/
.wf-btn-group-flex {
  display: flex;
  width: 100%;
  margin-bottom: 10px; }

.wf-btn-group-flex .btn:first-child {
  flex: 1; }

.wf-btn-group-flex .btn:nth-child(2) {
  max-width: 40px;
  text-align: center;
  flex: 0 0 40px; }

.wf-btn-group-flex .btn.wf-button-group-addon:first-child {
  width: auto; }

.wf-btn-group-flex .btn.wf-button-group-addon + .btn {
  width: auto;
  max-width: inherit;
  flex-grow: 1; }

.wf-btn-group-flex button,
.wf-btn-group-flex .btn,
.wf-btn-group-drilldown button,
.wf-btn-group-drilldown .btn {
  text-align: left;
  white-space: normal;
  font-weight: normal;
  -moz-transition: background-color 0.4s ease-in-out;
  -o-transition: background-color 0.4s ease-in-out;
  -webkit-transition: background-color 0.4s ease-in-out;
  transition: background-color 0.4s ease-in-out; }

.wf-btn-group-drilldown.has-hover-icon {
  padding-right: 20px; }

.wf-select-btn-group .btn-default:focus {
  background: var(--i4c-accent-color);
  color: var(--i4c-button-default-foreground-active); }

.wf-select-btn-group .btn-default:focus:hover {
  background: var(--i4c-accent-color);
  color: var(--i4c-button-default-foreground-active); }

.wf-select-btn-group .btn-default:focus:hover .wf-icon-hover {
  color: var(--i4c-button-default-foreground-active); }

/*--------------------------------------------------
    Decorative components - Divider elements
--------------------------------------------------*/
.wf-horizontal-btn-divider-sm {
  display: inline-block;
  width: 1px;
  height: 30px;
  background: #ffffff;
  border-right: 1px solid #cccccc;
  margin: 0 15px;
  vertical-align: middle; }

.btn-accent {
  color: var(--i4c-button-accent-foreground);
  background-color: var(--i4c-button-accent-background);
  border-color: var(--i4c-button-accent-border-color);
  border-radius: var(--i4c-border-radius);
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s; }

.btn-accent:focus {
  color: var(--i4c-button-accent-foreground-focus);
  background-color: var(--i4c-button-accent-background-focus);
  border-color: var(--i4c-button-accent-border-color-focus); }

.btn-accent:hover,
.btn-accent:active,
.btn-accent.active,
.open > .dropdown-toggle.btn-accent {
  color: var(--i4c-button-accent-foreground-active);
  background-color: var(--i4c-button-accent-background-active);
  background-image: none;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s; }

.btn-accent.disabled,
.btn-accent[disabled],
fieldset[disabled] .btn-accent,
.btn-accent.disabled:hover,
.btn-accent[disabled]:hover,
fieldset[disabled] .btn-accent:hover,
.btn-accent.disabled:focus,
.btn-accent[disabled]:focus,
fieldset[disabled] .btn-accent:focus,
.btn-accent.disabled:active,
.btn-accent[disabled]:active,
fieldset[disabled] .btn-accent:active,
.btn-accent.disabled.active,
.btn-accent[disabled].active,
fieldset[disabled] .btn-accent.active {
  background-color: var(--i4c-button-accent-background-disabled);
  color: var(--i4c-button-accent-foreground-disabled);
  border-color: var(--i4c-button-accent-foreground-disabled); }

.btn .badge {
  position: unset; }

.btn-accent .badge {
  color: var(--i4c-main-inverted-foreground);
  border-radius: var(--i4c-border-radius); }

/* AH - To be reviewed */
/* Temporary styles for SVG based icons*/
.btn-accent path.icon {
  fill: #ffffff; }

.bg-highlighted .btn-accent,
.bg-highlighted .btn-default.btn-accent,
.bg-highlighted .btn-default.btn-circle.btn-accent {
  color: var(--i4c-button-highlighted-accent-foreground);
  background-color: var(--i4c-button-highlighted-accent-background);
  border-radius: var(--i4c-border-radius);
  transition: all 0.4s; }

.bg-highlighted .btn-accent:hover,
.bg-highlighted .btn-default.btn-accent:hover,
.bg-highlighted .btn-default.btn-circle.btn-accent:hover {
  color: var(--i4c-button-highlighted-accent-foreground-active);
  background-color: var(--i4c-button-highlighted-accent-background-active); }

/*--------------------------------------------------
    Extending Bootstrap Buttons Set
 -------------------------------------------------*/
.btn-circle {
  width: 26px;
  height: 26px;
  /* color: var(--i4c-button-circle-foreground);

    background-color: var(--i4c-button-circle-background);
    border-color: var(--i4c-button-circle-border-color); */
  padding: 4px 0;
  border-style: solid;
  border-width: 1px;
  -ms-border-radius: 16px;
  border-radius: 16px;
  line-height: 18px; }

.btn-circle {
  border-radius: 0; }

.btn-circle svg.svg-icon path {
  fill: var(--i4c-button-circle-foreground); }

.btn-default.btn-circle:hover {
  background-color: var(--i4c-button-circle-background-hover);
  color: var(--i4c-button-circle-foreground-hover); }

.btn-default.btn-circle:hover svg.svg-icon path {
  fill: var(--i4c-button-circle-foreground-hover); }

.btn-default.btn-circle[aria-expanded="true"],
.btn-default[aria-expanded="true"] {
  background-color: var(--i4c-button-circle-background-hover);
  color: var(--i4c-button-circle-foreground-hover); }

/* Button in highlighted area for drill-down use cases*/
.bg-highlighted .btn-default.btn-circle {
  background-color: var(--i4c-button-highlighted-background);
  color: var(--i4c-button-highlighted-foreground); }

.btn-circle:hover {
  border-color: transparent; }

.btn-default {
  /* Overwrite: default bottstrap button styles */
  color: var(--i4c-button-foreground);
  background-color: var(--i4c-button-background);
  border-color: var(--i4c-button-border-color); }

.btn-default:active,
.btn-default.active,
.btn-default.active:hover,
.btn-default.active:focus:hover,
.open > .dropdown-toggle.btn-default {
  color: var(--i4c-button-default-foreground-active);
  background-color: var(--i4c-button-default-background-active); }

.btn-default:hover {
  color: var(--i4c-button-default-foreground-hover);
  background-color: var(--i4c-button-default-background-hover); }

.btn-default:hover svg.svg-icon path {
  fill: var(--i4c-button-default-foreground-hover); }

.btn-default:hover .wf-subtitle {
  color: var(--i4c-button-default-foreground-hover); }

.btn-default:hover .wf-breadcrumb {
  background-color: unset;
  border-color: var(--i4c-button-default-foreground-hover); }

.btn-default:focus,
.btn-default.focus,
.btn-default:focus:hover {
  color: var(--i4c-button-default-foreground-focus);
  background-color: var(--i4c-button-default-background-focus); }

.btn-default:focus path,
.btn-default:hover path,
.btn-default.focus path,
.btn-default:focus:hover path {
  fill: var(--i4c-button-default-foreground-focus); }

.btn-default.active,
.btn-default[disabled].active {
  color: var(--i4c-button-default-foreground-active);
  background-color: var(--i4c-button-default-background-active); }

.btn-default.active path,
.btn-default[disabled].active path {
  fill: var(--i4c-button-default-foreground-active); }

.btn-default[disabled].active {
  opacity: .85; }

.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus {
  background-color: var(--i4c-button-default-background-disabled);
  color: var(--i4c-button-default-foreground-disabled); }

.btn.btn-sm.checkbox-array {
  padding-top: 4px;
  padding-bottom: 4px; }

.btn.btn-default.checkbox-array.active.focus,
.btn.btn-default.checkbox-array.active.focus:hover,
.btn.btn-default.checkbox-array.active.focus:active,
.btn.btn-default.checkbox-array.active.focus:focus,
.btn.btn-default.checkbox-array.active.focus:visited,
.btn.btn-default.checkbox-array.focus:hover,
.btn.btn-default.checkbox-array.active:hover {
  color: var(--i4c-button-default-foreground-active);
  background-color: var(--i4c-button-default-background-active); }

.btn.btn-default.checkbox-array.focus,
.btn.btn-default.checkbox-array.focus:focus,
.btn.btn-default.checkbox-array.focus:visited {
  color: var(--i4c-button-foreground);
  background-color: var(--i4c-button-background);
  border-color: var(--i4c-button-border-color); }

.btn.btn-default.checkbox-array:hover {
  border-color: transparent; }

.btn-link-accent {
  color: var(--i4c-button-link-accent-foreground);
  background-color: var(--i4c-button-link-accent-background);
  border-radius: var(--i4c-border-radius); }

.btn-link-accent:hover,
.btn-link-accent:active,
.btn-link-accent:focus,
.btn-link-accent:visited {
  color: var(--i4c-button-link-accent-foreground-active);
  background-color: var(--i4c-button-link-accent-background-active); }

.btn-link-accent.active {
  color: var(--i4c-button-link-accent-foreground-active);
  background-color: var(--i4c-button-link-accent-background-active);
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none; }

.btn-link-accent.active .icon {
  color: var(--i4c-button-link-accent-foreground-active); }

/*--------------------------------------------------
    2. Extending Bootstrap Buttons Overrides
 -------------------------------------------------*/
.btn-success {
  background-color: var(--i4c-button-success-background);
  border-color: var(--i4c-button-success-border-color);
  color: var(--i4c-button-success-foreground);
  border-radius: var(--i4c-border-radius); }

.btn-success:hover,
.btn-success:focus,
.btn-success.focus,
.btn-success:active,
.btn-success.active,
.open > .dropdown-toggle.btn-success {
  background-color: var(--i4c-button-success-background);
  border-color: var(--i4c-button-success-background);
  color: var(--i4c-button-success-foreground); }

.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled.focus,
.btn-success.focus[disabled],
fieldset[disabled] .btn-success.focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success.active[disabled],
fieldset[disabled] .btn-success.active {
  background-color: var(--i4c-button-success-background-disabled);
  border-color: var(--i4c-button-success-border-color-disabled); }

.btn-variant {
  color: var(--i4c-button-foreground);
  background-color: var(--i4c-button-background);
  border-color: var(--i4c-button-variant-border-color);
  border-radius: var(--i4c-border-radius);
  cursor: pointer; }

.btn-variant:hover,
.btn-variant:focus,
.btn-variant:active,
.btn-variant.active,
.open > .dropdown-toggle.btn-variant {
  color: var(--i4c-button-variant-foreground-active);
  background-color: var(--i4c-button-variant-background-active);
  border-color: var(--i4c-button-variant-border-color-active); }

.btn-variant:active,
.btn-variant.active,
.open > .dropdown-toggle.btn-variant {
  background-image: none; }

.btn-variant.disabled,
.btn-variant[disabled],
fieldset[disabled] .btn-variant,
.btn-variant.disabled:hover,
.btn-variant[disabled]:hover,
fieldset[disabled] .btn-variant:hover,
.btn-variant.disabled:focus,
.btn-variant[disabled]:focus,
fieldset[disabled] .btn-variant:focus,
.btn-variant.disabled:active,
.btn-variant[disabled]:active,
fieldset[disabled] .btn-variant:active,
.btn-variant.disabled.active,
.btn-variant[disabled].active,
fieldset[disabled] .btn-variant.active {
  background-color: var(--i4c-button-variant-background-disabled);
  border-color: var(--i4c-button-variant-border-color-disabled); }

/*-----------------------------------
   Calendar 
----------------------------------*/
.wf-calendar-component {
  --cell-foreground: var(--i4c-cal-cell-foreground);
  --cell-background: var(--i4c-cal-cell-background);
  --cell-foreground-hover: var(--i4c-cal-cell-foreground-hover);
  --cell-background-hover: var(--i4c-cal-cell-background-hover);
  --cell-border-color: var(--i4c-cal-cell-border-color);
  --weekend-foreground: var(--i4c-cal-weekend-foreground);
  --week-box-foreground: var(--i4c-cal-week-box-foreground);
  --week-box-background: var(--i4c-cal-week-box-background);
  --week-box-border-color: var(--i4c-cal-week-box-border-color);
  --today-foreground: var(--i4c-cal-today-foreground);
  --today-background: var(--i4c-cal-today-background); }

.wf-calendar-component .cal-month-box {
  background-color: var(--cell-background);
  border-bottom: 2px solid var(--cell-border-color); }

.wf-calendar-component .cal-cell {
  color: var(--cell-foreground); }

.cal-year-box [class*="span"],
.cal-month-box [class*="cal-cell"] {
  position: relative;
  min-height: 100px;
  border-right: 1px solid var(--cell-border-color); }

/* button to open the details of the day */
.wf-calendar-component #cal-day-tick {
  bottom: auto;
  top: 50%;
  right: 50%;
  width: 32px;
  height: 32px;
  background-color: var(--today-foreground);
  padding: 6px 6px 6px 6px;
  margin-top: -16px;
  margin-right: -16px;
  border-radius: 16px;
  border: 1px solid transparent;
  line-height: 18px;
  text-align: center;
  color: var(--today-background);
  transition: all 0.4s; }

.wf-calendar-component #cal-day-tick i {
  top: 3px; }

.wf-calendar-component .event {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #ffffff; }

.wf-calendar-component .cal-event-list {
  --box-shadow: inset 0 8px 8px -8px #eee, inset 0 -8px 8px -8px #dddddd;
  position: relative;
  padding: 10px;
  background: #ffffff;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  -webkit-box-shadow: var(--box-shadow);
  -ms-box-shadow: var(--box-shadow);
  box-shadow: var(--box-shadow); }

.wf-calendar-component .cal-day-weekend span[data-cal-date] {
  color: var(--weekend-foreground); }

.wf-calendar__event-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }

.wf-report-schedule-calendar-view ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 4px; }

selectable-schedule-button .btn,
.wf-calendar-component .cal-event-list .wf-calendar-event {
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap; }

.cal-cell .cal-month-day span {
  font-weight: bold;
  opacity: 1; }

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

.cal-cell:hover span {
  color: var(--cell-foreground-hover); }

/* Left hand Week label */
#cal-week-box {
  text-align: right;
  font-weight: bolder;
  border: 1px solid var(--week-box-background);
  background-color: var(--week-box-border-color);
  color: var(--week-box-foreground); }

/* wrapper to highlight the week row */
.cal-year-box .row-fluid,
.cal-month-box .cal-row-fluid {
  /* border: 1px solid var(--cell-border-color); */
  margin-left: 0px;
  margin-right: 0px; }

.cal-year-box .row-fluid:not(.cal-row-head),
.cal-row-fluid:not(.cal-row-head) {
  border: 1px solid var(--cell-border-color);
  transition: all .3s ease-in-out; }

/* highlight the calendar row */
.cal-year-box .row-fluid:not(.cal-row-head):hover,
.cal-row-fluid:not(.cal-row-head):hover {
  border: 1px solid var(--week-box-border-color); }

.day-highlight,
.day-highlight:hover {
  background-color: rgba(118, 175, 42, 0.1); }

.cal-day-today {
  background-color: var(--today-background);
  color: var(--today-foreground); }

.cal-day-today span[data-cal-date] {
  color: var(--today-foreground); }

.cal-day-today .events-list span {
  color: var(--today-foreground); }

/* 
.events-list span {
    color: var(--cell-foreground-hover);
    height: 21px;
}
*/

/*--------------------------------------------------------
    Callout blocks
    Can be be used for highlighting information blocks
 -------------------------------------------------------*/
/*--------------------------------------------------------------
    Callout Elements
--------------------------------------------------------------*/
.wf-callout-box {
  position: relative;
  padding: 10px;
  background-color: #fefefe;
  border-left: 30px solid #EEEEEE;
  border-radius: 2px; }

.wf-callout-box-icon,
.wf-callout-box:before {
  position: absolute;
  left: -23px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  font-family: WFIconFont;
  font-size: 16px;
  line-height: 16px; }

.wf-callout-box .wf-callout-box-title {
  margin-bottom: 5px;
  margin-top: 0;
  color: #555; }

.wf-callout-box-primary,
.wf-callout-box-progress {
  border-left-color: #1160b8 !important; }

.wf-callout-box-primary .wf-callout-box-title,
.wf-callout-box-progress .wf-callout-box-title {
  color: #1160b8 !important; }

.wf-callout-box-primary:before,
.wf-callout-box-progress:before {
  color: #ffffff; }

.wf-callout-box-success {
  border-left-color: #0c9900 !important; }

.wf-callout-box-success .wf-callout-box-title {
  color: #0c9900 !important; }

.wf-callout-box-success:before {
  color: #ffffff; }

.wf-callout-box-danger,
.wf-callout-box-validation-error {
  border-left-color: #CF252C !important; }

.wf-callout-box-danger .wf-callout-box-title,
.wf-callout-box-validation-error .wf-callout-box-title {
  color: #CF252C !important; }

.wf-callout-box-danger:before,
.wf-callout-box-validation-error:before {
  color: #ffffff; }

.wf-callout-box-warning {
  border-left-color: #e08f00 !important; }

.wf-callout-box-warning .wf-callout-box-title {
  color: #e08f00 !important; }

.wf-callout-box-info {
  border-left-color: #5bc0de; }

.wf-callout-box-info .wf-callout-box-title {
  color: #5bc0de; }

.wf-callout-box-info:before {
  color: #fff; }

/*--------------------------------------------------------------
    Callout Icons
--------------------------------------------------------------*/
.wf-callout-box-info:before {
  content: "\e67f"; }

.wf-callout-box-success:before {
  content: "\e638"; }

.wf-callout-box-danger:before {
  content: "\e72a"; }

.wf-callout-box-warning:before {
  color: #ffffff;
  content: "\e608"; }

.wf-callout-box-progress:before {
  content: "\e642";
  animation: fa-spin 2s infinite linear;
  transform-origin: 50% 50%; }

.wf-callout-box-validation-error:before {
  content: "\e72a"; }

check-toggle {
  position: relative;
  display: flex;
  flex-direction: column; }

check-toggle .component-label {
  display: inline;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap; }

collapsible-panel {
  display: block; }

/*-----------------------------------------------------
    3. Collapsible areas / blocks
-----------------------------------------------------*/
.wf-collapse-settings {
  --box-shadow: inset 0 8px 8px -8px #eee, inset 0 -8px 8px -8px #dddddd;
  --background-color: #ffffff;
  --border-color: #CCCCCC;
  position: relative;
  padding: 15px 0;
  background: var(--background-color);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  -webkit-box-shadow: var(--box-shadow);
  -ms-box-shadow: var(--box-shadow);
  box-shadow: var(--box-shadow); }

.wf-accordion-wrapper {
  padding: 0px;
  margin-top: 5px; }

.wf-accordion-wrapper:empty {
  display: none; }

.wf-accordion-wrapper .panel {
  background-color: transparent;
  border: none;
  box-shadow: none;
  margin-bottom: 0; }

.wf-confirm-settings-btn {
  border-radius: 0;
  padding: 0 5px; }

.wf-confirm-settings-btn::after {
  content: '';
  clear: both;
  display: table; }

.wf-confirm-settings-btn button {
  float: right;
  margin: 0 5px; }

/*-----------------------------------
   Colorpicker
-----------------------------------*/
.wf-colorpicker .colorpicker-saturation {
  width: 250px;
  height: 250px; }

.wf-colorpicker .colorpicker-hue,
.wf-colorpicker .colorpicker-alpha {
  width: 30px;
  height: 250px; }

.wf-colorpicker .colorpicker-color,
.wf-colorpicker .colorpicker-color div {
  height: 30px; }

.wf-colorpicker {
  right: 0;
  left: auto;
  top: 100%;
  margin-right: 6px; }

/*-----------------------------------
    Base Load Consumtion Blocks [AH: Styles should be reviewed!!!]
-----------------------------------*/
.wf-organizational-unit-list {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding: 10px 15px; }

.wf-consumption-type {
  padding-top: 5px;
  padding-right: 10px; }

.wf-consumption-type-icon {
  display: inline-block;
  vertical-align: middle;
  padding-right: 5px;
  font-size: var(--i4c-consumption-type-icon-font-size);
  color: var(--i4c-consumption-type-icon-color);
  line-height: var(--i4c-consumption-type-icon-font-size); }

.wf-consumption-type-icon > i {
  font-style: normal; }

.wf-consumption-type-name {
  display: inline-block;
  vertical-align: middle;
  font-size: var(--i4c-consumption-type-name-font-size);
  color: var(--i4c-consumption-type-name-color);
  line-height: var(--i4c-consumption-type-name-font-size); }

.wf-consumption-indicator {
  display: inline-block;
  vertical-align: middle;
  line-height: 20px;
  margin-top: -5px; }

.wf-consumption-value,
.wf-measures-value {
  display: block;
  line-height: 46px;
  font-size: var(--i4c-consumption-type-value-font-size);
  font-weight: normal; }

.wf-consumption-delta,
.wf-consumption-goal {
  display: inline-block;
  vertical-align: middle;
  font-family: inherit;
  font-size: 90%;
  line-height: 20px;
  padding: 2px 5px 0 5px; }

.wf-consumption-goal-value {
  font-weight: bold;
  font-size: 100%; }

.wf-consumption-delta > i {
  display: inline-block;
  vertical-align: middle;
  font-size: 10px;
  line-height: 10px; }

.wf-consumption-unit {
  margin-top: 10px;
  color: var(--i4c-consumption-type-unit-color); }

/*-----------------------------------------------------
    2. Content areas / blocks layout structure
-----------------------------------------------------*/
.wf-content-block {
  display: inline-block;
  width: 100%;
  margin: 5px;
  background: #fff;
  cursor: pointer; }

.wf-content-block-head,
.wf-content-block p {
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 7px;
  padding-bottom: 7px; }

control-bar {
  display: block; }


date-range-picker-predefined-dates {
  display: flex;
  align-items: center; }

date-range-picker-rolling-window {
  display: flex;
  flex-direction: column;
  gap: 4px 8px; }

date-range-picker-rolling-window .flexbox > .wf-predefined-dates {
  flex-grow: 1;
  /* margin-bottom: 5px;
    margin-top: 5px; */ }

date-range-picker,
date-range-picker.horizontal {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px; }

date-range-picker.vertical {
  display: flex;
  flex-direction: column; }

date-range-picker .wf-range-picker-separator {
  /* padding-left: 5px;
    padding-right: 15px; */ }

date-range-picker .wf-range-picker-separator:empty {
  display: none; }

date-range-picker .wf-range-picker-controls {
  padding: 10px 0; }

date-range-picker .wf-range-picker-controls .btn-label {
  display: none; }

/*--------------------------------------------------
    DateTime and Range picker components 
--------------------------------------------------*/
.wf-range-picker-controls {
  padding: 10px 0; }

.wf-range-picker-controls .btn-label {
  display: none; }

.wf-range-picker > .form-group > * {
  padding-left: 20px; }

.wf-range-picker .btn-group,
.wf-range-picker .form-group {
  padding-right: 10px; }

/* .wf-range-picker-preselection-btn {
    margin-right: 20px;
} */
.wf-range-picker-preselection-btn:empty {
  display: none; }

.wf-date-picker.m-b-0 .form-group {
  margin-bottom: 0; }

.wf-date-picker-btn {
  background: #ffffff; }

.wf-chart-date-range {
  line-height: 32px;
  display: inline-block;
  font-size: 12px;
  color: #808588; }

.wf-time-interval-picker {
  margin: 15px 0; }

/* Overrides of active date marker because of possible wrong positioning issue in some browsers*/
.bootstrap-datetimepicker-widget table td.today:before {
  border: none; }

.bootstrap-datetimepicker-widget.dropdown-menu {
  position: absolute;
  right: 0 !important;
  z-index: 9999999999;
  width: inherit;
  max-width: 256px;
  border: 1px solid var(--i4c-panel-border-color); }

drill-down-item {
  display: grid;
  gap: 8px;
  border-bottom: 1px solid #ccc;
  margin-right: -15px;
  margin-left: -15px;
  padding: 10px 15px; }

drill-down-item .block-head__title {
  display: inline-block;
  color: #333333;
  font-weight: normal;
  line-height: 1.1;
  font-size: 18px;
  margin-top: 5px; }

drill-down-item .block-body {
  display: grid;
  gap: 16px 8px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

/*-----------------------------------
    Drill-Down media elements
-----------------------------------*/
.wf-ou-video,
.wf-site-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  margin: 0 auto;
  background: transparent;
  /*z-index: 100;*/
  -moz-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  -o-transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%); }

/*-----------------------------------
    Drill Down KPI Blocks
-----------------------------------*/
.wf-content-block-kpi {
  position: relative;
  float: left;
  min-width: 50%;
  max-width: 100%;
  height: 105px;
  padding: 0 10px;
  border-left: 3px solid var(--i4c-kpi-clickable-border-left); }

.has-time-intervals .wf-content-block-kpi {
  height: 135px; }

.wf-kpi-clickable {
  color: var(--i4c-kpi-clickable-foreground);
  background: var(--i4c-kpi-clickable-background);
  box-shadow: 0 1px 3px transparent, 0 1px 2px transparent;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  cursor: pointer; }

.wf-kpi-clickable:before {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  height: 16px;
  width: 16px;
  -ms-opacity: 0;
  opacity: 0;
  background-color: transparent;
  transition: all 0.4s; }

.wf-kpi-clickable:hover:before {
  -ms-opacity: 1;
  opacity: 1; }

.wf-kpi-clickable-link:before {
  font-family: 'FontAwesome';
  font-size: 14px;
  content: '\f061';
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg); }

.wf-kpi-clickable:hover {
  color: var(--i4c-kpi-clickable-foreground-hover);
  background-color: var(--i4c-kpi-clickable-background-hover);
  border-left-color: var(--i4c-kpi-clickable-border-left-hover);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }

.wf-kpi-clickable:before {
  color: var(--i4c-kpi-clickable-border-left); }

.wf-kpi-clickable:hover:before {
  color: var(--i4c-kpi-clickable-border-left-hover); }

/*--------------------------------------------------
    Bootstrap Dropdown size extensions
 -------------------------------------------------*/
.wf-dropdown-menu-xs {
  width: 105px; }

.wf-dropdown-menu-sm {
  width: 155px; }

.wf-dropdown-menu-md {
  width: 255px; }

.wf-dropdown-menu-lg {
  width: 355px; }

.wf-dropdown-menu-xlg {
  width: 555px; }

/*--------------------------------------------------
    Effective permissions Component
--------------------------------------------------*/
.wf-effective-permission-item {
  display: flex;
  align-items: center;
  padding: 2px 4px; }

.wf-effective-permission-scrollbar {
  overflow-y: auto;
  max-height: 50vh;
  padding-right: 10px; }

.permission-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
  gap: 4px;
  cursor: pointer; }

.permission-summary-label {
  width: 100%;
  padding: 2px 0 2px 4px;
  border-radius: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.permission-summary-label:hover i {
  color: var(--i4c-button-default-foreground-hover) !important; }

.wf-effective-permission-item[open] .permission-summary-label {
  margin-bottom: 2px;
  border-radius: 3px;
  color: var(--i4c-button-default-foreground-hover) !important;
  background-color: var(--i4c-button-default-background-hover); }

.permission-info-text {
  padding: 12px;
  margin: 0;
  border: 1px solid var(--i4c-panel-border-color);
  box-shadow: inset 0 0px 8px -2px rgba(0, 0, 0, 0.125); }

/* Permission indicator */
.effective-permission-indicator {
  white-space: nowrap; }

.effective-permission-indicator.deny {
  color: var(--i4c-danger-color-action); }

.effective-permission-indicator.allow {
  color: var(--i4c-success-color-action); }

.effective-permission-indicator i {
  display: inline-flex;
  align-items: center;
  justify-content: center; }

.effective-permission-indicator.allow i {
  margin-right: -2px; }

entity-user-list {
  display: block;
  margin: 0;
  padding: 0;
  list-style-type: none; }

entity-user-list:empty {
  display: none; }

entity-user-list .list-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor; }

entity-user-list .user-info {
  flex: 1; }

entity-user-list .person-name {
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  margin: 0; }

entity-user-list .person-name__fullName {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  white-space: break-spaces;
  word-break: break-all;
  font-size: var(--body-font-size); }

entity-user-list .person-name__fullName:empty {
  display: none; }

entity-user-list .user-info__username {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  white-space: break-spaces;
  word-break: break-all;
  margin: 0; }

entity-user-list .user-info__username:empty {
  display: none; }

entity-user-list .user-roles-list {
  display: flex;
  flex-direction: column; }

entity-user-list .user-role-list__title {
  display: flex;
  align-items: first baseline;
  gap: 4px;
  font-weight: 700;
  padding-top: 4px;
  margin: 0; }

entity-user-list .user-role-list__counter {
  font-size: .9em;
  line-height: 1.4em;
  font-weight: 400;
  color: var(--text-color-secondary); }

entity-user-list .user-role-list__item {
  font-size: .9em;
  line-height: 1.4em;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  white-space: break-spaces;
  word-break: break-all; }

filter-button {
  --border-radius: 4px;
  display: block; }

filter-button .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--border-radius);
  padding: 0px;
  color: var(--i4c-panel-toolbar-icon); }

filter-button .icon:only-child {
  padding: 4px; }

filter-input {
  position: relative;
  display: block;
  width: 100%; }

filter-input .component-label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700; }

filter-input .component-label-text {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700; }

filter-input .filter-input-container {
  display: flex; }

filter-input .filter-input-field {
  position: relative;
  display: block;
  width: 100%;
  height: 32px;
  padding: 6px 12px;
  padding-left: 36px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: var(--i4c-border-radius);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; }

filter-input .filter-input-field:focus {
  border-color: #66afe9;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }

filter-input .input-group-btn {
  width: 36px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0; }

filter-input .hint-text {
  margin-bottom: 0;
  min-height: initial;
  padding: 0; }

filter-input .filter-input-container::after {
  position: absolute;
  top: 37px;
  left: 12px;
  z-index: 1;
  font-family: 'WFIconFont';
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size: 14px;
  line-height: 14px;
  color: #bbb;
  content: "\e6b5"; }

/*--------------------------------------------------
    Load profile filter styles
--------------------------------------------------*/
.wf-filter-body {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background: var(--i4c-load-profile-filter-background);
  overflow: hidden; }

.wf-filter-search-forms {
  position: absolute;
  top: 0;
  height: 140px;
  width: 100%;
  padding: 10px;
  background: var(--i4c-load-profile-filter-search-background); }

.wf-filter-search:before {
  position: absolute;
  left: 5px;
  padding-right: 0.5em;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 34px;
  text-decoration: inherit;
  content: "\f040";
  color: #9d9da5; }

.wf-filter-search-input {
  padding-left: 20px; }

.wf-filter-search-result {
  position: absolute;
  top: 140px;
  bottom: 100px;
  width: 100%;
  padding: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee; }

.wf-site-filter .wf-filter-search-result {
  top: 115px;
  bottom: 0; }

.wf-site-filter .wf-filter-search-forms {
  height: 115px; }

.wf-search-result-item {
  padding-left: 20px; }

.wf-search-result-item:before {
  position: absolute;
  left: 5px;
  top: 12px;
  font-family: FontAwesome;
  color: #cccccc;
  content: "\f067"; }

.wf-search-result-item.wf-selectable-result-item:before {
  color: #cfd7d9;
  content: "\f00c"; }

.i4c-src-description {
  margin: 0 5px;
  opacity: 0.75; }

.wf-search-result-item-name {
  font-weight: bold;
  margin-left: 5px;
  margin-top: 5px; }

.wf-search-result-item-details {
  margin-left: 5px;
  margin-top: 5px; }

.wf-search-selected-list {
  margin: 10px; }

/* wf-search-result-item */
.wf-search-result-item.selected:before {
  color: var(--i4c-accent-color);
  content: "\f00c"; }

.wf-search-result-item.unselected:before {
  content: "\f00d"; }

.wf-search-result-item:hover:before {
  color: #00b1ea;
  /* TODO AH - review style */ }

.wf-search-result-item:not(.disabled):hover:before {
  color: var(--i4c-accent-color); }

.wf-search-result-item:hover {
  color: var(--i4c-accent-color);
  cursor: pointer; }

.wf-search-result-item.disabled:before,
.wf-search-result-item.disabled:hover:before {
  color: #cfd7d9; }

/* Selected Items list */
.wf-search-selected-item-wrapper {
  display: flex;
  gap: 4px;
  flex-flow: wrap;
  max-height: 148px;
  overflow: hidden auto; }

.wf-search-selected-item {
  padding-right: 30px;
  /* background: #363636; */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer !important; }

.wf-search-selected-item strong {
  font-weight: normal !important; }

.list-group.list-group-condensed .list-group-item.wf-search-selected-item {
  padding-top: 0px;
  padding-bottom: 0px;
  line-height: 30px; }

.wf-search-selected-item:before {
  position: absolute;
  right: 5px;
  top: 50%;
  width: 18px;
  font-family: FontAwesome;
  color: inherit;
  content: "\f00d";
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: 0.2s; }

/* panel-parameters .kpi-container, 
.panel-parameter-component .kpi-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--gap-small);
	padding: 4px;
	background: var(--i4c-light-background);
	border: 1px solid var(--i4c-light-border-color);
	border-radius: var(--i4c-border-radius);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
} */
.wf-filter-selected-block {
  position: absolute;
  bottom: 60px;
  width: 100%;
  background: #fafafa;
  padding: 0 10px;
  overflow-y: auto;
  overflow-x: hidden; }

.wf-filter-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background: var(--i4c-load-profile-filter-footer);
  padding: 10px;
  overflow-y: auto;
  overflow-x: hidden; }

.i4c-meta-collapsible {
  overflow: hidden;
  margin-bottom: 10px;
  margin-top: 5px;
  padding: 5px 15px;
  background-color: #f2f2f2;
  border-radius: 4px;
  transition: 0.2s; }

.i4c-meta-collapsible div {
  max-height: 300px; }

.i4c-meta-toolbar {
  position: absolute;
  right: 15px;
  top: -64px;
  z-index: 1; }

.i4c-meta-toolbar button,
.i4c-meta-toolbar button:focus,
.i4c-meta-toolbar button:active:focus {
  width: 32px;
  height: 32px;
  padding: initial;
  font-size: 16px;
  line-height: 0;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.25);
  border-radius: 50% !important;
  border: 1px solid #e3e4e4; }

.i4c-meta-toolbar button {
  position: relative; }

/* ---
    Custom components
---*/
if:empty {
  display: none; }

ifnot:empty {
  display: none; }

/*------------------------------------------------
    Report   
-------------------------------------------------*/
/* Containers */
.wf-image-container {
  background-position: center center;
  background-size: 80%;
  background-repeat: no-repeat; }

.wf-report-image-container {
  height: 236px;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #fff;
  /* To avoid scalled image to be pixelated in IE*/
  -ms-interpolation-mode: bicubic; }

input[type="checkbox"].i4c-checkbox {
  margin: 0 !important;
  position: relative; }

input[type="checkbox"].i4c-checkbox:checked:after {
  position: absolute;
  top: 0;
  left: 0;
  background: white;
  border: 1px solid #363636;
  font-family: FontAwesome;
  content: '\f00c';
  font-size: 12px; }

input[type="checkbox"].i4c-checkbox:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  background: white;
  border: 1px solid #363636;
  font-family: FontAwesome;
  content: ''; }

input[type="checkbox"].i4c-checkbox:indeterminate:after {
  display: flex;
  justify-content: center;
  align-items: center;
  content: "\f0c8";
  font-size: 9px; }

.checkbox-array input[type="checkbox"]:checked ~ i:first-of-type:before {
  content: "\f14a"; }

input-color {
  position: relative;
  display: block; }

input-color .component-input {
  text-transform: uppercase;
  letter-spacing: 0.025em; }

input-color .input-group-addon {
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #555555;
  text-align: center;
  background-color: #eeeeee;
  border: 1px solid #ccc;
  border-radius: var(--i4c-border-radius); }

input-color .colorpicker-element .input-group-addon i,
input-color .colorpicker-element .add-on i {
  display: inline-block;
  cursor: pointer;
  height: 16px;
  vertical-align: text-top;
  width: 16px; }

/*-----------------------------------------------------
    Input Components Styles
    Input with background icon
-----------------------------------------------------*/
input.has-icon,
.input.has-icon {
  padding-left: 35px; }

.wf-search-input,
.wf-edit-input {
  position: relative; }

.wf-search-input-sm:after,
.wf-edit-input-sm:after,
.wf-search-input:after,
.wf-edit-input:after {
  position: absolute;
  left: 10px;
  top: 8px;
  z-index: 5;
  font-family: 'WFIconFont';
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size: 14px;
  line-height: 14px;
  color: #bbb;
  content: "\e6b5"; }

.wf-search-input-sm:after,
.wf-edit-input-sm:after {
  font-size: 12px;
  line-height: inherit;
  left: 13px; }

.wf-search-input-sm:after {
  content: "\e6b5"; }

.wf-edit-input:after {
  content: "\e657"; }

.input-required:after {
  content: '*';
  color: #0E79B6; }

.form-inline {
  display: inline;
  align-items: center; }

.btn-group > .input-group-addon {
  float: left;
  width: auto;
  height: 30px;
  font-size: 13px;
  font-weight: normal; }

.input-group-addon.addon-unit {
  border-left: none;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px; }

.input-group-addon.addon-label {
  /* border-left: none; */
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px; }

/*----------------------------*/
/* Input Components Styles    */
/* Input with background icon */
/*----------------------------*/
.wf-input-container {
  position: relative; }

.input-required:after {
  content: '*';
  color: #00b1eb; }

/*--------------------------------------------------------------
    Inputs
--------------------------------------------------------------*/
/* IE10+ remove clear input button*/
::-ms-clear {
  display: none; }

/* Chrome remove clear input button*/
::-webkit-search-decoration,
::-webkit-search-cancel-button,
::-webkit-search-results-button,
::-webkit-search-results-decoration {
  display: none; }

input-field {
  --foreground-color: var(--i4c-body-text-color);
  --foreground-color-muted: #999999;
  --background-color: #ffffff;
  --background-color-addon: #eeeeee;
  --border-color: #cccccc;
  --background-color-disabled: #eeeeee;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px; }

input-field .component-label {
  display: inline;
  margin: 0;
  max-width: 100%;
  font-weight: 700;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap; }

input-field .form-control {
  --border-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: var(--foreground-color);
  background-color: var(--background-color);
  background-image: none;
  border: 1px solid var(--border-color);
  border-radius: var(--i4c-border-radius);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: var(--border-transition);
  -o-transition: var(--border-transition);
  transition: var(--border-transition); }

input-field .form-control::placeholder {
  color: var(--foreground-color-muted);
  opacity: 1; }

input-field .form-control[disabled],
input-field .form-control[readonly] {
  background-color: var(--background-color-disabled);
  border-color: var(--border-color);
  opacity: 1;
  cursor: not-allowed; }

/* TO DO define actual input group size scaling */
input-field .input-group {
  position: relative;
  display: flex; }

input-field .input-group-sm > .form-control,
input-field .input-group-sm > .input-group-addon,
input-field .input-group-sm > .input-group-btn > .btn {
  height: 30px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: var(--i4c-border-radius); }

input-field .input-group-addon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: inherit;
  padding: 6px 12px;
  background-color: var(--background-color);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: var(--foreground-color);
  text-align: center;
  border: 1px solid var(--border-color);
  border-radius: 0; }

input-field .input-group-addon:last-child,
input-field .input-group-addon:last-child:focus {
  /* reset to overwrite default .btn styles */
  border-radius: unset;
  border-top-right-radius: var(--i4c-border-radius);
  border-bottom-right-radius: var(--i4c-border-radius);
  border-color: var(--border-color); }

input-field .input-group-addon.addon-unit {
  border-left: none;
  background-color: var(--background-color-addon); }

input-field .form-control-validation {
  --label-font-size-offset: 14px;
  position: absolute;
  right: 0px;
  top: var(--label-font-size-offset);
  z-index: 3;
  line-height: 14px;
  border-radius: 50%;
  padding: 1px 2px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%); }

input-file {
  position: relative;
  display: block;
  width: 100%; }

input-file .component-label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700; }

input-file .file-preview-frame,
.file-preview-frame {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 220px;
  width: 100%;
  margin-bottom: 5px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: var(--i4c-border-radius);
  overflow: hidden;
  text-align: center; }

input-file .file-preview-frame {
  background-color: #ffffff;
  background-image: repeating-linear-gradient(45deg, #f2f2f2 25%, transparent 25%, transparent 75%, #f2f2f2 75%, #f2f2f2), repeating-linear-gradient(45deg, #f2f2f2 25%, #ffffff 25%, #ffffff 75%, #f2f2f2 75%, #f2f2f2);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px; }

.file-preview-frame object,
.file-preview-frame video,
.file-preview-frame audio,
input-file .file-preview-frame object,
input-file .file-preview-frame video,
input-file .file-preview-frame audio {
  min-height: 220px;
  max-height: 220px;
  margin: 15px; }

.file-preview-image {
  max-height: 220px;
  height: 220px;
  max-width: 100%;
  object-fit: contain;
  object-position: center center;
  padding: 4px; }

input-file .file-notification-box {
  max-width: max-content;
  padding: 4px 8px;
  background: var(--i4c-panel-body-background, #FFF);
  border: 1px solid var(--i4c-light-background, #DDD);
  border-radius: inherit; }

.file-preview-name,
input-file .file-preview-name {
  width: 100%;
  padding: 4px 8px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff; }

input-file .file-action-bar {
  display: flex;
  justify-content: flex-end;
  gap: 4px; }

input-file .btn-file {
  position: relative;
  overflow: hidden; }

input-file .btn-file input[type="file"],
input-file .btn-file input::file-selector-button {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  min-width: 100%;
  min-height: 100%;
  background: white;
  text-align: right;
  outline: none;
  cursor: inherit;
  filter: alpha(opacity=0);
  opacity: 0; }

/* Radio button input styles */
/* Container for the radio buttons */
.radio-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: var(--spacing-010, 8px) var(--spacing-015, 12px);
  border-radius: var(--radius-sm, 3px); }

/* Style for the radio button itself (hidden) */
.radio-button {
  appearance: none;
  /* display: none; */ }

/* Style for the label */
.radio-label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  height: 22px;
  padding: var(--spacing-010, 8px) var(--spacing-015, 12px);
  border: 1px solid var(--i4c-tile-border-color);
  border-radius: var(--radius-sm, 3px);
  /* border-color: #adadad; */
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s; }

/* Style when the radio button is checked */
.radio-button:checked + .radio-label {
  background-color: var(--i4c-button-default-background-active);
  border-color: var(--i4c-button-highlighted-accent-border-color);
  color: var(--i4c-button-background); }

.radio-button:checked + .radio-label:hover {
  background-color: var(--i4c-button-border-color); }

/* Optional: Style for hover effect */
.radio-label:hover {
  background-color: var(--i4c-button-default-background-active); }

/*-----------------------------------
    Base Load Consumtion Blocks [AH: Styles should be reviewed!!!]
-----------------------------------*/
kpi-selector {
  display: block; }

kpi-selector:empty {
  display: none; }

kpi-selector .selector-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 1ch; }

kpi-selector .selector-group .selector-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5ch; }

kpi-selector .selector-group .selector-item .selector-name {
  max-width: 18ch;
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden; }

/*-----------------------------------
    Base Load Consumtion Blocks [AH: Styles should be reviewed!!!]
-----------------------------------*/
kpi-single-selector {
  display: block; }

kpi-single-selector:empty {
  display: none; }

kpi-single-selector .selector-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 1ch; }

kpi-single-selector .selector-group .selector-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5ch; }

kpi-single-selector .selector-group .selector-item .selector-name {
  max-width: 18ch;
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden; }

/*----------------------------------*/
/* Label groups components          */
/*----------------------------------*/
.label-group > .label:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: 0; }

.label-group > .label:nth-child(2) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: 0; }

.wf-labels-group span {
  display: block;
  float: left;
  width: 20px; }

.wf-labels-group {
  position: relative;
  display: inline-block;
  vertical-align: middle; }

.wf-labels-group span + span {
  margin-left: -1px; }

.wf-label-xs {
  text-align: center;
  font-size: 9px;
  line-height: 12px;
  border: 1px solid #DCE4E5; }

/*--------------------------------------------------------------
    Labels
--------------------------------------------------------------*/
.label-default {
  background-color: #777; }

.label-primary {
  background-color: #1160b8; }

.label-success {
  background-color: #0c9900; }

.label-info {
  background-color: #5bc0de; }

.label-warning {
  background-color: #e08f00; }

.label-danger {
  background-color: #CF252C; }

label.disabled {
  pointer-events: none; }

/*-----------------------------------
    Loading Indicators
-----------------------------------*/
.wf-loading-indicator-element {
  --border-color-active: var(--i4c-accent-color);
  position: relative;
  width: 3em;
  height: 3em;
  text-indent: -9999em;
  border: 2px solid transparent;
  border-left: 2px solid var(--border-color-active);
  -ms-border-radius: 50%;
  border-radius: 50%;
  -moz-animation: spinner_animation 1s infinite linear;
  -o-animation: spinner_animation 1s infinite linear;
  -webkit-animation: spinner_animation 1s infinite linear;
  animation: spinner_animation 1s infinite linear; }

.wf-loading-indicator-1x,
.wf-loading-indicator-1x > .wf-loading-indicator-element {
  width: 1em;
  height: 1em; }

.wf-loading-indicator-2x,
.wf-loading-indicator-2x > .wf-loading-indicator-element {
  width: 2em;
  height: 2em; }

.wf-loading-indicator-3x,
.wf-loading-indicator-3x > .wf-loading-indicator-element {
  width: 3em;
  height: 3em; }

.wf-loading-indicator-4x,
.wf-loading-indicator-4x > .wf-loading-indicator-element {
  width: 4em;
  height: 4em; }

.wf-loading-indicator-5x,
.wf-loading-indicator-5x > .wf-loading-indicator-element {
  width: 5em;
  height: 5em; }

.wf-loading-indicator-5x .wf-loading-indicator-icon {
  --color-active: var(--i4c-accent-color);
  position: absolute;
  left: 50%;
  transform: translateY(-50%);
  margin-top: 50%;
  margin-left: -10px;
  font-size: 24px;
  color: var(--color-active); }

/*-----------------------------------
   Printing Indicators
-----------------------------------*/
.wf-print-busy-indicator {
  background: rgba(255, 255, 255, 0.85);
  z-index: 1000;
  text-align: center; }

.wf-print-busy-indicator-content {
  position: absolute;
  top: 50%;
  width: 90%;
  min-height: 65px;
  margin-left: 5%;
  margin-right: 5%;
  line-height: 35px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%); }

.wf-busy-indicator-container {
  background: rgba(0, 0, 0, 0.11);
  position: fixed;
  bottom: 45px;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%; }

.wf-busy-background {
  background: rgba(0, 0, 0, 0.3); }

.wf-print-forbidden-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: #ffffff80;
  cursor: not-allowed; }

.wf-print-forbidden-content .alert {
  position: absolute;
  top: 50%;
  left: 20px;
  right: 20px; }

.wf-busy-indicator-element {
  --border-color-active: var(--i4c-accent-color);
  position: absolute;
  top: 50%;
  left: 50%;
  right: 50%;
  bottom: 50%;
  width: 3em;
  height: 3em;
  border-top: 2px solid white;
  border-right: 0px solid rgba(0, 0, 0, 0.1);
  border-bottom: 0px solid rgba(0, 0, 0, 0.1);
  border-left: 2px solid var(--border-color-active); }

.wf-panel-body-loading-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 30px auto; }

.wf-content-block-measures {
  position: relative;
  float: left;
  width: 100%;
  padding: 0 10px;
  margin-bottom: 15px;
  border-left: 3px solid #cccccc; }

measure-aggregation-button {
  --foreground: var(--i4c-list-group-item-foreground);
  --foreground-hover: var(--i4c-list-group-item-foreground-hover);
  --foreground-active: var(--i4c-list-group-item-foreground-active);
  --foreground-selected-hover: var(--i4c-list-group-item-foreground-active);
  --background: var(--i4c-list-group-item-background);
  --background-hover: var(--i4c-list-group-item-background-hover);
  --background-active: var(--i4c-list-group-item-background-active);
  --background-selected-hover: var(--i4c-list-group-item-background-selected-hover);
  --foreground-disabled: var();
  --background-disabled: #eeeeee;
  --border: #DDD;
  --border-hover: #DDD;
  --border-active: #DDD;
  --border-selected-hover: #DDD;
  position: relative;
  display: block;
  color: var(--foreground);
  border: 1px solid var(--border);
  transition: background-color 0.4s ease-in-out; }

measure-aggregation-button:hover {
  color: var(--foreground-hover);
  background-color: var(--background-hover);
  border-color: var(--border-hover); }

measure-aggregation-button:hover .button-text__description,
measure-aggregation-button.active .button-text__description {
  color: currentColor; }

measure-aggregation-button:first-child {
  border-top-left-radius: var(--i4c-border-radius);
  border-top-right-radius: var(--i4c-border-radius); }

measure-aggregation-button:last-child {
  border-bottom-left-radius: var(--i4c-border-radius);
  border-bottom-right-radius: var(--i4c-border-radius); }

measure-aggregation-button .component-body {
  padding: 10px 15px; }

measure-aggregation-button .component-content {
  display: flex;
  flex-direction: row;
  gap: 15px;
  align-items: center; }

measure-aggregation-button .component-content__icon {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 48px; }

measure-aggregation-button .button-text {
  display: grid;
  grid-template-areas: 'text kpi-goal'
 'measure-group kpi-goal'
 'description kpi-goal';
  grid-template-columns: 1fr min-content;
  align-items: center;
  gap: 2px 8px;
  width: 100%;
  overflow: hidden;
  word-break: break-word; }

measure-aggregation-button .button-text__kpi-goal {
  grid-area: kpi-goal;
  display: flex;
  flex-direction: column;
  gap: 4px; }

measure-aggregation-button .button-text__measure-group {
  grid-area: measure-group;
  margin: 0; }

measure-aggregation-button .button-text__title {
  grid-area: text;
  font-weight: bold;
  margin: 0; }

measure-aggregation-button .button-text__unit {
  font-weight: normal;
  margin: 0; }

measure-aggregation-button .kpi-goal-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px; }

measure-aggregation-button .button-text__description {
  grid-area: description;
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--i4c-text-muted-foreground);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  white-space: break-spaces;
  word-break: break-all; }

measure-aggregation-button .has-selected-icon.selectable {
  padding-left: 43px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal; }

measure-aggregation-button .has-selected-icon.selectable:before,
measure-aggregation-button .has-selected-icon.selectable.selected:before {
  position: absolute;
  top: 50%;
  left: 18px;
  font-family: FontAwesome;
  color: #cfd7d9;
  transform: translateY(-50%); }

measure-aggregation-button .has-selected-icon.selectable.selected:before {
  content: "\f00c"; }

/* button DISABLED state */
measure-aggregation-button:has(.disabled) {
  background-color: var(--background-disabled);
  color: var(--foreground);
  cursor: not-allowed; }

measure-aggregation-button:has(.disabled):hover,
measure-aggregation-button .disabled:hover {
  cursor: not-allowed; }

/* button SELECTED / ACTIVE state */
measure-aggregation-button:has(.selectable.selected, .active) {
  background-color: var(--background-active);
  color: var(--foreground-active);
  border-color: var(--border-active); }

measure-aggregation-button:has(.selectable.selected, .active):hover {
  background-color: var(--background-selected-hover);
  color: var(--foreground-selected-hover);
  border-color: var(--border-selected-hover); }

measurement-display {
  position: relative;
  display: block; }

measurement-display .wf-title {
  min-height: 20px; }

measurement-display .wf-title:empty {
  min-height: 20px;
  width: 180px; }

/*--------------------------------------------------
    Measures (Massnahmen) List
--------------------------------------------------*/
.wf-measures-item {
  padding: 10px;
  margin: 0 0 15px 0;
  background-color: #fafafa; }

/* TODO - AH: wf-measure-item-level should be reviewed */
.wf-measure-item-level {
  display: inline-block;
  float: left;
  height: 26px;
  width: 24px;
  margin-right: 5px;
  margin-top: -5px;
  background-color: var(--i4c-measure-item-background);
  line-height: 28px;
  text-align: center;
  color: var(--i4c-measure-item-foreground);
  border-radius: 3px;
  border: 1px solid #aaa; }

.wf-measures-item .wf-consumption-value {
  font-size: 22px;
  line-height: 36px;
  color: #9d9da5; }

.wf-measures-item .wf-measures-item-label {
  height: 30px; }

.wf-measures-item .wf-consumption-unit {
  display: inline-block;
  margin-top: 0;
  font-size: 16px;
  line-height: 36px; }

.wf-measures-item .wf-measures-date {
  font-size: 16px;
  line-height: 36px;
  margin-top: 0; }

.wf-measures-date-danger,
.wf-measures-date-warning,
.wf-measures-date-success {
  padding-left: 5px; }

.wf-measures-date-success {
  border-left: 3px solid var(--i4c-success-color); }

.wf-measures-date-warning {
  border-left: 3px solid var(--i4c-warning-color); }

.wf-measures-date-danger {
  border-left: 3px solid var(--i4c-danger-color); }

.wf-measures-item .wf-consumption-type-icon {
  height: 56px;
  padding-top: 5px; }

.wf-measures-item .wf-consumption-type-icon > i {
  font-size: 32px; }

.wf-measures-item .wf-consumption-type-name {
  display: block;
  vertical-align: middle;
  font-size: 16px;
  line-height: 20px;
  color: #666666; }

.wf-measures-item:hover {
  background-color: #ffffff; }

.wf-measures-item .wf-consumption-unit {
  color: #9d9da5; }

.wf-measures-item .wf-measures-date {
  color: #808588; }

.wf-measures-item .wf-consumption-type-icon > i {
  color: var(--i4c-accent-color); }

media-field {
  display: block; }

media-field .video-container {
  position: relative;
  height: 320px;
  overflow: hidden; }

media-field .video-container video {
  position: absolute;
  top: 50%;
  left: 50%;
  height: auto;
  width: auto;
  min-height: 100%;
  min-width: 100%;
  background: #ffffff;
  -moz-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  -o-transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%); }

/* Panel specific image containers */
media-field .image-container-drill-down {
  height: 305px;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  background-color: #fff;
  -ms-interpolation-mode: bicubic;
  box-shadow: inset -1px -1px 2px rgba(0, 0, 0, 0.1), inset 1px 1px 2px rgba(0, 0, 0, 0.1); }

/*--------------------------------------------------
   Requesition Media Selection List
--------------------------------------------------*/
.wf-media-selection .panel {
  position: relative;
  float: left;
  width: 150px;
  height: 120px;
  margin-right: 20px; }

.wf-selection-area-label {
  margin-top: 10px;
  font-weight: bold;
  font-size: 16px;
  line-height: 30px; }

.wf-media-selection .panel .visible-hover {
  visibility: hidden;
  display: none;
  opacity: 0; }

.wf-media-selection .panel:hover .visible-hover {
  visibility: visible;
  display: block;
  opacity: 1; }

.wf-media-selection .wf-item-control-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 24px;
  height: 24px;
  border-radius: 50%; }

/*-----------------------------------
    Modal Dialog Styles
-----------------------------------*/
.modalBlockout {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  -moz-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  -webkit-transition: opacity 0.2s linear;
  -ms-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear; }

.modal {
  display: block; }

.modal-header {
  border-radius: 5px 5px 0 0; }

.modal-alarm-details .modal-header {
  color: #fff; }

.modal-alarm-details .modal-header button {
  color: #fff;
  opacity: 0.7; }

pagination-label {
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; }

pagination-label:empty {
  display: none; }

/*---------------------------
    Pagination
-----------------------------*/
/* It looks like the beneath classes are nowhere used in the Project */
/* .wf-pagination > .wf-pagination-item {
    display: none;
}

.wf-pagination > .wf-pagination-item.active {
    display: inline;
}

.wf-pagination > .wf-pagination-item:last-child,
.wf-pagination > .wf-pagination-item:first-child .wf-pagination > .wf-pagination-item.active {
    display: inline;
} */
.pagination {
  display: flex; }

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background-color: var(--i4c-brand-color);
  border-color: transparent; }

.pagination li a {
  padding: 3px 7px;
  display: flex; }

panel-parameters {
  --foreground-color: var(--i4c-body-text-color);
  --foreground-color-muted: #999999;
  --background-color: #ffffff;
  --background-color-addon: #eeeeee;
  --border-color: #cccccc;
  --background-color-disabled: #eeeeee;
  --gap-small: 4px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-small); }

panel-parameters .label-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-small); }

panel-parameters .label-group .component-label {
  display: inline-block;
  margin: 0;
  padding: 0;
  max-width: 100%;
  font-weight: 700; }

panel-parameters .input-group {
  position: relative;
  display: flex; }

panel-parameters .input-group-addon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: inherit;
  padding: 6px 12px;
  background-color: var(--background-color);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: var(--foreground-color);
  text-align: center;
  border: 1px solid var(--border-color);
  border-radius: 0; }

panel-parameters .input-group-addon:last-child,
panel-parameters .input-group-addon:last-child:focus {
  /* reset to overwrite default .btn styles */
  border-radius: unset;
  border-top-right-radius: var(--i4c-border-radius);
  border-bottom-right-radius: var(--i4c-border-radius);
  border-color: var(--border-color); }

panel-parameters .input-group-addon.addon-unit {
  border-left: none;
  background-color: var(--background-color-addon); }

panel-parameters .form-control-validation {
  --label-font-size-offset: 14px;
  position: absolute;
  right: 0px;
  top: var(--label-font-size-offset);
  z-index: 3;
  line-height: 14px;
  border-radius: 50%;
  padding: 1px 2px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%); }

panel-parameters .component-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-small); }

panel-parameters .kpi-container:empty,
.panel-parameter-component .kpi-container:empty {
  display: none; }

panel-parameters .kpi-container,
.panel-parameter-component .kpi-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--gap-small);
  padding: 4px;
  background: var(--i4c-light-background);
  border: 1px solid var(--i4c-light-border-color);
  border-radius: var(--i4c-border-radius);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }

.list-unstyled:has(panel-parameters) {
  display: flex;
  flex-direction: column;
  gap: 16px; }

/*--------------------------------------------------
    Bootstrap PopOver size extensions
 -------------------------------------------------*/
.popover-xs {
  width: 105px; }

.popover-sm {
  width: 155px; }

.popover-md {
  width: 255px; }

.popover-lg {
  width: 355px; }

.popover-xlg {
  width: 555px; }

/*--------------------------------------------------
    Bootstrap PopOver colors
 -------------------------------------------------*/
.popover {
  background-color: var(--i4c-secondary-background);
  max-width: 585px; }

.popover-title {
  background-color: var(--i4c-darker-background);
  color: var(--i4c-main-inverted-foreground); }

.popover.right > .arrow:after {
  border-right-color: var(--i4c-secondary-background);
  left: 1px; }

.popover.left > .arrow:after {
  border-left-color: var(--i4c-secondary-background);
  right: 1px; }

.popover.top > .arrow:after {
  border-top-color: var(--i4c-secondary-background);
  bottom: 1px; }

.popover.bottom > .arrow:after {
  border-bottom-color: var(--i4c-secondary-background);
  top: 1px; }

.wf-privacy-label {
  position: absolute !important;
  bottom: 30px;
  right: 120px;
  z-index: 10000;
  font-size: 10px;
  color: #666666; }

.wf-privacy-label:before {
  font-family: WFIconFont;
  content: "\e607";
  margin-right: 5px;
  color: #9d9da5; }

.edit-mode .wf-privacy-label {
  display: none; }

.edit-mode #move-left-button {
  display: none; }

/*--------------------------------------------------
    Roles components
--------------------------------------------------*/
.i4c-roles-options {
  position: relative;
  padding: 10px 24px;
  margin: 0 -15px;
  background: #ffffff;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  -webkit-box-shadow: inset 0 8px 8px -8px #eee, inset 0 -8px 8px -8px #dddddd;
  -ms-box-shadow: inset 0 8px 8px -8px #eee, inset 0 -8px 8px -8px #dddddd;
  box-shadow: inset 0 8px 8px -8px #eee, inset 0 -8px 8px -8px #dddddd; }

.i4c-roles-options:before {
  position: absolute;
  top: -8px;
  right: 30px;
  z-index: 1000;
  width: 0;
  height: 0;
  border: transparent solid 8px;
  border-top-width: 0;
  border-bottom-color: rgba(0, 0, 0, 0.25);
  content: " "; }

.i4c-roles-options:after {
  position: absolute;
  top: -6px;
  right: 31px;
  z-index: 1000;
  width: 0;
  height: 0;
  border: transparent solid 7px;
  border-top-width: 0;
  border-bottom-color: #FAFAFA;
  content: " "; }

/*--------------------------------------------------------------
    Roller text
--------------------------------------------------------------*/
.wf-roller-text {
  width: 150px;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  animation: marquee 15s linear infinite; }

.wf-roller-text:hover {
  animation-play-state: paused; }

/* Make it move */
@keyframes marquee {
  0% {
    text-indent: 10em; }
  100% {
    text-indent: -45em; } }

select-button {
  position: relative;
  display: block; }

select-button:empty {
  display: none; }

select-button .component-label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700; }

select-button .select-button-group {
  display: flex;
  width: 100%; }

select-button .select-button-group .btn:first-child {
  flex: 1; }

select-button .select-button-group .btn:nth-child(2) {
  max-width: 40px;
  text-align: center;
  flex: 0 0 40px; }

select-button .select-button-group .btn.wf-button-group-addon:first-child {
  width: auto; }

select-button .select-button-group .btn.wf-button-group-addon + .btn {
  width: auto;
  max-width: inherit;
  flex-grow: 1; }

select-button .select-button-group button,
select-button .select-button-group .btn {
  text-align: left;
  white-space: normal;
  font-weight: normal;
  transition: background-color 0.4s ease-in-out; }

select-field {
  position: relative;
  display: block; }

select-field .component-label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700; }

select-icon-component {
  position: relative;
  display: block; }

select-icon-component .component-label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700; }

select-icon-component .btn-group {
  display: flex;
  width: 100%; }

select-icon-component .btn-group .btn:first-child {
  flex: 1; }

select-icon-component .btn-group .btn:nth-child(2) {
  max-width: 40px;
  text-align: center;
  flex: 0 0 40px; }

select-icon-component .btn-group .btn.wf-button-group-addon:first-child {
  width: auto; }

select-icon-component .btn-group .btn.wf-button-group-addon + .btn {
  width: auto;
  max-width: inherit;
  flex-grow: 1; }

select-icon-component .btn-group .btn {
  text-align: left;
  white-space: normal;
  font-weight: normal;
  transition: background-color 0.4s ease-in-out; }

select-user-button {
  display: block; }

selectable-button {
  display: flex;
  width: 100%;
  padding: 0; }

selectable-button.draggable {
  display: flex; }

selectable-button .btn {
  text-align: left;
  white-space: normal;
  font-weight: normal;
  transition: background-color 0.4s ease-in-out; }

selectable-button,
selectable-button .btn:only-child {
  border-radius: var(--i4c-border-radius); }

selectable-button .btn:first-child:not(:only-child) {
  border-top-left-radius: var(--i4c-border-radius);
  border-bottom-left-radius: var(--i4c-border-radius);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0; }

selectable-button .btn:last-child:not(:only-child) {
  flex: 0 0 40px;
  max-width: 40px;
  text-align: center;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: var(--i4c-border-radius);
  border-bottom-right-radius: var(--i4c-border-radius); }

selectable-button .btn:first-child {
  flex: 1; }

selectable-button .component-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between; }

selectable-button:hover .component-content-wrapper,
selectable-button .component-content-wrapper:has(.more-indicator) {
  gap: 0.5em; }

selectable-button .component-content-wrapper .wf-btn-title {
  min-height: 20px; }

selectable-button .component-content-main {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: 8px; }

selectable-button .more-indicator {
  display: flex;
  align-items: center; }

selectable-button .more-indicator:empty {
  display: none; }

selectable-button .wf-btn-content-main {
  display: flex;
  align-items: flex-start;
  flex-direction: column; }

selectable-button:hover :is(button, .btn)[disabled] .wf-icon-hover {
  color: var(--i4c-button-default-foreground-disabled); }

selectable-button:hover button[disabled] .wf-btn-icon,
selectable-button button[disabled] .wf-btn-icon,
selectable-button:hover button[disabled] .wf-btn-icon path,
selectable-button button[disabled] .wf-btn-icon path {
  color: var(--i4c-button-default-foreground-disabled);
  fill: var(--i4c-button-default-foreground-disabled); }

selectable-button button[disabled] .wf-btn-subtitle,
selectable-button:hover button[disabled] .wf-btn-subtitle {
  color: var(--i4c-button-default-foreground-disabled); }

.wf-page-button-icon-wrapper {
  height: 40px;
  width: 40px; }

.wf-page-button-icon-wrapper .link-icon {
  display: block;
  height: inherit;
  width: inherit; }

/*------------------------------------------------
    Draggable components styles   
-------------------------------------------------*/
.draggable .wf-drag-handle:before {
  opacity: 0;
  font-family: "FontAwesome";
  content: "\f0dc"; }

.dragging .wf-drag-handle {
  position: absolute;
  right: 0;
  top: 50%;
  margin-right: 15px;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%); }

.dragging .wf-drag-handle:before {
  opacity: 1; }

/* selectable group item used in multiple different selectable group buttons */
.wf-components-group-item {
  padding: 10px 15px;
  transition: background-color 0.4s ease-in-out; }

.wf-components-group-item.selectable:hover {
  color: var(--i4c-list-group-item-foreground-hover);
  background-color: var(--i4c-list-group-item-background-hover); }

.wf-components-group-item.disabled:hover {
  background-color: #eeeeee !important; }

.wf-components-group-item.disabled {
  cursor: not-allowed; }

.wf-components-group-item.selectable:hover .svg-icon path {
  fill: var(--i4c-list-group-item-foreground-hover); }

.wf-components-group-item.selectable.selected,
.wf-components-group-item.selectable.selected .wf-title,
.wf-components-group-item.selectable.selected .wf-icon,
.wf-components-group-item.selectable.selected .wf-subtitle {
  color: var(--i4c-list-group-item-foreground-active); }

.wf-components-group-item.selectable.selected .wf-btn-title span.wf-btn-subtitle {
  color: var(--i4c-list-group-item-foreground-active); }

.wf-components-group-item.selectable:hover .wf-title,
.wf-components-group-item.selectable:hover .wf-subtitle,
.wf-components-group-item.selectable.selected:hover .wf-title,
.wf-components-group-item.selectable.selected:hover .wf-subtitle {
  color: var(--i4c-light-inverted-foreground);
  /*background-color: var(--i4c-list-group-item-background-hover);*/ }

.wf-components-group-item.selectable.selected:hover {
  background-color: var(--i4c-list-group-item-background-selected-hover);
  color: var(--i4c-list-group-item-foreground-selected-hover); }

selectable-device-button {
  --foreground: var(--i4c-list-group-item-foreground);
  --foreground-hover: var(--i4c-list-group-item-foreground-hover);
  --foreground-active: var(--i4c-list-group-item-foreground-active);
  --foreground-selected-hover: var(--i4c-list-group-item-foreground-active);
  --background: var(--i4c-list-group-item-background);
  --background-hover: var(--i4c-list-group-item-background-hover);
  --background-active: var(--i4c-list-group-item-background-active);
  --background-selected-hover: var(--i4c-list-group-item-background-selected-hover);
  --foreground-disabled: var();
  --background-disabled: #eeeeee;
  --border: #DDD;
  --border-hover: #DDD;
  --border-active: #DDD;
  --border-selected-hover: #DDD;
  position: relative;
  display: block;
  color: var(--foreground);
  border: 1px solid var(--border);
  transition: background-color 0.4s ease-in-out; }

selectable-device-button:hover {
  color: var(--foreground-hover);
  background-color: var(--background-hover);
  border-color: var(--border-hover); }

selectable-device-button:first-child {
  border-top-left-radius: var(--i4c-border-radius);
  border-top-right-radius: var(--i4c-border-radius); }

selectable-device-button:last-child {
  border-bottom-left-radius: var(--i4c-border-radius);
  border-bottom-right-radius: var(--i4c-border-radius); }

selectable-device-button .component-body {
  padding: 10px 15px; }

selectable-device-button .component-body.has-hover-icon {
  --icon-size: 13px;
  --padding: 11px;
  padding-right: calc(2 * var(--padding) + var(--icon-size)); }

selectable-device-button .button-text {
  overflow: hidden;
  word-break: break-word; }

selectable-device-button .button-text__title {
  font-weight: bold;
  margin: 0; }

selectable-device-button .button-text__description {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: break-spaces;
  word-break: break-all; }

selectable-device-button .state-indicators {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center; }

selectable-device-button .state-indicators .state-indicator {
  --icon-size: 12px;
  height: var(--icon-size);
  aspect-ratio: 1;
  font-size: var(--icon-size);
  line-height: 1;
  text-align: center; }

selectable-device-button .has-selected-icon.selectable {
  padding-left: 43px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal; }

selectable-device-button .has-selected-icon.selectable:before,
selectable-device-button .has-selected-icon.selectable.selected:before {
  position: absolute;
  top: 50%;
  left: 18px;
  font-family: FontAwesome;
  color: #cfd7d9;
  transform: translateY(-50%); }

selectable-device-button .has-selected-icon.selectable.selected:before {
  content: "\f00c"; }

/* button DISABLED state */
selectable-device-button:has(.disabled) {
  background-color: var(--background-disabled);
  color: var(--foreground);
  cursor: not-allowed; }

selectable-device-button:has(.disabled):hover,
selectable-device-button .disabled:hover {
  cursor: not-allowed; }

/* button SELECTED / ACTIVE state */
selectable-device-button:has(.selectable.selected, .active) {
  background-color: var(--background-active);
  color: var(--foreground-active);
  border-color: var(--border-active); }

selectable-device-button:has(.selectable.selected, .active):hover {
  background-color: var(--background-selected-hover);
  color: var(--foreground-selected-hover);
  border-color: var(--border-selected-hover); }

selectable-entity-button {
  --foreground-color-disabled: var(--text-muted);
  --background-color-disabled: var(--i4c-lighter-background);
  --foreground-color-selected: var(--i4c-list-group-item-foreground-hover);
  --background-color-selected: var(--i4c-list-group-item-background-hover);
  display: block;
  border-radius: inherit; }

selectable-entity-button .component-body {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: inherit;
  transition: background-color 0.4s ease-in-out; }

selectable-entity-button:hover .component-body.disabled {
  cursor: not-allowed; }

selectable-entity-button .component-body.disabled,
selectable-entity-button:hover .component-body.disabled,
selectable-entity-button .component-body.disabled.selected,
selectable-entity-button:hover .component-body.disabled.selected {
  background-color: var(--background-color-disabled);
  color: var(--foreground-color-disabled); }

selectable-entity-button .component-body.selected {
  color: var(--foreground-color-selected);
  background-color: var(--background-color-selected); }

selectable-entity-button:hover .component-body:not(.disabled),
selectable-entity-button:hover .component-body.selected:not(.disabled) {
  color: var(--foreground-color-selected);
  background-color: var(--background-color-selected); }

selectable-list-button-with-remove {
  display: block; }

selectable-list-button-with-remove .component-wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch; }

/* styles below need to regroupe later */
.info-pill {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 2px;
  background-color: #29b6f6;
  color: #ffffff;
  border-radius: 50%;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
  cursor: default; }

li.assigned-descendant {
  position: relative; }

li.assigned-descendant .info-pill {
  display: block !important;
  visibility: visible !important; }

/*--------------------------------------------------
    Extending Bootstrap Lists Overrides
 -------------------------------------------------*/
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  background-color: var(--i4c-list-group-item-background-active);
  border-color: var(--i4c-list-group-item-background-active);
  color: var(--i4c-list-group-item-foreground-active); }

.selectable {
  cursor: pointer; }

/* List groups with selectable components */
.wf-selectable-list-item-content {
  padding-left: 20px; }

.i4c-selectable-list-item-text {
  overflow: hidden;
  word-break: break-word; }

.selectable .wf-selectable-list-item-content {
  padding-left: 20px;
  padding-right: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal; }

.selectable .wf-selectable-list-item-content:before,
.selectable.selected .wf-selectable-list-item-content:before {
  position: absolute;
  top: 50%;
  font-family: FontAwesome;
  color: #cfd7d9;
  margin-left: -20px;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%); }

.selectable.selected .wf-selectable-list-item-content:before {
  content: "\f00c"; }

.selectable .selectable-sortable-item:before,
.selectable.selected .selectable-sortable-item:before {
  position: absolute;
  top: 50%;
  font-family: FontAwesome;
  color: #cfd7d9;
  margin-left: -20px;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%); }

.selectable .selectable-sortable-item:before {
  content: "\f067"; }

.selectable.selected .selectable-sortable-item:before {
  content: "\f00c"; }

selectable-signal-button {
  --foreground: var(--i4c-list-group-item-foreground);
  --foreground-hover: var(--i4c-list-group-item-foreground-hover);
  --foreground-active: var(--i4c-list-group-item-foreground-active);
  --foreground-selected-hover: var(--i4c-list-group-item-foreground-active);
  --background: var(--i4c-list-group-item-background);
  --background-hover: var(--i4c-list-group-item-background-hover);
  --background-active: var(--i4c-list-group-item-background-active);
  --background-selected-hover: var(--i4c-list-group-item-background-selected-hover);
  --foreground-disabled: var();
  --background-disabled: #eeeeee;
  --border: #DDD;
  --border-hover: #DDD;
  --border-active: #DDD;
  --border-selected-hover: #DDD;
  position: relative;
  display: block;
  color: var(--foreground);
  border: 1px solid var(--border);
  transition: background-color 0.4s ease-in-out; }

selectable-signal-button:hover {
  color: var(--foreground-hover);
  background-color: var(--background-hover);
  border-color: var(--border-hover); }

selectable-signal-button:first-child {
  border-top-left-radius: var(--i4c-border-radius);
  border-top-right-radius: var(--i4c-border-radius); }

selectable-signal-button:last-child {
  border-bottom-left-radius: var(--i4c-border-radius);
  border-bottom-right-radius: var(--i4c-border-radius); }

selectable-signal-button .component-body {
  padding: 10px 15px; }

selectable-signal-button .component-body.has-hover-icon {
  --icon-size: 13px;
  --padding: 11px;
  padding-right: calc(2 * var(--padding) + var(--icon-size)); }

selectable-signal-button .button-text {
  overflow: hidden;
  word-break: break-word; }

selectable-signal-button .button-text__title {
  font-weight: bold;
  margin: 0; }

selectable-signal-button .button-text__subtitle {
  margin: 0; }

selectable-signal-button .button-text__description {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: break-spaces;
  word-break: break-all; }

selectable-signal-button .state-indicators {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center; }

selectable-signal-button .state-indicators .state-indicator {
  --icon-size: 12px;
  height: var(--icon-size);
  aspect-ratio: 1;
  font-size: var(--icon-size);
  line-height: 1;
  text-align: center; }

selectable-signal-button .has-selected-icon.selectable {
  padding-left: 43px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal; }

selectable-signal-button .has-selected-icon.selectable:before,
selectable-signal-button .has-selected-icon.selectable.selected:before {
  position: absolute;
  top: 50%;
  left: 18px;
  font-family: FontAwesome;
  color: #cfd7d9;
  transform: translateY(-50%); }

selectable-signal-button .has-selected-icon.selectable.selected:before {
  content: "\f00c"; }

/* button DISABLED state */
selectable-signal-button:has(.disabled) {
  background-color: var(--background-disabled);
  color: var(--foreground);
  cursor: not-allowed; }

selectable-signal-button:has(.disabled):hover,
selectable-signal-button .disabled:hover {
  cursor: not-allowed; }

/* button SELECTED / ACTIVE state */
selectable-signal-button:has(.selectable.selected, .active) {
  background-color: var(--background-active);
  color: var(--foreground-active);
  border-color: var(--border-active); }

selectable-signal-button:has(.selectable.selected, .active):hover {
  background-color: var(--background-selected-hover);
  color: var(--foreground-selected-hover);
  border-color: var(--border-selected-hover); }

/*-----------------------------------
    Signal Button Component
-----------------------------------*/
selectable-synchronized-button {
  display: flex; }

.wf-signal-button-icon-wrapper {
  align-items: center;
  display: flex; }

/* Primitive components */
.circle {
  border-radius: 50%;
  overflow: hidden; }

.wf-block-1-1 {
  width: 120px;
  height: 120px; }

/*site selector*/
.site-selector-item {
  position: relative;
  height: 300px;
  margin: 10px 0;
  border: 1px solid var(--i4c-panel-border-color);
  overflow: hidden; }

.site-selector-img {
  height: 200px; }

.site-selector-img i {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 72px;
  opacity: 0.2;
  transform: translate(-50%, -50%); }

.site-selector-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.65);
  padding: 10px;
  border-top: 1px solid var(--i4c-panel-border-color);
  color: white; }

.site-selector-actionbar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: flex-end;
  padding: 5px; }

.site-selector-actionbar button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  margin-left: 5px; }

/*--------------------------------------------------
   Tables with fixed header
--------------------------------------------------*/
table.table-fixedheader {
  width: 100%; }

table.table-fixedheader,
table.table-fixedheader > thead,
table.table-fixedheader > tbody,
table.table-fixedheader > thead > tr,
table.table-fixedheader > tbody > tr,
table.table-fixedheader > thead > tr > th,
table.table-fixedheader > tbody > td {
  display: block; }

table.table-fixedheader > thead > tr:after,
table.table-fixedheader > tbody > tr:after {
  content: ' ';
  display: block;
  visibility: hidden;
  clear: both; }

table.table-fixedheader > tbody {
  overflow-y: scroll;
  height: 150px; }

table.table-fixedheader > thead {
  overflow-y: hidden;
  border-bottom: 2px solid #ddd;
  padding-right: 16px; }

table.table-fixedheader > thead > tr > th {
  border-bottom: none; }

table.table-fixedheader > thead::-webkit-scrollbar {
  background-color: inherit; }

table.table-fixedheader > thead > tr > th:after,
table.table-fixedheader > tbody > tr > td:after {
  content: ' ';
  display: table-cell;
  visibility: hidden;
  clear: both; }

table.table-fixedheader > thead tr th,
table.table-fixedheader > tbody tr td {
  float: left;
  word-wrap: break-word; }

.table > thead > tr > td.active,
.table > tbody > tr > td.active,
.table > tfoot > tr > td.active,
.table > thead > tr > th.active,
.table > tbody > tr > th.active,
.table > tfoot > tr > th.active,
.table > thead > tr.active > td,
.table > tbody > tr.active > td,
.table > tfoot > tr.active > td,
.table > thead > tr.active > th,
.table > tbody > tr.active > th,
.table > tfoot > tr.active > th {
  background-color: var(--i4c-accent-color) !important;
  color: var(--i4c-secondary-inverted-foreground) !important; }

thead:before {
  position: absolute;
  z-index: -1;
  background: #f6f6f6;
  content: " ";
  width: 100%;
  height: 100%;
  border-bottom: 1px solid #c2c2c2; }

/*-----------------------------------
  Tables Elements
-----------------------------------*/
.table > tbody > tr > td {
  vertical-align: middle; }

.table > tbody > tr > td:first-child {
  padding-left: 10px; }

.table-th-minwidth th {
  -moz-min-width: 125px;
  -ms-min-width: 125px;
  -o-min-width: 125px;
  -webkit-min-width: 125px;
  min-width: 125px; }

.table-g {
  display: grid;
  height: 100%; }

.table-g-grid {
  grid-template-columns: minmax(min-content, 1fr);
  grid-template-rows: auto;
  grid-template-areas: "header header header header"
 "time value unit action";
  border-collapse: collapse;
  min-width: 100%; }

.table-g-head,
.table-g-body,
.table-g-footer,
.table-g-tr {
  display: contents; }

.table-g-head::before {
  content: none; }

.table-g-th,
.table-g-td {
  display: flex;
  align-items: center;
  align-content: space-between;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 1px solid var(--i4c-tile-border-color); }

.table-g-th {
  background: #FFF;
  text-align: left;
  font-weight: bold;
  padding: 4px 15px;
  border-top: 1px solid var(--i4c-tile-border-color); }

.table-g-td {
  padding: 4px 15px;
  color: #555555; }

.table-g-th-numeric,
.table-g-td-numeric {
  text-align: right;
  justify-content: end;
  padding-right: 0.2ch; }

.table-g-th-unit,
.table-g-td-unit {
  text-align: right;
  justify-content: end;
  padding-left: 0.2ch; }

.table-g-body .table-g-tr {
  min-height: 30px; }

.table-g-tr:nth-child(odd) td {
  background-color: #f9f9f9; }

.table-g-tr:hover td {
  background-color: #f5f5f5; }

.signal-online-table-text {
  display: -webkit-box;
  max-width: 210px;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  white-space: break-spaces; }

.path-location {
  display: -webkit-box !important;
  margin: 0;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical; }

textarea-field {
  position: relative;
  display: block; }

textarea-field textarea {
  resize: vertical; }

textarea-field .form-control {
  display: block;
  width: 100%;
  background-color: #fff;
  background-image: none;
  padding: 6px 12px;
  font-size: 14px;
  color: #555555;
  border: 1px solid #ccc;
  border-radius: var(--i4c-border-radius);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; }

textarea-field .form-control::placeholder {
  color: #999;
  opacity: 1; }

/* Anatomy

- wf-tile 
    - wf-tile-body
        - Tile icon
        - Tile title
            - Tile Subtitle */
/* --Tiles styles-- */
.wf-tile {
  overflow: hidden;
  text-align: center;
  border: 1px solid var(--i4c-tile-border-color);
  background-color: var(--i4c-tile-background-color);
  transition: all 0.4s; }

.wf-tile .wf-tile-title {
  font-size: var(--i4c-tile-title-size);
  color: var(--i4c-tile-title-color); }

.wf-tile .wf-tile-subtitle {
  color: var(--i4c-tile-subtitle-color); }

.wf-tile-disabled {
  pointer-events: none;
  opacity: 0.6;
  color: var(--i4c-tile-foreground-color-disabled);
  background-color: var(--i4c-tile-background-color-disabled); }

.wf-tile-disabled .wf-tile-icon,
.wf-tile-disabled .wf-tile-title {
  color: var(--i4c-tile-foreground-color-disabled); }

.wf-tile-clickable:hover,
.wf-tile-clickable.resizing {
  background-color: var(--i4c-tile-c-background-color-hover);
  transition: all 0.4s; }

.wf-tile-clickable:hover .wf-tile-title,
.wf-tile-clickable.resizing .wf-tile-title {
  color: var(--i4c-tile-c-title-color-hover); }

.wf-tile-clickable:hover .wf-tile-subtitle,
.wf-tile-clickable.resizing .wf-tile-subtitle {
  color: var(--i4c-tile-c-subtitle-color-hover); }

.wf-tile-clickable:hover .wf-tile-icon,
.wf-tile-clickable.resizing .wf-tile-icon {
  color: var(--i4c-tile-c-icon-color-hover); }

.wf-tile-clickable .wf-tile-active {
  background-color: var(--i4c-tile-c-background-color-active); }

.wf-tile-clickable .wf-tile-active .wf-tile-title {
  color: var(--i4c-tile-c-title-color-active); }

.wf-tile-active .wf-tile-subtitle {
  color: var(--i4c-tile-c-subtitle-color-active); }

.wf-tile-active .wf-tile-icon {
  color: var(--i4c-tile-c-icon-color-active); }

.wf-tile-clickable:hover .wf-tile-active {
  background-color: var(--i4c-tile-c-background-color-active-hover); }

.wf-tile-clickable:hover .wf-tile-active .wf-tile-title {
  color: var(--i4c-tile-c-title-color-active-hover); }

.wf-tile-clickable:hover .wf-tile-active .wf-tile-subtitle {
  color: var(--i4c-tile-c-subtitle-color-active-hover); }

.wf-tile-clickable:hover .wf-tile-active .wf-tile-icon {
  color: var(--i4c-tile-c-icon-color-active-hover); }

.wf-tile-active .wf-tile-body:before,
.wf-tile-active .wf-tile-body:after {
  border: 1px solid #ffffff;
  background-color: var(--i4c-accent-color);
  animation: bgAccentToWhite 1.5s infinite; }

.wf-tile-icon {
  display: block;
  width: var(--i4c-tile-icon-size);
  margin: 0 20px;
  font-size: var(--i4c-tile-icon-size);
  line-height: var(--i4c-tile-icon-size);
  color: var(--i4c-tile-icon-color); }

/*------------------------------------------------
    InPanel content tile widget and components
 -----------------------------------------------*/
.wf-tile-content {
  top: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  width: 100%;
  background: var(--i4c-tile-content-background-color); }

.wf-tile-content-icon {
  margin: 15px;
  color: var(--i4c-tile-content-icon-color);
  font-size: var(--i4c-tile-content-icon-size);
  text-align: center; }

.wf-tile-detail {
  text-align: left; }

.wf-tile-value {
  font-size: 36px;
  /*line-height: 45px;
    position: relative;
    display: inline-block;
    padding-top: 35px;
    padding-left: 10px;*/ }

.wf-tile-value-subtitle {
  padding-left: 5px;
  font-size: 14px;
  color: var(--i4c-tile-content-value-color, #92a9b8);
  text-overflow: ellipsis;
  text-align: left;
  overflow: hidden; }

.wf-tile-content .wf-tile-value {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: 0;
  height: 100%;
  font-weight: normal;
  color: var(--i4c-tile-content-value-color); }

.wf-tile-content .wf-tile-value-subtitle {
  color: var(--i4c-tile-content-subtitle-color);
  font-weight: normal; }

.wf-tile-content:hover {
  background: var(--i4c-tile-content-background-hover); }

.wf-tile-content:hover .wf-tile-content-icon {
  color: var(--i4c-tile-content-icon-color-hover); }

.wf-tile-content:hover .wf-tile-value {
  color: var(--i4c-tile-content-value-color-hover); }

.wf-tile-content:hover .wf-tile-value-subtitle {
  color: var(--i4c-tile-content-subtitle-color-hover); }

.wf-tile-content:hover .wf-tile-detail {
  color: var(--i4c-tile-content-value-color-hover); }

.wf-tile-active .wf-tile-content {
  background: var(--i4c-tile-content-background-active);
  color: var(--i4c-tile-content-value-color-active); }

.wf-tile-active .wf-tile-content-icon {
  color: var(--i4c-tile-content-icon-color-active); }

.wf-tile-active .wf-tile-title {
  color: var(--i4c-tile-content-active-title-color); }

.wf-tile-active .wf-tile-value {
  color: var(--i4c-tile-content-value-color-active); }

.wf-tile-active .wf-tile-value-subtitle {
  color: var(--i4c-tile-content-subtitle-color-active); }

.wf-tile-active:hover .wf-tile-content {
  background: var(--i4c-tile-content-background-active-hover); }

.wf-tile-active:hover .wf-tile-content-icon {
  color: var(--i4c-tile-content-icon-color-active-hover); }

.wf-tile-active:hover .wf-tile-value {
  color: var(--i4c-tile-content-value-color-active-hover); }

.wf-tile-active:hover .wf-tile-value-subtitle {
  color: var(--i4c-tile-content-subtitle-color-active-hover); }

#shared-tiles,
#personal-tiles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: -moz-fit-content;
  width: fit-content;
  overflow: hidden;
  border: none; }

:is(#shared-tiles, #personal-tiles):has(.gridster:empty) {
  display: none; }

.tile-container__container {
  align-content: stretch;
  height: 100%;
  padding: 8px;
  overflow: hidden auto; }

.tile-container__container:empty,
.tile-container__container > *:empty {
  display: none; }

.edit-mode #shared-tiles,
.edit-mode #personal-tiles {
  border: 1px dashed var(--i4c-main-accent-background, #313639);
  /* padding: 24px 8px; */ }

.tile-container__label {
  display: none; }

.edit-mode .tile-container__label {
  display: inline;
  color: var(--i4c-main-accent-foreground, #FFFFFF);
  padding: 2px 8px;
  border-radius: 0 0 5px 0;
  background: var(--i4c-main-accent-background, #313639); }

.wf-tile-active .wf-tile-body:after {
  background-color: #cfd7d9; }

/*-----------------------------------
    Tile widget and components
 ----------------------------------*/
.wf-tile.ghost-tile {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border-style: dashed;
  border-width: 1.5px;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
  color: none; }

.wf-tile.ghost-tile .wf-tile-icon {
  color: transparent; }

.wf-tile.ghost-tile:hover,
.wf-tile.ghost-tile:hover .wf-tile-icon {
  background-color: transparent;
  color: var(--i4c-tile-icon-color, --i4c-button-background); }

.wf-tile-body {
  padding: 0;
  display: flex !important;
  align-items: center; }

.wf-tile-title {
  display: -webkit-box;
  display: block;
  overflow: hidden;
  padding: 0 4px;
  line-height: 16px;
  text-overflow: ellipsis;
  word-break: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; }

.wf-tile-subtitle {
  display: -webkit-box;
  display: block;
  overflow: hidden;
  font-weight: normal;
  text-overflow: ellipsis;
  padding-top: 3px;
  opacity: 0.7;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; }

.wf-tile-body:empty,
.wf-tile-title:empty,
.wf-tile-subtitle:empty {
  display: none; }

/* Active tile indicator */
.wf-tile-active .wf-tile-body:before,
.wf-tile-active .wf-tile-body:after {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 10px;
  height: 10px;
  border: 1px solid #fff;
  background-color: #eaeeed;
  content: ' '; }

.wf-tile-active .wf-tile-body:after {
  right: 17px;
  width: 5px;
  background-color: #cfd7d9; }

/* Tile badge */
.wf-tile-badge {
  position: absolute;
  right: 5px;
  bottom: 5px; }

.wf-tile-clickable {
  position: relative;
  color: #333;
  background-color: #fefefe;
  cursor: pointer;
  -webkit-transition: background-color .4s;
  -moz-transition: background-color .4s;
  -o-transition: background-color .4s;
  transition: background-color .4s; }

/*------------------------------------------------
    Gridster plugin styles extensions
 -----------------------------------------------*/
.gridster {
  -webkit-transition: opacity .6s ease 0s;
  -moz-transition: opacity .6s ease 0s;
  -ms-transition: opacity .6s ease 0s;
  -o-transition: opacity .6s ease 0s;
  transition: opacity .6s ease 0s; }

.gridster ul,
ul.gridster {
  margin: 0;
  padding-left: 0;
  list-style-type: none; }

.resize > rect {
  visibility: visible !important; }

.gridster .dragging.wf-tile-clickable:after,
.gridster .dragging.wf-tile-clickable:before,
.gridster .dragging.wf-tile-clickable .wf-tile-subtitle {
  display: none; }

.gridster .resizing.wf-tile-clickable:after,
.gridster .resizing.wf-tile-clickable:before,
.gridster .resizing.wf-tile-clickable .wf-tile-subtitle {
  display: none; }

.gridster .gs-w {
  cursor: pointer; }

.gridster .preview-holder {
  border-radius: unset;
  background-color: var(--i4c-secondary-background, black);
  background: repeating-linear-gradient(45deg, var(--i4c-gray-background, #808080), var(--i4c-gray-background, #808080) 5px, var(--i4c-secondary-background, black) 5px, var(--i4c-secondary-background, black) 25px);
  border: 1px dashed var(--i4c-tile-foreground-color-disabled, #808080); }

/*------------------------------------------------
    Gridster handles
 -----------------------------------------------*/
.wf-tile__handler {
  position: absolute;
  display: none;
  opacity: 0;
  transition: opacity 200ms;
  width: 50px;
  height: 25px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 0;
  color: var(--i4c-main-accent-foreground); }

.wf-tile:hover .wf-tile__handler {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  color: var(--i4c-main-accent-background, #313639);
  transition: opacity 200ms; }

.wf-tile__handler--drag {
  top: 0;
  left: 0;
  border-bottom-right-radius: 3px;
  cursor: move; }

.wf-tile__handler--drag .wf-tile__handler-icon {
  font-size: 15px; }

.wf-tile__handler--remove {
  top: 0;
  right: 0;
  border-bottom-left-radius: 3px; }

.wf-tile__handler--edit {
  bottom: 0;
  left: 0;
  border-top-right-radius: 3px; }

.wf-tile__handler--resize {
  bottom: 0;
  right: 0;
  justify-items: flex-end;
  cursor: nwse-resize; }

.wf-tile__handler--resize .wf-tile__handler-icon {
  transform: translate(1px, 3px) rotate(45deg); }

.wf-tile__handler--security {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -20px;
  margin-top: -20px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: blur(1px);
  -moz-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  cursor: pointer; }

.wf-tile__handler-icon {
  pointer-events: none; }

/*----------------------------------*/
/* Drill down measure type interval */
/*----------------------------------*/
time-intervals {
  position: relative;
  display: inline-block;
  vertical-align: middle; }

time-intervals .time-interval {
  --block-size:20px;
  --border: 1px;
  display: block;
  float: left;
  width: var(--block-size);
  height: var(--block-size);
  line-height: calc(var(--block-size) - (var(--border) * 2));
  font-size: calc(var(--block-size) / 2);
  text-align: center;
  color: #cccccc;
  border: 1px solid #dedede; }

time-intervals .time-interval:not(:first-child, :last-child) {
  border-left: none; }

time-intervals .time-interval.active {
  background-color: #eeeeee;
  color: #565656;
  border-color: #dddddd;
  box-shadow: inset 1px 1px 0px rgba(0, 0, 0, 0.2); }

time-unit-selector {
  display: flex;
  flex-direction: column;
  gap: 4px; }

time-unit-selector .radio-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0;
  border-radius: var(--radius-sm, 3px); }

time-unit-selector .radio-label {
  margin: 0; }

time-unit-selector input {
  appearance: none;
  display: none; }

toggle-filters {
  --border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px; }

toggle-filters .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--border-radius);
  padding: 0px; }

toggle-filters .icon:only-child {
  padding: 4px; }

@media print {
  toggle-filters {
    display: none; } }

toolbar-button {
  --toolbar-icon: var(--i4c-panel-toolbar-icon);
  --toolbar-item-foreground: var(--i4c-panel-toolbar-item-foreground);
  --toolbar-item-foreground-active: var(--i4c-panel-toolbar-item-foreground-active);
  --toolbar-item-foreground-hover: var(--i4c-panel-toolbar-item-foreground-hover);
  --toolbar-item-background: var(--i4c-panel-toolbar-item-background);
  --toolbar-item-background-active: var(--i4c-panel-toolbar-item-background-active);
  --toolbar-item-background-hover: var(--i4c-panel-toolbar-item-background-hover);
  --toolbar-item-border-color: var(--i4c-panel-toolbar-item-border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1; }

toolbar-button:not(:has(.toolbar-item)) {
  display: none; }

toolbar-button .toolbar-item {
  --icon-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  aspect-ratio: 1/1;
  width: 100%;
  height: 100%;
  padding: 0;
  background: var(--toolbar-item-background);
  font-size: var(--icon-size);
  color: var(--toolbar-item-foreground);
  border: 1px solid var(--toolbar-item-border-color); }

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

toolbar-button .toolbar-icon {
  aspect-ratio: 1/1;
  min-width: var(--icon-size);
  height: var(--icon-size); }

toolbar-button .toolbar-icon,
toolbar-button .toolbar-svg-icon,
toolbar-button svg.toolbar-icon path {
  color: var(--toolbar-icon);
  fill: var(--toolbar-icon);
  font-size: 14px; }

toolbar-button .toolbar-svg-icon {
  width: 17px;
  height: 17px; }

toolbar-button .toolbar-item:hover .toolbar-icon,
toolbar-button .toolbar-item:hover .toolbar-svg-icon,
toolbar-button .toolbar-item:hover svg.toolbar-icon path,
toolbar-button .toolbar-item:hover .svg-panel-toolbar-icon path {
  color: var(--toolbar-item-foreground-hover);
  fill: var(--toolbar-item-foreground-hover); }

toolbar-button .toolbar-item.active {
  background: var(--toolbar-item-background-active); }

toolbar-button .toolbar-item.active .toolbar-icon,
toolbar-button .toolbar-item.active .toolbar-svg-icon,
toolbar-button .toolbar-item.active svg.toolbar-icon path,
toolbar-button .toolbar-item.active .svg-panel-toolbar-icon path {
  color: var(--toolbar-item-foreground-active);
  fill: var(--toolbar-item-foreground-active); }

toolbar-button .toolbar-text {
  /* ToDo check implementaion closer why display: none; looks like it negates just old oversion with icon and text toolboxes*/
  display: none;
  overflow: hidden;
  height: 25px;
  padding: 0 5px;
  font-size: 12px;
  line-height: 12px;
  white-space: normal;
  text-overflow: ellipsis; }

toolbar-button .toolbar-item.active .toolbar-text {
  color: var(--toolbar-item-foreground-active); }

/* manually icon postion correction */
toolbar-button .toolbar-icon.wf-arrow-refresh-right {
  margin-left: -2px;
  /* margin-top: -3px; */ }

/*----------------------------------------------------------
    Tooltips
----------------------------------------------------------*/
.tooltip {
  z-index: 10030; }

.tooltip-inner {
  max-width: 310px;
  overflow-wrap: anywhere; }

user-list-tile {
  display: flex;
  width: 100%;
  padding: 0; }

user-list-tile .btn {
  flex: 1;
  text-align: left;
  white-space: normal;
  font-weight: normal;
  transition: background-color 0.4s ease-in-out; }

/* user-list-tile .btn:first-child {
    flex: 1;
} */
user-list-tile .component-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em; }

/* user-list-tile:hover .component-content-wrapper {
    
} */
user-list-tile .component-content-wrapper .wf-btn-title {
  min-height: 20px; }

user-list-tile .component-content-main {
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 100%;
  min-width: 0; }

user-list-tile .person-name__fullName,
user-list-tile .person-info__firstField,
user-list-tile .person-info__secondField {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  white-space: break-spaces;
  word-break: break-all;
  margin: 0; }

user-list-tile .person-name__fullName:empty,
user-list-tile .person-info__firstField:empty,
user-list-tile .person-info__secondField:empty {
  display: none; }

/* icons */
user-list-tile .more-indicator {
  display: flex;
  align-items: center; }

user-list-tile .more-indicator:empty {
  display: none; }

.wf-users-list-photo-wrapper,
.wf-list-photo-wrapper {
  display: flex !important;
  justify-content: center;
  align-items: center;
  min-width: 50px;
  height: 32px;
  margin-right: 10px;
  background: #ffffff80;
  overflow: hidden;
  text-align: center; }

.wf-users-list-photo-wrapper .wf-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center; }

.wf-user-info-photo {
  width: 70px;
  height: 70px;
  font-size: 70px;
  line-height: 70px;
  object-fit: cover; }

/* AH: CLASS TO BE REVIEWED */
.wf-users-list-photo,
.wf-list-photo {
  max-width: 32px; }

validation-summary {
  display: block; }

validation-summary:empty {
  display: none; }

validation-summary .error-count__label {
  font-weight: 700; }

validation-summary .error-list {
  margin: 0; }

validation-summary .alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px; }

validation-summary .alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1; }

validation-summary .alert-dismissible {
  padding-right: 35px; }

/*-------------------------------------------*/
/* Form validation components                */
/*-------------------------------------------*/
.form-control-validation {
  position: absolute;
  right: 0px;
  top: -14px;
  z-index: 3;
  line-height: 14px;
  border-radius: 50%;
  padding: 1px 2px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%); }

button .form-control-validation,
.btn .form-control-validation {
  right: auto;
  left: -25px; }

select ~ .form-control-validation {
  right: 30px; }

.form-control-validation-indicator {
  font-size: 17px;
  color: var(--i4c-danger-color-action); }

/*--------------------------------------------------
    Forms Validation
 -------------------------------------------------*/
.wf-components-group-item.selectable.selected.form-control-validation-indicator {
  color: var(--i4c-form-control-validation-indicator); }

.input-group.wf-input-group-validation input + .form-control-validation,
.input-group.wf-input-group-validation.input-group-sm input + .form-control-validation {
  position: relative;
  width: 0;
  right: 0;
  left: -20px;
  -moz-transform: translateY(6px);
  -ms-transform: translateY(6px);
  -o-transform: translateY(6px);
  -webkit-transform: translateY(6px);
  transform: translateY(6px);
  /* MAGIC NUMBERS! */ }

.input-group.wf-input-group-validation input + .form-control-validation {
  -moz-transform: translateY(8px);
  -ms-transform: translateY(8px);
  -o-transform: translateY(8px);
  -webkit-transform: translateY(8px);
  transform: translateY(8px);
  /* MAGIC NUMBERS! */ }

search-result-tabs {
  --forground: #333;
  --foreground-hover: #333;
  --foreground-active: #333;
  --foreground-selected-hover: #333;
  --background: #fff;
  --background-hover: #f5f5f5;
  --background-active: #fff;
  --background-selected-hover: #f5f5f5;
  --foreground-disabled: var();
  --background-disabled: #eeeeee;
  --border: #DDD;
  --border-hover: #DDD;
  --border-active: #DDD;
  --border-selected-hover: #DDD;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto; }

search-result-tabs .nav.nav-tabs {
  flex: 1;
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 0;
  list-style: none;
  border-bottom: 1px solid var(--border); }

search-result-tabs .nav.nav-tabs > .nav-tab {
  position: relative;
  display: block;
  float: left;
  margin-bottom: -1px;
  margin-right: 0; }

search-result-tabs .nav-tabs > .nav-tab > a {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin: 0;
  color: var(--foreground);
  text-decoration: none;
  line-height: 1.42857143;
  border: 1px solid transparent;
  border-radius: var(--i4c-border-radius) var(--i4c-border-radius) 0 0; }

search-result-tabs .nav-tabs > .nav-tab > a:hover,
search-result-tabs .nav-tabs > .nav-tab > a:focus {
  color: var(--foreground-hover);
  background-color: var(--background-hover);
  border-bottom-color: var(--border-hover); }

search-result-tabs .nav-tabs > .nav-tab.active > a,
search-result-tabs .nav-tabs > .nav-tab.active > a:hover,
search-result-tabs .nav-tabs > .nav-tab.active > a:focus {
  color: var(--foreground-active);
  background-color: var(--background-active);
  border: 1px solid var(--border-active);
  border-bottom-color: transparent;
  cursor: default; }

search-results {
  --foreground: var(--i4c-list-group-item-foreground);
  --foreground-hover: var(--i4c-list-group-item-foreground-hover);
  --foreground-active: var(--i4c-list-group-item-foreground-active);
  --foreground-selected-hover: var(--i4c-list-group-item-foreground-active);
  --text-search-highlight: var(--i4c-highlight-color);
  --background: var(--i4c-list-group-item-background);
  --background-hover: var(--i4c-list-group-item-background-hover);
  --background-active: var(--i4c-list-group-item-background-active);
  --background-selected-hover: var(--i4c-list-group-item-background-selected-hover);
  --foreground-disabled: var(--i4c-text-muted-foreground);
  --background-disabled: #eeeeee;
  --border: #DDD;
  --border-hover: #DDD;
  --border-active: #DDD;
  --border-selected-hover: #DDD;
  display: block;
  list-style: none;
  padding-left: 0;
  margin-bottom: 0; }

search-results .item-wrapper {
  display: flex;
  gap: 8px;
  position: relative;
  padding: 12px 20px;
  padding-left: 42px;
  background-color: var(--background);
  border: 1px solid var(--border); }

search-results .item-wrapper:first-child {
  border-top-left-radius: var(--i4c-border-radius);
  border-top-right-radius: var(--i4c-border-radius); }

search-results .item-wrapper:last-child {
  border-bottom-right-radius: var(--i4c-border-radius);
  border-bottom-left-radius: var(--i4c-border-radius); }

search-results .item-wrapper:only-child {
  border-radius: var(--i4c-border-radius); }

/* --- content --- */
search-results .item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px; }

search-results .item-name {
  font-weight: bold; }

search-results .text-highlighted {
  color: var(--text-search-highlight);
  font-weight: bold; }

search-results .item-description {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: break-spaces;
  word-break: break-all; }

/* --- active states --- */
search-results .item-wrapper:is(:hover, .selected, .selected:hover, .selected:focus) {
  background-color: var(--background-active);
  border-color: var(--border-active);
  color: var(--foreground-active); }

search-results .item-wrapper:is(:hover, .selected, .selected:hover, .selected:focus) .wf-breadcrumb {
  --foreground: var(--foreground-active);
  --border: var(--border-active);
  --background: var(--background-active); }

/* --- disabled state --- */
search-results .item-wrapper.disabled,
search-reaults .item-wrapper.disabled:is(:hover, .selected, .selected:hover, .selected:focus) {
  background-color: var(--background-disabled);
  color: var(--foreground-disabled); }

search-reaults .item-wrapper.disabled:is(:hover, .selected, .selected:hover, .selected:focus) {
  border-color: var(--border-disabled); }

search-results .item-wrapper.disabled .wf-breadcrumb {
  --foreground: var(--foreground-disabled);
  --border: var(--border);
  --background: var(--background-disabled); }

/* --- selectable state --- */
search-results .item-wrapper.selectable {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal; }

search-results .unselected {
  cursor: not-allowed; }

search-results .item-wrapper.selectable:before,
search-results .item-wrapper.selectable.selected:before {
  position: absolute;
  top: 50%;
  font-family: FontAwesome;
  color: var(--foreground-active);
  margin-left: -26px;
  transform: translateY(-50%); }

search-results .item-wrapper.selectable.selected:before {
  content: "\f00c"; }

.action-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px; }

.action-grid .wf-tile {
  min-height: 124px; }

.action-grid:empty {
  display: none; }

/* device view */
.action-grid__device {
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: 'permission events signals' 'responseTeams gps empty'; }

.action-grid__device--permission {
  grid-area: permission; }

.action-grid__device--events {
  grid-area: events; }

.action-grid__device--signals {
  grid-area: signals; }

.action-grid__device--responseTeams {
  grid-area: responseTeams; }

.action-grid__device--gps {
  grid-area: gps; }

/* site view */
.action-grid__site {
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: 'permission events areas'
 'responseTeams measureAggregation hollidays'
 'devices empty empty'; }

.action-grid__site--permission {
  grid-area: permission; }

.action-grid__site--events {
  grid-area: events; }

.action-grid__site--areas {
  grid-area: areas; }

.action-grid__site--responseTeams {
  grid-area: responseTeams; }

.action-grid__site--measureAggregation {
  grid-area: measureAggregation; }

.action-grid__site--hollidays {
  grid-area: hollidays; }

.action-grid__site--devices {
  grid-area: devices; }

/* area view */
.action-grid__area {
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: 'permission measureAggregation devices'
 'responseTeams empty empty'; }

.action-grid__area--permission {
  grid-area: permission; }

.action-grid__area--measureAggregation {
  grid-area: measureAggregation; }

.action-grid__area--devices {
  grid-area: devices; }

.action-grid__area--responseTeams {
  grid-area: responseTeams; }

/* user view */
.action-grid__user {
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: 'roles sites orgUnits' 'areas devices reports' 'reportSchedules empty empty'; }

.action-grid__user--roles {
  grid-area: roles; }

.action-grid__user--sites {
  grid-area: sites; }

.action-grid__user--orgUnits {
  grid-area: orgUnits; }

.action-grid__user--areas {
  grid-area: areas; }

.action-grid__user--devices {
  grid-area: devices; }

.action-grid__user--reports {
  grid-area: reports; }

.action-grid__user--reportSchedules {
  grid-area: reportSchedules; }

/* orgUnit view */
.action-grid__orgUnit {
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: 'permission devices measureAggregation'
 'orgUnitResponseTeam mappings measureActions'
 'kpiCrossLinks shifts subOrgUnits'; }

.action-grid__orgUnit--permission {
  grid-area: permission; }

.action-grid__orgUnit--devices {
  grid-area: devices; }

.action-grid__orgUnit--measureAggregation {
  grid-area: measureAggregation; }

.action-grid__orgUnit--orgUnitResponseTeam {
  grid-area: orgUnitResponseTeam; }

.action-grid__orgUnit--mappings {
  grid-area: mappings; }

.action-grid__orgUnit--measureActions {
  grid-area: measureActions; }

.action-grid__orgUnit--kpiCrossLinks {
  grid-area: kpiCrossLinks; }

.action-grid__orgUnit--shifts {
  grid-area: shifts; }

.action-grid__orgUnit--subOrgUnits {
  grid-area: subOrgUnits; }

/* user Info  */
.action-grid__user-info {
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: 'roles sites'
 'orgUnits areas'
 'devices reports'
 'userTokens userSessions'
 'reportSchedules empty'; }

.action-grid__user-info--roles {
  grid-area: roles; }

.action-grid__user-info--sites {
  grid-area: sites; }

.action-grid__user-info--orgUnits {
  grid-area: orgUnits; }

.action-grid__user-info--areas {
  grid-area: areas; }

.action-grid__user-info--devices {
  grid-area: devices; }

.action-grid__user-info--reports {
  grid-area: reports; }

.action-grid__user-info--userTokens {
  grid-area: userTokens; }

.action-grid__user-info--userSessions {
  grid-area: userSessions; }

.action-grid__user-info--reportSchedules {
  grid-area: reportSchedules; }

/* viewResponseTeam */
.action-grid__viewResponseTeam {
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas: 'users notificationTypes'; }

.action-grid__viewResponseTeam:empty {
  display: none; }

.action-grid__viewResponseTeam .wf-tile {
  min-height: 124px; }

.action-grid__viewResponseTeam--users {
  grid-area: users; }

.action-grid__viewResponseTeam--notificationTypes {
  grid-area: notificationTypes; }

/* selectDeviceAdapterType */
.action-grid__device-types {
  grid-template-columns: repeat(4, 1fr); }

/* variables */
.variables-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px; }

.variables-grid:empty {
  display: none; }

.variables-grid .wf-tile {
  min-height: 124px; }

.i4c-advanced-filter-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: grid;
  grid-template-columns: auto min-content;
  overflow: hidden; }

.i4c-advanced-filter-head {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: auto;
  padding: 0 15px;
  height: 100%; }

.i4c-advanced-filter-head .tab-content {
  flex: 1 auto;
  height: 1px;
  overflow-y: auto;
  margin: 0 -15px;
  padding: 0 15px; }

.i4c-filter-settings {
  max-width: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  border-left: 1px solid var(--i4c-panel-border-color);
  background: #fff; }

.i4c-advanced-filter-content .wf-collapse-settings {
  padding: 0;
  border: none;
  box-shadow: none; }

/* Cluster / tree chart legend */
.wf-cluster-chart {
  background: #eee; }

.wf-cluster-chart .wf-chart-legend {
  text-align: left; }

.svg-foreign-object body {
  background: #fff; }

/* Delta Time Chart */
.wf-chart-delta-time {
  width: 100%; }

.wf-chart-delta-time.time-delta {
  height: 180px; }

.wf-chart-delta-time.absolute-values {
  height: 300px; }

.wf-chart-delta-time-subchart {
  width: 100%;
  height: 120px; }

.wf-chart-delta-time-subchart .c3-axis-x {
  display: none; }

/* Gant chart styles*/
.axis path,
.axis line {
  fill: none;
  stroke: var(--i4c-chart-ticks-color);
  shape-rendering: crispEdges; }

.wf-legend-item-text {
  font-size: 12px; }

.pane {
  cursor: move;
  fill: none;
  pointer-events: all; }

.gantt-chart-container {
  cursor: move;
  pointer-events: all; }

.wf-gantt-chart-container {
  max-height: 550px;
  overflow-y: scroll;
  overflow-x: hidden; }

.wf-gantt-bar {
  cursor: default !important; }

.wf-gantt-x-axis {
  cursor: move;
  pointer-events: all; }

.gantt-chart .x.axis .tick line {
  stroke: var(--i4c-chart-ticks-color);
  stroke-dasharray: 2, 5; }

.gantt-chart .y.axis .tick text {
  fill: var(--i4c-chart-y-label-foreground);
  font-weight: bold; }

.gantt-chart .y.axis .domain {
  visibility: hidden; }

.wf-goals-chart {
  position: absolute;
  height: 350px;
  padding-top: 50px; }

.wf-goals-chart .c3-grid line {
  stroke: #0E79B6; }

.wf-goals-chart .c3-grid text {
  fill: #0E79B6; }

/* Load Profile Chart */
.wf-chart-load-profile {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 350px; }

.wf-chart-load-profile.wf-chart-subchart {
  width: 100%;
  height: 84px; }

/* Hide the x-axis on the subchart */
.wf-chart-load-profile .c3-brush + .c3-axis-x {
  visibility: hidden; }

/*------------------------------------------------
    Sanky Diagramm Styles                 
-------------------------------------------------*/
.chart-sankey .node text {
  pointer-events: none;
  text-shadow: 0 1px 0 #fff;
  font-family: inherit; }

.chart-sankey .node rect {
  cursor: move;
  fill-opacity: .8;
  shape-rendering: crispEdges;
  stroke-width: 2px;
  stroke-opacity: .9; }

.chart-sankey .node text.node-icon.wf.item-assigned.clickable {
  font-family: 'WFIconFont';
  fill: initial !important; }

.chart-sankey .link {
  stroke: #c5c5c5;
  stroke-opacity: .3;
  fill: none; }

.chart-sankey .link:hover {
  stroke: #757575 !important;
  stroke-opacity: .4; }

.sankey-legend {
  display: flex;
  justify-content: center;
  margin: 10px; }

.sankey-legend .node-full,
.sankey-legend .has-children,
.sankey-legend .node-end {
  border: 1px solid #363636;
  width: 10px;
  height: 10px;
  display: inline-block;
  margin: 0 5px; }

.sankey-legend .node-full {
  background: #c1c1c1; }

.sankey-legend .has-children {
  background: linear-gradient(-45deg, #9b9b9d 15%, #dadada 15%, #dadada 40%, #9b9b9d 40%, #9b9b9d 70%, #dadada 70%, #dadada 100%, #dadada 100%, #9b9b9d 100%); }

.sankey-legend .node-end {
  background: #ffffff; }

.sankey-chart {
  position: absolute; }

.sankey-chart > svg {
  overflow: visible !important; }

.wf-activities-payback-scatter .c3-shape.c3-circle {
  opacity: 1 !important; }

.wf-activities-payback-scatter .c3-region {
  fill: transparent; }

.wf-activities-payback-scatter .c3-region.wf-measures-payback-r0 rect,
.wf-activities-payback-scatter .c3-region.vw-measures-payback-r0 rect {
  fill: rgba(16, 141, 210, 0.4); }

.wf-activities-payback-scatter .c3-region.wf-measures-payback-r1 rect,
.wf-activities-payback-scatter .c3-region.vw-measures-payback-r1 rect {
  fill: rgba(16, 141, 210, 0.2); }

.wf-activities-payback-scatter .c3-region.wf-measures-payback-r2 rect,
.wf-activities-payback-scatter .c3-region.vw-measures-payback-r2 rect {
  fill: rgba(16, 141, 210, 0.05); }

.wf-activities-payback-scatter .c3-region.wf-measures-payback-r3 rect,
.wf-activities-payback-scatter .c3-region.vw-measures-payback-r3 rect {
  fill: #ffffff; }

/*--------------------------------------------------
    Sub-chart style
--------------------------------------------------*/
.wf-chart-delta-absolute {
  /* background: #ffffff;
    padding-bottom: 15px;
    padding-top: 15px; */ }

.wf-chart-subchart {
  /* margin: 0 0 20px 0; */ }

.wf-subchart {
  width: 100%;
  /* height: 84px; */ }

.wf-zoom-chart {
  width: 100%;
  height: 84px; }

.wf-chart-subchart-labels {
  width: 100%;
  text-align: center; }

.wf-chart-subchart-labels .btn {
  display: inline-block;
  font-size: 11px;
  line-height: 18px; }

.wf-chart-subchart-labels .label {
  font-weight: normal;
  line-height: 17px;
  display: inline-block; }

.wf-chart-subchart .c3-brush .background {
  visibility: visible !important;
  fill: rgba(0, 0, 0, 0.1); }

.wf-chart-hint {
  font-size: 11px;
  text-align: center;
  color: #666666; }

/*-----------------------------------
   D3 cluster / tree diagramm
-----------------------------------*/
.node *,
.node .node-label {
  font-size: 9pt;
  text-shadow: 1px 1px 1px #ffffff; }

.node .node-label {
  font-weight: bold; }

.node .node-icon {
  font-size: 14px; }

.node .toggle {
  cursor: pointer;
  font-size: 14px;
  fill: var(--i4c-brand-color); }

.node .fill {
  cursor: pointer;
  font-size: 14px;
  fill: #ffffff; }

.node input[type=checkbox] {
  margin: 0; }

.node input[type=radio] {
  margin: 0; }

path.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px; }

.nodeCircle.has-children,
.nodeCircle.expanded {
  fill: #76AF2A;
  cursor: pointer; }

.link.mapping-assigned {
  stroke: #58B3F0; }

.link.mapping-assigned-ancestor {
  stroke: #c2c2c2; }

.link.mapping-assigned-descendant {
  stroke: #c2c2c2; }

.node-label.item-assigned-descendant {
  fill: #333333;
  font-size: 11pt; }

.node-label.item-assigned-ancestor,
.node-icon.item-assigned-ancestor {
  fill: #AAAAAA; }

.node:hover .node-label.clickable {
  stroke: black;
  stroke-width: .25px; }

.item-assigned {
  fill: #363636; }

.node-icon.item-assigned {
  fill: var(--i4c-brand-color); }

.wf-zooming-controls {
  position: absolute;
  z-index: 1;
  right: 15px;
  bottom: 15px; }

.templink {
  fill: none;
  stroke: var(--i4c-accent-color);
  stroke-width: 3px; }

.ghostCircle.show {
  display: block; }

.ghostCircle,
.activeDrag .ghostCircle {
  display: none; }

.node circle {
  fill: #ffffff;
  stroke: var(--i4c-brand-color);
  stroke-width: 1.5px;
  cursor: pointer;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  -webkit-transition: all 300ms;
  transition: all 300ms; }

.d3-tree-tooltip {
  position: absolute;
  z-index: 10030;
  padding: 5px 10px;
  background-color: #333;
  border-radius: 4px;
  font-family: "Helvetica Neue",
 Helvetica,
 Arial,
 sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: bold;
  line-height: 1.42857143;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  white-space: normal;
  line-break: auto;
  color: white;
  pointer-events: none; }

/* -Fix / Woraround for users entity tree- */
.node-label.item-assigned-ancestor {
  fill: #000; }

.link.mapping-assigned-ancestor,
.link.mapping-assigned-descendant {
  stroke: #888888; }

text.node-checked {
  fill: var(--i4c-accent-color) !important;
  stroke: none; }

text.node-checked:hover {
  stroke: var(--i4c-accent-color) !important; }

.link.node-checked {
  stroke: var(--i4c-accent-color) !important; }

/*--------------------------------------------------
    Chart containers and panels
--------------------------------------------------*/
.wf-chart-block {
  position: relative;
  z-index: 3;
  margin-bottom: 20px; }

.wf-chart-title .wf-title {
  color: var(--i4c-chart-title-color);
  font-size: 16px; }

.wf-chart-title .wf-title i {
  font-size: var(--i4c-chart-title-i-font-size); }

.wf-chart-title .wf-consumption-unit {
  color: var(--i4c-chart-title-unit-color);
  margin-top: 0; }

.wf-chart-body .c3 {
  max-width: 100%; }

.wf-chart-legend {
  text-align: center;
  margin: 5px;
  padding: 3px 0; }

.wf-legend-label {
  line-height: 15px; }

/*--------------------------------------------------
    Chart Tables
--------------------------------------------------*/
.wf-chart-table th:first-child {
  padding-left: 20px; }

.wf-chart-table th:last-child {
  padding-right: 20px; }

/*--------------------------------------------------
    Chart Values Hubs and Blocks
--------------------------------------------------*/
.wf-chart-value-hubs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(246px, 1fr));
  grid-template-rows: auto;
  gap: 16px 8px;
  padding: 0px 16px 16px 16px;
  background-color: #ffffff; }

.wf-chart-value-hub {
  display: inline-block;
  border-left: 3px solid #cccccc;
  padding-left: 12px; }

.wf-chart-value-hub-title {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  text-overflow: ellipsis; }

/*--------------------------------------------------
    Chart Components
--------------------------------------------------*/
.c3-barchart-clickable .c3-event-rect {
  cursor: pointer; }

.c3 svg {
  font-size: 12px; }

.c3-line {
  stroke-width: 2px; }

.c3-brush .extent {
  fill-opacity: 0.6;
  transform: scaleY(0.65) translateY(17px); }

.resize > rect {
  fill: #5bc0de; }

.extent {
  fill: #ffffff; }

/* Axis ticks and labels elements*/
.c3 .tick text {
  font-size: 10px;
  fill: var(--i4c-chart-ticks-color); }

/* Tooltip header 
 * Table tooltip root class for the chart 
 **/
.c3-tooltip th {
  height: 25px;
  padding-top: 5px;
  background-color: var(--i4c-chart-tooltip-header-background);
  background-image: var(--i4c-chart-tooltip-header-background-img);
  color: var(--i4c-chart-tooltip-header-foreground); }

/* C3 data labels */
.c3-texts .c3-text {
  font-size: 10px; }

.c3-axis-x-label {
  fill: var(--i4c-axis-x-label-fill); }

/* Axis ticks and labels elements*/
.tick line,
.tick text {
  fill: var(--i4c-chart-ticks-color); }

/* Axis line*/
.domain {
  /* todo should be a var */
  stroke: #8994a0; }

/*--------------------------------------------------
    Usecase specific chart components styles
--------------------------------------------------*/
.wf-tick-lines-hidden .tick line {
  visibility: hidden !important; }

.wf-chart-max-line line {
  stroke: var(--i4c-chart-max-line-color);
  stroke-dasharray: 5, 5; }

.wf-chart-max-line text {
  fill: var(--i4c-chart-max-line-color); }

.wf-chart-min-line line {
  stroke: var(--i4c-chart-min-line-color);
  stroke-dasharray: 5, 5; }

.wf-chart-min-line text {
  fill: var(--i4c-chart-min-line-color); }

.wf-chart-avg-line line {
  stroke: var(--i4c-chart-avg-line-color);
  stroke-dasharray: 5, 5; }

.wf-chart-avg-line text {
  fill: var(--i4c-chart-avg-line-color); }

/* Hide the data labels for goal data set */
.wf-kpi-yearly-breakdown-chart .c3-chart-text:nth-child(2) {
  visibility: hidden !important; }

.wf-kpi-monthly-chart .c3-chart-texts .c3-chart-text:nth-child(2),
.wf-kpi-monthly-chart .c3-chart-texts .c3-chart-text:nth-child(3),
.wf-chart-monthly-reports .c3-chart-texts .c3-chart-text:nth-child(2),
.wf-chart-monthly-reports .c3-chart-texts .c3-chart-text:nth-child(3),
.wf-efficiency-chart .c3-chart-texts .c3-chart-text:nth-child(2),
.wf-efficiency-chart .c3-chart-texts .c3-chart-text:nth-child(3),
.wf-base-load-chart .c3-chart-texts .c3-chart-text:nth-child(3) {
  visibility: hidden; }

.wf-kpi-yearly-breakdown-chart .c3-legend-item:nth-child(1) .c3-legend-item-tile {
  fill: transparent !important;
  stroke: #cfd7d9; }

/*--------------------------------------------------
    Usecase specific chart components styles
--------------------------------------------------*/
.wf-chart-monthly-reports .c3-grid line {
  stroke: #0E79B6; }

.wf-chart-monthly-reports .c3-grid text {
  fill: #0E79B6; }

.wf-controlbar {
  position: relative; }

.panel-heading .wf-controlbar {
  margin-top: -5px; }

.wf-controlbar.absolute {
  top: 0;
  right: 0;
  width: 100%; }

/* .wf-controlbar .btn-group > .btn,
.wf-controlbar .btn-group-vertical > .btn {
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
} */
.wf-controlbar .btn.action-button {
  width: 30px;
  height: 30px;
  padding: 0; }

.btn-collapse .collapse-icon:after {
  display: inline-block;
  margin-left: 5px;
  font-family: 'FontAwesome';
  font-style: normal;
  content: "\f054";
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg); }

.btn-collapse[aria-expanded="true"] .collapse-icon:after,
.panel[open] .btn-collapse .collapse-icon:after {
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg); }

/*!
 * Stylesheet for the Date Range Picker, for use with Bootstrap 3.x
 *
 * Copyright 2013 Dan Grossman ( http://www.dangrossman.info )
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Built for http://www.improvely.com
 */
.daterangepicker.dropdown-menu {
  max-width: none;
  z-index: 3000; }

.daterangepicker.opensleft .ranges,
.daterangepicker.opensleft .calendar {
  float: left;
  margin: 4px; }

.daterangepicker.opensright .ranges,
.daterangepicker.opensright .calendar {
  float: right;
  margin: 4px; }

.daterangepicker.single .ranges,
.daterangepicker.single .calendar {
  float: none; }

.daterangepicker .ranges {
  width: 160px;
  text-align: left; }

.daterangepicker .ranges .range_inputs > div {
  float: left; }

.daterangepicker .ranges .range_inputs > div:nth-child(2) {
  padding-left: 11px; }

.daterangepicker .calendar {
  display: none;
  max-width: 270px; }

.daterangepicker.show-calendar .calendar {
  display: block; }

.daterangepicker .calendar.single .calendar-date {
  border: none; }

.daterangepicker .calendar th,
.daterangepicker .calendar td {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  white-space: nowrap;
  text-align: center;
  min-width: 32px; }

.daterangepicker .daterangepicker_start_input label,
.daterangepicker .daterangepicker_end_input label {
  color: #333;
  display: block;
  font-size: 11px;
  font-weight: normal;
  height: 20px;
  line-height: 20px;
  margin-bottom: 2px;
  text-shadow: #fff 1px 1px 0px;
  text-transform: uppercase;
  width: 74px; }

.daterangepicker .ranges input {
  font-size: 11px; }

.daterangepicker .ranges .input-mini {
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #555;
  display: block;
  font-size: 11px;
  height: 30px;
  line-height: 30px;
  vertical-align: middle;
  margin: 0 0 10px 0;
  padding: 0 6px;
  width: 74px; }

.daterangepicker .ranges ul {
  list-style: none;
  margin: 0;
  padding: 0; }

.daterangepicker .ranges li {
  font-size: 13px;
  background: #f5f5f5;
  border: 1px solid #f5f5f5;
  color: #08c;
  padding: 3px 12px;
  margin-bottom: 8px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  cursor: pointer; }

.daterangepicker .ranges li.active,
.daterangepicker .ranges li:hover {
  background: #08c;
  border: 1px solid #08c;
  color: #fff; }

.daterangepicker .calendar-date {
  border: 1px solid #ddd;
  padding: 4px;
  border-radius: 4px;
  background: #fff; }

.daterangepicker .calendar-time {
  text-align: center;
  margin: 8px auto 0 auto;
  line-height: 30px; }

.daterangepicker {
  position: absolute;
  background: #fff;
  top: 100px;
  left: 20px;
  padding: 4px;
  margin-top: 1px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px; }

.daterangepicker.opensleft:before {
  position: absolute;
  top: -7px;
  right: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: ''; }

.daterangepicker.opensleft:after {
  position: absolute;
  top: -6px;
  right: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  border-left: 6px solid transparent;
  content: ''; }

.daterangepicker.opensright:before {
  position: absolute;
  top: -7px;
  left: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: ''; }

.daterangepicker.opensright:after {
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  border-left: 6px solid transparent;
  content: ''; }

.daterangepicker table {
  width: 100%;
  margin: 0; }

.daterangepicker td,
.daterangepicker th {
  text-align: center;
  width: 20px;
  height: 20px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap; }

.daterangepicker td.off {
  color: #999; }

.daterangepicker td.disabled {
  color: #999; }

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
  background: #eee; }

.daterangepicker td.in-range {
  background: #ebf4f8;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0; }

.daterangepicker td.start-date {
  -webkit-border-radius: 4px 0 0 4px;
  -moz-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px; }

.daterangepicker td.end-date {
  -webkit-border-radius: 0 4px 4px 0;
  -moz-border-radius: 0 4px 4px 0;
  border-radius: 0 4px 4px 0; }

.daterangepicker td.start-date.end-date {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px; }

.daterangepicker td.active,
.daterangepicker td.active:hover {
  background-color: #357ebd;
  border-color: #3071a9;
  color: #fff; }

.daterangepicker td.week,
.daterangepicker th.week {
  font-size: 80%;
  color: #ccc; }

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
  font-size: 12px;
  padding: 1px;
  height: auto;
  margin: 0;
  cursor: default; }

.daterangepicker select.monthselect {
  margin-right: 2%;
  width: 56%; }

.daterangepicker select.yearselect {
  width: 40%; }

.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.ampmselect {
  width: 50px;
  margin-bottom: 0; }

.daterangepicker_start_input {
  float: left; }

.daterangepicker_end_input {
  float: left;
  padding-left: 11px; }

.daterangepicker th.month {
  width: auto; }

/*--- bootstrap-datetimepicker-widget dropdown-menu fix --- */
.bootstrap-datetimepicker-widget.dropdown-menu thead:before {
  background: transparent;
  border-bottom: none; }

filter-header {
  position: relative;
  display: grid;
  grid-template-columns: 2fr minmax(min-content, 1fr) min-content;
  grid-template-areas: 'search filter load_u_save_filters';
  align-items: center; }

filter-header .filter-wrapper {
  display: flex;
  align-items: center;
  border-radius: var(--i4c-border-radius); }

filter-header .search__input-wrapper {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 0;
  border-top-left-radius: var(--i4c-border-radius);
  border-bottom-left-radius: var(--i4c-border-radius); }

filter-header .search__input {
  position: relative;
  width: 100%;
  display: block;
  padding: 6px 12px;
  padding-left: 36px;
  padding-right: 42.5px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: none;
  border-radius: var(--i4c-border-radius);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; }

filter-header .filter-wrapper .rest-btn {
  border-radius: 0;
  border-top-right-radius: var(--i4c-border-radius);
  border-bottom-right-radius: var(--i4c-border-radius); }

filter-header .search__input:focus {
  border-color: #66afe9;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }

filter-header .search__input::placeholder {
  color: #999;
  opacity: 1; }

filter-header .search__input::after {
  position: absolute;
  left: 10px;
  top: 8px;
  z-index: 5;
  font-family: 'WFIconFont';
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size: 14px;
  line-height: 14px;
  color: #bbb;
  content: "\e6b5"; }

filter-header .feedback {
  position: absolute;
  top: 0;
  right: 36px;
  z-index: 2;
  display: block;
  width: 34px;
  height: 34px;
  line-height: 34px;
  text-align: center;
  pointer-events: none; }

filter-header .filter-wrapper .btn-group .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0px; }

filter-header .btn:is(.save-filter-button, .favorites-filter-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--i4c-border-radius, 4px);
  padding: 0px; }

/* HACCP highlight colors */
.haccp-off {
  background: black;
  color: white; }

.haccp-defrost {
  background: #760808;
  color: white; }

.haccp-door-open {
  background: #C0BC00;
  color: white; }

.haccp-cooling-n-4 {
  background: #5A8AC6;
  color: black; }

.haccp-cooling-n-3 {
  background: #82A6D4;
  color: black; }

.haccp-cooling-n-2 {
  background: #ABC3E2;
  color: black; }

.haccp-cooling-n-1 {
  background: #D3DFF0;
  color: black; }

.haccp-cooling-0 {
  /*no special coloring*/ }

.haccp-cooling-p-1 {
  background: #FBD8DA;
  color: black; }

.haccp-cooling-p-2 {
  background: #FAB3B5;
  color: black; }

.haccp-cooling-p-3 {
  background: #F98E90;
  color: black; }

.haccp-cooling-p-4 {
  background: #F8696B;
  color: black; }

.haccp-defrost-icon,
.haccp-off-icon,
.haccp-door-open-icon {
  display: none; }

.haccp-off > .haccp-off-icon {
  display: inline-block; }

.haccp-defrost > .haccp-defrost-icon {
  display: inline-block; }

.haccp-door-open > .haccp-door-open-icon {
  display: inline-block; }

/* Defrost plan highlight colors */
.defrost-plan-cooling-n-4 {
  background: #5A8AC6;
  color: black; }

.defrost-plan-cooling-n-3 {
  background: #82A6D4;
  color: black; }

.defrost-plan-cooling-n-2 {
  background: #ABC3E2;
  color: black; }

.defrost-plan-cooling-n-1 {
  background: #D3DFF0;
  color: black; }

/* Temperature Conformity highlight colors */
.temperature-conformity-cooling-n-4 {
  background: #5A8AC6;
  color: black; }

.temperature-conformity-cooling-n-3 {
  background: #82A6D4;
  color: black; }

.temperature-conformity-cooling-n-2 {
  background: #ABC3E2;
  color: black; }

.temperature-conformity-cooling-n-1 {
  background: #D3DFF0;
  color: black; }

.temperature-conformity-cooling-0 {
  /*no special coloring*/ }

.temperature-conformity-cooling-p-1 {
  background: #FBD8DA;
  color: black; }

.temperature-conformity-cooling-p-2 {
  background: #FAB3B5;
  color: black; }

.temperature-conformity-cooling-p-3 {
  background: #F98E90;
  color: black; }

.temperature-conformity-cooling-p-4 {
  background: #F8696B;
  color: black; }

/* Running times highlight colors */
.running-time-4 {
  background: #5A8AC6;
  color: black; }

.running-time-3 {
  background: #82A6D4;
  color: black; }

.running-time-2 {
  background: #ABC3E2;
  color: black; }

.running-time-1 {
  background: #D3DFF0;
  color: black; }

.running-time-0 {
  /*no special coloring*/ }

.running-time-valve-icon,
.running-time-to-icon,
.running-time-tc-icon,
.running-time-cooling-icon {
  display: none; }

.running-time-valve > .running-time-valve-icon {
  display: inline-block; }

.running-time-to > .running-time-to-icon {
  display: inline-block; }

.running-time-tc > .running-time-tc-icon {
  display: inline-block; }

.running-time-cooling > .running-time-cooling-icon {
  display: inline-block; }

/*------------------------------------------------
    Global status bar 
-------------------------------------------------*/
.wf-shell .wf-shell-header {
  position: absolute;
  width: 100%;
  height: var(--primary-header-height);
  background-color: var(--i4c-header-background);
  padding-left: 120px;
  padding-right: 20px;
  border: none;
  border-radius: 0; }

.wf-shell .wf-shell-header .wf-shell-header-primary {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  float: left;
  height: 100%; }

.wf-shell .wf-shell-header .wf-shell-header-secondary {
  height: 100%;
  float: right; }

.wf-shell-header-items {
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  height: 100%; }

.wf-shell-header-item {
  display: flex;
  align-items: stretch;
  z-index: 10010;
  height: 100%;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -webkit-transition: all .3s ease;
  transition: all .3s ease; }

.wf-shell-header-item .disabled {
  pointer-events: none; }

.wf-shell-header-item:has(.disabled) {
  cursor: not-allowed; }

.wf-shell-header-item i {
  font-size: 16px;
  margin: 0 !important; }

.wf-shell-header-item .x-overflow-ellipsis,
.wf-shell-header-item .h-overflow-ellipsis,
.wf-shell-header-item .overflow-x-ellipsis {
  max-width: 150px; }

.wf-shell-header-item .clickable {
  -moz-transition: background-color .3s ease;
  -o-transition: background-color .3s ease;
  -webkit-transition: background-color .3s ease;
  transition: background-color .3s ease; }

.wf-shell-header-item .clickable:hover,
.wf-shell-header-item .clickable.open,
.wf-shell-header-item .active {
  background-color: #161616; }

.wf-shell-header-item .clickable:hover .wf-shell-header-item-icon {
  color: #ffffff; }

.wf-shell-header-item .clickable:hover > :not(.alarms-by-prio) path {
  fill: #ffffff; }

.wf-shell-header-item .clickable:hover > div > i,
.wf-shell-header-item .clickable:hover .wf-shell-header-item-icon > i {
  color: #ffffff; }

.wf-shell-header-item .clickable.open,
.wf-shell-header-item .active {
  background-color: #161616; }

.wf-shell-header-item-body .label-warning {
  background: #00000080 !important; }

.wf-shell-header-item-content {
  display: flex;
  align-items: center; }

.wf-shell-header-item-content .wf-shell-header-item-subtitle {
  color: #92a9b8;
  display: block; }

.wf-shell-header-item-icon {
  display: flex !important;
  justify-content: center;
  align-items: center;
  height: 46px;
  overflow: hidden;
  text-align: center;
  background-size: 90%; }

.wf-shell-header-items .wf-connectionMonitor,
.wf-connection-conitor {
  max-width: none;
  order: 1; }

.wf-shell-header-items .wf-alarmMonitor,
.wf-alarm-monitor {
  order: 2; }

.wf-shell-header-items .wf-notificationText,
.wf-notification-text {
  order: 3; }

.wf-shell-header-items .wf-customerSelection,
.wf-customer-selection {
  order: 3; }

.wf-shell-header-items .wf-accountInfo,
.wf-account-info {
  order: 4; }

.wf-shell-header-items .wf-languageSelection,
.wf-language-selection {
  order: 3; }

.wf-shell-header-items .wf-accountPassword,
.wf-account-password {
  order: 5; }

.wf-shell-header-items .wf-accountLogout,
.wf-account-logout {
  order: 6; }

.wf-shell-header-items .wf-notificationText {
  width: 300px;
  max-width: none; }

.navbar {
  border-radius: 0;
  margin-bottom: 0;
  min-height: var(--primary-header-height); }

.navbar::after,
.navbar::before {
  content: none !important; }

.wf-shell-header-item .clickable:hover,
.wf-shell-header-item .clickable.open,
.wf-shell-header-item .active {
  background-color: var(--i4c-header-item-background-active);
  color: var(--i4c-header-item-foreground-active); }

.wf-shell-header-item .clickable:hover .wf-shell-header-item-icon {
  color: var(--i4c-header-item-icon-active); }

.wf-shell-header-item .clickable:hover > :not(.alarms-by-prio) path {
  fill: var(--i4c-header-item-icon-active); }

.wf-shell-header-item .clickable:hover > div > i,
.wf-shell-header-item .clickable:hover .wf-shell-header-item-icon > i {
  color: var(--i4c-header-item-icon-active); }

.wf-shell-header-item .clickable.open,
.wf-shell-header-item .active {
  background-color: var(--i4c-header-item-background-active);
  animation: colorAccentToWhite 1.5s infinite; }

.wf-shell-header-item-body {
  color: var(--i4c-header-item-foreground);
  background: var(--i4c-header-item-background);
  width: 100%;
  display: flex;
  align-items: stretch; }

.wf-shell-header-item-content .wf-shell-header-item-title {
  padding-left: 10px; }

.wf-shell-header-item-content .wf-shell-header-item-subtitle {
  color: var(--i4c-header-subtitle); }

.alarm-all span,
.alarms-by-prio span {
  padding-left: 0.2em; }

.alarm-all span {
  font-weight: bold; }

.separate-after::after {
  content: "";
  margin-left: 0.5em;
  background-color: var(--i4c-gray-background);
  width: 2px;
  height: 1em; }

.alarm-all-icon path {
  fill: var(--i4c-header-item-foreground); }

.alarms-by-prio {
  margin-left: 0.5em; }

@media (max-width: 1024px) {
  .wf-shell-header-secondary .wf-shell-header-items {
    position: absolute;
    top: 40px;
    left: 0;
    z-index: 1;
    height: 34px;
    width: 100%;
    padding-left: 95px;
    background: var(--i4c-header-background);
    box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.18); }
  .wf-shell-header-secondary .wf-shell-header-item {
    height: 34px;
    margin-top: 0;
    background: inherit;
    border: 0; }
  .wf-shell #shell-content {
    height: calc(100% - 34px) !important;
    margin-top: 34px; }
  .wf-shell-header-item-body {
    background: transparent; }
  .wf-shell-header-secondary .wf-shell-header-item i,
  .wf-shell-header-secondary .wf-shell-header-item {
    color: var(--i4c-header-item-foreground); }
  .wf-shell-header-secondary .wf-shell-header-item:hover i,
  .wf-shell-header-secondary .wf-shell-header-item:hover {
    color: var(--i4c-header-item-foreground-active); } }

@media only screen and (max-width: 1400px) {
  .wf-shell-header-items .wf-notificationText {
    width: 250px; } }

@media only screen and (max-width: 1200px) {
  .wf-shell-header-items .wf-notificationText {
    width: 200px; } }

@media only screen and (max-width: 1050px) {
  .wf-shell-header-items .wf-notificationText {
    width: 100px; } }

kpi-aggregations-display {
  display: flex;
  flex-direction: column; }

kpi-time-aggregations-display {
  display: block;
  margin: 0 0 20px 0; }

/*------------------------------------------------
    Leavelet map styles   
-------------------------------------------------*/
.marker-cluster {
  font-weight: bold; }

.marker-cluster-small {
  background-color: var(--i4c-map-cluster-sm-background);
  color: var(--i4c-map-cluster-sm-foreground); }

.marker-cluster-small div {
  background-color: var(--i4c-map-cluster-sm-background); }

.marker-cluster-medium {
  background-color: var(--i4c-map-cluster-md-background);
  color: var(--i4c-map-cluster-md-foreground); }

.marker-cluster-medium div {
  background-color: var(--i4c-map-cluster-md-background); }

.marker-cluster-large {
  background-color: var(--i4c-map-cluster-lg-background); }

.marker-cluster-large div {
  background-color: var(--i4c-map-cluster-lg-background);
  color: var(--i4c-map-cluster-lg-foreground); }

.marker-circle-cluster {
  fill: #72af26;
  stroke: #72af26; }

.awesome-marker-icon-custom {
  background-position: -72px 0;
  /* Awesome Marker green color */ }

.awesome-marker-icon-danger {
  background-position: 0 0;
  /* Awesome Marker green color */ }

.awesome-marker-icon-warning {
  background-position: -36px 0;
  /* Awesome Marker green color */ }

.extra-marker {
  background: url("images/markers-default.png") no-repeat 0 0; }

.extra-marker-shadow {
  background: url("images/markers_shadow.png") no-repeat 0 0; }

.extra-marker-custom-color-pin {
  fill: #72af26; }

.extra-marker i {
  justify-content: center;
  flex-wrap: wrap;
  top: 0;
  display: flex !important;
  bottom: 8px !important;
  align-items: center;
  margin-top: 0 !important; }

.leaflet-div-icon {
  background: none;
  border: none; }

.alarm-map-icon path {
  fill: #565656; }

.leaflet-popup-content-wrapper {
  border-radius: 4px; }

.leaflet-popup-content {
  margin: 0; }

.leaflet-popup-close-button {
  z-index: 1; }

.authorize {
  display: none; }

@charset "UTF-8";
/*----------------------------------------------------
    Measure (Mahßnahmen) facts block - bubble style
-----------------------------------------------------*/
.wf-measure-fact-wrapper {
  margin-bottom: 40px; }

.wf-measure-fact {
  padding: 0;
  margin: 5px 5px;
  font-size: 16px;
  text-align: center;
  border-radius: 5px;
  border: 2px solid var(--i4c-main-accent-background);
  background-color: var(--i4c-main-accent-background);
  color: var(--i4c-main-inverted-foreground); }

.wf-measure-fact .wf-consumption-unit {
  color: var(--i4c-main-inverted-foreground);
  font-size: 12px; }

.wf-measure-fact .wf-subtitle {
  color: var(--i4c-main-inverted-foreground);
  /* font-size: 12px; */
  padding-bottom: 5px; }

.wf-panel-body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  padding: 15px;
  background-color: var(--i4c-panel-body-background); }

.wf-panel-body.has-head + .wf-panel-left-hover {
  margin-top: 46px; }

.wf-panel-head.has-subtitle + .wf-panel-body.has-head + .wf-panel-left-hover {
  margin-top: 70px; }

.wf-panel-inner {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0; }

.wf-panel-left-hover {
  position: absolute;
  bottom: 0;
  top: 0;
  z-index: 1000; }

/* Offcanvas filter panel styles*/
.wf-offcanvas-sidebar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1000;
  width: 355px;
  min-height: 500px;
  background: #ffffff;
  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.05); }

.wf-offcanvas-sidebar.slide-out-left {
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%); }

.wf-offcanvas-toggle {
  position: absolute;
  top: 15px;
  right: -35px;
  z-index: 1000;
  padding: 10px;
  border-radius: 0 3px 3px 0;
  line-height: 14px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }

.wf-offcanvas-toggle:focus {
  border-radius: 0 3px 3px 0; }

.wf-offcanvas-toggle.wf-admin-filter-btn {
  margin-top: 70px; }

.wf-panel-head.has-top-toolbar ~ .wf-panel-left-hover .wf-offcanvas-sidebar .wf-offcanvas-toggle {
  margin-top: 55px; }

.wf-offcanvas-sidebar.slideOutLeftVisible .wf-offcanvas-toggle .icon:before {
  content: "\e603";
  /*wf-filter*/ }

.wf-offcanvas-sidebar.slideInLeft .wf-offcanvas-toggle .icon:before {
  content: "\e60c";
  /*wf-arrow-metro*/
  display: inline-block;
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg); }

/* Panel custom fields */
.wf-panel-body-content .wf-range-picker.wf-range-picker-lg .input-group-sm input {
  height: 34px !important; }

/* ----------------------------------
Panel footer 
---------------------------------- */
.wf-panel-footer {
  position: relative;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  width: 100%;
  background: var(--i4c-panel-footer-background);
  overflow: hidden;
  padding: 0px 15px;
  border-top: 1px solid var(--i4c-panel-footer-background);
  border-top: 1px solid var(--i4c-panel-border-color);
  white-space: nowrap; }

.wf-panel-footer-actionbar {
  height: 26px; }

.wf-panel-footer-actionbar button {
  padding: 2px 10px; }

.wf-panel-footer-content {
  width: auto;
  overflow: hidden; }

.wf-overwrite-white-space-pagination-panel-footer {
  white-space: normal !important;
  /* need for Mozilla */ }

/*----------------------------------
    Panel footer contents
----------------------------------*/
.wf-panel-footer .input-required {
  position: absolute;
  top: 50%;
  left: 15px;
  color: #000000;
  transform: translateY(-50%); }

.wf-panel-footer .input-required::after {
  content: none; }

/*------------------------------------------------
    Fallback for panel footer action bar buttons
--------------------------------------------------*/
.wf-panel-lg .wf-panel-footer .wf-panel-footer-actionbar button:first-child:nth-last-child(4),
.wf-panel-lg .wf-panel-footer .wf-panel-footer-actionbar button:first-child:nth-last-child(4) ~ button {
  max-width: 105px;
  overflow: hidden;
  text-overflow: ellipsis; }

.wf-panel-lg .wf-panel-footer .wf-panel-footer-actionbar button:first-child:nth-last-child(3),
.wf-panel-lg .wf-panel-footer .wf-panel-footer-actionbar button:first-child:nth-last-child(3) ~ button {
  max-width: 155px;
  overflow: hidden;
  text-overflow: ellipsis; }

.wf-panel-md .wf-panel-footer .wf-panel-footer-actionbar button:first-child:nth-last-child(4),
.wf-panel-md .wf-panel-footer .wf-panel-footer-actionbar button:first-child:nth-last-child(4) ~ button {
  max-width: 75px;
  overflow: hidden;
  text-overflow: ellipsis; }

.wf-panel-md .wf-panel-footer .wf-panel-footer-actionbar button:first-child:nth-last-child(3),
.wf-panel-md .wf-panel-footer .wf-panel-footer-actionbar button:first-child:nth-last-child(3) ~ button {
  max-width: 95px;
  overflow: hidden;
  text-overflow: ellipsis; }

.wf-panel-sm .wf-panel-footer .wf-panel-footer-actionbar button:first-child:nth-last-child(4),
.wf-panel-sm .wf-panel-footer .wf-panel-footer-actionbar button:first-child:nth-last-child(4) ~ button {
  max-width: 41px;
  overflow: hidden;
  text-overflow: ellipsis; }

/* ----------------------------------
Panel header
---------------------------------- */
.wf-panel-head {
  /* position: relative;
    z-index: 10000; */
  width: 100%;
  height: 45px;
  background: var(--i4c-panel-header-background);
  margin: 0;
  padding: 0 15px;
  -webkit-transform: translateZ(0);
  -webkit-perspective: 1000px;
  -webkit-backface-visibility: hidden; }

.wf-panel-title {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 45px;
  padding: 3px 0;
  font-size: 16px;
  line-height: initial;
  color: var(--i4c-panel-title-color);
  margin: 0;
  font-weight: var(--i4c-panel-title-font-weight); }

.wf-panel-subtitle {
  display: block;
  font-size: 14px;
  line-height: normal;
  color: var(--i4c-panel-subtitle-color); }

.wf-panel-head-controls {
  position: absolute;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 45px; }

.wf-panel-head-control {
  --size: 20px;
  /* margin-left: 10px; */
  display: inline-block;
  height: var(--size);
  aspect-ratio: 1/1;
  font-size: 14px;
  line-height: var(--size);
  text-align: center;
  color: var(--i4c-panel-header-control);
  cursor: pointer;
  transition: all 0.3s; }

.wf-panel-head-control .wf.wf-expand-arrow-out,
.wf-panel-head-control .wf.wf-collapse-arrow-out {
  /* offset optical misalignment between fa and wf icon */
  padding-top: 3px; }

.wf-panel .wf-panel-title > span:first-child,
.wf-panel .wf-panel-title .wf-panel-subtitle {
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  text-overflow: ellipsis; }

.wf-panel-header-error {
  padding-left: 45px !important; }

.wf-panel-header-error:before {
  background: var(--i4c-danger-color) !important;
  content: " ";
  position: absolute;
  padding: 6px;
  border-radius: 50%;
  border: 1px solid white;
  top: 50%;
  transform: translateY(-50%);
  left: 15px; }

.wf-panel-head-variant {
  background-color: var(--i4c-panel-header-variant);
  background-image: url("../images/panel-title-variant-bg.png"); }

.wf-panel-head-variant .wf-panel-head-control {
  color: var(--i4c-panel-header-variant-control); }

.wf-panel-head-control:hover {
  color: var(--i4c-panel-header-control-hover); }

.wf-panel-head-variant .wf-panel-subtitle {
  color: var(--i4c-panel-header-variant-subtitle); }

.wf-panel-toolbar {
  display: flex;
  gap: 4px;
  height: 40px;
  padding: 5px 15px;
  background: var(--i4c-panel-toolbar-background);
  border-bottom: 1px solid var(--i4c-panel-border-color);
  box-shadow: var(--i4c-panel-box-shadow); }

.wf-panel-top-filter {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-areas: "filter";
  grid-template-columns: 1fr;
  max-width: 100%;
  margin-top: 0px;
  padding: 10px 15px;
  background-color: var(--i4c-panel-body-background);
  border-bottom: 1px solid #fff;
  box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.25); }

.wf-panel-top-filter:has(filter-input + filter-button) {
  grid-template-areas: "filter object_filter";
  grid-template-columns: auto min-content;
  gap: 8px; }

.wf-panel-top-filter:has(filter-input.has-counter + filter-button) filter-button {
  --label-height: var(--body-font-size);
  --input-border-offset: 2px;
  align-self: center;
  padding-top: calc(var(--label-height) - var(--input-border-offset)); }

.wf-panel-top-filter filter-button {
  grid-area: object_filter;
  align-self: self-end;
  /* border bottom offset */
  padding-bottom: 1px; }

.wf-panel-top-filter:has(filter-input + .wf-controlbar) {
  grid-template-areas: "filter"
 "controlbar"
 "controlbar_dropdown";
  grid-template-rows: auto; }

.wf-panel-top-filter:has(filter-input + filter-button + .wf-controlbar) {
  grid-template-areas: "filter object_filter"
 "controlbar controlbar";
  grid-template-rows: auto; }

.wf-panel-top-filter .wf-controlbar {
  grid-area: controlbar; }

.wf-panel-top-filter .btn[aria-expanded="true"]:before {
  position: absolute;
  bottom: -9px;
  left: 6px;
  z-index: 1000;
  width: 0;
  height: 0;
  content: " ";
  border: transparent solid 8px;
  border-top-width: 0;
  border-bottom-color: rgba(0, 0, 0, 0.25); }

.wf-panel-top-filter .btn[aria-expanded="true"]:after {
  position: absolute;
  bottom: -9px;
  left: 6px;
  z-index: 1000;
  width: 0;
  height: 0;
  content: " ";
  border: transparent solid 7px;
  border-top-width: 0;
  border-bottom-color: #FAFAFA; }

.wf-panel-top-filter .form-group {
  margin-bottom: 0px; }

/* List groups extension */
.list-group-horizontal .list-group-item {
  display: inline-block;
  margin-bottom: 0;
  margin-left: -4px;
  margin-right: 0; }

.list-group-horizontal .list-group-item:first-child {
  border-top-right-radius: 0;
  border-bottom-left-radius: 4px; }

.list-group-horizontal .list-group-item:last-child {
  border-top-right-radius: 4px;
  border-bottom-left-radius: 0; }

.list-group-horizontal .wf-day-weekend {
  background-color: rgba(255, 225, 90, 0.3); }

.list-group-horizontal .wf-public-holiday {
  background-color: #e3ebed;
  border-left: #2274ac 1px solid; }

/*--------------------------------------------------
   Requesition ( Bedarfsmeldung ) States
--------------------------------------------------*/
.wf-state-deactivation-confirmed.wf-status-number,
.wf-state-deactivation-requested.wf-status-number,
.wf-state-confirmed.wf-status-number,
.wf-state-requested.wf-status-number {
  width: 17px;
  height: 17px;
  margin-left: -1px;
  margin-right: 0px;
  padding-right: 1px;
  border-radius: 50%;
  font-size: 11px;
  line-height: 19px; }

.wf-state-confirmed {
  fill: #51ae30;
  background-color: #51ae30; }

.wf-state-requested {
  fill: #ff871f;
  background-color: #ff871f; }

.wf-state-deactivation-confirmed {
  fill: #aaaaaa;
  background-color: #aaaaaa; }

.wf-state-deactivation-requested {
  fill: #cf252c;
  background-color: #cf252c; }

settings-panel {
  display: block;
  margin-right: -15px;
  margin-left: -15px; }

settings-panel:empty {
  display: none; }

.side-bar {
  position: fixed;
  z-index: 10000;
  overflow: hidden;
  height: 100%;
  width: 95px;
  margin-bottom: 0;
  padding-left: 0;
  background: #fff none repeat scroll 0 0;
  -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
  -ms-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3); }

.side-bar__scrollarea {
  --logo-height: var(--primary-header-height);
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none; }

.side-nav::-webkit-scrollbar,
.side-bar__scrollarea::-webkit-scrollbar {
  display: none; }

/*--- vertical scroll behavior ---*/
/*-- scrollable navigation with fixed header ---*/
.side-nav-scrollarea .side-nav {
  overflow-y: auto;
  width: auto;
  padding-bottom: 95px;
  /* padding-top: 95px; */ }

.side-nav {
  z-index: 1000;
  overflow-x: hidden;
  text-transform: none;
  padding-left: 0;
  list-style: none; }

.side-nav .navbar-brand-logo {
  position: fixed;
  top: 0;
  width: 95px; }

.side-nav__item {
  width: 100%;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--i4c-side-nav-li-border-bottom);
  text-decoration: none;
  cursor: pointer; }

.side-nav__item-content {
  display: flex;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 40px;
  padding: 5px;
  color: var(--i4c-side-nav-a-foreground);
  background-color: var(--i4c-side-nav-a-background);
  text-align: center;
  line-height: 20px;
  text-decoration: none !important;
  border-left: 0 transparent solid;
  -moz-transition: background-color 0.4s;
  -o-transition: background-color 0.4s;
  -webkit-transition: background-color 0.4s;
  transition: background-color 0.4s; }

.side-nav__item:hover,
.side-nav__item:active,
.side-nav__item-content:hover,
.side-nav__item-content:active {
  text-decoration: none !important; }

.side-nav__item.disabled {
  cursor: not-allowed; }

.side-nav__item .link-text {
  padding-top: 5px;
  font-size: 12px;
  line-height: 15px;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  word-break: break-word; }

.side-nav__item.active .side-nav__item-content {
  background-color: var(--i4c-side-nav-a-background-active);
  color: var(--i4c-side-nav-a-foreground-active);
  border-left: none;
  background-image: none;
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none; }

.side-nav__page-edit-icon {
  display: none;
  width: 24px;
  height: var(--i4c-side-nav-icon-size, 40px);
  margin: 0 2px;
  color: var(--i4c-side-nav-a-foreground, #FFFFFF);
  font-size: calc(var(--i4c-side-nav-icon-size, 40px) * 0.5); }

.edit-mode .side-nav__item:hover .side-nav__page-edit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center; }

.edit-mode .side-nav__item:hover:not(.disabled) .link-icon {
  display: none; }

.side-nav__item--add-page-btn {
  display: none;
  width: 24px;
  height: var(--i4c-side-nav-icon-size); }

.side-nav__item--add-page-btn .side-nav__item-content {
  color: var(--i4c-side-nav-a-foreground, #FFFFFF);
  background-color: var(--i4c-success-color); }

.side-nav__item--add-page-btn .fa-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: var(--i4c-side-nav-icon-size);
  margin: 0 2px;
  font-size: calc(var(--i4c-side-nav-icon-size) * 0.5); }

.side-nav__item--add-page-btn:hover .link-text {
  color: var(--i4c-side-nav-a-background); }

.edit-mode .side-nav__item--add-page-btn {
  display: unset; }

/*-----------------------------------
  Navigation Elements
-----------------------------------*/
.side-nav__item-content .link-icon {
  height: var(--i4c-side-nav-icon-size);
  width: 100%;
  display: block; }

.side-nav__item-content .link-icon .icon-path {
  fill: var(--i4c-side-nav-a-foreground); }

.side-nav__item.active .side-nav__item-content .link-icon .icon-path {
  fill: var(--i4c-side-nav-a-icon-active); }

.side-nav__item:hover:not(.disabled) .side-nav__item-content {
  border-left: none;
  background-color: var(--i4c-side-nav-a-background-hover);
  color: var(--i4c-side-nav-a-foreground-hover); }

.side-nav__item:hover:not(.disabled) .side-nav__item-content .link-icon .icon-path {
  fill: var(--i4c-side-nav-a-foreground-hover); }

.side-nav__item:hover:not(.disabled) .side-nav__item-content .link-text {
  color: var(--i4c-side-nav-a-foreground-hover); }

.side-nav__item:hover:not(.disabled) .side-nav__item-content.navbar-brand-logo {
  fill: var(--i4c-side-nav-a-icon-active); }

/* --- #region Main page navigation bar --- */
.side-nav__item.wf-i4 .side-nav__item-content .link-icon .icon-path {
  fill: var(--i4c-brand-color); }

/* Position fix for i4 page icon */
.side-nav .side-nav__item.wf-i4 .link-icon {
  transform: translateX(4px); }

/* Media queries for main navigation */
@media (max-height: 749px) {
  .side-nav > li > a {
    min-height: 70px; }
  .side-nav li a .link-icon {
    display: block;
    height: 35px; }
  .side-nav li a .link-text {
    font-size: 11px;
    font-weight: 500;
    line-height: 10px;
    padding-top: 5px; } }

@media (max-height: 600px) {
  .side-nav > li > a {
    min-height: 60px !important; }
  .side-nav li a .link-icon {
    display: block;
    height: 40px !important;
    margin-top: 0px !important; }
  .side-nav li a .link-text {
    display: none !important; } }

/* Contains the styles for the tile grids module. */
/* this file is deprecated with version 5.6.22 and should be deleted in this version */
/*------------------------------------------------
    Tile widget sizing and size-responsive styles
 -----------------------------------------------*/
/* Tile 2x2 and 3x2 */
[data-sizex='3'][data-sizey='2'] .wf-tile-title {
  /*margin-top: 35px;*/ }

[data-sizex='3'][data-sizey='2'] .wf-tile-subtitle {
  margin-top: 0; }

[data-sizex='3'][data-sizey='2'] .wf-tile-icon {
  /*margin: 35px auto 0 auto;*/ }

/*----------------------------------------------------
    Gridster container width dimensions
    The index represents the maximum columns number
----------------------------------------------------*/
.grid-width-7,
.wf-panel.grid-width-7 {
  width: 935px; }

.grid-width-8,
.wf-panel.grid-width-8 {
  width: 1065px; }

.grid-width-9,
.wf-panel.grid-width-9 {
  width: 1195px; }

.grid-width-10,
.wf-panel.grid-width-10 {
  width: 1325px; }

.grid-width-11,
.wf-panel.grid-width-11 {
  width: 1455px; }

.grid-width-12,
.wf-panel.grid-width-12 {
  width: 1585px; }

.grid-width-13,
.wf-panel.grid-width-13 {
  width: 1715px; }

.grid-width-14,
.wf-panel.grid-width-14 {
  width: 1845px; }

.grid-width-15,
.wf-panel.grid-width-15 {
  width: 1975px; }

.grid-width-16,
.wf-panel.grid-width-16 {
  width: 2105px; }

.grid-width-17,
.wf-panel.grid-width-17 {
  width: 2235px; }

.grid-width-18,
.wf-panel.grid-width-18 {
  width: 2365px; }

.grid-width-19,
.wf-panel.grid-width-19 {
  width: 2495px; }

.grid-width-20,
.wf-panel.grid-width-20 {
  width: 2625px; }

.grid-width-21,
.wf-panel.grid-width-21 {
  width: 2755px; }

.grid-width-22,
.wf-panel.grid-width-22 {
  width: 2885px; }

.grid-width-23,
.wf-panel.grid-width-23 {
  width: 3015px; }

.grid-width-24,
.wf-panel.grid-width-24 {
  width: 3145px; }

.grid-width-25,
.wf-panel.grid-width-25 {
  width: 3275px; }

/*----------------------------------------------------
    Gridster tiles dimensions
----------------------------------------------------*/
/* Y - Axis  */
[data-sizey="3"] {
  height: 380px; }

[data-sizey="4"] {
  height: 510px; }

[data-sizey="5"] {
  height: 640px; }

[data-sizey="6"] {
  height: 770px; }

[data-sizey="7"] {
  height: 900px; }

[data-sizey="8"] {
  height: 1030px; }

[data-sizey="9"] {
  height: 1160px; }

[data-sizey="10"] {
  height: 1290px; }

[data-sizey="11"] {
  height: 1420px; }

[data-sizey="12"] {
  height: 1550px; }

[data-sizey="13"] {
  height: 1680px; }

[data-sizey="14"] {
  height: 1810px; }

[data-sizey="15"] {
  height: 1940px; }

/* X Axis */
[data-sizex="3"] {
  width: 380px; }

[data-sizex="4"] {
  width: 510px; }

/* Tile 3x1 */
[data-sizex='3'][data-sizey='1'] .wf-tile-title {
  font-size: 13px;
  /*margin-top: 35px;*/
  text-align: left; }

[data-sizex='3'][data-sizey='1'] .wf-tile-subtitle {
  margin-top: 0;
  text-align: left; }

[data-sizex='3'][data-sizey='1'] .wf-tile-icon {
  float: left;
  /*margin: 35px 10px 0 35px;*/ }

/*------------------------------------------------
    Tile widget sizing and size-responsive styles
 -----------------------------------------------*/
/* Tile 1x1 */
[data-sizex='1'][data-sizey='1'] .wf-tile-content {
  display: block;
  text-align: center; }

[data-sizex='1'][data-sizey='1'] .wf-tile-body {
  flex-direction: column;
  align-items: center;
  justify-content: center; }

[data-sizex='1'][data-sizey='1'] .wf-tile-value {
  font-size: 18px;
  line-height: 18px;
  display: block;
  padding: 0 5px; }

[data-sizex='1'][data-sizey='1'] .wf-tile-value-subtitle,
[data-sizex='1'][data-sizey='1'] .wf-tile-subtitle {
  display: none; }

[data-sizex='1'][data-sizey='1'],
.wf-tile-1-1 {
  text-align: center; }

/* Tile 2x1 */
[data-sizex='2'][data-sizey='1'] .wf-tile-title {
  font-size: 13px;
  text-align: left; }

[data-sizex='2'][data-sizey='1'] .wf-tile-subtitle {
  margin-top: 0;
  text-align: left; }

[data-sizex='2'][data-sizey='1'] .wf-tile-icon {
  float: left; }

/* Tile 1x2 */
[data-sizex='1'][data-sizey='2'] .wf-tile-body {
  flex-direction: column;
  align-items: center;
  justify-content: center; }

[data-sizex='1'][data-sizey='2'] .wf-tile-subtitle {
  margin-top: 0; }

/* Tile 2x2 */
[data-sizex='2'][data-sizey='2'] .wf-tile-title {
  text-align: left; }

[data-sizex='2'][data-sizey='2'] .wf-tile-subtitle {
  margin-top: 0; }

/*----------------------------------------------------
    Gridster container width dimensions
    The index represents the maximum columns number
----------------------------------------------------*/
.grid-width-1,
.wf-panel.grid-width-1 {
  width: 155px; }

.grid-width-2,
.wf-panel.grid-width-2 {
  width: 285px; }

.grid-width-3,
.wf-panel.grid-width-3 {
  width: 415px; }

.grid-width-4,
.wf-panel.grid-width-4 {
  width: 545px; }

.grid-width-5,
.wf-panel.grid-width-5 {
  width: 675px; }

.grid-width-6,
.wf-panel.grid-width-6 {
  width: 805px; }

/*----------------------------------------------------
    Gridster tiles dimensions
----------------------------------------------------*/
/* Y Axis */
[data-sizey="1"] {
  height: 120px; }

[data-sizey="2"] {
  height: 250px; }

/* X Axis */
[data-sizex="1"] {
  width: 120px; }

[data-sizex="2"] {
  width: 250px; }

/* Primitive components */
.wf-form-group-static {
  margin-bottom: 10px; }

.wf-form-group-static .control-label,
.wf-control-label,
.wf-text-label {
  color: #999999;
  margin-bottom: 5px; }

.wf-form-group-field {
  font-size: 14px;
  line-height: 14px; }

.addEditEntityVariablePanel .editing-item-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: 'timestamp value' 'actions actions';
  gap: .5em 1em; }

.addEditEntityVariablePanel.editing-item-container__timestamp {
  grid-area: timestamp; }

.addEditEntityVariablePanel.editing-item-container__value {
  grid-area: value; }

.addEditEntityVariablePanel input-field.editing-item-container__value .form-control-validation {
  --label-font-size-offset: -14px; }

.addEditEntityVariablePanel .editing-item-container__actions {
  display: flex;
  justify-content: end;
  gap: .5em;
  grid-area: actions; }

.addEditEntityVariablePanel .editing-item-container:has(.editing-item-container__validation) {
  grid-template-areas: 'timestamp value' 'actions actions' 'validation validation'; }

.addEditEntityVariablePanel .editing-item-container__validation {
  grid-area: validation; }

.add-edit-role-package-panel .wf-search-selected-item-wrapper:empty {
  display: none !important; }

.add-edit-role-package-panel .wf-search-selected-item-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  background: var(--i4c-light-background);
  border: 1px solid var(--i4c-light-border-color);
  border-radius: var(--i4c-border-radius);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }

iframe {
  border: 1px solid var(--i4c-tile-border-color); }

table .input-small input {
  height: 24px; }

.app-preview-url {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: inline-flex;
  width: 100%;
  height: 34px;
  border-bottom: 1px solid #fff;
  box-shadow: 0 2px 5px -3px rgba(0, 0, 0, 0.25); }

.app-preview-url .form-control {
  border: none;
  cursor: auto;
  border-radius: 20px 0 0 20px !important;
  margin: 3px 0 0 10px;
  padding: 0px 15px !important;
  height: 27px; }

.app-preview-url button {
  z-index: 0;
  height: 27px;
  margin: 3px 10px 0 0;
  padding: 0px 10px;
  border: none;
  border-radius: 20px;
  box-shadow: inset -1px 1px 1px rgba(0, 0, 0, 0.075); }

.app-preview-url button:focus {
  border: none;
  outline: none; }

.app-preview-url button:hover {
  background: #E0E0E0;
  transition: 0.3s; }

.app-preview-frame {
  position: absolute;
  top: 34px;
  left: 0;
  width: 100%;
  height: calc(100% - 34px);
  border: none; }

/* --- 
    x. Device Map 
*/
.wf-device-map-panel-widget .wf-panel-body {
  padding-bottom: 0px; }

.wf-device-map-panel-widget .wf-panel-body-content,
.wf-panel-wf-device-map,
.wf-panel-wf-device-map .wf-device-map {
  height: 100%; }

.wf-panel-wf-device-map {
  margin: auto -15px auto -15px; }

@media not all, not all, (-webkit-min-device-pixel-ratio: 1.5), not all, (min-resolution: 1.5dppx) {
  .awesome-marker {
    background-size: 720px 45px !important; } }

.event-filter-editor-component {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px; }

.event-filter-editor-component .item-container:empty {
  display: none; }

.event-filter-editor-component .item-container {
  display: flex;
  flex-direction: row;
  gap: 4px; }

/*--------------------------------------------------
    Heatmap / Carpet plot components styles
--------------------------------------------------*/
.wf-heatmap-footer {
  text-align: center;
  padding-top: 10px; }

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

.chart-heatmap .axis path {
  display: none; }

.chart-heatmap .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges; }

.chart-heatmap .axis text {
  font-size: 12px; }

.chart-heatmap .legend {
  display: inline-block;
  text-align: left; }

.chart-heatmap .legend label:last-child {
  float: right; }

/*-----------------------------------
    Icon selector 
 ----------------------------------*/
.icon-selector-sidebar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 250px;
  padding: 15px 15px 0px 15px;
  background-color: #f6f6f6;
  border-right: 1px solid #cccccc;
  overflow-y: auto;
  overflow-x: hidden; }

.icon-selector-sidebar ul {
  border-bottom: none; }

.icon-selector-list {
  position: absolute;
  left: 250px;
  top: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  padding-left: 15px;
  overflow: auto; }

.icon-selector-list button {
  border: none !important; }

.icon-preview-tab-header li.active a {
  background-color: #f6f6f6 !important;
  border-radius: 0;
  border: none !important;
  background: #ffffff !important; }

/* Administration Icon List - e.g. site types*/
.wf-icons-list {
  margin-left: 0; }

.wf-icons-list li {
  position: relative;
  width: 122px;
  margin-right: 5px;
  margin-bottom: 5px;
  padding: 0;
  overflow-x: hidden; }

.wf-icons-list .wf-icon-name {
  display: block;
  height: 36px;
  margin-top: 5px;
  overflow: hidden;
  color: #333;
  white-space: normal;
  text-align: center; }

.wf-icons-list .wf-icon-hover {
  position: absolute;
  top: 3px;
  right: 3px;
  font-size: 1.5em;
  opacity: .75; }

.wf-logviewer-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100000;
  width: 100%;
  background: #eee;
  border-top: 1px solid #ccc;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3); }

.wf-logviewer-wrapper iframe {
  border: 1px solid #aaa; }

.wf-logviewer-btn {
  position: absolute;
  bottom: 43px;
  left: 50%;
  -moz-transform: translate(-50%);
  -ms-transform: translate(-50%);
  -o-transform: translate(-50%);
  -webkit-transform: translate(-50%);
  transform: translate(-50%); }

.wf-logviewer-toggle {
  right: 15px;
  top: 15px; }

.logViewerContent > div {
  border: none !important; }

/* HG collapsible area */
.wf-measure-hgs-legend > li {
  font-size: 11px; }

.object-filter-editor-component {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px; }

.object-filter-editor-component .item-container:empty {
  display: none; }

.object-filter-editor-component .item-container {
  display: flex;
  flex-direction: row;
  gap: 4px; }

/* ----------------------------------
    Panel wrappers
---------------------------------- */
.wf-panels-container {
  display: flex;
  gap: 12px;
  padding-right: 16px; }

.wf-panels-container:empty {
  display: none; }

.wf-panels-container .wf-panel:last-child {
  margin-right: 16px; }

.wf-panels {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  padding: 0;
  white-space: normal;
  list-style: none; }

.wf-panel {
  position: relative;
  float: left;
  height: 100%;
  overflow-y: hidden;
  padding: 0;
  -webkit-transform: translateZ(0);
  -webkit-perspective: 1000px;
  -webkit-backface-visibility: hidden;
  border: 1px solid var(--i4c-panel-border-color);
  -webkit-box-shadow: var(--i4c-panel-box-shadow);
  box-shadow: var(--i4c-panel-box-shadow); }

/*------------------------------------------*/
/* Panel dimensions                         */
/*------------------------------------------*/
/* Optional columns for expanded panel state*/
.wf-panel.expanded .col-expanded-12 {
  width: 100% !important; }

.wf-panel.expanded .col-expanded-6 {
  width: 50% !important; }

.wf-panel.expanded .col-expanded-4 {
  width: 33.33% !important; }

.wf-panel.expanded .col-expanded-3 {
  width: 25% !important; }

.wf-panel.expanded .col-expanded-2 {
  width: 8.33% !important; }

/* Panel dimensions */
.wf-panel-xs {
  width: 180px; }

.wf-panel-sm {
  width: 310px; }

.wf-panel-md {
  width: 440px; }

.wf-panel-lg {
  width: 570px; }

.wf-panel-xlg {
  width: 845px; }

.wf-panel-xxlg {
  width: 985px; }

.wf-panel-3xlg {
  width: 1125px; }

.wf-panel-4xlg {
  width: 1265px; }

.wf-panel-5xlg {
  width: 1405px; }

.wf-panel-6xlg {
  width: 1545px; }

.wf-panel-xs:not(.expanded) *[class^='col-xs-'],
.wf-panel-xs:not(.expanded) *[class*=' col-xs-'],
.wf-panel-xs:not(.expanded) *[class^='col-sm-'],
.wf-panel-xs:not(.expanded) *[class*=' col-sm-'],
.wf-panel-xs:not(.expanded) *[class^='col-md-'],
.wf-panel-xs:not(.expanded) *[class*=' col-md-'],
.wf-panel-xs:not(.expanded) *[class^='col-lg-'],
.wf-panel-xs:not(.expanded) *[class*=' col-lg-'],
.wf-panel-sm:not(.expanded) *[class^='col-md-'],
.wf-panel-sm:not(.expanded) *[class*=' col-md-'],
.wf-panel-sm:not(.expanded) *[class^='col-lg-'],
.wf-panel-sm:not(.expanded) *[class*=' col-lg-'],
.wf-panel-md:not(.expanded) *[class^='col-lg-'],
.wf-panel-md:not(.expanded) *[class*=' col-lg-'] {
  width: 100%; }

/*----------------------------------
    Panel Layout Components
----------------------------------*/
/*----------------------------------
    Panel Dimensions
----------------------------------*/
.wf-panel-xs:not(.expanded) .wf-panel-title > span:first-child,
.wf-panel-xs:not(.expanded) .wf-panel-title .wf-panel-subtitle {
  max-width: 25px; }

.wf-panel-sm:not(.expanded) .wf-panel-title > span:first-child,
.wf-panel-sm:not(.expanded) .wf-panel-title .wf-panel-subtitle {
  max-width: 80px; }

.wf-panel-md:not(.expanded) .wf-panel-title > span:first-child,
.wf-panel-md:not(.expanded) .wf-panel-title .wf-panel-subtitle {
  max-width: 210px; }

.wf-panel-lg:not(.expanded) .wf-panel-title > span:first-child,
.wf-panel-lg:not(.expanded) .wf-panel-title .wf-panel-subtitle {
  max-width: 340px; }

.wf-panel-xlg:not(.expanded) .wf-panel-title > span:first-child,
.wf-panel-xlg:not(.expanded) .wf-panel-title .wf-panel-subtitle {
  max-width: 615px; }

.wf-panel-xxlg:not(.expanded) .wf-panel-title > span:first-child,
.wf-panel-xxlg:not(.expanded) .wf-panel-title .wf-panel-subtitle {
  max-width: 750px; }

.wf-panel-3xlg:not(.expanded) .wf-panel-title > span:first-child,
.wf-panel-3xlg:not(.expanded) .wf-panel-title .wf-panel-subtitle {
  max-width: 890px; }

/* Portrait tablet to landscape and desktop */
@media (min-width: 992px) and (max-width: 1300px) {
  .wf-panel.expanded .wf-goals-chart-pointers .chart-pointer {
    width: 33%; }
  .wf-panel.expanded .wf-goals-chart-pointers .arrow1 {
    left: 16%; }
  .wf-panel.expanded .wf-goals-chart-pointers .arrow2 {
    right: 10%; } }

/* Large desktop */
@media (min-width: 1281px) {
  .wf-panel.expanded .wf-goals-chart-pointers .chart-pointer {
    width: 32%; }
  .wf-panel.expanded .wf-goals-chart-pointers .arrow1 {
    left: 14%; }
  .wf-panel.expanded .wf-goals-chart-pointers .arrow2 {
    right: 16%; } }

.filter-label-container {
  max-height: 120px;
  overflow: auto;
  margin-right: -15px; }

.wf-panel-predefined .wf-panel-body {
  background-color: transparent;
  padding: 0; }

/*----------------------------------
    Panel modifiers  
----------------------------------*/
.wf-alarm-checkbox input,
.wf-alarm-checkbox {
  width: 40px !important; }

address {
  word-break: break-word; }

/*------------------------------*/
/* Panel widget elements styles */
/*------------------------------*/
.wf-panel.wf-panel-predefined {
  margin-left: 0px;
  background: transparent; }

.wf-panel.wf-panel-predefined:hover :before {
  background: transparent; }

.wf-panel.wf-panel-predefined .wf-panel-body {
  overflow: auto; }

.btn-default:hover svg > path {
  fill: var(--i4c-panel-toolbar-item-foreground-hover); }

.btn-default.active svg > path {
  fill: var(--i4c-panel-toolbar-item-foreground-active); }

.parts-filter-editor-component {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px; }

.parts-filter-editor-component .item-container:empty {
  display: none; }

.parts-filter-editor-component .item-container {
  display: flex;
  flex-direction: row;
  gap: 4px; }

/*--------------------------------------------------
   Requesition Calendar
--------------------------------------------------*/
.wf-calendar-slider .carousel-control {
  top: 20px;
  height: 30px;
  width: 80px;
  background: transparent;
  opacity: 1;
  text-shadow: none; }

.wf-calendar-slider-indicators .carousel-indicators {
  position: relative;
  left: auto;
  top: auto;
  bottom: auto;
  width: 100%;
  margin: 0 auto; }

.wf-calendar-slider-indicators .carousel-indicators > li {
  width: auto;
  height: auto;
  padding: 5px 10px;
  background: #eaeeed;
  border-radius: 0;
  text-indent: 0; }

.wf-calendar-slider-indicators .carousel-indicators > li.active {
  background: #2274ac;
  color: #fff; }

.wf-status-element-gone {
  background-color: #eaeeed !important; }

.wf-status-element-come {
  background-color: #faaa00 !important; }

.wf-status-element-current {
  background-color: #faaa00 !important; }

.wf-status-element {
  display: block;
  height: 10px;
  width: 10px;
  margin: 1px;
  border-radius: 5px; }

.wf-requests-list {
  text-align: center;
  margin-bottom: 20px;
  width: 100%;
  min-width: 32px; }

.wf-requests-list .wf-status-element {
  float: left; }

.wf-legend-horizontal {
  text-align: center; }

.wf-legend-horizontal .wf-legend-item {
  display: inline-block;
  margin: 5px;
  line-height: 20px; }

.wf-legend-horizontal .wf-legend-item .wf-status-element {
  display: inline-block;
  margin: 1px; }

.wf-requisitions-table .wf-medium-icon {
  color: #2274ac;
  font-size: 20px; }

/*fix for fixed table header content scroll*/
.wf-requisitions-table thead {
  background: #f6f6f6; }

.wf-requisitions-table thead:before {
  content: " ";
  background: #f6f6f6;
  height: 101px;
  position: fixed;
  top: -101px; }

.wf-calendar-list-wrapper {
  display: table;
  margin: 0 auto;
  table-layout: fixed;
  width: 100%;
  margin-top: 35px; }

.wf-calendar-list {
  margin: 0 auto;
  width: auto;
  height: 90px;
  display: table-row; }

.wf-calendar-list > .list-group-item {
  width: 3.1%;
  display: table-cell;
  text-align: center;
  padding: 5px 2px; }

.wf-calendar-list > li.list-group-item:hover {
  cursor: pointer;
  background: #2274ac;
  color: #fff;
  -moz-transition: background 400ms ease;
  -o-transition: background 400ms ease;
  -webkit-transition: background 400ms ease;
  transition: background 400ms ease; }

.wf-calendar-list-date {
  font-size: 16px;
  font-weight: bold;
  text-align: center; }

.wf-calendar-list-day {
  display: block; }

.wf-calendar-list-month {
  display: block;
  font-size: 10px;
  line-height: 20px;
  /*font-weight: bold;*/
  color: #aaa; }

.wf-calendar-list-weekday {
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  margin-bottom: 5px;
  font-size: 13px;
  text-align: center; }

.wf-calendar-list-week {
  position: absolute;
  top: -27px;
  left: -1px;
  display: block;
  width: 110%;
  height: 25px;
  text-align: center;
  background: #eaeeed;
  border-top: 1px;
  border-bottom: 1px;
  border-left: 0;
  border-right: 0;
  border-style: solid;
  border-color: #ffffff;
  pointer-events: none; }

.wf-calendar-list-week-end {
  width: 100% !important; }

.wf-calender-week-label {
  z-index: 9999;
  line-height: 25px;
  white-space: nowrap; }

.list-group-item.active .wf-calendar-list-month {
  color: #fff; }

.wf-calendar-list:hover .wf-calender-week-label {
  color: #33434c;
  cursor: default; }

.list-group-item.active .wf-calender-week-label {
  color: #33434c; }

/* backend mode */
body.wf-backend {
  overflow-y: unset; }

.wf-backend .wf-panel-inner {
  position: unset; }

.wf-backend .wf-panel {
  overflow: unset;
  border: unset; }

.wf-backend-shell {
  height: 100%; }

.wf-backend-shell .wf-panel {
  margin: 0; }

.wf-backend .no-print {
  display: none; }

.wf-backend .wf-logviewer-wrapper {
  border-top: unset; }

/*-----------------------------------
    Global styles
 ----------------------------------*/
html,
#app-body {
  height: 100%; }

#app-body {
  overflow-y: hidden;
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  font-style: normal;
  font-weight: normal;
  background: var(--body-background);
  background-image: var(--body-background-image); }

/*-----------------------------------
  Layout Elements
-----------------------------------*/
#applicationHost,
.durandal-wrapper {
  height: 100%;
  width: 100%;
  overflow: hidden; }

.wf-shell {
  --primary-header-height: 40px;
  position: relative;
  height: 100%;
  text-align: left; }

/*-----------------------------------
  Shell Layout Elements
-----------------------------------*/
#shell-content-wrapper {
  height: 100%;
  max-height: 100%;
  margin: 0 0 0 95px;
  overflow-y: hidden;
  overflow-x: scroll;
  /*-webkit-overflow-scrolling: touch;*/ }

.wf-shell.wf-shell-offline #shell-content-wrapper {
  margin: 0; }

#shell-content {
  height: 100%;
  padding: 0 20px;
  overflow-y: hidden; }

.app-page {
  display: flex;
  flex-direction: row;
  gap: 12px;
  width: auto; }

#shell-content-pinned {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  width: -moz-fit-content;
  width: fit-content; }

#shell-content-pinned:empty {
  display: none; }

#shell-content-fixed {
  display: flex;
  gap: 16px;
  width: -moz-fit-content;
  width: fit-content; }

#shell-content-dynamic {
  width: -moz-fit-content;
  width: fit-content; }

.wf-shell.wf-shell-offline #shell-content {
  padding-top: 15px; }

.wf-panel-controls {
  position: fixed;
  bottom: 20px;
  right: 10px;
  z-index: 99999;
  text-align: right; }

.wf-panel-controls .btn {
  color: var(--i4c-brand-color);
  padding: 0 5px; }

/*------------------------------------------------
    Global status bar 
-------------------------------------------------*/
.wf-shell #shell-content {
  /*display: none;*/
  height: 100%;
  padding-top: 55px; }

/* --- 
    x. SignalOnlineTable
*/
/* -- 
ID is used to ensure no other table is restyled without recognicing 
Important is needed to overwrite the modifiers
-- */
#signalOnlineTable tr td:first-child,
#signalOnlineTable tr th:first-child {
  padding-left: 16px !important; }

#signalOnlineTable tr td:last-child,
#signalOnlineTable tr th:last-child {
  padding-right: 16px !important; }

/*-----------------------------------
    Site filter items elements
-----------------------------------*/
.wf-site-template {
  text-align: left;
  line-height: normal; }

.wf-site-filter-item {
  display: block;
  width: 100%;
  min-height: 80px;
  margin: 10px 0;
  padding: 0;
  text-align: left; }

.wf-site-details {
  padding: 10px;
  word-break: break-word;
  white-space: normal; }

.wf-site-adress {
  margin: 5px 0; }

.wf-site-type {
  font-size: 11px;
  font-weight: normal;
  margin-top: 5px; }

.wf-site-type-container {
  position: relative;
  height: 305px;
  margin-top: -15px;
  background: #f6f6f6;
  background-image: url(images/img-mock.png);
  background-position: center;
  background-size: 25%;
  background-repeat: no-repeat;
  overflow: hidden; }

.wf-site-type-container:before {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  content: " ";
  height: 92px;
  width: 100%;
  padding: 10px;
  background-color: #00000033; }

.wf-site-image-container {
  height: 150px;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #fff;
  /* To avoid scalled imageg to be pixelated in IE*/
  -ms-interpolation-mode: bicubic; }

.wf-site-video-container {
  position: relative;
  height: 180px;
  overflow: hidden; }

/* the halfe transparent box on top of the meda file in device, site area orgUnit views */
/* style should be relocated at some point */
.wf-site-type-block {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 92px;
  padding: 10px;
  background-color: #00000080;
  color: #FFFFFF; }

/* Style Guide related styles*/
.hidden.wf-visible {
  visibility: visible !important;
  display: block !important; }

/* Style Guide Icon Lists*/
.sg-icons-list li {
  display: inline-block;
  margin: 5px 3px; }

.sg-icons-list li:hover {
  background: #ffffff; }

.sg-icons-list-icon {
  margin: 5px 3px;
  font-size: 46px; }

.selectable-button-user-assignment selectable-button .component-content-main {
  flex-wrap: wrap; }

.selectable-button-user-assignment selectable-button:has(+ .remove-button) .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0; }

.selectable-button-user-assignment .entity-name {
  display: inline-block;
  margin: 0; }

.selectable-button-user-assignment .entity-name__fullName {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  white-space: break-spaces;
  word-break: break-all;
  font-size: var(--body-font-size);
  font-weight: 700; }

.selectable-button-user-assignment .user-roles-list {
  display: flex;
  flex-direction: column; }

.selectable-button-user-assignment .user-role-list__title {
  display: flex;
  align-items: first baseline;
  gap: 4px;
  font-weight: 700;
  padding-top: 4px;
  margin: 0; }

.selectable-button-user-assignment .user-role-list__counter {
  font-size: .9em;
  line-height: 1.4em;
  font-weight: 400;
  color: var(--text-color-secondary); }

.selectable-button-user-assignment .user-role-list__item {
  font-size: .9em;
  line-height: 1.4em;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  white-space: break-spaces;
  word-break: break-all; }

/*# sourceMappingURL=application.bundle.css.map */