.demonstrating-colors {
    background-color: rgb(6, 77, 116);
    /*Blue*/
    background-color: rgb(200, 37, 6);
    /*red*/
    background-color: rgb(244, 210, 62);
    /*orange*/
    background-color: rgb(238, 238, 238);
    /*grey for background*/
    background-color: rgb(221, 224, 226);
    /*lightblue for Alarm card*/
    background-color: rgb(203, 211, 215);
    /*lightblue for Locations card*/
    background-color: rgb(187, 198, 204);
    /*lightblue for Units card*/
    background-color: rgb(53, 114, 143);
    /*blue for Alarms header*/
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: scroll;
}

.navbar.navbarSdm,
.navbar.navbarSdm * {
    background-color: rgb(6, 77, 116);
    color: white;
}

.navbar.navbarSdm span.icon-bar {
    background-color: white;
    color: white;
}

.navbar.navbarSdm button,
.navbar.navbarSdm button:hover {
    border-color: transparent;
}

.navbar.navbarSdm button,
.navbar.navbarSdm button:after {
    border-color: transparent;

}

@media screen and (max-width:769px) {
    .navbar-header.pull-right {
        display: table !important;
    }
}

@media screen and (max-width: 768px) {


    body.with-navbar {
        padding-top: 20px !important;
    }
}


.footer {
    position: fixed;
    z-index: 100;
    height: 2em;
    font-size: x-small;
    color: grey;
    bottom: 0px;
    left: 0px;
    right: 0px;
    text-align: center;
    background-color: white;
}

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

[desktop-only] {
    display: none;
}

div[flex] {
    padding: 4px;
}

.border-bottom {
    border-bottom: 1px solid lightgrey;
}

.border-right {
    border-right: 1px solid lightgrey;
}

.small {
    font-size: 65%;
}


.large {
    font-size: 150%;
}

.label-as-badge {
    border-radius: 1em !important;
    position: absolute;
    top: 10px;
    right: 25px;
}

.sdm-list {
    border-top: 1px solid lightgrey;
    padding: 1em;
    margin-top: -0.1em;
}

.sdm-list.level2 {
    padding: 0 !important;
    border: none !important
}

.sdm-list.level1 {
    padding: 1em;
    border-color: transparent;
}



div[onclick]:hover {
    /*    outline: 1px solid orange;*/
}

.redtext {
    color: rgb(197, 40, 23);
    /*red*/
}

.with-header {
    padding-top: 70px;
}

.list-group {
    margin-bottom: 0px;
}

/* slide in from the right */
@keyframes slideOutLeft {
    to {
        transform: translateX(-100%);
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}



.roomBox {
    text-justify: distribute;
}

.unitBadge {
    display: inline-block;
    cursor: pointer;
    padding: 0.5em;
    margin: 0.2em;
    /*width:11em;*/
    vertical-align: middle;
    font-size: small;
}

.unitBadge * {

    vertical-align: middle;
}


.unitBadge.offlineUnit,
.onlineUnit,
.criticalAlarm,
.noncriticalAlarm {
    background-color: rgb(240, 242, 242);
    border-color: rgb(240, 242, 242);
    color: black;
}


.unitBadge.missingUnit {
    background-color: white;
    border: 1px solid lightgrey;
    color: rgb(160, 160, 160);
}

li.location-area-edit .close {
    float: none;
    font-size: 15px;
}

.alarm-wrapper.loading {
    cursor: progress; 
  }

.location-area-edit .mat-mdc-form-field-infix {
    padding: 4px !important;
}
.location-area-edit .mat-mdc-select-arrow svg {
    top: 10px;
}

span.position-edit .close {
    font-size: 13px;
    color: white;
    opacity: 1;
}

.form-control.show-border-on-hover:hover,
.form-control.show-border-on-hover:focus {
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

.form-control.show-border-on-hover {
    box-shadow: none;
    border: 0;
    border-radius: 4px;
}

.form-control.show-border-on-hover:disabled {
    background-color: white;
}

li {
    list-style-type: none;
}

md-dialog.md-transition-out {
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    -webkit-transform: translate3d(0, 100%, 0) scale(0.2);
    transform: translate3d(0, 100%, 0) scale(0.2);
}

/* Rules for sizing the icon. */
.material-icons.red {
    color: rgb(197, 40, 23);
    /*red*/
    vertical-align: middle;
    visibility: hidden;
}

.material-icons.critical {
    color: rgb(210, 40, 23);
    font-size: 3.5em !important;
    padding-bottom: 16px;
    padding-left: 0px;
}

.material-icons.noncritical {
    color: rgb(8, 78, 113);     
    font-size: 3em !important;
    padding-bottom: 16px;
    padding-left: 0px;
    top: 18px;
}

.material-icons.greenTickmark {
    color: rgb(111, 191, 64);
    font-size: 3.5em;
    padding-bottom: 16px;
    padding-left: 0px;
}

.material-icons.arrow {
    font-size: 1.3em;
    font-weight: bold;
}

.material-icons.done {
    font-size: 2em;
    color: rgb(53, 114, 143);
    margin-right: 100px;
}

.unitBadge:hover>.material-icons.red {
    visibility: visible;
}

.mainContainer {
    margin-bottom: 20px;
}

@media screen and (max-width:768px) {
    .mainContainer {
        margin-top: -20px;
    }
}

@media screen and (min-width:768px) {
    .mainContainer {
        margin-top: -17px;
    }
}

/******************** P101 Main view ******************/

.mainBox,
.mainBoxFlex {
    border-radius: 2px;
    border-top: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
    border-bottom: 1px solid rgb(175, 175, 175);
    border-left: 1px solid rgb(175, 175, 175);
    margin: 0 0.5em 0.5em 0.5em;
    padding: 0.5em;
    background-color: white;
    border-style: hidden;
}

.mainBox {
    height: auto;
    color: black;
    white-space: nowrap;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12) !important;
}

.offlineWarning {
    padding-left: 0.3em;
    margin-right: 0;
    padding-right: 0
}

.consumableDetailsTile {
    text-align: left;
    position: relative;
    vertical-align: middle
}

.unitDetailArrow {
    display: inline-block;
    border: none;
    background-color: white;
    width: 1em;
    background-color: rgb(242, 242, 242);
}

.mainBox h2 {
    background-color: transparent;
    color: inherit;
    font-size: 2em;
    padding: 0;
    margin: 0;

}

.mainBox table td:first-child {
    width: 10em;
}

.mainBox.mainAlarms {
    background-color: rgb(221, 224, 226);
}

.mainBox.mainUnits {
    background-color: rgb(187, 198, 204);
}

.pageWithMargin {
    padding: 0.5em;
    background-color: white;
}


@media screen and (max-width:768px) {
    .backCol {
        background-color: rgb(6, 77, 116);
    }

    .backColor {
        background-color: white;
    }
}

@media screen and (min-width:768px) {
    .backCol {
        background-color: rgb(53, 114, 143);
    }

    .backColor {
        background-color: rgb(217, 228, 235);
    }
}


.sdm-header {
    font-size: medium;
    color: white;
    height: 3em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.8em;
    margin-top: -20px;

}

.backCol {
    height: 2.8em !important;
}

@media screen and (min-width:992px) {
    .sdm-headerFix {
        font-size: medium;
        color: white;
        height: 3em;
        padding-left: 1em;
        padding-right: 1em;
        padding-top: 0.8em;
        z-index: 1;
    }
}

@media screen and (max-width:992px) {
    .sdm-headerFix {
        font-size: medium;
        color: white;
        height: 3em;
        padding-left: 1em;
        padding-right: 1em;
        padding-top: 0.8em;
        z-index: 1;
    }
}

@media screen and (max-width:992px) {

    .colPadding {
        width: 100%;
        z-index: 1020;
        padding-left: 0;
        position: fixed;
        height: 6em;
        padding-right: 0;
        margin-top: -1px;
    }

    .colPaddingU {
        width: 100%;
        z-index: 1020;
        padding-left: 0;
        padding-right: 0;
        position: fixed;
        height: 3em;
        margin-top: -1px;
    }
}

@media screen and (min-width:992px) {
    .colPadding {
        z-index: 1020;
        padding-left: 0;
        position: fixed;
        height: 6em;
    }

    .colPaddingU {
        z-index: 1020;
        padding-left: 0;
        position: fixed;
        height: 3em;
    }
}

.sdm-header i.material-icons {}

i.material-icons,
.sdm-headerFix.backCol mat-icon {
    vertical-align: middle;

}

.navbar {
    margin-bottom: 0px;
}

.mainBox.mainLocations {
    background-color: rgb(203, 211, 215);
}


.floatingBox div {
    display: inline-block;
    margin: 0;
    height: 100%;
    vertical-align: top;
    min-width: 45%;
}


.floatingBox h2 {
    background-color: transparent;
    color: inherit;
    font-size: 1.8em;
    font-weight: bold;
    padding: 0;
    margin: 0;
}

.floatingBox md-icon, 
.floatingBox mat-icon {
    display: inline !important;
    position: relative;
    padding-left: 0.5em;
    margin: 0;
    color: white;
    font-size: 3em;
    top: 22px;
}



.mainNumbers div {
    width: 11em;
    display: flex;
    padding-top: -0.5em;

}


.mainNumbers>div {}

.mainNumbers>div>span {
    font-size: 2em;
    padding-right: 2em;
    display: inline-block;
    width: 2.2em;

    vertical-align: bottom;
}

.mainNumbers .labelNum {
    display: inline-block;
    position: relative;
    width: 4em;
    text-align: right;
    font-size: 1.8em;
    padding-right: 0.8em;
}

.mainNumbers .labelGray {
    width: 8em;
    font-size: 1.2em;
    padding-top: 0.3em;
}

.mainNumbers .labelWhiteNonCritical {
    width: 8em;
    font-size: 1.2em;
    text-align: left;
    padding-top: 0.3em;
}

.mainNumbers .labelWhiteCritical {
    width: 8em;
    font-size: 1.2em;
    padding-top: 0.3em;
}

.mainNumbers .critical {
    color: rgb(210, 40, 23);
}

.sdm-header.alarmsHeader {
    background-color: rgb(197, 40, 23);
    color: white;
}

.noncriticalAlarmSymbol,
.criticalAlarmSymbol {
    font-size: 1em;
    display: inline-block;
}

.criticalAlarmSymbol {
    color: rgb(197, 40, 23);
    /*red*/
}

.noncriticalAlarmSymbol {
    color: rgb(244, 210, 62);
    /*orange*/
}

div.level2 h4,
div.level3 h4 {
    font-size: 70%;
}


/***************x-editable popover**************/
.item-wrapper a {
    /* make the link always show up */
    display: inline !important;
}

.item-wrapper {
    /* make absolutely positioned children constrained to this box*/
    position: relative;
}

.item-wrapper form {
    background: #FFF;
    border: 1px solid #AAA;
    border-radius: 5px;
    display: inline-block;
    left: 50%;

    /* half the width */
    margin-left: -110px;
    padding: 7px;
    position: absolute;
    top: -55px;
    /*width: 266px;*/
    z-index: 1040;
}


.item-wrapper form:before {
    content: "";
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #AAA;
    position: absolute;
    bottom: -10px;
    left: 100px;
}


.item-wrapper form:after {
    content: "";
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid #FFF;
    position: absolute;
    bottom: -9px;
    left: 101px;
}

.item-wrapper form .btn {
    padding: 4px 8px;
}

.item-wrapper form .btn i {
    vertical-align: middle;
}


/********************body custom class******************/
body.with-navbar {
    padding-top: 70px !important;
}


/********************toast notifications******************/
md-toast {
    z-index: 1040;
    position: fixed;
}


/*************************header layout fix**************/
.navbar-collapse.in,
.navbar-collapse.collapsing {
    clear: both;
    text-decoration-line: none;
}

@media screen and (min-width:992px) {
    .navbar-collapse.menu-list {
        height: 3.8em !important;
    }

}

.navbar-brand {
    height: 3.8em;
    overflow: hidden;
}

.navbar-email {
    max-width: 40%;
}

.navbar-email div {
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
    white-space: nowrap;
    max-width: 80%;
    float: left;
}

@media screen and (max-width: 768px) {
    .navbar-email {
        max-width: 100%;
        float: none;
    }
}


md-toast.md-error-toast-theme {
    /* outline: 1px solid red;*/
}


/***************filter panel****************/
.filter-collapse,
.orderby-collapse {
    position: absolute;
    z-index: 200;
}

.locationFilter {
    position: fixed !important;
}

@media screen and (max-width:992px) {
    .filter-panel {
        width: 100%;

        margin-right: 0;
        margin-top: -1px;
        padding: 0 15px;
        background-color: white;
        color: black;
        height: 22em;
        border: 1px solid transparent;
        -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.6);
        -webkit-box-shadow: 1px 7px 4px rgba(0, 0, 0, .5);
        box-shadow: 1px 7px 4px rgba(0, 0, 0, .5);
        z-index: 1020;
    }
}

