/*--------------------------------------------------
    Bootstrap Forms
 -------------------------------------------------*/
.form-horizontal .control-label {
  padding-top: 9px; }

/*--------------------------------------------------
    Forms Validation
 -------------------------------------------------*/
.wf-components-group-item.selectable.selected.form-control-validation-indicator {
  color: var(--i4c-form-control-validation-indicator); }

/*--------------------------------------------------
    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-active-background);
  border-color: var(--i4c-list-group-item-active-background);
  color: var(--i4c-list-group-item-active-foreground); }

/*--------------------------------------------------
   List groups with selectable components 
 -------------------------------------------------*/
.wf-components-group-item.selectable:hover {
  color: var(--i4c-list-group-item-hover-foreground);
  background-color: var(--i4c-list-group-item-hover-background); }

.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-hover-foreground); }

.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-active-foreground); }

.wf-components-group-item.selectable.selected .wf-btn-title span.wf-btn-subtitle {
  color: var(--i4c-list-group-item-active-foreground); }

.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-hover-background);*/ }

.wf-components-group-item.selectable.selected:hover {
  background-color: var(--i4c-list-group-item-selected-hover-background);
  color: var(--i4c-list-group-item-selected-hover-foreground); }

/*--------------------------------------------------
    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; }

.badge {
  border-radius: 2px;
  border: 1px solid white; }

input[type="checkbox"].i4c-checkbox {
  margin: 0 !important;
  position: relative; }

input[type="checkbox"].i4c-checkbox:checked:after {
  content: '\f00c';
  font-size: 12px;
  position: absolute;
  top: 0;
  left: 0;
  background: white;
  border: 1px solid #363636;
  font-family: FontAwesome; }

input[type="checkbox"].i4c-checkbox:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background: white;
  border: 1px solid #363636;
  font-family: FontAwesome;
  width: 14px;
  height: 14px; }

input[type="checkbox"].i4c-checkbox:indeterminate:after {
  content: "\f0c8";
  font-size: 9px;
  display: flex;
  justify-content: center;
  align-items: center; }

.checkbox-array input[type="checkbox"]:checked ~ i:first-of-type:before {
  content: "\f14a"; }

/*--------------------------------------------------
    Bootstrap Buttons
 -------------------------------------------------*/
button .fa {
  font-size: 14px; }

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

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  background-color: #565656; }

.btn-default:active,
.btn-default.active:focus:hover,
.open > .dropdown-toggle.btn-default {
  color: var(--i4c-button-default-active-foreground) !important;
  background-color: var(--i4c-button-default-active-background); }

.btn-default:hover {
  color: var(--i4c-button-default-hover-foreground) !important;
  background-color: var(--i4c-button-default-hover-background); }

.btn-default:hover svg.svg-icon path {
  fill: var(--i4c-button-default-hover-foreground) !important; }

.btn-default:hover .wf-subtitle {
  color: var(--i4c-button-default-hover-foreground) !important; }

.btn-default:focus,
.btn-default.focus,
.btn-default:focus:hover {
  color: var(--i4c-button-default-focus-foreground);
  background-color: var(--i4c-button-default-focus-background); }

.btn-default:focus path,
.btn-default:hover path,
.btn-default.focus path,
.btn-default:focus:hover path {
  fill: var(--i4c-button-default-focus-foreground); }

.btn-group .btn-default.active:not(:first-child) {
  border-left-color: var(--i4c-main-inverted-foreground); }

.btn-default.active,
.btn-default[disabled].active {
  color: var(--i4c-button-default-active-foreground);
  background-color: var(--i4c-button-default-active-background); }

.btn-default.active path,
.btn-default[disabled].active path {
  fill: var(--i4c-button-default-active-foreground); }

.btn-default[disabled].active {
  opacity: .85; }

.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-active-foreground) !important;
  background-color: var(--i4c-button-default-active-background); }

.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) !important;
  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-active-foreground);
  background-color: var(--i4c-button-link-accent-active-background); }

.btn-link-accent.active {
  color: var(--i4c-button-link-accent-active-foreground);
  background-color: var(--i4c-button-link-accent-active-background);
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none; }

.btn-link-accent.active .icon {
  color: var(--i4c-button-link-accent-active-foreground); }

/* 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-active-background) !important;
  color: var(--i4c-button-highlighted-active-foreground) !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; }

/*--------------------------------------------------
    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-active-background);
  border-color: var(--i4c-accent-color);
  color: var(--i4c-button-active-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-disabled-background);
  border-color: var(--i4c-button-success-disabled-border-color); }

/*--------------------------------------------------
    Extending Bootstrap Buttons Set
 -------------------------------------------------*/
.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-active-foreground);
  background-color: var(--i4c-button-variant-active-background);
  border-color: var(--i4c-button-variant-active-border-color); }

.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-disabled-background);
  border-color: var(--i4c-button-variant-disabled-border-color); }

.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);
  transition: all 0.4s;
  border-radius: var(--i4c-border-radius); }

.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-active-foreground);
  background-color: var(--i4c-button-highlighted-accent-active-background); }

.btn-accent {
  color: var(--i4c-button-accent-foreground);
  background-color: var(--i4c-button-accent-background);
  border-color: var(--i4c-button-accent-border-color);
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
  border-radius: var(--i4c-border-radius); }

.btn-accent:focus {
  color: var(--i4c-button-accent-focus-foreground);
  background-color: var(--i4c-button-accent-focus-background);
  border-color: var(--i4c-button-accent-focus-border-color); }

.btn-accent:hover,
.btn-accent:active,
.btn-accent.active,
.open > .dropdown-toggle.btn-accent {
  color: var(--i4c-button-accent-active-foreground);
  background-color: var(--i4c-button-accent-active-background);
  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-light-gray-background);
  color: var(--i4c-button-accent-disabled-foreground); }

.btn-accent .badge {
  color: var(--i4c-main-inverted-foreground);
  border-radius: var(--i4c-border-radius); }

.btn-circle {
  color: var(--i4c-button-circle-foreground);
  background-color: var(--i4c-button-circle-background);
  border-color: var(--i4c-button-circle-border-color);
  width: 26px;
  height: 26px;
  padding: 4px 0;
  -ms-border-radius: 16px;
  border-radius: 16px;
  line-height: 18px;
  border-style: solid;
  border-width: 1px; }

.btn-circle svg.svg-icon path {
  fill: var(--i4c-button-circle-foreground); }

.btn-default.btn-circle:hover {
  background-color: var(--i4c-button-circle-hover-background);
  color: var(--i4c-button-circle-hover-foreground); }

.btn-default.btn-circle:hover svg.svg-icon path {
  fill: var(--i4c-button-circle-hover-foreground) !important; }

.btn-default.btn-circle[aria-expanded="true"],
.btn-default[aria-expanded="true"] {
  background-color: var(--i4c-button-circle-hover-background);
  color: var(--i4c-button-circle-hover-foreground); }

/* 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; }

/*-------------------------------------------
    Buttons content
-------------------------------------------*/
.wf-btn-subtitle {
  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; }

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-hover-title-foreground); }

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-focus-foreground); }

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-hover-icon-color); }

button:hover .wf-btn-icon .link-icon .icon-path,
.btn:hover .wf-btn-icon .link-icon .icon-path {
  fill: var(--i4c-button-hover-icon-color); }

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-focus-foreground); }

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-active-hover-icon-color); }

button.active .wf-btn-subtitle,
.btn.active .wf-btn-subtitle {
  color: inherit; }

button:hover .wf-btn-path,
.btn:hover .wf-btn-path {
  background-color: var(--i4c-white-background);
  color: var(--i4c-button-subtitle-foreground); }

button:hover .wf-btn-subtitle,
.btn:hover .wf-btn-subtitle {
  color: var(--i4c-main-accent-foreground); }

button:hover:focus .wf-btn-subtitle,
.btn:hover:focus .wf-btn-subtitle {
  color: var(--i4c-button-subtitle-foreground); }

/*.btn-sm i {
    line-height: 17px;
}*/

.wf-tile-active .wf-tile-body:after {
  background-color: #cfd7d9; }

.wf-drag-handler {
  animation: fadeIn 1s; }

.gs-resize-handle {
  animation: fadeIn 1s; }

.wf-remove-handler {
  animation: fadeIn 1s; }

.wf-edit-handler {
  animation: fadeIn 1s; }

.wf-edit-handler * {
  pointer-events: none; }

.wf-security-handler * {
  pointer-events: none; }

/*-----------------------------------
    Tile widget and components
 ----------------------------------*/
.wf-tile {
  overflow: hidden;
  text-align: center; }

.wf-tile-body {
  padding: 0;
  display: flex !important;
  align-items: center; }

.wf-tile-title {
  font-size: 13px;
  display: block;
  padding: 0 4px;
  line-height: 16px;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden; }

.wf-tile-subtitle {
  font-weight: normal;
  display: block;
  overflow: hidden;
  /*white-space: nowrap;*/
  -ms-text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  padding-top: 3px;
  opacity: 0.7; }

.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;
  content: ' ';
  border: 1px solid #fff;
  background-color: #eaeeed; }

.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;
  -webkit-transition: background-color .4s;
  -moz-transition: background-color .4s;
  -o-transition: background-color .4s;
  transition: background-color .4s;
  color: #333;
  background-color: #fefefe;
  cursor: pointer; }

