ul#demo {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

.arrow_right,
.nav_members {
    padding-bottom: 10px!important;
    margin-bottom: 10px!important;
    border-bottom: 1px solid #E5E8EE;
}

#demo>li {
    min-height: 40px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    padding-top: 0px;
    margin-top: 0px;
}

#demo>li>a {
    position: relative;
    margin-left: 0;
    padding: 0px 8px 0px 32px;
    color: #4D5461;
    text-decoration: none;
    font-size: 14px;
    height: 100%;
    display: flex;
    align-items: center;
    min-height: 40px;
}

#demo>li>a:before {
    content: "";
    position: absolute;
    left: 8px;
    top: 12px;
    width: 16px;
    height: 16px;
}

#demo>li.nav_discovery>a:before {
    background-image: url(https://www.aihr.com/wp-content/themes/dt-the7-child/images/demo/compas.svg);
}

#demo>li.nav_members>a:before {
    background-image: url(https://www.aihr.com/wp-content/themes/dt-the7-child/images/demo/people.svg);
}

#demo>li.leave_site {
    display: none;
}

#demo>li.leave_site {
    display: block;
}

#demo>li.leave_site>a:before {
    background-image: url(https://www.aihr.com/wp-content/themes/dt-the7-child/images/arrow-up-right.svg);
}

#demo>li.menu-item-has-children {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

#demo li.arrow_down>a:first-child:before {
    content: "\f0d7";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 10px;
    top: 7px;
    background-position: center center;
    color: rgb(111, 118, 130);
    font-size: 12px;
}

#demo li.arrow_down>ul {
    padding-left: 40px;
    position: relative;
    list-style: none;
    margin-left: 0px!important;
}

#demo li.arrow_down>ul a:before {
    content: "";
    position: absolute;
    left: -30px;
    top: 10px;
    width: 22px;
    height: 22px;
    background-position: center center;
    background-size: cover;
}

#demo li.arrow_down>ul a {
    color: #4D5461;
    text-decoration: none;
    font-size: 14px;
    min-height: 40px;
    padding: 0px;
    display: flex;
    align-items: center;
}

#demo li.arrow_down>ul .community_nav a:before {
    background-image: url(https://www.aihr.com/wp-content/themes/dt-the7-child/images/demo/community.png);
}

#demo li.arrow_down>ul .dashboard_nav a:before {
    background-image: url(https://www.aihr.com/wp-content/themes/dt-the7-child/images/demo/dashboard-icon.png);
    border-radius: 100%;
}

#demo li.arrow_down>ul .events_nav a:before {
    background-image: url(https://www.aihr.com/wp-content/themes/dt-the7-child/images/demo/events.png);
}

#demo li.arrow_down>ul .rlibrary_nav a:before {
    background-image: url(https://www.aihr.com/wp-content/themes/dt-the7-child/images/demo/resource_library.png);
}

#demo li.arrow_down>ul .career_nav a:before {
    background-image: url(https://www.aihr.com/wp-content/themes/dt-the7-child/images/demo/career_center.png);
}

#demo li.arrow_down>ul .assessments_nav a:before {
    background-image: url(https://www.aihr.com/wp-content/themes/dt-the7-child/images/demo/assessments.png);
}

#demo li.arrow_down>ul .new_career {
    display: none;
}

#demo li.arrow_down>ul .new_career {
    background-color: #E5E8EE;
    border-radius: 4px;
    display: block;
}

#demo li.arrow_down>ul .new_career a:before {
    content: '\f279';
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #FFD0D4;
    font-size: 12px;
    width: 22px;
    height: 22px;
    background-color: #E32D34;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#demo li.arrow_down>ul li {
    min-height: 40px;
    display: flex;
    align-items: center;
    position: relative;
    margin-top: 0px!important;
    padding-top: 0px!important;
}

.preload-holder {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
}

.demo-sidebar-top:hover .tooltip_text {
    display: block;
    position: absolute;
    top: 40%;
    left: 0px;
    right: 0px;
    width: 260px;
    background-color: #fff;
    box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 30%);
    padding: 10px;
    box-sizing: border-box;
    border-radius: 8px;
    text-align: center;
    margin: auto;
    color: #141921;
}

.accordion-item-header {
    padding: 6px 8px 6px 40px;
    color: #4D5461;
    text-decoration: none;
    font-size: 14px;
    position: relative;
    cursor: pointer;
}

.accordion-item-header:hover {
    background-color: #F4F6FA;
    border-radius: 4px;
}