@media screen and (min-width:992px) {
    .filter-panel {
        width: 100%;

        margin-right: 0;
        margin-top: -1px;
        padding: 0 15px;
        background-color: white;
        color: black;
        height: 22em;
        border: 1px solid transparent;
        -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.6);
        -webkit-box-shadow: 1px 7px 4px rgba(0, 0, 0, .5);
        box-shadow: 1px 7px 4px rgba(0, 0, 0, .5);
        z-index: 1020;
    }
}


.filter-bar {
    background-color: rgb(240, 242, 242);
    color: gray;
    height: 3em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.8em;
    vertical-align: central;
}


.filter-barFix {
    background-color: rgb(240, 242, 242);
    color: gray;
    height: 3em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.8em;
    vertical-align: central;
}


.filter-bar>div {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.filter-button.active {
    color: rgb(197, 40, 23);
    /*red*/
}


.filter-item {
    border: none;
    padding-bottom: 15px;
}

.filter-rule {
    float: none !important;
    display: inline-block;
    padding: 5px 14px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 15px !important;
    margin-right: 0.5em;
    margin-bottom: 0.5em;
}

.filter-rule.active {
    background-color: rgb(6, 77, 116);
    /*Blue*/
    color: white;

}

#overlay {
    position: fixed;
    top: 10em;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: #000;
    opacity: 0.3;
    filter: alpha(opacity=30);
    z-index: 1;

}

#overlay.alarmOverlay {
    top: 0 !important;
}

#overlayAnch {
    position: fixed;
    top: 10em;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: #000;
    opacity: 0.3;
    filter: alpha(opacity=30);
    z-index: 1;
    display: none;
}

div.elementOverlay {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: #ccc;
    opacity: 0.8;
    filter: alpha(opacity=80);
}

@media screen and (max-width:650px) {
    .mobile-only {
        display: block;
    }

    .desktop-only {
        display: none;
    }
}

@media screen and (min-width:651px) {
    .mobile-only {
        display: none;
    }

    .desktop-only {
        display: block;
    }
}

@media screen and (max-width:400px) {
    .detailsAlarmBox {
        display: inline-block;
        width: 70%;
        border: 0;
        padding: 1em 1em 1em 0;
        position: relative;
    }
}

@media screen and (min-width:400px) {
    .detailsAlarmBox {
        display: inline-block;
        width: 75%;
        border: 0;
        padding: 1em;
        position: relative;
    }
}


.detailsTimeBox {
    width: 3em;
    white-space: nowrap;
    vertical-align: top;
    padding-right: 1em;
    padding-top: 1em;
    text-align: right;
}

.detailsTimeBox div {
    display: inline-block;
}

.detailsAlarmCritical,
.detailsAlarmNoncritical {
    display: inline-block;
    height: 3em;
    width: 100%;
    border-bottom: 1px solid lightgrey;
    padding: 1em;
    padding-top: 0em;
    margin-top: -0.1em;
}

.detailsAlarmNoncritical {
    border-top: 1px solid lightgrey;
}

.detailsAlarmCritical div {
    color: black;
    vertical-align: top;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
    font-size: medium;
}

.detailsAlarmNoncritical div {
    color: black;
    vertical-align: top;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
    font-size: medium;
}

.detailsAlarmSymbol {
    display: inline-block;
    margin-top: -0.8em;
    position: relative;
    vertical-align: middle;
    padding: 1em;
}

.detailsAlarmPadding {
    padding: 0;
    padding-left: 1em;
    border: hidden;
    overflow: hidden;
}

.unitBadgeSymbol {
    display: inline-block;
    width: 15%;
    text-align: right;
}

.material-icons.criticalAlarmSymbol {
    display: inline-block;
    vertical-align: middle;
    color: rgb(197, 40, 23);
    font-size: 2em;
    padding: 0;
}

.material-icons.noncriticalAlarmSymbol {
    display: inline-block;
    vertical-align: middle;
    color: rgb(244, 210, 62);
    font-size: 2em;
    padding: 0;
}

.material-icons.offlineUnitSymbol {
    display: inline-block;
    vertical-align: middle;
    padding: 0.2em;
    color: rgb(197, 40, 23);
    font-size: 1.5em;
}

.material-icons.onlineUnitSymbol {
    display: inline-block;
    vertical-align: middle;
    padding: 0.2em;
    color: green;
    font-size: 1.5em;
}

.material-icons.missingUnitSymbol {
    display: inline-block;
    vertical-align: middle;
    padding: 0.2em;
    color: lightgray;
    font-size: 1em;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: local('Roboto Regular'), local('Roboto-Regular'), url(https://themes.googleusercontent.com/static/fonts/roboto/v8/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 800;
    src: local('Roboto Bold'), local('Roboto-Bold'), url(https://themes.googleusercontent.com/static/fonts/roboto/v8/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

.floorStyle {
    height: 48px;
    position: relative;
    vertical-align: middle;
    padding-top: 1em;
    font-weight: bold;
    padding-left: 35px;
}

.locationRoomStyle {
    font-size: 1.2em;
    height: 48px;
    position: relative;
    vertical-align: middle;
    padding-top: 0.7em;
    font-weight: bold;
    padding-left: 14px;
    background-color: #F3F3F3;
    border-bottom: 1px solid #E2E2E2;
    border-top: 1px solid #9B9B9B;
}

.clearFilter {
    color: lightgray;
    font-size: 14px;
}

.clearFilter.active {
    color: rgb(8, 78, 113)
}

.clearFilter:focus {
    text-decoration: none;
}

.clearFilterWrap.notActive {
    pointer-events: none;
    cursor: pointer;
}

.noFilter {
    color: lightgray;
}

@media screen and (max-width: 767px) {
    .bord {
        background-color: white;
        color: black;
        position: relative;
        padding: 1em;
    }

    .bord:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        bottom: 0;
        right: 0;
        left: 2em;
        border-bottom: 1px solid lightgray;
    }

    .bord1 {
        background-color: white;
        color: black;
        position: relative;
        padding: 1em;
    }

    .bord1:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        bottom: 0;
        right: 0;
        left: 1em;
        border-bottom: 1px solid lightgray;
    }

    .boxshadow {

        background-color: white;
        -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
        -webkit-box-shadow: 1px 5px 4px rgba(0, 0, 0, .5);
        box-shadow: 1px 5px 4px rgba(0, 0, 0, .5);
        padding: 10px;
    }

    .go-right {}

    .menu-list {
        background-color: white !important;
        color: black !important;
        border: none !important;
    }

}

.menu-list-login {
    background-color: white !important;
    color: black !important;
    border: none !important;
}

.menu-list-bord {
    background-color: white !important;
    color: black !important;
}

.menu-list-bord-logout {
    background-color: white !important;
    color: rgb(15, 108, 188) !important;
}

.menu-list-bord-logout:active {
    text-decoration: none !important;
}

@media screen and (min-width: 768px) {
    .bord {}

    .bord::after {}

    .boxshadow {}

    .go-right {
        position: relative;

        display: inline-block;
        text-align: right;
    }

    .menu-list {
        background-color: rgb(6, 77, 116) !important;
        color: white !important;
        border: none !important;
    }

}


#dropdown-background {
    background-color: white;
    color: black;
    border: none;

}

div .auth0-lock.auth0-lock .auth0-lock-header-bg {
    background-color: rgb(6, 77, 116) !important;
}

.auth0-lock.auth0-lock.auth0-lock-opened .auth0-lock-header-bg .auth0-lock-header-bg-blur {
    opacity: 0 !important;
}

.auth0-lock.auth0-lock .auth0-lock-name {
    display: none !important;
}

.auth0-lock.auth0-lock .auth0-lock-header-logo {
    height: 40px !important;
    padding-top: 1.4em;
}

.auth0-lock.auth0-lock .auth0-lock-submit {
    text-indent: 0 !important;
    background-color: rgb(170, 170, 170) !important;
    width: 50% !important;
    height: 3em !important;
    font-weight: 400 !important;
    margin: 0 0 2em 1.5em !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.auth0-lock.auth0-lock .auth0-lock-submit span svg.icon-text {
    display: none !important;
}

#a0-lock.a0-theme-default .a0-panel {
    margin-left: auto;
    margin-right: auto;
}

div #a0-lock.a0-theme-default .a0-panel .a0-top-header {
    background-color: rgb(6, 77, 116) !important;
}

#a0-lock.a0-theme-default .a0-panel .a0-bg-gradient {
    background-color: rgb(6, 77, 116) !important;
}

body #a0-lock.a0-theme-default .a0-panel button.a0-primary::after {
    background-image: none !important;
    color: white !important;
    display: inline-block !important;
    vertical-align: middle;
    line-height: initial !important;
    font-weight: 400 !important;
    padding-bottom: 1em !important;
}


#a0-lock.a0-theme-default .a0-panel .a0-top-header h1 {
    text-indent: 0 !important;
    font-size: 1em !important;
    color: white !important;
    margin-top: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative !important;
    text-align: left !important;
}

i a0-icon-budicon-5::before {
    display: none;
    visibility: hidden !important;
}

i a0-icon-budicon-1::before {
    display: none;
    visibility: hidden !important;
}


#a0-lock.a0-theme-default .a0-panel .a0-email .a0-input-box,
#a0-lock.a0-theme-default .a0-panel .a0-password .a0-input-box {
    text-indent: 0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: solid lightgray !important;
    padding-left: 0 !important;
    background-color: rgb(238, 238, 238) !important;
}



#a0-lock.a0-theme-default .a0-panel .a0-email .a0-input-box .a0-icon-budicon-5::before {
    visibility: hidden !important;
}

#a0-lock.a0-theme-default .a0-panel .a0-email .a0-input-box .a0-icon-budicon-1::before {
    visibility: hidden !important;
}

#a0-lock.a0-theme-default .a0-icon-budicon:before {
    visibility: hidden !important;
}

#a0-lock.a0-theme-default .a0-panel .a0-icon-container .a0-image {
    position: relative !important;
    text-align: left !important;
}

#a0-lock.a0-theme-default .a0-panel .a0-icon-container .a0-image img.a0-avatar-guest {
    display: none;
}

#a0-lock.a0-theme-default .a0-panel .a0-icon-container .a0-image:before {
    display: inline-block;
    width: 15em;
    height: 2.5em;
    margin-left: 1em;
    background-size: 15em 2.5em;
    background-image: url("../images/scanbur_logo.png");
    content: '';
}

#a0-lock.a0-theme-default .a0-btn-small.a0-back {
    right: 14px !important;
    left: auto !important;
}

#a0-lock.a0-theme-default .a0-panel .a0-mode form .a0-body-content {
    padding: 1em !important;

}

#a0-lock.a0-theme-default .a0-panel .a0-icon-container .a0-image img {
    content: attr(url("../../images/scanbur_logo.png"));
}


.imageLogo {
    display: inline-block;
    vertical-align: top;
    padding-top: 0.5em;
    width: 15em;
    height: auto;
}

/*delete frame around any pressed button*/
*:focus {
    outline: 0 !important;
}

filter-button:focus {
    outline: 0 !important;
}

.biggerActiveButtonArea {
    display: inline-block;
    position: relative;
    z-index: 1;
    padding: 1em 0.8em 0.7em 2em;
    margin: -2em;
}

.biggerActiveFilterArea {
    display: inline-block;
    max-width: 75%;
    position: relative;
    vertical-align: middle;
    text-overflow: ellipsis;
    z-index: 1;
    padding: 0.5em 0.8em 0.7em 2em;
    margin: -2em;
}

.biggerActiveSortArea {
    display: inline-block;
    position: relative;
    width: auto;
    vertical-align: middle;
    text-overflow: ellipsis;
    z-index: 1;
    padding: 0.5em 0.8em 0.7em 2em;
    margin: -2em;
}


.closed {
    -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.opened {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

@media screen and (max-width:420px) {
    .ellipsis {
        display: inline-block;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        overflow: hidden;
        max-width: 70%;
    }
}

.ellipsis2 {

    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
}

@media screen and (min-width:420px) {
    .ellipsis {
        display: inline-block;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        overflow: hidden;
        max-width: 90%;
    }
}

.ellipsisLocName {
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    max-width: 80%;
}

.bordAlarms {
    position: relative;
}

.bordAlarms:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    right: 0;
    left: 4em;
    border-bottom: 1px solid lightgray;
}

.bordCriticalAlarms:after {
    bottom: 1px;
}

.bordLocUnitAnch {
    position: relative;
    font-weight: bold;
}

.bordLocUnitAnch:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    right: 0;
    left: 3.6em;
    border-bottom: 1px solid rgb(237, 238, 239);
}

.bordLocUnitAnch1 {
    position: relative;
}

.bordLocUnitAnch1:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    right: 0;
    left: 0.8em;
    border-bottom: 1px solid rgb(237, 238, 239);
}

