@font-face {
    font-family: "Siemens Sans";
    src: url("../fonts/sisan03.woff2") format("woff2"), url("../fonts/sisan03.woff") format("woff");
    font-weight: normal;
    font-style: normal
}

html,
body {
    -webkit-font-smoothing: antialiased;
    animation: fadeIn ease-in 1;
    animation-delay: 0;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
    color: #333;
    font-family: "Siemens Sans", "RobotoDraft", "Roboto", sans-serif;
    font-size: 1em;
    line-height: 1em;
    opacity: 0;
}

main {
    min-height: 3rem;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 99999999;
    background-color: rgba(0, 0, 0, 0.67);
    display: none;
}

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

hr {
    border-top: 1px solid #DCDAE1;
    height: 1px;
    margin: 0;
}

.chart {
    margin: 20px 10px 20px 10px;
    overflow: hidden;
    position: relative;
}

.archivechart {
    margin: 6px 10px 20px 10px;
    overflow: hidden;
    position: relative;
}

.chart-cover {
    height: 48px;
    left: calc(50% - 8px);
    margin-top: -48px;
    position: absolute;
    top: 50%;
    width: 48px;
    z-index: 9999;
}

.pac-logo {
    padding-top: 4px;
    padding-left: 13px;
}

.pac-drawer {
    border: none;
    overflow-y: visible;
    /*NNN*/
    display: block
}

/* iOS Safari specific workaround */

.pac-drawer .mdl-menu__container {
    z-index: -1;
}

.pac-drawer .pac-navigation {
    z-index: -2;
}

.mdl-layout__drawer .mdl-navigation {
    padding-top: 1px;
}

.mdl-layout__drawer.is-visible~.mdl-layout__content.mdl-layout__content {
    overflow: auto;
}

.pac-content {
    max-width: 1280px;
}

.mdl-menu {
    clip: initial;
}

.mdl-section {
    display: block;
}


/* New dc styles */

.mdl-card__widget-text {
    color: rgba(0, 0, 0, .54);
    font-size: 13px;
    line-height: 14px;
    overflow: hidden;
    padding: 8px;
    width: 90%
}

.mdl-card__widget-cell {
    padding-left: 10px;
    width: 50px;
}

.three_rows {
    height: 146px;
}

.four_rows {
    height: 194px;
}

.widget {
    display: table;
    min-height: 96px;
    width: 100%;
}

.widget.three_rows .widget-values {
    cursor: default;
}

.widget .chart-container {
    display: table-cell;
    height: 76px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 80px;
    overflow: hidden;
    /*min-width: 80px;*/
}

.widget .widget-cell {
    display: table-cell;
    height: 76px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    /*min-width: 80px;*/
}

.chart-container {
    padding: 1px;
}

.doughnut-container {
    padding: 0;
    display: inline-block;
    width: 220px;
    transition: all 125ms ease-in-out;
    position: relative;
}

.doughnut-label {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 36px;
    position: absolute;
    width: 100%;
    color: #757575;
    font-size: 14px;
    padding-top: 8px;
}

.widget .widget-values {
    border-left: 1px solid #c2cdd5;
    color: #2d373c;
    display: table-cell;
    font-size: 16px;
    padding-left: 15px;
    vertical-align: middle;
    cursor: move;
    width: auto;
    padding-right: 27px;
    max-width: 120px;
}

.widget .widget-values>span {
    padding-right: 22px;
}

.widget-title-two {
    display: -webkit-box;
    max-height: 38.3px;
    line-height: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.widget-value-title {
    display: -webkit-box;
    max-height: 15px;
    line-height: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
}

.widget-ellipsis {
    display: block;
    display: -webkit-box;
    max-height: 38.3px;
    margin: 0 auto;
    font-size: 16px;
    line-height: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.widget-ellipsis1 {
    display: block;
    display: -webkit-box;
    max-height: 18.5px;
    margin: 0 auto;
    font-size: 16px;
    line-height: normal;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    white-space: nowrap;
}

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.widget .widget-values .bottom-widget {
    margin-top: 10px;
}

.widget .widget-values .bottom-widget .lighter {
    color: #788791;
    font-size: 13px;
}

.widget-ellipsis1.lighter {
    color: #788791;
    font-size: 13px;
    padding-top: 10px;
}

.project-bottom-icon:before {
    content: "\f20f";
    font-size: 14px;
    font-weight: 300;
    color: #788791;
    vertical-align: 0px;
    padding-right: 1px;
    font-family: 'Material Design Icons';
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    word-wrap: normal;
    -moz-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.centerdiv {
    height: 4rem;
    left: calc(50% - 1.5rem);
    margin-top: -2rem;
    position: fixed;
    top: 50%;
    width: 4rem;
    z-index: 9999;
}

.mdl-collapse .mdl-collapse__card-spinner {
    height: 48px;
    left: calc(50% - 8px);
    margin-top: -48px;
    position: absolute;
    top: 50%;
    width: 48px;
    z-index: 9999;
}

.mdl-collapse__spinner-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.67);
    display: none;
}

.mdl-inline-spinner {
    position: absolute;
    top: 10px;
    right: 14px;
    height: 30px;
    width: 30px;
}

.mdl-inline-spinner .mdl-spinner__circle {
    border-width: 3px;
}

.mdl-spinner-value {
    font-size: 11px;
    position: absolute;
    right: 18px;
    top: 16px;
}

.mdl-spinner:not(.mdl-inline-spinner) {
    height: 48px;
    width: 48px;
}

.mdl-spinner__circle {
    border-width: 6px;
}

.mdl-spinner--single-color .mdl-spinner__layer-1 {
    border-color: #41AAAA;
}

.mdl-spinner--single-color .mdl-spinner__layer-2 {
    border-color: #41AAAA;
}

.mdl-spinner--single-color .mdl-spinner__layer-3 {
    border-color: #41AAAA;
}

.mdl-spinner--single-color .mdl-spinner__layer-4 {
    border-color: #41AAAA;
}

.login-error {
    color: red;
}

.mdl-card {
    min-height: 50px;
    width: 100%;
    overflow: inherit;
    /* menus can leave their own box */
    z-index: 1;
    /* Lower z-index means lower position */
}

.mdl-data-table {
    border: none;
    table-layout: fixed;
    white-space: normal;
    font-size: 14px;
}

    .mdl-data-table td {
        border-bottom: 0px solid #fff;
        border-top: 1px solid #c2cdd5;
        cursor: pointer;
    }

.mdl-data-table tr:first-child td {
    border-top: 0px solid #fff;
}

.mdl-data-table__cell--non-numeric.mdl-data-table__cell--non-numeric {
    word-wrap: break-word;
}

.response-table tr td:nth-child(2) {
    width: 45%;
}

dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.48);
}

dialog+.backdrop {
    background: rgba(0, 0, 0, 0.48) !important;
}

.mdl-dialog__actions-straight {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    padding: 8px 3px 6px 8px;
    flex-wrap: nowrap;
}

.mdl-dialog__actions-flex {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    padding: 8px 3px 6px 8px;
    flex: 1 1 0px;
    flex-wrap: wrap;
    gap: 0.5em;
    justify-content: flex-end;
}

.mdl-dialog__title {
    font-size: 1.6rem;
    line-height: 1.6rem;
    padding: 16px 0 16px 14px;
}

.mdl-dialog__content {
    color: #555554;
    padding: 20px 11px 6px;
    line-height: 14px;
    min-height: 30px;
    vertical-align: center;
}

.mdl-dialog__grid_content {
    color: #555554;
    padding: 20px 11px 6px;
    min-height: 30px;
}

.mdl-selectfield__list-option-box ul>li:hover {
    background-color: #cdd9e1;
}

.mdl-selectfield__list-option-box ul>li.is-selected {
    background-color: #dfe6ed;
}

@media print {
    a[href]:after {
        content: none !important;
    }
}

@media (min-width: 840px) {
    .mdl-dialog-login {
        width: 380px;
    }
}

@media (max-width: 840px) {
    .mdl-dialog-login {
        width: 280px;
    }
    .desktop-only {
        visibility: hidden
    }
}

.mdl-dialog-login {
    border: none;
    box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
    width: 380px;
}

.mdl-textfield__label:after {
    background-color: #879baa;
}

.mdl-textfield--floating-label.is-focused .mdl-textfield__label,
.mdl-textfield--floating-label.is-dirty .mdl-textfield__label,
.mdl-textfield--floating-label.has-placeholder .mdl-textfield__label {
    color: #879baa;
}

.mdl-textfield__label {
    color: rgba(0, 0, 0, 0.46);
}

@media (min-width: 40em) {
    .mdl-dialog {
        width: 480px;
    }
    .mdl-dialog__content {
        max-width: 66%;
    }
}

/* Let dialogs scroll, make non-transparent, escape ddls from dialog */
.mdl-dialog {
    overflow: unset !important;
    display: table;
}

.mdl-dialog__content-max {
    max-width: 100% !important;
    padding: 12px 12px;
}

.mdl-dialog__actions {
    padding: 0 8px 0 8px;
}

.mdl-inner-table {
    max-width: 90%;
}

.mdl-inner-table tr td:nth-child(2) {
    width: 50%;
}

.mdl-cell--full {
    padding: 0;
    width: calc(100% - 16px) !important;
}

.mdl-layout__tab-bar-button {
    background-color: #879baa;
}

.mdl-layout__tab-bar-button i {
    color: white;
}

@media screen and (min-width: 480px) {
    .mdl-layout__tab-bar-button {
        display: none;
    }
}

.mdl-layout__tab-bar {
    background-color: #879baa;
}

.mdl-layout .mdl-layout__tab-panel {
    display: none;
}

.mdl-layout.is-upgraded .mdl-layout__tab.is-active:after {
    background: #fff;
    height: 3px;
}

.mdl-layout__drawer .mdl-navigation__link--current {
    background-color: #dfe6ed;
    border-left-color: #005578;
    border-left-width: 5px;
    border-left-style: solid;
}

.mdl-title-button--icon {
    height: 38px;
    min-width: 38px;
    width: 38px;
    margin: 1px 2px;
}

.mdl-button:hover {
    background-color: rgba(158, 158, 158, 0.54);
}

.prev.mdl-button {
    background-color: #c2cdd5;
}

.next.mdl-button {
    background-color: #c2cdd5;
}

/* Truncate button  text on small screens, full text if large enough  */

.mdl-button__truncate {
    right: 0;
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    width: 15px;
    background-image: linear-gradient(to right, rgba(65, 170, 170, 0.2) 0%, #41AAAA 32%);
    color: black;
    font-size: 14px;
    visibility: visible;
}

@media (min-width: 840px) {
    .mdl-button__truncate {
        visibility: hidden;
    }
}

.mdl-dash-button--icon {
    height: 42px;
    min-width: 42px;
    width: 42px;
    background-color: rgba(80, 80, 80, 0.1);
}

.mdl-dash-button-run {
    background-color: #57a988 !important;
    box-shadow: 0 0 1pt 2pt #c2cdd5;
}

.mdl-dash-button-error {
    background-color: #c5222a;
}

.mdl-dash-button-stop {
    background-color: rgba(80, 80, 80, 0.1);
}

.mdl-dash-button-color {
    color: white !important;
}

.mdl-widget-button--icon {
    height: 81px;
    min-width: 81px;
    width: 81px;
}

.mdl-data-table .mdl-data-table__cell--value {
    font-size: 16px;
    font-weight: 500;
    word-wrap: break-word;
    /*overflow: hidden;*/
}

.mqtt-cert-small {
    display: none;
}

.mdl-data-table.properties td:last-of-type,
.mdl-data-table th:last-of-type {
    padding-right: 54px;
}

@media screen and (max-width: 450px) {
    .mdl-data-table.properties td:last-of-type,
    .mdl-data-table th:last-of-type {
        padding-right: 18px !important;
    }
    .mdl-switch__error_message {
        width: calc(100% - 70px) !important;
    }
    .mdl-switch__error {
        right: -26px !important;
    }
    .mdl-downloadcounter {
        right: -17px !important;
    }
    .material-icons__edit {
        display: none;
    }
    .mdl-textfield__input.properties {
        border-bottom: none;
        text-align: right;
        background-color: #f5f6f7;
    }
    .mdl-textfield__edit.properties,
    .mdl-textfield__error.properties {
        right: -16px !important;
    }
}

@media screen and (max-height: 450px) {
    #navigation-container-small {
        display: block;
    }
    #navigation-container-normal {
        display: none;
    }
}

