/*-----------------------
Slash Screen Styles
-----------------------*/
.splash {
margin: 5% 0 0 0;
text-align: center;
}
.wf-spalsh-logo {
background: url("../images/splash_product_logo.svg") no-repeat center center;
background-size: contain;
width: 300px;
height: 170px;
margin: 0 auto;
}
.logo {
position: relative;
width: 80px;
height: 110px;
display: inline-block;
margin: 0 10px;
}
.logo.logo-html5 {
background: url("../svg/svg_icon_html5.svg") no-repeat center center;
}
.logo.logo-css3 {
background: url("../svg/svg_icon_css3.svg") no-repeat center center;
}
.logo.logo-js {
background: url("../svg/svg_icon_js.svg") no-repeat center center;
}
.logo-webfactory {
background: url("../svg/svg_wf_i4_ribbon_logo.svg") no-repeat center center;
background-size: contain;
width: 225px;
height: 170px;
margin: 0 auto;
}
.spinner {
margin: 1em auto;
position: relative;
}
thead {
background: #F7F7F7;
}
.thumbnail {
background: #fff;
}
.row {
overflow: visible;
}
/*-----------------------
Necessary because of the conflict
between SmartEditor extension Responsive Menu
-----------------------*/
[id*="-submenu"]~ul li a {
box-sizing: content-box;
}
/* z-index of dropdowns and popovers */
.popover {
z-index: 10060!important;
}
.dropdown-menu {
z-index: 10070!important;
}
/* Cursor behaviour for elements with modal dialog toggle applied */
*[data-toggle='modal'] {
cursor: pointer;
}
*[data-toggle='none'] {
cursor: default!important;
}
button[data-toggle='none'],
.btn[data-toggle='none'] {
cursor: not-allowed!important;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}
/*-----------------------
Misc Bootstrap Overrides
-----------------------*/
.page-header {
margin: 30px 0;
}
.btn-default:visited {
color: #333!important;
}
.btn-link:visited {
color: #777!important;
}
.btn-primary:visited,
.btn-success:visited,
.btn-danger:visited,
.btn-info:visited,
.btn-warning:visited,
.btn-variant:visited {
color: #fff;
}
button,
button span {
-webkit-touch-callout: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.panel-body {
position: relative;
}
.tooltip.in {
opacity: 0.7;
filter: alpha(opacity=70);
}
.label-important {
background: #990100;
color: #ffffff;
}
.label-black,
.label-inverted {
background-color: #333;
color: #ffffff;
}
.disabled {
cursor: not-allowed;
opacity: .65;
}
.disabled > * {
pointer-events: none !important;
}
/* Bootstrap label groups */
.label-group > .label:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
margin-right: 0;
}
.label-group>.label:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin-left: 0;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
background-color: #ffffff;
}
/* Bootstrap Buttons changes*/
.btn {
white-space: normal !important;
word-wrap: break-word;
}
.btn:focus {
outline: none;
}
.btn-block.btn-block-left,
.btn-block-left {
text-align: left;
}
.btn-block.btn-block-right,
.btn-block-right {
text-align: right;
}
.btn-variant-dark {
color: #ffffff;
background-color: #777777;
background-image: linear-gradient(#333333, #555555 6%, #444444);
background-repeat: no-repeat;
border: 1px solid #333333;
}
.btn-variant-dark:hover,
.btn-variant-dark:focus,
.btn-variant-dark:active,
.btn-variant-dark.active,
.open .dropdown-toggle.btn-variant-dark {
color: #ffffff;
background-color: #636363;
background-image: linear-gradient(#333333, #555555 6%, #222222);
border-color: #585858;
}
.btn-variant-dark:active,
.btn-variant-dark.active,
.open .dropdown-toggle.btn-variant-dark {
background-image: none;
}
.btn-variant-dark.disabled,
.btn-variant-dark[disabled],
fieldset[disabled] .btn-variant-dark,
.btn-variant-dark.disabled:hover,
.btn-variant-dark[disabled]:hover,
fieldset[disabled] .btn-variant-dark:hover,
.btn-variant-dark.disabled:focus,
.btn-variant-dark[disabled]:focus,
fieldset[disabled] .btn-variant-dark:focus,
.btn-variant-dark.disabled:active,
.btn-variant-dark[disabled]:active,
fieldset[disabled] .btn-variant-dark:active,
.btn-variant-dark.disabled.active,
.btn-variant-dark[disabled].active,
fieldset[disabled] .btn-variant-dark.active {
background-image: none;
background-color: #777777;
border-color: #777777;
}
.wf-flat .btn-group.open .dropdown-toggle,
.wf-flat .btn-group.open .dropdown-toggle:focus,
.wf-flat .btn-group.open .dropdown-toggle:active,
.wf-flat .btn.active,
.wf-flat .btn:active {
box-shadow: none;
}
.dropdown-menu > li > .wf-secured-container > a {
cursor: pointer;
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
.dropdown-menu>li>a {
cursor: pointer;
}
/*@media (mmax-width: 768px) {
.modal-dialog {
width: 90%;
margin: 30px auto;
}
}*/
/* Listgroup extension */
.list-group-hover .list-group-item:not(.active):hover {
background-color: #f5f5f5;
}
/*-----------------------
Basic Elements
-----------------------*/
body {
font-family: 'Segoe UI', Arial, Helvetica;
font-size: 13px;
}
h1, h2, h3, h4, .h1, .h2, .h3 {
text-align: left;
font-weight: normal;
font-style: normal;
text-decoration: none;
font-size: 26px;
display: block;
}
h2, .h2 {
font-size: 20px;
}
h3, .h3 {
margin: 5px 0 0 0;
font-size: 20px;
}
h4, h5, h6, .h4, .h5, .h6 {
display: block;
font-size: 18px;
}
a:focus {
text-decoration: none !important;
}
/*-----------------------
Layout Elements
-----------------------*/
#applicationHost {
position: fixed;
width: 100%;
height: 100%;
}
#main-wrapper {
height: 100%;
}
.page-host {
margin-top: 0;
left: 0;
right: 0;
position: absolute;
/* height: 100%; */
bottom: 30px;
top: 60px;
}
.main {
padding-bottom: 30px;
position: absolute;
top: 0;
bottom: 65px;
left: 0;
right: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
#content {
padding: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
}
#footer {
line-height: 30px;
min-height: 30px;
text-align: left;
}
.durandal-wrapper {
position: relative;
height: 100%;
text-align: left;
}
/*-----------------------
Navbar styles
-----------------------*/
.navbar {
top: 0px;
margin-bottom: 0;
box-shadow: 0 0 13px rgba(0, 0, 0, 0.3);
z-index: 10010;
}
.navbar-fixed-top + .page-host {
top: 60px;
}
.navbar-nav {
float: right;
}
.navbar-default {
background-image: none;
background-color: rgba(40, 40, 40, .95);
border-radius: 0;
border: 0 solid;
}
.navbar-nav-main {
padding-right: 10px;
}
.navbar-left .navbar-nav-main {
padding-right: 0px;
}
.navbar-brand {
display: block;
width: 200px;
height: 60px;
margin: 0;
padding: 0;
background: #fff url('../images/navbar-brand-logo.svg') no-repeat scroll center center;
background-size: 90%;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
background-color: #fff;
}
.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand {
margin: 0;
}
.navbar .navbar-toggle {
margin-top: 13px;
}
.navbar .navbar-toggle:focus {
background-color: #fff;
}
.navbar .navbar-toggle.active .icon-bar {
background-color: #e92931;
-moz-transition: all 1s;
-o-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}
.navbar-collapse {
margin-right: 15px;
}
.navbar-status-bar {
float: right;
}
.navbar-status-bar .wf-navbar-status-bar-item {
height: 60px;
color: #ffffff;
}
.navbar-status-bar .wf-navbar-status-bar-item:hover,
.navbar-status-bar .wf-navbar-status-bar-item:focus {
color: #ffffff;
text-decoration: none;
}
/*-----------------------
Navbar Linkicon Elements
-----------------------*/
.navbar-nav-linkicon {
margin-right: 22px;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
-webkit-transform: none;
transform: none;
color: #fff;
}
.navbar-nav-linkicon:before {
font-size: 20px;
line-height: 60px;
position: absolute;
top: 0;
}
.navbar .navbar-nav-main > li > a > .navbar-nav-linkicon:before {
}
.navbar .navbar-nav-main > li.active > a > .navbar-nav-linkicon:before {
color: #e92931;
}
.navbar-nav.navbar-nav-main > li > a {
line-height: 60px;
padding-top: 0;
padding-bottom: 0;
color: #ffffff;
}
.navbar .navbar-nav-main > li.active > a,
.navbar .navbar-nav-main > li.active > a:focus {
background-image: none;
background-color: #fff;
color: #666666;
}
.navbar .navbar-nav-main > li > a:hover,
.navbar .navbar-nav-main > li.active > a:hover {
color: #eeeeee;
background-image: none;
background-color: #e92931;
-moz-animation: fadeIn 400ms;
-o-animation: fadeIn 400ms;
-webkit-animation: fadeIn 400ms;
animation: fadeIn 400ms;
}
.navbar .navbar-nav-main > li.active > a:hover .navbar-nav-linkicon:before {
color: #ffffff;
}
.navbar .navbar-nav > li > a:hover:after,
.navbar .navbar-nav > li.active > a:hover:after {
position: absolute;
bottom: 0;
left: 50%;
margin-left: -6px;
content: '';
border-right: 6px solid transparent;
border-bottom: 7px solid #fff;
border-left: 6px solid transparent;
}
/*-----------------------
Navigation Sidebar
-----------------------*/
.navbar-left + .page-host {
margin-left: 225px;
padding-left: 15px;
top: 0;
}
.navbar-left {
position: fixed;
z-index: 1050;
left: 225px;
overflow-y: auto;
width: 225px;
height: 100%;
margin-left: -225px;
border-radius: 0;
}
.navbar-left .navbar-header {
float: none;
width: 100%;
margin: 0;
}
.navbar-left > .container .navbar-brand,
.navbar-left > .container-fluid .navbar-brand {
float: none;
width: 100%;
position: relative;
}
.navbar-left > .container-fluid .navbar-brand:before,
.navbar-left > .container-fluid .navbar-brand:after {
content: "";
width: 15px;
background: #fff;
position: absolute;
height: 100%;
left: -15px;
}
.navbar-left > .container-fluid .navbar-brand:after {
right: -15px;
left: auto;
}
.navbar .navbar-collapse,
.navbar-left .navbar-collapse {
margin: 0 -15px;
padding: 0;
}
.navbar-left .navbar-nav {
float: none;
}
.navbar-left li {
line-height: 40px;
width: 100%;
}
.navbar-left li a {
display: block;
text-decoration: none;
}
.navbar.navbar-left .navbar-nav-main > li > a:hover:after,
.navbar.navbar-left .navbar-nav-main > li.active > a:after {
position: absolute;
top: 50%;
right: 0;
bottom: auto;
left: auto;
margin-top: -6px;
margin-left: -6px;
content: '';
border-top: 6px solid transparent;
border-right: 7px solid #fff;
border-bottom: 6px solid transparent;
border-left: 6px solid transparent;
}
.navbar-bottom {
position: fixed;
top: auto;
bottom: 30px;
width: 100%;
overflow-y: auto;
border-radius: 0;
}
.navbar-bottom + .page-host {
margin-bottom: 60px;
top: 0;
}
/*--------------------------------------------------------------
Application settings bar
--------------------------------------------------------------*/
.wf-app-settings-bar {
border-left: 1px solid #666;
border-right: 1px solid #666;
bottom: 0;
color: #ffffff;
cursor: pointer;
font-size: 16px;
left: 50%;
line-height: 30px;
margin-left: -30px;
position: fixed;
text-align: center;
height: 30px;
z-index: 1050;
overflow: visible;
z-index: 1030;
}
.wf-app-settings-bar .btn:hover,
.wf-app-settings-bar .btn:focus {
background-color: #555;
color: #fff;
}
.wf-app-settings-bar .btn {
background-image: none;
background-color: transparent;
border: 0px solid transparent;
border-radius: 0;
font-size: 14px;
font-weight: normal;
line-height: 30px;
height: 30px;
padding: 0;
width: 40px;
}
.wf-app-settings-bar .btn[aria-expanded="true"] {
background-color: #fff;
color: #da1a1a;
}
.wf-app-settings-wrapper {
text-align: center;
position: fixed;
bottom: 30px;
width: 100%;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
background: rgba(0, 0, 0, .7);
color: #fff;
z-index: 10050;
border-bottom: 1px solid #d3d3d3;
}
.wf-app-settings .wf-collapse-content {
padding: 20px;
margin: 0 auto;
}
.wf-app-settings .btn > svg {
margin-top: 5px;
height: 12px;
width: 14px;
}
.wf-app-settings .btn:hover > svg path {
fill: #da1a1a;
}
.wf-app-settings .btn.btn-primary > svg path,
.wf-app-settings .btn.btn-primary:hover > svg path {
fill: #ffffff;
}
.navbar-bottom ~ .wf-app-settings-wrapper {
bottom: 30px;
}
/*alarms bar override*/
#app-alarms {
color:initial;
}
/*---------------------------------------------
Layout Media Queries
---------------------------------------------*/
@media (max-width: 480px) {
.page-header {
margin-top: 80px;
margin-bottom: 20px;
font-size: 20px;
line-height: 20px;
}
.c3 svg {
font: 8px sans-serif;
}
}
@media (min-width: 481px) and (max-width: 768px) {
.page-header {
font-size: 20px;
line-height: 20px;
margin-top: 80px;
}
.c3 svg {
font: 8px sans-serif;
}
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 992px) {
.page-header {
font-size: 20px;
line-height: 20px;
margin-top: 80px;
}
}
/* Large desktop */
@media (min-width: 1200px) {
}
/* Portrait */
@media screen and (orientation:portrait) {
}
/* Landscape */
@media screen and (orientation:landscape) {
}
/*---------------------------------------------
Navbar Media Queries
---------------------------------------------*/
@media (max-width: 768px) {
.navbar-nav {
float: none;
}
.navbar-nav-main {
padding-right: 0;
}
.navbar-left + .page-host {
margin: 0;
padding-left: 15px;
}
.navbar-nav.navbar-nav-main > li > a,
.navbar-nav-linkicon:before {
line-height: 40px;
}
.navbar-left {
position: relative;
z-index: 1000;
left: 0;
overflow-y: visible;
width: 100%;
height: auto;
margin-left: 0;
}
.nav.navbar-nav.navbar-nav-main {
margin: 0;
}
.navbar-left > .container .navbar-brand,
.navbar-left > .container-fluid .navbar-brand {
float: left;
width: 200px;
}
.navbar-nav.navbar-nav-main > li > a:after {
display: none;
}
.loader {
position: absolute;
top: 5px;
right: 50%;
margin-right: -5px;
border-width: 0.2em;
}
}

