.custom-divider {
    border: none; /* Remove default border */
    border-top: 12px solid #000; /* Solid line, 3px thick, dark gray */
    margin: 20px 0; /* Add vertical spacing */
}

.container {
    margin-top: 80px; /* Space below fixed navbar */
}

.navbar {
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
    height: 60px;
}

.completed {
    text-decoration: line-through;
    color: red;
    opacity: 0.6;
}

.required {
    color: red;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Styling for the main table */
table {
    width: 80%; /* Table width relative to the viewport */
    margin: 30px auto; /* Center the table horizontally */
    border-collapse: collapse; /* Remove default spacing between cells */
    overflow: hidden;
    border-radius: 10px; /* Rounded corners for the table */
    background-color: #fff; /* White background for table content */
}

/* Styling for the table header */
thead {
    background-color: #1e3799; /* Dark blue background for header */
    color: #fff; /* White text for contrast */
}

/* Styling for table rows */
tbody tr {
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

    /* Alternate row background color for better readability */
    tbody tr:nth-child(even) {
        background-color: #f1f2f6; /* Light gray for even rows */
    }

    /* Hover effect for table rows */
    tbody tr:hover {
        background-color: #dcdde1; /* Slightly darker gray on hover */
    }

/* Styling for table data cells */
td {
    padding: 15px;
}

/* Keyframe animation for row fade-in effect */
@keyframes fadeIn {
    from {
        opacity: 0; /* Start with invisible rows */
        transform: translateY(10px); /* Slightly shifted down */
    }

    to {
        opacity: 1; /* Fully visible */
        transform: translateY(0); /* Original position */
    }
}

/* Apply the fade-in animation to table rows */
tbody tr {
    animation: fadeIn 0.5s ease-in;
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}