body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            height: 100vh;
            overflow: hidden;
        }

        /* Sidebar styling */
        .sidebar {
            background-color: #333;
            color: white;
            width: 250px;
            transition: width 0.3s;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .sidebar.collapsed {
            width: 60px;
        }

        .sidebar .toggle-btn {
            background-color: #444;
            border: none;
            color: white;
            padding: 10px;
            cursor: pointer;
            width: 100%;
            text-align: left;
            outline: none;
            font-size: 1.2em;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .sidebar .toggle-btn:hover {
            background-color: #555;
        }

        .sidebar .menu {
            flex-grow: 1;
            padding: 20px 0;
        }

        .sidebar .menu a {
            color: white;
            text-decoration: none;
            font-size: 1.1em;
            padding: 10px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            transition: background 0.2s;
        }

        .sidebar .menu a:hover {
            background-color: #444;
        }

        .sidebar .menu a img {
            margin-left: 10px;
            width: 18px;
            height: 18px;
        }

        .sidebar.collapsed .menu a span {
            display: none;
        }

        .sidebar.collapsed .toggle-btn {
            justify-content: center;
        }

        /* Main content area */
        .main-content {
            flex-grow: 1;
            padding: 20px;
            overflow: auto;
        }

        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        /* Responsive layout */
        @media screen and (max-width: 768px) {
            .sidebar {
                position: absolute;
                height: 100%;
                z-index: 1000;
                transform: translateX(-250px);
                transition: transform 0.3s;
            }

            .sidebar.active {
                transform: translateX(0);
            }

            .sidebar.collapsed {
                transform: translateX(-60px);
            }

            .main-content {
                padding: 10px;
            }

            .menu-toggle {
                position: absolute;
                top: 10px;
                left: 10px;
                background-color: #333;
                color: white;
                border: none;
                padding: 10px;
                cursor: pointer;
                z-index: 1100;
                font-size: 1.2em;
            }
        }


                /* Basic styles for the sidebar */
                .sidebar {
                    width: 250px;
                    /* Set a fixed width for the sidebar */
                    height: 100vh;
                    /* Full height */
                    background-color: #333;
                    /* Sidebar background color */
                    color: white;
                    /* Text color */
                    position: fixed;
                    /* Fix sidebar to the left */
                    top: 0;
                    left: 0;
                    overflow-y: auto;
                    /* Enable vertical scrolling */
                    transition: width 0.3s;
                    /* Smooth width transition */
                }
        
                /* Add padding and other styles to the menu */
                .menu {
                    padding: 10px;
                    /* Add padding to the menu */
                }
        
                /* Collapse styles for the sidebar */
                .sidebar.collapsed {
                    width: 80px;
                    /* Width when collapsed */
                }
        
                /* Styles for the menu items */
                .menu a {
                    display: flex;
                    /* Use flexbox for alignment */
                    align-items: center;
                    /* Center vertically */
                    padding: 10px;
                    /* Add some padding */
                    color: white;
                    /* Text color for links */
                    text-decoration: none;
                    /* Remove underline */
                }
        
                /* Hover effect */
                .menu a:hover {
                    background-color: #555;
                    /* Change background on hover */
                }
        
                /* Style for the iframe */
                .main-content iframe {
                    width: 100%;
                    /* Full width */
                    height: calc(100vh - 60px);
                    /* Full height minus header height */
                    border: none;
                    /* Remove border */
                }