.wf-tile-disabled {
  pointer-events: none;
  cursor: default !important;
  opacity: .75;
  background-color: #fff; }

/*------------------------------------------------
    InPanel content tile widget and components
 -----------------------------------------------*/
.wf-tile-content {
  display: flex;
  height: 100%;
  top: 0;
  flex-direction: row;
  align-items: center;
  width: 100%; }

.wf-tile-content-icon {
  margin: 15px; }

.wf-tile-value {
  font-size: 36px;
  /*line-height: 45px;
    position: relative;
    display: inline-block;
    padding-top: 35px;
    padding-left: 10px;*/ }

.wf-tile-value-subtitle {
  font-size: 14px;
  padding-left: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #92a9b8;
  text-align: left; }

/*------------------------------------------------
    Tile widget sizing and size-responsive styles
 -----------------------------------------------*/
[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; }

/* Tile 1x1 */
[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;
  /*margin-top: 35px;*/
  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;
  /*margin: 35px 10px 0 20px;*/ }

/* Tile 1x2 */
[data-sizex='1'][data-sizey='2'] .wf-tile-title {
  /*margin-top: 35px;*/ }

[data-sizex='1'][data-sizey='2'] .wf-tile-subtitle {
  margin-top: 0; }

[data-sizex='1'][data-sizey='2'] .wf-tile-icon {
  /*margin: 35px auto 0 auto;*/ }

/* Tile 2x2 and 3x2 */
[data-sizex='2'][data-sizey='2'] .wf-tile-title,
[data-sizex='3'][data-sizey='2'] .wf-tile-title {
  /*margin-top: 35px;*/ }

[data-sizex='2'][data-sizey='2'] .wf-tile-subtitle,
[data-sizex='3'][data-sizey='2'] .wf-tile-subtitle {
  margin-top: 0; }

[data-sizex='2'][data-sizey='2'] .wf-tile-icon,
[data-sizex='3'][data-sizey='2'] .wf-tile-icon {
  /*margin: 35px auto 0 auto;*/ }

/* 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 4x1 */
[data-sizex='4'][data-sizey='1'] .wf-tile-title {
  font-size: 13px;
  /*margin-top: 35px;*/
  text-align: left; }

[data-sizex='4'][data-sizey='1'] .wf-tile-subtitle {
  margin-top: 0;
  text-align: left; }

[data-sizex='4'][data-sizey='1'] .wf-tile-icon {
  float: left;
  /*margin: 35px 10px 0 35px;*/ }

/* Tile 4x2 and 4x3 and 4x4 */
[data-sizex='4'][data-sizey='2'] .wf-tile-title,
[data-sizex='4'][data-sizey='3'] .wf-tile-title,
[data-sizex='4'][data-sizey='4'] .wf-tile-title {
  /*margin-top: 35px;*/ }

[data-sizex='4'][data-sizey='2'] .wf-tile-subtitle,
[data-sizex='4'][data-sizey='3'] .wf-tile-subtitle,
[data-sizex='4'][data-sizey='4'] .wf-tile-subtitle {
  margin-top: 5px; }

[data-sizex='4'][data-sizey='2'] .wf-tile-icon,
[data-sizex='4'][data-sizey='3'] .wf-tile-icon,
[data-sizex='4'][data-sizey='4'] .wf-tile-icon {
  /*margin: 35px auto 0 auto;*/ }

/*------------------------------------------------
    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-top: -5px;
  margin-left: -5px;
  padding-left: 0;
  list-style-type: none; }

.resize > rect {
  visibility: visible !important; }

.gs-resize-handle {
  opacity: .5; }

.gs-resize-handle-both {
  right: -4px;
  bottom: -4px;
  width: 50px;
  height: 25px;
  background-image: url("../images/components/grid-handler.svg");
  background-position: center center; }

.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: 0 !important;
  background: #DB3000; }

/*------------------------------------------------
    Gridster handles
 -----------------------------------------------*/
.wf-drag-handler {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 25px;
  cursor: move;
  color: #363636;
  background: rgba(0, 0, 0, 0.08);
  -ms-border-radius: 0 0 3px 0;
  border-radius: 0 0 3px 0; }

.wf-drag-handler:hover {
  color: #DB3000; }

.wf-drag-handler:before {
  font-family: FontAwesome;
  font-size: 14px;
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -7px;
  content: '\f047'; }

.wf-drag-handler * {
  pointer-events: none; }

.wf-remove-handler {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 25px;
  cursor: pointer;
  border-radius: 0 0 0 3px;
  background: rgba(0, 0, 0, 0.08);
  color: #363636; }

.wf-remove-handler:hover {
  color: #DB3000; }

.wf-remove-handler:before {
  font-family: FontAwesome;
  font-size: 14px;
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -7px;
  content: '\f00d'; }

.wf-remove-handler * {
  pointer-events: none; }

.gs-resize-handle {
  opacity: 1;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 25px;
  cursor: pointer;
  border-radius: 3px 0 0 0;
  background: rgba(0, 0, 0, 0);
  color: #363636;
  cursor: nwse-resize; }

.gs-resize-handle:hover {
  color: #DB3000; }

.gs-resize-handle:before {
  font-family: 'WFIconFont';
  font-size: 12px;
  position: absolute;
  bottom: 2px;
  right: 2px;
  margin-left: -7px;
  content: "\e7bf";
  transform: rotate(45deg); }

.wf-edit-handler {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 25px;
  cursor: pointer;
  border-radius: 0 3px 0 0;
  background: rgba(0, 0, 0, 0.08);
  color: #363636; }

.wf-edit-handler:hover {
  color: #DB3000; }

.wf-edit-handler:before {
  font-family: FontAwesome;
  font-size: 14px;
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -7px;
  content: '\f14b'; }

.wf-edit-handler * {
  pointer-events: none; }

.wf-security-handler {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -20px;
  margin-top: -20px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(250, 250, 250, 0.3);
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.1); }

.wf-security-handler:hover {
  color: #DB3000; }

.wf-security-handler:before {
  font-family: FontAwesome;
  font-size: 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -4px;
  content: '\f023';
  margin-top: -7px;
  line-height: 14px;
  color: #363636; }

.wf-security-handler * {
  pointer-events: none; }

/*----------------------------------------------------
    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; }

.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
----------------------------------------------------*/
[data-sizey="1"] {
  height: 120px; }

[data-sizey="2"] {
  height: 250px; }

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

[data-sizex="1"] {
  width: 120px; }

[data-sizex="2"] {
  width: 250px; }

[data-sizex="3"] {
  width: 380px; }

[data-sizex="4"] {
  width: 510px; }

/* #region i4Analytics tiles */
.wf-i4-analytics.wf-tile-clickable {
  background: var(--i4c-tile-analytics-background); }

.wf-i4-analytics.wf-tile-clickable .wf-tile-icon {
  color: var(--i4c-tile-analytics-icon-color);
  font-size: var(--i4c-tile-analytics-icon-size); }

.wf-i4-analytics.wf-tile-clickable .wf-tile-title {
  color: var(--i4c-tile-analytics-title-color);
  font-size: var(--i4c-tile-analytics-title-size); }

.wf-i4-analytics.wf-tile-clickable .wf-tile-subtitle {
  color: var(--i4c-tile-analytics-subtitle-color); }

.wf-i4-analytics.wf-tile-clickable:hover {
  background: var(--i4c-tile-analytics-hover-background); }

.wf-i4-analytics.wf-tile-clickable:hover .wf-tile-icon {
  color: var(--i4c-tile-analytics-hover-icon-color); }

.wf-i4-analytics.wf-tile-clickable:hover .wf-tile-title {
  color: var(--i4c-tile-analytics-hover-title-color); }

.wf-i4-analytics.wf-tile-clickable:hover .wf-tile-subtitle {
  color: var(--i4c-tile-analytics-hover-subtitle-color); }

.wf-i4-analytics.wf-tile-clickable .wf-tile-active {
  background: var(--i4c-tile-analytics-active-background); }

.wf-i4-analytics.wf-tile-clickable .wf-tile-active .wf-tile-icon {
  color: var(--i4c-tile-analytics-active-icon-color); }

.wf-i4-analytics.wf-tile-clickable .wf-tile-active .wf-tile-title {
  color: var(--i4c-tile-analytics-active-title-color); }

.wf-i4-analytics.wf-tile-clickable .wf-tile-active .wf-tile-subtitle {
  color: var(--i4c-tile-analytics-active-subtitle-color); }

.wf-i4-analytics.wf-tile-clickable .wf-tile-active:hover {
  background: var(--i4c-tile-analytics-active-hover-background); }

.wf-i4-analytics.wf-tile-clickable .wf-tile-active:hover .wf-tile-icon {
  color: var(--i4c-tile-analytics-active-hover-icon-color); }

.wf-i4-analytics.wf-tile-clickable .wf-tile-active:hover .wf-tile-title {
  color: var(--i4c-tile-analytics-active-hover-title-color); }

.wf-i4-analytics.wf-tile-clickable .wf-tile-active:hover .wf-tile-subtitle {
  color: var(--i4c-tile-analytics-active-hover-subtitle-color); }

.wf-i4-analytics .wf-tile-active .wf-tile-body:before,
.wf-i4-analytics .wf-tile-active .wf-tile-body:after {
  border: 1px solid #ffffff;
  background-color: var(--i4c-tile-analytics-active-icon-color) !important;
  animation: animation-fade 1.5s infinite; }

/* #endregion */

/* #region i4Energy tiles */
.wf-i4-energy.wf-tile-clickable {
  background: var(--i4c-tile-energy-background); }

.wf-i4-energy.wf-tile-clickable .wf-tile-icon {
  color: var(--i4c-tile-energy-icon-color);
  font-size: var(--i4c-tile-energy-icon-size); }

.wf-i4-energy.wf-tile-clickable .wf-tile-title {
  color: var(--i4c-tile-energy-title-color);
  font-size: var(--i4c-tile-energy-title-size); }

.wf-i4-energy.wf-tile-clickable .wf-tile-subtitle {
  color: var(--i4c-tile-energy-subtitle-color); }

.wf-i4-energy.wf-tile-clickable:hover {
  background: var(--i4c-tile-energy-hover-background); }

.wf-i4-energy.wf-tile-clickable:hover .wf-tile-icon {
  color: var(--i4c-tile-energy-hover-icon-color); }

.wf-i4-energy.wf-tile-clickable:hover .wf-tile-title {
  color: var(--i4c-tile-energy-hover-title-color); }

.wf-i4-energy.wf-tile-clickable:hover .wf-tile-subtitle {
  color: var(--i4c-tile-energy-hover-subtitle-color); }

.wf-i4-energy.wf-tile-clickable .wf-tile-active {
  background: var(--i4c-tile-energy-active-background); }

.wf-i4-energy.wf-tile-clickable .wf-tile-active .wf-tile-icon {
  color: var(--i4c-tile-energy-active-icon-color); }

.wf-i4-energy.wf-tile-clickable .wf-tile-active .wf-tile-title {
  color: var(--i4c-tile-energy-active-title-color); }

.wf-i4-energy.wf-tile-clickable .wf-tile-active .wf-tile-subtitle {
  color: var(--i4c-tile-energy-active-subtitle-color); }

.wf-i4-energy.wf-tile-clickable .wf-tile-active:hover {
  background: var(--i4c-tile-energy-active-hover-background); }

.wf-i4-energy.wf-tile-clickable .wf-tile-active:hover .wf-tile-icon {
  color: var(--i4c-tile-energy-active-hover-icon-color); }

.wf-i4-energy.wf-tile-clickable .wf-tile-active:hover .wf-tile-title {
  color: var(--i4c-tile-energy-active-hover-title-color); }

.wf-i4-energy.wf-tile-clickable .wf-tile-active:hover .wf-tile-subtitle {
  color: var(--i4c-tile-energy-active-hover-subtitle-color); }

.wf-i4-energy .wf-tile-active .wf-tile-body:before,
.wf-i4-energy .wf-tile-active .wf-tile-body:after {
  border: 1px solid #ffffff;
  background-color: var(--i4c-tile-energy-active-icon-color) !important;
  animation: animation-fade 1.5s infinite; }

/* #endregion */

/*------------------------------------- 
    Customer switch / selection list 
  ------------------------------------*/
.wf-tile-clickable.wf-customer-tile {
  background-color: var(--i4c-tile-customer-background);
  transition: all 0.4s; }

.wf-tile-clickable.wf-customer-tile-title {
  font-size: var(--i4c-tile-customer-title-size);
  color: var(--i4c-tile-customer-title-color); }

.wf-tile-clickable.wf-customer-tile-subtitle {
  color: var(--i4c-tile-customer-subtitle-color); }

.wf-tile-clickable.wf-customer-tile .wf-tile-content-icon {
  font-size: var(--i4c-tile-customer-icon-size);
  color: var(--i4c-tile-customer-icon-color); }

.wf-customer-tile-list .wf-customer-tile {
  margin: 5px; }

.wf-tile-clickable.wf-customer-tile {
  display: inline-block;
  cursor: pointer; }

.wf-tile-clickable.wf-customer-tile .wf-tile-content-icon {
  height: 70px;
  display: block;
  margin: 20px;
  text-align: center;
  overflow: hidden;
  background-position: center; }

.wf-tile-clickable.wf-customer-tile:hover .wf-tile-content {
  background: var(--i4c-tile-customer-hover-background); }

.wf-customer-tile.wf-tile-clickable:hover .wf-tile-content-icon {
  color: var(--i4c-tile-customer-hover-icon-color); }

.wf-customer-tile.wf-tile-clickable:hover .wf-customer-tile-title {
  color: var(--i4c-tile-customer-hover-title-color); }

.wf-customer-tile.wf-tile-clickable:hover .wf-customer-tile-subtitle {
  color: var(--i4c-tile-customer-hover-subtitle-color); }

.wf-tile-clickable.wf-customer-tile .wf-tile-active .wf-tile-content {
  background: var(--i4c-tile-customer-active-background); }

.wf-tile-clickable.wf-customer-tile .wf-tile-active .wf-tile-content-icon {
  color: var(--i4c-tile-customer-active-icon-color); }

.wf-tile-clickable.wf-customer-tile .wf-tile-active .wf-customer-tile-title {
  color: var(--i4c-tile-customer-active-title-color); }

.wf-tile-clickable.wf-customer-tile .wf-tile-active .wf-customer-tile-subtitle {
  color: var(--i4c-tile-customer-active-subtitle-color); }

.wf-tile-clickable.wf-customer-tile .wf-tile-active:hover .wf-tile-content {
  background: var(--i4c-tile-customer-active-hover-background); }

.wf-tile-clickable.wf-customer-tile .wf-tile-active:hover .wf-tile-content-icon {
  color: var(--i4c-tile-customer-active-hover-icon-color); }

.wf-tile-clickable.wf-customer-tile .wf-tile-active:hover .wf-tile-value {
  color: var(--i4c-tile-customer-active-hover-title-color); }

.wf-tile-clickable.wf-customer-tile .wf-tile-active:hover .wf-customer-tile-subtitle {
  color: var(--i4c-tile-customer-active-hover-subtitle-color); }

/* #region Maintenance tiles */
.wf-i4-maintenance.wf-tile-clickable {
  background: var(--i4c-tile-maintenance-background); }

.wf-i4-maintenance.wf-tile-clickable .wf-tile-icon {
  color: var(--i4c-tile-maintenance-icon-color);
  font-size: var(--i4c-tile-maintenance-icon-size); }

.wf-i4-maintenance.wf-tile-clickable .wf-tile-title {
  color: var(--i4c-tile-maintenance-title-color);
  font-size: var(--i4c-tile-maintenance-title-size); }

.wf-i4-maintenance.wf-tile-clickable .wf-tile-subtitle {
  color: var(--i4c-tile-maintenance-subtitle-color); }

.wf-i4-maintenance.wf-tile-clickable:hover {
  background: var(--i4c-tile-maintenance-hover-background); }

.wf-i4-maintenance.wf-tile-clickable:hover .wf-tile-icon {
  color: var(--i4c-tile-maintenance-hover-icon-color); }

.wf-i4-maintenance.wf-tile-clickable:hover .wf-tile-title {
  color: var(--i4c-tile-maintenance-hover-title-color); }

.wf-i4-maintenance.wf-tile-clickable:hover .wf-tile-subtitle {
  color: var(--i4c-tile-maintenance-hover-subtitle-color); }

.wf-i4-maintenance.wf-tile-clickable .wf-tile-active {
  background: var(--i4c-tile-maintenance-active-background); }

.wf-i4-maintenance.wf-tile-clickable .wf-tile-active .wf-tile-icon {
  color: var(--i4c-tile-maintenance-active-icon-color); }

.wf-i4-maintenance.wf-tile-clickable .wf-tile-active .wf-tile-title {
  color: var(--i4c-tile-maintenance-active-title-color); }

.wf-i4-maintenance.wf-tile-clickable .wf-tile-active .wf-tile-subtitle {
  color: var(--i4c-tile-maintenance-active-subtitle-color); }

.wf-i4-maintenance.wf-tile-clickable .wf-tile-active:hover {
  background: var(--i4c-tile-maintenance-active-hover-background); }

.wf-i4-maintenance.wf-tile-clickable .wf-tile-active:hover .wf-tile-icon {
  color: var(--i4c-tile-maintenance-active-hover-icon-color); }

.wf-i4-maintenance.wf-tile-clickable .wf-tile-active:hover .wf-tile-title {
  color: var(--i4c-tile-maintenance-active-hover-title-color); }

.wf-i4-maintenance.wf-tile-clickable .wf-tile-active:hover .wf-tile-subtitle {
  color: var(--i4c-tile-maintenance-active-hover-subtitle-color); }

.wf-i4-maintenance .wf-tile-active .wf-tile-body:before,
.wf-i4-maintenance .wf-tile-active .wf-tile-body:after {
  border: 1px solid #ffffff;
  background-color: var(--i4c-tile-maintenance-active-icon-color) !important;
  animation: animation-fade 1.5s infinite; }

/* #endregion */

/* #region i4Monitoring tiles */
.wf-i4-monitoring.wf-tile-clickable {
  background: var(--i4c-tile-monitoring-background); }

.wf-i4-monitoring.wf-tile-clickable .wf-tile-icon {
  color: var(--i4c-tile-monitoring-icon-color);
  font-size: var(--i4c-tile-monitoring-icon-size); }

.wf-i4-monitoring.wf-tile-clickable .wf-tile-title {
  color: var(--i4c-tile-monitoring-title-color);
  font-size: var(--i4c-tile-monitoring-title-size); }

.wf-i4-monitoring.wf-tile-clickable .wf-tile-subtitle {
  color: var(--i4c-tile-monitoring-subtitle-color); }

.wf-i4-monitoring.wf-tile-clickable:hover {
  background: var(--i4c-tile-monitoring-hover-background); }

.wf-i4-monitoring.wf-tile-clickable:hover .wf-tile-icon {
  color: var(--i4c-tile-monitoring-hover-icon-color); }

.wf-i4-monitoring.wf-tile-clickable:hover .wf-tile-title {
  color: var(--i4c-tile-monitoring-hover-title-color); }

.wf-i4-monitoring.wf-tile-clickable:hover .wf-tile-subtitle {
  color: var(--i4c-tile-monitoring-hover-subtitle-color); }

.wf-i4-monitoring.wf-tile-clickable .wf-tile-active {
  background: var(--i4c-tile-monitoring-active-background); }

.wf-i4-monitoring.wf-tile-clickable .wf-tile-active .wf-tile-icon {
  color: var(--i4c-tile-monitoring-active-icon-color); }

.wf-i4-monitoring.wf-tile-clickable .wf-tile-active .wf-tile-title {
  color: var(--i4c-tile-monitoring-active-title-color); }

.wf-i4-monitoring.wf-tile-clickable .wf-tile-active .wf-tile-subtitle {
  color: var(--i4c-tile-monitoring-active-subtitle-color); }

.wf-i4-monitoring.wf-tile-clickable .wf-tile-active:hover {
  background: var(--i4c-tile-monitoring-active-hover-background); }

.wf-i4-monitoring.wf-tile-clickable .wf-tile-active:hover .wf-tile-icon {
  color: var(--i4c-tile-monitoring-active-hover-icon-color); }

.wf-i4-monitoring.wf-tile-clickable .wf-tile-active:hover .wf-tile-title {
  color: var(--i4c-tile-monitoring-active-hover-title-color); }

.wf-i4-monitoring.wf-tile-clickable .wf-tile-active:hover .wf-tile-subtitle {
  color: var(--i4c-tile-monitoring-active-hover-subtitle-color); }

.wf-i4-monitoring .wf-tile-active .wf-tile-body:before,
.wf-i4-monitoring .wf-tile-active .wf-tile-body:after {
  border: 1px solid #ffffff;
  background-color: var(--i4c-tile-monitoring-active-icon-color) !important;
  animation: animation-fade 1.5s infinite; }

/* #endregion */

/* --Tiles styles-- */
.wf-tile {
  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-disabled-foreground-color);
  background-color: var(--i4c-tile-disabled-background-color); }

.wf-tile-disabled .wf-tile-icon,
.wf-tile-disabled .wf-tile-title {
  color: var(--i4c-tile-disabled-foreground-color); }

.wf-tile-clickable:hover,
.wf-tile-clickable.resizing {
  background-color: var(--i4c-tile-c-hover-background-color);
  transition: all 0.4s; }

.wf-tile-clickable:hover .wf-tile-title,
.wf-tile-clickable.resizing .wf-tile-title {
  color: var(--i4c-tile-c-hover-title-color); }

.wf-tile-clickable:hover .wf-tile-subtitle,
.wf-tile-clickable.resizing .wf-tile-subtitle {
  color: var(--i4c-tile-c-hover-subtitle-color); }

.wf-tile-clickable:hover .wf-tile-icon,
.wf-tile-clickable.resizing .wf-tile-icon {
  color: var(--i4c-tile-c-hover-icon-color); }

.wf-tile-clickable .wf-tile-active {
  background-color: var(--i4c-tile-c-active-background-color); }

.wf-tile-clickable .wf-tile-active .wf-tile-title {
  color: var(--i4c-tile-c-active-title-color); }

.wf-tile-active .wf-tile-subtitle {
  color: var(--i4c-tile-c-active-subtitle-color); }

.wf-tile-active .wf-tile-icon {
  color: var(--i4c-tile-c-active-icon-color); }

.wf-tile-clickable:hover .wf-tile-active {
  background-color: var(--i4c-tile-c-active-hover-background-color); }

.wf-tile-clickable:hover .wf-tile-active .wf-tile-title {
  color: var(--i4c-tile-c-active-hover-title-color); }

.wf-tile-clickable:hover .wf-tile-active .wf-tile-subtitle {
  color: var(--i4c-tile-c-active-hover-subtitle-color); }

.wf-tile-clickable:hover .wf-tile-active .wf-tile-icon {
  color: var(--i4c-tile-c-active-hover-icon-color); }

.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 {
  font-size: var(--i4c-tile-icon-size);
  line-height: var(--i4c-tile-icon-size);
  display: block;
  width: var(--i4c-tile-icon-size);
  color: var(--i4c-tile-icon-color);
  margin: 0 20px; }

/*------------------------------------------------
    InPanel content tile widget and components
 -----------------------------------------------*/
.wf-tile-content {
  background: var(--i4c-tile-content-background-color); }

.wf-tile-content-icon {
  color: var(--i4c-tile-content-icon-color);
  font-size: var(--i4c-tile-content-icon-size);
  text-align: center; }

.wf-tile-content .wf-tile-value {
  font-weight: normal;
  display: flex;
  flex-direction: row;
  padding-top: 0;
  height: 100%;
  align-items: center;
  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-hover-background); }

.wf-tile-content:hover .wf-tile-content-icon {
  color: var(--i4c-tile-content-hover-icon-color); }

.wf-tile-content:hover .wf-tile-value {
  color: var(--i4c-tile-content-hover-value-color); }

.wf-tile-content:hover .wf-tile-value-subtitle {
  color: var(--i4c-tile-content-hover-subtitle-color); }

.wf-tile-active .wf-tile-content {
  background: var(--i4c-tile-content-active-background); }

.wf-tile-active .wf-tile-content-icon {
  color: var(--i4c-tile-content-active-icon-color); }

.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-active-value-color); }

.wf-tile-active .wf-tile-value-subtitle {
  color: var(--i4c-tile-content-active-subtitle-color); }

.wf-tile-active:hover .wf-tile-content {
  background: var(--i4c-tile-content-active-hover-background); }

.wf-tile-active:hover .wf-tile-content-icon {
  color: var(--i4c-tile-content-active-hover-icon-color); }

.wf-tile-active:hover .wf-tile-value {
  color: var(--i4c-tile-content-active-hover-value-color); }

.wf-tile-active:hover .wf-tile-value-subtitle {
  color: var(--i4c-tile-content-active-hover-subtitle-color); }

/*------------------------------*/
/* Panel widget elements styles */
/*------------------------------*/
.wf-panel {
  border: 1px solid var(--i4c-panel-border-color);
  -webkit-box-shadow: var(--i4c-panel-box-shadow);
  box-shadow: var(--i4c-panel-box-shadow); }

.wf-panel-body,
.wf-panel-top-filter {
  background-color: var(--i4c-panel-body-background); }

.wf-panel-footer {
  background: var(--i4c-panel-footer-background);
  border-top: 1px solid var(--i4c-panel-border-color); }

.wf-panel-head {
  background: var(--i4c-panel-header-background); }

.wf-panel-head-variant {
  background-color: var(--i4c-panel-header-variant);
  background-image: url("../images/panel-title-variant-bg.png"); }

.wf-panel-title {
  color: var(--i4c-panel-title-color);
  margin: 0;
  font-weight: var(--i4c-panel-title-font-weight); }

.wf-panel-subtitle {
  color: var(--i4c-panel-subtitle-color); }

.wf-panel-head-control {
  color: var(--i4c-panel-header-control);
  transition: all 0.3s; }

.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 {
  background: var(--i4c-panel-toolbar-background);
  border-bottom: 1px solid var(--i4c-panel-border-color);
  box-shadow: var(--i4c-panel-box-shadow);
  padding: 5px 15px; }

.wf-panel-toolbar .wf-panel-toolbar-item {
  margin-right: 5px;
  background: var(--i4c-panel-toolbar-item-background);
  color: var(--i4c-panel-toolbar-item-foreground);
  border: 1px solid var(--i4c-panel-toolbar-item-border-color);
  padding: 2px 5px;
  font-size: 14px;
  float: left;
  display: flex;
  height: 26px;
  min-width: 26px;
  align-items: center; }

.wf-panel-toolbar-icon {
  color: var(--i4c-panel-toolbar-icon);
  font-size: 14px; }

svg.wf-panel-toolbar-icon path {
  fill: var(--i4c-panel-toolbar-icon); }

.wf-panel-toolbar .wf-panel-toolbar-item:hover {
  background: var(--i4c-panel-toolbar-item-hover-background);
  color: var(--i4c-panel-toolbar-item-hover-foreground); }

.wf-panel-toolbar .wf-panel-toolbar-item:hover .wf-panel-toolbar-icon {
  color: var(--i4c-panel-toolbar-item-hover-foreground); }

.wf-panel-toolbar .wf-panel-toolbar-item:hover svg.wf-panel-toolbar-icon path {
  fill: var(--i4c-panel-toolbar-item-hover-foreground); }

.wf-panel-toolbar .wf-panel-toolbar-item.active .wf-panel-toolbar-icon {
  color: var(--i4c-panel-toolbar-item-active-foreground); }

.wf-panel-toolbar .wf-panel-toolbar-item.active .wf-panel-toolbar-icon path {
  fill: var(--i4c-panel-toolbar-item-active-foreground); }

.wf-panel-toolbar .wf-panel-toolbar-item.active .wf-panel-toolbar-text {
  color: var(--i4c-panel-toolbar-item-active-foreground); }

.wf-panel-toolbar .wf-panel-toolbar-item.active {
  background: var(--i4c-panel-toolbar-item-active-background); }

.wf-panel.wf-panel-predefined {
  margin-left: 0px;
  background: transparent; }

.wf-panel.wf-panel-predefined:hover :before {
  background: transparent; }

/*.wf-panel.wf-panel-predefined:before {
        content: " ";
        background: var(--body-background);
        top: 0;
        bottom: 0;
        position: absolute;
        right: 0;
        width: 20px;
        z-index: 99;
    }*/
.wf-panel.wf-panel-predefined .wf-panel-body {
  overflow: auto; }

.wf-panel-body-loading-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: initial; }

/* #region i4Energy panels */
.wf-i4-energy.wf-panel-head {
  background: var(--i4c-energy-panel-heade-background);
  border-bottom: 1px solid var(--i4c-light-border-color); }

/* #endregion */
/* #region i4Monitoring panels */
.wf-i4-monitoring.wf-panel-head {
  background: var(--i4c-monitoring-panel-heade-background);
  border-bottom: 1px solid var(--i4c-light-border-color); }

/* #region i4SCADA panels */
.wf-i4-scada.wf-panel-head {
  background: var(--i4c-scada-panel-heade-background);
  border-bottom: 1px solid var(--i4c-light-border-color); }

/* #region i4Analytics panels */
.wf-i4-analytics.wf-panel-head {
  background: var(--i4c-analytics-panel-heade-background);
  border-bottom: 1px solid var(--i4c-light-border-color); }

/* #region Maintenance panels */
.wf-i4-maintenance.wf-panel-head {
  background: var(--i4c-maintenance-panel-heade-background);
  border-bottom: 1px solid var(--i4c-light-border-color); }

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

.wf-panel-footer-actionbar button {
  padding: 2px 10px; }

.wf-panel-header-error {
  padding-left: 45px !important; }

.wf-panel-header-error:before {
  background: var(--i4c-danger-color) !important;
  content: " ";
  position: absolute;
  padding: 7px;
  border-radius: 50%;
  border: 1px solid white;
  top: 50%;
  transform: translateY(-50%);
  left: 15px; }

.svg-panel-toolbar-icon {
  position: absolute;
  left: 4px;
  top: 2px;
  pointer-events: none; }

.svg-panel-toolbar-icon {
  width: 17px;
  height: 17px; }

.svg-panel-toolbar-icon path {
  fill: var(--i4c-panel-toolbar-icon); }

.btn-default:hover svg > path,
.wf-panel-toolbar .wf-panel-toolbar-item:hover .svg-panel-toolbar-icon path {
  fill: var(--i4c-panel-toolbar-item-hover-foreground); }

.btn-default.active svg > path,
.wf-panel-toolbar .wf-panel-toolbar-item.active .svg-panel-toolbar-icon path {
  fill: var(--i4c-panel-toolbar-item-active-foreground); }

/* Panel custom fields */
.wf-panel-body-content .wf-range-picker .input-group-sm input {
  height: 34px !important; }

.wf-panels {
  overflow-y: hidden;
  white-space: normal;
  list-style: none;
  position: relative;
  width: 100%;
  display: inline-block;
  height: 100%;
  vertical-align: top;
  padding: 0; }

.wf-panel {
  height: 100%;
  padding: 0;
  margin: 10px 5px;
  float: left;
  overflow-y: hidden;
  position: relative;
  -webkit-transform: translateZ(0);
  -webkit-perspective: 1000px;
  -webkit-backface-visibility: hidden; }

/*.wf-panels-container {
    display: flex;
}*/
/*------------------------------------------*/
/* 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
----------------------------------*/
.wf-panel-inner {
  padding: 0;
  margin: 0 0 0 0;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column; }

.wf-panel-footer {
  position: relative;
  bottom: 0;
  height: 40px;
  width: 100%;
  padding: 0px 15px;
  border-top: 1px solid #ccc;
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: space-between; }

.wf-panel-footer-actionbar {
  height: 26px; }

.wf-panel-footer-content {
  width: auto;
  overflow: hidden; }

.wf-overwrite-white-space-pagination-panel-footer {
  white-space: normal !important;
  /* need for Mozilla */ }

.wf-panel-head {
  z-index: 10000;
  position: relative;
  margin: 0;
  padding: 0 15px;
  width: 100%;
  height: 45px;
  -webkit-transform: translateZ(0);
  -webkit-perspective: 1000px;
  -webkit-backface-visibility: hidden; }

.wf-panel-title {
  font-size: 16px;
  line-height: initial;
  display: flex;
  flex-direction: column;
  height: 45px;
  justify-content: space-around;
  padding: 3px 0; }

.wf-panel-subtitle {
  font-size: 14px;
  display: block;
  line-height: normal; }

.wf-panel-head-controls {
  display: inline-flex;
  align-items: center;
  position: absolute;
  right: 10px;
  height: 45px; }

.wf-panel-head-control {
  font-size: 14px;
  margin-left: 10px;
  cursor: pointer; }

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

/*----------------------------------
    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; }

/*----------------------------------
    Panel footer contents
----------------------------------*/
.wf-panel-footer .input-required {
  color: #000000;
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%); }

.wf-panel-footer .input-required::after {
  content: none; }

.pagination {
  display: flex; }

pagination-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  padding: 0 15px; }

/*------------------------------------------------
    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; }

/* AH - HAVE TO BE REVIEWED */
.wf-panel-top-filter {
  margin-top: 0px;
  border-bottom: 1px solid #fff;
  box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.25);
  padding: 10px 15px;
  position: relative;
  z-index: 1; }

