/*
 * Define scrollbar
 */

::-webkit-scrollbar {
  background: transparent;
  width: 2px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: transparent;
}

::-webkit-scrollbar-thumb:hover {
  background: transparent;
}

/*
 * Define toolbar
 */

md-toolbar {
  height: 60px;
  min-height: 60px;
  max-height: 60px;
}

md-toolbar .md-toolbar-tools {
  font-size: 18px;
  font-weight: bold;
  height: 60px;
  min-height: 60px;
  max-height: 60px;
}

md-toolbar .md-toolbar-tools .md-errors-spacer {
  min-height: auto;
}

/*
 * Define icon
 */

md-icon[md-font-icon] {
  text-align: center;
  line-height: 1;
  width: auto;
  height: auto;
  min-width: auto;
  max-width: none;
  min-height: auto;
  max-height: none;
  border: 0;
  margin: 0;
  margin-top: -2px;
  padding: 0;
}

md-icon[md-font-icon] + h3,
md-icon[md-font-icon] + h4 {
  margin-left: 3px;
}

md-icon[md-font-icon] + md-icon[md-font-icon] {
  margin-left: 3px;
  margin-right: 3px;
}

/*
 * Define button
 */

.md-button {
  font-size: 14px;
  line-height: unset;
  width: auto;
  min-width: auto;
  max-width: none;
  height: auto;
  min-height: auto;
  max-height: none;
  border: 0;
  margin: 0;
  padding: 0;
}

.md-button.md-raised {
  padding: 8px;
}

.md-button.md-icon-button {
  font-size: 14px;
  line-height: 32px;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  border: 0;
  margin: 0;
  padding: 0;
}

.md-button.md-icon-button.md {
  font-size: 22px;
  line-height: 40px;
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
}

.md-button.md-icon-button.lg {
  font-size: 26px;
  line-height: 50px;
  width: 50px;
  min-width: 50px;
  max-width: 50px;
  height: 50px;
  min-height: 50px;
  max-height: 50px;
}

.toggle-button {
  margin-right: -8px;
  margin-top: -8px; 
  font-size: 14px;
  line-height: 32px;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  border: 0;
  margin: 0;
  padding: 0;
}

.md-button.md-icon-button:hover:not([disabled]) {
  background-color: rgba(var(--pipe-color-rgb), .35);
}

.md-button.md-icon-button.active {
  background-color: rgba(var(--pipe-color-rgb), .18);
}

.md-button.md-icon-button:disabled {
  background-color: #222;
}

.md-button.md-icon-button+.md-button.md-icon-button {
  margin-left: 3px;
}

.md-menu+.md-button.md-icon-button {
  margin-left: 3px;
}

/*
 * Define list
 */

md-list.md-dense md-list-item.md-2-line {
  overflow: hidden;
  border: 0;
  border-radius: 4px;
  margin: 0 8px;
  margin-bottom: 4px;
}

md-list.md-dense md-list-item.md-2-line.md-2-line-user {
  border-radius: 0;
  margin: 0;
}

md-list.md-dense md-list-item.md-2-line:hover {
  background-color: rgba(var(--pipe-color-rgb), .35);
}

md-list.md-dense md-list-item.md-2-line.active {
  background-color: rgba(var(--pipe-color-rgb), .18);
}

md-list.md-dense md-list-item.md-2-line .md-avatar-icon,
md-list.md-dense md-list-item.md-2-line > .md-avatar,
md-list.md-dense md-list-item.md-2-line > .md-no-style .md-avatar-icon,
md-list.md-dense md-list-item.md-2-line > .md-no-style > .md-avatar {
  background-color: rgba(0, 0, 0, .18);
  color: rgba(255, 255, 255, .78);
  font-size: 20px;
  line-height: 36px;
  width: 36px;
  height: 36px;
  min-width: 36px;
  max-width: 36px;
  min-height: 36px;
  max-height: 36px;
  border: 0;
  margin-right: 16px;
  padding: 0;
}

md-list.md-dense md-list-item .md-avatar,
md-list.md-dense md-list-item .md-avatar-icon,
md-list.md-dense md-list-item .md-list-item-inner .md-avatar,
md-list.md-dense md-list-item .md-list-item-inner .md-avatar-icon {
  margin-right: 16px;
}

md-list.md-dense md-list-item .md-avatar.md-avatar-change {
  cursor: pointer;
}

md-list.md-dense md-list-item .md-avatar.md-avatar-change.active {
  border: 4px solid #f89406;
  margin-right: 8px;
  transform: translateX(-4px) translateY(-2px);
}

md-list.md-dense md-list-item .md-list-item-type {
  position: absolute;
  top: 38px;
  left: 42px;
  width: 10px;
  height: 10px;
  border: 1px solid #eee;
  border-radius: 50%;
  box-sizing: initial;
}

