/*--------------------navbar-brand-box----------------------*/

[data-layout-mode="dark"] .app-menu.navbar-menu {
    background-color: var(--webwms-header-bg);
    border-right: 1px solid #32383e;
}

/*--------------------navbar-brand-box----------------------*/

.app-menu.navbar-menu .navbar-brand-box {
    padding: 0;
    display: inline-block;
}

/*--------------------sidebar-brand----------------------*/

.app-menu.navbar-menu .navbar-brand-box .sidebar-brand {
    padding: 0 20px 5px 20px;
    display: flex;
    align-items: center;
    text-align: center;
}

[data-sidebar-size="sm"] .app-menu.navbar-menu .navbar-brand-box .sidebar-brand {
    display: none;
}

.app-menu.navbar-menu .navbar-brand-box .sidebar-brand > a {
    text-transform: uppercase;
    font-weight: bold;
    flex-grow: 1;
}

.app-menu.navbar-menu .navbar-brand-box .sidebar-brand #close-sidebar {
    cursor: pointer;
    font-size: 20px;
}

.app-menu.navbar-menu .navbar-brand-box .sidebar-brand-version {
    position: absolute;
    font-size: 12px;
    font-weight: bold;
    margin-top: 60px;
    left: 20%;
    color: var(--webwms-body-color);
}

[data-layout-mode=dark] .app-menu.navbar-menu .navbar-brand-box .sidebar-brand-version {
    color: var(--webwms-body-color);
}

/*--------------------sidebar-header----------------------*/

.app-menu.navbar-menu .navbar-brand-box .sidebar-header {
    padding: 20px 20px 20px 10px;
}

[data-sidebar-size="sm"] .app-menu.navbar-menu .navbar-brand-box .sidebar-header {
    display: none;
}

.app-menu.navbar-menu .navbar-brand-box .sidebar-header .user-pic {
    float: left;
    width: 60px;
    padding: 2px;
    border-radius: 12px;
    margin-right: 15px;
    overflow: hidden;
}

.app-menu.navbar-menu .navbar-brand-box .sidebar-header .user-pic img {
    float: left;
    width: 60px;
    padding: 2px;
    border-radius: 12px;
    margin-right: 15px;
    overflow: hidden;
    position: absolute;
}

.app-menu.navbar-menu .navbar-brand-box .sidebar-header .sidebar-brand {
    float: left;
    height: 50px;
    padding: 15px 15px 15px 0;
    font-size: 18px;
    line-height: 20px;
    display: block;
}

.app-menu.navbar-menu .navbar-brand-box .sidebar-header .sidebar-brand .text-first {
    position: initial;
    right: 50%;
    transform: translate(50%,-30%);
    margin-bottom: -15px !important;
    font-size: 25px;
    font-weight: 700;
    font-family: 'hollowpointital', sans-serif;
    color: #dee2e6;
    text-shadow:
            1px 1px 1px #808080,
            1px 1px 1px #808080,
            1px 2px 1px #808080,
            1px 3px 1px #808080,
            1px 4px 1px #808080,
            1px 5px 1px #808080,
            1px 9px 6px rgb(16 16 16 / 40%),
            1px 13px 10px rgb(16 16 16 / 20%),
            1px 16px 25px rgb(16 16 16 / 20%),
            1px 21px 30px rgb(16 16 16 / 40%);
}

.app-menu.navbar-menu .navbar-brand-box .sidebar-header .sidebar-brand .text-last {
    position: initial;
    right: 50%;
    transform: translate(50%,-30%);
    margin-bottom: -15px !important;
    font-size: 35px;
    font-weight: 700;
    font-family: 'hollowpointital', sans-serif;
    color: #ec6702;
    text-shadow:
            1px 1px 1px #808080,
            1px 1px 1px #808080,
            1px 2px 1px #808080,
            1px 3px 1px #808080,
            1px 4px 1px #919191,
            1px 5px 1px #919191,
            1px 9px 6px rgb(16 16 16 / 40%),
            1px 13px 10px rgb(16 16 16 / 20%),
            1px 16px 25px rgb(16 16 16 / 20%),
            1px 21px 30px rgb(16 16 16 / 40%);
}

.app-menu.navbar-menu .navbar-brand-box .sidebar-header .user-info {
    float: left;
}

.app-menu.navbar-menu .navbar-brand-box .sidebar-header .user-info > span {
    display: block;
}

.app-menu.navbar-menu .navbar-brand-box .sidebar-header .user-info .user-role {
    font-size: 12px;
}

.app-menu.navbar-menu .navbar-brand-box .sidebar-header .user-info .user-status {
    font-size: 11px;
    margin-top: 4px;
}

.app-menu.navbar-menu .navbar-brand-box .sidebar-header .user-info .user-status i {
    font-size: 8px;
    margin-right: 4px;
    color: #5cb85c;
}

.app-menu.navbar-menu .navbar-brand-box .sidebar-header .user-pic {

}

.app-menu.navbar-menu .navbar-nav {
    padding: inherit;
}

.app-menu.navbar-menu .sidebar-footer {
    background-color: #414a50;
    background-image: -webkit-linear-gradient(top, #475158 2%, #373e44 98%);
    background-image: linear-gradient(to bottom,#475158 2%, #373e44 98%);
    -webkit-box-shadow: inset 0 1px 0 #636367, inset 0 -1px 0 #353c41, 0 2px 3px rgb(0 0 0 / 8%);
    box-shadow: inset 0 1px 0 #636367, inset 0 -1px 0 #353c41, 0 2px 3px rgb(0 0 0 / 8%);
    text-shadow: 0 -1px 0 rgb(0 0 0 / 8%);
    height: 35px;
    position: relative;
}

.app-menu.navbar-menu .sidebar-footer>a {
    margin-top: 3px;
}

.app-menu.navbar-menu .sidebar-footer>a:first-child {
    border-left: none;
}

.app-menu.navbar-menu .sidebar-footer>a:last-child {
    border-right: none;
}