@media screen and (min-height: 451px) {
    #navigation-container-small {
        display: none;
    }
    #navigation-container-normal {
        display: block;
    }
}

.mdl-data-table .mdl-data-table__cell--minmax {
    padding-left: 5px;
    padding-right: 20px !important;
}

.mdl-data-table__cell--minmax {
    font-size: 13px;
}

h5.mdl-card__title-text {
    font-weight: 400;
}

.mdl-card__title-second {
    color: #555554;
}

.mdl-card__title-hint {
    /*color: #6e8291;*/
    color: #88a9bc;
    font-size: 11px;
}

.mdl-card__title {
    color: #555554;
    /* padding-top: 18px; */
    font-weight: 400;
    /*padding-right: 32px;*/
    color: #555554;
    font-weight: 400;
    vertical-align: middle;
    height: 58px;
    margin-right: 60px;
}

.mdl-card__menu {
    top: 15px;
}

.mdl-card__supporting-text {
    font-size: 13px;
    line-height: normal;
    overflow: hidden;
    padding: 0;
    width: auto;
    color: #000;
}

.mdl-data-table td,
.mdl-data-table th {
    padding: 0;
    text-align: right;
}


/* END iOS Safari specific workaround */

.pac-drawer-header {
    border-bottom: 1px solid #e0e0e0;
    box-sizing: border-box;
    height: 61px;
    padding-left: 30px;
    padding-top: 12px;
}

.pac-drawer-header:hover {
    cursor: pointer;
}

.pac-navigation {
    -ms-flex-positive: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
}

.pac-layout .pac-navigation .mdl-navigation__link {
    -ms-flex-align: center;
    -ms-flex-direction: row;
    -webkit-align-items: center;
    -webkit-flex-direction: row;
    align-items: center;
    color: #2d373c;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    flex-direction: row;
    font-weight: 500;
    opacity: 1;
}

.mdl-navigation-fields {
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    height: 42px;
    min-height: 42px;
    line-height: 42px;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: space-around;
}

