/*menu bar chnages*/

.nav-menu {
    display: flex;
    gap: 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 25px;
    /*font-weight: bolder;*/
    color: #333;
    transition: transform 0.25s ease-out, color 0.25s ease-out;
}

    .nav-menu a {
        text-decoration: none;
       /* font-weight:600;*/
        color: inherit;
       /* padding: 5px 10px;*/
        border-radius: 9px;        
        position: relative;
        transition: transform 0.25s ease-out, color 0.25s ease-out;
    }
         
        .nav-menu a:hover {
            color: #78b3df; 
            transform: scale(1.0); 
        }

        .nav-menu a::after {
            content: "";
            position: absolute;
            left: 50%;  
            bottom: -3px; 
            width: 0;
            /*height: 1.15px;*/
            height:2px;
            background-color: #78b3df;  
            transition: width 0.25s ease-out, left 0.25s ease-out; 
        }        
        .nav-menu a:hover::after {
            width: 100%;  
            left: 0;   
        }


/*9 dot application*/


.app-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.app-item {
    text-align: center;
    position: relative;
    border-radius: 9px; 
    overflow: hidden; 
    transition: all 0.3s ease; 
}

.app-item:hover {
    color: rgba(200, 230, 250, 0.15); 
    transform: scale(1.02); 
    background-color: rgba(200, 230, 250, 0.15); 
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); 
}

.app-icon {
    width: 60px;
    height: 50px;
    border-radius: 8px;
}


.nav_menu_icon:hover {


    color: rgba(200, 230, 250, 0.8); /* Brighter light sky blue */
    transform: scale(1.1) translateY(-5px); /* Bigger zoom and more upward movement */
    transition: transform 0.25s ease-out, color 0.25s ease-out; /* Smooth effect */

   border-radius: 2px; /* Rounded corners */
    overflow: hidden; /* Ensures the content stays within the rounded corners */

}

.notification-count {
    position: absolute;
    top: 10px;
    right: 0px;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    width: 15.5px;
    height: 15px;
    line-height: 15.2px;
    border-radius: 50px;
    background-color: #0a7725;
}

/*Descrption tool tip*/
.tooltip-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px; /* Adjust spacing if needed */
}

.custom-tooltip {
    display: flex; /* Always visible */
    position: static; /* Keeps it within the flow */
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    white-space: normal; /* Allows wrapping */
    max-width: 200px; /* Adjust based on your preference */
}
.user-menu ul.mt-4 li a {
    position: relative; /* Ensure the ::after pseudo-element aligns correctly */
    text-decoration: none; /* Remove default underline */
    color: #21f0a9; /* Keep the text color */
    transition: color 0.25s ease-out, transform 0.25s ease-out;
}

.user-menu ul.mt-4 li:hover {
    color: #21f0a9;
    background-color: #e6fff7;
    transform: scale(1.0); /* Slight zoom effect */
}

    /* Underline effect: Expands from center */
.user-menu ul.mt-4 li::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -3px;
    width: 0;
    height: 2px;
    background-color: #78b3df;
    transition: width 0.25s ease-out, left 0.25s ease-out;
}

    /* Expand underline outward on hover */
    .user-menu ul.mt-4 li:hover::after {
        width: 100%;
        left: 0;
    }

.user-menu ul.mt-4 li label
{
    color:#333

}

.user-menu ul.mt-4 li label:hover {
    color: #21f0a9;
}
ul.mt-4 img {
    width: 20px;
    height: 20px; 
}

ul.mt-4 i.fa {
    font-size: 20px; /*Adjust the size of the FontAwesome icon */
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #333;
}
/*From thead _layoutHeader.cshtml*/
.navbar-nav li .nav-link {
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin: 0 12px;
    padding: 20px 0 0 !important;
}

.navbar-nav li:last-child .nav-link {
    margin-right: 0;
}

.navbar-nav li .nav-link i {
    color: #5a6064;
    font-size: 20px;
}

.navbar-nav li .Dots {
    padding-top: 12px !important;
}

.company-logo img {
    width: 60px !important;
    height: auto !important;
}