.bottom-navbar{
    position:fixed;
    bottom:0;
    width:100%;
    gap:1em;
    padding:0 1em;
    /* border-top:1px solid #ddd; */
    /* box-shadow:0px -1px  3px 3px #0001; */
    background:#f5f5f5;
    z-index:3;
}

.bottom-navbar > a.col{
    gap:0.2em;
    padding:0em 0 1em 0;
    padding:1em 0 1em 0;
    
    border-top:2px solid var(--color-primary);
    width:17%;
}

.bottom-navbar > a.col hr{
    border:none;
    height:2px;
    width:100%;
    margin:0 0 0.5em;
    border-radius:1em;
    background-color:var(--color-primary);
    display:inline-block;
    display:none;
}

.bottom-navbar i{
    color:var(--color-primary);
}


.bottom-navbar > a.col > span{
    font-size:0.8em;
    font-weight:600;
    color:inherit;
    text-decoration:none;
}

.bottom-navbar a{
    color:inherit;
    text-decoration:none;
}

@media screen and (min-width:768px){
    .bottom-navbar{
        display:none;
    }
}