.bordLocUnitAnch1.siteLevelBord:after {
    left: 0em;
}

.locationLevel {
    position: relative;
}

.locationLevel:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    right: 0;
    left: 4.5em;
    border-bottom: 2px solid lightgray;
}

.yellowBorder {
    border-top-color: rgb(247, 219, 84);
}


@media (max-width:69.5em) and (min-width:768px) {
    .wideDropdown {
        padding-right: 1em;
    }
}

@media (max-width:69.5em) {
    .navbar-header.pull-left {
        padding-left: 0.7em;
    }
}

@media (min-width: 69.5em) {
    #main {
        width: 78em !important;
        margin: auto;

    }
}

@media (max-width: 69.5em) {
    #main {
        width: 100%;
    }

}

@media screen and (min-width:767px) {
    .showTriangle {
        display: none;
    }
}

@media screen and (max-width:767px) {
    .showTriangle {
        display: inline-block;
    }
}

html {
    margin: 0px;
    height: 100%;
    width: 100%;
}

.editLocName, .editSiteName {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 4em;
    border: 1px solid rgb(237, 238, 239);
    padding: 0.85em;
    vertical-align: middle;
    margin: 0.25em;
}

.editLocName:hover, .editSiteName:hover {
    cursor: pointer;
    border-color: rgb(53, 114, 143);
}

.editLocName.item-wrapper.editLocNameText {
    display: inline-block;
    position: relative;
    padding-bottom: 1em;
    margin-left: -0.3em;
}

.editSiteName {
    display: flex;
    align-items: center;
  }
  
  .editSiteName > span[type="button"] {
    flex: 0 0 auto;
  }
  
  .editSiteName .site-item-wrapper {
    flex: 1 1 auto; 
    display: flex;
    align-items: center;
    font-size: 1.2em;
    font-weight: bolder;
    color: black;
  }
  
  .editSiteName .pull-right {
    flex: 0 0 auto; 
    margin-left: auto;
  }


.locUnitAnchName {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 1.10em 0.5em 1.10em 0.35em;
    vertical-align: middle;

    border: 0;
}

.editLocRoom {
    border: 1px solid rgb(237, 238, 239);
    position: relative;
    display: inline-block;
    width: 100%;
    height: 3.5em;
    padding: 1em;
    vertical-align: middle;
    margin: 0.25em;
}

.editLocRoom.item-wrapper.iconAppears:hover {
    cursor: pointer;
    border: 1px solid rgb(53, 114, 143);

}

.editLocRoom.item-wrapper.iconAppears:hover .addIcon {
    display: inline-block;
    position: relative;
    padding-bottom: 0.2em;
    color: rgb(4, 77, 116);
}

.editLocName.item-wrapper:hover .addIcon {
    display: inline-block;
    position: relative;

    color: rgb(4, 77, 116);
}

.iconAppears .closeIcon,
.penIcon,
.addIcon {
    color: transparent;
}

.iconAppears:hover .closeIcon {
    color: rgb(4, 77, 116);
}

.iconAppears:hover .changeIcon.closeIcon {
    color: transparent !important;
    cursor: default;
}

.iconAppears:hover .unitIcon {
    display: none;
}

.iconAppears:hover .changeIcon.unitIcon {
    display: inline-block;
}

.iconAppears:hover .penIcon {
    color: rgb(4, 77, 116);
}

.unitBadge.missingUnit.item-wrapper:hover .addIcon {
    display: inline-block;
    color: rgb(4, 77, 116);
    padding-left: 0.2em;
}

.pageWithMargin .noIcon .locUnitAnchName {
    border: none;
    padding: 0.5em 0.8em;
    height: 2.5em;
}

.pageWithMargin .bordLocUnitAnch1 {
    padding-bottom: 1em;
}

.pageWithMargin>ul>li>ul>li>div>div>div {
    display: inline-block;
}

.pageWithMargin>ul>li>span,
.pageWithMargin .locUnitAnchName.bordLocUnitAnch {
    font-weight: bold;
    font-size: 1.2em;
}

.pageWithMargin .roomBox .unitBadge,
.pageWithoutLeftMargin .roomBox .unitBadge {
    display: inline-block;
    border: 1px solid rgb(237, 238, 239);
    width: 100%;
    height: 100%;
}

.pageWithMargin>ul>li>ul>li>.bordLocUnitAnch:after {
    border: none;
}

.pageWithMargin .noIcon .locUnitAnchName .roundIcon {
    display: none;
    padding: 0;
    height: 0;
}

.roundIcon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    font-weight: normal;
    font-size: 1.25em;
    margin-right: 0.85em;
    vertical-align: middle;
    border-radius: 1em;
    background-color: grey;
    color: white;
    text-align: center;
}

.green {
    color: rgb(112, 191, 65);
    padding-left: 0.2em;
}

.yellow {
    color: rgb(245, 211, 40);
    padding-left: 0.2em;
}

.noUnit {
    color: lightgray;
    position: relative;
    right: -0.2em;
}

.unitBadge .material-icons.noAnchor {
    font-size: 1em;
    padding-left: 1em;
    padding-top: 0.3em;
}

.unitBadge i .del {
    color: transparent;
    font-size: 1.5em;
}

.unitBadge i:hover .del {
    color: lightgray;
    font-size: 1em;
}

.unitBadge.missingUnit.item-wrapper.addRoom {
    border: 1px dotted rgb(237, 238, 239)
}

.unitBadge.item-wrapper.iconAppears.roomB.penIcon {
    display: none;
}

.unitBadge.item-wrapper.iconAppears.roomB:hover .penIcon {
    color: rgb(4, 77, 116);
}

.unitBadge.missingUnit.item-wrapper .iconHover {
    display: none;
}

.unitBadge.missingUnit.item-wrapper:hover .iconHover {
    display: inline-block;
    color: rgb(4, 77, 116);
    padding-left: 0.2em;
}

.unitBadge.missingUnit.item-wrapper:hover .iconHover.changeIcon {
    display: none !important;
}

.unitBadge.missingUnit.item-wrapper {
    border: 1px dotted rgb(237, 238, 239);
}

.unitBadge.missingUnit.item-wrapper:hover {
    border: 1px solid rgb(53, 114, 143);
}

.readMode.unitBadge.missingUnit.item-wrapper {
    border: 1px dotted rgb(237, 238, 239);
    pointer-events: none !important;
}

.unitBadge.missingUnit.item-wrapper.addRoom:hover {
    border: 1px solid rgb(53, 114, 143);
}

.unitBadge.item-wrapper.iconAppears.roomB {
    border: 1px solid rgb(237, 238, 239);
    color: rgb(83, 88, 95);
    padding-right: 1em;
    margin-top: 0.2em;

}

.infoIcon {
    color: rgb(210, 40, 23) !important;
}

.infoSuccess {
    color: green !important;
}

.unitBadge.item-wrapper.iconAppears.roomB:hover {
    border-color: rgb(53, 114, 143);
}

.unitBadge.missingUnit.item-wrapper:hover .noAnchor {
    display: none;
}

.readMode.unitBadge.missingUnit.item-wrapper:hover .noAnchor {
    display: inline-block !important;
}

.unitBadge .addAnchorAndUnit {
    display: none;
}

.unitBadge:hover .noAnchorAndUnit {
    display: none;
}

.readMode.unitBadge:hover .noAnchorAndUnit {
    display: inline-block !important;
}

.unitBadge:hover .addAnchorAndUnit {
    display: inline-block;
    line-height: 1.35;
}

.readMode.unitBadge:hover .addAnchorAndUnit {
    display: none !important;
}

.noUSBcode {
    color: rgb(176, 171, 181);
}

.md-dialog-container {
    position: fixed !important;
    z-index: 1000000 !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background-color: transparent !important;
    height: 100% !important;
}

.md-scroll-mask {
    background-color: transparent !important;
    height: 100%;
}

.mat-mdc-card.mdc-card.userPreferences {
    display: inline-block;
    padding: 1em;
    background-color: rgb(242, 242, 242);
    height: 100%;
    width: 100%;
    padding: 0;
}
.unitsWithoutPos .userPreferences .mat-mdc-card-content {
    padding: 0;
    font-size: 14px;
}
.userPreferences mat-list-item span {
    font-size: 14px;
}

.userPreferences .mdc-list-item.mdc-list-item--with-one-line {
    height: 27px;
}
.userPreferences .title {
    padding-bottom:1em; 
    border-bottom:3px solid rgb(227, 229, 230);
    padding-left: 1em;
    margin-bottom:0;
}

.notificationPref {
    display: inline-block;
    padding: 2em 2em 0 0em;
    height: 100%;
    margin-bottom: -5px;
}

.unitsWithoutPos {
    display: inline-block;
    position: relative;
    vertical-align: top;
    height: 100%;
    width: 33%;
}

@media screen and (min-width:768px) {
    .unitsWithoutPos {
        display: inline-block;
        position: relative;
        vertical-align: top;
        height: 100%;
        width: 33%;
        padding: 1.5em;
    }
}

@media screen and (max-width:768px) and (min-width:480px) {
    .unitsWithoutPos {
        display: inline-block;
        position: relative;
        vertical-align: top;
        height: 100%;
        width: 48%;
        padding: 1.5em;
    }
}

@media screen and (max-width:480px) {
    .unitsWithoutPos {
        display: inline-block;
        position: relative;
        vertical-align: top;
        height: 100%;
        width: 95%;
        padding: 1.5em;
    }
}

.unitsWithoutPosTitle {
    line-height: 1.35;
    position: relative;
    padding-right: 2em;
    font-weight: bold;
    color: rgb(92, 88, 95);
}

.mat-mdc-card.mdc-card.userPreferences>div>div>ul {
    padding-left: 0;
}

.userPreferencesPage {
    background-color: white;
    position: relative;
    height: 100%;
    padding-bottom: 1em;
}

.phoneNum {
    outline: none;
    border: none;
    border-bottom: 1px solid rgb(224, 226, 227);
}

md-checkbox.md-checked.gray .md-icon {
    background-color: gray;
    border-color: transparent;
}

md-checkbox.md-checked.gray .md-icon::after {
    transition: none;

}

@media screen and (min-width:768px) {
    .wideDropdown {
        display: block;
    }

    .narrowDropdown {
        display: none !important;
    }
}

@media screen and (max-width:767px) {
    .wideDropdown {
        display: none !important;
    }

    .narrowDropdown {
        display: block;
    }
}

.fieldNoBord {
    outline: none;
    border: none;
    border-bottom: 1px solid rgb(224, 226, 227);
    min-width: 60%;
}

select:disabled {
    background-color: rgb(238, 238, 235);
}

.md-button.md-primary.md-raised,
.mdc-button.mat-mdc-button-base.mdc-button--raised.mat-mdc-raised-button.mat-primary,
.mdc-button--raised.mat-mdc-raised-button,
.mdc-button.mat-mdc-button-base.mdc-button--raised {
    background-color: rgb(53, 114, 143) !important;
    padding: 0 1em;
    min-width: 2em !important;
    text-transform: uppercase !important;
    color: white !important;
}

.mdc-button.mat-mdc-button-base {
    text-transform: uppercase !important;
}

.md-button.md-raised.md-primary:not([disabled]):hover,
.md-button.md-raised.md-primary:not([disabled]):focus,
.md-button.md-raised.md-primary:not([disabled]):hover,
.md-button.md-raised.md-primary:not([disabled]):focus,
.mdc-button.mat-mdc-button-base.mdc-button--raised.mat-mdc-raised-button.mat-primary:not([disabled]):hover,
.mdc-button.mat-mdc-button-base.mdc-button--raised.mat-mdc-raised-button.mat-primary:not([disabled]):focus,
.mdc-button.mat-mdc-button-base.mdc-button--raised.mat-mdc-raised-button.mat-primary:not([disabled]):hover,
.mdc-button.mat-mdc-button-base.mdc-button--raised.mat-mdc-raised-button.mat-primary:not([disabled]):focus {
    background-color: rgb(53, 114, 143);
    color: white;
}

.md-button.md-primary.button:not([disabled]):hover,
.md-button.md-primary.button:not([disabled]):focus,
.md-button.md-primary.button:not([disabled]):hover,
.md-button.md-primary.button:not([disabled]):focus {
    background-color: rgb(221, 221, 221) !important;
}

.md-button.md-primary.button:not([disabled])::selection {
    background-color: rgb(204, 204, 204) !important;
}

label {
    font-weight: normal;
}

.col-sm-10 {
    margin-top: 0.2em;
}

@media only screen and (min-width:650px) {
    .userDetailResponsiveFirst {
        display: inline-block;
        position: relative;
        vertical-align: top;
        padding: 2em 1em 2em 2em;
        width: 54%;
        min-width: 20em;
    }

    .userDetailResponsiveSecond {
        width: 45%;
        min-width: 20em;
    }
}