.navigation-container {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    width: auto;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.mdl-navigation_field-link {
    color: #555554;
    flex-grow: 1;
    -ms-flex-grow: 1;
    -webkit-flex-grow: 1;
    text-align: center;
    border-bottom: 5px solid transparent;
    padding: 0;
    margin-top: -1px;
    height: calc(100% - 4px);
}

.mdl-navigation_field-link:hover {
    background: #cdd9e1;
    color: #005578;
}

.mdl-navigation_field-link--active {
    background: #DFE6ED;
    border-bottom: 5px solid #005578;
    padding: 0;
}

.mdl-layout__drawer {
    -webkit-transform: translateX(calc((-800px - 100vw) / 2));
    transform: translateX(calc((-800px - 100vw) / 2));
    filter: blur(0);
    -webkit-filter: blur(0);
    min-width: 240px;
    max-width: calc(100vw / 2);
    width: auto;
    top: 4px;
    height: calc(100vh - 4px);
}

@media screen and (max-width: 414px) {
    .mdl-layout__drawer {
        max-width: calc(100vw - 28px);
    }
}

.mdl-layout__drawer .mdl-navigation__link:hover {
    background: #cdd9e1;
    color: #005578 !important;
}

.mdl-layout__drawer .mdl-navigation__link--current:hover {
    background: #dfe6ed;
    color: #2d373c;
    cursor: default;
}

.mdl-layout__drawer .mdl-navigation__link {
    color: #555554;
    font-size: 14px;
    font-weight: 500;
    opacity: 1;
    padding: 12px 1px 11px 9px;
    position: relative;
    display: block;
}

.mdl-layout__drawer .mdl-navigation__link--current {
    padding-left: 4px;
}


/* TODO: Find a proper solution to have the graphs
 * not float around outside their container in IE10/11.
 * Using a browserhacks.com solution for now.
 */

_:-ms-input-placeholder,
:root .pac-graphs {
    min-height: 664px;
}

_:-ms-input-placeholder,
:root .pac-graph {
    max-height: 300px;
}


/* TODO end */


/* If card is too small, crop header not to overwrite the menu */

.mdl-tooltip.is-active {
    animation-delay: 0.3s;
    max-width: initial;
    font-size: 11px;
}

.mdl-layout__drawer-button {
    line-height: 57px;
}

.mdl-layout__drawer-button i {
    color: #555554;
    font-size: 24px;
    line-height: 32px;
    vertical-align: text-bottom;
}

.card__title {
    align-items: center;
    display: block;
    line-height: normal;
    padding: 16px 16px;
    box-sizing: border-box;
}

.card__title-text {
    color: #2d373c;
    font-size: 17px;
    font-weight: 400;
    margin-right: 24px;
    display: flex;
    align-items: center;
    overflow: hidden;
    vertical-align: middle;
    height: 46px;
    line-height: 14px;
}

.card__title-text.archive-title {
    width: calc(100% - 100px);
}

.card__remote {
    margin-top: -5px;
}

.card-reveal .card__title-text {
    color: #2d373c;
    font-size: 18px;
    font-weight: 400;
    padding-top: 10px;
}

.card__subtitle-text {
    font-size: 11px;
    margin-top: -12px;
    color: #5c6972;
    position: absolute;
}

.mdl-console-table {
    background-color: rgb(255, 255, 255);
    border-collapse: collapse;
    font-size: 14px;
    position: relative;
}

.mdl-console-table td {
    border-top: 1px solid #DCDAE1;
    box-sizing: border-box;
    padding: 6px 10px 4px 10px;
    position: relative;
    text-align: left;
    vertical-align: middle;
    cursor: pointer;
/*    word-break: break-word;*/
}

.mdl-console-table tbody tr {
    transition-duration: 0.28s;
    transition-property: background-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.mdl-console-table tbody tr:not(#detailsRow):hover {
    background-color: #dfe6ed;
}

.mdl-data-table tbody tr:hover {
    background-color: #dfe6ed;
}

.mdl-data-table tbody tr.nohover:hover {
    background-color: #fff !important;
}

.mdl-data-table tbody tr.nohover>td {
    cursor: default !important;
}

.mdl-data-table-highlight {
    background-color: #dfe6ed;
}

.mdl-data-table tbody tr.mdl-data-table__cell--breadcrumb {
    height: 15px;
    border-top: 1px solid #DCDAE1
}

.mdl-data-table tbody td.mdl-data-table__cell--breadcrumb {
    border-bottom: 0px solid #fff;
    /*border-top: 0px solid #fff;*/
    text-align: left;
    height: 15px;
    padding-bottom: 7px;
    padding-left: 24px;
    padding-right: 12px;
}

.mdl-data-table tbody td.bc_content {
    border-bottom: 0px solid #fff;
    border-top: 0px solid #fff;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mdl-layout__drawer-button {
    font-size: 24px;
}

.mdl-badge[data-badge]:after {
    background: #c62828;
    right: 0px !important;
    top: -8px !important;
}

.mdl-layout__header {
    background-color: #fff;
    box-shadow: none;
}

h6 {
    color: #2d373c;
    margin-bottom: 0;
    margin-top: 0;
}

dialog .mdl-textfield {
    width: 100%;
}


/* IE Hack */

.widget-layout {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    height: 144px;
}

.widget-box {
    border: 5px solid white;
    flex: calc(100% / 2);
    flex-basis: 20%;
    min-height: 100px;
    min-width: 80px;
    text-align: center;
}

.widget-box:last-child {
    flex-basis: 70%;
    min-width: 200px;
}

.widget-center {
    position: relative;
    top: calc(50% - 44px);
}

.widget-img {
    margin: 10px;
}

.not_supported {
    height: 10px;
    background-image: url(../images/stripes-diagonal.png);
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0;
}

.full-width {
    width: 100%;
}

.half-width {
    width: 50%;
}

@-webkit-keyframes pulse_animation {
    0% {
        -webkit-transform: scale(0.8, 0.8);
        opacity: 0.3;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 1.0;
    }
}

@-moz-keyframes pulse_animation {
    0% {
        -moz-transform: scale(0.8, 0.8);
        opacity: 0.3;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 1.0;
    }
}

@-o-keyframes pulse_animation {
    0% {
        -o-transform: scale(0.8, 0.8);
        opacity: 0.3;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 1.0;
    }
}

@-ms-keyframes pulse_animation {
    0% {
        -o-transform: scale(0.8, 0.8);
        opacity: 0.3;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 1.0;
    }
}

@keyframes pulse_animation {
    0% {
        opacity: 0.3;
        transform: scale(0.8, 0.8);
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 1.0;
    }
}

.pulse {
    -moz-animation: pulse_animation 0.2s linear 1;
    -ms-animation: pulse_animation 0.2s linear 1;
    -o-animation: pulse_animation 0.2s linear 1;
    -webkit-animation: pulse_animation 0.2s linear 1;
    animation: pulse_animation 0.2s linear 1;
    opacity: 1.0
}

.value {
    color: #2d373c;
}

.label {
    color: #788791 !important;
    font-size: 14px;
}

.flex-end {
    color: #2d373c;
    display: flex;
    justify-content: flex-end;
    align-content: center;
    align-items: center;
    flex-wrap: nowrap;
    height: 43px;
}

.flex-end>* {
    /*    flex: 1 1 auto;*/
}

.mqtt-cert-normal {
    height: 27px;
}


/*.value button { min-width: 136px; }*/

.mdl-color-text--grey-600 {
    color: #788791 !important;
}

.mdl-image {
    border: none;
    padding-right: 7px;
}

.clock {
    overflow: hidden;
    padding-bottom: 15px;
    padding-top: 15px;
    position: relative;
    width: 100%;
}

.ctx-menu {
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
    position: absolute;
    right: 10px;
    top: 12px;
}

.ctx-menu .mdl-button--icon {
    font-size: 24px;
    height: 24px;
    min-width: 24px;
    vertical-align: text-top;
    width: 24px;
}

.datebox .mdl-button--icon {
    font-size: 24px;
    height: 24px;
    min-width: 24px;
    vertical-align: text-top;
    width: 24px;
    top: -5px;
    margin: 0 2px 0 2px;
}

.datebox span {
    line-height: 13px;
    height: 24px;
    max-height: 24px;
    display: inline-block;
    vertical-align: sub;
}

.menuFilter {
    z-index: 1;
    /* Higher z-index means upper position */
}

.mdl-button[disabled][disabled] img.mdl-button--icon {
    display: none;
}

/* Collapse Styles */

a {
    color: #005578;
    cursor: pointer;
}

.mdl-collapse.mdl-collapse--opened+.mdl-collapse.mdl-collapse--opened {
    border-top: none;
    margin-top: 0;
}

.mdl-collapse .mdl-collapse__content-wrapper {
    overflow: hidden;
}

.mdl-collapse .mdl-collapse__content {
    transition-duration: 0.1s;
    transition-property: margin-top;
    transition-timing-function: ease-in-out;
}

.mdl-collapse .mdl-collapse__content:not(.mdl-collapse--opened) {
    margin-top: -56000px;
}

.mdl-collapse .mdl-collapse__icon {
    color: #555554;
    transition-duration: 0.1s;
    transition-property: transform;
    transition-timing-function: ease-in-out;
    margin-top: -2px;
}

.mdl-collapse.mdl-collapse--opened .mdl-collapse__icon {
    transform: rotate(-180deg);
}

.mdl-collapse.mdl-collapse--opened .mdl-collapse__content {
    margin-top: 0 !important;
}

.mdl-collapse--opened {
    padding-bottom: 10px;
}

i.material-icons {
    visibility: hidden;
}

th {
    padding: 6px 4px 4px 16px;
    text-align: left;
}

.mdl-selectfield--floating-label.is-dirty .mdl-selectfield__label,
.mdl-selectfield--floating-label.is-focused .mdl-selectfield__label {
    color: #879baa;
}

.mdl-checkbox__ripple-container .mdl-ripple {
    background: #879baa;
}

.mdl-icon-toggle__ripple-container {
     border-radius: 0% !important;
 }

.mdl-ripple {
/*    background: transparent !important;
    opacity: 1 !important;
*/}

@media screen and (min-width: 1024px) {
    .mdl-layout__tab-bar {
        width: calc(100% - 60px);
    }
}

@media screen and (max-width: 1024px) {
    .mdl-layout__header {
        display: block;
    }
    .mdl-layout__header-row .mdl-navigation__link {
        padding: 0px 9px;
    }
}

.mdl-layout--fixed-drawer>.mdl-layout__content {
    margin-left: initial;
}

@media screen and (min-width: 1025px) {
    .mdl-layout--fixed-drawer>.mdl-layout__drawer {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        filter: blur(0);
        -webkit-filter: blur(0);
    }
}

.mdl-layout--fixed-drawer.is-upgraded:not(.is-small-screen)>.mdl-layout__header {
    margin-left: initial;
    width: initial;
}

.mdl-layout__header--waterfall.is-casting-shadow {
    box-shadow: none;
}

.mdl-lib-actionbar {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 1px 16px;
    position: absolute;
    bottom: 0px;
    width: inherit;
    border-top: #DCDAE1 1px solid;
    color: #555554;
    font-size: 13px;
    line-height: 14px;
    font-weight: 500;
    background-color: #dfe6ed;
    text-decoration: none;
    height: 24px;
}

@media screen and (min-width: 640px) and (min-height: 450px) {
    .mdl-layout--fixed-drawer>.mdl-layout__drawer {
        -webkit-transform: none;
        transform: none;
    }
}
.table-remove:hover {
    color: #f00;
    cursor: pointer;
}
.table-add:hover {
    color: #0b0;
    cursor: pointer;
}
.mdl-shadow--1dp {
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 1px -2px rgba(0, 0, 0, 0.14), 0 1px 1px -1px rgba(0, 0, 0, 0.06);
}
@media screen and (max-width: 1024px) {
    .mdl-layout__header-row .mdl-navigation {
        height: auto;
    }

    .mdl-layout__drawer-button {
        margin: 8px 12px !important;
    }
}
.disabled {
    color: #788791 !important;
}
.offline {
    color: transparent !important;
    text-shadow: 0 0 6px rgba(45, 55, 60, 0.88);
    -webkit-filter: blur(10px);
    filter: blur(10px);
}
.mdl-snackbar__action {
    color: #41aaaa;
}
.mdl-snackbar {
    z-index: 999999;
}
@media screen and (max-width: 640px) {
    .drawer_pin {
        display: none;
    }
}
.drawer_pin {
    height: 32px;
    width: 32px;
    position: absolute;
    right: 1px;
}
.drawer_pin>a {
    padding-left: 13px;
}
.drawer_pin>a>img {
    padding-top: 5px;
}
mdl-dialog__content p {
    color: #555554 !important;
    line-height: 20px;
}
figure {
    display: block;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
}
.mdl-button--invisible {
    width: 0;
    max-width: 0;
    min-width: 0;
    margin: 0 1px 0 1px !important;
    visibility: hidden;
}
.mdl-button--colored {
    background: #dce0e4;
}
.mdl-button--warning {
    -webkit-box-shadow: inset 0px 0px 0px 2px #ff3b30;
    -moz-box-shadow: inset 0px 0px 0px 2px #ff3b30;
    box-shadow: inset 0px 0px 0px 2px #ff3b30;
}
.mdl-button--dialog {
    background-color: #5050501a;
    flex: auto;
    max-width: 8em;
    min-width: 8em;
}
.mdl-button--icon[disabled][disabled] {
    opacity: .65;
}
.mdl-button--raised[disabled][disabled],
.mdl-button--raised.mdl-button--disabled.mdl-button--disabled {
    color: rgba(0, 0, 0, .54);
    box-shadow: none;
    opacity: .65;
}
.card-reveal {
    padding: 0;
    position: absolute;
    background-color: #fff;
    width: 100%;
    overflow-y: auto;
    left: 0;
    top: 100%;
    height: 100%;
    z-index: 3;
    display: none;
}
.card-reveal .card-title {
    color: #2d373c;
    font-size: 18px;
    font-weight: 400;
    padding-left: 8px;
    padding-top: 10px;
}
.card-reveal__title {
    padding: 8px;
}
.card-reveal__content {
    padding: 16px;
}
.card-reveal__teaser {
    background: #50bebe;
    background: -moz-linear-gradient(left, #50bebe 0, #41aaaa 50%, #0099cb 100%);
    background: -webkit-linear-gradient(left, #50bebe 0, #41aaaa 50%, #0099cb 100%);
    background: linear-gradient(to right, #50bebe 0, #41aaaa 50%, #0099cb 100%);
    /* ReSharper disable once InvalidValue */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#50bebe', endColorstr='#0099cb', GradientType=1);
    height: 4px;
}
.mdl-list__item-avatar,
.mdl-list__item-avatar.material-icons {
    height: 32px;
    width: 32px;
    box-sizing: border-box;
    border-radius: 0;
    background-color: transparent;
    font-size: 32px;
    color: inherit;
}
.mdl-list__item--two-line {
    height: 32px;
}
.mdl-list {
    padding: 0;
}
.mdl-list__item {
    padding: 0;
    display: block;
}
.mdl-list>li a {
    font-weight: 400;
    color: #2d373c;
    text-decoration: none;
    font-size: 14px;
}
.mdl-list>li a:hover {
    color: #005578;
}
.mdl-list__item--two-line .mdl-list__item-primary-content .mdl-list__item-sub-title {
    font-size: 12px;
    line-height: 12px;
}
#detailsView {
    padding: 0;
    height: 0;
    background-color: #dfe6ed;
    width: calc(100% + 24px);
    overflow-y: auto;
    left: 0;
    z-index: 3;
    overflow: hidden;
    margin-left: -18px;
}
.mdl-inner-table {
    background-color: #fff;
    border-collapse: collapse;
    border: 1px solid #e0e0e0;
    font-size: 13px;
    position: relative;
    margin: 8px 0 8px 24px;
}
.mdl-inner-table td {
    border-bottom: 1px solid #DCDAE1;
    border-top: 1px solid #DCDAE1;
    box-sizing: border-box;
    height: 18px;
    padding: 4px 4px 4px 32px;
    position: relative;
    text-align: left;
    vertical-align: middle;
    cursor: default;
}
.mdl-inner-table .cat {
    color: #005578;
    padding-left: 16px;
}
.mdl-inner-table .desc {
    padding-left: 16px;
}
#detailsRow {
    padding-left: 30px;
}
.rotate {
    -moz-transition: all 0.1s linear;
    -webkit-transition: all 0.1s linear;
    transition: all 0.1s linear;
    vertical-align: text-top;
    font-size: 20px;
}
.rotate.down {
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
#jump_to_top-link {
    position: fixed;
    display: block;
    right: 40px;
    bottom: 34px;
    z-index: 999;
}
p.title {
    color: #212121;
    font-size: 13px;
    line-height: 24px;
    margin: 1.2em 0 .5em;
    word-wrap: break-word;
    font-weight: bold;
    padding-left: 16px;
}
p.normal {
    color: #212121;
    font-size: 13px;
    line-height: 24px;
    word-wrap: break-word;
    font-weight: normal;
    padding-left: 16px;
    padding-right: 8px;
    margin-bottom: 0;
    margin-top: 4px;
}
ul.legal {
    color: #212121;
    font-size: 13px;
    font-weight: normal;
    line-height: 24px;
    letter-spacing: normal;
}
.mdl-color--accent {
    background-color: #41AAAA !important;
}
.mdl-switch__track {
    background: #879baa;
    position: absolute;
    left: 0;
    top: 5px;
    height: 20px;
    width: 36px;
    border-radius: 8.5px;
    cursor: pointer;
    background-image: url(../images/toggle_bg.png) !important;
}
.mdl-switch__thumb {
    background: rgb(250, 250, 250);
    position: absolute;
    top: 7px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: none;
    transition-duration: 0.28s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-property: left;
}
.mdl-switch.is-checked:not(.is-disabled) .mdl-switch__track {
    background: #005f87;
    background-image: url(../images/toggle_bg.png);
}
.mdl-switch.is-checked .mdl-switch__thumb {
    background: white;
    box-shadow: none;
}
.mdl-switch__thumb fieldset[disabled] .mdl-switch,
.mdl-switch.is-disabled .mdl-switch__thumb {
    background: #bdbdbd !important;
    cursor: auto;
}
.mdl-switch {
    width: auto;
    top: -2px;
}

/*Textfields*/
.mdl-textfield {
    font-size: 16px;
    font-weight: 500;
    width: 440px;
    max-width: 100%;
}
.mdl-textfield.properties {
    margin: 0;
    padding: 0;
}
.mdl-textfield__input {
    font-size: 16px;
    font-weight: 500;
    font-family: "Siemens Sans", "RobotoDraft", "Roboto", sans-serif;
}
.mdl-textfield__input.properties {
    border-bottom: none;
    text-align: right;
    text-overflow: ellipsis
}
fieldset[disabled] .mdl-textfield .mdl-textfield__input,
.mdl-textfield.is-disabled .mdl-textfield__input {
    border-bottom: 0 dotted rgba(0, 0, 0, 0);
    color: #788791;
    -webkit-text-fill-color: #788791;
    opacity: 1; /* required on iOS */
}
.mdl-textfield__input.properties:focus {
    border-bottom: none;
    text-align: right;
    background-color: #f5f6f7;
}
.mdl-textfield__input:focus {
    outline: #005578;
}
.mdl-textfield textarea.mdl-textfield__input {
    display: block;
}
.mdl-textfield.properties.is-focused .mdl-textfield__label {
    text-align: right;
}
.mdl-textfield__label.properties:after {
    background-color: rgb(63, 81, 181);
    bottom: 20px;
    content: '';
    height: 2px;
    left: 45%;
    position: absolute;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden;
    width: 10px;
    display: none;
}
.mdl-textfield.is-focused .mdl-textfield__label:after {
    left: 0;
    visibility: visible;
    width: 100%;
}
.mdl-textfield__edit.properties,
.mdl-textfield__error.properties {
    right: -32px;
    position: absolute;
    top: 13px;
}
.mdl-textfield__edit.properties.typex {
    margin-top: -22px;
    right: -32px;
    position: absolute;
    top: -10px;
}
.mdl-textfield__edit.dialog {
    margin-top: -22px;
    right: 0px;
    cursor: default;
}
.mdl-textfield__edit.warning {
    margin-top: -22px;
    right: 20px;
    cursor: default;
}

/*.mdl-textfield__edit.properties.selectfield{
    margin-top: -21px;
    right: -32px;
}*/
.mdl-textfield__edit {
    position: absolute;
    display: block;
    visibility: visible;
}
.material-icons__error {
    color: #c62828;
    font-size: 14px;
    padding-top: 3px;
}
.material-icons__edit {
    color: #005f87 !important;
    font-size: 14px;
}
.material-icons__warning {
    color: #ffc107 !important;
    font-size: 14px;
}
.material-icons__delete {
    color: #005f87 !important;
    font-size: 16px;
}
.material-icons__smallscreen {
    color: #2d373c !important;
    font-size: 16px;
    margin-bottom: 7px;
}
.material-icons__cert {
    color: #2d373c !important;
    font-size: 22px;
    margin-top: 3px;
}
.material-icons__service {
    color: #2d373c !important;
    font-size: 22px;
}
.material-icons__shift {
    color: #005f87;
    font-size: 20px;
    font-weight: bold;
    vertical-align: middle;
    margin-top: -5px;
    margin-left: 0;
}
.mdl-textfield.is-invalid .mdl-textfield__error {
    visibility: visible;
}
.mdl-textfield.is-invalid .mdl-textfield__edit {
    visibility: hidden;
}
.mdl-switch__error {
    visibility: visible;
    display: block;
    visibility: visible;
    position: absolute;
    right: -42px;
    top: 6px;
}
.mdl-downloadcounter {
    display: block;
    visibility: visible;
    position: absolute;
    right: -33px;
    top: 4px;
    position: relative;
    float: right;
}

/*.mdl-textfield__error_message {
    color: #c62828;
    position: absolute;
    font-size: 10px;
    margin-top: -4px;
    visibility: hidden;
    display: block;
    text-align: right;
    width: calc(200% + 54px);
    white-space: nowrap;
    right: 0px;
}
*/
.mdl-textfield__error_message {
    color: #c62828;
    position: relative;
    font-size: 10px;
    visibility: hidden;
    display: none;
    text-align: right;
    line-height: 11px;
    width: calc(100% + 24px);
    left: -24px;
}
.mdl-switch__error_message {
    color: #c62828;
    position: absolute;
    font-size: 10px;
    line-height: normal;
    margin-top: -34px;
    width: calc(100% - 100px);
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow-y: hidden;
}
.mdl-textfield.is-invalid {
    /*height: 50px;
    padding-top: 4px;*/
}
.mdl-textfield.is-invalid .mdl-textfield__error_message {
    visibility: visible;
    overflow: hidden;
    display: block;
    overflow-wrap: break-word;
}
.mdl-textfield.is-focused .mdl-textfield__expandable-holder,
.mdl-textfield.is-dirty .mdl-textfield__expandable-holder {
    max-width: 600px;
}
.mdl-textfield__expandable-holder .mdl-textfield__label:after {
    bottom: 0;
}
.mdl-textfield__unit {
    margin-left: 4px;
    width: auto;
}
.mdl-textfield__unit span {
    vertical-align: -webkit-baseline-middle;
    vertical-align: -moz-middle-with-baseline;
    height: auto;
}
.grid-container.mdl-grid.properties {
    padding-bottom: 16px;
    max-width: 1024px;
}
.pulse-service {
    content: '';
    box-sizing: border-box;
    position: absolute;
    z-index: 0;
    width: 55px;
    height: 1px;
    box-shadow: 0 0 0 0 rgba(194, 205, 213, 0.3);
    background-color: transparent;
    -webkit-animation: pulss 2s infinite cubic-bezier(0.26, 0.33, 0, 1);
    -moz-animation: pulss 2s infinite cubic-bezier(0.26, 0.33, 0, 1);
    -ms-animation: pulss 2s infinite cubic-bezier(0.26, 0.33, 0, 1);
    animation: pulss 2s infinite cubic-bezier(0.26, 0.33, 0, 1);
}
_:-ms-lang(x),
.pulse-service {
    margin: 0 30px;
}
.pulse-service.off {
    -moz-animation-name: none;
    -webkit-animation-name: none;
    -ms-animation-name: none;
    animation-name: none;
}
.pulse-button {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 42px;
    height: 42px;
    margin-top: -20px;
    margin-left: -22px;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(194, 205, 213, 0.3);
    background-color: #c2cdd5;
    -webkit-animation: puls 2s infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: puls 2s infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: puls 2s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: puls 2s infinite cubic-bezier(0.66, 0, 0, 1);
}
.pulse-button:hover {
    -webkit-animation: none;
    -moz-animation: none;
    -ms-animation: none;
    animation: none;
}
@-webkit-keyframes puls {
    to {
        box-shadow: 0 0 0 30px rgba(194, 205, 213, 0);
    }
}
@-moz-keyframes puls {
    to {
        box-shadow: 0 0 0 30px rgba(194, 205, 213, 0);
    }
}
@-ms-keyframes puls {
    to {
        box-shadow: 0 0 0 30px rgba(194, 205, 213, 0);
    }
}
@keyframes puls {
    to {
        box-shadow: 0 0 0 30px rgba(194, 205, 213, 0);
    }
}
@-webkit-keyframes pulss {
    to {
        box-shadow: 0 0 2px 26px rgba(194, 205, 213, 0);
    }
}
@-moz-keyframes pulss {
    to {
        box-shadow: 0 0 2px 26px rgba(194, 205, 213, 0);
    }
}
@-ms-keyframes pulss {
    to {
        box-shadow: 0 0 2px 26px rgba(194, 205, 213, 0);
    }
}
@keyframes pulss {
    to {
        box-shadow: 0 0 2px 26px rgba(194, 205, 213, 0);
    }
}
.servicerun {
    opacity: 1 !important;
    transform-origin: 50% 49%;
    will-change: transform;
    -ms-animation: spinner 3s linear 1s infinite;
    -webkit-animation: spinner 3s linear 1s infinite;
    animation: spinner 3s linear 1s infinite;
}
.certready {
    opacity: 1 !important;
}
@keyframes spinner {
    to {
        -ms-transform: rotate(360deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }

    to {
        transform: rotate(360deg);
    }
}
.spinner:before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: 39px;
    left: 50%;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    margin-left: -22px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #879baa;
    border-bottom-color: #879baa;
    will-change: transform;
    -ms-animation: spinner 6s linear 1s infinite;
    -webkit-animation: spinner 6s linear 1s infinite;
    animation: spinner 6s linear 1s infinite;
}

/* bar animation*/
.bar_container {
    height: 10px;
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    /*margin: 100px auto 0;
    width: 110px;
    height: 20px;
    display: flex;
    align-items: flex-end;*/
}
.bar {
    width: 20px;
    min-height: 1px;
    margin-right: 1px;
}
.bar:nth-child(0) {
    background-color: #4fbcbc;
    -webkit-animation: grow0 1784ms alternate infinite;
    animation: grow0 1784ms alternate infinite;
}
@-webkit-keyframes grow0 {
    0% {
        height: 1px;
    }

    10% {
        height: 3px;
    }

    20% {
        height: 3px;
    }

    30% {
        height: 5px;
    }

    40% {
        height: 4px;
    }

    50% {
        height: 7px;
    }

    60% {
        height: 4px;
    }

    70% {
        height: 9px;
    }

    80% {
        height: 10px;
    }

    90% {
        height: 4px;
    }

    100% {
        height: 1px;
    }
}
@keyframes grow0 {
    0% {
        height: 1px;
    }

    10% {
        height: 3px;
    }

    20% {
        height: 3px;
    }

    30% {
        height: 5px;
    }

    40% {
        height: 4px;
    }

    50% {
        height: 7px;
    }

    60% {
        height: 4px;
    }

    70% {
        height: 9px;
    }

    80% {
        height: 10px;
    }

    90% {
        height: 4px;
    }

    100% {
        height: 1px;
    }
}
.bar:nth-child(1) {
    background-color: #4cb8b8;
    -webkit-animation: grow1 1567ms alternate infinite;
    animation: grow1 1567ms alternate infinite;
}
@-webkit-keyframes grow1 {
    0% {
        height: 1px;
    }

    10% {
        height: 4px;
    }

    20% {
        height: 8px;
    }

    30% {
        height: 3px;
    }

    40% {
        height: 5px;
    }

    50% {
        height: 9px;
    }

    60% {
        height: 1px;
    }

    70% {
        height: 4px;
    }

    80% {
        height: 10px;
    }

    90% {
        height: 4px;
    }

    100% {
        height: 5px;
    }
}
@keyframes grow1 {
    0% {
        height: 1px;
    }

    10% {
        height: 4px;
    }

    20% {
        height: 8px;
    }

    30% {
        height: 3px;
    }

    40% {
        height: 5px;
    }

    50% {
        height: 9px;
    }

    60% {
        height: 1px;
    }

    70% {
        height: 4px;
    }

    80% {
        height: 10px;
    }

    90% {
        height: 4px;
    }

    100% {
        height: 5px;
    }
}
.bar:nth-child(2) {
    background-color: #48b4b4;
    -webkit-animation: grow2 2065ms alternate infinite;
    animation: grow2 2065ms alternate infinite;
}
@-webkit-keyframes grow2 {
    0% {
        height: 5px;
    }

    10% {
        height: 3px;
    }

    20% {
        height: 10px;
    }

    30% {
        height: 1px;
    }

    40% {
        height: 6px;
    }

    50% {
        height: 9px;
    }

    60% {
        height: 6px;
    }

    70% {
        height: 6px;
    }

    80% {
        height: 4px;
    }

    90% {
        height: 2px;
    }

    100% {
        height: 5px;
    }
}
@keyframes grow2 {
    0% {
        height: 5px;
    }

    10% {
        height: 3px;
    }

    20% {
        height: 10px;
    }

    30% {
        height: 1px;
    }

    40% {
        height: 6px;
    }

    50% {
        height: 9px;
    }

    60% {
        height: 6px;
    }

    70% {
        height: 6px;
    }

    80% {
        height: 4px;
    }

    90% {
        height: 2px;
    }

    100% {
        height: 5px;
    }
}
.bar:nth-child(3) {
    background-color: #45b0b0;
    -webkit-animation: grow3 1699ms alternate infinite;
    animation: grow3 1699ms alternate infinite;
}
@-webkit-keyframes grow3 {
    0% {
        height: 1px;
    }

    10% {
        height: 8px;
    }

    20% {
        height: 8px;
    }

    30% {
        height: 1px;
    }

    40% {
        height: 8px;
    }

    50% {
        height: 5px;
    }

    60% {
        height: 3px;
    }

    70% {
        height: 1px;
    }

    80% {
        height: 1px;
    }

    90% {
        height: 4px;
    }

    100% {
        height: 2px;
    }
}
@keyframes grow3 {
    0% {
        height: 1px;
    }

    10% {
        height: 8px;
    }

    20% {
        height: 8px;
    }

    30% {
        height: 1px;
    }

    40% {
        height: 8px;
    }

    50% {
        height: 5px;
    }

    60% {
        height: 3px;
    }

    70% {
        height: 1px;
    }

    80% {
        height: 1px;
    }

    90% {
        height: 4px;
    }

    100% {
        height: 2px;
    }
}
.bar:nth-child(4) {
    background-color: #43acac;
    -webkit-animation: grow4 2082ms alternate infinite;
    animation: grow4 2082ms alternate infinite;
}
@-webkit-keyframes grow4 {
    0% {
        height: 10px;
    }

    10% {
        height: 3px;
    }

    20% {
        height: 10px;
    }

    30% {
        height: 8px;
    }

    40% {
        height: 5px;
    }

    50% {
        height: 4px;
    }

    60% {
        height: 4px;
    }

    70% {
        height: 3px;
    }

    80% {
        height: 10px;
    }

    90% {
        height: 6px;
    }

    100% {
        height: 6px;
    }
}
@keyframes grow4 {
    0% {
        height: 10px;
    }

    10% {
        height: 3px;
    }

    20% {
        height: 10px;
    }

    30% {
        height: 8px;
    }

    40% {
        height: 5px;
    }

    50% {
        height: 4px;
    }

    60% {
        height: 4px;
    }

    70% {
        height: 3px;
    }

    80% {
        height: 10px;
    }

    90% {
        height: 6px;
    }

    100% {
        height: 6px;
    }
}
.bar:nth-child(5) {
    background-color: #3ba8ad;
    -webkit-animation: grow5 2173ms alternate infinite;
    animation: grow5 2173ms alternate infinite;
}
@-webkit-keyframes grow5 {
    0% {
        height: 5px;
    }

    10% {
        height: 4px;
    }

    20% {
        height: 9px;
    }

    30% {
        height: 1px;
    }

    40% {
        height: 7px;
    }

    50% {
        height: 3px;
    }

    60% {
        height: 8px;
    }

    70% {
        height: 7px;
    }

    80% {
        height: 9px;
    }

    90% {
        height: 8px;
    }

    100% {
        height: 6px;
    }
}
@keyframes grow5 {
    0% {
        height: 5px;
    }

    10% {
        height: 4px;
    }

    20% {
        height: 9px;
    }

    30% {
        height: 1px;
    }

    40% {
        height: 7px;
    }

    50% {
        height: 3px;
    }

    60% {
        height: 8px;
    }

    70% {
        height: 7px;
    }

    80% {
        height: 9px;
    }

    90% {
        height: 8px;
    }

    100% {
        height: 6px;
    }
}
.bar:nth-child(6) {
    background-color: #21a2bb;
    -webkit-animation: grow6 1904ms alternate infinite;
    animation: grow6 1904ms alternate infinite;
}
@-webkit-keyframes grow6 {
    0% {
        height: 4px;
    }

    10% {
        height: 10px;
    }

    20% {
        height: 3px;
    }

    30% {
        height: 9px;
    }

    40% {
        height: 8px;
    }

    50% {
        height: 4px;
    }

    60% {
        height: 8px;
    }

    70% {
        height: 5px;
    }

    80% {
        height: 9px;
    }

    90% {
        height: 10px;
    }

    100% {
        height: 5px;
    }
}
@keyframes grow6 {
    0% {
        height: 4px;
    }

    10% {
        height: 10px;
    }

    20% {
        height: 3px;
    }

    30% {
        height: 9px;
    }

    40% {
        height: 8px;
    }

    50% {
        height: 4px;
    }

    60% {
        height: 8px;
    }

    70% {
        height: 5px;
    }

    80% {
        height: 9px;
    }

    90% {
        height: 10px;
    }

    100% {
        height: 5px;
    }
}
.bar:nth-child(7) {
    background-color: #149fc1;
    -webkit-animation: grow7 2059ms alternate infinite;
    animation: grow7 2059ms alternate infinite;
}
@-webkit-keyframes grow7 {
    0% {
        height: 8px;
    }

    10% {
        height: 5px;
    }

    20% {
        height: 6px;
    }

    30% {
        height: 5px;
    }

    40% {
        height: 4px;
    }

    50% {
        height: 7px;
    }

    60% {
        height: 2px;
    }

    70% {
        height: 3px;
    }

    80% {
        height: 2px;
    }

    90% {
        height: 1px;
    }

    100% {
        height: 2px;
    }
}
@keyframes grow7 {
    0% {
        height: 8px;
    }

    10% {
        height: 5px;
    }

    20% {
        height: 6px;
    }

    30% {
        height: 5px;
    }

    40% {
        height: 4px;
    }

    50% {
        height: 7px;
    }

    60% {
        height: 2px;
    }

    70% {
        height: 3px;
    }

    80% {
        height: 2px;
    }

    90% {
        height: 1px;
    }

    100% {
        height: 2px;
    }
}
.bar:nth-child(8) {
    background-color: #139ec1;
    -webkit-animation: grow8 1733ms alternate infinite;
    animation: grow8 1733ms alternate infinite;
}
@-webkit-keyframes grow8 {
    0% {
        height: 6px;
    }

    10% {
        height: 1px;
    }

    20% {
        height: 4px;
    }

    30% {
        height: 5px;
    }

    40% {
        height: 9px;
    }

    50% {
        height: 5px;
    }

    60% {
        height: 6px;
    }

    70% {
        height: 6px;
    }

    80% {
        height: 8px;
    }

    90% {
        height: 5px;
    }

    100% {
        height: 7px;
    }
}
@keyframes grow8 {
    0% {
        height: 6px;
    }

    10% {
        height: 1px;
    }

    20% {
        height: 4px;
    }

    30% {
        height: 5px;
    }

    40% {
        height: 9px;
    }

    50% {
        height: 5px;
    }

    60% {
        height: 6px;
    }

    70% {
        height: 6px;
    }

    80% {
        height: 8px;
    }

    90% {
        height: 5px;
    }

    100% {
        height: 7px;
    }
}
.bar:nth-child(9) {
    background-color: #069bc8;
    -webkit-animation: grow9 1666ms alternate infinite;
    animation: grow9 1666ms alternate infinite;
}
@-webkit-keyframes grow9 {
    0% {
        height: 7px;
    }

    10% {
        height: 3px;
    }

    20% {
        height: 7px;
    }

    30% {
        height: 9px;
    }

    40% {
        height: 8px;
    }

    50% {
        height: 7px;
    }

    60% {
        height: 5px;
    }

    70% {
        height: 7px;
    }

    80% {
        height: 8px;
    }

    90% {
        height: 9px;
    }

    100% {
        height: 4px;
    }
}
@keyframes grow9 {
    0% {
        height: 7px;
    }

    10% {
        height: 3px;
    }

    20% {
        height: 7px;
    }

    30% {
        height: 9px;
    }

    40% {
        height: 8px;
    }

    50% {
        height: 7px;
    }

    60% {
        height: 5px;
    }

    70% {
        height: 7px;
    }

    80% {
        height: 8px;
    }

    90% {
        height: 9px;
    }

    100% {
        height: 4px;
    }
}
.glowpulse {
    margin: 100px;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #57a988;
    cursor: pointer;
    box-shadow: 0 0 0 rgba(87, 169, 136, 0.3);
    animation: pulse 2s infinite;
}
.glowpulse:hover {
    animation: none;
}
@-webkit-keyframes glowpulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(87, 169, 136, 0.3);
    }

    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(87, 169, 136, 0);
    }

    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(87, 169, 136, 0);
    }
}
@keyframes glowpulse {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(87, 169, 136, 0.3);
        box-shadow: 0 0 0 0 rgba(87, 169, 136, 0.3);
    }

    70% {
        -moz-box-shadow: 0 0 0 10px rgba(87, 169, 136, 0);
        box-shadow: 0 0 0 10px rgba(87, 169, 136, 0);
    }

    100% {
        -moz-box-shadow: 0 0 0 0 rgba(87, 169, 136, 0);
        box-shadow: 0 0 0 0 rgba(87, 169, 136, 0);
    }
}

