@import url("farsi-fonts-styles/primary-iran-sans.css");
@import url("farsi-fonts-styles/font-face-FD.css");

@keyframes rotate {
    0%{
        transform: rotate(-180deg);
    }
    100%{
        transform: rotate(180deg);
    }
}
:root{
    --zp-MainColor: #173040;
    /*--zp-mainTheme:#173040;*/
    --zp-transition:all 0.3s liner;
}

body{
    font-family: "primary-font", "segoe ui", "tahoma", serif;
    background-color: #e5e5e5;
}
*{
    font-size: 12px;
    font-weight: 500;
    box-sizing: border-box;
}
/**** style for bootstrap ****/
.popover{
    font-family:"primary-font", "segoe ui", "tahoma", serif;
    color: #5c636a;
    line-height: 1.8rem;
}
.zp-space-y3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.fs-10{
    font-size: 10px;
}
.btn{
    white-space: nowrap;
}
.btn:focus,.btn:active,.btn-close:focus,.navbar-toggler:focus,.btn-success:active{
    box-shadow: none;
    outline: none;
}
.btn-outline-primary{
    color: var(--zp-MainColor);
    border-color: var(--zp-MainColor);
}
.btn-outline-primary:hover{
    color: #ffffff;
    background-color:var(--zp-MainColor);
    border-color: var(--zp-MainColor);
}
.btn-outline-primary:active,.btn-outline-primary:first-child:active,.btn-outline-primary:focus,.btn-outline-primary:focus-visible{
    border: 1px solid var(--zp-MainColor);
    background-color: var(--zp-MainColor);
    color: #ffffff;
    box-shadow: none;
}
.dropdown-item:active,.dropdown-item:hover {
    background-color:#e9ecef;
}
.form-control:focus,.form-select:focus{
    box-shadow: none;
    border-color: #ced4da;
}
.form-select{
    background-position: left 0.75rem center;
    padding:0.375rem 0.75rem;
    background-size: 9px 12px;
}
.form-check-input:focus{
    box-shadow: none;
}
.nav-tabs .nav-link{
    color:#5c636a;
    font-weight: bolder;
    cursor: pointer;
}
.nav-tabs .nav-link:hover{
    background-color: white;
}
.nav-tabs .nav-link.active,.nav-tabs .nav-link:hover{
    color: var(--zp-MainColor);
}

.dropdown-menu .dropdown-item{
    color: #5c636a;
    /*border-radius: 6px;*/
}
.dropdown-menu .dropdown-item:hover {
    color:black;
}

.offcanvas-body{
    overflow-y:hidden;
}
.form-check-input{
    width: 1.1rem;
    height: 1.1rem;
    /*border-color: var(--zp-MainColor)!important;*/
}
.form-check-input:checked {
    background-color:var(--zp-MainColor);
    border-color:var(--zp-MainColor);
}

/**** end style bootstrap ****/