.filter-label-container {
  max-height: 120px;
  overflow: auto;
  margin-right: -15px; }

.wf-panel-predefined .wf-panel-body {
  background-color: transparent;
  padding: 0; }

.wf-panel-toolbar {
  border-bottom: 1px solid #fff;
  box-shadow: 0 2px 5px -3px rgba(0, 0, 0, 0.25);
  z-index: 1000; }

.wf-panel-toolbar-text {
  padding: 0 5px;
  display: none;
  line-height: 12px;
  height: 25px;
  font-size: 12px;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: normal; }

.i4c-advfilter-content {
  display: flex;
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0; }

.i4c-advfilter-head {
  position: relative;
  flex: auto;
  padding: 0 15px;
  height: 100%;
  display: flex;
  flex-direction: column; }

.i4c-advfilter-head .tab-content {
  overflow-y: auto;
  flex: 1;
  margin: 0 -15px;
  padding: 0 15px; }

.i4c-filter-settings {
  max-width: 300px;
  top: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  border-left: 1px solid #dddddd; }

.i4c-advfilter-content .wf-collapse-settings {
  border: none;
  box-shadow: none;
  padding: 0; }

/*----------------------------------
    Panel modifiers  
----------------------------------*/
/*----------------------------------
    Panel modifiers  
----------------------------------*/
.wf-panel-body-loading-indicator {
  margin: 30px auto; }

/* Offcanvas filter panel styles*/
.wf-panel-left-hover {
  bottom: 0;
  top: 0;
  position: absolute;
  z-index: 1000; }

/*.wf-panel-left-hover.has-head {
        margin-top: 47px;
    }*/
.wf-panel-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 15px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  height: 100%; }

