@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Root CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
* {
  font-family: "Cairo", sans-serif;
 }
@media (max-width: 720px) {
  html, body{
    min-width: 100% !important;
    overflow-x: hidden !important;
   }
    
  .dropdown-toggle.profile-toggle::after{
    display: none;
  }  
  .height-adjust{
    max-height: 10vh !important;
  }
  .position-sm-ablsolute{
    position: absolute !important;
  }
  .custom-margin-notes{
    margin-top: auto !important;
    margin-bottom: 14px !important;
  }
  .position-sticky.bottom-0.top-6vh.p-0.m-0.sub-menu-width {
    z-index: 999999999 !important;
}

} 

@media (min-width: 1080px){
  .offcanvas.offcanvas-bottom{
    max-width: 80% !important;
    right: 10% !important;
    left: 10% !important;
  }
}
@media (width <= 1440px){
  .sub-menu-width{
    width: 20% !important;
  }
}
.sub-menu-width{
  width: 15%;
}

:root {
    /* Colors */
    --bs-primary: #309ECe !important;
    --bs-secondary: #6c757d !important;
    --bs-success: #198754 !important;
    --bs-info: #0dcaf0 !important;
    --bs-warning: #ffc107 !important;
    --bs-danger: #dc3545 !important;
    --bs-orange: #ff7d33 !important;
    --bs-green: #008B8B !important;
    --bs-sea-green: #44b6ae !important;
    --bs-brown: #754E1A !important;
    --bs-purple: #6e33ff !important;
    --bs-pink: #ff33c1 !important;
    --bs-navyBlue: #406BD1 !important;
    --bs-darkblue: #000e72 !important;
    --bs-whatsapp: #25D366 !important;
    --bs-timy: #E77817 !important;
    --bs-zkt: #7AC143 !important;
    --bs-white: #fff !important;
    --bs-wwhite: #fff !important;
    --bs-black: #000 !important;
    --bg-dark: #1e1e1e !important;
    --bs-yellow: #af9d29 !important;
    --bs-cyanblue: #14bcdf !important;
    --bs-bg-light: #ececec !important;
    /* Light Colors */
    --bs-primary-light: #ACD8EB !important;
    --bs-secondary-light: #e2e3e5 !important;
    --bs-success-light: #d1e7dd !important;
    --bs-info-light: #CFF4FC !important;
    --bs-warning-light: #fff3cd !important;
    --bs-danger-light: #f8d7da !important;
    --bs-orange-light: #FFE5D6 !important;
    --bs-green-light: #CCE8E8 !important;
    --bs-sea-green-light: #b4f0ed !important;
    --bs-brown-light: #E3DCD1 !important;
    --bs-purple-light: #E2D6FF !important;
    --bs-pink-light: #FFD6F3 !important;
    --bs-navyBlue-light: #D9E1F6 !important;
    --bs-darkblue-light: #99aafc !important;
    --bs-whatsapp-light: #D3F6E0 !important;
    --bs-timy-light: #FAE4D1 !important;
    --bs-zkt-light: #E4F3D9 !important;
    --bs-dark-light: #ececec !important;
    --bs-yellow-light: #f8ea8f !important;
    --bs-cyanblue-light: #d0f8fd !important;
    /* Others */
    --bs-primary-rgb: 48, 158, 206 !important;
    --bs-primary-light: #eaf5fa !important;
    --bs-primary-border-subtle: var(--bs-primary) !important;
    --bs-link-color: var(--bs-dark) !important;
    --bs-link-hover-color: var(--bs-primary) !important;
    --bs-card-height: auto !important;
    --bs-hover-color: #F1F6FF !important;
    --bs-active-color: #F1F6FF !important;
    --bs-deactive-color: #FCEFF0 !important;
    --bs-sub-text-color: #808080 !important;
    --bs-card-color: #808080 !important;
    --bs-text-light: #CFCFCF !important;
    /* Btn Primary */
    --bs-btn-bg: var(--bs-primary) !important;
    --bs-btn-border-color: var(--bs-primary) !important;
    --bs-btn-hover-bg: var(--bs-primary) !important;
    --bs-btn-hover-border-color: var(--bs-primary) !important;
    --bs-btn-active-bg: var(--bs-primary) !important;
    --bs-btn-active-border-color: var(--bs-primary) !important;
    --bs-btn-disabled-bg: var(--bs-primary) !important;
    --bs-btn-disabled-border-color: var(--bs-primary) !important;
    /* Main Menu Colors */
    --bs-workspace-color: #36A2EB !important;
    --bs-communication-color: #FF6384 !important;
    --bs-attendance-color: #FF9F40 !important;
    --bs-recruitment-color: #1469af !important;
    --bs-salary-color: #9966FF !important;
    --bs-evaluation-color: #4BC0C0 !important;
    --bs-training-color: #FFCD56 !important;
    --bs-report-color: #FF6F56 !important;
    --bs-configuration-color: #F566FF !important;
    --bs-personnel-color: #EB365A !important;
    --bs-support-color: #00004E !important;
    /* Gredient */
    --bs-gredient-1: linear-gradient(135deg, rgba(48, 158, 206, 0.8) 0%, rgba(64, 107, 209, 0.8) 100%) !important;
    --fc-border-color: #dddddd00 !important;
}


/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Dark Mode xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

body.dark-only {
    /* Colors */
    --bs-white: #1e1e1e !important;
    --bs-wwhite: #1e1e1e !important;
    --bs-bg-light: #080808 !important;
    --bg-dark: #fff !important;
    --bs-dark: #fff !important;
    --bs-body-bg: #1e1e1e !important;
    --bs-border-color: #424242 !important;
    --bs-hover-color: #1B282C !important;
    --bs-active-color: #1B282C !important;
    --bs-dropdown-link-hover-bg: #1B282C !important;
    --bs-card-color: var(--bs-sub-text-color) !important;
    /* Light Colors */
    --bs-primary-light: #202B30 !important;
    --bs-secondary-light: #262727 !important;
    --bs-success-light: #1C3D2E !important;
    --bs-info-light: #19525D !important;
    --bs-warning-light: #342E1C !important;
    --bs-danger-light: #312022 !important;
    --bs-orange-light: #342720 !important;
    --bs-green-light: #1B2929 !important;
    --bs-brown-light: #27231E !important;
    --bs-purple-light: #262034 !important;
    --bs-pink-light: #34202E !important;
    --bs-navyBlue-light: #212630 !important;
    --bs-darkblue-light: #99aafc !important;
    --bs-whatsapp-light: #1F3025 !important;
    --bs-timy-light: #2E1805 !important;
    --bs-zkt-light: #18270D !important;
    /* --bs-dark-light: #ececec !important; */
}
body.dark-only .h1, body.dark-only .h2, body.dark-only .h3, body.dark-only .h4, body.dark-only .h5, body.dark-only h6, body.dark-only h1, body.dark-only h2, body.dark-only h3, body.dark-only h4, body.dark-only h5, body.dark-only h6{
  color: var(--bg-dark);
}

body.dark-only .bg-transparent, body.dark-only .text-dark{
  color: var(--bg-dark) !important;
}
body.dark-only .dropdown-item:focus, body.dark-only .dropdown-item:hover{
  background-color: var(--bs-active-color) !important;
}
body.dark-only .card-body {
  flex: 1 1 auto;
  /* padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x); */
  color: var(--bs-sub-text-color) !important;
}
body.dark-only .card-header {
  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
  margin-bottom: 0px;
  color: var(--bs-dark);
  background-color: var(--bs-card-cap-bg);
  border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
}
body.dark-only .tooltip-inner {
  background-color: var(--bs-primary-light); /* Tooltip background color */
  color: var(--bs-primary); /* Tooltip text color */
}
body.dark-only .tooltip-arrow {
  border-top-color: var(--bs-primary-light) !important; /* Tooltip arrow color */
}


.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: var(--bg-dark) !important;
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Body CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
body {
    background-color: var(--bs-bg-light) !important;
    max-width: 100%;
    overflow-x: hidden;
    /* background-color: var(--bs-light); */
}

.zsiq_floatmain.siq_bL{  
    right:0;
    left: auto;
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Normal Background Color xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
.bg-primary{
    background-color: var(--bs-primary) !important;
    color: var(--bs-white) !important;
}
.bg-secondary{
    background-color: var(--bs-secondary) !important;
    color: var(--bs-white) !important;
}
.bg-success{
    background-color: var(--bs-success) !important;
    color: var(--bs-white) !important;
}
.bg-info{
    background-color: var(--bs-info) !important;
    color: var(--bs-white) !important;
}
.bg-warning{
    background-color: var(--bs-warning) !important;
    color: var(--bs-white) !important;
}
.bg-danger{
    background-color: var(--bs-danger) !important;
    color: var(--bs-white) !important;
}
.bg-orange{
    background-color: var(--bs-orange) !important;
    color: var(--bs-white) !important;
}
.bg-green{
    background-color: var(--bs-green) !important;
    color: var(--bs-white) !important;
}
.bg-gray {
    background-color: #777 !important;
    color: var(--bs-white) !important;
}
.bg-sea-green {
    background-color: var(--bs-sea-green) !important;
    color: var(--bs-white) !important;
}
.bg-brown{
  background-color: var(--bs-brown) !important;
  color: var(--bs-white) !important;
}
.bg-maroon {
    background-color: #7a0603 !important;
    color: var(--bs-white) !important;
}
.bg-purple {
    background-color: var(--bs-purple) !important;
    color: var(--bs-white) !important;
}
.bg-yellow {
    background-color: var(--bs-yellow) !important;
    color: var(--bs-white) !important;
}
.bg-cyanblue {
    background-color: var(--bs-cyanblue) !important;
    color: var(--bs-white) !important;
}
.bg-pink{
    background-color: var(--bs-pink) !important;
    color: var(--bs-white) !important;
}
.bg-navyBlue{
  background-color: var(--bs-navyBlue) !important;
  color: var(--bs-white) !important;
}
.bg-darkblue {
    background-color: var(--bs-darkblue) !important;
    color: var(--bs-white) !important;
}
.bg-whatsapp{
  background-color: var(--bs-whatsapp) !important;
  color: var(--bs-white) !important;
}
.bg-timy{
  background-color: var(--bs-timy) !important;
  color: var(--bs-white) !important;
}
.bg-zkt{
  background-color: var(--bs-zkt) !important;
  color: var(--bs-white) !important;
}
.bg-dark{
    background-color: var(--bs-dark) !important;
    color: var(--bs-white) !important;
}
.bg-wwhite {
  --bs-bg-opacity: 1;
  background-color: var(--bs-wwhite) !important;
}
.bg-workspace{
  background-color: var(--bs-workspace-color) !important;
  color: #fff;
}
.bg-communication{
  background-color: var(--bs-communication-color) !important;
  color: #fff;
}
.bg-attendance{
  background-color: var(--bs-attendance-color) !important;
  color: #fff;
}
.bg-recruitment{
  background-color: var(--bs-recruitment-color) !important;
  color: #fff;
}
.bg-salary{
  background-color: var(--bs-salary-color) !important;
  color: #fff;
}
.bg-evaluation{
  background-color: var(--bs-evaluation-color) !important;
  color: #fff;
}
.bg-training{
  background-color: var(--bs-training-color) !important;
  color: #fff;
}
.bg-report{
  background-color: var(--bs-report-color) !important;
  color: #fff;
}
.bg-configuration{
  background-color: var(--bs-configuration-color) !important;
  color: #fff;
}
.bg-personnel{
  background-color: var(--bs-personnel-color) !important;
  color: #fff;
}
.bg-support{
  background-color: var(--bs-support-color) !important;
  color: #fff;
}

.bg-active{
  background: var(--bs-active-color);
}
.bg-deactive{
  background: var(--bs-deactive-color);
}
.bg-blur{
  background: rgba(138, 138, 138, 0.4) !important;
  backdrop-filter: blur(5px) !important;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx light Background Colors xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.bg-primary-light{
    background-color: var(--bs-primary-light) !important;
    color: var(--bs-primary) !important;
}
.bg-secondary-light{
    background-color: var(--bs-secondary-light) !important;
    color: var(--bs-secondary) !important;
}
.bg-success-light{
    background-color: var(--bs-success-light) !important;
    color: var(--bs-success) !important;
}
.bg-info-light{
    background-color: var(--bs-info-light) !important;
    color: var(--bs-info) !important;
}
.bg-warning-light{
    background-color: var(--bs-warning-light) !important;
    color: var(--bs-warning) !important;
}
.bg-danger-light{
    background-color: var(--bs-danger-light) !important;
    color: var(--bs-danger) !important;
}
.bg-orange-light{
    background-color: var(--bs-orange-light) !important;
    color: var(--bs-orange) !important;
}
.bg-green-light{
    background-color: var(--bs-green-light) !important;
    color: var(--bs-green) !important;
}
.bg-brown-light{
  background-color: var(--bs-brown-light) !important;
  color: var(--bs-brown) !important;
}
.bg-sea-green-light {
    background-color: var(--bs-sea-green-light) !important;
    color: var(--bs-sea-green) !important;
}
.bg-maroon-light {
    background-color: #f3d3d2 !important;
    color: #7a0603 !important;
}
.bg-purple-light{
    background-color: var(--bs-purple-light) !important;
    color: var(--bs-purple) !important;
}
.bg-yellow-light {
    background-color: var(--bs-yellow-light) !important;
    color: var(--bs-yellow) !important;
}
.bg-cyanblue-light {
    background-color: var(--bs-cyanblue-light) !important;
    color: var(--bs-cyanblue) !important;
}
.bg-pink-light{
    background-color: var(--bs-pink-light) !important;
    color: var(--bs-pink) !important;
}
.bg-navyBlue-light{
  background-color: var(--bs-navyBlue-light) !important;
  color: var(--bs-navyBlue) !important;
}
.bg-darkblue-light {
    background-color: var(--bs-darkblue-light) !important;
    color: var(--bs-darkblue) !important;
}
.bg-whatsapp-light{
  background-color: var(--bs-whatsapp-light) !important;
  color: var(--bs-whatsapp) !important;
}
.bg-timy-light{
  background-color: var(--bs-timy-light) !important;
  color: var(--bs-timy) !important;
}
.bg-zkt-light{
  background-color: var(--bs-zkt-light) !important;
  color: var(--bs-zkt) !important;
}
.bg-dark-light{
    background-color: var(--bs-dark-light) !important;
    color: var(--bs-dark) !important;
}
.bg-active-color{
  background-color: var(--bs-primary-light) !important;
  /* color: var(--bs-dark) !important; */
}
.custom-hover:hover{
  background-color: var(--bs-hover-color) !important;
  /* color: var(--bs-dark) !important; */
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Gredient Background Colors xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
.gredient-one{
  background: var(--bs-gredient-1) !important;
  color: var(--bs-wwhite) !important;
}


/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Normal Buttons xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
.btn-primary{
    background-color: var(--bs-primary) !important;
    color: var(--bs-white) !important;
    --bs-btn-bg: var(--bs-primary) !important;
    --bs-btn-border-color: var(--bs-primary) !important;
    --bs-btn-hover-bg: var(--bs-primary) !important;
    --bs-btn-hover-border-color: var(--bs-primary) !important;
    --bs-btn-active-bg: var(--bs-primary) !important;
    --bs-btn-active-border-color: var(--bs-primary) !important;
    --bs-btn-disabled-bg: var(--bs-primary) !important;
    --bs-btn-disabled-border-color: var(--bs-primary) !important;
}

.btn-secondary{
    background-color: var(--bs-secondary) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-secondary);
}
.btn-success{
    background-color: var(--bs-success) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-success);
}
.btn-info{
    background-color: var(--bs-info) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-info);
}
.btn-warning{
    background-color: var(--bs-warning) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-warning-light) !important;
}
.btn-danger{
    background-color: var(--bs-danger) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-danger);
}
.btn-orange{
    background-color: var(--bs-orange) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-orange);
}
.btn-green{
    background-color: var(--bs-green) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-green);
}
.btn-brown{
  background-color: var(--bs-brown) !important;
  color: var(--bs-white) !important;
  border-color: var(--bs-brown);
}
.btn-purple{
    background-color: var(--bs-purple) !important;
    color: #fff !important;
    border-color: var(--bs-purple);
}
.btn-pink{
    background-color: var(--bs-pink) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-pink);
}
.btn-navyBlue{
  background-color: var(--bs-navyBlue) !important;
  color: var(--bs-white) !important;
  border-color: var(--bs-navyBlue);
}
.btn-darkblue{
  background-color: var(--bs-darkblue) !important;
  color: var(--bs-white) !important;
  border-color: var(--bs-darkblue);
}
.btn-whatsapp{
  background-color: var(--bs-whatsapp) !important;
  color: var(--bs-white) !important;
  border-color: var(--bs-whatsapp);
}
.btn-timy{
  background-color: var(--bs-timy) !important;
  color: var(--bs-white) !important;
  border-color: var(--bs-timy);
}
.btn-zkt{
  background-color: var(--bs-zkt) !important;
  color: var(--bs-white) !important;
  border-color: var(--bs-zkt);
}
.btn-dark{
    background-color: var(--bs-dark) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-dark);
}
body.dark-only .btn-close{
  --bs-btn-close-color: var(--bs-wwhite) !important;
  background-color: var(--bs-dark) !important;
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Normal Buttons:hover xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.btn-primary:hover{
    background-color: var(--bs-primary-light) !important;
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary-light) !important;
}
.btn-secondary:hover{
    background-color: var(--bs-secondary-light) !important;
    color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary-light);

}
.btn-success:hover{
    background-color: var(--bs-success-light) !important;
    color: var(--bs-success) !important;
    border-color: var(--bs-success-light);

}
.btn-info:hover{
    background-color: var(--bs-info-light) !important;
    color: var(--bs-info) !important;
    border-color: var(--bs-info-light);

}
.btn-warning:hover{
    background-color: var(--bs-warning-light) !important;
    color: var(--bs-warning) !important;
    border-color: #aa8928;

}
.btn-danger:hover{
    background-color: var(--bs-danger-light) !important;
    color: var(--bs-danger) !important;
    border-color: var(--bs-danger-light);

}
.btn-orange:hover{
    background-color: var(--bs-orange-light) !important;
    color: var(--bs-orange) !important;
    border-color: var(--bs-orange-light);
}
.btn-green:hover{
    background-color: var(--bs-green-light) !important;
    color: var(--bs-green) !important;
    border-color: var(--bs-green-light);

}
.btn-brown:hover{
  background-color: var(--bs-brown-light) !important;
  color: var(--bs-brown) !important;
    border-color: var(--bs-brown-light);

}
.btn-purple:hover{
    background-color: var(--bs-purple-light) !important;
    color: var(--bs-purple) !important;
    border-color: var(--bs-purple-light);

}
.btn-pink:hover{
    background-color: var(--bs-pink-light) !important;
    color: var(--bs-pink) !important;
    border-color: var(--bs-pink-light);

}
.btn-navyBlue:hover{
  background-color: var(--bs-navyBlue-light) !important;
  color: var(--bs-navyBlue) !important;
    border-color: var(--bs-navyBlue-light);

}
.btn-darkblue:hover{
  background-color: var(--bs-darkblue-light) !important;
  color: var(--bs-darkblue) !important;
  border-color: var(--bs-darkblue-light);

}
.btn-whatsapp:hover{
  background-color: var(--bs-whatsapp-light) !important;
  color: var(--bs-whatsapp) !important;
  border-color: var(--bs-whatsapp-light);

}
.btn-timy:hover{
  background-color: var(--bs-timy-light) !important;
  color: var(--bs-timy) !important;
    border-color: var(--bs-timy-light);

}
.btn-zkt:hover{
  background-color: var(--bs-zkt-light) !important;
  color: var(--bs-zkt) !important;
    border-color: var(--bs-zkt-light);

}
.btn-dark:hover{
    background-color: var(--bs-dark-light) !important;
    color: var(--bs-dark) !important;
    border-color: var(--bs-dark-light);

}
.btn-selected-delete{
  background-color: transparent !important;
  color: var(--bs-danger);

}

