h1 {text-align: center; font-weight: bold; font-size: 50px;}
            h5 {text-align: left; font-weight: bold;}
            img {width: 18%;position: fixed; top: 0px; left: 0;}
            body { font-family: Arial, sans-serif; background-color: #f4f4f4; }
            .logo {width: 15%;}
            .my-button {
                width: 90%;
                padding: 10px 10px; /* 10px top/bottom, 20px left/right */
                
                }  
            .container { width: 80%; margin: 20px auto; background-color: white; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1);display: flex; }
            .left, .right {
            flex: 1; /* Gives both sides equal width (50% each) */
            padding: 10px;
            }
            .header { margin-left: 300px; margin-top: 5px ;padding: 01px; }
            th { background-color: #f2f2f2; }
            .sidebar {height: 100%; width: 275px;position: fixed; top: 150px; left: 0;background-color: #ccc3f3; padding-top: 20px; }
            .sidebar a {padding: 25px; display: block;color: #000000; text-decoration: none;}
            .sidebar a:hover { color: #f1f1f1; background-color: #555; }
            .content { margin-left: 310px; margin-top: 30px;padding: 01px; width: 80%; }
            input{
                width: 20%;
                height: 15%;
                border: 05px;
                padding: 8px 15px 8px 15px;
                margin: 2px 0px 2px 0px;
                box-shadow: 1px 1px 2px 1px grey;
                }
            .netmap {width: 75%;}

            .table-container {

                width: 1000px;
                
                padding: 50px;
                margin: 0 auto;

            }
            
            .chart-container {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            }
            canvas {
            max-width: 400px;
            max-height: 400px;

            #myChart1, #myChart2 {
            flex: 1;       /* Each chart takes up equal space */
            /* Add specific height and width adjustments as needed by your chart library */
            height: 300px;
            }

            .flex-container {
            display: flex; /* Activates Flexbox layout */
            size: 50%;
            /* justify-content: space-around; */
            }

            .flex-child {
            flex: 1; /* Optional: Makes both divs grow to fill equal available space */
            width: 80%;
            border: 1px solid black; /* Optional: For visibility */
            padding: 10px; /* Optional: For visibility */
            }
            
            .nav-right { float: right; }
            .dropdown { position: relative; display: inline-block; }
            .dropdown-content {
                display: none;
                position: absolute;
                right: 0; /* Aligns dropdown to the right edge */
                background-color: #f9f9f9;
                box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
                z-index: 1;
                }
            .dropdown:hover .dropdown-content { display: block; }