/* Sidebar Panel */
.panel-sidebar {
    background-color: #f8f9fa; /* Light background */
    border: 1px solid #e0e0e0; /* Subtle border */
    border-radius: 5px; /* Rounded corners */
    margin-bottom: 15px; /* Spacing between panels */
}

/* Header Styles */
.panel-heading {
    background-color: #007bff; /* Header background */
    color: #ffffff; /* Header text color */
    font-weight: bold; /* Bold header text */
    padding: 10px 15px; /* Padding */
}

/* Button Styles */
.btn-custom {
    background-color: #28a745; /* Button background */
    color: #ffffff; /* Button text color */
    border-radius: 20px; /* Rounded corners */
}

.btn-custom:hover {
    background-color: #218838; /* Darker on hover */
}

/* Toggle Icons */
.panel-title {
    display: inline;

.panel-title .fas {
    margin-right: 10px;
    /* Space between icon and text */
    transition: transform 0.3s;
    /* Smooth rotation */
}

/* Change icon rotation on toggle */
.panel-heading.collapsed .fas {
    transform: rotate(180deg);
    /* Rotate the icon */
}

.panel-title:hover .fas {
    color: #ffcc00; /* Change color on hover */
}

/* Badge Styles */
.list-group .badge {
    background-color: #007bff; /* Badge background */
    color: #ffffff; /* Badge text color */
    border-radius: 10px; /* Rounded corners */
    padding: 5px 10px; /* Padding */
}

/* Form Styles */
.form-control {
    border-radius: 5px; /* Rounded corners */
    border: 1px solid #ced4da; /* Subtle border */
    padding: 10px; /* Padding */
}

/* Hover Effects for Menu Items */
.list-group-item:hover {
    background-color: #e9ecef; /* Highlight on hover */
}

/* Active State */
.list-group-item.active {
    background-color: #007bff; /* Active background */
    color: #ffffff; /* Active text color */
}

.panel-body {
    padding: 10px;
}
.panel-footer.clearfix {
    padding: 0 10px 10px 10px;
}