.btn-select-all{
  background-color: transparent !important;
  color: var(--bs-primary);

}

.floating-button{
  transition: all ease 1s !important;
}

.floating-button:hover{
  margin-right: 0px !important;
}


.ellapse-btn{
  display: flex !important;
  align-items: center !important;
  gap: .5rem !important;
  overflow: hidden;
  padding: .25rem!important;
  position: relative;
}
.ellapse-btn-icon{
  margin: .25rem!important;
}
.ellapse-btn-text {
  position: absolute;
  margin-right: -100px;
  opacity: 0;
  transform: translateX(120px);
  transition: all ease 1s;
  visibility: hidden;
}

.ellapse-btn:hover .ellapse-btn-text {
  position: relative;
  margin-right: 8px;
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx light Buttons xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.btn-primary-light{
    background-color: var(--bs-primary-light) !important;
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary-light);
}
.btn-secondary-light{
    background-color: var(--bs-secondary-light) !important;
    color: var(--bs-dark) !important;
    border-color: var(--bs-secondary-light);
}
.btn-success-light{
    background-color: var(--bs-success-light) !important;
    color: var(--bs-success) !important;
    border-color: var(--bs-success-light);
}
.btn-info-light{
    background-color: var(--bs-info-light) !important;
    color: var(--bs-info) !important;
    border-color: var(--bs-info-light);
}
.btn-warning-light{
    background-color: var(--bs-warning-light) !important;
    color: var(--bs-warning) !important;
    border-color: var(--bs-warning-light);
}
.btn-danger-light{
    background-color: var(--bs-danger-light) !important;
    color: var(--bs-danger) !important;
    border-color: var(--bs-danger-light);
}
.btn-orange-light{
    background-color: var(--bs-orange-light) !important;
    color: var(--bs-orange) !important;
    border-color: var(--bs-orange-light);
}
.btn-green-light{
    background-color: var(--bs-green-light) !important;
    color: var(--bs-green) !important;
    border-color: var(--bs-green-light);
}
.btn-brown-light{
  background-color: var(--bs-brown-light) !important;
  color: var(--bs-brown) !important;
  border-color: var(--bs-brown-light);
}
.btn-purple-light{
    background-color: var(--bs-purple-light) !important;
    color: var(--bs-purple) !important;
    border-color: var(--bs-purple-light);
}
.btn-pink-light{
    background-color: var(--bs-pink-light) !important;
    color: var(--bs-pink) !important;
    border-color: var(--bs-pink-light);
}
.btn-navyBlue-light{
  background-color: var(--bs-navyBlue-light) !important;
  color: var(--bs-navyBlue) !important;
  border-color: var(--bs-navyBlue-light);
}
.btn-darkblue-light{
  background-color: var(--bs-darkblue-light) !important;
  color: var(--bs-darkblue) !important;
  border-color: var(--bs-darkblue-light);
}
.btn-whatsapp-light{
  background-color: var(--bs-whatsapp-light) !important;
  color: var(--bs-whatsapp) !important;
  border-color: var(--bs-whatsapp-light);
}
.btn-timy-light{
  background-color: var(--bs-timy-light) !important;
  color: var(--bs-timy) !important;
  border-color: var(--bs-timy-light);
}
.btn-zkt-light{
  background-color: var(--bs-zkt-light) !important;
  color: var(--bs-zkt) !important;
  border-color: var(--bs-zkt-light);
}
.btn-dark-light{
    background-color: var(--bs-dark-light) !important;
    color: var(--bs-dark) !important;
    border-color: var(--bs-dark-light);
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Light Buttons:Hover xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
.btn-primary-light:hover{
    background-color: var(--bs-primary) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-primary);
}
.btn-secondary-light:hover{
    background-color: var(--bs-secondary) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-secondary);
}
.btn-success-light:hover{
    background-color: var(--bs-success) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-success);
}
.btn-info-light:hover{
    background-color: var(--bs-info) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-info);
}
.btn-warning-light:hover{
    background-color: var(--bs-warning) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-warning);
}
.btn-danger-light:hover{
    background-color: var(--bs-danger) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-danger);
}
.btn-orange-light:hover{
    background-color: var(--bs-orange) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-orange);
}
.btn-green-light:hover{
    background-color: var(--bs-green) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-green);
}
.btn-brown-light:hover{
  background-color: var(--bs-brown) !important;
  color: var(--bs-white) !important;
  border-color: var(--bs-brown);
}
.btn-purple-light:hover{
    background-color: var(--bs-purple) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-purple);
}
.btn-pink-light:hover{
    background-color: var(--bs-pink) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-pink);
}
.btn-navyBlue-light:hover{
  background-color: var(--bs-navyBlue) !important;
  color: var(--bs-white) !important;
  border-color: var(--bs-navyBlue);
}
.btn-darkblue-light:hover{
  background-color: var(--bs-darkblue) !important;
  color: var(--bs-white) !important;
  border-color: var(--bs-darkblue);
}
.btn-whatsapp-light:hover{
  background-color: var(--bs-whatsapp) !important;
  color: var(--bs-white) !important;
  border-color: var(--bs-whatsapp);
}
.btn-timy-light:hover{
  background-color: var(--bs-timy) !important;
  color: var(--bs-white) !important;
  border-color: var(--bs-timy);
}
.btn-zkt-light:hover{
  background-color: var(--bs-zkt) !important;
  color: var(--bs-white) !important;
  border-color: var(--bs-zkt);
}
.btn-dark-light:hover{
    background-color: var(--bs-dark) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-dark);
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Outline Buttons xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary) !important;
    --bs-btn-border-color: var(--bs-primary) !important;
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-primary) !important;
    --bs-btn-hover-border-color: var(--bs-primary) !important;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-primary) !important;
    --bs-btn-active-border-color: var(--bs-primary) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-primary) !important;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-primary) !important;
    --bs-gradient: none;
  }
  .btn-outline-orange {
    --bs-btn-color: var(--bs-orange) !important;
    --bs-btn-border-color: var(--bs-orange) !important;
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-orange) !important;
    --bs-btn-hover-border-color: var(--bs-orange) !important;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-orange) !important;
    --bs-btn-active-border-color: var(--bs-orange) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-orange) !important;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-orange) !important;
    --bs-gradient: none;
  }

.btn-outline-green {
  --bs-btn-color: var(--bs-green) !important;
  --bs-btn-border-color: var(--bs-green) !important;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--bs-green) !important;
  --bs-btn-hover-border-color: var(--bs-green) !important;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: var(--bs-green) !important;
  --bs-btn-active-border-color: var(--bs-green) !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-green) !important;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-green) !important;
  --bs-gradient: none;
}
.btn-outline-brown {
  --bs-btn-color: var(--bs-brown) !important;
  --bs-btn-border-color: var(--bs-brown) !important;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--bs-brown) !important;
  --bs-btn-hover-border-color: var(--bs-brown) !important;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: var(--bs-brown) !important;
  --bs-btn-active-border-color: var(--bs-brown) !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-brown) !important;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-brown) !important;
  --bs-gradient: none;
}
.btn-outline-purple {
  --bs-btn-color: var(--bs-purple) !important;
  --bs-btn-border-color: var(--bs-purple) !important;
  --bs-btn-hover-color: var(--bs-purple) !important;
  --bs-btn-hover-bg: var(--bs-purple) !important;
  --bs-btn-hover-border-color: var(--bs-purple) !important;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: var(--bs-purple) !important;
  --bs-btn-active-border-color: var(--bs-purple) !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-purple) !important;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-purple) !important;
  --bs-gradient: none;
}

