@import "notification-preferences.css";
@import "human-resources.css";

:root.theme-azure-light.no-navigation {
  --bs-body-bg-rgb: 255,255,255;
  --bs-body-bg: #fff;
}

.s-PermissionCheckEditor {
  min-height: 450px;
}

.s-TranslationGrid input.custom-text {
  width: 100%;
}

.xp-financial-trends-charts {
  height: 175px;
}

.circle-text {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.tab-content {
  height: calc(100% - 50px);
}

  .tab-content > .tab-pane > .s-DataGrid {
    border-top: none;
  }

.dashboard-header .dropdown-menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: 400;
  line-height: 1.42857143;
  color: #333;
  white-space: nowrap;
}

.dashboard-header .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 90px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.dashboard-header .open > .dropdown-menu {
  display: block;
}

/*Remove text decoration*/
.dashboard-header a {
  text-decoration: none;
}


.s-dashboard-card-sm h3 {
  font-size: x-large !important;
}

.s-dashboard-card-sm .icon {
  font-size: 34px !important;
}

.container-slider {
  position: relative;
  overflow: hidden;
}

.full-height-container {
  height: calc(100vh - 55px);
}

.overflow-container {
  white-space: nowrap;
  padding-left: 30px;
  padding-right: 30px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* For smooth scrolling on iOS */
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

.left {
  left: 0;
}

.right {
  right: 0;
}

.swal-button-scheduling {
  /* Style for the sticky header */
  width: 200px;
}

#toast-container.toast-top-full-width > div,
#toast-container.toast-bottom-full-width > div {
  width: 100%;
  margin-left: 55px;
}

section.content {
  padding: 0.5rem 1rem;
}

@media (min-width: 768px) {
  section.content {
    min-height: calc(100vh - 88px);
  }

  .full-height-page section.content {
    height: calc(100vh - 88px);
  }
}

@media (min-width: 1200px) {
  section.content {
    min-height: calc(100vh - 40px);
  }

  .full-height-page section.content {
    height: calc(100vh - 40px);
  }
}

.s-UserPermissionDialog > .size,
.s-RolePermissionDialog > .size,
.s-UserRoleDialog > .size {
  min-width: 770px;
  width: 770px;
  min-height: 550px;
  height: 550px;
}

.s-ShowTransPayrollHoursPwfTempDialog > .size,
.s-ShowTransPayrollAllowancesPwfTempDialog > .size,
.s-ShowTransPayrollDeductionsPwfTempDialog > .size {
  min-width: 480px;
  width: 480px;
}

.s-ShowTransPayrollHoursPwfTempDialog .modal-lg,
.s-ShowTransPayrollAllowancesPwfTempDialog .modal-lg,
.s-ShowTransPayrollDeductionsPwfTempDialog .modal-lg {
  min-width: 520px;
  width: 520px;
}

.s-HoursExcelImportDialog .modal-lg {
  min-width: 400px;
  width: 400px;
}

.s-ShowTransPayrollHoursPwfTempDialog .s-QuickSearchBar,
.s-ShowTransPayrollAllowancesPwfTempDialog .s-QuickSearchBar,
.s-ShowTransPayrollDeductionsPwfTempDialog .s-QuickSearchBar {
  min-width: 470px;
  width: 470px;
}

  .s-ShowTransPayrollHoursPwfTempDialog .s-QuickSearchBar .select2-container,
  .s-ShowTransPayrollAllowancesPwfTempDialog .s-QuickSearchBar .select2-container,
  .s-ShowTransPayrollDeductionsPwfTempDialog .s-QuickSearchBar .select2-container {
    min-width: 250px;
    width: 250px;
  }

.s-XPHR-Leave-ShowLeavePayDialog .modal-content {
  width: 500px;
}

.xp-bulk-employee-name {
  width: 350px !important;
}

.s-UserPermissionDialog .s-DataGrid,
.s-RolePermissionDialog .s-DataGrid,
.s-UserRoleDialog .s-DataGrid {
  height: 100%;
}

.s-XPHR-Employee-EmployeeDialog > .size {
  width: 1550px;
  min-height: 680px;
}

/*Gid Header Text*/
.slick-header-column,
.slick-group-header-column {
  color: #ffffff;
  /* color: #abe8fd*/
}

/*Grid Header Background*/
.slick-header {
  border-bottom: 2px solid #319beb;
  /* background-color: #3272f1;*/
  color: white;
  /*background-color: var(--s-sidebar-band-bg);*/
  /*background-color: #005fb1;*/
  /*background-color: #0089ff;*/
}

/*Dialog Title Color and Background*/
.ui-dialog-titlebar {
  color: #fff;
  /*background-color: #0089ff;*/
  /*background-color: #3272f1;*/
  background-color: var(--s-sidebar-band-bg);
}

/*Dialog Close Button Color*/
ui-dialog-titlebar .ui-button,
.ui-dialog-titlebar-close {
  color: #fff;
}

/*Modal Dialog Overlay*/
.ui-widget-overlay {
  opacity: 0.8;
  background-color: black;
}

.editor .slick-header {
  border-bottom: 2px solid #319beb;
  /*  color: white;*/
  /*background-color: #aaaeb7;*/
}

.s-XPHR-Employee-EmployeeDialog .grid-container {
  min-height: 400px;
}

.inplace-action-view-pay-profile {
  width: calc(var(--s-input-inner-height) + 180px) !important;
}

.inplace-action-add-to-devices {
  width: calc(var(--s-input-inner-height) + 170px) !important;
}


#XPHR_Employee_EmployeeDialog15_Picture .tool-buttons {
  margin-bottom: 0px !important;
}

#XPHR_Employee_EmployeeDialog15_Picture .file-item {
  width: 280px !important;
  height: 200px
}

  #XPHR_Employee_EmployeeDialog15_Picture .file-item .thumb {
    width: 280px !important;
    height: 200px;
    background-size: cover;
  }


/* Style for the sticky header */
.content-header-sticky {
  background-color: #f8f9fa;
  padding: 0px;
  /* Set initial positioning */
  position: sticky;
  top: 0;
  /* Add a z-index to ensure it appears above the content */
  z-index: 10;
  background-color: var(--s-input-bg);
  border-color: var(--bs-border-color);
  border-width: 1px;
  border-style: solid;
  height: 40px;
  display: flex;
  justify-content: space-between;
  /* Horizontally space items */
  align-items: center;
  /* Vertically center items */
}

/* Container for vertical centering */
.centered-container {
  display: flex;
  justify-content: center;
  /* Horizontally center content */
  align-items: center;
  /* Vertically center content */
  height: 100%;
  /* Occupy full height of the parent */
}


/* Style for the centered text within the sticky header */
.centered-text {
  text-align: center;
  font-size: 1rem;
  /* Adjust the font size as needed */
  font-weight: normal;
  color: grey;
  font-family: Arial;
}

