@import url('fonts-googleapis-work-sans.css');
/**
* Hide when Angular is not yet loaded and initialized
*/

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

body {
    font-family: "Source Sans Pro";
}

input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.auto-logoff-modal {
    width: 400px;
    height: 200px;
}

a.no-underline {
    color: inherit;
    text-decoration: none;
}

md-dialog {
    border-radius: 0;
}

/* .red-link {
    color: red;
} */

canvas.chart-line {
    height: 300px !important;
}

canvas.chart-line.modal {
    height: 300px !important;
}

.loading-cursor {
    cursor: progress !important;
}

.user-info-error-message {
    font-size: 16px;
    color: rgb(213, 0, 0);
}

.error-message {
    font-size: 12px;
    color: rgb(213, 0, 0);
}

.error {
    z-index: 1000;
}

.error .md-toast-content {
    background: #FCB820;
    color: black;
    margin-bottom: 8%;
}

.error ng-md-icon {
    fill: black;
    margin-right: 5px;
}

.time-input {
    font-weight: normal;
    color: #777777;
    border: none;
    background: none;
    border-bottom: 1px solid;
    margin: 0 5px 0 5px;
}

.command {
    z-index: 1000;
}

.command .md-toast-content {
    margin-bottom: 8%;
    font-size: 18px;
}

.command ng-md-icon {
    fill: white;
    margin-top: 5px;
    margin-right: 2px;
    padding-left: 10px;
}

.update-dialog {
    background-color: #edf3e8;
    border-left: 5px solid #388e22;
    max-width: 450px;
}

.delete-dialog {
    background-color: #F3E9E8;
    border-left: 5px solid #8E2722;
    max-width: 450px;
}

.locations {
    max-height: 100%;
    height: 100%;
    padding-bottom: 0;
    padding-right: 0;
    padding-top: 0;
    overflow: auto;
}

.locations md-content {
    padding-right: 0;
}

.locations-container {
    padding: 0 0 0 0;
    max-height: 100%;
}

.locations-page-header {
    z-index: 1;
}

.locations-list {
    position: sticky;
    max-height: 75%;
    min-height: 100%;
    width: 28%;
    min-width: 380px;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    z-index: 2;
}

.location-detail {
    position: sticky;
    max-height: 75%;
    min-height: 100%;
    width: 72%;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    z-index: 2;
}

.event-viewer-filter-holding-box {
    height: 70px;
    align-items: center;
    padding: 0px;
}

.event-viewer-filter-holding-box>div {
    height: inherit
}

.event-viewer-filter-name {
    max-width: 100% !important;
}

.event-viewer-filter-name {
    text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap;
    min-height: 30px !important;
    position: relative;
    top: 5%;
    padding-left: 15px;
}

.event-viewer-filter-tab {
    font-size: 20px !important;
}

.event-viewer-filter-only {
    color: rgba(119, 119, 119, 0.88);
    font-size: 13px;
    cursor: pointer;
    padding-left: 8px;
    position: absolute;
    padding-top: 12px;
}

.event-viewer-filter-only:hover {
    text-decoration: underline;
    color: rgba(89, 89, 89, 0.9);
}

.event-viewer-templates-text {
    padding-left: 20px;
}

.event-viewer-templates-load {
    position: relative;
    top: -2px;
}

.event-viewer-table {
    overflow-y: scroll;
    max-height: 360px;
}

.event-viewer-table thead th {
    position: sticky;
    top: 0px;
    background-color: white;
    cursor: default;
}

.event-viewer-details-updated-property {
    font-weight: bold;
}

.event-viewer-details-unchanged-property {
    font-style: italic;
    opacity: .7;
}

.location-history-list {
    height: 40vh;
}

.event-note {
    font-style: italic;
    padding-top: 4px;
    cursor: pointer;
}

.blue-alert-container {
    width: 100%;
}

.blue-alert-banner {
    background-color: rgba(204, 237, 245, 0.8);
    text-align: center;
    justify-content: center;
}

.blue-border-banner {
    height: 40px;
    border-left: 3px solid #29ADCD;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.multiple-days {
    align-items: flex-start !important;
    width: 100%;
}

.time-type-left {
    margin-left: 1.2rem;
    margin-top: 0.5rem;
    position: relative;
}

.time-type-middle {
    position: relative;
    width: 0;
    height: 15px;
}

.time-type-middle md-input-container {
    margin-left: 1.3rem;
    margin-top: 1.8rem;
    position: sticky;
    transition-duration: 0.2s;
}

.time-type-padding {
    padding-bottom: 11%;
}

.divider-margin {
    margin: 24px 0;
}

.divider-settings {
    margin-top: 10px;
    margin-bottom: 10px;
}

.wrap-div {
    display: flex;
    flex-wrap: wrap;
    word-break: break-word;
}

.word-wrap {
    word-wrap: break-word;
    display: block;
}

div.access-uneditable {
    margin-left: 0 !important;
}

img.access-uneditable {
    display: block;
    width: 14px;
    height: 18px;
    margin: 0 9px;
}

.page-description {
    color: #4A4A4A;
}

.flex-start {
    align-items: flex-start !important;
}

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

.capitalize {
    text-transform: capitalize;
}

.uppercase {
    text-transform: uppercase;
}

div.mobile-column>div {
    margin: 4px 0 4px 0;
}

img.main-logo {
    position: relative !important;
    width: 320px;
    height: 80px;
}

div.main-logo {
    position: absolute;
    left: 5px;
    top: 2px;
}

.customer-name-header {
    font-size: 13px;
    color: #BBBBBB;
    max-width: 275px;
    margin-top: -18px;
    margin-left: 45px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media screen and (min-width: 1366px) and (max-width: 1599px) {
    img.main-logo {
        position: relative !important;
        width: 212px;
        height: 53px;
    }

    div.main-logo {
        position: absolute;
        left: 5px;
        top: 12px;
    }

    .customer-name-header {
        max-width: 275px;
        margin-top: -15px;
        margin-left: 30px;
    }
}

img.sidebar-logo {
    width: 90%;
    height: auto;
    display: block !important;
}

div.sidebar-logo {
    position: relative !important;
    margin: 10px auto 12px auto;
    align-items: center
}

div.sidebar-name {
    font-size: 12px;
    color: #BBBBBB;
    margin-top: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hamburger-icon {
    left: 0;
    height: 85px;
    min-width: unset;
}

.hamburger-icon img {
    height: 25pt;
    width: 25pt;
    display: block;
}

.login-dropdown {
    position: absolute;
    right: 0;
    height: 85px;
}

.login-dropdown .md-button {
    height: 100%;
    justify-content: center;
}

div.login-dropdown-username {
    line-height: 17px;
    color: #BBBBBB;
    font-size: 13px;
    margin-left: 8px;
}

.login-dropdown img {
    display: block;
}

span.login-dropdown-username {
    line-height: 23px;
    color: white;
    font-size: 18px;
}

img.login-dropdown-username {
    width: 35px;
    height: 35px;
}

.login-dropdown-arrow {
    height: 8px;
    width: 11px;
    margin-left: 10px;
}

.menu-item-profile {
    height: unset !important;
    margin-top: 8px;
}

.menu-item-profile img {
    display: block;
    height: 60px;
    width: 60px;
    margin-right: 16px;
    margin-top: 4px;
}

.menu-item-profile .md-button {
    margin-top: 16px;
    margin-bottom: 16px;
}

.menu-item-email {
    font-size: 14px;
    color: #777777;
}

.menu-item-users {
    height: 48px;
    font-size: 14px;
}

.menu-item-other {
    height: 60px;
}

.menu-item-other img {
    margin-left: 4px;
    margin-right: 8px;
}

.menu-item-other span {
    font-size: 18px;
    margin-left: 10px;
}

.user-list-table {
    width: 100%;
    table-layout: fixed;
    border-spacing: 0px;
    cursor: default;
}

.user-list-table tr {
    height: 40px;
}

.user-list-table th {
    text-align: left;
    padding-right: 10px;
    background: white;
}

.user-list-table thead {
    position: sticky;
    top: 0;
}

.user-list-table tbody:nth-of-type(1) tr:nth-of-type(1) td {
  border-top: none !important;
}

.user-list-table td {
    text-align: left;
    _vertical-align: initial;
    _padding-top: 4px !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.sortable {
    cursor: pointer;
}

.table-sort-icon {
    position: relative;
    top: 5px;
    left: 2px;
    cursor: pointer;
    fill: lightgray;
}

.alert-rules-category-dropdown {
    width: 300px;
}

.user-status-dropdown {
    width: 150px;
}

.alert-rules-category-dropdown img,
.user-status-dropdown img {
    margin-left: 4px;
}

.mobile-alerts-card {
    color: white !important;
    display: flex;
    justify-content: center;
    font-weight: bold;
}

.mobile-alerts-card-count {
    font-size: 50px;
}

div.alert-active {
    background-color: #90261d;
}

div.alert-acknowledged {
    background-color: #777777;
}

div.alert-cleared {
    background-color: #44606E;
}

.alert-active {
    color: #90261d;
}

.alert-acknowledged {
    color: #777777;
}

.alert-cleared {
    color: #44606E;
}

.alert-active img {
    width: 50%;
    height: 60%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 18px;
    text-align: center;
    display: block;
}

.alert-acknowledged img {
    width: 55%;
    height: 60%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 18px;
    text-align: center;
    display: block;
}

.alert-cleared img {
    width: 55%;
    height: 60%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 18px;
    text-align: center;
    display: block;
}

.list-header {
    color: #777777;
    font-size: 16px;
    letter-spacing: 0.68px;
    line-height: 20px;
    padding-bottom: 8px;
    padding-left: 32px;
    align-items: center;
}

.reason-for-change-label {
    color: #777777;
    font-size: 16px;
    padding-right: 10px;
}

h2.edstrom {
    font-size: 28px;
    line-height: 36px;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
}

.alerts-by-location>div {
    width: 60%;
}

span.alerts-by-location {
    font-size: 26px;
    min-width: 35px;
    text-align: center;
}

div.alerts-by-location {
    margin-left: 2px;
    margin-top: 6px;
    align-items: baseline;
}

.location-description {
    font-size: 14px;
    margin-right: 9px
}

div.location-alert {
    align-items: center;
}

div.location-alert-button>div {
    margin-right: 10px;
}

div.location-access-header {
    margin: 5px 5px;
    margin-top: 0px;
}

.location-access-value {
    align-self: center;
}

.event-viewer-tabs {
    margin: 0 8px 0 8px;
}

.event-viewer-table-option {
    margin-bottom: 10px;
    margin-top: 8px;
}

.event-viewer-verticle-line::after {
    content: '.';
    color: transparent;
    height: inherit;
    width: 1px;
    background-color: rgba(0, 0, 0, 0.35);
    position: relative;
    display: block;
    left: 50%;
}

.event-viewer-filter-rows {
    align-items: center;
    margin-left: 20px;
}

.event-viewer-filter-input-unfocused {
    height: 200px;
}

#notFocused label {
    left: 88px !important;
    bottom: 106px !important;
}

.event-viewer-filter-input-unfocused>div:first-child {
    position: relative;
    top: 50%
}

.event-viewer-filter-input-focused {
    height: 300px;
}

#isFocused label {
    left: 88px !important;
    bottom: 200px !important;
}

.event-viewer-filter-input-focused>div:first-child {
    position: relative;
    top: 35%
}

.event-viewer-box-holder {
    overflow: auto;
    position: fixed;
    position: relative;
    top: 80%;
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .26);
    height: 8.8rem;
}

.event-viewer-box-holder span {
    display: block;
    padding-top: 10px;
    height: 30px;
    font-size: large;
    padding-bottom: 10px;
    padding-left: 12px;
}

.event-viewer-box-holder div:hover {
    background: rgba(0, 0, 0, .10);
}

.event-viewer-filter-input {
    position: relative;
    top: 40%;
}

.event-viewer-tabs md-tab-data {
    position: relative;
    opacity: 1;
    z-index: 100;
    display: flex;
    width: 100%;
}

.event-viewer-tabs .md-tab {
    font-size: 28px;
    font-weight: 600;
}

.event-viewer-tabs md-tab-item {
    padding-left: 52px;
    padding-right: 52px;
    max-width: 190px !important;
}

.event-viewer-tabs .md-tab {
    font-size: 16px;
}

.event-viewer-tabs md-tab-item {
    padding-left: 20px;
    padding-right: 20px;
}

.event-viewer-table-full {
    max-height: 67vh;
    overflow-y: auto;
}

.event-viewer-table-partial {
    max-height: 360px;
    overflow-y: auto;
}

.event-details-table-update {
    width: 75%;
    margin-left: 12.5%;
}

.event-details-table-delete {
    width: 50%;
    margin-left: 25%;
}

.event-details-indentation {
    padding-left: 25px;
}

.event-viewer-unselect {
    background: rgba(255, 177, 177, 0.2) !important;
    font-style: italic;
}

.event-details-object-keys {
    background: rgba(0, 0, 0, .05);
    background-blend-mode: darken;
}

.event-details-attribute {
    background: rgba(0, 0, 0, .10);
    background-blend-mode: darken;
}

.event-viewer-select {
    background: #dceeff !important;
    font-weight: bold;
    background-blend-mode: darken;
}

.event-details td {
    vertical-align: initial;
}

md-tabs.alerts-tabs {
    margin: 0 8px 0 8px;
    height: 100%;
    overflow: hidden;
}

.alerts-tabs md-tab-data {
    position: relative;
    opacity: 1;
    z-index: 100;
    display: flex;
    width: 100%;
}

.tab-button {
    right: 0;
    position: absolute;
    z-index: auto;
}

.alerts-tabs .md-tab {
    font-size: 28px;
    font-weight: 600;
}

.alerts-tabs md-tab-item {
    padding-left: 52px;
    padding-right: 52px;
    max-width: none !important;
}

.alerts-tabs>md-tabs-content-wrapper,
.alerts-tabs>md-tabs-content-wrapper>md-tab-content {
    height: 100%;
}

.user-profile-pin-row {
    margin-top: 12px;
    margin-bottom: 12px;
}

.show-pin-link {
    font-size: 12px;
    color: gray;
    cursor: pointer;
}

.action-links {
    font-size: 16px;
    cursor: pointer;
}

.action-links:hover {
    text-decoration: underline;
}

.report-create-modal .option-picker~.layout-row .action-links {
    text-decoration: none;
}

.report-create-modal .option-picker~.layout-row .action-links:hover {
    text-decoration: underline;
}

.action-links.critical {
    color: #90261d;
}

.action-links.warning {
    color: #d99d3b;
}

.inactive-tag {
    font-style: italic;
    color: #a6a6a6;
    text-decoration: line-through;
}

.new-tag {
    color: #3CA1C8;
}

.strikethrough {
    text-decoration: line-through;
}

div.zone-flush-list.inactive,
div.lp-flush-list.inactive,
.inactive-point,
span.report-modal-inclusions-value.inactive,
.locationCheckbox .inactive {
    font-style: italic;
    color: #a6a6a6;
}

.action-links img {
    padding: 0 6px 0 12px;
    display: block;
    margin-top: auto;
    margin-bottom: auto;
}

.action-links a {
    align-items: center;
}

.action-links.disabled {
    color: lightgray;
    cursor: default;
}

.title-with-button {
    padding: 0;
    justify-content: space-between;
    align-items: center;
}

img.user-img {
    height: 60px;
    width: 60px;
    display: block;
    margin-right: 8px;
}

.title-buttons .md-button {
    margin: 0 16px 0 16px !important;
}

.title-with-button page-title {
    padding: 8px;
}

.mobile-title-buttons {
    background-color: #F4F4F4;
    align-items: center;
    justify-content: space-around;
    border-top: 1px solid rgba(187, 187, 187, 0.7);
    border-bottom: 1px solid rgba(187, 187, 187, 0.7);
}

.mobile-title-buttons .md-button {
    min-width: 134px;
}

.header-with-button {
    align-items: center;
    justify-content: space-between
}

.header-with-chips {
    align-items: center;
}

