/* :root {
    /* Fonts */
    /* --f: 'Fira Sans', sans-serif; */
    /* --page-height: 1400px; */
        /* } */
        html, body {
            min-height: 100%;
            margin: 0;
            padding: 0;
        }

        /* Flexbox styles for the main content */
        .main-content {
            display: flex;
            flex-direction: row;
            align-items: stretch;
            min-height: 100vh;
            width: 100%;
        }

        /* Sidebar layout and appearance */
        .left-column {
            flex: 0 0 250px; /* Fixed base width, but can shrink if needed */
            max-width: 300px;
            background-color: #203457;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            box-sizing: border-box;
        }
        /* Main content area */
        .right-column {
            flex: 1;
            padding: 0 10px;
            box-sizing: border-box;
            min-width: 0; /* Prevents overflow on small screens */
        }

        /* Profile image inside the sidebar */
        .left-column img {
            width: 80%;
            height: auto;
            box-sizing: border-box;
            display: block;
            margin: 0 auto;
        }

    td {
        width: 50px; /* Set a fixed width for each cell */
        padding: 10px; /* Optional: Add padding for better spacing */
        text-align: center; /* Optional: Center align text for consistency */
    }
    td img {
        display: block; /* Ensures the image is treated as a block element */
        margin: 0 auto; /* Centers the image horizontally */
        width: 40%;
        height: auto;
    }
    i, span {
            font-size: 30px; /* Set font size for icons */
            padding: 0 6px; /* Adds padding to the left and right of each icon */
    }

    hr {
        border: 1px solid #57cc8a;
        margin: 0 30px;
        width: 85%;
    }


        @media (max-width: 400px) {
            .main-content {
                flex-direction: column;
            }
            .left-column {
                flex: none;
                width: 100% !important;
                max-width: none;
                position: relative !important;
                height: auto !important;
            }
            .right-column {
                flex: none;
                width: 100% !important;
                margin-left: 0 !important;
            }
        }