/* Define the header's behavior when it becomes sticky */
.sticky {
  /* Add any styles you want for the sticky header */
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.content-header-sticky .content-right {
  display: flex;
  margin-right: 0.25rem;
  font-size: 1rem;
  font-weight: normal;
  color: grey;
  font-family: Arial;
}

.content-header-sticky .content-left {
  margin-left: 1.25rem;
  font-weight: normal;
  color: grey;
  font-family: Arial;
}

/* Style for the notification icons */
.notification-icon {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  /* Relative positioning for the badge */
  margin-right: 5px;
}

  /* Style for the badge with item count */
  .notification-icon .badge {
    color: #ffffff;
    /* Text color for the badge */
    padding: 2px 5px;
    /* Adjust badge padding */
    border-radius: 50%;
    /* Make the badge circular */
    margin-top: -5px;
    /* Adjust the margin to cover the icon slightly */
    position: absolute;
    /* Absolute positioning for the badge */
  }

/* Style for the green badge (calendar) */
.green-badge {
  background-color: #4CAF50;
  /* Green color for calendar */
}

/* Style for the orange badge (bell) */
.orange-badge {
  background-color: #FFA500;
  /* Orange color for bell */
}

/* Style for the red badge (flag) */
.red-badge {
  background-color: #FF0000;
  /* Red color for flag */
}



/* Add a class to the main element to set a margin top
   equivalent to the height of the sticky header when it's sticky */
.s-main.sticky {
  margin-top: 50px;
  /* Adjust this value as needed */
}





/* CSS for the pullout panel */
.notification-panel {
  position: fixed;
  top: 40px;
  right: -300px;
  /* Initially hidden to the right */
  width: 300px;
  height: 100%;
  background-color: #fff;
  border-left: 1px solid #ddd;
  z-index: 100000000;
  transition: right 0.3s ease;
}

  .notification-panel.open {
    right: 0;
    /* Show the panel by moving it to the right */
  }

.notification-panel-content {
  padding: 20px;
}


.s-sidebar-pane {
  padding-top: 0px;
}

/*Tardiness*/

#s2id_XPHR_TimeAttendance_TardinessGrid0_QuickFilter_pID {
  min-width: 370px;
}

#s2id_XPHR_Payrolls_PayslipDebitsGrid12_QuickFilter_PayrollId {
  min-width: 300px
}

#s2id_XPHR_Payrolls_PayslipCreditsGrid0_QuickFilter_PayrollId {
  min-width: 300px
}

.css_header_checkin {
  background-color: orange !important;
}

.css_header_checkout {
  background-color: red !important;
}

.view-container {
  flex: 1 1 auto;
}

.select2-offscreen {
  left: 0px !important;
  top: 0px !important;
}

:root.theme-azure-light {
  --s-input-border: rgba(0, 0, 0, 0.1);
}

#contextMenu li {
  padding: 2px;
}

  #contextMenu li:hover {
    background-color: #f0f0f0;
  }

  #contextMenu li a i {
    margin-right: 2px;
  }

  #contextMenu li + li {
    border-top: 1px solid #ccc
  }

.s-site-logo-img {
  content: url(../site/images/xp-logo.png);
}

.s-horizontal-divider {
  padding: 1em;
  display: flex;
  flex-direction: row;
  align-items: center;
}

  .s-horizontal-divider:before,
  .s-horizontal-divider:after {
    content: " ";
    display: inline-block;
    flex: 1 1 50%;
    height: 0px;
    line-height: 0;
    border-top: 1px solid #a3a3a3;
    border-bottom: 1px solid #d7d7d7;
  }

  .s-horizontal-divider > span {
    padding: 0 1rem;
  }

.profile-picture-placeholder {
  width: 150px; /* Adjust the width and height as needed */
  height: 150px;
  border-radius: 50%; /* Make the container a circle */
  overflow: hidden; /* Clip the image to fit within the circle */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0; /* Optional: Background color for the circle */
}

.user-profile-picture {
  width: 175%; /* Make the image fill the circle container */
  height: auto;
}

.xp-employee-profile-header {
  margin-bottom: 0;
  font-weight: normal; /* Optionally, add font-weight:bold; for bold text */
  /* Add any other custom styles as needed */
}

.jumbotron {
  margin-bottom: 20px
}

.xp-profile-jumbotron {
  position: relative; /* Make it relatively positioned */
  border: 1px solid #c9d0da; /* Dark grey border */
  border-radius: 10px; /* Rounded corners */
  padding: 20px 10px 10px 10px; /* Add some padding to the jumbotron */
}

.corner-text {
  position: absolute;
  top: -15px; /* Adjust as needed to position the text */
  left: 15px; /* Adjust as needed to position the text */
  background-color: #343a40; /* Dark grey background */
  color: white; /* White text color */
  padding: 5px 10px; /* Add padding to the text */
  border-radius: 5px; /* Rounded corners */
}

/*#GridDivLoanSummary, #GridDivVariableScope, #GridDivPayrollTasks, #GridDivEmployeeNotes {
  min-height: 450px;
  height: 450px;
}*/

#GridDivLoanSummary .ui-widget-content a,
#GridDivVariableScope .ui-widget-content a,
#GridDivPayrollTasks .ui-widget-content a,
#GridDivEmployeeNotes .ui-widget-content a,
#GridDivEmployeeTaxAdjustments .ui-widget-content a {
  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
  text-decoration: underline;
}



#XPHR_Company_CompanyInformationDialog4_EmailList .grid-container,
#XPHR_Company_CompanyInformationDialog4_BankList .grid-container,
#XPHR_Company_CompanyInformationDialog4_TaxList .grid-container {
  min-height: 450px;
  height: 450px;
}

.dt-search {
  float: right;
}

#xp-report-wrapper .dt-lenght {
  float: left;
}

.dt-buttons {
  float: left;
}

.paging_full_numbers {
  float: right;
}

.dt-info {
  float: left;
}

/*Scheduler*/
.scheduler_default_rowheader, .scheduler_default_corner {
  font-family: 'Arial Black', 'Impact', sans-serif; /* Use strong, clear fonts */
  /* font-family: 'Helvetica Neue', 'Arial', sans-serif; */ /* Use slim, clear fonts */
  font-weight: normal; /* Make the text bold */
  font-size: 12px; /* Increase the font size */
  color: var(--bs-navbar-brand-color) !important /*#000*/; /* Set the text color */
  text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3), 0 0 1px rgba(255, 255, 255, 0.1); /* Add a subtle shadow */
  letter-spacing: 0.0px; /* Slightly increase the spacing between letters */
  background: var(--bs-body-bg) /*#f8f9fa*/ !important;
}

.scheduler_default_timeheadergroup, .scheduler_default_timeheadercol {
  font-family: 'Arial Black', 'Impact', sans-serif; /* Use strong, clear fonts */
  font-weight: bold; /* Make the text bold */
  font-size: 12px; /* Increase the font size */
  color: var(--bs-navbar-brand-color) !important /*#000*/; /* Set the text color */
  text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3), 0 0 1px rgba(255, 255, 255, 0.1); /* Add a subtle shadow */
  letter-spacing: 0.0px; /* Slightly increase the spacing between letters */
  background: var(--bs-body-bg) /*#f8f9fa*/ !important;
}

.scheduler_default_rowheader_inner {
  padding: 4px !important;
  /* display: flex; */
  align-items: center;
}

.scheduler_default_event_inner {
  position: absolute;
  inset: 0px;
  padding: 2px;
  overflow: hidden;
  border: 1px solid orange !important;
  display: flex;
  align-items: center;
}

.task-name {
  margin-top: 0px;
  text-align: center !important;
}

/* File Explorer */
.file-explorer-panel {
  border: 1px solid var(--s-card-border);
  flex: 1 1 auto;
  background-color: var(--s-card-bg);
}

.file-explorer-folder-tree {
  background-color: var(--s-card-bg);
  border-right: 1px solid var(--s-card-border);
  padding: 5px;
}

  .file-explorer-folder-tree ul {
    margin-left: 0;
    padding-left: 0;
  }

  .file-explorer-folder-tree li ul {
    padding-left: 20px;
    display: none;
  }

  .file-explorer-folder-tree li.expanded > ul {
    display: block;
  }