/*style General */
.zp-listShift{
    height: 460px;
}
.zp-line-clamp-1{
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    white-space: pre-wrap;
}
.zp-table tbody td span.zp-line-clamp-1{
    display: -webkit-box;
}
.zp-themeColor,.zp-themeColor.show{
    background-color: var(--zp-MainColor);
    color: #ffffff;
    /*background: linear-gradient( -180deg,#467996,   #173040 );*/
}
.btn.zp-themeColor:disabled{
    background-color: #6c757d;
    pointer-events: none;
    opacity: 0.5;
}
.zp-themeColor:hover{
    background-color: var(--zp-MainColor);
    color: #ffffff;
}
.zp-btn-danger{
    background: linear-gradient( -180deg, #f74949, #f20611) ;
    color: white;
}
.zp-btn-warning{
    background: linear-gradient( -180deg, #e3c96e, #f2bb06) ;
    color: white;
}
.zp-btnAdd:hover,.zp-hover:hover{
    color: VAR(--zp-MainColor);
}
.zp-btn-success{
    background: linear-gradient( -180deg, #629766, #198754);
    color: white;
}
.zp-scrollViewX{
    overflow-x:auto;
}
.zp-scrollViewX::-webkit-scrollbar{
    height:8px;
}
.zp-scrollView{
    overflow-x: hidden;
    overflow-y: auto;
}
.zp-scrollView::-webkit-scrollbar,.zp-scrollViewX::-webkit-scrollbar{
    background-color:transparent;
    width:6px;
}
.zp-scrollView::-webkit-scrollbar-thumb,.zp-scrollViewX::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background-color: #c1c1c1;
}
.zp-imgAlert{
    width: 35px;
    height:25px;
}
.zp-Alert .btn-close{
    width: 0.7em;
    height: 0.5em;
}
.zp-pin.active{
    transform: rotate(45deg);
}
/*style for chang-color*/
.zp-settingMenu{
    margin-top:55px;
    --bs-offcanvas-width:280px;
}


.zp-changeColor .zp-btnColor{
    display: inline-block;
    width:20px;
    height:20px;
    border-radius: 100%;
    cursor: pointer;
    border: 0;

}
.zp-changeColor .mainColor{
    background: #173040;
}
.zp-changeColor .colorOwn{
    background-color:#5795E8FF;
}
.zp-changeColor .colorTwo{
    background-color: rgba(100,43,115,1) ;
}
.zp-changeColor .colorTree{
    background-color:#7f7174 ;
}
.zp-changeColor .colorFore{
    background-color:#2a99b0 ;
}
.zp-changeColor .colorSix{
    background-color:#65799B;
}
.zp-changeColor .colorSeven{
    background-color:#2B5876 ;
}
.zp-changeColor .blackTheme{
    background-color: #434343;
}

/***** style for header *****/
nav.navbar{
    z-index: 10000;
}
.zp-logo{
    width: 70px;
    height: 50px;
}
.zp-logo img{
    object-fit: contain;
}
.zp-profile{
    width: 2.5rem;
    height:2.5rem;
    border-radius: 100%;
    overflow: hidden;
}
#zp-sidebarResponsive{
    z-index: 10001;
}
.zp-topNavbar,.zp-sidebar,.navbar{
    z-index: 10001;
    background: var(--zp-MainColor);
    height: 60px;
}
/*#zp-sidebarResponsive .zp-sidebarMobile{*/
/*    background-color: #ffffff;*/
/*}*/
.zp-sidebarMobile .zp-sidebarMenu .nav-bar .nav-link {
    color: black;
}
.zp-topNavbar .nav-link{
    color: #ffffff;
}

.zp-topNavbar .dropdown-toggle::after{
    color: #ffffff;
}
.zp-topNavbar .zp-navbarSetting .nav-item{
    display: flex;
    align-items: center;
    justify-content: center;
}
.zp-topNavbar .zp-navbarSetting .nav-item a:hover{
    color:var(--zp-MainColor) ;
    border-color:var(--zp-MainColor);
}
.modal{
    z-index: 10003;
}
/*style for overlayBody*/
.zp-overlayBody{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--zp-MainColor);
    /*background: linear-gradient( 269.23deg, rgba(0, 0, 0, 0.67) -2.47%, rgba(0, 0, 0, 0) 198.16% );*/
    backdrop-filter: blur(0);
    opacity: 0.8;
    z-index: 30000;
}
.zp-overlayContent{
    width: 100%;
    height: 100%;
    background-color:#050035;
    z-index: 9999;
    /*opacity: 0.7;*/
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zp-overlayContent .zp-text{
    font-size:34px;
}
.zp-overlayContent p{
    line-height: 3;
}
.zp-overlayContent p,.zp-overlayContent .btn{
    font-size: 18px;
    z-index: 40000;
}
/*style for dashboard*/
/*.zp-listPersonnelDashboard{*/
/*    height: 250px;*/
/*}*/
/*.zp-listPersonnelDashboard .zp-listPersonnel{*/
/*    height: 200px;*/
/*}*/

/*style for maincard*/
.zp-cardForm{
    height: calc(100vh - 85px);
}

/**** style for sidebar ****/
@media (min-width: 992px) {
    .zp-sidebar.col-lg-1 {
        width: 6.333333%;
    }
}
@media (min-width: 992px) {
    #main-content.col-lg-11 {
        flex: 0 0 auto;
        width: 93.66666667%;
    }
}
    @media (min-width: 992px) {
        .zp-topNavbar.col-lg-11 {
            flex: 0 0 auto;
            width:93.66666667%;
        }
    }
.zp-topNavbar{
    height: 60px;
}
.zp-sidebar,#main-content,.zp-topNavbar{
    transition: width 0.5s;
}
.zp-sidebar.col-lg-2,#main-content.col-lg-10,.zp-topNavbar.col-lg-10{
    transition:all 0.5s;
}
.zp-sidebarMenu{
    height: 100vh;
}
.zp-sidebarMobile .zp-sidebarMenu{
    height: calc(100vh - 124px);
}
.zp-sidebarMenu .nav-bar .nav-link{
    justify-content:space-between;
    color: #ffffff;
    transition:var(--zp-transition);
    padding:0.5rem;
}
/*.zp-sidebarMenu .nav-bar.hidden>.nav-link:hover {*/
/*    transform: translateY(-5px);*/
/*    transition:all 0.3s;*/
/*}*/

/*.zp-sidebarMenu .nav-bar.hidden .nav-link:hover svg,*/
.zp-sidebarMenu .nav-bar.hidden .nav-link.active svg {
    /*fill: #383838;*/
   
}
.zp-sidebarMenu .nav-bar .nav-item>.nav-link{
    transition: all 0.3s;
}
.zp-sidebarMenu .nav-bar.hidden .nav-item>.nav-link:hover{
    /*transform: translate(0,-3px);*/
    transform: translateX(0) scale(1.15);
}

.zp-sidebarMenu .nav-bar .nav-item>.nav-link:hover{
    transform: translateX(-5px);
    transition:all 0.3s;
}
.zp-sidebarMenu .nav-bar .nav-item>.nav-link.active,
.zp-sidebarMenu .zp-subMenu .dropdown-item a.nav-link.active,
.zp-sidebarMenu .zp-subMenu .dropdown-item a.nav-link.active:hover
{
    background-color: #cfcfcf;
    color:#383838;

}
/*.zp-sidebarMenu .zp-subMenu .dropdown-item a.nav-link.active,*/
/*.zp-sidebarMenu .zp-subMenu .dropdown-item a.nav-link.active:hover{*/
/*    background-color: var(--bs-border-color) !important;*/

/*}*/

/*.zp-sidebarMenu .nav-bar .nav-link.active span,*/
/*.zp-sidebarMenu .nav-bar .nav-link.active .fa-solid,*/
/*.zp-sidebarMenu .nav-bar .nav-link:hover span,*/
/*.zp-sidebarMenu .nav-bar .nav-link:hover .fa-solid{*/
/*    !*color: #383838!important;*!*/
/*    color: #383838;*/
/*}*/
/*.zp-sidebarMenu .nav-bar .nav-link.active svg{*/
/*    !*fill:#383838;*!*/
/*    fill: #383838;*/

