/* Ensure full viewport height */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            font-family: 'Rubik', sans-serif !important;
            font-size: 0.875rem;
            color: #666;
            background-color: #fafafa;
            overflow-x: hidden;
        }
        /* Container spans full viewport height */
        #container {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            margin:0px;
        }
        /* Header */
        #header {
            width: 100%;
            float: left;
            height:60px;
            background-color:#9e9e9e;
        }
        .Mainheadcss { 
            cursor: pointer; 
            text-align: center;
            float: left; 
            height: 30px; 
            padding: 10px 0px 0px 5px; 
            width: 151px; 
            border-radius: 5px;
            background: linear-gradient(45deg, rgb(24, 101, 54), rgb(0, 150, 136));
            color: #FFF;
        }
        .Mainheadshow { 
            cursor: pointer; 
            border-radius: 5px; 
            text-align: center;
            float: left; 
            height: 30px; 
            padding: 10px 0px 0px 5px; 
            width: 150px; 
            color: rgb(0, 175, 158); 
            border: 0px 1px 1px 1px solid #f68525;
            background: #FFF;
        }
        .Mainheadshow:after {                
            content: "";
            border: 12px solid;
            border-color: #00a651 transparent transparent transparent;
            float: left; 
            margin-left: 40%; 
            margin-top: 13px;  
        }
        .modalBackground {
            background-color: Black;
            filter: alpha(opacity=90);
            opacity: 0.8;
        }
        .modalPopup {
            border: 3px solid black;
            background-color: #FFFFFF;
            padding-top: 10px;
            padding-left: 10px;
            height: 140px;
            overflow-y: auto;
        }         
        .hideGridColumn {
            display: none;
        }   
        .subbtn {
            margin-top: 20px;
            width: 80%;
            height: 25px;
            margin-left: 2%;
            color: #fff;
            padding-top: 15px;
            font-family: monospace;
            font-size: 80%;
            float: left;
            cursor: pointer;
            border-radius: 5px;
            background: linear-gradient(45deg, #484848, #009688);
        }
        .subbtnarr {
            width: 20%;
            height: 40px;
            background: #FFF;
            float: left;
            opacity: 0.7;
            margin-top: -15px;
            border-left: 2px solid #1a3a18;
            border-right: 2px solid #ffffff;
            background: #0c2f00;
        }     
        .subbtn a {
            width: 90%; 
            height: 100%; 
            text-decoration: none; 
            color: #FFF; 
            padding-left: 7%; 
            font-family: monospace; 
            font-size: 10px; 
            font-weight: 700;  
        }
        .subbtnarr:after {
            content: "";
            border: 7px solid;
            border-color: transparent transparent transparent #fff;    
            float: left; 
            margin-left: 100%; 
            margin-top: 13px;
        }
        .charthead {
            width: 100%;
            float: left;
            height: 25px;
            padding-top: 5px;
            color: #FFF;
            font-family: monospace;
            font-size: 80%;
            font-weight: 800;
            background: rgb(0, 95, 85);
            text-align: center;
            text-transform: uppercase;
        }    
        .LoginInfo {    
            top: 1px;    
            float: right;  
            padding-left: 12px;
            height: 55px;
            width: 20%;
            margin-right: 2%;
            border-radius: 5px;
            border: 2px solid #f8aa09;
        }        
        .HomeIcon {    
            top: 4px;
            float: left;
            margin-left: 60%;
            height: 38px;
            width: 39px;            
        }   
        .lockclass {
            padding: 5px 10px 5px !important;
            font-size: 11px !important;
            background-color: #09a886;
            font-weight: bold;
            color: #FFF;
            border-radius: 5px;
            border: 1px solid #ffffff;
            cursor: pointer;
            box-shadow: 0px 0px 3px 2px rgba(202, 202, 202, 0.5) inset;
        }

        .headRightParent {
            margin-left: 35px;
            margin-top:5px;
            width:20%;
            border-radius: 10px;
        }

        
        /* Main Wrapper for Sidebar and Content */
        .main-wrapper {
            display: flex;
            width: 100%;
            box-sizing: border-box;
            background-image: url(../Images/Body_Background/modalbg.png);
        }
        /* Sidebar Container */
        .sidebar-container {
            width: 250px;
            height: calc(100vh - 60px); /* Full height minus header (~60px) */
        }
        /* Sidebar Styles */
        .sidebar {
            color: #FFF;
            overflow-y: auto;
            height: 100%; /* Fill sidebar-container */
            background-color: #19577c;
        }
        .sidebar-inner {
            padding: 20px;
            margin-top:30px;
        }
        .sidebar-menu {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .sidebar-menu li {
            position: relative;
            margin-bottom: 10px;
        }
        /* Sidebar Menu */
        .sidebar-menu li a {
            color: #FFF;
            text-decoration: none;
            padding: 10px 15px;
            display: block;
            font-family: rubik, sans-serif;
            font-size: 13px;
            font-weight: 600;
            transition: background 0.5s ease-in-out; /* Slower, smoother background transition */
        }
        .sidebar-menu li a:hover {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
        }
        .sidebar-menu .submenu {
            max-height: 0; /* Hidden by default */
            overflow: hidden; /* Hide content when collapsed */
            list-style: none;
            padding-left: 20px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            transition: max-height 0.5s ease-in-out; /* Slower, smoother slide-down/up transition */
        }
        .sidebar-menu li:hover .submenu,
        .sidebar-menu li.show .submenu,
        .sidebar-menu li.active .submenu {
            max-height: 500px; /* Large enough to accommodate submenu content */
        }
        .sidebar-menu li.active > a,
        .sidebar-menu li.show > a {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
        }
        .slimscroll::-webkit-scrollbar {
            width: 6px;
        }
        .slimscroll::-webkit-scrollbar-thumb {
            background: #FFF;
            border-radius: 3px;
        }
        /* Content Container */
        .content-container {
            flex: 1;
            padding: 0 0px;
        }
        /* Main Content Area */
        .main-content {
            width: 100%;
        }
        /* News Ticker */
        .Newsparent {
            width: 100%;
            margin-bottom: 10px;
        }
        .Newstitle-text {
            font-weight: bold;
            color: #FFF;
        }
.home-icon {
    width: 40px;
    height: 40px;

}
.logout-icon {
    width: 40px;
    height: 40px;
    float: left;
    margin-left: 2%;
    top: 4px;
}










/* Tooltip Wrapper */
.tooltip-input-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: visible !important;
}

/* Tooltip Box */
.tooltip-box {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;

    visibility: hidden;
    opacity: 0;

    background: #ffffff;
    color: #000000;

    padding: 8px 12px;
    border: 1px solid #1a3a6b;
    border-radius: 8px;

      min-width: 120px;
    max-width: 450px;

    white-space: normal;
    word-break: break-word;

    font-size: 12px;
    line-height: 1.5;

    z-index: 999999;

    box-shadow: 0 4px 10px rgba(0,0,0,0.15);

    pointer-events: none;

    transform: translateY(4px);
    transition: opacity .2s ease, transform .2s ease;
}

/* Arrow */
.tooltip-box::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 20px;

    border-width: 6px;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent;
}

/* Show Tooltip */
.tooltip-input-wrapper:hover .tooltip-box {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* Hide while typing */
.tooltip-input-wrapper:focus-within .tooltip-box {
    visibility: hidden;
    opacity: 0;
}

/* GridView parent containers */
.grid-viewNew,
.grid-viewNew table,
.grid-viewNew tbody,
.grid-viewNew tr,
.grid-viewNew td {
    overflow: visible !important;
}