.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-offcanvas-sidebar {
  position: absolute;
  width: 355px;
  background: #ffffff;
  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.05);
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1000;
  min-height: 500px; }

.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 {
  top: 15px;
  border-radius: 0;
  line-height: 14px;
  right: -35px;
  padding: 10px;
  position: absolute;
  z-index: 1000;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }

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

/*------------------------------------- 
    Customer switch / selection list 
  ------------------------------------*/
.wf-customer-tile-list {
  margin: -5px; }

.wf-customer-tile-list .wf-customer-tile {
  margin: 5px; }

.wf-customer-tile {
  display: inline-block;
  cursor: pointer; }

.wf-tile-content-icon.wf-customer-logo {
  background-size: contain;
  background-repeat: no-repeat;
  /* To avoid scalled imageg to be picelated in IE*/
  -ms-interpolation-mode: bicubic;
  margin: 0;
  width: 90px !important; }

.wf-customer-tile .wf-customer-tile-title,
.wf-customer-tile .wf-customer-tile-subtitle {
  display: block;
  padding: 3px 5px 2px 5px;
  text-align: left; }

/*components override*/
.wf-accordion-wrapper {
  padding: 0px !important;
  margin-top: 5px; }

.btn-circle {
  border-radius: 0 !important; }

.wf-panel-top-filter .btn[aria-expanded="true"]:before, .wf-controlbar .btn[aria-expanded="true"]:before {
  bottom: -9px !important; }

