/*made by @razenkellesly*/



	:root{

        --main:#cea052 ;
		--second:#cea052  ;
        --third:#007195 ;

   

         
       /* 
            --main: #157C6A;
        --second: rgb(157, 192, 186);
        --third: rgb(0, 182, 152);
        --main: #7a1b6b;
        --second: #a81584;
        --third: #a31985;

       --main: #525252;
        --second: #7d7d7d;
        --third: #646464; */
	/*	--main:#cea052 ;
		--second:#cea052  ;
        --third:#007195 ;
        
*/
		
	}
	html , body{
		direction:rtl !important; text-align:right
		
	}
table{margin : 0 auto !important;}
    tbody{border: 2px solid rgba(51,51,51,0);}

    .table th {
        padding: .60rem;
        vertical-align: top;
        border-top: 0px solid #dee2e6;
    }
    .table td  {
        padding: .75rem;
        vertical-align: top;
        border-top: 0px solid #dee2e6;
    }

    .tableborderHolder {
          transition: all 2s ease;  vertical-align:middle;margin: 4px; }


.table  >tbody> tr>td   { transition: all 2s ease;    vertical-align: middle;
}
.table >tbody> tr>td:hover   {  transition: all 2s ease;
}

.table thead th     {
background-color:  var(--main);color:white;
}
 


.table-striped > tbody > tr:nth-child(2n+1)  {
background-color: rgba(207, 204, 204, 0.1);color: rgba(81,81,81,0.9); 
}


 

.table-hover> tbody> tr>td { 
 background-color: #fff !important;
 transition: all 0.3s ease;     vertical-align: middle;
}

.table-hover> tbody> tr>td:hover { 
 background-color: rgba(233, 233, 233, 0.1) !important;
}



.table-hover> tbody> tr> td:hover{
color:var(--second); 	
transition: all 0.3s ease
}



.trHoverda ::after { 
content: "";
background-color: var(--second);  position :absolute ; left:0 ;  height:1%;width:1%; 
}
 
 
/*body*/
.hold{ display: flex; width:100%; margin-bottom:50px} 

/*sideBar*/


.sidebar{ border-left:1px solid rgba(51,51,51,0.1); width:238px;    transition:all 0.3s ease;  }
.sidebar1{ border-left:2px solid rgba(51,51,51,0.1);width:75px;   transition:all 0.3s ease;  }
.menuHeader{   
margin-right: 20px;
margin-top: 20px;
margin-bottom: 16px;
display: flex;
align-items: center;}
.menuElements{margin-top:2%;}
.mtSelf{margin:  0.5em 0}
.subMenuIcons{font-size: 1.25em;transform:rotate( 0deg); transition:all 0.3s ease; color: rgba(81,81,81,0.8)
 }
 .subMenuContent{display:none;}
.subMenuIcons:hover{ color: var(--main); }
.subMenuIcons1{font-size: 1.25em;transform:rotate(0deg); transition:all 0.3s ease}
.de{display: flex; padding:1em; }
.de1{display: flex; margin:0em 2em  ;  }
.deH6{     margin: 0em 1.50em 0.25em;  }
.bordRi{border-right:1px solid rgba(51,51,51,0.1);}
.deh5out{font-size:1.1em; font-weight:bold; color:rgba(81,81,81,0.8); margin:0 0.50em;opacity:1; transition:all 0.3s ease ;text-decoration:none}
.deh5{font-size:1em; font-weight:bold;opacity:1; transition:all 0.3s ease ;text-decoration:none;    min-width: 100px;}
.menuContent a , .deh5:hover{text-decoration:none}
.menuContent a  {align-items:center;}
.mwid{min-width: 100px;}

	a{color: var(--main);
    text-decoration: none;}
	
	a:hover{color: rgba(81,81,81,0.8);
    text-decoration: none;}
	
	
	.mainColor{color:var(--main)}
	.mainColorimp{color:var(--main) !important}
    .chatsdelet{    font-size: 14px; padding-right:15px;color: var(--third); transition:all 0.3s ease}
    .chatsdelet:hover{     color: var(--main)}
	.thirdColor{color:var(--third)}
	.hearingResultTable{font-size:13px;
	color:rgba(51,51,51,0.9)}
	.moreIcons{font-size:0.75em}
.mw-15{min-width:15% !important}
.mw-28{min-width:28% !important}
.mw-40{min-width:40% !important}
.w-96{width:96% !important}
.w-90{width:90% !important}
.w-80{width:80% !important}
.w-70{width:70% !important}
.w-60{width:60% !important}
.w-54{width:54% !important}
.w-50{width:50% !important}
.w-49{width:49% !important}
.w-48{width:48% !important}
.w-44{width:44% !important}
.w-40{width:40% !important}
.w-32{width:32% !important}
.w-30{width:30% !important}
.w-25{width:25% !important}
.w-24{width:24% !important}
.w-22{width:22% !important}
.w-20{width:20% !important}
.w-18{width:18% !important}
.w-16{width:16% !important}
.w-15{width:15% !important}
.w-14{width:14% !important}
.w-12{width:12% !important}
.w-10{width:10% !important} 
.w-9{width:9% !important}
.w-8{width:8% !important}
.w-7{width:7% !important}
.w-6{width:6% !important}
.w-5{width:5% !important}
.w-4{width:4% !important}
.w-3{width:3% !important}
.w-2{width:2% !important}
.w-1{width:1% !important}

 


 .exactPos{margin: 0 0.5em;}
.hideShowbutton{
padding-bottom: 18px;
padding-top: 18px;}	
.asswar{color:rgba(81,81,81,0.8);  transition: all 0.9s ease;}
.icons{font-size:1.4em ;    
    min-width: 44px;
    text-align: center;}
	.iconsforSub{font-size:1em ;    
        min-width: 44px;
        text-align: center;}

        .iconsforSubx{font-size:1.1em ;
        vertical-align: sub;}
	.rotateOnhover{transform:rotate(0deg); transition:all 0.3s ease;}
	.rotateOnhover:hover{transform:rotate(-25deg);  }
	.btnact {
  
  transition: all 0.3s ease;color:rgba(81,81,81,0.8);
  
}
 
.active, .btnact:hover { 
  color: var(--main);
}

 
.deh6{font-size:1.1em; font-weight:bold; color:rgba(81,81,81,0.95); margin:0 0.50em;display:none; transition:all 0.3s ease;text-decoration:none }
.iconsBarOut{color:rgba(81,81,81,0.95);font-size:1.4em; vertical-align:middle;
    min-width: 37px;
    text-align: center; }
.iconsBarOut:hover{color:#be2424; cursor:pointer;}
.iconsBarOut:active{color:rgba(81,81,81,1); cursor:pointer;}
/*sideBar*/
/*mainpage*/
.mainpage{width:100%; height:100%;
   }
.userNameAvatarComment{display:flex; align-items: center;} 
.userNameAvatarComment span{font-size:1em; font-weight:400; margin:0 0.30em; color:rgba(81,81,81,0.95);} 
.imageComment{width:28px; border-radius:50%;  object-fit: cover;height:28px; }
.avatarBar{width:35px; border-radius:50%;  object-fit: cover;height:35px;}
.avatarNuser{width:25px; border-radius:50%; object-fit: cover;height:25px;}
.avatarServiceUser {width:20px; border-radius:50%; object-fit: cover;height:20px;}
.officeLogo{width:56px; border-radius:50%;}
.userNameAvatar{display:flex; align-items: center;} 
.userNameAvatar span{font-size:1.1em; font-weight:bold; margin:0 0.30em; color:rgba(81,81,81,0.95);} 
.menText{font-size:1.1em; font-weight:bold; color:rgba(81,81,81,0.95); margin:0 0.50em;opacity:1; transition:all 0.3s ease}
.menTextn{font-size:1.1em; font-weight:bold; color:rgba(81,81,81,0.95); margin:0 0.50em;opacity:0; transition:all 0.3s ease}

/*Mainpage Nav*/
.iconsBar:hover{color:rgba(81,81,81,0.7); cursor:pointer;} 
.iconsBar{color:rgba(81,81,81,0.95); transition:all 0.3s ease;}
.iconsBar:hover{color:rgba(81,81,81,0.7); cursor:pointer;}
.iconsBar:active{color:rgba(81,81,81,1); cursor:pointer;} 
#ex1 .p1[data-count]:after,#ex2 .p1[data-count]:after,#ex3 .p1[data-count]:after,#ex4 .p1[data-count]:after,#ex5 .p1[data-count]:after,#ex6 .p1[data-count]:after,#ex7 .p1[data-count]:after,#ex8 .p1[data-count]:after,#ex9 .p1[data-count]:after,#ex10 .p1[data-count]:after {

position: absolute;
right: 8%;
bottom: 40%;
content: attr(data-count);
font-size: 35%;
padding: 0.3em;
border-radius: 15%;
color: white;
background: rgba(255,0,0,.85);
text-align: center;
min-width: 1em;
font-weight: bold;

} 










.animexcu {font-size:0.7em;animation:warnh2 7s ease   infinite}
.animexcu:hover{animation:warnh2 1s ease  infinite}
@keyframes warnh2{

0%{transform:scale(1);color:rgba(81,81,81,0.95)}
05%{transform:scale(1);}
10%{transform:scale(1);}
15%{transform:scale(1);}
20%{transform:scale(1);}
25%{transform:scale(1.2);color:rgb(75, 113, 173)}
75%{transform:scale(1);}
80%{transform:scale(1);}
85%{transform:scale(1);}
90%{transform:scale(1);}
95%{transform:scale(1);}
100%{transform:scale(1);color:rgba(81,81,81,0.95)}

}
 




.animpay {font-size:0.7em;animation:warnh3 9s ease   infinite}
.animpay:hover{animation:warnh3 1s ease  infinite}
@keyframes warnh3{

0%{transform:scale(1);color:rgba(81,81,81,0.95)}
05%{transform:scale(1);}
10%{transform:scale(1);}
15%{transform:scale(1);}
20%{transform:scale(1);}
25%{transform:scale(1.2);color:rgb(75, 173, 99)}
75%{transform:scale(1);}
80%{transform:scale(1);}
85%{transform:scale(1);}
90%{transform:scale(1);}
95%{transform:scale(1);}
100%{transform:scale(1);color:rgba(81,81,81,0.95)}

}
 




















