/* The sidebar menu */
.mysidenav {
    height: 100%; /* Full-height: remove this if you want "auto" height */
    width: 250px; /* Set the width of the sidebar */
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    border-right: 1px solid #808080;
    overflow-x: hidden;
    padding-top: 20px;
}

    /* The navigation menu links */
    .mysidenav .mya {
        padding: 6px 8px 6px 16px;
        display: block;
        position: relative;
        color: white;
        text-decoration: none;
        text-transform: uppercase;
        transition: 0.5s;
        white-space: nowrap;
    }

        /* When you mouse over the navigation links, change their color */
        .mysidenav .mya:hover {
            color: #f1f1f1;
        }


ul {
    display: flex;
    flex-direction: column;
    list-style-type: none;
    font-size: .9rem;
    user-select: none;
}

    ul li {
        padding: 6px 0;
        text-decoration: none;
    }

        ul li .customlink {
            position: relative;
            display: block;
            padding: 4px 0;
            color: #2b5b80;
            text-decoration: none;
            text-transform: uppercase;
            transition: 0.5s;
            white-space: nowrap;
        }

            ul li .customlink::after {
                position: absolute;
                content: "";
                top: 100%;
                left: 0;
                width: 100%;
                height: 2px;
                background: #ff6a00;
                transform: scaleX(0);
                transform-origin: right;
                transition: transform 0.5s;
                text-decoration: none;
                white-space: nowrap;
            }

            ul li .customlink:hover {
                color: #ff6a00;
                text-decoration: none;
            }

                ul li .customlink:hover::after {
                    transform: scaleX(1);
                    transform-origin: left;
                    text-decoration: none;
                }



/* Style page content */
.mymain {
    margin-left: 250px; /* Same as the width of the sidebar */
    padding: 0px 10px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-width: 450px) {
    .mysidenav {
        padding: 6px;
        position: relative;
        color: white;
        text-decoration: none;
        text-transform: uppercase;
        transition: 0.5s;
        white-space: nowrap;
        height: 100%; /* Full-height: remove this if you want "auto" height */
        width: 100%; /* Set the width of the sidebar */
        z-index: 1; /* Stay on top */
        top: 0; /* Stay at the top */
        left: 0;
        border: none;
        overflow-x: hidden;
        padding-top: 20px;
    }


    .mymain {
        margin-left: 0; /* Same as the width of the sidebar */
        padding: 2px;
        position: relative;
        display: block;
    }
}
.container-list{
    width: 100%;
}