/*select*/
select {
    -moz-appearance: none;
    -webkit-appearance: none;
    /* ReSharper disable once CssNotResolved */

    appearance: none;
}
select {
    font-family: inherit;
    background-color: transparent;
    max-width: 100%;
    width: auto;
    padding-left: 10px;
    font-size: 16px;
    border: none;
    text-align-last: right;
    /* Remove for correct indent of time fields in daterangepicker */
    /*text-indent: 16px;*/
}

/* Remove focus */
select:focus {
    outline: none;
}
span:focus {
    outline: none;
}

/* Hide label */
.selectfield label {
    display: none;
}

/* Use custom arrow */
.selectfield select {
    -webkit-appearance: none;
    -moz-appearance: none;
    /* ReSharper disable once CssNotResolved */

    appearance: none;
}
.selectfield {
    font-family: "Siemens Sans", 'Roboto', 'Helvetica', 'Arial', sans-serif;
    position: relative;
}
.selectfield:after {
    position: absolute;
    top: 6px;
    right: 2px;
    /* Styling the down arrow */

    width: 0;
    height: 0;
    padding: 0;
    content: '';
    border-left: .25em solid transparent;
    border-right: .25em solid transparent;
    border-top: 0.375em solid rgba(0, 0, 0, 0.72);
    pointer-events: none;
}
.is_overflow {
    overflow: visible !important;
}
.mdl-icon-calendar-range {
    font-size: 24px;
    vertical-align: middle;
    color: rgba(0, 0, 0, 0.54) !important;
    margin-left: -2px;
    margin-top: -2px;
    margin-right: -5px;
}
.mdl-menu__item {
    height: 32px;
    line-height: 32px;
}
.mdl-menu__item.selected {
    background-color: #dfe6ed !important;
}
.mdl-menu__item-extra {
    height: 42px;
    max-height: 42px;
}
.extra_sub {
    line-height: 32px;
}
.mdl-menu__item-extra-element_sub {
    top: 0;
    padding-top: 14px;
    position: absolute;
    color: #88a9bc;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 12px);
}
.extra_sup {
    line-height: 56px;
}
.mdl-menu__item-extra-element_sup {
    top: 0;
    margin-top: -16px;
    position: absolute;
    color: #88a9bc;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 12px);
}

