:root {
    --menu-width: 240px;
    --toolbar-height: 52px;

    --bg-color: #f2f5f7;
    --menu-color: #fff;
    --line-color: #eef1f2;
    --line-color-opacity: #EEF1F28A;
    --text-color: #353d52;

    --green: #8BC34A;
    --green-light: #f1faed;
    --green-opacity: #8BC34A8A;
    --green-dark: #689F38;
    --blue: #0070E0;
    --blue-dark: #005ab4;
    --blue-light: #eef3ff;
    --blue-hue: #94c7f2;
    --blue-opacity: #0070e00d;
    --red: #FF5722;
    --red-opacity: #FF57228A;
    --red-opacity-27: rgba(255, 87, 34, 0.27);
    --red-light: #EF6C00;
    --orange: #FFA000;
    --yellow: #FFEB3B;
    --yellow-accent: #FFD740;
    --sea: #6f76fa;
    --sea-light: #7c8efb;

    --gray: #637282;
    --black-24: rgba(0, 0, 0, 0.24);
    --black-40: rgba(0, 0, 0, 0.4);
    --muted: rgba(0, 0, 0, 0.54);
    --muted-08: rgba(27, 39, 51, 0.08);
    --muted-16: rgba(99, 114, 130, 0.16);
    --muted-32: rgba(99, 114, 130, 0.32);
    --muted-light: #d8d8d8;

    --shadow: 0 0 0 1px var(--line-color), 0 8px 16px var(--muted-08);
    --shadow-element: 0 4px 16px var(--muted-32);
    --shadow-disabled: 0 2px 8px var(--muted-08);
}

/* main classes */

* {
    outline: none;
}

html, body {
    font-family: 'PT Sans', sans-serif;
}

#main {
    overflow-x: hidden;
    overflow-y: auto;
}

header {
    background-color: var(--menu-color);
    width: var(--menu-width);
    border-right: 1px solid var(--line-color);
}

body.md-default-theme, body,
html.md-default-theme, html {
    background-color: var(--bg-color);
}

header hr {
    margin: 0 8px;
    border: none;
    height: 1px;
    width: calc(100% - 16px);
    background-color: var(--line-color);
}

.header-overlay {
    visibility: hidden;
    pointer-events: none;
    touch-action: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: all 0.2s;
    z-index: 99;
}

.btn-menu {
    display: none;
}

@media (max-width: 599px), (max-height: 499px) {
    :root {
        --toolbar-height: 48px;
    }

    header {
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        z-index: 100;
        transition: all 0.2s;
        transform: translateX(-100%);
    }

    header.shown,
    header.shown {
        transform: translateX(0);
    }

    header.shown + .header-overlay {
        pointer-events: auto;
        touch-action: none;
        visibility: visible;
        opacity: 1;
    }

    .btn-menu {
        display: block;
    }
}

header nav {
    overflow-y: auto;
}

#logoPlace {
    flex-shrink: 0;
    height: var(--toolbar-height);
    margin: 0 16px;
}

@media (max-width: 599px), (max-height: 499px) {
    #logoPlace {
        margin: 8px 0 8px 24px;
    }
}

#logo {
    text-decoration: none;
    height: 40px;
    background: no-repeat left center/contain url('../images/logo_40.png') transparent;
    flex-shrink: 0;
}

.logo-container {
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.logo-pulse {
    width: 100%;
    min-height: 64px;
    background-image: url("../images/logo.png");
    position: relative;
    margin-bottom: 32px;
}

.logo-pulse::after {
    content: attr(data-version);
    font-size: small;
    color: var(--muted);
    position: absolute;
    top: 100%;
    right: calc(50% - 80px);
}

header .nav-block, .links a {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.links {
    padding: 8px 0;
}

.links a {
    border-left: 0 solid var(--blue);
}

header .nav-block .nav-text-block {
    position: relative;
    font-size: 14px;
    height: 18px;
    padding: 16px 0 16px 16px;
    color: var(--muted);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    user-select: none;
}

header .nav-block .nav-text-block .material-icons {
    opacity: 0.4;
    transition: all 0.2s;
}

header .nav-block .nav-text-block.shown .material-icons {
    opacity: 1;
    color: var(--blue);
    transform: rotateZ(90deg);
}

@media (max-width: 599px), (min-width: 1024px), (max-height: 499px) {
    header .nav-block .nav-text-block:not(.shown) ~ .nav-link {
        font-size: 0;
        padding-top: 0;
        padding-bottom: 0;
        pointer-events: none;
        touch-action: none;
    }
}

header .nav-link, .links a {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s, border-right-width 0.4s, border-left-width 0.4s;
}

header nav > .nav-link,
header nav > .nav-block .nav-link {
    margin-left: 12px;
    border-right: 0 solid var(--blue);
}

header nav > .nav-block .nav-link {
    margin-left: 32px;
}

header .nav-link.md-ink-ripple,
.links a.md-ink-ripple {
    position: relative;
}

header nav > .nav-link,
header nav .nav-link.md-ink-ripple > .md-ripple-container,
header nav > .nav-block .nav-link {
    border-radius: 6px 0 0 6px;
}

header .nav-link > span {
    display: none;
}

header a.nav-link,
header a.nav-link:active,
header a.nav-link:focus,
.links a,
.links a:active,
.links a:focus {
    color: var(--gray);
    text-decoration: none;
}

header a.nav-link, .links a {
    font-size: 14px;
    padding: 16px 24px;
}

header .nav-block a.nav-link,
.links a {
    padding: 8px 16px;
}

header a.nav-link.active,
header a.nav-link.active span .material-icons,
.links a.active {
    color: var(--text-color);
}

header a.nav-link.active, .links a.active {
    font-weight: 600;
    background-color: var(--blue-light);
    border-right-width: 3px;
}

.links a.active {
    border-right-width: 0;
    border-left-width: 3px;
    padding-left: 13px;
}

header a.nav-link:not(.active):hover,
.links a:not(.active):hover {
    background-color: var(--blue-opacity);
}

.toolbar .toolbar-tools #headerAppend {
    white-space: nowrap;
    overflow: hidden;
    margin-right: 8px;
}

.toolbar .toolbar-tools #headerAppend > * {
    text-overflow: ellipsis;
    overflow: hidden;
    direction: rtl;
}

.toolbar-button {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--line-color-opacity);
    width: var(--toolbar-height);
}

.toolbar-button .md-button {
    flex-shrink: 0;
}

.round-unread {
    box-sizing: border-box;
    position: absolute;
    top: 6px;
    right: 6px;
    border: 2px solid var(--blue);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.2s cubic-bezier(.3, .9, .6, 1.3);
}

.round-unread.shown {
    transform: scale(1);
}

.btn-panel-user {
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    height: 100%;
    padding: 0 16px;
    border-left: 1px solid var(--line-color-opacity);
    transition: background-color 0.2s;
}

.btn-panel-user:hover {
    background-color: var(--blue-opacity);
}

.user-avatar {
    --s: calc(var(--toolbar-height) * 0.75);
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: no-repeat center/65% url('../images/avatar.svg') #e8eef5;
    transition: all .2s cubic-bezier(.3, .9, .6, 1.3);
}

.user-avatar.blocked {
    position: relative;
}

.user-avatar.blocked::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: no-repeat center/cover url('../images/unable.png') transparent;
}

@media (max-width: 599px) {
    .user-avatar:not(.big) {
        width: 35px;
        height: 35px;
    }
}

@media (min-width: 600px) {
    .user-avatar:not(.big) {
        margin-left: 16px;
    }
}

.user-avatar.big {
    display: inline-block;
    border-radius: 50%;
    width: 125px;
    height: 125px;
    margin: 32px;
    box-shadow: var(--shadow-element);
    overflow: hidden;
}

.user-name {
    display: flex;
    flex-direction: column;
    line-height: 1;
    font-size: 16px;
    text-align: right;
    font-weight: bold;
}

@media (max-width: 599px) {
    .user-name {
        display: none;
    }
}

.toolbar {
    width: 100%;
    height: var(--toolbar-height);
    background-color: var(--menu-color);
    border-bottom: 1px solid var(--line-color);
}

.toolbar,
.toolbar * {
    box-sizing: border-box;
}

.toolbar .toolbar-tools {
    font-size: 18px;
    letter-spacing: .005em;
    box-sizing: border-box;
    font-weight: 400;
    display: flex;
    align-items: center;
    flex-direction: row;
    width: 100%;
    height: var(--toolbar-height);
    max-height: var(--toolbar-height);
    padding: 0 0 0 16px;
    margin: 0;
}

.toolbar .toolbar-tools a {
    color: inherit;
    text-decoration: none;
}

