/* Same font face as the original EveryWare UI: Montserrat Regular only, bold weights are synthesized by the browser. */
@font-face {
    font-family: montserrat;
    font-style: normal;
    font-weight: 400;
    src: local("Montserrat Regular"), local("MontserratRegular"), local("Montserrat"),
         url("../fonts/Montserrat-Regular.otf") format("opentype");
}

.dv-root {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    gap: 16px;
}

.dv-sidebar {
    flex: 0 0 260px;
    border-right: 1px solid #ddd;
    padding-right: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.dv-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
}

.dv-header {
    margin-right: 10px;
}

.dv-chart {
    flex: 1 1 auto;
    min-height: 320px;
}

.dv-error {
    white-space: pre-line;
    color: #b00020;
    border: 1px solid #b00020;
    padding: 8px 12px;
    margin-right: 10px;
    font-size: 12px;
}

/* Text style of the original EveryWare header: Montserrat 13px bold, 20px lines, labels and values the same. */
.total-usage {
    display: flex;
    flex-direction: column;
    font-family: montserrat, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0.13132px;
    color: #000;
}

    /* Rows, columns and spacing as the original: columns as wide as their content, spread over the row. */
    .total-usage .total-usage-row {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding-right: 16px;
    }

    .total-usage ul {
        list-style: none;
        margin: 0;
        padding: 0 0 0 40px;
    }

    .total-usage li {
        display: flex;
        justify-content: space-between;
        padding: 0;
    }

        .total-usage li > span:first-child {
            padding-right: 32px;
        }

        /* last-of-type, not last-child: the AHI row ends with the diagnostics dot button. */
        .total-usage li > span:last-of-type {
            text-align: right;
        }

    /* Diagnostics toggle: a small dot absolutely positioned under the AHI row, so it takes no space in the header. */
    .total-usage li.total-usage-ahi {
        position: relative;
    }

    .diagnostics-dot {
        position: absolute;
        left: 0;
        top: calc(100% + 6px);
        width: 8px;
        height: 8px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: #ccc;
        cursor: pointer;
    }

        .diagnostics-dot:hover {
            background: #888;
        }

.page-loader {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    height: 100%;
}

.page-loader-absolute {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

.page-loader-spinner {
    width: 48px;
    height: 48px;
    border: 5px solid #def3de;
    border-top-color: #6d8a87;
    border-radius: 50%;
    animation: loader-spin 0.8s linear infinite;
}

@keyframes loader-spin {
    to {
        transform: rotate(360deg);
    }
}