md-list.md-dense md-list-item.md-2-line .md-list-item-text h3,
md-list.md-dense md-list-item.md-2-line > .md-no-style .md-list-item-text h3,
md-list.md-dense md-list-item.md-3-line .md-list-item-text h3,
md-list.md-dense md-list-item.md-3-line > .md-no-style .md-list-item-text h3 {
  font-size: 14px;
  font-weight: bold;
  line-height: 18px;
}

md-list.md-dense md-list-item.md-2-line .md-list-item-text h4,
md-list.md-dense md-list-item.md-2-line > .md-no-style .md-list-item-text h4,
md-list.md-dense md-list-item.md-3-line .md-list-item-text h4,
md-list.md-dense md-list-item.md-3-line > .md-no-style .md-list-item-text h4 {
  font-size: 13px;
  font-weight: normal;
  line-height: 18px;
}

md-list.md-dense md-list-item.md-2-line .md-list-item-text p,
md-list.md-dense md-list-item.md-2-line > .md-no-style .md-list-item-text p,
md-list.md-dense md-list-item.md-3-line .md-list-item-text p,
md-list.md-dense md-list-item.md-3-line > .md-no-style .md-list-item-text p {
  font-size: 13px;
  font-weight: normal;
  line-height: 18px;
}

md-list.md-dense md-list-item .md-list-item-inner md-icon:first-child,
md-list.md-dense md-list-item md-icon:first-child {
  width: auto;
  height: auto;
}

md-list-item .md-list-item-inner .md-secondary-container,
md-list-item .md-secondary-container {
  font-size: 13px;
  font-weight: normal;
}

md-list-item .time {
  position: relative;
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  line-height: 15px;
  width: 60px;
  border: 0;
  border-radius: 4px;
  margin: 0;
  padding: 4px 2px;
  opacity: .78;
}

md-list-item .time:hover {
  opacity: .98;
}

md-list-item .time md-icon {
  font-size: 16px;
}

/*
 * Define input container
 */

md-input-container.md-block {
  margin: 0;
  margin-top: 20px;
  height: 50px;
}

md-input-container.md-block.sm {
  margin: 0;
  height: 40px;
}

md-input-container.md-block.sm .md-errors-spacer {
  display: none;
}

md-input-container .md-input,
md-input-container.md-input-focused .md-input,
md-input-container.md-input-resized .md-input,
md-input-container.md-input-has-value .md-input {
  font-size: 14px;
  line-height: 1;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .18);
  margin: 0;
  padding: 0;
}

md-input-container textarea.md-input,
md-input-container.md-input-focused textarea.md-input,
md-input-container.md-input-resized textarea.md-input,
md-input-container.md-input-has-value textarea.md-input {
  padding-top: 8px;
  min-height: 30px !important;
}

md-input-container.md-input-focused label:not(.md-not-float),
md-input-container.md-input-resized label:not(.md-not-float),
md-input-container.md-input-has-value label:not(.md-no-float) {
  font-size: 14px;
  margin-bottom: -6px;
  padding-bottom: 0;
}

md-input-container.md-input-focused:not([md-not-float]) .md-select-placeholder span:first-child,
md-input-container.md-input-resized:not([md-not-float]) .md-select-placeholder span:first-child,
md-input-container.md-input-has-value:not([md-not-float]) .md-select-placeholder span:first-child {
  font-size: 14px;
  margin-bottom: -6px;
  padding-bottom: 0;
}

md-input-container .md-placeholder,
md-input-container label:not(.md-no-float):not(.md-container-ignore) {
  font-size: 14px;
  padding-bottom: 2px;
}

md-input-container label:not(.md-container-ignore).md-required:after {
  content: ' *';
  color: #ff0000 !important;
  font-size: 11px;
  vertical-align: top;
}

md-input-container .md-input.ng-invalid.ng-dirty {
  border-bottom: 1px solid rgba(255, 0, 0, .18);
}

md-input-container .md-errors-spacer .md-char-counter {
  font-size: 8px;
}

md-input-container .md-char-counter,
md-input-container .md-input-message-animation {
  font-size: 11px;
  font-weight: bold;
  line-height: 15px;
  border: 0;
  margin: 0;
  padding: 0;
}

md-input-container .md-hint {
  color: rgba(0, 0, 0, .18);
  font-size: 11px;
  font-weight: bold;
  line-height: 15px;
  border: 0;
  margin: 0;
  padding: 0;
}

md-input-container md-select {
  font-size: 14px;
  min-width: auto;
  max-width: none;
  margin-right: 5px;
}