.toolbar .toolbar-tools > .md-button:first-child {
    margin-left: -8px;
}

.toolbar .toolbar-tools > .md-button:last-child {
    margin-right: -8px;
}

.buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    min-height: 48px;
}

.buttons:not(.shrink) {
    flex-shrink: 0;
}

.buttons.end {
    justify-content: flex-end;
}

.buttons .self-end {
    justify-self: flex-end;
    margin-left: auto;
}

.buttons > .md-button:not(:first-child):not(:last-child),
.buttons > .md-menu:not(:first-child):not(:last-child) > .md-button {
    margin-left: 0;
}

.buttons,
.buttons > * {
    box-sizing: border-box;
}

.card {
    background-color: #fff;
    border-style: solid;
    border-color: var(--line-color);
    border-width: 1px 0;
}

.card.card-crop {
    overflow: hidden;
}

.card.border-all {
    border-width: 1px;
    border-radius: 3px;
}

.card.shadow {
    box-shadow: var(--shadow-element);
    border-radius: 8px;
}

.card + .card:not(.border-all) {
    border-top: 0;
}

.card.border-none {
    border-width: 0;
}

.card .card-head, .mdc-head {
    margin: 0;
    font-size: 32px;
    font-weight: 600;
}

.card .card-title, .mdc-title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
}

.card .card-sub-title, .mdc-sub-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.card:last-child {
    margin-bottom: 16px;
}

.card .btn-card {
    margin: 0;
}

.card .btn-card .material-icons {
    line-height: 18px;
    vertical-align: text-top;
}

@media (min-width: 600px) and (max-width: 1023px) and (min-height: 500px) {
    :root {
        --menu-width: 64px;
    }

    #logoPlace {
        margin: 0 4px;
    }

    #logo {
        background-image: url('../images/favicon/favicon_original.png');
        background-position: center;
    }

    header nav {
        overflow: visible;
    }

    header a.nav-link {
        display: block;
        position: relative;
        padding: 16px 0;
        width: 100%;
        text-align: center;
        z-index: 79;
    }

    header nav > .nav-link,
    header nav > .nav-block .nav-link {
        margin-left: 0;
        border-right: 0;
    }

    header nav > .nav-link,
    header nav .nav-link.md-ink-ripple > .md-ripple-container,
    header nav > .nav-block .nav-link {
        border-radius: 0;
    }

    header .nav-block {
        padding: 0;
    }

    header .nav-block a.nav-link {
        padding: 16px 0;
    }

    header .nav-block .nav-text-block {
        display: none;
    }

    header .nav-link span {
        display: inline-block;
    }

    header .nav-link > div:not(.md-ripple-container) {
        position: absolute;
        left: 85%;
        top: 16px;
        white-space: nowrap;
        background-color: rgba(50, 50, 50, .9);
        color: #fff;
        font-size: 16px;
        font-weight: normal;
        visibility: hidden;
        opacity: 0;
        transform: translateX(50%);
        transition: transform 0.2s, opacity 0.2s;
        border-radius: 12px;
        padding: 2px 8px;
    }

    header .nav-link:hover > div {
        visibility: visible;
        opacity: 1;
        transform: translateX(0);
    }
}

/* helpers classes */

body.blur {
    overflow: hidden;
}