/*}*/
.zp-sidebarMenu .nav-bar.hidden .nav-link{
    justify-content:center;
}
.zp-sidebarMenu .nav-bar.hidden .nav-link svg{
    width: 22px;
    height: 22px;
}


/*.zp-sidebarMenu .nav-bar>.nav-link.active{*/
/*    background-color: var(--zp-MainColor);*/
/*}*/

.zp-sidebarMenu .nav-bar .nav-link span,.zp-sidebarMenu .nav-bar .nav-link .fa-solid {
    display:block;
    white-space: nowrap;
    transition: var(--zp-transition);
}
.zp-sidebarMobile .zp-sidebarMenu .nav-bar .nav-link span,.zp-sidebarMobile .zp-sidebarMenu .nav-bar .nav-link .fa-solid {
    display: block!important;
    transition: var(--zp-transition);
}
.zp-sidebarMenu .nav-bar.hidden .nav-link span,.zp-sidebarMenu .nav-bar.hidden .nav-link .fa-solid {
    display: none;
    transition: var(--zp-transition);

}
/*.zp-sidebarMenu .nav-bar .nav-item .dropdown-menu:before{*/
/*    content: '';*/
/*    display: block;*/
/*    position: absolute;*/
/*    top: 0;*/
/*    bottom: 0;*/
/*    !*background-color:transparent;*!*/
/*    width: 20px;*/
/*    height: 100%;*/
/*    right:-20px;*/
/*}*/
.zp-sidebarMenu .nav-bar .nav-item .dropdown-menu{
    top: 0;
    right: 100%;
    left: auto;
    margin-top: 0;
    margin-right: var(--bs-dropdown-spacer);
    width: max-content;
    /*position: relative;*/
}

.zp-sidebarMenu .zp-subMenu .zp-tittleMenu{
    position: relative;
    display: inline-block;
    font-size: 13px;
    margin-bottom: 15px;
}
.zp-sidebarMenu .zp-subMenu .zp-tittleMenu:after{
    content: '';
    position: absolute;
    right: 0;
    left: 0;
    bottom:-5px;
    height: 1px;
    width: 100%;
    background-color:gray;
}
.zp-sidebarMenu .zp-subMenu .dropdown-item:hover{
    background-color:transparent;

}
.zp-sidebarMenu .zp-subMenu .dropdown-item a.nav-link{
    transition:all 0.3s;
    font-weight: bold;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    display: inline-flex;
    color:#5c636a;
    padding:0.5rem 0.5rem 0.5rem 1.25rem;
    border-radius:0.5rem;
}

.zp-sidebarMenu .zp-subMenu .dropdown-item a.nav-link:hover {
    transform: translateX(-5px);
    color: var(--zp-MainColor);
    transition:all 0.3s;
    background: transparent;
}
.zp-sidebarMenu .zp-subMenu .dropdown-item span{
    display: inline-block!important;
    width: 5px;
    height: 5px;
    background-color: #b7b7b9;
    transition: var(--zp-transition);
}
.zp-sidebarMenu .nav-bar .nav-item .nav-link svg.bi-chevron-left{
    transition:all 0.5s;
}

.zp-sidebarMobile .zp-sidebarMenu .nav-bar .nav-item>.nav-link{
    background-color:#e5e5e5 ;
    color: #5c636a;
    transition:var(--zp-transition);
    padding:0.5rem;
}
.zp-sidebarMobile .zp-sidebarMenu .nav-bar .nav-item>.nav-link:hover,.zp-sidebarMobile .zp-sidebarMenu .nav-bar .nav-item>.nav-link.active{
    background:var(--zp-MainColor);
    color:white;
    transition:var(--zp-transition);
}
.zp-sidebarMobile .zp-sidebarMenu .nav-bar .nav-item .nav-link svg.bi-chevron-left{
    transition:all 0.5s;
}
.zp-sidebarMobile .zp-sidebarMenu .nav-bar .nav-item>.nav-link[aria-expanded="true"] svg.bi-chevron-left{
    transform: rotate(-90deg) translateX(-1px);
    transition:all 0.5s;
}
.zp-sidebarMobile .zp-sidebarMenu .nav-bar ul.list-collapse a{
    text-decoration: none;
    display: block;
    color: #5c636a;
    margin-bottom: 5px;
    padding: 5PX;
    border-radius:0.25rem;
    font-size: 11px;
}
.zp-sidebarMobile .zp-sidebarMenu .nav-bar ul.list-collapse a span{
    display: inline-block;
    width: 5px;
    height: 5px;
    background-color: #b7b7b9;
    transition:var(--zp-transition);
    margin-left: 3PX;
}
.zp-sidebarMobile .zp-sidebarMenu .nav-bar ul.list-collapse a:hover,.zp-sidebarMobile .zp-sidebarMenu .nav-bar ul.list-collapse a.active-subMenu{
    background:var(--zp-MainColor);
    color:white;
    transition:var(--zp-transition);
}
.zp-sidebarMobile .zp-sidebarMenu .nav-bar ul.list-collapse a:hover span,.zp-sidebarMobile .zp-sidebarMenu .nav-bar ul.list-collapse a.active-subMenu span{
    background-color:white ;
    transition:var(--zp-transition);
}


