/*
 * Updated Dark Mode CSS
 *
 * New color palette:
 * -- A clean, dark charcoal for the main background.
 * -- Slightly lighter grays for cards and headers.
 * -- A vibrant cyan accent for primary elements.
 * -- Light gray for text, ensuring high readability.
 */

/* Custom CSS Variables (for easy changes later) */
.dark-mode {
    --primary-color: #00bcd4; /* Vibrant Cyan */
    --secondary-color: #4a5568; /* Blue-Gray */
    --text-color: #e0e0e0; /* Light Gray */
    --secondary-text-color: #a0a0a0; /* Secondary Text Gray */
    --background-color: #121212; /* Deep Charcoal */
    --card-background: #1e1e1e; /* Slightly lighter charcoal */
    --card-header-background: #2c2c2c; /* Mid-tone gray */
    --border-color: #333333; /* Dark Border */
    --input-background: #2c2c2c !important;
    --input-border: #555555 !important;
    --link-color: #00bcd4; /* Cyan for links */
    --separator-color: #444444; /* Darker separator */
}

/* General Body and Main Content Area */
body.dark-mode {
    background-color: var(--background-color) !important;
    color: var(--text-color);
}

body.dark-mode #content {
    background-color: var(--background-color) !important;
}

/* Specific background colors that need overriding */
body.dark-mode .bg-white,
body.dark-mode .bg-light {
    background-color: var(--card-background) !important;
}

/* Adjust text colors */
body.dark-mode .text-gray-900,
body.dark-mode .text-dark,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: var(--text-color) !important;
}

body.dark-mode .text-gray-800 {
    color: var(--text-color) !important;
}

/* Cards (Widgets) */
body.dark-mode .card {
    background-color: var(--card-background) !important;
    color: var(--text-color);
    border-color: var(--border-color) !important;
}

body.dark-mode .card-header {
    background-color: var(--card-header-background) !important;
    color: var(--text-color) !important;
    border-bottom-color: var(--separator-color) !important;
}

/* Sidebar and Navbar (Top Bar) */
body.dark-mode .navbar-nav,
body.dark-mode #accordionSidebar {
    background-color: var(--background-color) !important;
    border-right: 1px solid var(--border-color);
}

/* Sidebar links and active states */
body.dark-mode .sidebar-dark .nav-item .nav-link {
    color: var(--text-color) !important;
}

body.dark-mode .sidebar-dark .nav-item .nav-link.active,
body.dark-mode .sidebar-dark .nav-item .nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(0, 188, 212, 0.15) !important; /* Cyan with opacity */
}

body.dark-mode .collapse-inner {
    background-color: var(--card-header-background) !important;
    color: #ffffff !important;
}

body.dark-mode .collapse-inner .collapse-item {
    color: #ffffff !important;
}

body.dark-mode .collapse-inner .collapse-item:hover {
    color: #ffffff !important;
    background-color: rgba(0, 188, 212, 0.15) !important; /* Cyan with opacity */
}


body.dark-mode .sidebar-dark .sidebar-brand {
    color: var(--text-color) !important;
    background-color: var(--background-color) !important;
}

body.dark-mode .sidebar-dark .sidebar-heading {
    color: var(--secondary-text-color) !important;
}

body.dark-mode .sidebar-dark .sidebar-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Form Controls (Inputs) */
body.dark-mode .form-control {
    background-color: var(--input-background) !important;
    color: var(--text-color);
    border-color: var(--input-border) !important;
}

body.dark-mode .form-control::placeholder {
    color: var(--secondary-text-color);
}

/* Tables */
body.dark-mode .table {
    color: var(--text-color);
}

body.dark-mode .table thead th {
    background-color: var(--card-header-background) !important;
    border-bottom-color: var(--separator-color) !important;
    color: var(--text-color);
}

body.dark-mode .table td,
body.dark-mode .table th {
    border-top-color: var(--border-color) !important;
    border-bottom-color: var(--border-color) !important;
}