.header-with-chips h2 {
    margin-right: 8px;
}

page-title {
    -webkit-margin-before: 16px;
    -webkit-margin-after: 0;
    display: block;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    line-height: 50px;
    font-size: 40px;
    font-weight: 600;
}

.page-subheader a {
    color: inherit;
    text-decoration: none;
}

.page-subheader span {
    font-size: 16px;
    font-weight: 600;
}

div.page-subheader {
    padding: 0 8px 0 8px;
    margin-bottom: 16px;
    margin-left: 5px;
}

.settings-main img {
    display: block;
    margin: auto 10px auto -10px;
    max-height: 35px;
}

.settings-main>div {
    margin: 0 0 0 0;
}

.settings-main {
    padding: 20px 20px 0px 20px;
}

.settings-main,
.modal-body md-card-title {
    flex: initial !important;
}

.settings-main .md-button {
    margin-top: auto;
    min-width: 190px;
}

.reset-password-box {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.lighting-label {
    font-size: 16px !important;
}

.user-icon {
    align-items: center;
}

.user-icon img {
    width: 25px;
    height: 25px;
    margin-right: 8px;
}

md-card-title.flex-card {
    flex: initial;
}

md-card-title-text>div {
    height: 36px;
}

.general-settings-label {
    color: #777777;
    font-size: 16px;
}

.md-input-span-align {
    margin-bottom: 16px;
}

span.user-status {
    margin-right: 24px;
}

.user-list-row img {
    display: block;
    height: 35px;
    width: 35px;
    margin: auto 16px auto 0;
}

.user-list-row div {
    align-items: center;
}

.group-list-row {
    align-items: unset !important;
    margin: 8px 0 8px 0;
}

md-dialog.edit-profile-dialog {
    min-width: 1000px;
    overflow: visible;
}

md-dialog-content.edit-profile-dialog, form.edit-profile-dialog {
    padding: 16px 5% 16px 5%;
    order: unset;
    max-height: 100%;
}

md-dialog.edit-lights-dialog {
    min-width: 550px;
}

.edit-lights-dialog nested-select {
    margin-left: -2px;
}

md-dialog.edit-watering-properties-dialog {
    min-width: 700px;
}

md-dialog.neuron-dialog {
    width: 600px;
}

md-dialog.waste-dialog.classification {
    width: 700px;
}

md-dialog.lighting-properties-modal {
    min-width: 800px;
}

.neuron-placeholder {
    margin: 32px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.neuron-label {
    margin: 8px 0 0 16px;
}

md-dialog.neuron-alert {
    width: 450px;
    background-color: #CDECF4;
    border-left: 5px solid #29ADCD;
}

md-dialog.report-generation {
    width: 330px;
    height: 140px;
    background-color: #353535;
    border-radius: 5px;
}

.neuron-alert-title {
    font-size: 24px;
    color: #29ADCD;
}

.neuron-button {
    width: 110px;
    margin: 16px auto 16px auto !important;
}

.neuron-requirement-dialog {
    color: #E6412E;
    font-size: 16px;
    margin-bottom: 10px;
}

#camera {
    height: 480px;
    width: 65%;
    position: absolute;
}

.imageDetected {
    position: absolute;
}

.imageDetected {
    margin-top: -999px;
    position: relative;
}

.imageHolder {
    overflow: hidden;
    height: 100%;
}

.imageHolder,
#foundCode,
.imageDetected,
.live-camera video {
    height: 480px;
    transform-origin: top left;
    margin-left: 5%
}

.cameraWindow {
    display: flex;
    overflow-y: hidden;
}

.light-thresholds-current-value {
    font-size: 14px;
    color: #777777;
}

.light-thresholds-row {
    margin-bottom: 32px;
    align-items: center;
}

.absolute-close {
    position: absolute;
    right: 5px;
    top: 10px;
}

md-dialog.edit-contact-dialog {
    width: 700px;
}

.md-card-gap {
    margin-right: 16px;
}

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

.md-input-align div {
    align-items: center;
}

.md-tooltip {
    background-color: black !important;
    border-radius: 5px;
    color: white !important;
    font-size: 14px;
    height: auto;
    line-height: 20px !important;
}

.no-display {
    display: none !important;
}

.invisible {
    visibility: hidden;
}

.md-button.quick-action-buttons {
    line-height: unset;
    margin-bottom: 10px;
}

.quick-action-buttons ng-md-icon {
    display: block;
    fill: white;
    margin-top: 10px;
    margin-left: 0px;
}

.quick-action-dot {
    height: 60px;
    width: 60px;
    background-color: #607D8B;
    border-radius: 50%;
    display: inline-block;
}

.quick-action-buttons span {
    text-align: center;
}

.virtual-repeat-event {
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
    height: 40px;
    padding-top: 10px;
}

md-toolbar.header {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
}

md-toolbar.header>span {
    display: inherit;
}

md-toolbar.header .project-name {
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 500;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-left: 130px;
}

md-toolbar.header .toolbar-buttons {
    margin-right: 130px;
}

md-toolbar.header .toolbar-buttons .active {
    background: rgba(255, 255, 255, .15);
}

md-toolbar.header .divider.vertical {
    width: 1px;
    height: 45px;
    opacity: 0.3;
    background: #ffffff;
    margin-left: 20px;
    margin-right: 20px;
}

.toolbar-link {
    font-size: 9px;
    line-height: normal;
}

md-card {
    border-radius: 0;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
}

md-card.plain {
    border-radius: 0;
    box-shadow: none;
}

md-card.settings {
    height: 240px;
}

md-card.settings ng-md-icon svg {
    /* Center the SVG icons vertically */
    transform: translate3d(0, 5%, 0);
    padding-right: 5px;
    fill: #607D8B
}

@media screen and (min-width: 1366px) and (max-width: 1700px) {
    md-card.settings {
        height: 280px;
    }
}

@media screen and (max-width: 1365px) and (min-width: 961px) {
    md-card.settings {
        height: 340px;
    }
}

@media screen and (min-width: 601px) and (max-width: 960px) {
    md-card.settings {
        height: 220px;
    }
}

@media screen and (max-width: 600px) {
    md-card.settings {
        height: auto;
    }
}

.activity-header {
    font-size: 30px;
    font-weight: bold;
    margin: 28px 0 0 24px;
}

md-card.current-alerts {
    height: 90px;
    width: 400px;
    border: 1px solid rgba(187, 187, 187, 0.9);
    margin: 8px 0 8px 0;
}

div.current-alerts {
    max-height: 305px;
    overflow-y: auto;
}

.location-subheader {
    font-size: 13px;
}

.user-subheader {
    font-size: 14px;
    color: black;
}

.alerts-card-row {
    justify-content: center;
}

.current-alert-rule-spacing {
    margin-top: -25px;
}

alerts-card {
    margin-right: 1%;
    margin-right: 1%;
}

div.alert-card-color-div {
    min-width: 100px;
    height: 100%;
    display: block;
    justify-content: space-evenly;
}

.alert-card-content {
    padding: 0;
    background-color: white;
}

.alert-card-content .card-count {
    height: 100%;
    margin: 10px 8px auto 8px;
    text-align: center;
}

.alert-card-content>div>span>b {
    font-size: 70px;
}

.no-padding {
    padding: 0 !important;
}

md-card-content {
    padding-top: 16px !important
}

md-grid-tile[ng-click] {
    cursor: pointer;
}

.dashboard-chart {
    width: 300px;
    height: 300px;
    float: left;
    position: relative;
    z-index: 2;
}

.dashboard-chart .text {
    width: 100%;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -30px;
    line-height: 19px;
    text-align: center;
    z-index: -1;
}

.dashboard-chart .small {
    height: 20px;
    font-size: 28px;
    line-height: 30px;
    text-align: center;
    position: relative;
}

.dashboard-chart .count {
    height: 40px;
    font-size: 92px;
    font-weight: bold;
    margin-top: -30px;
    text-align: center;
    position: relative;
}

.dashboard-chart .label {
    font-size: 30px;
    font-weight: 600;
    line-height: 50px;
    text-align: center;
    position: relative;
}

.dashboard-chart .chart {
    z-index: 2;
}

.dashboard-no-alerts {
    font-size: 200%;
}

.key-row {
    width: 100%;
    font-size: 150%;
}

.key-margin {
    margin-left: 6px;
    font-weight: bold;
}

.key {
    height: 16px;
    width: 16px;
    display: block;
    border-radius: 50%;
    background-color: #ccff99;
}

.key.normal {
    background-color: #44606E;
}

.key.info {
    background-color: #000000;
}

.key.warning {
    background-color: #d99d3b;
}

.key.commloss {
    background-color: #BBBBBB;
}

.key.critical {
    background-color: #90261d;
}

.fill-critical {
    fill: #90261d;
}

.fill-warning {
    fill: #d99d3b
}

.point-value-circle {
    height: 10px;
    width: 10px;
    display: block;
    border-radius: 50%;
    margin: auto 6px auto 0;
}

.point-value-circle.normal {
    background-color: #44606E;
}

.point-value-circle.critical {
    background-color: #90261d;
}

.point-value-circle.warning {
    background-color: #d99d3b;
}

.point-value-circle.inactive {
    background-color: #FFFFFF;
    border: 1px solid #777777;
}

.left-nav {
    width: 256px;
    background-color: #FFFFFF;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 130px;
    border-radius: 4px;
}

.footer {
    box-sizing: border-box;
    height: 5%;
    border-top: 1px solid/* #979797;
    background-color: #FFFFFF; */
}

.copyright {
    color: #0A132F;
    font-size: 14px;
}

.footerInformation {
    font-size: small;
    text-align: center;
    align-items: center;
    display: flex;
    height: 100%;
    width: 500px;
}

.footerInformation.left {
    justify-content: left;
    padding-left: 15px;
}

.footerInformation.right {
    justify-content: right;
    padding-right: 15px;
}

md-toolbar.header .md-button img {
    margin-top: 12px;
}

.main-nav-bar .md-nav-bar {
    border-bottom-width: 0;
}

._md-nav-button-text img {
    display: block;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 13px;
}

@media screen and (min-width: 1366px) {
    ._md-nav-button-text svg {
        display: block;
        margin-top: 45%;
        margin-right: 10px;
    }
}

@media screen and (max-width: 1365px) {
    ._md-nav-button-text svg {
        display: block;
        margin-right: 10px;
    }
}

._md-nav-button-text div {
    justify-content: center;
}

._md-nav-button-text span {
    text-align: center;
}

md-nav-bar .md-button._md-nav-button {
    height: 89px;
    width: 173px;
    bottom: 20px;
    line-height: 55px;
    font-size: 20px;
    margin: 0;
}

md-sidenav ng-md-icon.nav-bar-tab-icon-not-selected+span,
md-nav-bar .md-button._md-nav-button.md-unselected {
    color: #BBBBBB;
}

md-nav-bar .md-button._md-nav-button.md-primary {
    color: #607D8B;
    background-color: white;
    font-weight: bold;
}

.md-nav-item ._md-nav-button {
    color: white;
}

.nav-spacer {
    width: 80px;
}

md-nav-bar md-nav-ink-bar {
    height: 5px;
    width: 173px;
    background-color: #607D8B;
    left: 0;
    bottom: 63px;
}

.main-nav-bar {
    width: 905px;
    height: 89px;
    border-bottom-width: 0;
    /* margin-left: auto;
    margin-right: auto; */
}

/**
Side Nav
 */

.side-nav-bar {
    position: relative;
    width: 100%;
    background-color: #353535;
    margin-bottom: 40px;
}

.side-nav-bar .md-nav-bar {
    border-color: transparent;
}

.side-nav-bar .md-nav-item {
    display: block;
}

.side-nav-bar .md-nav-bar {
    width: 100%;
    height: 100%;
}

.side-nav-bar nav {
    width: 100%;
    height: 100%;
}

.side-nav-bar .md-nav-item {
    height: 50px;
}

.side-nav-bar .md-button._md-nav-button {
    height: 50px;
    width: 100%;
    line-height: unset;
    bottom: 0;
    margin: 0;
    border-radius: 0;
}

.side-nav-bar ._md-nav-bar-list {
    -webkit-box-orient: vertical;
    flex-direction: column;
}

.side-nav-bar .md-nav-item:first-of-type {
    margin-left: 0;
}

.side-nav-bar ._md-nav-button-text div {
    justify-content: flex-start;
}

.side-nav-bar md-nav-ink-bar {
    display: none;
}

.user-data {
    margin: 0 16px 16px 16px;
    align-items: center;
}

.user-data div {
    line-height: 17px;
    color: #BBBBBB;
    font-size: 13px;
    margin-left: 8px;
}

.user-data img {
    display: block;
    height: 35px;
    width: 35px;
}

md-divider.user-data {
    margin: 0 16px 0 16px;
    border-color: #BBBBBB;
}

.side-nav-item {
    color: white;
    line-height: 36px;
}

.side-nav-item span {
    font-size: 18px;
}

.side-nav-item img {
    margin-right: 8px
}

/*-------------*/

.leftnav-tab {
    height: 45px;
}

.content-list {
    margin-top: 20px;
    margin-left: 60px;
    margin-right: 60px;
}

.i3-button {
    height: 45px;
    line-height: 40px;
    min-width: 155px;
    border-radius: 5px;
    /* All buttons at this point are aligned to the right edge of the container */
    margin-left: auto;
}

.i3-button>img {
    margin-right: 12px;
    vertical-align: middle;
}

.md-button.default-button {
    border: solid 2px #0a132f;
}

.next-day-label {
    font-size: 12px;
    color: #6e6e6e;
}

/* For warning alert labels */

.alert-warning {
    display: flex;
    height: 25px;
    width: 88px;
    color: white;
    background-color: #d99d3b;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

/* For the alert card */

.alert-warning-text {
    color: #d99d3b;
}

.alert-critical-text {
    color: #90261d;
}

/* For critical alert labels */

.alert-critical {
    display: flex;
    height: 25px;
    width: 88px;
    color: white;
    background-color: #90261d;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

/* For inactive point labels */

.alert-inactive {
    display: flex;
    height: 25px;
    width: 88px;
    color: #777777;
    background-color: white;
    border-radius: 20px;
    border: 1px solid #777777;
    font-size: 13px;
    cursor: default;
    font-weight: 600;
}

.alert.panel {
    height: 80px;
    min-height: 80px;
    padding: 0px;
    width: 414px;
    font-size: 13px;
    border-radius: 0px;
    color: #353535;
    font-family: "Source Sans Pro";
    font-size: 16px;
    line-height: 20px;
}

.alert.panel .small {
    color: #777777;
    font-family: "Source Sans Pro";
    font-size: 13px;
    letter-spacing: 0.55px;
    line-height: 17px;
}

.side-drawer {
    background-color: rgba(187, 187, 187, 0.3);
    width: 355px;
}

md-sidenav {
    min-width: unset;
    width: 70%;
    background-color: #353535;
    box-shadow: none;
    top: 84px !important;
}

.alert.panel.hint .leftbar {
    background-color: #29ADCD;
    width: 4px;
    margin-right: 10px;
}

.alert.hint {
    background-color: #CDECF4;
    font-style: normal;
}

/* For warning alert buttons */

.alert.panel.warning .leftbar {
    background-color: #d99d3b;
    width: 4px;
    height: 100%;
    margin-right: 14px;
}

.alert.warning {
    background-color: rgba(252, 184, 32, 0.1);
}

/* For critical alert buttons */

.alert.critical {
    background-color: #E6412E0A;
}

.alert.panel.critical .leftbar {
    background-color: #90261d;
    width: 4px;
    height: 100%;
    margin-right: 14px;
}

.alert.inactive {
    background-color: #f3f3f3;
}

.alert.panel.inactive .leftbar {
    background-color: #777777;
    width: 4px;
    height: 100%;
    margin-right: 14px;
}

.alert.panel.active .leftbar {
    background-color: #777777;
    width: 4px;
    height: 100%;
    margin-right: 14px;
}

.edstrom-swap-button-left {
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    height: 2rem;
}

.edstrom-swap-button-right {
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 20px;
    border-top-left-radius: 0px;
    height: 2rem;
}

.edstrom-swap-button-filled.edstrom-swap-button-right {
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .26);
}

.edstrom-swap-button-filled.edstrom-swap-button-left {
    box-shadow: -2px 2px 5px 0px rgba(0, 0, 0, .26);
}

.edstrom-swap-button-outline.edstrom-swap-button-right {
    border-left: none;
}

.edstrom-swap-button-outline.edstrom-swap-button-left {
    border-right: none;
}

.edstrom-swap-button-outline {
    border: 2px solid #607D8B;
}

.edstrom-swap-button-filled {
    background-color: rgb(96, 125, 139);
    color: rgba(255, 255, 255, 0.87);
}

button.md-primary.user-search-bar,
.device-update-button {
    border-radius: 20px;
}

.edstrom-action-button {
    height: 40px;
    border-radius: 20px;
}

.edstrom-action-button-small {
    height: 30px !important;
    color: white !important;
    background-color: #607D8B !important;
    border-radius: 10px !important;
}

.edstrom-action-button-micro {
    min-height: 22px !important;
    height: 22px !important;
    padding: 0px !important;
    color: white !important;
    background-color: #607D8B !important;
    border-radius: 20px !important;
}

.edstrom-action-button-hollow {
    height: 40px;
    border-radius: 20px;
    border: 2px solid #607D8B;
}

.edstrom-action-button-hollow-critical {
    height: 40px;
    border-radius: 20px;
    border: 2px solid #90261d;
}

.edstrom-action-button-hollow-warning {
    height: 40px;
    border-radius: 20px;
    border: 2px solid #d99d3b;
    color: #353535;
}

.edstrom-action-button-hollow:disabled {
    border: 0;
}

/* All edstrom red buttons on hover */

/* 
.edstrom-action-button:not([disabled]):hover {
    background-color: #B83324;
}

.edstrom-action-button:not([disabled]).md-focused {
    background-color: #B83324;
} */

.edstrom-action-button-small:not([disabled]):hover {
    background-color: #4e6a78 !important;
}

.edstrom-action-button-small:not([disabled]).md-focused {
    background-color: #4e6a78 !important;
}

.edstrom-action-button-micro:not([disabled]):hover {
    background-color: #4e6a78 !important;
}

.edstrom-action-button-micro:not([disabled]).md-focused {
    background-color: #4e6a78 !important;
}

.filled-row {
    background-color: #F4F4F4;
}

.filled-row-dark {
    background-color: #353535;
}

.data-row-condensed {
    align-items: center;
    padding-top: 4px;
    padding-bottom: 4px;
    min-height: 20px;
    display: flex;
    border-bottom: 1px solid rgba(187, 187, 187, 0.7);
}

.showParent .flex-15,
.showParent .flex-30,
.showParent .flex-10,
.showParent .layout-md-column {
    margin-top: 45px;
}

.hidingTriggers {
    transition: height 0.33s ease-in;
    align-content: center;
    flex-wrap: wrap;
    overflow: hidden;
    height: 7em !important;
}

.showingTriggers {
    transition: height 0.33s ease-in;
    align-content: center;
    flex-wrap: wrap;
    overflow: hidden;
}

.hidingTriggers~.show-more::before {
    transform: translate(5.5ex, 1rem) rotate(-45deg);
}

.showingTriggers~.show-more::before {
    transform: translate(5.5ex, 1.3rem) rotate(135deg);
}

.show-info-button {
    cursor: pointer;
}

.show-more {
    display: flex;
    height: 15px;
    flex: 1 1 100%;
    justify-content: center;
    z-index: 2;
    padding-bottom: 1vh;
    cursor: pointer;
    padding-top: 5px;
}

.show-more-text {
    color: rgba(0, 0, 0, 0, 0.44);
    padding-right: 8vw;
}

.show-more:hover {
    text-decoration: underline;
}

.show-more::before {
    transition: transform 0.25s ease-in-out;
    content: "";
    width: 6px;
    height: 6px;
    color: transparent;
    border-left: solid rgba(0, 0, 0, 0.50) 2px;
    border-bottom: solid rgba(0, 0, 0, 0.50) 2px;
    display: inline-block;
}

.show-more-text::after {
    border-top-color: rgba(0, 0, 0, 0.10);
    border-top-style: solid;
    border-top-width: 2px;
    padding-top: 8px;
    content: ".";
    color: transparent;
    width: 15%;
    position: absolute;
    left: 37.78vw;
}

.needShowMore {
    position: relative;
    top: -16px;
}

.data-row {
    align-items: center;
    padding-top: 2px;
    padding-bottom: 2px;
    min-height: 35px;
    display: flex;
    border-bottom: 1px solid rgba(187, 187, 187, 0.7);
    flex-wrap: wrap;
}

.list-header.location-overview-header {
    padding-left: 0px;
    font-size: 14px;
}
.list-header.location-overview-header > div:first-child {
    padding-left: 10px;
}
.list-header.location-overview-header div:last-child {
    padding-right: 10px;
}

.location-overview-data-row {
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 10px;
    font-size: 14px;
    flex-wrap: wrap;
}


@media (max-width: 1000px) {
    .location-overview-table-column-header.point-type {
        padding-left: 10px;
    }
}

.location-overview-table-column-header.header-right {
    text-align: end; 
    padding-right: 5px;
}

.location-overview-room {
    padding-right: 10px;
}

.location-overview-room-data-row {
    float: right;
}

.location-overview-location {
    cursor: pointer;
}
@media (max-width: 1000px) {
    .location-overview-location {
        font-size: 16px;
        font-weight: bold;
    }
}

.location-overview-location-path {
    color: #777777;
    font-size: 12px;
    cursor: pointer;
}

.location-overview-trend {
    cursor: pointer;
}

.location-overview-trend-value {
    display: inline-block; 
    width: auto; 
    white-space: nowrap;
}

.location-overview-trend-circle {
    margin: auto 0 auto 5px !important;
}

.flushing {
    color: #607D8B;
    font-weight: bold;
}

.location-overview-header {
    color: #777777;
    font-size: 12px;
}

.data-row>div {
    margin-left: 32px;
    align-items: center;
    min-height: 40px;
}

.data-row-tooltip {
    display: flex;
    align-items: center;
    margin-left: 0 !important;
}

.data-row.alerts-row>div {
    margin-left: 48px;
}

.data-row.alerts-row-no-margin>div {
    margin-left: 0 !important;
}

.list-header.alerts-header {
    padding-left: 48px;
}

.cleared-alerts-note {
    margin-top: 5px;
}

.acknowledged-alert-icon {
    width: 48px;
    fill: #777777;
    display: flex;
    justify-content: center;
    align-items: center;
}

.acknowledged-alert-icon>img {
    width: 16px;
    height: 16px;
}

.selected-location-placeholder {
    margin-left: 32px;
    margin-right: 32px;
}

.selected-location-placeholder img {
    width: 100%;
}

.selected-location-header {
    justify-content: space-between;
}

.selected-location-header img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.selected-location-quick-actions {
    margin-left: 25px;
    align-items: center;
    min-width: 80px;
    justify-content: end;
}

.selected-location-header md-menu {
    margin-bottom: 16px;
}

.summary-chips {
    margin-top: 8px;
    background-color: rgba(187, 187, 187, 0.2);
    border-radius: 14.5px;
    height: 33px;
    align-items: center;
    justify-content: space-evenly;
}

.filter-chips {
    align-items: center;
    margin: 0 8px;
}

.summary-chips span {
    font-size: 14px;
}

.summary-chips .md-chips md-chip {
    margin-left: 0;
}

button.md-chip-remove md-icon {
    min-height: 16px !important;
    min-width: 16px !important;
    color: #3C3C3C !important;
}

/** for some reason md-chip puts an input in when there are no chips, hide it */
div.md-chip-input-container input {
    display: none;
}

.draggable {
    cursor: grab;
}

.location-list {
    align-items: center;
    width: 100%;
}

.location-list-body {
    width: 100%;
}

.full-width {
    width: 100%;
}

.location-list-header {
    align-items: center;
    display: flex;
    padding-left: 0;
    justify-content: space-between;
    margin-bottom: 8px;
    width: 100%;
}

.location-list-header md-divider {
    padding: 8px 0 8px 0;
    margin: 0 8px 0 8px;
}

.location-list-header, .neuron-dialog md-input-container {
    margin: 0;
}

.location-row {
    padding-top: 2px;
    padding-bottom: 2px;
    width: 100%;
    height: 40px;
}

.location-row>div {
    height: 100%;
    justify-content: space-between;
    align-items: center;
    margin: 0 8px;
}

.location-row-selected {
    background-color: rgba(75, 90, 121, 0.2);
}

.location-row-name {
    font-size: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.location-row-acknowledge {
    font-size: 14px;
    color: #444749;
    margin-top: 6px
}

.row-drop-down {
    height: 100%;
    width: 40px;
    display: flex
}

.no-points {
    align-items: center;
    font-size: 22px;
}

.no-points * {
    margin: 16px 0 16px 0;
}

.float-right {
    position: absolute;
    right: 1%;
}

.location-setting {
    cursor: pointer;
}

.manage-contacts-dialog {
    width: 60%;
    height: 60%;
    max-width: 60%;
    max-height: 60%;
    min-width: 60%;
    min-height: 60%;
}

/* Closed Padlock */

.location-setting.location-selected .icon-padlock,
.location-setting.location-selected .icon-padlock::after {
    box-shadow: 0 0 0 3px #3ca1c8;
}

.selected-filter,
.location-setting.location-selected .icon-padlock::before {
    background-color: #3ca1c8;
}

.icon-notification-selected {
    fill: #3ca1c8 !important;
}

.location-setting.location-selected span {
    color: #3ca1c8 !important;
}

/* Unlocked Padlock */
.location-setting:not(.location-selected) {
    color: rgba(0, 0, 0, 0.87);
}

.location-setting:not(.location-selected) .icon-padlock,
.location-setting:not(.location-selected) .icon-padlock::after {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.87);
}

.location-setting:not(.location-selected) .icon-padlock::before {
    background-color: rgba(0, 0, 0, 0.87);
}

/* Hover */
.location-setting:hover .icon-padlock,
.location-setting:hover span {
    filter: saturate(0.8) brightness(0.85);
}

.location-setting:not(.location-selected):hover .icon-padlock,
.location-setting:not(.location-selected):hover span {
    filter: saturate(80%) contrast(70%);
}

.location-setting:hover span {
    text-decoration: underline;
}

#expand {
    padding-right: 15px;
}

.md-checkbox {
    user-select: none;
    outline: none;
    cursor: default;
    position: relative;
    display: inline-box;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    margin-left: 0p;
    margin-right: 16px;
    border: 2px solid rgba(0,0,0,0.54);
    margin-bottom: 30px;
}

.md-checkbox.checked {
    background-color: #607D8B;
    border-color: #607D8B;
    border-radius: 2px;
}

.md-checkbox.indeterminate::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: table;
    width: 12px;
    height: 2px;
    border-width: 2px;
    border-style: solid;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    color: rgba(0,0,0,0.54);
    content: "";
}