.accordion-item-header:before {
    content: "\f0d7";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 15px;
    top: 5px;
    background-position: center center;
    color: rgb(111, 118, 130);
    font-size: 12px;
    transform: rotate(-90deg);
    transition: rotate 0.8s;
}

.accordion-item-header.active-item:before {
    transform: rotate(0deg);
    transition: rotate 0.8s;
}

.accordion-item-content {
    display: none;
}

.accordion-item-content ul {
    margin: 0px -0.6em 0px 0px;
    padding: 0px 0px 0px 0px;
    list-style: none;
    max-height: 500px;
    overflow-y: scroll;
}

.accordion-item-content ul::-webkit-scrollbar {
    width: .6em;
    background-color: #fff;
}

.accordion-item-content ul::-webkit-scrollbar,
.accordion-item-content ul::-webkit-scrollbar-thumb {
    overflow: visible;
    border-radius: 4px;
}

.accordion-item-content ul::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
}

.accordion-item-content ul li {
    color: #4D5461;
    text-decoration: none;
    font-size: 14px;
    padding: 6px 8px 6px 40px;
    position: relative;
    line-height: 1.4;
    display: flex;
    min-height: 28px;
    align-items: center;
    cursor: pointer;
}

.accordion-item-content ul li:before {
    content: "\f19d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 10px;
    top: 8px;
    background-position: center center;
    color: #fff;
    font-size: 12px;
    width: 24px;
    height: 24px;
    background-color: #1EBBF0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
}

.accordion-item-content ul li a {
    text-decoration: none;
    color: #4D5461;
}

.accordion-item-content ul li.active-course {
    background-color: #E5E8EE;
    border-radius: 4px;
}

.demo-sidebar-top {
    position: relative;
}

.menu-demo-container {
    opacity: 0.5;
    pointer-events: none;
}

.tooltip_text {
    display: none;
}

.tooltip_text a {
    font-weight: 600;
}

.loading-items {
    opacity: 0.5;
    pointer-events: none;
    z-index: 999999;
}

.preload-holder {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
}

.demo-sidebar-top:hover .tooltip_text {
    display: block;
    position: absolute;
    top: 40%;
    left: 0px;
    right: 0px;
    width: 260px;
    background-color: #fff;
    box-shadow: 0px 2px 4px 0px rgb(0 0 0 / 30%);
    padding: 10px;
    box-sizing: border-box;
    border-radius: 8px;
    text-align: center;
    margin: auto;
    color: #141921;
}

#demo li.arrow_down>ul .new_career {
    display: none;
}

.demo-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 280px;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #fff;
    z-index: 9999;
    border-right: 1px solid #ABB0B9;
    padding: 0px 8px 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    top: 85px;
}

.logged-in .demo-sidebar {
    top: 118px;
}

#demo li.arrow_right>a:before {
    content: "\f0da";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 10px;
    top: 7px;
    background-position: center center;
    color: rgb(111, 118, 130);
    font-size: 12px;
}

#demo>li.leave_site {
    display: none;
}

.logged-in .site-header-new {
    top: 32px !important;
}

.site-header-new {
    position: fixed!important;
    top: 0px;
    left: 0px;
    right: 0px;
}

#filter-sidebar {
    display: none;
}

.holder-mobile {
    display: none;
}

@media (min-width: 1041px) {
    .site-header-new {
        background: #31216B;
    }
}

@media (max-width: 1040px) {
    .holder-mobile {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.2);
        z-index: 999999;
    }
    .active-sidebar .holder-mobile {
        display: block;
    }
    .demo-sidebar {
        z-index: 999999;
    }
    .logged-in .demo-sidebar {
        top: 32px;
    }
    .logged-in .site-header-new {
        margin-top: 0px;
    }
    #filter-sidebar {
        display: inline-flex;
        align-items: center;
        margin-bottom: 20px;
        font-size: 16px;
    }
    #filter-sidebar i {
        padding-right: 5px;
    }
    .page_content_inner {
        margin-left: 0px;
        margin-top: 90px;
    }
    .active-sidebar .demo-sidebar {
        -moz-transform: translateX(0vw);
        -ms-transform: translateX(0vw);
        -webkit-transform: translateX(0vw);
        transform: translateX(0vw);
        transition: transform .3s;
    }
    .demo-sidebar {
        -moz-transform: translateX(-100vw);
        -ms-transform: translateX(-100vw);
        -webkit-transform: translateX(-100vw);
        transform: translateX(-100vw);
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
    }
}