/* getmdl-select */
.getmdl-select {
    outline: none
}
.getmdl-select .mdl-textfield__input {
    cursor: pointer
}
.getmdl-select .selected {
    background-color: #ddd
}
.getmdl-select .mdl-icon-toggle__label {
    float: right;
    margin-top: -30px;
    color: rgba(0, 0, 0, 0.4);
    transform: rotate(0);
    transition: transform 0.3s
}
.getmdl-select.is-focused .mdl-icon-toggle__label {
    color: #3f51b5;
    transform: rotate(180deg)
}
.getmdl-select .mdl-menu__container {
    width: 100% !important;
    margin-top: 2px
}
.getmdl-select .mdl-menu__container .mdl-menu {
    width: 100%
}
.getmdl-select .mdl-menu__container .mdl-menu .mdl-menu__item {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.getmdl-select__fix-height .mdl-menu__container .mdl-menu {
    overflow-y: auto;
    max-height: 288px !important
}
.getmdl-select__fix-height .mdl-menu.mdl-menu--top-left {
    bottom: auto;
    top: 0
}
.getmdl-select-right .mdl-textfield__input {
    text-align: right;
    margin-right: 21px;
    float: right;
    width: calc(100% - 21px);
}
.getmdl-select-right .mdl-menu__container .mdl-menu .mdl-menu__item {
    text-align: right;
}
.mdl-menu__item.mdl-single__item {
    padding-right: 24px;
    padding-left: 16px;
}
.mdl-menu__item.uncheck,
.mdl-menu__item.check {
    padding-left: 38px;
}
.mdl-menu__item.mdl-submenu__item {
    padding-right: 24px;
    padding-left: 16px;
}
.mdl-menu__item.mdl-submenu__item:after {
    content: "\f142";
    margin-right: 0;
    font-size: 20px;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.54);
    vertical-align: -2px;
    font-family: 'Material Design Icons';
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    word-wrap: normal;
    -moz-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    position: absolute;
    right: 0;
    top: 6px;
}
.mdl-menu__item.uncheck:before {
    content: "\f131";
    margin-right: 0;
    font-size: 20px;
    font-weight: 300;
    color: inherit;
    vertical-align: -2px;
    font-family: 'Material Design Icons';
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    word-wrap: normal;
    -moz-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    position: absolute;
    left: 14px;
    top: 6px;
}
.mdl-menu__item.check:before {
    content: "\fC2E";
    margin-right: 0;
    font-size: 20px;
    font-weight: 300;
    color: inherit;
    vertical-align: -2px;
    font-family: 'Material Design Icons';
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    word-wrap: normal;
    -moz-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    position: absolute;
    left: 14px;
    top: 6px;
}
.getmdl-select .mdl-icon-toggle__label {
    top: 5px;
    right: -10px;
    font-size: 24px;
}

/*  .getmdl-select .mdl-menu__container {
        overflow: inherit;
        top: 32px;
        width: auto;
    }*/
.getmdl-select.mdl-textfield.properties {
    top: 5px;
}
.getmdl-select .mdl-icon-toggle__label {
    transform: none;
    transition: none;
}
.getmdl-select.is-focused .mdl-icon-toggle__label {
    color: rgba(0, 0, 0, 0.58);
    transform: none;
}
.getmdl-select .mdl-icon-toggle__label {
    color: rgba(0, 0, 0, 0.54);
}
.getmdl-select .selected {
    background-color: #dfe6ed;
}
.getmdl-select__fix-height .mdl-menu__container .mdl-menu {
    overflow-y: auto;
    max-height: 288px !important
}
.getmdl-select__fix-height .mdl-menu.mdl-menu--top-left {
    bottom: auto;
    top: 0
}