.p-onlineConnection.active:active,.zp-onlineConnection.noConnection:active{
    color: white;
}
.zp-onlineConnection.active{
    background: linear-gradient( -180deg, #629766, #198754);
    color: white;
}

.zp-onlineConnection.noConnection{
    background: linear-gradient( -180deg,#f74949, #f20611) ;
    color: white;
}
.zp-onlineConnection.disabled{
    color: var(--bs-btn-disabled-color);
    pointer-events:auto;
    background-color: var(--bs-btn-disabled-bg);
    border-color: var(--bs-btn-disabled-border-color);
    opacity: var(--bs-btn-disabled-opacity);
}
.zp-sidebarMenu .nav-bar ul.list-collapse a {
    text-decoration: none;
    display: block;
    color:black;
    margin-bottom: 5px;
    padding: 5PX;
    border-radius: 0.25rem;
    font-size: 11px;
}

.zp-uploadFile {
    display: inline-block;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 50px;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

/**** style for management ****/
.zp-management .breadcrumb-item span.numbers{
    width: 15px;
    height: 15px;
    margin-left:5px;
    font-size: 10px;
}
.zp-management .breadcrumb-item .btn.active{
    background: linear-gradient( -180deg, #629766, #198754);
    color: white;
}
.zp-breadcrumbDivider{
    --bs-breadcrumb-divider: url("../images/arrow-left (1).svg");
}
.zp-management .breadcrumb-item+.breadcrumb-item::before{
    float:right;
    margin-left: 10px;
    margin-top: 5px;
    position: static;
}
.breadcrumb-item{
    display: block;
}
.zp-imgPersonnel{
    /*background-image: url("../images/img_avatar (1).png");*/
    background-size: cover;
    background-position: center;
    height: 120px;
    width: 120px;
    background-repeat: no-repeat;
}
.zp-informationTab .dropdown-menu{
    position:static;
    background: transparent;
    /*height: 150px;*/
    z-index: 500;
}
.zp-informationTab .dropdown-menu.zp-hScrollDevice{
    height: 150px;
}
/**** style for form ****/
.was-validated .form-control:invalid{
    background-position: calc(0.375em + 0.1875rem) center;
    box-shadow: none;
}
.was-validated .form-control:invalid:focus,.was-validated .form-select:invalid:focus,
.form-control.is-valid, .was-validated .form-control:valid:focus,
.form-select.is-valid, .was-validated .form-select:valid:focus{
    box-shadow: none;
}
.form-control.is-valid, .was-validated .form-control:valid{
    background-image: none;
}
.was-validated .form-select:valid:not([multiple]):not([size]){
    background-image: none;
    padding-right:0.75rem;
}
.zp-borderBottom{
    border-bottom: 2px dotted #dee2e6;
}

.table-striped>tbody>tr{
    color:#5c636a ;
}
.table-striped>tbody>tr,.table-striped>tbody>tr:nth-of-type(odd)>*{
    color:#202121;
}
.table-striped>tbody>tr.zp-read,.table-striped>tbody>tr.zp-read:nth-of-type(odd)>*{
    color:#797b7c;
}

.table-striped td,.table td,.table th{
    vertical-align: middle;
}
.zp-typeFile span{
    font-size: 10px;
}
/*style for workingGroup*/
.a:nth-child('even') .active{
    background-color:#DC3545;
    border-color:#DC3545;
    box-shadow: none;
}
#zp-workGroup-tab .zp-verticalScrollTable,#zp-asignUser-tab .zp-verticalScrollTable,
#zp-Personnel-tab .zp-verticalScrollTable{
    height: calc(100vh - 330px)
}
#zp-IrrrgularWorkGroup-tab .zp-table .form-select{
    background-position: left 0.2rem center;
    background-size: 6px 12px;
    padding:0.375rem 0.250rem ;
    font-size: 10px;
}
#zp-IrrrgularWorkGroup-tab .zp-table span{
    font-size: 10px;
}
.zp-btnHolidays{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.zp-btnHolidays .btn{
    border: 1px solid #8F8F93FF;;
}
.zp-Presence.active{
    background-color:#0a58ca;
    /*background:linear-gradient( -180deg, #467996, #173040 );*/
    border-color:#0a58ca;
    box-shadow: none;
    color: white;

}
.m{
    border: 2px solid red;
}
.zp-Closed.active{
    background-color:#DC3545;
    border-color:#DC3545;
    box-shadow: none;
    color: white;
}
.zp-workHoliday.active{
    background-color:#FFC107;
    border-color:#FFC107;
    box-shadow: none;
    color: white;
}

/**** style for table ****/
.table{
    white-space: nowrap;
}
.table>thead{
    z-index: 2;
}
.zp-HScroll{
    height: 500px;
}
.zp-personnelTable tbody{
    height: 200px;
}
.zp-personnelTable tr{
    display: flex;
}
.zp-top{
    inset: -17px 0 auto auto!important;;
}
.zp-table tbody td select,.zp-table tbody td span{
    display: inline-block;
}

.zp-boxTable{
    height: 200px;
}

.zp-verticalScrollTable thead{
    background-color:#ececec;
    z-index: 998;
}
.zp-verticalScrollTable .zp-sticky-col {
    position: -webkit-sticky;
    position: sticky;
    background-color: #ececec;
    z-index: 2;
    white-space: normal;
}
.table .zp-id-col{
    /*width: 100px;*/
    min-width: 50px;
    max-width: 50px;
    right: 0;
}
.table .zp-first-col {
    /*width: 100px;*/
    min-width: 110px;
    max-width: 110px;
    right:50px;
    
}

.table .zp-second-col {
    /*width: 70px;*/
    min-width: 80px;
    max-width: 80px;
    right: 160px;
}
.table .zp-three-col {
    /*width: 80px;*/
    min-width: 80px;
    max-width: 80px;
    right:240px;
}
.table .zp-four-col {
    /*width:80px;*/
    min-width:110px;
    max-width:110px;
    right:320px;
    /*white-space:normal;*/
}
.zp-verticalScrollTable.zp-operation-table{
    height: calc(100vh - 310px);
}
.zp-verticalScrollTable{
    height: calc(100vh - 290px);
}
.zp-outputTable .table tbody tr.active{
    background-color:var(--zp-MainColor);
    color: white;
}
.zp-table thead.fix-header{
    top:0;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,5)!important;
    position: relative;
}
.zp-table thead.fix-header:before{
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    background-color:#dee2e6;
}

/**** end style for table ****/
/*style for select dropdown*/
.select-dropdown__button{
    min-width: 150px;
}
.select-dropdown-list{
    display: block;
    max-height: 230px;
    opacity: 0;
    pointer-events: none;
    transform-origin: top left;
    transform: scale(1, 0);
    transition: all ease-in-out .3s;
    z-index: 2;
}
.select-dropdown-list.active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1,1);
}