.btn-outline-pink {
  --bs-btn-color: var(--bs-pink) !important;
  --bs-btn-border-color: var(--bs-pink) !important;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--bs-pink) !important;
  --bs-btn-hover-border-color: var(--bs-pink) !important;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: var(--bs-pink) !important;
  --bs-btn-active-border-color: var(--bs-pink) !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-pink) !important;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-pink) !important;
  --bs-gradient: none;
}
.btn-outline-navyBlue {
  --bs-btn-color: var(--bs-navyBlue) !important;
  --bs-btn-border-color: var(--bs-navyBlue) !important;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--bs-navyBlue) !important;
  --bs-btn-hover-border-color: var(--bs-navyBlue) !important;
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: var(--bs-navyBlue) !important;
  --bs-btn-active-border-color: var(--bs-navyBlue) !important;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--bs-navyBlue) !important;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-navyBlue) !important;
  --bs-gradient: none;
}
button.border-dashed-primary{
border: 1px dashed var(--bs-primary) !important;
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Input FIle CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.custom-file-wrapper {
  width: 100%;
  border: 2px dashed #999;
  border-radius: 10px;
  padding: 40px 15px;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  color: #333;
  background-color: transparent;
  cursor: pointer;
  transition: border-color 0.3s ease;
  margin-bottom: 15px;
  position: relative;
}

.custom-file-wrapper.dragover {
  border-color: #2a7ae2;
}

.custom-file-wrapper input[type="file"] {
  display: none;
}

.custom-file-label {
  display: block;
}

.custom-file-name {
  margin-top: 10px;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Font CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
.crop-text-3 {
    -webkit-line-clamp: 2;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  .copyTextBtn h6 {
    white-space: nowrap;  /* Prevent text wrapping */
    overflow: hidden !important;     /* Hide any overflow (if needed) */
     /* Keep the truncation behavior when there's too much text */
}

.copyTextBtn h6.text-truncate {
    white-space: nowrap;  /* Ensure truncation is applied */
    overflow: hidden;
    text-overflow: ellipsis;
}

  .clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  
.truncate {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* Show only two lines */
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .line-height-0{
    line-height: 1.5rem;
  }
  
       /* CSS to handle truncation */
       .truncate {
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Show only 3 lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .more-text {
        display: none;
    }

    /* Style for the 'Read more' link */
    .read-more {
        color: #007bff;
        text-decoration: none;
        cursor: pointer;
    }  
    .sub-text{
      color: var(--bs-sub-text-color) !important;
    }
    .dropdown-menu{
      text-align: unset !important;
    }

/* Font Color */
.text-green{
  color: var(--bs-green) !important;
}
.text-orange{
  color: var(--bs-orange) !important;
}
.text-navyBlue{
  color: var(--bs-navyBlue) !important;
}
.text-pink{
  color: var(--bs-pink) !important;
}
.sub-text-light{
  color: var(--bs-text-light) !important;
}
/* Font Sizes */
.f-10 {
  font-size: 10px;
}
.f-12 {
  font-size: 12px;
}
.f-14 {
  font-size: 14px;
}
.f-16 {
  font-size: 16px;
}
.f-18 {
  font-size: 18px;
}
.f-20 {
  font-size: 20px;
}
.f-22 {
  font-size: 22px;
}
.f-24 {
  font-size: 24px;
}
.f-26 {
  font-size: 26px;
}
.f-28 {
  font-size: 28px;
}
.f-30 {
  font-size: 30px;
}
.f-32 {
  font-size: 32px;
}
.f-34 {
  font-size: 34px;
}
.f-36 {
  font-size: 36px;
}
.f-38 {
  font-size: 38px;
}
.f-40 {
  font-size: 40px;
}
.f-42 {
  font-size: 42px;
}
.f-44 {
  font-size: 44px;
}
.f-46 {
  font-size: 46px;
}
.f-48 {
  font-size: 48px;
}
.f-50 {
  font-size: 50px;
}
.f-52 {
  font-size: 52px;
}
.f-54 {
  font-size: 54px;
}
.f-56 {
  font-size: 56px;
}
.f-58 {
  font-size: 58px;
}
.f-60 {
  font-size: 60px;
}
.f-62 {
  font-size: 62px;
}
.f-64 {
  font-size: 64px;
}
.f-66 {
  font-size: 66px;
}
.f-68 {
  font-size: 68px;
}
.f-70 {
  font-size: 70px;
}
.f-72 {
  font-size: 72px;
}
.f-74 {
  font-size: 74px;
}
.f-76 {
  font-size: 76px;
}
.f-78 {
  font-size: 78px;
}
.f-80 {
  font-size: 80px;
}
.f-82 {
  font-size: 82px;
}
.f-84 {
  font-size: 84px;
}
.f-86 {
  font-size: 86px;
}
.f-88 {
  font-size: 88px;
}
.f-90 {
  font-size: 90px;
}
.f-92 {
  font-size: 92px;
}
.f-94 {
  font-size: 94px;
}
.f-96 {
  font-size: 96px;
}
.f-98 {
  font-size: 98px;
}
.f-100 {
  font-size: 100px;
}


.popover-container{
  /* height: 420px;  */
  width: 380px; 
  position: absolute;
  /* left: -20%; */
  border: 0px; 
  padding: 0px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset; 
  border-radius: 0.375rem;


  position: absolute;
  top: 100%; /* Places it right below the button */
  left: 50%;
  transform: translateX(-50%); /* Centers it */
  background: white;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  min-width: 150px;
  text-align: center;
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Star Rating CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

        /* Star rating styles */
        .star-rating {
            /* direction: rtl; */
            display: inline-block;
        }
  
        .star-rating input {
            display: none;
        }
  
        .star-rating label {
            font-size: 30px;
            color: #ccc;
            cursor: pointer;
        }
  
        .star-rating input:checked ~ label {
            color: var(--bs-warning);
        }
  
        .star-rating label:hover,
        .star-rating label:hover ~ label {
            color: var(--bs-warning);
        }
.notes-delete {
    visibility: hidden;
/*    transition: ease-in 0.5s;*/
}
.notes-box:hover .notes-delete {
    visibility:visible;
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Loader CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
#main-content-wrapper {
    position: relative;
    /*    margin: .5rem;*/
}
.z-5 {
    z-index: 5 !important;
}

.blurry-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 98%;
    height: 96vh;
    z-index: 3;
    display: block;

}
.spinner {
  width: 48px;
  height: 48px;
  margin: auto;
  position: relative;
}
.spinner:before {
    content: '';
    width: 48px;
    height: 5px;
    background: #000;
    opacity: 0.25;
    position: absolute;
    top: 60px;
    left: 0;
    border-radius: 50%;
    animation: shadow 0.5s linear infinite;
  }
  .spinner:after {
    content: '';
    width: 100%;
    height: 100%;
    background-color: var(--bs-evaluation-color); /* fallback for early state */
    animation: bxSpin 0.5s linear infinite, smoothColorShift 30s ease-in-out infinite;
    transition: background-color 5s ease;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px;
  }
@keyframes bxSpin {
  17% {
    border-bottom-right-radius: 3px;
  }
  25% {
    transform: translateY(9px) rotate(22.5deg);
  }
  50% {
    transform: translateY(18px) scale(1, .9) rotate(45deg);
    border-bottom-right-radius: 40px;
  }
  75% {
    transform: translateY(9px) rotate(67.5deg);
  }
  100% {
    transform: translateY(0) rotate(90deg);
  }
}

@keyframes shadow {
  0%, 100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1);
  }
}
@keyframes smoothColorShift {
  0%   { background-color: var(--bs-workspace-color) }
  20%  { background-color: var(--bs-communication-color) }
  40%  { background-color: var(--bs-attendance-color) }
  60%  { background-color: var(--bs-personnel-color) }
  80%  { background-color: var(--bs-recruitment-color) }
  100% { background-color: var(--bs-support-color) }
}
      
      
.placeholder{
    /* display: flex; */
    border-radius: 6px ;
    
    animation: opacityy 3s infinite; /* Background color changes every 5 seconds */
  
  }
  /* Define the keyframes for background color change */
  @keyframes opacityy {
    0% {
      opacity: 0.1; 
    }
    25% {
      opacity: 0.2; 
    }
    50% {
      opacity: 0.1; 
    }
    75% {
      opacity: 0.2; 
    }
    100% {
      opacity: 0.1; 
    }
  }

.ektefa-animate {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s ease-out forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.skeleton {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}

@keyframes skeleton-loading {
  0% {
      background-position: 200% 0;
  }
  100% {
      background-position: -200% 0;
  }
}
.transition-width {
  transition: all 0.5s ease;
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Status CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
.status-onLeave{
  height: 22px ;
  width: 22px ;
  border-radius: 50%;
  border: 4px solid var(--bs-wwhite);
  background-color: var(--bs-navyBlue);
}
.bg-deactive .status-onLeave{
  border-color: var(--bs-deactive-color);
}
.bg-deactive:hover .status-onLeave{
  border-color: var(--bs-hover-color);
}

.status-onLeave.status-onLeave-big{
  height: 28px ;
  width: 28px ;
}
.status-deduction{
  height: 22px ;
  width: 22px;
  border-radius: 50%;
  border: 4px solid var(--bs-white);
  background-color: var(--bs-pink);
}
.bg-deactive .status-deduction{
  border-color: var(--bs-deactive-color);
}
.bg-deactive:hover .status-deduction{
  border-color: var(--bs-hover-color);
}
.status-attendanceIssue{
  height: 22px ;
  width: 22px;  
  border-radius: 50%;
  border: 4px solid var(--bs-white);
  background-color: var(--bs-danger);
}
.bg-deactive .status-attendanceIssue{
  border-color: var(--bs-deactive-color);
}
.bg-deactive:hover .status-attendanceIssue{
  border-color: var(--bs-hover-color);
}
.status-active{
    height: 14px ;
    width: 14px ;
    
    background-color: var(--bs-success);
  }
.status-activeCard{
  height: 22px ;
  width: 22px ;
  background-color: var(--bs-success);
  border-radius: 50%;
  border: 4px solid var(--bs-white);
}
.status-inactiveCard{
  height: 22px ;
  width: 22px ;
  background-color: var(--bs-danger);
  border-radius: 50%;
  border: 4px solid var(--bs-white);
}
.status-primary-loader{
  height: 22px ;
  width: 22px ;
  background-color: var(--bs-primary);
  border-radius: 50%;
  border: 4px solid var(--bs-white);
}
.position-on-image {
    position: absolute;
    margin-top: -8px;
    margin-left: -8px !important;
    margin-right: -8px;
}

  .status-inactive{
  
    height: 14px ;
    width: 14px ;
    background-color: var(--bs-danger);
  }
  .status-approved{
    height: 14px;
    width: 14px;
    background-color: var(--bs-success);
  }
  .status-pending{
    height: 14px;
    width: 14px;
    /* background-color: var(--bs-warning); */
  }
  .status-rejected{
    height: 14px;
    width: 14px;
    background-color: var(--bs-danger);
  }
  .status-forwarded{
    height: 14px;
    width: 14px;
    background-color: var(--bs-primary);
  }
  .status-paid{
    height: 14px;
    width: 14px;
    background-color: var(--bs-green);  
  }
  .status-Settled{
    height: 14px;
    width: 14px;
    background-color: var(--bs-navyBlue);  
  }
  .status-regularization-in{
    background-color: var(--bs-primary-light) !important;
    color: var(--bs-primary) !important;
  }
  .status-regularization-out{
    background-color: var(--bs-secondary-light) !important;
    color: var(--bs-secondary) !important;
  }
  
  .status-regularization-inAndOut{
    background-color: var(--bs-success-light) !important;
    color: var(--bs-success) !important;
  }
  
  .status-regularization-markAbsent{
    background-color: var(--bs-danger-light) !important;
    color: var(--bs-danger) !important;
  }
  
  .status-businessTrip-air{
    background-color: var(--bs-secondary-light) !important;
    color: var(--bs-secondary) !important;
  }
  .status-businessTrip-land{
    background-color: var(--bs-success-light) !important;
    color: var(--bs-success) !important;
  }
  
  .status-businessTrip-sea{
    background-color: var(--bs-primary-light) !important;
    color: var(--bs-primary) !important;
  }

  .status-latestNews-reportAddition{
    
    background-color: var(--bs-pink-light) !important;
    color: var(--bs-pink) !important;
  }

  .status-latestNews-featureAddition{
    
    background-color: var(--bs-green-light) !important;
    color: var(--bs-green) !important;
  }
  .status-latestNews-hrFeature{
    
    background-color: var(--bs-secondary-light) !important;
    color: var(--bs-secondary) !important;
  }
  .status-latestNews-updateSalary {
    
    background-color: var(--bs-success-light) !important;
    color: var(--bs-success) !important;
  }
  
  .status-latestNews-empSelfService {
    
    background-color: var(--bs-navyBlue-light) !important;
    color: var(--bs-navyBlue) !important;
  }
  
  .status-latestNews-ektNews {
    
    background-color: var(--bs-primary-light) !important;
    color: var(--bs-primary) !important;
  }
  
  .status-latestNews-system {
    
    background-color: var(--bs-warning-light) !important;
    color: var(--bs-warning) !important;
  }

  .status-deducted{
    height: 14px;
    width: 14px;
    background-color: var(--bs-danger) !important;
  }
  .status-notDeducted{
    height: 14px;
    width: 14px;
    background-color: var(--bs-primary) !important;
  }
  
  .status-exempted{
    background-color: var(--bs-pink-light) !important;
    color: var(--bs-pink) !important;
    font-size: 14px;
    cursor: help;
  }
  .status-workday{
    background-color: var(--bs-navyBlue-light) !important;
    color: var(--bs-navyBlue) !important;
    font-size: 14px;
    cursor: help;
  }
  .status-weekend{
    background-color: var(--bs-secondary-light) !important;
    color: var(--bs-secondary) !important;
    font-size: 14px;
    cursor: help;
  }



.status-latestNews-system {
  
  background-color: var(--bs-warning-light) !important;
  color: var(--bs-warning) !important;
}


.role-admin{
  background-color: var(--bs-purple-light) !important;
  color: var(--bs-purple) !important;
}

.role-manager{
  background-color: var(--bs-green-light) !important;
  color: var(--bs-green) !important;
}

.role-employee{
  background-color: var(--bs-navyBlue-light) ;
  color: var(--bs-navyBlue) ;
}
.select-employee{
  background-color: var(--bs-primary-light) !important;
  color: var(--bs-primary) !important;
}

.status-notactiveSalaryPackage{
  background-color: var(--bs-success-light);
  color: var(--bs-success);
}
.status-essPending{
  background-color: var(--bs-warning-light);
  color: var(--bs-warning);
}
.status-undefinedPayment{
  background-color: var(--bs-navyBlue-light);
  color: var(--bs-navyBlue);
}
.status-anotherPayrun{
  background-color: var(--bs-info-light);
  color: var(--bs-info);
}
.status-conflictSalary{
  background-color: var(--bs-purple-light);
  color: var(--bs-purple);
}
.status-deductionPlanties{
  background-color: var(--bs-orange-light);
  color: var(--bs-orange);
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Symbol  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
.riyal-symbol{
  height: 18px;
  width: 18px;
  margin-bottom: 4px;
}
.riyal-symbol-sm{
  height: 14px;
  width: 14px;
  margin-bottom: 2px;
}

.gosi-icon-symbol-sm{
  height: 28px;
  width: 28px;
}


/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Employee View Main Profile Image   xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
.card-profile-image{
  object-fit: cover; 
  width: 100% !important;
  height: 56px !important;
}
@media(max-width: 900px){
  .card-profile-image{
    object-fit: cover; 
    width: 96px !important;
    height: 96px !important;
  }
}

.card{
  color: var(--bs-sub-text-color) !important;

}
.main-profile-image{
  margin-top: -80px !important; 
  border: 6px solid var(--bs-bg-light) !important; 
  object-fit: cover; 
  object-position: center;
  border-radius: 26px !important;
  height: 164px;
  width: 164px;
  cursor: pointer;
  transition: all ease .5s;
}
.main-upload-image{
  margin-top: -80px !important; 
  border: 6px solid var(--bs-bg-light) !important; 
  object-fit: cover; 
  object-position: center;
  border-radius: 26px !important;
  height: 164px;
  width: 164px;
  opacity: 0;
  transition: all ease .5s;
}

#uploadMainImage:hover .main-profile-image{
  opacity: 0;
}

#uploadMainImage:hover .main-upload-image{
  opacity: 1;
  cursor: pointer;
}


.zero-border:hover .zero-border:hover 
.zero-border:focus-visible {
  outline: none;
  box-shadow: none;
  border: none;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Custom Scroll Bar  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
  
  .scrollable{
    /* height: 320px !important;  */
    overflow-y: scroll;
  }
  .scrollable::-webkit-scrollbar {
      width: 4px; /* Width of the vertical scrollbar */
      height: 4px; /* Height of the horizontal scrollbar */
  }
  .scrollable::-webkit-scrollbar-track {
    background: var(--bs-primary-light); /* Light gray background */
    border-radius: 0.375rem; /* Rounded corners for track */
  }
  .scrollable::-webkit-scrollbar-thumb {
    background: var(--bs-primary); /* Dark gray color */
    border-radius: 0.375rem; /* Rounded corners for thumb */
    transition: all ease 5s;
  }
  .scrollable::-webkit-scrollbar-thumb:hover {
    background: var(--bs-secondary); /* Darker gray when hovered */
  }
  .scrollable::-webkit-scrollbar-corner {
    background: #f1f1f1;
  }



.scroll-snap-container {
  scroll-snap-type: x mandatory !important;
  overflow-x: scroll; /* Allows scrolling */
  display: flex;
  -ms-overflow-style: none;  /* For Internet Explorer */
  scrollbar-width: none;     /* For Firefox */
}
.scroll-snap-column{
  scroll-snap-align: start !important;
}

.scroll-snap-container::-webkit-scrollbar {
    display: none;  /* For Chrome, Safari, and Edge */
}

.scroll-snap-container .badge {
    scroll-snap-align: start;
    flex-shrink: 0; /* Prevent shrinking of the badges */
}


/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Custom Width xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
.w-100px{
    width: 220px  !important;
}
.w-200px {
  width: 300px !important;
}
.w-0{
  width: 0% !important;
}
.w-5{
  width: 5% !important;
}
.w-10 {
    width: 10% !important;
}
  .w-20{
    width: 20% !important;
  }
  .w-30{
    width: 30% !important;
  }
  .w-40{
    width: 40% !important;
  }
.w-15 {
    width: 15% !important;
}  

.w-60{
    width: 60% !important;
  }
  .w-70{
    width: 70% !important;
  }
  .w-80{
    width: 80% !important;
  }
.w-85 {
  width: 85% !important;
}
@media (max-width: 999px) {
  .w-85 {
    width: 100% !important;
  }  
}
  .w-90{
    width: 90% !important;
  }

  .w-33{
    width: 33% !important;
  }

  .h-85{
    min-height: 85vh !important;
  }



  .size-24px{
    width: 24px;
    height: 24px;
  }
  
  .size-28px{
    width: 28px;
    height: 28px;
  }
  .size-44px{
    width: 44px;
    height: 44px;
  }
  .size-14px{
    width: 14px;
    height: 14px;   
  }




  .h-150px{
    height: 150px !important;
  }
  .h-175px{
    height: 175px !important;
  }




  .m-top-80px{
    margin-top: 80px !important;
  }
  .custom-margin-notes{
    margin-top: -68px; margin-bottom: 30px;
  }
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Dialog xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
dialog {
    padding: 20px;
    border: none;
    border-radius: 8px;
    width: 50%;
    max-width: 100%;
    background-color: var(--bs-wwhite) !important;
  }
  dialog::backdrop{
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
  }
  
  .stop-scroll{
    height: 100vh ;
    overflow-y: hidden;
  }
  
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Effect  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.effect-mine:hover .image-effect{
    filter: grayscale(0) !important;
    transform: scale(1.2);
  }
.effect-mine:hover hr{
color: var(--bs-primary) !important;
border-top: 3 solid;
opacity: 1;
width: 100% !important;

}
  hr {
    margin: 1rem 0;
    color: inherit;
    border: 0;
    border-top: var(--bs-border-width) solid;
    opacity: .25;
    transition:all ease 1s;
  }
  .image-effect{
    filter: grayscale(1) !important;
    transition: all ease 1s;
  }


  .bootstrap-datetimepicker-widget.dropdown-menu.usetwentyfour.top{
    inset: auto auto 184px 113.8px;
  }
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Border CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/


.fully-rounded{
    border-radius: 50px !important;
  }
  .rounded-comment{
    border-radius: 50% 50% 20% 50% !important;
  }

.border-primary-light{
  border-color: var(--bs-primary-light) !important;
}
.border-secondary-light{
  border-color: var(--bs-secondary-light) !important;
}
.border-info-light{
  border-color: var(--bs-info-light) !important;
}
.border-warning-light{
  border-color: var(--bs-warning-light) !important;
}
.border-danger-light{
  border-color: var(--bs-danger-light) !important;
}
.border-success-light{
  border-color: var(--bs-success-light) !important;
}
.border-orange-light{
  border-color: var(--bs-orange-light) !important;
}
.border-orange{
  border-color: var(--bs-orange) !important;
}
.border-green{
  border-color: var(--bs-green) !important;
}
.border-brown{
  border-color: var(--bs-brown) !important;
}
.border-purple{
  border-color: var(--bs-purple) !important;
}
.border-pink{
  border-color: var(--bs-pink) !important;
}
.border-navyBlue{
  border-color: var(--bs-navyBlue) !important;
}



.border-transparent{
  border-color: var(--bs-wwhite) !important;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Position for Checkbox CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/


.position-checkbox{
  margin: 1rem !important;
  right: 0 !important;
  top: 0 !important;
  position: absolute !important;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Carousel CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
.carousel-indicators [data-bs-target]{
  background-color: var(--bs-primary);
}
@media (max-width: 768px) {
    #pendingApprovals .carousel-inner .carousel-item>div {
          display: none;
      }
  
      #pendingApprovals .carousel-inner .carousel-item>div:first-child {
          display: block;
      }
  }
  
  #pendingApprovals .carousel-inner .carousel-item.active,
  #pendingApprovals .carousel-inner .carousel-item-start,
  #pendingApprovals .carousel-inner .carousel-item-next,
  #pendingApprovals .carousel-inner .carousel-item-prev {
      display: flex;
  }
  
  @media (min-width: 768px) {
  
      #pendingApprovals .carousel-inner .carousel-item-right.active,
      #pendingApprovals .carousel-inner .carousel-item-next,
      #pendingApprovals .carousel-item-next:not(.carousel-item-start) {
          transform: translateX(25%) !important;
      }
  
      #pendingApprovals .carousel-inner .carousel-item-left.active,
      #pendingApprovals .carousel-item-prev:not(.carousel-item-end),
      #pendingApprovals .active.carousel-item-start,
      #pendingApprovals .carousel-item-prev:not(.carousel-item-end) {
          transform: translateX(-25%) !important;
      }
  
      #pendingApprovals .carousel-item-next.carousel-item-start,
      #pendingApprovals .active.carousel-item-end {
          transform: translateX(0) !important;
      }
  
      #pendingApprovals .carousel-inner .carousel-item-prev,
      #pendingApprovals .carousel-item-prev:not(.carousel-item-end) {
          transform: translateX(-25%) !important;
      }
  }
  
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Top Bar CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
.height-adjust{
  max-height: 10vh;
}
.sticky-topbar{
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0vh;
    min-height: 10vh;
  }
  .position-sticky{
    position: sticky !important;
    position: -webkit-sticky !important;
  }
  
  /* Profile Dropdown Img */
  .profile-dropdown-img {
    width: 32px;
    height: 32px;
  }
  .profile-dropdown .btn-group .dropdown-menu-end {
    margin-right: -10px !important;
  }
  .my-profile-image{
    height: 240px;
    background-image: url('../images/Profile-Two.png');
    background-position: center;
    background-size: cover;
  }
  .height-8vh{
    min-height: 8vh;
  }
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Side Bar CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
.sticky-sidebar{
  position: -webkit-sticky !important;
  position: sticky !important;
  min-height: 92vh !important;
}