.wf-panel-top-filter .btn[aria-expanded="true"]:after, .wf-controlbar .btn[aria-expanded="true"]:after {
  bottom: -9px !important; }

.wf-alarm-checkbox input, .wf-alarm-checkbox {
  width: 40px !important; }

/*.wf-panel-top-filter > .form-control-static {
    margin-bottom: 0;
    position: absolute;
    top: 0px;
    right: 15px;
    min-height: initial !important;
    padding: 0 !important;
}*/
.form-control-static {
  margin-bottom: 0;
  min-height: initial !important;
  padding: 0 !important; }

.wf-panel-top-filter .form-group {
  margin-bottom: 0px; }

.wf-ou-image-container {
  height: 305px;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  background-color: #fff;
  -ms-interpolation-mode: bicubic;
  margin-top: -15px;
  box-shadow: 0px 0px 10px #cccccc; }

filter-input, .wf-filter-input {
  display: block;
  position: relative; }

address {
  word-break: break-word; }

/* #region i4scada tiles */
.wf-i4-scada.wf-tile-clickable {
  background: var(--i4c-tile-scada-background); }

.wf-i4-scada.wf-tile-clickable .wf-tile-icon {
  color: var(--i4c-tile-scada-icon-color);
  font-size: var(--i4c-tile-scada-icon-size); }

.wf-i4-scada.wf-tile-clickable .wf-tile-title {
  color: var(--i4c-tile-scada-title-color);
  font-size: var(--i4c-tile-scada-title-size); }

.wf-i4-scada.wf-tile-clickable .wf-tile-subtitle {
  color: var(--i4c-tile-scada-subtitle-color); }

.wf-i4-scada.wf-tile-clickable:hover {
  background: var(--i4c-tile-scada-hover-background); }

.wf-i4-scada.wf-tile-clickable:hover .wf-tile-icon {
  color: var(--i4c-tile-scada-hover-icon-color); }

.wf-i4-scada.wf-tile-clickable:hover .wf-tile-title {
  color: var(--i4c-tile-scada-hover-title-color); }

.wf-i4-scada.wf-tile-clickable:hover .wf-tile-subtitle {
  color: var(--i4c-tile-scada-hover-subtitle-color); }

.wf-i4-scada.wf-tile-clickable .wf-tile-active {
  background: var(--i4c-tile-scada-active-background); }

.wf-i4-scada.wf-tile-clickable .wf-tile-active .wf-tile-icon {
  color: var(--i4c-tile-scada-active-icon-color); }

.wf-i4-scada.wf-tile-clickable .wf-tile-active .wf-tile-title {
  color: var(--i4c-tile-scada-active-title-color); }

.wf-i4-scada.wf-tile-clickable .wf-tile-active .wf-tile-subtitle {
  color: var(--i4c-tile-scada-active-subtitle-color); }

.wf-i4-scada.wf-tile-clickable .wf-tile-active:hover {
  background: var(--i4c-tile-scada-active-hover-background); }

.wf-i4-scada.wf-tile-clickable .wf-tile-active:hover .wf-tile-icon {
  color: var(--i4c-tile-scada-active-hover-icon-color); }

.wf-i4-scada.wf-tile-clickable .wf-tile-active:hover .wf-tile-title {
  color: var(--i4c-tile-scada-active-hover-title-color); }

.wf-i4-scada.wf-tile-clickable .wf-tile-active:hover .wf-tile-subtitle {
  color: var(--i4c-tile-scada-active-hover-subtitle-color); }

.wf-i4-scada .wf-tile-active .wf-tile-body:before,
.wf-i4-scada .wf-tile-active .wf-tile-body:after {
  border: 1px solid #ffffff;
  background-color: var(--i4c-tile-scada-active-icon-color) !important;
  animation: animation-fade 1.5s infinite; }

/* #endregion */

.wf-login-area {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  height: 100%;
  overflow-y: auto;
  position: relative;
  background: var(--i4c-login-area-background); }

.wf-login-header {
  background-color: var(--i4c-login-header-background);
  height: 200px;
  overflow: visible;
  text-align: center;
  display: none; }

.wf-secondary-login-button, .wf-customer-version, .wf-login-contact {
  display: none; }

.wf-login-icon:before {
  content: "\e6de";
  font-size: 24px; }

.wf-login-content {
  padding: 30px 20px;
  background-color: var(--i4c-login-content-background);
  background-image: var(--i4c-login-content-background-img);
  margin: 0 -15px;
  border-top: 1px solid var(--i4c-login-content-border-color);
  border-bottom: 1px solid var(--i4c-login-content-border-color); }

#loginForm,
#socialLoginForm {
  max-width: 400px;
  margin: 0 auto; }

#socialLoginForm {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center; }

#socialLoginForm a {
  margin-top: 0; }

#socialLoginForm a:first-child {
  margin-right: 10px; }

#socialLoginForm a:last-child {
  margin-left: 10px; }

.wf-login-buttons-container button,
.wf-login-buttons-container a {
  border: 1px solid var(--i4c-button-border-color); }

.wf-main-login .form-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  margin: 0; }

.wf-login-content .control-label {
  color: var(--i4c-login-label-color);
  font-weight: normal;
  text-align: left;
  padding-bottom: 5px;
  padding-top: 15px; }

.wf-primary-login-button {
  background: var(--i4c-accent-color);
  color: var(--i4c-main-inverted-foreground); }

/*temp css to force restyling the form -- to be removed*/
.wf-login-content .col-sm-9 {
  width: 100%; }

.col-sm-push-3 {
  left: 0; }

/*temp css to force restyling the form -- to be removed*/
select.form-control {
  cursor: pointer; }

.wf-login-content input[type="text"],
.wf-login-content input:-webkit-autofill,
.wf-login-content input[type="password"] {
  background-color: var(--i4c-login-input-background) !important;
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
  border-radius: var(--i4c-border-radius); }

input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px white inset, 0 0 8px #ffffff; }

.wf-login-buttons-container {
  margin-top: 15px; }

.status-message {
  color: var(--i4c-status-message-color); }

.wf-product-logo {
  background: var(--i4c-product-logo-img);
  text-align: center;
  background-size: contain;
  margin: 120px auto 50px auto;
  height: 80px;
  -moz-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s; }

.wf-product-logo:before {
  content: " ";
  top: 40px;
  position: absolute;
  color: var(--i4c-product-logo-title-color);
  left: 0;
  right: 0;
  font-weight: var(--i4c-product-logo-title-font-weight);
  font-size: var(--i4c-product-logo-title-font-size); }