.select-dropdown__list-item{
    /*display: block;*/
    padding:0.5rem 0.75rem;
    border-bottom: 1px solid #e6e6e6;
    cursor: pointer;
}
.select-dropdown__list-item:last-child{
    border-bottom: none;
}

/*style for login page*/
.zp-loginPage{
    background-image: url("../images/bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.zp-loginPage .login-card{
    background-color: rgb(162 211 219 / 25%);
    backdrop-filter: blur(6px);
    opacity: 38.9;
}
.zp-loginPage .zp-logo{
    width: 100px;
    height: 30px;
}
.input-group>.input-group-text {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}
/*style for writingFomrula*/
.zp-formula :not(.btn-check)+.btn:active,.zp-formula .btn:first-child:active{
    border-color: transparent;
}
.zp-formula .btn{
    transition: var(--zp-transition);
}
.zp-formula .btn:hover{
    background-color:var(--zp-MainColor);
    color: white;
    transition:var(--zp-transition);
}
/*style for dropdownDevice*/
.zp-dropdownTab{
    background-color: transparent;
}
.zp-dropdownTab .nav-link{
    background-color: #f7f7f9;
    /*color: black;*/

}
/*style for zp-calender*/
.zp-calender .zp-week-day {
    font-size:0.8rem;
    color: #B5BEC6;
}
.zp-calender .zp-grid-number{
    display: grid;
    column-gap: 0;
    row-gap: 4px;
    grid-template-columns: 25.03px 25.03px 25.03px 25.03px 25.03px 25.03px 20.03px;
    grid-template-rows: 25.03px 25.03px 25.03px 25.03px 25.03px 25.03px;
    padding-right: 0;
    justify-content: space-evenly;
}
.zp-week-day-number {
    display: flex;
    justify-content: center;
    align-items: center;
    font-style: normal;
    font-weight: 500;
    font-size:0.9rem;
    color: #464F60;
    border-radius:3px;
    position: relative;
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.zp-week-day-number.closedCompany,.zp-week-day-number.offWork{
    position: relative;
}
.zp-week-day-number.closedCompany:after{
    content: '';
    display: block;
    position: absolute;
    top:-2px;
    background: red;
    width:8px;
    height:8px;
    border-radius: 100%;
    right:-2px;
}
.zp-week-day-number.offWork:after{
    content: '';
    display: block;
    position: absolute;
    top:-2px;
    width:8px;
    height:8px;
    border-radius: 100%;
    right:-3px;
    background-color:#f6c344;

}

.zp-week-day-number.Closed{
    position: relative;
}
.zp-week-day-number.Closed:before{
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height:2px;
    background: #de4040;
    border-radius: 0 0 3px 3px;
}
.zp-week-day-number:hover {
    background-color: #eff1f5;

}
.zp-hScrollDevice{
    height: 220px;
}
.zp-threeView{
    height: 600px;
}
.zp-QRCode{
    width: 200px;
    height: 200px;
}
/*style  for dashboard*/
.zp-dashboard .zp-circle{
    width: 30px;
    height: 30px;
    background-color: #D9D9D9;
    color: #ffffff;
    font-size: 16px;
}
.zp-dashboard .zp-circle.zp-final{
    background-color: var(--zp-MainColor);
}

.zp-dashboard .zp-circle.active{
    background: #dc3545;
}
.zp-presence-absence{
    height: 90px;
}

.zp-presence-absence .nav-pills .nav-link{
    width: 37px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    white-space: nowrap;
    color:black;
}
.zp-presence-absence .nav-pills .nav-link span.text{
    display: block;
    height:100%;
    width:100%;
}
.zp-presence-absence .zp-nameEmployee{
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.zp-presence-absence .zp-boxEmployee{
    width: 60px;
}

.zp-presence-absence .nav-pills .nav-link .zp-text{
    transform: rotate(270deg);
}
.nav-pills .nav-link.active{
    background: var(--zp-MainColor);
    color: #ffffff;
}

.zp-box-profile{
    width: 55px;
    height:55px;
    border: 2px solid #ffffff;
    border-radius: 100%;
    overflow: hidden;
}
.zp-timelineTraffic:before{
    content: '';
    position: absolute;
    width: 1px;
    background-color:#e6edef;
    top: 0;
    bottom: 0;
    right: 0;
    /*z-index:-1;*/
}
.zp-timelineTraffic li:before{
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    right:-25px;
    z-index:1;
}
.zp-timelineTraffic li.zp-log-in:before{
    background-color:#a6ddb3;
    border: 1px solid #009320;
}
.zp-timelineTraffic li.zp-Exit:before{
    background-color:#fab2b2;
    border: 1px solid #D30303;
}
.zp-box-Report{
    cursor: pointer;
    width: 130px;
    height: 130px;
    background-color: #FAFAFA;
    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
#zp-Leave-tabContent .zp-box-profile{
    width: 50px;
    height: 50px;
    border-radius: 100%;
}
.zp-ReportHeight{
    height:280px;
}
.zp-Report .nav-pills .nav-link{
    color: #5c636a;
}
.zp-Report .nav-pills .nav-link.active{
    background-color:var(--zp-MainColor);
    color:#ffffff;
    font-weight: bolder;
}
.zp-Spring{
    box-shadow: 1px 1px 7px 0px rgba(0, 147, 32, 0.30), -1px -1px 7px 0px rgba(0, 147, 32, 0.30);
}
.zp-Summer{
    box-shadow: 1px 1px 7px 0px rgba(255, 227, 0, 0.30), -1px -1px 7px 0px rgba(255, 227, 0, 0.30);
}
.zp-Summer .card-title{
    color:#dccb42;
}
.zp-Fall{
    box-shadow: 1px 1px 7px 0px rgba(241, 103, 0, 0.30), -1px -1px 7px 0px rgba(241, 103, 0, 0.30);
}
.zp-Fall .card-header{
    background-color:rgba(241, 103, 0, 0.22) ;

}
.zp-Fall .card-header .card-title{
    color:orange;
}
.zp-winter{
    box-shadow: 1px 1px 7px 0px rgba(121, 167, 255, 0.30), -1px -1px 7px 0px rgba(121, 167, 255, 0.30);
}
#map{
    height:450px;
}
/*style for calendar*/
table {
    border-collapse: collapse;
    border-spacing: 0;
}

td {
    padding: 0;
}

.calendar-container {
    position: relative;
    /*width: 450px;*/
}

.calendar {
    color: #555;
    display: inline-block;
}

.calendar thead {
    color: #e66b6b;
    font-weight: 700;
    text-transform: uppercase;
}

.calendar td {
    padding: .5em 1.5em;
    text-align: center;
    border-radius: 6px;
}

.calendar tbody td:hover {
    background: #cacaca;
    color: #fff;
}

.current-day {
    color: #e66b6b;
}
.prev-month,
.next-month {
    color: #cacaca;
}
.zp-Cartable .form-select{
    background-position: left 0 center;
}
.pagination .page-item .page-link{
    color: black;
}
.pagination .page-item .page-link.active{
    background-color: var(--zp-MainColor);
    color:#ffffff;
    border-color:var(--zp-MainColor);
   
}
.multiselect-dropdown span.optext{
    background: transparent;
}
.zp-table-device{
    height: 150px;
}
#pills-ReceivingSendInformation .zp-profile{
    width: 40px;
    height: 40px;
}
.btn.zp-themeColor:active {
    background-color: var(--zp-MainColor);
}

.dir-ltr{
    direction: ltr;
}
.form-control:disabled {
    border-radius: 0;
}
.treeview .level-title,.treeview .level-title:hover{
    text-decoration: none;
}
#zp-IrrrgularWorkGroup-tab .zp-verticalScrollTable{
    height: calc(100vh - 320px);
}