.file-explorer-folder {
  list-style: none;
}

  .file-explorer-folder .folder-name {
    display: block;
    padding: 4px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    color: #005fa2;
  }

  .file-explorer-folder.active > .folder-name {
    background: #9aebff;
  }

  .file-explorer-folder .folder-icon {
    margin-right: 4px;
    color: darkorange;
  }

@media (min-width: 767px) {
  .file-explorer-panel {
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }

  .file-explorer-folder-tree {
    flex: 0 0 250px;
  }
}

.file-explorer-tiles-view {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 10px;
  align-content: flex-start;
  background-color: rgba(0, 0, 0, 0.02);
}

.file-explorer-tile {
  background-color: var(--s-card-bg);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  cursor: move;
  padding: 8px;
  height: 175px;
  overflow: hidden;
  margin: 6px;
  position: relative;
  width: calc(100% - 12px);
}

@media (min-width: 968px) {
  .file-explorer-tile {
    width: calc(50% - 12px);
  }
}

@media (min-width: 1200px) {
  .file-explorer-tile {
    width: calc(25% - 12px);
  }
}

@media (min-width: 1540px) {
  .file-explorer-tile {
    width: calc(16.66% - 12px);
  }
}

@media (min-width: 1800px) {
  .file-explorer-tile {
    width: calc(12.5% - 12px);
  }
}

.file-explorer-tile .file-icon {
  text-align: center;
  margin: 12px 0;
  cursor: pointer;
}

.file-explorer-tile .file-icon-font {
  font-size: 52px;
  color: #333;
}

.file-explorer-tile .file-icon-thumb {
  display: flex;
  width: 72px;
  height: 52px;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  justify-content: center;
  color: #333;
}

  .file-explorer-tile .file-icon-thumb img {
    max-width: 96px;
    max-height: 52px;
  }


.file-explorer-tile .file-icon-font.fa-folder {
  color: orange;
}

.file-explorer-tile .file-icon-font.fa-file-excel {
  color: green;
}

.file-explorer-tile .file-icon-font.fa-file-word {
  color: #3580d0;
}

.file-explorer-tile .file-icon-font.fa-file-pdf {
  color: indianred;
}

.file-explorer-tile .file-icon-font.fa-file-image {
  color: rebeccapurple;
}

.file-explorer-tile .file-icon-font.fa-file-text {
  color: navy;
}

.file-explorer-tile .file-name,
.file-explorer-tile .file-date {
  overflow: hidden;
  padding: 4px 2px;
  text-align: center;
  text-overflow: ellipsis;
}

.file-explorer-tile .file-name {
  white-space: normal;
  word-break: break-all;
  height: 4.5em;
  -webkit-line-clamp: 3;
}

  .file-explorer-tile .file-name a {
    text-decoration: none;
  }

.file-explorer-tile .file-date {
  border-top: 1px solid #eee;
  color: #666;
  font-size: 11px;
  white-space: nowrap;
}

.file-explorer-tile .file-actions {
  cursor: pointer;
  position: absolute;
  right: 5px;
  top: 0px;
}

  .file-explorer-tile .file-actions > button {
    border: 0;
    font-size: 20px;
    opacity: 0.2;
    padding: 0;
  }

    .file-explorer-tile .file-actions > button:hover {
      opacity: 1;
    }

    .file-explorer-tile .file-actions > button::after {
      display: none;
    }


/*Pinned Tabs Start*/
.content-center-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0 10px;
}

.pinned-tabs-container {
  display: flex;
  align-items: center;
}

.btn-pin {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  margin-right: 5px;
  cursor: pointer;
  font-size: 1.2rem;
}

.pinned-tabs {
  display: flex;
  align-items: center;
}

.pinned-tab {
  display: inline-block;
  background-color: #6c757d;
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
  cursor: pointer;
  text-align: center;
  line-height: 30px;
  position: relative;
  text-decoration: none;
}

  /*.pinned-tab:hover::after {
    content: attr(data-label);
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    background-color: black;
    color: white;
    padding: 5px;
    border-radius: 5px;
    white-space: nowrap;
    z-index: 10;*/ /* Ensure tooltip is above other elements */
  /*}*/

  .pinned-tab[data-color="1"] {
    background-color: #ff6f61;
  }

  .pinned-tab[data-color="2"] {
    background-color: #6b5b95;
  }

  .pinned-tab[data-color="3"] {
    background-color: #88b04b;
  }

  .pinned-tab[data-color="4"] {
    background-color: #f7cac9;
  }

  .pinned-tab[data-color="5"] {
    background-color: #92a8d1;
  }

  .pinned-tab[data-color="6"] {
    background-color: #f4a460;
  }

  .pinned-tab[data-color="7"] {
    background-color: #d4af37;
  }

  .pinned-tab[data-color="8"] {
    background-color: #ffb6c1;
  }

  .pinned-tab[data-color="9"] {
    background-color: #4682b4;
  }

  .pinned-tab[data-color="10"] {
    background-color: #3cb371;
  }

.remove-tab {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: red;
  color: white;
  border: none;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  font-size: 10px;
  cursor: pointer;
  display: none;
}

.pinned-tab:hover .remove-tab {
  display: block;
}


/*Pinned Tabs End*/

@media (max-width: 768px) {
  .content-header-sticky .content-left,
  .content-header-sticky .content-center-left,
  .content-header-sticky .centered-container,
  .content-header-sticky .content-center-right,
  .content-header-sticky .content-right {
    display: none;
  }
}


/*Fix Theme Clash JQuery*/
.editor .ui-widget-content a {
  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
}

.s-XPHR-EmployeeSelfService-TaskStatusReportEditor {
  min-height: 350px;
}

.s-Panel button.ui-datepicker-trigger,
.s-Form button.ui-datepicker-trigger {
  background-color: transparent;
  color: buttontext;
  /* border: none; */
  /* padding: 10px 20px; */
  /* font-size: 17px; */
  /* font-family: 'Open Sans', sans-serif; */
  /* cursor: pointer; */
}


/*Zoom body to 90%*/
body {
}

/*Override the padding on the theme*/
main.s-main {
  top: 0;
}

.xp-body {
  padding: 0.25rem;
  background-color: var(--bs-body-bg);
}

.content .xp-body {
  min-height: calc(100vh - 50px);
}

.s-XPHR-Employee-CardViewGrid, .full_hgt {
  zoom: 90% !important;
}

#payrollEmployeesList {
  min-height: 290px;
  width: 100%;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', 'Arial', 'sans-serif';
  font-size: 15px;
}

.s-PayrollWorkFlow .pwfTitle {
  display: flex;
  align-items: center;
  padding: 0.3em 1em; /* Adjust padding as needed for the inset effect */
  color: #96999c;
  font-size: 0.8em; /* Compress the font to take less space */
  font-family: 'Arial Narrow', Arial, sans-serif; /* Use a narrow font family */
  margin: 0 1em 0em 0em; /* Add some margin to create the inset effect */
  border: 1px solid #ccc; /* Add a border for better visibility */
  border-radius: 4px; /* Add border radius for rounded corners */
  position: relative;
}

  .s-PayrollWorkFlow .pwfTitle::before {
    content: 'Payroll WorkFlow:';
    background-color: #ccc;
    color: #747e86;
    font-weight: 600;
    vertical-align: middle;
    padding: 5px;
    margin-right: 10px;
    display: inline-block;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    width: 157px; /* Adjust width as needed */
    height: 100%;
    position: absolute;
    left: 0px; /* Adjust position as needed */
    top: 0;
    bottom: 0;
    z-index: 1;
  }

.s-PayrollWorkFlow .pwfTitle-lable {
  margin-left: -15px; /* Adjust to accommodate the pseudo-element */
  color: #747e86;
  font-weight: 600;
  z-index: 3;
}

