/* 
/////////////////////////////////////////
// Copyright © 2022 | FFKA-Navigation.js
// License: Commercial
// Author: D.Hristov - 54ka
// Company: eLando 
/////////////////////////////////////////
*/

.navWrap {
    height: 38px;
}

.navWrap.active {
    height: unset;
}

    .navWrap div {
        padding-top: 12px;
        padding-bottom: 6px;
        padding-right: 15px;
        cursor: pointer;
    }

    .navWrap a {
        color: #212529;
        text-decoration: none;
    }

.navWrap div:hover,
.navWrap a:hover {
    color: #fff;
}

/*  */
    .navWrap > div:nth-child(1) {
        color: #212529;
        background: #8597a9;
        padding-left: 25px;
        padding-right: 35px;
    }

.navWrap>div:nth-child(1):hover {
    color: #fff;
}


.navWrap>div:nth-child(1)::before,
.navWrap>div:nth-child(1)::after {
    content: none;
}

.navWrap.active>div:nth-child(1) {
    color: #fff;
}

.navWrap>div:nth-child(1)::after,
.navWrap.active>div:nth-child(1)::after {
    content: '';
    position: absolute;

    top: 13px;
    left: unset;
    right: 15px;
    width: 15px;
    height: 15px;

    border-radius: unset;
    box-shadow: unset;
    background: unset;

    opacity: 0.7;
    background-size: 85%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 472 472' style='enable-background:new 0 0 472 472;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cpath class='st0' d='M236,326.5l9.2-7.7l180-151.5l-18.4-21.8L236,289.4L65.2,145.5l-18.4,21.8l180,151.5L236,326.5z'/%3E%3C/svg%3E%0A");
}

    .navWrap>div.noAfter:nth-child(1)::after,
    .navWrap.active.noAfter> div:nth-child(1)::after {
        content: '';
        position: absolute;
        top: 13px;
        left: unset;
        right: 15px;
        width: 15px;
        height: 15px;
        border-radius: unset;
        box-shadow: unset;
        background: unset;
        opacity: 0.7;
        background-size: 85%;
        background-repeat: no-repeat;
        background-position: center;
    }

.navWrap.active>div:nth-child(1)::after {
    transform: rotate(180deg);
    opacity: 1;
}

/*  */

    .navWrap > div {
        position: relative;
        padding-left: 57px;
        color: #212529;
        /*background: linear-gradient(90deg, rgba(14, 86, 143, 1) 0%, rgba(40, 78, 153, 1) 100%);*/
    }

.navWrap > div::after {
    content: '';
    position: absolute;
    top: 18px;
    left: 33px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #2f4f4f;
    background: #a9a9a9;
}

.navWrap.active > div > i::after,
.navWrap.activeLink > div > a > i::after {
    content: '';
    position: absolute;
    top: 18px;
    left: 10px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #2f4f4f;
    background: #a9a9a9;
}

.navWrap>div,
.navWrap .links {
    display: none;
}

.navWrap>div:nth-child(1) {
    display: block;
}

.navWrap.active>div {
    display: block;
}

    .navWrap.active .links {
        position: relative;
        display: block;
        padding-left: 57px;
        padding-top: 6px;
        padding-bottom: 14px;
        color: #212529;
        /*background: linear-gradient(90deg, rgba(13, 78, 128, 1) 0%, rgba(36, 70, 138, 1) 100%);*/
        background: linear-gradient(90deg, rgb(131 152 168) 0%, rgb(118 136 168) 100%);
    }

    .navWrap > div::before,
    .links::before {
        content: '';
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 35px;
        width: 1px;
        background: #a5b7be;
    }

/*  */

.lnk {
    cursor: unset !important;
}

/*  */
.fLink::after {
    content: unset !important;
}

.fLink a {
    color: #2f4f4f;
}

.navWrap.active .fLink a {
    color: #fff;
}

/*  */
a.active {
    color: #fff;
}

#navigation-header-box {
    height: 4.125rem;
    width: 16.875rem;
    -webkit-box-shadow: 0px 0px 28px 0px rgba(0, 0, 0, 0.13);
    box-shadow: 0px 0px 28px 0px rgba(0, 0, 0, 0.13);
    overflow: hidden;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-flex: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    min-height: 1px;
    padding: 0 2rem;
}

.extend-button {
    /*background-image: -webkit-linear-gradient(270deg, $nav-background-shade, transparent);
	background-image: linear-gradient(270deg, $nav-background-shade, transparent); 
	background-color: $nav-background;*/
    height: 2.8125rem;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}