body.blur,
.no-select,
md-icon.clickable {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body.blur > *:not(.waiter):not(.alarm) {
    transition: filter 0.2s;
    -webkit-filter: blur(3px);
    filter: blur(3px);
    pointer-events: none;
    touch-action: none;
}

.md-m-a {
    margin: auto;
}

.md-m-0,
.md-button.md-m-0 {
    margin: 0;
}

.md-m-10 {
    margin: 10px;
}

.md-m-12 {
    margin: 12px;
}

.md-m-16 {
    margin: 16px;
}

.md-mr-0 {
    margin-right: 0;
}

.md-mr-4 {
    margin-right: 4px;
}

.md-ml-8 {
    margin-left: 8px;
}

.md-ml-16 {
    margin-left: 16px;
}

.md-mr-16 {
    margin-right: 16px;
}

.md-m-0-8 {
    margin: 0 8px;
}

.md-m-16-0 {
    margin: 16px 0;
}

.md-button.md-m-0--8-0-0 {
    margin: 0 -8px 0 0;
}

.md-button.md-m-0-0-0--8 {
    margin: 0 0 0 -8px;
}

.md-mb-0 {
    margin-bottom: 0;
}

.md-mb-4 {
    margin-bottom: 4px;
}

.md-mb-8 {
    margin-bottom: 8px;
}

.md-mb-16 {
    margin-bottom: 16px;
}

.md-mb-32 {
    margin-bottom: 32px;
}

.md-m-4-0 {
    margin: 4px 0;
}

.md-mt-0 {
    margin-top: 0;
}

.md-mt-2 {
    margin-top: 2px;
}

.md-mt-4 {
    margin-top: 4px;
}

.md-mt-8 {
    margin-top: 8px;
}

.md-mt-16,
.md-button.md-icon-button.md-mt-16 {
    margin-top: 16px;
}

.md-p-0,
md-list-item.md-no-proxy.md-p-0, md-list-item .md-no-style.md-p-0,
.layout-padding > *.md-p-0, .layout-padding > .flex.md-p-0 {
    padding: 0;
}

.md-p-4 {
    padding: 4px;
}

.md-p-8 {
    padding: 8px;
}

.md-p-12 {
    padding: 12px;
}

.md-p-16 {
    padding: 16px;
}

.md-p-4-0 {
    padding: 4px 0;
}

.md-p-6-12 {
    padding: 6px 12px;
}

.md-p-8-12 {
    padding: 8px 12px;
}

.md-p-0-4-16 {
    padding: 0 4px 16px;
}

.md-pl-8 {
    padding-left: 8px;
}

.md-pb-4 {
    padding-bottom: 4px;
}

.md-pb-8 {
    padding-bottom: 8px;
}

.md-pt-24 {
    padding-top: 24px;
}

.md-pb-24 {
    padding-bottom: 24px;
}

.md-p-8-0 {
    padding: 8px 0;
}

.md-p-0-8 {
    padding: 0 8px;
}

.md-pt-12 {
    padding-top: 12px;
}

.md-p-0-12 {
    padding: 0 12px;
}

.md-tm {
    margin-left: 16px;
    margin-right: 16px;
}

.scroll-auto {
    overflow: auto;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
}

.scroll-y {
    overflow-y: scroll;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.scroll-y-auto {
    overflow-y: auto;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.scroll-x-auto {
    overflow-x: auto;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
}

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

small,
.muted {
    color: var(--muted);
}

.muted-opacity {
    color: var(--muted-08);
}

.small {
    font-size: smaller;
}

.no-data-big {
    color: var(--black-40);
    font-size: 128px;
}

.no-data-text {
    box-sizing: border-box;
    width: 100%;
    color: var(--black-40);
    margin: 0;
    padding: 24px 0;
    font-size: 14px;
    text-align: center;
}

@media (max-width: 599px) {
    .no-data-big {
        font-size: 24px;
    }

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

.mono {
    font-family: monospace;
}

code {
    padding: 16px;
    background-color: var(--bg-color);
    border: 1px solid var(--muted-32);
    border-radius: 4px;
    box-shadow: inset 0 1px 1px var(--muted-32);
    font-family: inherit;
    font-size: 0.8rem;
    letter-spacing: 0.06rem;
}

.password {
    text-align: center;
    font-size: 2rem;
    letter-spacing: 0.1rem;
}

.word-break {
    word-break: break-word;
    white-space: normal;
}

.nowrap {
    white-space: nowrap;
}

/*.crop {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}*/

.center {
    text-align: center;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

@media (min-width: 960px) {
    .border-left-top-gt-sm {
        border-top: 1px solid var(--line-color);
        border-left: 1px solid var(--line-color);
    }

    .border-right-gt-sm {
        border-right: 1px solid var(--line-color);
    }
}

@media (min-width: 1280px) {
    .border-right-xl {
        border-right: 1px solid var(--line-color);
    }
}

.stripped {
    background-color: #fff;
}

.selected {
    background-color: var(--blue);
}

md-list md-list-item.selected .md-list-item-text h3,
md-list md-list-item.selected .md-list-item-text h4,
md-list md-list-item.selected .md-list-item-text p,
md-list md-list-item.selected .md-list-item-text small,
md-list md-list-item.selected .md-list-item-inner p,
md-list md-list-item.selected .md-button .material-icons {
    color: #fff;
}

md-list md-list-item.selected small,
md-list md-list-item.selected .muted {
    color: var(--muted-light);
}

md-list md-list-item.truncate._md-button-wrap > div.md-button:first-child .md-list-item-inner {
    overflow: hidden;
}

md-list md-list-item.md-list-with-menu._md-button-wrap > div.md-button:first-child {
    padding-right: 6px;
}

md-list md-list-item .md-list-icon {
    align-self: center !important;
    margin: 0 16px 0 0 !important;
}

md-icon.md-avatar-blue,
md-list md-list-item .md-avatar-icon {
    background-color: var(--blue-light);
    color: var(--sea);
}

md-icon.md-avatar-green {
    background-color: var(--green-light);
    color: var(--green);
}

md-icon.md-avatar-red {
    background-color: var(--red-opacity-27);
    color: var(--red);
}

.md-white {
    background-color: #fff;
}

.line-height-1 {
    line-height: 1;
}

.md-block {
    display: block;
}

.md-inline {
    display: inline-block;
}

.md-relative {
    position: relative;
}

.md-absolute {
    position: absolute;
}

.md-sticky {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
}

*[class^="text-"] .badge {
    margin-right: 12px;
}

.text-error,
.text-success,
.text-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    border-radius: 4px;
    border: 2px solid transparent;
    min-width: 256px;
    flex-shrink: 0;
}

*[class^="text-"].long-text {
    align-items: flex-start;
}

*[class^="text-"].long-text .text {
    margin-top: 16px;
    margin-bottom: 16px;
}

.text-error {
    border-color: var(--red);
}

.text-error,
.text-error .material-icons {
    color: var(--red);
}

.text-success {
    border-color: var(--green);
}

.text-success,
.text-success .material-icons {
    color: var(--green);
}

.text-info {
    border-color: var(--blue);
}

.text-info,
.text-info .material-icons {
    color: var(--blue);
}

*[class^="text-"] .text {
    flex: 1;
    margin-right: 12px;
}

.border {
    border: 1px solid var(--line-color);
}

.border-top {
    border-top: 1px solid var(--line-color);
}

.border-bottom {
    border-bottom: 1px solid var(--line-color);
}

.border-right {
    border-right: 1px solid var(--line-color);
}

.border-left {
    border-left: 1px solid var(--line-color);
}

.can-freeze {
    transition: opacity 0.2s;
}

.can-freeze.freeze {
    opacity: 0.54;
    pointer-events: none;
    touch-action: none;
}

.can-be-clickable[ng-click]:not([disabled]):not(.disabled) {
    color: var(--blue);
    padding: 2px;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.2s cubic-bezier(.25, .8, .25, 1);
}

.can-be-clickable[ng-click]:not([disabled]):not(.disabled):hover {
    background-color: var(--muted-08);
}

.invisible {
    visibility: hidden;
    pointer-events: none;
    touch-action: none;
}

.will-change-shadow {
    will-change: box-shadow, transform;
}

.list-style-none {
    list-style: none;
}

.md-button.md-fab.md-fab-top-right.btn-list-gateways {
    top: 120px;
}

.md-button.md-rounded,
.md-button.md-rounded > .md-ripple-container {
    border-radius: 18px;
}

.md-w-100 {
    width: 100%;
}

/* checkbox */

label.custom-label {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
}

input.custom[type="checkbox"]:not(:checked) ~ .checked-true,
input.custom[type="checkbox"]:checked ~ .checked-false {
    display: none;
}

input.custom[type="checkbox"] {
    display: none;
}

input.custom[type="checkbox"] ~ .checkbox-icon {
    display: inline-block;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    background-color: #fff;
    color: transparent;
    border: 2px solid rgba(0, 0, 0, 0.54);
    border-radius: 2px;
    margin: 0 8px 0 1px;
    user-select: none;
    transition: .24s;
}

input.custom[type="checkbox"] ~ .checkbox-icon .material-icons {
    font-size: 18px;
    font-weight: 700;
    position: relative;
    top: -1px;
    left: -1px;
}

input.custom[type="checkbox"]:checked ~ .checkbox-icon {
    background-color: rgba(63, 81, 181, 0.87);
    border-color: transparent;
    color: rgba(255, 255, 255, 0.87);
}

/* icons & buttons */

.material-icons.md-va-tb {
    vertical-align: text-bottom;
}

.md-va-tt {
    vertical-align: text-top;
}

.md-va-m {
    vertical-align: middle;
}

.md-va-sub {
    vertical-align: sub;
}

.material-icons.md-icon-16 {
    font-size: 16px;
    height: 16px;
    width: 16px;
    min-height: 16px;
    min-width: 16px;
}

.material-icons.md-icon-18 {
    font-size: 18px;
    height: 18px;
    width: 18px;
    min-height: 18px;
    min-width: 18px;
}

md-icon.md-icon-20,
.material-icons.md-icon-20 {
    font-size: 20px;
    height: 20px;
    width: 20px;
    min-height: 20px;
    min-width: 20px;
}

.material-icons.md-icon-32 {
    font-size: 32px;
    height: 32px;
    width: 32px;
    min-height: 32px;
    min-width: 32px;
}

.material-icons.md-icon-40 {
    font-size: 40px;
    height: 40px;
    width: 40px;
    min-height: 40px;
    min-width: 40px;
}

.material-icons.md-icon-80 {
    font-size: 80px;
    height: 80px;
    width: 80px;
    min-height: 80px;
    min-width: 80px;
}

.md-button.md-link {
    white-space: normal;
    word-break: break-word;
    line-height: 1.2;
    font-size: 16px;
    width: auto;
    text-align: left;
    padding: 4px;
    margin: 0;
    text-transform: none;
    min-height: 0;
    min-width: 0;
    vertical-align: 0;
    overflow: initial;
}

.md-button.md-link.slim {
    line-height: 1;
    font-size: 12px;
    padding: 2px;
}

.md-button.md-link.md-link-with-icon .material-icons {
    line-height: 16px;
    height: 16px;
    width: 16px;
    min-height: 16px;
    min-width: 16px;
    margin-left: -6px;
    padding-right: 2px;
}

md-icon.md-green, .md-text-green,
.md-button.md-green:not([disabled]),
.md-button.md-green:not([disabled]) md-icon {
    color: var(--green);
}

.md-button.md-green:not([disabled]).md-raised,
.md-button.md-green:not([disabled]).md-fab {
    background-color: var(--green);
    color: #fff;
}

.md-button.md-green:not([disabled]).md-raised:hover,
.md-button.md-green:not([disabled]).md-fab:hover {
    background-color: var(--green-dark);
    color: #fff;
}

md-icon.md-blue, .md-text-blue,
.md-button.md-blue:not([disabled]),
.md-button.md-blue:not([disabled]) md-icon {
    color: var(--blue);
}

.md-button.md-blue:not([disabled]).md-raised,
.md-button.md-blue:not([disabled]).md-fab {
    background-color: var(--blue);
    color: #fff;
}

.md-button.md-blue:not([disabled]).md-raised:hover,
.md-button.md-blue:not([disabled]).md-fab:hover {
    background-color: var(--blue-dark);
    color: #fff;
}

.md-button.md-green:not([disabled]).md-raised md-icon,
.md-button.md-blue:not([disabled]).md-raised md-icon,
.md-button.md-green:not([disabled]).md-fab md-icon,
.md-button.md-blue:not([disabled]).md-fab md-icon {
    color: #fff;
}

.md-text-blue-dark {
    color: var(--blue-dark);
}

md-icon.md-red,
.md-text-red {
    color: var(--red);
}

md-icon.md-orange,
.md-text-orange {
    color: var(--orange);
}

md-icon.md-yellow,
.md-text-yellow {
    color: var(--yellow);
}

.clickable,
md-icon.clickable {
    cursor: pointer;
}

md-icon[disabled] {
    pointer-events: none;
    touch-action: none;
    opacity: 0.54;
}

md-checkbox[disabled] ~ p {
    color: var(--muted-32);
}

.md-icon-protected {
    position: relative;
}

.md-icon-protected::after {
    content: " ";
    position: absolute;
    width: 16px;
    height: 16px;
    right: -6px;
    top: -6px;
    background: no-repeat center/contain url('../images/icons/done.svg');
}

/* login */

#loginCard {
    width: 300px;
    padding: 16px;
}

.logo-image {
    position: relative;
    box-sizing: border-box;
    flex: 0 0 auto;
    height: 100px;
    width: calc(100% - 32px);
    margin: 16px 16px 0;
    background: no-repeat center/contain url('../images/logo_line.png') transparent;
    animation: 0.5s linear 0.25s 1 normal both running showLogo;
    transform-origin: 50% 75%;
}

@keyframes showLogo {
    from {
        opacity: 0;
        transform: scale(1, 0);
    }

    to {
        opacity: 1;
        transform: scale(1, 1);
    }
}

@-moz-keyframes showLogo {
    from {
        opacity: 0;
        transform: scale(1, 0);
    }

    to {
        opacity: 1;
        transform: scale(1, 1);
    }
}

.logo-image::after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: no-repeat center/contain url('../images/logo_word.png') transparent;
    animation: 0.5s ease-out 0.75s 1 normal both running showLogoTop;
}

@keyframes showLogoTop {
    from {
        opacity: 0;
        transform: translateY(-25%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@-moz-keyframes showLogoTop {
    from {
        opacity: 0;
        transform: translateY(-25%);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* alarm */

.alarm {
    --width: 350px;
    box-sizing: border-box;
    padding: 12px 16px;
    position: fixed;
    top: 16px;
    left: calc(50% - (var(--width) / 2));
    width: var(--width);
    background-color: #fff;
    transition: all .3s cubic-bezier(.3, .9, .6, 1.3);
    border-radius: 4px;
    box-shadow: var(--shadow);
    z-index: 1000;
    overflow: hidden;
}

.alarm.out {
    transform: scale(0.9);
    opacity: 0;
    pointer-events: none;
    touch-action: none;
}

@media (max-width: 599px) {
    .alarm {
        --width: 100vw;
        top: 0;
        left: 0;
        border-radius: 0;
    }

    .alarm.out {
        transform: translate(0, -150%);
    }
}

.alarm.in {
    transform: scale(1) translate(0, 0);
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
}

.alarm.in:active {
    transform: scale(1) translate(0, 0) scale(1.05);
}

.alarm .head {
    font-size: 1.15rem;
    font-weight: 500;
}

.alarm.alarm-error .head {
    color: var(--red);
}

.alarm.alarm-success .head {
    color: var(--green);
}

.alarm.alarm-info .head {
    color: var(--blue);
}

.alarm .text {
    max-height: 160px;
    margin-top: 8px;
    overflow-y: auto;
    word-break: break-word;
}

.alarm .ico {
    position: absolute;
    top: -22px;
    right: -22px;
    opacity: 0.5;
    pointer-events: none;
    touch-action: none;
}

.alarm .ico .material-icons {
    font-size: 68px;
    color: #fff;
    border-radius: 50%;
    padding: 4px;
}

.alarm.alarm-error .ico .material-icons {
    background-color: var(--red);
}

.alarm.alarm-success .ico .material-icons {
    background-color: var(--green);
}

.alarm.alarm-info .ico .material-icons {
    background-color: var(--blue);
    font-size: 48px;
    padding: 14px;
}

/* waiter */

.waiter {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 200;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.waiter:not(.default-cursor) {
    cursor: wait;
}

.waiter.out {
    opacity: 0;
}

.waiter.in {
    opacity: 1;
}

/* elements */

.panel {
    box-sizing: border-box;
    padding: 4px;
    width: 320px;
    background: #fff;
    border-radius: 4px;
    box-shadow: var(--shadow);
}

.panel-menu-user {
    width: 260px;
    margin-top: -4px;
    padding: 8px 0;
}

.panel-menu-user::before {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    content: " ";
    width: 16px;
    height: 16px;
    background: linear-gradient(-45deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%);
    border-left: 1px solid var(--line-color);
    border-top: 1px solid var(--line-color);
    display: block;
    position: absolute;
    right: 26px;
    top: -9px;
    border-top-left-radius: 6px;
    transform: rotateZ(45deg);
}

@media (max-width: 599px) {
    .panel-menu-user {
        margin-top: 0;
    }

    .panel-menu-user::before {
        right: 24px;
    }
}

.panel-menu-user button,
.panel-menu-user a {
    transition: all 0.2s;
}

.panel-menu-user button {
    border: none;
    background: transparent;
    text-align: left;
    font-size: 14px;
}

.panel-menu-user button:hover {
    background-color: var(--muted-16);
}

.panel-menu-user a,
.panel-menu-user a:active,
.panel-menu-user a:focus {
    color: var(--blue);
    text-decoration: none;
}

.panel-menu-user a:hover {
    background-color: var(--blue-opacity);
}

.panel-helper {
    width: 760px;
    padding: 0;
}

.panel-helper::after {
    content: "";
    position: absolute;
    top: -7px;
    left: 14px;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    background-color: #ffffff;
    border-top: 1px solid #eef1f2;
    border-left: 1px solid #eef1f2;
}

.panel-devices {
    padding: 0;
    max-height: 285px;
    overflow-y: auto;
}

.select-header {
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.14), 0 0 0 0 rgba(0, 0, 0, 0.12);
    padding-left: 10px;
    height: 48px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    width: auto;
}

.select-header input[type="search"] {
    border: none;
    height: 100%;
    width: 100%;
    padding: 0;
}

.input {
    --bg-input-color: var(--muted-08);
    box-sizing: border-box;
    background-color: var(--bg-input-color);
    color: var(--text-color);
    border: none;
    font-size: 14px;
    font-weight: 600;
    margin: 8px;
    padding: 8px;
    border-radius: 6px;
    transition: all 0.2s;
}

.input:not(.no-opacity) {
    opacity: 0.65;
}

.input::-webkit-input-placeholder {
    font-weight: 400;
}

.input::-moz-placeholder {
    font-weight: 400;
}

.input:hover,
.input:active,
.input:focus {
    opacity: 1;
}

.input.search {
    --margin: 8px;
    box-sizing: border-box;
    background: no-repeat 8px center/20px url('../images/icons/search.svg') var(--bg-input-color);
    padding-left: 32px;
    margin: var(--margin);
    width: calc(100% - (var(--margin) * 2));
}

.input.search.md-mb-16 {
    --margin: 0;
    margin-bottom: 16px;
}

.input.search.wait {
    background-image: none;
}

.input.search.large {
    font-size: 18px;
    background-size: 24px;
    padding-left: 36px;
}

.search-with-button {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
}

.search-with-button .input.search {
    flex: 1 1 100%;
    min-width: 25%;
    margin-right: 0;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.search-with-button > button {
    flex-shrink: 0;
    border: none;
    margin: 8px 8px 8px 0;
    border-radius: 0 6px 6px 0;
    background-color: var(--blue);
    color: #fff;
    transition: box-shadow 0.2s;
}

.search-with-button > button:active {
    box-shadow: 0 0 0 3px var(--blue-hue);
}

.search-with-button > button .material-icons {
    color: #fff;
}

md-input-container .hint {
    position: absolute;
    left: 2px;
    right: auto;
    bottom: 7px;
    font-size: 12px;
    line-height: 14px;
    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
    color: var(--muted);
}

md-input-container .hint.ng-hide,
md-input-container .hint.ng-enter,
md-input-container .hint.ng-leave.ng-leave-active {
    bottom: 26px;
    opacity: 0;
}

md-input-container .hint.ng-leave,
md-input-container .hint.ng-enter.ng-enter-active {
    bottom: 7px;
    opacity: 1;
}

md-input-container [ng-messages].ng-active ~ .hint {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    touch-action: none;
}

md-select-menu md-option .description {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.54);
}

md-select md-select-value .description {
    display: none;
}

md-content.md-default-theme,
md-content {
    background: transparent;
}

md-dialog {
    box-shadow: var(--shadow);
}

md-dialog.md-transition-out {
    pointer-events: none !important;
    touch-action: none !important;
}

md-backdrop.md-dialog-backdrop + md-backdrop.md-dialog-backdrop {
    z-index: 81;
}

.md-dialog-container ~ .md-dialog-container {
    z-index: 82;
}

md-backdrop.md-opaque {
    /*background-color: rgba(255, 255, 255, 1);*/
}

md-select-menu,
.md-open-menu-container.md-active {
    box-shadow: var(--shadow);
    border-radius: 4px;
}

md-card.md-default-theme,
md-card {
    border: none;
    box-shadow: 0 2px 2px 2px var(--line-color-opacity);
    border-radius: 12px;
}

md-select-menu > *,
.md-open-menu-container.md-active > * {
    border-radius: 4px;
}

md-toolbar.md-default-theme:not(.md-menu-toolbar),
md-toolbar:not(.md-menu-toolbar) {
    background-color: transparent;
    color: rgba(0, 0, 0, .87);
}

md-toolbar.md-default-theme:not(.md-menu-toolbar):not(.no-border),
md-toolbar:not(.md-menu-toolbar):not(.no-border) {
    border-bottom: 1px solid var(--line-color);
}

md-toolbar.md-default-theme:not(.md-menu-toolbar) md-icon,
md-toolbar:not(.md-menu-toolbar) md-icon {
    color: rgba(0, 0, 0, 0.87);
    fill: rgba(0, 0, 0, 0.87);
}

md-nav-bar.md-default-theme md-nav-ink-bar,
md-nav-bar md-nav-ink-bar,
md-tabs.md-default-theme md-ink-bar,
md-tabs md-ink-bar {
    color: var(--blue);
    background: var(--blue);
}

md-nav-bar .md-button.md-accent,
md-tabs.md-default-theme .md-tab.md-active,
md-tabs .md-tab.md-active,
md-tabs.md-default-theme .md-tab.md-active md-icon,
md-tabs .md-tab.md-active md-icon,
md-tabs.md-default-theme .md-tab.md-focused,
md-tabs .md-tab.md-focused,
md-tabs.md-default-theme .md-tab.md-focused md-icon,
md-tabs .md-tab.md-focused md-icon {
    color: var(--blue);
}

md-nav-bar .md-button.md-accent:not([disabled]) md-icon {
    color: var(--muted);
}

md-nav-bar .md-button.md-accent:not([disabled]).md-active md-icon {
    color: var(--blue);
}

md-chips.md-default-theme .md-chips, md-chips .md-chips {
    box-shadow: 0 1px var(--line-color);
}

md-chips .md-chips.md-focused {
    box-shadow: 0 2px var(--blue);
}

md-nav-bar .md-nav-bar {
    border-color: var(--line-color);
}

md-divider {
    border-top-color: var(--line-color);
}

.md-subheader.md-slim {
    background-color: var(--bg-color);
    width: 100%;
}

.md-subheader.md-slim .md-subheader-inner {
    padding: 0;
}

md-datepicker .month-overlay {
    background-color: #Fff;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 1px;
    pointer-events: none;
    touch-action: none;
    user-select: none;
    padding-top: 4px;
}

.layout-row > md-divider {
    border-right-color: var(--line-color);
}

/*.second-sidenav > md-backdrop {
    z-index: 57 !important;
}

.second-sidenav > md-sidenav {
    z-index: 58 !important;
}*/

to-header {
    display: block;
}

.md-radio-container {
    min-height: 41px;
    margin: 18px 0;
}

abbr {
    text-decoration: none;
    border-bottom: 1px dotted var(--muted);
    cursor: help;
}

.badge {
    border-radius: 12px;
    padding: 0 8px;
    background-image: linear-gradient(to bottom, var(--sea-light) 0%, var(--sea) 100%);
    font-weight: 600;
}

.badge.small,
.md-select-value .badge {
    border-radius: 9px;
    font-size: small;
}

.badge,
.badge md-icon {
    color: #fff;
}

.badge.badge-green {
    background-image: linear-gradient(to bottom, var(--green) 0%, var(--green-dark) 100%);
}

.badge.badge-gray {
    background: var(--muted-light);
}

.badge.badge-red,
.md-button.md-warn .badge {
    background-image: linear-gradient(to bottom, var(--red-light) 0%, var(--red) 100%);
}

.md-button.md-raised.md-warn .badge {
    background-image: none;
    background-color: #fff;
    color: var(--red);
}

.md-button.md-raised.md-blue .badge {
    background-image: none;
    background-color: #fff;
    color: var(--sea);
}

md-tabs .md-tab:not(.md-active),
.md-button[disabled] .badge {
    filter: grayscale(1);
}

.point-highlight {
    position: absolute;
    left: 6px;
    top: 6px;
    pointer-events: none;
    touch-action: none;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle at center, var(--blue), var(--blue));
    border-radius: 50%;
}

.highlight {
    background-color: var(--yellow);
}

.highlight-date-indications {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: var(--orange);
}

.line-point {
    --s: 8px;
    position: relative;
    padding-left: 10px;
    line-height: 1;
    margin-top: 8px;
}

.line-point > .line-point {
    margin-left: 10px;
}

.line-point::before,
.line-point::after {
    content: " ";
    position: absolute;
    box-sizing: border-box;
}

.line-point::before {
    background-color: #fff;
    border: 2px solid var(--blue);
    top: calc(var(--s) - 4px);
}

.line-point::after {
    background-color: var(--blue);
    top: calc(var(--s) + 2px);
}

.line-point::before {
    width: var(--s);
    height: var(--s);
    left: 0;
    border-radius: 50%;
}

.line-point::after {
    width: 2px;
    height: calc(100% + 24px);
    left: calc(var(--s) / 3);
}

.md-subheader.slim .md-subheader-inner {
    padding: 0;
    border: 1px solid var(--line-color);
    border-left: 0;
    border-right: 0;
}

md-progress-linear.slim,
md-progress-linear.slim .md-container {
    height: 2px;
}

.search-hint {
    width: 100px;
    padding: 0 8px;
    text-align: center;
}

.intellectual-search:not(.default) .md-chips {
    padding-left: 28px;
    background: no-repeat 0 12px/24px url('../images/icons/search.svg') transparent;
    box-shadow: none;
    padding-bottom: 6px;
}

.intellectual-search:not(.default) md-autocomplete {
    min-width: 260px;
}

.intellectual-search:not(.default) md-chips md-chip.md-focused {
    background: var(--blue);
}

.intellectual-search:not(.default) md-chips.building-not-removable > .md-chips.md-removable > md-chip:first-child {
    padding-right: 12px;
}

.intellectual-search:not(.default) md-chips.building-not-removable > .md-chips > md-chip:first-child .md-chip-remove-container {
    display: none;
}

.intellectual-search.full-width .md-chip-input-container {
    width: 100%;
}

/* forms */

ul.view,
ul.view-col {
    list-style: none;
    margin: 0;
    padding: 16px 0;
}

ul.view > li,
ul.view-col > li {
    display: flex;
    flex-direction: column;
    margin: 0 8px;
}

ul.view > li + li,
ul.view-col > li + li {
    margin-top: 16px;
}

ul.view > li > span,
ul.view-col > li > span {
    font-size: smaller;
    opacity: 0.75;
}

ul.view > li > div,
ul.view-col > li > div {
    min-height: 20px;
}

ul.view > li > div .md-button.md-link,
ul.view-col > li > div .md-button.md-link {
    margin-left: -4px;
}

@media (min-width: 600px) {
    ul.view > li {
        flex-direction: row;
        align-items: baseline;
        justify-content: flex-start;
        margin: 0;
    }

    ul.view > li + li {

    }

    ul.view > li > span {
        box-sizing: border-box;
        flex: 0 1 25%;
        font-size: inherit;
        text-align: right;
        padding: 0 16px;
    }

    ul.view > li > div {
        flex: 1 1 75%;
        padding-right: 16px;
    }

    ul.view > li.align-center {
        align-items: center;
    }

    ul.view > li.align-start {
        align-items: flex-start;
    }
}

.custom-input-container {
    padding: 4px 0;
}

.custom-input-container > *:not(.label) {
    margin-top: 5px;
}

.label {
    color: rgba(0, 0, 0, 0.54);
    font-size: 12px;
    margin-left: 2px;
}

form .form-group {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    max-width: 100%;
    min-height: 90px;
    box-sizing: border-box;
    padding: 0 24px;
}

/* table */

table.view {
    width: 100%;
    border-collapse: collapse;
    border: none;
    position: relative;
}

table.view th {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 8px;
    text-align: left;
}

table.view tr:nth-child(2) th {
    top: 31px;
}

table.view th::after {
    content: "";
    background-color: var(--line-color);
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
}

table.view th.slim::after {
    height: 1px;
}

table.view th[sort] {
    padding-left: 24px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 24px;
    background-image: url('../images/icons/up_down.png');
}

table.view th.sort-asc {
    background-image: url('../images/icons/up.png');
}

table.view th.sort-desc {
    background-image: url('../images/icons/down.png');
}

table.view td {
    padding: 16px 8px;
}

table.view td.slim {
    padding: 8px;
}

table.view th.center,
table.view td.center {
    text-align: center;
}

table.view th.right,
table.view td.right {
    text-align: right;
}

table.view td.col-checkbox {
    width: 20px;
}

table.view td.col-checkbox md-checkbox {
    max-width: 20px;
}

table.view td.col-icon {
    width: 28px;
    max-width: 84px;
    white-space: nowrap;
    padding: 0 4px;
}

table.view td.col-controls {
    width: 52px;
    padding: 0;
}

table.view td.col-number {
    letter-spacing: 0.025em;
    white-space: nowrap;
}

table.view thead tr th {
    font-size: 12px;
    color: var(--gray);
    font-weight: normal;
    white-space: nowrap;
    overflow: hidden;
}

table.view tbody tr td {
    font-size: 14px;
}

table.view thead th,
table.view tbody tr:nth-child(even) {
    background-color: #fff;
}

table.view.inverted tbody tr:nth-child(odd) {
    background-color: var(--bg-color);
}

table.view tbody tr td {
    border-bottom: 1px solid var(--line-color);
}

table.view tbody tr[ng-click] {
    cursor: pointer;
    transition: all .4s;
}

table.view tbody tr[ng-click] td {
    transition: color .2s;
}

table.view tbody tr[ng-click]:hover td {
    color: var(--blue);
}

.table-view-footer {
    margin-top: auto;
    border-top: 2px solid var(--line-color);
}

/* map */

.map-wrapper {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: 300px;
    height: 300px;
    background-color: var(--muted-08);
    color: var(--muted);
    box-shadow: var(--shadow-element);
    border-radius: 10px;
    margin: 16px;
    overflow: hidden;
}

.map {
    width: 100%;
    height: 100%;
    min-width: 250px;
    min-height: 250px;
    z-index: 1;
}

/* uploader */

.btn-upload {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    color: var(--muted);

    border: 2px dashed var(--muted-08);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-upload, .success-area, .file {
    box-sizing: border-box;
    height: 300px;
}

.success-area {
    overflow-y: auto;
}

.success-area > *:first-child {
    margin-top: auto;
}

.success-area > *:last-child {
    margin-bottom: auto;
}

.btn-upload:hover,
.btn-upload.on-drop {
    border-color: var(--blue-hue);
    background: repeating-linear-gradient(45deg, var(--blue-opacity) 0, var(--blue-opacity) 16px, transparent 16px, transparent 32px);
}

.file ~ .btn-upload {
    display: none;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    touch-action: none;
}

.text-error ~ .btn-upload {
    height: calc(300px - 76px);
}

.file-ico {
    width: 128px;
    height: 128px;
    background: no-repeat center/contain url('../images/csv.png') transparent;
}

/* animations */

.rotate {
    animation: 2.5s linear 0s infinite normal none running rotate;
}

.rotate-default {
    animation: 2.5s linear 0s infinite normal none paused rotate;
}

.rotate-go {
    animation-play-state: running;
}

@keyframes rotate {
    from {
        transform: rotateZ(0deg);
    }
    to {
        transform: rotateZ(360deg);
    }
}

.animate-opacity {
    opacity: 1;
    transform: translateY(0);
}

.animate-opacity.ng-hide {
    opacity: 0;
    transform: translateY(25%);
}

.animate-opacity.ng-hide-add,
.animate-opacity.ng-hide-remove {
    transition: all .6s cubic-bezier(.25, .8, .25, 1);
}

.animate-width {
    white-space: nowrap;
}

.animate-width.ng-hide {
    width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.animate-width.ng-hide-add,
.animate-width.ng-hide-remove {
    transition: all .2s cubic-bezier(.25, .8, .25, 1);
}

.custom-messages {
    overflow: hidden;
    transition: all 0.2s cubic-bezier(.55, 0, .55, .2);
}

.custom-messages.ng-inactive {
    height: 0;
}

.custom-messages.ng-active {
    height: 20px;
}

.custom-messages [ng-message] {
    color: var(--red);
    font-size: 12px;
    padding-top: 5px;
    transition: all .2s cubic-bezier(.55, 0, .55, .2);
}

.custom-messages [ng-message].ng-leave.ng-leave-active,
.custom-messages [ng-message].ng-enter {
    opacity: 0;
    transform: translateY(-100%);
}

.custom-messages [ng-message].ng-enter.ng-enter-active,
.custom-messages [ng-message].ng-leave {
    opacity: 1;
    transform: translateY(0);
}

.animate-text-after {
    animation: 0.6s cubic-bezier(.25, .8, .25, 1) 0s 1 normal both running animationText;
}

.animate-delay-200 {
    animation-delay: 0.2s;
}

.animate-delay-400 {
    animation-delay: 0.4s;
}

@keyframes animationText {
    from {
        opacity: 0;
        transform: translateY(-25%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-if {

}

.animate-if.ng-enter,
.animate-if.ng-leave {
    transition: transform 0.2s cubic-bezier(.3, .9, .6, 1.3);
}

.animate-if.ng-enter,
.animate-if.ng-leave.ng-leave-active {
    transform: scale(0.5);
}

.animate-if.ng-leave,
.animate-if.ng-enter.ng-enter-active {
    transform: scale(1);
}

.animate-if-scale {

}

.animate-if-scale.ng-enter,
.animate-if-scale.ng-leave {
    transition: transform 0.2s cubic-bezier(.3, .9, .6, 1.3), opacity 0.2s;
}

.animate-if-scale.ng-enter,
.animate-if-scale.ng-leave.ng-leave-active {
    transform: scale(0);
    opacity: 0;
}

.animate-if-scale.ng-leave,
.animate-if-scale.ng-enter.ng-enter-active {
    transform: scale(1);
    opacity: 1;
}

/* hacks */

@-moz-document url-prefix() {
    .layout-margin > * {
        max-width: calc(100% - 16px);
    }

    .word-break {
        word-break: break-all;
        white-space: normal;
    }
}

/* slider text */

.nice-slider {
    overflow: hidden;
}

.nice-slider div {
    display: block;
    height: 100%;
    width: 100%;
}

.nice-slider.go div {
    transition: all 0.3s cubic-bezier(.3, .9, .6, 1.3);
    transform: translateY(-100%);
}

/* device active */

.device-active {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
}

/* status */

.status {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    border-radius: 14px;
    color: var(--muted);
    transition: all 0.2s;
}

.status:not(.short) {
    background-color: var(--muted-08);
}

.status md-icon {
    width: 20px;
    height: 20px;
    min-height: 20px;
    min-width: 20px;
    margin: 4px;
}

.status .title {
    font-size: small;
    padding-right: 8px;
}

.status.short .title {
    display: none;
}

.status.md-warn * {
    color: #D84315;
}

.status.md-green * {
    color: #8BC34A;
}

.status:not(.short).md-green * {
    color: #558B2F;
}

.status:not(.short).md-warn {
    background-color: rgba(255, 87, 34, 0.24);
}

.status:not(.short).md-green {
    background-color: rgba(76, 175, 80, 0.16);
}

/* connection-statistic */

.connection-statistic, .connection-statistic-item {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.connection-statistic {
    background-color: var(--line-color);
    padding: 2px 8px;
    border-radius: 12px;
}

.connection-statistic-item + .connection-statistic-item {
    margin-left: 10px;
}

.connection-statistic-item span {
    margin-left: 2px;
    color: var(--muted);
    font-weight: 600;
    position: relative;
    top: -4px;
    font-size: 12px;
    line-height: 1;
    min-width: 21px;
}

/* metr */

.metr {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.metr .line {
    margin-left: 8px;
    height: 5px;
    width: 144px;
    background-color: #ebebf0;
}

.metr .line,
.metr .line > * {
    border-radius: 3px;
}

.metr .line .progress {
    height: 100%;
    min-width: 5px;
    max-width: 100%;
    background-color: var(--blue);
    transition: width 0.2s;
}

/* LoRa-module */

.lora-module {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    background-color: #fff;
}

.lora-module:not(.readonly) {
    margin-bottom: 16px;
}

.lora-module.readonly {
    justify-content: flex-start;
}

.lora-module .block {
    box-sizing: border-box;
    width: 175px;
    min-height: 225px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    border: 2px solid var(--muted-16);
    border-radius: 6px;
    flex-shrink: 0;
    transition: border-color 0.2s;
}

.lora-module.active .block {
    border-color: var(--blue);
}

.lora-module .inputs {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
    width: 100px;
    padding: 8px 0;
}

.lora-module.readonly .inputs {
    width: 100%;
}

.lora-module .inputs .lora-module-input {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
}

.lora-module .inputs .line {
    position: relative;
    flex-shrink: 0;
    width: 100px;
    height: 2px;
    background-color: var(--muted-16);
    border: 8px solid #fff;
    border-left: 0;
    border-right: 0;
    transition: background-color 0.2s;
}

@media (max-width: 599px) {
    .lora-module .block {
        flex-shrink: 1;
    }

    .lora-module .inputs .line {
        width: 40px;
    }
}

.lora-module:not(.readonly) .inputs .line:not(.active):not(.selected) {
    cursor: pointer;
}

.lora-module .inputs .line.active,
.lora-module:not(.readonly) .inputs .line:not(.active):not(.selected):hover {
    background-color: var(--blue);
}

.lora-module .inputs .line.active.invalid {
    background-color: var(--red);
}

.lora-module:not(.readonly) .inputs .line.active {
    cursor: not-allowed;
}

.lora-module .inputs .line.selected {
    background-color: var(--orange);
}

.lora-module .inputs .line .input-num {
    position: absolute;
    top: 0;
    left: -20px;
    transform: translateY(-50%);
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 600;
    transition: color 0.2s;
}

.lora-module .inputs .line.selected .input-num {
    color: var(--orange);
}

.lora-module .inputs .line .not-allowed {
    position: absolute;
    top: -10px;
    left: 37.5%;
    border-radius: 50%;
    font-size: 22px;
    color: var(--red);
    background-color: #fff;
}

.lora-module .inputs .line::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border: 2px solid var(--muted-16);
    background-color: #fff;
    top: -4px;
    right: 0;
    border-radius: 50%;
    transition: border-color 0.2s, background-color 0.2s;
}

.lora-module .inputs .line.active::after,
.lora-module:not(.readonly) .inputs .line:not(.active):not(.selected):hover::after {
    border-color: var(--blue);
}

.lora-module .inputs .line.active.invalid::after {
    border-color: var(--red);
}

.lora-module .inputs .line.selected::after {
    border-color: var(--orange);
    background-color: var(--orange);
}

.lora-module .inputs .line.selected:focus::after {
    animation: 0.3s linear 0s 1 normal forwards running animationShadow;
}

@keyframes animationShadow {
    from {
        box-shadow: 0 0 0 6px rgba(255, 160, 0, 0.54);
    }

    to {
        box-shadow: 0 0 0 0 transparent;
    }
}

.lora-module .inputs .info {
    flex: 1 0;
    box-sizing: border-box;
    padding: 0 4px;
}

/* utility */

.card-utility {
    --w: 300px;
    --margin-x: 16px;
    --margin-y: 12px;
}

@media (max-width: 599px) {
    .card-utility {
        --w: calc(100% - var(--margin-x) * 2);
    }
}

.card-utility:not(.sexy) {
    position: relative;
    width: var(--w);
    margin: var(--margin-y) var(--margin-x);
    border-radius: 16px;
    flex-shrink: 0;
}

.card-utility .content {
    box-sizing: border-box;
    padding: 8px;
}

.card-utility .title {
    padding: 28px 0 8px;
}

.card-utility .month {
    margin: 8px 0 16px;
}

.card-utility .numbers {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.card-utility .number {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 300;
    font-size: 3rem;
    line-height: 1;
    min-width: calc(var(--w) / 2);
    min-height: 48px;
    white-space: nowrap;
}

.card-utility .numbers.empty {
    color: var(--muted-light);
}

.card-utility .number.small {
    font-size: 1.55rem;
    min-width: calc(var(--w) / 3);
    min-height: 0;
}

.card-utility .unit {
    font-size: small;
    align-self: flex-start;
    padding-right: 1rem;
}

.card-utility .variation {
    color: var(--muted-light);
}

.card-utility .variation.good {
    color: var(--green);
}

.card-utility .variation.bad {
    color: var(--red);
}

.card-utility .variation .material-icons {
    font-size: 20px;
    vertical-align: middle;
}

.card-utility .utility-body .month {
    padding: 0 32px;
}

.card-utility .utility-body .device {
    position: relative;
    padding: 1rem 0.5rem;
    transition: background-color 0.2s;
}

.card-utility .utility-body .device:not(:last-child) {
    border-bottom: 1px solid var(--line-color);
}

.card-utility .utility-body .device .name {
    font-weight: 600;
    flex: 1;
}

.card-utility .btn-more,
.card-utility .btn-more .md-ripple-container {
    border-bottom-right-radius: 16px;
}

.blurred-glass {
    height: 20vh;
    background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
}

.blurred-glass.cold_water {
    background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}

.blurred-glass.hot_water {
    background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
}

.blurred-glass.heating {
    background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);
}

.blurred-glass.electricity {
    background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
}

.card-utility:not(.sexy) .blurred-glass {
    height: 60px;
}

.card-utility .utility-header {
    box-sizing: border-box;
    padding: 0 24px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    background: #fff;
    border-bottom: 1px solid var(--line-color);
    height: 60px;
    z-index: 2;
}

.card-utility .utility-round-empty,
.card-utility .utility-round {
    --s: 125px;
    width: var(--s);
    margin-left: 36px;
    flex-shrink: 0;
}

.card-utility .utility-round-container {
    height: 0;
    top: 100px;
    z-index: 3;
}

.card-utility .utility-round-container.small {
    position: relative;
    height: 0;
    top: 0;
    z-index: auto;
}

.card-utility .utility-round {
    position: relative;
    top: -140px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: var(--s);
    height: var(--s);

    border-radius: 50%;
    background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
    box-shadow: var(--shadow-element);
}

.card-utility .utility-round > * {
    --fs: 3.5em;
    height: var(--fs);
    width: var(--fs);
    min-height: var(--fs);
    min-width: var(--fs);
}

.card-utility .utility-round-container.small .utility-round {
    --s: 60px;
    top: calc(var(--s) / -2);
    margin-left: 0;
}

.card-utility .utility-round-container.small .utility-round > * {
    --fs: 2.75em;
}

.card-utility .utility-body {
    padding: 24px;
}

.card-utility .sign-eq {
    font-size: 4rem;
    line-height: 1rem;
    color: var(--green);
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 100;
}

@media (max-width: 1480px) {
    .card-utility .sign-eq {
        font-size: 3rem;
    }

    .card-utility .number {
        font-size: 2.5rem;
    }
}

.card-utility .sign {
    position: absolute;
    left: 50%;
    top: 0;
    color: var(--green);
    font-size: 2rem;
    transform: translate(-50%, -50%);
    pointer-events: none;
    touch-action: none;
}

@media (max-width: 599px) {
    .blurred-glass {
        height: 10vh;
    }

    .card-utility .utility-round-empty,
    .card-utility .utility-round-container:not(.small) .utility-round {
        --s: 75px;
    }

    .card-utility .utility-round-container:not(.small) .utility-round {
        top: -110px;
    }

    .card-utility .utility-body .month {
        padding: 0 24px;
        margin-top: 0;
        margin-bottom: 8px;
        text-align: center;
    }
}

/* digital */

.digits {
    --duration: 0.5s;
    display: inline-flex;
    flex-direction: row;
    font-family: 'Source Sans Pro', sans-serif;
}

.digit {
    --s: 14px;
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;

    width: calc(var(--s) * 1.75);
    height: calc(var(--s) * 2 + 0px);

    perspective-origin: 50% 50%;
    perspective: 200px;
}

.digit::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.5);
}

.digit + .digit {
    margin-left: 2px;
}

.digit > * {
    position: absolute;
    box-sizing: border-box;
    left: 0;

    flex-shrink: 0;
    width: 100%;
    height: var(--s);

    font-size: calc(var(--s) * 2);
    line-height: calc(var(--s) * 2);
    text-align: center;
}

.digit > * > * {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--line-color);
    color: var(--muted-light);
    overflow: hidden;
    user-select: none;
}

.digit.vital > * > *,
.digit.vital ~ .digit > * > * {
    color: #000;
}

.digit .f.f1,
.digit .l.l1 {
    top: 0;
    transform-origin: 50% 100%;
}

.digit .f.f2,
.digit .l.l2 {
    bottom: 0;
    transform-origin: 50% 0;
}

.digit .f.f1 > *,
.digit .l.l1 > * {
    border-radius: 8px 8px 0 0;
}

.digit .f.f2 > *,
.digit .l.l2 > * {
    align-items: flex-end;
    border-radius: 0 0 8px 8px;
}

.digit .l.l1 {
    transform: rotateX(-90deg);
}

.digits.go .digit.go > * {
    transition: transform;
    transition-timing-function: linear;
    transition-duration: var(--duration);
}

.digits.go .digit.go .l.l1 {
    z-index: 1;
    transform: rotateX(0);
    transition-duration: calc(var(--duration) / 2);
    transition-delay: calc(var(--duration) / 2);
}

.digits.go .digit.go .f.f2 {
    transform: rotateX(90deg);
    transition-duration: calc(var(--duration) / 2);
}

/* guide */

.guide-panel {
    position: fixed;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 1px 10px rgba(0, 0, 0, .4);
    width: 270px;
    padding: 8px;
    border-radius: 4px;
    z-index: 502;
}

.guide-panel .step-number {
    box-sizing: content-box;
    position: absolute;
    left: -16px;
    top: -16px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    padding: 2px;
    border: 3px solid white;
    border-radius: 50%;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
    color: #fff;
    font-weight: bold;
    background: linear-gradient(to bottom, #ff3019 0, #cf0404 100%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .4);
}

.guide-panel .circles {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 8px 0;
}

.guide-panel .circle {
    display: inline-block;
    padding: 4px;
    background-color: var(--muted-32);
    border-radius: 50%;
    cursor: pointer;
    border: 4px solid #fff;
    transition: background-color 0.2s;
}

.guide-panel .circle.active {
    background-color: var(--blue);
}

.guide-panel button md-icon {
    line-height: 23px;
}

.guide-panel .md-button + .md-button {
    margin-left: 4px;
}

.overlay-guide {
    position: fixed;
    z-index: 500;
    background-color: rgba(0, 0, 0, 0.55);
}

.guide-animation .guide-panel,
.guide-animation .overlay-guide,
.guide-animation .highlight-guide {
    transition: all 0.2s cubic-bezier(.25, .8, .25, 1);
}

.highlight-guide {
    position: fixed;
    z-index: 501;
    background-color: transparent;
    animation: 0.85s linear 0s infinite normal none running blink;
}

@keyframes blink {
    from {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.75);
    }
    to {
        box-shadow: 0 0 0 16px transparent;
    }
}

.overlay-guide.top {
    left: 0;
    top: 0;
    right: 0;
}

.overlay-guide.right {
    right: 0;
}

.overlay-guide.left {
    left: 0;
}

.overlay-guide.bottom {
    left: 0;
    right: 0;
    bottom: 0;
}

.guide-panel,
.overlay-guide,
.highlight-guid {
    opacity: 0;
    box-shadow: none;
}

.guide-panel.in,
.overlay-guide.in,
.highlight-guide.in {
    opacity: 1;
}

/* notifications */

.toolbar-button-notification {
    position: relative;
}

.notification-alert {
    --w: 128px;
    position: absolute;
    top: 80%;
    left: calc((100% - var(--w)) / 2);
    width: var(--w);
    padding: 4px;
    border-radius: 4px;

    background-color: var(--sea);
    color: #fff;
    font-size: small;
    text-align: center;
    white-space: nowrap;

    transform-origin: 50% 0;
    box-shadow: var(--shadow-element);
    z-index: 100;
    pointer-events: none;
    touch-action: none;
}

.notification-alert::before {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    content: " ";
    width: 12px;
    height: 12px;
    background: linear-gradient(-45deg, transparent 0%, transparent 50%, var(--sea) 50%, var(--sea) 100%);
    display: block;
    position: absolute;
    left: calc(50% - 6px);
    top: -6px;
    transform: rotateZ(45deg);
}

.panel-notifications {
    padding: 0;
    width: 480px;
    height: 300px;
}

@media (max-width: 599px) {
    .panel-notifications {
        width: 90%;
    }
}

.panel-notifications > div {
    height: 100%;
}

.notification {
    margin: 8px 8px 0;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: var(--shadow-element);
    transition: background-color 0.2s, transform 0.2s cubic-bezier(.3, .9, .6, 1.3), box-shadow 0.2s;
}

.notification:last-child {
    margin-bottom: 8px;
}

.notification.on-page:not(:last-child) {
    margin-bottom: 16px;
}

.notification.unread {
    cursor: pointer;
}

.notification.unread {
    background-color: var(--sea);
}

.notification:not(.unread) md-icon {
    color: var(--sea);
}

.notification.unread,
.notification.unread small,
.notification.unread md-icon {
    color: #fff;
}

.notification .icon {
    margin: 16px;
}

.notification .info {
    margin: 8px 8px 8px 0;
}

.notification .text {
    line-height: 1;
}

.notification.on-page .text {
    line-height: 1.5;
}

.notification.unread:active {
    transform: scale(0.95);
    box-shadow: none;
}

.btn-notifications {
    position: fixed;
    top: var(--toolbar-height);
    left: calc(50% - 140px);
    width: 280px;
    z-index: 50;
}

.notification-settings {
    position: relative;
    width: 280px;
    overflow: hidden;
}

@media (max-width: 599px) {
    .notification-settings {
        width: 100%;
    }
}

.notification-settings > *:not(.not-gray) {
    transition: filter 0.2s;
}

.notification-settings.inactive > *:not(.not-gray) {
    filter: grayscale(1) opacity(0.7);
}

.notification-settings .line-inactive {
    position: absolute;
    background-color: var(--red);
    color: #fff;
    top: 0;
    right: 0;
    transform-origin: 100% 0;
    transform: rotateZ(45deg) translate(50%, 125%);
    width: 100px;
    text-align: center;
}

/* list-model */

.list-model .chip {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    border-radius: 16px;
    height: 32px;
    margin: 8px 8px 0 0;
    padding: 0 5px 0 10px;
    box-sizing: border-box;
    max-width: 100%;
    background: var(--muted-light);
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
}

.list-model .chip.btn {
    border: none;
    outline: none;
    justify-content: center;
    margin-right: 0;
    padding: 0;
    flex: 1 0 100%;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
    transition: transform 0.2s cubic-bezier(.3, .9, .6, 1.3);
}

.list-model .chip.btn:active {
    transform: scale(0.95);
}

.list-model .chip.red {
    background: var(--red);
    color: #fff;
}

.list-model .chip.green {
    background: var(--green);
    color: #fff;
}

.list-model .chip button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 24px;
    width: 24px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0 0 0 5px;
    transition: background 0.15s linear;
}

.list-model .chip button:hover {
    background: var(--red);
}

.list-model .chip.green button:hover,
.list-model .chip.btn-green button:hover {
    background: var(--green);
}

.list-model .chip button md-icon {
    color: #fff;
}

/* swapper */

.swapper {
    position: relative;
}

.swapper > div {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    transition: all 0.2s cubic-bezier(.25, .8, .25, 1);
}

.swapper > div.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    position: none;
    touch-action: none;
}

.swapper > div:nth-child(2) {
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    position: none;
    touch-action: none;
}

.swapper > div:nth-child(2).shown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    touch-action: auto;
}

/* indications */

.indications-value,
.indications-value .expand-info {
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.indications-value {
    --min-w: 164px;
    min-width: var(--min-w);
    flex: 1 0 var(--min-w);
    border: 1px solid var(--line-color);
    padding: 8px;
    margin: 0 4px;
    background-color: #fff;
    box-shadow: 0 2px 2px 2px var(--line-color-opacity);
    border-radius: 6px;
}

.indications-value:first-child {
    margin-left: 0;
}

.indications-value:last-child {
    margin-right: 0;
}

.indications-value .number {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.01rem;
    min-width: 50%;
    text-align: right;
}

.indications-value .diff {
    align-self: flex-end;
    font-weight: 600;
}

.indications-value .expand-info {
    width: 100%;
    align-items: flex-end;
}

.indications-value hr {
    margin: 0;
    border: none;
    height: 1px;
    width: 100%;
    background-color: var(--line-color);
}

.indications-value [data-tooltip] {
    position: relative;
}

.indications-value [data-tooltip]::before {
    content: attr(data-tooltip);
    font-size: 0.8rem;
    position: absolute;
    right: calc(100% + 0.2rem);
    top: 0.2rem;
    font-weight: normal;
    color: var(--black-24);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    touch-action: none;
    transform: translateX(-50%);
    transition: all 0.2s;
}

.indications-value.expanded [data-tooltip]::before,
.indications-value [data-tooltip].data-tooltip-shown::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.indications-value .animate-if-height.ng-enter,
.indications-value .animate-if-height.ng-leave {
    transition: all 0.2s cubic-bezier(.3, .9, .6, 1.3);
}

.indications-value .animate-if-height.ng-enter,
.indications-value .animate-if-height.ng-leave.ng-leave-active {
    height: 0;
    opacity: 0;
}

.indications-value .animate-if-height.ng-leave,
.indications-value .animate-if-height.ng-enter.ng-enter-active {
    height: 45px;
    opacity: 1;
}

/* outputs calculator */

.indications-value.calculator {
    --min-w: 260px;
    display: flex;
    align-items: center;
    margin: 8px 8px 0;
    transition: all .3s;
}

.indications-value.calculator > .title {
    align-self: flex-start;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.indications-value.calculator.ng-invalid-required {
    box-shadow: 0 2px 2px 2px var(--line-color-opacity), 0 0 0 1px var(--red);
}

.indications-value.calculator > .operator {
    font-size: 24px;
    line-height: 12px;
}

.indications-value.calculator hr {
    margin: 8px 0 0;
}

.indications-value.calculator .total {
    padding: 8px 8px 0;
}