.s-PayrollWorkFlow .pwfTitle-text2 {
  margin-left: 160px;
}

.s-PayrollWorkFlow .pwfTitle-emp {
  display: flex;
  align-items: center;
  padding: 0.3em 1em; /* Adjust padding as needed for the inset effect */
  font-size: 0.8em; /* Compress the font to take less space */
  font-family: 'Arial Narrow', Arial, sans-serif; /* Use a narrow font family */
  color: #96999c;
  margin: 0 0em; /* Add some margin to create the inset effect */
  border: 1px solid #ccc; /* Add a border for better visibility */
  border-radius: 4px; /* Add border radius for rounded corners */
  position: relative;
  /*min-width: 500px;*/
}

  .s-PayrollWorkFlow .pwfTitle-emp::before {
    content: 'Selected Employee:';
    background-color: #ccc;
    color: #747e86;
    font-weight: 600;
    vertical-align: middle;
    padding: 5px;
    margin-right: 10px;
    display: inline-block;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    width: 170px; /* Adjust width as needed */
    height: 100%;
    position: absolute;
    left: 0px; /* Adjust position as needed */
    top: 0;
    bottom: 0;
    z-index: 1;
  }

.s-PayrollWorkFlow .pwfTitle-lable-emp {
  margin-left: 150px; /* Adjust to accommodate the pseudo-element */
  color: #747e86;
  font-weight: 600;
  z-index: 3;
}

.s-PayrollWorkFlow .pwfTitle-text2-emp {
  margin-left: 10px;
}

.payrollEmployeesList .pwfTitle {
  /* Specific styles for pwfTitle within payrollEmployeesList, if needed */
}

button.dt-button, div.dt-button, a.dt-button, input.dt-button {
  color: white !important;
  background-color: var(--bs-gray-600) !important;
  background: var(--bs-gray-600) !important;
  border: 1px solid 1px white;
}


.jstree-default .jstree-anchor, .jstree-default .jstree-wholerow {
  /* transition: background-color .15s,box-shadow .15s; */
}

/*.jstree-anchor, .jstree-anchor:link, .jstree-anchor:visited, .jstree-anchor:hover, .jstree-anchor:active {
  text-decoration: none;*/
/* color: inherit; */
/*}

.jstree-anchor {
  display: inline-block;
  color: var(--bs-dark-text-emphasis) !important;
  white-space: nowrap;
  padding: 0 4px 0 1px;
  margin: 0;
  vertical-align: top;
}

.jstree-anchor a {
  color: red !important;
  background-color: red !important;
}*/
:root {
  --xp-link-hover-color: #007bff;
  --xp-light-text-emphasis: #ffffff;
  --xp-leave-balance-key-bg: #f0f0f0;
  --xp-leave-balance-key-border: #f0f0f0;
}

[data-bs-theme="dark"] {
  --xp-link-hover-color: #1a73e8;
  --xp-light-text-emphasis: #000000;
  /*Light Grey --xp-leave-balance-key*/
  --xp-leave-balance-key-bg: var(--bs-body-bg);
  --xp-leave-balance-key-border: #bfb8b8;
}

.jstree-default .jstree-clicked {
  background: var(--xp-link-hover-color) !important;
  color: var(--xp-light-text-emphasis) !important;
  border-radius: 2px;
  box-shadow: inset 0 0 1px #999;
}

  .jstree-default .jstree-clicked:hover,
  .jstree-default .jstree-clicked:focus {
    background: var(--xp-link-hover-color) !important;
    color: var(--xp-light-text-emphasis) !important;
    text-decoration: none;
  }

.jstree-default a:hover,
.jstree-default a:focus {
  color: var(--xp-link-hover-color) !important;
  text-decoration: none;
}

.jstree-default a {
  color: red;
  text-decoration: none;
}

a.jstree-clicked:hover,
a.jstree-clicked:focus {
  color: var(--xp-light-text-emphasis) !important;
  background: var(--xp-link-hover-color) !important;
}

/* Sidebar */
.s-sidebar-link {
  padding: 0.225rem 0.75rem 0.225rem 1rem;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
}

.s-RangeEditor span {
  position: absolute;
  padding: 5px;
}

.s-RangeEditor input[type="range"] {
  margin-top: 5px;
}

.s-RangeEditor1 span {
  position: absolute;
  padding: 5px;
}

.s-RangeEditor1 input[type="range"] {
  margin-top: 5px;
}

.s-CheckboxQuickFilterEditor {
  display: flex;
  justify-content: center; /* Horizontally center */
  align-items: center; /* Vertically center */
}

  .s-CheckboxQuickFilterEditor input[type="checkbox"] {
    margin: auto;
  }

.s-XPHR-Finance-TransactionsGrid .quick-filter-item:nth-child(1) {
  display: inline-block;
  margin: 0px 45px 12px 0px;
  line-height: 1.5rem;
}


.s-XPHR-HR-Recruitment-VacancyRequirementEditor {
  margin-left: 155px;
}

.s-XPHR-HR-Recruitment-VacancyBenefitEditor {
  margin-left: 75px
}

.cke_top {
  background: var(--bs-body-bg) !important;
}

.cke_reset_all {
  color: var(--s-input-text) !important;
}

#s2id_XPHR_Tax_TaxRuleGrid0_QuickFilter_RuleId,
#s2id_XPHR_Tax_TaxableHoursPairsGrid0_QuickFilter_HoursTypeId,
#s2id_XPHR_Tax_TaxableHoursPairsGrid0_QuickFilter_TaxRuleCodeId {
  min-width: 325px;
}

#s2id_XPHR_Tax_TaxRuleGrid0_QuickFilter_RuleCountryId,
#s2id_XPHR_Tax_TaxRuleCodeGrid0_QuickFilter_TaxCountryId {
  min-width: 200px;
}

.s-XPHR-SalesOrder-SalesOrderScheduleDialog .s-DateEditor {
  min-width: 130px;
}

.s-XPHR-SaleseOrder-InvoiceDialog .field[id$="_Tab0"] .caption {
  width: 100px;
}

.s-XPHR-SaleseOrder-InvoiceDialog .xp-custom-label-width,
.s-XPHR-SaleseOrder-SalesOrderDialog .xp-custom-label-width,
.s-XPHR-PurchaseOrder-PurchaseOrderDialog .xp-custom-label-width,
.s-XPHR-PurchaseOrder-BillDialog .xp-custom-label-width,
.s-XPHR-PointOfSale-PosOrderDialog .xp-custom-label-width {
  width: 115px
}


.s-XPHR-Payrolls-PayrollDataDialog .xp-custom-label-width {
  width: 150px
}

.s-XPHR-Payrolls-PayrollDataGrid .xp-custom-label-width {
  width: 130px
}

.s-SubdomainDialog .xp-custom-label-width {
  width: 170px
}

.xp-invoice-template .row {
  --bs-gutter-x: 0rem;
}

.text-bg-purple {
  background-color: #6f42c1; /* Bootstrap's purple */
  color: white; /* Adjust text color for contrast */
}

.text-bg-orange {
  background-color: #fd7e14; /* Bootstrap's orange */
  color: white; /* Adjust text color for contrast */
}

.text-bg-light-blue {
  background-color: #5bc0de; /* Light Blue */
  color: white; /* Adjust text color for contrast */
}

.text-bg-light-danger {
  background-color: #f25a5a; /* Light Red */
  color: white; /* Dark text for better readability */
}

.text-bg-light-success {
  background-color: #c3e6cb; /* Light Green */
  color: black; /* Dark text for better readability */
}