/* Striped tables */
body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: #252525 !important;
}

/* Attendance overview boxes (Present, Late, Absent) */
body.dark-mode .attendance-overview-item.present { background-color: #2d8f4b !important; color: #fff !important; }
body.dark-mode .attendance-overview-item.late { background-color: #d9a400 !important; color: #fff !important; }
body.dark-mode .attendance-overview-item.absent { background-color: #b73e4b !important; color: #fff !important; }

body.dark-mode .card .bg-success,
body.dark-mode .card .bg-warning,
body.dark-mode .card .bg-danger {
    color: #fff !important;
}
body.dark-mode .card .bg-success { background-color: #2d8f4b !important; }
body.dark-mode .card .bg-warning { background-color: #d9a400 !important; }
body.dark-mode .card .bg-danger { background-color: #b73e4b !important; }


/* Adjust the sidebar toggle button */
body.dark-mode #sidebarToggle {
    background-color: var(--card-header-background) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode #sidebarToggle:hover {
    background-color: #383838 !important;
}

/* Topbar search/dropdowns */
body.dark-mode .topbar {
    background-color: var(--card-background) !important;
}

body.dark-mode .dropdown-menu {
    background-color: var(--card-background) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .dropdown-item {
    color: var(--text-color) !important;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: var(--card-header-background) !important;
}

body.dark-mode .nav-item .nav-link .badge-counter {
    background-color: #e74a3b !important; /* Keep original red */
    color: #fff !important;
}

/* Adjust card border colors for dark mode */
body.dark-mode .card.border-left-primary { border-left-color: var(--primary-color) !important; }
body.dark-mode .card.border-left-success { border-left-color: #2d8f4b !important; }
body.dark-mode .card.border-left-info { border-left-color: #00bcd4 !important; }
body.dark-mode .card.border-left-warning { border-left-color: #d9a400 !important; }
body.dark-mode .card.bg-info { background-color: #00bcd4 !important; }

/* List Group */
body.dark-mode .list-group {
    background-color: var(--card-background) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .list-group-item {
    background-color: var(--card-background) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .list-group-item-action:hover,
body.dark-mode .list-group-item-action:focus {
    background-color: var(--card-header-background) !important;
    color: #ffffff !important;
}

body.dark-mode .list-group-item .badge {
    color: #fff !important;
}

body.dark-mode .list-group-item .badge-danger {
    background-color: #b73e4b !important;
}

/* Alerts */
body.dark-mode .alert {
    border-width: 1px;
    border-style: solid;
}

body.dark-mode .alert-info {
    background-color: #1a2a3a !important;
    border-color: #4a6a8a !important;
    color: #8acfe7 !important;
}

body.dark-mode .alert-success {
    background-color: #2d8f4b !important;
    border-color: #247a3d !important;
    color: #c8e7cf !important;
}

body.dark-mode .alert-warning {
    background-color: #d9a400 !important;
    border-color: #b38500 !important;
    color: #fff7e6 !important;
}

body.dark-mode .alert-danger {
    background-color: #b73e4b !important;
    border-color: #9c333f !important;
    color: #f7ced3 !important;
}

body.dark-mode .dropdown-header {
    background-color: var(--card-header-background) !important;
    color: var(--text-color) !important;
    border-bottom: 1px solid var(--separator-color) !important;
}

/* Modals */
body.dark-mode .modal-content {
    background-color: var(--card-background) !important;
    color: var(--text-color);
    border: 1px solid var(--border-color) !important;
}

body.dark-mode .modal-header {
    background-color: var(--card-header-background) !important;
    color: var(--text-color) !important;
    border-bottom: 1px solid var(--separator-color) !important;
}

body.dark-mode .modal-title {
    color: var(--text-color) !important;
}

body.dark-mode .modal-body {
    background-color: var(--card-background) !important;
    color: var(--text-color);
}

body.dark-mode .modal-footer {
    background-color: var(--card-header-background) !important;
    border-top: 1px solid var(--separator-color) !important;
}

body.dark-mode .modal-header .close {
    color: var(--text-color) !important;
    opacity: 0.7 !important;
}

body.dark-mode .modal-header .close:hover {
    opacity: 1 !important;
}

body.dark-mode .modal-footer .btn-secondary {
    background-color: var(--input-border) !important;
    border-color: var(--input-border) !important;
    color: #fff !important;
}

body.dark-mode .modal-footer .btn-secondary:hover {
    background-color: #666666 !important;
    border-color: #666666 !important;
}

/* DataTables Dark Mode Styling */
body.dark-mode .dataTables_wrapper .pagination .page-item .page-link {
    background-color: var(--card-header-background);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

body.dark-mode .dataTables_wrapper .pagination .page-item .page-link:hover {
    background-color: var(--input-background);
    color: #fff;
    border-color: var(--input-border);
}

body.dark-mode .dataTables_wrapper .pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    color: #fff;
    border-color: #008c9e;
}

body.dark-mode .dataTables_wrapper .pagination .page-item.active .page-link:hover {
    background-color: #008c9e;
    border-color: #007383;
}

body.dark-mode .dataTables_wrapper .pagination .page-item.disabled .page-link {
    background-color: var(--card-header-background);
    color: var(--secondary-text-color);
    border-color: var(--border-color);
    cursor: not-allowed;
}

body.dark-mode .dataTables_wrapper .dataTables_info {
    color: var(--text-color);
}

body.dark-mode .dataTables_wrapper .dataTables_filter label,
body.dark-mode .dataTables_wrapper .dataTables_length label {
    color: var(--text-color);
}

body.dark-mode .dataTables_wrapper .dataTables_filter input,
body.dark-mode .dataTables_wrapper .dataTables_length select {
    background-color: var(--input-background);
    color: var(--text-color);
    border: 1px solid var(--input-border);
}

body.dark-mode .dataTables_wrapper .dataTables_filter input:focus,
body.dark-mode .dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(0, 188, 212, 0.25);
}

body.dark-mode .dataTables_wrapper .dataTable thead .sorting:before,
body.dark-mode .dataTables_wrapper .dataTable thead .sorting:after,
body.dark-mode .dataTables_wrapper .dataTable thead .sorting_asc:before,
body.dark-mode .dataTables_wrapper .dataTable thead .sorting_asc:after,
body.dark-mode .dataTables_wrapper .dataTable thead .sorting_desc:before,
body.dark-mode .dataTables_wrapper .dataTable thead .sorting_desc:after {
    color: var(--text-color) !important;
}


/* Sidebar and Navbar (Top Bar) */
body.dark-mode #accordionSidebar,
body.dark-mode .sidebar-dark {
    /* This rule is crucial to override the gradient */
    background-image: none !important;
    background-color: var(--background-color) !important;
    border-right: 1px solid var(--border-color);
}
body.dark-mode .topbar {
    background-color: var(--card-background) !important;
    color: var(--text-color) !important; /* Ensures text inside is dark-mode friendly */
}

body.dark-mode .topbar .nav-link,
body.dark-mode .topbar .nav-link i {
    color: var(--text-color) !important; /* For the icons and links */
}

body.dark-mode .topbar .nav-link:hover,
body.dark-mode .topbar .nav-link:focus {
    color: var(--text-color) !important;
}

/* Styling for search results when dark mode is active */
body.dark-mode .search-results-item {
    background-color: #333;
    color: #f8f9fa;
    border: 1px solid #444;
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 5px;
}

body.dark-mode .search-results {
    background-color: #333;
    color: #f8f9fa;
    border: 1px solid #444;
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 5px;
}

/*
 * Updated Dark Mode CSS
 *
 * New color palette:
 * -- A clean, dark charcoal for the main background.
 * -- Slightly lighter grays for cards and headers.
 * -- A vibrant cyan accent for primary elements.
 * -- Light gray for text, ensuring high readability.
 */

/* Custom CSS Variables (for easy changes later) */
.dark-mode {
    --primary-color: #00bcd4; /* Vibrant Cyan */
    --secondary-color: #4a5568; /* Blue-Gray */
    --text-color: #e0e0e0; /* Light Gray */
    --secondary-text-color: #a0a0a0; /* Secondary Text Gray */
    --background-color: #121212; /* Deep Charcoal */
    --card-background: #1e1e1e; /* Slightly lighter charcoal */
    --card-header-background: #2c2c2c; /* Mid-tone gray */
    --border-color: #333333; /* Dark Border */
    --input-background: #2c2c2c !important;
    --input-border: #555555 !important;
    --link-color: #00bcd4; /* Cyan for links */
    --separator-color: #444444; /* Darker separator */
}

/* General Body and Main Content Area */
body.dark-mode {
    background-color: var(--background-color) !important;
    color: var(--text-color);
}

body.dark-mode #content {
    background-color: var(--background-color) !important;
}

/* Specific background colors that need overriding */
body.dark-mode .bg-white,
body.dark-mode .bg-light {
    background-color: var(--card-background) !important;
}

/* Adjust text colors */
body.dark-mode .text-gray-900,
body.dark-mode .text-dark,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: var(--text-color) !important;
}

body.dark-mode .text-gray-800 {
    color: var(--text-color) !important;
}

/* Cards (Widgets) */
body.dark-mode .card {
    background-color: var(--card-background) !important;
    color: var(--text-color);
    border-color: var(--border-color) !important;
}

body.dark-mode .card-header {
    background-color: var(--card-header-background) !important;
    color: var(--text-color) !important;
    border-bottom-color: var(--separator-color) !important;
}

/* Sidebar and Navbar (Top Bar) */
body.dark-mode .navbar-nav,
body.dark-mode #accordionSidebar {
    background-color: var(--background-color) !important;
    border-right: 1px solid var(--border-color);
}

/* Sidebar links and active states */
body.dark-mode .sidebar-dark .nav-item .nav-link {
    color: var(--text-color) !important;
}

body.dark-mode .sidebar-dark .nav-item .nav-link.active,
body.dark-mode .sidebar-dark .nav-item .nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(0, 188, 212, 0.15) !important; /* Cyan with opacity */
}

body.dark-mode .collapse-inner {
    background-color: var(--card-header-background) !important;
    color: #ffffff !important;
}

body.dark-mode .collapse-inner .collapse-item {
    color: #ffffff !important;
}

body.dark-mode .collapse-inner .collapse-item:hover {
    color: #ffffff !important;
    background-color: rgba(0, 188, 212, 0.15) !important; /* Cyan with opacity */
}


body.dark-mode .sidebar-dark .sidebar-brand {
    color: var(--text-color) !important;
    background-color: var(--background-color) !important;
}

body.dark-mode .sidebar-dark .sidebar-heading {
    color: var(--secondary-text-color) !important;
}

body.dark-mode .sidebar-dark .sidebar-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Form Controls (Inputs) */
body.dark-mode .form-control {
    background-color: var(--input-background) !important;
    color: var(--text-color);
    border-color: var(--input-border) !important;
}

body.dark-mode .form-control::placeholder {
    color: var(--secondary-text-color);
}

/* Tables */
body.dark-mode .table {
    color: var(--text-color);
}

body.dark-mode .table thead th {
    background-color: var(--card-header-background) !important;
    border-bottom-color: var(--separator-color) !important;
    color: var(--text-color);
}

body.dark-mode .table td,
body.dark-mode .table th {
    border-top-color: var(--border-color) !important;
    border-bottom-color: var(--border-color) !important;
}

/* Striped tables */
body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: #252525 !important;
}

/* Attendance overview boxes (Present, Late, Absent) */
body.dark-mode .attendance-overview-item.present { background-color: #2d8f4b !important; color: #fff !important; }
body.dark-mode .attendance-overview-item.late { background-color: #d9a400 !important; color: #fff !important; }
body.dark-mode .attendance-overview-item.absent { background-color: #b73e4b !important; color: #fff !important; }

body.dark-mode .card .bg-success,
body.dark-mode .card .bg-warning,
body.dark-mode .card .bg-danger {
    color: #fff !important;
}
body.dark-mode .card .bg-success { background-color: #2d8f4b !important; }
body.dark-mode .card .bg-warning { background-color: #d9a400 !important; }
body.dark-mode .card .bg-danger { background-color: #b73e4b !important; }


/* Adjust the sidebar toggle button */
body.dark-mode #sidebarToggle {
    background-color: var(--card-header-background) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode #sidebarToggle:hover {
    background-color: #383838 !important;
}

/* Topbar search/dropdowns */
body.dark-mode .topbar {
    background-color: var(--card-background) !important;
}

body.dark-mode .dropdown-menu {
    background-color: var(--card-background) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .dropdown-item {
    color: var(--text-color) !important;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-item:focus {
    background-color: var(--card-header-background) !important;
}

body.dark-mode .nav-item .nav-link .badge-counter {
    background-color: #e74a3b !important; /* Keep original red */
    color: #fff !important;
}

/* Adjust card border colors for dark mode */
body.dark-mode .card.border-left-primary { border-left-color: var(--primary-color) !important; }
body.dark-mode .card.border-left-success { border-left-color: #2d8f4b !important; }
body.dark-mode .card.border-left-info { border-left-color: #00bcd4 !important; }
body.dark-mode .card.border-left-warning { border-left-color: #d9a400 !important; }
body.dark-mode .card.bg-info { background-color: #00bcd4 !important; }

/* List Group */
body.dark-mode .list-group {
    background-color: var(--card-background) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .list-group-item {
    background-color: var(--card-background) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .list-group-item-action:hover,
body.dark-mode .list-group-item-action:focus {
    background-color: var(--card-header-background) !important;
    color: #ffffff !important;
}

body.dark-mode .list-group-item .badge {
    color: #fff !important;
}

body.dark-mode .list-group-item .badge-danger {
    background-color: #b73e4b !important;
}

/* Alerts */
body.dark-mode .alert {
    border-width: 1px;
    border-style: solid;
}

body.dark-mode .alert-info {
    background-color: #1a2a3a !important;
    border-color: #4a6a8a !important;
    color: #8acfe7 !important;
}

body.dark-mode .alert-success {
    background-color: #2d8f4b !important;
    border-color: #247a3d !important;
    color: #c8e7cf !important;
}

body.dark-mode .alert-warning {
    background-color: #d9a400 !important;
    border-color: #b38500 !important;
    color: #fff7e6 !important;
}

body.dark-mode .alert-danger {
    background-color: #b73e4b !important;
    border-color: #9c333f !important;
    color: #f7ced3 !important;
}

body.dark-mode .dropdown-header {
    background-color: var(--card-header-background) !important;
    color: var(--text-color) !important;
    border-bottom: 1px solid var(--separator-color) !important;
}

/* Modals */
body.dark-mode .modal-content {
    background-color: var(--card-background) !important;
    color: var(--text-color);
    border: 1px solid var(--border-color) !important;
}

body.dark-mode .modal-header {
    background-color: var(--card-header-background) !important;
    color: var(--text-color) !important;
    border-bottom: 1px solid var(--separator-color) !important;
}

body.dark-mode .modal-title {
    color: var(--text-color) !important;
}

body.dark-mode .modal-body {
    background-color: var(--card-background) !important;
    color: var(--text-color);
}

body.dark-mode .modal-footer {
    background-color: var(--card-header-background) !important;
    border-top: 1px solid var(--separator-color) !important;
}

body.dark-mode .modal-header .close {
    color: var(--text-color) !important;
    opacity: 0.7 !important;
}

body.dark-mode .modal-header .close:hover {
    opacity: 1 !important;
}

body.dark-mode .modal-footer .btn-secondary {
    background-color: var(--input-border) !important;
    border-color: var(--input-border) !important;
    color: #fff !important;
}

body.dark-mode .modal-footer .btn-secondary:hover {
    background-color: #666666 !important;
    border-color: #666666 !important;
}

/* DataTables Dark Mode Styling */
body.dark-mode .dataTables_wrapper .pagination .page-item .page-link {
    background-color: var(--card-header-background);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

body.dark-mode .dataTables_wrapper .pagination .page-item .page-link:hover {
    background-color: var(--input-background);
    color: #fff;
    border-color: var(--input-border);
}

body.dark-mode .dataTables_wrapper .pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    color: #fff;
    border-color: #008c9e;
}

body.dark-mode .dataTables_wrapper .pagination .page-item.active .page-link:hover {
    background-color: #008c9e;
    border-color: #007383;
}

body.dark-mode .dataTables_wrapper .pagination .page-item.disabled .page-link {
    background-color: var(--card-header-background);
    color: var(--secondary-text-color);
    border-color: var(--border-color);
    cursor: not-allowed;
}

body.dark-mode .dataTables_wrapper .dataTables_info {
    color: var(--text-color);
}

body.dark-mode .dataTables_wrapper .dataTables_filter label,
body.dark-mode .dataTables_wrapper .dataTables_length label {
    color: var(--text-color);
}

body.dark-mode .dataTables_wrapper .dataTables_filter input,
body.dark-mode .dataTables_wrapper .dataTables_length select {
    background-color: var(--input-background);
    color: var(--text-color);
    border: 1px solid var(--input-border);
}

body.dark-mode .dataTables_wrapper .dataTables_filter input:focus,
body.dark-mode .dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(0, 188, 212, 0.25);
}

body.dark-mode .dataTables_wrapper .dataTable thead .sorting:before,
body.dark-mode .dataTables_wrapper .dataTable thead .sorting:after,
body.dark-mode .dataTables_wrapper .dataTable thead .sorting_asc:before,
body.dark-mode .dataTables_wrapper .dataTable thead .sorting_asc:after,
body.dark-mode .dataTables_wrapper .dataTable thead .sorting_desc:before,
body.dark-mode .dataTables_wrapper .dataTable thead .sorting_desc:after {
    color: var(--text-color) !important;
}


body.dark-mode .btn-primary:hover {
    background-color: #00a4b8 !important;
    border-color: #00a4b8 !important;
}

body.dark-mode .small,
body.dark-mode .text-small {
    color: var(--secondary-text-color) !important;
}


body.dark-mode .form-check-label {
    color: var(--text-color) !important;
}


/* Sidebar and Navbar (Top Bar) */
body.dark-mode #accordionSidebar,
body.dark-mode .sidebar-dark {
    /* This rule is crucial to override the gradient */
    background-image: none !important;
    background-color: var(--background-color) !important;
    border-right: 1px solid var(--border-color);
}
body.dark-mode .topbar {
    background-color: var(--card-background) !important;
    color: var(--text-color) !important; /* Ensures text inside is dark-mode friendly */
}

body.dark-mode .topbar .nav-link,
body.dark-mode .topbar .nav-link i {
    color: var(--text-color) !important; /* For the icons and links */
}

body.dark-mode .topbar .nav-link:hover,
body.dark-mode .topbar .nav-link:focus {
    color: var(--text-color) !important;
}

/* Styling for search results when dark mode is active */
body.dark-mode .search-results-item {
    background-color: #333;
    color: #f8f9fa;
    border: 1px solid #444;
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 5px;
}

body.dark-mode .search-results {
    background-color: #333;
    color: #f8f9fa;
    border: 1px solid #444;
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 5px;
}