.wf-product-title, .wf-product-subtitle, .wf-social-login {
  display: none; }

.wf-login-version {
  font-size: 12px;
  padding: 20px; }

.wf-login-footer-toggle-btn {
  border-radius: 3px 3px 0 0;
  border-bottom: none;
  color: var(--i4c-login-footer-button-color); }

.wf-login-footer-toggle-btn[aria-expanded="true"] {
  background-image: var(--i4c-login-footer-button-expanded-background-img);
  background: var(--i4c-login-footer-button-expanded-background); }

.wf-login-footer-toggle-btn[aria-expanded="true"] i {
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg); }

.wf-main-login-footer-logo {
  height: 60px;
  width: 100%;
  background: var(--i4c-main-footer-logo);
  background-size: var(--i4c-main-footer-logo-size); }

#wf-login-footer {
  background-color: var(--i4c-login-footer-background);
  bottom: 0;
  width: 100%;
  line-height: 30px;
  border-top: 1px solid var(--i4c-login-footer-border-color);
  background-image: var(--i4c-login-footer-background-img);
  color: var(--i4c-login-footer-color); }

#wf-login-footer > .container {
  padding: 20px 0; }

#wf-login-footer a {
  color: var(--i4c-accent-color); }

#wf-login-footer .fa {
  margin: 0 5px; }

.validation-summary-errors {
  text-align: center; }

.validation-summary-errors ul {
  list-style-type: none;
  margin-bottom: 0; }

@media (max-width: 768px) {
  .wf-login-logo {
    display: none; }
  .wf-product-logo {
    margin: 20px 0;
    margin-top: 70px; } }

@media (max-height: 790px) {
  .wf-login-logo {
    width: 100px;
    height: 100px; } }

@media (max-height: 650px) {
  .wf-login-logo {
    display: none; } }

