/****************************
 * Floating Nav
****************************/
/* General */
.vii-floating-navigation {
    position:fixed; top:calc(50% + var(--admin-bar-height)/2 + var(--height-tradding-view)/2); left:11px; z-index:29;
    transform:translateY(-50%);
}
body.scroll-middle .vii-floating-navigation {top:calc(50% + var(--admin-bar-height)/2)}
ul.vii-floating-navigation li:not(:last-child) {margin-bottom:43px; position:relative;}

/* line */
ul.vii-floating-navigation li:not(:last-child):before,
ul.vii-floating-navigation li:not(:last-child):after {
    content:""; display:block;
    position:absolute; top:calc(100% + 4px); left:50%; transform:translateX(-50%);
    border-left:1px dashed var(--vii-color-dark-gold); height:35px;

}
ul.vii-floating-navigation li:not(:last-child):before {transition:opacity 0.3s ease}
ul.vii-floating-navigation li:not(:last-child):after {
    border-left:1px solid var(--vii-color-dark-gold); height:0; z-index:2;
    transition:height 0.6s ease
}
.vii-floating-navigation li.active:after {height:35px !important;}
.vii-floating-navigation li.active:before {opacity:0;}

/* Item */
.vii-floating-navigation button {
    width:18px; background:rgba(0, 0, 0, 0); text-align:left;
    border:1px solid var(--vii-color-dark-gold); border-radius:50%;
}
.vii-floating-navigation button span {left:calc(100% + 8px);}
.vii-floating-navigation button span i.text {
    display:flex; align-items:center; justify-content:center;
    background:#fff;padding:3px 12px 5px; min-height:35px;
    border:1px solid var(--vii-color-dark-gold); border-radius:4px;
    font-size:var(--vii-size-14); font-weight:700; font-style:normal; white-space:nowrap;
}
.vii-floating-navigation button span i.triangle {
    width:0; height:0;
    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
    border-right:6px solid var(--vii-color-dark-gold);
    display:block;
    position:absolute; top:50%; left:-5px; transform:translateY(-50%); z-index:3;
}
.vii-floating-navigation button span i.triangle-inner {
    position:relative; top:-8px; left:2px;
    width:0; height:0;
    border-top:8px solid transparent;
    border-bottom:8px solid transparent;
    border-right:8px solid var(--vii-color-white);
    display:block; transform:translateX(-7%);
}
.vii-floating-navigation button > i {width:10px; border:1px solid var(--vii-color-dark-gold);}
ul.vii-floating-navigation li button:not(:hover) span {opacity:0; pointer-events:none;}
ul.vii-floating-navigation li:not(.active) button {border-color:rgba(0, 0, 0, 0);}
ul.vii-floating-navigation li:not(.active) button > i {width:8px; background:rgba(0, 0, 0, 0);}

/****************************
 * Floating Nav Responsive
****************************/
@media only screen and (max-width:1180px) {
    .vii-floating-navigation {display:none;}
}