@media only screen and (max-width: 650px) {
    .userDetailResponsiveFirst {
        display: inline-block;
        position: relative;
        vertical-align: top;
        padding: 2em 0 0 2em;

        min-width: 25em;
    }

    .userDetailResponsiveSecond {
        width: 20em;

    }
}

.md-padding.errorResponsiveSecond.errorList {
    padding-top: 5px;
}


@media screen and (min-width:43em) {
    .errorResponsiveSecond {
        position: relative;
        padding-left: 0.5em;
        width: 22em;
        margin-right: 1em;
        float: right;
        overflow: hidden;
    }

    .graphResponsiveFirst {
        display: inline-block !important;
        position: relative !important;
        vertical-align: top !important;
        padding: 1em 0.5em 2em 0 !important;
        width: calc(100% - 23em);
        min-width: 24em;
    }

    .setPad {
        padding-right: 0.7em;
        font-size: 1.3em;
    }

    .errorList {
        position: relative;
        display: inline-block;
        padding: 1em 0 0 0em;
        height: 100%;
        margin-bottom: -5px;
    }

}

@media screen and (max-width:43em) {
    .errorResponsiveSecond {
        padding-left: 0.5em;
        width: 100%;
        margin-right: 1em;
        overflow: hidden;
    }

    .graphResponsiveFirst {
        display: inline-block !important;
        position: relative !important;
        vertical-align: top !important;
        padding: 1em 0.1em 2em 0 !important;
        width: 100%;
    }

    .col-md-12.text-center {
        padding-right: 0 !important;
    }

    .setPad {
        padding-right: 0;
        font-size: 1.3em;
    }

    .errorList {
        display: inline-block;
        padding: 0 0.5em 0 0em;
        height: 100%;
        margin-bottom: -5px;
    }

}

.col-md-12.text-center {
    padding-left: 0.8em !important;
}

md-content {
    overflow: hidden;
}



input.ng-invalid.ng-not-empty {
    border: solid 1px red;
}

.alertBox {
    background-color: rgb(242, 242, 242) !important;
    margin-bottom: 0 !important;
    border: 0 !important;
    color: rgb(83, 88, 96) !important;
}

.labelDanger {
    background-color: transparent;
    position: relative;
    vertical-align: middle;
    font-weight: bold;
    font-size: 1em;
}

.errorDetail {
    font-size: 90%;
}

.errorListBox {
    background-color: white;
}

.errorCrit-collapse,
errorNonCrit-collapse,
dismiss-collapse,
.menu-collapse,
.showMore-collapse {

    z-index: 200;
}

.showMoreError {
    height: 12em;
}

table>.unitDetailTable>tr>td {
    padding: 5px;
}

.errorListBox>ul {
    padding-left: 0;
}

.material-icons.redIcon {
    color: rgb(197, 40, 23);
}

.material-icons.yellowIcon {
    color: rgb(244, 210, 62);
}

.material-icons.grayIcon {
    color: rgb(200, 200, 200);
}

.errorSeparator {
    border-top: 1px solid rgb(200, 200, 200);
    padding: 1em;
}


.alarmVisible {
    width: 100%;
    background-color: rgb(242, 242, 242) !important;
    margin: 16px 8px !important;
}

.alarmHidden {
    display: none !important;
}

@media screen and (min-width:730px) {
    .showUnitDetail {
        display: block;
    }

    .showUnitDetailSmall {
        display: none;
    }
}

@media screen and (max-width:730px) {
    .showUnitDetail {
        display: none;
    }

    .showUnitDetailSmall {
        display: block;
    }

}

.editable-click,
a.editable-click {
    border-bottom: none !important;
}

.unitsWithoutPos .userPreferences .mat-mdc-card-header {
    border-bottom: 1px solid rgb(227, 229, 230);
}
.mat-mdc-card-title.unitLocAnchCards {
    padding-bottom: 1em;
    padding-left: 1em;
    
    margin: 0 -0.85em;
    font-size: 16px;
    font-weight: bold;
}

.roomBoxPos {
    display: inline-block;
    height: 4em;
    padding: 0.25em 0 0.25em 0.5em;
    position: relative;
    left: 2px
}

@media screen and (min-width:768px) {
    .positionBox {
        display: inline-block;
        width: 25%;
        height: 5.8em;
        padding: 0.25em 0 0.25em 0.5em;
        position: relative;
        left: 2px
    }
}

@media screen and (max-width:768px) and (min-width:620px) {
    .positionBox {
        display: inline-block;
        width: 33.3333333%;
        height: 6em;
        padding: 0.25em 0 0.25em 0.5em;
        position: relative;
        left: 2px
    }
}

@media screen and (max-width:620px) and (min-width:450px) {
    .positionBox {
        display: inline-block;
        width: 50%;
        height: 6em;
        padding: 0.25em 0 0.25em 0.5em;
        position: relative;
        left: 2px
    }
}

@media (max-width:450px) {
    .positionBox {
        display: inline-block;
        width: 100%;
        height: 6em;
        padding: 0.25em 0 0.25em 0.5em;
        position: relative;
        left: 2px
    }
}

.positionBox .editable-input.editable-has-buttons {
    max-width: 250px !important;
}

@media (min-width:768px) {
    .positionDetail.item-wrapper form {
        margin-left: -190px;
    }

    .roomBoxPos.boxWidth:nth-child(4n+1) .positionDetail.item-wrapper form,
    .roomBoxPos.boxWidth:nth-child(4n+1) .positionDetailAdd.item-wrapper form,
    .positionBox:nth-child(4n+1) .missingUnit.item-wrapper form {
        margin-left: -150px !important;
    }

    .roomBoxPos.boxWidth:nth-child(4n+0) .positionDetail.item-wrapper form,
    .roomBoxPos.boxWidth:nth-child(4n+0) .positionDetailAdd.item-wrapper form,
    .positionBox:nth-child(4n+0) .missingUnit.item-wrapper form {
        margin-left: -250px !important;
    }

    .roomBoxPos.boxWidth:nth-child(4n+0) .positionDetail.item-wrapper form:before,
    .roomBoxPos.boxWidth:nth-child(4n+0) .positionDetailAdd.item-wrapper form:before,
    .positionBox:nth-child(4n+0) .missingUnit.item-wrapper form:before {
        left: 230px !important;
    }

    .roomBoxPos.boxWidth:nth-child(4n+0) .positionDetail.item-wrapper form:after,
    .roomBoxPos.boxWidth:nth-child(4n+0) .positionDetailAdd.item-wrapper form:after,
    .positionBox:nth-child(4n+0) .missingUnit.item-wrapper form:after {
        left: 231px !important;
    }
}

@media (max-width:768px) and (min-width:640px) {
    .boxWidth {
        width: 33.3333333%;
    }

    .roomBoxPos.boxWidth:nth-child(3n+0) .positionDetail.item-wrapper form,
    .roomBoxPos.boxWidth:nth-child(3n+0) .positionDetailAdd.item-wrapper form,
    .positionBox:nth-child(3n+0) .missingUnit.item-wrapper form {
        margin-left: -210px !important;
    }

    .roomBoxPos.boxWidth:nth-child(3n+1) .positionDetail.item-wrapper form,
    .roomBoxPos.boxWidth:nth-child(3n+1) .positionDetailAdd.item-wrapper form,
    .positionBox:nth-child(3n+1) .missingUnit.item-wrapper form {
        margin-left: -150px !important;
    }

    .positionDetail.item-wrapper form:before,
    .positionDetailAdd.item-wrapper form:before,
    .missingUnit.item-wrapper form:before {
        left: 150px !important;
    }

    .positionDetail.item-wrapper form:after,
    .positionDetailAdd.item-wrapper form:after,
    .missingUnit.item-wrapper form:after {
        left: 151px !important;
    }
}

@media (max-width:639.999999px) and (min-width:450px) {
    .boxWidth {
        width: 50%;
    }

    .roomBoxPos.boxWidth:nth-child(even) .positionDetail.item-wrapper form,
    .roomBoxPos.boxWidth:nth-child(even) .positionDetailAdd.item-wrapper form,
    .positionBox:nth-child(even) .missingUnit.item-wrapper form {
        margin-left: -212px !important;
    }

    .roomBoxPos.boxWidth:nth-child(odd) .positionDetail.item-wrapper form,
    .roomBoxPos.boxWidth:nth-child(odd) .positionDetailAdd.item-wrapper form,
    .positionBox:nth-child(odd) .missingUnit.item-wrapper form {
        margin-left: -150px !important;
    }

    .positionDetail.item-wrapper form:before,
    .missingUnit.item-wrapper form:before,
    .positionDetailAdd.item-wrapper form:before {
        left: 150px !important;
    }

    .positionDetail.item-wrapper form:after,
    .missingUnit.item-wrapper form:after,
    .positionDetailAdd.item-wrapper form:after {
        left: 151px !important;
    }
}

@media (max-width:450px) {
    .boxWidth {
        width: 100%;
    }

    .editLocRoom.item-wrapper form {
        margin-left: -180px !important;
    }

    .positionDetail.item-wrapper form,
    .missingUnit.item-wrapper form {
        margin-left: -180px !important;
    }

    .positionDetailAdd.item-wrapper form,
    .missingUnit.item-wrapper form {
        margin-left: -180px !important;
    }

    .positionBox .editable-input.editable-has-buttons {
        max-width: 220px !important;
    }
}

@media (min-width:767.99999px) {
    .boxWidth {
        width: 25%;
    }
}

.positionDetail {
    border: 1px solid rgb(237, 238, 239);
    color: rgb(83, 88, 95);
    width: 100%;
    height: 100%;
    padding: 1em;
}

.positionDetailAdd {
    border: 1px dotted rgb(237, 238, 239);
    color: rgb(83, 88, 95);
    width: 100%;
    height: 100%;
    padding: 1em;
}

.positionDetailAdd.moveIcon {
    font-size: 2em;
    position: relative;
    vertical-align: middle;
    padding-bottom: 0.3em;
}

.positionDetail.item-wrapper.iconAppears:hover {
    cursor: pointer;
    border: 1px solid rgb(53, 114, 143);
}

.positionDetailAdd.item-wrapper.iconAppears:hover {
    cursor: pointer;
    border: 1px solid rgb(53, 114, 143);
}

.unitBadge.iconAppears:hover {
    border: 1px solid rgb(53, 114, 143);
}

.readMode.unitBadge.iconAppears:hover,
.operatorMode.unitBadge.iconAppears:hover {
    border: 1px solid rgb(237, 238, 239) !important;
    cursor: default;
}


.btn.btn-primary.plotPeriodBtn {
    padding: 0.5em;
    background-color: rgb(220, 222, 224);
    color: rgb(172, 170, 170);
    border: none;
    border-radius: 1px;
    width: 4.5em;
}

.btn-primary.plotPeriodBtn:active,
.btn-primary.plotPeriodBtn.active,
.open>.dropdown-toggle.btn-primary {
    background-color: rgb(166, 170, 169) !important;
    color: rgb(87, 88, 95) !important;
}

.pos {
    position: relative;
    margin-left: 4px !important;
}

.posAuto {
    position: relative;
}

.mar {
    position: relative;
    margin-top: 1.5em;
}

.noMar {
    position: relative;
    margin-top: 0;
}

@media screen and (min-width:43em) {
    .showDataWide {
        display: block;
        padding-top: 1em;
    }

    .showDataNarrow {
        display: none;
    }

}

@media screen and (max-width:43em) {
    .showDataWide {
        display: none;
    }

    .showDataNarrow {
        display: block;
        margin-top: 1.5em;
    }
}

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

.highlighter {
    display: block;
    padding: 0.5em;
    background-color: white;
    position: relative;
    z-index: 50;
    font-size: 1.5em;
    border-radius: 3px;
    border: 1px solid rgb(227, 229, 230);
}


@keyframes my_animation {
    from {
        max-height: 10em;
        opacity: 1;


    }

    to {
        max-height: 0;
        opacity: 0;

    }
}

@-webkit-keyframes my_animation {
    from {
        max-height: 100%;
        opacity: 1;

    }

    to {
        max-height: 0;
        opacity: 0;

    }
}

@-moz-keyframes my_animation {
    from {
        max-height: 100%;
        opacity: 1;

    }

    to {
        max-height: 0;
        opacity: 0;

    }
}

@-o-keyframes my_animation {
    from {
        max-height: 100%;
        opacity: 1;
        top: 100%;
    }

    to {
        max-height: 0;
        opacity: 0;
        top: -100%;
    }
}

.delAnimation,
.showMoreBorder {
    border-top: 1px solid rgb(200, 200, 200);
    padding: 1em;
}

.delAnimationShowMore {
    padding: 1em;
}


.delAnimation.ng-leave,
delAnimationShowMore.ng-leave,
.delTemplateAnimation.ng-leave {
    -webkit-animation: 0.2s my_animation;
    -moz-animation: 0.2s my_animation;
    -o-animation: 0.2s my_animation;
    animation: 0.2s my_animation;
}