.top-6vh{
  top: 8vh !important;
}
.height-92vh {
    min-height: 92vh !important;
}
.brands-bar {
    margin-right: -80px;
    visibility: hidden;
    transition: all ease .5s;
}
.brands-button{
  margin-right: 0px;
  transition: all ease .5s !important;
  border-radius: 100% 0 0 100%/50% 0 0 50%;;
  height: 10vh;
  top: 45%;
  width: 40px;
  /* background-color: var(--bs-purple-light); */
  font-size: 20px;
  padding: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed ;
  border-right: 0px !important;
  /* color: var(--bs-purple); */
}


#ourBrandsBtnLeft{
  visibility: hidden;
  transition: all ease .5s !important;
}
#ourBrandsBtnRight{
  transition: all ease .5s !important;
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx NAV CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
.nav-link{
  color: var(--bs-primary) !important;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
    color: var(--bs-primary) !important;
    background-color: var(--bs-active-color) !important;
    /* border-radius: 0px !important; */
}
.nav-pills .nav-link:hover{
  color: var(--bs-primary);
    background-color: var(--bs-hover-color);
}
.nav .nav-text {
    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-font-weight: ;
    --bs-nav-link-color: var(--bs-link-color);
    --bs-nav-link-hover-color: var(--bs-link-hover-color);
    --bs-nav-link-disabled-color: var(--bs-secondary-color);
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
  }
  
.nav-pills {
    --bs-nav-pills-border-radius: var(--bs-border-radius);
    --bs-nav-pills-link-active-color: var(--bs-white);
    --bs-nav-pills-link-active-bg: var(--bs-primary) !important;
  }
nav.nav-pills .list-group-item{
border-right: 0px !important;
}
.nav-text {
    font-size: 16px !important;
  }
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx DropDown Menu CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--bs-primary) !important;
  }
.nav-dropdowns.dropdown-toggle:after {
    display: none !important;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Offcanvs CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

/* .offcanvas.offcanvas-start{
    right: 0px !important;
    left: auto !important;
    transform: translateX(100%) ;
  }     */
.offcanvas-backdrop{
    background-color: #ffffff17 !important;
    backdrop-filter: blur(4px);
    opacity: 1 !important;
  }
  .offcanvas.offcanvas-bottom{
    border-top: 0px !important;
    background-color: var(--bs-wwhite) !important;
    box-shadow: -4px 0px 33px 0px #00000034;
  }
  .bottom-canvas{
    min-height: 94vh; border-radius: 30px 30px 0px 0px;
  }
  .offcanvas-header .btn-close{
    margin: unset !important;
  }

  .bottom-canvas-footer{
    position: fixed;
    bottom: 0;
    width: 100% !important;
  }

  .bottom-canvas-header{border-bottom: 1px solid var(--bs-border-color);}
  .bottom-canvas-footer{border-top: 1px solid var(--bs-border-color);}

  .end-canvas{
    min-width: 30%; border-radius: 30px 0px 0px 30px;
  }

  .end-canvas-footer{
    position: fixed;
    bottom: 0;
    width: 100% !important;
  }

  .end-canvas-header{border-bottom: 1px solid var(--bs-border-color);}
  .end-canvas-footer{border-top: 1px solid var(--bs-border-color);}


/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Rating Input CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.rating {
    direction: rtl;
    unicode-bidi: bidi-override;
    display: inline-flex;
}

    .rating > input {
        display: none;
    }

    .rating > label {
        font-size: 2rem;
        color: #ccc;
        cursor: pointer;
        padding: 0 2px;
    }

        .rating > input:checked ~ label,
        .rating > label:hover,
        .rating > label:hover ~ label {
            color: #f5c518;
        }
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Animation CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.slide-bck-center:hover{-webkit-animation:slide-bck-center .45s cubic-bezier(.47,0.000,.745,.715) both;animation:slide-bck-center .45s cubic-bezier(.47,0.000,.745,.715) both}
@-webkit-keyframes slide-bck-center{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}100%{-webkit-transform:translateZ(-400px);transform:translateZ(-400px)}}@keyframes slide-bck-center{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}100%{-webkit-transform:translateZ(-400px);transform:translateZ(-400px)}}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Login Page CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
.login-bg{
  height: 100vh;
  background-color: var(--bs-primary-light);
  /* background-image: url('../images/bgbgbgb.jpg'); */
  background-size: cover;
}
.absolute-custom-height{
  height: 100vh;
}