.md-checkbox.checked::after {
    box-sizing: border-box;
    transform: rotate(45deg);
    position: absolute;
    left: 4.6667px;
    top: 0.2222px;
    display: table;
    width: 6.66666px;
    height: 13.3333px;
    border-width: 2px;
    border-style: solid;
    border-top: 0;
    border-left: 0;
    border-color: rgba(0,0,0,0.87);
    content: "";
}

.md-checkbox span {
    position: absolute;
    top: -1px;
    left: 30px;
}

.checkbox-select-all:not(.disabled):not(.not-editable):hover {
    color: #484848;
    text-decoration: underline;
}

.checkbox-select-all.disabled {
    cursor: default !important;
    color: rgba(0, 0, 0, 0.38) !important;
}

.locationCheckbox.parentLocation.md-checked .md-label,
.locationCheckbox.childLocation.md-checked .md-label {
    color: rgba(0, 0, 0, 0.87);
}

.locationCheckbox.parentLocation.md-checked .md-icon,
.locationCheckbox.checkbox-select-all.md-checked .md-icon {
    background-color: rgba(0, 0, 0, 0.54);
}

.locationCheckbox.parentLocation.md-checked .md-icon::after,
.locationCheckbox.checkbox-select-all.md-checked .md-icon::after {
    border-color: white;
}

.locationCheckbox.parentLocation.childLocation.md-checked:not([disabled]):hover .md-label {
    color: #6b8a99;
    text-decoration: underline;
}

.locationCheckbox.ng-empty.checkPreviouslySubmitted .md-icon {
    border-color: #607D8B;
}

.locationCheckbox.md-checked:not(.parentLocation, .checkPreviouslySubmitted) .md-label,
.locationCheckbox.checkboxCreateNewUser.md-checked:not(.parentLocation, .checkPreviouslySubmitted) .md-label {
    color: #2E7D32;
}

/* Checkbox green selected hover */
.persistentCheckbox.wasNotSelected.md-checked:hover .md-label,
.locationCheckbox.md-checked:not(.parentLocation, .checkPreviouslySubmitted):hover .md-label,
.locationCheckbox.checkboxCreateNewUser.md-checked:not(.parentLocation, .checkPreviouslySubmitted):hover .md-label {
    color: #4CAF50;
    text-decoration: underline;
}

.persistentCheckbox.wasNotSelected.md-checked .md-label,
.locationCheckbox.checkboxCreateNewUser.parentLocation.checkboxSelected:not(.checkPreviouslySubmitted) .md-label {
    color: #2E7D32;
}

/* Green background */
.persistentCheckbox.wasNotSelected.md-checked .md-icon,
.locationCheckbox.checkboxCreateNewUser.parentLocation.checkboxSelected:not(.checkPreviouslySubmitted) .md-icon,
.locationCheckbox.childLocation.md-checked:not(.checkPreviouslySubmitted) .md-icon {
    border-color: #2E7D32;
    color: white;
    background-color: #2E7D32 !important;
}

/* Plus sign */
.persistentCheckbox.wasNotSelected.md-checked .md-icon::after,
.locationCheckbox.childLocation.md-checked:not(.checkPreviouslySubmitted) .md-icon::after,
.locationCheckbox.checkboxCreateNewUser.parentLocation.checkboxSelected.md-checked:not(.checkPreviouslySubmitted) .md-icon::after {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: scale(0.22) translate(-172px, -438px);
    transform: scale(0.22) translate(-172px, -438px);
    content: "+";
    color: white;
    border-color: #00000000;
    font-size: 150px;
    transform-origin: center;
}

/* Red hover */
.persistentCheckbox.wasSelected:not([disabled], .md-checked):hover .md-label,
.locationCheckbox.childLocation.ng-empty.checkPreviouslySubmitted:not(.checkboxCreateNewUser, [disabled]):hover .md-label,
.locationCheckbox.checkboxEditing.ng-empty.childLocation.checkPreviouslySubmitted:not([disabled]):hover .md-label,
.locationCheckbox.checkboxEditing.parentLocation.checkboxCreateNewUser.checkPreviouslySubmitted:not(.checkboxSelected, [disabled]):hover .md-label {
    color: #94000b;
    text-decoration: underline;
}

/* Deselected text color */
.persistentCheckbox.wasSelected:not(.md-checked) .md-label,
.locationCheckbox.childLocation.ng-empty.checkPreviouslySubmitted:not(.checkboxCreateNewUser) .md-label,
.locationCheckbox.checkboxEditing.ng-empty.childLocation.checkPreviouslySubmitted .md-label,
.locationCheckbox.checkboxEditing.parentLocation.checkboxCreateNewUser.checkPreviouslySubmitted:not(.checkboxSelected) .md-label {
    color: #cc3232;
}

