/******************************************************/
/******************Service navigation******************/
/******************************************************/
#service-navigation {
    position: sticky;
    top: var(--size-80);
    height: calc(100vh - var(--size-80));
}

html.day-mode #service-navigation {
    border-right: 1px solid var(--color-frame-day);
}

html.night-mode #service-navigation {
    border-right: 1px solid var(--color-frame-night);
}

.nhn-dev-portal-content-list {
    overflow-x: hidden;
    overflow-y: scroll;
    padding: var(--size-16) var(--size-min) var(--size-16) 0;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
}

.nhn-dev-portal-content-list-links {
    overflow: auto;
}

.nhn-dev-portal-content-list::-webkit-scrollbar {
    width: 8px;
}

.nhn-dev-portal-content-list::-webkit-scrollbar-track {
    background: var(--color-gray-light);
}

.nhn-dev-portal-content-list::-webkit-scrollbar-thumb {
    cursor: pointer !important;
    background-color: var(--color-green-middle);
}

.nhn-dev-portal-content-list::-webkit-scrollbar-thumb:hover {
    background: var(--color-green-secondary);
}

html.night-mode .nhn-dev-portal-content-list::-webkit-scrollbar-thumb:hover {
    background: var(--color-green-primary);
}

.service-navigation-link .service-navigation-link-outer {
    position: relative;
    float: left;
    box-sizing: border-box;
    width: 100%;
    display: flex;
}

.service-navigation-link {
    display: block;
    box-sizing: border-box;
}

.service-navigation-link a {
    text-decoration: none;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
    padding-top: 2px;
    padding-bottom: 2px;
}
.padding-left-min {
    padding-left: 20px;
}
.padding-left-active {
    padding-left: 15px;
}
.service-navigation-link-left-border{
    border-left: solid 1px var(--color-black);
}

.service-navigation-link a:hover {
    text-decoration: underline;
    text-decoration-thickness: 8%;
    color: var(--color-green-middle);
}

.service-navigation-link.top {
    font-size: 22px;
    font-weight: 600;
    box-sizing: border-box;
    padding: 8px 0 8px 0;
    top: -8px;
}
.service-navigation-link-as-parent {
}

.service-navigation-link.active {
    font-weight: 600;
    /*padding-left: 15px;*/
    /*border-left: solid 1px;*/
}
.service-link-navigation-left-padding {
    padding-left: 15px;
}

.chevron-down {
    display: none;
}
.chevron-up {
    display: inline;
}
.chevron-thickness path {
    stroke-width: 0.12rem;
}
.service-navigation-link-chevron.active a {
    border-left: solid 5px;
    color: var(--color-green-middle);
    border-color: var(--color-green-middle);
    background-color: var(--color-green-light);
    padding-right: 5px;
}
.service-navigation-link.active a {
    border-left: solid 4px;
    color: var(--color-green-middle);
    border-color: var(--color-green-middle);
    background-color: var(--color-green-light);
    padding-right: 5px;
    padding-left: 3px;
}
.active-menuitem-border {
    border: 1px solid;
}
.service-navigation-link-collapse-button {
    position: relative;
    padding: 0;
    margin: 0;
    border: none;
    /*left: -0.2rem;*/
    /*border-left: solid 1px var(--color-black);*/
    background: none;
    cursor: pointer;
}

.service-navigation-link-collapse-button svg {
    pointer-events: none;
    height: 20px;
    width: 20px;
    box-sizing: border-box;
    stroke: #000;
    padding: 2px;
}

.service-navigation-link .icon {
    position: relative;
    float: left;
    width: 20px;
    height: 20px;
    margin-right: 4px;
    border: none;
}

.service-navigation-link span {
    display: block;
    position: relative;
    float: left;
    width: calc(100% - 40px);
    box-sizing: border-box;
    padding-top: 3px;
    padding-bottom: 3px;
}

.service-navigation-link.top span {
    padding-top: 0;
    padding-bottom: 0;
}

.service-navigation-link:hover {
    text-decoration: underline;
}

.service-navigation-link-container {
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: 5px;
}

.service-navigation-link-container.collapsed {
    display: none;
}

#mobile-service-navigation-button {
    display: none;
}

/*<--Day/Night-->*/
html.night-mode .service-navigation-link a {
    color: var(--color-gray-white) !important;
    border-color: var(--color-white);
}
html.night-mode .service-navigation-link-collapse-button {
    /*border-left: solid 1px var(--color-white);*/
}

html.night-mode .service-navigation-link.active a {
    border-color: var(--color-green-middle);
    background-color: rgba(119, 119, 119, 0.5); /* 50% alpha */
    padding: 2px 8px 2px 4px;
}

html.night-mode .service-navigation-link a:hover {
    /*color: var(--color-green-secondary) !important;*/
}

html.night-mode .service-navigation-link-collapse-button svg path {
    stroke: #FFF;
}

html.night-mode .service-navigation-link-collapse-button:hover svg path {
    /*fill: var(--color-green-secondary);*/
}

/*Mobile navigation*/
@media only screen and (max-width: 1391px) {
    #service-navigation {
        position: fixed;
        top: var(--size-80);
        left: 0;
        width: 100vw;
        height: calc(100vh - var(--size-80));
        background: var(--color-white);
        z-index: 100;
        transition: left 0.2s ease;
        overflow: hidden;
        padding-bottom: 100px;
    }

    .nhn-dev-portal-content-list {
        max-height: 100%;
        width: 100%;
        overflow: auto;
    }

    .service-navigation-active .page-content-container {
        max-width: 100%;
    }

    .service-navigation-hidden-mobile {
        left: -125vw !important;
    }

    .nhn-dev-portal-content-list-links {
        height: auto;
    }

    .service-navigation-link.top {
        top: 0;
    }

    #mobile-service-navigation-button {
        display: block;
        position: fixed;
        width: 150px;
        left: calc(50vw - 75px);
        bottom: 45px;
        z-index: 1001;
    }

    /*When nav panel is closed*/
    #mobile-service-navigation-button.state-closed.nhn-button-icon-right .nhn-dev-portal-regular-button-icon {
        right: 15px;
    }

    #mobile-service-navigation-button.state-closed.nhn-button-animation-right:hover .nhn-dev-portal-regular-button-icon {
        right: 10px;
    }

    /*When nav panel is open*/
    #mobile-service-navigation-button.state-open.nhn-button-icon-right .nhn-dev-portal-regular-button-text {
        padding-right: 0;
        padding-left: 40px;
        text-align: right;
    }

    #mobile-service-navigation-button.state-open.nhn-button-icon-right .nhn-dev-portal-regular-button-icon {
        left: 15px;
    }

    #mobile-service-navigation-button.state-open.nhn-button-animation-right:hover .nhn-dev-portal-regular-button-icon {
        left: 10px;
    }

    /*Day / Night*/
    html.night-mode #service-navigation {
        background-color: var(--color-gray-dark);
    }
}