md-input-container md-select .md-select-value,
md-input-container md-select:not([disabled]) .md-select-value {
  overflow: hidden;
  min-width: auto;
  max-width: none;
  height: 29px;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .18);
  margin: 0;
  padding: 0;
}

md-input-container md-select:not([disabled]) .md-select-value,
md-input-container md-select:not([disabled]):focus .md-select-value {
  border-width: 1px;
}

md-input-container md-select .md-select-value .md-select-icon {
  display: none;
}

md-input-container .md-pick-item-type {
  overflow: hidden;
  position: absolute;
  top: 8px;
  right: 16px;
  width: 18px;
  height: 18px;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 50%;
  margin: 0;
  padding: 0;
}

/*
 * Define dialog
 */

.md-title {
  color: rgba(0, 0, 0, .18);
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  width: 100%;
  border: 0;
  margin: 0;
  margin-top: 32px;
  padding: 0;
}

.md-block-actions {
  text-align: center;
  width: 100%;
  border: 0;
  margin: 0;
  margin-top: 16px;
  padding: 0;
}

.md-block-actions button {
  width: 100%;
  border: 1px solid #333;
  margin: 0;
  padding: 8px;
  opacity: 1;
}

.md-block-actions button:disabled {
  opacity: .18;
}

/*
 * Define dialog
 */
.cdk-overlay-container {
  z-index: 90 !important;
}
md-dialog {
  background-color: #fff;
  width: 600px;
  max-width: 600px !important;
  height: 500px;
  max-height: 500px !important;
  border-radius: 4px;
}

md-dialog.md {
  width: 780px;
  max-width: 780px !important;
  height: 600px;
  max-height: 600px !important;
}

md-dialog.lg {
  width: 100%;
  max-width: 100% !important;
  height: 100%;
  max-height: calc(100% - 60px) !important;
  margin-top: 60px !important;
  border-radius: 0 !important;
}

md-dialog.xs {
  width: 20%;
  max-width: 20% !important;
  height: 17%;
  justify-content: center;
  align-items: center;
}

md-dialog.fs {
  width: 100%;
  max-width: 100% !important;
  height: 100%;
  max-height: 100% !important;
  border-radius: 0 !important;
}

md-dialog.modal-operator-state {
  width: 20%;
  height: 500px;
  border-radius: 0 !important;
  position: fixed;
  z-index: 9999;
  right: 88px;
  top: 60px;
}

md-dialog md-toolbar md-list.md-dense {
  margin-left: -16px;
}

md-dialog md-toolbar md-list.md-dense md-list-item.md-2-line:hover {
  background-color: transparent;
}

md-dialog md-toolbar md-list.md-dense md-list-item.md-2-line.active {
  background-color: transparent;
}

md-dialog md-dialog-content md-content.flex-25 {
  background-color: #e7e7e7;
  border-right: 1px solid rgba(0, 0, 0, .18);
}

md-dialog md-dialog-content md-content.flex-50  {
  background-color: #f7f7f7;
  border-right: 1px solid rgba(0, 0, 0, .18);
}

.flex-50, .layout-row>.flex-50 {
  flex: 1 1 100%;
  max-width: 75%;
  max-height: 100%;
  box-sizing: border-box;
}

.layout-row>.flex {
    min-width: 25%;
} 

md-backdrop.md-opaque {
  background-color: #000;
  opacity: .0;
}

/*
 * Define select
 */

.md-select-menu-container {
  background-color: #fff;
}

.md-select-menu-container md-option {
  font-size: 12px;
  height: 28px;
}

.md-select-menu-container md-option:hover {
  background-color: rgba(0, 0, 0, .13);
}

.md-select-menu-container md-option:focus {
  background-color: rgba(0, 0, 0, .13);
}

.md-select-menu-container md-option[selected] {
  background-color: rgba(0, 0, 0, .18);
}

/*
 * Define menu
 */

.md-open-menu-container {
  background-color: #fff;
}

.md-open-menu-container md-menu-item {
  height: auto;
  min-height: 0;
}

.md-open-menu-container md-menu-item > .md-button {
  font-size: 12px;
  height: 28px;
}

.md-open-menu-container md-menu-item > .md-button:hover {
  background-color: rgba(0, 0, 0, .13);
}

.md-open-menu-container md-menu-item > .md-button:focus {
  background-color: rgba(0, 0, 0, .13);
}

.md-open-menu-container md-menu-item > .md-button:disabled {
  color: rgba(0, 0, 0, .18);
}

.md-open-menu-container md-menu-item > .md-button md-icon {
  margin: 0 3px;
  width: 14px;
}

/*
 * Define switch
 */

md-switch .md-thumb {
  background-color: #e7e7e7;
}

md-switch .md-bar {
  background-color: rgba(0, 0, 0, .38);
}