/* Red border */
.persistentCheckbox.wasSelected:not(.md-checked) .md-icon,
.locationCheckbox.childLocation.ng-empty.checkPreviouslySubmitted:not(.checkboxCreateNewUser) .md-icon,
.locationCheckbox.checkboxEditing.ng-empty.checkPreviouslySubmitted:not(.parentLocation) .md-icon,
.locationCheckbox.checkboxEditing.parentLocation.checkboxCreateNewUser.checkPreviouslySubmitted:not(.checkboxSelected) .md-icon,
.locationCheckbox.childLocation.ng-empty.checkPreviouslySubmitted:not(.checkboxCreateNewUser) .md-icon {
    background-color: white;
    border-color: #cc3232;
}

/* X mark */
.persistentCheckbox.wasSelected:not(.md-checked) .md-icon::after,
.locationCheckbox.childLocation.ng-empty.checkPreviouslySubmitted:not(.checkboxCreateNewUser) .md-icon::after,
.locationCheckbox.checkboxEditing.ng-empty.checkPreviouslySubmitted:not(.parentLocation) .md-icon::after,
.locationCheckbox.checkboxEditing.parentLocation.checkboxCreateNewUser.checkPreviouslySubmitted:not(.checkboxSelected) .md-icon::after {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: scale(0.115) translate(-532px, -889px);
    transform: scale(0.115) translate(-532px, -889px);
    content: "\02716";
    color: white;
    border-color: #00000000;
    font-size: 150px;
    transform-origin: center;
    color: #cc3232;
}

/* Zoom */
.persistentCheckbox:not([disabled]):hover .md-icon,
.locationCheckbox.childLocation:not([disabled]):hover .md-icon, .parentLocation:not([disabled]):hover .md-icon {
    transform: perspective(10px) translateZ(3px) translateX(-1px);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);
}

md-checkbox {
    margin-bottom: 0;
}

md-checkbox:not([disabled]) .md-label{
    color: rgba(0,0,0,0.87);
}

md-checkbox:not([disabled]):hover .md-label {
    color: #8eacbb;
    text-decoration: underline;
}

md-checkbox[disabled] .md-label {
    color: rgba(0, 0, 0, 0.38) !important;
}

md-checkbox.md-default-theme.md-checked .md-icon, md-checkbox.md-checked .md-icon {
    background-color: #607D8B;
}

html.dark-mode md-radio-button:not(.md-checked) .md-off {
    border-color: var(--dark-mode-font-color);
}

md-radio-button.md-checked .md-off, 
.md-ripple-container {
    color: #607D8B;
    border-color: #607D8B;
}

md-radio-group .md-checked .md-ink-ripple {
    color: #607D8B;
}

md-radio-button .md-on {
    background-color: #607D8B;
}

.subtext {
    color: rgb(158, 158, 158);
    font-size: 13px;
}

.md-chips {
    padding: 0;
    box-shadow: none !important;
}

.md-chips md-chip {
    height: 14px;
    line-height: 14px;
    font-size: 12px;
    margin-left: 8px;
    margin-right: 0;
    margin-top: 1px;
    color: white;
}

span.highlight {
    color: black !important;
    font-weight: bold;
}

.schedule-chips .md-chips md-chip {
    height: 26px;
    line-height: 26px;
    font-size: 16px;
    color: white;
    background-color: #607D8B;
    border-radius: 0;
}

.reorder-border {
    border-bottom: 1px solid #353535;
}

.user-group-chips .md-chips,
.normal-chips .md-chips {
    box-shadow: 0 1px rgba(0, 0, 0, 0.12) !important;
}

.user-group-chips .md-chips md-chip {
    padding: 5px;
    height: 40px;
    line-height: 16px;
    font-size: 12px;
    margin: 8px 8px 0 0;
    color: white;
    background-color: #44606E;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0, 0, 0, .2);
    box-shadow: 0 1px rgba(0, 0, 0, 0.2) !important;
    border-radius: 0;
}

.normal-chips .md-chips md-chip {
    height: 32px;
    line-height: 32px;
    font-size: 16px;
    margin: 8px 8px 0 0;
    color: white;
    background-color: #44606E;
    border-radius: 0;
}

.normal-chips md-icon {
    color: white !important;
}

md-tabs .md-tab.md-active {
    color: #607D8B;
}

md-tabs md-ink-bar {
    color: #607D8B;
    background-color: #607D8B;
}

.tab-body {
    margin: 24px 0 24px 0;
}

.tab-body-margin-top {
    margin: 24px 0 0 0;
}

.alert-tab-contents {
    /* margin: 24px 0 0 0; */
    padding: 10px;
}

.legend {
    margin-top: 16px;
    margin-right: 50px;
}

.md-tab {
    text-transform: none;
    font-size: 16px;
    font-weight: 600;
}

.chip-critical,
.critical-chip {
    background-color: #90261d;
    border: 1px solid #90261d;
    padding-bottom: 14px !important;
}

.chip-warning,
.warning-chip {
    background-color: #d99d3b;
    border: 1px solid #d99d3b;
    padding-bottom: 14px !important;
}

.chip,
.normal-chip {
    background-color: #44606E;
    border: 1px solid #44606E;
    padding-bottom: 14px !important;
}

.chip-inactive,
.inactive-chip {
    background-color: white !important;
    color: #777777 !important;
    border: 1px solid #777777;
    padding-bottom: 14px !important;
}

.selected-locations-action-bar {
    background-color: #8E2722;
    position: sticky;
    min-height: 50px;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.5), 0 3px 4px 0 #B7BBC0;
    justify-content: space-between;
}

.selected-locations-action-bar div {
    align-items: center;
    margin-left: 16px
}

.selected-locations-action-bar a {
    cursor: pointer;
    align-items: center;
}

.selected-locations-action-bar span {
    color: white;
    font-size: 14px;
    margin-left: 8px;
    align-items: center;
}

.selected-locations-action-bar img {
    display: block;
    margin: auto;
    height: 23px;
    width: 23px
}

.user-row {
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
}

.user-search-bar {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 5px !important;
}

img.user-delete {
    width: 13px;
    height: 13px;
}

img.user-edit {
    width: 16px;
    height: 17px;
}

.user-row ng-md-icon {
    display: block;
    margin-left: 22px;
    margin-right: 11px;
}

.user-row>div {
    justify-content: flex-start;
    align-items: center;
    width: 130px;
    margin-right: 25px;
    margin-left: 25px;
    margin-bottom: 16px;
}

.user-row span {
    text-align: center;
}

.user-row span.user-name {
    font-size: 18px;
    color: #353535;
    margin-bottom: 2px;
}

.user-row span.time-span {
    font-size: 12px;
    color: #777777;
}

.clickable {
    cursor: pointer !important;
}

.not-clickable {
    cursor: default !important;
}

.clickable-text {
    color: #1D82AD;
    fill: #1D82AD !important;
    padding: 5px 10px 5px 10px;
    border-radius: 10px;
}

.clickable-text a,
.clickable-text a:visited {
    color: inherit;
    text-decoration: none;
}

.clickable.clickable-text:hover {
    color: rgba(255, 255, 255, 0.87);
    fill: rgba(255, 255, 255, 0.87);
    background-color: rgb(96, 125, 139);
}

@keyframes rowHide {
    0% {
        height: 41px;
        opacity: 1;
    }

    100% {
        height: 0;
        opacity: 0;
    }
}

@keyframes rowShow {
    0% {
        height: 0;
        opacity: 0;
    }

    100% {
        height: 41px;
        opacity: 1;
    }
}

.hideable.ng-hide-add {
    animation: 0.5s rowHide;
}

.hideable.ng-hide-remove {
    animation: 0.5s rowShow;
}

.hover-row:hover {
    background-color: rgba(75, 90, 121, 0.2);
}

.data-row svg, .data-row-condensed svg {
    /* Center the SVG icons vertically */
    transform: translate3d(0, 10%, 0);
    padding-left: 5px;
    /* fill: rgb(53, 53, 53, 0.87); */
}

.update-row-loading svg {
    padding-left: 0px;
}

.animate-show-hide.ng-hide {
    opacity: 0;
}

.animate-show-hide.ng-hide-add, .animate-show-hide.ng-hide-remove {
    transition: all linear 0.3s;
}

.action-buttons>img {
    margin-right: 12px;
    vertical-align: middle;
}

.action-buttons {
    width: 150px;
    text-align: right;
}

#globalErrors {
    padding-left: 40px;
    padding-right: 40px;
    color: white !important;
}

.dialog-errors {
    /* For whatever reason any padding at all causes this element to fill the available space, which is what we want */
    padding: 1px;
    color: white !important;
}

#globalErrors li, .dialog-errors li {
    list-style: none;
}

img[ng-click], a[ng-click], a[ng-click]>img {
    cursor: pointer;
}

body>md-content {
    /* Hack to use inset shadow because outset shadow on nav doesn't work */
    box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.24), inset 0 2px 2px 0 rgba(0, 0, 0, 0.12);
}

/* "search" content area should have no background */

#mainContent md-content:first-of-type {
    background-color: transparent;
    width: 100%;
}

.overview-row {
    font-size: 120%;
    font-weight: bold;
}

.item-detail {
    background: #f3f3f3;
    color: #3b3b3b;
    opacity: 1;
    border-radius: 5px;
    padding: 20px 20px 20px 20px;
}

.no-margin {
    margin: 0 !important;
}