.height-100vh{
  height: 100vh;
}
.otp-input {
  width: 60px;
  height: 60px;
  font-size: 1.5rem;
  border-radius: 0.5rem;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Hide arrows in Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
@media (max-width: 720px){
  .login-bg{
    background-image: none !important;
  }
  .absolute-custom-height{
    height: 60vh;
  }
}
.card.blur{
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(45px) !important;

}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx List CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
nav.nav-pills .list-group-item{
    border-right: 0px !important;
    }
.list-group-item.mail:hover {
    background-color: #309fce2a;
  }
@media (max-width: 1200px) {
    .list-group-item.tab-pill {
      text-wrap: nowrap !important;
  }
}
  
.list-group-item.active {
    z-index: 2;
    color: var(--bs-list-group-active-color) !important;
    background-color: var(--bs-active-color) !important;
    border-color: var(--bs-primary) !important;
}
.list-group-item.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
  }

  .list-group-item.sub-menu-item:hover,
  .list-group-item.main-menu-item:hover,
  .list-group-item.tab-pill:hover{
    background-color: var(--bs-hover-color) !important;
    
  }
  .list-group-item.sub-menu-item.active,
  .list-group-item.main-menu-item.active,
  .list-group-item.tab-pill.active{
    color: var(--bs-primary) !important;
    /* border-left: 2px solid var(--bs-primary) !important; */
    
  }
  
  .list-group-item.sub-menu-item::before,
  .list-group-item.main-menu-item::before, .list-group-item.tab-pill::before{
    position: absolute;
    content: "";
    left: 0%;
    top: 0;
    height: 0%;
    width: 4px;
    z-index: -1;
    background: #0181aa;
    border-radius: 0px;
    transition: .5s;
  }
  .list-group-item.sub-menu-item:hover:before,
  .list-group-item.main-menu-item:hover::before, .list-group-item.tab-pill:hover::before{
    position: absolute;
      content: "";
      left: 0%;
      top: 0;
      height: 100%;
      width: 4px;
      border-radius: 0px 10px 10px 0px  !important;
      z-index: 2;
      background: #0181aa;
  }
  .list-group-item.sub-menu-item.active:before,
  .list-group-item.main-menu-item.active::before, .list-group-item.tab-pill.active::before{
    position: absolute;
      content: "";
      left: 0%;
      top: 0;
      height: 100%;
      width: 4px;
      border-radius: 0px 10px 10px 0px  !important;
      z-index: 2;
      background: #0181aa;
      /* border-radius: 4px; */
  
    /* position: absolute; */
  }


  
.nav-link.custom-tab-button{
  position: relative !important;
  border-radius: 0px !important;
}
.nav-link.custom-tab-button.active{
  border-radius: 0px !important;
}
.nav-link.custom-tab-button.active:before{
  position: absolute;
  content: "";
  left: 30%;
  bottom: 0%;
  height: 4px;
  width: 40%;
  border-radius: 0.375rem 0.375rem 0rem 0rem  !important;
  z-index: 2;
  background: var(--bs-primary);
}

.nav-link.custom-tab-button:before{
  position: absolute;
  content: "";
  left: 50%;
  bottom: 0%;
  height: 4px;
  width: 0%;
  border-radius: 0.375rem 0.375rem 0rem 0rem  !important;
  z-index: 2;
  background: var(--bs-primary);
  transition: all ease .5s;
}

.nav-link.custom-tab-button:hover:before{
  position: absolute;
  content: "";
  left: 30%;
  bottom: 0%;
  height: 4px;
  width: 40%;
  border-radius: 0.375rem 0.375rem 0rem 0rem  !important;
  z-index: 2;
  background: var(--bs-primary);
}
/* Setting All */

.list-group-item{
  color: var(--bs-dark) !important;
}
  .list-group-item.settings-all{
    background-color: transparent !important;
    border-radius: 0.375rem !important;
    border: .5px solid var(--bs-border-color) !important;
  
  }
  .list-group-item.settings-all:hover{
    background-color: var(--bs-primary-light) !important;
    border: .5px solid var(--bs-primary-light) !important;
    border-radius: 0.375rem !important;
    transition: all ease .5s;
    color: var(--bs-primary);
  }
  .list-group-item.settings-all .settings-menu-icon{
    width: 48px;
    height: 48px;
    background-color: var(--bs-primary-light) !important;
    color: var(--bs-primary) !important;
    transition: all ease .5s;
  }
  .list-group-item.settings-all:hover .settings-menu-icon{
    background-color: var(--bs-primary) !important;
    color: var(--bs-primary-light) !important;
  }
  .list-group-item.settings-all:hover .list-group-item.settings-all .bg-primary-light{
    background-color: var(--bs-primary) !important;
    color: var(--bs-white) !important;
  }
  .list-group-item.settings-all::before{
    position: absolute;
    content: "";
    left: -1px;
    top: 10%;
    height: 80%;
    width: 0px;
    z-index: -1;
    background: var(--bs-primary-light);
    border-radius: 0rem 0rem 0rem 0rem;
    transition: all ease .5s;
  }
  .list-group-item.settings-all:hover::before{
    position: absolute;
    content: "";
    left: -1px;
    top: 10%;
    height: 80%;
    width: 6px;
    border-radius: 0rem 0.375rem 0.375rem 0rem  !important;
    z-index: 444;
    background: var(--bs-primary);
  }

   /* Employee Profile */
   .list-group-item.employee-profile{
    background-color: transparent !important;
    border-radius: 0.375rem !important;
    border: .5px solid var(--bs-secondary-light) !important;
  
  }
  .list-group-item.employee-profile:hover{
    background-color: var(--bs-primary-light) !important;
    border: .5px solid var(--bs-primary-light) !important;
    border-radius: 0.375rem !important;
    transition: all ease .5s;
    color: var(--bs-primary);
  }
  .list-group-item.employee-profile .settings-menu-icon{
    width: 48px;
    height: 48px;
    background-color: var(--bs-primary-light) !important;
    color: var(--bs-primary) !important;
    transition: all ease .5s;
  }
  .list-group-item.employee-profile:hover .settings-menu-icon{
    background-color: var(--bs-primary) !important;
    color: var(--bs-primary-light) !important;
  }
  .list-group-item.employee-profile:hover .list-group-item.employee-profile .bg-primary-light{
    background-color: var(--bs-primary) !important;
    color: var(--bs-white) !important;
  }
  .list-group-item.employee-profile::before{
    position: absolute;
    content: "";
    left: -1px;
    top: 10%;
    height: 80%;
    width: 0px;
    z-index: -1;
    background: var(--bs-primary-light);
    border-radius: 0rem 0rem 0rem 0rem;
    transition: all ease .5s;
  }
  .list-group-item.employee-profile:hover::before{
    position: absolute;
    content: "";
    left: -1px;
    top: 10%;
    height: 80%;
    width: 6px;
    border-radius: 0rem 0.375rem 0.375rem 0rem  !important;
    z-index: 444;
    background: var(--bs-primary);
  }





  /*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Dashborad Quick Actions xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
  
  .list-group-item.quick-actions{
    background-color: var(--bs-wwhite) !important;
    border-radius: 0.375rem !important;
    /* border: .5px solid var(--bs-border-color) !important; */
  
  }
  .list-group-item.quick-actions:hover{
    background-color: var(--bs-primary-light) !important;
    /* border: .5px solid var(--bs-primary-light) !important; */
    border-radius: 0.375rem !important;
    transition: all ease .5s;
    color: var(--bs-primary);
  }
  .list-group-item.quick-actions .settings-menu-icon{
    width: 48px;
    height: 48px;
    background-color: var(--bs-primary-light) !important;
    color: var(--bs-primary) !important;
    transition: all ease .5s;
  }
  .list-group-item.quick-actions:hover .settings-menu-icon{
    background-color: var(--bs-primary) !important;
    color: var(--bs-primary-light) !important;
  }
  .list-group-item.quick-actions:hover .list-group-item.quick-actions .bg-primary-light{
    background-color: var(--bs-primary) !important;
    color: var(--bs-white) !important;
  }
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Card CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.card {
    --bs-card-border-color: var(--bs-border-color) !important;
    height: var(--bs-card-height);
  }
  .card-header, .card-footer{
    background-color: transparent !important;
  }
  .pop-card-header{
    background-color: var(--bs-secondary-light) !important;
    color: var(--bs-dark) !important;
  }
  
  .card-form-container .card{
    min-height: 75px;
  }

.card-link:hover
.card{
  background-color: var(--bs-hover-color) !important;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Flaticon CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
i.fi {
    display: flex;
    align-items: center;
    line-height: 0.5rem;
    justify-content: center;
  }

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Logo CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
.full-logo {
    height: 40px;
    opacity: 0;
    visibility: hidden;
    transition: left 1s ease;
    position: absolute;
    left: -270px;
  }
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Accordion CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.accordion-button:not(.collapsed){
    background-color: var(--bs-white) !important;
}
.accordion-button:not(.collapsed), .accordion-button:focus{
  box-shadow: none !important;
}
#manage-companies .accordion-button{
  padding: 6px !important;
}
#manage-companies .accordion-button:not(.collapsed){
  background-color: var(--bs-primary-light) !important;
  color: var(--bs-primary);
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Chart CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
#employeeHeadcountChart, #ageGroupChart {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
}

/* Optional: If you have multiple charts, apply this globally */
.apexcharts-canvas {
  max-width: 100% !important;   /* Ensures charts don’t exceed container */
  max-height: 100% !important;  /* Prevents charts from overflowing vertically */
}

/* Prevent padding issues */
.apexcharts-legend {
  display: none; /* Optional: If the legend is causing overflow */
}
#chart-container {
    max-width: 100% !important;
    margin-top: -90px;
    margin-bottom: -56px;
    display: flex !important;
    justify-content: center !important;
    padding: 0px !important;
  }
  #chart-container rect {
    fill: rgba(0, 0, 0, 0) !important;
    padding: 0px !important;
  }
  #chart-container svg {
    display: flex !important;
    justify-content: start !important;
    padding: 0px !important;
  }
  
  .apexcharts-legend-series{
    min-width: 100px;
    background-color: var(--bs-primary-light);
    padding: 6px 12px ;
    border-radius: 0.375rem;
  }

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Search xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
  .search-hidden {
    visibility: hidden !important;
    position: absolute !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}
  
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Form CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
.form-select{
  color: var(--bs-dark) !important;
}
.form-label{
  color: var(--bg-dark) !important;
}
.form-main-label{
    color: var(--bs-primary);
    padding: 5px ;
    font-weight: 600;
}
.form-control:disabled, .form-select:disabled{
  background-color: var(--bs-secondary-light) !important;
  color: var(--bs-sub-text-color) !important;
}
.form-control, .form-select{
  color: var(--bg-dark) !important;
}
.form-div-label{
    z-index: 2;
    margin-bottom: -25px  !important;

}
.form-check-input:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}
.form-switch .form-check-input:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}
.form-switch .form-check-input{
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(220, 53, 69)'/%3e%3c/svg%3e");
  background-image: var(--bs-form-switch-bg);
  border-color: var(--bs-danger-bg-subtle) !important;

}
body.dark-only .form-switch .form-check-input {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(108, 117, 125)'/%3e%3c/svg%3e");

}
.form-control:focus, .form-select:focus{
    box-shadow: none !important;
    border-color: var(--bs-primary) !important;
}

textarea::placeholder, input::placeholder, select::placeholder{
  color: var(--bs-sub-text-color) !important;
}




/* Upload Image  */

