/* Grid Layout */
/* -- Sets up the layout of the site and sensor grids for all breakpoints */
/* ---------------------------------------------------------------- */

.sites, .sensors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 2rem;
    padding-bottom: 1em

}

.sites, .clients, .locations {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.card-site, .card-sensor, .card-detail, .client-item {
    display: flex;
    flex-flow: column

}

    a:hover .card .card-header {
        text-decoration: none;
    }

    /* UI Structure */
    /* -- Shared styling and layout of the sensor card. */
    /* ---------------------------------------------------------------- */

.sensor-header {
    background: var(--brand-dark);
    color: var(--white);
}

    .sensor-header h1 {
        font-size: 1.25rem;
        font-weight: 100;
    }

        .sensor-header h1 a {
            color: var(--green);
            text-decoration: none;
            font-weight: bold;
        }

        .sensor-header h2 {
            font-size: 0.875rem;
        }

    .warning-callout {
        color: #222

    }

.sensor-details {
    font-size: 0.875rem;
}

.sensor-details p {
    margin-bottom: 0.25rem;
}

    .sensor-details p span {
        font-weight: 700;
    }



.detail-legend .legend-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-gap: 0.75rem;
}

.card-legend .legend-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    grid-gap: 0.85rem;
}

.subscription-legend .legend-items {
}

    .legend-item  {
        padding: 1rem;
    }

    .legend-item .primary-level {
        font-size: 1.75rem;
        font-weight: 700;
    }

    .legend-item .secondary-level {
        font-size: 0.875rem;
        font-weight: 500;
    }

        .legend-item .disabled {
            background-color: #495057 !important;
        }

.subscription-legend .legend-item {
    margin-bottom: .4em;
}

.card-legend .legend-item {
    padding: .55rem;
}

    .card-legend .legend-item .primary-level,
    .subscription-legend .legend-item .primary-level {
        font-size: 1.25rem;
        font-weight: 500;
    }

    .card-legend .legend-item .secondary-level,
    .subscription-legend .legend-item secondary-level {
        font-size: 0.775rem;
        font-weight: 400;
    }
    
    .legend-item.sensor-level-ok {
        background: var(--level-ok);
    }

    .legend-item.sensor-level-empty {
        background: var(--level-empty);
    }

    .legend-item.sensor-level-t1 {
        background: var(--level-t1);
    }

    .legend-item.sensor-level-t2{
        background: var(--level-t2);
    }

    .legend-item.sensor-level-ct {
        background: var(--level-ct);
    }

    .legend-item.sensor-level-wl1 {
        background: var(--level-wl1);
    }

    .legend-item.sensor-level-wl2 {
        background: var(--level-wl2);
    }

    .legend-item.sensor-level-wl3{
        background: var(--level-wl3);
    }

    .legend-item.sensor-level-fill {
        background: var(--level-fill);
    }

    
.warning-callouts {
    margin-bottom: .2rem;
}

    .warning-callouts .warning-callout {
        margin-right: .1rem;
    }

        .warning-callouts .warning-callout > h3 {
            min-width: 26px;
        }


.site-warning-count, .dtro-counter {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 700

}

/* Chart Preview */
/* ------------------------------- */

.sensor-chart {
    position: relative;
    z-index: 9;
    background: var(--white);
    padding: .25em 1em 1em 0.5em;
    margin: 0;
}

/* Warning Levels */
/* ------------------------------- */

.sensor-callout h3,
.warning-callout h3 {
    font-size: .675rem;
    text-align: center;
    position: relative;
    margin: 0.25rem;
    color: var(--text-dark);
    font-weight: 500
}

.warning-callout.sensor-level-empty h3,
.warning-callout.sensor-level-ok h3 {
    color: var(--white);
}


