.sidebar-top-light-panel {
    background: #ffffff !important;
    border-bottom: 1px solid #dcdcdc;
}

.sidebar-top-dark-panel {
    background: #000000 !important;
    border-bottom: 1px solid #ffffff;
}

.sidebar-light-panel {
   /* background: #ffffff !important;*/
    border-right: 1px solid #dcdcdc;
}

.sidebar-dark-panel {
    background: #000000 !important;
}
.sidebar-dark-panel .wj-usercontrol,
.sidebar-dark-panel .wj-label,
.sidebar-dark-panel .wj-textbox,
.sidebar-dark-panel .wj-combobox,
.sidebar-dark-panel .wj-textarea,
.sidebar-dark-panel .wj-datepicker {
    color: #ffffff;
    font-weight: 500;
}

.sidebar-light-label {
    color: #393F49 !important;
}

.sidebar-dark-label {
    color: #ffffff !important;
}

.top-light-panel {
    background: #0066cc !important;
}

.top-dark-panel {
    background: #0066cc !important;
}

/* ===== SIDEBAR CONTAINER ===== */
.my-sidebar {
    background-color: #1e1e2d;
    border-right: 1px solid #2c2c3a;
}

/* ===== ITEM NORMAL ===== */
.my-sidebar .wj-item {
    color: #cfd3ec;
    background-color: transparent;
    transition: all 0.2s ease;
}

/* ===== HOVER ===== */
.my-sidebar .wj-item:hover {
    background-color: #2d7dff !important;
    color: #ffffff !important;
}

/* ===== ACTIVE ===== */
.my-sidebar .wj-item.wj-selected {
    background-color: #ff4d4f !important;
    color: #ffffff !important;
    border-left: 4px solid #ffffff;
}

/* ===== ICON ===== */
.my-sidebar .wj-item-image {
    width: 20px;
    height: 20px;
}

/* ===== ICON ACTIVE ===== */
.my-sidebar .wj-selected .wj-item-image {
    filter: brightness(0) invert(1);
}

/* CHILD LEVEL */
.my-sidebar .wj-level-1 {
    padding-left: 30px;
    font-size: 13px;
}

/* CHILD HOVER */
.my-sidebar .wj-level-1:hover {
    background-color: #00bcd4 !important;
}

/* CHILD ACTIVE */
.my-sidebar .wj-level-1.wj-selected {
    background-color: #0097a7 !important;
}

/* COMPACT SIDEBAR */
.my-sidebar.wj-compact .wj-item-text {
    display: none;
}

/* ICON CENTER */
.my-sidebar.wj-compact .wj-item-image {
    margin: auto;
}

.my-sidebar .wj-item {
    position: relative;
    overflow: hidden;
}

.my-sidebar .wj-item::before {
    content: "";
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    background: #2d7dff;
    transition: 0.3s;
    z-index: -1;
}

.my-sidebar .wj-item:hover::before {
    left: 0;
}

.my-sidebar .wj-navigationbar-item {
    background-color: red !important;
}