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

.mainCon .sidebar-header {
            padding: 30px 15px; background:#62bd5e;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      
            align-items: center; border-radius:8px 8px 0 0; text-align:center;
        }

.mainCon .sidebar-header h2 {
            font-size: 1.5rem;
            font-weight: 500;
            color:#fff; margin-bottom:0; text-align:center;
        }

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

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

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

 .mainCon .menu-item > a:hover {
            background-color: rgba(98, 189, 94, 0.1);
            color: #62bd5e; border-radius:3px;  font-weight:bold;border:1px solid #62bd5e;border-color:rgba(98, 189, 94, 0.1);
           
        }

.mainCon .menu-item.active > a {
            background-color: rgba(98, 189, 94, 0.1);
			border-radius:3px;
            color: #62bd5e;font-weight:bold; border:1px solid #62bd5e; border-color:rgba(98, 189, 94, 0.1);

        }
.mainCon .menu-icon{ width:20px; height:20px; margin-right:10px;}
.mainCon .menu-icon img{ display:block; max-width:100%; }
.mainCon .menu-item i {
            width: 25px;
            font-size: 1rem;
            margin-right: 10px;
        }

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

        .mainCon i.menu-arrow {
            transition: transform 0.3s; margin-right:0px; text-align:right;
        }

        .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: #333;
            text-decoration: none;
            transition: all 0.2s; position:relative;
         
        }
 .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: #62bd5e; font-weight:bold;
        }

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

        .mainCon .submenu a.active .css-circle{
			 background: #62bd5e; 
        }	
		 .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;
            }



     
        }