md-switch.md-checked .md-thumb {
  background-color: rgb(16,108,200);
}

md-switch.md-checked .md-bar {
  background-color: rgba(16,108,200,0.5);
}

/*
 * Define datepicker
 */

md-datepicker {
  float: left;
  width: auto;
  min-width: auto;
  max-width: none;
  height: auto;
  min-height: auto;
  max-height: none;
  border: 0;
  margin: 0;
  padding: 0;
}

md-datepicker .md-datepicker-input-container {
  display: block;
  width: 100%;
  min-width: auto;
  max-width: none;
  height: auto;
  min-height: auto;
  max-height: none;
  border: 0;
  margin: 0;
  padding: 0;
}

md-datepicker .md-datepicker-input-container .md-datepicker-input {
  display: block;
  color: inherit;
  font-size: 12px;
  font-weight: inherit;
  line-height: inherit;
  cursor: pointer;
  width: 70px;
  min-width: auto;
  max-width: none;
  height: auto;
  min-height: auto;
  max-height: none;
  border: 0;
  margin: 0;
  padding: 0;
}

md-datepicker + md-select {
  float: left;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  width: auto;
  min-width: auto;
  max-width: none;
  height: auto;
  min-height: auto;
  max-height: none;
  border: 0;
  margin: 0;
  padding: 0;
}

md-datepicker + md-select .md-select-value {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  width: auto;
  min-width: auto;
  max-width: none;
  height: auto;
  min-height: auto;
  max-height: none;
  border: 0;
  margin: 0;
  padding: 0;
}

md-datepicker + md-select .md-select-value .md-select-icon {
  display: none;
}

md-datepicker + md-select .md-select-value > span:not(.md-select-icon) .md-text {
  border: 0;
  margin: 0;
  padding: 0;
}