.no-vertical-padding {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

.details-card {
    background: #ffffff;
    padding-left: 30px;
    padding-bottom: 40px;
    min-height: 80px;
}

.item-detail-label {
    color: dimgrey;
}

.details-card .label-container, .details-card .label-container div {
    font-size: 12px;
    color: dimgray;
}

.item-selected {
    -webkit-transition: 0.25s ease-out;
    -moz-transition: 0.25s ease-out;
    -o-transition: 0.25s ease-out;
    transition: 0.25s ease-out;
    transform: rotate(180deg);
}

.item-detail-panel {
    width: 65%;
    height: 95%;
}

.selected-row {
    font-weight: bold;
}

:focus {
    outline: none;
}

md-input-container.no-validation {
    padding: 0px;
    margin: 0px;
    margin-top: 10px;
    line-height: 10px;
}

md-input-container.no-validation .md-errors-spacer {
    display: none;
}

md-input-container.same-line {
    margin-top: 0px;
    padding-top: 0px;
}

md-input-container .search-clear {
    cursor: pointer;
    position: absolute;
    right: 1em;
}

md-input-container .search-clear::after {
    content: '';
    border-left: solid #b4b4b4;
    border-width: 0.25em;
    width: 1.2em;
    height: 1.2em;
    display: block;
    rotate: 45deg;
    top: 0.85em;
    position: absolute;
}

md-input-container .search-clear::before {
    content: '';
    border-left: solid #b4b4b4;
    border-width: 0.25em;
    width: 1.2em;
    height: 1.2em;
    display: block;
    rotate: -45deg;
    position: absolute;
}

.panel {
    border-radius: 5px;
}

/* Panel headers */

.panel md-toolbar {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.panel md-toolbar .md-toolbar-tools {
    color: white;
}

.admin-marker {
    text-decoration: underline;
    text-decoration-color: #5064a0;
    color: white;
    text-shadow: -1px 1px 2px rgba(0, 0, 0, 1);
}

/** Specializations for account preferences, admin, and activity pages, which are structured differently from all other pages */

md-content#admin .title {
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 26px;
    font-weight: 600;
}

md-tabs md-content {
    background-color: rgba(0, 0, 0, 0);
}

.number-column {
    display: block;
    max-width: 100px;
    text-align: right;
}

/* Hack to make autocomplete dropdowns look like input fields because Angular Material's floating label support for md-autocomplete is horribly broken */

form[name='transferForm'] .md-whiteframe-z1 {
    box-shadow: none;
    color: red;
}

@media screen and (min-width: 960px) {
    /* Centering logic for mdToast because the Toast team has proven quite recalcitrant about centering */
    md-toast.md-center {
        margin-left: auto;
        margin-right: auto;
        left: 50%;
        right: auto;
        width: 600px;
        transform: translateX(-50%);
        padding: 0px;
    }
}

@media screen and (max-width: 1700px) {
    /* Site header bar should expand to fill horizontal viewport space that it 'encompasses' navbar items */
    md-toolbar.header .project-name {
        margin-left: 10px;
    }
    md-toolbar.header .toolbar-buttons {
        margin-right: 10px;
    }
    .nav-spacer {
        width: 10px;
    }
    .details-card {
        padding-left: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
}

@media screen and (max-width: 1365px) {
    .main-nav-bar md-nav-ink-bar {
        visibility: hidden;
    }
    md-dialog-content.report-create-modal, form.report-create-modal {
        padding: 16px 20px 16px 20px !important;
        margin: 0 !important;
    }

    div.report-modal-detail {
        margin: 16px 0 16px 0 !important;
    }

    .mobile-user-creation-detail {
        margin: 0 16px 0 16px;
    }
}

@media screen and (max-width: 960px) {
    md-dialog {
        max-width: 100% !important;
        max-height: 100% !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 0;
        min-width: unset !important;
    }

    md-dialog.neuron-alert {
        max-width: 450px !important;
        max-height: 20% !important;
    }

    md-dialog-content {
        overflow-y: scroll !important;
    }

    md-card.current-alerts {
        width: 100%;
        height: 100%;
    }

    alerts-card {
        width: 140px;
        height: 115px;
    }

    div.alert-card-color-div {
        display: flex;
        width: 100%;
        height: 100%;
    }

    .alerts-card-row {
        justify-content: space-evenly;
    }

    .copyrightYears {
        font-size: 70%;
        text-align: center;
    }

    .location-list {
        width: 100%;
    }

    .location-action-icons {
        height: 50px;
        width: 50px;
    }

    .selected-location-header>div {
        min-width: unset;
    }

    .selected-location-header md-menu {
        margin-top: 16px;
    }

    .mobile-location-header {
        justify-content: space-between;
        margin: 8px 0 4px 0;
        align-items: center;
    }

    .user-row>div {
        margin-left: 16px;
        margin-right: 16px;
    }

    .data-row>div {
        align-items: unset;
    }

    .alerts-mobile-margin {
        margin: 10px !important;
    }

    .quick-action-buttons ng-md-icon {
        display: block;
        fill: white;
        margin-top: 10px;
        margin-left: 0px;
    }

    .quick-action-dot {
        height: 60px;
        width: 60px;
        background-color: #607D8B;
        border-radius: 50%;
        display: inline-block;
    }

    md-backdrop {
        opacity: 0 !important;
    }

    .dialog-footer.report-status-buttons {
        padding: 0 20px 0 20px;
    }

    div.user-added-message {
        display: flex;
        text-align: center;
        align-items: center;
        height: 77px;
        width: 100%;
        background-color: rgba(204, 237, 245, 0.8);
    }
}

@media screen and (max-width: 600px) {
    md-card-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    md-dialog.neuron-alert {
        max-width: 450px !important;
        max-height: 40% !important;
    }

    md-content {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }
    div, md-card {
        margin-left: 0;
        margin-right: 0;
    }

    alerts-card {
        width: 100px;
        height: 90px;
    }

    md-card-title {
        padding-top: 12px !important;
        padding-bottom: 8px !important;
    }

    page-title {
        text-align: center;
        font-size: 20px;
        margin-top: 0;
        line-height: 30px;
    }

    .count-type-text {
        font-size: 13px;
    }

    .error .md-toast-content {
        margin-bottom: 10%;
        margin-left: 0;
    }

    .title-with-button {
        justify-content: center;
    }

    h2.edstrom {
        font-size: 20px;
    }

    .mobile-current-alerts {
        align-items: center;
    }
    .mobile-current-alerts .alert-warning, .alert-critical {
        margin-right: 16px;
    }

    .point-dialog .header .point-name {
        margin-left: 10px;
        max-width: 100%;
    }

    .locations {
        height: 100%;
        padding-bottom: 0;
        overflow: auto;
    }

    .location-subheader {
        margin-bottom: 4px;
    }

    .user-subheader {
        font-size: 13px;
        color: #777777;
    }

    .chartjs-size-monitor {
        position: relative;
        z-index: 1;
    }

    .dashboard-chart {
        width: 150px;
        height: 150px;
        float: left;
        position: relative;
        z-index: 2;
    }

    .dashboard-chart .text {
        width: 100%;
        height: 40px;
        position: absolute;
        top: 50%;
        left: 0;
        margin-top: -20px;
        text-align: center;
        z-index: -1;
    }

    .dashboard-chart .small {
        height: 10px;
        font-size: 14px;
        line-height: 10px;
        margin-top: -10px;
        text-align: center;
        position: relative;
    }

    .dashboard-chart .count {
        height: 30px;
        font-size: 50px;
        font-weight: bold;
        margin-top: -20px;
        text-align: center;
        position: relative;
    }

    .dashboard-chart .label {
        font-size: 16px;
        font-weight: 600;
        margin-top: -10px;
        text-align: center;
        position: relative;
    }

    .dashbaord-chart .chart {
        z-index: 2;
    }

    .dashboard-no-alerts {
        font-size: 150%;
    }

    .alerts-by-location>div {
        width: 80%;
    }

    md-nav-ink-bar {
        visibility: hidden;
    }

    .location-list {
        width: 100%;
    }

    .location-action-icons {
        height: 50px;
        width: 50px;
    }

    .location-single-margin {
        margin-left: -20px;
    }

    .location-double-margin {
        margin-left: -40px;
    }

    .selected-location-quick-actions {
        min-width: unset;
        justify-content: space-around;
        margin-top: 16px;
        margin-left: 16px;
    }

    .selected-location-header md-menu {
        margin-top: 16px;
    }

    .summary-chips {
        margin-top: 8px;
        background-color: rgba(187, 187, 187, 0.2);
        border-radius: 14.5px;
        height: 33px;
        align-items: center;
        justify-content: space-evenly;
    }

    .user-row>div {
        margin-left: 16px;
        margin-right: 16px;
    }

    .no-top-padding {
        padding-top: 0 !important;
    }

    .no-margin {
        margin: 0;
    }

    .alerts-tabs .md-tab {
        font-size: 16px;
    }

    .alerts-tabs md-tab-item {
        padding-left: 20px;
        padding-right: 20px;
    }

    md-tabs {
        margin: 0 !important;
        padding: 0 !important;
    }

    .data-row>div {
        margin-left: 19px;
    }

    .action-button-row {
        justify-content: space-between;
        margin-right: 8px;
    }

    .settings-main img {
        margin-top: 0px;
        margin-right: 10px;
    }

    .settings-main>div {
        margin-bottom: 10px;
    }

    .settings-main {
        padding: 0 0 0 0;
    }

    .md-input-align {
        margin: 0 4px 0 4px;
    }

    .user-list-row img {
        margin: 0 8px 8px 8px;
    }

    .key-row {
        width: 100%;
        justify-content: center;
    }

    .key-margin {
        margin-left: 0px;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
    }

    .key {
        margin-left: 0;
        height: 20px;
        width: 20px;
        display: block;
        border-radius: 50%;
        background-color: #ccff99;
    }

    .key.normal {
        background-color: #44606E;
    }

    .key.info {
        background-color: #000000;
    }

    .key.warning {
        background-color: #d99d3b;
    }

    .key.commloss {
        background-color: #BBBBBB;
    }

    .key.critical {
        background-color: #90261d;
    }
}

.i3-title {
    height: 21px;
    font-family: Work Sans;
    font-size: 18px;
    font-weight: 300;
    text-align: left;
    color: #000000;
}

.i3-default-action {
    font-family: Work Sans;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    text-align: center;
    color: #0a132f;
}

.i3-cancel {
    font-family: Work Sans;
    font-size: 12px;
    text-decoration: underline;
    letter-spacing: 1px;
    text-align: center;
    color: #389b00;
}

.i3-panel {
    min-width: 390px;
    min-height: 160px;
}

.md-dialog {
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;
    border-top-left-radius: 1px;
    border-top-right-radius: 1px;
}

md-dialog.alert-details-modal {
    width: 700px;
    overflow: visible;
}

md-dialog-content.modal-body {
    order: unset;
    margin: 16px;
    height: 100%;
}

md-dialog.report-type-modal {
    width: 66%;
}

md-card-title-text .report-type-modal {
    height: 1.5em;
    overflow: hidden;
}

md-card .report-type-modal a {
    display: flex;
    align-content: center;
    align-items: center;
    padding-left: 10%;
}

md-card-content.report-type-modal {
    height: 100px;
}

.md-button.report-type-modal {
    margin: 16px;
    min-width: 170px;
}

div.report-type-modal {
    justify-content: flex-end;
    margin-top: 3%;
}

span.report-type-modal {
    font-size: 20px;
    font-weight: 600;
}

md-dialog.report-create-modal {
    width: 90%;
    max-height: 95%;
    height: 95%;
    overflow: visible;
}

md-dialog-content.report-create-modal, form.report-create-modal {
    padding: 16px;
    order: unset;
    max-height: 100%;
}

.report-action-button {
    align-content: center;
}

.report-status-panel {
    justify-content: center;
    margin: 0 150px 0 150px;
}

.report-checkbox-list {
    margin-top: 5px;
    margin-bottom: 5px;
}

.report-checkbox-indent {
    margin-left: 25px !important;
}

div.progress-line {
    height: 1px;
    border-top: 1px solid rgba(183, 187, 192, 0.5);
    margin-top: 11px;
    width: 100%;
}

div.empty-space {
    width: 100%;
}

.report-status-panel div {
    text-align: center;
    font-weight: bold;
}

.step-row {
    max-width: 25%;
}

.step-modal-panel {
    justify-content: center;
}

.step-modal-panel div {
    text-align: center;
}

div.progress-number-container {
    height: 22px;
    width: 22px;
    border-radius: 22px;
}

.progress-number-container.pending {
    background-color: #D6D6D6;
    color: #777777;
}

.progress-number-container.current {
    background-color: #353535;
    color: white;
}

.progress-number-container.complete {
    background-color: #607D8B;
}

.current-tab-title {
    font-weight: bold;
}

.report-status-text {
    margin: 0 140px 4px 130px;
    justify-content: space-between;
}

.report-modal-detail {
    margin: 16px 160px 16px 160px;
    font-size: 14px;
}

.report-one-step-description {
    margin-bottom: 40px;
}

.report-status-buttons {
    width: 100%;
    padding: 20px 170px 26px 170px;
    justify-content: space-between;
    background-color: white !important;
    font-size: 100%;
    /* bottom: 16px; */
    border-top: 1px solid rgba(187, 187, 187, 0.7);
}

.schedule-toolbar {
    border-top: 1px solid rgba(187, 187, 187, 0.7);
}

.user-status-text {
    margin: 0 140px 4px 90px;
    justify-content: space-between;
}

.user-modal-description {
    margin: 8px 0 16px 0;
    font-size: 14px;
}

.user-modal-radio {
    margin: 8px 0 8px 0;
}

.user-modal-checkboxes {
    align-items: baseline !important;
    margin-bottom: 16px;
}

.user-modal-checkboxes md-checkbox {
    margin-right: 32px;
}

div.schedule-types {
    justify-content: space-evenly;
    padding: 32px 0 32px 0;
}

div.schedule-type {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    width: 170px;
    height: 120px;
}

.added-alert {
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #CDECF4;
    border-left: 3px #29ADCD solid;
    font-size: 14px;
}

.edit-lighting-notice-container {
    margin: 8px 90px;
}

.edit-lighting-notice {
    font-size: 14px !important;
    display: inline;
}

.contact-header>span {
    color: black;
    font-weight: bold;
    margin-right: 8px;
}

.contact-detail {
    margin-left: 24px;
}

.alert-point-row {
    margin-left: 24px;
    align-items: center;
}

.point-lighting-no-schedule {
    align-items: center;
    display: flex;
}

.point-lighting-icon {
    margin: 33px 0 24px 0;
    width: 50px;
    height: 50px;
    display: flex;
}

.point-lighting-detail {
    font-size: 20px;
    margin-bottom: 32px;
}

.point-lighting-button {
    margin-top: 100px;
}

.alerting-status-text {
    margin: 0 160px 4px 105px;
    justify-content: space-between;
}

.alerting-rule-table>div {
    align-items: center;
}

.alerting-rule-triggers-row {
    margin: 8px 0;
}

.alert-rule-modal-detail {
    margin: 1% 1% 1% 1%;
}

.alert-rule-modal-detail md-slider-container>:first-child:not(md-slider), md-slider-container>:last-child:not(md-slider) {
    max-width: 100px !important;
}

.alert-rule-searchbox {
    border: none;
    outline: none;
    padding: 0;
    width: 100%;
    height: 100%;
}

.alert-rule-search-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: 10.667px;
    height: 48px;
    position: relative;
    display: flex;
    align-items: center;
}

.alert-rule-points-list {
    max-height: 280px;
    overflow-y: auto;
}

.alert-rule-points-list md-input-container {
    padding-left: 15px;
    margin-top: 0px;
    width: 50%;
}

.margin-top-bottom-16 {
    margin: 16px 0;
}

.advanced-light-control-input {
    margin: 0 0 38px 0;
}

.alert-rule-small-text {
    font-size: 13px;
}


.alert-rule-directive-subtitle {
    font-size: 16px !important;
}

.alert-rule-directive-triggers {
    margin-bottom: 3px;
}

.alert-rule-directive-subtitle~.alert-rule-directive-triggers {
    padding-top: 5px;
}

md-slider-container.edstrom-slider .md-track-fill {
    background-color: #607D8B;
}

md-slider-container.edstrom-slider .md-thumb, .md-thumb:after {
    border-color: #607D8B !important;
    background-color: #607D8B !important;
}

md-slider-container.edstrom-slider .md-sign, .md-sign:after {
    background-color: #607D8B;
    border-top: none !important;
}

.alert-rule-time-period {
    margin-left: 40px !important;
}

.alert-rule-time-period md-input-container {
    margin: 0;
}

.light-rule-row-space {
    margin-top: 12px;
}

.alert-rule-row-space {
    margin-top: 12px;
    margin-bottom: 12px;
}

.alert-rule-row-title {
    white-space: pre-line;
    padding-right: 20px;
}

.alert-time-period-container>div {
    margin-bottom: 24px;
}

.trigger-row {
    align-items: center;
    background-color: rgba(187, 187, 187, 0.1);
    margin: 8px 8px 16px 0;
    padding: 0 8px 0 8px;
}

.trigger-row .md-errors-spacer {
    min-height: 4px !important;
}

.trigger-row md-input-container {
    margin: 10px 10px;
}

.trigger-row md-select {
    margin: 8px 10px 12px !important;
}

.option-container {
    margin: 24px 0 16px 0;
}

.option-container-bigger {
    margin-left: 24px;
    margin-right: 24px;
    margin-top: 24px;
    margin-bottom: 0px;
    align-items: center;
    justify-content: center;
}

.md-dialog-content {
    max-width: 600px;
}

md-dialog-content.temp-selection-box {
    margin-top: 40px;
    margin-bottom: 40px;
    margin-right: 5px;
    scale: .7;
}

div.option-picker div:not(.option-selected):hover {
    filter: brightness(75%);
    background-color: rgba(158, 158, 158, 0.2)
}

div.option-picker div.option-selected:hover {
    filter: brightness(110%);
}

div.option-picker {
    border: 1px solid rgba(187, 187, 187, 0.9);
    border-radius: 4px;
    height: 30px;
}

div.option-picker-disabled div {
    cursor: default !important;
}

div.option-picker-bigger {
    height: 45px;
    border-radius: 1px;
    border: 1px solid rgba(187, 187, 187, 0.9);
}

div.option-picker-bigger div {
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    cursor: pointer;
    font-size: 14px;
}

div.option-picker div {
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    cursor: pointer;
    font-size: 12px;
}

div.option-selected-bigger {
    background-color: #8E2722;
    color: white;
    border-radius: 1px;
}

div.option-selected {
    background-color: #607D8B;
    color: white;
}

div.option-deselected {
    background-color: white;
}

table.daily-report {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

table.daily-report td {
    text-align: center;
    padding: 8px;
    border: 1px solid #4A4A4A;
}

table.daily-report td.empty-row {
    padding: 8px;
    border: none;
}

@media screen {
    #printSection {
        display: none;
    }

    .printOnly {
        display: none;
    }
}

@media print {
    body * {
        visibility: hidden;
    }
    html, body {
        height: 99vh;
        overflow: hidden;
    }
    #printSection, #printSection * {
        visibility: visible;
    }

    #printSection {
        position: absolute;
        left: 0;
        top: 0;
    }

    .printWidth {
        width: 100vw;
    }
}

.timebox-text {
    font-size: 14px;
    margin-right: 9px;
    margin-top: 12px;
}

.hint {
    color: #607D8B;
    font-size: 14px;
    font-style: italic;
    display: flex;
}

.error-text {
    color: rgb(213, 0, 0);
    font-size: 14px;
    font-style: italic;
    margin: 16px 0 16px 0;
    display: flex;
}

.updates-text {
    font-style: italic;
    max-width: 600px;
    margin-top: 10px;
}

.alert-rule-hint {
    margin-left: 16px;
    display: inline;
}

.space-below {
    margin-bottom: 8px;
}

.alert-rule-hint span {
    display: inline;
}

.inline {
    display: inline;
}

.center-align {
    align-items: center
}

.center-justify {
    justify-content: center;
}

.space-between {
    display: flex;
    justify-content: space-between;
}

.alert-rules-threshold-text {
    margin: 0 0 0 20px;
    font-size: 13px;
}

.modal-details div {
    align-items: center;
}

.modal-details md-input-container {
    margin-bottom: 0;
}

md-toolbar.edit-temp-buttons {
    width: 100%;
    background-color: white !important;
    font-size: 100%;
    bottom: 16px;
    padding: 24px 16px 0 16px;
    border-top: 1px solid rgba(187, 187, 187, 0.7);
    justify-content: flex-end;
}

md-toolbar.edit-profile-buttons {
    width: 100%;
    /* background-color: white !important; */
    font-size: 100%;
    /* bottom: 16px; */
    padding: 12px 16px 0 16px;
    border-top: 1px solid rgba(187, 187, 187, 0.7);
    justify-content: flex-end;
}

md-toolbar.edit-profile-buttons button {
    margin-right: 32px;
}

.profile-items-list {
    max-height: 410px !important;
    overflow-y: auto;
}

md-toolbar.edit-profile-buttons .md-button {
    margin: 0 8px 15px 21px !important;
    min-width: 150px;
}

.report-status-buttons .md-button {
    min-width: 150px;
}

.report-modal-detail-header {
    font-size: 22px;
}

span.report-modal-detail {
    margin: 10px 0 23px 0;
}

md-input-container.report-modal-inclusions {
    margin: 0 0 16px 0;
}

span.report-modal-inclusions {
    width: 200px;
    margin-bottom: 24px;
    font-size: 16px;
    display: block;
    align-content: center;
}

span.report-modal-inclusions-value {
    font-size: 14px;
}

.report-modal-inclusions md-select {
    width: 156px;
}

.report-modal-inclusions md-checkbox {
    margin-bottom: 30px;
}

.alert-summary {
    margin: 0;
}

.alert-summary>div {
    margin: 8px 0 8px 0;
}

.alert-summary img {
    display: block;
    margin-left: auto;
    margin-right: 10px;
}

.alert-summary-status-items {
    align-items: center;
}

.alert-summary-status-category {
    margin-right: 5px;
    font-size: 22px;
}

.alert-summary-status-button {
    margin-left: 5px;
    margin-right: 10px
}

.alert-summary-status-bell {
    margin-right: 5px;
    margin-top: -3px;
    font-size: 30px;
    font-weight: bold;
}

.alert-summary-status-active {
    margin-left: 5px;
    font-size: 16px;
    color: #353535;
    font-weight: normal;
}

.alert-summary-header {
    color: #777777;
    font-size: 14px;
    margin-bottom: 6px;
}

.alert-details-div {
    margin-bottom: 20px;
}

.alert-summary-body {
    color: #353535;
    font-size: 16px;
}

.alert-summary-subheader {
    font-size: 13px;
}

.alert-rule-text {
    margin-left: 16px;
    display: flex;
    align-items: center;
    font-weight: normal;
}