/*------------------------*/
/* Basic components styles */
/*------------------------*/
/*------------------------*/
/* wf-button component */
/*------------------------*/
wf-button {
float: left;
}
wf-button:last-child:after {
content: "";
clear: both;
}
.btn-group>wf-button:last-child:not(:first-child) .btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin-left: 0;
}
.btn-group>wf-button:first-child:not(:last-child) .btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
margin-right: 0;
}
.wf-button .btn,
.wf-button button:not(.close) .wf-button .wf-button-wrapper,
.wf-button .btn-group {
width: 100%;
height: 100%;
}
/*-------------------------------*/
/* wf-value-display component */
/*-------------------------------*/
.wf-output-box {
border: 1px solid #eeeeee;
box-shadow: none;
text-align: right;
}
.wf-output-box~.wf-unit-addon {
border: 1px solid #ccc;
}
/*------------------------*/
/* wf-input component */
/*------------------------*/
wf-input,
.wf-input {
position: relative;
display: block;
}
.wf-label-addon {
/*padding-right: 5px;*/
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.wf-label-icon {
padding-right: 5px;
}
.wf-unit-addon {
padding-right: 6px;
padding-left: 6px;
min-width: 40px;
border-left: none;
}
.wf-input-box {
text-align: right;
}
.wf-input-box.label-default,
.wf-output-box.label-default {
border: 1px solid #888;
color: #fff;
}
.wf-input-box.label-primary,
.wf-output-box.label-primary {
border: 1px solid #888;
color: #fff;
}
.wf-input-box.label-success,
.wf-output-box.label-success {
border: 1px solid #888;
color: #fff;
}
.wf-input-box.label-info,
.wf-output-box.label-info {
border: 1px solid #888;
color: #fff;
}
.wf-input-box.label-warning,
.wf-output-box.label-warning {
border: 1px solid #888;
color: #000;
}
.wf-input-box.label-danger,
.wf-output-box.label-danger {
border: 1px solid #888;
color: #fff;
}
.wf-input-box.label-transparent,
.wf-output-box.label-transparent {
border: 1px solid #888;
background-color: transparent;
color: #555;
}
wf-input .popover.right {
top: 50%;
transform: translateY(-50%);
width: 111px;
}
wf-input .popover.bottom {
top: initial !important;
margin-top: -10px;
width: 111px;
}
wf-input .popover.left {
left: 0;
top: 50%;
transform: translateY(-50%);
width: 111px;
}
/*------------------------------*/
/* wf-state-symbol component */
/*------------------------------*/
.wf-state-symbol .wf-state-container {
position: absolute;
text-align: center;
width: 100%;
height: auto;
margin: 0 auto;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.wf-state-symbol .wf-state-container:after,
.wf-state-symbol .wf-state-container:after {
position: absolute;
left: 0;
right: 0;
}
.wf-state-path .wf-state-container {
display: block;
position: absolute;
text-align: center;
width: 100%;
height: auto;
margin: 0 auto;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.wf-shape .wf-state-container {
position: absolute;
text-align: center;
margin: 0 auto;
top: 50%;
left: 0;
right: 0;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.wf-shape.wf-ellipse .wf-state-container {
border-radius: 50%;
}
.wf-state-path svg {
overflow: visible;
}
/*------------------------------*/
/* wf-line component */
/*------------------------------*/
.wf-v-l-line {
display: none;
}
.horizontal .wf-v-line,
.horizontal .wf-v-l-line {
display: none;
}
.vertical .wf-h-line,
.horizontal .wf-v-l-line {
display: none;
}
.horizontal-t .wf-v-l-line {
display: block;
}
.horizontal-t .wf-v-line {
display: none;
}
/*------------------------*/
/* wf-slider component */
/*------------------------*/
.wf-slider {
position: relative;
display: block;
height: 100%;
}
.slider.slider-vertical .slider-handle {
cursor: n-resize;
}
.slider.slider-vertical .slider-tick-label {
margin-left: 0 !important;
}
.slider.slider-horizontal {
width: 100%;
}
.slider.slider-vertical {
height: 100%;
min-height: 200px;
margin-bottom: 20px;
}
.slider.slider-horizontal .slider-handle {
cursor: w-resize;
}
.slider.slider-horizontal .slider-tick-label-container,
.slider .tooltip {
pointer-events: none;
}
.slider .tooltip-inner {
max-width: 500px;
}
.slider.slider-vertical .slider-tick-label-container {
margin-left: 25px;
margin-top: -8px !important;
}
/*Fix and aditional colors for triangle slider handler*/
.slider.slider-horizontal .slider-tick.triangle,
.slider.slider-horizontal .slider-handle.triangle {
position: absolute;
transform: translateY(50%);
border-width: 0 10px 10px 10px;
height: 0;
top: 0;
}
.slider.slider-vertical .slider-tick.triangle,
.slider.slider-vertical .slider-handle.triangle {
left: 5px;
}
.slider-danger .slider-vertical .slider-tick.triangle,
.slider-danger .slider-vertical .slider-handle.triangle {
border-left-color: #0480be;
}
.slider-danger .slider-vertical .slider-tick.triangle,
.slider-danger .slider-vertical .slider-handle.triangle {
border-left-color: #d9534f;
}
.slider-info .slider-vertical .slider-tick.triangle,
.slider-info .slider-vertical .slider-handle.triangle {
border-left-color: #5bc0de;
}
.slider-success slider-vertical .slider-tick.triangle,
.slider-success slider-vertical .slider-handle.triangle {
border-left-color: #5cb85c;
}
.slider-primary .slider-horizontal .slider-tick.triangle,
.slider-primary .slider-horizontal .slider-handle.triangle {
border-bottom-color: #0480be;
}
.slider-danger .slider-horizontal .slider-tick.triangle,
.slider-danger .slider-horizontal .slider-handle.triangle {
border-bottom-color: #d9534f;
}
.slider-info .slider-horizontal .slider-tick.triangle,
.slider-info .slider-horizontal .slider-handle.triangle {
border-bottom-color: #5bc0de;
}
.slider-success .slider-horizontal .slider-tick.triangle,
.slider-success .slider-horizontal .slider-handle.triangle {
border-bottom-color: #5cb85c;
}
/* Additional slider colors */
.slider-primary .in-selection,
.slider-primary .slider-selection.tick-slider-selection,
.slider-primary .slider-handle.min-slider-handle,
.slider-primary .slider-handle.max-slider-handle {
background-image: -webkit-linear-gradient(top, #337ab7 0%, #286090 100%);
background-image: -o-linear-gradient(top, #337ab7 0%, #286090 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#286090));
background-image: linear-gradient(to bottom, #337ab7 0%, #286090 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff286090', GradientType=0);
background-repeat: repeat-x;
}
.slider-success .in-selection,
.slider-success .slider-selection.tick-slider-selection,
.slider-success .slider-handle.min-slider-handle,
.slider-success .slider-handle.max-slider-handle {
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%);
background-image: -o-linear-gradient(top, #5cb85c 0%, #449d44 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#449d44));
background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
background-repeat: repeat-x;
}
.slider-info .in-selection,
.slider-info .slider-selection.tick-slider-selection,
.slider-info .slider-handle.min-slider-handle,
.slider-info .slider-handle.max-slider-handle {
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
background-image: -o-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#31b0d5));
background-image: linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);
background-repeat: repeat-x;
}
.slider-warning .in-selection,
.slider-warning .slider-selection.tick-slider-selection,
.slider-warning .slider-handle.min-slider-handle,
.slider-warning .slider-handle.max-slider-handle {
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
background-image: -o-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#ec971f));
background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);
background-repeat: repeat-x;
}
.slider-danger .in-selection,
.slider-danger .slider-selection.tick-slider-selection,
.slider-danger .slider-handle.min-slider-handle,
.slider-danger .slider-handle.max-slider-handle {
background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%);
background-image: -o-linear-gradient(top, #d9534f 0%, #c9302c 100%);
background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c9302c));
background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
background-repeat: repeat-x;
}
/*------------------------*/
/* wf-combobox component */
/*------------------------*/
wf-combobox,
.wf-combobox {
position: relative;
display: block;
}
/*------------------------*/
/* wf-gauge-1 component */
/*------------------------*/
.wf-gauge-1 {
position: relative;
border: 0 dotted #eee;
margin: 0 auto;
}
.wf-gauge-arc {
position: absolute;
}
.wf-gauge-1 .wf-gauge-needle {
position: absolute;
width: 50%;
height: 50%;
margin: 0 0 0 25%;
-moz-transition: -moz-transform 0.5s ease-out;
-o-transition: -o-transform 0.5s ease-out;
-webkit-transition: -webkit-transform 0.5s ease-out;
transition: transform 0.5s ease-out;
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.wf-gauge-icon-container {
position: absolute;
width: 30%;
height: 30%;
left: 50%;
top: 50%;
margin: -15% 0 0 -15%;
border-radius: 50%;
border: solid 2px #fefefe;
background: #666;
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
text-align: center;
}
.wf-gauge-icon-container i {
display: block;
width: 100%;
color: #fff;
position: relative;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.wf-gauge-1 .wf-gauge-value {
position: absolute;
top: 70%;
width: 100%;
text-align: center;
font-size: 32px;
color: #777;
text-shadow: 0 1px 0 #FFFFFF;
}
.wf-gauge-1 .wf-gauge-unit {
font-size: 16px;
padding-left: 3px;
color: #aaa;
}
.wf-gauge-min-label,
.wf-gauge-max-label {
font-size: 14px;
color: #aaa;
line-height: 30px;
}
.wf-gauge-min-label {
position: absolute;
top: 50%;
left: 0;
}
.wf-gauge-max-label {
position: absolute;
top: 50%;
right: 0;
}
.wf-gauge-majortick-container {
width: 1%;
height: 100%;
position: absolute;
left: 49.5%;
}
.wf-gauge-majortick {
width: 100%;
height: 5%;
background: #ddd;
}
.wf-gauge-minortick-container {
width: 1%;
height: 100%;
position: absolute;
left: 49.5%;
}
.wf-gauge-minortick {
margin-top: 5px;
width: 100%;
height: 1%;
background: #ddd;
}
.wf-gauge-high-over-symbol,
.wf-gauge-low-under-symbol {
position: absolute;
top: 50%;
margin-top: -18px;
right: -26px;
font-size: 18px;
-webkit-animation: animation-fade 1s infinite;
-moz-animation: animation-fade 1s infinite;
-o-animation: animation-fade 1s infinite;
animation: animation-fade 1s infinite;
color: #da1a1a;
}
.wf-gauge-low-under-symbol {
right: auto;
left: -26px;
}
/*---------------------------------*/
/* wf-state-indicator component */
/*---------------------------------*/
wf-state-indicator {
display: block;
}
.wf-indicator {
display: block;
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB2ZXJzaW9uPSIxLjEiPg0KPHN0eWxlPg0KCS5zdHlsZV9iYXNlew0KCQlzdHJva2U6CSNmZmY7DQoJCWZpbGw6CSNlZWU7DQogICAgc3Ryb2tlLXRoaWNrbmVzczogMTsNCgl9DQo8L3N0eWxlPg0KICANCiA8ZGVmcz4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJnX2dyZXkxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjODI4MjgyIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4gICANCiAgIDxsaW5lYXJHcmFkaWVudCBpZD0iYmdfd2hpdGUxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iLjciIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iNzAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+CQkgDQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJncmV5IiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiM4MjgyODIiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4JDQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJncmVlbiIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjNDA4MTIzIiBvZmZzZXQ9IjAlIiAvPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0E0RkY0RSIgb2Zmc2V0PSIxMDAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+DQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJyZWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzlCMDAwMCIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGRjAwMDAiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50Pg0KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ieWVsbG93IiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNBRDc3MDAiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkRGRjJBIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJsdWUiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzAwNDdBRiIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMwMERBRkIiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50PgkgDQo8L2RlZnM+ICANCiAgDQo8Zz4NCiAgICAgIDxnID4NCiAgICAgICAgPGNpcmNsZSBmaWxsPSJ1cmwoI2JnX2dyZXkxKSIgcj0iNTAiIGN4PSI1MCIgY3k9IjUwIi8+DQogICAgICAgIDxjaXJjbGUgZmlsbD0idXJsKCNncmV5KSIgcj0iNDUiIGN4PSI1MCIgY3k9IjUwIi8+DQogICAgICAgIDxjaXJjbGUgZmlsbD0idXJsKCNiZ193aGl0ZTEpIiByPSI0MiIgY3g9IjUwIiBjeT0iNTAiLz4NCiAgICAgIDwvZz4NCjwvZz4NCg0KPC9zdmc+DQo=')/*../svg/svg_indicator_grey.svg*/
no-repeat center center;
background-size: contain;
position: relative;
width: 60px;
height: 60px;
}
.wf-indicator-fluid .wf-indicator {
width: 100% !important;
height: 100% !important;
}
.wf-indicator-background {
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
position: absolute;
width: 100%;
height: 100%;
}
.wf-indicator-content {
position: absolute;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
text-align: center;
}
/* State indicator backgrounds */
.wf-indicator.state1 .wf-indicator-background {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB2ZXJzaW9uPSIxLjEiPg0KPHN0eWxlPg0KCS5zdHlsZV9iYXNlew0KCQlzdHJva2U6CSNmZmY7DQoJCWZpbGw6CSNlZWU7DQogICAgc3Ryb2tlLXRoaWNrbmVzczogMTsNCgl9DQo8L3N0eWxlPg0KICANCiA8ZGVmcz4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJnX2dyZXkxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjODI4MjgyIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4gICANCiAgIDxsaW5lYXJHcmFkaWVudCBpZD0iYmdfd2hpdGUxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iLjciIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iNzAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+CQkgDQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJncmVlbiIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjNDA4MTIzIiBvZmZzZXQ9IjAlIiAvPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0E0RkY0RSIgb2Zmc2V0PSIxMDAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+DQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJyZWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzlCMDAwMCIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGRjAwMDAiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50Pg0KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ieWVsbG93IiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNBRDc3MDAiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkRGRjJBIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJsdWUiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzAwNDdBRiIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMwMERBRkIiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50PgkgDQo8L2RlZnM+ICANCiAgDQo8Zz4NCiAgICAgIDxnID4NCiAgICAgICAgPGNpcmNsZSBmaWxsPSJ1cmwoI2JnX2dyZXkxKSIgcj0iNTAiIGN4PSI1MCIgY3k9IjUwIi8+DQogICAgICAgIDxjaXJjbGUgZmlsbD0idXJsKCNncmVlbikiIHI9IjQ1IiBjeD0iNTAiIGN5PSI1MCIvPg0KICAgICAgICA8Y2lyY2xlIGZpbGw9InVybCgjYmdfd2hpdGUxKSIgcj0iNDIiIGN4PSI1MCIgY3k9IjUwIi8+DQogICAgICA8L2c+DQo8L2c+DQoNCjwvc3ZnPg0K')/*../svg/svg_indicator_green.svg*/
;
}
.wf-indicator.state2 .wf-indicator-background {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB2ZXJzaW9uPSIxLjEiPg0KPHN0eWxlPg0KCS5zdHlsZV9iYXNlew0KCQlzdHJva2U6CSNmZmY7DQoJCWZpbGw6CSNlZWU7DQogICAgc3Ryb2tlLXRoaWNrbmVzczogMTsNCgl9DQo8L3N0eWxlPg0KICANCiA8ZGVmcz4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJnX2dyZXkxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjODI4MjgyIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4gICANCiAgIDxsaW5lYXJHcmFkaWVudCBpZD0iYmdfd2hpdGUxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iLjciIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iNzAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+CQkgDQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJncmVlbiIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjNDA4MTIzIiBvZmZzZXQ9IjAlIiAvPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0E0RkY0RSIgb2Zmc2V0PSIxMDAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+DQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJyZWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzlCMDAwMCIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGRjAwMDAiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50Pg0KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ieWVsbG93IiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNBRDc3MDAiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkRGRjJBIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJsdWUiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzAwNDdBRiIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMwMERBRkIiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50PgkgDQo8L2RlZnM+ICANCiAgDQo8Zz4NCiAgICAgIDxnID4NCiAgICAgICAgPGNpcmNsZSBmaWxsPSJ1cmwoI2JnX2dyZXkxKSIgcj0iNTAiIGN4PSI1MCIgY3k9IjUwIiBzdHJva2U9ImVlZSIvPg0KICAgICAgICA8Y2lyY2xlIGZpbGw9InVybCgjcmVkKSIgcj0iNDUiIGN4PSI1MCIgY3k9IjUwIi8+DQogICAgICAgIDxjaXJjbGUgZmlsbD0idXJsKCNiZ193aGl0ZTEpIiByPSI0MiIgY3g9IjUwIiBjeT0iNTAiLz4NCiAgICAgIDwvZz4NCjwvZz4NCg0KPC9zdmc+DQo=')/*../svg/svg_indicator_red.svg*/
;
}
.wf-indicator.state3 .wf-indicator-background {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB2ZXJzaW9uPSIxLjEiPg0KPHN0eWxlPg0KCS5zdHlsZV9iYXNlew0KCQlzdHJva2U6CSNmZmY7DQoJCWZpbGw6CSNlZWU7DQogICAgc3Ryb2tlLXRoaWNrbmVzczogMTsNCgl9DQo8L3N0eWxlPg0KICANCiA8ZGVmcz4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJnX2dyZXkxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjODI4MjgyIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4gICANCiAgIDxsaW5lYXJHcmFkaWVudCBpZD0iYmdfd2hpdGUxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iLjciIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iNzAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+CQkgDQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJncmVlbiIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjNDA4MTIzIiBvZmZzZXQ9IjAlIiAvPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0E0RkY0RSIgb2Zmc2V0PSIxMDAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+DQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJyZWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzlCMDAwMCIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGRjAwMDAiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50Pg0KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ieWVsbG93IiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNBRDc3MDAiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkRGRjJBIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJsdWUiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzAwNDdBRiIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMwMERBRkIiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50PgkgDQo8L2RlZnM+ICANCiAgDQo8Zz4NCiAgICAgIDxnID4NCiAgICAgICAgPGNpcmNsZSBmaWxsPSJ1cmwoI2JnX2dyZXkxKSIgcj0iNTAiIGN4PSI1MCIgY3k9IjUwIiBzdHJva2U9ImVlZSIvPg0KICAgICAgICA8Y2lyY2xlIGZpbGw9InVybCgjeWVsbG93KSIgcj0iNDUiIGN4PSI1MCIgY3k9IjUwIi8+DQogICAgICAgIDxjaXJjbGUgZmlsbD0idXJsKCNiZ193aGl0ZTEpIiByPSI0MiIgY3g9IjUwIiBjeT0iNTAiLz4NCiAgICAgIDwvZz4NCjwvZz4NCg0KPC9zdmc+DQo=')/*../svg/svg_indicator_yellow.svg*/
;
}
.wf-indicator.state4 .wf-indicator-background {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB2ZXJzaW9uPSIxLjEiPg0KPHN0eWxlPg0KCS5zdHlsZV9iYXNlew0KCQlzdHJva2U6CSNmZmY7DQoJCWZpbGw6CSNlZWU7DQogICAgc3Ryb2tlLXRoaWNrbmVzczogMTsNCgl9DQo8L3N0eWxlPg0KICANCiA8ZGVmcz4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJnX2dyZXkxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjODI4MjgyIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4gICANCiAgIDxsaW5lYXJHcmFkaWVudCBpZD0iYmdfd2hpdGUxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iLjciIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iNzAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+CQkgDQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJncmVlbiIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjNDA4MTIzIiBvZmZzZXQ9IjAlIiAvPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0E0RkY0RSIgb2Zmc2V0PSIxMDAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+DQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJyZWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzlCMDAwMCIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGRjAwMDAiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50Pg0KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ieWVsbG93IiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNBRDc3MDAiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkRGRjJBIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJsdWUiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzAwNDdBRiIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMwMERBRkIiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50PgkgDQo8L2RlZnM+ICANCiAgDQo8Zz4NCiAgICAgIDxnID4NCiAgICAgICAgPGNpcmNsZSBmaWxsPSJ1cmwoI2JnX2dyZXkxKSIgcj0iNTAiIGN4PSI1MCIgY3k9IjUwIiBzdHJva2U9ImVlZSIvPg0KICAgICAgICA8Y2lyY2xlIGZpbGw9InVybCgjYmx1ZSkiIHI9IjQ1IiBjeD0iNTAiIGN5PSI1MCIvPg0KICAgICAgICA8Y2lyY2xlIGZpbGw9InVybCgjYmdfd2hpdGUxKSIgcj0iNDIiIGN4PSI1MCIgY3k9IjUwIi8+DQogICAgICA8L2c+DQo8L2c+DQoNCjwvc3ZnPg0K')/*../svg/svg_indicator_blue.svg*/
;
}
.wf-indicator.state5 .wf-indicator-background {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB2ZXJzaW9uPSIxLjEiPg0KPHN0eWxlPg0KCS5zdHlsZV9iYXNlew0KCQlzdHJva2U6CSNmZmY7DQoJCWZpbGw6CSNlZWU7DQogICAgc3Ryb2tlLXRoaWNrbmVzczogMTsNCgl9DQo8L3N0eWxlPg0KICANCiA8ZGVmcz4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJnX2dyZXkxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjODI4MjgyIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4gICANCiAgIDxsaW5lYXJHcmFkaWVudCBpZD0iYmdfd2hpdGUxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iLjciIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iNzAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+CQkgDQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJncmVlbiIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjNDA4MTIzIiBvZmZzZXQ9IjAlIiAvPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0E0RkY0RSIgb2Zmc2V0PSIxMDAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+DQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJyZWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzlCMDAwMCIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGRjAwMDAiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50Pg0KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ieWVsbG93IiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNBRDc3MDAiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkRGRjJBIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJsdWUiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzAwNDdBRiIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMwMERBRkIiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50PgkgDQo8L2RlZnM+ICANCiAgDQo8Zz4NCiAgICAgIDxnID4NCiAgICAgICAgPGNpcmNsZSBmaWxsPSJ1cmwoI2JnX2dyZXkxKSIgcj0iNTAiIGN4PSI1MCIgY3k9IjUwIi8+DQogICAgICAgIDxjaXJjbGUgZmlsbD0idXJsKCNncmVlbikiIHI9IjQ1IiBjeD0iNTAiIGN5PSI1MCIvPg0KICAgICAgICA8Y2lyY2xlIGZpbGw9InVybCgjYmdfd2hpdGUxKSIgcj0iNDIiIGN4PSI1MCIgY3k9IjUwIi8+DQogICAgICA8L2c+DQo8L2c+DQoNCjwvc3ZnPg0K')/*../svg/svg_indicator_green.svg*/
;
-moz-animation: animation-fade 0.75s linear infinite alternate;
-o-animation: animation-fade 0.75s linear infinite alternate;
-webkit-animation: animation-fade 0.75s linear infinite alternate;
animation: animation-fade 0.75s linear infinite alternate;
}
.wf-indicator.state6 .wf-indicator-background {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB2ZXJzaW9uPSIxLjEiPg0KPHN0eWxlPg0KCS5zdHlsZV9iYXNlew0KCQlzdHJva2U6CSNmZmY7DQoJCWZpbGw6CSNlZWU7DQogICAgc3Ryb2tlLXRoaWNrbmVzczogMTsNCgl9DQo8L3N0eWxlPg0KICANCiA8ZGVmcz4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJnX2dyZXkxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjODI4MjgyIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4gICANCiAgIDxsaW5lYXJHcmFkaWVudCBpZD0iYmdfd2hpdGUxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iLjciIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iNzAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+CQkgDQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJncmVlbiIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjNDA4MTIzIiBvZmZzZXQ9IjAlIiAvPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0E0RkY0RSIgb2Zmc2V0PSIxMDAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+DQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJyZWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzlCMDAwMCIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGRjAwMDAiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50Pg0KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ieWVsbG93IiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNBRDc3MDAiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkRGRjJBIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJsdWUiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzAwNDdBRiIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMwMERBRkIiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50PgkgDQo8L2RlZnM+ICANCiAgDQo8Zz4NCiAgICAgIDxnID4NCiAgICAgICAgPGNpcmNsZSBmaWxsPSJ1cmwoI2JnX2dyZXkxKSIgcj0iNTAiIGN4PSI1MCIgY3k9IjUwIiBzdHJva2U9ImVlZSIvPg0KICAgICAgICA8Y2lyY2xlIGZpbGw9InVybCgjcmVkKSIgcj0iNDUiIGN4PSI1MCIgY3k9IjUwIi8+DQogICAgICAgIDxjaXJjbGUgZmlsbD0idXJsKCNiZ193aGl0ZTEpIiByPSI0MiIgY3g9IjUwIiBjeT0iNTAiLz4NCiAgICAgIDwvZz4NCjwvZz4NCg0KPC9zdmc+DQo=')/*../svg/svg_indicator_red.svg*/
;
-moz-animation: animation-fade 0.75s linear infinite alternate;
-o-animation: animation-fade 0.75s linear infinite alternate;
-webkit-animation: animation-fade 0.75s linear infinite alternate;
animation: animation-fade 0.75s linear infinite alternate;
}
.wf-indicator.state7 .wf-indicator-background {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB2ZXJzaW9uPSIxLjEiPg0KPHN0eWxlPg0KCS5zdHlsZV9iYXNlew0KCQlzdHJva2U6CSNmZmY7DQoJCWZpbGw6CSNlZWU7DQogICAgc3Ryb2tlLXRoaWNrbmVzczogMTsNCgl9DQo8L3N0eWxlPg0KICANCiA8ZGVmcz4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJnX2dyZXkxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjODI4MjgyIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4gICANCiAgIDxsaW5lYXJHcmFkaWVudCBpZD0iYmdfd2hpdGUxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iLjciIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iNzAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+CQkgDQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJncmVlbiIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjNDA4MTIzIiBvZmZzZXQ9IjAlIiAvPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0E0RkY0RSIgb2Zmc2V0PSIxMDAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+DQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJyZWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzlCMDAwMCIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGRjAwMDAiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50Pg0KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ieWVsbG93IiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNBRDc3MDAiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkRGRjJBIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJsdWUiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzAwNDdBRiIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMwMERBRkIiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50PgkgDQo8L2RlZnM+ICANCiAgDQo8Zz4NCiAgICAgIDxnID4NCiAgICAgICAgPGNpcmNsZSBmaWxsPSJ1cmwoI2JnX2dyZXkxKSIgcj0iNTAiIGN4PSI1MCIgY3k9IjUwIiBzdHJva2U9ImVlZSIvPg0KICAgICAgICA8Y2lyY2xlIGZpbGw9InVybCgjeWVsbG93KSIgcj0iNDUiIGN4PSI1MCIgY3k9IjUwIi8+DQogICAgICAgIDxjaXJjbGUgZmlsbD0idXJsKCNiZ193aGl0ZTEpIiByPSI0MiIgY3g9IjUwIiBjeT0iNTAiLz4NCiAgICAgIDwvZz4NCjwvZz4NCg0KPC9zdmc+DQo=')/*../svg/svg_indicator_yellow.svg*/
;
-moz-animation: animation-fade 0.75s linear infinite alternate;
-o-animation: animation-fade 0.75s linear infinite alternate;
-webkit-animation: animation-fade 0.75s linear infinite alternate;
animation: animation-fade 0.75s linear infinite alternate;
}
.wf-indicator.state8 .wf-indicator-background {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB2ZXJzaW9uPSIxLjEiPg0KPHN0eWxlPg0KCS5zdHlsZV9iYXNlew0KCQlzdHJva2U6CSNmZmY7DQoJCWZpbGw6CSNlZWU7DQogICAgc3Ryb2tlLXRoaWNrbmVzczogMTsNCgl9DQo8L3N0eWxlPg0KICANCiA8ZGVmcz4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJnX2dyZXkxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjODI4MjgyIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4gICANCiAgIDxsaW5lYXJHcmFkaWVudCBpZD0iYmdfd2hpdGUxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iLjciIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iNzAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+CQkgDQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJncmVlbiIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjNDA4MTIzIiBvZmZzZXQ9IjAlIiAvPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0E0RkY0RSIgb2Zmc2V0PSIxMDAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+DQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJyZWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzlCMDAwMCIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGRjAwMDAiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50Pg0KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ieWVsbG93IiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNBRDc3MDAiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkRGRjJBIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJsdWUiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzAwNDdBRiIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMwMERBRkIiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50PgkgDQo8L2RlZnM+ICANCiAgDQo8Zz4NCiAgICAgIDxnID4NCiAgICAgICAgPGNpcmNsZSBmaWxsPSJ1cmwoI2JnX2dyZXkxKSIgcj0iNTAiIGN4PSI1MCIgY3k9IjUwIiBzdHJva2U9ImVlZSIvPg0KICAgICAgICA8Y2lyY2xlIGZpbGw9InVybCgjYmx1ZSkiIHI9IjQ1IiBjeD0iNTAiIGN5PSI1MCIvPg0KICAgICAgICA8Y2lyY2xlIGZpbGw9InVybCgjYmdfd2hpdGUxKSIgcj0iNDIiIGN4PSI1MCIgY3k9IjUwIi8+DQogICAgICA8L2c+DQo8L2c+DQoNCjwvc3ZnPg0K')/*../svg/svg_indicator_blue.svg*/
;
-moz-animation: animation-fade 0.75s linear infinite alternate;
-o-animation: animation-fade 0.75s linear infinite alternate;
-webkit-animation: animation-fade 0.75s linear infinite alternate;
animation: animation-fade 0.75s linear infinite alternate;
}
/* Indicator Label */
.wf-indicator .wf-indicator-label {
position: absolute;
display: inline-block;
width: 70%;
left: 15%;
top: 50%;
transform: translateY(-50%);
padding: 2px 2px;
border: 1px solid #fff;
border-radius: 2px;
background: rgba(255, 255, 255, 0.6);
text-align: center;
-ms-text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
}
.wf-indicator .wf-indicator-label,
.indicator-md .indicator .wf-indicator-label {
font-weight: bold;
font-size: 12px;
line-height: 13px;
}
.indicator-lg .wf-indicator-label {
font-weight: bold;
font-size: 13px;
line-height: 16px;
}
.indicator-sm .wf-indicator-label {
padding: 0px;
font-weight: normal;
font-size: 10px;
line-height: 12px;
text-shadow: none;
}
.indicator-xs .wf-indicator-label {
padding: 0 0 2px 0;
border: none;
font-weight: normal;
font-size: 9px;
line-height: 8px;
text-shadow: none;
background: rgba(255, 255, 255, 0.4);
}
/* State indicator sizes */
.indicator-lg .wf-indicator {
width: 80px;
height: 80px;
}
.indicator-md .wf-indicator {
width: 56px;
height: 56px;
}
.indicator-sm .wf-indicator {
width: 42px;
height: 42px;
}
.indicator-xs .wf-indicator {
width: 28px;
height: 28px;
}
/* State indicator icon positioning */
.wf-indicator-icon {
width: 100%;
height: 100%;
background: center center no-repeat;
background-size: 60%;
position: relative;
}
.wf-indicator .wf-indicator-icon .wf-icon {
position: absolute;
left: 50%;
top: 50%;
-moz-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
-o-transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
}
.wf-indicator-icon .wf-icon {
text-shadow: 0 -1px 0 rgba(0, 0, 0, .1);
font-size: 32px;
line-height: 32px;
}
.indicator-lg .wf-indicator-icon .wf-icon {
font-size: 48px;
line-height: 48px;
}
.indicator-md .wf-indicator-icon .wf-icon {
font-size: 32px;
line-height: 32px;
}
.indicator-sm .wf-indicator-icon .wf-icon {
font-size: 20px;
line-height: 20px;
}
.indicator-xs .wf-indicator-icon .wf-icon {
font-size: 14px;
line-height: 14px;
}
.wf-indicator,
.wf-indicator.normal,
.wf-indicator.state1,
.wf-indicator.state3,
.wf-indicator.state4,
.wf-indicator.state5,
.wf-indicator.state7,
.wf-indicator.state8 {
color: #000;
}
.wf-indicator.state2,
.wf-indicator.state6 {
color: #fff;
}
/*--------------------------------
wf-alarm-viewer components
---------------------------------*/
.wf-alarm-viewer .panel-title {
min-height:20px;
}
.modal-dialog .close {
opacity: .75;
color: #ffffff;
}
.table.wf-table-alarms,
.table.wf-table-logs {
margin-top: -15px;
width: 100%;
background: #FEFEFE;
margin-bottom: 0;
}
.table.wf-table-alarms tr:hover {
cursor: pointer;
}
td.index {
padding-left: 15px;
color: #888;
}
.table.wf-table-alarms tr:nth-child(2n) td {
background-color: inherit;
}
tr:nth-child(2n) td {
background-color: #fff;
}
tr.on {
color: #990100;
}
tr.acknowledged {
color: #E08F00;
}
tr.gone {
color: #0c9900;
}
/*--- fix for opacity ignoring z-index---*/
.wf-alarm-viewer a.btn.btn-sm.btn-default.disabled {
background: #e8e8e8;
color: #aaa;
opacity: inherit;
}
/*-------------------------------------*/
/* Popovers */
/*-------------------------------------*/
.popover .btn-close,
.popover .close {
color: #000;
opacity: 0.75;
text-shadow: none;
float: right;
font-size: 15px;
}
/*-------------------------------------*/
/* styles for the alarm cards */
/*-------------------------------------*/
.wf-alarm-viewer-cards .panel-body {
position: relative;
}
.wf-alarm-viewer-cards .panel-body:before {
position: absolute;
top: -8px;
left: 8px;
border-right: 10px solid transparent;
border-bottom: 10px solid #fff;
border-left: 10px solid transparent;
content: '';
}
.wf-alarm-viewer-cards .panel-content {
position: relative;
z-index: 2;
}
.wf-alarm-viewer-cards .panel-body-inner {
position: relative;
min-height: 130px;
}
.wf-panel-content-title {
display: block;
margin-bottom: 20px;
font-weight: 400;
font-size: 16px;
line-height: 20px;
}
.timestamp-box {
line-height: 20px;
}
.label-timestamp,
.label-title {
display: inline-block;
min-width: 90px;
color: #aaa;
font-size: 12px;
}
.wf-label-timestamp i,
.wf-label-title i {
margin-right: 5px;
}
.wf-panel-state-element {
position: absolute;
right: 0;
bottom: 0;
z-index: 1;
width: 60px;
height: 60px;
}
.active .wf-panel-state-element {
background: url("../images/icons/icon_alarm.png") no-repeat center center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
-ms-background-size: cover;
background-size: cover;
}
.acknowledged .wf-panel-state-element {
background: url("../images/icons/icon_maintain.png") no-repeat center center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
-ms-background-size: cover;
background-size: cover;
}
.gone .wf-panel-state-element {
background: url("../images/icons/icon_gone.png") no-repeat center center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
-ms-background-size: cover;
background-size: cover;
}
.wf-alarm-viewer-cards .panel-default:hover {
border-color: #aaa;
}
.wf-alarm-viewer-cards .wf-alarm-priority {
background-color: rgba(0, 0, 0, .25);
}
.wf-alarm-viewer-cards .panel-default .panel-heading,
.modal-alarm-details .panel-default {
background: #ddd;
}
.wf-alarm-viewer-cards .panel-default .panel-heading .panel-title {
color: #333;
}
.wf-alarm-viewer-cards .panel {
border-color: #ccc;
}
.wf-alarm-viewer-cards .panel-danger:hover {
border-color: #990100;
cursor: pointer;
-moz-transition: all 0.25s ease-in 0;
-o-transition: all 0.25s ease-in 0;
-webkit-transition: all 0.25s ease-in 0;
-ms-transition: all 0.25s ease-in 0;
transition: all 0.25s ease-in 0;
}
.wf-alarm-viewer-cards .panel-danger .panel-heading {
background: #990100;
}
.wf-alarm-viewer-cards .panel-danger .panel-heading .panel-title {
color: #fff;
}
.wf-alarm-viewer-cards .panel-warning:hover {
border-color: #E08F00;
}
.wf-alarm-viewer-cards .panel-warning .panel-heading {
background: #E08F00;
}
.wf-alarm-viewer-cards .panel-warning .panel-heading .panel-title {
color: #fff;
}
.wf-alarm-viewer-cards .panel-success:hover {
border-color: #0c9900;
}
.wf-alarm-viewer-cards .panel-success .panel-heading {
background: #0c9900;
}
.wf-alarm-viewer-cards .panel-success .panel-heading .panel-title {
color: #fff;
}
/*--------------------------------------------------------------
Modal Dialog Styles
--------------------------------------------------------------*/
.modalBlockout {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: black;
opacity: 0;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.modalHost {
top: auto;
left: auto;
}
.modal {
display: block;
text-align: center;
margin: 0!important;
}
.modal-header {
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.modal-header .modal-title {
font-style: normal;
font-weight: bold;
margin: 0;
line-height: 1.25;
font-size: 18px;
}
.modal-dialog.modal-top {
display: inline-block;
text-align: left;
vertical-align: top;
}
.modal-dialog.modal-center {
display: inline-block;
text-align: left;
vertical-align: middle;
}
.modal-dialog.modal-bottom {
display: inline-block;
text-align: left;
vertical-align: bottom;
}
.wf-component-configuration-dialog {
z-index: 1060;
}
@media screen and (min-width: 768px) {
.modal:before {
display: inline-block;
vertical-align: middle;
content: " ";
height: 100%;
}
}
/* -----------------------------------------------------------
wf-chart
-------------------------------------------------------------*/
.wf-chart .panel-title {
min-height: 20px;
}
.wf-chart-wrapper {
position: relative;
margin-bottom: 10px;
}
.wf-chart .wf-panel-settings {}
.wf-chart .c3-tooltip th {
background-color: #555;
font-weight: normal;
}
.wf-chart .c3-brush .extent {
fill-opacity: 0.6;
}
.wf-chart .c3-brush .extent {
transform: scaleY(0.85) translateY(4px);
}
.wf-chart .c3-brush .extent {
fill-opacity: .1;
}
.wf-chart .extent {
/* fill: #ffffff; */
}
.wf-chart .resize > rect {
visibility: visible !important;
fill: #da0808;
}
/* -----------------------------------------------------------
General panel related styles
-------------------------------------------------------------*/
.wf-panel .wf-panel-toolbar {
margin-top: -9px;
margin-right: -12px;
}
.wf-panel .wf-panel-settings {
position: absolute;
top: 0;
left: 0;
right: 0;
box-shadow: 0 5px 6px -2px rgba(170, 170, 170, 0.5);
background-color: rgba(245, 245, 245, .98);
z-index: 10;
}
.wf-control-bar .btn {
margin-top: -9px;
}
.wf-input-icon-left,
.wf-input-icon-right {
position: absolute;
left: 15px;
top: 10px;
pointer-events: none;
}
.wf-input-icon-right {
left: auto;
top: auto;
right: 15px;
top: 10px;
}
/*----------------------------------
Styles for 3 states toggle switch
-----------------------------------*/
.wf-switch-3-states svg {
position: absolute;
top: 0;
z-index: -1;
height: 100%;
width: 100%;
}
.wf-switch-3-states-base {
background-color: #eeeeee;
border-radius: 8px;
z-index: -2;
}
.wf-switch-3-states-border {
border: 2px solid #bbbbbb;
display: block;
border-radius: 6px;
width: 100%;
height: 100%;
}
.wf-switch-3-states-gradient {
padding: 6px;
border-radius: 8px;
background: -moz-linear-gradient(-45deg, rgba(0,0,0,0.09) 0%, rgba(16,16,16,0.09) 2%, rgba(255,255,255,0.65) 31%, rgba(0,0,0,0.17) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0.09) 0%,rgba(16,16,16,0.09) 2%,rgba(255,255,255,0.65) 31%,rgba(0,0,0,0.17) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(0,0,0,0.09) 0%,rgba(16,16,16,0.09) 2%,rgba(255,255,255,0.65) 31%,rgba(0,0,0,0.17) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#17000000', endColorstr='#2b000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.wf-switch-3-states.state2 .wf-3-switch-on,
.wf-switch-3-states.state3 .wf-3-switch-on {
display: none;
}
.wf-switch-3-states.state1 .wf-3-switch-off,
.wf-switch-3-states.state3 .wf-3-switch-off {
display: none;
}
.wf-switch-3-states.state1 .wf-3-switch-neutral,
.wf-switch-3-states.state2 .wf-3-switch-neutral {
display: none;
}
.wf-switch-3-states .wf-switch-button {
background: rgba(238, 238, 238, 0.1) none repeat scroll 0 0;
border: 1px solid transparent;
border-radius: 0;
color: #222;
cursor: pointer;
display: block;
font-size: 9px;
font-weight: bold;
height: 33.33%;
margin-bottom: 0;
overflow: hidden;
padding: 0;
-moz-transition: background-color 0.5s ease 0s;
-o-transition: background-color 0.5s ease 0s;
-webkit-transition: background-color 0.5s ease 0s;
transition: background-color 0.5s ease 0s;
width: 100%;
}
.wf-switch-3-states-label {
opacity: 0;
}
.wf-switch-3-states .wf-switch-button:hover {
background-color: rgba(255, 255, 255, .5);
}
.wf-switch-3-states .wf-switch-button:hover .wf-switch-3-states-label {
opacity: 1;
}
/*-----------------------*/
/* User Login widget */
/*-----------------------*/
.wf-user-login {}
.wf-user-login-data-content {
overflow-x: hidden;
}
.wf-user-login .wf-user-login-labels {
text-align: left;
}
.wf-user-login .wf-user-login-labels span {
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Popover content styles */
.wf-user-login-content .input-group {
margin-bottom: 10px;
}
.wf-user-login-content {
min-width: 230px;
min-height: 170px;
}
.wf-user-logout.wf-user-login-content {
min-height: 35px;
}
/*-----------------------
Extension for Bootstrap Date Time Picker Styles
-----------------------*/
.picker-switch a[data-action] {
width: 47px;
height: 54px;
display: block;
margin: 0 auto;
}
.bootstrap-datetimepicker-widget .btn:active,
.bootstrap-datetimepicker-widget .btn.active {
background-image: none;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.highlightTr tr:hover {
background-color: #eeeeee !important;
}
/*-----------------------
Extension for Bootstrap Select Styles
-----------------------*/
.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
width: 100%;
}
.input-group.date {
z-index:99999;
}
/*.bootstrap-select>.dropdown-toggle {
display: flex;
}*/
/*-----------------------
Loading Indicators
-----------------------*/
.loader {
position: absolute;
top: 15px;
right: 10px;
}
.wf-loader-input {
position: absolute;
top: 6px;
right: 35px;
pointer-events: none;
width: 15px;
height: 15px;
}
.wf-loader-input.active,
.loader.active,
.spinner {
animation: 1s linear infinite spinner_animation;
border-color: #000000 #000000 #000000 #e92931;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) #e92931;
border-style: solid;
border-width: 0.3em;
font-size: 12px;
text-indent: -9999em;
visibility: hidden;
color: #e92931;
z-index: 10000;
visibility: visible;
}
.loader,
.loader:after {
border-radius: 50%;
overflow: hidden;
width: 30px;
height: 30px;
}
.wf-loader-input,
.wf-loader-input:after {
border-radius: 50%;
overflow: hidden;
width: 20px;
height: 20px;
}
.spinner,
.spinner:after {
border-radius: 50%;
width: 5em;
height: 5em;
overflow: hidden;
}
/*--------------------------------------------------------------
Callout Elements
--------------------------------------------------------------*/
.wf-callout-box {
position: relative;
margin: 10px 0;
padding: 15px 30px 15px 15px;
background-color: #f8f8f8;
border-left: 30px solid #EEEEEE;
border-radius: 5px;
}
.wf-callout-box-icon,
.wf-callout-box:before {
position: absolute;
left: -24px;
top: 50%;
margin-top: -9px;
font-size: 18px;
width: 18px;
line-height: 18px;
font-family: WFIconFont;
opacity: 1;
text-shadow: none;
}
.wf-callout-box h4 {
margin-bottom: 5px;
margin-top: 0;
color: #555;
}
.wf-callout-box-primary {
border-left-color: #1160b8 !important;
}
.wf-callout-box-primary .wf-callout-box-title {
color: #1160b8 !important;
}
.wf-callout-box-primary:before {
color: #ffffff;
}
.wf-callout-box-success {
border-left-color: #0c9900 !important;
}
.wf-callout-box-success .wf-callout-box-title {
color: #0c9900 !important;
}
.wf-callout-box-success:before {
color: #ffffff;
}
.wf-callout-box-danger {
border-left-color: #da1a1a !important;
}
.wf-callout-box-danger .wf-callout-box-title {
color: #da1a1a !important;
}
.wf-callout-box-danger:before {
color: #ffffff;
}
.wf-callout-box-warning {
border-left-color: #e08f00 !important;
}
.wf-callout-box-warning .wf-callout-box-title {
color: #e08f00 !important;
}
.wf-callout-box-warning:before {
color: #ffffff;
}
.wf-callout-box-info {
border-left-color: #5bc0de;
}
.wf-callout-box-info .wf-callout-box-title {
color: #5bc0de;
}
.wf-callout-box-info:before {
color: #fff;
}
.wf-logbook-item.maintenance:before,
.wf-logbook-item.info:before,
.wf-logbook-item.error:before,
.wf-logbook-item.critical:before,
.wf-logbook-item.warning:before,
.wf-logbook-item.danger:before,
.wf-logbook-item.success:before,
.wf-logbook-item.primary:before {
color: #ffffff !important;
}
/* Callout Icons */
.wf-callout-box-info:before {
content: "\e67f";
}
.wf-callout-box-success:before {
content: "\e638";
}
.wf-callout-box-danger:before {
content: "\e72a";
}
.wf-callout-box-warning:before {
content: "\e608";
}
/*----------------------------------
Styles for draggable plugin
-----------------------------------*/
.draggable-info {
content: attr(data-coordinates);
background-color: rgba(0, 0, 0, .5);
color: #fff;
left: 100%;
margin-left: 15px;
position: absolute;
width: 200px;
top: 50%;
padding: 5px;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 11px;
font-family: arial;
line-height: 20px;
}
.draggable-data-box {
background-color: rgba(0, 0, 0, .5);
padding: 20px;
color: #fff;
z-index: 100000;
display: inline-block;
margin-bottom: 5px;
}
.draggable-css-data-box {
background-color: rgba(0, 0, 0, .5);
padding: 20px;
color: #fff;
z-index: 100000;
}
.draggable-data-box-wrapper {
position: fixed;
bottom: 40px;
left: 20px;
z-index: 100000;
}
.draggable-data-box-title {
background-color: rgba(0, 0, 0, .5);
margin: -20px -20px 20px -20px;
padding: 15px 20px;
}
.draggable.draggable-highlighted:before {
background: rgba(0, 99, 255, .25);
}
/*----------------------------------
Styles for zooming plugin
-----------------------------------*/
.wf-zoom-controlbar,
.wf-pan-controlbar {
position: absolute;
z-index: 10000;
}
.wf-zoom-controlbar>button,
.wf-pan-controlbar>button {
height: 40px;
width: 40px;
}
.wf-pan-controlbar.top-center,
.wf-zoom-controlbar.top-center {
top: 20px;
left: 50%;
transform: translateX(-50%);
}
.wf-pan-controlbar.bottom-center,
.wf-zoom-controlbar.bottom-center {
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.wf-pan-controlbar.right-top,
.wf-zoom-controlbar.right-top {
right: 20px;
top: 20px;
}
.wf-pan-controlbar.right-bottom,
.wf-zoom-controlbar.right-bottom {
right: 20px;
bottom: 20px;
}
.wf-pan-controlbar.right-center,
.wf-zoom-controlbar.right-center {
right: 20px;
top: 50%;
transform: translateY(-50%);
}
.wf-pan-controlbar.left-center,
.wf-zoom-controlbar.left-center {
top: 50%;
left: 20px;
transform: translateY(-50%);
}
.wf-pan-controlbar.left-bottom,
.wf-zoom-controlbar.left-bottom {
bottom: 20px;
left: 20px;
transform: translateY(-50%);
}
.wf-pan-controlbar {
width: 120px;
height: 120px;
}
/* Pan left */
.wf-pan-controlbar> :nth-child(1) {
position: absolute;
top: 33.33%;
left: 0;
}
/* Pan right */
.wf-pan-controlbar> :nth-child(2) {
position: absolute;
top: 33.33%;
right: 0;
}
/* Pan top */
.wf-pan-controlbar> :nth-child(3) {
position: absolute;
left: 33.33%;
top: 0;
}
/* Pan bottom */
.wf-pan-controlbar> :nth-child(4) {
position: absolute;
left: 33.33%;
bottom: 0;
}
/*----------------------------------
Helper class name for SVG graphics extensions
-----------------------------------*/
.center-container {
display: block;
position: absolute;
text-align: center;
width: 100%;
height: auto;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
}
/* Pointers */
.wf-label-pointer {
pointer-events: none;
}
.wf-label-pointer span {
color: #aaa;
line-height: 20px;
}
.wf-pointer-block {
position: absolute;
width: 100%;
height: 100%;
}
.indicator-pointer-line {
background: url("../svg/svg_pointer1.svg") no-repeat center center;
width: 100%;
height: 100%;
top: 4px;
left: 9px;
background-size: 100% 97%;
}
.wf-pointer-icon {
width: 14px;
height: 14px;
background-color: #2F5A79;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 3px solid #F0F0F0;
text-align: -webkit-center;
position: relative;
float: right;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.24);
margin-top: -7px;
margin-right: -7px;
}
/*--------------------------------------------------------------
Decorative Elements
--------------------------------------------------------------*/
.wf-circle-decorator:before,
.wf-circle-decorator-1x-2x:before {
content: "";
position: absolute;
width: 78px;
height: 78px;
top: -15px;
left: -16px;
background-color: rgba(255, 255, 255, 0.56);
border-radius: 50%;
border: 2px solid rgb(216, 216, 216);
text-align: center;
}
.wf-circle-decorator-1x-2x:before {
left: -26px;
}
.scaling-svg-container {
width: 100%;
position: relative;
display: inline-block;
overflow: hidden;
}
.scaling-svg {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.wf-disabled-container {
cursor: not-allowed;
opacity: .65;
}
/*----------------------------------
Styles for resizable plugin
-----------------------------------*/
.win-size-grip {
position: absolute;
width: 16px;
height: 16px;
padding: 4px;
bottom: 0;
right: 0;
cursor: nwse-resize;
background: url(../images/wingrip.png) no-repeat;
}
/*----------------------------------
Styles for wf-svg-path
-----------------------------------*/
.wf-svg-path {
pointer-events: none;
display: block;
position: relative;
}
.wf-svg-path .wf-state-element {
stroke: #888888;
fill: rgba(0, 0, 0, .1);
stroke-width: 1px;
transition: stroke .5s;
pointer-events: all;
}
.wf-svg-path svg {
overflow: visible;
}
.wf-svg-path-content {
pointer-events: none;
}
.wf-svg-path-link {
pointer-events: none;
}
.wf-svg-path .wf-path-label {
position: absolute;
pointer-events: none;
top: 50%;
width: 100%;
text-align: center;
transform: translateY(-50%);
font-size: 11px;
font-weight: bold;
}
.wf-svg-path .wf-tooltip {
top: 0%;
margin-top: -90px;
background-color: rgba(0, 0, 0, .75);
color: #fff;
display: none;
margin-bottom: 0px;
opacity: 1;
padding: 10px;
pointer-events: none;
position: absolute;
width: 280px;
height: 80px;
margin-left: -140px;
left: 50%;
border: 1px solid #fff;
border-radius: 3px;
font-size: 12px;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
z-index: 1040;
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wf-tooltip:before,
.wf-tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid rgba(0, 0, 0, .8) 10px;
bottom: -10px;
content: " ";
height: 0;
left: 50%;
margin-left: -10px;
position: absolute;
width: 0;
}
.wf-tooltip:before {
border-left: solid transparent 12px;
border-right: solid transparent 12px;
border-top: solid rgba(255, 255, 255, .8) 12px;
bottom: -12px;
margin-left: -12px;
}
.wf-svg-path-tooltip-title {
font-size: 14px;
font-weight: 600;
text-align: center;
}
.wf-svg-path-tooltip-text {
text-align: center;
}
.zf-signal-value {
display: inline-block;
}
.wf-svg-path-value-unit {
display: inline-block;
margin-left: 5px;
}
.wf-svg-path-value-container {
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
/*-----------------------
wf-breadcrumb
-----------------------*/
.btn-breadcrumb .btn:not(:last-child):after,
.btn-breadcrumb .dropdown .btn:not(:last-child):after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 17px solid transparent;
border-bottom: 17px solid transparent;
border-left: 10px solid white;
position: absolute;
top: 50%;
margin-top: -17px;
margin-left: -1px;
left: 100%;
z-index: 3;
}
.btn-breadcrumb .btn:not(:last-child):before,
.btn-breadcrumb .dropdown .btn:not(:last-child):before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 17px solid transparent;
border-bottom: 17px solid transparent;
border-left: 10px solid rgb(173, 173, 173);
position: absolute;
top: 50%;
margin-top: -17px;
margin-left: 0px;
left: 100%;
z-index: 3;
}
.btn-breadcrumb .btn,
.btn-breadcrumb .dropdown>.btn:first-child {
padding: 6px 12px 6px 24px;
color: #333;
background-color: #fff;
border-color: #ccc;
}
.btn-breadcrumb .dropdown>.btn:first-child {
border-width: 1px 0 1px 0;
}
.btn-breadcrumb .btn a {
color: #333;
}
.btn-breadcrumb .btn:hover,
.btn-breadcrumb .btn:hover>a {
background: #ebf3f6;
color: #2274ac !important;
}
.btn-breadcrumb .btn:first-child {
padding: 6px 6px 6px 10px;
}
.btn-breadcrumb .btn:last-child {
padding: 6px 18px 6px 24px;
}
.btn-breadcrumb .btn:not(:last-child):after {
border-left: 10px solid #fff;
}
.btn-breadcrumb .btn:not(:last-child):before {
border-left: 10px solid #ccc;
}
.btn-breadcrumb .btn.active:not(:last-child):after,
.btn-breadcrumb .dropdown>.btn.active:not(:last-child):after {
border-left: 10px solid #00b1ea;
}
.btn-breadcrumb .btn:hover:not(:last-child):after {
border-left: 10px solid #ebf3f6;
}
.btn-breadcrumb .btn:hover:not(:last-child):before {
border-left: 10px solid #adadad;
margin-left: 0px;
}
.btn-breadcrumb .btn.active:hover:not(:last-child):after {
border-left: 10px solid #00b1ea;
}
.btn-breadcrumb .btn.active,
.btn-breadcrumb .btn.active>a,
.btn-breadcrumb .dropdown>.btn.active {
z-index: auto;
background-color: #00b1ea;
color: #fff!important;
}
.btn-breadcrumb .btn:active,
.btn-breadcrumb .btn.active,
.btn-breadcrumb .btn:active:before,
.btn-breadcrumb .btn.active:before {
-webkit-box-shadow: none;
box-shadow: none;
}
/*----------------------------------------------------------------------
Styles for wf-logtag-analytics
----------------------------------------------------------------------*/
.wf-logtag-analytics-item-panel-body{
padding: 15px;
}
.wf-logtag-analytics-item {
padding: 0 10px;
text-align: center;
flex-basis: 33,333%;
}
.wf-logtag-analytics-value {
display: block;
font-size: 32px;
text-align: center;
}
.wf-logtag-analytics-unit {
display: block;
color: #555;
}
.wf-logtag-analytics-unit:before{
content: "[";
}
.wf-logtag-analytics-unit:after{
content: "]";
}
.wf-logtag-analytics-icon,
.wf-logtag-analytics-label {
font-weight: bold;
color: #555;
}
.wf-logtag-analytics-timestamp {
font-size: 13px;
color: #555;
}
/*-----------------------
Signal LogTag Browser
--------------------------*/
.wf-signal-logtag-browser .wf-signal-list,
.wf-signal-logtag-browser .wf-logtag-list {
max-height: 300px;
overflow-y: auto;
margin-bottom: 0px;
}
.wf-signal-logtag-browser .wf-logtag-item{
display: flex;
align-items: center;
}
.wf-signal-browser .wf-signal-item .wf-icon-action,
.wf-signal-logtag-browser .wf-logtag-item .wf-icon-action {
margin-left: auto;
}
.wf-signal-item.list-group-item.active,
.wf-signal-item.list-group-item.active:hover,
.wf-signal-item.list-group-item.active:focus{
background-image: none!important;
}
/*-----------------------
Signal Browser
--------------------------*/
.wf-signal-browser .wf-signal-list {
max-height: 300px;
overflow-y: auto;
margin-bottom: 0px;
}
/* D3 Axis styles */
svg.axis {
overflow: visible!important;
}
.axis text {
font-size: 10px;
}
.axis line,
.axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
/*-----------------------
SVG Arc Scale
--------------------------*/
.wf-scale-container {
padding: 30px;
}
.wf-svg-scale-container {
overflow: visible !important;
}
.wf-arc-scale .line {
stroke: #333;
}
.wf-arc-scale .text {
text-anchor: middle;
}
/*----------------------------------------------------------------------
Virtual Keyboard styling
----------------------------------------------------------------------*/
.ui-keyboard {
width: auto;
left: 50%;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
transform: translateX(-50%);
}
.ui-keyboard-button {
margin: 2px;
background-image: none;
}
.ui-keyboard-actionkey.ui-keyboard-tab.ui-keyboard-widekey,
.ui-keyboard-actionkey.ui-keyboard-enter.ui-keyboard-widekey.ui-state-default,
.ui-keyboard-actionkey:not(.ui-keyboard-dec):not(.ui-keyboard-combo),
.ui-keyboard-actionkey.ui-keyboard-accept.ui-keyboard-widekey,
.ui-keyboard-actionkey.ui-keyboard-cancel.ui-keyboard-widekey {
min-width: 5em;
padding-left: 15px;
padding-right: 15px;
}
.ui-keyboard-actionkey:not(.ui-keyboard-dec):not(.ui-keyboard-combo) span {
top: auto;
left: auto;
}
button.ui-keyboard-button.ui-keyboard-actionkey.ui-keyboard-space {
min-width: 30em;
}
.ui-keyboard-button:not([disabled]):hover {
background: #5a5a5a;
background-image: none;
}
.ui-keyboard-actionkey.ui-keyboard-bksp.ui-state-default,
.ui-keyboard-actionkey.ui-keyboard-sign.ui-state-default,
.ui-keyboard-actionkey.ui-keyboard-cancel.ui-state-default,
.ui-keyboard-actionkey.ui-keyboard-accept.ui-state-default {
min-width: 3em;
}
/*--------------------------------
wf-recipe-management component
---------------------------------*/
.wf-recipe-management .panel-title {
min-height: 20px;
}
.wf-recipe-management a.btn.btn-sm.btn-default.disabled {
background: #e8e8e8;
color: #aaa;
opacity: inherit;
}
.table.wf-table-recipe-definitions ,
.table.wf-table-recipes {
/* margin-top: 15px; */
width: 100%;
background: #FEFEFE;
margin-bottom: 0;
}
.wf-recipe-management .wf-type-selection {
vertical-align: middle;
display: inline-block;
}
.wf-recipe-headder {
height: 60px;
}
table.wf-table-recipe-definitions tr td .form-inline .form-control,
table.wf-table-recipe-definitions tr td .form-inline .form-group,
table.wf-table-recipes tr td .form-inline .form-control,
table.wf-table-recipes tr td .form-inline .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
table.wf-table-recipe-definitions tr td .form-inline .form-control,
table.wf-table-recipes tr td .form-inline .form-control {
width: calc(100% - 40px);
}
table.wf-table-recipe-definitions tr td .form-inline .form-group,
table.wf-table-recipes tr td .form-inline .form-group {
width: 100%;
}
table.wf-table-recipe-definitions tr td,
table.wf-table-recipes tr td {
vertical-align: middle !important;
}
table.wf-table-recipe-definitions tr td:nth-child(3),
table.wf-table-recipe-definitions tr th:nth-child(3),
table.wf-table-recipes tr td:nth-child(4),
table.wf-table-recipes tr th:nth-child(4){
width: 1px;
white-space: nowrap;
text-align: right;
}
table.wf-table-recipe-definitions thead tr:first-child th,
table.wf-table-recipes thead tr:first-child th{
border-bottom: 0px;
}
 /*----------------------------------------------------------------------
wf-switch-gear
----------------------------------------------------------------------*/
.wf-switch-gear{
position: relative;
}
.wf-switch-gear svg {
overflow: visible !important;
}
.wf-switch-gear svg .wf-switch-gear-box-group{
transition: transform .5s ease;
}
.wf-switch-gear .wf-switch-gear-base,
.wf-switch-gear .wf-switch-gear-feed,
.wf-switch-gear .wf-switch-gear-measuments,
.wf-switch-gear .wf-switch-gear-box,
.wf-switch-gear .wf-switch-gear-box-fuse,
.wf-switch-gear .wf-switch-gear-breaker-group,
.wf-switch-gear .wf-switch-gear-breaker-closed,
.wf-switch-gear .wf-switch-gear-breaker-opened,
.wf-switch-gear .wf-switch-gear-switch-disconector-group,
.wf-switch-gear .wf-switch-gear-switch-disconector-group .wf-switch-gear-switch-disconector-closed,
.wf-switch-gear .wf-switch-gear-switch-disconector-group .wf-switch-gear-switch-disconector-opened,
.wf-switch-gear .wf-switch-gear-disconector-group,
.wf-switch-gear .wf-switch-gear-disconector-group .wf-switch-gear-disconector-closed,
.wf-switch-gear .wf-switch-gear-disconector-group .wf-switch-gear-disconector-opened,
.wf-switch-gear .wf-switch-gear-switch-group,
.wf-switch-gear .wf-switch-gear-switch-group .wf-switch-gear-switch-closed,
.wf-switch-gear .wf-switch-gear-switch-group .wf-switch-gear-switch-opened,
.wf-switch-gear .wf-switch-gear-fuse-disconector-group,
.wf-switch-gear .wf-switch-gear-fuse-disconector-group .wf-switch-gear-fuse-disconector-closed,
.wf-switch-gear .wf-switch-gear-fuse-disconector-group .wf-switch-gear-fuse-disconector-opened,
.wf-switch-gear .wf-switch-gear-fuse-disconector-group .wf-fuse-closed-intact,
.wf-switch-gear .wf-switch-gear-fuse-disconector-group .wf-fuse-closed-blown,
.wf-switch-gear .wf-switch-gear-fuse-disconector-group .wf-fuse-opened-intact,
.wf-switch-gear .wf-switch-gear-fuse-disconector-group .wf-fuse-opened-blown,
.wf-switch-gear .wf-switch-gear-fuse-switch-disconector-1-group,
.wf-switch-gear .wf-switch-gear-fuse-switch-disconector-1-group .wf-switch-gear-fuse-switch-disconector-1-closed,
.wf-switch-gear .wf-switch-gear-fuse-switch-disconector-1-group .wf-switch-gear-fuse-switch-disconector-1-opened,
.wf-switch-gear .wf-switch-gear-fuse-switch-disconector-1-group .wf-fuse-closed-intact,
.wf-switch-gear .wf-switch-gear-fuse-switch-disconector-1-group .wf-fuse-closed-blown,
.wf-switch-gear .wf-switch-gear-fuse-switch-disconector-1-group .wf-fuse-opened-intact,
.wf-switch-gear .wf-switch-gear-fuse-switch-disconector-1-group .wf-fuse-opened-blown,
.wf-switch-gear .wf-switch-gear-fuse-switch-disconector-2-group,
.wf-switch-gear .wf-switch-gear-fuse-switch-disconector-2-group .wf-switch-gear-fuse-switch-disconector-2-closed,
.wf-switch-gear .wf-switch-gear-fuse-switch-disconector-2-group .wf-switch-gear-fuse-switch-disconector-2-opened,
.wf-switch-gear .wf-switch-gear-fuse-switch-disconector-2-group .wf-fuse-blown,
.wf-switch-gear .wf-switch-gear-fuse-switch-disconector-2-group .wf-fuse-intact
{
visibility: hidden;
display: none;
}
/* Position - in or out */
.wf-switch-gear-box-group {}
.switch-gear-measuments.in,
.in .wf-switch-gear-box-group{
transform: translateX(0%);
}
.switch-gear-measuments.out .wf-switch-gear-measuments,
.out .wf-switch-gear-box-group{
transform: translateX(100%);
}
.wf-switch-gear-feed{
stroke: #000;
}
.wf-switch-gear-base {
stroke: #000;
}
.wf-switch-gear-measuments{
stroke: #000;
}
.wf-fuse-intact,
.wf-fuse-closed-intact,
.wf-fuse-opened-intact{
stroke: #000;
fill: #eee;
}
.wf-fuse-blown,
.wf-fuse-closed-blown,
.wf-fuse-opened-blown{
stroke: #000;
fill:#eee;
}
.wf-switch-gear .switch-gear-base .wf-switch-gear-base{
visibility: visible;
display: block;
}
.wf-switch-gear .switch-gear-feed .wf-switch-gear-feed{
visibility: visible;
display: block;
}
.wf-switch-gear .switch-gear-measuments .wf-switch-gear-measuments{
visibility: visible;
display: block;
}
.wf-switch-gear .switch-gear-box .wf-switch-gear-box,
.wf-switch-gear .switch-gear-box-fuse .wf-switch-gear-box-fuse{
visibility: visible;
display: block;
}
.wf-switch-gear .switch-gear-switch .wf-switch-gear-switch-group,
.wf-switch-gear .switch-gear-switch .closed .wf-switch-gear-switch-closed,
.wf-switch-gear .switch-gear-switch .opened .wf-switch-gear-switch-opened{
visibility: visible;
display: block;
}
.wf-switch-gear .switch-gear-breaker .wf-switch-gear-breaker-group,
.wf-switch-gear .switch-gear-breaker .closed .wf-switch-gear-breaker-closed,
.wf-switch-gear .switch-gear-breaker .opened .wf-switch-gear-breaker-opened{
visibility: visible;
display: block;
}
.wf-switch-gear .switch-gear-switch-disconector .wf-switch-gear-switch-disconector-group,
.wf-switch-gear .switch-gear-switch-disconector .closed .wf-switch-gear-switch-disconector-closed,
.wf-switch-gear .switch-gear-switch-disconector .opened .wf-switch-gear-switch-disconector-opened{
visibility: visible;
display: block;
}
.wf-switch-gear .switch-gear-disconector .wf-switch-gear-disconector-group,
.wf-switch-gear .switch-gear-disconector .closed .wf-switch-gear-disconector-closed,
.wf-switch-gear .switch-gear-disconector .opened .wf-switch-gear-disconector-opened{
visibility: visible;
display: block;
}
.wf-switch-gear .switch-gear-fuse-disconector .wf-switch-gear-fuse-disconector-group,
.wf-switch-gear .switch-gear-fuse-disconector .closed .wf-switch-gear-fuse-disconector-closed,
.wf-switch-gear .switch-gear-fuse-disconector .closed.fuse-intact .wf-fuse-closed-intact,
.wf-switch-gear .switch-gear-fuse-disconector .closed.fuse-blown .wf-fuse-closed-blown,
.wf-switch-gear .switch-gear-fuse-disconector .opened .wf-switch-gear-fuse-disconector-opened,
.wf-switch-gear .switch-gear-fuse-disconector .opened.fuse-intact .wf-fuse-opened-intact,
.wf-switch-gear .switch-gear-fuse-disconector .opened.fuse-blown .wf-fuse-opened-blown
{
visibility: visible;
display: block;
}
.wf-switch-gear .switch-gear-fuse-switch-disconector-1 .wf-switch-gear-fuse-switch-disconector-1-group,
.wf-switch-gear .switch-gear-fuse-switch-disconector-1 .closed .wf-switch-gear-fuse-switch-disconector-1-group .wf-switch-gear-fuse-switch-disconector-1-closed,
.wf-switch-gear .switch-gear-fuse-switch-disconector-1 .closed.fuse-intact .wf-fuse-closed-intact,
.wf-switch-gear .switch-gear-fuse-switch-disconector-1 .closed.fuse-blown .wf-fuse-closed-blown,
.wf-switch-gear .switch-gear-fuse-switch-disconector-1 .opened .wf-switch-gear-fuse-switch-disconector-1-group .wf-switch-gear-fuse-switch-disconector-1-opened,
.wf-switch-gear .switch-gear-fuse-switch-disconector-1 .opened.fuse-intact .wf-fuse-opened-intact,
.wf-switch-gear .switch-gear-fuse-switch-disconector-1 .opened.fuse-blown .wf-fuse-opened-blown {
visibility: visible;
display: block;
}
.wf-switch-gear .switch-gear-fuse-switch-disconector-2 .wf-switch-gear-fuse-switch-disconector-2-group,
.wf-switch-gear .switch-gear-fuse-switch-disconector-2 .closed .wf-switch-gear-fuse-switch-disconector-2-group .wf-switch-gear-fuse-switch-disconector-2-closed,
.wf-switch-gear .switch-gear-fuse-switch-disconector-2 .opened .wf-switch-gear-fuse-switch-disconector-2-group .wf-switch-gear-fuse-switch-disconector-2-opened,
.wf-switch-gear .switch-gear-fuse-switch-disconector-2 .fuse-intact .wf-fuse-intact,
.wf-switch-gear .switch-gear-fuse-switch-disconector-2 .fuse-blown .wf-fuse-blown {
visibility: visible;
display: block;
}
.wf-switch-gear-box{
stroke: #000;
fill: #eeeeee;
}
.wf-switch-gear-box-fuse{
stroke: #000;
fill: #eeeeee;
}
.wf-switch-gear-switch-group{
}
.wf-switch-gear-switch-closed {
stroke:#000;
}
.wf-switch-gear-switch-opened {
stroke:#000;
}
.wf-switch-gear-breaker-group {}
.wf-switch-gear-breaker-closed{
stroke:#000;;
}
.wf-switch-gear-breaker-opened{
stroke:#000;
}
.wf-switch-gear-switch-disconector-group {}
.wf-switch-gear-switch-disconector-closed {
stroke:#000;
}
.wf-switch-gear-switch-disconector-opened {
stroke:#000;
}
.wf-switch-gear-disconector-group {}
.wf-switch-gear-disconector-closed{
stroke:#000;
}
.wf-switch-gear-disconector-opened{
stroke:#000;
}
.wf-switch-gear-fuse-disconector-group{}
.wf-switch-gear-fuse-disconector-opened{
stroke:#000;
}
.wf-switch-gear-fuse-disconector-closed{
stroke:#000;
}
.wf-switch-gear-fuse-switch-disconector-1-group {}
.wf-switch-gear-fuse-switch-disconector-1-closed{
stroke:#000;
}
.wf-switch-gear-fuse-switch-disconector-1-opened{
stroke:#000;
}
.wf-switch-gear-fuse-switch-disconector-2-group {}
.wf-switch-gear-fuse-switch-disconector-2-closed{
stroke:#000;
}
.wf-switch-gear-fuse-switch-disconector-2-opened{
stroke:#000;
}
 /*----------------------------------------------------------------------
wf-switch-symbol
----------------------------------------------------------------------*/
.wf-switch-symbol{
position: relative;
}
.wf-switch-symbol svg {
overflow: visible !important;
}
.wf-switch-symbol svg .wf-switch-symbol-box-group{
transition: transform .5s ease;
}
.wf-switch-symbol .wf-switch-symbol-box,
.wf-switch-symbol .wf-switch-symbol-box-fuse,
.wf-switch-symbol .wf-switch-symbol-breaker-group,
.wf-switch-symbol .wf-switch-symbol-breaker-closed,
.wf-switch-symbol .wf-switch-symbol-breaker-opened,
.wf-switch-symbol .wf-switch-symbol-switch-disconector-group,
.wf-switch-symbol .wf-switch-symbol-switch-disconector-group .wf-switch-symbol-switch-disconector-closed,
.wf-switch-symbol .wf-switch-symbol-switch-disconector-group .wf-switch-symbol-switch-disconector-opened,
.wf-switch-symbol .wf-switch-symbol-disconector-group,
.wf-switch-symbol .wf-switch-symbol-disconector-group .wf-switch-symbol-disconector-closed,
.wf-switch-symbol .wf-switch-symbol-disconector-group .wf-switch-symbol-disconector-opened,
.wf-switch-symbol .wf-switch-symbol-switch-group,
.wf-switch-symbol .wf-switch-symbol-switch-group .wf-switch-symbol-switch-closed,
.wf-switch-symbol .wf-switch-symbol-switch-group .wf-switch-symbol-switch-opened,
.wf-switch-symbol .wf-switch-symbol-fuse-disconector-group,
.wf-switch-symbol .wf-switch-symbol-fuse-disconector-group .wf-switch-symbol-fuse-disconector-closed,
.wf-switch-symbol .wf-switch-symbol-fuse-disconector-group .wf-switch-symbol-fuse-disconector-opened,
.wf-switch-symbol .wf-switch-symbol-fuse-disconector-group .wf-fuse-closed-intact,
.wf-switch-symbol .wf-switch-symbol-fuse-disconector-group .wf-fuse-closed-blown,
.wf-switch-symbol .wf-switch-symbol-fuse-disconector-group .wf-fuse-opened-intact,
.wf-switch-symbol .wf-switch-symbol-fuse-disconector-group .wf-fuse-opened-blown,
.wf-switch-symbol .wf-switch-symbol-fuse-switch-disconector-1-group,
.wf-switch-symbol .wf-switch-symbol-fuse-switch-disconector-1-group .wf-switch-symbol-fuse-switch-disconector-1-closed,
.wf-switch-symbol .wf-switch-symbol-fuse-switch-disconector-1-group .wf-switch-symbol-fuse-switch-disconector-1-opened,
.wf-switch-symbol .wf-switch-symbol-fuse-switch-disconector-1-group .wf-fuse-closed-intact,
.wf-switch-symbol .wf-switch-symbol-fuse-switch-disconector-1-group .wf-fuse-closed-blown,
.wf-switch-symbol .wf-switch-symbol-fuse-switch-disconector-1-group .wf-fuse-opened-intact,
.wf-switch-symbol .wf-switch-symbol-fuse-switch-disconector-1-group .wf-fuse-opened-blown,
.wf-switch-symbol .wf-switch-symbol-fuse-switch-disconector-2-group,
.wf-switch-symbol .wf-switch-symbol-fuse-switch-disconector-2-group .wf-switch-symbol-fuse-switch-disconector-2-closed,
.wf-switch-symbol .wf-switch-symbol-fuse-switch-disconector-2-group .wf-switch-symbol-fuse-switch-disconector-2-opened,
.wf-switch-symbol .wf-switch-symbol-fuse-switch-disconector-2-group .wf-fuse-blown,
.wf-switch-symbol .wf-switch-symbol-fuse-switch-disconector-2-group .wf-fuse-intact {
visibility: hidden;
display: none;
}
.wf-fuse-intact,
.wf-fuse-closed-intact,
.wf-fuse-opened-intact{
stroke: #000;
fill: #eee;
}
.wf-fuse-blown,
.wf-fuse-closed-blown,
.wf-fuse-opened-blown{
stroke: #000;
fill:#eee;
}
.wf-switch-symbol .switch-symbol-base .wf-switch-symbol-base{
visibility: visible;
display: block;
}
.wf-switch-symbol .switch-symbol-feed .wf-switch-symbol-feed{
visibility: visible;
display: block;
}
.wf-switch-symbol .switch-symbol-box .wf-switch-symbol-box,
.wf-switch-symbol .switch-symbol-box-fuse .wf-switch-symbol-box-fuse{
visibility: visible;
display: block;
}
.wf-switch-symbol .switch-symbol-switch .wf-switch-symbol-switch-group,
.wf-switch-symbol .switch-symbol-switch .closed .wf-switch-symbol-switch-closed,
.wf-switch-symbol .switch-symbol-switch .opened .wf-switch-symbol-switch-opened{
visibility: visible;
display: block;
}
.wf-switch-symbol .switch-symbol-breaker .wf-switch-symbol-breaker-group,
.wf-switch-symbol .switch-symbol-breaker .closed .wf-switch-symbol-breaker-closed,
.wf-switch-symbol .switch-symbol-breaker .opened .wf-switch-symbol-breaker-opened{
visibility: visible;
display: block;
}
.wf-switch-symbol .switch-symbol-switch-disconector .wf-switch-symbol-switch-disconector-group,
.wf-switch-symbol .switch-symbol-switch-disconector .closed .wf-switch-symbol-switch-disconector-closed,
.wf-switch-symbol .switch-symbol-switch-disconector .opened .wf-switch-symbol-switch-disconector-opened{
visibility: visible;
display: block;
}
.wf-switch-symbol .switch-symbol-disconector .wf-switch-symbol-disconector-group,
.wf-switch-symbol .switch-symbol-disconector .closed .wf-switch-symbol-disconector-closed,
.wf-switch-symbol .switch-symbol-disconector .opened .wf-switch-symbol-disconector-opened{
visibility: visible;
display: block;
}
.wf-switch-symbol .switch-symbol-fuse-disconector .wf-switch-symbol-fuse-disconector-group,
.wf-switch-symbol .switch-symbol-fuse-disconector .closed .wf-switch-symbol-fuse-disconector-closed,
.wf-switch-symbol .switch-symbol-fuse-disconector .closed.fuse-intact .wf-fuse-closed-intact,
.wf-switch-symbol .switch-symbol-fuse-disconector .closed.fuse-blown .wf-fuse-closed-blown,
.wf-switch-symbol .switch-symbol-fuse-disconector .opened .wf-switch-symbol-fuse-disconector-opened,
.wf-switch-symbol .switch-symbol-fuse-disconector .opened.fuse-intact .wf-fuse-opened-intact,
.wf-switch-symbol .switch-symbol-fuse-disconector .opened.fuse-blown .wf-fuse-opened-blown
{
visibility: visible;
display: block;
}
.wf-switch-symbol .switch-symbol-fuse-switch-disconector-1 .wf-switch-symbol-fuse-switch-disconector-1-group,
.wf-switch-symbol .switch-symbol-fuse-switch-disconector-1 .closed .wf-switch-symbol-fuse-switch-disconector-1-closed,
.wf-switch-symbol .switch-symbol-fuse-switch-disconector-1 .closed.fuse-intact .wf-fuse-closed-intact,
.wf-switch-symbol .switch-symbol-fuse-switch-disconector-1 .closed.fuse-blown .wf-fuse-closed-blown,
.wf-switch-symbol .switch-symbol-fuse-switch-disconector-1 .opened .wf-switch-symbol-fuse-switch-disconector-1-opened,
.wf-switch-symbol .switch-symbol-fuse-switch-disconector-1 .opened.fuse-intact .wf-fuse-opened-intact,
.wf-switch-symbol .switch-symbol-fuse-switch-disconector-1 .opened.fuse-blown .wf-fuse-opened-blown
{
visibility: visible;
display: block;
}
.wf-switch-symbol .switch-symbol-fuse-switch-disconector-2 .wf-switch-symbol-fuse-switch-disconector-2-group,
.wf-switch-symbol .switch-symbol-fuse-switch-disconector-2 .closed .wf-switch-symbol-fuse-switch-disconector-2-closed,
.wf-switch-symbol .switch-symbol-fuse-switch-disconector-2 .opened .wf-switch-symbol-fuse-switch-disconector-2-opened,
.wf-switch-symbol .switch-symbol-fuse-switch-disconector-2 .fuse-intact .wf-fuse-intact,
.wf-switch-symbol .switch-symbol-fuse-switch-disconector-2 .fuse-blown .wf-fuse-blown {
visibility: visible;
display: block;
}
.wf-switch-symbol-box{
stroke: #000;
fill: #eeeeee;
}
.wf-switch-symbol-box-fuse{
stroke: #000;
fill: #eeeeee;
}
.wf-switch-symbol-switch-group{
}
.wf-switch-symbol-switch-closed {
stroke:#000;
}
.wf-switch-symbol-switch-opened {
stroke:#000;
}
.wf-switch-symbol-breaker-group {}
.wf-switch-symbol-breaker-closed{
stroke:#000;
}
.wf-switch-symbol-breaker-opened{
stroke:#000;
}
.wf-switch-symbol-switch-disconector-group {}
.wf-switch-symbol-switch-disconector-closed {
stroke:#000;
}
.wf-switch-symbol-switch-disconector-opened {
stroke:#000;
}
.wf-switch-symbol-disconector-group {}
.wf-switch-symbol-disconector-closed{
stroke:#000;
}
.wf-switch-symbol-disconector-opened{
stroke:#000;
}
.wf-switch-symbol-fuse-disconector-group{}
.wf-switch-symbol-fuse-disconector-opened{
stroke:#000;
}
.wf-switch-symbol-fuse-disconector-closed{
stroke:#000;
}
.wf-switch-symbol-fuse-switch-disconector-1-group {}
.wf-switch-symbol-fuse-switch-disconector-1-closed{
stroke:#000;
}
.wf-switch-symbol-fuse-switch-disconector-1-opened{
stroke:#000;
}
.wf-switch-symbol-fuse-switch-disconector-2-group {}
.wf-switch-symbol-fuse-switch-disconector-2-closed{
stroke:#000;
}
.wf-switch-symbol-fuse-switch-disconector-2-opened{
stroke:#000;
}
/*----------------------------------------------------------------------
wf-transformer
----------------------------------------------------------------------*/
.wf-switch-transformer svg {
overflow: visible !important;
}
.wf-switch-transformer .base .wf-switch-transformer-switch-closed,
.wf-switch-transformer .base .wf-switch-transformer-switch-opened,
.wf-switch-transformer .opened .wf-switch-transformer-base,
.wf-switch-transformer .opened .wf-switch-transformer-switch-closed,
.wf-switch-transformer .closed .wf-switch-transformer-base,
.wf-switch-transformer .closed .wf-switch-transformer-switch-opened {
visibility: hidden;
display: none;
}
.wf-switch-transformer-box {
fill: #eee;
}
.wf-switch-transformer-base {
stroke: #000;
}
.wf-switch-transformer-switch-closed {
stroke: #000;
}
.wf-switch-transformer-switch-opened {
stroke: #000;
}
 /*------------------------------------------------*/
/* Signal value display and input styles */
/*------------------------------------------------*/
.signalDisplay {
margin-bottom: 5px;
min-height: 28px;
}
.display-signal-value.label-default {
color: #fff;
}
.display-signal-value.label-primary {
color: #fff;
}
.display-signal-value.label-success {
color: #fff;
}
.display-signal-value.label-info {
color: #fff;
}
.display-signal-value .label-warning {
color: #000;
}
.display-signal-value.label-danger {
color: #fff;
}
.display-signal-value.input-group-addon {
min-height: 28px;
border: 1px solid #ddd;
}
.input-group-addon.display-signal-label {
max-width: 150px;
border-right: 0 solid transparent;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow-x: hidden;
}
.display-signal-label span,
.display-signal-label i,
.input-signal-label span,
.input-signal-label i {
padding-right: 5px;
}
.display-signal-value {
border: 1px solid #eeeeee;
text-align: right;
box-shadow: none;
}
.input-group-addon.display-signal-unit,
.input-group-addon.input-signal-unit {
padding-left: 6px;
padding-right: 6px;
min-width: 40px;
border-left: none;
}
.input-popover button {
padding: 6px;
min-width: 40px;
border-left: none;
}
.input-popover {
position: absolute;
top: -50px;
left: 100%;
display: block;
margin-left: -120px;
width: auto;
}
/*------------------------------------------------*/
/* LogTable */
/*------------------------------------------------*/
.table-striped.table-condensed.logtable > tbody > tr > td,
.table-striped.table-condensed.logtable > thead > tr > th {
padding: 5px 15px 5px 15px;
}
.wf-logtag-table-title,
.wf-logtag-trend-title {
}
.wf-logtag-table-title-icon {
color: #aaa;
font-weight: normal;
}
.wf-logtag-table-pager > * {
padding: 0 15px;
}
.wf-logtag-tooltip {
position: absolute;
display: none;
padding: 4px 3px;
border: 1px solid #aaa;
border-radius: 3px;
background-color: #fff;
opacity: .9;
}
/* .horizontal.right .progressbar-min-tick {
border-width: 0px 1px 0px 0px;
left: 100%;
transform: translateX(-100%) scaleX(1);
padding-right: 5px;
}
.horizontal.right .progressbar-mid-tick {
border-width: 0;
transform: translateX(-50%) scaleX(1);
}
.horizontal.right .progressbar-max-tick {
transform: translateX(100%) scaleX(1);
border-width: 0px 0px 0px 1px;
right: 100%;
padding-left: 5px;
} */
/*------------------------------------------------
Bargraphs / Progressbar Component
------------------------------------------------*/
.progress {
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
-ms-box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}
.wf-progress-bar-container {
position: relative;
}
.vertical .wf-progress-bar-container .wf-axis {
position: absolute;
right: -20px;
top: 0;
}
.wf-progress-bar-container .progress {
margin-bottom: 1px;
}
.wf-progress-bar-container .wf-axis svg{
overflow: visible;
}
.wf-progress-bar-container .wf-axis .axis line,
.wf-progress-bar-container .wf-axis .axis path{
stroke: #dddddd;
}
.wf-progress-bar-container .wf-axis .axis .domain{
stroke: transparent;
}
.wf-progress-bar-container .wf-axis .axis .tick{
fill: #aaa;
font-size: 9px;
}
.progress-bar {
-moz-transition: all .6s ease;
-o-transition: all .6s ease;
-webkit-transition: all .6s ease;
transition: all .6s ease;
}
.progress.right {
-moz-transform: scaleX(-1);
-ms-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.progress.vertical {
display: inline-block;
background-image: -moz-linear-gradient(top, #f5f5f5 0%, #ebebeb 100%);
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#f5f5f5), to(#ebebeb));
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #ebebeb 100%);
background-image: linear-gradient(to bottom, #f5f5f5 0%, #ebebeb 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffebebeb', GradientType=0);
}
.progress.vertical.block {
width: 100%;
}
.progress.vertical .progress-bar {
display: inline-block;
overflow: hidden;
width: 100%;
min-width: 10px;
height: auto;
}
.progress.vertical.bottom {
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
.progress.horizontal.left {}
.progress.horizontal.right {
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-ms-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
}
.progressbar-display {
float: right;
}
.progressbar-title {
display: block;
margin-bottom: 5px;
font-size: 16px;
}
.progressbar-title-icon {
}
.progressbar-unit {
}
.progressbar-value {
font-weight: 500;
}
.vertical .progressbar-display {
float: none;
}
.right .progressbar-display {
float: left;
}
.right .progressbar-label {
float: right;
}
/* Progressbar Sizes*/
.progress.progress-lg {
/* margin-bottom: 15px; */
height: 30px;
}
.vertical.progress.progress-lg {
/* margin-bottom: 20px; */
}
.progress.progress-sm {
/* margin-bottom: 5px; */
height: 10px;
border-radius: 2px;
}
.vertical.progress.progress-sm {
border-radius: 2px;
/* margin-bottom: 20px; */
}
.progress.progress-xs {
/* margin-bottom: 5px; */
height: 5px;
border-radius: 1px;
}
.vertical.progress.progress-xs {
border-radius: 1px;
/* margin-bottom: 20px; */
}
.horizontal .progress-bar {
border-radius: 4px 0 0 4px;
}
.horizontal .progress-lg .progress-bar {
border-radius: 4px 0 0 4px;
}
.horizontal .progress-sm .progress-bar {
border-radius: 2px 0 0 2px;
}
.horizontal .progress-xs .progress-bar {
border-radius: 1px 0 0 1px;
}
.vertical .progress-bar {
border-radius: 4px 4px 0 0;
}
.vertical.progress.progress-lg .progress-bar {
border-radius: 5px 5px 0 0;
width: 30px !important;
}
.vertical.progress.progress-sm .progress-bar {
min-width: 10px !important;
width: 10px !important;
border-radius: 2px 2px 0 0;
}
.vertical.progress.progress-xs .progress-bar {
border-radius: 1px 1px 0 0;
min-width: 5px !important;
width: 5px !important;
}
.progressbar-high-over,
.progressbar-low-under {
padding-right: 10px;
font-size: 18px;
-webkit-animation: animation-fade 1s infinite;
-moz-animation: animation-fade 1s infinite;
-ms-animation: animation-fade 1s infinite;
-o-animation: animation-fade 1s infinite;
animation: animation-fade 1s infinite;
color: #da1a1a;
}
/*------------------------------------------------*/
/* Basic Gauge styles */
/*------------------------------------------------*/
.basic-gauge {
position: relative;
width: 200px;
height: 200px;
border: 0px dotted #eee;
-ms-border-radius: 50%;
border-radius: 50%;
margin: 0 auto;
}
.basic-gauge-arc {
position: absolute;
}
.basic-gauge-needle {
position: absolute;
width: 50%;
height: 50%;
margin: 0 0 0 25%;
-moz-transition: -moz-transform 0.5s ease-out;
-o-transition: -o-transform 0.5s ease-out;
-webkit-transition: -webkit-transform 0.5s ease-out;
transition: transform 0.5s ease-out;
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
}
.basic-gauge-icon-overlay {
position: absolute;
width: 30%;
height: 30%;
left: 50%;
top: 50%;
margin: -15% 0 0 -15%;
-ms-border-radius: 50%;
border-radius: 50%;
border: solid 2px #fefefe;
background: #666;
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
-ms-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
text-align: center;
}
.basic-gauge-icon-overlay i {
display: block;
/*height: 100%;*/
width: 100%;
/*position: absolute;*/
/*top: 25%;*/
color: #fff;
position: relative;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.basic-gauge-value {
position: absolute;
top: 70%;
width: 100%;
text-align: center;
font-size: 32px;
color: #777;
-ms-text-shadow: 0 1px 0 #FFFFFF;
text-shadow: 0 1px 0 #FFFFFF;
}
.basic-gauge-value .basic-gauge-unit {
font-size: 16px;
padding-left: 3px;
color: #aaa;
}
.basic-gauge-min,
.basic-gauge-max {
font-size: 14px;
color: #aaa;
line-height: 30px;
}
.basic-gauge-min {
position: absolute;
top: 50%;
left: 0;
}
.basic-gauge-max {
position: absolute;
top: 50%;
right: 0;
}
.basic-gauge-majortick-container {
width: 1%;
height: 100%;
position: absolute;
left: 49.5%;
}
.basic-gauge-majortick {
width: 100%;
height: 5%;
background: #ddd;
}
.basic-gauge-minortick-container {
width: 1%;
height: 100%;
position: absolute;
left: 49.5%;
}
.basic-gauge-minortick {
margin-top: 5px;
width: 100%;
height: 1%;
background: #ddd;
}
.basic-gauge-high-over,
.basic-gauge-low-over {
position: absolute;
top: 50%;
margin-top: -18px;
right: -26px;
font-size: 18px;
-webkit-animation: animation-fade 1s infinite;
-moz-animation: animation-fade 1s infinite;
-o-animation: animation-fade 1s infinite;
animation: animation-fade 1s infinite;
color: #da1a1a;
}
.basic-gauge-low-over {
right: auto;
left: -26px;
}
/*------------------------------------------------*/
/* wfStateCssClass styles*/
/*------------------------------------------------*/
.wf-state-wrapper {
height: 100%;
width: 100%;
}
.wf-state-container {
display: block;
height: 100%;
width: 100%;
}
/*------------------------------------------------*/
/* Indicator widget styles */
/*------------------------------------------------*/
.indicator-center .indicator {
margin: 0 auto;
}
.wf-indicator-content {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
}
/* Indicator Label */
.indicator .indicator-label {
position: absolute;
top: 50%;
height: 2em;
margin-top: -1em;
left: 15%;
padding: 2px 2px;
width: 70%;
border: 1px solid #fff;
border-radius: 2px;
background: rgba(255,255,255,0.6);
vertical-align: baseline;
text-align: center;
-ms-text-shadow: 0 -1px 0 rgba(255,255,255, 0.25);
text-shadow: 0 -1px 0 rgba(255,255,255, 0.25);
}
.indicator .indicator-label,
.indicator-md .indicator .indicator-label {
font-weight: bold;
font-size: 12px;
height: 1.8em;
margin-top: -0.9em;
}
.indicator-lg .indicator-label {
height: 2.2em;
margin-top: -1.1em;
font-weight: bold;
font-size: 13px;
}
.indicator-sm .indicator-label {
height: 1.6em;
margin-top: -0.8em;
padding: 0px;
font-weight: normal;
font-size: 11px;
-ms-text-shadow: none;
text-shadow: none;
}
.indicator-xs .indicator-label {
height: 1.35em;
margin-top: -0.65em;
padding: 0px;
border: none;
font-weight: normal;
font-size: 11px;
-ms-text-shadow: none;
text-shadow: none;
background: rgba(255,255,255,0.4);
}
/* Indicator sizes */
.indicator-lg .indicator {
width: 80px;
height: 80px;
}
.indicator,
.indicator-md .indicator {
width: 60px;
height: 60px;
}
.indicator-sm .indicator {
width: 40px;
height: 40px;
}
.indicator-xs .indicator {
width: 30px;
height: 30px;
}
/* Indicator Icon Positioning*/
.indicator-icon {
width: 100%;
height: 100%;
background: center center no-repeat;
-moz-background-size: 60%;
-o-background-size: 60%;
-webkit-background-size: 60%;
-ms-background-size: 60%;
background-size: 60%;
position: relative;
}
.indicator .iconSymbol,
.indicator-icon i {
position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
}
.indicator-lg .iconSymbol {
font-size: 46px;
line-height: 46px;
}
.indicator-md .iconSymbol {
font-size: 30px;
line-height: 30px;
}
.indicator-sm .iconSymbol {
font-size: 20px;
line-height: 20px;
}
.indicator-xs .iconSymbol {
font-size: 20px;
line-height: 20px;
}
/* Indicator background images */
.indicator,
.indicator-background,
.indicator.state1,
.indicator.state2,
.indicator.normal,
.indicator.state3,
.indicator.state4,
.indicator.state5,
.indicator.state6,
.indicator.state7,
.indicator.state8 {
position: relative;
background: url("../svg/svg_indicator_grey.svg") no-repeat center center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
.indicator,
.indicator.normal,
.indicator.state1,
.indicator.state3,
.indicator.state4,
.indicator.state5,
.indicator.state7,
.indicator.state8 {
color: #000;
}
.indicator.state2,
.indicator.state6 {
color: #fff;
}
.indicator-background {
position: absolute;
width: 100%;
height: 100%;
}
.indicator.state1 .indicator-background {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB2ZXJzaW9uPSIxLjEiPg0KPHN0eWxlPg0KCS5zdHlsZV9iYXNlew0KCQlzdHJva2U6CSNmZmY7DQoJCWZpbGw6CSNlZWU7DQogICAgc3Ryb2tlLXRoaWNrbmVzczogMTsNCgl9DQo8L3N0eWxlPg0KICANCiA8ZGVmcz4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJnX2dyZXkxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjODI4MjgyIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4gICANCiAgIDxsaW5lYXJHcmFkaWVudCBpZD0iYmdfd2hpdGUxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iLjciIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iNzAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+CQkgDQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJncmVlbiIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjNDA4MTIzIiBvZmZzZXQ9IjAlIiAvPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0E0RkY0RSIgb2Zmc2V0PSIxMDAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+DQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJyZWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzlCMDAwMCIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGRjAwMDAiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50Pg0KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ieWVsbG93IiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNBRDc3MDAiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkRGRjJBIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJsdWUiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzAwNDdBRiIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMwMERBRkIiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50PgkgDQo8L2RlZnM+ICANCiAgDQo8Zz4NCiAgICAgIDxnID4NCiAgICAgICAgPGNpcmNsZSBmaWxsPSJ1cmwoI2JnX2dyZXkxKSIgcj0iNTAiIGN4PSI1MCIgY3k9IjUwIi8+DQogICAgICAgIDxjaXJjbGUgZmlsbD0idXJsKCNncmVlbikiIHI9IjQ1IiBjeD0iNTAiIGN5PSI1MCIvPg0KICAgICAgICA8Y2lyY2xlIGZpbGw9InVybCgjYmdfd2hpdGUxKSIgcj0iNDIiIGN4PSI1MCIgY3k9IjUwIi8+DQogICAgICA8L2c+DQo8L2c+DQoNCjwvc3ZnPg0K') /*../svg/svg_indicator_green.svg*/;
*background-image: url("../svg/svg_indicator_green.svg"); /* For IE 6 and 7 */
}
.indicator.state2 .indicator-background {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB2ZXJzaW9uPSIxLjEiPg0KPHN0eWxlPg0KCS5zdHlsZV9iYXNlew0KCQlzdHJva2U6CSNmZmY7DQoJCWZpbGw6CSNlZWU7DQogICAgc3Ryb2tlLXRoaWNrbmVzczogMTsNCgl9DQo8L3N0eWxlPg0KICANCiA8ZGVmcz4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJnX2dyZXkxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjODI4MjgyIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4gICANCiAgIDxsaW5lYXJHcmFkaWVudCBpZD0iYmdfd2hpdGUxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iLjciIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iNzAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+CQkgDQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJncmVlbiIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjNDA4MTIzIiBvZmZzZXQ9IjAlIiAvPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0E0RkY0RSIgb2Zmc2V0PSIxMDAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+DQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJyZWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzlCMDAwMCIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGRjAwMDAiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50Pg0KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ieWVsbG93IiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNBRDc3MDAiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkRGRjJBIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJsdWUiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzAwNDdBRiIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMwMERBRkIiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50PgkgDQo8L2RlZnM+ICANCiAgDQo8Zz4NCiAgICAgIDxnID4NCiAgICAgICAgPGNpcmNsZSBmaWxsPSJ1cmwoI2JnX2dyZXkxKSIgcj0iNTAiIGN4PSI1MCIgY3k9IjUwIiBzdHJva2U9ImVlZSIvPg0KICAgICAgICA8Y2lyY2xlIGZpbGw9InVybCgjcmVkKSIgcj0iNDUiIGN4PSI1MCIgY3k9IjUwIi8+DQogICAgICAgIDxjaXJjbGUgZmlsbD0idXJsKCNiZ193aGl0ZTEpIiByPSI0MiIgY3g9IjUwIiBjeT0iNTAiLz4NCiAgICAgIDwvZz4NCjwvZz4NCg0KPC9zdmc+DQo=') /*../svg/svg_indicator_red.svg*/;
*background-image: url("../svg/svg_indicator_red.svg"); /* For IE 6 and 7 */
}
.indicator.state3 .indicator-background {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB2ZXJzaW9uPSIxLjEiPg0KPHN0eWxlPg0KCS5zdHlsZV9iYXNlew0KCQlzdHJva2U6CSNmZmY7DQoJCWZpbGw6CSNlZWU7DQogICAgc3Ryb2tlLXRoaWNrbmVzczogMTsNCgl9DQo8L3N0eWxlPg0KICANCiA8ZGVmcz4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJnX2dyZXkxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjODI4MjgyIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4gICANCiAgIDxsaW5lYXJHcmFkaWVudCBpZD0iYmdfd2hpdGUxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iLjciIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iNzAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+CQkgDQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJncmVlbiIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjNDA4MTIzIiBvZmZzZXQ9IjAlIiAvPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0E0RkY0RSIgb2Zmc2V0PSIxMDAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+DQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJyZWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzlCMDAwMCIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGRjAwMDAiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50Pg0KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ieWVsbG93IiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNBRDc3MDAiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkRGRjJBIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJsdWUiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzAwNDdBRiIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMwMERBRkIiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50PgkgDQo8L2RlZnM+ICANCiAgDQo8Zz4NCiAgICAgIDxnID4NCiAgICAgICAgPGNpcmNsZSBmaWxsPSJ1cmwoI2JnX2dyZXkxKSIgcj0iNTAiIGN4PSI1MCIgY3k9IjUwIiBzdHJva2U9ImVlZSIvPg0KICAgICAgICA8Y2lyY2xlIGZpbGw9InVybCgjeWVsbG93KSIgcj0iNDUiIGN4PSI1MCIgY3k9IjUwIi8+DQogICAgICAgIDxjaXJjbGUgZmlsbD0idXJsKCNiZ193aGl0ZTEpIiByPSI0MiIgY3g9IjUwIiBjeT0iNTAiLz4NCiAgICAgIDwvZz4NCjwvZz4NCg0KPC9zdmc+DQo=') /*../svg/svg_indicator_yellow.svg*/;
*background-image: url("../svg/svg_indicator_yellow.svg"); /* For IE 6 and 7 */
}
.indicator.state4 .indicator-background {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB2ZXJzaW9uPSIxLjEiPg0KPHN0eWxlPg0KCS5zdHlsZV9iYXNlew0KCQlzdHJva2U6CSNmZmY7DQoJCWZpbGw6CSNlZWU7DQogICAgc3Ryb2tlLXRoaWNrbmVzczogMTsNCgl9DQo8L3N0eWxlPg0KICANCiA8ZGVmcz4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJnX2dyZXkxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjODI4MjgyIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4gICANCiAgIDxsaW5lYXJHcmFkaWVudCBpZD0iYmdfd2hpdGUxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iLjciIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iNzAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+CQkgDQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJncmVlbiIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjNDA4MTIzIiBvZmZzZXQ9IjAlIiAvPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0E0RkY0RSIgb2Zmc2V0PSIxMDAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+DQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJyZWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzlCMDAwMCIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGRjAwMDAiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50Pg0KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ieWVsbG93IiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNBRDc3MDAiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkRGRjJBIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJsdWUiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzAwNDdBRiIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMwMERBRkIiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50PgkgDQo8L2RlZnM+ICANCiAgDQo8Zz4NCiAgICAgIDxnID4NCiAgICAgICAgPGNpcmNsZSBmaWxsPSJ1cmwoI2JnX2dyZXkxKSIgcj0iNTAiIGN4PSI1MCIgY3k9IjUwIiBzdHJva2U9ImVlZSIvPg0KICAgICAgICA8Y2lyY2xlIGZpbGw9InVybCgjYmx1ZSkiIHI9IjQ1IiBjeD0iNTAiIGN5PSI1MCIvPg0KICAgICAgICA8Y2lyY2xlIGZpbGw9InVybCgjYmdfd2hpdGUxKSIgcj0iNDIiIGN4PSI1MCIgY3k9IjUwIi8+DQogICAgICA8L2c+DQo8L2c+DQoNCjwvc3ZnPg0K') /*../svg/svg_indicator_blue.svg*/;
*background-image: url("../svg/svg_indicator_blue.svg"); /* For IE 6 and 7 */
}
.indicator.state5 .indicator-background {
-moz-animation: animation-fade 0.75s linear infinite alternate;
-webkit-animation: animation-fade 0.75s linear infinite alternate;
-o-animation: animation-fade 0.75s linear infinite alternate;
animation: animation-fade 0.75s linear infinite alternate;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB2ZXJzaW9uPSIxLjEiPg0KPHN0eWxlPg0KCS5zdHlsZV9iYXNlew0KCQlzdHJva2U6CSNmZmY7DQoJCWZpbGw6CSNlZWU7DQogICAgc3Ryb2tlLXRoaWNrbmVzczogMTsNCgl9DQo8L3N0eWxlPg0KICANCiA8ZGVmcz4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJnX2dyZXkxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjODI4MjgyIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4gICANCiAgIDxsaW5lYXJHcmFkaWVudCBpZD0iYmdfd2hpdGUxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iLjciIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iNzAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+CQkgDQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJncmVlbiIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjNDA4MTIzIiBvZmZzZXQ9IjAlIiAvPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0E0RkY0RSIgb2Zmc2V0PSIxMDAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+DQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJyZWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzlCMDAwMCIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGRjAwMDAiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50Pg0KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ieWVsbG93IiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNBRDc3MDAiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkRGRjJBIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJsdWUiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzAwNDdBRiIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMwMERBRkIiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50PgkgDQo8L2RlZnM+ICANCiAgDQo8Zz4NCiAgICAgIDxnID4NCiAgICAgICAgPGNpcmNsZSBmaWxsPSJ1cmwoI2JnX2dyZXkxKSIgcj0iNTAiIGN4PSI1MCIgY3k9IjUwIi8+DQogICAgICAgIDxjaXJjbGUgZmlsbD0idXJsKCNncmVlbikiIHI9IjQ1IiBjeD0iNTAiIGN5PSI1MCIvPg0KICAgICAgICA8Y2lyY2xlIGZpbGw9InVybCgjYmdfd2hpdGUxKSIgcj0iNDIiIGN4PSI1MCIgY3k9IjUwIi8+DQogICAgICA8L2c+DQo8L2c+DQoNCjwvc3ZnPg0K') /*../svg/svg_indicator_green.svg*/;
*background-image: url("../svg/svg_indicator_green.svg"); /* For IE 6 and 7 */
-moz-background-size: contain;
-o-background-size: contain;
-webkit-background-size: contain;
-ms-background-size: contain;
background-size: contain;
}
.indicator.state6 .indicator-background {
-moz-animation: animation-fade 0.75s linear infinite alternate;
-webkit-animation: animation-fade 0.75s linear infinite alternate;
-o-animation: animation-fade 0.75s linear infinite alternate;
-ms-animation: animation-fade 0.75s linear infinite alternate;
animation: animation-fade 0.75s linear infinite alternate;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB2ZXJzaW9uPSIxLjEiPg0KPHN0eWxlPg0KCS5zdHlsZV9iYXNlew0KCQlzdHJva2U6CSNmZmY7DQoJCWZpbGw6CSNlZWU7DQogICAgc3Ryb2tlLXRoaWNrbmVzczogMTsNCgl9DQo8L3N0eWxlPg0KICANCiA8ZGVmcz4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJnX2dyZXkxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjODI4MjgyIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4gICANCiAgIDxsaW5lYXJHcmFkaWVudCBpZD0iYmdfd2hpdGUxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iLjciIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iNzAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+CQkgDQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJncmVlbiIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjNDA4MTIzIiBvZmZzZXQ9IjAlIiAvPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0E0RkY0RSIgb2Zmc2V0PSIxMDAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+DQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJyZWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzlCMDAwMCIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGRjAwMDAiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50Pg0KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ieWVsbG93IiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNBRDc3MDAiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkRGRjJBIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJsdWUiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzAwNDdBRiIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMwMERBRkIiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50PgkgDQo8L2RlZnM+ICANCiAgDQo8Zz4NCiAgICAgIDxnID4NCiAgICAgICAgPGNpcmNsZSBmaWxsPSJ1cmwoI2JnX2dyZXkxKSIgcj0iNTAiIGN4PSI1MCIgY3k9IjUwIiBzdHJva2U9ImVlZSIvPg0KICAgICAgICA8Y2lyY2xlIGZpbGw9InVybCgjcmVkKSIgcj0iNDUiIGN4PSI1MCIgY3k9IjUwIi8+DQogICAgICAgIDxjaXJjbGUgZmlsbD0idXJsKCNiZ193aGl0ZTEpIiByPSI0MiIgY3g9IjUwIiBjeT0iNTAiLz4NCiAgICAgIDwvZz4NCjwvZz4NCg0KPC9zdmc+DQo=') /*../svg/svg_indicator_red.svg*/;
*background-image: url("../svg/svg_indicator_red.svg"); /* For IE 6 and 7 */
-moz-background-size: contain;
-o-background-size: contain;
-webkit-background-size: contain;
-ms-background-size: contain;
background-size: contain;
}
.indicator.state7 .indicator-background {
-moz-animation: animation-fade 0.75s linear infinite alternate;
-webkit-animation: animation-fade 0.75s linear infinite alternate;
-o-animation: animation-fade 0.75s linear infinite alternate;
-ms-animation: animation-fade 0.75s linear infinite alternate;
animation: animation-fade 0.75s linear infinite alternate;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB2ZXJzaW9uPSIxLjEiPg0KPHN0eWxlPg0KCS5zdHlsZV9iYXNlew0KCQlzdHJva2U6CSNmZmY7DQoJCWZpbGw6CSNlZWU7DQogICAgc3Ryb2tlLXRoaWNrbmVzczogMTsNCgl9DQo8L3N0eWxlPg0KICANCiA8ZGVmcz4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJnX2dyZXkxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjODI4MjgyIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4gICANCiAgIDxsaW5lYXJHcmFkaWVudCBpZD0iYmdfd2hpdGUxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iLjciIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iNzAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+CQkgDQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJncmVlbiIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjNDA4MTIzIiBvZmZzZXQ9IjAlIiAvPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0E0RkY0RSIgb2Zmc2V0PSIxMDAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+DQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJyZWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzlCMDAwMCIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGRjAwMDAiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50Pg0KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ieWVsbG93IiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNBRDc3MDAiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkRGRjJBIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJsdWUiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzAwNDdBRiIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMwMERBRkIiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50PgkgDQo8L2RlZnM+ICANCiAgDQo8Zz4NCiAgICAgIDxnID4NCiAgICAgICAgPGNpcmNsZSBmaWxsPSJ1cmwoI2JnX2dyZXkxKSIgcj0iNTAiIGN4PSI1MCIgY3k9IjUwIiBzdHJva2U9ImVlZSIvPg0KICAgICAgICA8Y2lyY2xlIGZpbGw9InVybCgjeWVsbG93KSIgcj0iNDUiIGN4PSI1MCIgY3k9IjUwIi8+DQogICAgICAgIDxjaXJjbGUgZmlsbD0idXJsKCNiZ193aGl0ZTEpIiByPSI0MiIgY3g9IjUwIiBjeT0iNTAiLz4NCiAgICAgIDwvZz4NCjwvZz4NCg0KPC9zdmc+DQo=') /*../svg/svg_indicator_yellow.svg*/;
*background-image: url("../svg/svg_indicator_yellow.svg"); /* For IE 6 and 7 */
-moz-background-size: contain;
-o-background-size: contain;
-webkit-background-size: contain;
-ms-background-size: contain;
background-size: contain;
}
.indicator.state8 .indicator-background {
-moz-animation: animation-fade 0.75s linear infinite alternate;
-webkit-animation: animation-fade 0.75s linear infinite alternate;
-o-animation: animation-fade 0.75s linear infinite alternate;
animation: animation-fade 0.75s linear infinite alternate;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwMCAxMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiB2ZXJzaW9uPSIxLjEiPg0KPHN0eWxlPg0KCS5zdHlsZV9iYXNlew0KCQlzdHJva2U6CSNmZmY7DQoJCWZpbGw6CSNlZWU7DQogICAgc3Ryb2tlLXRoaWNrbmVzczogMTsNCgl9DQo8L3N0eWxlPg0KICANCiA8ZGVmcz4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJnX2dyZXkxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjODI4MjgyIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4gICANCiAgIDxsaW5lYXJHcmFkaWVudCBpZD0iYmdfd2hpdGUxIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iLjciIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iNzAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+CQkgDQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJncmVlbiIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjNDA4MTIzIiBvZmZzZXQ9IjAlIiAvPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0E0RkY0RSIgb2Zmc2V0PSIxMDAlIiAvPg0KICAgIDwvbGluZWFyR3JhZGllbnQ+DQogICAgPGxpbmVhckdyYWRpZW50IGlkPSJyZWQiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzlCMDAwMCIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNGRjAwMDAiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50Pg0KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ieWVsbG93IiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiNBRDc3MDAiIG9mZnNldD0iMCUiIC8+DQogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjRkRGRjJBIiBvZmZzZXQ9IjEwMCUiIC8+DQogICAgPC9saW5lYXJHcmFkaWVudD4NCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImJsdWUiIHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiPg0KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzAwNDdBRiIgb2Zmc2V0PSIwJSIgLz4NCiAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMwMERBRkIiIG9mZnNldD0iMTAwJSIgLz4NCiAgICA8L2xpbmVhckdyYWRpZW50PgkgDQo8L2RlZnM+ICANCiAgDQo8Zz4NCiAgICAgIDxnID4NCiAgICAgICAgPGNpcmNsZSBmaWxsPSJ1cmwoI2JnX2dyZXkxKSIgcj0iNTAiIGN4PSI1MCIgY3k9IjUwIiBzdHJva2U9ImVlZSIvPg0KICAgICAgICA8Y2lyY2xlIGZpbGw9InVybCgjYmx1ZSkiIHI9IjQ1IiBjeD0iNTAiIGN5PSI1MCIvPg0KICAgICAgICA8Y2lyY2xlIGZpbGw9InVybCgjYmdfd2hpdGUxKSIgcj0iNDIiIGN4PSI1MCIgY3k9IjUwIi8+DQogICAgICA8L2c+DQo8L2c+DQoNCjwvc3ZnPg0K') /*../svg/svg_indicator_blue.svg*/;
*background-image: url("../svg/svg_indicator_blue.svg"); /* For IE 6 and 7 */
-moz-background-size: contain;
-o-background-size: contain;
-webkit-background-size: contain;
-ms-background-size: contain;
background-size: contain;
}
/*-----------------------*/
/* Sensor Value widget */
/*-----------------------*/
.wf-sensor-container {
position: relative;
display: inline-block;
}
.wf-sensor {
width: 26px;
height: 26px;
position: relative;
display: inline-block;
}
.wf-sensor-label {
position: relative;
width: 26px;
height: 26px;
line-height: 25px;
color: #555;
border: 1px solid #555;
background-color: #eee;
fill: #eeeeee;
stroke: #555555;
text-align: center;
font-size: 12px;
z-index: 2;
white-space: nowrap;
}
.wf-sensor-square {
border-radius: 0;
}
.wf-sensor-circle {
border-radius: 50%;
}
.wf-sensor-pointer-wrapper {
width: 1px;
height: 0;
overflow: visible;
left: 50%;
top: 50%;
margin-left: -1px;
z-index: 1;
position: absolute;
}
.wf-sensor-pointer {
border-left: 1px solid #aaa;
-moz-transform-origin: 1px 0;
-ms-transform-origin: 1px 0;
-o-transform-origin: 1px 0;
-webkit-transform-origin: 1px 0;
transform-origin: 1px 0;
}
.wf-sensor-value {
height: 25px;
padding: 0 5px;
line-height: 23px;
min-width: 50px;
border: 1px solid #e4e4e4;
background-color: rgba(255,255,255,.23);
border-radius: 3px;
display: inline-block;
font-size: 12px;
white-space: nowrap;
}
.wf-sensor-label .svg {
z-index: -1;
}
.wf-sensor-label .wf-svg-path {
stroke: #555;
}
.wf-sensor-label span {
display: table-cell;
}
.wf-sensor-pin.wf-sensor-label {
border: none;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
background: transparent;
}
/* Sensor label position*/
.wf-sensor-value-top {
position: absolute;
top: -50%;
transform: translate(-50%, -50%);
left: 12px;
z-index: 999;
margin-top: -5px;
}
.wf-sensor-value-bottom {
position: absolute;
top: 0;
left: 12px;
transform: translate(-50%, 100%);
z-index: 999;
margin-top: 5px;
}
.wf-sensor-value-left {
position: absolute;
top: 50%;
left: 0;
transform: translate(-100%, -50%);
z-index: 999;
margin-left: -5px;
}
.wf-sensor-value-right {
position: absolute;
top: 50%;
left: 0;
transform: translate(30px, -50%);
z-index: 999;
display: inline-block;
}
/*-----------------------*/
/* Value arc widget */
/*-----------------------*/
.wf-arc .wf-arc-ticks-label {
font-size: 11px;
transform: translateY(-3px);
}
.wf-arc .wf-arc-ticks-line {
stroke: #eee;
}
.wf-arc-content {
position: absolute;
top: 50%;
width: 100%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.wf-arc-value {
font-weight: 600;
font-size: 32px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-70%);
-moz-transform: translateY(-70%);
-ms-transform: translateY(-70%);
-o-transform: translateY(-70%);
transform: translateY(-70%);
text-align: center;
width: 100%;
}
.wf-arc-icon {
position: absolute;
top: 25%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
width: 100%;
}
.wf-arc-label {
font-size: 18px;
position: absolute;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
top: 60%;
text-align: center;
width: 100%;
}
.wf-arc-label .wf-arc-unit {
color: #aaaaaa;
}
.wf-hide-first-tick-label .line-ticks:first-child .wf-arc-ticks-label {
display: none;
}
.wf-hide-last-tick-label .line-ticks:last-child .wf-arc-ticks-label {
display: none;
}
/* Popover components */
.wf-popover-control-btn {
position: absolute;
right: 10px;
top: 5px;
}
.wf-popover-title,
.popover-title {
display: block;
}
/*-----------------------*/
/* user security authorizations display widget */
/*-----------------------*/
.wf-user-athorizations-list .wf-user-authorization {
display: block;
font-weight: bold;
}
/*--------------------------------------------*/
/* Usefull helper styles for schema symbols */
/*--------------------------------------------*/
/* 1 x 1 sized symbol */
.wf-symbol-1x {
font-size: 24px;
height: 24px;
width: 24px;
line-height: 24px;
}
/* 2 x 2 sized symbol */
.wf-symbol-2x {
font-size: 48px;
height: 48px;
width: 48px;
line-height: 48px;
}
.wf-symbol-bordered {
background-color: #fff;
border: 2px solid #888;
color: grey;
padding: 2px;
}
.wf-text-label-bordered {
background-color: #fafafa;
border: 1px solid #ddd;
border-radius: 2px;
color: grey;
padding: 3px 5px;
line-height: 18px;
}
.wf-symbol-overlay {
z-index: 1;
}
.wf-symbol-overlay .wf-symbol-overlay-icon {
position: absolute;
}
/*--------------------------------------
Logbook widget
---------------------------------------*/
.wf-logbook-panel {}
.wf-logbook-panel .wf-logbook-panel-body {
overflow-y: scroll;
min-height: 50px;
}
.wf-logbook-items {
}
.wf-logbook-item {
position: relative;
margin: 10px 0;
padding: 15px 15px 15px 15px;
background-color: #f8f8f8;
border-left-width: 30px;
border-left-style: solid;
border-radius: 5px;
}
.wf-logbook-item-head {
color: #333333;
}
.wf-logbook-item-text {
}
.wf-logbook-item-user,
.wf-logbook-item-timestamp {
color: #aaaaaa;
}
.wf-confirm-settings-btn {
position: absolute;
right: 40px;
bottom: -30px;
z-index: 1030;
border-radius: 0 0 5px 5px;
background-color: rgba(245, 245, 245, 0.98);
padding: 10px;
box-shadow: 0 5px 6px -2px rgba(170,170,170,.5);
}
.wf-logbook-input-message {
min-height: 98px;
resize: vertical;
}
.collapsing .wf-confirm-settings-btn {
display: none;
}
.wf-logbook-item.info {
border-left-color: #5bc0de;
}
.wf-logbook-item.info:before {
content: "\e67f";
}
.wf-logbook-item.warning {
border-left-color: #e08f00;
}
.wf-logbook-item.warning:before {
content: "\e608";
}
.wf-logbook-item.danger,
.wf-logbook-item.error,
.wf-logbook-item.critical {
border-left-color: #da1a1a;
}
.wf-logbook-item.danger:before,
.wf-logbook-item.error:before,
.wf-logbook-item.critical:before {
content: "\e72a";
}
.wf-logbook-item.maintenance {
border-left-color: #1160b8;
}
.wf-logbook-item.maintenance:before {
content: "\e67f";
}
/*------------------------*/
/* wf-meter component */
/*------------------------*/
.wf-meter-value,
.wf-meter-value-decimals {
font-family: Verdana;
font-size: 20px;
font-weight: normal;
fill: #fff;
}
.wf-meter-decimals-background {
fill: #d02f2f;
}
.wf-meter-value-background {
fill: #111;
}
.wf-meter-background {
fill: #666;
}
.wf-meter-inner-stroke {
stroke: #aaa;
}
.wf-meter-slots-background {
fill: #333;
}
.wf-meter-scale {
fill: #fefefe;
}
.wf-meter-decimal-point {
fill: #000;
}
.wf-meter-decimal-point-stroke {
stroke: #fefefe;
}
.wf-meter-chrome {
}
.wf-meter-label {
margin-left: 5%;
line-height: 25px;
}
.wf-meter-unit-label {
text-align: right;
margin-right: 5%;
line-height: 10px;
margin-bottom: 5px;
}
/*------------------------------*/
/* CSS animations */
/*------------------------------*/
/* WebKit/Safari and Chrome */
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(.3);
transform: scale(.3);
opacity: .5;
}
80% {
-webkit-transform: scale(2.0);
transform: scale(2.0);
opacity: .1;
}
100% {
-webkit-transform: scale(2.5);
transform: scale(2.5);
opacity: 0;
}
}
/* Gecko/Firefox */
@-moz-keyframes pulse {
0% {
-moz-transform: scale(.3);
transform: scale(.3);
opacity: .5;
}
80% {
-moz-transform: scale(2.0);
transform: scale(2.0);
opacity: .05;
}
100% {
-moz-transform: scale(2.5);
transform: scale(2.5);
opacity: 0;
}
}
/* Presto/Opera */
@-o-keyframes pulse {
0% {
-o-transform: scale(.3);
transform: scale(.3);
opacity: .5;
}
80% {
-o-transform: scale(2.0);
transform: scale(2.0);
opacity: .1;
}
100% {
-o-transform: scale(2.5);
transform: scale(2.5);
opacity: 0;
}
}
/* Animation pulse */
@keyframes pulse {
0% {
transform: scale(.3);
opacity: .5;
}
80% {
transform: scale(2.0);
opacity: .1;
}
100% {
transform: scale(2.5);
opacity: 0;
}
}
/* Animation fade */
@keyframes animation-fade {
0% {
opacity: 1;
}
50% {
opacity: .1;
}
100% {
opacity: 1;
}
}
@-moz-keyframes animation-fade {
0% {
opacity: 1;
}
50% {
opacity: .1;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes animation-fade {
0% {
opacity: 1;
}
50% {
opacity: .1;
}
100% {
opacity: 1;
}
}
@-o-keyframes animation-fade {
0% {
opacity: 1;
}
50% {
opacity: .1;
}
100% {
opacity: 1;
}
}
@-ms-keyframes animation-fade {
0% {
opacity: 1;
}
50% {
opacity: .1;
}
100% {
opacity: 1;
}
}
@keyframes fadeInTranslateFadeOut {
0%, 100% {
opacity: 0;
}
0% {
-webkit-transform: translate(-10px);
-moz-transform: translate(-10px);
-ms-transform: translate(-10px);
-o-transform: translate(-10px);
transform: translate(-10px);
}
50% {
opacity: 1;
}
100% {
-webkit-transform: translate(10px);
-moz-transform: translate(10px);
-ms-transform: translate(10px);
-o-transform: translate(10px);
transform: translate(10px);
}
}
.fadeInTranslateFadeOut {
-webkit-animation: fadeInTranslateFadeOut 1s infinite;
-moz-animation: fadeInTranslateFadeOut 1s infinite;
-o-animation: fadeInTranslateFadeOut 1s infinite;
animation: fadeInTranslateFadeOut 1s infinite;
}
@-webkit-keyframes spinner_animation {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes spinner_animation {
0% {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spinner_animation {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* Animation rotationRight */
@-webkit-keyframes rotationRight {
0% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -360deg);
transform: rotate3d(0, 0, 1, -360deg);
opacity: 1;
}
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@keyframes rotationRight {
0% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, -360deg);
transform: rotate3d(0, 0, 1, -360deg);
opacity: 1;
}
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
.rotationRight {
-webkit-animation-name: rotationRight;
animation-name: rotationRight;
animation-timing-function: linear;
}
/* Animation rotationLeft */
@-webkit-keyframes rotationLeft {
0% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 360deg);
transform: rotate3d(0, 0, 1, 360deg);
opacity: 1;
}
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@keyframes rotationLeft {
0% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate3d(0, 0, 1, 360deg);
transform: rotate3d(0, 0, 1, 360deg);
opacity: 1;
}
100% {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
.rotationLeft {
-webkit-animation-name: rotationLeft;
animation-name: rotationLeft;
animation-timing-function: linear;
}
/* Animation moveToLeft */
@-webkit-keyframes moveToLeft {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 0;
}
15% {
opacity: 1;
}
80% {
opacity: 1;
}
90% {
opacity: 0;
}
100% {
visibility: hidden;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0;
}
}
@keyframes moveToLeft {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 0;
}
15% {
opacity: 1;
}
80% {
opacity: 1;
}
90% {
opacity: 0;
}
100% {
visibility: hidden;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 0;
}
}
.moveToLeft {
-webkit-animation-name: moveToLeft;
animation-name: moveToLeft;
animation-timing-function: linear;
}
/* Animation moveToRight */
@-webkit-keyframes moveToRight {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 0;
}
15% {
opacity: 1;
}
80% {
opacity: 1;
}
90% {
opacity: 0;
}
100% {
visibility: hidden;
-webkit-transform: translateX(100%);
transform: translateX(100%);
opacity: 0;
}
}
@keyframes moveToRight {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 0;
}
15% {
opacity: 1;
}
80% {
opacity: 1;
}
90% {
opacity: 0;
}
100% {
visibility: hidden;
-webkit-transform: translateX(100%);
transform: translateX(100%);
opacity: 0;
}
}
.moveToRight {
-webkit-animation-name: moveToRight;
animation-name: moveToRight;
animation-timing-function: linear;
}
/* Animation moveUp */
@-webkit-keyframes moveUp {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 0;
}
15% {
opacity: 1;
}
70% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
visibility: hidden;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
opacity: 0;
}
}
@keyframes moveUp {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 0;
}
15% {
opacity: 1;
}
70% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
visibility: hidden;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
opacity: 0;
}
}
.moveUp {
-webkit-animation-name: moveUp;
animation-name: moveUp;
animation-timing-function: linear;
}
/* Animation moveDown */
@-webkit-keyframes moveDown {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 0;
}
15% {
opacity: 1;
}
70% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
visibility: hidden;
-webkit-transform: translateY(100%);
transform: translateY(100%);
opacity: 0;
}
}
@keyframes moveDown {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 0;
}
15% {
opacity: 1;
}
70% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
visibility: hidden;
-webkit-transform: translateY(100%);
transform: translateY(100%);
opacity: 0;
}
}
.moveDown {
-webkit-animation-name: moveDown;
animation-name: moveDown;
animation-timing-function: linear;
}
/*-------------------------------------------------------------
Workaround for positioning issue of animated extensions
-------------------------------------------------------------*/
.wf-state-container.bounce,
.wf-state-container.bounceIn,
.wf-state-container.bounceInDown,
.wf-state-container.bounceInLeft,
.wf-state-container.bounceInRight,
.wf-state-container.bounceInUp,
.wf-state-container.bounceOut,
.wf-state-container.bounceOutDown,
.wf-state-container.bounceOutLeft,
.wf-state-container.bounceOutRight,
.wf-state-container.bounceOutUp,
.wf-state-container.fadeInDown,
.wf-state-container.fadeInDownBig,
.wf-state-container.fadeInLeft,
.wf-state-container.fadeInLeftBig,
.wf-state-container.fadeInRight,
.wf-state-container.fadeInRightBig,
.wf-state-container.fadeInUp,
.wf-state-container.fadeInUpBig,
.wf-state-container.fadeOutLeft,
.wf-state-container.fadeOutLeftBig,
.wf-state-container.fadeOutRight,
.wf-state-container.fadeOutRightBig,
.wf-state-container.fadeOutUp,
.wf-state-container.fadeOutUpBig,
.wf-state-container.flipInX,
.wf-state-container.flipInY,
.wf-state-container.flipOutX,
.wf-state-container.flipOutY,
.wf-state-container.lightSpeedIn,
.wf-state-container.moveDown,
.wf-state-container.moveToLeft,
.wf-state-container.moveToRight,
.wf-state-container.moveUp,
.wf-state-container.pulse,
.wf-state-container.rollIn,
.wf-state-container.rollOut,
.wf-state-container.roatateIn,
.wf-state-container.rotationLeft,
.wf-state-container.rotationRight,
.wf-state-container.slideInUp,
.wf-state-container.slideInLeft,
.wf-state-container.slideInRight,
.wf-state-container.slideInUp,
.wf-state-container.slideOutUp,
.wf-state-container.slideOutLeft,
.wf-state-container.slideOutRight,
.wf-state-container.slideOutUp,
.wf-state-container.rubberband,
.wf-state-container.shake,
.wf-state-container.slideInDown,
.wf-state-container.swing,
.wf-state-container.tada,
.wf-state-container.wobble,
.wf-state-container.headShake,
.wf-state-container.jello {
top: auto;
}
/*------------------------------------*/
/* Additional background-color styles */
/*------------------------------------*/
.bg-normal {
background-color: #eee;
}
.bg-changed {
/*background-color: #d9edf7;*/
}
.btn .bg-changed {
background-color: transparent;
}
.bg-transparent {
background-color: transparent !important;
}
.bg-white {
background-color: #ffffff !important;
}
.bg-light {
background-color: #f8f9fa !important;
}
.bg-dark {
background-color: #343a40 !important;
}
/*------------------------------*/
/* Basic layout elements styles */
/*------------------------------*/
h1,
h2,
h3 {
color: #555;
}
h2 {
color: #111;
}
h2.subheader {
color: #555;
}
h3 {
color: #555;
}
#footer a {
color: #ccc;
}
#footer {
background-color: #282828;
}
.version-label {
color: #aaa;
}
/*--------------------------------*/
/* Modal dialog header background */
/*--------------------------------*/
.badge-danger {
background: #990100;
color: #ffffff;
}
.badge-warning {
background: #E08F00;
color: #000000;
}
.badge-success {
background: #0c9900;
color: #ffffff;
}
.badge-primary {
background: #337ab7;
color: #ffffff;
}
.badge-info {
background: #337ab7;
color: #000000;
}
/*--------------------------------------------------------------
Marker Elements Colors
--------------------------------------------------------------*/
.marker-primary,
.marker-blue {
background: rgba(51, 122, 183, .9);
color: #ffffff;
}
.marker-danger,
.marker-red {
background: rgba(218, 26, 26, .9);
color: #ffffff;
}
.marker-success,
.marker-green {
background: rgba(12, 153, 0, .9);
color: #ffffff;
}
.marker-warning,
.marker-orange {
background: rgba(224, 143, 0, .9);
color: #ffffff;
}
.marker-info,
.marker-lightblue {
background: rgba(91, 192, 222, .9);
color: #000000;
}
/*--------------------------------*/
/* Modal dialog header background */
/*--------------------------------*/
.modal-dialog .modal-danger {
background: #990100;
color: #ffffff;
}
.modal-dialog .modal-warning {
background: #E08F00;
color: #ffffff;
}
.modal-dialog .modal-success {
background: #0c9900;
color: #ffffff;
}
.modal-dialog .modal-primary {
background: rgb(51, 122, 183);
color: #ffffff;
}
.modal-header-danger {
background: #990100;
color: #ffffff;
}
.modal-header-default {
background-color: #fff;
color: #333;
}
.modal-header-success {
background: #0c9900;
color: #ffffff;
}
.modal-header-primary {
background: #337ab7;
color: #ffffff;
}
.modal-header-info {
background: #5bc0de;
color: #ffffff;
}
.modal-header-warning {
background: #E08F00;
color: #ffffff;
}
.modal-header-variant-dark {
background: #636363;
color: #ffffff;
}
/*--------------------------------*/
/* Popover header background */
/*--------------------------------*/
.popover-variant-dark.popover-title {
background: #636363;
color: #ffffff;
}
.popover-primary.popover-title {
background: #337ab7;
color: #ffffff;
}
.popover-info.popover-title {
background: #5bc0de;
color: #ffffff;
}
.popover-danger.popover-title {
background: #990100;
color: #ffffff;
}
.popover-warning.popover-title {
background: #E08F00;
color: #ffffff;
}
.popover-success.popover-title {
background: #0c9900;
color: #ffffff;
}
.popover .popover-variant-dark .close,
.popover .popover-success .close,
.popover .popover-warning .close,
.popover .popover-danger .close,
.popover .popover-primary .close,
.popover .popover-info .close {
color: #ffffff;
opacity: 0.75;
}
/* Button arrow element */
.btn-variant-dark .wf-btn-arrow:after {
border-top-color: #444444;
}
.btn-default .wf-btn-arrow:after {
border-top-color: #e1e1e1;
}
.btn-primary .wf-btn-arrow:after {
border-top-color: #275b89;
}
.btn-info .wf-btn-arrow:after {
border-top-color: #28a4c9;
}
.btn-success .wf-btn-arrow:after {
border-top-color: #419641;
}
.btn-warning .wf-btn-arrow:after {
border-top-color: #eb9316;
}
.btn-danger .wf-btn-arrow:after {
border-top-color: #c2302c;
}
.btn-link .wf-btn-arrow:after {
border-top-color: #777777;
}
/* Marker animations */
.pulse-primary,
.pulse-blue {
-webkit-animation-name: pulse;
-moz-animation-name: pulse;
-o-animation-name: pulse;
animation-name: pulse;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
border: 2px solid #1160b8;
border-radius: 50px;
box-shadow: 0 0 5px #1160b8;
}
.pulse-success,
.pulse-green {
-webkit-animation-name: pulse;
-moz-animation-name: pulse;
-o-animation-name: pulse;
animation-name: pulse;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
border: 2px solid #468847;
border-radius: 50px;
box-shadow: 0 0 5px #0c9900;
}
.pulse-danger,
.pulse-red {
-webkit-animation-name: pulse;
-moz-animation-name: pulse;
-o-animation-name: pulse;
animation-name: pulse;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
border: 2px solid #990100;
border-radius: 50px;
box-shadow: 0 0 5px #a80000;
}
.pulse-warning,
.pulse-orange {
-webkit-animation-name: pulse;
-moz-animation-name: pulse;
-o-animation-name: pulse;
animation-name: pulse;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
border: 2px solid #ed9c28;
border-radius: 50px;
}
.pulse-info,
.pulse-lightblue {
-webkit-animation-name: pulse;
-moz-animation-name: pulse;
-o-animation-name: pulse;
animation-name: pulse;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
border: 2px solid #eee;
border-radius: 50px;
box-shadow: 0 0 5px #337f95;
}
/* Toasts messages overwrites */
.toast-info {
background-color: #333;
}
/*--------------------------------------------------*/
/* Status colors definitions for symbols and icons */
/*--------------------------------------------------*/
.blue:before {
color: blue !important;
}
.blue:after {
color: #000000 !important;
}
.brown:before {
color: brown !important;
}
.brown:after {
color: #eeeeee !important;
}
.green:before {
color: green !important;
}
.green:after {
color: #eeeeee !important;
}
.orange:before {
color: orange !important;
}
.orange:after {
color: #000000 !important;
}
.red:before {
color: red !important;
}
.red:after {
color: #eeeeee !important;
}
.yellow:before {
color: yellow !important;
}
.yellow:after {
color: #000000 !important;
}
.normal:before {
color: #eeeeee !important;
}
.normal:after {
color: #555555 !important;
}
.warning,
.warning:before {
color: #e08f00 !important;
}
.warning:after {
color: #222222 !important;
}
.error,
.error:before {
color: #da1a1a !important;
}
.error:after {
color: #eeeeee !important;
}
.critical,
.critical:before {
-webkit-animation: flash 1s infinite;
-moz-animation: flash 1s infinite;
-o-animation: flash 1s infinite;
animation: flash 1s infinite;
color: #da1a1a !important;
}
.critical:after {
color: #eeeeee !important;
}
.running,
.running:before {
color: #5ed300 !important;
}
.running:after {
color: #000000 !important;
}
.running-foreground:after {
color: #5ed300 !important;
}
.maintenance,
.hand,
.maintenance:before,
.hand:before {
color: #1160b8 !important;
}
.maintenance:after,
.hand:after {
color: #cfcfcf !important;
}
/*----------------------------------*/
/* SVG elements status colors */
/*----------------------------------*/
.critical.wf-svg-path,
.error.wf-svg-path,
.red.wf-svg-path,
.brown.wf-svg-path{
color: #ffffff!important;
}
.critical .wf-svg-path {
-webkit-animation: flash 1s infinite;
-moz-animation: flash 1s infinite;
-o-animation: flash 1s infinite;
animation: flash 1s infinite;
fill: #da1a1a !important;
}
.error .wf-svg-path {
fill: #da1a1a !important;
}
.warning .wf-svg-path {
fill: #e08f00 !important;
}
.running .wf-svg-path {
fill: #5ed300 !important;
}
.maintenance .wf-svg-path,
.hand .wf-svg-path {
fill: #1160b8 !important;
}
.green .wf-svg-path {
fill: #5ed300;
}
.red .wf-svg-path {
fill: #da1a1a;
}
.blue .wf-svg-path {
fill: #1160b8;
}
.orange .wf-svg-path {
fill: #e08f00;
}
.brown .wf-svg-path {
fill: #b5651d;
}
.yellow .wf-svg-path {
fill: #edd200;
}
/*---------------------------*/
/* Line status colors */
/*---------------------------*/
.critical .wf-svg-line {
-webkit-animation: flash 1s infinite;
-moz-animation: flash 1s infinite;
-o-animation: flash 1s infinite;
animation: flash 1s infinite;
stroke: #da1a1a !important;
}
.error .wf-svg-line {
stroke: #da1a1a !important;
}
.warning .wf-svg-line {
stroke: #e08f00 !important;
}
.running .wf-svg-line {
stroke: #5ed300 !important;
}
.maintenance .wf-svg-line,
.hand .wf-svg-line {
stroke: #1160b8 !important;
}
.green .wf-svg-line {
stroke: #5ed300 !important;
}
.red .wf-svg-line {
stroke: #da1a1a !important;
}
.blue .wf-svg-line {
stroke: #1160b8 !important;
}
.orange .wf-svg-line {
stroke: #e08f00 !important;
}
.brown .wf-svg-line {
stroke: #b5651d !important;
}
.yellow .wf-svg-line {
stroke: #edd200 !important;
}
/*---------------------------*/
/* Shape status colors */
/*---------------------------*/
.wf-shape .critical {
-webkit-animation: flash 1s infinite;
-moz-animation: flash 1s infinite;
-o-animation: flash 1s infinite;
animation: flash 1s infinite;
background-color: #da1a1a !important;
}
.wf-shape .error {
background-color: #da1a1a !important;
}
.wf-shape .warning {
background-color: #e08f00 !important;
}
.wf-shape .running {
background-color: #5ed300 !important;
}
.wf-shape .maintenance,
.wf-shape .hand {
background-color: #1160b8 !important;
}
.wf-shape .red {
background-color: #da1a1a !important;
}
.wf-shape .green {
background-color: #5ed300 !important;
}
.wf-shape .blue {
background-color: #1160b8 !important;
}
.wf-shape .orange {
background-color: #e08f00 !important;
}
.wf-shape .brown {
background-color: #b5651d !important;
}
.wf-shape .yellow {
background-color: #edd200 !important;
}
.wf-shape .normal {
background-color: #eeeeee !important;
}
.wf-shape.wf-triangle .critical {
-moz-animation: flash 1s infinite;
-o-animation: flash 1s infinite;
-webkit-animation: flash 1s infinite;
animation: flash 1s infinite;
background: linear-gradient(to right bottom, #da1a1a 50%, transparent 50%) !important;
}
.wf-shape.wf-triangle .error,
.wf-shape.wf-triangle .red {
background: linear-gradient(to right bottom, #da1a1a 50%, transparent 50%) !important; }
.wf-shape.wf-triangle .warning,
.wf-shape.wf-triangle .orange {
background: linear-gradient(to right bottom, #e08f00 50%, transparent 50%) !important; }
.wf-shape.wf-triangle .running,
.wf-shape.wf-triangle .green {
background: linear-gradient(to right bottom, #5ed300 50%, transparent 50%) !important; }
.wf-shape.wf-triangle .maintenance,
.wf-shape.wf-triangle .hand,
.wf-shape.wf-triangle .blue {
background: linear-gradient(to right bottom, #1160b8 50%, transparent 50%) !important; }
.wf-shape.wf-triangle .brown {
background: linear-gradient(to right bottom, #b5651d 50%, transparent 50%) !important; }
.wf-shape.wf-triangle .yellow {
background: linear-gradient(to right bottom, #edd200 50%, transparent 50%) !important; }
/* ---------------------------*/
/* Generall color definitions */
/* ---------------------------*/
.green {
color: #5ed300 !important;
}
.red {
color: #da1a1a !important;
}
.blue {
color: #1160b8 !important;
}
.orange {
color: #e08f00 !important;
}
.brown {
color: #b5651d !important;
}
.yellow {
color: #edd200 !important;
}
/*----------------------------------*/
/* Sensor elements status colors */
/*----------------------------------*/
/* Sensor label states and colors*/
.normal .wf-sensor-label,
.normal + .wf-sensor-value,
.wf-sensor-normal .wf-sensor-label,
.wf-sensor-normal + .wf-sensor-value {
background-color: #eeeeee;
color: #555555;
}
.error .wf-sensor-label,
.error + .wf-sensor-value,
.wf-sensor-error .wf-sensor-label,
.wf-sensor-error + .wf-sensor-value,
.danger .wf-sensor-label,
.danger + .wf-sensor-value,
.wf-sensor-danger .wf-sensor-label,
.wf-sensor-danger + .wf-sensor-value,
.critical .wf-sensor-label,
.critical + .wf-sensor-value,
.wf-sensor-critical .wf-sensor-label,
.wf-sensor-critical + .wf-sensor-value,
.red .wf-sensor-label,
.red + .wf-sensor-value {
background-color: #da1a1a;
color: #fff;
}
.critical .wf-sensor-label,
.critical + .wf-sensor-value,
.wf-sensor-critical .wf-sensor-label,
.wf-sensor-critical + .wf-sensor-value {
-webkit-animation: flash 1s infinite;
-moz-animation: flash 1s infinite;
-o-animation: flash 1s infinite;
animation: flash 1s infinite;
}
.warning .wf-sensor-label,
.warning + .wf-sensor-value,
.wf-sensor-warning .wf-sensor-label,
.wf-sensor-warning + .wf-sensor-value,
.orange .wf-sensor-label,
.orange + .wf-sensor-value {
background-color: #e08f00;
color: #222222;
fill: #e08f00 !important;
}
.running .wf-sensor-label,
.running + .wf-sensor-value,
.wf-sensor-running .wf-sensor-label,
.wf-sensor-running + .wf-sensor-value,
.ok .wf-sensor-label,
.ok + .wf-sensor-value,
.wf-sensor-ok .wf-sensor-label,
.wf-sensor-ok + .wf-sensor-value,
.green .wf-sensor-label,
.green + .wf-sensor-value
{
background-color: #5ed300;
color: #000000;
}
.maintenance .wf-sensor-label,
.maintenance + .wf-sensor-value,
.wf-sensor-maintenance .wf-sensor-label,
.wf-sensor-maintenance + .wf-sensor-value,
.hand .wf-sensor-label,
.hand + .wf-sensor-value,
.wf-sensor-hand .wf-sensor-label,
.wf-sensor-hand + .wf-sensor-value,
.blue .wf-sensor-label,
.blue + .wf-sensor-value {
background-color: #1160b8;
color: #fff;
}
.brown .wf-sensor-label,
.brown + .wf-sensor-value
{
background-color: #b5651d;
color: #fff;
}
.yellow .wf-sensor-label,
.yellow + .wf-sensor-value
{
background-color: #edd200;
color: #000000;
}
.wf-sensor-pin {
background: transparent!important;
}
/*--------------------------------------
Watchdog widget
---------------------------------------*/
.wf-watchdog-online {
color: #5ed300;
}
.wf-watchdog-offline {
color: #da1a1a;
}
/*----------------------------------*/
/* SVG graphics status colors */
/*----------------------------------*/
.critical .wf-state-element {
-webkit-animation: flash 1s infinite;
-moz-animation: flash 1s infinite;
-o-animation: flash 1s infinite;
animation: flash 1s infinite;
fill: #da1a1a;
}
.error .wf-state-element {
fill: #da1a1a !important;
}
.warning .wf-state-element {
fill: #e08f00 !important;
}
.running .wf-state-element {
fill: #5ed300 !important;
}
.maintenance .wf-state-element,
.hand .wf-state-element {
fill: #1160b8 !important;
}
.green .wf-state-element {
fill: #5ed300 !important;
}
.red .wf-state-element {
fill: #da1a1a !important;
}
.blue .wf-state-element {
fill: #1160b8 !important;
}
.orange .wf-state-element {
fill: #e08f00 !important;
}
.brown .wf-state-element {
fill: #b5651d !important;
}
.yellow .wf-state-element {
fill: #edd200 !important;
}
/* State Layer status colors */
/*----------------------------------*/
.wf-state-layer > .wf-state-container.critical {
-webkit-animation: flash 1s infinite;
-moz-animation: flash 1s infinite;
-o-animation: flash 1s infinite;
background-color: #da1a1a !important;
color: #ffffff !important;
}
.wf-state-layer > .wf-state-container.error {
background-color: #da1a1a !important;
color: #ffffff !important;
}
.wf-state-layer > .wf-state-container.warning {
background-color: #e08f00 !important;
color: #ffffff !important;
}
.wf-state-layer > .wf-state-container.running {
background-color: #5ed300 !important;
color: #ffffff !important;
}
.wf-state-layer > .wf-state-container.maintenance,
.wf-state-layer > .wf-state-container.hand {
background-color: #1160b8 !important;
color: #ffffff !important;
}
.wf-state-layer > .wf-state-container.green {
background-color: #5ed300 !important;
color: #ffffff !important;
}
.wf-state-layer > .wf-state-container.red {
background-color: #da1a1a !important;
color: #ffffff !important;
}
.wf-state-layer > .wf-state-container.blue {
background-color: #1160b8 !important;
color: #ffffff !important;
}
.wf-state-layer > .wf-state-container.orange {
background-color: #e08f00 !important;
color: #ffffff !important;
}
.wf-state-layer > .wf-state-container.brown {
background-color: #b5651d !important;
color: #ffffff !important;
}
.wf-state-layer > .wf-state-container.yellow {
background-color: #edd200 !important;
color: #000 !important;
}
/*----------------------------------*/
/* Progress state status colors */
/*----------------------------------*/
.critical.wf-progress-state {
-webkit-animation: flash 1s infinite;
-moz-animation: flash 1s infinite;
-o-animation: flash 1s infinite;
animation: flash 1s infinite;
background-color: #da1a1a !important;
}
.error.wf-progress-state {
background-color: #da1a1a !important;
}
.warning.wf-progress-state {
background-color: #e08f00 !important;
}
.running.wf-progress-state {
background-color: #5ed300 !important;
}
.maintenance.wf-progress-state,
.hand.wf-progress-state {
background-color: #1160b8 !important;
}
.green.wf-progress-state {
background-color: #5ed300 !important;
}
.red.wf-progress-state {
background-color: #da1a1a !important;
}
.blue.wf-progress-state {
background-color: #1160b8 !important;
}
.orange.wf-progress-state {
background-color: #e08f00 !important;
}
.brown.wf-progress-state {
background-color: #b5651d !important;
}
.yellow.wf-progress-state {
background-color: #edd200 !important;
}
/*----------------------------------*/
/* Value display status colors */
/*----------------------------------*/
.critical.wf-output-box {
-webkit-animation: flash 1s infinite;
-moz-animation: flash 1s infinite;
-o-animation: flash 1s infinite;
animation: flash 1s infinite;
background-color: #da1a1a !important;
color: #fff !important;
}
.error.wf-output-box {
background-color: #da1a1a !important;
color: #fff !important;
}
.warning.wf-output-box {
background-color: #e08f00 !important;
color: #fff !important;
}
.running.wf-output-box {
background-color: #5ed300 !important;
color: #fff !important;
}
.maintenance.wf-output-box,
.hand.wf-output-box {
background-color: #1160b8 !important;
color: #fff !important;
}
.green.wf-output-box {
background-color: #5ed300 !important;
color: #fff !important;
}
.red.wf-output-box {
background-color: #da1a1a !important;
color: #fff !important;
}
.blue.wf-output-box {
background-color: #1160b8 !important;
color: #fff !important;
}
.orange.wf-output-box {
background-color: #e08f00 !important;
color: #fff !important;
}
.brown.wf-output-box {
background-color: #b5651d !important;
color: #fff !important;
}
.yellow.wf-output-box {
background-color: #edd200 !important;
color: #000 !important;
}
/*--------------------------------------------------*/
/* Status colors definitions for wf-switch-gear */
/*--------------------------------------------------*/
/* .wf-switch-transformer .error .wf-switch-transformer-base
.wf-switch-transformer .error .wf-switch-transformer-switch-closed,
.wf-switch-transformer .error .wf-switch-transformer-switch-opened */
.wf-switch-transformer .error *,
.wf-switch-transformer .red * {
stroke: #da1a1a !important;
}
.wf-switch-transformer .error .wf-switch-transformer-box,
.wf-switch-transformer .red .wf-switch-transformer-box {
fill: #ffffff !important;
}
.wf-switch-transformer .critical * {
stroke: #da1a1a !important;
}
.wf-switch-transformer .critical .wf-switch-transformer-box {
fill: #ffffff !important;
}
.wf-switch-transformer .warning *,
.wf-switch-transformer .orange * {
stroke: #e08f00 !important;
}
.wf-switch-transformer .warning .wf-switch-transformer-box,
.wf-switch-transformer .orange .wf-switch-transformer-box {
fill: #ffffff !important;
}
.wf-switch-transformer .running *,
.wf-switch-transformer .green * {
stroke: #5ed300 !important;
}
.wf-switch-transformer .running .wf-switch-transformer-box,
.wf-switch-transformer .green .wf-switch-transformer-box {
fill: #ffffff !important;
}
.wf-switch-transformer .hand *,
.wf-switch-transformer .blue * {
stroke: #1160b8 !important;
}
.wf-switch-transformer .hand .wf-switch-transformer-box,
.wf-switch-transformer .blue .wf-switch-transformer-box {
fill: #ffffff !important;
}
.wf-switch-transformer .maintenance * {
stroke: #1160b8 !important;
}
.wf-switch-transformer .maintenance .wf-switch-transformer-box {
fill: #ffffff !important;
}
.wf-switch-transformer .yellow * {
stroke: #edd200 !important;
}
.wf-switch-transformer .yellow .wf-switch-transformer-box {
fill: #ffffff !important;
}
.wf-switch-transformer .yellow * {
stroke: #edd200 !important;
}
.wf-switch-transformer .yellow .wf-switch-transformer-box {
fill: #ffffff !important;
}
.wf-switch-transformer .brown * {
stroke: #b5651d !important;
}
.wf-switch-transformer .brown .wf-switch-transformer-box {
fill: #ffffff !important;
}
/*--------------------------------------------------*/
/* Status colors definitions for wf-switch-gear */
/*--------------------------------------------------*/
.wf-switch-symbol .error *,
.wf-switch-gear .error * {
stroke: #da1a1a !important;
}
.wf-switch-symbol .error .wf-switch-symbol-box,
.wf-switch-symbol .error .wf-switch-symbol-box-fuse,
.wf-switch-symbol .error .wf-fuse,
.wf-switch-gear .error .wf-switch-gear-box,
.wf-switch-gear .error .wf-switch-gear-box-fuse,
.wf-switch-gear .error .wf-fuse {
fill: #ffffff !important;
}
.wf-switch-gear .critical *,
.wf-switch-symbol .critical *
{
stroke: #da1a1a!important;
}
.wf-switch-symbol .critical .wf-switch-symbol-box,
.wf-switch-symbol .critical .wf-switch-symbol-box-fuse,
.wf-switch-symbol .critical .wf-fuse,
.wf-switch-gear .critical .wf-switch-gear-box,
.wf-switch-gear .critical .wf-switch-gear-box-fuse,
.wf-switch-gear .critical .wf-fuse {
fill: #ffffff !important;
}
.wf-switch-symbol .warning *,
.wf-switch-gear .warning * {
stroke: #e08f00 !important;
}
.wf-switch-symbol .warning .wf-switch-symbol-box,
.wf-switch-symbol .warning .wf-switch-symbol-box-fuse,
.wf-switch-symbol .warning .wf-fuse,
.wf-switch-gear .warning .wf-switch-gear-box,
.wf-switch-gear .warning .wf-switch-gear-box-fuse,
.wf-switch-gear .warning .wf-fuse {
fill: #ffffff !important;
}
.wf-switch-symbol .running *,
.wf-switch-gear .running * {
stroke: #5ed300 !important;
}
.wf-switch-symbol .running .wf-switch-symbol-box,
.wf-switch-symbol .running .wf-switch-symbol-box-fuse,
.wf-switch-symbol .running .wf-fuse,
.wf-switch-gear .running .wf-switch-gear-box,
.wf-switch-gear .running .wf-switch-gear-box-fuse,
.wf-switch-gear .running .wf-fuse {
fill: #ffffff !important;
}
.wf-switch-symbol .hand *,
.wf-switch-gear .hand * {
stroke: #1160b8 !important;
}
.wf-switch-symbol .hand .wf-switch-symbol-box,
.wf-switch-symbol .hand .wf-switch-symbol-box-fuse,
.wf-switch-symbol .hand .wf-fuse,
.wf-switch-gear .hand .wf-switch-gear-box,
.wf-switch-gear .hand .wf-switch-gear-box-fuse,
.wf-switch-gear .hand .wf-fuse {
fill: #ffffff !important;
}
.wf-switch-gear .maintenance *,
.wf-switch-symbol .maintenance * {
stroke: #1160b8 !important;
}
.wf-switch-symbol .maintenance .wf-switch-symbol-box,
.wf-switch-symbol .maintenance .wf-switch-symbol-box-fuse,
.wf-switch-symbol .maintenance .wf-fuse,
.wf-switch-gear .maintenance .wf-switch-gear-box,
.wf-switch-gear .maintenance .wf-switch-gear-box-fuse,
.wf-switch-gear .maintenance .wf-fuse {
fill: #ffffff !important;
}
.wf-switch-gear .red *,
.wf-switch-symbol .red * {
stroke: #da1a1a !important;
}
.wf-switch-symbol .red .wf-switch-symbol-box,
.wf-switch-symbol .red .wf-switch-symbol-box-fuse,
.wf-switch-symbol .red .wf-fuse,
.wf-switch-gear .red .wf-switch-gear-box,
.wf-switch-gear .red .wf-switch-gear-box-fuse,
.wf-switch-gear .red .wf-fuse {
fill: #ffffff !important;
}
.wf-switch-symbol .green *,
.wf-switch-gear .green * {
stroke: #5ed300 !important;
}
.wf-switch-symbol .green .wf-switch-symbol-box,
.wf-switch-symbol .green .wf-switch-symbol-box-fuse,
.wf-switch-symbol .green .wf-fuse,
.wf-switch-gear .green .wf-switch-gear-box,
.wf-switch-gear .green .wf-switch-gear-box-fuse,
.wf-switch-gear .green .wf-fuse {
fill: #ffffff;
}
.wf-switch-symbol .blue *,
.wf-switch-gear .blue * {
stroke: #1160b8 !important;
}
.wf-switch-symbol .blue .wf-switch-symbol-box,
.wf-switch-symbol .blue .wf-switch-symbol-box-fuse,
.wf-switch-symbol .blue .wf-fuse,
.wf-switch-gear .blue .wf-switch-gear-box,
.wf-switch-gear .blue .wf-switch-gear-box-fuse,
.wf-switch-gear .blue .wf-fuse {
fill: #ffffff !important;
}
.wf-switch-symbol .orange *,
.wf-switch-gear .orange * {
stroke: #e08f00 !important;
}
.wf-switch-symbol .orange .wf-switch-symbol-box,
.wf-switch-symbol .orange .wf-switch-symbol-box-fuse,
.wf-switch-symbol .orange .wf-fuse,
.wf-switch-gear .orange .wf-switch-gear-box,
.wf-switch-gear .orange .wf-switch-gear-box-fuse,
.wf-switch-gear .orange .wf-fuse {
fill: #ffffff !important;
}
.wf-switch-symbol .yellow *,
.wf-switch-gear .yellow * {
stroke: #edd200 !important;
}
.wf-switch-symbol .yellow .wf-switch-symbol-box,
.wf-switch-symbol .yellow .wf-switch-symbol-box-fuse,
.wf-switch-symbol .yellow .wf-fuse,
.wf-switch-gear .yellow .wf-switch-gear-box,
.wf-switch-gear .yellow .wf-switch-gear-box-fuse,
.wf-switch-gear .yellow .wf-fuse {
fill: #ffffff !important;
}
.wf-switch-symbol .brown *,
.wf-switch-gear .brown * {
stroke: #b5651d !important;
}
.wf-switch-symbol .brow .wf-switch-symbol-box,
.wf-switch-symbol .brow .wf-switch-symbol-box-fuse,
.wf-switch-symbol .brow .wf-fuse,
.wf-switch-gear .brow .wf-switch-gear-box,
.wf-switch-gear .brow .wf-switch-gear-box-fuse,
.wf-switch-gear .brow .wf-fuse {
fill: #ffffff !important;
}
/*---------------------------------------------
Visibility and opacity modifiers
---------------------------------------------*/
.hidden {
visibility: hidden !important;
}
.visible {
visibility: visible !important;
}
.opacity-0 {
opacity: 0;
}
.opacity-25 {
opacity: .25;
}
.opacity-50 {
opacity: .5;
}
.opacity-75 {
opacity: .75;
}
.opacity-100 {
opacity: 1;
}
/*---------------------------------------------
Background image behavior and position modifiers
---------------------------------------------*/
.background-cover {
background-size: cover !important;
background-position: center center;
}
.background-contain {
background-size: contain !important;
background-position: center center;
}
.background-no-repeat {
background-repeat: no-repeat;
}
.background-x-repeat {
background-repeat: repeat-x;
}
.background-y-repeat {
background-repeat: repeat-y;
}
/*---------------------------------------------
Cursor and pointer events modifiers
---------------------------------------------*/
.cursor-hand {
cursor: pointer;
}
.has-pointer-events{
pointer-events: all;
}
.has-no-pointer-events,
.has-no-authorization {
pointer-events: none;
}
.clickable {
cursor: pointer;
}
/*---------------------------------------------
Border modifiers
---------------------------------------------*/
.has-border,
.b-a {
border: 1px solid #ccc;
}
.has-border-bottom,
.b-b {
border-bottom: 1px solid #ccc;
}
.has-border-top,
.b-t {
border-top: 1px solid #ccc;
}
.b-l {
border-left: 1px solid #ccc;
}
.b-r {
border-right: 1px solid #ccc;
}
.b-a-0 {
border: none !important;
box-shadow: none !important;
}
.border-radius-50,
.border-radius-round {
border-radius: 50%;
}
/*---------------------------------------------
Typography modifiers
---------------------------------------------*/
.font-weight-bold {
font-weight: bold;
}
.font-weight-bolder {
font-weight: bolder;
}
.text-overflow {
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.word-wrap-break-word {
word-wrap: break-word;
}
.nowrap {
white-space: nowrap;
}
/* TODO REVIEW */
.has-shadow {
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
}
.line-heigh-1 {
line-height: 1;
}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently not supported by any browser */
}
.draggable {
cursor: move;
}
.dragging.draggable {
cursor: move;
display: inherit;
background-color: rgba(34, 116, 172,.95);
color: #ffffff;
opacity: .9;
-moz-animation: pulse 1s infinite;
-o-animation: pulse 1s infinite;
-webkit-animation: pulse 1s infinite;
animation: pulse 1s infinite;
}
.no-after-content:after {
content: none !important;
}
.no-before-content:before {
content: none !important;
}
/* DEPRECATED CLASS NAMES */
.v-orientation > *{
display: block;
}
.h-orientation > *{
display: inline-block;
}
.h-centered,
.centered {
margin: 0 auto;
}
.absolute.h-centered,
.absolute.centered {
left: 50%;
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.v-centered {
margin-top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.center-horizontal {
margin: 0 auto;
}
.center-vertical,
.vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.scroll-x {
overflow-x: auto;
max-width: 100%;
}
.scroll-y {
overflow-y: auto;
max-width: 100%;
}
/*---------------------------------------------
Animations related modifiers
---------------------------------------------*/
.wf-animation-duration-05s {
animation-duration: 0.5s;
}
.wf-animation-duration-075s {
animation-duration: 0.75s;
}
.wf-animation-duration-1s {
animation-duration: 1s;
}
.wf-animation-duration-2s {
animation-duration: 2s;
}
.wf-animation-duration-4s {
animation-duration: 4s;
}
.wf-animation-duration-6s {
animation-duration: 6s;
}
.wf-animation-duration-8s {
animation-duration: 8s;
}
.wf-animation-duration-10s {
animation-duration: 10s;
}
.wf-animation-count-infinite {
animation-iteration-count: infinite;
}
.wf-animation-count-1 {
animation-iteration-count: 1;
}
.wf-animation-count-2 {
animation-iteration-count: 2;
}
.wf-animation-count-3 {
animation-iteration-count: 3;
}
.wf-animation-count-4 {
animation-iteration-count: 4;
}
.wf-animation-count-5 {
animation-iteration-count: 5;
}
.wf-animation-count-10 {
animation-iteration-count: 10;
}
.wf-animation-transition-transform-05s {
transition: transform .5s;
}
.wf-animation-transition-transform-075s {
transition: transform .75s;
}
.wf-animation-transition-transform-1s {
transition: transform 1s;
}
.wf-animation-transition-transform-2s {
transition: transform 2s;
}
.wf-animation-transition-transform-3s {
transition: transform 3s;
}
.wf-animation-transition-transform-4s {
transition: transform 4s;
}
.wf-animation-transition-transform-5s {
transition: transform 5s;
}
/*---------------------------------------------
Animations delay related modifiers
---------------------------------------------*/
.animated-delay-500 {
-moz-animation-delay: .5s;
-o-animation-delay: .5s;
-webkit-animation-delay: .5s;
animation-delay: .5s;
}
.animated-delay-750 {
-moz-animation-delay: .75s;
-o-animation-delay: .75s;
-webkit-animation-delay: .75s;
animation-delay: .75s;
}
.animated-delay-1000 {
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.animated-delay-1500 {
-moz-animation-delay: 1.5s;
-o-animation-delay: 1.5s;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.animated-delay-2000 {
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
/*---------------------------------------------
Flexbox positioning modifiers
Basics in usage of CSS flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
---------------------------------------------*/
.flexbox {
display: flex !important;
}
.flexbox-row {
flex-direction: row;
}
.flexbox-row-reverse {
flex-direction: row-reverse;
}
.flexbox-column {
flex-direction: column;
}
.flexbox-column-reverse {
flex-direction: column-reverse;
}
.flexbox-row-reverse {
-ms-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
/* Flexbox Wrapping */
.flexbox-wrap {
flex-wrap: wrap;
}
.flexbox-wrap-reverse {
flex-wrap: wrap-reverse;
}
.flexbox-no-wrap {
flex-wrap: nowrap;
}
/* Flexbox horizontal positioning */
.flexbox-h-start,
.flexbox-x-start {
justify-content: flex-start;
}
.flexbox-h-end,
.flexbox-x-end {
justify-content: flex-end;
}
.flexbox-h-center,
.flexbox-x-center {
justify-content: center;
}
.flexbox-h-justified,
.flexbox-x-justified {
justify-content: space-between;
}
/* Flexbox vertical positioning */
.flexbox-v-start,
.flexbox-y-start {
align-items: flex-start;
}
.flexbox-v-end,
.flexbox-y-end {
align-items: flex-end;
}
.flexbox-v-center,
.flexbox-y-center {
align-items: center;
}
.flexbox-v-stretched
.flexbox-y-stretched {
align-items: stretch;
}
/* Flexbox item shrink */
.flex-no-shrink {
flex-shrink: 0;
}
.flexbox-shrink-0 {
flex-shrink: 0;
}
.flexbox-shrink-1 {
flex-shrink: 1;
}
.flexbox-shrink-2 {
flex-shrink: 2;
}
.flexbox-shrink-3 {
flex-shrink: 3;
}
.flexbox-shrink-4 {
flex-shrink: 4;
}
/* Flexbox item grow */
.flex-no-grow {
flex-grow: 0;
}
.flexbox-grow-0 {
flex-grow: 0;
}
.flexbox-grow-1 {
flex-grow: 1;
}
.flexbox-grow-2 {
flex-grow: 2;
}
.flexbox-grow-3 {
flex-grow: 3;
}
.flexbox-grow-4 {
flex-grow: 4;
}
/* Advanced flexbox modifiers */
/* Lets the item size be dependent to its width and height but also to stretch it over available space in its parent container */
.flex-auto {
flex: 1 1 auto;
}
.flexbox-pull-right{
margin-left: auto;
}
/*---------------------------------------------
Margins modifiers
---------------------------------------------*/
/* Small sized Margins */
.m-a-sm {
margin: 5px !important;
}
.m-t-sm {
margin-top: 5px !important;
}
.m-r-sm {
margin-right: 5px !important;
}
.m-b-sm {
margin-bottom: 5px !important;
}
.m-l-sm {
margin-left: 5px !important;
}
.m-x-sm {
margin-right: 5px !important;
margin-left: 5px !important;
}
.m-y-sm {
margin-top: 5px !important;
margin-bottom: 5px !important;
}
/* Default sized Margins */
.m-a {
margin: 10px !important;
}
.m-t {
margin-top: 10px !important;
}
.m-r {
margin-right: 10px !important;
}
.m-b {
margin-bottom: 10px !important;
}
.m-l {
margin-left: 10px !important;
}
.m-x {
margin-right: 10px !important;
margin-left: 10px !important;
}
.m-y {
margin-top: 10px !important;
margin-bottom: 10px !important;
}
/* Medium sized Margins */
.m-a-md {
margin: 15px !important;
}
.m-t-md {
margin-top: 15px !important;
}
.m-r-md {
margin-right: 15px !important;
}
.m-b-md {
margin-bottom: 15px !important;
}
.m-l-md {
margin-left: 15px !important;
}
.m-x-md {
margin-right: 15px !important;
margin-left: 15px !important;
}
.m-y-md {
margin-top: 15px !important;
margin-bottom: 15px !important;
}
/* Large sized margin */
.m-a-lg {
margin: 30px !important;
}
.m-t-lg {
margin-top: 30px !important;
}
.m-r-lg {
margin-right: 30px !important;
}
.m-b-lg {
margin-bottom: 30px !important;
}
.m-l-lg {
margin-left: 30px !important;
}
.m-x-lg {
margin-right: 30px !important;
margin-left: 30px !important;
}
.m-y-lg {
margin-top: 30px !important;
margin-bottom: 30px !important;
}
/* XLarge sized margin */
.m-a-xlg {
margin: 45px !important;
}
.m-t-xlg {
margin-top: 45px !important;
}
.m-r-xlg {
margin-right: 45px !important;
}
.m-b-xlg {
margin-bottom: 45px !important;
}
.m-l-xlg {
margin-left: 45px !important;
}
.m-x-xlg {
margin-right: 45px !important;
margin-left: 60px !important;
}
.m-y-xlg {
margin-top: 45px !important;
margin-bottom: 60px !important;
}
/* XXLarge sized margin */
.m-a-xxlg {
margin: 60px !important;
}
.m-t-xxlg {
margin-top: 60px !important;
}
.m-r-xxlg {
margin-right: 60px !important;
}
.m-b-xxlg {
margin-bottom: 60px !important;
}
.m-l-xxlg {
margin-left: 60px !important;
}
.m-x-xxlg {
margin-right: 60px !important;
margin-left: 60px !important;
}
.m-y-xxlg {
margin-top: 60px !important;
margin-bottom: 60px !important;
}
/* 3XLarge sized margin */
.m-a-3xlg {
margin: 75px !important;
}
.m-t-3xlg {
margin-top: 75px !important;
}
.m-r-3xlg {
margin-right: 75px !important;
}
.m-b-3xlg {
margin-bottom: 75px !important;
}
.m-l-3xlg {
margin-left: 75px !important;
}
.m-x-3xlg {
margin-right: 75px !important;
margin-left: 60px !important;
}
.m-y-3xlg {
margin-top: 75px !important;
margin-bottom: 60px !important;
}
/* Spacing modifiers - Margins */
.m-a-0 {
margin: 0 !important;
}
.m-t-0 {
margin-top: 0 !important;
}
.m-r-0 {
margin-right: 0 !important;
}
.m-b-0 {
margin-bottom: 0 !important;
}
.m-l-0 {
margin-left: 0 !important;
}
.m-x-0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.m-y-0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Advanced modifiers - auto margins */
.m-l-auto {
margin-left: auto;
}
.m-r-auto {
margin-right: auto;
}
/*---------------------------------------------
Paddings modifiers
---------------------------------------------*/
/* Small sized paddings */
.p-a-sm {
padding: 5px !important;
}
.p-t-sm {
padding-top: 5px !important;
}
.p-r-sm {
padding-right: 5px !important;
}
.p-b-sm {
padding-bottom: 5px !important;
}
.p-l-sm {
padding-left: 5px !important;
}
.p-x-sm {
padding-right: 5px !important;
padding-left: 5px !important;
}
.p-y-sm {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
/* Default sized paddings */
.p-a {
padding: 10px !important;
}
.p-t {
padding-top: 10px !important;
}
.p-r {
padding-right: 10px !important;
}
.p-b {
padding-bottom: 10px !important;
}
.p-l {
padding-left: 10px !important;
}
.p-x {
padding-right: 10px !important;
padding-left: 10px !important;
}
.p-y {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
/* Medium sized paddings */
.p-a-md {
padding: 15px !important;
}
.p-t-md {
padding-top: 15px !important;
}
.p-r-md {
padding-right: 15px !important;
}
.p-b-md {
padding-bottom: 15px !important;
}
.p-l-md {
padding-left: 15px !important;
}
.p-x-md {
padding-right: 15px !important;
padding-left: 15px !important;
}
.p-y-md {
padding-top: 15px !important;
padding-bottom: 15px !important;
}
/* Spacing modifiers - Padding */
.p-a-0 {
padding: 0 !important;
}
.p-t-0 {
padding-top: 0 !important;
}
.p-r-0 {
padding-right: 0 !important;
}
.p-b-0 {
padding-bottom: 0 !important;
}
.p-l-0 {
padding-left: 0 !important;
}
.p-x-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.p-y-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Large sized paddings */
.p-a-lg {
padding: 30px !important;
}
.p-t-lg {
padding-top: 30px !important;
}
.p-r-lg {
padding-right: 30px !important;
}
.p-b-lg {
padding-bottom: 30px !important;
}
.p-l-lg {
padding-left: 30px !important;
}
.p-x-lg {
padding-right: 30px !important;
padding-left: 30px !important;
}
.p-y-lg {
padding-top: 30px !important;
padding-bottom: 30px !important;
}
/* XLarge sized paddings */
.p-a-xlg {
padding: 45px !important;
}
.p-t-xlg {
padding-top: 45px !important;
}
.p-r-xlg {
padding-right: 45px !important;
}
.p-b-xlg {
padding-bottom: 45px !important;
}
.p-l-xlg {
padding-left: 45px !important;
}
.p-x-xlg {
padding-right: 45px !important;
padding-left: 45px !important;
}
.p-y-xlg {
padding-top: 45px !important;
padding-bottom: 45px !important;
}
/* XXLarge sized paddings */
.p-a-xxlg {
padding: 60px !important;
}
.p-t-xxlg {
padding-top: 60px !important;
}
.p-r-xxlg {
padding-right: 60px !important;
}
.p-b-xxlg {
padding-bottom: 60px !important;
}
.p-l-xxlg {
padding-left: 60px !important;
}
.p-x-xxlg {
padding-right: 60px !important;
padding-left: 60px !important;
}
.p-y-xxlg {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
/* 3XLarge sized paddings */
.p-a-3xlg {
padding: 75px !important;
}
.p-t-3xlg {
padding-top: 75px !important;
}
.p-r-3xlg {
padding-right: 75px !important;
}
.p-b-3xlg {
padding-bottom: 75px !important;
}
.p-l-3xlg {
padding-left: 75px !important;
}
.p-x-3xlg {
padding-right: 75px !important;
padding-left: 75px !important;
}
.p-y-3xlg {
padding-top: 75px !important;
padding-bottom: 75px !important;
}
/*---------------------------------------------
Positioning and alignment modifiers
---------------------------------------------*/
.relative {
position: relative !important;
}
.absolute {
position: absolute !important;
}
.block {
display: block !important;
}
.fluid {
width: 100% !important;
}
.inline {
display: inline !important;
}
.inline-block,
.inlineblock {
display: inline-block !important;
}
.fixed-top {
position: fixed;
right: 0;
left: 0;
top: 0;
}
.stretched,
.wf-embed-stretch {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
height: 100%;
width: 100%;
}
.overflow-auto {
overflow: auto !important;
}
.overflow-visible {
overflow: visible !important;
}
.overflow-hidden {
overflow: hidden !important;
}
.overflow-scroll {
overflow: scroll !important;
}
.overflow-x-scroll {
overflow-x: scroll !important;
}
.overflow-y-scroll {
overflow-y: auto !important;
}
.overflow-x-hidden {
overflow-x: hidden !important;
}
.overflow-y-hidden {
overflow-y: hidden !important;
}
.overflow-x-ellipsis {
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap !important;
}
/*---------------------------------------------
Sizing modifiers
---------------------------------------------*/
.wf-1x {
font-size: 14px;
width: 14px;
height: 14px;
line-height: 14px;
}
.wf-2x {
font-size: 28px;
width: 28px;
height: 28px;
line-height: 28px;
}
.wf-3x {
font-size: 42px;
width: 42px;
height: 42px;
line-height: 42px;
}
.wf-4x {
font-size: 56px;
width: 56px;
height: 56px;
line-height: 56px;
}
.wf-5x {
font-size: 70px;
width: 70px;
height: 70px;
line-height: 70px;
}
.wf-6x {
font-size: 84px;
width: 84px;
height: 84px;
line-height: 84px;
}
.wf-7x {
font-size: 98px;
width: 98px;
height: 98px;
line-height: 98px;
}
.wf-8x {
font-size: 112px;
width: 112px;
height: 112px;
line-height: 112px;
}
.wf-9x {
font-size: 126px;
width: 126px;
height: 126px;
line-height: 126px;
}
.wf-10x {
font-size: 140px;
width: 140px;
height: 140px;
line-height: 140px;
}
/*---------------------------------------------
Width modifiers
---------------------------------------------*/
.wf-width-xs {
width: 120px;
}
.wf-width-sm {
width: 185px
}
.wf-width-md {
width: 250px;
}
.wf-width-lg {
width: 380px;
}
.wf-width-xlg {
width:510px;
}
.wf-width-2xlg,
.wf-width-xxlg {
width:640px;
}
.wf-width-3xlg {
width:770px;
}
.wf-max-width-xs {
width: 120px;
}
.wf-max-width-sm {
max-width: 185px
}
.wf-max-width-md {
max-width: 250px;
}
.wf-max-width-lg {
max-width: 380px;
}
.wf-max-width-xlg {
max-width:510px;
}
.wf-max-width-2xlg,
.wf-max-width-xxlg {
max-width:640px;
}
.wf-max-width-3xlg {
max-width:770px;
}
/*---------------------------------------------
Transformations modifiers
---------------------------------------------*/
.flip-x,
.invert-x {
-moz-transform: scaleX(-1);
-ms-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.flip-y,
.invert-y {
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
/*---------------------------------------------
Rotation modifiers
---------------------------------------------*/
.wf-r-0 {
transform: rotate(0deg);
}
.wf-r-45 {
transform: rotate(45deg);
}
.wf-r-90 {
transform: rotate(90deg);
}
.wf-r-135 {
transform: rotate(135deg);
}
.wf-r-180 {
transform: rotate(180deg);
}
.wf-r-225 {
transform: rotate(225deg);
}
.wf-r-270 {
transform: rotate(270deg);
}
.wf-r-315 {
transform: rotate(315deg);
}
.wf-r-360 {
transform: rotate(359.99deg);
}
.wf-n {
display: inline-block;
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.wf-s {
display: inline-block;
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.wf-w {
display: inline-block;
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.wf-ne {
display: inline-block;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.wf-se {
display: inline-block;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.wf-nw {
display: inline-block;
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.wf-sw {
display: inline-block;
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
/*---------------------------------------------
SmartEditor layout template V 2.x.x.x
---------------------------------------------*/
/* #region HEADER STYLES */
#wf-header-wrapper {
width: 100% !important;
border: none;
border-bottom: 1px solid #c0c0c0;
height: 60px !important;
}
#wf-header-wrapper #wb_wf-navigation-menu {
width: 100% !important;
position: relative !important;
left: 0px !important;
top: 0px !important;
}
#wf-header-action-bar {
top: 1px;
height: 65px;
bottom: auto;
width: auto !important;
}
#wf-header-action-bar>* {
position: relative !important;
float: right;
top: auto !important;
left: auto !important;
}
#wb_wf-header-language-btn {
width: auto !important;
min-width: 100px;
}
#wb_wf-header-login-btn {
width: auto !important;
min-width: 90px;
}
#wb_wf-header-login-btn .wf-button .dropdown-toggle {
box-shadow: none;
display: flex;
align-items: center;
justify-content: center;
}
#wb_wf-header-login-btn .wf-button .dropdown-toggle .caret {
margin-left: 5px;
}
#wf-title-bar {
position: absolute !important;
top: 60px !important;
left: 85px !important;
width: auto !important;
right: 0;
border: 1px #DCDCDC solid;
border-width: 0px 0px 1px 0px !important;
}
#wb_wf-main-title {
width: auto!important;
height: auto!important;
}
#wf-main-title {
position: relative!important;
width: auto!important;
}
#wf-main-title>* {
width: 100% !important;
}
/* #endregion */
/* #region SIDEBAR STYLES */
#wf-sidebar-wrapper {
border-right: 1px solid #C0C0C0;
overflow-y: visible !important;
overflow-x: hidden !important;
box-shadow: 5px -10px 20px rgba(0, 0, 0, 0.1);
bottom: 30px !important;
}
#wf-sidebar-values-wrapper {
left: 85px !important;
top: 60px !important;
padding: 15px 15px 15px 15px;
border-right: 1px solid #C0C0C0;
bottom: 30px !important;
background-color: #2185C4;
}
#wf-sidebar-values-wrapper>* {
position: relative !important;
display: block !important;
top: auto !important;
left: auto !important;
margin-bottom: 15px;
width: 100%;
}
#wf-sidebar-values-wrapper~#wf-container-fluid {
left: 350px !important;
}
/*#wf-sidebar-wrapper>div,
#wf-sidebar-wrapper>div a {
height: 65px !important;
font-size: 11px !important;
position: relative !important;
top: auto !important;
}*/
/* #endregion */
/* #region FOOTER STYLES */
#wf-footer-wrapper {
width: auto !important;
border: none;
border-top: 1px solid #C0C0C0;
background-color: #ffffff !important;
right: 0;
}
#wf-footer-content {
top: 0 !important;
left: 0 !important;
bottom: 0 !important;
right: 0 !important;
width: 100% !important;
}
#wb_wf-footer-watchdog {
left: auto !important;
right: 0px;
}
#wf-footer-datetime {
left: auto !important;
right: 40px;
}
/*#wf-footer-login {
left: auto !important;
right: 140px;
}*/
#wb_wf-footer-login {
left: auto!important;
right: 130px;
border-right: 1px solid #E0E0DF!important;
}
/* #endregion */
/* #region LAYOUT CONTAINERS */
#wf-layout-wrapper {
bottom: 30px !important;
}
#wf-scroll-layer {
/*left: 85px !important;
top: 60px !important;*/
width: auto !important;
height: auto !important;
right: 0;
bottom: 0px !important;
padding: 0;
overflow: auto;
padding-bottom: 15px;
}
#wf-scroll-layer>* {
position: relative !important;
display: block !important;
top: auto !important;
left: auto !important;
float: left;
margin: 15px 0 0 15px;
}
#wf-container-fluid {
/* left: 85px !important;
top: 60px !important; */
width: auto !important;
height: auto !important;
right: 0;
bottom: 0;
overflow: auto;
}
/* #wf-sidebar-values-wrapper~#wf-container-fluid {
left: 350px !important;
} */
#wf-container-fluid>* {
float: left !important;
margin: 1% !important;
top: auto !important;
left: auto !important;
position: relative !important;
}
[id*='wf-col-100'],
[id*='wf-column-100'] {
width: 98% !important;
}
[id*='wf-col-75'],
[id*='wf-column-75'] {
width: 73% !important;
}
[id*='wf-col-50'],
[id*='wf-column-50'] {
width: 48% !important;
}
[id*='wf-col-33'],
[id*='wf-column-33'] {
width: 31% !important;
}
[id*='wf-col-25'],
[id*='wf-column-25'] {
width: 23% !important;
}
/* Set nested containers to stretch to whole width */
[id*='wf-col-100']>[id*='wf-col-100'],
[id*='wf-col-75']>[id*='wf-col-75'],
[id*='wf-col-50']>[id*='wf-col-50'],
[id*='wf-col-33']>[id*='wf-col-33'],
[id*='wf-col-25']>[id*='wf-col-25'],
[id*='wf-column-100']>[id*='wf-column-100'],
[id*='wf-column-75']>[id*='wf-column-75'],
[id*='wf-column-50']>[id*='wf-column-50'],
[id*='wf-column-33']>[id*='wf-column-33'],
[id*='wf-column-25']>[id*='wf-column-25'] {
width: 100% !important;
margin: 0;
float: none !important;
}
[id*='m-b-0'],
#wf-container-fluid>[id*='m-b-0'] {
margin-bottom: 0 !important;
}
[id*='m-t-0'],
#wf-container-fluid>[id*='m-t-0'] {
margin-top: 0 !important;
}
@media (max-width: 880px) {
#wf-container-fluid>[id*='wf-col-100'],
#wf-container-fluid>[id*='wf-col-75'],
#wf-container-fluid>[id*='wf-col-50'],
#wf-container-fluid>[id*='wf-col-33'],
#wf-container-fluid>[id*='wf-col-25'],
#wf-container-fluid>[id*='wf-column-100'],
#wf-container-fluid>[id*='wf-column-75'],
#wf-container-fluid>[id*='wf-column-50'],
#wf-container-fluid>[id*='wf-column-33'],
#wf-container-fluid>[id*='wf-column-25'] {
width: 98% !important;
float: none !important;
}
}
/* #endregion */
/* Optional styles */
#wf-header-wrapper a,
#wf-sidebar-wrapper a {
transition: all .5s;
}
.panel-title>span {
line-height: 1.19;
}
.wf-panel .wf-panel-toolbar {
margin-top: -8px;
}
/* #region Media Queries */
@media (max-width: 960px) {
#wf-main-title,
#wf-sub-title {
font-size: 14px;
font-weight: bold;
}
}
@media (max-width: 480px) {
.wf-pan-controlbar {
display: none;
}
#wf-header-action-bar>* {
display: none !important;
}
#wf-header-action-bar>[id*="login-btn"] {
display: block !important;
}
}
@media (max-height: 710px) {
/*#wf-sidebar-wrapper>div:first-child {
height: 95px !important;
}*/
#wf-sidebar-logo {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: auto;
max-height: 95px;
margin: 0 auto;
}
#wf-sidebar-wrapper>div a {
height: 65px !important;
font-size: 11px !important;
position: relative !important;
top: auto !important;
}
#wf-sidebar-wrapper>div a i.icon {
font-size: 24px !important
}
}
/* #endregion */
/*---------------------------------------------
SmartEditor layout template V 1.x.x.x
---------------------------------------------*/
/* #region HEADER STYLES */
#ux-header-wrapper {
width: 100% !important;
border-bottom: 1px solid #c0c0c0;
}
#ux-header-action-bar {
top: 1px;
height: 65px;
bottom: auto;
width: auto !important;
}
#ux-header-action-bar > * {
position: relative !important;
float: right;
top: auto !important;
left: auto !important;
}
#wb_ux-header-language-btn {
width: auto !important;
min-width: 100px;
}
#wb_ux-header-login-btn {
width: auto !important;
min-width: 90px;
}
#wb_ux-header-login-btn .wf-button .dropdown-toggle {
box-shadow: none;
display: flex;
align-items: center;
justify-content: center;
}
#wb_ux-header-login-btn .wf-button .dropdown-toggle .caret {
margin-left: 5px;
}
#ux-main-title {}
#ux-main-title>* {
width: 100% !important;
}
/* #endregion */
/* #region SIDEBAR STYLES */
#ux-sidebar-wrapper {
border-right: 1px solid #C0C0C0;
overflow-y: visible !important;
overflow-x: hidden !important;
box-shadow: 5px -10px 20px rgba(0, 0, 0, 0.1);
}
#ux-sidebar-values-wrapper {
left: 95px !important;
top: 65px !important;
padding: 15px 15px 15px 15px;
border-right: 1px solid #C0C0C0;
bottom: 32px !important;
background-color: #2185C4;
}
#ux-sidebar-values-wrapper>* {
position: relative !important;
display: block !important;
top: auto !important;
left: auto !important;
margin-bottom: 15px;
width: 100%;
}
#ux-sidebar-values-wrapper~#ux-container-fluid {
left: 350px !important;
}
/* #endregion */
/* #region FOOTER STYLES */
#ux-footer-wrapper {
width: auto !important;
border: none;
border-top: 1px solid #C0C0C0;
background-color: #ffffff !important;
right: 0;
}
#ux-footer-content {
top: 0 !important;
left: 0 !important;
bottom: 0 !important;
right: 0 !important;
width: 100% !important;
}
#wb_ux-footer-watchdog {
left: auto !important;
right: 0px;
}
#ux-footer-datetime {
left: auto !important;
right: 40px;
}
/* #endregion */
/* #region LAYOUT CONTAINERS */
#ux-layout-wrapper {
bottom: 32px !important;
background-position: left 61px;
}
#ux-container-scroll {
left: 95px !important;
top: 66px !important;
width: auto !important;
height: auto !important;
right: 0;
bottom: 0;
padding: 0;
overflow: auto;
}
#ux-container-scroll>* {
position: relative !important;
display: block !important;
top: auto !important;
left: auto !important;
float: left;
margin: 15px 0 0 15px;
}
#ux-container-fluid {
top: 66px !important;
width: auto !important;
height: auto !important;
right: 0;
bottom: 0;
overflow: auto;
}
#ux-sidebar-values-wrapper~#ux-container-fluid {
left: 350px !important;
}
#ux-container-fluid>* {
float: left !important;
margin: 1% !important;
top: auto !important;
left: auto !important;
position: relative !important;
}
[id*='ux-column-100'] {
width: 98% !important;
}
[id*='ux-column-75'] {
width: 73% !important;
}
[id*='ux-column-50'] {
width: 48% !important;
}
[id*='ux-column-33'] {
width: 31% !important;
}
[id*='ux-column-25'] {
width: 23% !important;
}
/* Set nested containers to stretch to whole width */
[id*='ux-column-100']>[id*='ux-column-100'],
[id*='ux-column-75']>[id*='ux-column-75'],
[id*='ux-column-50']>[id*='ux-column-50'],
[id*='ux-column-33']>[id*='ux-column-33'],
[id*='ux-column-25']>[id*='ux-column-25'] {
width: 100% !important;
margin: 0;
float: none !important;
}
[id*='m-b-0'],
#ux-container-fluid>[id*='m-b-0'] {
margin-bottom: 0 !important;
}
[id*='m-t-0'],
#ux-container-fluid>[id*='m-t-0'] {
margin-top: 0 !important;
}
@media (max-width: 880px) {
#ux-container-fluid>[id*='ux-column-100'],
#ux-container-fluid>[id*='ux-column-75'],
#ux-container-fluid>[id*='ux-column-50'],
#ux-container-fluid>[id*='ux-column-33'],
#ux-container-fluid>[id*='ux-column-25'] {
width: 98% !important;
float: none !important;
}
}
/* #endregion */
/* Optional styles */
#ux-header-wrapper a,
#ux-sidebar-wrapper a {
transition: all .5s;
}
.panel-title>span {
line-height: 1.19;
}
.wf-panel .wf-panel-toolbar {
margin-top: -8px;
}
/* #region Media Queries */
@media (max-width: 960px) {
#ux-main-title,
#ux-sub-title {
font-size: 14px;
font-weight: bold;
}
}
@media (max-width: 480px) {
.wf-pan-controlbar {
display: none;
}
#ux-header-action-bar>* {
display: none !important;
}
#ux-header-action-bar>[id*="login-btn"] {
display: block !important;
}
}
@media (max-height: 710px) {
#ux-sidebar-wrapper>div:first-child {
height: 95px !important;
}
#ux-sidebar-logo {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: auto;
max-height: 95px;
margin: 0 auto;
}
#ux-sidebar-wrapper>div,
#ux-sidebar-wrapper>div a {
height: 65px !important;
font-size: 11px !important;
position: relative !important;
top: auto !important;
;
}
#ux-sidebar-wrapper>div a i.icon {
font-size: 18px !important
}
}
/* #endregion */
/*# sourceMappingURL=custom.bundle.css.map */