﻿.widget-body {
    overflow: hidden;
}

    .widget-body hr {
        margin-top: 0;
        margin-bottom: 6px;
    }

.widget-container {
    container-type: size;
}

.metricsBar {
    
}

.widget-main-value {
    font-size: 27cqmin;
    white-space: nowrap;
    font-family: "Inter", sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
}

.widget-secondary-value {
    font-size: 12cqmin;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.widget-tertiary-value {
    font-size: 7cqmin;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.widget-text {
    font-size: 9cqmin;
    white-space: nowrap;
    color: #676767;
    overflow: hidden;
    text-overflow: ellipsis;
}

.widget-value-alert {
    color: #ae3839;
}

.widget-value-good {
    color: #82d243;
}

.widget-parameter-values {
    container-type: inline-size;
}

    .widget-parameter-values .row {
        font-size: clamp(.3em, 4cqw, 1em);
        color: gray;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }

.widget-detail-header {
    font-size: clamp(.8em, 6.5cqh, 1.7em);
    font-weight: bold;
    padding: 1px;
    margin-top: 4px;
    border-bottom: 1px #e0e0e0 dotted;
    white-space: nowrap;
}

.widget-detail-value {
    font-size: clamp(.8em, 6.5cqh, 1.7em);
    white-space: nowrap;
}

.standard-met {
    margin-right: 2px;
    color: green;
}

.standard-met::after {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    margin-left: 3px;
    font-family: "Font Awesome 7 Pro";
    font-weight: 900;
    content: "\e416";
}


.e-dashboardlayout.e-control .e-panel.e-panel-transition {
    border-radius: 8px !important; /* Adjust the radius value as needed */
    overflow: hidden; /* Ensures the content within the panel also respects the rounded corners */
}

.widget-icon-dollar {
    color: #7dc242 !important;
}

.widget-icon-droplet {
    color: #438ed4 !important;
}