.side-nav-link-set {
    background-color: #FFF;
    display: flex;
    padding-top: 2rem;
    padding-bottom: 2rem;
    font-family: "Roboto", "Open Sans", sans-serif !important;
    transition: all .5s ease-in-out;    
}
.side-nav-link-set-area {
    transition: all .5s ease-in-out;
}
    .side-nav-link-set > .container {
        flex-direction: row;
    }

    .side-nav-link-set .side-nav-links {
        display: flex;
        flex-direction: column;
        padding: 0.5rem 1rem;
        height: 100%;
        background-color: #FFF;
        justify-content: flex-start;
        align-items: flex-start;
    }

@media screen and (max-width:768px) {
    .side-nav-link-set-area > .col-sm-12 {
        margin-bottom: 2rem;
    }
}

.side-nav-link-set .side-nav-links > ul {
    display: contents;
}

.side-nav-link-set .side-nav-links .side-nav-link-item,
.side-nav-link-set .side-nav-links .side-nav-sub-link-item {
    list-style: none;
    width: 100%;
    display: contents;
}

    .side-nav-link-set .side-nav-links .side-nav-link-item a.side-nav-link,
    .side-nav-link-set .side-nav-links .side-nav-link-item button {
        font-size: 1rem;
        font-weight: 500;
        color: #0066CC;
        padding: 1rem 2rem 1rem 1rem;
        width: 100%;
        display: flex;
        border: 0;
        background-color: #FFF;
    }

.side-nav-link-set .side-nav-links > ul > li:not(:first-child) a,
.side-nav-link-set .side-nav-links > ul > li:not(:first-child) button {
    border-top: 1px #C6DEEB solid;
}

.side-nav-link-set .side-nav-links .side-nav-link-item a.side-nav-sub-link.active,
.side-nav-link-set .side-nav-links .side-nav-link-item a.side-nav-link.active,
.side-nav-link-set .side-nav-links .side-nav-link-item a.side-nav-link:active {
    border-left: 5px solid #2477B5 !important;
    background-color: #F5F5F5;
    font-weight: 600;
}

.side-nav-link-set .side-nav-links .side-nav-link-item a.side-nav-link:hover,
.side-nav-link-set .side-nav-links .side-nav-sub-link-item a.side-nav-sub-link:hover,
.side-nav-link-set .side-nav-links .side-nav-link-item button:hover {
    background-color: #FAFAFA;
    color: #2477B5;
}

.side-nav-link-set .side-nav-links .side-nav-link-item:not(.expandable) a:hover,
.side-nav-link-set .side-nav-links .side-nav-link-item:not(.expanded) a:hover {
    text-decoration: underline;
}

.side-nav-link-set .side-nav-links .side-nav-link-item
.side-nav-link-set .side-nav-links .side-nav-link-item.expandable {
    display: flex;
    position: relative;
    flex-direction: column;
}

.side-nav-link-set .side-nav-links .side-nav-link-item.expanded {
    display: flex;
    flex-direction: column;
    border-bottom: none;
}




    .side-nav-link-set .side-nav-links .side-nav-link-item.expanded a.side-nav-link {
        color: #000;
    }

.side-nav-link-set .side-nav-links .side-nav-link-item.expandable > ul {
    display: none;
    flex-direction: column;
    transition: all 0.5s ease;
}

.side-nav-link-set .side-nav-links .side-nav-link-item.expanded button,
.side-nav-link-set .side-nav-links .side-nav-link-item.expandable button {
    color: #000 !important;
}

.side-nav-link-set .side-nav-links .side-nav-sub-link-item a.side-nav-sub-link,
.side-nav-link-set .side-nav-links .side-nav-sub-link-item button {
    font-size: 1rem;
    font-weight: 500;
    color: #0066CC;
    padding: 1rem 1rem 1rem 1rem;
    width: 100%;
}

.side-nav-link-set .side-nav-link-item.expandable > button::after {
    background-image: url('../images/carrot_collapsed.svg');
    transition: transform 0.3s ease;
    display: inline-block;
    position: absolute;
    right: 3rem;
    width: 1rem;
    height: 1rem;
    content: " ";
    background-repeat: no-repeat;
    background-position: center;
}

.side-nav-link-set .side-nav-link-item.expanded > button::after {
    transform: rotate(180deg);
    background-image: url('../images/carrot_collapsed.svg');
    transition: transform 0.3s ease;
    display: inline-block;
    position: absolute;
    right: 3rem;
    width: 1rem;
    height: 1rem;
    content: " ";
    background-repeat: no-repeat;
    background-position: center;
}

.side-nav-link-set .side-nav-links .side-nav-link-item.expanded > ul {
    display: flex;
    flex-direction: column;
    transition: all 0.5s ease;
    padding-left: 1rem;
}

.side-nav-link-set .side-nav-links .side-nav-link-item.expanded ul li .side-nav-sub-link {
    border: none;
}
.side-nav-link-set-area.side-nav-expandable > div.col-md-4{
    transition: all ease 0.5s;
}
.side-nav-link-set-area.side-nav-expanded div.x-closer, #side-nav-linkset-button {
    display: none;
}

    @media screen and (max-width: 768px) {
        .side-nav-link-set-area {
            z-index: 10;
        }

            .side-nav-link-set-area > div.col-md-4 {
                transition: all ease 0.5s;
                height: 100%;
            }
            .side-nav-link-set-area.side-nav-expandable > div.col-md-4 {
                position: absolute;
                width: 0px;
                z-index: 7;
                overflow: hidden;
            }

            .side-nav-link-set-area.side-nav-expanded > div.col-md-4 {
                position: absolute;
                width: 100%;
                z-index: 7;
            }

            .side-nav-link-set-area.side-nav-expanded div.x-closer {
                content: " ";
                display: inline-block;
                background-image: url(../images/x.svg);
                height: 30px;
                width: 30px;
                position: absolute;
                top: -1rem;
                right: 0rem;
                background-repeat: no-repeat;
                background-size: contain;
            }

                .side-nav-link-set-area.side-nav-expanded div.x-closer:hover {
                    cursor: pointer;
                }

        #side-nav-linkset-button {
            display: flex;
            justify-content: center;
            transition: all ease 0.5s;
        }

            #side-nav-linkset-button button {
                display: flex;
                border-radius: 8px;
                font-size: 16px;
                line-height: 21px;
                color: #fff;
                background-color: #06c;
                padding: 10px 10px;
                text-decoration: none;
                border: 1px solid #06c;
                flex-direction: row;
                flex-wrap: nowrap;
                align-content: center;
                justify-content: center;
                align-items: center;
                margin-top: 0.75rem;
            }
                #side-nav-linkset-button button:hover{
                    cursor: pointer;
                }
                #side-nav-linkset-button button p {
                    margin-bottom: 0;
                }
        
        #side-nav-linkset-button.side-nav-expanded {
                transform: translateX(300%);
                overflow: hidden;
                width: 0px;
            }
            #side-nav-linkset-button.side-nav-expandable {
                transform: translateX(0%);
            }
    }