md-datepicker + md-select:not([disabled]):focus .md-select-value {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Define datepicker calendar
 */

.md-datepicker-calendar-pane.md-pane-open {
  background-color: #fff;
  border: 1px solid #333;
  border-radius: 4px;
  margin: 0;
  margin-left: -16px;
  padding: 0;
  box-shadow: none;
}

.md-datepicker-calendar-pane.md-pane-open .md-datepicker-input-mask {
  display: none;
}

.md-datepicker-calendar-pane.md-pane-open .md-calendar-scroll-container {
  box-shadow: none;
}

.md-datepicker-calendar-pane.md-pane-open .md-datepicker-calendar .md-calendar-selected-date .md-calendar-date-selection-indicator {
  background-color: rgba(128, 128, 128, .78);
  color: #fff;
  border: 1px solid rgba(128, 128, 128, .78);
}

.md-datepicker-calendar-pane.md-pane-open .md-datepicker-calendar .md-calendar-date-disabled {
  color: rgba(255, 0, 0, .78);
}

/*
 * Define tooltip
 */

.md-tooltip {
  background-color: #000;
  height: auto;
  margin: 0;
  border: 0;
  padding: 8px;
}

.md-tooltip .md-tooltip-top .md-tooltip-top-title {
  color: rgba(255, 255, 255, .93);
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
}

.md-tooltip .md-tooltip-top .md-tooltip-top-value {
  color: rgba(255, 255, 255, .88);
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
}

.md-tooltip .md-tooltip-top .md-tooltip-top-title md-icon,
.md-tooltip .md-tooltip-top .md-tooltip-top-value md-icon {
  color: rgba(255, 255, 255, .88);
  font-size: 12px;
  line-height: 20px;
  text-align: left;
  width: 16px;
}

.md-tooltip .md-tooltip-top.inline .md-tooltip-top-title {
  position: relative;
  display: inline-block;
  margin-right: 4px;
}

.md-tooltip .md-tooltip-top.inline .md-tooltip-top-title:before {
  position: absolute;
  content: ':';
  right: -4px;
  color: rgba(255, 255, 255, .88);
  font-size: 12px;
  font-weight: normal;
  line-height: 20px;
}

.md-tooltip .md-tooltip-top.inline .md-tooltip-top-value {
  position: relative;
  display: inline-block;
  margin-right: 4px;
}

.md-tooltip .md-tooltip-top.inline .md-tooltip-top-value:before {
  position: absolute;
  content: '.';
  right: -4px;
  color: rgba(255, 255, 255, .88);
  font-size: 12px;
  font-weight: normal;
  line-height: 20px;
}

.md-tooltip .md-tooltip-box .md-tooltip-box-title {
  display: inline-block;
  overflow: hidden;
  color: rgba(255, 255, 255, .83);
  font-size: 12px;
  font-weight: normal;
  line-height: 12px;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 150px;
}

.md-tooltip .md-tooltip-box .md-tooltip-box-value {
  display: inline-block;
  overflow: hidden;
  color: rgba(255, 255, 255, .88);
  font-size: 12px;
  font-weight: bold;
  line-height: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 150px;
}

.md-tooltip .md-tooltip-top + .md-tooltip-box {
  margin-top: 10px;
}

/*
 * Define toast
 */

.md-toast.md-bottom {
  position: absolute;
  bottom: 5px;
  left: 50%;
  width: 300px;
  min-width: auto;
  max-width: none;
  height: 50px;
  min-height: auto;
  max-height: none;
  border: 0;
  margin: 0;
  margin-left: -150px;
  padding: 0;
}

.md-toast .md-toast-content {
  background-color: #333;
  color: #fff;
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  text-align: center;
  width: 100%;
  min-width: auto;
  max-width: none;
  height: 100%;
  min-height: auto;
  max-height: none;
  border: 0;
  margin: 0;
  padding: 0;
}

.md-toast .md-toast-content div {
  border: 0;
  margin: 0 auto;
  padding: 5px;
}

.md-toast.info .md-toast-content {
  background-color: #2f96b4;
}

.md-toast.error .md-toast-content {
  background-color: #bd362f;
}

.md-toast.success .md-toast-content {
  background-color: #51a351;
}

.md-toast.warning .md-toast-content {
  background-color: #f89406;
}

/*
 * Define authorize section
 */

.app-authorize {
  max-width: 320px;
  border: 0;
  margin: 0 auto;
  padding: 0;
}

.app-authorize > md-content {
  background-color: rgba(255, 255, 255, .98);
  color: #333;
  border: 0;
  border-radius: 4px;
  margin: 0;
  padding: 32px 16px;
}

.app-authorize > md-content md-input-container {
  margin-top: 0;
  margin-bottom: 8px;
}

.app-authorize > md-content md-input-container md-icon {
  margin: 3px;
}

.app-authorize > .company {
  color: #f7f7f7;
  text-align: center;
  border: 0;
  margin: 0;
  margin-top: 50%;
  padding: 0;
  padding: 8px;
}

.app-authorize > .company > img {
  height: 60px;
}

.app-authorize > .language {
  color: #f7f7f7;
  text-align: right;
  border: 0;
  margin: 0;
  margin-top: 8px;
  padding: 8px;
}

/*
 * Define dashboard section
 */

.app-dashboard > md-toolbar {
  background-color: rgba(0, 0, 0, .5);
}

.app-dashboard > md-toolbar > .md-toolbar-tools {
  margin: 0;
  border: 0;
  padding: 0;
}

.app-dashboard > md-toolbar > .md-toolbar-tools > .brand {
  color: #e7e7e7;
  border: 0;
  margin: 16px;
  padding: 0;
}

.app-dashboard > md-toolbar > .md-toolbar-tools > .brand > img {
  height: 40px;
  margin-top: 14px;
}

.app-dashboard > md-toolbar > .md-toolbar-tools > .items {
  color: #e7e7e7;
  border: 0;
  margin: 0;
  padding: 0;
}

.app-dashboard > md-toolbar md-list.md-dense md-list-item.md-2-line .md-list-item-text h3,
.app-dashboard > md-toolbar md-list.md-dense md-list-item.md-2-line > .md-no-style .md-list-item-text h3,
.app-dashboard > md-toolbar md-list.md-dense md-list-item.md-3-line .md-list-item-text h3,
.app-dashboard > md-toolbar md-list.md-dense md-list-item.md-3-line > .md-no-style .md-list-item-text h3 {
  color: rgba(255, 255, 255, .88);
}

.app-dashboard > md-toolbar md-list.md-dense md-list-item.md-2-line .md-list-item-text h4,
.app-dashboard > md-toolbar md-list.md-dense md-list-item.md-2-line > .md-no-style .md-list-item-text h4,
.app-dashboard > md-toolbar md-list.md-dense md-list-item.md-3-line .md-list-item-text h4,
.app-dashboard > md-toolbar md-list.md-dense md-list-item.md-3-line > .md-no-style .md-list-item-text h4 {
  color: rgba(255, 255, 255, .83);
}

.app-dashboard > md-toolbar md-list.md-dense md-list-item.md-2-line .md-list-item-text p,
.app-dashboard > md-toolbar md-list.md-dense md-list-item.md-2-line > .md-no-style .md-list-item-text p,
.app-dashboard > md-toolbar md-list.md-dense md-list-item.md-3-line .md-list-item-text p,
.app-dashboard > md-toolbar md-list.md-dense md-list-item.md-3-line > .md-no-style .md-list-item-text p {
  color: rgba(255, 255, 255, .83);
}

.app-dashboard md-content,
.app-dashboard md-content * {
  color: #e7e7e7;
}

.app-dashboard md-content h3,
.app-dashboard md-content h3 * {
  color: #e7e7e7;
}

.app-dashboard md-content h4,
.app-dashboard md-content h4 * {
  color: rgba(255, 255, 255, .38);
}

.app-dashboard md-content p {
  color: rgba(255, 255, 255, .38);
}

.app-dashboard md-content input::placeholder {
  color: rgba(255, 255, 255, .38);
}

/*
 * Define metric
 */

.app-metric {
  border: 0;
  margin: 0;
  padding: 0;
}

.app-metric-container {
  border: 0;
  margin: 8px;
  padding: 0;
  gap: 8px;
}

.app-metric-content {
  overflow: hidden;
  background-color: rgba(0, 0, 0, .38);
}

.app-metric-content.dark {
  background-color: rgba(0, 0, 0, .58);
}

.app-metric-content-sep {
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, .18);
}

