#busyIndicator {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #cccccc5f;
    text-align: center;
}

#busyIndicator i {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 48px;
}

/* ------------ Navbar ------------ */
.navbar-bottom-margin {
    margin-bottom: 57px;
  }

nav.navbar{
    min-height: 57px;
}

.surflog-danger {
    color: #ff5969;
}

#navProfilePic {
    object-fit: cover;
    width: 30px;
    height: 30px;
}

#navProfileCardPic {
    object-fit: cover;
    width: 80px;
    height: 80px;
}

.bg-theme-main-navbar {
    background-color: var(--jf-theme-main-color) !important;
}

.navbar-page-title {
    color: var(--jf-theme-primary-lighter-color);
    font-size: 18px;
}

#sidemenu-nav-btn.active,
#sidemenu-nav-btn i:hover {
    color: #a36bf5 !important;
}



#sidemenu-nav-btn.active,
#sidemenu-nav-btn i:hover {
    color: #a36bf5 !important;
}

#sidemenu-nav-btn {
    /* display: inline-block; */
    cursor: pointer;

    .bar1,
    .bar2,
    .bar3 {
        width: 22px;
        height: 2px;
        margin: 6px 0;
        transition: 0.4s;
    }
}

#sidemenu-nav-btn.change {
    .bar1 {
        transform: rotate(-45deg) translate(-6px, 6px);
    }

    .bar2 {
        opacity: 0!important;
    }

    .bar3 {
        transform: rotate(45deg) translate(-6px, -6px);
    }
}

#sidemenu-nav-btn.active,
#sidemenu-nav-btn:hover {

    .bar1,
    .bar2,
    .bar3 {
        background-color: #a36bf5 !important;
    }
}


@media (max-width: 1080px) {
    /* #sidemenu-nav-btn{
      display: none;
    } */

    .navbar-page-title{
        position: absolute;
        left: 50%;
        transform: translate(-50%);
    }
}

/* Show screen-lg and hide screen-sm for screens larger than 1080px */
@media (min-width: 1081px) {}

/* ------------ Navbar ------------ */