/* Reset */
body, html {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   height: 100%;
}

/* Full-height layout */
body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
}

header {
   background-color: #f8f9fa; /* Light gray background */
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

header .navbar-brand {
   font-weight: bold;
   color: #007bff;
}

main {
   flex: 1; /* Takes up all available space */
   width: 100%; /* Full width */
   padding: 2rem;
   background-color: #f5f5f5; /* Light gray background for content area */
}

footer {
   background-color: #343a40; /* Dark gray background */
   color: white;
   text-align: center;
   padding: 1rem 0;
}

.navbar {
   background-color: #4f4f4f;
   padding: 0.5rem 1rem;
}
.navbar-nav .nav-link {
   color: #fff;
   border-radius: 30px;
   margin: 0 0.5rem;
   padding: 0.5rem 1rem;
}
.navbar-nav .nav-link.active {
   background-color: #fff;
   color: #4f4f4f;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.nav-item .nav-link i {
   margin-right: 5px;
}

.badge {
   font-size: 0.75rem;
   position: relative;
   background-color: #ff3e3e;
   color: #fff;
}

.dropdown-menu {
   overflow-y: auto;
}

.profile-img {
   border-radius: 50%;
   object-fit: cover;
   cursor: pointer;
}

/* Centered box */
.center-box-container {
    display: flex;
    justify-content: center;   /* horizontal centering */
    align-items: flex-start;   /* vertical alignment at the top */
    flex: 1;                   /* optional: takes remaining space if inside a flex parent */
    width: 100%;               /* full width */
    min-height: 100vh;         /* full viewport height */
    background-color: #f5f5f5; /* background color */
}

.center-box {
   width: 20rem; /* Fixed width for the card */
   background-color: #fff; /* Card background */
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   padding: 1.5rem;
}

/* Error box styling */
.error-box {
   padding: 1rem;
   background-color: #f8d7da; /* Light red background for error */
   color: #842029; /* Dark red text */
   border: 1px solid #f5c2c7;
   border-radius: 5px;
   font-size: 0.875rem;
   text-align: center;
   margin-bottom: 1rem;
}

.login-card {
   width: 20rem;
}

.logo-img {
   width: 242px;
   height: 162px;
}

.box-max {
   width: 100%;
}