.animapp{font-size:0.8em;animation:app 3s ease   infinite}
.animappoff{font-size:0.8em;animation:appoff 10s ease   infinite ; transition:color 0.3s ease}
.animappoff:hover{color: #b14242}
@keyframes appoff{
    0%{ color:rgba(81,81,81,0.95)}    
   50%{ color: #b14242}      
    100%{ color:rgba(81,81,81,0.95)}   
    }

    @keyframes app{
        0%{opacity: 0.5;color:rgba(81,81,81,0.95)}
        50% {opacity: 1;color:#b14242}
        
        100% {opacity: 0.5;color:rgba(81,81,81,0.95)}
        
    }

.animbelloff {font-size:0.8em;animation:belloff 10s ease   infinite ; transition:color 0.3s ease}
.animbelloff:hover{color: #4267b2}
@keyframes belloff{
    0%{ color:rgba(81,81,81,0.95)}    
   50%{ color: #4267b2}      
    100%{ color:rgba(81,81,81,0.95)}   
    }



.animbell {font-size:0.8em;animation:bell 5s ease   infinite}
.animbell:hover{animation:bellh 2s ease   infinite}
@keyframes bellh{
0%{transform:rotate(0deg);color:rgba(81,81,81,0.95)}
05%{transform:rotate(0deg);}
10%{transform:rotate(0deg);}
15%{transform:rotate(0deg);}
20%{transform:rotate(10deg);}
25%{transform:rotate(-10deg);} 
30%{transform:rotate(0deg);color: #4267b2} 
75%{transform:rotate(0deg);}
80%{transform:rotate(10deg);}
85%{transform:rotate(-10deg);}
90%{transform:rotate(0deg);}
95%{transform:rotate(0deg);} 
100%{transform:rotate(0deg);color:rgba(81,81,81,0.95)}


}
@keyframes bell{
0%{transform:rotate(0deg);color:rgba(81,81,81,0.95)}
05%{transform:rotate(0deg);}
10%{transform:rotate(0deg);}
19%{transform:rotate(0deg);}
20%{transform:rotate(10deg);}
21%{transform:rotate(-10deg);} 
22%{transform:rotate(0deg);color: #4267b2} 
23%{transform:rotate(0deg);}
24%{transform:rotate(10deg);}
25%{transform:rotate(-10deg);}
26%{transform:rotate(0deg);}
95%{transform:rotate(0deg);} 
100%{transform:rotate(0deg);color:rgba(81,81,81,0.95)}


}

.animwarn {font-size:0.7em;animation:warnh 10s ease   infinite}
.animwarn:hover{animation:warnh 1s ease  infinite}
@keyframes warnh{

0%{transform:scale(1);color:rgba(81,81,81,0.95)}
05%{transform:scale(1);}
10%{transform:scale(1);}
15%{transform:scale(1);}
20%{transform:scale(1);}
25%{transform:scale(1.2);color:#be2424}
75%{transform:scale(1);}
80%{transform:scale(1);}
85%{transform:scale(1);}
90%{transform:scale(1);}
95%{transform:scale(1);}
100%{transform:scale(1);color:rgba(81,81,81,0.95)}

}

@keyframes warn{

0%{transform:scale(1);color:rgba(81,81,81,0.95)}
05%{transform:scale(1);}
10%{transform:scale(1);}
15%{transform:scale(1);}
20%{transform:scale(1.2);}
22%{transform:scale(1);color:#be2424}
24%{transform:scale(1.2);}
26%{transform:scale(1);}
85%{transform:scale(1);}
90%{transform:scale(1);}
95%{transform:scale(1);}
100%{transform:scale(1);color:rgba(81,81,81,0.95)}

}


.animtaskoff {font-size:0.8em;animation:taskoff 10s ease   infinite ; transition:color 0.3s ease}
.animtaskoff:hover{color: #4fb242}
@keyframes taskoff{
    0%{ color:rgba(81,81,81,0.95)}    
   50%{ color: #4fb242}      
    100%{ color:rgba(81,81,81,0.95)}   
    }




.animtask {font-size:0.8em;animation:task 5s ease   infinite}

.animtask:hover {font-size:0.8em;animation:taskh 1s ease   infinite}
@keyframes task{
0%{-webkit-transform: rotateY(0deg);transform: rotateX(0deg);color:rgba(81,81,81,0.95)}
05%{-webkit-transform: rotateY(0deg);transform: rotateY(0deg);}
10%{-webkit-transform: rotateY(0deg);transform: rotateY(0deg);}
15%{-webkit-transform: rotateY(0deg);transform: rotateY(0deg);}
20%{-webkit-transform: rotateY(0deg);transform: rotateY(0deg);}
25%{-webkit-transform: rotateY(40deg);transform: rotateY(40deg); }
35%{-webkit-transform: rotateY(0deg);transform: rotateY(0deg);color: #4fb242    }
45%{-webkit-transform: rotateY(40deg);transform: rotateY(40deg);  }
50%{-webkit-transform: rotateY(0deg);transform: rotateY(0deg);  }
85%{-webkit-transform: rotateY(0deg);transform: rotateY(0deg);}
90%{-webkit-transform: rotateY(0deg);transform: rotateY(0deg);}
95%{-webkit-transform: rotateY(0deg);transform: rotateY(0deg);}	 
100%{-webkit-transform: rotateY(0deg);transform: rotateY(0deg);color:rgba(81,81,81,0.95)}


}
@keyframes taskh{
0%{-webkit-transform: rotateY(0deg);transform: rotateX(0deg);color:rgba(81,81,81,0.95);}
05%{-webkit-transform: rotateY(0deg);transform: rotateY(0deg);}
10%{-webkit-transform: rotateY(0deg);transform: rotateY(0deg);}
15%{-webkit-transform: rotateY(0deg);transform: rotateY(0deg);}
20%{-webkit-transform: rotateY(0deg);transform: rotateY(0deg);}
25%{-webkit-transform: rotateY(0deg);transform: rotateY(0deg);}
35%{-webkit-transform: rotateY(40deg);transform: rotateY(40deg);color: #4fb242;}
45%{-webkit-transform: rotateY(0deg);transform: rotateY(0deg);}
50%{-webkit-transform: rotateY(0deg);transform: rotateY(0deg);}
85%{-webkit-transform: rotateY(0deg);transform: rotateY(0deg);}
90%{-webkit-transform: rotateY(0deg);transform: rotateY(0deg);}
95%{-webkit-transform: rotateY(0deg);transform: rotateY(0deg);}	 
100%{-webkit-transform: rotateY(0deg);transform: rotateY(0deg);color:rgba(81,81,81,0.95)}


}





.animagencyoff {font-size:0.8em;animation:agencyoff 10s ease   infinite ; transition:color 0.3s ease}
.animagencyoff:hover{color: #b28b42}
@keyframes agencyoff{
    0%{ color:rgba(81,81,81,0.95)}    
   50%{ color: #b28b42}      
    100%{ color:rgba(81,81,81,0.95)}   
    }


.animagency {font-size:0.8em;animation:agency 9s ease   infinite}
.animagency:hover {font-size:0.8em;animation:agencyh 3s ease   infinite}
@keyframes agency{
0%{-webkit-transform: rotateX(0deg);transform: rotateX(0deg);color:rgba(81,81,81,0.95)}
05%{-webkit-transform: rotateX(0deg);transform: rotateX(0deg);}
10%{-webkit-transform: rotateX(0deg);transform: rotateX(0deg);}
15%{-webkit-transform: rotateX(0deg);transform: rotateX(0deg);}
20%{-webkit-transform: rotateX(0deg);transform: rotateX(0deg);}
25%{-webkit-transform: rotateX(-40deg);transform: rotateX(-40deg); }
35%{-webkit-transform: rotateX(0deg);transform: rotateX(0deg);color: #b28b42    }
45%{-webkit-transform: rotateX(-40deg);transform: rotateX(-40deg);  }
50%{-webkit-transform: rotateX(0deg);transform: rotateX(0deg);  }
85%{-webkit-transform: rotateX(0deg);transform: rotateX(0deg);}
90%{-webkit-transform: rotateX(0deg);transform: rotateX(0deg);}
95%{-webkit-transform: rotateX(0deg);transform: rotateX(0deg);}	 
100%{-webkit-transform: rotateX(0deg);transform: rotateX(0deg);color:rgba(81,81,81,0.95)}


}
@keyframes agencyh{
0%{-webkit-transform: rotateX(0deg);transform: rotateX(0deg);color:rgba(81,81,81,0.95);}
05%{-webkit-transform: rotateX(0deg);transform: rotateX(0deg);}
10%{-webkit-transform: rotateX(0deg);transform: rotateX(0deg);}
15%{-webkit-transform: rotateX(0deg);transform: rotateX(0deg);}
20%{-webkit-transform: rotateX(0deg);transform: rotateX(0deg);}
25%{-webkit-transform: rotateX(0deg);transform: rotateX(0deg);}
35%{-webkit-transform: rotateX(-40deg);transform: rotateX(-40deg);color: #b28b42;}
45%{-webkit-transform: rotateX(0deg);transform: rotateX(0deg);}
50%{-webkit-transform: rotateX(0deg);transform: rotateX(0deg);}
85%{-webkit-transform: rotateX(0deg);transform: rotateX(0deg);}
90%{-webkit-transform: rotateX(0deg);transform: rotateX(0deg);}
95%{-webkit-transform: rotateX(0deg);transform: rotateX(0deg);}	 
100%{-webkit-transform: rotateX(0deg);transform: rotateX(0deg);color:rgba(81,81,81,0.95)}


}


.navbar-expand-lg .navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
}

.dropdown1{position:relative}
.zeroow{position:absolute !important; }

.navbar-expand-lg .navbar-nav .nav-link {
      padding-left: 0 !important;  
     padding-right: 0 !important; 
}


.navDis{display:flex;align-items:center}
.navbar-brandR{
display:inline-block;padding-top:.3125rem;padding-bottom:.3125rem;margin-right:1rem;  line-height:inherit;white-space:nowrap}
.navbar-brand:focus,.navbar-brand:hover{text-decoration:none}
 .read{opacity: 0.7;
    color: rgba(81,81,81,0.8); 
     }
	 .morNoti{ 
    text-align: center;
    padding-top: 5px; }
	.padNoti{
		padding: 0px 6px 4px 6px;   
		
	}	 
	.nfont{ font-size:15px}
	.nfont div{padding: 14px 5px;
    border-bottom: 1px rgba(81,81,81,0.1) solid;}
	
.fa-stackR{display:inline-block; left: 0px;
    top: 0px; position:relative;vertical-align:middle;width:1.75em ;animation:width100 1s ease}
.fa-stackR1{display:inline-block; left: 0px;
    top: 0px; position:relative;vertical-align:middle;width:1.75em ;animation:width1001 1.2s ease}
.fa-stackR2{display:inline-block; left: 0px;
    top: 0px; position:relative;vertical-align:middle;width:1.75em ;animation:width1002 1.3s ease}
    .fa-stackR3{display:inline-block; left: 0px;
        top: 0px; position:relative;vertical-align:middle;width:1.75em ;animation:width1003 1.4s ease}

        
    .fa-stackR10{display:inline-block; left: 0px;
        top: 0px; position:relative;vertical-align:middle;width:1.75em ;animation:width1003 1s ease}

        .fa-stackR4{display:inline-block; left: 0px;
            top: 0px; position:relative;vertical-align:middle;width:1.75em ;animation:width1004 1.5s ease}
            .fa-stackR5{display:inline-block; left: 0px;
                top: 0px; position:relative;vertical-align:middle;width:1.75em ;animation:width1005 1.6s ease}

                
            .fa-stackR6{display:inline-block; left: 0px;
                top: 0px; position:relative;vertical-align:middle;width:1.75em ;animation:width1006 1.6s ease}
                .fa-stackR7{display:inline-block; left: 0px;
                    top: 0px; position:relative;vertical-align:middle;width:1.75em ;animation:width1007 1.6s ease}


.w100{position: absolute;
    left: 12px;
    top: -11px; 
    min-width: 33px;
    font-size: 0.6em;} 

    @keyframes width100{
        0%{top: -160px;  }
        50%{top: 6px;   }
        100%{top: 0px;  }
        }

   
        @keyframes width1001{
            0%{top: -160px;   }
            50%{top: 6px;   }
            100%{top: 0px;  }
            }
            @keyframes width1002{
                0%{top: -160px;  }
                50%{top: 6px;  }
                100%{top: 0px;  }
                }
                @keyframes width1003{
                    0%{top: -160px;  }
                    50%{top: 6px;   }
                    100%{top: 0px;  }
                    }
                    @keyframes width1004{
                        0%{top: -160px;  }
                        50%{top: 6px;   }
                        100%{top: 0px;  }
                        }
                        @keyframes width1005{
                            0%{top: -160px;  }
                            50%{top: 6px;   }
                            100%{top: 0px; }
                            }

                            
                   
    
.brandRLogo{height:35px;margin:0 0.25em}
.brandRLogoCompany{height:35px;margin:0 0.25em; border-right:1px solid rgba(51,51,51,0.1); padding-right:1em}
/*Mainpage Nav*/


/*sectionInfo  */
.sectionInfo{
background: var(--main);  
margin-bottom: 1.5em;

}
.sectionInfo1{
background: var(--main);   

}


	
	.customers { 
  border-collapse: collapse;
  width: 100%;
}

.customers td, .customers th { 
  padding: 8px;    vertical-align: middle;
}
.moreInfo{font-size:2em;color: var(--main); transition:all 0.3s ease}
.moreInfo:hover{font-size:2em;color: var(--third);cursor:pointer}
.moreInfo:active{font-size:2em;color: var(--main);}
	
	
	
	
	.sidebarService{ border-right:1px solid rgba(51,51,51,0.05); width:110px ;    transition:all 0.3s ease;position:relative  }
.sidebarServicePosition{position:fixed; overflow:scroll;        margin-right: 8px ; width:115px ;height:80%; transition:all 1s ease;padding:0.25em 0;overflow-x: hidden;
}
.sidebarBorderThird{border-top:  2px solid var(--third);border-bottom:  2px solid var(--third)
}
.arrowUp::before{
	content:'';
		width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 10px solid var(--third); 
}
.arrowUp{
    margin: -16px 0 10px 0;
    text-align: center;
}

 
.arrowDown::after{
	content:'';
		width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 10px solid var(--third); 
}
.arrowDown{
        margin: 16px 0 0px 0;
    text-align: center;
	cursor:pointer;
}


.arrowUp1::before{
	content:'';
		width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 10px solid var(--main); 
}
.arrowUp1{
    margin: -16px 0 10px 0;
    text-align: center;
}
.sas{display:none;}

 
.arrowDown1::after{
	content:'';
		width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 10px solid var(--main); 
}
.arrowDown1{
        margin: 16px 0 0px 0;
    text-align: center;
	cursor:pointer;
}
.sidebarBorderMain{border-top:  2px solid var(--main);border-bottom:  2px solid var(--main)
}
.itemView{display:none} 
.dnone{display:none} 
/*   .sidebarServicePosition::-webkit-scrollbar { 
                 display: none; 
            } 
			
			
 *::-webkit-scrollbar { 
                 display: none; 
            }     */


            /* width */
::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: var(--main); 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888; 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }
  
.addPostHolderd{border-top: 3px solid var(--main);
    padding: 20px 0; } 
 
  .itemCreate .sidebarServicePosition .addPostHolder .postItemList .container-fluid .row .postItem{ text-align:center;    
    transition: all 0.3s ease;margin: 0.25em 0em;
	color:var(--third); z-index:0 } 

   .itemCreate .sidebarServicePosition .addPostHolder .postItemList .container-fluid .row .postItem:hover{color:var(--main); cursor:pointer;  }
   .itemCreate .sidebarServicePosition .addPostHolder .postItemList .container-fluid .row .postItem:active{color:var(--third); cursor:pointer;  }
 
 
 
   .itemView .sidebarServicePosition .addPostHolder .postItemList .container-fluid .row .postItem{ text-align:center;    
    transition: all 0.3s ease;margin: 0.25em 0em;
	color:var(--main); } 

   .itemView .sidebarServicePosition .addPostHolder .postItemList .container-fluid .row .postItem:hover{color:var(--third); cursor:pointer;  }
   .itemView .sidebarServicePosition .addPostHolder .postItemList .container-fluid .row .postItem:active{color:var(--main); cursor:pointer;  }
   
 
 
 
 .timeLineList{     padding: 0px 27px 0px 8px;border-bottom: 1px solid #e8e8e8 !important; }
 
 .timeLineHolder{       
 color: var(--main);
    border-right: 3px solid var(--main);
    padding: 0;
	position:relative;word-break: break-word;
 }
 
 .timeLineHolder::before{
	     content: '';
    display: inline-block;
    height: 15px;
    width: 15px;
    background: var(--main);
    border-radius: 50px;
    margin: 0 -9.5px -9px 0;
 }
 
 
 .timeLineHolder::after{
    content: '';
    display: inline-block;
    height: 10px;
    width: 10px;
    background: var(--main);
    border-radius: 50px;  
    margin:0px -6.5px -6px 0;
    opacity: 1;
 }
 
  .timeLineHolderAfter{ 
    position:absolute;
   width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 16px solid  var(--main);
	transition:all 0.3s ease;
	top:1%;
	left:0.5%; 
    cursor:pointer;
    margin: 32px -9px -30px 3px;
	z-index:1;
 }
 

 .timeLineIcon{    color: var(--third); 
    font-size: 1.5em;} 
 .timeLineIcssonSpan{    color: var(--third); 
    font-size: 1em;} 
	
.timeLineText{ color: rgba(51,51,51,0.8); 
    font-size: 17px; }
	.timeLineContent{background:rgba(51,51,51,0.05); padding:1em ; margin:0.35em 0;    border-radius: 13px; max-height: 350px;
        overflow: scroll;
        overflow-x: hidden;
    }
    
	.timeLineContentme{ max-height: 850px !important;
        
    }

        
	.timeLineContent2{background:rgba(51,51,51,0.05);    border-radius: 13px; max-height: 450px; overflow-x: hidden;
        overflow: scroll;overflow-x: hidden;}
    .chats{    font-size: 14px; padding-right:15px;color: var(--third); transition:all 0.3s ease}
    .chats:hover{     color: var(--main)}

    .chatsmain{    font-size: 1.8em; transition:all 0.3s ease}
    .graycol{color:  rgb(177, 177, 177);}

    .chatsx{    font-size: 14px; padding-right:15px;color: rgba(51,51,51,0.9); transition:all 0.3s ease}
.chatsx:hover{     color: var(--main)}


.commentes{margin:0.5em;padding:0.5em; background:#fff; border-radius: 13px;display:none}
.viewComment{margin:0.5em;padding:0.5em}
.serviceStatusText{color : var(--main)}

.addComment{margin: 0.5em;}
	.comment{font-size:14px ; color:rgba(51,51,51,0.8);padding:0.25em}
	.reply{padding:0.25em}
/*
 .timeLineList{  padding: 34px 0px;
    margin-right: -42px; }
 .timeLine{       
 color: var(--main);
    border-right: 3px solid var(--main);
    padding: 33px 30px;
 }
 
 .timeLine::before{
	content: '';
    display: inline-block;
    height: 15px;
    width: 15px;
    background: #be2424;
    border-radius: 50px;
    margin: 0px -39px 0px 23px;
 }
 
 .ss2ee{    color: #be2424;
    margin-right: -120px;
    font-size: 1.5em;}
*/
.postText{font-size:1.15em ; margin: 0 0.25em;}
.postIcon { font-size:1.15em ;} 
  

.viewDocs{min-height:800px;}
 
.marginRa{margin:12px}
.infoHeaderName{    color: #fff;
vertical-align: middle; 
font-size: 1.25em;
font-weight: 400; 
margin: 15px 15px;}
.infoHeaderNameStart{    color: #fff;
vertical-align: middle; 
font-size: 1.4em;
font-weight: 400;  }
.borderSright{border-right:2px solid #fff}
.iconsInfo{margin:0px 1%;}

/*sectionInfo  */
/*form&Show  */


.avatarmyw {
    position: relative;
    border: 2px solid var(--main);
    border-radius: 50%;
    overflow: hidden;
    
    width: 45px; 
      object-fit: cover;
      height: 45px;
      cursor: pointer;
  }
  
  .avatarmyw:not(:last-child) {
    margin-left: -20px;
    transition: all ease 0.3s;
  }
  
  .avatarmyw img {
    width: 100%;
    display: block;
  }
  
  .avatarmyw:hover   {
    margin-left:-5px !important;
    border: 3px solid var(--third);
  }
.serviceRequestsHolder{ width: 100%;}
.serviceRequests{border: 1px solid var(--main);
    display: flex;
    width: 100%;
    padding: 0.25em;
    margin: 10px 0px;}
.serviceRequestText{color:#333; text-align: justify;}
.serviceRequestDone{ font-size:1.25em ; transition:all 0.3s ease;color:green;  }
.serviceRequestDonehalf{ font-size:1.25em ; transition:all 0.3s ease;color:orange;  }
.serviceRequestNot {  font-size:1.25em ; transition:all 0.3s ease;color:#be2424;  }
.serviceRequestStill {color:rgba(81,81,81,0.5) ; font-size:1.25em ; transition:all 0.3s ease;   }
.serviceRequestDoneMake {color:rgba(81,81,81,0.5) ; font-size:1.25em ; transition:all 0.3s ease;   }
.serviceRequestNotMake  {color:rgba(81,81,81,0.5) ; font-size:1.25em ; transition:all 0.3s ease;  }
.serviceRequestDoneMake:hover {color:green ; font-size:1.25em ; transition:all 0.3s ease;  cursor:pointer}
.serviceRequestNotMake:hover  {color:#be2424; font-size:1.25em ; transition:all 0.3s ease;  cursor:pointer}


.serviceRequestDoneAdd{  font-size:1em ; transition:all 0.3s ease}
.serviceRequestDoneAdd:hover{  cursor:pointer}
.serviceAreaPadding{padding:0em 1em}

.descriptionText{text-align: justify; padding:0.5em; font-size:14px}

.areaHover{border :2px solid rgba(51,51,51,0); transition:all 0.3s ease}
.areaHover:hover{border :2px solid var(--main)}

.serviceSectionTables {width:100%} 

.serviceUserHolder{background:#e4e4e4; margin:5px;padding:2px 0;    border-radius: 25px;    display: inline-block;}
.dirc{direction:rtl !important; text-align:left}
.modaee{  color : darkgreen}
.modaaAlieh{  color : #be2424}
.deleteIcon{color: var(--third);transition:all 0.3s ease}
.deleteIcon:hover{color: #be2424;}
.addIcon{color: var(--third);transition:all 0.3s ease}
.addIcon:hover{color: green;}
.textLabelsDelete{color: var(--third);
    margin-left: 0.5em;
    margin-top: 0.15em;
    margin-bottom: 0.20em;
    font-weight: 400;
    transition: all 0.3s ease; }
.textLabelsDelete:hover{color:#be2424;  font-weight:500;cursor:pointer }
.textLabelsAdd{color: var(--third);
    margin-left: 0.5em;
    margin-top: 0.15em;
    margin-bottom: 0.20em;
    font-weight: 500;
    transition: all 0.3s ease;}
.textLabelsAdd:hover{color:green;  font-weight:500 ;cursor:pointer}
.headerLabels{color:var(--main);     font-size: 18px;font-weight: bold;    }
.contentHeader{    background: rgba(51, 51, 51, 0.05);     padding: 5px; }
.textLabels{color:var(--third);margin-left:1em ; font-weight:500;  font-size:14px }
.textLabels1{color: #737171;margin-left:1em ; font-size:14px  }
.textLabels2{color: #737171;margin-left: 0.5em; margin-bottom: -0.25em; font-size:14px  }
.contentBody{padding:0.25em;  height:auto ;}
.infoContentHolder{display:flex;
align-items: baseline;
margin:0.5em 0;}
.addEmployeeStart{color:var(--main); font-size:1.5em;margin-right:0.25em;transform:rotate(0deg);transition:all 0.3s ease}
.addEmployeeStart:hover{color:var(--third); transform:rotate(-20deg);cursor:pointer;}
.addEmployeeStart:active{color:var(--main); transform:rotate( 20deg);}
.formHeader{color:var(--second)}
.formlabels{color:var(--third);margin-left:2em;font-size:16px }	
.formlabelsReportHe{
    color: var(--third);
    /* margin-left: 2em; */
    font-size: 14px;
    font-weight: 600;
    }
    .formlabelsReportTe{
        color: #464646; 
        font-size: 13px;
        font-weight: 600;
    }
    			 
*[contenteditable="true"]:focus { 
	margin: 0 5px;
	outline: 2px solid var(--main);
	height: calc(1.5em + 0.75rem + 2px);
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #495057;
	background-color: #fff;
	background-clip: padding-box;
	border: 0px solid #ced4da;
	border-radius: 0.25rem;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

    .rtable {
        border-collapse: collapse;
        width:100%; 
        margin-bottom:15px !important;
        }
      
        .rtable , .rtable tbody ,.rtable tr,.rtable th,.rtable  td{
            border: 1px solid #e6e4e4 !important;    vertical-align: middle;
            direction:rtl
          }


          .rtable tr td {    vertical-align: middle;
            border: 1px solid #464646;
            padding:2px;
            text-align:center;
            vertical-align: top;
            
          }
          .rtable tr th {
           border: 1px solid #464646;
           padding:2px;
           text-align:center;
           vertical-align: top;
           
         }
         .rtable:nth-child(even){background-color: #eaeaea ;}

         .rtable:nth-child(even) ,  .rtable:nth-child(even) tbody , .rtable:nth-child(even) tr, .rtable:nth-child(even)  td{
           border: 1px solid #cac3c3 !important;
           direction:rtl
         }
       
      .specialtd {    vertical-align: middle;
        border: 3px solid #be2424 !important; 
      }
       
      
 
 
    .rtable2 {
        border-collapse: collapse;
        width:100%; 
        margin-bottom:15px !important;
        }
      
        .rtable2 , .rtable2 tbody ,.rtable2 tr,.rtable2 th,.rtable2  td{
            border: 1px solid #e6e4e4 !important;    vertical-align: middle;
            direction:rtl
          }


          .rtable2 tr td {    vertical-align: middle;
            border: 1px solid #464646;
            padding:2px;
            text-align:center;
            vertical-align: top;
            
          }
          .rtable2 tr th {
           border: 1px solid #464646;
           padding:2px;
           text-align:center;
           vertical-align: top;
           
         }
         .rtable2:nth-child(even){background-color: #fdfcfc ;}

         .rtable2:nth-child(even) ,  .rtable2:nth-child(even) tbody , .rtable2:nth-child(even) tr, .rtable2:nth-child(even)  td{
           border: 1px solid #e9e7e7 !important;
           direction:rtl
         }
    
      .serialtd{width:4%; text-align:center; vertical-align:middle}


      .starOurClient{font-size: 12px; color: var(--main);margin: 0px 4px;}


    
.contentlabelsHeader{color:var(--third);margin-left:2em;font-size:18px ;  }	
.contentlabels{color:var(--main);margin-left:2em;font-size:15px ; display: block;}	
.infoContent{margin-right:0.25em }
.infoSection{color :var(--third);margin-bottom:1.5em}
.infoHeader{color:var(--second);font-weight: 400;}
.infoContentTitel{color:var(--third);font-weight: 400;}
.infoContentDescription{color:rgba(81,81,81,0.9);font-weight: 400;margin:0 2.5%;}	
.iconsInfoCount{
font-size: 1.25em;
transition: all 0.9s ease;
color: var(--main);} 
.infoSectionCount{
transition: all 0.9s ease;
color: var(--main);margin-bottom:1.5em}

.addSection{color :var(--third); }
.addIcons {
font-size: 1.25em;
transition: all 0.9s ease;
color: var(--main); transform:rotate(0deg); transition:all 0.3s ease} 
.addIcons:hover {  transform:rotate(45deg);cursor:pointer;color: var(--third)  } 
.addIcons:active {  transform:rotate(0deg);cursor:pointer;color: var(--main)  }
 
.editIcons {
font-size: 1.25em;
transition: all 0.9s ease;
color: var(--main); transform:rotate(0deg); transition:all 0.3s ease} 
.editIcons:hover {  transform:rotate(10deg);cursor:pointer;color: var(--third)  } 
.editIcons:active {  transform:rotate(0deg);cursor:pointer;color: var(--main)  }
 
.addDess{
transition: all 0.9s ease;
color: var(--main); }

.avatarNname{ margin-right: 1%;
    width: 100%;
}


.addNewContract{display:none}
.addNewDocument{display:none}
.addNewClientService{display:none}
.addNewContractService{display:none}
.addNewUserDocument{display:none}
.addNewOfficeDocument{display:none}
.addBranch{display:none}
.addNewBranchDocument{display:none}

.infoCountHr	{border-top: 2px solid rgba(41, 58, 90, 0.2);}
.btn-maktabee{color:#fff; background:var(--main); transition:all 0.3s ease }
.btn-maktabee:hover{color:#fff; background:rgba(81,81,81,0.95) }
.btn-maktabee:active{color:#fff; background:var(--third); }
.infoCountHrHolder{width:50% ; margin:0px 1%}
.infoCountHrHolder1{width:25% ; margin:0px 1%}
/*form&Show  */ 
.dFlex{display:flex;}
.aliBase{ align-items:baseline;}
.aliCenter	{align-items: center;}
.aliEnd	{align-items: end;}
.noDecor{text-decoration:none}
  
.dFlexaliBase{display:flex; align-items:baseline;}


.awq{background:pink}
.awq2{background:lightblue}
.fileContrlIconsWarn{margin:0 0.2em;  ;font-size:1.3em; transition:all 0.3s ease; }
.fileContrlIcons{margin:0 0.2em; color:var(--third);font-size:1.3em; transition:all 0.3s ease;cursor:pointer }
.fileContrlIcons:hover{ color:var(--second);  }
.fileContrlIcons:active{  color:var(--third);  }
.fileContrlIconsth{margin:0 0.2em; color:#fff;font-size:1.3em; }



.userRequetIcons{  color:var(--third); cursor:pointer ; transition:all 0.6s ease }
.userRequetIcons:hover{ color:var(--second);  }
.userRequetIcons:active{ color:var(--third);  }

.userRequetText{  color:var(--third);   transition:all 0.6s ease }

.avatarCompany{width:18%;  }
.avatarUser{width:13%; border-radius:50%}
.changeUserInfos{font-size: 1.85em;
    min-width: 50px;
    margin: 0 5px;
    text-align: center;}
	.userPosition{    color: rgba(81,81,81,0.9);
    font-weight: 400;}
	
	.userName{    color: var(--main); }
	.userInfoPosition{    border-right: 1px solid rgba(51,51,51,0.2);
    padding-right: 17px;}	
	.officeName{    color: var(--main); }
	.officeInfoPosition{    border-right: 1px solid rgba(51,51,51,0.2);
    padding-right: 17px;}
	 
	.radiosP {  top: -0.15em;
    right: 0.15em;}
	 .actionsHolder{position:relative;}
			 .actionsItems{display:contents;position:relative;}
             .ssswww {color:#fff; font-size:0.60em;}
             .ssswww2 {color:#fff; font-size:0.75em;}
             .opacity2wq{color:#9e9999;font-size: 0.75em;}
	.rotaterClock { transform:rotate(0deg);animation:rotaterabbb 5s ease 1s infinite}
	.rotater4 { transform:rotate(0deg);animation:rotatera 5s ease 1s infinite}
	.rotater3 { transform:rotate(0deg);animation:rotatera 50s ease 1s infinite}
	.rotater2 { transform:rotate(0deg);animation:rotater 90s ease 1s infinite}
	.rotater1 { transform:rotate(0deg);animation:rotater 75s ease 1s infinite}
	.rotater { transform:rotate(0deg);animation:rotater 60s ease 1s infinite}
	@keyframes rotaterbbb{
		0%{transform:rotate(0deg)}
		50%{transform:rotate(720deg)} 
		100%{transform:rotate(0deg)}
		
    }
    
    @keyframes rotater{
		0%{transform:rotate(0deg)}
		50%{transform:rotate(180deg)} 
		100%{transform:rotate(0deg)}
		
	}
	@keyframes rotatera{
		0%{transform:rotate(0deg)}
		25%{transform:rotate(50deg)}
		50%{transform:rotate(-50deg)}
		100%{transform:rotate(0deg)}
		
	} 
	.dddeee1 { 
	-moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1); 
    -ms-filter: fliph; /*IE*/
    filter: fliph; /*IE*/ } 
	.warn-red{color:#be2424 !important;}
	.warn-green{color:#247324 !important;}
	.warn-orange{color:#d08e17 !important;}
	.warn-gray{color:#a3a3a3 !important;}
	.exactPos1{top: -1.8em;
    left: -2em;}
	
	
	.eeeeHe{display:none }
	 
	
	.eeeebut1{
		background: #d2d2d2;
    color: #fff;
    width: 2.5%;
    border-radius: 50%;
    font-size: 1.5em;
    padding: 0.25em;
    text-align: center;
    position: fixed;
    bottom: 11px;
    left: 23px;
    z-index: 2;cursor:pointer;
		
	}
	.eeeebut{
			background: #d2d2d2;
    color: #fff;
    width: 2.5%;
    border-radius: 50%;
    font-size: 1.5em;
    padding: 0.25em;
    text-align: center;
    position: fixed;
    bottom: 11px;
    left: 23px;
    z-index: 2;cursor:pointer;
	}
	  
	 .eeee{background:#e8e8e8; 
   max-width: 12.5%;
    border-radius: 50%;
    padding: 3em;
    position: fixed;
    z-index: 1;
    bottom: 0; 
    left: 0; }
	
	input[type="color"] { 
	width: 23px;
	height: 23px;
	border-radius:50%; cursor:pointer
}

.w20{width:20% !important}	
 .mkfooter{width:100%;padding:10px;background:var(--main); text-align:right;color:#fff;font-weight: 400;}
 
 
  .minusmr-8{margin-top:-8px}
  .maxwidh{min-width:240px}

.noPadd{padding:0 !important}

.holdingStuff{
    position: relative;
}
.startStuff{
    position: absolute;
    background: var(--main);
    height: 8px;
    width: 100%;
    top: 0;
    /* margin-bottom: 12px; */
}
.middelStuff{
    padding: 1rem 0.5rem;
}
.endStuff{position: absolute;
    background: var(--main);
    height: 12px;
    width: 100%;
    bottom: 0;
} 

  /**/

  
.commentSec{display:none;}
.dowNic{transition:all 0.5s ease}
.knowHolder{
	border:2px solid var(--third);
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    background-color: #fff;
}
.knowHeader{
	padding:5px;
	background-color:var(--third);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
.knowSupject{
	color: #fff;
	vertical-align: middle; 
	font-size: 1.25em;
	font-weight: 400;
	padding: 0px 10px;
}
.knowType{
	color: #fff;
	padding: 0px 10px;
	vertical-align: middle; 
	font-size: 1em;
}

.knowBody{padding: 0px 5px;  }
.knowContent{padding:5px 20px;; color:#606060}
.knowFile{padding:5px 20px; }
.knowMetah{padding:5px 12px;; border-top:1px solid var(--third)}
.dowNic{font-size:25px}
.knowComments{
	background: var(--third);
	padding: 15px;
	border-bottom-left-radius: 10px;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	border-bottom-right-radius: 10px;
	margin: 0px 20px 20px;
}
.singleCommentss{
    background:#fff ;
    border-radius:20px;
    padding:10px;
    margin: 8px 0;
}
.singleComment{
    background:rgba(51,51,51,0.05);
    margin: 8px 0;  }
.todosingleComment{

    border-top: 1px solid rgba(51,51,51,0.1);
padding: 8px 5px;
}

.commentFooter{background-color: rgba(51,51,51,0.1); padding:1px}
	

.spPad{padding: 0px 40px 0px 0px;}
.commentH5{ padding:5px 25px ; color:var(--main);  }
.spMargin{margin: 7px 0px;}
.modal-contentXx{background-color: #ffffff00 !important;}


.newTest{
    max-width: 400px; 
    margin: 5px;
    padding: 15px;
    background: rgba(100,100,100,0.01);
    font-size: 14px;
}

.thescroll{overflow: scroll; overflow-x: hidden;}
.thescrollx{overflow: scroll;   overflow-x: hidden;}
.todoCol{
    padding: 5px;
    background: #d3d3d340;    box-shadow: 0 4px 21px 1px rgba(51,51,51,0.2);
   
}
.todoColoth{
    padding: 5px;
    background: #d3d3d340;    box-shadow: 0 4px 21px 1px rgba(51,51,51,0.2);
   
}
.allTodo{padding:5px; height:500px; overflow:scroll; }
.padAl{align-items: center; padding:2px}
.typeText{
    padding: 10px; 
    color: var(--main);
    font-size: 1.25em; 
    font-weight: 400;
}

.otherTodo{  
   padding:2px}
.otherHolder{padding:5px}

.todoHeader{
    padding: 2px;
    border-bottom: 1px solid rgba(51,51,51,0.1);
    border-radius: 5px;       
    box-shadow: 0 4px 21px 1px rgba(51,51,51,0.2);
} 

.todoBody{padding:0px;display:none;color:#666}
.todoCheck{padding:0px}
.todoDes{padding:0px}
.todoComment{padding:0px; display:none;}
.commentH6{
    padding: 3px 8px;
    color: var(--main);
}
.sph6{display: inline-block;
    vertical-align: sub;}
    
    .towarnn{background: orange;}
    .towarno{background: #be2424;}
    .towarnl{background: gray;}
    .towarna{background: green;}

   
    .towarnNb{border-top:5px solid orange;}
    .towarnOb{border-top:5px solid #be2424;}
    .towarnLb{border-top:5px solid gray;}
    .towarnAb{border-top:5px solid green;}

    
    .towarnNb1{border-top:3px solid orange;}
    .towarnOb1{border-top:3px solid #be2424;}
    .towarnLb1{border-top:3px solid gray;}
    .towarnAb1{border-top:35px solid green;}

    .towarnNd{background:orange;}
    .towarnOd{background: #be2424;}
    .towarnLd{background: gray;}
    .towarnAd{background: green;}
    .towarn{   
        height: 11px;
    width: 11px;
    border-radius: 20%;
    display: inline-block; 
    line-height: 10px;    
    margin-right: 10px;
    }
    .warnHolder{padding: 24px 12px;}
    .bottomShb{
    border-bottom: 1px solid rgba(51,51,51,0.1);
    box-shadow: 0 4px 2px -2px rgba(51,51,51,0.1);
} 
.todoDone{font-size:30px ;color :grey;transition:all 0.3s ease}
.todoDone:hover{color :green}
.divLi{line-height: 30px;}
input[type=checkbox]:checked + label.strikethrough{
  text-decoration: line-through;
}


.toIcons{font-size:22px;color: var(--main); margin:0 2px   ;transition:all 0.3s ease;cursor: pointer;}
                        .toIcons:hover{font-size:24px;color: var(--third) ;}
.strikethroughred{
    text-decoration: line-through red;
  }.strikethroughgreen{
    text-decoration: line-through darkgreen;
  }
.cheSa{
    background: #fff;
    padding: 20px;
    text-align: center;
    line-height: 64px;
    border-radius: 20px;
} 
.newTest{
    max-width: 375px; 
    padding: 15px;
    background: rgba(100,100,100,.01);
    font-size: 14px;

}
.todoCol{
    padding: 5px;
    background: #d3d3d340;    box-shadow: 0 4px 21px 1px rgba(51,51,51,0.2);
   
}
.todoColoth{
    padding: 5px;
    background: #d3d3d340;    box-shadow: 0 4px 21px 1px rgba(51,51,51,0.2);
   
}
.allTodo{padding:5px; height:500px; overflow:scroll; transition:all 0.3s ease; }
.padAl{align-items: center; padding:2px}
 
.todoCard,.bgwite{background:#fff}

.todoCard{
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    margin-bottom: 10px; 
    border-right: 1px solid rgba(51,51,51,0.1);
    border-left: 1px solid rgba(51,51,51,0.1);
    border-bottom: 1px solid rgba(51,51,51,0.1);
    
}  
.otherHolder .todoCard{
    padding: 10px;
    background: #fff;
    border-radius: 5px;  
    max-width: 430px;
    display: inline-block;   
    background: #d3d3d340;
    box-shadow: 0 4px 21px 1px rgba(51,51,51,0.2);
}

.todoCardx,.bgwite{background:#fff}

.todoCardx{
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    margin-bottom: 10px;
    border-right: 1px solid rgba(51,51,51,0.1);
    border-left: 1px solid rgba(51,51,51,0.1);
    border-bottom: 1px solid rgba(51,51,51,0.1);
    
}  
.otherHolder .todoCardx{
    padding: 10px;
    background: #fff;
    border-radius: 5px;  
    max-width: 370px;
    display: inline-block;   
    background: #d3d3d340;
    box-shadow: 0 4px 21px 1px rgba(51,51,51,0.2);
}


.todoHeader{
    padding: 2px;
    border-bottom: 1px solid rgba(51,51,51,0.1);
}
.todoCat span{
    color: var(--third);
    font-size: 1.1em;
    font-weight: 400;
}
.todoBody{padding:0px}
.todoCheck{padding:0px}
.todoDes{padding:0px}
.todoComment{padding:0px}
.commentH6{
    padding: 3px 8px;
    color: var(--main);
}
.sph6{display: inline-block;
    vertical-align: sub;}
 
    .towarnNew{background: orange;}
    .towarnOverdu{background: #be2424;}
    .towarnLate{background: gray;}
    .towarnAcom{background: green;}

   .towarnNewb{border-top:5px solid orange;}
   .towarnOverdub{border-top:5px solid #be2424;}
   .towarnLateb{border-top:5px solid gray;}
   .towarnAcomb{border-top:5px solid green;}
    .towarn{   
        height: 11px;
    width: 11px;
    border-radius: 20%;
    display: inline-block; 
    line-height: 10px;    
    margin-right: 10px;
    }
    .warnHolder{padding: 24px 12px;}
    .bottomShb{
    border-bottom: 1px solid rgba(51,51,51,0.1);
    box-shadow: 0 4px 2px -2px rgba(51,51,51,0.1);
}

.carHome{
    color: var(--main);
    font-size: 1.25em;
    padding: 8px 30px;
    border-bottom: 2px solid var(--main);
    margin-bottom: 1em;
    box-shadow: 0 4px 13px 3px rgba(51,51,51,.2);
    width:100%;
}

.carHome2{
    color: var(--main);
    font-size: 1.1em;
    padding: 8px 30px;
    border-bottom: 0px solid var(--main);
    border-top: 2px solid rgba(0, 0, 0, 0);
    margin-bottom: 1em;
    box-shadow: 0 4px 13px 3px rgba(51,51,51,.2);
    width:100%;
    transition: all 0.3s ease;
}

.carHome2:hover{
    color: var(--third);
    font-size: 1.1em;
    padding: 8px 30px;
    border-bottom: 0px solid var(--third);    
    border-top: 2px solid var(--third);
    margin-bottom: 1em;
    box-shadow: 0 4px 13px 3px rgba(51,51,51,.5);
    width:100%;
    cursor: pointer;
}

.carHome3{
    
    padding: 8px 30px;
    border-bottom: 0px solid var(--main);
    border-top: 2px solid rgba(0, 0, 0, 0); 
    box-shadow: 0 4px 13px 3px rgba(51,51,51,.2);
    width:100%;
    transition: all 0.3s ease;
}

.carHome3:hover{
     
    padding: 8px 30px;
    border-bottom: 0px solid var(--third);    
    border-top: 1px solid var(--third); 
    box-shadow: 0 4px 13px 3px rgba(51,51,51,.5);
    width:100%;
    cursor: pointer;
}

.mClaen{

    
    box-shadow: 0 4px 13px 3px rgba(51,51,51,.2);
    padding:15px
}
/*
02/05/2020
*/
.bootstrap-datetimepicker-widget.dropdown-menu{direction: ltr !important;}

.bootstrap-datetimepicker-widget table td {  
    line-height: 3px !important;direction: ltr !important;
    width: 0px !important;
    height: 0px !important;
    color: var(--main);
}

.bootstrap-datetimepicker-widget  table .hour , .bootstrap-datetimepicker-widget  table .minute {
  line-height: 54px !important;}
 
.bootstrap-datetimepicker-widget a[data-action] {
    padding: 0px 0;  color: var(--third);}
    
 
    .bootstrap-datetimepicker-widget table tr td button{opacity:0 ;transition:all 1s ease}


    .toggle-on.btn {
     padding-right: 0px !important; padding-left: 0px !important;}
     .toggle-off.btn {
      padding-right: 0px !important; padding-left: 0px !important;
     border-bottom: 2px solid var(--third) !important;;
    color: var(--third) !important; 
}
.clockBg{background-color:var(--main);}
.fa-clock {color:#fff;}
.theDay{margin: 0 1em ;display:inline-block}
.theDayHolder{margin:0 auto; text-align:center; padding:5px}
.daySec{display:none;}


 
    .page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: var(--main) !important;
    border-color: var(--main) !important;}

   /* .active .page-link {
        opacity: 0.5;
        z-index: 1;
        color: #fff;
        background-color: var(--main) !important;
        border-color: var(--main) !important;}
*/

    .page-link:hover {
        z-index: 2;
        color: #fff;
        text-decoration: none;
        background-color: var(--main);
        border-color: var(--main);
    }

    .page-link {
        position: relative;
        display: block;
        padding: .5rem .75rem;
        margin-left: -1px;
        line-height: 1.25;
        color:  var(--main);
        background-color: #fff;
        border: 1px solid #dee2e6;
        transition:all 0.3s ease;
    }
    .pagination {
        display: -ms-flexbox;
        display: inline-flex;
        padding-right: 0;
        list-style: none;
        border-radius: .25rem;
    }

/*from home*/

.headerText,.headerText1{position: absolute;}


.fc-GregButton-button,
.fc-HijriButton-button,
.fc-prev-button,
.fc-next-button,
.fc-prev-button,
.fc-next-button,
.fc-timeGridWeek-button,
.fc-dayGridMonth-button,.fc-timeGridDay-button,.fc-listMonth-button{
    color:#fff; background:var(--main) !important; transition:all 0.3s ease;
      border-color: #2c3e5000; margin: 0px 2px !important; 
        }


      .fc-GregButton-button:hover,.fc-HijriButton-button:hover,  .fc-prev-button:hover,.fc-next-button:hover,  .fc-prev-button:hover,   .fc-next-button:hover, .fc-timeGridWeek-button:hover ,.fc-dayGridMonth-button:hover ,.fc-timeGridDay-button:hover,.fc-listMonth-button:hover{
            color:#fff; background:rgba(81,81,81,0.95) !important;
      border-color: #2c3e5000
        }
.fc-today-button{color:#fff; background:rgba(81,81,81,0.95) !important; transition:all 0.3s ease;
      border-color: #2c3e5000; margin: 0px 2px !important; opacity:1  !important; }
.fc-today-button:hover{ color:#fff;background:var(--third) !important; transition:all 0.3s ease;
      border-color: #2c3e5000; margin: 0px 2px !important;opacity:1  !important; }




 
.fc-button-active {color:#fff; background:var(--third) !important;border-color: #2c3e5000 !important  ; }


        .fc-toolbar h2 {
    font-size: 1.75em;
    margin: 0;
    color: var(--main);
    font-size: 1.25em !important;}
	
	.fc-day-header span ,.fc-week-number span,.fc-day-header span ,.fc-axis span{
	color: var(--third);}
    .fc-axis span{text-align:right}
    .fc-event {
        position: relative;
        display: block;
        font-size: .85em;
        line-height: 1.3;
        border-radius: 3px;
          border: 1px solid var(--main);  
        font-weight: 400;
        background: var(--main);
        color:#fff;}
 

                .fc-bg table tbody{border-color: rgba(51,51,51,0) !important;}
                .fc-content-skeleton  table tbody{border-color: rgba(51,51,51,0) !important;}
                .fc .fc-row { border-bottom: 1px solid rgba(51,51,51,0.1) !important;}
                .fc-title ,.fc-time{color:#fff !important; text-align:right !important} 
                .fc-fri { opacity:0.5 }
.fc-sat { opacity:0.5  }

.mClaen{text-align:right !important;}
.eeefc-content{direction:rtl !important; transition:all 5s ease}
.eeefc-content:hover{direction:ltr !important;  }

.fc-button-primary {
    color: #fff;
    background-color: #2c3e50;
    border-color: #2c3e5000 !important;
} 


.progBack{background-color:var(--main) !important ;color: #fff }
.progBack1{background-color:rgba(51,51,51,0.01) !important ;color: #fff }
                

/*Service show blade*/

.modalSer{background:rgba(255,255,255,0.95)}
.modalSerFooter{background:var(--main) ;color:#fff;  }
.xspan{    font-weight: bold;
    color: #575757;
    font-size: 18px;
    vertical-align: middle;}

   .actionBorder{        border-bottom: 1px solid rgba(51,51,51,0.2);
    padding: 10px;}
   .actionHeaders{font-weight: 400;}
   .slowHovers{background-color: rgba(51,51,51,0); transition:all 0.3s ease}
   .slowHovers:hover{ background-color: rgba(51,51,51,0.03) } 

   /*from service post*/

   .btndisable{background: #666; 
    color: #fff;
    border-radius: 5px;
    display: inline-block;
    font-weight: 400; 
    text-align: center;
    vertical-align: middle;  
    padding: .375rem .75rem; }
    .btndisable2{background: #666; 
        color: #fff;
        border-radius: 5px;
        display: inline-block;
        font-weight: 400; 
        text-align: center;
        vertical-align: middle;  
        padding: .375rem .75rem;opacity: 0.3;
        cursor: not-allowed;}

        .led-green { 
            margin: 0 6px;
            display: inline-block;
            height: 10px;
            width: 10px;
            background-color: #ABFF00;
            border-radius: 50%;
            color: rgba(0, 0, 0, 0);
            box-shadow:rgba(0, 0, 0, 0.2) 0 -1px 7px -1px, inset green 0px 0px, green 0 0px 6px;
        }

        .led-red {  
            margin: 0 6px;
           display: inline-block;
           height: 11px;
           width: 11px;
           background-color: #be2424;
           border-radius: 50%;
           box-shadow: #be2424 0 -1px 7px -1px, inset #be2424 0 0, #be2424 0 0 6px;
           
         }  
         .led-gray {  
            margin: 0 6px;
           display: inline-block;
           height: 11px;
           width: 11px;
           background-color: rgb(114, 114, 114);
           border-radius: 50%;
           box-shadow: #3d3d3d 0 -1px 7px -1px, inset #3d3d3d 0 0, #3d3d3d 0 0 6px;
           
         }

         /*attach index*/
         .myAudio{padding:20px; background-color: #fff0; margin-top: 10px;
        text-align: center; }

        /*users show*/
        .bgModals{background:#fff !important}

        /*agenda index*/
        .addNewAgenda{display: none;}
        
        /*general */
        .modal { overflow: auto !important; }
        .addUsrs{display:none}
        .dllUsrs{display:none}
        
        .formlabelscl{color: var(--third); 
        font-size: 17px;
        font-weight: 500;
        line-height: 27px;}
        .formlabelscl2{color: var(--main); 
        font-size: 19px;
        line-height: 27px;}
        .formlabelscl3{color: var(--third); 
        font-size: 16px;
        line-height: 27px;} 

        
        .notice {
            position: fixed;
            top: 80px;
            left: 0;
            right: 0;
            width: 250px;
            margin: auto;
            padding: 12px;
            font-size: 14px;
            font-weight: 700;
            text-align: center;
            background: var(--main);
            color: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.03);
            z-index: 100;
            visibility: hidden;
          }
          .notice.visible {
            visibility: visible;
            -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
                    animation: fadein 0.5s, fadeout 0.5s 2.5s;
            -webkit-animation-fill-mode: forwards;
                    animation-fill-mode: forwards;
          }
          
          @-webkit-keyframes fadein {
            from {
              top: 0;
              opacity: 0;
            }
            to {
              top: 30px;
              opacity: 1;
            }
          }
          
          @keyframes fadein {
            from {
              top: 0;
              opacity: 0;
            }
            to {
              top: 30px;
              opacity: 1;
            }
          }
          @-webkit-keyframes fadeout {
            from {
              opacity: 1;
            }
            to {
              opacity: 0;
            }
          }
          @keyframes fadeout {
            from {
              opacity: 1;
            }
            to {
              opacity: 0;
            }
          }
        .zoom9{zoom:0.8}
        
    .targetpixs{
        position: absolute;
top: 50%;
right: 0;
color: var(--third);
font-weight: 500;
font-size: 20px; 
text-align: right;
 
    } 

        .serial{
            font-weight: 500;
              background: rgba(51,51,51,0.8);
              border-radius: 20%;    display:inline-block;
          min-width: 30px;
              margin: 10px auto;
              text-align: center;
              color: #fff;padding: 5px;
          }
          .specialchar{
              
              font-weight: 500;
              font-size: 18px;
              /*
              
              text-decoration: underline 2px;
                -webkit-text-decoration-color: #fff; /* Safari */  
          /*	  text-decoration-color: #fff;
              */
              }
              .specialchar2{
              
              font-weight: 400; 
              }
              .vl {
            
              
                padding:1px 5px;
                display:inline-block;
                height:80px
              }
              
              .rede{    border-left: 4px solid var(--main);}
              .rede1{    border-left: 4px solid var(--third);}
          
              .vl:hover {
                border-left: 6px solid #333; 
               cursor:pointer;
              }
              
              .vl2{  
              
                border: 2px dotted var(--main); 
              
              }
              .vl3{padding:10px;margin :0 auto; text-align:center }
              
              .tr5s{
          position: relative;
                
          }
          
          .tr6s{ 
            display: none;
            position: absolute;
            bottom:-50px;
            right:0;
            background-color: rgba(255,255,255,0.9);
            right: -164px;  
              padding: 10px;
              border-radius: 15px;
              border: 2px solid var(--third);z-index: 1;
                
          }
           

        .thetodoscroll{

            height: 500px;
    overflow: scroll;
    overflow-x: hidden;
        }
        .pointer{cursor: pointer;}
        .tempHide{display: none;}

        .opacity05{opacity: 0.5;}
        .cropped1 {
            width: 200px; /* width of container */
            height: 200px; /* height of container */
            object-fit: cover;
            border-radius:50%;
            border: 2px solid var(--main);
        }
        .mrequierd{
            color: #be2424;
              font-weight: bold; 
              cursor: help;
          }
.commeditform{display: none;}
.autodrop  {    display: block;
    position: absolute;
    text-align: right;
    height: 250px;
    overflow: scroll; overflow-x: hidden;
    padding: 5px;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    background: #fff;
    z-index: 1;
}

.eachWarnr{ padding: 11px 0px;
    border-bottom: 1px solid rgba(51,51,51,0.2);
     }

    .scrollhieght500{max-height: 500px;
        overflow: scroll;    overflow-x: hidden;
        }
        
 
        .countcard{   text-align: center;
             
            padding: 8px 30px;
            border-bottom: 0px solid var(--main);
            border-top: 2px solid rgba(0, 0, 0, 0);
            margin-bottom: 1em;
            box-shadow: 0 4px 13px 3px rgb(51 51 51 / 10%);
           
            transition: all 0.3s ease;
            font-weight: 500;}
       
            .countcard:hover{     
            border-top: 2px solid var(--third);
            margin-bottom: 1em;
            box-shadow: 0 4px 13px 3px rgb(51 51 51 / 20%);
            }
       
            .countcardicon{font-size: 1.1em;color:var(--main)}
            .countcardh3{color:var(--third);overflow: hidden;}
           .countcardp     {font-size: 1.1em;color:var(--main)}
       
       .getcount{    position: absolute;
       top: 43%;
       right: 1%;
       background: var(--main);
       padding: 5px;
       height: 37px;
       border-radius: 50%;
       width: 37px;
       margin: 0 auto;
       text-align: center;
       z-index: 2;
       cursor: pointer;}
       
       .getcountico{    font-size: 1.2em;
       color: #fff;
       vertical-align: middle;}
   
       .vdew{position: relative;}
      .sssaw{font-size: 3em}

      .minHeight150{min-height: 150px;}


/*Responsive*/
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    @media only screen and (max-width: 768px) {
    

        .chatsmain{    font-size: 1.4em; transition:all 0.3s ease}
    [class*="col-"] {
    min-width: 100% !important;
    }
    
    
    .fc-day-header span ,
    .fc-week-number span,
    .fc-day-header span ,
    .fc-axis span{
    color: var(--third);
    font-size:12px;
    }
    
    .todoCat span {
    color: var(--third);
    font-size: 0.9em;
    font-weight: 400;
    }
    
    .chats{ 
    font-size: 14px;
    padding-right: 15px;
    color: var(--third);
    transition: all 0.3s ease;
    display: block;
    }
    .userNameAvatarComment span {
    font-size: 0.8em;
    font-weight: 400; 
    color: rgba(81,81,81,0.95);
    }
    
    .fc-today-button{
    color:#fff;
    background:rgba(81,81,81,0.95) !important;
    transition:all 0.3s ease;    
    border-color: #2c3e5000;
    padding:0em  !important; 
    font-size: 0.8em !important;
    margin: 0px 2px !important; 
    opacity:1  !important; 
    }
    
    .fc-toolbar h2 { 
    margin: 0;
    color: var(--main);
    font-size: 0.9em !important;
    }
    
    
    .fc-GregButton-button,
    .fc-HijriButton-button,
    .fc-prev-button,
    .fc-next-button,
    .fc-prev-button,
    .fc-next-button,
    .fc-timeGridDay-button,
    .fc-listMonth-button{
    color:#fff;
    background:var(--main) !important;
    transition:all 0.3s ease;
    border-color: #2c3e5000; 
    
    padding:0em  !important;
    margin: 0px 1px !important; 
    font-size: 0.8em !important; 
    }
    
    
    .fc-timeGridWeek-button,
    .fc-dayGridMonth-button{
    color:#fff;
    background:var(--main) !important;
    transition:all 0.3s ease;
    border-color: #2c3e5000; 
    
    padding:0em  !important;
    margin: 0px  !important; 
    font-size: 0.8em !important; 
    }
    
    
    }
    
    
    @media only screen and (max-width: 812px) {
        .chatsmain{    font-size: 1.4em; transition:all 0.3s ease}
    [class*="col-"] {
    min-width: 100% !important;
    }
    
    
    .fc-day-header span ,
    .fc-week-number span,
    .fc-day-header span ,
    .fc-axis span{
    color: var(--third);
    font-size:12px;
    }
    
    .todoCat span {
    color: var(--third);
    font-size: 0.9em;
    font-weight: 400;
    }
    
    .chats{ 
    font-size: 14px;
    padding-right: 15px;
    color: var(--third);
    transition: all 0.3s ease;
    display: block;
    }
    .userNameAvatarComment span {
    font-size: 0.8em;
    font-weight: 400; 
    color: rgba(81,81,81,0.95);
    }
    
    .fc-today-button{
    color:#fff;
    background:rgba(81,81,81,0.95) !important;
    transition:all 0.3s ease;    
    border-color: #2c3e5000;
    padding:0em  !important; 
    font-size: 0.8em !important;
    margin: 0px 2px !important; 
    opacity:1  !important; 
    }
    
    .fc-toolbar h2 { 
    margin: 0;
    color: var(--main);
    font-size: 0.9em !important;
    }
    
    
    .fc-GregButton-button,
    .fc-HijriButton-button,
    .fc-prev-button,
    .fc-next-button,
    .fc-prev-button,
    .fc-next-button,
    .fc-timeGridDay-button,
    .fc-listMonth-button{
    color:#fff;
    background:var(--main) !important;
    transition:all 0.3s ease;
    border-color: #2c3e5000; 
    
    padding:0em  !important;
    margin: 0px 1px !important; 
    font-size: 0.8em !important; 
    }
    
    
    .fc-timeGridWeek-button,
    .fc-dayGridMonth-button{
    color:#fff;
    background:var(--main) !important;
    transition:all 0.3s ease;
    border-color: #2c3e5000; 
    
    padding:0em  !important;
    margin: 0px  !important; 
    font-size: 0.8em !important; 
    }
    
    
    }

    /*HelpStyles*/
    .carMicon{ 
        font-size: 2em;
    }
    .carRow{
    
        padding: 1em;
        color: #fff;
        border-radius: 18px;
        margin: 0 auto;
    }
    
    .carRow hr{
      border-top: 1px solid rgba(255,255,255,0.2);
    }
    .bgVarMain{  background: var(--main);}
    
        .xxnpointer{font-size: 14px;
            vertical-align: middle;}
           
           .headx{font-size: 14px;
            vertical-align: middle;    margin: 0 7px;
            font-size: 19px;}
            .headxSpan{border-bottom: 2px solid rgba(255,255,255,0);transition: all 0.3s ease;}
            .headxSpan:hover{border-bottom: 2px solid var(--main);}

            .xnpointer:hover{cursor: pointer;}
            .npointer:hover{cursor: pointer;}


    .graColor{
    color: #585858
      
    }
    

    /*Story*/
    .storyEach{padding: 5px;
        color: #585858;
        background: #f2f2f2;
        margin: 10px 0; 
    transition:all 0.4s ease;    max-height: 300px;
    overflow: scroll;overflow-x: hidden;}
        .storyEach:hover{padding: 5px;
            color: #585858;
            background: #dfdfdf;
            margin: 10px 0;}
    /*excReport*/

    
.dseraegfd{
	display: none;}

	.xtable { width:100%;
  border-collapse: collapse;
}

.xtable, .xtable tbody, .xtable tbody td, .xtable tbody th   {
  border: 1px solid rgba(51,51,51,0.2);    vertical-align: middle;
}
.xtable tbody td, .xtable tbody th   {
 text-align: center;    vertical-align: middle;
 padding: 3px;
}

.ztablem { width:100%;
  border-collapse: collapse;
}

.ztablem, .ztablem tbody, .ztablem tbody td, .ztablem tbody th   {
  border: 1px solid rgba(51,51,51,0);    vertical-align: middle;
  

}
.ztablem tbody td, .ztablem tbody th   {
 text-align: center;
 padding: 3px;
 width:50%;    vertical-align: middle;
}


.botBorder{
	border-bottom: 1px solid rgba(51,51,51,0.2);
}

 
.excDesSe{padding: 1em}
.excDesSe1{padding: 2em}
.excDesMa{padding:  1em ;
    font-weight: 500;}
.excDesSeX1{background: rgba(51,51,51,0.08); padding: 20px}
.excDesSeX2{background: rgba(51,51,51,0); padding: 20px}


.holdingRow {background: rgba(51,51,51,0.1);
    margin: 10px;
    padding: 10px;}


    /*paginations*/
    .npglinks{text-align: center;}

.npglinks svg{width: 40px;height: 40px;}

.npglinks nav div:first-child {
padding:9px;
}



.redBor{     transition: all 0.3s ease;border-top: 3px solid #be2424 !important; opacity: 0.7;}
.redBor:hover{ border-top: 3px solid var(--third) !important; opacity: 1;}
.greenBor{     transition: all 0.3s ease;border-top: 3px solid darkgreen !important; opacity: 0.7;}
.greenBor:hover{ border-top: 3px solid var(--third) !important; opacity: 1;}

.greayBor{     transition: all 0.3s ease;border-top: 3px solid rgb(92, 92, 92) !important; opacity: 0.7;}
.greayBor:hover{ border-top: 3px solid var(--third) !important; opacity: 1;}
.servicecard {
text-align: right;
padding: 8px 30px;
border-bottom: 0px solid var(--main);
border-top: 2px solid rgba(0, 0, 0, 0);
margin-bottom: 1em;
box-shadow: 0 4px 13px 3px rgb(51 51 51 / 10%);
transition: all 0.3s ease;
font-weight: 500;
}

.servicecard:hover {
border-top: 2px solid var(--third);
margin-bottom: 1em;
box-shadow: 0 4px 13px 3px rgb(51 51 51 / 20%);
}


.servicecardHead {
font-size: 1em; 
font-weight: 400;
color: #5b5b5b;
}

.servicecardh3{
font-size: 1.25em; 
font-weight: 400;
}


.servicecardFoot {
font-size: 1em; 
font-weight: 400;
}
.btnHold{text-align: center}
.btnHoldEach{display: inline-block; padding: 10px}


.formlabelsdws{font-size: 14px;color:var(--main);font-weight:500}
.timeLineTextdws{font-size: 14px;color:var(--third)}

/*servicpostshow**/


.chats2x{
    font-size: 14px;
    font-weight: 500;
    }
    .chats3x{
        font-size: 12px;
        font-weight: 500;
        }
    .specialchar{
        
        font-weight: 500;
        font-size: 18px;
        /*
        
        text-decoration: underline 2px;
          -webkit-text-decoration-color: #fff; /* Safari */  
    /*	  text-decoration-color: #fff;
        */
        }
        .specialchar2{
        
        font-weight: 400; 
        }
      .check6{cursor: pointer;}
    
    
    .theAction {
        background: #fff;
        padding: 10px;
        border-radius: 10px;
        margin: 7px; 
    }
    .modalSer{background:rgba(255,255,255,0.95)}
    .modalSerFooter{background:var(--main) ;color:#fff;  }
    .xspan{    font-weight: bold;
        color: #575757;
        font-size: 18px;
        vertical-align: middle;}
        
        .xspan2{    font-weight: bold;
        color: #575757;
        font-size: 12px;
        vertical-align: middle;}
    
    .calendars-popup {
        z-index: 10000 !important;
    }
    .nCNb{
        background: var(--third);
        color: #fff;
        min-width: 50px;
        min-height: 50px;
        text-align: center;
        vertical-align: middle; 
        border-radius: 50%;
        transition: all 0.3s ease;
        z-index:1111
        }
        .nCNb:hover{ 
        background: var(--main);
        }
    
    
        .nCNbx{
        background: var(--third);
        color: #fff;
        min-width: 52px;
        min-height: 52px;
        text-align: center;
        vertical-align: middle; 
        border-radius: 50%;
        transition: all 0.3s ease;
        z-index:1111
        }
    
        .nCNbx:hover{
        background: var(--main);
        }
    
        
        
    
    
        .nCNbi{font-size: 1.75em; 
        cursor: pointer;
        vertical-align: middle;
        height: 50px; }
    
        
        .mytop1{top: 45%;left: -55px;   position: fixed;transition: all 0.3s ease;transform: rotate(-180deg);}
        .mytop2{top: 45%;left: -55px;   position: fixed;transition: all 0.5s ease;transform: rotate(-180deg);}
        .mytop3{top: 45%;  left: -55px;position: fixed;transition: all 0.7s ease;transform: rotate(-180deg);}
        .mytop4{top: 45%;  left: -55px;   position: fixed;transition: all 0.9s ease;transform: rotate(-180deg);}
        .mytop5{top: 45%;left: -55px; position: fixed;transition: all 1.1s ease;transform: rotate(-180deg);} 
        
    
         .mytop6{top: 45%;  left: -25px;   position: fixed;transition: all 1s ease;transform: rotate(-180deg);}
        .nCNbBg{top: 10.5%;
        left: -550px;
        position: fixed;
        width: 550px;
        height: 700px;
        background: var(--third);
        border-radius: 50%;
        z-index: 111; transition: 1s ease}
        
        .nCNbHolder{z-index:10000000}
        .ddsadasdsdsd{    max-width: 95%; margin:0 auto;   height: 100%; }
        .ddsadasdsdsd3{    max-width: 80%; margin:0 auto;    }
        .ddsadasdsdsd2{    max-width: 100%; margin:0 auto;  height: 100%;  	 }
        
        .ddsadasdsdsd2 .modal-content {  height: auto;
      min-height: 100%; }
        .newInfo{background: rgba(255,255,255,0.95);
        z-index: 10000;}
        .newInfoc{background: rgba(255,255,255,0.95);
        z-index: 10000;}
        .newInfoo{background: rgba(255,255,255,0.95);
        z-index: 10000;}
        .newInfos{background: rgba(255,255,255,0.95);
        z-index: 10000;}
        .theNotes{font-size:16px ;font-weight:400 ; color:darkred}
        .modal-dialogx {
      width: 80%; 
      padding: 0;
      margin: 0 auto;
    }
    
    .xsa{padding:1%;}
    .botborder{border-bottom:1px dotted rgba(51,51,51,0)}
    .botborder1{border-bottom: 1px dotted rgba(51,51,51,0.3);
    background-color: rgba(51,51,51,0.05);
    padding: 0.15px;
}{border-bottom:1px dotted rgba(51,51,51,0.1)}
    
    .exch5{color:var(--main)}
    
    .notesp{margin:0 auto; font-size:14px; color:darkred ;text-align:center}
    .fieldset { 
        border-left-style: none !important;
        border-right-style: none !important; 
        border-top: 2px solid var(--main) !important;
        border-bottom: 2px solid rgba(51,51,51,0) !important;
    }
    legend  {
        padding: 6px;
    }
    
    .isNotOk{display:none}
    
    
    .a4Template	{   
         
         max-width: 100%; 
        margin: 0 auto; 
        /*height:1122.5px*/
        padding: 25px;
        width:auto;
        height: 200px;
        overflow: scroll;
        transition: all 0.3s ease;
         
         border: 1px solid rgba(51,51,51,0);
         background-color: white;
         box-shadow: 0px 0px 0px #aaaaaa; 
         overflow-x: hidden;
         
    }
    
    .a4TemplateOn	{   
         
         max-width: 816px; 
        margin: 0 auto; 
        /*height:1122.5px*/
        padding: 25px;
        width:auto;
        min-height: 1124px;
        overflow: scroll;
         
        transition: all 0.3s ease;
         border: 1px solid rgba(51,51,51,0.2);
         background-color: white;
         box-shadow: 3px -1px 11px #aaaaaa; 
         
         
    }
     
    .MsNormal{
        margin: 0 !important;
        padding: 0 !important; }
    .docSetup{ margin: 0 auto;  text-align: center;}
    .docSetupSpan { padding :1em; font-size: 1.5em ;transition:all 0.3s ease   }
    .docSetupSpan:hover { cursor: pointer; }
    
    
    .excReq,.exc34,.excPub,.exc46,.excCol,.excPri,.excEns,.excEmha{display:none }
    .checkRol{margin : 20px 0 ; display: inline;}
     
    .ntable:nth-child(2n+1) {
      background: #efefef;
    }
    
    .ntable  {
            border-collapse: collapse;
            width:100%; 
            margin-bottom:15px !important;
            }
          
            .ntable , .ntable tbody ,.ntable tr,.ntable th,.ntable  td{
                border: 1px solid #e6e4e4 !important;font-size: 12px;
                direction:rtl
              }
     
    
              .ntable tr td {
                border: 1px solid #464646;
                padding:8px 2px;
                text-align:right;
                vertical-align: top;font-size: 14px;
                color:var(--third)
                
              }
              .ntable tr th {
               border: 1px solid #464646;
               padding:8px 2px;
               text-align:right;
               vertical-align: top;
               vertical-align: middle;font-size: 14px;
               
             }
             
             .draggablee{border:1px solid var(--main); margin: 5px}
    
             .moveIcon{ top: -12px;position: absolute;left: -8px; color: var(--main); cursor: pointer; transition: all 1s ease;
                margin-top:12px;
                margin-left:12px; }
    .moveIcon:hover{transform: rotate(360deg);}


    .theheigscroll{
		max-height: 450px;
		overflow: scroll;
		overflow-x: hidden;
		background-color:#fff; 
	}

	
	.theheigscroll:hover{ 
		background-color:rgb(228, 228, 228); 
	}
 
 

    .sectionInfoxx{font-size: 18px;
        font-weight: 400;
        color: #fff;}
    
        .sectionInfoxxi{font-size: 16px !important;
        font-weight: 100;
        color: #fff;}
        .vlm{vertical-align: middle;}
        .contractEditClick:hover{cursor: pointer;}
        .thecursor{cursor: pointer;}
        .vmiddiv{display: flex;justify-content: center;align-items: center;}

.hrsActions{
    color: var(--main);
    border: 0.75px dashed;
}



    /*
    show serviceposts
    */
    
	.itemCreate {
        overflow: auto;
        padding: 10px;
        white-space:nowrap;
        max-width: 1450px; margin: 0 auto;
      }
      .itemCreate .postItem2 {
        padding: 10px; 
        display: inline-block;  
        white-space:normal;
        text-align: center;
          transition: all 0.3s ease;
          margin: 0.25em 0em;
          color: var(--main);
          z-index: 0;
      }
      .itemCreate .postItem2:hover {
          color: var(--third);
          cursor: pointer;
      }
      
      
      ::-webkit-scrollbar {
        height: 10px;
      }
      
      .itemView {
        overflow: auto;
        padding: 10px;
        white-space:nowrap;
        max-width: 1450px;
        margin: 0 auto;
      }
      
      
      .itemView .postItem2 {
        padding: 10px; 
        display: inline-block;  
        white-space:normal;
        text-align: center;
          transition: all 0.3s ease;
          margin: 0.25em 0em;
          color: var(--third);
          z-index: 0;
      }
      
      
      .itemView .postItem2:hover {
          color: var(--main);
          cursor: pointer;
      }
      
      .inMenu{  
          padding-bottom: 15px; 
        
          transition:all 0.3s ease;
      } 
      
      
      .inMenu2{    position: fixed; 
          z-index: 111;
          padding-bottom: 15px;
          border-bottom-left-radius: 20px;
          border-bottom-right-radius: 20px;
       }
      
       .inMenueIcon{position: absolute;
		color: var(--main); 
		background: rgb(255 255 255 / 90%);
		top: 30px;
		border-radius: 50%; 
	font-size:2.2em; 
	transition:all 1s ease;
	z-index: 1111	;
	right: 0px;
		top:140px;
	} 
      
      .inMenueIcon:hover{
          transform: rotate(360deg);
          color: var(--third);
          cursor: pointer;
          
      }
      .inMenueContent{
          background: rgb(245 245 245 / 95%);
          display: none;
          
          position: absolute;
          right: 53px;
          width: 75%;
      }
  .clMinus{display: none;}
  
  .excDivHolder{
      position:relative
  }
  .excDivHolderItems{
      display:inline-block;
      padding:10px;
      margin:10px; text-align:center;
      border-bottom:1px dashed var(--main);
      
  }
  
  .chatsvre {
      font-size: 16px;
   
      color: var(--third);
      transition: all 0.3s ease;font-weight:500;
  }
  .chatsxvre {
      font-size: 14px;
      text-align: center;
   
      color: rgba(51,51,51,0.9);
     transition: all 0.3s ease;font-weight:500;
  }


  .appHolder div{display: inline-block;}
.appUsers {
  display: inline-block; padding: 0 5px ;margin: 0 15px ; border-bottom:1px solid var(--main) ;
}

.chatsappuserf{    font-size: 14px;  color: var(--third); transition:all 0.3s ease}
.chatsappusers{    font-size: 14px;  color: var(--main); transition:all 0.3s ease}
.appClickst{position: absolute;
  left: -10px;
  font-size: 23px;
  color: var(--main);
  cursor: pointer;
  transition: all 0.3s ease;}

  .appClickst:hover{ 
    color: var(--third); 
  transform: rotate(90deg)  }
  
  .chatsappro{ 
    font-size: 20px;
    color: var(--main);
    cursor: pointer;
    transition: all 0.3s ease;}
  
    .chatsappro:hover{ 
      color: var(--third); 
    transform: rotate(-20deg)  }