.delAnimation.ng-leave.ng-leave-active,
.delAnimationShowMore.ng-leave.ng-leave-active,
.delTemplateAnimation.ng-leave.ng-leave-active {
    opacity: 0;
}

.delAnimation.ng-move,
.delAnimationShowMore.ng-move,
.delTemplateAnimation.ng-move {
    opacity: 0.5;
}

.delAnimation.ng-move.ng-move-active,
.delAnimationShowMore.ng-move.ng-move-active,
.delTemplateAnimation.ng-move.ng-move-active {
    opacity: 1;
}

.labelTitle {
    padding-left: 0.5em;
    font-size: 1em;
}

.boxDetail {
    font-size: smaller;
    position: relative;
    display: block;
    margin-top: 0.5em
}

#includeHumidity {
    display: none;
}

#includeTemperature {
    display: none;
}

#includeAirChange {
    display: none;
}

#includeAirFlowDiff {
    display: none;
}



.dateExport {
    display: inline-block;
}

.btn.btn-primary.btnUnitPos {
    padding: 0.5em;
    text-align: center;
    background-color: rgb(220, 222, 224);
    color: rgb(54, 113, 143) !important;
    border: none;
    width: 6.5em;
    margin: 0;
    text-transform: none;
    border-radius: 3px;
    transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.temp {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.airFl {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}


.btn-primary.btnUnitPos:active,
.btn-primary.btnUnitPos.active,
.open>.dropdown-toggle.btn-primary {
    background-color: rgb(54, 113, 143) !important;
    color: white !important;
}

.expTooltip {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    background-color: transparent !important;
    width: 13em;
    height: 3em;
    border: none;
    margin-top: 0.5em;
}

.expTooltip:hover {
    background-color: transparent !important;
}

.mdc-button.mat-mdc-button-base.md-primary.btnExport {
    background-color: rgb(9, 77, 114) !important;
    color: white !important;
    width: 13em !important;
    height: 3em !important;
    border: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.btnExport:hover,
.mdc-button.mat-mdc-button-base.md-primary.btnExport:hover {
    background-color: rgb(7, 63, 92) !important;
}

.prewTooltip {
    background-color: transparent !important;
    z-index: 20;
    position: absolute;
    width: 6.3em;
    left: 13.75em;
    right: 0;
    height: 3em;
    margin-top: 0.4em;
}


#exportPageButtons>.md-button.md-default-theme[disabled],
#exportPageButtons>.md-button[disabled],
#exportPageButtons button[disabled] {
    background-color: rgb(218, 218, 218) !important;
    color: rgb(135, 135, 135) !important;
}

.exportFirst>.form-group {
    margin-right: 0 !important;
}

@media screen and (max-width:768px) {
    .exportFirst {
        position: relative;
        display: block;
        width: 100%;
    }

    .state-ExportMeasurement .autoCompSite {
        float: left;
    }

    .exportSecond {
        position: relative;
        display: block;
        width: 100%;
        vertical-align: top;
        background-color: rgb(246, 248, 250);
        padding: 1em 0.5em 2em 0.5em;
    }
}

@media screen and (min-width: 768px) and (max-width: 985px) {
    .state-ExportMeasurement .autoCompSite {
        float: left !important;
        margin-left: 0 !important;
    }

    .autoComp {
        width: 100% !important;
    }
}

@media screen and (min-width:768px) {
    .exportFirst {
        position: relative;
        display: inline-block;
        width: 40%;
    }

    .exportSecond {
        position: relative;
        display: inline-block;
        width: 59%;
        vertical-align: top;
        background-color: rgb(246, 248, 250);
        padding: 1em 2em 2em 2em;
    }
}

.chartTitle {
    font-weight: bold;
    font-size: 1.3em;
}

.chartExportTitle {
    font-weight: bold;
    margin: 3em 0 1em 0;
}

.autoComp {
    position: relative;
    display: inline-block;
    width: 26.5em;
    min-width: 9.5em;
}

.state-ExportMeasurement .autoCompSite {
    position: relative;
    display: block;
    margin-left: 4px;
    max-width: 180px !important;
    min-width: 110px;
    padding-bottom: 1em;
}

@media (max-width: 410px) {
    .state-ExportMeasurement .autoCompSite {
        margin-left: 0;
        float: left;
    }
}

.state-ExportMeasurement .autoCompSite md-autocomplete-wrap {
    height: 2.4em !important;
}

@media (max-width: 410px) {
    .autoComp {
        width: 100%;
    }
}

@media (max-width:375px) {
    .labelSize {
        width: 6.5em;
        max-width: 6.5em;
    }

    .validationMsg {
        position: relative;
        left: 10em;
        font-size: 0.8em;
    }

    .enablePosition {
        left: 9.5em;
    }
}

@media (min-width:375px) and (max-width:745px) {
    .labelSize {
        width: 9.8em;
    }

    .validationMsg {
        position: relative;
        left: 10em;
        font-size: 0.8em;
    }

    .enablePosition {
        left: 10.5em;
    }
}

@media (min-width:745px) and (max-width:780px) {
    .labelSize {
        width: 6.5em;
        max-width: 6.5em;
    }

    .validationMsg {
        position: relative;
        left: 10em;
        font-size: 0.8em;
    }

    .enablePosition {
        left: 9.5em;
    }
}

.md-dialog-container.md-dialog-content.md-primary.md-cancel-button.md-button.md-default-theme.md-ink-ripple:focus {
    display: none !important;
}

@media (min-width:780px) {
    .labelSize {
        width: 9.8em;
    }

    .validationMsg {
        position: relative;
        left: 14em;
        font-size: 0.8em;
    }

    .enablePosition {
        left: 10.5em;
    }
}

.showMessage {
    position: relative;
}

.statusCell {
    position: relative;
}

.titleTouch {
    display: none;
    position: absolute;
    z-index: 20;
    top: 4em;
    border: 1px solid gray;
    background: white;
    width: auto !important;
    height: auto !important;
    right: 1em;
    color: gray;
    box-shadow: 2px 2px 5px #888888;
    text-align: center;
}

.showMessage:hover+.titleTouch {
    display: table;
}

.showMessage:focus+.titleTouch {
    display: table;
}

.titleTouch .successInfo {
    position: relative;
    display: table-cell;
    padding: 2px !important;
    height: auto;
    white-space: normal;
    min-width: 10em;
    max-width: 30em;

}

.titleTouch .warnInfo {
    position: relative;
    display: table-cell;
    padding: 2px !important;
    height: auto;
    white-space: normal;
    min-width: 20em;
    max-width: 30em;

}

@media (max-width:820px) {
    .titleTouch .warnInfo {
        min-width: 20em;
    }

    .titleTouch .successInfo {
        min-width: 12em;
    }
}

#overlayDropdown {
    position: fixed;
    top: 0;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: #000;
    opacity: 0.3;
    filter: alpha(opacity=30);
    z-index: -1;
}

.dropdown-backdrop {
    background-color: transparent !important;
}

#moveUnitToCustomer,
#moveUnitFromCustomer {
    position: relative;
    background-color: white;
    padding: 1em;
    top: -2px;
}

.hideDiv {
    display: none;
}



.helperDivActive {
    background-color: white;
}

.helperDivNotActive {
    background-color: rgb(230, 230, 230);
}

.btnMove {
    margin: 0;
}

.btnArrow {
    position: relative;
    vertical-align: top;
    display: block;
}

#chooseMultipleUnitsAdd,
#chooseMultipleUnitsRemove {
    width: 12em;
}

.globalAlarmFilter {
    display: inline-block;
    position: relative;
    width: 15em;
    margin-left: 1em;
}

.globalAlarmContainer {
    background-color: white;
    padding: 1em;
}

.globalAlarmSelect {
    width: 12em;
    margin: 1em;
    display: block;
}

.alarmList {
    width: 55em;
    height: 20em;
    border: 1px solid gray;
    overflow: scroll;
    margin-left: 1em;
    margin-top: 1em;
}

.selectBoxes {
    display: inline-block;
    position: relative;
    vertical-align: top;
}

@media screen and (max-width:850px) {
    .alarmList {
        width: 95%;
        margin-left: 1em;
    }
}

.btnShowMore {
    display: inline-block;
    padding-top: 1em;
    padding-right: 1em
}

.keyboardIconDown {
    display: inline-block;
    border: none;
    background-color: white;
    width: 1em;
    background-color: rgb(242, 242, 242);
}

.dismissAllBtn {
    text-transform: uppercase;
    position: relative;
}

.cardAlarmStartedInfo {
    display: inline-block;
    padding-left: 0.3em;
}

.blockPadding {
    display: block;
    padding-top: 0.5em;
}

.inlineBlockPadding {
    display: inline-block;
    padding-top: 0.5em;
}

.unitDetailInfoBox {
    width: 98%;
    height: auto;
    background-color: #F8F9F8;
    padding: 1em 0 1em 1em;
    margin: 8px;
    margin-top: 1em;
}

.infoBoxTitle {
    margin-bottom: 0.2em;
    font-size: 1.5em;
}

.unitDetailInfoBox>hr {
    padding: 0;
    margin: 0;
    position: relative;
    border-top: 2px solid #E1E1E1;
}

.ng-isolate-scope>figure {
    justify-content: flex-start;
}

.ng-isolate-scope>figure>div {
    width: 100%;
}

.measurementDetails>figure {
    top: 0.3em;
}

.measurementNumber {
    font-size: 1.3em;
}

.measurementTitleAndSubtitle {
    margin-top: 1em;
}

.measurementSubtitle,
.measurementDetails {
    font-size: 0.8em;
    position: relative;
    bottom: 0.4em;
    color: #A8A8A8;
}

.measurementTitleAndSubtitle.targetMinMax {
    font-size: 0.9em;
    margin-top: 0 !important;

}

.measurementTitleAndSubtitle>.measurementTitle {
    font-weight: bold;
    font-size: 0.9em;
}

.measurementTitleAndSubtitle>.measurementSubtitle {
    font-size: 0.8em;
}

.measurementBox {
    padding-right: 1em;
    position: relative;
    top: 1em;
}

.consumableDetailsValue {
    position: relative;
    top: 0.5em;
}

#updated {
    position: relative;
    top: 0.4em;
}

.cagesText {
    white-space: pre;
}

.detailsNotVisible {
    display: none;
}

.lifeHoursProgress>div,
.lifeHoursProgress>div>div {
    height: 1em !important;
    border-radius: 0.5em
}

.lifeHoursProgress>div {
    background-color: #EEEEEE;
}

.supply .md-bar.md-bar2 {
    background-color: #C2EF93;
}

.exhaust .md-bar.md-bar2 {
    background-color: #F7F195;
}

.redProgressBar .exhaust .md-bar.md-bar2 {
    background-color: red;
}

.templateValuesPadding {
    padding-top: 0.8em;
}

.lifeHoursProgress {
    top: 1em !important;
}

.lifeHours {
    top: 0 !important;
}

.outsideLimitsText {
    color: #D61227;
    background-color: #FFECEE;
    padding-left: 0.2em;
    border-radius: 0.5em;
    right: 0.5em;
    position: relative;
}

.outsideLimitArrow {
    position: relative;
    padding-bottom: 0.2em;
    padding-right: 0.2em;
}
.state-UnitDetail .outsideLimitArrow {
    padding-bottom: 0;
}

.lowLimit,
.highLimit {
    display: inline-block;
}

.material-icons .outsideLimitArrow .noLimit {
    display: none !important;
}

.unitLocation:hover {
    text-decoration: underline;
}

.plotPeriodGroup {
    padding-bottom: 1.3em;
    float: right
}

.unitPosition {
    padding-left: 0.4em;
    font-size: 2em;
    color: #317090;
    font-weight: bold;
    display: inline-block;
}

@media screen and (max-width: 30em) {
    .plotPeriodGroup {
        float: left !important;
    }

    .unitPosition {
        display: block;
    }
}

.logDateBox {
    padding: 1em;
    position: relative;
    display: inline-block;
    border-right: 1px solid #D6D6D6;
}

.logFilterBox {
    padding: 1em;
    display: inline-block;
    position: relative;
    vertical-align: top;
}

#logTable td,
#logTable th {
    padding: 8px;
}

#logTable thead,
#logTable td {
    border-bottom: 1px solid #ddd;
}

#logTable thead {
    position: absolute;
    width: 78em !important;
}

#logTable tbody {
    overflow: scroll;
    background-color: white;
}

#logTable th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #F3F3F3;
    color: #7A7A7A;
}

.cagesValue {
    position: relative;
    top: 0.5em;
}

@media screen and (max-width: 688px)and (min-width: 450px) {
    md-grid-list {
        padding-bottom: 0 !important;
    }

    .headerInfo {
        padding-bottom: 1em !important;
    }

    .unitDetailInfoBox {
        padding-bottom: 3em;
    }
}