.watering-column {
    padding: 0 20px;
    justify-content: center;
}

.watering-column>div {
    width: 100%;
}

.watering-column-flush {
    margin-bottom: 6px;
}

span.alert-tab-header {
    font-size: 18px;
    font-weight: 600;
}

span.alert-tab-note {
    color: #607D8B;
    font-size: 14px;
    margin-bottom: 4px;
    font-style: italic;
}

div.alert-tab-header {
    justify-content: space-between;
    align-items: baseline;
    margin-top: 16px;
    margin-left: 5px;
}

div.alert-tab-note {
    text-align: end;
}

.alert-detail-section {
    margin: 4px;
}

.alert-detail-section img {
    width: 35px;
    height: 35px;
    display: block;
    margin-right: 16px;
}

.alert-detail-hours {
    width: 250px;
    margin-top: 0;
}

.alert-hold-units {
    margin-left: 10px;
    width: 160px;
    height: 24px;
}

.alert-detail-buttons {
    justify-content: flex-end;
    align-items: center;
    margin: 32px 0 8px 0;
}

.alert-detail-buttons .md-button {
    margin: 0 8px 15px 21px !important;
}

.md-toolbar-tools {
    justify-content: space-between;
    border-bottom: 1px solid rgba(187, 187, 187, 0.7);
}

.md-button {
    min-height: 25px;
    align-items: center;
    line-height: 0;
    margin: 0;
    padding: 0 16px;
    text-transform: none;
}

.md-button.left {
    border-radius: 5px 0 0 5px;
    margin-right: 0px;
}

.md-button.middle {
    border-radius: 0;
    border-left: 1px solid rgba(230, 230, 230, 0.96);
    border-right: 1px solid rgba(230, 230, 230, 0.96);
}

.md-button.right {
    border-radius: 0 5px 5px 0;
    margin-left: 0px;
}

.toggle {
    min-width: 60px;
}

.toggle.md-button:not([disabled]):hover,
.toggle.md-button.md-primary.md-raised:not([disabled]):hover {
    background-color: rgb(41, 60, 119);
    color: #fff;
    transition: 0.3s;
}

.md-button.active {
    /*background-color: rgb(41, 60, 119);*/
    transition: 0.3s;
}

.md-button.button-add-subtract {
    max-height: 40px;
    margin-right: 1px;
}

.toggle.md-button.button-preference {
    max-height: 40px;
    margin-right: 1px;
}

.toggle.md-button.button-preference {
    background-color: white;
    color: black;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .26)
}

.toggle.md-button.button-preference.selected {
    background-color: rgb(10, 19, 47);
    color: #fff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
}

.toggle.units {
    max-height: 30px;
}

.panel-description {
    display: flex;
    justify-content: center;
    margin-top: 25px;
    margin-bottom: 25px;
    color: #565656;
}

.point-dialog {
    width: 600px;
}

.point-dialog .header {
    padding: 0;
    margin-top: 37px;
    width: 100%;
    justify-content: space-evenly;
}

.point-dialog .header .point-name {
    max-width: 70%
}

.point-dialog-add-point {
    color: #353535;
    font-size: 20px;
}

.dialog-header div {
    font-size: 28px;
    /* color: black; */
    font-weight: 600;
}

.dialog-sub-head {
    word-wrap: break-word;
    color: #444749;
    font-size: 22px;
    max-width: 80%;
}

.dialog-value {
    color: #444749;
    font-size: 30px;
    font-weight: bold;
}

.dialog-table-head {
    width: 212.21px;
    color: #353535;
    font-size: 18px;
    font-weight: 600;
}

.dialog-table-label {
    width: 40px;
    color: #353535;
    font-size: 16px;
}

.dialog-table-value {
    width: 342px;
    color: #353535;
    font-size: 14px;
}

.point-datepicker {
    padding: 0;
    border-color: #000000;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    margin-right: 0px;
    min-width: 140px;
}

.report .md-datepicker-button {
    max-width: 33px !important;
}

.dialog-history-header>div {
    margin: 4px 0px 4px 32px;
    height: 20px;
    width: 37px;
    color: #777777;
    font-family: "Source Sans Pro";
    font-size: 16px;
    letter-spacing: 0.68px;
}

.point-datepicker>.md-datepicker-button {
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    height: 30px;
    margin-left: 12px !important;
}

.point-datepicker>.md-datepicker-input-container {
    padding: 4px;
    border-color: #00000000;
    border-width: 0px;
    border-style: solid;
    border-radius: 4px;
}

.point-datepicker * .md-datepicker-input {
    min-width: 82px;
    max-width: 82px;
}

.point-datepicker>.md-datepicker-input-container>.md-datepicker-triangle-button {
    margin-right: 8px;
}

.md-datepicker-button.md-button.md-icon-button {
    width: auto;
    padding: 0;
}

.md-datepicker-calendar-icon {
    margin: 0px;
}

.bigger-font {
    font-size: 24px;
    margin-top: 36px;
    margin-left: 18px;
    margin-bottom: 10px;
}

/*---------------*/

/* Nested Select */

/*---------------*/

nested-select {
    display: block;
    width: 100%;
}

/*
 * Nested selects include an input container unless they're
 * permanently open.
 */

nested-select md-input-container {
    width: 100%;
    margin: 0 0;
}

/*
 * Most of the styling for the contents of the input
 * container come from Angular Material, but we do
 * need to override a few styles.
 */

nested-select-selection.md-select-value {
    border-bottom-color: rgba(0, 0, 0, 0.12);
    cursor: pointer;
}

nested-select-selection.md-select-value:focus, nested-select-selection.md-select-value.focused {
    border-bottom-color: black;
    border-bottom-width: 2px;
    outline: none;
    padding-bottom: 0;
}

/*
 * The select options themselves are enclosed in a menu
 * container. This container may be permanently open or
 * it may open/close based on a trigger. By default, the
 * menu is triggerable, so set it to display: none.
 * Also give it an absolute position and a z-index so
 * it pops over the main page content.
 */

nested-select-menu {
    display: none;
    position: relative;
    z-index: 100;
    width: 500px !important;
    max-height: 400px;
    overflow-y: auto;
    left: 0;
    right: 0;
    margin: auto;
}

nested-select-menu.selected-list {
    left: 740px;
}

.nested-select-arrow {
    display: none;
    margin-bottom: auto;
    position: absolute;
    left: 710px;
    margin-top: 140px;
}

/*
 * The menu container has a tabindex so that clicking
 * anywhere within it keeps the focus within the nested
 * select. (Otherwise, focus may revert to the body
 * element.) There's no need to visually distinguish
 * this focus, though, so disable the normal outline.
 */

nested-select-menu:focus {
    outline: none;
}

/*
 * Adjust the menu if it is permanently fixed open.
 */

nested-select[fixed-menu] nested-select-menu {
    display: block;
    position: static;
    z-index: inherit;
}

/*
 * When the meny is visible, show it.
 */

nested-select-menu.visible, img.visible {
    display: block;
}

/*
 * If the select only supports single values, there's
 * no need to show the accumulated values in the
 * input container, so shift the open menu up so that
 * it's placed "on top of" that container.
 */

nested-select:not([multiple]) nested-select-menu.visible {
    transform: translate(2px, -48px);
}

/*
 * If search/filter is available, the menu container
 * includes a header with the search field.
 */

nested-select-header {
    background-color: rgb(250, 250, 250);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    padding-left: 10.667px;
    height: 48px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    width: auto;
}

nested-select-header input[type=search] {
    background-color: transparent;
    border: none;
    outline: none;
    height: 100%;
    width: 100%;
    padding: 0;
}

/*
 * Beneath the header is the actual menu content.
 */

nested-select md-content {
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0);
}

/*
 * The main content is a series of selectable
 * options. An option includes the text and
 * related styling cues (icons).
 */

nested-select-option {
    display: block;
    width: 100%;
}

.nested-select-text {
    display: flex;
    height: 40px;
    width: 100%;
    align-items: center;
}

/*
 * Each option may have a series of icons "in front
 * of it". There are two types of icons. If the
 * select is collapsible, then each option that has
 * children will include a button to collapse or
 * expand the display of those children. And if
 * the component only allows single selections, then
 * additional icons add visual guidance to the
 * heirarchy. (For multiple selects, the checkboxes
 * provide that visual guidance.)
 */

/*
 * Styles for the "guide" icons.
 */

nested-select-guide {
    left: 8px;
    position: relative;
    top: -8px;
}

/*
 * Styles for the collapse/expand buttons
 */

.nested-select-collapse.nested-select-collapse {
    flex-shrink: 0;
    left: 8px;
    margin: 0px;
    position: relative;
    width: 40px;
}

.nested-select-collapse ng-md-icon {
    color: rgba(0, 0, 0, 0.38);
}

.nested-select-collapse:focus ng-md-icon,
.nested-select-collapse:hover ng-md-icon {
    color: rgba(0, 0, 0, 0.87);
}

.nested-select-collapse svg {
    transition: transform 200ms linear 0s;
}

.nested-select-collapse.collapsed svg {
    transform: rotate(-90deg);
}

/*
 * Individual options are implemented as Angular
 * Material checkboxes, and most of their styles
 * come from that library. We do need to make a
 * few adjustments, though.
 */


nested-select md-checkbox:last-of-type {
    display: block;
    margin-left: 16px;
    width: 100%;
}

nested-select md-checkbox>.md-label {
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: calc(100% - 16px);
}

/* Shortens the name (may become invisible) */
/* nested-select[multiple] md-checkbox>.md-label {
    width: calc(100% - 40px - 16px);
} */

/*
 * If the component is using single select, don't
 * display the actual checkboxes (and don't shift
 * the label over to leave room for them).
 * Also display any checked text using the primaru
 * color.
 */

nested-select:not([multiple]) md-checkbox>.md-container {
    display: none;
}

nested-select:not([multiple]) md-checkbox>.md-label {
    margin-left: 0;
}

nested-select:not([multiple]) md-checkbox.md-checked {
    color: #3F51B5;
}

/*
 * Since the md-checkbox elements might not
 * span the entire width of the menu, we use
 * a pseudo-element to render the focus, hover,
 * and selected styles. We can extend it the
 * full width using a bit of vw trickery.
 */

nested-select md-checkbox:focus::before,
nested-select md-checkbox:hover::before,
nested-select:not([multiple]) md-checkbox.md-checked::before {
    content: "";
    position: absolute;
    background-color: #00000000;
    transform: translate(-100vw, -8px);
}

/*
 * Keep the icons visible even when the option is
 * focus/hover/checked by raising their z-index.
 */

nested-select button, nested-select-guide {
    z-index: 101;
}

nested-select[fixed-menu] button, nested-select[fixed-menu] nested-select-guide {
    z-index: 1;
}

/*
 * Handle collapse/expand via CSS. Someday
 * this might be animated.
 */

nested-select-options.collapsed {
    display: none;
}

md-progress-circular.white svg path {
    stroke: white;
}

.errors {
    background-color: #d99d3b;
    z-index: 50;
}

.errors li {
    list-style-type: none;
}

.alert-badge {
    color: #ffffff;
    background-color: #90261d;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    font-family: "Source Sans Pro";
    font-size: 16px;
    letter-spacing: 0.68px;
    text-align: center;
    text-decoration: none;
    font-style: normal;
    font-weight: 500;
    align-items: center;
    display: flex;
    justify-content: center;
}

.issues-badge {
    color: #ffffff;
    background-color: #ff3e3a;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-family: "Source Sans Pro";
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    text-decoration: none;
    font-style: normal;
    font-weight: 500;
    display: block;
    margin-top: -30px;
    margin-left: -18px;
}

.barchart {
    width: 450px;
    height: 42px;
}

li.disabled-item-template {
    cursor: default !important;
    padding: 0 !important;
    margin: 0 15px !important;
    transition: none !important;
    background-color: white !important;
}

div.disabled-item-template {
    cursor: default !important;
    transition: none !important;
    background-color: white !important;
    font-weight: bold;
}

.lighting-value {
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-bottom-color: #cccccc;
    padding-top: 1px;
}

.lighting-value-input {
    text-align: center;
    padding-top: 10px !important;
}

md-chip.dropping:before {
    content: "↓";
    position: absolute;
    top: -20px;
    color: black;
}

md-chip.dropping--before:before {
    left: -9px;
}

md-chip.dropping--after:before {
    right: -9px;
}

.device-progress.md-accent .md-container {
    background-color: rgb(200, 200, 200);
}

.nav-bar-tab-icon-selected {
    fill: #607D8B;
    size: 24;
    font-size: 50px;
}

.nav-bar-tab-icon-not-selected {
    fill: white;
    size: 24;
}

.nav-bar-tab-text {
    font-size: 20px;
}

.no-text-selection {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.marketing-message-banner {
    height: 50px;
    width: 100%;
    background-color: #D99D3B;
    position: relative;
    top: 0px;
}

.marketing-message-banner-text {
    fill: black;
    color: black;
    text-align: center;
    position: relative;
    top: 8px;
    margin: auto;
    font-size: large;
    width: 100%;
}

.scheduled-flushing-inhibited-banner {
    height: 50px;
    width: 100%;
    background-color: #90261d;
    position: relative;
    top: 0px;
}

.scheduled-flushing-inhibited-banner-text {
    fill: #ffffff;
    color: #ffffff;
    font-size: large;
    width: 100%;
}

div.scheduled-flushing-inhibited-banner-text a {
    color: #ffffff;
}

.inhibited-flush-schedule {
    font-style: italic;
    color: #a6a6a6;
    text-decoration: line-through;
}

.chip {
    background-color: #44606E;
    color: white;
    height: 14px;
    line-height: 14px;
    font-size: 12px;
    margin-left: 8px;
    margin-top: 1px;
    border-radius: 16px;
    display: block;
    padding: 0 12px;
    float: left;
    box-sizing: border-box;
    max-width: 100%;
    position: relative;
}

.chip-critical {
    background-color: #90261d;
}

.chip-warning {
    background-color: #d99d3b;
}

.time-select-border {
    border-style: solid;
    border-color: black;
    border-width: 1px;
    height: 2em;
}

.time-select-border-disabled {
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.38);
    border-width: 1px;
    height: 2em;
}

.time-select-from-slider:disabled::-moz-range-thumb {
    background: rgba(155, 155, 155, 0.8);
}

.disabled {
    border-color: rgba(0, 0, 0, 0.38);
    color: rgba(0, 0, 0, 0.38);
}

md-chip .disabled {
    font-style: italic;
    color: rgba(255, 255, 255, 0.75)
}

.alert-note-textarea,
.reason-for-change-textarea {
    max-height: 164px;
}

.reason-for-change-dialog {
    min-width: 600px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.busy-cursor {
    cursor: progress;
}

.icon {
    fill: #607D8B;
}

.icon-stack {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    padding-right: 6px;
    margin-left: 10px;
}

.stacked-icon-1 {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 20px;
}

.stacked-icon-2 {
    position: absolute;
    top: -6px;
    left: -5px;
    font-size: 36px;
}

div#navigationBar {
    background-color: black;
    height: 85px;
}

.alert-card-icon {
    fill: white;
}

.dashboard-alerts-by-loc {
    background: #8E2722;
}

.point-history-critical-icon {
    fill: #90261D;
    margin: 0 10px 0 -30px;
}

.point-history-warning-icon {
    fill: #D99D3B;
    margin: 0 10px 0 -30px;
}

.data-divider {
    height: 1px;
    background: #B7BBC0;
}

.header-divider {
    height: 2px;
    background: #353535;
}

.water {
    fill: #607D8B;
}

.hover-button-icon {
    fill: #a6a6a6 !important;
}

.btn-switch--on {
    background-color: #3ca1c8 !important;
}

.btn-switch--on::after {
    position: relative;
    content: "";
    display: block;
    background-color: white;
    border-radius: 50%;
    width: 17px;
    height: 17px;
    transition-duration: 0.2s;
    filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.25));
    top: 2px;
    left: 20px;
}

