/* Custom card styling */
.card {
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    transition: transform 0.2s ease;
    
    
}
.card:hover {
    transform: translateY(-10px);
}
.card-header {
    background-color: #6c757d;
    border-bottom: 0.5px solid #00000026 !important;
    font-weight: 1000;
    text-transform: uppercase;
    text-align: center;
    color:#FFFFFF;
}

.card-text {
    font-size: 2.5rem;
    font-weight: 700;
}
.btn-custom {
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 600;
}

/* Custom gradient backgrounds */
.bg-gradient-primary {
    background: linear-gradient(90deg, #007bff 0%, #6610f2 100%);
}
.bg-gradient-info {
    background: linear-gradient(90deg, #17a2b8 0%, #6c757d 100%);
}
.bg-gradient-warning {
    background: linear-gradient(90deg, #ffc107 0%, #fd7e14 100%);
}
.bg-gradient-success {
    background: linear-gradient(90deg, #28a745 0%, #218838 100%);
}
.bg-gradient-danger {
    background: linear-gradient(90deg, #dc3545 0%, #c82333 100%);
}

#chartContainerWrapper {
    overflow-x: auto; /* Allows horizontal scrolling if needed */
    width: 100%; /* Full width to fit the screen */
    padding: 10px; /* Optional: add padding for better spacing */
}

#chartContainer {
    width: 100%; /* Full width for responsive design */
}

@media (max-width: 768px) {
    #chartContainer {
        height: 300px; /* Adjust height for smaller screens */
    }
}

@media (max-width: 480px) {
    #chartContainer {
        height: 200px; /* Further adjust height for very small screens */
    }
}