.sensor-warning-level {
    position: relative;
    z-index: 10;
    font-size: 1.25rem

}

    .sensor-warning-level .badge {
        font-weight: 700;
        color: var(--white);
        width: 100%;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

.sensor-level {
    line-height: 1;
    color: var(--text-dark);
}

    .sensor-level .primary-level {
        font-size: 1rem;
        font-weight: 800;
    }

    .sensor-level .primary-level.reading-lg {
        font-size: 2.25rem;
    }

    .sensor-level .secondary-level {
        font-size: 0.675rem;
        font-weight: 500;
    }

    .card-detail .sensor-level .primary-level {
        font-size: 2rem;
    }

    .card-detail .sensor-level .secondary-level {
        font-size: 0.875rem;
    }



/* Color coding of sensor warning levels */
/* ------------------------------- */

/* Neutral box, for info */
.warning-callout.sensor-level-info {
    background: var(--brand-gray)
}


/* No Warning */
.sensor-level-ok .dtro-counter {
    color: var(--level-ok-dark);
}

.sensor-level-ok .sensor-warning-level .badge,
.warning-callout.sensor-level-ok {
    background: var(--level-ok);
    color: var(--white);
}

.sensor-level-ok .sensor-toolbar {
    background: var(--level-ok-light);
    color: var(--white);
}


/* Change Threshold */
.sensor-level-ct .dtro-counter {
    color: var(--level-ct-dark);
}

.sensor-level-ct .sensor-warning-level .badge,
.warning-callout.sensor-level-ct {
    color: var(--text-dark);
    background: var(--level-ct);
}

.sensor-level-ct .sensor-toolbar {
    background: var(--level-ct-light);
}


/* Warning Level 1  */
.sensor-level-wl1 .dtro-counter {
    color: var(--level-wl1-dark);
}

.sensor-level-wl1 .sensor-warning-level .badge,
.warning-callout.sensor-level-wl1 {
    color: var(--text-dark);
    background: var(--level-wl1);
}

.sensor-level-wl1 .sensor-toolbar {
    background: var(--level-wl1-light);
}

/* Warning Level 2 */

.sensor-level-wl2 .dtro-counter {
    color: var(--level-wl2-dark);
}

.sensor-level-wl2 .sensor-warning-level .badge,
.warning-callout.sensor-level-wl2 {
    background: var(--level-wl2);
}

.sensor-level-wl2 .sensor-toolbar {
    background: var(--level-wl2-light);
}

/* Warning Level 3 */

.sensor-level-wl3 .dtro-counter {
    color: var(--level-wl3-dark);
}

.sensor-level-wl3 .sensor-warning-level .badge,
.warning-callout.sensor-level-wl3 {
    background: var(--level-wl3);
}

.sensor-level-wl3 .sensor-toolbar {
    background: var(--level-wl3-light);
}


/* Warning Level Empty */
.sensor-level-empty .dtro-counter {
    color: var(--level-empty-dark);
}

.sensor-level-empty .sensor-warning-level .badge,
.warning-callout.sensor-level-empty {
    color: var(--white);
    background: var(--level-empty)
}

.sensor-level-empty .sensor-toolbar {
    background: var(--level-empty-light);
}



/* Transition 1  */
.sensor-level-t1 .dtro-counter {
    color: var(--level-t1-dark);
}

.sensor-level-t1 .sensor-warning-level .badge,
.warning-callout.sensor-level-t1 {
    background: var(--level-t1)
}

.sensor-level-t1 .sensor-toolbar {
    background: var(--level-t1-light);
}

/* Transition 2 */

.sensor-level-t2 .dtro-counter {
    color: var(--level-t2-dark);
}

.sensor-level-t2 .sensor-warning-level .badge,
.warning-callout.sensor-level-t2 {
    background: var(--level-t2)
}

.sensor-level-t2 .sensor-toolbar {
    background: var(--level-t2-light);
}

/* DTRO Notification */

.sensor-level-dtro .dtro-counter {
    color: var(--dtro-alert-light);
}

.warning-callout.sensor-level-dtro h3{
    color: var(--dtro-alert-light);
}

.sensor-level-dtro .sensor-warning-level .badge,
.warning-callout.sensor-level-dtro {
    color: var(--dtro-alert-light);
    background: var(--dtro-alert)
}

.sensor-level-dtro .sensor-toolbar {
    background: var(--dtro-alert-light);
}

/* Summary Notification */

.text-level-summary {
    color: var(--summary-alert) !important;
}

.sensor-level-summary .dtro-counter {
    color: var(--summary-alert-light);
}

.warning-callout.sensor-level-summary h3 {
    color: var(--summary-alert-light);
}

.sensor-level-summary .sensor-warning-level .badge,
.warning-callout.sensor-level-summary {
    color: var(--summary-alert-light);
    background: var(--summary-alert);
}

.sensor-level-summary .sensor-toolbar {
    background: var(--summary-alert-light);
}

/* Alerts Aggregiate Notification */
.warning-callout.sensor-level-alerts h3 {
    color: var(--level-alerts-light);
}

.sensor-level-alerts .sensor-warning-level .badge,
.warning-callout.sensor-level-alerts {
    color: var(--level-alerts-light);
    background: var(--level-alerts)
}

.sensor-level-alerts .sensor-toolbar {
    background: var(--level-alerts-light);
}

.text-level-alerts {
    color: var(--level-alerts) !important;
}

/* DTRO Notification */

.sensor-level-dtro .dtro-counter {
    color: var(--dtro-alert-light);
}

.warning-callout.sensor-level-dtro h3{
    color: var(--dtro-alert-light);
}

.sensor-level-dtro .sensor-warning-level .badge,
.warning-callout.sensor-level-dtro {
    color: var(--dtro-alert-light);
    background: var(--dtro-alert)
}

.sensor-level-dtro .sensor-toolbar {
    background: var(--dtro-alert-light);
}

/* Offline Notification */

.warning-callout.sensor-level-offline h3 {
    color: var(--offline-alert-light);
}

.sensor-level-offline .sensor-warning-level .badge,
.warning-callout.sensor-level-offline {
    color: var(--offline-alert-light);
    background: var(--offline-alert)
}

.sensor-level-offline .sensor-toolbar {
    background: var(--offline-alert-light);
}


/* Summary Notification */

.text-level-summary {
    color: var(--summary-alert) !important;
}

.sensor-level-summary .dtro-counter {
    color: var(--summary-alert-light);
}

.warning-callout.sensor-level-summary h3 {
    color: var(--summary-alert-light);
}

.sensor-level-summary .sensor-warning-level .badge,
.warning-callout.sensor-level-summary {
    color: var(--summary-alert-light);
    background: var(--summary-alert);
}

.sensor-level-summary .sensor-toolbar {
    background: var(--summary-alert-light);
}


/*.level-bg.sensor-level-ok {
    background: var(--level-ok);
}
*/
.level-bg.sensor-level-empty {
    background: var(--level-empty);
}

.level-bg.sensor-level-t1 {
    background: var(--level-t1);
}

.level-bg.sensor-level-t2 {
    background: var(--level-t2);
}

.level-bg.sensor-level-ct {
    background: var(--level-ct);
}

.level-bg.sensor-level-wl1 {
    background: var(--level-wl1);
}

.level-bg.sensor-level-wl2 {
    background: var(--level-wl2);
}

.level-bg.sensor-level-wl3 {
    background: var(--level-wl3);
}


.level-color.sensor-level-empty {
    color: var(--level-empty);
}

.level-color.sensor-level-t1 {
    color: var(--level-t1);
}

.level-color.sensor-level-t2 {
    color: var(--level-t2);
}

.level-color.sensor-level-ct {
    color: var(--level-ct);
}

.level-color.sensor-level-wl1 {
    color: var(--level-wl1);
}

.level-color.sensor-level-wl2 {
    color: var(--level-wl2);
}

.level-color.sensor-level-wl3 {
    color: var(--level-wl3);
}



/* Icons */
/* ------------------------------- */
/* Battery Levels */
.fa-battery-empty {
    color: var(--level-empty);

}

.fa-battery-quarter {
    color: var(--level-wl3);
}

.fa-battery-bolt {
    color: var(--level-ok)

}


/* Signal strength */
.one-bar {
    clip-path: inset(0px 22px 0px 0px);
    -webkit-clip-path: inset(0px 22px 0px 0px);  /*Safari*/
}

.two-bars {
    clip-path: inset(0px 15px 0px 0px);
    -webkit-clip-path: inset(0px 15px 0px 0px);  /*Safari*/
}

.three-bars {
    clip-path: inset(0px 10px 0px 0px);
    -webkit-clip-path: inset(0px 10px 0px 0px); /*Safari*/

}

.four-bars {
    clip-path: inset(0px 5px 0px 0px);
    -webkit-clip-path: inset(0px 5px 0px 0px);  /*Safari*/
}

.bg-bars {
    opacity: 0.2;
}

.device-not-reporting {
        opacity: .55;
        background: rgba(250, 250, 250, .75);
    }

    .device-not-reporting .sensor-warning-level,
    .device-not-reporting .dtro-counter,
    .device-not-reporting .sensor-level {
        text-decoration: line-through;
    }

    .device-not-reporting  .text-7em  {
        font-size: 1.2em;
    }

/* Device Details */
.device-edit-toolbar {
    position: relative;
    display: -ms-inline-flexbox;
    display: inline-flex;
    vertical-align: middle;
    box-sizing: border-box;
}

@media (max-width: 350px) {
    .device-edit-toolbar {
        position: relative;
        display: grid;
        vertical-align: middle;
        border-radius: 0px;
        grid-template-columns: repeat(2, 1fr);
    }
}