.finger{
    gap:2px;
    position: absolute;
}
.delete-finger{
    display: none;
    position: absolute;
    top: -20px;
    left: 6px;
}
.finger .btn{
    height: 37px;
    width: 25px;
    border-radius: 500px 500px 0 0;
}
.finger .btn:hover{
    background-color:#8584f5;
}
.finger.active .btn{
    background-color: #629766;
}
.finger.active .delete-finger{
    display: inline-block;
}

.finger-own{
    top: 56px;
    right:2px;
    transform: rotate(18deg);
}
.finger-two{
    top: 18px;
    right:30px;
    transform: rotate(10deg);
}
.finger-three{
    top: 0;
    right:66px;
    transform: rotate(0deg);
}
.finger-four{
    top: 18px;
    right: 104px;
    transform: rotate(-9deg);
}
.finger-five{
    width:32px ;
    top: 99px;
    right: 145px;
    transform: rotate(-44deg);
}
.finger-six{
    top:56px;
    left:2px;
    transform: rotate(-19deg);
}
.finger-seven{
    top: 18px;
    left:30px;
    transform: rotate(-10deg);
}
.finger-eight{
    top: 0;
    left: 66px;
    transform: rotate(-1deg);
}
.finger-nine{
    top: 18px;
    left: 104px;
    transform: rotate(9deg);
}
.finger-ten{
    top: 99px;
    left: 145px;
    transform: rotate(44deg);
}
.finger-ten .btn,.finger-five .btn{
    width: 33px;
}
.zp-listPersonnel.dropdown-menu{
    background-color: #ffffff;
}
.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
 margin-left:0;
}
.blazor-context-menu__item--default{
    text-align: right;
}
.blazor-context-menu__item--with-submenu:after {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translate(-100%,-50%);
    /*transform: rotate(180deg);*/
    border: 6px solid transparent;
    border-right-color: #615c5c;
}