.btn-switch {
    position: relative;
    display: block;
    width: 40px;
    height: 21px;
    border-radius: 40px;
    background-color: #899596;
    cursor: pointer;
    transition-delay: 0.1s;
}

.btn-switch:not(.btn-switch--on)::after {
    position: relative;
    content: "";
    display: block;
    background-color: white;
    border-radius: 50%;
    width: 17px;
    height: 17px;
    transition-duration: 0.2s;
    filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.25));
    top: 2px;
    left: 3px;
}

.icon-padlock,
.icon-padlock-open {
    position: relative;
    display: block;
    box-sizing: border-box;
    box-shadow: 0 0 0 3px rgb(96, 125, 139);
    border-radius: 25%;
    width: 24px;
    height: 17px;
    top: 11%;
}

.icon-padlock-open {
    transform: rotate(12deg);
    box-shadow: 0 0 0 3px rgb(96, 125, 139);
}

.icon-padlock-open::after,
.icon-padlock::after {
    position: relative;
    display: block;
    box-sizing: border-box;
    content: "";
    box-shadow: 0 0 0 3px rgb(96, 125, 139);
    border-bottom-style: hidden;
    border-radius: 50% 50% 0 0;
    clip-path: inset(-4px -4px 1px -4px);
    width: 16px;
    height: 12px;
}

.icon-padlock::after {
    top: -21px;
    left: 4px;
}

.icon-padlock-open::after {
    top: -23px;
    left: 1px;
    transform: rotate(-30deg);
}

.icon-padlock::before,
.icon-padlock-open::before {
    position: relative;
    display: block;
    box-sizing: border-box;
    content: "";
    background-color: rgb(96, 125, 139);
    width: 3px;
    height: 8px;
    top: 5px;
    left: 10px;
}

.icon-padlock-open::before {
    transform: rotate(90deg);
}

.location-padlock {
    transform: translate3d(0, 15%, 0) scale(0.53);
}

.padlock-white,
.padlock-white::after {
    box-shadow: 0 0 0 3px white;
}

.padlock-white::before {
    background-color: white;
}

.button-align-icon {
    margin-top: 36%;
    margin-left: 29%;
}

/************************************************ 
 * Dark mode settings 
 ************************************************/
:root {
    --dark-mode-background-darkest: rgba(20, 20, 20, 0.87);
    --dark-mode-background-1: rgb(45, 45, 45);
    --dark-mode-background-2: rgb(60, 60, 60);
    --dark-mode-background-disabled: rgba(231, 231, 231, 0.60);
    --dark-mode-background-haze: rgba(80, 80, 80, 0.7);
    --dark-mode-divider-color: rgb(50, 50, 50);
    --dark-mode-font-color: rgba(231, 231, 231, 0.87);
    --dark-mode-font-label-color: rgba(231, 231, 231, 0.60);
    --dark-mode-font-color-dark: rgba(24, 24, 24, 0.87);
    --dark-mode-font-disabled: #c2c2c2;
    --dark-mode-font-hint-color: #60C6D2;
    --dark-mode-font-error-message: #C6DE41;
    --dark-mode-font-inactive-color: #959595;
    --dark-mode-normal-color: #1D82AD;
    --dark-mode-warning-color: #E2B203;
    --dark-mode-critical-color: #AE2A19;
    --dark-mode-inactive-color: #959595;
    --dark-mode-font-critical-color: #FF0000;
    --dark-mode-acknowledged-color: #929292;
    --dark-mode-water-color: #1DA3EC;
    --dark-mode-highlight-bg-color: #1D82AD;
    --dark-mode-highlight-font-color: rgba(231, 231, 231, 0.87);
    --dark-mode-component-border-color: rgba(159, 159, 159, 0.87);
    --dark-mode-hover-bg-color: rgb(45, 45, 45);
    --dark-mode-hover-font-color: rgba(231, 231, 231, 0.87);
    --dark-mode-selection-bg-color: #1D82AD;
    --dark-mode-selection-font-color: rgba(231, 231, 231, 0.87);
}

html.dark-mode html,
html.dark-mode body,
html.dark-mode md-content,
html.dark-mode select {
    color: var(--dark-mode-font-color);
    background-color: var(--dark-mode-background-1);
}

html.dark-mode md-divider {
    border: none !important;
}

html.dark-mode alerting-rules md-divider {
    border-top-width: 2px;
    border-color: var(--dark-mode-divider-color);
}

html.dark-mode .md-scroll-mask {
    background-color: var(--dark-mode-background-haze) !important;
}

html.dark-mode .row-drop-down img,
html.dark-mode html.dark-mode button.md-primary:not(:disabled) img,
html.dark-mode .md-button:not(.edstrom-action-button) img,
html.dark-mode .md-datepicker-button.md-button.md-icon-button,
html.dark-mode .md-datepicker-triangle-button .md-datepicker-expand-triangle,
html.dark-mode alerting-rules img,
html.dark-mode .selected-location-placeholder img {
    filter: invert(100%);
}

html.dark-mode .md-calendar tr:not(.hover-row:hover),
html.dark-mode .md-datepicker-calendar-pane {
    border: none !important;
}

html.dark-mode .md-default-theme .md-calendar tr:last-child td,
html.dark-mode .md-calendar tr:last-child td {
    border-color: var(--dark-mode-component-border-color);
}

html.dark-mode .md-default-theme .md-datepicker-calendar,
html.dark-mode .md-datepicker-calendar {
    background-color: var(--dark-mode-background-2);
}

html.dark-mode .md-default-theme .md-calendar-date-disabled,
html.dark-mode .md-calendar-date-disabled,
html.dark-mode .md-default-theme .md-calendar-month-label-disabled,
html.dark-mode .md-calendar-month-label-disabled {
    color: var(--dark-mode-font-label-color);
}

html.dark-mode .schedule-type {
    background-color: var(--dark-mode-background-1) !important;
}

html.dark-mode .md-datepicker-input-mask {
    display: none;
}

html.dark-mode page-title,
html.dark-mode h2.edstrom,
html.dark-mode .key-margin,
html.dark-mode .page-subheader span,
html.dark-mode .dialog-header div,
html.dark-mode span.report-type-modal,
html.dark-mode .dialog-value,
html.dark-mode .alert-summary-status-bell,
html.dark-mode .current-tab-title,
html.dark-mode md-nav-bar .md-button._md-nav-button.md-primary {
    font-weight: normal !important;
}

html.dark-mode .icon,
html.dark-mode md-card.settings ng-md-icon svg,
html.dark-mode md-checkbox.md-default-theme.md-checked .md-icon {
    fill: var(--dark-mode-highlight-bg-color) !important;
}

html.dark-mode md-tabs:not([id="alert-rules-tabs"]):not([id="users-tabs"]):not([id="alerts-tabs"]):not([id="wateringScheduleTabs"]) .md-tab.md-active,
html.dark-mode md-tabs:not([id="alert-rules-tabs"]):not([id="users-tabs"]):not([id="alerts-tabs"]):not([id="wateringScheduleTabs"]) .md-tab:not(.md-active),
html.dark-mode md-tabs:not([id="alert-rules-tabs"]):not([id="users-tabs"]):not([id="alerts-tabs"]):not([id="wateringScheduleTabs"]) .md-tab-item:not(.md-active),
html.dark-mode md-tabs#eventviewer-tabs md-tabs.event-viewer-tabs .md-tab {
    background-color: var(--dark-mode-background-2) !important;
    font-weight: normal !important;
}

html.dark-mode md-tabs#alerts-tabs .md-tab-item,
html.dark-mode md-tabs#wateringScheduleTabs .md-tab-item,
html.dark-mode md-tabs#eventviewer-tabs:not(.event-viewer-tabs) .md-tab {
    background-color: var(--dark-mode-background-1) !important;
    font-weight: normal !important;
}

html.dark-mode md-input-container .md-input {
    border-color: var(--dark-mode-component-border-color) !important;
}

html.dark-mode .acknowledged-alert-icon {
    fill: var(--dark-mode-acknowledged-color) !important;
}

html.dark-mode md-dialog,
html.dark-mode .md-title,
html.dark-mode .dialog-sub-head,
html.dark-mode .dialog-value,
html.dark-mode md-dialog-actions button,
html.dark-mode .alert.panel:not(.hint),
html.dark-mode .alert-summary-body,
html.dark-mode .alert-summary-subheader,
html.dark-mode .dialog-table-value,
html.dark-mode md-checkbox:not([disabled]) .md-label,
html.dark-mode .user-row span.user-name,
html.dark-mode .user-row span.time-span,
html.dark-mode img.clickable,
html.dark-mode .md-datepicker-input,
html.dark-mode .point-dialog-add-point,
html.dark-mode .page-description,
html.dark-mode md-menu-content.md-default-theme md-menu-item,
html.dark-mode md-menu-content md-menu-item,
html.dark-mode .alert-summary-status-active,
html.dark-mode .menu-item-email {
    color: var(--dark-mode-font-color) !important;
}

html.dark-mode md-menu-content.md-default-theme,
html.dark-mode md-menu-content {
    background-color: var(--dark-mode-background-2) !important;
}

html.dark-mode md-checkbox:not([disabled]).md-default-theme:not(.md-checked) .md-icon,
html.dark-mode md-checkbox:not([disabled]):not(.md-checked) .md-icon,
html.dark-mode md-checkbox:not([disabled]).md-default-theme .md-ink-ripple,
html.dark-mode md-checkbox:not([disabled]) .md-ink-ripple {
    color: var(--dark-mode-font-color) !important;
    border-color: var(--dark-mode-font-color) !important;
}

html.dark-mode .dialog-table-head,
html.dark-mode .alert-summary-header,
html.dark-mode .dialog-table-label,
html.dark-mode .dialog-history-header div,
html.dark-mode md-dialog .label,
html.dark-mode md-checkbox[disabled] .md-label {
    color: var(--dark-mode-font-label-color) !important;
    font-weight: normal !important;
}

md-checkbox.md-default-theme[disabled]:not(.md-checked) .md-icon,
md-checkbox[disabled]:not(.md-checked) .md-icon {
    border: 1px solid var(--dark-mode-component-border-color) !important;
}

html.dark-mode .data-divider,
html.dark-mode .header-divider {
    background: var(--dark-mode-background-1) !important;
}

html.dark-mode button.md-primary:not([disabled]),
html.dark-mode .md-button.md-primary:not([disabled]).md-raised {
    color: var(--dark-mode-font-color) !important;
    background-color: var(--dark-mode-highlight-bg-color) !important;
    font-weight: normal !important;
}

html.dark-mode button.md-primary[disabled] {
    color: var(--dark-mode-background-darkest) !important;
    background-color: var(--dark-mode-background-disabled) !important;
    border: 1px solid var(--dark-mode-background-darkest) !important;
    font-weight: bold !important;
}

html.dark-mode md-tabs[md-border-bottom] md-tabs-wrapper {
    border-bottom: 2px solid var(--dark-mode-background-1) !important;
}

html.dark-mode md-select.md-default-theme .md-select-value.md-select-placeholder,
html.dark-mode md-select .md-select-value.md-select-placeholder {
    border-color: var(--dark-mode-font-color) !important;
}

/* html.dark-mode md-tabs-wrapper, */
html.dark-mode md-card,
html.dark-mode md-nav-bar a.md-primary {
    box-shadow: none !important;
}

html.dark-mode md-dialog {
    /* border: 1px solid var(--dark-mode-component-border-color); */
    border: 1px solid var(--dark-mode-background-darkest);
}

html.dark-mode md-card.current-alerts {
    border: none;
}


html.dark-mode .footer {
    background-color: var(--dark-mode-background-darkest) !important;
}

html.dark-mode div#navigationBar {
    background-color: var(--dark-mode-background-darkest);
    height: 85px;
    box-shadow: var(--dark-mode-background-darkest) 0px -15px 10px -14px inset !important;
}

html.dark-mode #mainContent,
html.dark-mode md-content._md,
html.dark-mode md-nav-bar a.md-primary,
html.dark-mode .dialog-header,
html.dark-mode .dialog-footer {
    background-color: var(--dark-mode-background-1) !important;
}

html.dark-mode div.option-deselected {
    background-color: var(--dark-mode-background-2) !important;
    color: var(--dark-mode-font-color) !important;
}

html.dark-mode input[type="time"],
html.dark-mode input[type="number"] {
    color-scheme: dark;
}

html.dark-mode .trigger-row {
    background-color: var(--dark-mode-background-2) !important;
}

html.dark-mode md-checkbox.user-profile-contact-checkbox .md-label,
html.dark-mode md-checkbox.user-profile-contact-checkbox.md-default-theme .md-ink-ripple,
html.dark-mode md-checkbox.user-profile-contact-checkbox .md-ink-ripple {
    color: var(--dark-mode-font-color) !important;
}

html.dark-mode md-checkbox.user-profile-contact-checkbox.md-checked .md-ink-ripple {
    background-color: var(--dark-mode-component-border-color) !important;
}

html.dark-mode ng-md-icon:not(.nested-select-icon) {
    color: var(--dark-mode-highlight-font-color);
    fill: var(--dark-mode-highlight-font-color);
}

html.dark-mode .md-open-menu-container,
html.dark-mode md-select-menu md-content._md,
html.dark-mode md-menu-content {
    background-color: var(--dark-mode-background-2) !important;
    border: 1px solid var(--dark-mode-background-1) !important;
}

html.dark-mode md-select-menu.md-default-theme md-content md-option[selected],
html.dark-mode md-select-menu md-content md-option[selected],
html.dark-mode md-select-menu.md-default-theme md-content md-option,
html.dark-mode md-select-menu md-content md-option,
html.dark-mode .event-viewer-filter-input-unfocused,
html.dark-mode .event-viewer-filter-input-focused {
    background-color: var(--dark-mode-background-2);
    color: var(--dark-mode-font-color);
}

html.dark-mode md-select:not([disabled]):focus .md-select-value,
html.dark-mode md-select .md-select-icon {
    color: var(--dark-mode-font-color);
}

/* html.dark-mode table.user-list-table tbody tr:hover, */
html.dark-mode md-option:hover:not(.inactive-point),
html.dark-mode .hover-row:hover:not(.inactive-point):not(.event-viewer-select),
html.dark-mode .hover-row:hover:not(.inactive-point) .action-links,
html.dark-mode .hover-row:hover:not(.inactive-point) .user-subheader,
html.dark-mode .hover-row:hover:not(.inactive-point) .event-viewer-details-updated-property {
    background-color: var(--dark-mode-hover-bg-color) !important;
    color: var(--dark-mode-hover-font-color) !important;
    fill: var(--dark-mode-hover-font-color) !important;
}

html.dark-mode .quick-action-dot,
html.dark-mode .md-calendar-date.md-calendar-selected-date .md-calendar-date-selection-indicator,
html.dark-mode .md-default-theme .md-calendar-date.md-focus.md-calendar-selected-date .md-calendar-date-selection-indicator,
html.dark-mode .md-calendar-date.md-focus.md-calendar-selected-date .md-calendar-date-selection-indicator,
html.dark-mode .progress-number-container.current,
html.dark-mode div.option-selected,
html.dark-mode .normal-chips .md-chips md-chip,
html.dark-mode .progress-number-container.complete,
html.dark-mode md-checkbox.md-default-theme.md-checked .md-icon,
html.dark-mode md-checkbox.md-checked .md-icon {
    background-color: var(--dark-mode-highlight-bg-color) !important;
}

html.dark-mode .user-group-chips .md-chips md-chip {
    padding: 5px;
    height: 40px;
    line-height: 16px;
    font-size: 12px;
    margin: 8px 8px 0 0;
    color: var(--dark-mode-font-color) !important;
    background-color: var(--dark-mode-highlight-bg-color) !important;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0, 0, 0, .2);
    box-shadow: 0 1px rgba(0, 0, 0, 0.2) !important;
    border-radius: 0;
}

html.dark-mode md-checkbox.md-checked:not(.locationCheckbox) .md-icon {
    fill: var(--dark-mode-highlight-bg-color) !important;
    background-color: var(--dark-mode-highlight-bg-color) !important;
}