@media screen and (max-width: 450px) {
    md-grid-list {
        padding-bottom: 1em !important;
    }

    .headerInfo {
        padding-bottom: 1em !important;
    }

    .unitDetailInfoBox {
        padding-bottom: 2em;
    }
}

@media screen and (max-width: 350px) {
    md-grid-list {
        padding-bottom: 1.5em !important;
    }

    .headerInfo {
        padding-bottom: 1.5em !important;
    }

    .unitDetailInfoBox {
        padding-bottom: 2em;
    }
}

#logTable a {
    text-decoration: none !important;
    color: #7A7A7A;
}

.locationOverviewInfoBig {
    font-size: 1.3em;
    padding-right: 0.2em;

}

.locationOverviewInfoSmall {
    font-size: 0.8em;
    line-height: 12px;
    color: #9B9B9B;
}

.tableItemsInline {
    display: inline-block;
    vertical-align: middle;
}

#locationOverviewTable>thead>tr>th {
    background-color: #F3F3F3;
    padding: 5px 10px;
    text-align: right;
    max-width: 10em;
}

#locationOverviewTable>thead {
    background-color: #F3F3F3;
}

#locationOverviewTable>tbody>tr>td {
    padding: 1em 10px;
    text-align: right;
    max-width: 10em;
    white-space: nowrap;
}

#locationOverviewTable>thead>tr>th>span {
    text-transform: uppercase !important;
    color: #707070;
}

#locationOverviewTable>tbody>tr {
    border-bottom: 1px solid #EAEDED;
    background-color: white;
}

#locationOverviewTable {
    padding-left: 35em;
    padding-right: 35em;
    overflow: scroll;
}

.templateColumn {
    text-align: right;
}

.unitInfoColumn {
    text-align: right;
}

.locationOverviewCheckbox {
    top: 7px;
    position: relative;
}

.addPadding {
    position: relative;
    bottom: 0.5em;
}

.no-display {
    display: none;
}

.addRightTopPadding {
    padding-top: 4px;
    padding-right: 8px;
}

.locationTablePosition {
    text-align: left !important;
    white-space: normal !important;
}

.sdm-list.locationNode.level1 {
    padding: 0 !important;
    overflow-x: hidden;
}

.roomLevel {
    width: 78em !important;
}
.locationNameCommon {
    display: inline-block;
    width: 60%;
    border: 0;
    vertical-align: middle;
    position: relative;
}

.locationName {
    padding-bottom: 1em;
}

.locationNameFiltered {
    padding-bottom: 0;
    color: #4D4D4D;
}

.filter-panel.locations {
    position: relative;
    top: 3.2em;
}

.filter-panel .btn.filter-rule input {
    display: none;
}


.location-overview-scroll {
    overflow-x: scroll;
    min-width: 900px;
}


.locationCircleCommon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    font-size: 1.5em;
    position: relative;
    vertical-align: middle;
    border-radius: 1em;

    text-align: center;
}

.locationCircle {
    background-color: grey;
    color: white;
}

.locationCircleFiltered {
    background-color: #757575;
    color: white;
}

.locationTitle {
    padding: 1em;
}

.locationTitleFiltered {
    background-color: #B9CDD8;
    padding: 1em;
}

.locationTitleFilteredRoot {
    background-color: #F4F3F4;
    padding: 1.5em;
}

.locationTitleFilteredRoot:hover {
    cursor: initial;
}

#locationOptions {
    padding: 0 1em;
}

#openFilterLocation {
    border-left: 1px solid #7D95A1;
}

._md.md-open-menu-container {
    z-index: 10000;
    top: 90px !important;
}

.locationsCheckIcon {
    display: inline-block;
    vertical-align: middle;
    line-height: inherit !important;
    padding-right: 0.5em;
}

.locationsCheckIconTrue {
    color: #757575;
}

.locationsCheckIconFalse {
    color: transparent;
}

.viewBtn {
    padding-right: 1em;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    margin-top: 7px;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.dropdown-content div {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.sdm-headerFix.backCol {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar {
    width: 0px;
    background: transparent;
    height: 0px;
}

.logFirstFix {
    position: relative;
    background-color: white;
    padding-left: 0;
    height: 210.5px;
    width: 100%;
}

.logTableHeaderFix {
    position: fixed;
    height: 44px;
    text-transform: uppercase;
}

.logTableHeaderFix tr,
#logTable tr {
    display: flex;
    min-width: 720px;
}

.logTableHeaderFix tr {
    min-width: 770px !important;
}

.rowPlaceholder {
    height: 44px;
    width: 100%;
}

#logTable th:nth-child(1),
td:nth-child(1) {
    flex-basis: 17%;
}

#logTable th:nth-child(2),
td:nth-child(2) {
    flex-basis: 18%;
    overflow-wrap: break-word;
    word-break: break-all;
}

#logTable th:nth-child(3),
td:nth-child(3) {
    flex-basis: 32%;
}

#logTable th:nth-child(4),
td:nth-child(4) {
    flex-basis: 22%;
}

#logTable th:nth-child(5),
td:nth-child(5) {
    flex-basis: 12%;
}

#tableScrollable {
    overflow: scroll;
}

#logTable {
    width: 100%;
    overflow: scroll;
}

.positionName {
    padding-left: 14px !important;
    white-space: normal !important;
}

#locationOverviewTable md-checkbox {
    margin-bottom: 0px !important;
}

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

.redBackCol {
    background-color: #9D4B4B !important;
}

.stickyBottom {
    height: 5em;
    bottom: 0;
    left: 0;
    position: fixed;
    background-color: white;
    width: 100%;
    box-shadow: 8px 4px 8px 4px rgba(0, 0, 0, 0.3);
    padding-top: 0.8em;
    z-index: 10000;
}

.fakeStickyBottom {
    height: 3.6em;
    bottom: 0;
    left: 0;
    position: relative;
    background-color: transparent;
    width: 100%;
}

.md-raised.md-primary.manageUnitTmplBtn {
    margin-right: 0 !important;
    height: 36px !important;
    border-radius: 3px !important;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    background-color: rgb(53, 114, 143);
}

.manageUnitTmplBtn[disabled] {
    background-color: lightgray !important;
}

.unitTemplateTypeBar,
unitTemplateTypeBarLocation {
    height: 3.6em;
    background-color: #F3F3F5;
    z-index: 1;
    position: fixed;
    border-bottom: 1px solid #AAC2CF;
}

@media screen and (max-width: 860px) {

    .unitTemplateTypeBar,
    unitTemplateTypeBarLocation {
        position: absolute;
        background-color: #F3F3F5;
    }
}

@media (min-width:860px) and (max-width: 69.5em) {

    .unitTemplateTypeBar,
    unitTemplateTypeBarLocation {
        width: 100% !important;
    }
}

@media (min-width: 69.5em) {
    .unitTemplateTypeBar {
        width: 78em !important;
        margin: auto;
    }
}

.unitTypeButton {
    height: 30px !important;
    display: inline-block !important;
    position: relative !important;
    cursor: pointer !important;
    min-width: 88px !important;
    vertical-align: middle !important;
    -webkit-box-align: center !important;
    align-items: center !important;
    text-align: center !important;
    border-radius: 3px !important;
    box-sizing: border-box !important;
    user-select: none !important;
    outline: none !important;
    border: 0 !important;
    padding: 0 6px !important;
    margin: 9px !important;
    background: transparent !important;
    white-space: nowrap !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    font-style: inherit !important;
    font-variant: inherit !important;
    font-family: inherit !important;
    text-decoration: none !important;
    overflow: hidden !important;
    -webkit-transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.unitTemplateMargins {
    margin-left: 47px;
    margin-right: 47px;

}

.unitTemplateTitle {
    font-size: 1.3em;
    font-weight: bold;
    color: #4A4A4A;
    margin-bottom: 0.5em;
}

.unitTemplateMain {
    padding: 5.6em 0 2em 0;
}

.unitTemplateBox {
    width: 100%;
    border: 2px solid #A9C2CF;
    border-radius: 3px;
    margin-bottom: 1em;
}

.unitTemplateBoxDetail {
    border-radius: 5px;
    margin-bottom: 0;
}

.tempWindowDetail {
    border-radius: 5px;
}

.templateBoxTItle {
    font-weight: bold;
    padding: 0.8em 1em 0 1em;
    display: inline-block;
}

.templateBoxTItle,
.templateBoxHeader,
.templateBoxValues {
    height: 3em;
}

.unitTemplateIcons {
    display: inline-block;
    padding: 0.8em 1em 0 1em;
}

.unitTemplateIcons .material-icons,
.templateBoxTItle .material-icons {
    color: #757575;
}

.unitTemplateIcons .material-icons:hover,
.templateBoxTItle .material-icons:hover {
    color: #35718F;
}

.unitTemplateIcons:hover,
.templateBoxTItle .material-icons:hover {
    cursor: pointer;
    color: #35718F;
}

.templateLocked:hover {
    cursor: default;
    color: #757575 !important;
}

.templateBoxHeader {
    background-color: #F3F3F3;
    padding-top: 3px;
}

.templateBoxHeader,
.templateBoxValues {
    padding-right: 1.5em;
}

.templateBoxHeader .titleSubtitle {

    display: inline-block;
    vertical-align: middle;
}

.ivcIsoCageTemplateWidth,
.isoCageTemplateWidth {
    width: 16.6666%;
}

.isoCageTemplateWidth:nth-child(3) {
    width: 19.6666%;
}

.isoCageTemplateWidth:last-child {
    width: 13.6666%;
}

.scantainerTemplateWidth {
    width: 20%;
}

.templateBoxHeader .title {
    text-transform: uppercase;
    font-weight: bold;
    text-align: right;

}

.templateBoxHeader .subTitle {
    font-size: 0.8em;
    display: inline-block;
    position: relative;
    top: -3px;
    width: 33.333%;
    text-align: right;
    color: #9B9B9B;
}

.templateBoxValues {
    text-align: right;
    padding-top: 0.5em;
}

.templateBoxValues.notSynchedTemplateHeader {
    padding-top: 0 !important;
}

.templateBoxValues .titleSubtitle {
    display: inline-block;
    vertical-align: middle;
}

.notSynchedTemplateHeader.templateBoxValues .titleSubtitle {
    vertical-align: top !important;
}

.unitTemplateInput {
    width: 3.6em !important;
    display: inline-block;
    text-align: right;
    position: relative;
    vertical-align: top;
    margin-left: 5px;
}

.unitTemplateInput .ExhaustAirFlowAllowedMinimum {
    width: 7em !important;
}

.unitTemplateInput>div {
    width: 100%;
    text-align: right;
    float: right;
}

.unitTemplateInputBorder {
    border-bottom: 1px solid #979797 !important;
}

.unitTemplateInput input,
.templateInputPressure select {
    text-align: right;
    position: relative;
    border: none;
    display: inline-block;
    width: 50%;

}

.templateInputPressure select {
    background-color: transparent;
}

.measurementUnit {
    position: relative;
    top: -6px;
    left: -6px;
    border-bottom: 1px solid #9F9F9F;
}

.templateInputPressure input {
    border: none;
    width: 70%;
}

#btnCreateNewTemplate {
    width: 20em;
    height: 3em;
    border: 1px solid #AAC2CF;
    padding: 0.5em;
}

#btnCreateNewTemplate>span {
    position: relative;
    vertical-align: middle;

}

#btnCreateNewTemplate .material-icons {
    color: #757575;
}

.btnTitle {
    margin-left: 0.5em;
    font-weight: bold;
}

.templateBoxBtn {
    min-height: 4.8em;
    padding: 1em;
    border-top: 2px solid #A9C2CF;
}

.btnSaveUnitTemplate {
    background-color: rgb(53, 113, 143) !important;
    color: #D8D8D8 !important;
    padding-right: 1em;
    padding-left: 1em;
    margin: 0 !important;
    display: inline-block;
    vertical-align: middle;
}

.btnSaveUnitTemplate:hover {
    background-color: rgb(38, 94, 130) !important;
}

.btnSaveUnitTemplate[disabled] {
    background-color: transparent !important;
}

.btnCancelTemplate {
    padding-right: 1em;
    padding-left: 1em;
    margin: 0 1em !important;
    display: inline-block;
    vertical-align: middle;
    color: #35718F !important;
}

.templateBlueBorder {
    border: 3px solid #35718F;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
}

.templateTitleInput {
    border: none;
    width: 15em;
}

.templateTitleInput:focus {
    border-bottom: 1px solid #979797;
}

.templateTitleInput:hover {
    cursor: pointer !important;
}

.unitTemplateBox input[type="text" i]:disabled {
    background-color: transparent !important;
}

.unitTemplateBox input[type="number" i]:disabled {
    background-color: transparent !important;
}


.templateNoValue {
    color: #9B9B9B;
}

.templateValidationMsg {
    max-width: 40em;
    display: inline-block;
}