/**************style for sorting table**********/
.zp-table .zp-sorting{
    position: relative;
}
.zp-table .zp-sorting:before{
    content: "▲";
    display: block;
    font-size: .8em;
    line-height: 9px;
    opacity: .2;
    bottom: 50%;
    position: absolute;
    right: 10px;
    cursor: pointer;
}
.zp-table .zp-sorting:after{
    content: "▼";
    top: 50%;
    display: block;
    font-size: .8em;
    line-height: 9px;
    opacity: .2;
    position: absolute;
    right: 10px;
    cursor: pointer;
}
.zp-table .zp-sorting-asc:before,.zp-table .zp-sorting-desc:after{
    opacity: .6;
}
.bd-indigo-100 {
    color: #6610f2!important;
    background-color: #e7d8fb !important;

}
/*فول اسکرین*/
.fullscreen-page{
    width: 100%;
    min-height: 100vh;
    margin: 0!important;
    padding: 0 !important;
    transition: all var(--zp-transition);

}
.back-fullscreen-btn{
    display: none;
}
.fullscreen-page .back-fullscreen-btn{
    display: block;
}
.fullscreen-page #fullscreen-btn{
    display: none;
}
.fullscreen-page .zp-cardForm{
    height: 100%;
    transition: all var(--zp-transition);
}
.fullscreen-page-nav{
    display: none;
    transition:all var(--zp-transition);
}
.fullscreen-page .card-header{
    display: none;
}
.zp-workgroup-treeView{
    height:370px;
}
.context-menu{
    width: 250px;
}
.context-menu .list-group{
    max-height: 400px;
    min-height:auto;
}
.zp-personnelTable{
    margin-bottom: 0;
}
/* .form-select {*/
/*    border: none;*/
/*    --bs-form-select-bg-img: url(../images/svg/form-select-dark.svg);*/
/*    !*--bs-form-select-bg-img:none;*!*/
/*    position: relative;*/
/*}*/
/* style for jstree*/
.jstree-default .jstree-checkbox{
    display: none;
}

#jstree1 ul {
    color:var(--zp-MainColor);
}

#jstree1 ul ul {
    color:gray;
}

#jstree1 ul ul ul {
    color: gray;
}
.jstree-wholerow-ul{
    min-width: auto;
}
.zp-box-listShift{
    display: none;
    transition:all 0.8ms;
    /*transition:var(--zp-transition);*/
}
.zp-box-listShift.active{
    display: block;
    transition:all 0.8ms;
    /*transition:var(--zp-transition);*/
}
.zp-listGroup{
    transition:all 0.8ms;
}
.box-IrrrgularWorkGroup{
    height: calc(100vh - 275px);
}


/************** style for tab *************/
.dropdown .nav-tabs.dropdown-menu{
    border-top: none;
    border-right: none;
    border-left: none;
}
.dropdown .nav-tabs.dropdown-menu button.nav-link{
    justify-content: space-between;
    padding: 0.5rem;

}
.zp-xmarkTab{
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--zp-transition);
    border-radius: 100%;
}
.nav-tabs .nav-link:hover .zp-xmarkTab{
    border: 1px solid red;
    color: red;
    transition: var(--zp-transition);
}
.nav-pills .nav-link.active{
    background: var(--zp-MainColor);
    color: #ffffff;
}

/*for mobile*/
@media screen  and (max-width: 767px){
    .dropdown .nav-tabs.dropdown-menu{
        background-color: white;
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    }
    .dropdown .nav-tabs.dropdown-menu button.nav-link.active{
        background-color: var(--zp-MainColor);
        color: white;
    }
    .zp-gridTable{
        height: auto;
    }
    .zp-gridTable .zp-table .zp-sticky-col{
        position: static;
    }

}




/*******for responsive******/
/*For Laptops*/
@media screen and (min-width: 992px) and (max-width: 1199px){
    .zp-logo {
        width: 50px;
        height: 40px;
    }

}


/*For Laptops $ Large Desktop*/
@media screen and (min-width: 992px) {
    .zp-dropdownTab {
        border: none;
    }
}