.text-bg-light-warning {
  background-color: #ffeeba; /* Light Yellow */
  color: black; /* Dark text for better readability */
}


/* Browser window height between 900px and 1000px */
@media only screen and (max-height: 1000px) and (min-height: 901px) {
  .s-sidebar-band-link {
    /*height: 1.75em;*/
    height: 1.45em;
    font-size: 2.1rem;
  }
}

/* Browser window height between 801px and 900px */
@media only screen and (max-height: 900px) and (min-height: 801px) {
  .s-sidebar-band-link {
    height: 1.4em;
    font-size: 1.8rem;
  }
}

/* Browser window height between 701px and 800px */
@media only screen and (max-height: 800px) and (min-height: 701px) {
  .s-sidebar-band-link {
    height: 1.3em;
    font-size: 1.55rem;
  }
}

/* Browser window height between 601px and 700px */
@media only screen and (max-height: 700px) and (min-height: 601px) {
  .s-sidebar-band-link {
    height: 1.3em;
    font-size: 1.45rem;
  }
}

/* Browser window height 600px or less */
@media only screen and (max-height: 600px) {
  .s-sidebar-band-link {
    height: 1.2em;
    font-size: 1.25rem;
  }
}


/*    color: var(--bs-body-color);*/
.slick-header-column, .slick-group-header-column {
  position: relative;
  display: flex;
  overflow: hidden;
  line-height: 26px;
  float: left;
  font-weight: 500;
  color: var(--bs-body-color);
}

.add-button,
.save-and-close-button {
  background-color: #FF9800;
}

  .add-button .button-inner .text-green,
  .save-and-close-button .button-inner .text-purple {
    /* color: var(--bs-body-color) !important;*/
    color: white !important;
  }

.tool-group .add-button,
.tool-group .save-and-close-button,
.tool-group-like {
  flex-wrap: wrap;
  border-radius: var(--bs-border-radius);
  /* color: var(--bs-body-color);*/
  color: white !important;
  /* margin-right: var(--s-col-gap);*/
  row-gap: var(--s-row-gap);
}


.s-sidebar-band li.active:not(:has(ul)),
.s-sidebar-menu li.active:not(:has(ul)) {
  background-color: #2196f3 !important;
  border-radius: 10px !important;
  border: 1px solid blue !important;
  color: white !important;
}

.s-sidebar-menu li.active:has(ul) {
  /*color: white !important;*/
}


.s-sidebar-pane li.active:not(.has-children) > .s-sidebar-link {
  color: #ffffff;
  background-color: #2196f3 !important;
  border-radius: 10px !important;
  border: 1px solid blue !important;
}


.active > .s-sidebar-link > .s-sidebar-icon {
  /*color: var(--s-sidebar-icon-active);*/
  color: #ffffff;
}

.create-invoice-button,
.add-payment-button {
  color: #fff !important;
  background-color: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important;
}

.add-payment-button {
  color: #fff !important;
  background-color: #008000c2 !important;
}

.add-credit-note-button {
  color: #fff !important;
  background-color: RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important;
}

  .create-invoice-button .button-inner > i,
  .add-payment-button .button-inner > i,
  .add-credit-note-button .button-inner > i {
    color: white;
  }





.s-mobile-footer {
  background-color: var(--s-sidebar-band-bg);
  border-top: 1px solid var(--s-card-border);
  border: none;
  height: 50px !important;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: flex-start;
  padding: 10px 0; /* Padding for comfortable spacing */
  z-index: 1050; /* To make sure it appears above other content */
}

.s-mobile-footer-actions {
  list-style: none;
}

.s-mobile-footer-link {
  display: inline-flex; /* Ensure icon and text alignment */
  flex-direction: column; /* Stack the icon and text vertically */
  align-items: center; /* Center-align the items */
  width: 100%;
  text-decoration: none;
}

.s-mobile-footer-text {
  display: block; /* Make sure text is forced onto a new line */
  margin-top: 5px; /* Space between icon and text */
  font-size: 0.75rem; /* Smaller text size for the label */
}


.s-mobile-footer-link {
  color: #fff; /* White color for better contrast */
}

  .s-mobile-footer-link:hover {
    color: #aaa; /* Slightly lighter color on hover */
  }

/* Offset the content at the bottom only on mobile devices (up to `md` breakpoint) */
@media (max-width: 767.98px) {
  .s-mobile-footer-offset {
    margin-bottom: 50px; /* Apply offset only for mobile screens */
  }

  section.content {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 98px);
    margin-bottom: 50px;
  }

  section.content {
    padding: 0.5rem 0.5rem;
  }

  .content-header-sticky {
    display: none !important;
  }

  /* Offset the dropdown to ensure it's within screen boundaries */
  .dropdown-adjust {
    right: -20px; /* Shift the dropdown 10 pixels to the left of the anchor point */
    transform: translateX(-50%);
    position: absolute; /* Make sure it's absolutely positioned */
    min-width: 150px; /* Ensure there's enough room */
    z-index: 1050; /* Keep it above other elements */
  }

  /* Offset the dropdown to ensure it's within screen boundaries */
  .dropdown-adjust-addl {
    right: -20px; /* Shift the dropdown 10 pixels to the left of the anchor point */
    transform: translateX(-80%);
    /* Increase spacing on the dropdown items to improve user experience on mobile */
    /*.dropdown-item {
    padding: 10px 20px;*/ /* Add some padding for touch-friendly UI */
    /*font-size: 16px;*/ /* Adjust the font size for readability */
    /*}*/
    /* Optional: Improve icon spacing */
    /*.dropdown-item i {
      margin-right: 10px;*/ /* Add spacing between icon and text */
    /*}*/
  }

  .display-5 {
    font-size: calc(1.125rem + 2.1vw);
    font-weight: 300;
    line-height: 1;
    text-align: center
  }

  .lead {
    font-size: 1rem;
    font-weight: 300;
  }
}

