@font-face {
font-family: 'Showcase Material3';
src:
url(8e4cb883e5503f380e34.ttf) format('truetype'),
url(f019381bebb2c7e2638d.woff) format('woff'),
url(a35878d51036c94cfd78.eot) format('eot'),
url("993939724565df5b03c3.svg?#Showcase Material3") format('svg');
font-weight: normal;
font-style: normal;
}

[class^="sf-icon-"], [class*=" sf-icon-"] {
 font-family: 'Showcase Material3' !important;
speak: none;
font-size: 15px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.sf-icon-desktop:before { content: "\e700"; }
.sf-icon-mobile:before { content: "\e701"; }
.sf-icon-tab:before { content: "\e702"; }
.sf-icon-configuration:before { content: "\e703"; }
.sf-icon-row-selected:before { content: "\e704"; }
.sf-icon-cell-selected:before { content: "\e705"; }
.sf-icon-row-clear:before { content: "\e706"; }
.sf-icon-column-clear:before { content: "\e707"; }
.sf-icon-clear-selection:before { content: "\e708"; }
.sf-icon-order-details:before { content: "\e709"; }
.sf-icon-freight:before { content: "\e70a"; }
.sf-icon-shopping-cart:before { content: "\e70b"; }
.sf-icon-clear-sorting:before { content: "\e70c"; }
.sf-icon-expand-collapse:before { content: "\e70d"; }
.sf-icon-row-height:before { content: "\e70e"; }
.sf-icon-currency-dollar:before { content: "\e70f"; }
.sf-icon-filter-settings:before { content: "\e710"; }
.sf-icon-table-settings:before { content: "\e711"; }
.sf-icon-header-settings:before { content: "\e712"; }
.sf-icon-edit-settings:before { content: "\e713"; }
.sf-icon-group:before { content: "\e714"; }
.sf-icon-clear-cell:before { content: "\e715"; }
.sf-icon-sorting:before { content: "\e716"; }
.sf-icon-description:before { content: "\e717"; }
.sf-icon-estimated-cost:before { content: "\e718"; }
.sf-icon-actual-cost:before { content: "\e719"; }
.sf-icon-progress:before { content: "\e71a"; }
.sf-icon-arrow-upwards:before { content: "\e71b"; }
.sf-icon-arrow-downwards:before { content: "\e71c"; }
.sf-icon-male:before { content: "\e71d"; }
.sf-icon-female:before { content: "\e71e"; }

.image-container {
   display: flex;
  justify-content: center;
  align-items: center;
}

 .material3 .profile-image {
   background-color: rgba(79, 70, 229);
 }

 .profile-image {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background-color: #e3165b;
 }

.name {
  font-size: 14px;
  font-weight: 500;
}

.email {
  font-size: 14px;
  font-weight: 400;
}

.Mapimage .e-image {
  height: 13px;
  width: 14px;
}

/* Move the settings icon to display at the end of the column header. */
.iconMarginAlign {
  width: 35px;
}

.parent-Grid-Container {
  pointer-events: none !important;
  height: calc(98vh);
  border: 1px solid #c4c7c5;
  margin-left: 5px;
  margin-right: 5px;
}

#overalContainer {
  margin-top: 5px;
}

.e-groupfooterrow .e-summarycell {
  background: #FFEFE3 !important;
}

tfoot .e-summaryrow .e-summarycell {
  background: #E3F1FF !important;
}

tfoot .e-indentcell {
  background: #E3F1FF !important;
}

/* To apply a right-side footer color that fills the gap in the last cell, ensure the footer spans the full width of the grid, including any empty space after the last column. */
.e-grid .e-gridfooter,
.e-grid .e-gridfooter .e-leftfreeze,
.e-grid .e-gridfooter .e-rightfreeze,
.e-grid .e-gridfooter .e-fixedfreeze {
  background: #E3F1FF !important;
}


/* Icons are used in the menu to hide the default arrow indicator.*/
.custom-menu-column-name .e-menu-item[aria-label="Column Name"] .e-caret,
.custom-menu-column-date .e-menu-item[aria-label="Column Date"] .e-caret,
.custom-menu-column-number .e-menu-item[aria-label="Column Number"] .e-caret,
.custom-menu-column-verified .e-menu-item[aria-label="Column Verified"] .e-caret,
.chooser-settings .e-menu-item[aria-label="Column Chooser Menu"] .e-caret,
.custom-menu-column-clipmode .e-menu-item[aria-label="Column Name"] .e-caret,
.footer-sum .e-menu-item[aria-label="Footer Menu"] .e-caret,
.footer-avg .e-menu-item[aria-label="Footer Menu"] .e-caret {
  display: none !important;
}

