/***** Colors & Sizes *****/
:root {
    --color-primary: #3774b5;
    --color-primary-tint: #fff;
    --color-primary-border: #000;
    --color-accent: #f2f2f2;
    --color-accent-tint: #000;
    --color-accent-border: #000;
    --color-line: #000;

    /* --item-width: 200px; */
    --item-width: 10.5vw;
    --item-gap: 20px;
}

/***** Vertical Sitemap *****/
.vsitemap {
    text-align: left;
}

.vsitemap * {
    box-sizing: border-box;
}

.vsitemap ul {
    margin: 0 var(--item-gap);
    list-style: none;
    padding: 0;
}

.vsitemap ul>li {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin: 0 0 calc(var(--item-gap) / 2);
    position: relative;
}

.vsitemap ul>li:before {
    content: "";
    position: absolute;
    top: 1em;
    height: 1px;
    left: calc(-1 * var(--item-gap) / 2);
    width: calc(var(--item-gap) / 2);
    background: var(--color-line);
}

/* Draw Line */
.vsitemap ul>li:first-child:before {
    width: var(--item-gap);
    left: calc(-1 * var(--item-gap));
}

.vsitemap ul li:after {
    content: "";
    position: absolute;
    top: calc(-1 * var(--item-gap));
    left: calc((var(--item-gap) / 2) - var(--item-gap));
    bottom: 0;
    width: 1px;
    background: var(--color-line);
}

.vsitemap ul li:first-child:after {
    top: 1em;
}

.vsitemap ul li:last-child:after {
    bottom: auto;
    height: calc(var(--item-gap) + 1em);
}

.vsitemap ul li:only-child:after {
    display: none;
}

/* Box Item */
.vsitemap small {
    line-height: 1.5em;
    position: relative;
    font-size: 0.8em;
}

.vsitemap a {
    line-height: 1.5em;
    display: block;
    text-decoration: none;
    padding: 0.5em;
    border-radius: 3px;
    width: var(--item-width);
    transition: background-color 0.4s;
    border: 1px solid;
}

.vsitemap a,
.vsitemap a:visited {
    background: var(--color-primary);
    color: var(--color-primary-tint);
    border-color: var(--color-primary-border);
}

.vsitemap a:hover,
.vsitemap a:active {
    background: var(--color-accent);
    color: var(--color-accent-tint);
    border-color: var(--color-accent-border);
}

/* Responsive */
/* tablet */
@media only screen and (max-width: 768px) {
    .vsitemap>ul>li>ul>li ul li {
        flex-direction: column;
    }

    .vsitemap>ul>li>ul>li ul li ul {
        margin-top: calc(var(--item-gap) / 2);
    }

    .vsitemap>ul>li>ul>li>ul li:after {
        left: calc(-1 * var(--item-gap) / 2);
    }

    .vsitemap>ul>li>ul>li>ul>li li:first-child:before {
        width: calc(var(--item-gap) / 2);
        left: calc(-1 * var(--item-gap) / 2);
    }

    .vsitemap>ul>li>ul>li>ul>li li:first-child:after {
        top: calc(-1 * var(--item-gap) / 2);
    }

    .vsitemap>ul>li>ul>li>ul>li li:only-child:after {
        display: block;
        height: calc(var(--item-gap) / 2 + 1em);
    }
}

/* mobile */
@media only screen and (max-width: 576px) {
    .vsitemap>ul>li ul li {
        flex-direction: column;
    }

    .vsitemap>ul>li ul li ul {
        margin-top: calc(var(--item-gap) / 2);
    }

    .vsitemap>ul>li>ul li:after {
        left: calc(-1 * var(--item-gap) / 2);
    }

    .vsitemap>ul>li>ul>li li:first-child:before {
        width: calc(var(--item-gap) / 2);
        left: calc(-1 * var(--item-gap) / 2);
    }

    .vsitemap>ul>li>ul>li li:first-child:after {
        top: calc(-1 * var(--item-gap) / 2);
    }

    .vsitemap>ul>li>ul>li li:only-child:after {
        display: block;
        height: calc(var(--item-gap) / 2 + 1em);
    }
}