.app-metric-content-box {
  cursor: default;
  border: 0;
  margin: 0;
  padding: 10px 0;
}

.app-metric-content-box[ng-click] {
  cursor: pointer;
}

.app-metric-content-box[ng-click]:hover {
  background-color: rgba(255, 255, 255, .18);
}

.app-metric-content-box .app-metric-content-box-1 {
  display: table-cell;
  color: rgba(255, 255, 255, .58);
  font-family: monospace;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  vertical-align: middle;
  width: 50px;
  min-width: 50px;
  max-width: 50px;
}

.app-metric-content-box .app-metric-content-box-1 md-icon {
  color: rgba(255, 255, 255, .58);
  font-size: 22px;
}

.app-metric-content-box .app-metric-content-box-2 {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}

.app-metric-content-box .app-metric-content-box-3 {
  display: block;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  padding: 0 12px;
}

.app-metric-content-box .app-metric-content-box-image {
  color: rgba(255, 255, 255, .88);
  font-size: 16px;
  font-weight: normal;
  line-height: 25px;
  text-align: left;
}

.app-metric-content-box .app-metric-content-box-label {
  color: rgba(255, 255, 255, .88);
  font-size: 14px;
  font-weight: bold;
  line-height: 30px;
  text-align: left;
}

.app-metric-content-box .app-metric-content-box-title {
  color: rgba(255, 255, 255, .88);
  font-size: 18px;
  font-weight: bold;
  line-height: 25px;
}

.app-metric-content-box .app-metric-content-box-title strong {
  font-size: 20px;
  font-weight: bold;
}

.app-metric-content-box .app-metric-content-box-title small {
  color: rgba(255, 255, 255, .78);
  font-size: 14px;
  font-weight: normal;
}

.app-metric-content-box .app-metric-content-box-value {
  color: rgba(255, 255, 255, .48);
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  text-align: left;
}

.app-metric-content-box .app-metric-content-box-value strong {
  font-size: 22px;
  font-weight: bold;
}

.app-metric-content-box .app-metric-content-box-value small {
  font-size: 16px;
  font-weight: normal;
}

