body { display: flex; 

          }

        .sidebar {

            width: 200px;

            height: 100vh;

            background: linear-gradient(135deg, #667eea, #764ba2);

            color: white;

            padding-top: 20px;

            position: fixed;

        }

        .sidebar a {

            color: white;

            text-decoration: none;

            padding: 10px;

            display: block;

            cursor: pointer;

        }

        .sidebar a:hover {

            background: #556cd6;

        }

        .submenu {

            display: none;

            padding-left: 20px;

        }

        .content {

            margin-left: 200px;

            padding: 0px;

            padding-top: 0px;

            width: 175%;
            
            font-family: 'Roboto', sans-serif;

        }

        .navbar {

            width: 100%;

            background: linear-gradient(135deg, #667eea, #764ba2);

            padding-top: 0px;

            position: fixed;

        }

        .navbar-top {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            background-color: #ffffff; /* Ensure a background color to prevent content overlap */

            z-index: 1000; /* Keeps it above other elements */

        }

        .navbar-header {

            position: sticky;

            top: 0;

            background-color: #ffffff;

            z-index: 1000;

        }

        .navbar-header img.img-responsive { /* Or just .navbar-header img */
             box-shadow: none !important;
             -webkit-box-shadow: none !important; /* For older Safari/Chrome versions */
             -moz-box-shadow: none !important; /* For older Firefox versions */
}

       

        .topbar {

            width: calc(100% - 200px);

            position: fixed;

            top: 0;

            left: 200px;

            background: white;

            color: black;

            padding: 10px 20px;

            display: flex;

            align-items: center;

            justify-content: space-between;

            z-index: 1000;       }



        .form-container {

            width: 100%;

            padding: 20px;

            background: white;

            border: 2px solid #ccc;

            border-radius: 10px;

            box-shadow: 2px 2px 10px rgba(0,0,0,0.1);

            margin-top: 80px;

        }

        .form-row {

            display: flex;

            justify-content: flex-start;

            margin-bottom: 5px;

            gap: 20px;

        }

        .form-group {

            width: 40%;

            flex:1;

        }

        label {

            font-weight: bold;

            display: block;

            margin-bottom: 5px;

        }

        input, select {

            width: 100%;

            padding: 4px;

            border: 1px solid #ccc;

            border-radius: 15px;

        }

        button {

            width: 25%;

            padding: 10px;

            border: none;

            background-color: #28a745;

            color: white;

            font-size: 16px;

            cursor: pointer;

            border-radius: 5px;

        }

        button:hover {

            background-color: #218838;

        }

        .block { margin-bottom: 15px; padding: 15px; border: 2px solid #ddd; border-radius: 5px; }

        .block h3 { margin-top: 0; }

        .logo img {

            max-height: 50px;

            }

        .container {

            margin-top: 80px;

            }

        .stats { display: flex; justify-content: space-around; }

        .card { padding: 10px; margin: 10px; margin-left: 20px; border-radius: 5px; box-shadow: 2px 2px 10px #ddd; }

        #today_stats_dummy {

             display: block !important;

             visibility: visible !important;

                  }

.notification-bar {
    width: 100%;
    height: 40px;
    overflow: hidden;
    position: relative;
    background: #f9f9f9;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
}

#notification-track {
    position: relative;
    width: 100%;
    height: 40px;
}

.notification-item {
    position: absolute;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(100%);
    font-size: 14px;
    padding-left: 10px;
    transition: transform 1s linear, opacity 0.5s ease;
}
.fixed-card {
    height: 150px;            /* Set your desired height */
    min-height: 150px;
    max-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;  /* Center vertically */
    align-items: center;      /* Center horizontally */
    text-align: center;
}
.readonly-field {
    background-color: rgba(255, 99, 71, 0.5); /* Light gray */
    color: Black;              /* Dark gray text */
}