.upload-icon-container {

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(0, 0, 0, 0.175);
    width: 170px;
    height: 170px;
    display: flex;
    justify-content: end;
    align-items: end;
    position: relative;
    cursor: pointer;
    padding: 10px;
    
  }
  .upload-cover-container {
/*    background-image: url('..//images/Branded-Laptop.webp') !important;*/
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(0, 0, 0, 0.175);
    width: 100%;
    height: 170px;
    display: flex;
    justify-content: end;
    align-items: end;
    position: relative;
    cursor: pointer;
    padding: 10px;
    
  }
  
  /* .upload-icon-container:hover .icon-upload{
    visibility: visible;
  }
  .upload-cover-container:hover .icon-upload{
    visibility: visible;
  } */
  
  .upload-icon-container  i {
    font-size: 24px;
    /* color: #6c757d; */
    /* visibility: hidden; */
  }
  
  .upload-cover-container i {
    font-size: 24px;
    /* color: #6c757d; */
    /* visibility: hidden; */
  }
  
  .file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }
  .selectCard .card-body{
    cursor: pointer;
  }
  /* .selectCard input[type="checkbox"]:checked + .card-body {
    background-color: var(--bs-active-color) !important;
  }
  .selectCard input[type="checkbox"]:checked + .card-body .abcd {
    border-color: var(--bs-primary) !important;
  }
  
  .selectCard input[type="radio"]:checked + .card-body {
    background-color: var(--bs-active-color) !important;
  }
  .selectCard input[type="radio"]:checked + .card-body .abcd {
    border-color: var(--bs-primary) !important;
  }
  
    .selectCard .card-body{
    cursor: pointer;
  }
  .selectCard input[type="checkbox"]:checked + .card-body {
    background-color: var(--bs-active-color) !important;
  }
  .selectCard input[type="checkbox"]:checked + .card-body .abcd {
    border-color: var(--bs-primary) !important;
  } */



  .deselectCard .card-body{
    cursor: pointer;
  }
  /* .deselectCard input[type="checkbox"]:checked + .card-body {
    background-color: var(--bs-deactive-color) !important;
  }
  .deselectCard input[type="checkbox"]:checked + .card-body .abcd {
    border-color: var(--bs-danger) !important;
  }
  
  .deselectCard input[type="radio"]:checked + .card-body {
    background-color: var(--bs-deactive-color) !important;
  }
  .deselectCard input[type="radio"]:checked + .card-body .abcd {
    border-color: var(--bs-danger) !important;
  }
  
    .deselectCard .card-body{
    cursor: pointer;
  }
  .deselectCard input[type="checkbox"]:checked + .card-body {
    background-color: var(--bs-deactive-color) !important;
  }
  .deselectCard input[type="checkbox"]:checked + .card-body .abcd {
    border-color: var(--bs-danger) !important;
  } */
  
  
  .overtimeFrom.form-select + span{
    width: 50% !important;
    /* margin-bottom: 1rem; */
  }
  .overtimeFrom.form-select + .select2-container--default .select2-selection--single{
   border-radius: auto !important;
  }
  .overtimeFrom.form-select +  .select2-container--default .select2-selection--single .select2-selection__arrow{
      visibility: hidden !important;
    }
    .select2-container--default .select2-selection--multiple,
    .select2-container--default .select2-search--dropdown .select2-search__field,
    .select2-container--default .select2-selection--single,
    .select2-dropdown{
      background-color: var(--bs-wwhite) !important;
      color: var(--bs-dark) !important;
      border: 1px solid var(--bs-border-color) !important;
    }
    .select2-container--default .select2-results__option--selected{
      background-color: var(--bs-primary) !important;
      color: var(--bs-dark) !important;
    }
    .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
      background-color: var(--bs-hover-color) !important;
      color: var(--bs-dark) !important;

    }
    .select2-container--default .select2-selection--single .select2-selection__rendered{
      color: var(--bg-dark) !important ;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice{
      background-color: var(--bs-hover-color) !important;
      color: var(--bs-dark) !important;
      border-color: var(--bs-hover-color) !important;
    }

    #personnelEmployeesSelectOccupationCode .select2-search__field::placeholder{
      display: none;
    }
    .selecting.card{
      background-color: transparent !important;
    }

    /* Check Box */
    .checkbox-position{
      position: absolute;
      margin-top: 1rem !important;
      margin-right: 1rem !important;
      margin: .25rem;
      right: 0;
      top: 0;
    }
    .checkbox-wrapper-30 .checkbox {
      --bg: var(--bs-primary-light);
      --brdr: var(--bs-border-color);
      --brdr-actv: var(--bs-primary);
      --brdr-hovr: var(--bs-border-color);
      --dur: calc((var(--size, 2)/2) * 0.6s);
      display: inline-block;
      width: calc(var(--size, 1) * 22px);
      position: relative;
    }
    .checkbox-wrapper-30 .checkbox:after {
      content: "";
      width: 100%;
      padding-top: 100%;
      display: block;
    }
    .checkbox-wrapper-30 .checkbox > * {
      position: absolute;
    }
    .checkbox-wrapper-30 .checkbox input {
      -webkit-appearance: none;
      -moz-appearance: none;
      -webkit-tap-highlight-color: transparent;
      cursor: pointer;
      background-color: var(--bg);
      border-radius: calc(var(--size, 1) * 4px);
      border: calc(var(--newBrdr, var(--size, 1)) * 1px) solid;
      color: var(--newBrdrClr, var(--brdr));
      outline: none;
      margin: 0;
      padding: 0;
      transition: all calc(var(--dur) / 3) linear;
    }
    .checkbox-wrapper-30 .checkbox input:hover,
    .checkbox-wrapper-30 .checkbox input:checked {
      --newBrdr: calc(var(--size, 1) * 2);
    }
    
    .checkbox-wrapper-30 .checkbox input:hover {
      --newBrdrClr: var(--brdr-hovr);
    }
    .checkbox-wrapper-30 .checkbox input:checked {
      --newBrdrClr: var(--brdr-actv);
      transition-delay: calc(var(--dur) /1.3);
    }
    .checkbox-wrapper-30 .checkbox input:checked + svg {
      --dashArray: 16 93;
      --dashOffset: 109;
    }
    .checkbox-wrapper-30 .checkbox svg {
      fill: none;
      left: 0;
      pointer-events: none;
      stroke: var(--bs-primary) !important;
      stroke-dasharray: var(--dashArray, 93);
      stroke-dashoffset: var(--dashOffset, 94);
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2px;
      top: 0;
      transition: stroke-dasharray var(--dur), stroke-dashoffset var(--dur);
    }
    .checkbox-wrapper-30 .checkbox svg,
    .checkbox-wrapper-30 .checkbox input {
      display: block;
      height: 100%;
      width: 100%;
    }


    /* for exclue */
    
    /* Check Box */
    .excludeexcludeCheckbox-wrapper-30 .checkbox {
      --bg: var(--bs-danger-light);
      --brdr: var(--bs-border-color);
      --brdr-actv: var(--bs-danger);
      --brdr-hovr: var(--bs-border-color);
      --dur: calc((var(--size, 2)/2) * 0.6s);
      display: inline-block;
      width: calc(var(--size, 1) * 22px);
      position: relative;
    }
    .excludeexcludeCheckbox-wrapper-30 .checkbox:after {
      content: "";
      width: 100%;
      padding-top: 100%;
      display: block;
    }
    .excludeexcludeCheckbox-wrapper-30 .checkbox > * {
      position: absolute;
    }
    .excludeexcludeCheckbox-wrapper-30 .checkbox input {
      -webkit-appearance: none;
      -moz-appearance: none;
      -webkit-tap-highlight-color: transparent;
      cursor: pointer;
      background-color: var(--bg);
      border-radius: calc(var(--size, 1) * 4px);
      border: calc(var(--newBrdr, var(--size, 1)) * 1px) solid;
      color: var(--newBrdrClr, var(--brdr));
      outline: none;
      margin: 0;
      padding: 0;
      transition: all calc(var(--dur) / 3) linear;
    }
    .excludeexcludeCheckbox-wrapper-30 .checkbox input:hover,
    .excludeexcludeCheckbox-wrapper-30 .checkbox input:checked {
      --newBrdr: calc(var(--size, 1) * 2);
    }
    
    .excludeexcludeCheckbox-wrapper-30 .checkbox input:hover {
      --newBrdrClr: var(--brdr-hovr);
    }
    .excludeexcludeCheckbox-wrapper-30 .checkbox input:checked {
      --newBrdrClr: var(--brdr-actv);
      transition-delay: calc(var(--dur) /1.3);
    }
    .excludeexcludeCheckbox-wrapper-30 .checkbox input:checked + svg {
      --dashArray: 206 93;
      --dashOffset: 109;
    }
    .excludeexcludeCheckbox-wrapper-30 .checkbox svg {
      fill: none;
      left: 0;
      pointer-events: none;
      stroke: var(--bs-danger) !important;
      stroke-dasharray: var(--dashArray, 93);
      stroke-dashoffset: var(--dashOffset, 94);
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 6px;
      top: 0;
      transition: stroke-dasharray var(--dur), stroke-dashoffset var(--dur);
    }
    .excludeexcludeCheckbox-wrapper-30 .checkbox svg,
    .excludeexcludeCheckbox-wrapper-30 .checkbox input {
      display: block;
      height: 100%;
      width: 100%;
    }

    .btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active{
      border-color: transparent !important;
    }
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Profile Image CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/


.profile-image {
    width: 200px;
    height: 200px;
    object-fit: cover;
  }
  
.profile-image{
    height: 80px !important;
    width: 80px !important;
    object-fit: contain !important;
    object-position: center;
    background-color: var(--bs-primary-light);
    border-radius: 0.375rem;
  }


/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Grid View Css xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
.gridContainer {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-template-rows: masonry;
}
.gridItem {
    margin-bottom: 0 !important;
    display: grid;
    grid-template-rows: 1fr auto;
    margin-bottom: 10px;
    break-inside: avoid;
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Calendar CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
  
/* Custom Styles */
.fc-view-harness.fc-view-harness-active{
  height: 934.815px !important;
}
table.fc-col-header{
  width: 100% !important;
}
.fc-daygrid-body.fc-daygrid-body-unbalanced{
  width: 100% !important;
}
table.fc-scrollgrid-sync-table{
  width: 100% !important; height: 889px !important;
}
.fc-theme-standard td, .fc-theme-standard th {
    border: 1px solid #e6e6e6 !important;
}
body.dark-only .fc-theme-standard td, .fc-theme-standard th{
  border: 1px solid #353232 !important;
}
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  text-align: center;
  /* padding: 15px; */
}

.calendar-day {
  padding: 20px ;
  cursor: pointer;
  background-color: var(--bs-warning-light);
  border: 1px solid var(--bs-warning-light) !important;
  border-radius: 5px;
}

.calendar-day.selected {
  background-color: var(--bs-warning);
  color: var(--bs-dark);
}

.calendar-day.disabled {
  background-color: var(--bs-danger-light);
  color: #ddd;
  cursor: not-allowed;
}

.calendar-day:hover:not(.disabled) {
  /* background-color: var(--bs-warning-light) !important; */
  border: 1px solid var(--bs-orange) !important;
}

.calendar-footer {
  text-align: center;
  padding: 10px;
  background-color: #f7f7f7;
}



/* Styling for the days of the week */
.calendar-days-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0px;
  text-align: center;

}


/* Additional styling for buttons */
.calendar-header .buttons button {
  background-color: #f1f1f1;
  border: none;
  border-radius: 50%;
  padding: 8px;
}








/* Schedule */
.scheduleCalendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  text-align: center;
}

.scheduleCalendar-day {
padding: 20px;
cursor: pointer;
background-color: var(--bs-warning-light);
border: 1px solid var(--bs-warning-light) !important;
border-radius: 5px;
min-width: 14.2857142857% !important;
}

.scheduleCalendar-day.selected {
background-color: var(--bs-warning);
color: var(--bs-dark);
}

.scheduleCalendar-day.disabled {
background-color: var(--bs-danger-light);
color: #ddd;
cursor: not-allowed;
border-color: var(--bs-danger-light) !important;
}

.scheduleCalendar-day:hover:not(.disabled) {
background-color: var(--bs-warning-light) !important;
border: 1px solid var(--bs-warning) !important;
}

.scheduleCalendar-day.drag-over {
background-color: #f1f1f1;
}

.scheduleCalendar-event {
/* margin: 5px;
padding: 5px;
background-color: var(--bs-primary-light) !important;
color: var(--bs-primary) !important;
border-radius: 5px;
cursor: pointer; */

}

.scheduleCalendar-event.dragging {
opacity: 0.5;
}
.eventsMine span{
  font-size: 14px !important;
  padding: 0.375rem 1.400rem  !important;
  margin-bottom: 8px;
}





/* Main calendar */

.fc .fc-scrollgrid-section {
  height: 1px;
  border-radius: 50px !important;

  .fc > td {
    height: 1px;
  border-radius: 50px !important;

  }

  .fc table {
    height: 1px;
  border-radius: 50px !important;

  }

}
#calendar table tbody td{
  border-width: 1px !important;
}
#calendar table thead{
  background-color: var(--bs-primary-light) !important;
  
}

.fc-scrollgrid.fc-scrollgrid-liquid thead{
  border-color: red !important;
}
.fc-scrollgrid-sync-inner {
  padding: .5rem 0rem .5rem 0rem;
}
.fc-col-header-cell.fc-day .fc-scrollgrid-sync-inner a{
  color: var(--bs-primary) !important;  
  font-family: "Cairo", sans-serif;
  font-weight: 400;
}
.fc .fc-daygrid-day-frame {
  min-height: 20px !important; /* Default is around 100px */
  padding: 2px;
}

.fc .fc-scrollgrid-section, .fc .fc-scrollgrid-section table, .fc .fc-scrollgrid-section>td{
  border-radius: .375rem !important;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx CK Editor CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
.cke_top,
.cke_contents,
.cke_bottom,
.select2-container--default .select2-selection--multiple {
  border-radius: 0.375rem !important;
  border: 1px solid var(--bs-border-color) !important;
}
.cke_chrome {
  border-top: 0px !important;
}
body.dark-only .cke_inner{
  background: transparent !important;
}
.drag-placeholder {
    user-select: none;
    cursor: grab;
}

.select2-container .select2-search--inline .select2-search__field{
  height: 22px !important;
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Pagination CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.pagination-btn:first-child{
    border-top-left-radius: .375rem !important;
    border-bottom-left-radius: .375rem !important;
}

.pagination-btn:last-child{
    border-top-right-radius: .375rem !important;
    border-bottom-right-radius: .375rem !important;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Table CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
.table-big{
      width: 100%;
    overflow-x: auto;

}
.table-big table thead tr th span{
  text-wrap: nowrap !important;
}
.table{
    --bs-table-bg: transparent !important;
    border-radius: 6px !important;
    overflow: auto !important;
}
.table thead {
    background-color: var(--bs-primary) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}
.table thead tr th {
    color: var(--bs-white) !important;

}
.table thead tr {
    border-width: 0px !important;

}
.table tbody tr:hover {
  background-color: var(--bs-hover-color) !important;
}

#profileTeam tbody tr:hover {
  background-color: var(--bs-white) !important;
  padding: 0px !important;
}

.table, thead, tbody,  td, th{
    border-width: 0px !important;
}
.table thead tr th:first-child {
    border-radius: 6px 0px 0px 6px  !important;
    border-width: 0px;
}
.table thead tr th:last-child {
    border-radius: 0px 6px 6px 0px  !important;
    border-width: 0px;
}
.table tr {
    border-color: var(--bs-border-color) !important;
    border-top: 1px solid;
    border-right: 1px solid;
    border-left: 1px solid;
    border-bottom: 1px solid;
    background-color: transparent !important;

}
.table>:not(caption)>*>*{
  color: var(--bg-dark) !important;
}
.table tbody::before{
    content: " " !important;
    min-height: 10px !important;
    display: block;
}
.table-striped>tbody>tr:nth-of-type(odd)>*{
    --bs-table-bg-type: transparent !important;
    --bs-table-color-type: var(--bs-dark) !important;
}
.table td .btn-warning-light {
    background-color: var(--bs-warning-bg-subtle);
    color: var(--bs-warning);
  }
  .btn-warning-light:hover {
background-color: var(--bs-warning);
color: var(--bs-dark);
}
.table td  .btn-primary-light {
    background-color: var(--bs-primary-light);
    color: var(--bs-primary);
  }
.table td  .btn-primary-light:hover {
    background-color: var(--bs-primary);
    color: var(--bs-light);
  }
  div.dt-container .dt-paging .dt-paging-button.current , div.dt-container .dt-paging .dt-paging-button.current:hover{
    color: inherit !important;
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;


  }
  body  div.dt-container .dt-paging .dt-paging-button.current , body div.dt-container .dt-paging .dt-paging-button.current:hover{
    color: white !important;
  }
  div.dt-container .dt-paging .dt-paging-button.current {
    color: white !important;
  }
  div.dt-container .dt-paging .dt-paging-button:first-child{
    border-top-left-radius: 0.375rem !important;
    border-bottom-left-radius: 0.375rem !important;

  }
  div.dt-container .dt-paging .dt-paging-button:last-child{
    border-top-right-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
  }
  div.dt-container .dt-paging .dt-paging-button{
    border: 0px solid var(--bs-border-color) !important;
    margin-left: 0px !important;
    border-radius: 0px !important;
    background-color: var(--bs-primary-light) !important;
    color: var(--bg-dark) !important;
  }
  div.dt-container .dt-paging .dt-paging-button:hover{
    background: var(--bs-primary) !important;
  }
  div.dt-container .dt-paging .dt-paging-button.disabled, div.dt-container .dt-paging .dt-paging-button.disabled:hover, div.dt-container .dt-paging .dt-paging-button.disabled:active{
    color: var(--bs-sub-text-color) !important;
  }
  button.dt-paging-button.disabled.first::before{
    color: var(--bg-primary) !important ;
  }
  .dt-search, .dt-length, .dt-info{
    display: none !important;
  }

div.dt-container div.dt-layout-row:first-child{
    margin: 0px !important;
  }
  #announcementTHead{
    display: none;
  }
  
  .in-the-end div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end{
    display: none !important;
  }

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Select2 CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
  /* Not Select 2 */
  /* Base styles for the .not-select2 */
  .not-select2 {
    display: inline-block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--bg-dark) !important;
    background-color: var(--bs-white);
    background-image: none;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: .375rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  }

  /* When the .not-select2 is focused (active state) */
  .not-select2:focus {
    border-color: var(--bs-primary);
    outline: 0;
    box-shadow: none;
  }

  /* Disabled state for .not-select2 */
  .not-select2:disabled {
    background-color: #e9ecef;
    opacity: 1;
  }

  /* When the .not-select2 is in the "valid" state (used for validation) */
  .not-select2.is-valid {
    border-color: #28a745;
    padding-right: calc(1.25em + .75rem);
  }

  /* When the .not-select2 is in the "invalid" state (used for validation) */
  .not-select2.is-invalid {
    border-color: #dc3545;
    padding-right: calc(1.25em + .75rem);
  }

  /* Additional styles for .not-select2 to prevent the dropdown icon from appearing on some browsers */
  .not-select2:not([size]):not([multiple]) {
    padding-right: 2.25rem;
  }

  /* Add a custom dropdown icon */
  .not-select2::after {
    content: url("../images/caret-down.png") !important; /* FontAwesome icon for dropdown arrow */
    font-family: uicons-regular-rounded !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    top: 50%;
    right: .75rem;
    transform: translateY(-50%);
    pointer-events: none;
  }

   /* Initially hide the .multiple div */
   .multiple {
    display: none;
    
    
 }
 .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple{
   --bs-form-select-bg-img: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e);
   display: flex !important;
   justify-content: space-between;
   width: 100%;
   padding: .275rem 0.75rem .275rem .75rem;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   color: var(--bs-body-color);
   background-color: var(--bs-body-bg);
   background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
   background-repeat: no-repeat;
   background-position: right .75rem center;
   background-size: 16px 12px;
   border: var(--bs-border-width) solid var(--bs-border-color) !important;
   border-radius: var(--bs-border-radius);
   transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 .select2-container--default .select2-selection--multiple{
   justify-content: start;
 }
 .select2-container .select2-selection--single{
   height: auto !important;
 }
 .select2-container .select2-selection--multiple{
   min-height: 42px !important;
 }
 .select2-container--default .select2-selection--single .select2-selection__arrow{
   position: relative !important;
 }

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Others CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
.tooltip{
  z-index: 9999999999999 !important;
}
.dropend {
    margin-bottom: 3px;
}
.stuck{
  position: sticky !important;
  top: 9vh !important;

}
.height-300px{
  min-height: 300px !important;
}
.files .dropdown-toggle::after {
    display: none !important;
  }

  .v-align-middle{
    vertical-align: middle !important;
  }
  
  .position-unset{
    position: unset !important;
  }
  .opacity-10{
    opacity: 0.10 !important;
  }
  .text-start{
    text-align: left !important;
  }