.filter-container {
  margin-left: 0px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.filter-row {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

/* The 'Clear Filter' and 'Search' buttons are added using the Chip component, and the chip border is hidden using the following CSS. */
.e-chip {
  border: 0px !important;
}

/* CSS is used to customize the chip in the Payment column of the Grid to make it look better. */
.chip-paid,
.chip-not-paid {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 16px;
  border: 2px solid #C4C7C5 !important;
  /* Border for chip */
  font-size: 14px;
  font-weight: bold;
}

.chip-paid::before,
.chip-not-paid::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

.chip-paid {
  background-color: #e6f4ea;
  /* Light green */
  color: #15803d !important;
}

.chip-paid::before {
  background-color: #15803d;
  /* Green dot */
}

.chip-not-paid {
  background-color: #fdecea;
  /* Light red */
  color: #b91c1c !important;
}

.chip-not-paid::before {
  background-color: #b91c1c;
  /* Red dot */
}

/* CSS is used to customize the rating in the Rating column of the Grid to make it look better. */
.e-rating-container.e-custom-rating .e-rating-item-list:hover .e-rating-item-container .e-rating-icon,
.e-rating-container.e-custom-rating .e-rating-item-container .e-rating-icon {
  background: linear-gradient(to right, #F29527 var(--rating-value), #d8d7d4 var(--rating-value));
  background-clip: text;
  -webkit-background-clip: text;
}

.e-rating-container.e-custom-rating .e-rating-item-list:hover .e-rating-item-container .e-rating-icon,
.e-rating-container.e-custom-rating .e-rating-item-container .e-rating-icon {
  /* To change rating symbol border color */
  -webkit-text-stroke: 0px #F29527;
}

/* The selected value in the Payment dropdown is not center-aligned, so text alignment needs to be adjusted using CSS. */
.e-remain {
  padding-top: 5px !important;
}

/* spacing issue between the Dialog Settings and Column Chooser icons in the Grid's toolbar that needs to be adjusted */
.material3 .chooser-settings.e-menu-wrapper ul .e-menu-item.e-menu-caret-icon,
.material3 .chooser-settings.e-menu-container ul .e-menu-item.e-menu-caret-icon {
  padding-right: 0px !important;
  padding: 0px 10px 0px 10px !important;
}

/* single column settings icon postion adjustment */
.iconviewdiv {
  margin-top: 6px;
}

.treeviewdiv {
  margin-top: 2px;
}

.selectchip {
  font-size: 12px !important;
  font-weight: 500;
}

/* To remove the grey background color when hovering over the icon, and to prevent the hover effect from appearing on the icon after the menu is opened and a menu item is hovered, apply custom CSS to override the default hover and focus styles. */
.custom-menu-column-date .e-menu-item:hover,
.custom-menu-column-date .e-menu-item.e-hover,
.custom-menu-column-date .e-menu-item.e-focused,
.custom-menu-column-date .e-menu-item.e-selected,
.custom-menu-column-number .e-menu-item:hover,
.custom-menu-column-number .e-menu-item.e-hover,
.custom-menu-column-number .e-menu-item.e-focused,
.custom-menu-column-number .e-menu-item.e-selected,
.custom-menu-column-verified .e-menu-item:hover,
.custom-menu-column-verified .e-menu-item.e-hover,
.custom-menu-column-verified .e-menu-item.e-focused,
.custom-menu-column-verified .e-menu-item.e-selected .custom-menu-column-clipmode .e-menu-item:hover,
.custom-menu-column-clipmode .e-menu-item.e-hover,
.custom-menu-column-clipmode .e-menu-item.e-focused,
.custom-menu-column-clipmode .e-menu-item.e-selected {
  background-color: transparent !important;
  color: inherit !important;
}

.templateText {
  align-items: center;
  display: flex;
  justify-content: center;
}

.groupCaptionMinText {
  background-color: #205107;
  color: white;
  padding: 4px 8px;
  border-radius: 31px;
}

.groupCaptionMaxText {
  background-color: #B3261E;
  color: white;
  padding: 4px 8px;
  border-radius: 31px;
}


.settingsIconAlignment {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.settingsIconText {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 6px;
}

.iconAlignment {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

.e-grid .e-summarycell[index="12"] {
  padding: 0px 0px;
}

/* When focusing on the command column using the keyboard, the top margin is not properly aligned. */
.e-unboundcelldiv .e-btn.e-icon-btn {
  padding: 5px !important;
}

/* Hide the toggle button for a specific column even when the "showToggleButton" option is enabled in the grouping settings. */
th[aria-colindex="12"] .e-grptogglebtn,
th[aria-colindex="10"] .e-grptogglebtn,
th[aria-colindex="11"] .e-grptogglebtn,
th[aria-colindex="8"] .e-grptogglebtn,
th[aria-colindex="15"] .e-grptogglebtn {
  display: none !important;
}

/* When grouping the columns using the toggle button, the arrow icon for the grouped column is not being displayed. */
.e-nextgroup {
  display: inline-block !important;
}

/* Remove the hover effect from the menu item specifically used for the aggregate section. */
.footer-sum .e-menu-item[aria-label="Sum"]:hover,
.footer-sum .e-menu-item[aria-label="Sum"].e-hover,
.footer-sum .e-menu-item[aria-label="Sum"].e-focused,
.footer-sum .e-menu-item[aria-label="Sum"].e-selected,
.footer-sum .e-menu-item[aria-label="Average"]:hover,
.footer-sum .e-menu-item[aria-label="Average"].e-hover,
.footer-sum .e-menu-item[aria-label="Average"].e-focused,
.footer-sum .e-menu-item[aria-label="Average"].e-selected,
.footer-sum .e-menu-item[aria-label="Min"]:hover,
.footer-sum .e-menu-item[aria-label="Min"].e-hover,
.footer-sum .e-menu-item[aria-label="Min"].e-focused,
.footer-sum .e-menu-item[aria-label="Min"].e-selected .footer-sum .e-menu-item[aria-label="Max"]:hover,
.footer-sum .e-menu-item[aria-label="Max"].e-hover,
.footer-sum .e-menu-item[aria-label="Max"].e-focused,
.footer-sum .e-menu-item[aria-label="Max"].e-selected,
.footer-sum .e-menu-item[aria-label="Count"]:hover,
.footer-sum .e-menu-item[aria-label="Count"].e-hover,
.footer-sum .e-menu-item[aria-label="Count"].e-focused,
.footer-sum .e-menu-item[aria-label="Count"].e-selected {
  background-color: transparent !important;
  color: inherit !important;
}


/* image and text alignment for the empty records */
.emptyRecordTemplate {
  text-align: left;
}

.e-emptyRecord {
  display: block;
  margin-left: 120px;
}


.e-filterUi_input .e-checkbox-wrapper {
  display: flex;
  justify-content: center;
}

body.material3 {
  background-color: white;
}

.material3 .labelDetails {
  color: black;
}

.e-unboundcell {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}


/* Adjust the alignment and positioning of the gridline menu icon in the toolbar to ensure consistent spacing and visual balance. */
#gridLines {
  margin-top: 6px !important;
}

.e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
  padding: 4px 4px 4px 4px;
}

.centered-button {
  display: block;
  margin: 0 auto;
}

/* After an image is browsed, the image size text and the delete icon are added. */
.e-upload-files {
  display: none;
}


.image-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  border: 1px solid #ddd;
  margin-top: 5px;
  margin-bottom: 5px;
  border-radius: 4px;
  background-color: #f9f9f9;
}

.file-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.file-name {
  font-weight: 500;
  margin-right: 10px;
  color: #333;
}

.file-size {
  color: #666;
  font-size: 12px;
  margin-right: auto;
}

.delete-icon {
  color: #d32f2f;
  font-size: 16px;
  padding: 4px;
}

#delteIcon {
  cursor: pointer;
}


.checkbox-group > .treeviewdiv .e-checkbox-wrapper {
  padding: 8px 0px 8px 0px !important;
}

.dropdown-with-label {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-right: 24px;
   width: 100%;
}

.sf-icon-male, .sf-icon-female {
  color: white;
}

.e-checkbox-wrapper label[for="Verified"] {
  margin: 0px 10px 0px 0px !important;
}

/* The checkbox values within the dropdown for the payment status are not properly aligned.*/
.e-ddt.e-popup .e-selectall-parent,
.e-treeview .e-ul {
  padding: 0px 9px 0px 0px !important;
}


#svg-container {
  position: absolute;
  z-index: 10002;
  display: none;
  top: 300px;
  left: 600px;
}

@keyframes single-click-effect {
  100% {

    fill-opacity: 0.8;
  }
  50% {
    fill-opacity: 0.3;
  }
}

.single-click-effect {
  animation: single-click-effect 0.5s forwards;
}

@keyframes double-click-effect {
  0% {
    fill-opacity: 0.3;
  }
  50% {
    fill-opacity: 0.8;
  }
  100% {
    fill-opacity: 0.3;
  }
}

.double-click-effect {
  animation: double-click-effect 0.2s forwards;
}

#overviewgrid_dialogEdit_wrapper, #overviewgrid_dialogEdit_wrapper {
  pointer-events: none !important;
}