.app-metric-content-box .app-metric-content-box-table-head {
  display: block;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: scroll;
  color: rgba(255, 255, 255, .88);
  font-size: 12px;
  font-weight: bold;
  line-height: 20px;
  text-align: left;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.app-metric-content-box .app-metric-content-box-table-body {
  display: block;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: scroll;
  color: rgba(255, 255, 255, .88);
  font-size: 12px;
  font-weight: normal;
  line-height: 20px;
  text-align: left;
  width: 100%;
  max-height: 100px;
}

.app-metric-content-box .app-metric-content-box-table-body > div[ng-click] {
  cursor: pointer;
}

.app-metric-content-box .app-metric-content-box-table-body > div[ng-click]:hover {
  background-color: rgba(255, 255, 255, .18);
}

/*
 * Define values
 */

.app-values {
  border: 0;
  margin: 0;
  padding: 0;
}

.app-values-container {
  border: 0;
  margin: 0;
  padding: 0;
}

.app-values-container md-list.md-dense md-list-item.md-2-line {
  background-color: rgba(0, 0, 0, .38);
}

.app-values-container md-list.md-dense md-list-item.md-2-line:hover {
  background-color: rgba(0, 0, 0, .18);
}

/*
 * Define filter content
 */

.app-filter-name {
  font-weight: bold;
  margin-top: 16px;
  margin-bottom: 8px;
}

.app-filter-item {
  display: block;
  border: 0;
  margin: 0;
  padding: 0;
  padding-bottom: 4px;
}

.app-filter-item .md-button {
  color: #333;
  width: 100%;
  border: 0;
  border-radius: 4px;
  margin: 0;
  padding: 0;
}

.app-filter-item .md-button:hover {
  background-color: rgba(0, 0, 0, .13);
}

.app-filter-item .md-button.active {
  background-color: rgba(0, 0, 0, .18);
}

.app-filter-item .md-button .app-filter-item-image {
  font-size: 16px;
  line-height: 30px;
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  border: 0;
  margin: 0;
  padding: 0;
}

.app-filter-item .md-button .app-filter-item-title {
  font-size: 12px;
  font-weight: normal;
  line-height: 30px;
  text-align: left;
  text-transform: none;
  width: auto;
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Define dialog messages
 */

.app-dialog-messages {
  overflow: auto;
  border: 0;
  margin: 8px;
  padding: 0;
}

.app-dialog-messages .bubble-icon {
  font-size: 14px;
  font-weight: bold;
  line-height: 36px;
  text-align: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  margin: 0;
  margin-top: 4px;
  padding: 0;
}

.app-dialog-messages .bubble-item {
  max-width: calc(100% - 87px);
}

.app-dialog-messages .bubble-item.exec {
  margin: 0 auto;
}

.app-dialog-messages .bubble-file {
  display: block;
  cursor: pointer;
  border: 0;
  border-radius: 4px;
  margin: 0;
  padding: 0;
  outline: 0;
}

.app-dialog-messages .bubble-file iframe,
.app-dialog-messages .bubble-file audio,
.app-dialog-messages .bubble-file video,
.app-dialog-messages .bubble-file img {
  display: block;
  max-height: 150px;
  border: 0;
  border-radius: 4px;
  margin: 0;
  padding: 0;
}

.app-dialog-messages .bubble-file md-icon {
  display: block;
  color: rgba(0, 0, 0, .35);
  font-size: 48px;
  border: 0;
  margin: 0;
  padding: 0;
}

.app-dialog-messages .bubble-text {
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  border: 0;
  border-radius: 4px;
  margin: 0;
  padding: 12px 16px;
     overflow-wrap: break-word;
         word-wrap: break-word;
   -moz-word-break: break-all;
    -ms-word-break: break-all;
      -moz-hyphens: auto;
       -ms-hyphens: auto;
           hyphens: auto;
}

.app-dialog-messages .bubble-menu,
.app-dialog-messages .bubble-form,
.app-dialog-messages .bubble-data {
  font-size: 12px;
  font-weight: normal;
  line-height: 20px;
  border: 0;
  border-radius: 4px;
  margin: 0;
  padding: 12px 16px;
     overflow-wrap: break-word;
         word-wrap: break-word;
   -moz-word-break: break-all;
    -ms-word-break: break-all;
      -moz-hyphens: auto;
       -ms-hyphens: auto;
           hyphens: auto;
}

.app-dialog-messages .bubble-info {
  font-size: 12px;
  font-weight: normal;
  line-height: 20px;
}

/*
 * Define dialog messages: incoming bubble
 */

.app-dialog-messages .bubble-icon.incoming {
  background-color: rgba(128, 128, 128, .18);
  margin-right: 8px;
  float: left;
}

.app-dialog-messages .bubble-item.incoming {
  text-align: center;
  float: none;
}

.app-dialog-messages .bubble-item.incoming.file,
.app-dialog-messages .bubble-item.incoming.text {
  float: left;
  text-align: left;
}

.app-dialog-messages .bubble-item.incoming .bubble-text {
  background-color: rgba(128, 128, 128, .18);
}

/*
 * Define dialog messages: outgoing bubble
 */

.app-dialog-messages .bubble-icon.outgoing {
  background-color: rgba(var(--pipe-color-rgb), .18);
  margin-left: 8px;
  float: right;
}

.app-dialog-messages .bubble-item.outgoing {
  text-align: center;
  float: none;
}

.app-dialog-messages .bubble-item.outgoing.file,
.app-dialog-messages .bubble-item.outgoing.text {
  float: right;
  text-align: right;
}

.app-dialog-messages .bubble-item.outgoing .bubble-text {
  background-color: rgba(var(--pipe-color-rgb), .18);
}

/*
 * Define dialog toolbar
 */

.app-dialog-toolbar {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, .18);
  margin: 0;
  padding: 8px;
}

/*
 * Define dialog content
 */

.app-dialog-content {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, .18);
  margin: 0;
  padding: 8px;
}

/*
 * Define dialog actions
 */

.app-dialog-actions {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, .18);
  margin: 0;
  padding: 8px;
}

/*
 * Define dialog content attach
 */

.app-dialog-content .attach {
  display: block;
  font-size: 14px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  border: 1px dashed rgba(255, 255, 255, .38);
  border-radius: 4px;
}

.app-dialog-content .attach.active {
  color: #f89406;
  border: 1px dashed #f89406;
}

