.header-container {
    background: #fff;
    box-shadow: -1px 4px 20px 1px #f1f185;
}

header.header {
    justify-content:space-between;
    align-items: center;
    padding: 0;
}
.header-left{

    justify-content:space-between;
    align-items:center;
}
ul.navbar-item{

    display:flex;
}

img.icon {
    width: 24px;
    height: 24px;
}

img { vertical-align:middle;
}
p.count {
    position: absolute;
    top: 0;
    font-size: 10px;
    color: var(--white-color);
    background: var(--main-gradient);
    height: 13px;
    width: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    right: -3px;
}
.user-profile-dropdown{
    margin-left:20px;
    margin-right:15px;
    display:flex;
    justify-content:center;
    align-items:center;
}
.nav-link.user{
    padding:6px 0;
    font-size:25px;
    color:#9999;
    position:relative;
}
.dropdown{
    position:relative;
}
.logo {
    width: 240px;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    padding: 10px 0;
    background: var(--main-gradient);
    color: var(--second-color) !important;
}
a.sidbarcolleps {
    padding-left:24px;
    color:var(--second-color);
    font-size:20px;
}
/*User profile setting*/
.dropdown-menu {
    z-index: var(--z-fixed);
    max-width: 15rem;
    right: -21px !important;
    left: auto !important;
    padding: 0;
    border-radius: 5px;
    margin-right: 10px;
    min-width:15rem;
}

img.user-note {
    width: 35px;
    height:35px;
    padding-right:10px;
}

.dp-main-menu {
    display: inline-grid;
    width:100%;
    box-shadow: 0px 4px 20px 0px #666;
    border-radius: 5px;
    padding:10px 0;
   
}
 .dp-main-menu a {
        font-size: 15px;
        color: var(--second-color);
        width: 100%;
        white-space: initial;
        line-height: 13px;
        border-bottom: 1px solid #ddd;
        align-items: center;
        padding: 10px;
    }
 .dp-main-menu a span{
     color:var(--main-color);
     padding-right:8px;
 }

.message-item {
    display:flex;
}
.status-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--main-gradient);
    color: var(--white-color);
}
.note-name {
    font-size:11px;
    font-weight:500;
}
.note-time {
    font-size: 10px;
    
}
.dp-main-menu a:last-child {
    border-bottom: 0;
}
.note-info-desmis {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
/*User role setting dropdown*/
.sms-user{
    width:45px;
    height:45px;
    border-radius:50%;
    margin-right:7px;

}
p.user-name{
    font-size:14px;
    font-weight:600;
    color:var(--second-color);
}
p.user-role{
    font-size:12px;
    color:var(--main-color);
}
/*Side bar css*/
.left-menu {
    height: 100vh;
    width: 240px;
    position: fixed;
    box-shadow: 3px 1px 19px 1px #efeeee;
    overflow: scroll;
    transition: .5s;
    margin-top: 15px;
    background: var(--white-color);
}
.left-menu.hide{
    width:0;
}

nav.animated {
    position: relative;
   
}

.left-menu::-webkit-scrollbar {
    width: 6px;
}

.left-menu::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.left-menu::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: linear-gradient(0deg, rgba(180,58,112,1)0%, rgba(232,37,169,0) 54%);
}
ul#sidebar {
    padding-left: 5px;
    margin: 5px;
}
ul#sidebar li{
    transition:3s;
    border-left:5px solid #fff;
}
ul#sidebar li a:hover{

    color:var(--main-color);
    background:#f7f7f7;
}
    ul#sidebar li a
    {
        display: block;
        padding: 7px 15px;
        transition: .2s;
        font-size:12px;
        font-weight: 500;
        color:#676767;
    }
    ul#sidebar li:hover{
        border-left: 5px solid var(--main-color);
    }
    li.active{
        border-left :5px solid var(--main-color);

    }
li.active a {
    color: var(--main-color);
    background: #f9f9f9;
}
ul#sidebar li a i{
    padding-right:5px;
    font-size: 14px;
}
.sub-menu ul {
    list-style: none; /* Remove bullet points */
    padding-left: 20px; /* Indent the sub-menu items */
    display: none; /* Hidden by default */
}

.sub-menu > a {
    text-decoration: none; /* Remove underline from links */
    color: #000; /* Default text color */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sub-menu a .right {
    margin-left: 5px; /* Space between text and icon */
}

.sub-menu.active > ul {
    display: block; /* Show sub-menu when active */
}
.logo-img {
    width: 45px;
    height: 45px;
    padding-right: 5px;
}
@media (max-width: 768px) { /* Example breakpoint for smaller screens */
    .left-menu {
        margin-top:-20px; /* Adjust margin to prevent overlapping header */
        width: 200px;
    }
    
}