/*------------------------------*/
/* Brand resources */
/*------------------------------*/
:root {
  /*layout*/
  --body-font-size: 13px;
  --body-font-family: "Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body-background: #f6f6f6;
  --body-background-image: none;
  --i4c-border-radius: 0px;
  --i4c-padding-sm: 5px;
  /*colors*/
  --i4c-brand-color: #db0807;
  --i4c-accent-color: #db0807;
  --i4c-primary-color: #0E79B6;
  --i4c-primary-color-action: #044569;
  --i4c-danger-color: #CF252C;
  --i4c-danger-color-action: #9f1313;
  --i4c-success-color: #009C29;
  --i4c-success-color-action: #004F15;
  --i4c-warning-color: #ff871f;
  --i4c-warning-color-action: #9f5413;
  --i4c-info-color: #29B6F6;
  --i4c-info-color-action: #8994a0;
  --i4c-yellow-color: #EDE941;
  --i4c-yellow-color-action: #A09D1C;
  /*background*/
  --i4c-main-background: #ffffff;
  --i4c-secondary-background: #f6f6f6;
  --i4c-main-accent-background: #db0807;
  --i4c-secondary-accent-background: #9f1313;
  --i4c-light-background: #e6e6e6;
  --i4c-lighter-background: #f2f2f2;
  --i4c-light-gray-background: #a1a1a1;
  --i4c-gray-background: #808080;
  --i4c-dark-background: #434343;
  --i4c-strong-background: #555555;
  --i4c-darker-background: #363636;
  --i4c-black-background: #000000;
  --i4c-white-background: #FFFFFF;
  /*foreground*/
  --i4c-body-text-color: #333333;
  --i4c-title-foreground: #282828;
  --i4c-subtitle-foreground: #808080;
  --i4c-small-foreground: #363636;
  --i4c-text-muted-foreground: #a1a1a1;
  --i4c-main-inverted-foreground: #ffffff;
  --i4c-secondary-inverted-foreground: #f5f5f5;
  --i4c-main-accent-foreground: #ffffff;
  --i4c-secondary-accent-foreground: #ffffff;
  --i4c-light-inverted-foreground: #f2f2f2;
  --i4c-light-foreground: #a1a1a1;
  --i4c-light-border-color: #CCCCCC;
  --i4c-border-color: #111111;
  --i4c-light-subtitle-color: #e1e1e1;
  --i4c-text-variant-color: #363636;
  --i4c-highlight-color: #009C29;
  /*login*/
  --i4c-login-area-background: #FFFFFF;
  --i4c-login-header-background: #FFFFFF;
  --i4c-login-content-background: rgba(255, 255, 255, 0.4);
  --i4c-login-content-background-img: none;
  --i4c-login-content-border-color: #FFFFFF;
  --i4c-login-label-color: #565656;
  --i4c-login-input-background: #ffffff;
  --i4c-login-input-color: #565656;
  --i4c-product-logo-img: url(../images/splash_product_logo.svg) no-repeat center center;
  --i4c-product-logo-title-color: #282828;
  --i4c-product-logo-title-font-size: 24px;
  --i4c-product-logo-title-font-weight: normal;
  --i4c-status-message-color: #565656;
  --i4c-login-footer-background: rgba(255, 255, 255, 0.75);
  --i4c-login-footer-background-img: none;
  --i4c-login-footer-color: #565656;
  --i4c-login-footer-border-color: #565656;
  --i4c-login-footer-button-color: #565656;
  --i4c-login-footer-button-expanded-background-img: none;
  --i4c-login-footer-button-expanded-background: #F6F6F6;
  --i4c-main-footer-logo: transparent url(../images/login-footer-logo.png) no-repeat center;
  --i4c-main-footer-logo-size: 225px;
  /*side-nav*/
  --i4c-side-nav-background: #363636;
  --i4c-side-nav-brand-logo: url(../images/navbar_logo_i4.svg);
  --i4c-nav-brand-background: #db0807;
  --i4c-nav-brand-hover-background: #FFFFFF;
  --i4c-side-nav-li-border-bottom: rgba(85, 85, 85, 0.5);
  --i4c-side-nav-li-border-bottom-hover: rgba(85, 85, 85, 0.25);
  --i4c-side-nav-a-background: #363636;
  --i4c-side-nav-a-foreground: #C2C2C2;
  --i4c-side-nav-active-a-background: #FFFFFF;
  --i4c-side-nav-active-a-icon: #db0807;
  --i4c-side-nav-active-a-foreground: #262626;
  --i4c-side-nav-hover-a-background: #262626 /*#db0807*/;
  --i4c-side-nav-hover-a-foreground: #fff;
  --i4c-side-nav-icon-size: 32px;
  /*header*/
  --i4c-header-background: #363636;
  --i4c-header-foreground: #FFFFFF;
  --i4c-header-subtitle: #92a9b8;
  --i4c-header-item-background: #363636;
  --i4c-header-item-foreground: #FFFFFF;
  --i4c-header-item-active-background: #db0807;
  --i4c-header-item-active-icon: #FFFFFF;
  --i4c-header-item-active-foreground: #FFFFFF;
  /*panels*/
  --i4c-panel-border-color: #cccccc;
  --i4c-panel-background-image: none;
  --i4c-panel-body-background: #FFFFFF;
  --i4c-panel-footer-background: #fefefe;
  --i4c-panel-header-background: #363636;
  --i4c-panel-header-control: #e6e6e6;
  --i4c-panel-header-control-hover: #ffffff;
  --i4c-panel-title-color: #ffffff;
  --i4c-panel-title-font-weight: normal;
  --i4c-panel-subtitle-color: #C2C2C2;
  --i4c-panel-toolbar-background: #FFFFFF;
  --i4c-panel-toolbar-icon: #565656;
  --i4c-panel-toolbar-item-background: #FFFFFF;
  --i4c-panel-toolbar-item-foreground: #363636;
  --i4c-panel-toolbar-item-border-color: transparent;
  --i4c-panel-toolbar-item-hover-background: #db0807;
  --i4c-panel-toolbar-item-hover-foreground: #ffffff;
  --i4c-panel-toolbar-item-active-background: #db0807;
  --i4c-panel-toolbar-item-active-foreground: #FFFFFF;
  --i4c-panel-box-shadow: none;
  --i4c-panel-header-variant: #666666;
  --i4c-panel-header-variant-subtitle: #C2C2C2;
  --i4c-panel-header-variant-control: #f2f2f2;
  /*-*/
  --i4c-energy-panel-heade-background: #db0807;
  --i4c-monitoring-panel-heade-background: #A236A3;
  --i4c-scada-panel-heade-background: #E31B22;
  --i4c-analytics-panel-heade-background: #f39200;
  --i4c-maintenance-panel-heade-background: #3D76B0;
  /*tiles*/
  --i4c-tile-border-color: #ccc;
  --i4c-tile-background-color: #FFFFFF;
  --i4c-tile-title-color: #565656;
  --i4c-tile-subtitle-color: #565656;
  --i4c-tile-icon-color: #565656;
  --i4c-tile-title-size: 13px;
  --i4c-tile-icon-size: 32px;
  --i4c-tile-disabled-background-color: #F6f6f6;
  --i4c-tile-disabled-foreground-color: #808080;
  /*-*/
  --i4c-tile-c-hover-background-color: #f6f6f6;
  --i4c-tile-c-hover-icon-color: #db0807;
  --i4c-tile-c-hover-title-color: #434343;
  --i4c-tile-c-hover-subtitle-color: #434343;
  --i4c-tile-c-active-background-color: #db0807;
  --i4c-tile-c-active-title-color: #FFFFFF;
  --i4c-tile-c-active-subtitle-color: #FFFFFF;
  --i4c-tile-c-active-icon-color: #FFFFFF;
  /*-*/
  --i4c-tile-c-active-hover-background-color: #db0807;
  --i4c-tile-c-active-hover-title-color: #FFFFFF;
  --i4c-tile-c-active-hover-subtitle-color: #FFFFFF;
  --i4c-tile-c-active-hover-icon-color: #FFFFFF;
  /*panel tiles*/
  --i4c-tile-content-background-color: #FFFFFF;
  --i4c-tile-content-icon-color: #565656;
  --i4c-tile-content-value-color: #565656;
  --i4c-tile-content-subtitle-color: #565656;
  --i4c-tile-content-title-size: 13px;
  --i4c-tile-content-icon-size: 32px;
  /*-*/
  --i4c-tile-content-hover-background: #f6f6f6;
  --i4c-tile-content-hover-icon-color: #db0807;
  --i4c-tile-content-hover-value-color: #565656;
  --i4c-tile-content-hover-subtitle-color: #565656;
  /*-*/
  --i4c-tile-content-active-background: #db0807;
  --i4c-tile-content-active-icon-color: #FFFFFF;
  --i4c-tile-content-active-value-color: #FFFFFF;
  --i4c-tile-content-active-title-color: #FFFFFF;
  --i4c-tile-content-active-subtitle-color: #FFFFFF;
  /*-*/
  --i4c-tile-content-active-hover-background: #db0807;
  --i4c-tile-content-active-hover-icon-color: #FFFFFF;
  --i4c-tile-content-active-hover-value-color: #FFFFFF;
  --i4c-tile-content-active-hover-subtitle-color: #FFFFFF;
  /*customer tiles*/
  --i4c-tile-customer-background: #FFFFFF;
  --i4c-tile-customer-icon-color: #565656;
  --i4c-tile-customer-title-color: #565656;
  --i4c-tile-customer-subtitle-color: #565656;
  --i4c-tile-customer-title-size: 13px;
  --i4c-tile-customer-icon-size: 32px;
  /*-*/
  --i4c-tile-customer-hover-background: #f6f6f6;
  --i4c-tile-customer-hover-icon-color: #db0807;
  --i4c-tile-customer-hover-title-color: #565656;
  --i4c-tile-customer-hover-subtitle-color: #565656;
  /*-*/
  --i4c-tile-customer-active-background: #db0807;
  --i4c-tile-customer-active-icon-color: #FFFFFF;
  --i4c-tile-customer-active-title-color: #FFFFFF;
  --i4c-tile-customer-active-subtitle-color: #FFFFFF;
  /*-*/
  --i4c-tile-customer-active-hover-background: #db0807;
  --i4c-tile-customer-active-hover-icon-color: #FFFFFF;
  --i4c-tile-customer-active-hover-title-color: #FFFFFF;
  --i4c-tile-customer-active-hover-subtitle-color: #FFFFFF;
  /*analytics tiles*/
  --i4c-tile-analytics-background: #FFFFFF;
  --i4c-tile-analytics-icon-color: #434343;
  --i4c-tile-analytics-title-color: #434343;
  --i4c-tile-analytics-subtitle-color: #565656;
  --i4c-tile-analytics-title-size: 13px;
  --i4c-tile-analytics-icon-size: 32px;
  /*-*/
  --i4c-tile-analytics-hover-background: #f6f6f6;
  --i4c-tile-analytics-hover-icon-color: #f39200;
  --i4c-tile-analytics-hover-title-color: #434343;
  --i4c-tile-analytics-hover-subtitle-color: #434343;
  /*-*/
  --i4c-tile-analytics-active-background: #FFFFFF;
  --i4c-tile-analytics-active-icon-color: #f39200;
  --i4c-tile-analytics-active-title-color: #aaa;
  --i4c-tile-analytics-active-subtitle-color: #aaa;
  /*-*/
  --i4c-tile-analytics-active-hover-background: #FFFFFF;
  --i4c-tile-analytics-active-hover-icon-color: #f39200;
  --i4c-tile-analytics-active-hover-title-color: #aaa;
  --i4c-tile-analytics-active-hover-subtitle-color: #aaa;
  /*energy tiles*/
  --i4c-tile-energy-background: #FFFFFF;
  --i4c-tile-energy-icon-color: #8bc34a;
  --i4c-tile-energy-title-color: #434343;
  --i4c-tile-energy-subtitle-color: #565656;
  --i4c-tile-energy-title-size: 13px;
  --i4c-tile-energy-icon-size: 32px;
  /*-*/
  --i4c-tile-energy-hover-background: #f6f6f6;
  --i4c-tile-energy-hover-icon-color: #82ae13;
  --i4c-tile-energy-hover-title-color: #434343;
  --i4c-tile-energy-hover-subtitle-color: #434343;
  /*-*/
  --i4c-tile-energy-active-background: #FFFFFF;
  --i4c-tile-energy-active-icon-color: #82ae13;
  --i4c-tile-energy-active-title-color: #aaa;
  --i4c-tile-energy-active-subtitle-color: #aaa;
  /*-*/
  --i4c-tile-energy-active-hover-background: #FFFFFF;
  --i4c-tile-energy-active-hover-icon-color: #82ae13;
  --i4c-tile-energy-active-hover-title-color: #aaa;
  --i4c-tile-energy-active-hover-subtitle-color: #aaa;
  /*maintenance tiles*/
  --i4c-tile-maintenance-background: #FFFFFF;
  --i4c-tile-maintenance-icon-color: #434343;
  --i4c-tile-maintenance-title-color: #434343;
  --i4c-tile-maintenance-subtitle-color: #565656;
  --i4c-tile-maintenance-title-size: 13px;
  --i4c-tile-maintenance-icon-size: 32px;
  /*-*/
  --i4c-tile-maintenance-hover-background: #f6f6f6;
  --i4c-tile-maintenance-hover-icon-color: #3D76B0;
  --i4c-tile-maintenance-hover-title-color: #434343;
  --i4c-tile-maintenance-hover-subtitle-color: #434343;
  /*-*/
  --i4c-tile-maintenance-active-background: #FFFFFF;
  --i4c-tile-maintenance-active-icon-color: #3D76B0;
  --i4c-tile-maintenance-active-title-color: #aaa;
  --i4c-tile-maintenance-active-subtitle-color: #aaa;
  /*-*/
  --i4c-tile-maintenance-active-hover-background: #FFFFFF;
  --i4c-tile-maintenance-active-hover-icon-color: #3D76B0;
  --i4c-tile-maintenance-active-hover-title-color: #aaa;
  --i4c-tile-maintenance-active-hover-subtitle-color: #aaa;
  /*monitoring tiles*/
  --i4c-tile-monitoring-background: #FFFFFF;
  --i4c-tile-monitoring-icon-color: #434343;
  --i4c-tile-monitoring-title-color: #434343;
  --i4c-tile-monitoring-subtitle-color: #565656;
  --i4c-tile-monitoring-title-size: 13px;
  --i4c-tile-monitoring-icon-size: 32px;
  /*-*/
  --i4c-tile-monitoring-hover-background: #f6f6f6;
  --i4c-tile-monitoring-hover-icon-color: #A236A3;
  --i4c-tile-monitoring-hover-title-color: #434343;
  --i4c-tile-monitoring-hover-subtitle-color: #434343;
  /*-*/
  --i4c-tile-monitoring-active-background: #FFFFFF;
  --i4c-tile-monitoring-active-icon-color: #A236A3;
  --i4c-tile-monitoring-active-title-color: #aaa;
  --i4c-tile-monitoring-active-subtitle-color: #aaa;
  /*-*/
  --i4c-tile-monitoring-active-hover-background: #FFFFFF;
  --i4c-tile-monitoring-active-hover-icon-color: #A236A3;
  --i4c-tile-monitoring-active-hover-title-color: #aaa;
  --i4c-tile-monitoring-active-hover-subtitle-color: #aaa;
  /*scada tiles*/
  --i4c-tile-scada-background: #FFFFFF;
  --i4c-tile-scada-icon-color: #434343;
  --i4c-tile-scada-title-color: #434343;
  --i4c-tile-scada-subtitle-color: #565656;
  --i4c-tile-scada-title-size: 13px;
  --i4c-tile-scada-icon-size: 32px;
  /*-*/
  --i4c-tile-scada-hover-background: #f6f6f6;
  --i4c-tile-scada-hover-icon-color: #E31B22;
  --i4c-tile-scada-hover-title-color: #434343;
  --i4c-tile-scada-hover-subtitle-color: #434343;
  /*-*/
  --i4c-tile-scada-active-background: #FFFFFF;
  --i4c-tile-scada-active-icon-color: #E31B22;
  --i4c-tile-scada-active-title-color: #aaa;
  --i4c-tile-scada-active-subtitle-color: #aaa;
  /*-*/
  --i4c-tile-scada-active-hover-background: #FFFFFF;
  --i4c-tile-scada-active-hover-icon-color: #E31B22;
  --i4c-tile-scada-active-hover-title-color: #aaa;
  --i4c-tile-scada-active-hover-subtitle-color: #aaa;
  /*buttons*/
  --i4c-button-background: #FFFFFF;
  --i4c-button-foreground: #565656;
  --i4c-button-border-color: #CCCCCC;
  --i4c-button-default-hover-background: #db0807;
  --i4c-button-default-hover-foreground: #FFFFFF;
  --i4c-button-default-active-background: #db0807;
  --i4c-button-default-active-foreground: #FFFFFF;
  --i4c-button-default-focus-background: #F6F6F6;
  --i4c-button-default-focus-foreground: #db0807;
  --i4c-button-highlighted-background: #f2f2f2;
  --i4c-button-highlighted-foreground: #565656;
  --i4c-button-highlighted-active-background: #db0807;
  --i4c-button-highlighted-active-foreground: #FFFFFF;
  /*-*/
  --i4c-button-link-accent-background: #FFFFFF;
  --i4c-button-link-accent-foreground: #db0807;
  --i4c-button-link-accent-active-background: #db0807;
  --i4c-button-link-accent-active-foreground: #FFFFFF;
  /*-*/
  --i4c-button-circle-background: #FFFFFF;
  --i4c-button-circle-foreground: #565656;
  --i4c-button-circle-border-color: #CCCCCC;
  --i4c-button-circle-hover-background: #db0807;
  --i4c-button-circle-hover-foreground: #FFFFFF;
  --i4c-button-circle-hover-border-color: #CCCCCC;
  /*-*/
  --i4c-button-success-background: #009C29;
  --i4c-button-success-foreground: #ffffff;
  --i4c-button-success-border-color: #4cae4c;
  --i4c-button-success-hover-background: #449d44;
  --i4c-button-success-hover-foreground: #ffffff;
  --i4c-button-success-hover-border-color: #398439;
  --i4c-button-success-disabled-background: #28a745;
  --i4c-button-success-disabled-border-color: #28a745;
  /*-*/
  --i4c-button-variant-background: #FFFFFF;
  --i4c-button-variant-foreground: #565656;
  --i4c-button-variant-border-color: #CCCCCC;
  --i4c-button-variant-active-background: #555555;
  --i4c-button-variant-active-foreground: #ffffff;
  --i4c-button-variant-active-border-color: #555555;
  --i4c-button-variant-disabled-background: #6c757d;
  --i4c-button-variant-disabled-border-color: #6c757d;
  /*-*/
  --i4c-button-highlighted-accent-background: #db0807;
  --i4c-button-highlighted-accent-foreground: #FFFFFF;
  --i4c-button-highlighted-accent-border-color: #CCCCCC;
  --i4c-button-highlighted-accent-active-background: #db0807;
  --i4c-button-highlighted-accent-active-foreground: #ffffff;
  --i4c-button-highlighted-accent-active-border-color: #555555;
  /*-*/
  --i4c-button-accent-background: #FFFFFF;
  --i4c-button-accent-foreground: #565656;
  --i4c-button-accent-border-color: #CCCCCC;
  --i4c-button-accent-focus-background: #FFFFFF;
  --i4c-button-accent-focus-foreground: #db0807;
  --i4c-button-accent-focus-border-color: #db0807;
  --i4c-button-accent-active-background: #db0807;
  --i4c-button-accent-active-foreground: #FFFFFF;
  --i4c-button-accent-active-border-color: #db0807;
  --i4c-button-accent-disabled-background: #a1a1a1;
  --i4c-button-accent-disabled-foreground: #FFFFFF;
  /*buttons content*/
  --i4c-button-subtitle-foreground: #a1a1a1;
  --i4c-button-hover-title-foreground: #f2f2f2;
  --i4c-button-hover-icon-color: #FFFFFF;
  --i4c-button-active-hover-subtitle-foreground: #f2f2f2;
  --i4c-button-active-hover-icon-color: #e1e1e1;
  /*kpi*/
  --i4c-kpi-clickable-foreground: #333333;
  --i4c-kpi-clickable-background: #FFFFFF;
  --i4c-kpi-clickable-border-left: #cccccc;
  --i4c-kpi-clickable-hover-foreground: #333333;
  --i4c-kpi-clickable-hover-background: #FFFFFF;
  --i4c-kpi-clickable-hover-border-left: #db0807;
  --i4c-consumption-type-icon-color: #434343;
  --i4c-consumption-type-icon-font-size: 18px;
  --i4c-consumption-type-name-color: #434343;
  --i4c-consumption-type-name-font-size: 16px;
  --i4c-consumption-type-value-font-size: 32px;
  --i4c-consumption-type-unit-color: #a1a1a1;
  /*calendar*/
  --i4c-cal-cell-foreground: #000000;
  --i4c-cal-cell-background: #fbfbfb;
  --i4c-cal-cell-hover-background: #ededed;
  --i4c-cal-cell-hover-foreground: #565656;
  --i4c-cal-cell-border-color: #c2c2c2;
  --i4c-cal-weekend-foreground: #CF252C;
  --i4c-cal-week-box-background: #db0807;
  --i4c-cal-week-box-foreground: #FFFFFF;
  --i4c-cal-week-box-border-color: #db0807;
  --i4c-cal-today-background: #fdf8c8;
  --i4c-cal-today-foreground: #db0807;
  /*map*/
  --i4c-map-cluster-sm-background: rgba(118, 175, 42, 0.6);
  --i4c-map-cluster-sm-foreground: #FFFFFF;
  --i4c-map-cluster-md-background: rgba(255, 135, 31, 0.6);
  --i4c-map-cluster-md-foreground: #FFFFFF;
  --i4c-map-cluster-lg-background: rgba(219, 8, 8, 0.6);
  --i4c-map-cluster-lg-foreground: #FFFFFF;
  /*load profile*/
  --i4c-load-profile-filter-background: #ffffff;
  --i4c-load-profile-filter-footer: #fafafa;
  --i4c-load-profile-filter-search-background: #fafafa;
  /*forms*/
  --i4c-form-control-validation-indicator: #CF252C;
  --i4c-list-group-item-background: #FFFFFF;
  --i4c-list-group-item-foreground: #565656;
  --i4c-list-group-item-hover-background: #db0807;
  --i4c-list-group-item-hover-foreground: #FFFFFF;
  --i4c-list-group-item-selected-hover-background: #db0807;
  --i4c-list-group-item-selected-hover-foreground: #FFFFFF;
  --i4c-list-group-item-active-background: #db0807;
  --i4c-list-group-item-active-foreground: #FFFFFF;
  /*charts*/
  --i4c-chart-title-color: #666666;
  --i4c-chart-title-unit-color: #9d9da5;
  --i4c-chart-title-i-font-size: 18px;
  --i4c-axis-x-label-fill: #9d9da5;
  --i4c-chart-tooltip-header-background: #363636;
  --i4c-chart-tooltip-header-foreground: #FFFFFF;
  --i4c-chart-tooltip-header-background-img: none;
  --i4c-chart-ticks-color: #a1a1a9;
  --i4c-chart-max-line-color: #CF252C;
  --i4c-chart-min-line-color: #009C29;
  --i4c-chart-avg-line-color: #363636; }

/* Slash Screen Styles */
.splash {
  background: var(--i4c-main-background);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center; }

.splash-customer-logo {
  /*background: url(../images/splash_logo.svg) no-repeat center center;*/
  background: none;
  background-size: contain;
  width: 200px;
  height: 200px;
  margin: 30px auto 20px auto; }

.wf-customer-title,
.splash-customer-title {
  display: none; }

.splash-product-title > svg {
  display: none; }

.splash-product-title {
  width: 600px;
  height: 80px;
  background: var(--i4c-product-logo-img);
  margin: 200px auto 50px auto;
  background-size: contain; }

.splash-loading-indicator-container {
  margin: 100px auto;
  position: relative;
  width: 6em;
  height: 6em; }

.splash-loading-indicator-container:after {
  content: "Welcome!";
  font-weight: normal;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  letter-spacing: 14px;
  font-size: 30px;
  top: -75px;
  animation: fadeIn 5s;
  color: #565656; }

.splash-loading-indicator-element {
  margin: 3em auto;
  font-size: 12px;
  position: relative;
  text-indent: -9999em;
  border-top: 2px solid transparent;
  border-left: 2px solid var(--i4c-accent-color);
  -webkit-animation: spinner_animation 1.1s infinite linear;
  -moz-animation: spinner_animation 1.1s infinite linear;
  -o-animation: spinner_animation 1.1s infinite linear;
  -ms-animation: spinner_animation 1.1s infinite linear;
  animation: spinner_animation 2s infinite linear; }

.splash-loading-indicator-element,
.splash-loading-indicator-element:after {
  -ms-border-radius: 50%;
  border-radius: 50%;
  width: 6em;
  height: 6em; }

/* #region Brand Logo */
.wf-shell .wf-shell-header {
  height: 40px;
  border: none;
  padding-left: 40px;
  border-radius: 0; }

.side-nav .navbar-brand-logo {
  padding: 5px;
  width: 40px;
  height: 40px;
  background-image: url(../images/navbar_logo_i4.svg);
  background-color: var(--i4c-brand-color);
  -ms-background-size: contain;
  background-size: contain; }

.side-nav .brand-logo {
  display: none; }

.side-nav-wrapper {
  background-color: var(--i4c-side-nav-background);
  width: auto;
  transition: 0.2s;
  overflow: visible;
  top: 40px;
  bottom: 0;
  float: left;
  position: relative; }

.side-nav li:first-child {
  border-bottom: none; }

#shell-content-wrapper {
  margin: 0 0 0 40px; }

/*side nav*/
#sideNavCollapse {
  position: absolute;
  top: 0;
  right: -20px;
  transition: 0.2s;
  margin: 0;
  display: block !important;
  width: 20px;
  height: 20px;
  cursor: pointer; }

