/*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.4em; 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 */
    .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) {

[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) {

[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)}

.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;
}
.fieldset2 {  
  border-top: 1px dashed var(--main) !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;}


    /*
    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)  }