/* ==========================================================
   PREMIUM RESPONSIVE NAVBAR
   HOME + ADMIN CONSISTENT VERSION
========================================================== */


/* ==========================
   MAIN NAVBAR
========================== */

#navbar_top {

    background:#198754 !important;

    min-height:58px;

    height:58px;

    padding:0 !important;

    margin:0;

    border-top:2px solid #ffc107;

    border-bottom:2px solid #ffc107;

    border-radius:6px;

    display:flex;

    align-items:center;

    transition:all .35s ease;

    z-index:1030;

}



/* ==========================
   CONTAINER
========================== */

#navbar_top .container,
#navbar_top .container-fluid {

    height:54px;

    min-height:54px;

    display:flex;

    align-items:center;

}



/* ==========================
   BRAND
========================== */

#navbar_top .navbar-brand {

    height:54px;
    min-height:54px;

    padding:0 10px !important;

    margin:0;

    display:flex;

    align-items:center;


    color:#ffc107 !important;

    font-size:18px;

    font-weight:600;

    text-decoration:none;

    transition:.3s ease;

}

#navbar_top .navbar-brand:hover {

    color:#ffda6a !important;

    background:rgba(255,193,7,.15);

    border-radius:5px;

}



/* ==========================
   NAVBAR LIST
========================== */

#navbar_top .navbar-nav {


    height:54px;

    align-items:center;

}



/* ==========================
   NAV LINKS
========================== */

#navbar_top .navbar-nav .nav-link {


    height:54px;

    min-height:54px;


    padding:0 12px;


    display:flex;

    align-items:center;

    justify-content:center;


    color:#ffffff !important;


    font-size:16px;

    font-weight:500;


    line-height:1;


    border-radius:5px;


    gap:5px;


    transition:.3s ease;


}



/* ==========================
   ICON
========================== */


#navbar_top .nav-link i {


    font-size:15px;

}



/* ==========================
   ACTIVE + HOVER
========================== */


#navbar_top .nav-link:hover,
#navbar_top .nav-link.active {


    background:rgba(255,193,7,.20);

    color:#ffc107 !important;


}



/* ==========================
   DROPDOWN BUTTON
========================== */


#navbar_top .dropdown-toggle::after {


    margin-left:5px;


}



/* ==========================
   DROPDOWN MENU
========================== */


#navbar_top .dropdown-menu {


    background:#198754;


    border:none;


    border-radius:6px;


    padding:5px 0;


    min-width:220px;


    box-shadow:

    0 10px 25px rgba(0,0,0,.20);


}



/* ==========================
   DROPDOWN ITEM
========================== */


#navbar_top .dropdown-item {


    color:#fff !important;


    padding:10px 18px;


    font-size:14px;


    transition:.3s ease;


}



#navbar_top .dropdown-item:hover,
#navbar_top .dropdown-item.active {


    background:rgba(255,193,7,.20);


    color:#ffc107 !important;


}




/* ==========================
   DESKTOP DROPDOWN HOVER
========================== */


@media(min-width:992px){


    #navbar_top .dropdown {


        position:relative;


    }



    #navbar_top .dropdown-menu {


        display:block;


        opacity:0;


        visibility:hidden;


        pointer-events:none;


        transform:translateY(10px);


        transition:.25s ease;


    }



    #navbar_top .dropdown:hover > .dropdown-menu {


        opacity:1;


        visibility:visible;


        pointer-events:auto;


        transform:translateY(0);


    }


}





/* ==========================
   STICKY NAVBAR
========================== */


#navbar_top.fixed-top {


    top:0;


    height:58px;


    box-shadow:

    0 5px 15px rgba(0,0,0,.20);


    animation:

    navbarDown .35s ease;


}



@keyframes navbarDown {


    from {


        transform:translateY(-100%);


    }


    to {


        transform:translateY(0);


    }


}




/* ==========================
   TOGGLER
========================== */


.navbar-toggler {


    padding:6px 10px;


    border:1px solid rgba(255,255,255,.5);


}



.navbar-toggler:focus {


    box-shadow:none;


}



/* ==========================================================
   MOBILE COMPACT NAVBAR
========================================================== */

@media(max-width:991px){


#navbar_top {

    height:auto;

    min-height:42px;

    border-radius:0;

}



#navbar_top .container,
#navbar_top .container-fluid {

    height:auto;

    min-height:42px;

    padding-left:10px;

    padding-right:10px;

}



/* Brand */

#navbar_top .navbar-brand {

    height:42px;

    min-height:42px;

    padding:0 8px;

    font-size:16px;

}



/* Toggler */

#navbar_top .navbar-toggler {

    padding:3px 7px;

    font-size:14px;

}



/* Menu */

#navbar_top .navbar-nav {

    height:auto;

}



/* Collapse */

#navbar_top .navbar-collapse {

    margin-top:5px;

    padding:6px;

    background:#198754;

    border-radius:6px;

}



/* Menu Link */

#navbar_top .navbar-nav .nav-link {


    height:38px;

    min-height:38px;

    padding:0 10px;

    font-size:14px;

    justify-content:flex-start;


}



/* Dropdown */

#navbar_top .dropdown-menu {


    position:static !important;

    width:100%;

    background:#157347;

    border:none;

    box-shadow:none;

    margin:3px 0;


}



#navbar_top .dropdown-item {


    padding:7px 15px;

    font-size:13px;


}



}