@media (max-width: 768px) {
  /* Ensure the entire container is block-level and adapts to 100% width of mobile screen */
  .xp-mobile-table .grid-canvas {
    width: 100% !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    padding: 0 0px;
    box-sizing: border-box;
  }

  .xp-mobile-table .slick-viewport {
    width: 100% !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    padding: 0 0px;
    margin-bottom: 25px;
    height: calc(100vh - 100px) !important;
  }

  .xp-mobile-table .slick-container {
    width: 100% !important;
    height: calc(100vh - 200px) !important;
    overflow-y: hidden !important;
    /*overflow-x: visible !important;*/
    padding: 0 0px;
    box-sizing: border-box;
  }




  .xp-mobile-table .slick-header {
    display: none !important; /* Hide header on mobile view */
  }

  .xp-mobile-table .s-Serenity-SlickPager {
    position: fixed;
    right: auto;
    bottom: 51px;
    left: auto;
    width: 100%
  }

  /* Hide the paging buttons*/
  .xp-mobile-table .slick-pg-in > div:nth-child(-n+5) {
    display: none;
  }

  .xp-mobile-table .slick-pg-grp:last-child {
    order: 1;
    margin-left: unset;
    margin-right: var(--s-col-gap);
  }

  /* Center to stats*/
  .xp-mobile-table .slick-pg-in {
    display: flex; /* Use flexbox to control alignment */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100%; /* Ensure it takes the full height of the parent */
    text-align: center; /* Align text content to the center */
    width: 100%;
  }

  .xp-mobile-table .slick-pg-stat {
    font-size: 0.9em;
    margin: 0px 50px;
  }


  /*  .xp-mobile-table .grid-container {
    
      bottom:80px;
    }*/


  .xp-mobile-table .slick-row {
    display: flex !important;
    flex-direction: column;
    background-color: #ffffff;
    margin-bottom: 15px; /* Space between cards */
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Box shadow for better visibility */
    min-height: 80px;
    height: 80px !important;
    position: unset !important;
  }

  .xp-punch-log .slick-row {
    display: flex !important;
    flex-direction: column;
    background-color: #ffffff;
    margin-bottom: 15px; /* Space between cards */
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Box shadow for better visibility */
    min-height: 80px;
    height: Auto !important;
    position: unset !important;
  }

  .xp-mobile-table .slick-cell {
    display: block !important;
    padding: 8px 0;
    font-size: 16px; /* Adjust font size for better readability */
    word-wrap: break-word; /* Break words if necessary to prevent overflow */
  }

    .xp-mobile-table .slick-cell:first-child {
      font-weight: bold; /* Highlight the first value (Leave Type) */
    }

  .xp-mobile-table .slick-row .slick-cell:not(:last-child) {
    border-bottom: 1px solid #eee; /* Divider between each value within a card */
  }

  .xp-mobile-table .slick-cell:last-child {
    border-bottom: none;
  }

  /* Override the fixed inline widths and other width properties */
  .xp-mobile-table .slick-header-columns, .slick-header-column {
    width: auto !important;
  }

  /* Remove width settings on each cell */
  .xp-mobile-table .slick-cell {
    width: 100% !important;
  }

  .xp-mobile-table .l0 {
    left: 5px !important;
  }

  /*  =================================================Container Start============================================*/
  /* Card container */
  .xp-mobile-table .slick-card-container {
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 4px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  /* General Card Row Styling */
  .card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px; /* Space between rows */
  }

  .card-punch-times {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px; /* Space between rows */
  }

  /* Top Row (Leave Number and Employee Name) */
  .card-top-row {
    font-weight: bold;
    font-size: 16px;
  }

  /* Leave Number Styling */
  .card-leave-number {
    color: #007bff;
  }

  /* Employee Name Styling */
  .card-employee-name {
    color: #333;
    font-size: 14px
  }

  /* Middle Row (Leave Type, From Date, To Date) */
  .card-middle-row {
    align-items: center;
  }

  /* Leave Type Icon */
  .card-icon {
    width: 40px;
    height: 40px;
    background-color: #007bff;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-right: 15px;
  }

  /* Priority Indicator */
  .card-priority {
    width: 60px; /* Make it wider to form a rectangle */
    min-width: 60px;
    height: 20px; /* Shorter height for a rectangular shape */
    background-color: #ffc107; /* Priority color (you can change as per your needs) */
    color: black; /* Text color */
    border-radius: 5px; /* Small border radius for slightly rounded corners */
    display: flex; /* Flexbox for easy centering */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    font-size: 10px; /* Smaller font size */
    margin-right: 10px; /* Space to the right to separate it from other elements */
    padding: 0 2px; /* Optional padding to give some space around the text */
    font-weight: bold; /* Make the text bold for visibility */
  }

  /* Priority Indicator */
  .card-ticket-type {
    width: 60px; /* Make it wider to form a rectangle */
    min-width: 60px;
    height: 20px; /* Shorter height for a rectangular shape */
    background-color: #ffc107; /* Priority color (you can change as per your needs) */
    color: black; /* Text color */
    border-radius: 5px; /* Small border radius for slightly rounded corners */
    display: flex; /* Flexbox for easy centering */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    font-size: 10px; /* Smaller font size */
    margin-right: 10px; /* Space to the right to separate it from other elements */
    padding: 0 2px; /* Optional padding to give some space around the text */
    font-weight: bold; /* Make the text bold for visibility */
    line-height: 1;
  }
  /* Schecdule Type Indicator */
  .card-schedule-type {
    width: 95px; /* Make it wider to form a rectangle */
    min-width: 60px;
    height: 20px; /* Shorter height for a rectangular shape */
    background-color: #ffc107; /* Priority color (you can change as per your needs) */
    color: black; /* Text color */
    border-radius: 5px; /* Small border radius for slightly rounded corners */
    display: flex; /* Flexbox for easy centering */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    font-size: 10px; /* Smaller font size */
    margin-right: 10px; /* Space to the right to separate it from other elements */
    padding: 0 2px; /* Optional padding to give some space around the text */
    font-weight: bold; /* Make the text bold for visibility */
    line-height: 1;
  }

  /* From and To Dates */
  .card-date {
    margin: 0 10px;
    font-size: 12px;
  }

  .card-date-created {
    margin: 0 10px;
    font-size: 10px;
  }

  .card-description {
    margin: 0 5px;
    font-size: 12.5px;
    font-style: italic;
  }

  /* Bottom Row (Status) */
  /* Bottom Row (Status) */
  .card-bottom-row {
    display: flex;
    justify-content: space-between;
  }

  .card-duration {
    font-size: 0.8em;
    color: #555;
    align-self: flex-start;
  }

  .card-project {
    font-size: 0.8em;
    color: #555;
    align-self: flex-start;
  }

  .card-status {
    font-size: 0.9em;
    /*color:  #28a745;*/
    align-self: flex-end;
  }
  /*  =================================================Container End============================================*/

  /* Mobile-Friendly Pager Styling */
  .s-Serenity-SlickPager {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 0px 0;
    border-top: 1px solid #ddd;
    margin-top: 5px;
    background-color: #ffffff;
  }

    .s-Serenity-SlickPager .slick-pg-btn {
      padding: 5px !important;
      min-width: 40px;
      font-size: 1.2em;
      margin: 5px;
    }

    .s-Serenity-SlickPager .slick-pg-current {
      width: 50px;
      text-align: center;
      margin: 0 5px;
      padding: 5px;
      border: 1px solid #ddd;
      border-radius: 5px;
    }

    .s-Serenity-SlickPager .slick-pg-pagetext {
      font-size: 0.9em;
    }


    /* Hide unnecessary pager elements for mobile devices */
    .s-Serenity-SlickPager .slick-pg-grp-size,
    .s-Serenity-SlickPager .slick-pg-reload {
      display: none;
    }

  /* Initial state: smaller, visible, and more transparent */
  .s-QuickSearchBar {
    position: fixed; /* Float the search bar */
    top: 50px; /* Position it at the top */
    right: 5px; /* Position it at the right */
    width: 40px; /* Make it slightly larger initially for visibility */
    height: 40px;
    background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent, light background */
    border-radius: 50%; /* Rounded look */
    cursor: pointer; /* Change cursor to pointer to show interactivity */
    transition: all 0.3s ease-in-out; /* Smooth transition */
    overflow: hidden;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3); /* Light shadow for better visibility */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000; /* Ensure it is above other elements */
  }

    /* Search icon inside the button */
    .s-QuickSearchBar .quick-search-icon {
      font-size: 24px;
      color: #333;
      transition: color 0.3s ease-in-out; /* Smooth transition for the color */
    }

    /* Expand on hover or focus */
    .s-QuickSearchBar:hover,
    .s-QuickSearchBar:focus-within {
      width: 300px; /* Expand width on hover */
      height: 50px; /* Keep the same height */
      border-radius: 25px; /* Make it rectangular */
      background-color: rgba(255, 255, 255, 1); /* Make it fully opaque */
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); /* Increase shadow for emphasis */
      transition: all 0.3s ease-in-out; /* Smooth transition */
    }

    /* Show the input field when expanded */
    .s-QuickSearchBar input {
      opacity: 0; /* Initially hidden */
      transition: opacity 0.3s ease-in-out; /* Smooth transition for visibility */
      width: 240px; /* Width of the input field */
      border: none; /* Remove border */
      outline: none; /* Remove outline when focused */
      height: 30px; /* Input height */
      padding: 5px;
      margin-left: 15px; /* Ensure the input starts after the icon */
      font-size: 16px; /* Comfortable font size */
    }

    /* On hover or focus, show the input field */
    .s-QuickSearchBar:hover input,
    .s-QuickSearchBar:focus-within input {
      opacity: 1; /* Make input visible */
    }

  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
    }

    40% {
      transform: translateY(-10px);
    }

    60% {
      transform: translateY(-5px);
    }
  }

  .bounce-animation {
    animation: bounce 1s ease;
  }

  /* Ensure Font Awesome is included in your project */
  @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');


  /* Initial state: smaller, visible, and more transparent */
  .quick-filters-bar {
    position: fixed; /* Float the quick filters bar */
    top: 100px; /* Position below the search bar */
    right: 5px; /* Position at the right */
    width: 40px; /* Compact size initially */
    height: 40px;
    background-color: rgba(255, 255, 255, 0.7); /* Semi-transparent background */
    border-radius: 50%; /* Rounded look */
    cursor: pointer; /* Pointer cursor to show interactivity */
    transition: all 0.3s ease-in-out; /* Smooth transition */
    overflow: hidden;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3); /* Light shadow for visibility */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000; /* Ensure it stays above other elements */
  }

    /* Icon for quick filter bar */
    .quick-filters-bar::before {
      content: "\f0b0"; /* Font Awesome filter icon Unicode */
      font-family: "Font Awesome 5 Free"; /* Correct FontAwesome family name */
      font-weight: 900; /* For solid icon style */
      font-size: 24px;
      color: #333;
      transition: color 0.3s ease-in-out; /* Smooth transition for the color */
    }


    /* Expand on hover or focus */
    .quick-filters-bar:hover,
    .quick-filters-bar:focus-within {
      width: 95vw; /* Expand width on hover */
      height: auto; /* Adjust height to content */
      border-radius: 15px; /* Make it rectangular with rounded corners */
      background-color: rgba(255, 255, 255, 1); /* Fully opaque background */
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); /* Increase shadow for emphasis */
      transition: all 0.3s ease-in-out; /* Smooth transition */
      flex-direction: row; /* Make items align horizontally when expanded */
      padding: 1px; /* Padding for better appearance */
    }

    /* Show the filter content when expanded */
    .quick-filters-bar .quick-filter-item {
      opacity: 0; /* Initially hidden */
      transition: opacity 0.3s ease-in-out; /* Smooth transition for visibility */
      margin-right: 10px; /* Space between filters */
    }

    /* On hover or focus, show the filter content */
    .quick-filters-bar:hover .quick-filter-item,
    .quick-filters-bar:focus-within .quick-filter-item {
      opacity: 1; /* Make content visible */
    }

  /* Style quick filter items to align properly */
  .quick-filter-item {
    display: flex;
    flex-direction: column; /* Stack the label on top of the input/select */
    margin-bottom: 10px; /* Add some spacing between filters */
  }

    .quick-filter-item:has(.s-Serenity-DateEditor) {
      display: flex;
      flex-direction: row; /* Stack the label on top of the input/select */
      margin-bottom: 10px; /* Add some spacing between filters */
    }

      .quick-filter-item:has(.s-Serenity-DateEditor) .quick-filter-label {
        display: none;
      }


  .quick-filter-top-label {
    font-weight: bold; /* Make the label more prominent */
    margin-bottom: 5px; /* Space between label and input/select */
    font-size: 0.9em; /* Adjust size as needed */
  }


  .select2-container {
    width: 120px; /* Set a specific width to keep filters consistent */
  }


  /* General filter row styling */
  .filter-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Space between rows */
  }

  /* Style for the Assigned To filter row */
  .assigned-to-row {
    width: 100% !important; /* Takes full width for "Assigned To" */
  }

  /* Style for the Priority and Status row */
  .priority-status-row {
    display: flex;
    gap: 10px; /* Space between "Priority" and "Status" */
    justify-content: flex-start;
  }



  /* Style for the filter count badge */
  .filter-badge {
    position: absolute;
    top: 15px;
    right: 25px;
    background-color: #ff6347; /* Tomato color */
    color: white;
    font-size: 8px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

    /* Animation for badge when filter changes */
    .filter-badge.active {
      opacity: 1;
      transform: scale(1.2);
    }

    .filter-badge.inactive {
      opacity: 0;
      transform: scale(0);
    }

  .side-panel {
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    background-color: #fff;
    border-left: 1px solid #ddd;
    z-index: 1050; /* Higher than typical content but below modals */
    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
    padding: 15px;
  }

  .side-panel-half {
    width: 100% !important; /* Initial width at 50% */
  }

  .side-panel-full {
    width: 100%; /* Full width when toggled */
  }
}