#sideNavCollapse:checked {
  transition: 0.2s; }

.collapse-nav-button {
  background: var(--i4c-header-item-background);
  width: 20px;
  height: 20px;
  position: absolute;
  color: red;
  padding: 3px 5px;
  cursor: pointer;
  right: -20px;
  pointer-events: none; }

.collapse-nav-button:before {
  content: " ";
  display: inline-block;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  width: 8px !important;
  height: 8px !important;
  transform: rotate(-45deg);
  position: absolute;
  top: 5px;
  left: 5px;
  transition: 0.2s;
  pointer-events: none; }

input#sideNavCollapse:checked ~ .collapse-nav-button:before {
  transform: rotate(-225deg);
  transition: 0.2s;
  left: 7px; }

#sideNavCollapse:checked + .side-nav-scrollarea {
  width: 100px;
  transition: 0.2s; }

.side-nav-wrapper .side-nav-scrollarea {
  width: auto;
  transition: 0.2s;
  overflow: hidden; }

#sideNavCollapse:checked + .side-nav-scrollarea {
  width: auto;
  transition: 0.2s; }

.side-nav-scrollarea .side-nav {
  transition: 0.2s;
  padding-top: 0px;
  height: 100%;
  width: calc(100% + 20px); }

.side-nav li a .link-text {
  opacity: 0;
  transition: 0.2s;
  margin-left: 5px;
  text-align: left;
  display: none; }

#sideNavCollapse:checked ~ .side-nav-scrollarea .side-nav li a .link-text {
  opacity: 1;
  display: block;
  transition: 0.2s;
  padding: 0 5px; }

.side-nav > li > a {
  min-height: 40px;
  padding: 5px;
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  align-items: center; }

.side-nav li a .link-icon {
  width: 24px;
  margin: 0 2px;
  transition: 0.2s; }

#sideNavCollapse:checked + .side-nav-scrollarea .side-nav li a .link-icon {
  width: 24px;
  transition: 0.2s; }

.wf-panel-head-control.wf-small-x {
  background: #da2805;
  width: 20px;
  padding: 3px; }

@media (max-height: 600px) {
  .side-nav-wrapper {
    width: 40px; }
  .side-nav > li > a {
    min-height: 40px !important; }
  .side-nav li a .link-text {
    display: block !important; }
  .side-nav li a .link-text,
  #sideNavCollapse {
    display: none !important; }
  .side-nav li a .link-text,
  .collapse-nav-button {
    display: none !important; } }

/*font-face override*/
.wf-subtitle,
.wf-title {
  font-weight: normal; }

.fa-2x,
.wf-2x {
  font-size: initial;
  height: auto; }

.wf-shell-header-item .clickable.open, .wf-shell-header-item .active {
  animation: none;
  color: white; }

.wf-controlbar .btn-group > .btn, .wf-controlbar .btn-group-vertical > .btn {
  position: relative;
  float: left;
  width: 26px;
  height: 26px;
  padding: 3px 0; }

/*.wf-collapse-body .btn-group {
    margin: 5px 0;
}*/
.input-group-sm > .form-control, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .btn {
  height: 30px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px; }

input {
  border-radius: 0 !important; }

/*# sourceMappingURL=webfactory.bundle.css.map */