/* getmdl-select */
.mdl-field__shift {
    display: block;
    visibility: visible;
    position: absolute;
    right: 20px;
    top: 16px;
}
.mdl-dropdown__edit {
    display: block;
    visibility: visible;
    position: absolute;
    right: -32px;
    top: 4px;
}
.mdl-checkbox__edit {
    display: block;
    visibility: visible;
    position: absolute;
    right: -42px;
    top: 6px;
    cursor: pointer;
}
.mdl-button__delete {
    cursor: pointer;
    display: block;
    position: absolute;
    right: 24px;
    top: 12px;
    visibility: visible;
}
.mdl-button__delete.disabled {
    color: #788791 !important;
}
.mdl-button__state {
    display: block;
    visibility: visible;
    cursor: pointer;
    opacity: 0.1;
    padding-right: 16px;
    margin-top: 3px;
}
.mdl-menu__item:hover {
    background: #cdd9e1;
    color: #005578;
}
.mdl-menu__item:hover:not(.disabled)>i {
    color: #005578 !important;
}
.settings_wrapper {
    display: flex;
    flex-flow: wrap;
    justify-content: flex-end;
}
.settings_first {
    font-size: 12px;
    margin-top: 2px;
}
.settings_second {
    margin-top: 6px;
    overflow: hidden;
}
.mdl-Settings-button {
    height: 27px;
    line-height: 27px;
    text-transform: none;
    padding: 0 8px;
}
.button-size-l {
    min-width: 136px;
}
.button-size-m {
    min-width: 95px;
}
.button-size-xl {
    min-width: 163px;
}
.button-size-xxl {
    min-width: 201px;
}
.button-fixed-size-xxl {
    min-width: 201px;
}
.service-failure-badge {
    background: #c5222a;
    text-align: center;
    color: white;
    padding: 0 4px 0 4px;
    font-size: 12px;
    font-family: monospace;
    display: none;
}
.service-failure-badge.visible {
    display: block !important;
}
.udc-badge {
    position: absolute;
    right: 32px;
    top: 15px;
    background: #005578;
    text-align: center;
    /*border-radius: 22px 22px 22px 22px;*/

    color: white;
    padding: 1px 4px 1px 4px;
    font-size: 11px;
}
.udc-badge-red {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    background: #c5222a;
    text-align: center;
    border-radius: 22px 22px 22px 22px;
    color: white;
    padding: 0px 3px 0px 3px;
    font-size: 11px;
    cursor: default;
    border: 1px solid #fff;
    background-clip: padding-box;
}
.udc-badge-dd {
    display: inline-block;
    height: 18px;
    line-height: 18px;
    left: 16px;
    right: inherit;
}
.udc-badge-pulse {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    background: #c5222a;
    text-align: center;
    border-radius: 22px 22px 22px 22px;
    color: white;
    padding: 1px 4px 1px 4px;
    font-size: 11px;
    cursor: default;
}
.cert-badge-red {
    position: relative;
    right: -30px;
    top: 16px;
}
.mdl-cell_wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.mdl-cell_slider {
    width: 2000px;
    height: 100%;
    position: absolute;
    white-space: nowrap;
}
.mdl-cell_slider>div {
    width: 100%;
    height: 100%;
    float: left;
    padding-top: 11px;
}
.mdl-cell_slider>div:first-child {
    padding-top: 16px !important;
}
.item-breadcrumb {
    font-size: 11px;
    /*font-family: monospace;
    text-transform: uppercase;*/

    color: #88a9bc;
}
.toggle-sidebar-button {
    color: #555554;
    font-size: 13px;
    line-height: 27px;
    font-weight: 500;
    opacity: 1;
    padding: 1px 1px 1px 9px;
    position: relative;
    display: block;
    background-color: #dfe6ed;
    text-decoration: none;
    display: none;
}
@media screen and (min-width: 640px) and (min-height: 450px) {
    a.toggle-sidebar-button {
        display: block;
    }
}
.toggle-sidebar-button .material-icons {
    vertical-align: middle;
    padding-bottom: 4px;
    font-size: 20px;
}
.alert_color {
    color: #c62828 !important;
}
.breaker_state {
/*    width: 91px;
    height: 134px;
*/}
.flow_state {
    height: 74px;
    padding: 4px 0 4px 0;
    width: 40px;
}
.flow_state.disabled {
    opacity: 0.8;
    filter: grayscale(100%);
    -webkit-filter: grayscale(67%);
}
.widget_header_icon {
    width: 24px;
    height: 24px;
}
.svg_16 {
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
}
div[data-tooltip] {
    color: #005578;
}
div.max_value::before {
    content: url(../images/max.png);
    float: right;
    padding-top: 1px;
    margin-left: 2px;
}
.div.max_value:empty {
    display: none;
}
div.min_value::before {
    content: url(../images/min.png);
    float: right;
    padding-top: 1px;
    margin-left: 2px;
}
.sticky-btn {
    position: sticky;
    float: right;
}
.mdl-selectfield__box {
    max-height: 24px;
}
.mdl-selectfield {
    height: 64px;
}
.mdl-selectfield__properties .mdl-selectfield__box {
    /*position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 19px;
    border-bottom: none;
    outline: none;
    overflow: hidden;*/

    cursor: pointer;
    top: -9px;
    overflow: visible;
    border-bottom: none;
}
.mdl-selectfield.mdl-selectfield__properties {
    width: 100%;
    cursor: pointer;
}
.mdl-selectfield__properties .mdl-selectfield__box .mdl-selectfield__box-value {
    width: calc(100% - 28px);
    text-align: right;
    cursor: pointer;
}
.mdl-selectfield__properties.is-focused .mdl-selectfield__box {
    outline: none;
    visibility: visible;
}
.mdl-selectfield__properties.is-focused .mdl-selectfield__box>.mdl-selectfield__arrow-down__container {
    visibility: visible;
}
.mdl-selectfield__properties .mdl-selectfield__box>.mdl-selectfield__arrow-down__container .mdl-selectfield__arrow-down {
    display: block;
    outline: none;
    border: none;
    margin-top: 3px;
    margin-left: -1px;
    cursor: pointer;
}
.mdl-selectfield__properties .mdl-selectfield__box>.mdl-selectfield__arrow-down__container .mdl-selectfield__arrow-down:after {
    content: "\f140";
    font-size: 24px;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.54);
    font-family: 'Material Design Icons';
    font-style: normal;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    word-wrap: normal;
    -moz-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}
.mdl-selectfield__properties .mdl-selectfield__list-option-box {
    top: 22px;
    outline: none;
}
.mdl-selectfield__properties {
    /*position: relative;
    display: block;
    box-sizing: initial;
    width: auto;
    max-width: 100%;
    margin: 0;
    vertical-align: middle;
    line-height: inherit;
    font-size: 16px;
    padding: 0;
    z-index: inherit;
    height: 24px !important;*/

    height: auto;
    padding: 0;
}
.offline-badge {
    position: absolute;
    top: 11px;
    right: -5px;
}
.blurred {
    color: transparent;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
}
.svgblur {
    -webkit-filter: blur(10px);
    filter: blur(10px);
}
.mdl-mini-footer__left-section li i {
    font-size: 21px;
    vertical-align: middle;
    margin-bottom: 1px;
}
.mdl-mini-footer__left-section li:hover {
    color: #005578 !important;
}
.mdl-mini-footer__left-section li:hover i {
    color: #005578 !important;
}
.mdl-mini-footer--link-list li,
.mdl-mini-footer__link-list li {
    line-height: 36px;
}
.toggle-sidebar-button:hover {
    color: #005578 !important;
}
.toggle-sidebar-button:hover i {
    color: #005578 !important;
}
.md-52.mdi-set {
    font-size: 52px;
    color: rgba(0, 0, 0, 0.4);
    margin-top: 15px;
    font-weight: 700;
}
.md-64.mdi-set {
    font-size: 64px;
    color: #555554;
    margin-top: 15px;
    font-weight: 700;
}
.mdi-log.mdi-set {
    font-size: 36px;
    vertical-align: middle;
    color: #005f87 !important;
    padding-top: 9px;
}
.mdi-header.mdi-set {
    font-size: 24px;
    vertical-align: middle;
    color: rgba(0, 0, 0, 0.54) !important;
    margin-left: -2px;
    margin-top: -2px;
}
.mdi-dots.mdi-set {
    font-size: 24px;
    vertical-align: middle;
    color: rgba(0, 0, 0, 0.54) !important;
    margin-top: -10px;
    margin-left: 0;
}
.mdi-dots-table.mdi-set {
    font-size: 24px;
    vertical-align: middle;
    color: rgba(0, 0, 0, 0.54) !important;
    margin-top: -10px;
}
.mdi-top.mdi-set {
    font-size: 24px;
    vertical-align: middle;
    color: rgba(0, 0, 0, 0.54) !important;
    margin-top: 8px;
}
.mdi-nav.mdi-set {
    font-size: 24px;
    vertical-align: middle;
    margin-top: -2px;
    padding-right: 4px;
}
.mdi-tabs.mdi-set {
    font-size: 24px;
    vertical-align: middle;
    margin-top: -2px;
    /*height: 38px;*/
}
.mdi-ddgrid.mdi-set {
    font-size: 30px;
    vertical-align: middle;
    margin-top: -20px;
}
.mdi-buttons.mdi-set {
    font-size: 24px;
    color: rgba(0, 0, 0, 0.54) !important;
}
.mdi-toggles {
    font-weight: 100;
    color: inherit;
    vertical-align: top;
    font-family: 'archives';
    font-style: normal;
    line-height: 20px;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    word-wrap: normal;
    -moz-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-size: 22px;
    color: #879baa !important;
    margin: 3px;
}
.mdi-button-rect.mdi-set {
    font-size: 18px;
    vertical-align: middle;
    color: rgba(0, 0, 0, 0.66) !important;
    margin-top: -2px;
    padding-right: 3px;
}
.mdi-ava.mdi-set {
    font-size: 24px;
    vertical-align: middle;
    color: white !important;
    margin-top: -2px;
}

.mdi-archivetoggle.mdi-set {
    font-size: 14px;
    vertical-align: middle;
    margin-top: -2px;
}
.mdi-fab {
    border-radius: 50%;
    height: 32px;
    margin: auto;
    min-width: 32px;
    width: 32px;
    overflow: hidden;
    background: #32a0a0;
    color: white;
    position: absolute;
    top: 12px;
    text-align: center;
    left: 10px;
}
.mdi-smenu.mdi-set {
    font-size: 18px;
    vertical-align: middle;
    color: rgba(0, 0, 0, 0.54) !important;
    padding-right: 7px;
    padding-bottom: 2px;
}
.mdi-pinner.mdi-set {
    font-size: 19px;
    vertical-align: middle;
    color: rgba(0, 0, 0, 0.54) !important;
    margin-top: 6px;
}
.mdi-wbuttons.mdi-set {
    font-size: 32px;
    vertical-align: middle;
    color: rgba(0, 0, 0, 0.54);
}
.mdi-widget.mdi-set {
    font-size: 14px;
    margin-right: 4px;
    vertical-align: middle;
    color: #788791 !important;
}
.mdi-cardtoolbar.mdi-set {
    font-size: 14px;
    vertical-align: middle;
}
.mdi-ident.mdi-set {
    font-size: 13px;
    vertical-align: top;
    color: #fff !important;
    animation: colorchange 2s infinite;
    -webkit-animation: colorchange 2s infinite;
}
@keyframes colorchange {
    0% {
        color: white;
    }

    50% {
        color: #f0313a;
    }

    100% {
        color: white;
    }
}
@-webkit-keyframes colorchange {
    0% {
        color: white;
    }

    50% {
        color: #f0313a;
    }

    100% {
        color: white;
    }
}
.mdi-infobar.mdi-set {
    font-size: 11px;
    vertical-align: top;
    color: white !important;
    font-weight: 100;
}
.overview>.mdi-tri.mdi-set {
    top: -23px;
}
.mdi-sf {
    font-size: 12px;
    vertical-align: middle;
    color: #fff !important;
    position: absolute;
    top: -23px;
    right: -12px;
    font-weight: bold;
    font-family: monospace;
}
.mdi-tri.mdi-set {
    font-size: 14px;
    vertical-align: middle;
    color: #fff !important;
    position: absolute;
    top: -24px;
    right: 0;
}
.mdi-daterange.mdi-set {
    font-size: 16px;
    vertical-align: middle;
    color: rgba(0, 0, 0, 0.54) !important;
    margin-left: -2px;
    margin-top: -2px;
    padding: 0 4px 0 3px;
}
.mdi-24px.mdi-set {
    margin-top: 3px;
    font-size: 20px;
}
.footer {
    position: fixed;
    display: block;
    right: 0;
    bottom: 0;
    z-index: 900;
    left: 0;
    height: 30px;
    vertical-align: middle;
    line-height: 30px;
    text-align: center;
    background: #ccc;
}
.copyright {
    padding-top: 30px;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}