/* Side panel styling */
.income-deductions-panel {
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  width: 50%;
  background-color: #fff;
  border-left: 1px solid #ddd;
  z-index: 1050; /* Higher than typical content but below modals */
  box-shadow: -2px 0 5px rgba(0,0,0,0.1);
  padding: 15px;
}

.side-panel {
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  background-color: #fff;
  border-left: 1px solid #ddd;
  z-index: 1050; /* Higher than typical content but below modals */
  box-shadow: -2px 0 5px rgba(0,0,0,0.1);
  padding: 15px;
}


.side-panel-quarter {
  width: 35%; /* Initial width at 50% */
}


.side-panel-half {
  width: 50%; /* Initial width at 50% */
}

.side-panel-full {
  width: 100%; /* Full width when toggled */
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
  margin-bottom: 5px;
}

  .panel-header h4 {
    flex-grow: 1;
    margin: 0;
  }

  .panel-header .close, .panel-header .toggle-size {
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: black;
  }

  .panel-header .toggle-size {
    margin-right: 10px; /* Space between buttons */
  }


.modal.s-XPHR-EmployeeSelfService-PunchLogDialog {
  z-index: 9999;
}

  .modal.s-XPHR-EmployeeSelfService-PunchLogDialog .modal-content {
    margin-right: 0px !important;
  }

.modal-dialog.xp-modal-dialog-fix {
  max-width: unset;
  margin-right: unset;
  margin-left: unset;
  margin: unset;
  min-height: calc(100%)
}

.ui-datepicker {
  z-index: 999999 !important;
}

#toast-container {
  top: 0px !important;
}

.xp-privacy-policy-section {
  position: relative;
  z-index: 999;
  overflow: hidden;
  padding-top: 150px;
  padding-bottom: 70px;
}



.s-XPHR-Payrolls-PayrollDataGrid .s-GridDialogPane {
  position: relative;
  z-index: 1;
  top: 0;
  right: 0;
  width: 100%;
  height: 55%;
  max-height: 396.9px;
  outline: 0;
  overflow: hidden;
  padding: 0.5rem 1rem;
  background-color: var(--s-card-bg);
  border: 1px solid var(--s-card-border);
  display: flex;
  flex-direction: column;
}

.s-XPHR-Payrolls-PayrollDataGrid .categories > .category:not(:first-child) {
  margin-top: 0.5rem;
}

.field {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

.s-PayrollWorkflowIframe {
  padding: unset;
}

.split-button {
  display: flex;
  align-items: stretch;
  position: relative;
}

  .split-button .default-action {
    flex-grow: 1;
    border: none;
  }

  .split-button .split-toggle {
    width: 40px;
    border: none;
    border-right: 1px solid #ddd;
  }

  .split-button .split-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    border: 1px solid #ddd;
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 10;
    min-width: 100%;
  }

    .split-button .split-menu.show {
      display: block;
    }

    .split-button .split-menu li {
      padding: 8px 12px;
      cursor: pointer;
    }

      .split-button .split-menu li:hover {
        background: #f0f0f0;
      }


