body {
    font-family: 'Roboto', sans-serif;
    color: white; /* White text */
    background-color: #1c1c1c; /* Background color */
    scroll-behavior: smooth;
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.loader {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #f8d632; /* Primary color for the loader */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
    display: none;
    margin: 0 auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.drawer-side {
    height: 100vh;
    background-color: #1c1c1c; /* Dark sidebar */
}

.drawer-side a {
    color: #f8d632; /* Primary color for sidebar links */
}

.drawer-side a:hover {
    color: white;
    background-color: #1c1c1c; /* Sidebar hover effect */
}

.card-title {
    color: #f8d632; /* Light text for cards */
}

.btn {
    background-color: #f8d632; /* Primary color for buttons */
    color: white; /* Light text on buttons */
}

#pagination > .btn {
    width: 100px;
    color: black;
}

.btn:hover {
    background-color: #e0c12b; /* Slightly darker primary color for hover */
}

.navbar {
    background-color: #f8d632; /* Dark navbar */
    color: black;
    border-bottom: 2px solid #444; /* Navbar bottom border */
}

.navbar a {
    color: #f8d632; /* White text for navbar links */
}

.navbar a:hover {
    color: #f8d632; /* Primary color on hover for navbar links */
}

.navbar h1 {
    color: black; /* Primary color on hover for navbar links */
}

/* Ensure the sidebar takes full height */
.drawer-side {
    height: 100vh; /* Full viewport height */
}

.sc-box {
    background: url(loader.svg) center center no-repeat
}

.radio-color {
    background-color: #f8d632;
}