.dot_nav.disabled {
    display: none;
}
.arrows.disabled {
    display: none;
}
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.archive-chart-title-container {
    color: #2d373c;
    display: table-cell;
    font-size: 16px;
    padding-left: 16px;
    vertical-align: middle;
    width: auto;
    height: 38px;
    padding-right: 204px;
}
.archive-chart-title {
    display: inline;
    max-height: 38.3px;
    margin: 0 auto;
    font-size: 16px;
    line-height: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    padding-top: 6px;
}
.archive-chart-legend {
    position: absolute;
    bottom: -60px;
    width: 50%;
}
.archive-chart-legend ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: right;
    font-size: 12px;
    color: #666;
    padding-right: 16px;
}
.archive-chart-legend li {
    display: inline-table;
    margin: 15px 6px;
}
.archive-chart-legend li span {
    position: relative;
    border-radius: 10px;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
}
.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {
    min-width: 0;
    width: auto;
}
.daterangepicker .calendar-table th {
    padding: 6px 4px 4px 10px;
}
.daterangepicker td.in-range {
    background-color: #dfe6ed;
}
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #005578;
}
.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background-color: #cdd9e1;
}
.daterangepicker .ranges li.active {
    background-color: #dfe6ed;
    color: inherit;
}
.daterangepicker .ranges li:hover:not(.active) {
    background: #cdd9e1;
    color: #005578;
}
.daterangepicker:before {
    top: 0;
    border-right: 0 solid transparent;
    border-left: 0 solid transparent;
    border-bottom: 0 solid transparent;
}
.daterangepicker:after {
    top: 0;
    border-right: 0 solid transparent;
    border-bottom: 0 solid transparent;
    border-left: 0 solid transparent;
}
.daterangepicker {
    font-family: "Siemens Sans", "RobotoDraft", "Roboto", sans-serif;
    color: rgba(0, 0, 0, 0.87);
    padding: 12px 0px 12px 0px;
    background-color: #FFFFFF;
    border-radius: 2px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.daterangepicker .drp-buttons {
    padding: 11px 14px 0px 2px;
}
.daterangepicker td.end-date {
    border-radius: 0 12px 12px 0;
}
.daterangepicker td.start-date {
    border-radius: 12px 0 0 12px;
}
.daterangepicker .drp-buttons .btn {
    margin-left: 16px;
    font-size: 13px;
    font-weight: normal;
    padding: 1px 6px;
}
.daterangepicker .ranges li {
    font-size: 14px;
    padding: 0 16px;
    line-height: 32px;
    cursor: pointer;
}
@media (min-width: 730px) {
    .daterangepicker .ranges {
        width: 180px;
    }
}
@media (min-width: 564px) {
    .daterangepicker .ranges ul {
        width: 100%;
    }
}
.datebox {
    cursor: pointer;
    width: auto;
    position: absolute;
    z-index: 999;
    right: 12px;
    color: #2D373C;
    top: 56px;
    background: #fff;
}
.dropdown-header-account {
    display: block;
    padding: 8px 12px 1px 12px;
    font-size: 13px;
    line-height: 30px;
    color: rgba(0, 0, 0, .87);
    background: white;
    white-space: nowrap;
    height: 45px;
    background: #ebf0f5;
    margin-top: -8px;
}
.account-wrap {
    display: flex !important;
}
.account-name {
    margin-top: 0;
    margin-bottom: 0 !important;
    font-weight: 400;
    line-height: 1.2;
    color: #2d373c;
    font-size: 16px;
}
.dropdown-header {
    display: block;
    padding: 3px 12px;
    font-size: 13px;
    line-height: 18px;
    color: #2d373c;
    background: #c2cdd5;
    white-space: nowrap;
}
li.dropdown-spacer {
    list-style: none;
    display: block;
    background: #c2cdd5;
    height: 3px;
    float: left;
    width: 100%;
}
ul.dropdown {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 226px;
    background: #EBF0F5;
}
li.dropdown {
    float: left;
    margin: 0.5px;
    height: 58px;
    width: 108px;
    background: #fff;
    padding: 2px;
    cursor: pointer;
}
li.dropdown:hover {
    background: #cdd9e1;
}
.dropdown-item:hover:not(.dropdown-item-active) {
    color: white !important;
}
.dropdown-item:hover:not(.dropdown-item-active)>.dd-service-svg {
    fill: white !important;
}
.dropdown-item {
    position: relative;
    width: 100%;
    height: 100%;
    line-height: 11px;
    font-size: 11px;
    /*color: #788791;*/

    color: #abbac4;
    text-align: center;
    padding: 1px;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -ms-flex-pack: justify;
    align-items: center;
    -ms-flex-align: center;
}
.dropdown-item span {
    z-index: 9999;
}
.dropdown-item-active {
    color: #005578 !important;
}
.dropdown-item-active svg {
    fill: #005578 !important;
}
.dropdown-text {
    position: absolute;
    width: 97px;
    padding-top: 32px;
}
@media all and (-ms-high-contrast:none) {
    *::-ms-backdrop,
    .dropdown-text {
        padding-top: 8px;
        margin-left: -104px;
    }
    /* IE11 */
}
.service-failure {
    position: absolute;
    cursor: default;
    top: -2px;
    left: -2px;
    width: 0;
    height: 0;
    border-top: 25px solid #c5222a;
    border-right: 25px solid transparent;
    cursor: default;
    display: none;
}
.service-failure.visible {
    display: block !important;
}
.triangle-topright {
    position: absolute;
    color: #000;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 25px solid #005578;
    border-left: 25px solid transparent;
    cursor: default;
    display: none;
}
.triangle-topright.overview {
    top: unset;
    right: unset;
}
.triangle-topright.visible {
    display: block !important;
    top: -2px;
    right: 0px;
}
.notifyjs-corner {
    margin-right: 16px !important;
}
.notifyjs-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
}
.notifyjs-noti-base {
    z-index: 999;
    background: rgba(97, 97, 97, .9);
    border-radius: 2px;
    color: #fff;
    display: flex;
    flex-flow: row nowrap;
    /* ReSharper disable once UnexpectedValue */

    justify-content: flex-start space-around;
    align-items: center;
    font-weight: 500;
    line-height: 14px;
    max-width: 310px;
    padding: 8px;
}
.notifyjs-noti-base .title i {
    color: #c2cdd5 !important;
    font-weight: 100;
    font-size: 11px;
    font-style: italic;
}
.notifyjs-noti-base .title {
    font-size: 12px;
    width: auto;
    float: left;
}
.notifyjs-noti-base .img {
    float: left;
    width: 32px;
}
.notifyjs-noti-alarm .img {
    min-width: 32px;
    min-height: 32px;
    content: "";
    background-image: url('../images/error.svg');
    background-repeat: no-repeat;
    background-position: left center;
    margin-right: 7px;
}
.notifyjs-noti-warning .img {
    min-width: 32px;
    min-height: 32px;
    content: "";
    background-image: url('../images/warning.svg');
    background-repeat: no-repeat;
    background-position: left center;
    margin-right: 7px;
}
.notifyjs-noti-information .img {
    min-width: 32px;
    min-height: 32px;
    content: "";
    background-image: url('../images/info.svg');
    background-repeat: no-repeat;
    background-position: left center;
    margin-right: 7px;
}
.notifyjs-noti-base .buttons {
    min-width: 70px;
    float: right;
    font-size: 9px;
    padding: 5px;
    margin: 2px;
}
.notifyjs-noti-base button {
    font-size: 9px;
    padding: 5px;
    margin: 2px;
    width: 60px;
}
tr.tt-child td,
tr.expandable td {
    height: auto !important;
}
tr.tt-child,
tr.expandable {
    height: auto !important;
}
.mdl-data-tree-table td {
    border-top: 0px solid #fff;
}
.mdl-data-tree-table tr {
    border-top: 1px solid #DCDAE1;
}
.mdl-data-tree-table td:first-of-type {
    width: 36px;
}
tr.tt-child.notvisible,
tr.expandable.notvisible {
    border-top: 0px solid #fff;
}
div.tt-arrow {
    padding: 0;
    height: 42px;
    position: relative;
    top: 11px;
    left: -15px;
}
tr[data-level="1"] td:nth-child(2) {
    padding-left: 15px;
}
tr[data-level="2"] td:nth-child(2) {
    padding-left: 30px;
}
tr[data-level="3"] td:nth-child(2) {
    padding-left: 45px;
}
tr[data-level="4"] td:nth-child(2) {
    padding-left: 60px;
}
tr[data-level="5"] td:nth-child(2) {
    padding-left: 75px;
}
tr[data-level="1"] td:nth-child(1) {
    padding-left: 40px;
}
tr[data-level="2"] td:nth-child(1) {
    padding-left: 55px;
}
tr[data-level="3"] td:nth-child(1) {
    padding-left: 70px;
}
tr[data-level="4"] td:nth-child(1) {
    padding-left: 85px;
}
tr[data-level="5"] td:nth-child(1) {
    padding-left: 100px;
}
div.mdl-collapsibel {
    cursor: pointer;
}
.dataRangeBox {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    align-content: center;
    margin-top: 2px;
    margin-right: -1px;
}
#header-bar:before {
    content: ' ';
    display: block;
    height: 4px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    background-image: -owg-linear-gradient(to right, #50bebe 0%, #099 33%, #0099b0 66%, #0099cb 100%);
    background-image: -webkit-linear-gradient(to right, #50bebe 0%, #099 33%, #0099b0 66%, #0099cb 100%);
    background-image: -moz-linear-gradient(to right, #50bebe 0%, #099 33%, #0099b0 66%, #0099cb 100%);
    background-image: -o-linear-gradient(to right, #50bebe 0%, #099 33%, #0099b0 66%, #0099cb 100%);
    background-image: linear-gradient(to right, #50bebe 0%, #099 33%, #0099b0 66%, #0099cb 100%);
    z-index: 9999;
}
.header-bar-interface,
.header-bar-info {
    background-color: #0099C4;
    color: #ffffff;
    font-family: "Siemens Sans Bold", Arial, sans-serif;
    font-size: 9px;
    padding: 2px 6px 0 0;
    position: absolute;
    right: 30px;
    text-transform: uppercase;
    top: -3px;
    -moz-border-radius-bottomright: 3px;
    -webkit-border-bottom-right-radius: 3px;
    border-bottom-right-radius: 3px;
    z-index: 99999;
    border-right: 1px solid #0088ad;
    cursor: default;
}
.header-bar-info:after {
    background-color: #0099C4;
    bottom: 0;
    content: '';
    display: block;
    height: 11px;
    left: -8px;
    position: absolute;
    transform: skewX(45deg);
    width: 15px;
    z-index: -1;
    -moz-border-radius-bottomleft: 2px;
    -webkit-border-bottom-left-radius: 2px;
    border-bottom-left-radius: 2px;
    cursor: default;
}
.header-bar-interface:after {
    background-color: #0099C4;
    bottom: 0;
    content: '';
    display: block;
    height: 11px;
    left: -8px;
    position: absolute;
    transform: skewX(45deg);
    width: 15px;
    z-index: -1;
    -moz-border-radius-bottomleft: 2px;
    -webkit-border-bottom-left-radius: 2px;
    border-bottom-left-radius: 2px;
    cursor: default;
}
.header-bar-interface {
    right: 60px;
}
.sonar-wrapper {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -1;
    overflow: hidden;
}
.sonar-emitter {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 275px;
    height: 275px;
    background-color: transparent;
}
.sonar-wave {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    background-color: white;
    opacity: 0;
    z-index: -1;
    pointer-events: none;
}
.sonar-wave {
    animation: sonarWave 1.67s ease 2s infinite;
}
.sonar-wave-stop {
    animation-play-state: paused;
    /*display: none;*/
}
@keyframes sonarWave {
    from {
        transform: scale(.3);
        opacity: 0.6;
    }

    to {
        transform: scale(4.8);
        opacity: 0.1;
    }
}
.cm_notsupported {
    height: 100%;
    line-height: 139px;
    text-align: center;
}
.cm_notsupported span {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    padding: 0 8px 0 8px;
}
.cm_indicator {
    height: 72px;
    padding: 16px 24px 0 24px;
}
.cm_remainingtime {
    height: 56px;
    padding: 0 24px 0 24px;
}
.cm_progress {
    position: relative;
    height: 22px;
    background: rgb(255, 0, 0);
    background: -moz-linear-gradient(left, #ff3b30 0%, #ffcc00 15%, #4dd864 33%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ff3b30), color-stop(15%, #ffcc00), color-stop(33%, #4dd864));
    background: -webkit-linear-gradient(left, #ff3b30 0%, #ffcc00 15%, #4dd864 33%);
    background: -o-linear-gradient(left, #ff3b30 0%, #ffcc00 15%, #4dd864 33%);
    background: -ms-linear-gradient(left, #ff3b30 0%, #ffcc00 15%, #4dd864 33%);
    background: linear-gradient(to right, #ff3b30 0%, #ffcc00 15%, #4dd864 33%);
    /* ReSharper disable once InvalidValue */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3b30', endColorstr='#4dd864', GradientType=1);
}
.cm_amount {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    transition: all 0.8s;
    background: #ededed;
    width: 100%;
}
.cm_amount_left:before {
    content: attr(data-amount)"%";
    position: absolute;
    top: 26px;
    left: 0;
    height: 100%;
    z-index: 10;
    text-align: start;
    line-height: 14px;
}
.cm_amount_right:before {
    content: attr(data-amount)"%";
    position: absolute;
    top: 26px;
    left: -26px;
    height: 100%;
    z-index: 10;
    text-align: start;
    line-height: 14px;
}
.cm_lf-row {
    display: flex;
    align-items: center;
}
.cm_lf-box {
    height: 18px;
    width: 18px;
    min-width: 18px;
    border: 1px solid #788791;
    margin-right: 12px;
}
.red {
    background-color: #ff3b30;
}
.green {
    background-color: #4dd864;
}
.yellow {
    background-color: #ffcc00;
}
.mdl-checkbox.is-checked .mdl-checkbox__box-outline {
    border: 2px solid #005f87;
}
.mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
    background: #005f87 url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K);
}
.mdl-checkbox {
    font-size: 14px;
    color: #555554;
}
.nav-header {}
.nav-main {
    overflow-y: auto;
}
.nav-footer {}
.pac-drawer {
    display: grid;
    height: calc(100vh - 4px);
    grid-template-rows: auto 1fr auto;
}

#network {
    width: 100%;
    height: 100%;
    padding-top: 38px
}
div.vis-tooltip {
    position: absolute;
    visibility: hidden;
    background: rgba(97, 97, 97, .9);
    border-radius: 2px;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    line-height: 14px;
    max-width: 170px;
    word-break: break-word;
    top: -500px;
    left: -500px;
    padding: 6px;
    text-align: center;
    pointer-events: none;
    z-index: 5;
    white-space: normal;
}
div.vis-tooltip:empty {
    padding: 0;
}
.center {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.network-ground {
    min-height: 100%;
    height: calc(100vh - 65px);
}
.network-container {
    height: calc(100% - 38px);
    width: 100%;
}
.udc-scan-button {
    margin: 2px 5px 0 5px;
}
.int-ext-search-icon {
    width: 20px;
    white-space: nowrap;
    overflow-x: hidden;
    filter: invert(46%) sepia(6%) saturate(87%) hue-rotate(315deg) brightness(33%) contrast(111%);
}
.svg-button-icon {
    width: 20px;
    height: 20px;
    white-space: nowrap;
    overflow-x: hidden;
    filter: invert(48%) sepia(0%) saturate(249%) hue-rotate( 161deg) brightness(95%) contrast(89%);
}

.search-results {
    display: none;
    font-size: 13px;
    height: 38px;
    left: 10px;
    overflow: hidden;
    padding: 6px 0 0 8px;
    text-overflow: ellipsis;
    top: 3px;
    white-space: nowrap;
}
.search-results.is-active {
    display: block !important;
}
.header-network {
    height: 38px;
    background: #ffffff;
    position: absolute;
    top: 0px;
    z-index: 999;
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, .12);
    box-shadow: 0 1px 0px 0 rgba(0, 0, 0, .12);
    color: #555554;
    font-size: 13px;
    line-height: 27px;
    font-weight: 500;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    padding-right: 8px;
}

.pause span {
    -webkit-animation-play-state: paused !important;
    -moz-animation-play-state: paused !important;
    -o-animation-play-state: paused !important;
    animation-play-state: paused !important;
}
.ani_arrow.pause>span {
    display: none;
}
.ani_arrow {
    position: absolute;
    top: 30px;
    overflow: hidden;
    height: 80px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 22px;
}
.ani_arrow span {
    display: block;
    width: 10px;
    height: 1px;
    margin: 1px;
    animation: arrowanim 3s infinite;
}
.ani_arrow.reverse span {
    animation: arrowanimrev 3s infinite;
}
.flow {
    position: relative;
    text-align: center;
    padding: 5px;
    margin-bottom: 10px;
    height: 10px;
    width: 10px;
}
.flow:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 7px;
    width: 50%;
    background: #ffffff;
    transform: skew(0deg, 63deg);
    filter: blur(1px);
    -o-filter: blur(1px);
    -ms-filter: blur(1px);
    -moz-filter: blur(1px);
    -webkit-filter: blur(1px);
}
.flow:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 7px;
    width: 50%;
    background: #ffffff;
    transform: skew(0deg, -63deg);
    filter: blur(1px);
    -o-filter: blur(1px);
    -ms-filter: blur(1px);
    -moz-filter: blur(1px);
    -webkit-filter: blur(1px);
}
.reverse .flow:before {
    transform: skew(0deg, -63deg) !important;
}
.reverse .flow:after {
    transform: skew(0deg, 63deg) !important;
}
.ani_arrow span:nth-child(1) {
    animation-delay: -0.1s;
}
.ani_arrow span:nth-child(2) {
    animation-delay: -0.2s;
}
.ani_arrow span:nth-child(3) {
    animation-delay: -0.3s;
}
.ani_arrow span:nth-child(4) {
    animation-delay: -0.4s;
}
.ani_arrow span:nth-child(5) {
    animation-delay: -0.5s;
}
.ani_arrow.reverse span:nth-child(1) {
    animation-delay: -0.5s;
}
.ani_arrow.reverse span:nth-child(2) {
    animation-delay: -0.4s;
}
.ani_arrow.reverse span:nth-child(3) {
    animation-delay: -0.3s;
}
.ani_arrow.reverse span:nth-child(4) {
    animation-delay: -0.2s;
}
.ani_arrow.reverse span:nth-child(5) {
    animation-delay: -0.1s;
}
@keyframes arrowanim {
    0% {
        opacity: 0;
        transform: rotate(0deg) translate(0px, -50px);
    }

    35% {
        opacity: .8;
    }

    75% {
        opacity: .3;
    }

    100% {
        opacity: .1;
        transform: rotate(0deg) translate(0px, 50px);
    }
}
@keyframes arrowanimrev {
    0% {
        opacity: 0;
        transform: rotate(0deg) translate(0px, 70px);
    }

    35% {
        opacity: .8;
    }

    75% {
        opacity: .3;
    }

    100% {
        opacity: .1;
        transform: rotate(0deg) translate(0px, -30px);
    }
}
.doughnut-label-wrapper {
    position: relative;
    overflow: hidden;
    width: 440px;
    white-space: nowrap;
}
.doughnut-slide>div {
    display: inline-block;
    vertical-align: middle;
}
.doughnut-slide {
    display: none;
    transition: all 0.167s ease-in-out;
}
.mdl-password__lookup {
    display: block;
    visibility: visible;
    position: absolute;
    right: -1px;
    top: 21px;
    cursor: pointer;
    line-height: 22px;
    padding-left: 2px;
}
.limit-text {
    position: absolute;
    text-align: end;
    bottom: 44px;
    right: calc(50% + 64px);
    font-size: 11px;
}
.invalid-part {
    display: none;
}
.react-toolbar {
    width: 100%;
    width: -moz-available;
    /* WebKit-based browsers will ignore this. */

    width: -webkit-fill-available;
    /* Mozilla-based browsers will ignore this. */
}
.mdl-toolbar {
    width: 100%;
    overflow: inherit;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    min-height: 70px;
    position: relative;
    align-items: center;
    padding-bottom: 8px;
}
.mdl-toolbar__cell {
    margin: 0 6px 0 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow: inherit;
    position: relative;
    background: #fff;
    box-sizing: border-box;
    /*border-right: 4px solid #ebf0f5;*/
    height: 100%;
    justify-content: space-around;
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 1px -2px rgb(0 0 0 / 14%), 0 1px 1px -1px rgb(0 0 0 / 6%);
    flex-grow: 1;
}
.mdl-toolbar__cell:last-child {
   margin: 0;
}
.cell_content {
    height: auto;
    min-height: 28px;
}
.cell_top,
.cell_bottom {
    color: #788791;
    font-size: 12px;
    line-height: 12px;
    min-height: 16px;
    /*background: #009999;*/
    display: block;
}
.cell_count {
    font-size: 28px;
    font-weight: 900;
    color: #005578;
    /*text-shadow: -0.06ex 0 #005578, 0.06ex 0 #005578;*/

    letter-spacing: 1px;
    padding: 6px 8px 6px 8px;
}
.cell_container {
    margin: 6px 6px 0 6px;
    min-width: 66px;
    height: 100%;
}
.cell_container-max {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}
.scripts-Toolbar-Toolbar-module__toolbar-filter {
    min-width: 50px;
    width: calc(100% - 35px);
    padding: 3px 16px 0px 8px;
}
.scripts-Toolbar-Toolbar-module__toolbar-filter__textfield {
    top: 0px !important;
    width: 100% !important;
}
.scripts-Toolbar-Toolbar-module__toolbar-filter__textfield-input {
    background-color: #f5f6f7;
    border-bottom: none;
    font-size: 13px !important;
    padding-left: 0.25em;
    padding-right: 1.5em;
}
.scripts-Toolbar-Toolbar-module__toolbar-filter__icon {
    cursor: pointer;
    float: right;
    font-size: 16px !important;
    margin-top: 3px !important;
    padding-left: 0.25em;
    padding-right: 0.25em;
    position: absolute;
}
.slotcounter {
    overflow: hidden;
    font-size: 24px;
    font-weight: 900;
    color: #005578;
    height: 1em;
    padding: 2px;
}
.slotcounter ul {
    padding-inline-start: 0.02em;
    font-weight: 900;
}
.digits {
    float: left;
    list-style-type: none;
    font-size: 1em;
    line-height: 1em;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-delay: 1.2s;
    animation-fill-mode: forwards;
}
.digits-first {
    margin-top: -4em;
}
.digits-second {
    margin-top: -5em;
}
.digits-third {
    margin-top: -6em;
}
.ones {
    animation-name: ones;
}
@keyframes ones {
    100% {
        margin-top: -2em;
    }
}
.tens {
    animation-name: tens;
}
@keyframes tens {
    100% {
        margin-top: -1em;
    }
}
.hunds {
    animation-name: hunds;
}
@keyframes hunds {
    100% {
        margin-top: -1em;
    }
}

.tree-badge-green {
    width: 16px;
    height: 16px;
    background-image: url(../images/okay.svg);
}

.tree-badge-load {
    width: 16px;
    height: 16px;
    background-image: url(../images/loader.svg);
}

.tree-badge-red {
    width: 16px;
    height: 16px;
    background-image: url(../images/error.svg);
}

.printheader {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    font-size: 12px;
    justify-content: space-between;
    left: 7mm;
    position: fixed;
    text-align: center;
    top: 0;
    width: calc(100% - 11mm);
    z-index: 10;
}

.printfooter {
    align-items: center;
    bottom: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    font-size: 12px;
    justify-content: space-between;
    left: 7mm;
    position: fixed;
    text-align: center;
    width: calc(100% - 11mm);
    z-index: 10;
}

@media screen {
    .printheader, .printfooter {
        display: none !important;
    }
}

@page {
    margin: 10mm 4mm 4mm 15mm;
}

@media print {
    html, body {
        height: 297mm;
        width: 210mm;
        position: inherit !important;
    }

    .mdl-layout {
        height: auto;
    }

    .udc-backcolor {
        background-color: white !important;
    }

    .mdl-layout__header {
        display: none !important;
    }

    #react-breadcrumb {
        display: none !important;
    }

    .pac-drawer {
        display: none !important;
    }

    .mdl-layout__content {
        margin-left: 0px !important;
    }

    .ctx-menu, .lib-switcher, .mdl-snackbar, .sonar-wrapper, .noprint {
        display: none !important;
    }

    .scripts-Widgets-ArchiveChart-ArchiveChartWidget-module__dateBox .mdl-button {
        display: none !important;
    }

    .widget-cols2,
    .widget-cols3,
    .widget-cols4,
    .widget-cols6 {
        width: calc(50% - 6mm) !important;
    }

    .mdl-data-table tbody tr {
        background-color: #fff !important;
    }

    a, a:visited {
        text-decoration: underline
    }

    a[href]:after {
        content: " (" attr(href)")"
    }

    abbr[title]:after {
        content: " (" attr(title)")"
    }

    a[href^="#"]:after, a[href^="javascript:"]:after {
        content: ""
    }

    pre, blockquote {
        border: 1px solid #999;
        page-break-inside: avoid
    }

    thead {
        display: table-header-group
    }

    tr, img {
        page-break-inside: avoid
    }

    img {
        max-width: 100% !important
    }

    p, h2, h3 {
        orphans: 3;
        widows: 3
    }

    h2, h3 {
        page-break-after: avoid
    }
}