/* .bottom-navigation {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: #f5f5f5;

    .tab-button {
        button {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #888;

            img {
                width: 24px;
                height: 24px;
                margin-bottom: 5px;
            }

            span {
                font-size: 12px;
            }
        }

        .active {
            color: #000;
            font-weight: bold;
        }
    }
} */

.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.content {
    flex-grow: 1;
    background-color: #f5f5f5;
    padding: 20px;
}

.navbar {
    display: flex;
    justify-content: space-between;
    height: 60px;
    background-color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.nav-button {
    flex-grow: 1;
    border: none;
    background-color: transparent;
    font-size: 14px;
    color: #333333;
    cursor: pointer;
    outline: none;
    transition: background-color 0.2s ease-in-out;
}

.nav-button:hover {
    background-color: #f5f5f5;
}

.page1,
.page2,
.page3,
.page4 {
    display: none;
    padding: 20px;
}

.page1 {
    display: block;
    background-color: #ffffff;
}

.page2 {
    display: block;
    background-color: #ffcccc;
}

.page3 {
    display: block;
    background-color: #ccffcc;
}

.page4 {
    display: block;
    background-color: #ccccff;
}