/***** End Vertical Sitemap *****/

/***** Horizontal Sitemap *****/
.hsitemap * {
    box-sizing: border-box;
}

.hsitemap ul {
    list-style: none;
    padding: 0;
    margin: var(--item-gap);
    text-align: center;
}

.hsitemap li {
    position: relative;
}

.hsitemap ul ul ul {
    margin: 0 0 0 var(--item-gap);
    text-align: left;
}

.hsitemap>ul>li {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hsitemap>ul>li>ul {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.hsitemap>ul>li>ul>li {
    margin: 0 calc(var(--item-gap) / 2);
}

.hsitemap>ul>li>ul>li li {
    margin: calc(var(--item-gap) / 2) 0;
}

/* Box Item */
.hsitemap small {
    line-height: 1.5em;
    position: relative;
    font-size: 0.8em;
}

.hsitemap a {
    line-height: 1.5em;
    display: block;
    text-decoration: none;
    padding: 0.5em;
    border-radius: 3px;
    width: var(--item-width);
    transition: background-color 0.4s;
    position: relative;
    z-index: 2;
}

.hsitemap a,
.hsitemap a:visited {
    background: var(--color-primary);
    color: var(--color-primary-tint);
}

.hsitemap a:hover,
.hsitemap a:active {
    background: var(--color-accent);
    color: var(--color-accent-tint);
}

/* Draw line */
/* Horizontal line for first two level */
.hsitemap>ul>li>a:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    bottom: auto;
    height: calc(var(--item-gap) / 2);
    width: 1px;
    background: var(--color-line);
    z-index: 1;
}

.hsitemap>ul>li>ul>li>a:after {
    content: "";
    position: absolute;
    top: calc(-1 * var(--item-gap) / 2);
    left: 50%;
    bottom: auto;
    height: calc(var(--item-gap) / 2);
    width: 1px;
    background: var(--color-line);
    z-index: 1;
}

.hsitemap>ul>li>ul>li:before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--item-gap) / 2);
    left: -50%;
    bottom: auto;
    right: 0;
    height: 1px;
    background: var(--color-line);
    z-index: 1;
}

.hsitemap>ul>li>ul>li:first-child:before {
    left: calc(50% - var(--item-gap) / 2);
}

.hsitemap>ul>li>ul>li:last-child:before {
    right: calc(100% - var(--item-width) / 2);
}

/* Vertical line for level 3 down */
.hsitemap>ul>li li li:before {
    content: "";
    position: absolute;
    top: 1em;
    height: 1px;
    left: calc(-1 * var(--item-gap) / 2);
    width: calc(var(--item-gap) / 2);
    background: var(--color-line);
}

.hsitemap>ul>li li li:after {
    content: "";
    position: absolute;
    top: calc(-1 * var(--item-gap));
    left: calc(-1 * var(--item-gap) / 2);
    bottom: 0;
    width: 1px;
    background: var(--color-line);
}

.hsitemap>ul>li li li:first-child:after {
    top: calc(-1 * var(--item-gap) / 2);
}

.hsitemap>ul>li li li:last-child:after {
    bottom: auto;
    height: calc(var(--item-gap) + 1em);
}

.hsitemap>ul>li li li:only-child:after {
    bottom: auto;
    height: calc(var(--item-gap) / 2 + 1em);
}

/***** End Horizontal Sitemap *****/

.contentBox .grid-box .vsitemap li {
    display: flex !important;
}

.contentBox .grid-box .vsitemap ul {
    padding-left: 0;
    margin-right: 0;
}

li {
    font-size: 14px;
}

li.sizeDown {
    font-size: 12px;
}

li.sizeUp {
    font-size: 16px;
}

.sitemapMobile {
    display: none;
}

@media only screen and (max-width: 1199px) {
    .sitemapDesktop {
        display: none;
    }

    .sitemapMobile {
        display: block;
    }
}