/* tagsets/tagdata display cards*/
.tagset-card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* ← this is the magic line */
    gap: 1.5rem; /* same as Bootstrap g-4 */
    padding: 1rem; /* optional */
}

/* Optional: make cards look nice and prevent them from becoming too wide on huge screens */
.card {
    min-height: 12rem; /* or whatever minimum height feels good */
    /* you can still use Bootstrap card classes */
}

tagset-graphical-card-section {
    padding: 0.5rem;
    min-width: 8rem;
    height: 100%;
}

.tagset-card {
    min-width: 550px;
    max-width: 20rem; /* keeps it from growing wider than 20rem */
    min-height: 10rem; /* minimum height so short content doesn't collapse */
    /* Optional: common dashboard card enhancements */
    border-radius: 0.5rem; /* slightly rounder corners if you like */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* subtle shadow */
    transition: transform 0.15s ease, box-shadow 0.15s ease; /* hover lift effect */
}

/* Center all content inside the card-body */
.tagset-card .card-body {
    display: flex;
    flex-direction: column; /* stack children vertically */
    align-items: center; /* horizontal center */
    justify-content: center; /* vertical center */
    text-align: center; /* center text paragraphs, headings, etc. */
    height: 100%; /* make sure it fills the card height */
}

/* Optional: if you have images or other elements that should also center nicely 
    .tagset-card .card-img-top,
    .tagset-card img {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }*/

.tagset-card-title {
    font-size: 1rem; /* ≈24px on default browser font size */
    font-weight: bold; /* equivalent to font-weight: 700 */
    /* Optional: common enhancements for better dashboard look */
    margin-bottom: .5rem; /* more breathing room below the title */
    color: #2c3e50; /* darker, professional text color – adjust as needed */
    line-height: 1.3; /* slightly tighter line height for headings */
}

.tagset-card-value-text {
    font-size: 1rem; /* ≈24px on default browser font size */
    margin-bottom: .5rem; /* more breathing room below the title */
    color: #2c3e50; /* darker, professional text color – adjust as needed */
}

/* Optional hover effect for interactivity */
.tagset-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* end tagset/tagdata cards*/

.indicatorSvg {
    width: 1.5rem;
    height: 1.5rem;
}

.tagSetSteamSvg {
    /*width: 5rem;
    height: 5rem;*/
}

.tagSetRadialGauge {
    /*   width: 10rem;
    height: 10rem;*/
    /* Setting to 100% resizes and displays correctly in the flex container */
    height: 100%;   
    width: 100%;
}

.tagset-responsive-spark {
    width: 100%; /* or 80%, 50vw, etc. – fills parent container */
    height: 5rem; /* rem works great here for scalable height */
    display: inline-block; /* or block/flex depending on context */
    vertical-align: middle;
}

/* Critical: force the inner Kendo sparkline to fill its wrapper 100% */
.tagset-responsive-spark .k-sparkline,
.tagset-responsive-spark .k-sparkline-canvas {
    width: 100% !important;
    height: 100% !important;
}

.tagSetDisplayInfoGaugeHref {
    height: 100%;
    width: 100%;
}

.tagSetLinearGaugeVertical {
    height: 100%;
    width: 100%;
}

.tagSetLinearGaugeHorizontal {
    height: 100%;
    width: 100%;
}

.tagSetIndicatorIcon {
    width: 2rem;
    height: 2rem;
    color: green;
}

/*.tagSetAlarmInfoImageDiv {
    display: flex;
    flex-direction: column;
    align-items: center;
}*/

.tagSetAlarmIndicator {
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: 0.2rem;
}

.tagSetAlarmInfo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.gauge_value_noblink {
    color: black; 
}

.gauge_value_blink {
    color: black;
    
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}