.action-buttons{
    margin-right: -210px;
    display: none;
  }
  a{
    color: var(--bs-dark) !important;
    text-decoration: none !important;
  }
  .link-underline-primary {
    /* color: var(--bg-dark) !important; */
    --bs-link-underline-opacity: 1;
    text-decoration: underline !important;
    -webkit-text-decoration-color: rgba(var(--bs-primary-rgb), var(--bs-link-underline-opacity)) !important;
    text-decoration-color: var(--bs-primary) !important;
}
  .link{
    color: var(--bs-primary) !important;
  }
  
  .link:hover{
    color: var(--bs-dark) !important;
  }

  /* Animation for rotating the icon */
@keyframes rotateIcon {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}
.btn-close {
  --bs-btn-close-color: var(--bg-dark) !important;
  color: var(--bg-dark) !important;
}
.resetLinkedMobileIcon.rotating {
  animation: rotateIcon 1s linear infinite;
}

.refreshApiDataIcon.rotating {
  animation: rotateIcon 1s linear infinite;
}

/* Class for check icon */
.resetLinkedMobileIcon.check-icon {
  content: "\f00c"; /* Unicode for check mark (if using FontAwesome or similar) */
  transform: none;
  animation: none;
}

.icon-images-size a img{
  height: 28px !important;
  width: 28px !important;
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Employees Page CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
  .position-admin{

    height: 14px ;
    width: 14px ;
    background-color: var(--bs-warning);
  }
  .position-manager{
  
    height: 14px ;
    width: 14px ;
    background-color: var(--bs-success);
  }
  .position-employee{
  
    height: 14px ;
    width: 14px ;
    background-color: var(--bs-primary);
  }
















/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx ContentChanger CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/* Work Excuse Page  */
.main-personnelWorkExcuse-content .personnelWorkExcuse-content,
.main-personnelWorkExcuse-add .personnelWorkExcuse-add,
.main-personnelWorkExcuse-edit .personnelWorkExcuse-edit{
  display: block;
}
.personnelWorkExcuse-content,
.personnelWorkExcuse-add,
.personnelWorkExcuse-edit{
display: none;
}
/* Login PaGE */

.main-loginPage-content .loginPage-content,
.main-loginPage-forget .loginPage-forget,
.main-loginPage-otp .loginPage-otp{
  display: block;
}
.loginPage-content,
.loginPage-forget,
.loginPage-otp{
  display: none;
}
    /*================================================== Sidebar CSS ==================================================*/
        /* WorkSpace Menu */
        .workspace-menu .workspace-menu-items{
            display: block;
          }
          .workspace-menu .communication-menu-items,
            .workspace-menu .reports-menu-items,
          .workspace-menu .attendance-menu-items,
          .workspace-menu .recruitment-menu-items,
          .workspace-menu .salary-menu-items,
          .workspace-menu .evaluation-menu-items,
          .workspace-menu .training-menu-items,
          .workspace-menu .configuration-menu-items,
          .workspace-menu .personnel-menu-items,
          .workspace-menu .support-menu-items{
            display: none;
          }

   
    /*================================================== Application All CSS ==================================================*/
    #cardContainer > div {
            display: none; /* Hide all cards initially */
        }
        
        .main-application-content .application-content,
        .main-application-add-new .application-add-new,
        .main-leaves-vacation-edit .leaves-vacation-edit,
        .main-application-history .application-history,
        .main-regularization-edit .regularization-edit,
        .main-employee-form-edit .employee-form-edit,
        .main-addition-edit .addition-edit,
        .main-overtime-edit .overtime-edit,
        .main-loan-edit .loan-edit,
        .main-end-of-service-edit .end-of-service-edit,
        .main-clb-edit .clb-edit,
        .main-training-course-edit .training-course-edit,
        .main-business-trip-edit .business-trip-edit,
        .main-salary-domicilation-edit .salary-domicilation-edit{
            display: block;
        }
        
        .application-content,
        .application-add-new,
        .leaves-vacation-edit,
        .application-history,
        .regularization-edit,
        .employee-form-edit,
        .addition-edit,
        .overtime-edit,
        .loan-edit,
        .end-of-service-edit,
        .clb-edit,
        .training-course-edit,
        .business-trip-edit,
        .salary-domicilation-edit{
            display: none;
        }

        /*================================================== Add New Application  CSS ==================================================*/
          .main-newApp-content .newApp-content,
          .main-newApp-leave .newApp-leave,
          .main-newApp-regularization .newApp-regularization,
          .main-newApp-employee .newApp-employee,
          .main-newApp-addition .newApp-addition,
          .main-newApp-overtime .newApp-overtime,
          .main-newApp-loans .newApp-loans,
          .main-newApp-end .newApp-end,
          .main-newApp-balance .newApp-balance,
          .main-newApp-training .newApp-training,
          .main-newApp-trips .newApp-trips,
          .main-newApp-domicilation .newApp-domicilation{
            display: block;
          }
          .newApp-content,
          .newApp-leave,
          .newApp-regularization,
          .newApp-employee,
          .newApp-addition,
          .newApp-overtime,
          .newApp-loans,
          .newApp-end,
          .newApp-balance,
          .newApp-training,
          .newApp-trips,
          .newApp-domicilation{
            display: none;
          }

          
  
    /*================================================== Pending Approvals  CSS ==================================================*/

        .main-approval-content .approval-content, 
        .main-approval-leavesVacation-action .approval-leavesVacation-action,
        .main-approval-regularization-action .approval-regularization-action,
        .main-approval-employeeForm-action .approval-employeeForm-action,
        .main-approval-addition-action .approval-addition-action,
        .main-approval-overtime-action .approval-overtime-action,
        .main-approval-loan-action .approval-loan-action,
        .main-approval-endOfService-action .approval-endOfService-action,
        .main-approval-clb-action .approval-clb-action,
        .main-approval-trainingCourse-action .approval-trainingCourse-action,
        .main-approval-businessTrip-action .approval-businessTrip-action,
        .main-approval-salaryDomicilation-action .approval-trainingCourse-action{
        display: block;
        }
        .approval-content,
        .approval-leavesVacation-action,
        .approval-regularization-action,
        .approval-employeeForm-action,
        .approval-addition-action,
        .approval-overtime-action,
        .approval-loan-action,
        .approval-endOfService-action,
        .approval-clb-action,
        .approval-trainingCourse-action,
        .approval-businessTrip-action,
        .approval-trainingCourse-action{
        display: none;
        }
    
    /*================================================== Internal Mail  CSS ==================================================*/
            /* inbox */
        .main-inbox-content .inbox-content,
        .main-inbox-compose .inbox-compose,
        .main-inbox-mail-view .inbox-mail-view{
            display: block;
        }
        .inbox-content,
        .inbox-compose,
        .inbox-mail-view{
            display: none;
        }

        /* Sent */
        .main-sent-content .sent-content,
        .main-sent-mail-view .sent-mail-view{
            display: block;
        }
        .sent-content,
        .sent-mail-view{
            display: none;
        }

        /* Group Mail */
        .main-group-content .group-content,
        .main-group-add .group-add,
        .main-group-mail-edit .group-mail-edit{
            display: block;
        }
        .group-content,
        .group-add,
        .group-mail-edit{
            display: none;
        }
    /*================================================== Evaluation Result  CSS ==================================================*/

        .main-evaluationResult-content .evaluationResult-content,
        .main-evaluationResult-detail .evaluationResult-detail{
        display: block;
        }
        
        .evaluationResult-content,
        .evaluationResult-detail{
        display: none;
        }
    /*================================================== Evaluation Assesment CSS ==================================================*/
        .main-evaluationAssesment-content .evaluationAssesment-content,
        .main-evaluationAssesment-add .evaluationAssesment-add,
        .main-evaluationAssesment-edit .evaluationAssesment-edit,
        .main-evaluationAssesment-view .evaluationAssesment-view{
        display: block;
        }
        .evaluationAssesment-content,
        .evaluationAssesment-add,
        .evaluationAssesment-edit,
        .evaluationAssesment-view{
        display: none;
        }
    
    /*================================================== Evaluation Template CSS ==================================================*/
        .main-evaluationTemplate-content .evaluationTemplate-content,
        .main-evaluationTemplate-add .evaluationTemplate-add,
        .main-evaluationTemplate-edit .evaluationTemplate-edit{
            display: block;
        }
        .evaluationTemplate-content,
        .evaluationTemplate-add,
        .evaluationTemplate-edit{
            display: none;
        }

    /*================================================== Manage Companies CSS ==================================================*/
        .main-manageCompanies-content .manageCompanies-content,
        .main-manageCompanies-add .manageCompanies-add,
        .main-manageCompanies-view .manageCompanies-view{
        display: block;
        }
        .manageCompanies-content,
        .manageCompanies-add,
        .manageCompanies-view{
        display: none;
        }

    /*================================================== Training Courses CSS ==================================================*/
        .main-courseManagement-content  .courseManagement-content,
        .main-courseManagement-add  .courseManagement-add,
        .main-courseManagement-edit .courseManagement-edit,
        .main-courseManagement-view .courseManagement-view{
        display: block;
        }
        .courseManagement-content,
        .courseManagement-add,
        .courseManagement-edit,
        .courseManagement-view{
        display: none;
        }


    /*================================================== System Privileges CSS ==================================================*/
        .main-configSystem-content .configSystem-content,
        .main-configSystem-add .configSystem-add,
        .main-configSystem-edit .configSystem-edit{
          display: block;
        }
        .configSystem-content,
        .configSystem-add,
        .configSystem-edit{
          display: none;
        }

    /*================================================== Personnel Schedule CSS ==================================================*/

        /* Schedules */
        .main-scheduleManagement-content .scheduleManagement-content,
        .main-scheduleManagement-create .scheduleManagement-create,
        .main-scheduleManagement-edit .scheduleManagement-edit,
        .main-scheduleManagement-assign .scheduleManagement-assign{
        display: block;
        }
        .scheduleManagement-content,
        .scheduleManagement-create,
        .scheduleManagement-edit,
        .scheduleManagement-assign{
        display: none;
        }

        /* Create New Schedule */
        .main-createNewShift-content .createNewShift-content, 
        .main-createNewShift-normal .createNewShift-normal, 
        .main-createNewShift-dual .createNewShift-dual, 
        .main-createNewShift-flexible .createNewShift-flexible, 
        .main-createNewShift-accessLimited .createNewShift-accessLimited, 
        .main-createNewShift-singleTimestamp .createNewShift-singleTimestamp{
        display: block;
        }
        .createNewShift-content,
        .createNewShift-normal,
        .createNewShift-dual,
        .createNewShift-flexible,
        .createNewShift-accessLimited,
        .createNewShift-singleTimestamp{
        display: none;
        }
        /* Create Normal Schedule  */
        .main-normalCreateNewShift-globalSetting .normalCreateNewShift-globalSetting, 
        .main-normalCreateNewShift-basicSetting .normalCreateNewShift-basicSetting, 
        .main-normalCreateNewShift-otherSettings .normalCreateNewShift-otherSettings, 
        .main-normalCreateNewShift-halfDay .normalCreateNewShift-halfDay, 
        .main-normalCreateNewShift-overtime .normalCreateNewShift-overtime{
        display: block;
        }
        .normalCreateNewShift-globalSetting,
        .normalCreateNewShift-basicSetting,
        .normalCreateNewShift-otherSettings,
        .normalCreateNewShift-halfDay,
        .normalCreateNewShift-overtime{
        display: none;
        }

        /* Human Resource Vacation Page  */
        .main-personnelVacation-content .personnelVacation-content,
        .main-personnelVacation-add .personnelVacation-add,
        .main-personnelVacation-edit .personnelVacation-edit{
        display: block;
        }
        .personnelVacation-content,
        .personnelVacation-add,
        .personnelVacation-edit{
        display: none;
        }
        /* Human Resource Regularization Page  */
        .main-personnelRegularization-content .personnelRegularization-content,
        .main-personnelRegularization-add .personnelRegularization-add,
        .main-personnelRegularization-edit .personnelRegularization-edit{
        display: block;
        }
        .personnelRegularization-content,
        .personnelRegularization-add,
        .personnelRegularization-edit{
        display: none;
        }
        
        /* Human Resource BusinessTrip Page  */
        .main-personnelBusinessTrip-content .personnelBusinessTrip-content,
        .main-personnelBusinessTrip-add .personnelBusinessTrip-add,
        .main-personnelBusinessTrip-edit .personnelBusinessTrip-edit{
        display: block;
        }
        .personnelBusinessTrip-content,
        .personnelBusinessTrip-add,
        .personnelBusinessTrip-edit{
        display: none;
        }
        /* Human Resource CompensatoryDay Page  */
        .main-personnelCompensatoryDay-content .personnelCompensatoryDay-content,
        .main-personnelCompensatoryDay-add .personnelCompensatoryDay-add,
        .main-personnelCompensatoryDay-edit .personnelCompensatoryDay-edit{
        display: block;
        }
        .personnelCompensatoryDay-content,
        .personnelCompensatoryDay-add,
        .personnelCompensatoryDay-edit{
        display: none;
        }

        /* Human Resource ElectronicForm Page  */
        .main-personnelElectronicForm-content .personnelElectronicForm-content,
        .main-personnelElectronicForm-add .personnelElectronicForm-add,
        .main-personnelElectronicForm-edit .personnelElectronicForm-edit{
        display: block;
        }
        .personnelElectronicForm-content,
        .personnelElectronicForm-add,
        .personnelElectronicForm-edit{
        display: none;
        }
        /* Human Resource SalaryDomicilation Page  */
        .main-personnelSalaryDomicilation-content .personnelSalaryDomicilation-content,
        .main-personnelSalaryDomicilation-add .personnelSalaryDomicilation-add,
        .main-personnelSalaryDomicilation-edit .personnelSalaryDomicilation-edit{
           display: block;
        }
        .personnelSalaryDomicilation-content,
        .personnelSalaryDomicilation-add,
        .personnelSalaryDomicilation-edit{
           display: none;
        }
         /* Human Resource endOfService Page  */
         .main-personnelendOfService-content .personnelendOfService-content,
         .main-personnelendOfService-add .personnelendOfService-add,
                  .main-personnelendOfService-historyView .personnelendOfService-historyView,
         .main-personnelendOfService-proceed .personnelendOfService-proceed{
         display: block;
         }
         .personnelendOfService-content,
         .personnelendOfService-add,
                  .personnelendOfService-historyView,
         .personnelendOfService-proceed{
         display: none;
         }
         /* Human resource Asset management */
         
         .main-personnelAssets-content .personnelAssets-content,
         .main-personnelAssets-add .personnelAssets-add,
         .main-personnelAssets-edit .personnelAssets-edit,
         .main-personnelAssets-view .personnelAssets-view,
         .main-personnelAssets-assign .personnelAssets-assign,
         .main-personnelAssets-return .personnelAssets-return{
          display: block;
         }
         .personnelAssets-content,
        .personnelAssets-add,
        .personnelAssets-edit,
        .personnelAssets-view,
        .personnelAssets-assign,
        .personnelAssets-return{
          display: none;
        }


    /*================================================== Personnel Empoyees Profile CSS ==================================================*/
        /* Employee Main Page */
        
        .main-personnelEmployees-content .personnelEmployees-content,
        .main-personnelEmployees-add .personnelEmployees-add,
        .main-personnelEmployees-view .personnelEmployees-view{
          display: block;
        }
        .personnelEmployees-content,
        .personnelEmployees-add,
        .personnelEmployees-view{
          display: none;
        }
        /* Employee View >  Documents */
        .main-employeeViewDocuments-content .employeeViewDocuments-content,
        .main-employeeViewDocuments-add .employeeViewDocuments-add{
          display: block;
        }

        .employeeViewDocuments-content,
        .employeeViewDocuments-add{
          display: none;
        }
        /* Personal Details > Profile Highlights > Dependents */
        .main-employeeViewDependents-content .employeeViewDependents-content,
        .main-employeeViewDependents-add .employeeViewDependents-add,
        .main-employeeViewDependents-edit .employeeViewDependents-edit{
          display: block;
        }

        .employeeViewDependents-content,
        .employeeViewDependents-add,
        .employeeViewDependents-edit{
          display: none;
        }
        /* Personal Details > Profile Highlights > Assets */
        
        .main-employeeViewAssets-content .employeeViewAssets-content,
        .main-employeeViewAssets-add .employeeViewAssets-add,
        .main-employeeViewAssets-return .employeeViewAssets-return{
          display: block;
        }
        .employeeViewAssets-content,
        .employeeViewAssets-add,
        .employeeViewAssets-return{
          display: none;
        }
        /* Personal Details > Profile Highlights > Voilations */
        .main-employeeViewVoilations-content .employeeViewVoilations-content,
        .main-employeeViewVoilations-add .employeeViewVoilations-add{
          display: block;
        }
        .employeeViewVoilations-content,
        .employeeViewVoilations-add  {
          display: none;
        }

        
        /* Main Tab Content */
        .main-tab-content .tab-content{
            display: block;
          }
          .main-tab-content .edit , .main-tab-content .view ,  .main-tab-content .second-edit {
            display: none;
          }
          
          
          /* Main Edit  */
          .main-edit .edit{
            display: block;
          }
          .main-edit .tab-content, .main-edit .view, .main-edit .second-edit{
            display: none;
          }
          
          
          /* Main View */
          .main-view .view{
            display: block;
          }
          .main-view .tab-content , .main-view .edit , .main-view .second-edit{
            display: none;
          }
          
          /* Main Second Edit */
          .main-second-edit .second-edit{
            display: block;
          }
          .main-second-edit .tab-content , .main-second-edit .edit , .main-second-edit .view{
            display: none;
          }
          

    /*================================================== Attendance Biometric CSS ==================================================*/