html.dark-mode .md-default-theme .md-calendar-day-header,
html.dark-mode .md-calendar-day-header {
    background-color: var(--dark-mode-background-1) !important;
}

html.dark-mode .md-default-theme .md-calendar,
html.dark-mode .md-calendar {
    background-color: var(--dark-mode-background-2) !important;
    color: var(--dark-mode-font-color) !important;
}

html.dark-mode .md-calendar-month-label md-icon {
    color: var(--dark-mode-font-color) !important;
}

html.dark-mode .quick-action-buttons ng-md-icon {
    fill: var(--dark-mode-font-color) !important;
}

html.dark-mode .hover-row:hover img,
html.dark-mode .point-details-point-icon {
    filter: invert(100%) hue-rotate(180deg);
}

html.dark-mode .hover-row:hover button.md-primary {
    box-shadow: 0 4px 10px 0 var(--dark-mode-background-darkest),
        0 1px 10px 0 rgba(0, 0, 0, 0.12),
        0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .hover-row:hover .point-value-circle {
    border: 1px solid var(--dark-mode-background-darkest) !important;
}

html.dark-mode md-tabs .md-tab {
    color: var(--dark-mode-font-label-color);
    background-color: var(--dark-mode-background-1);
}

html.dark-mode md-tabs .md-tab.md-active,
html.dark-mode md-tabs .md-tab.md-active div.md-ripple-container {
    color: var(--dark-mode-font-color) !important;
    border-color: var(--dark-mode-highlight-bg-color) !important;
}

html.dark-mode .location-row-selected {
    background-color: var(--dark-mode-background-2) !important;
    font-weight: bold !important;
}

html.dark-mode .user-list-table {
    border-collapse: collapse;
}

html.dark-mode .user-list-table th {
    background-color: var(--dark-mode-background-2);
}

html.dark-mode .user-list-table thead th {
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: 0 1px 0 var(--dark-mode-background-darkest);
  padding: 2px 0;
}

html.dark-mode .md-autocomplete-suggestions,
html.dark-mode .md-autocomplete-suggestions-container li {
    background-color: var(--dark-mode-background-2);
    color: var(--dark-mode-font-color) !important;
}

html.dark-mode div.footer {
    border: none;
}

html.dark-mode md-card,
html.dark-mode md-dialog-content md-content._md,
html.dark-mode .alert-card-content,
html.dark-mode .filled-row:not(.hover-row:hover):not(.schedule-type),
html.dark-mode .filled-row-dark:not(.hover-row:hover),
html.dark-mode .modal-body,
html.dark-mode .point-dialog,
html.dark-mode .report-create-modal,
html.dark-mode md-dialog:not(.report-create-modal):not(.report-type-modal),
html.dark-mode md-dialog md-dialog-content.report-create-modal,
html.dark-mode .event-viewer-table thead th,
html.dark-mode .alerts-header,
html.dark-mode .alerts-row {
    background-color: var(--dark-mode-background-2) !important;
}

html.dark-mode md-dialog.report-create-modal,
html.dark-mode md-dialog.report-type-modal {
    background-color: var(--dark-mode-background-2) !important;
}

html.dark-mode .alerts-header {
    height: 50px;
    padding-top: 10px;
}

html.dark-mode .location-overview-table-header,
html.dark-mode .location-overview-data-row,
html.dark-mode .data-row,
html.dark-mode .filled-row:not(.hover-row:hover),
html.dark-mode .filled-row-dark:not(.hover-row:hover),
html.dark-mode tr:not(.hover-row:hover),
html.dark-mode .list-header {
    border-bottom: 1px solid var(--dark-mode-background-darkest) !important;
}

html.dark-mode .virtual-repeat-event {
    border: none !important;
}

html.dark-mode ng-md-icon.alert-card-icon {
    fill: var(--dark-mode-background-1);
}

html.dark-mode .nav-bar-tab-icon-selected {
    fill: var(--dark-mode-font-color) !important;
}

html.dark-mode md-nav-bar md-nav-ink-bar {
    background-color: var(--dark-mode-highlight-bg-color) !important;
}

/* html.dark-mode .md-button._md-nav-button.md-selected,
html.dark-mode ng-md-icon.nav-bar-tab-icon-selected,
html.dark-mode a.md-active span.nav-bar-tab-text {
    fill: var(--dark-mode-highlight-bg-color) !important;
    color: var(--dark-mode-highlight-bg-color) !important;
} */

html.dark-mode .md-button._md-nav-button.md-unselected,
html.dark-mode div.customer-name-header,
html.dark-mode .general-settings-label,
html.dark-mode md-card,
html.dark-mode md-card.md-default-theme,
html.dark-mode .current-tab-title,
html.dark-mode .md-toolbar-tools,
html.dark-mode .nested-select-collapse ng-md-icon,
html.dark-mode ng-md-icon.nested-select-collapse {
    fill: rgb(135, 135, 135) !important;
    color: var(--dark-mode-font-color) !important;
}

html.dark-mode ng-md-icon.nav-bar-tab-icon-not-selected,
html.dark-mode a.md-unselected span.nav-bar-tab-text {
    fill: var(--dark-mode-font-label-color) !important;
    color: var(--dark-mode-font-label-color) !important;
}

html.dark-mode .reason-for-change-label,
html.dark-mode .location-overview-table-header,
html.dark-mode .list-header,
html.dark-mode table tr th {
    fill: rgb(135, 135, 135) !important;
    color: var(--dark-mode-font-label-color) !important;
}

html.dark-mode .progress-number-container.current {
    fill: var(--dark-mode-font-color) !important;
}

html.dark-mode .reason-for-change,
html.dark-mode .time-input,
html.dark-mode .customer-name-header,
html.dark-mode .nav-bar-tab-text,
html.dark-mode .login-dropdown-username,
html.dark-mode md-input-container label,
html.dark-mode md-input-container input {
    color: var(--dark-mode-font-color) !important;
}

html.dark-mode label,
html.dark-mode input::placeholder {
    color: var(--dark-mode-font-label-color) !important;
}

html.dark-mode div.location-list-body md-divider,
html.dark-mode md-dialog-content.report-create-modal md-divider {
    display: none !important;
}

html.dark-mode div.alert-acknowledged {
    background-color: var(--dark-mode-acknowledged-color) !important;
}

html.dark-mode div.alert-cleared {
    background-color: var(--dark-mode-normal-color) !important;
}

html.dark-mode div.alert-active,
html.dark-mode .key.critical,
html.dark-mode .critical-chip,
html.dark-mode .chip-critical,
html.dark-mode .alert-badge,
html.dark-mode .alert-critical,
html.dark-mode .dashboard-alerts-by-loc,
html.dark-mode .point-value-circle.critical {
    background-color: var(--dark-mode-critical-color) !important;
    color: var(--dark-mode-font-color) !important;
    font-weight: bold;
}

html.dark-mode .inactive-chip,
html.dark-mode .chip-inactive {
    background-color: var(--dark-mode-inactive-color) !important;
    color: black !important;
    font-weight: bold;
}

html.dark-mode .option-selected-bigger {
    background-color: var(--dark-mode-highlight-bg-color) !important;
    color: var(--dark-mode-highlight-font-color) !important;
    border-radius: 10px;
}

html.dark-mode .alert.panel .small {
    color: var(--dark-mode-font-label-color);
}

html.dark-mode button.md-warn,
html.dark-mode button.edstrom-action-button-hollow-warning,
html.dark-mode .edstrom-action-button-hollow-critical {
    color: var(--dark-mode-highlight-bg-color) !important;
    font-weight: bold;
    border: 2px solid var(--dark-mode-highlight-bg-color);
}

html.dark-mode button.md-warn.md-raised {
    color: var(--dark-mode-font-color) !important;
    border: 0;
}

html.dark-mode .fill-critical,
html.dark-mode .point-history-critical-icon {
    fill: var(--dark-mode-critical-color) !important;
}

html.dark-mode .fill-warning,
html.dark-mode .point-history-warning-icon {
    fill: var(--dark-mode-warning-color) !important;
}

html.dark-mode .action-links.critical,
html.dark-mode .alert-active,
html.dark-mode .alert-acknowledged,
html.dark-mode .alert-cleared {
    color: var(--dark-mode-font-color) !important;
}

html.dark-mode div.warning-active,
html.dark-mode .key.warning,
html.dark-mode .warning-chip,
html.dark-mode .chip-warning,
html.dark-mode .alert-warning,
html.dark-mode .point-value-circle.warning {
    background-color: var(--dark-mode-warning-color) !important;
    color: var(--dark-mode-font-color-dark) !important;
    font-weight: bold !important;
}

html.dark-mode .alert.critical,
html.dark-mode .alert.warning {
    background-color: var(--dark-mode-background-2) !important;
}

html.dark-mode .action-links.warning,
html.dark-mode .alert-active {
    color: var(--dark-mode-font-color);
}

html.dark-mode .alert-critical-text {
    color: var(--dark-mode-font-critical-color);
    /* font-weight: bold; */
}

html.dark-mode .warning-active,
html.dark-mode .alert-warning-text {
    color: var(--dark-mode-warning-color);
}

html.dark-mode .key.normal,
html.dark-mode .normal-chip,
html.dark-mode .chip {
    background-color: var(--dark-mode-normal-color);
}

html.dark-mode .error .md-toast-content,
html.dark-mode div.md-toast-content ng-md-icon,
html.dark-mode .md-toast-content {
    background: var(--dark-mode-warning-color);
    color: var(--dark-mode-background-2);
    fill: var(--dark-mode-background-2);
}

html.dark-mode span.table-sort-icon > ng-md-icon {
    fill: var(--dark-mode-highlight-bg-color);
}

html.dark-mode .hover-row.event-viewer-unselect.updates-text:not(.event-viewer-select) {
    background-color: rgba(161, 64, 64, 0.2) !important;
}

html.dark-mode .filled-row.event-viewer-unselect:hover,
html.dark-mode .event-viewer-select:hover {
    box-shadow: inset 0 0 500px rgba(0, 0, 0, 0.25);
}

html.dark-mode tr.event-viewer-unselect:nth-child(even) {
    background: var(--dark-mode-background-2) !important;
}

html.dark-mode .edstrom-action-button-micro,
html.dark-mode button.edstrom-action-button-hollow.md-button.md-primary,
html.dark-mode button.edstrom-action-button-hollow.md-button.md-primary ng-md-icon,
html.dark-mode .event-viewer-select,
html.dark-mode .event-viewer-select.filled-row:not(.hover-row:hover) {
    background-color: var(--dark-mode-selection-bg-color) !important;
    color: var(--dark-mode-selection-font-color) !important;
    fill: var(--dark-mode-selection-font-color) !important;
    /* font-weight: bold !important; */
}

html.dark-mode button.edstrom-action-button-hollow.md-button.md-primary:disabled {
    border: 0;
    background-color: var(--dark-mode-background-disabled) !important;
    color: var(--dark-mode-font-color-dark) !important;
    fill: var(--dark-mode-font-color-dark) !important;
}

html.dark-mode .point-datepicker {
    border-color: var(--dark-mode-component-border-color) !important;
}

html.dark-mode .hover-row:hover .hint.event-note {
    color: var(--dark-mode-font-color) !important;
}

html.dark-mode .blue-alert-banner {
    background-color: var(--dark-mode-background-2) !important;
}

html.dark-mode .hint {
    color: var(--dark-mode-font-hint-color) !important;
}

html.dark-mode .alert.hint {
    background-color: var(--dark-mode-background-1) !important;
}

html.dark-mode .point-value-circle,
html.dark-mode .alert-warning,
html.dark-mode .alert-critical {
    border: 1px solid var(--dark-mode-background-1) !important;
}

html.dark-mode .point-value-circle.normal {
    background-color: var(--dark-mode-normal-color) !important;
}

html.dark-mode .point-value-circle.inactive {
    background-color: var(--dark-mode-inactive-color) !important;
    color: var(--dark-mode-font-color) !important;
    font-weight: bold;
}

html.dark-mode .water {
    fill: var(--dark-mode-water-color) !important;
}

html.dark-mode md-tabs md-ink-bar {
    color: var(--dark-mode-highlight-bg-color) !important;
    background-color: var(--dark-mode-highlight-bg-color) !important;
}

html.dark-mode md-input-container.md-default-theme.md-input-invalid .md-char-counter,
html.dark-mode md-input-container.md-input-invalid .md-char-counter,
html.dark-mode md-input-container.md-default-theme.md-input-invalid .md-input-message-animation,
html.dark-mode md-input-container.md-input-invalid .md-input-message-animation,
html.dark-mode md-input-container.md-default-theme.md-input-invalid label,
html.dark-mode md-input-container.md-input-invalid label,
html.dark-mode md-input-container.md-default-theme .md-input-message-animation,
html.dark-mode md-input-container .md-input-message-animation,
html.dark-mode md-input-container.md-default-theme .md-input-messages-animation,
html.dark-mode md-input-container .md-input-messages-animation,
html.dark-mode .user-info-error-message,
html.dark-mode .error-message {
    color: var(--dark-mode-font-error-message) !important;
}

html.dark-mode .checkbox-select-all:not(.disabled):not(.not-editable):hover {
    color: var(--dark-mode-font-color);
    text-decoration: underline;
}

html.dark-mode .checkbox-select-all.disabled {
    cursor: default !important;
    color: var(--dark-mode-font-label-color) !important;
}

html.dark-mode img.user-edit,
html.dark-mode img.user-delete {
    filter: invert(100%);
}

html.dark-mode .user-subheader {
    color: var(--dark-mode-font-color) !important;
}

html.dark-mode ::-webkit-scrollbar {
    width: 15px;
}

html.dark-mode ::-webkit-scrollbar-track {
    background: var(--dark-mode-background-darkest);
}

html.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--dark-mode-component-border-color);
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--dark-mode-highlight-bg-color);
}

html.dark-mode .alert-note-textarea,
html.dark-mode .reason-for-change-textarea {
    color: var(--dark-mode-font-color);
}

html.dark-mode .location-setting:not(.location-selected) .icon-padlock,
html.dark-mode .location-setting:not(.location-selected) span {
    filter: invert(1);
}

html.dark-mode .location-setting.location-selected .icon-padlock,
html.dark-mode .location-setting.location-selected span {
    filter: saturate(1.5) brightness(1.2);
}

html.dark-mode .location-setting.location-selected:hover .icon-padlock,
html.dark-mode .location-setting.location-selected:hover span {
    filter: saturate(0.8) brightness(1.3);
}

html.dark-mode .padlock-white {
    filter: invert(100%) invert(97%) sepia(3%) saturate(1122%) hue-rotate(165deg) brightness(89%) contrast(95%);
}

html.dark-mode .location-padlock {
    /* Fairly handy tool to calculate this https://codepen.io/sosuke/pen/Pjoqqp */
    filter: invert(57%) sepia(74%) saturate(2615%) hue-rotate(172deg) brightness(94%) contrast(96%);
}

html.dark-mode .inactive-tag {
    font-style: italic;
    color: var(--dark-mode-font-inactive-color) !important;
    text-decoration: line-through;
}

html.dark-mode .inactive-point {
    font-style: italic;
    color: var(--dark-mode-font-inactive-color) !important;
}

html.dark-mode .alert.active,
html.dark-mode .alert.inactive {
        background-color: #494949;
}

html.dark-mode div.zone-flush-list.inactive,
html.dark-mode span.report-modal-inclusions-value.inactive,
html.dark-mode .locationCheckbox .inactive {
    font-style: italic;
    color: var(--dark-mode-font-inactive-color);
}

html.dark-mode .event-details-attribute {
    background: inherit !important;
    background-blend-mode: inherit !important;
}

html.dark-mode .clickable.clickable-text:hover {
    color: var(--dark-mode-font-color);
    fill: var(--dark-mode-font-color);
    background-color: var(--dark-mode-highlight-bg-color);
}

html.dark-mode .hover-button-icon {
    fill: var(--dark-mode-font-inactive-color) !important;
}

html.dark-mode .disabled {
    font-style: italic;
    color: var(--dark-mode-font-disabled) !important;
}