.spinner-overlayx {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.spinner-containerx {
  text-align: center;
  color: white;
}

.spinnerx {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid white;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.s-VesselActivityMasterDialog .categories {
  height: auto;
}

.ui-widget-header {
  color: black !important;
}

.select2.select2-container {
  width: 100% !important;
}

.s-XPHR-Payrolls-SalaryProfileEditorDialog .modal-dialog,
.s-XPHR-Payrolls-WageProfileEditorDialog .modal-dialog {
  min-width: 1000px;
  width: 770px;
}

.s-XPHR-Employee-EmployeeDialog a.inplace-button.inplace-create[title="Edit"][disabled] {
  display: none;
}

.s-XPHR-HR-Payrolls-EmployeeParentEditor,
.s-XPHR-HR-Payrolls-EmployeeChildrenEditor {
  height: 200px !important;
}

/* Base container for scoping everything */
.s-XPHR-Employee-EmployeeDialog .s-ImageUploadEditor {
  position: relative;
  width: 210px;
  height: 210px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s-XPHR-Employee-EmployeeDialog .s-ImageUploadEditor, .s-MultipleImageUploadEditor {
  border: 0px solid var(--s-card-border);
  background-color: var(--s-card-bg);
  border-color: #86939b;
}

  /* Circular image container */
  .s-XPHR-Employee-EmployeeDialog .s-ImageUploadEditor .file-item.file-image {
    width: 75%;
    aspect-ratio: 1 / 1; /* Enforce square even without height */
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    border: 1px solid #ccc;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  }

    /* Image styling */
    .s-XPHR-Employee-EmployeeDialog .s-ImageUploadEditor .file-item.file-image a.thumb {
      width: 100%;
      height: 100%;
      display: block;
      background-size: cover;
      background-position: center;
      border-radius: 50%;
    }

  /* Overlay the toolbar */
  .s-XPHR-Employee-EmployeeDialog .s-ImageUploadEditor .s-Toolbar {
    position: absolute;
    width: 75%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 2;
  }

  /* Show toolbar on hover */
  .s-XPHR-Employee-EmployeeDialog .s-ImageUploadEditor:hover .s-Toolbar {
    opacity: 1;
    background: rgba(255, 255, 255, 0.6);
    pointer-events: auto;
    width: 75%;
  }

  /* Style the buttons */
  .s-XPHR-Employee-EmployeeDialog .s-ImageUploadEditor .tool-button {
    background: white;
    border: 1px solid #ccc;
    padding: 6px 10px;
    margin: 0 4px;
    border-radius: 5px;
    font-size: 0.8rem;
    cursor: pointer;
    opacity: 0.9;
    transition: background 0.2s ease, color 0.2s ease;
  }

    .s-XPHR-Employee-EmployeeDialog .s-ImageUploadEditor .tool-button:hover {
      background-color: #007bff;
      color: white;
    }

  /* Icon for delete if no text */
  .s-XPHR-Employee-EmployeeDialog .s-ImageUploadEditor .delete-button.no-text .button-inner::before {
    content: "🗑️";
    font-size: 16px;
  }

  /* Clean up spacing */
  .s-XPHR-Employee-EmployeeDialog .s-ImageUploadEditor .file-items {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: center;
  }

  .s-XPHR-Employee-EmployeeDialog .s-ImageUploadEditor.hide-original-name ul {
    min-height: 100%;
    min-width: 100%;
  }


  /* Placeholder avatar icon when no image is uploaded */
  .s-XPHR-Employee-EmployeeDialog .s-ImageUploadEditor .file-items:empty::before {
    content: '';
    display: block;
    width: 50%;
    /*height: 100%;*/
    border-radius: 50%;
    background: url('/Content/avatar/default_Employee.png') center no-repeat;
  }

  .s-XPHR-Employee-EmployeeDialog .s-ImageUploadEditor .tool-button {
    transform: scale(0.95);
    transition: transform 0.2s ease, background 0.2s ease;
  }

    .s-XPHR-Employee-EmployeeDialog .s-ImageUploadEditor .tool-button:hover {
      transform: scale(1.05);
    }



input, select, textarea, .form-control {
  background-color: var(--s-input-bg);
  border-color: #86939b;
  border-radius: var(--bs-border-radius);
  border-style: solid;
  border-width: 1px;
  color: var(--s-input-text);
  padding: var(--s-input-padding-v) 0.75rem;
  transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
  background-clip: padding-box;
}

.select2-container {
  border: 1px solid var(--bs-border-color);
  border-color: #86939b;
}

.s-ImageUploadEditor, .s-MultipleImageUploadEditor {
  border: 1px solid var(--s-card-border);
  background-color: var(--s-card-bg);
  border-color: #86939b;
}

.inplace-button {
  border: 2px solid var(--bs-border-color);
  border-color: #007bff;
  color: var(--s-tool-icon);
}

.content-header-stickyx {
  background-color: #f8f9fa;
  background-color: #333843;
  border-color: var(--bs-border-color);
  border-width: 1px;
  border-style: solid;
}

.nav-link {
  color: var(--s-tabs-text);
  font-weight: 500;
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
  background-color: var( --s-sidebar-link-active);
  border-color: var(--s-tabs-border) var(--s-tabs-border) var(--s-card-bg) var(--s-tabs-border);
  color: var(--s-input-bg);
}



:root.theme-azure-light {
  --s-card-bg: #fff;
  --s-tabs-text: #1b1b1c;
  --s-tabs-text-active: #3c78ff;
  --s-tool-icon: #4a4a8e;
}

:root.theme-cosmos-dark {
  --s-card-bg: #0a182c;
  --s-tabs-text: #ced0d5;
  --s-tabs-text-active: #6eb5ff;
  --s-tool-icon: #8075af;
}


/**/
div[id*="documentViewer"] {
  height: 100% !important;
  width: 100% !important;
}

.s-XPHR-HR-Recruitment-ApplicantGrid {
  height: calc(100vh - 200px) !important;
}


.s-XPHR-Payrolls-WageProfileGrid .overlap-row,
.s-XPHR-Payrolls-WageProfileEditorDialog .overlap-row,
.s-XPHR-Payrolls-SalaryProfileGrid .overlap-row,
.s-XPHR-Payrolls-SalaryProfileEditorDialog .overlap-row{
  background-color: #ffe6e6 !important;
  color: #b30000;
}


/* A colorful gradient style for the Dashboard button */
.btn-gradient-dashboard {
  color: #fff;
  background: linear-gradient(45deg, #ff6a00, #ffca00, #00b09b, #96c93d);
  background-size: 300% 300%;
  border: none;
  font-weight: bold;
  animation: gradientMove 5s ease infinite;
}

.btn-gradient-dashboard:hover {
  color: #fff;
  opacity: 0.9;
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}


.theme-azure-light .attendance-dashboard .s-dashboard-card-sm.s-alt .card-body {
  background: #FFC107 !important;
}

.theme-azure-light .attendance-dashboard .s-dashboard-card-sm .card-body {
  background: rgb(255 193 7 / 19%);
}

.theme-azure-light .payroll-dashboard .s-dashboard-card-sm.s-alt .card-body {
  background: #48bf4d !important;
}

.theme-azure-light .payroll-dashboard  .s-dashboard-card-sm .card-body {
  background: rgb(76 175 80 / 31%);
}

.s-Panel.s-IFrameDialog.s-DayEndIframe .productfruits--container {
  display: none !important;
}