.mainCon .sidebar {
            width: 310px;
            background:#fff;
            color: #fff;
            transition: all 0.3s ease;
            overflow-y: auto;
            height: 100vh; float:left;
            top: 0;
            box-shadow: 3px 0 10px rgba(0, 0, 0, 0.1);
        }

.mainCon .sidebar-header {
            padding: 10px 15px; background:#063f87;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center; border-radius:8px 8px 0 0;
        }

.mainCon .sidebar-header h2 {
            font-size: 1.2rem;
            font-weight: 600;
            margin-left: 20px; color:#fff; margin-bottom:0;font-family: "Oswald";
        }

     
.mainCon .sidebar-menu {
            padding:30px 15px;
        }

.mainCon .menu-item {
            position: relative;
        }

 .mainCon .menu-item > a {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            color: #000;
            text-decoration: none;
            transition: all 0.3s; border:1px solid transparent; font-size:14px;
          
        }

 .mainCon .menu-item > a:hover {
            background-color: rgba(59, 130, 246, 0.1);
            color: #3B82f6; border-radius:3px;  font-weight:bold;border:1px solid #3B82f6;border-color:rgba(59, 130, 246, 0.1);
           
        }

.mainCon .menu-item.active > a {
            background-color: rgba(59, 130, 246, 0.1);
			border-radius:3px;
            color: #3B82f6;font-weight:bold; border:1px solid #3B82f6; border-color:rgba(59, 130, 246, 0.1);

        }

.mainCon .menu-item i {
            width: 25px;
            font-size: 1rem;
            margin-right: 5px;
        }

       .mainCon .menu-text {
            flex: 1;
        }

        .mainCon .menu-arrow {
            transition: transform 0.3s;
        }

        .mainCon .menu-item.active .menu-arrow {
            transform: rotate(90deg);
        }

       .mainCon  .submenu {
            max-height: 0; transition:all 0.3s;
            overflow: hidden;
            transition: max-height 0.3s ease;
            
        }

        .mainCon .menu-item.active .submenu {
            max-height: 500px;
        }

        .mainCon .submenu a {
            display: block;
            padding: 10px 20px 10px 70px;
            color: #000;
            text-decoration: none;
            transition: all 0.2s; position:relative; font-size:13px;
         
        }
 .mainCon .submenu a .css-circle{ display:block; position:absolute; left:55px; top:50%; margin-top:-3px;width:6px; height:6px; border-radius:3px; background:#999; transition: all 0.2s; 
 
}
        .mainCon .submenu a:hover { 
            
            color: #3B82F6; font-weight:bold;
        }

        .mainCon .submenu a.active {
			 color: #3B82F6; font-weight:bold;
        }
 .mainCon .submenu a:hover .css-circle{ 
            
            background: #3B82F6; 
        }

        .mainCon .submenu a.active .css-circle{
			 background: #3B82F6; 
        }	
		 .mainCon   .content {
            flex: 1;
            padding: 30px; padding-left:0px; padding-right:0px;
      
        }

       .mainCon  .page {
            display: none;
        }

       .mainCon  .page.active {
            display: block;
        }
   @media (max-width: 768px) {
           .mainCon  .sidebar { display:none;
            }



     
        }