/* Hide by default */
.attendenceBiometric-content,
.attendenceBiometric-transfer,
.attendenceBiometric-view {
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Show the active one with animation */
.main-attendenceBiometric-content .attendenceBiometric-content,
.main-attendenceBiometric-transfer .attendenceBiometric-transfer,
.main-attendenceBiometric-view .attendenceBiometric-view {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
    /*================================================== Attendance Update  CSS ==================================================*/
    .main-attendanceUpdate-content .attendanceUpdate-content,
    .main-attendanceUpdate-update .attendanceUpdate-update,
    .main-attendanceUpdate-bulkAction .attendanceUpdate-bulkAction{
      display: block;
    }
    .attendanceUpdate-content, .attendanceUpdate-bulkAction, .attendanceUpdate-update{
      display: none;
    }

    /*================================================== Attendance Update  CSS ==================================================*/
    .main-attendanceTimestamp-content .attendanceTimestamp-content,
    .main-attendanceTimestamp-export .attendanceTimestamp-export{
      display: block;
    }
    .attendanceTimestamp-content,
    .attendanceTimestamp-export{
      display: none;
    }

    /*================================================== Salary Loans CSS ==================================================*/
    .main-salaryLoans-content .salaryLoans-content,
    .main-salaryLoans-add .salaryLoans-add,
    .main-salaryLoans-upload .salaryLoans-upload,
    .main-salaryLoans-view .salaryLoans-view,
    .main-salaryLoans-pay .salaryLoans-pay{
      display: block;
    }
    .salaryLoans-content,
    .salaryLoans-add,
    .salaryLoans-upload,
    .salaryLoans-view,
    .salaryLoans-pay{
      display: none;
    }

    
    /*================================================== Salary Overtime CSS ==================================================*/
    .main-salaryOvertime-content .salaryOvertime-content,
    .main-salaryOvertime-add .salaryOvertime-add,
    .main-salaryOvertime-view .salaryOvertime-view{
      display: block;
    }
    .salaryOvertime-content,
    .salaryOvertime-add,
    .salaryOvertime-view{
      display: none;
    }

     /*================================================== Salary Addition CSS ==================================================*/
     .main-salaryAddition-content .salaryAddition-content,
     .main-salaryAddition-add .salaryAddition-add,
     .main-salaryAddition-upload .salaryAddition-upload,
     .main-salaryAddition-settled .salaryAddition-settled{
       display: block;
     }
     .salaryAddition-content,
     .salaryAddition-add,
     .salaryAddition-upload,
     .salaryAddition-settled{
       display: none;
     }

      /*================================================== Salary Deduction CSS ==================================================*/
      .main-salaryDeduction-content .salaryDeduction-content,
      .main-salaryDeduction-add .salaryDeduction-add,
      .main-salaryDeduction-upload .salaryDeduction-upload,
      .main-salaryDeduction-settled .salaryDeduction-settled{
        display: block;
      }
      .salaryDeduction-content,
      .salaryDeduction-add,
      .salaryDeduction-upload,
      .salaryDeduction-settled{
        display: none;
      }


      /*================================================== Reports CSS ==================================================*/
      .main-reports-content .reports-content,
      .main-reports-teamReport .reports-teamReport{
        display: block;
      }
      .reports-content,
      .reports-teamReport{
        display: none;
      }

      /*================================================== Reports CSS ==================================================*/
      .main-salaryArrears-content .salaryArrears-content ,
      .main-salaryArrears-settle .salaryArrears-settle {
        display: block;
      }
      .salaryArrears-content,
      .salaryArrears-settle{
        display: none;
      }
      
  .list-group-item.reports-all{
    background-color: transparent !important;
    border-radius: 0.375rem !important;
    border: .5px solid var(--bs-border-color) !important;
  
  }
  .list-group-item.reports-all:hover{
    background-color: var(--bs-primary-light) !important;
    border: .5px solid var(--bs-primary-light) !important;
    border-radius: 0.375rem !important;
    transition: all ease .5s;
    color: var(--bs-primary);
  }
  .list-group-item.reports-all .reports-menu-icon{

    background-color: var(--bs-primary-light) !important;
    color: var(--bs-primary) !important;
    transition: all ease .5s;
    border-radius: 0.375rem;
  }
  .list-group-item.reports-all:hover .reports-menu-icon{
    background-color: var(--bs-primary) !important;
    color: var(--bs-primary-light) !important;
  }
  .list-group-item.reports-all:hover .list-group-item.reports-all .bg-primary-light{
    background-color: var(--bs-primary) !important;
    color: var(--bs-white) !important;
  }
  .list-group-item.reports-all::before{
    position: absolute;
    content: "";
    left: 10%;
    top: 0px;
    height: 0px;
    width: 80%;
    z-index: -1;
    background: var(--bs-hover-color);
    border-radius: 0rem 0rem 0rem 0rem;
    transition: all ease 1s;
  }
  .list-group-item.reports-all:hover::before{
    position: absolute;
    content: "";
    left: 10%;
    top: 0px;
    height: 8px;
    width: 80%;
    border-radius: 0rem 0rem 0.375rem 0.375rem  !important;
    z-index: 0 !important;
    background: var(--bs-primary);
  }
  .reportsCard{
    min-height: 180px !important;
  }

      /*================================================== Support Helpdesk CSS ==================================================*/
      .main-supportHelpdesk-content .supportHelpdesk-content,
      .main-supportHelpdesk-add .supportHelpdesk-add,
      .main-supportHelpdesk-view .supportHelpdesk-view{
        display: block;
      }
      .supportHelpdesk-content,
      .supportHelpdesk-add,
      .supportHelpdesk-view{
        display: none;
      }


      /*================================================== Payroll CSS ==================================================*/ 
      .main-salaryPayroll-content .salaryPayroll-content,
      .main-salaryPayroll-add .salaryPayroll-add,
      .main-salaryPayroll-action .salaryPayroll-action{
        display: block;
      }
      .salaryPayroll-content,
      .salaryPayroll-add,
      .salaryPayroll-action{
        display: none;
      }

      /* Bulk Operation */
      .main-bulkOperation-content .bulkOperation-content,
      .main-bulkOperation-field .bulkOperation-field,
      .main-bulkOperation-upload .bulkOperation-upload,
      .main-bulkOperation-update .bulkOperation-update
      {
        display: block;
      }
      .bulkOperation-content,
      .bulkOperation-upload,
      .bulkOperation-update
      {
        display: none; 
      }



.pwd_msg {
    position: absolute;
    bottom: -10px;
    right: 0;
    left: auto;
    width: 280px;
    padding: 15px;
    background: #fefefe;
    font-size: .875em;
    border-radius: 5px;
    box-shadow: 0 1px 3px #ccc;
    border: 1px solid #ddd;
}

#pswdinfo_en.pwd_msg {
    right: auto;
    left: 0;
}

.pwd_msg ul {
    margin-bottom: 0;
    list-style: none;
    padding: 0;
}

    .pwd_msg ul li.invalid:before {
        content: 'x';
        padding-right: 10px;
    }

    .pwd_msg ul li.valid:before {
        content: '✓';
        padding-right: 10px;
    }

.pwd_msg h4 {
    margin: 0 0 10px 0;
    padding: 0;
    font-weight: normal;
    font-size: 11px;
}

.pwd_msg::before {
    content: "\25B2";
    position: absolute;
    top: -12px;
    left: 45%;
    font-size: 14px;
    line-height: 14px;
    color: #ddd;
    text-shadow: none;
    display: block;
}

.pwd_msg .invalid {
    line-height: 18px;
    color: #ec3f41;
}

.pwd_msg .valid {
    line-height: 18px;
    color: #3a7d34;
}

.pwd_msg.bottom_emp_new {
    bottom: -82px
}

.pwd_msg.bottom_emp_view {
    bottom: -117px;
}

.pwd_msg.bottom_my_profile {
    bottom: -102px;
}

.printablelogo {
    max-width: 120px !important;
}

.form-switch .form-check-input {
    margin-left: -2.5rem;
}
.form-check .form-check-input {
    float: left !important;
}
@media (min-width: 1400px) {
    .col-xxl-2.main-width {
        flex: 0 0 auto;
        width: 20%;
    }
}
@media (min-width: 1400px) {
    .col-xxl-10.main-width {
        flex: 0 0 auto;
        width: 80%;
    }
}