/*
 * Checkpoint bundle styles (charts, opinions, weather, webcams)
 * Source files: v2_style_chart_v2.css, weekday_chart.css, opinions_ppid_v3.css, weather_styles_v2.css, enhanced_status_chips.css, web_cam.css
 */


.chart-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    overflow: hidden; /* Hide overflow to prevent bars from going beyond container */
}

.chart {
    max-width: 100%;
    height: auto;
}

.highlight {
    stroke: #ff9900;
    stroke-width: 2;
}

@media screen and (max-width: 600px) {
    .chart-container {
        padding: 1px;
    }
}

:root {
    --text-color: #000;
    --highlight-color: #ff4500;
}
.chart-container {
    max-width: 95%;
    margin: auto;
    height: auto;
}
.chart {
    max-width:  100%;
    width: 100%;
    height: auto;
}
.labels {
    font-size: 12px;
    fill: var(--text-color);
}
.btn-a {
    fill: #3498db;
}
.btn-a-today {
            fill: #ff4500;
        }
.opinion-card{border-bottom:1px solid #e0e0e0;padding:1rem 0}.opinion-card:last-child{border-bottom:none}.opinion-header{display:flex;align-items:center;margin-bottom:.5rem}.avatar{width:40px;height:40px;background-color:#0d6efd;color:#fff;display:flex;align-items:center;justify-content:center;border-radius:50%;font-weight:700;font-size:1.2rem;text-transform:uppercase}.opinion-meta{margin-left:.75rem}.opinion-meta .author-name{font-weight:700}.opinion-meta .timestamp{font-size:.85rem;color:#6c757d}.star-rating-individual{margin-left:auto;color:#ffc107;font-size:.9rem}.opinion-body{padding-left:52px;color:#212529}.opinion-footer{padding-left:52px}.opinion-footer .thumb-up,.opinion-footer .thumb-down,.opinion-footer .share-btn{cursor:pointer;color:#6c757d}.opinion-footer .thumb-up:hover,.opinion-footer .thumb-down:hover,.opinion-footer .share-btn:hover{color:#0d6efd}.opinion-footer .voted{color:#0d6efd!important;pointer-events:none}.opinion-footer .vote-count{font-size:.9em;margin-left:4px;color:#212529}#opinion-filters .nav-link{color:#0d6efd}#opinion-filters .nav-link.active{color:#495057;background-color:#e9ecef;border-color:#dee2e2 #dee2e6 #fff}.form-control.is-invalid{border-color:#dc3545}.invalid-feedback{color:#dc3545;font-size:.875em;display:none}.form-control.is-invalid ~ .invalid-feedback{display:block}
/* ==========================================================================
   MINI WEATHER WIDGET STYLES
   ========================================================================== */

/* The main container */

/* Scoped selector for the scrollable container */

/* Scoped selector for the scrollable container's scrollbar */

/* Scoped selector for the individual items inside the scroll container */

/* Scoped selector for the hover state of items */

/* Scoped selector for the weather icon image */

/* Scoped selector for scroll buttons */

/* Scoped selector for hover and active states of scroll buttons */

/* ==========================================================================
   RESPONSIVE DESIGN (Scoped)
   ========================================================================== */

/* Tablet and smaller */

/* Mobile phones */

/* Very small screens */.status-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    position: relative;
}


/* Notification dropdown */
/* Arrow indicating dropdown origin */

.loading {
    color: #666;
    font-style: italic;
}

.error {
    color: #d32f2f;
}

@media (max-width: 480px) {
    .status-chips {
        gap: 6px;
    }
    .status-chip {
        padding: 5px 10px;
        font-size: 12px;
    }
}

/* Spinner animation for updating chips */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* Custom CSS for webcam placeholder */
.webcam-placeholder {
        border: 2px solid #ddd;
        border-radius: 5px;
        background-color: #f5f5f5;
        max-width: 600px;
        width: 98%;
        height: 400px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative; /* Added */
}

.fa-camera-slash {
    font-size: 5em;
}

.no-signal-icon {
    position: absolute;
    top: calc(50% - 70px); /* Adjusted top position */
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    color: #ffc107; /* Yellow color for warning */
    font-size: 5em;
}

.no-signal-text {
    position: relative;
    z-index: 2;
}