/*
 * Define dialog content dictate
 */

.app-dialog-content .dictate {
  display: block;
  font-size: 14px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  border: 1px dashed rgba(255, 255, 255, .38);
  border-radius: 4px;
}

.app-dialog-content .dictate.active {
  color: #f89406;
  border: 1px dashed #f89406;
}

/*
 * Define dialog content textarea
 */

.app-dialog-content md-input-container.md-block label,
.app-dialog-content md-input-container.md-block textarea {
  line-height: 26px;
  border: 0;
}

.app-dialog-content md-input-container.md-block .md-errors-spacer {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: -15px;
}

/*
 * Define dialog edit history
 */

.app-dialog-history {
  height: 48px;
  background-color: rgba(0, 0, 0, .1);
  border-top: 1px solid rgba(0, 0, 0, .15);
}

.app-dialog-history:hover {
  height: 123px;
}

.app-dialog-history .header {
  font-size: 16px;
  line-height: 47px;
  border: 0;
  margin: 0;
  padding: 0 8px;
}

.app-dialog-history .action {
  font-size: 14px;
  line-height: 29px;
  padding: 0 8px;
}

.app-dialog-history .action:hover {
  background-color: rgba(0, 0, 0, .1);
  cursor: pointer;
}

.app-dialog-history .badge {
  float: right;
  background-color: rgba(0, 0, 0, .18);
  font-size: 12px;
  font-weight: bold;
  line-height: 24px;
  text-align: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin: 0;
  margin-top: 11px;
  padding: 0;
}

/*
 * Define app talk
 */

.app-talk span {
  display: inline-block;
  background-color: rgba(0, 0, 0, .58);
  width: 6px;
  height: 6px;
  border: 0;
  border-radius: 50%;
  margin: 0;
  margin-right: 1px;
  opacity: .5;
}

.app-talk span:nth-of-type(1) {
  animation: 1s app-talk-blink infinite 0.3333s;
}

.app-talk span:nth-of-type(2) {
  animation: 1s app-talk-blink infinite 0.6666s;
}

.app-talk span:nth-of-type(3) {
  animation: 1s app-talk-blink infinite 0.9999s;
}

@keyframes app-talk-blink {
  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}

/*
 * Define app wait
 */

.app-wait span {
  display: inline-block;
  background-color: rgba(255, 0, 0, .9);
  width: 6px;
  height: 6px;
  border: 0;
  border-radius: 50%;
  margin: 0;
  margin-right: 1px;
  opacity: .5;
}

.app-wait span:nth-of-type(1) {
  animation: 1s app-wait-blink infinite 0.3333s;
}

.app-wait span:nth-of-type(2) {
  animation: 1s app-wait-blink infinite 0.6666s;
}

.app-wait span:nth-of-type(3) {
  animation: 1s app-wait-blink infinite 0.9999s;
}

@keyframes app-wait-blink {
  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}

/**
 * Theme
 */

:root {
  --pipe-color: #629546;
  --pipe-color-rgb: 98,149,70;
  --pipe-progress-bar: #293E1D;
}

body {
  background-color: var(--pipe-color);
}

body, body * {
  font-family: 'Ubuntu', sans-serif;
}

/**
 * Theme: light
 */

body.light > .app-authorize,
body.light > .app-dashboard {
  filter: invert(1);
}
body.light > .app-authorize .md-icon-item-type,
body.light > .app-authorize .md-list-item-type,
body.light > .app-dashboard .md-icon-item-type,
body.light > .app-dashboard .md-list-item-type {
  filter: invert(1);
}

/**
 * Theme: night
 */

body.night md-dialog {
  filter: invert(1);
  box-shadow: 0 7px 8px -4px rgb(200 200 200 / 20%), 0 13px 19px 2px rgb(200 200 200 / 14%), 0 5px 24px 4px rgb(200 200 200 / 12%);
}
body.night md-dialog .md-pick-item-type,
body.night md-dialog .md-icon-item-type,
body.night md-dialog .md-list-item-type,
body.night md-dialog .bubble-item.file {
  filter: invert(1);
}

/*
 * Responsive
 */

@media (max-width: 959px) {
  .md-tooltip {
    display: none;
  }
}

@media (max-width: 599px) {
  .app-authorize {
    max-width: none;
  }
}

.progress-border {
  border: 1px solid #ccc !important;
  .progress-bar {
    background-color: var(--pipe-progress-bar);
    color: rgba(255, 255, 255, .88);
    font-size: 18px;
    font-weight: bold;
    line-height: 25px;
  }
}



.custom-tag-dropdown {
  position: absolute;
  background: white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 100;
  width: 100%;
  max-height: 300px;
  overflow: auto;
  border-radius: 4px;
  padding: 10px;
}