/*for Tablets*/
@media screen and (min-width: 768px) and (max-width: 991px){
    .zp-informationTab .dropdown-menu{
        position: absolute;
        background-color: white;
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    }
    .zp-namesCompanies .dropdown-menu[data-bs-popper]{
        right: auto;
        left: 0;
        bottom: 33px;
    }
    .zp-namesCompanies .dropdown-toggle::before{
        transform: rotate(90deg);
    }
    .zp-dropdownTab .nav-link{
        width: 100%;
    }
    #main-content{
        width: 100%;
    }
    

    .zp-settingMenu {
        margin-top: 110px;
        --bs-offcanvas-width:50%;
    }
    
    .Calendar-nav .nav-link{
        color: black;
    }
   
   
}
/*for mobile*/
@media screen  and (max-width: 767px){
    .zp-sidebarMenu .nav-bar .nav-item span{
        display:block;
    }
    .zp-sidebarMenu .nav-bar.show .nav-link{
        justify-content: start;
        gap:1rem;
    }
    .zp-breadcrumbDivider{
        --bs-breadcrumb-divider: url(../images/arrow-down.svg);
    }
    .zp-management .breadcrumb-item+.breadcrumb-item::before{
        position: absolute;
        top:-100%;
        right:40%;
        margin: 0;
        padding: 0;
    }
    .zp-informationTab .dropdown-menu{
        position: absolute;
        background-color: white;
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    }

    .zp-namesCompanies .dropdown-menu[data-bs-popper]{
        right: auto;
        left: 0;
        bottom: 33px;
        top: auto;
    }
    .zp-namesCompanies .dropdown-toggle::before{
        transform: rotate(90deg);
    }
    .input-group>.input-group-text{
        white-space: break-spaces;
    }
    .zp-dropdownTab .nav-link{
        width: 100%;
    }
    .zp-verticalScrollTable .zp-sticky-col {
        position: static;
    }
    .zp-box-Report {
        width: 110px;
        height: 110px;
    }
    .zp-settingMenu {
        margin-top: 95px;
        --bs-offcanvas-width:75%;
    }
    .zp-verticalScrollTable{
        height: auto;
    }
    #zp-workGroup-tab .zp-verticalScrollTable,#zp-asignUser-tab .zp-verticalScrollTable{
        /*height:280px;*/
        height: calc(100vh - 462px)
    }
    .Calendar-nav .nav-link{
        color: black;
    }
    .box-IrrrgularWorkGroup{
        height: auto;
    }
   
}



.popover {
    z-index: 10000000000000000000000 !important;
    position:absolute !important;
}

.mat-toast-container {
    z-index: 1000000000000000;
}

.mdc-dialog .mdc-dialog__content {
    padding: 0;
}

.clockpicker-popover .popover-title{
    direction: ltr;
}
.stiJsViewerMainPanel{
    direction: ltr;
}

.bd-indigo-100 {
    color: #6610f2!important;
    background-color: #e7d8fb !important;
}

.context-menu{
    position: fixed;
    background-color: white;
    z-index: 100000000000000000000000000;
}

.traffic-row-empty{
    height: 200px;
}

.box-device{
    border-radius: 22px;
    position: relative;
    z-index: 1;
    margin:15px 0;

}
.box-device.Connected{
    box-shadow: 0 10px 25.600000381469727px -3px #00FF1A14;
    background-color:#88fdc7;
    border:1px solid #D1E7DD ;
}
.zp-dark .card.box-device.Connected{
    box-shadow: 0 10px 25.600000381469727px -3px #00FF1A14;
    background-color:#88fdc7!important;
    border:1px solid #D1E7DD !important; ;

}
.zp-dark .card.box-device.Connected span{
    color: black;
}

.box-device.DisConnected{
    box-shadow: 0 10px 25.600000381469727px -3px rgba(255, 0, 115, 0.08);
    background-color: #fd8888;
    border:1px solid #e7d1d7;
}
.zp-dark .card.box-device.DisConnected{
    box-shadow: 0 10px 25.600000381469727px -3px rgba(255, 0, 115, 0.08);
    background-color: #fd8888;
    border:1px solid #e7d1d7;

}
.zp-dark .card.box-device.DisConnected span{
    color: black;
}


.zp-dark .dropdown-menu .dropdown-item.bg-danger-subtle{
    color: rgb(36, 36, 36);
}

.box-device .menu-device{
    border: none;
    box-shadow: 0 6px 17.100000381469727px -2px #00000040;
    background-color: #ffffff;
    border-radius: 6px;
    overflow: hidden;

}
.box-device .menu-device .dropdown-item{
    padding: 4px;
    border-bottom: 1px solid #E1E1E1;
    color: #474747;
    font-size: 12px;
}
.box-device .form-check-input{
    position: absolute;
    bottom: 0;
    right:50%;
    width: 20px;
    height: 20px;
    transform: translate(50%,64%);
    border-radius: 100%;
    border: 1px solid black;
    z-index: 2;
}
.box-device .form-check-input:checked{
    background-color:#00820D;
    border-color:#00820D ;
}
.device-slider .owl-carousel .owl-dots{
    display: none;
}
.device-slider .owl-carousel .owl-nav{
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0;
}
.device-slider .owl-carousel .owl-nav button.owl-next,.device-slider .owl-carousel .owl-nav button.owl-prev{
    display:flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border: 2px solid var(--zp-MainColor);
    color:var(--zp-MainColor);
    border-radius: 50%;
    transition: var(--zp-transition);

}
.device-slider .owl-carousel .owl-nav button.owl-next:hover,.device-slider .owl-carousel .owl-nav button.owl-prev:hover{
    background-color: var(--zp-MainColor);
    color:#ffffff;


}
.device-slider .owl-carousel .owl-nav button.owl-prev{
    position: absolute;
    right:-40px ;
}
.device-slider .owl-carousel .owl-nav button.owl-next{
    position: absolute;
    left:-40px ;
}
.device-slider .owl-carousel .owl-nav .fa-solid{
    font-size: 16px;
}

.cursor-pointer{
    cursor: pointer;
}
.img-device{
    border-radius: 8px;
    overflow: hidden;
    width: 80px;
    height: 80px;
}

.rz-dropdown-panel{
    z-index:5000000000000 !important;
}

.rz-dropdown{
    z-index:0 !important;
    width:100% !important;
    
}

.zp-personnelTable tr.active{
    background-color: #efefef;
}