.redBorder {
    border-bottom: 1px solid red !important;
    color: red;
}

.btnSaveUnitTemplate[disabled]:hover {
    background-color: transparent !important;
}

#tempWindow {
    position: fixed;
    top: 8em;
    background-color: white;
    width: 74em;
    margin: auto;
    left: 0;
    right: 0;
    z-index: 1500;
}

#templateName {
    white-space: normal !important;
}

.templateWidthLocationOverview {
    display: inline-block;
    float: right;
    width: 95.6%;
    max-width: 930px;
}

.unitBtnsHeader {
    min-width: 765px;
    position: absolute;
    background-color: white;
    z-index: 1599;
    padding-top: 1em;
    width: 70em;
    border-bottom: 1px solid #AAC2CF;
}

@media (max-width: 74em) {
    #tempWindow {
        width: 67em;
    }

    .unitBtnsHeader {
        width: 61em;
    }

    .templateWidthLocationOverview {
        max-width: 95%;
    }
}

@media (max-width: 64em) {
    .unitBtnsHeader {
        width: 56em;
    }

    #tempWindow .ivcIsoCageTemplateWidth {
        width: 17.3%;
    }

    #tempWindow .ivcIsoCageTemplateWidth:last-child {
        width: 13%;
    }
}

@media (max-width: 1000px) {
    #tempWindow {
        max-width: 100%;
        overflow: scroll;
    }

    .tempBodyWrapper {
        width: 67em;

    }
}

#tempWindowHeader {
    width: 100%;
    height: 3em;
    position: relative;
    z-index: 2000;
    border: 1px solid gray;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
    font-size: medium;
    color: white;
    height: 3em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0.3em;
}

.tempHeaderDetails {
    background-color: #F3F3F3;
    color: black;
}

.tempHeaderSelect {
    background-color: #9D4B4B;
}

.tempWindowBody {

    height: auto;
    max-height: 73vh;
    overflow: scroll;
    border: 1px solid gray;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
}

.tempWindowBody .unitTemplateTypeBar {
    position: relative;
    background-color: transparent;
}

.tempBodySelect {
    padding: 0 2em 1em 2em;
}

.tempBodyDetail {
    border-radius: 5px;
    overflow: hidden;
}

.positionCheckbox>div>md-checkbox.md-default-theme[disabled]:not(.md-checked) .md-icon,
md-checkbox[disabled]:not(.md-checked) .md-icon {
    border-color: rgba(0, 0, 0, 0.2);
}

.disabledPosition {
    color: rgba(0, 0, 0, 0.2);
    cursor: default;
}

md-toast.md-center {
    left: 50%;
    transform: translate3d(-50%, 0, 0);
}

#locationOverviewTable md-checkbox.md-default-theme:not([disabled]).md-primary.md-checked .md-icon,
#locationOverviewTable md-checkbox:not([disabled]).md-primary.md-checked .md-icon,
.unitTemplateBox md-checkbox.md-default-theme:not([disabled]).md-primary.md-checked .md-icon,
.unitTemplateBox md-checkbox:not([disabled]).md-primary.md-checked .md-icon {
    background-color: rgb(6, 77, 116);
}

.grayCheckbox md-checkbox.md-default-theme:not([disabled]).md-primary.md-checked .md-icon,
.grayCheckbox md-checkbox:not([disabled]).md-primary.md-checked .md-icon {
    background-color: #757575 !important;
}

.noscroll {
    overflow: hidden;
}

.differentUnitTypeTooltip {
    max-width: 30em;
    height: auto !important;
    white-space: normal !important;
    text-overflow: initial !important;
}

@media (max-width: 400px) {
    .differentUnitTypeTooltip {
        top: 5em !important;
    }
}

.differentUnitTypeTooltip .md-content._md.md-show {
    height: 3em !important;
    white-space: inherit;
}

.md-tooltip {
    height: auto !important;
}

.applyAndSyncBtn {
    background-color: transparent !important;
    color: white !important;
}

.applyAndSyncBtn[disabled] {
    color: rgba(0, 0, 0, 0.38) !important;
    background-color: transparent !important;
}

.applyAndSyncBtn:hover {
    background-color: rgba(158, 158, 158, 0.2) !important;
}

.applyAndSyncBtn[disabled]:hover {
    background-color: transparent !important;
}

.bordSites {
    border: 1px solid #CECECE !important;
}

.bordSites .locationTitle {
    padding: 1.5em;
}

.siteLevelBackground {
    background-color: #F4F3F4;
    margin-right: 1em;
    padding-left: 1em;
    font-weight: bold;
    border-bottom: 1px solid rgb(227, 229, 230);
}

.pageWithoutLeftMargin {
    padding-left: 0em;
    background-color: white;
}

.pageWithoutLeftMargin .locationList {
    padding: 0;
    background-color: white;
}

.pageWithMargin .locationList {
    padding-left: 0.5em;
}

.siteChildPadding {
    padding-left: 1.5em;

}

.areaChildPadding {
    padding-left: 3.5em;
}

.bordLocUnitAnchPadding {
    padding-bottom: 1em;
}

.arrowIcon:hover {
    cursor: pointer;
}

.addSite {
    padding: 1.2em;
}

li .noIcon {
    padding-top: 1em;
}

.pageWithoutLeftMargin .roomBox {
    left: -1em;
    position: relative;
}

.locUnitAnchName.siteLevelRoom {
    padding: 0.5em 0em;
}

.noIcon.noPadding {
    padding-top: 0;
}

.noPadding .locUnitAnchName.bordLocUnitAnch {
    padding: 1.5em 0.35em 1.5em 0;
}

.siteLevelBackground .locationAndSiteTitle {
    font-size: 1.4em;
}

.pageWithoutLeftMargin .bordLocUnitAnch .locationAndSiteTitle {
    font-size: 1.2em;
}

.locUnitAnchName .arrowUpAndDown {
    position: relative;
    bottom: 0.1em;
}

.pageWithoutLeftMargin .roundIcon {
    font-size: 1.5em;
    margin-right: 0.8em;
}

.editLocName .arrowUpAndDown {
    position: relative;
    top: 0.1em;
}

#signupOverlay {
    opacity: 0.9 !important;
    -webkit-transition: opacity 0.3s ease-in 0s;
    transition: opacity 0.3s ease-in 0s;
    background: -webkit-radial-gradient(#40404b, #111118) rgba(34, 34, 40, 0.94);
    background: radial-gradient(#40404b, #111118) rgba(34, 34, 40, 0.94);
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
    -webkit-transition: opacity 0.2s ease-in 0.4s;
    transition: opacity 0.2s ease-in 0.4s;
}

#signupMainContainer {
    opacity: 1;
    pointer-events: auto;
    display: table;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    right: 0;
    z-index: 1000000000;
    box-sizing: initial;
}

.signupContainer {
    overflow-y: auto;
    vertical-align: middle;
    display: table-cell;
    margin: auto;
}

.centerForm {
    -webkit-transition: -webkit-transform 0.6s, opacity 0.6s;
    -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
    transition: opacity 0.6s, -webkit-transform 0.6s;
    transition: transform 0.6s, opacity 0.6s;
    transition: transform 0.6s, opacity 0.6s, -webkit-transform 0.6s;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
    box-shadow: 0 0 40px 4px #111118;
    opacity: 1;
    -webkit-transform: translateY(0%) scale(1);
    transform: translateY(0%) scale(1);
    width: 300px;
    margin: 0 auto;
    border-radius: 5px;
    max-height: 100vh;

}

#signupForm {
    margin: 0 auto;
    border-radius: 5px;
    max-height: 100vh;
    background: #fff;
    position: relative;
    width: 300px;
    padding-bottom: 0.1em;
}

#signupHeader {
    background-color: rgb(6, 77, 116);
    text-align: center;
    padding: 11px;
    height: 118px;
    color: #333;
    position: relative;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
    box-sizing: border-box;
    padding-top: 2.5em;
}

#signupHeader img {
    width: auto;
    height: 40px;
    display: inline-block;
    margin: 0 0 11px;
    vertical-align: middle;
    -webkit-transition: margin-top 0.4s;
    transition: margin-top 0.4s;
}

#signupBody {
    padding: 10px 20px 20px 20px;
}

#signupBody md-input-container {
    margin: 0 !important;
    border-radius: 3px;
    border: 1px solid #f1f1f1;
    position: relative;
    background: #f1f1f1;
    -webkit-transition: border-color 0.8s;
    transition: border-color 0.8s;
    padding: 0;
    padding-left: 40px;
    margin-top: 10px !important;
}

#signupBody .mat-mdc-form-field-flex {

    border-radius: 3px;
    border: 1px solid #f1f1f1;

    background: #f1f1f1;
}

#signupBody input {
    border: 0;
    padding: 0 14px;
    right: 0;
    height: 40px;
    font-size: 13px;
    width: 100%;
    border-radius: 0 2px 2px 0;
    box-sizing: border-box;
    position: relative;
    line-height: normal;
}

#signupBody .md-input[disabled],
#signupBody input[disabled] {
    background-color: #f1f1f1 !important;
}

#signupButton {
    padding: 0em 2em 1em 2em;
}

.material-icons.signupIcon {
    color: #A2A2A2 !important;
    top: auto !important;
    bottom: 12px !important;
    left: 12px !important;
    position: absolute !important;
    font-size: 15px !important;
}

#signupBody .md-errors-spacer {
    display: none !important;
}

#signupBody md-input-container:focus {
    border: 1px solid red;
}

#signupButton {
    border: 0;
    display: block;
    box-sizing: border-box;
    overflow: hidden;
    transition: 0.2s ease-in-out;
    color: #fff;
    letter-spacing: 1px;
    font-size: 14px;
    text-transform: uppercase;
    text-indent: 0 !important;
    background-color: rgb(170, 170, 170);
    width: 50%;
    height: 3em;
    font-weight: 400;
    margin: 0 0 2em 1.5em;
    padding: 0;
}

.disabledUserList {
    pointer-events: none;
    cursor: default;
}

.disableManageBtn {
    pointer-events: none;
    cursor: default;
    color: lightgray;
}

select.disabledUserList {
    background-color: rgb(235, 235, 228);
}

.manageTemplatesButton {
    float: right;
    margin: 0 auto;
    padding-right: 1em;
    height: 1em;
}

.manageTemplatesButton .elementOverlay {
    display: none;
}

.templateWidthLocationOverviewNoCheckbox {
    width: 100%;
}

#updateSettingsUserDetail[disabled] {
    background-color: rgb(218, 218, 218) !important;
    color: rgb(135, 135, 135) !important;
}


.md-button.md-primary.button.dismissBtn[disabled],
.md-button.md-primary.button.btnDismissAll[disabled] {
    color: rgb(172, 170, 170) !important;
}

.closeTemplate {
    color: rgb(4, 77, 116);
    opacity: .2;
}

.closeTemplate:hover {
    opacity: .5;
}

.pressureSignBold {
    font-size: 1.5em;
}

#overlayTransparent {
    position: fixed;
    top: 10em;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: transparent;
    opacity: 0.3;
    filter: alpha(opacity=30);
    z-index: 1025;
}

.removeManageBtn {
    bottom: 0.35em;
    left: 1em;
}

.unitTemplateBox select[disabled] {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

.unitTemplateBox input[disabled] {
    background-color: transparent;
}

.locationOverviewWidth {
    width: 78em !important;
}


.locationButtonsMenu {
    display: none;
}

@media (max-width: 768px) {
    .locationButtonsMenu {
        display: inline-block;
        position: relative;
        bottom: 10px;
    }

    #openFilterLocation,
    #manageBtn,
    #chooseTemplateBtn,
    #removeTemplateBtn {
        display: none !important;
    }

    .locationHeader {
        padding-right: 0;
    }
}

.locationsMenu._md.md-open-menu-container {
    top: 3em !important;
}

.activityLogWrapper {
    position: fixed;
    width: 78em;
    max-width: 100%;
    overflow: scroll;
}

.templateNotSynched {
    color: red;
}

.unitValues {
    font-size: 12px;
}

.notClickable {
    pointer-events: none;
}

.templateSynchedIcon {
    color: green;
    font-size: 18px !important;
}

#humidityChart,
#temperatureChart {
    background-image: url(/images/spinner.gif);
    background-repeat: no-repeat;
    background-position: center;
    height: 19em;
    text-align: center;
    vertical-align: middle;
}

.material-icons.dismissableAlarmSymbol {
    display: inline-block;
    vertical-align: middle;
    color: rgb(200, 200, 200);
    font-size: 2em;
    padding: 0;
}

.unitValuesRed,
.unitValuesRed>div>span {
    color: rgb(210, 40, 23) !important;
}

.level-1,
.level-2,
.siteLevelActive.level-3,
.level-1:hover,
.level-2:hover,
.siteLevelActive.level-3:hover {
    color: rgb(176, 171, 181);
    box-shadow: 0 0 0 1000px white !important;
    background-color: white !important;
    pointer-events: none !important;
    cursor: default !important;
}

