@font-face{ src: url("../font/MaterialIcons-Regular.ttf"); font-family:meicon;}
*{
    padding: 0;
    margin: 0;
    
 
}
.bt-icon{ margin: 0 10px; font-family: meicon; color: #7ac142; font-size: 27px;}
a{text-decoration: none;}
body{
    background-color:white;
    display: flex;
}
.img-box{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid white;
    flex-shrink: 0;
}
.img-box img{
    width: 95%;
}
.profile{
    display: flex;
    align-items: center;
    gap: 30px;
}
.profile h2{
    font-size: 20px;
    text-transform: capitalize;
}
.menu{
    width: 60px;
    height: 100vh;
    padding: 5px;
    overflow: hidden;
    transition: .5s;
}
.menu:hover{
    width: 260px;
}
.menu ul{
    padding: 15px;
    list-style: none;
    display: flex;
    flex-direction: column;
    height: calc(100% - 30px);
}

.menu-contorl{
    white-space: nowrap;
}
.menu ul li a{
     color: black;
    display: block;
    text-decoration: none;
    /*background-color:red;*/
    margin: 15px 0;
    display: flex;
    align-items: center;
    gap: 8px;
   
}
.menu ul li:hover, .active,.data-info .box:hover{
    background-color: #7ac142;
    color: #fff;
       transition: .5s;
    
}

.log-out{
    margin-top: auto;
}

.menu ul li a i{
    width:40px;
    min-width:40px;
    font-size:26px;
    text-align:center;

}
.content{
    width: 100%;
    margin: 10px;
}
.title-info{
    background-color: #7ac142;
    color: black;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px;
    margin: 10px 0;
}
.data-info{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.data-info .box{
    background-color: #123;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-basis: 150px;
    width: 15rem;
    height: 15rem;
     flex-grow: 1;
    border-radius: 8px;
    border: solid 3px #7ac142;
    background: #ffffff;
    /*

    background-color: #123;
    display: flex;
    align-items: center;
     justify-content: space-around;
    height: 150px;
    flex-basis: 150px;
    flex-grow: 1;
    border-radius: 8px;
    
    align-items: center;
   
    */
}
.data-info .box p{
    position: absolute;
    margin-top: -2rem;
    font-size: 1rem;
    color: gray;
  }
  .data-info .box .c_mychart1{
    position: absolute;
    margin-top: 12rem;
    font-size: 1rem;
    color: gray;
  }
.data-info .box i{
    font-size: 40px;   
}
.data-info .box .data{
    text-align: center;
}
.data-info .box .data span{
    text-align: 30px;
}

.price, .count{
    padding: 6px;
    border-radius: 6px;
}
.nav-control{
  margin-top: 15px;
  margin-bottom: 15px;
   background-color: black;
}

.nav-control ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: visible; /* 1. قمنا بتغييرها من hidden إلى visible لتظهر القائمة المنسدلة خارج الإطار */
  background-color: black;
}

.nav-control ul li {
  float: right;
  position: relative; /* 2. مهم جداً لكي تفتح القائمة الفرعية بالنسبة لمكان هذا العنصر الأب */
}

.nav-control ul li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.nav-control ul li a:hover {
  background-color: #7ac142;
  color: #fff;
  transition: 0.5s;
}

/* القائمة الفرعية الافتراضية (مخفية) */
.nav-control ul li ul{
  display: none;
  position: absolute; /* 3. لجعلها تطفو تحت العنصر دون دفع العناصر الأخرى */
  right: 0; /* محاذاة القائمة الفرعية من اليمين مع العنصر الأب */
  top: 100%; /* تظهر مباشرة تحت الشريط الرئيسي */
  min-width: 150px; /* تحديد عرض مناسب للقائمة المنسدلة */
  z-index: 999; /* لضمان ظهورها فوق محتوى الصفحة الأخري */
  background-color: #fff; /* نفس لون الخلفية الأساسي أو أي لون تختار */
}
.nav-control ul li ul :hover{
background-color: #fff;
color: black;
}

/* 4. الكود السحري: إظهار القائمة الفرعية عند تمرير الماوس على الـ li الأب */
.nav-control ul li:hover > ul {
  display: block;
}

/* تنسيق اختياري: لجعل العناصر داخل القائمة الفرعية تنزل تحت بعضها عمودياً بدلاً من الطفو أفقياً */
.nav-control ul li ul li {
  float: none;
  text-align: right;
}
.nav-control ul li ul li :hover{
 background-color: #7ac142;
 color: #fff;
}
.nav-control ul li ul li label{
    display: block;
  color: black;
  padding: 5px 5px;
  font-size: 12px;
}
#check-phone{
margin-left:5px;
accent-color: #7ac142;
background-color: #7ac142;
color: #fff;
}
.bt_serch
{
    background-color: #7ac142;
}
/*-------employees-------*/
        /* فئة إخفاء العمود عبر CSS */
        .hide-column {
            display: none;
        }