@media(min-width: 768px) {
    .Main-Top {
        width: 100%;
        height: 48px;
    }

    .Main-Bottom {
        height: 100%;
        width: 100%;
        display: flex;
    }

    .Main-Body {
        padding: 10px;
        width: 100%;
        height: 100%;
        overflow-y: auto;
    }

    .Main-Nav-Menu {
        max-width: 210px;
        height: 100%;
        overflow: hidden;
    }

    .Nav-Container {
        margin-right: 100px;
        width: 210px;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 0;
        border-right: 1px solid white;
        transition: width 0.3s ease, margin-right 0.3s ease;
    }

    .NavMenu {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .Nav-Header {
        height: 50px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .Nav-Header-Image {
        opacity: 0.6;
        width: 100%;
        height: 120px;
    }

    .Nav-Header-Button {
        width: 90%;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 8px;
        gap: 5px;
    }

    .Nav-Header-Button-Icon {
        height: 1.3em;
        width: 1.3em;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .Nav-Header-Button-Text {
        text-align: left;
        width: 100%;
    }

    .Nav-Body {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        height: 0;
        margin-bottom: 5px;
    }

    .Nav-Body-Item {
        display: flex;
        flex-direction: column;
    }

    .Nav-Body-Item-Button {
        min-height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .Nav-Item-Button-Icon {
        width: 25%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: rgb(245, 245, 245);
        width: 1.3rem;
        height: 1.3rem;
        margin-right: 3px;
    }

    .Nav-Body-Item-Button-Text {
        width: 65%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .Nav-Body-Item-Button-Sign {
        width: 10%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-right: 10px;
    }

    .Nav-Body-Item-List {
        display: flex;
        flex-direction: column;
    }

    .Nav-Body-Item-List-Button {
        min-height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .Nav-Body-Item-List-Button-Empty {
        width: 10%;
    }

    

    .Nav-Body-Item-List-Button-Text {
        width: 65%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-right: 10px;
    }

        .Nav-Header:hover, .Nav-Body-Item-Button-Text:hover, .Nav-Body-Item-List-Button-Text:hover, .Nav-Header-Button:hover, .Nav-Header-Button-Text:hover {
            color: rgba(255, 255,255, 1);
        }

    .Nav-Container-Special-Case {
        width: 70px;
        height: 100%;
        display: flex;
        margin-right: 10px;
        flex-direction: column;
        overflow: hidden;
        border: 0;
        border-right: 1px solid white;
        transition: width 0.3s ease, margin-right 0.3s ease;
    }

    .Nav-Header-Special-Case {
        width: 100%;
        height: 48px;
        background-color: rgba(0, 0, 0, 0);
    }

    .Nav-Header-Image-Special-Case {
        display: none;
    }

    .Nav-Header-Button-Text-Special-Case {
        display: none;
    }

    .Nav-Body-Special-Case {
        width: 100%;
    }
}

@media(max-width: 768px) {
    .Main-Top {
        width: 100%;
        height: 48px;
    }

    .Main-Bottom {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .Main-Body {
        width: 100%;
        height: 100%;
        overflow-y: auto;
    }

    .Main-Nav-Menu {
        width: 100%;
        height: 48px;
    }

    .Nav-Container {
        width: 210px;
        height: 48px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 0;
        border-right: 1px solid white;
        transition: width 0.3s ease, margin-right 0.3s ease;
    }

    .NavMenu {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .Nav-Header {
        width: 210px;
        height: 100%;
        display: flex;
        padding: 8px;
    }

    .Nav-Header-Image {
        display: none;
    }

    .Nav-Header-Button {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
    }

    .Nav-Header-Button-Icon {
        height: 1.3em;
        width: 1.3em;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .Nav-Body {
        margin-top: 9%;
        position: absolute;
        overflow-y: auto;
        max-height: 300px;
        width: 200px;
        transition: width 0.3s ease, margin-right 0.3s ease;
    }

    .Nav-Body-Item {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .Nav-Body-Item-Button {
        min-height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .Nav-Body-Item-Button-Icon {
        width: 25%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .Nav-Body-Item-Button-Text {
        width: 65%;
        display: flex;
        justify-content: start;
        align-items: center;
    }

    .Nav-Body-Item-Button-Sign {
        width: 10%;
        display: flex;
        justify-content: end;
        align-items: center;
        margin-right: 10px;
    }

    .Nav-Body-Item-List {
        display: flex;
        flex-direction:column;
        gap: 1rem;
    }

    .Nav-Body-Item-List-Button {
        min-height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .Nav-Body-Item-List-Button-Empty {
        width: 10%;
    }

    .Nav-Body-Item-List-Button-Icon {
        width: 25%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .Nav-Body-Item-List-Button-Text {
        width: 65%;
        display: flex;
        justify-content: start;
        align-items: center;
    }

        .Nav-Header:hover, .Nav-Body-Item-Button-Text:hover, .Nav-Body-Item-List-Button-Text:hover, .Nav-Header-Button:hover, .Nav-Header-Button-Text:hover {
            color: rgba(255, 255,255, 1);
        }

    .Nav-Container-Special-Case {
        width: 70px;
        height: 48px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 0;
        border-right: 1px solid white;
        transition: width 0.3s ease, margin-right 0.3s ease;
    }

    .Nav-Header-Special-Case {
        width: 100%;
        height: 100%;
    }

    .Nav-Header-Button-Text-Special-Case,
    .Nav-Body-Special-Case {
        display: none;
        transition: width 0.3s ease, margin-right 0.3s ease;
    }
}


/* WebKit Browsers (Chrome, Edge, Safari) */
.Nav-Body::-webkit-scrollbar {
    width: 4px; /* Thinnest scrollbar width */
    height: 4px; /* Thinnest scrollbar height for horizontal scrolling */
}

.Nav-Body::-webkit-scrollbar-track {
    background: #f0f0f0; /* Light background for the track */
    border-radius: 10px;
}

.Nav-Body::-webkit-scrollbar-thumb {
    background: #888; /* Darker thumb for visibility */
    border-radius: 10px; /* Rounded thumb */
}

    .Nav-Body::-webkit-scrollbar-thumb:hover {
        background: #555; /* Darker thumb on hover */
    }

/* Firefox */
.Nav-Body {
    scrollbar-width: thin; /* Smallest predefined scrollbar width in Firefox */
    scrollbar-color: #888 #f0f0f0; /* Thumb color and track color */
}

.icon-text {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* keep icon fixed-size */
.icon {
    flex: 0 0 auto;
}

    .icon svg {
        width: 20px;
        height: 20px;
    }

/* allow text area to take remaining space but permit overflow if necessary */
.text {
    flex: 1 1 auto;
    min-width: 0;
}

    .text p {
        margin: 0;
        white-space: nowrap;
        overflow-x: auto;
        color: white;
        font-size: 16px;
        display: flex;
        align-items: center;
    }