.notClickable {
    pointer-events: none !important;
}



.cdk-global-overlay-wrapper {
    top: -0.5em !important;
}

.state-ExportMeasurement .cdk-overlay-container > div.cdk-overlay-connected-position-bounding-box  > div.cdk-overlay-pane {
    background-color: white;
    color: black;
    font-size: 1em;
}
.state-LocationOverview .mdc-snackbar {
    background-color: #323232 !important;
    color: white !important;

}


.state-LocationOverview .mdc-button.mat-mdc-button-base.mat-mdc-snack-bar-action.mdc-snackbar__action.mat-mdc-button.mat-unthemed:hover,
.state-LocationOverview .mat-mdc-snack-bar-container .mat-mdc-button.mat-mdc-snack-bar-action:not(:disabled) {
    background-color: #323232 !important;
    --mat-button-text-state-layer-color: #323232 !important;
}

.state-ExportMeasurement .tooltipExport, .tooltipExport {
    background-color: #707070 !important;
    border-radius: 5px !important;
    font-size: 0.75em;
    color: white ;
    
}

.redBackCol #removeTemplateBtn, .redBackCol #chooseTemplateBtn, 
#tempWindowHeader .btnCancelTemplate, #tempWindowHeader .applyAndSyncBtn {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    letter-spacing: 0.1px !important;
}

.redBackCol .mat-mdc-raised-button[disabled],
#tempWindowHeader .btnCancelTemplate[disabled],
#tempWindowHeader .applyAndSyncBtn[disabled] {
   color: rgba(0, 0, 0, 0.38) !important;
}

.unitTypeTemplateSelectedBtn {
    background-color: #9BA2A6 !important;
    color: white !important;
}

.unitTypeTemplateAvailableBtn {
    background-color: transparent !important;
    color: #757575 !important;
}

.unitTypeTemplateAvailableBtn:hover {
    background-color: #EBEBEB !important;
    color: #757575 !important;
}

.unitTypeTemplateSelectedBtn,
.unitTypeTemplateAvailableBtn,
.unitTypeTemplateSelectedBtn contentId,
.unitTypeTemplateAvailableBtn contentId {
    min-height: 30px !important;
    line-height: 30px !important;
    height: 30px;
}

.locationTemplateTypeBtn[disabled]:hover {
    background-color: transparent !important;
}

.locationTemplateTypeBtn[disabled] {
    color: lightgray !important;
}
.selectInlineEditor {
    background: #FFF;
    border: 1px solid #AAA;
    border-radius: 5px;
    display: inline-block;
    left: 20%;
    margin-left: -110px;
    position: absolute;
    width: 341px;
    height: 56px;
}
.state-LocationUnitAnchoring .selectInlineEditor {
    bottom: 6em;
}
 
.state-LocationUnitAnchoring .mat-mdc-form-field-focus-overlay {
    background-color: transparent !important;
}
.state-LocationBaseDataEdit .selectInlineEditor {
    margin-top: -55px;
}
.state-LocationBaseDataEdit .mat-mdc-form-field.editor-field.mat-mdc-form-field-type-mat-input.mat-primary.mat-focused,
.state-ExportMeasurement .mat-mdc-form-field.autoComp.un.mat-focused {
    background-color: white !important;
}

.state-LocationBaseDataEdit .mat-mdc-text-field-wrapper .mdc-text-field .mdc-text-field--filled:focus,
.state-LocationBaseDataEdit .mat-mdc-form-field-focus-overlay,
.state-ExportMeasurement .mat-mdc-text-field-wrapper.mdc-text-field.mdc-text-field--filled:focus,
.state-ExportMeasurement .mat-mdc-form-field-focus-overlay {
    background-color: white !important;
    background: white !important;
}

.selectInlineEditor .editor-field {
    min-width: 200px  !important;
    height: 34px;
    border: 1px solid lightgray;
    border-radius: 4px;
}

.selectInlineEditor .mat-mdc-form-field-infix {
    padding-top: 10px;
}

.state-LocationUnitAnchoring .selectInlineEditor .mat-mdc-form-field-infix {
    padding-top: 5px;
}

.state-LocationUnitAnchoring .mat-mdc-select-arrow-wrapper {
   transform: none !important;
}
.state-LocationUnitAnchoring .cdk-overlay-pane {
    width: 300px !important;
}
.state-LocationUnitAnchoring .mat-mdc-select-panel {
    border-radius: 10px !important;
    background-color: #E4E7E3 !important;
}
.state-LocationUnitAnchoring .mat-mdc-optgroup-label,
.state-LocationUnitAnchoring .mat-mdc-option.mdc-list-item {
    font-size: 0.85em !important;
}
.state-LocationUnitAnchoring .mat-mdc-optgroup-label {
    color: #ABACA9 !important;
}
  
.state-LocationUnitAnchoring .mat-mdc-option.mdc-list-item {
    min-height: 20px !important;
}
.selectInlineEditor .mat-icon { 
    width: 100% !important;
    height: 100% !important;
    font-size:2em !important;
    margin-right: 3px !important;
}

.selectInlineEditor .mdc-button {
    padding: 4px 8px !important;
    width: 40px !important;
}

.selectInlineEditor .mdc-button.cancel {
    background-color: transparent !important;
    box-shadow: none;
    color: black !important;
    border: 1px solid lightgray
}


.selectInlineEditor .inline-editor-shell .editor-bubble .editor-actions .mat-mdc-button-disabled {
    opacity: 0.5;
    pointer-events: auto !important;
    cursor: not-allowed !important; 
}


.selectInlineEditor .mdc-line-ripple {
    display: none;
}
.selectInlineEditor .mdc-floating-label.mat-mdc-floating-label {
    top: 15px !important;
}
.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align {
    display: none !important;
}
.editor-field > div,
.mdc-text-field--filled:not(.mdc-text-field--disabled) {
    background-color: transparent !important;
}
.mdc-text-field--filled:not(.mdc-text-field--disabled):hover {
    background-color: transparent !important;
}


.md-button.md-primary.button, .button.dismissBtn,
.mdc-button.mat-mdc-button-base.button.dismissBtn.mdc-button--raised.mat-mdc-raised-button.mat-primary {
    margin: 0 !important;
    color: rgb(15, 108, 188) !important;
    background-color: rgb(242, 242, 242) !important;
    display: block;
    padding-right: 0 !important;
    height: 3.5em !important;
}

.md-button.md-primary.button.dismissBtn, .button.dismissBtn,
.mdc-button.mat-mdc-button-base.button.dismissBtn.mdc-button--raised.mat-mdc-raised-button.mat-primary {
    height: 2.5em !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.moveUnitButtonDisable, 
.mdc-button.mat-mdc-button-base.md-button.md-raised.md-primary.btnMove.mat-mdc-button.moveUnitButtonDisable {
    background-color: rgb(218, 218, 218) !important;
    color: rgb(135, 135, 135) !important;
}

/* Fix for Angular Material icons to match AngularJS Material sizing */
mat-icon {
	display: inline-block !important;
	vertical-align: middle !important;
	height: 24px !important;
	width: 24px !important;
	min-height: 24px !important;
	min-width: 24px !important;
	font-size: 24px !important;
	line-height: 24px !important;
}

/* New flexbox-based measurement layout */
.measurement-row {
	display: flex;
	align-items: flex-start;
	padding: 8px 0;
}

.measurement-row:last-child {
	border-bottom: none;
}

.measurement-label {
	flex: 0 0 38%;
	padding-right: 16px;
}

.measurementTitle {
	font-weight: 500;
	font-size: 14px;
	line-height: 1.2;
	color: #333;
}

.measurementSubtitle {
	font-size: 12px;
	color: #666;
	line-height: 1.1;
}

/* Simple unit type layout */
.measurement-row:not(.detailed):not(.consumable) .measurement-value {
	flex: 1;
	text-align: left;
	font-weight: 500;
}

/* Detailed measurements layout */
.measurement-row.detailed {
	align-items: flex-start;
}

.measurement-row.detailed .measurement-value {
	flex: 0 0 35%;
	padding-right: 16px;
}

.measurement-row.detailed .measurement-details {
	flex: 1;
	font-size: 12px;
	color: #666;
}

.measurement-row.detailed .measurement-value-full {
	flex: 1;
}

.measurement-main {
	display: flex;
	align-items: center;
	gap: 4px;
}

.outsideLimitArrow {
	font-size: 16px;
	color: #f44336;
}

.targetMinMax div {
	line-height: 1.3;
}

/* Consumable progress layout */
.measurement-row.consumable .measurement-progress {
	flex: 1;
}

.progress-text {
	display: flex;
	justify-content: space-between;
	margin-bottom: 4px;
	font-size: 12px;
}

.lifeHoursProgress {
	height: 12px;
	border-radius: 6px;
	background-color: #e0e0e0 !important;
	overflow: hidden;
}

/* Target the progress bar fill */
.mdc-linear-progress__bar.mdc-linear-progress__primary-bar {
	background-color: #F7F195 !important; /* Yellow/amber color */
	border-radius: 6px;
}

.lifeHoursProgress .mat-progress-bar-buffer {
	background-color: #e0e0e0 !important;
}

/* Alternative targeting for different Angular Material versions */
.lifeHoursProgress ::ng-deep .mat-progress-bar-fill::after {
	background-color: #F7F195 !important;
	border-radius: 6px;
}

.lifeHoursProgress ::ng-deep .mat-progress-bar-buffer {
	background-color: #e0e0e0 !important;
}

.lifeHoursProgress ::ng-deep .mat-progress-bar-background {
	background-color: #e0e0e0 !important;
}

.consumableDetailsValue {
	font-weight: 500;
}

.updated {
	color: #666;
	margin-left: 8px;
    position: relative;
    top: 7px;
}
mat-progress-bar {
	height: 1em !important;
}
.mdc-linear-progress__bar-inner {
	background-color: #F7F195 !important;
	border-color: #F7F195 !important;
}
.mdc-linear-progress__buffer-bar {
	background-color: #EEEEEE !important;
}
.measurementBox.headerInfo {
	height: 4em;
}
.mdc-button.mat-mdc-button-base.button.errorSeparator.btnDismissAll.mdc-button--raised.mat-mdc-raised-button.mat-primary {
	margin: 0 !important;
    color: rgb(15, 108, 188) !important;
    background-color: rgb(242, 242, 242) !important;
    display: block;
    padding-right: 0 !important;
    height: 3.5em;
	box-shadow: none;
    border-top: 1px solid lightgray;
    border-radius: 0;
}

/* Chart canvas styling - prevent loading spinners */
#temperatureChart, #humidityChart {
    background: transparent !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

#temperatureChart::before, #humidityChart::before,
#temperatureChart::after, #humidityChart::after {
    display: none !important;
}

/* Remove any potential loading overlays */
.small {
    position: relative;
}

.small::before, .small::after {
    display: none !important;
}

/* Arrow rotation for collapsible sections */
.unitDetailArrow, .keyboardIconDown {
    transition: transform 0.3s ease;
}

.unitDetailArrow.rotated, .keyboardIconDown.rotated {
    transform: rotate(180deg);
}


.state-ExportMeasurement .mat-mdc-form-field-infix {
    padding-left: 1em;
}

.state-ExportMeasurement .mat-mdc-autocomplete-visible,
.cdk-overlay-pane.mat-datepicker-popup {
    background-color: white;

    border: 1px solid lightgray;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
}
.mdc-button--raised.mat-mdc-raised-button {
    position: relative !important;
    color: rgb(54, 113, 143) !important;
    background-color: rgb(242, 242, 242) !important;
   
    height: 36px;
}
.state-ExportMeasurement .btnPreview, .mdc-button.mat-mdc-button-base.mdc-button--raised.btnPreview {
    position: relative !important;
    color: rgb(54, 113, 143) !important;
    background-color: rgb(242, 242, 242) !important;
    height: 3em !important;
    margin-left: 1em !important
}


.state-ExportMeasurement .btnPreview:hover,
.mdc-button--raised.mat-mdc-raised-button, .mdc-button.mat-mdc-button-base.mdc-button--raised.btnPreview:hover {
    background-color: rgb(221, 221, 221) !important;
}

.mdc-button.mat-mdc-button-base.mat-datepicker-close-button.mdc-button--raised.mat-mdc-raised-button.mat-primary.cdk-visually-hidden {
    visibility: hidden;
}

.state-ExportMeasurement .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mat-mdc-notch-piece {
    border: none;
    border-bottom: 1px solid lightgray;
} 

.mat-dialog-title {
    font-size: 20px !important;
}

.confirmDialogBtn {
    color: rgb(63, 81, 181) !important;
    border-radius: 3px !important;
}
.confirmDialogBtn:hover {
    background-color: rgba(158, 158, 158, 0.2);
}