:root {
  --background-color: #4f1434;
  --border-color: #4f1434;
  --color: #fff;
  --BodyBackGroundColor: white;
  --TopBarTextColor: White;
  --TopBarBackGroundColor: #6B6B6B;
  --AppIconsBackGroundColor: #6B6B6B;
  --AppIconsTextColor: black;
  --ButtonBackGroundColor: #e0e0e0;
  --ButtonTextColor: Black;
  --TableHeaderTextColor: black;
  --TableHeaderFontSize: 13px;
  --TabTextColor: black;
  --TabFontSize: 13px;
  --SubmenuAppIconsBackGroundColor: white;
  --SubmenuAppIconsTextColor: white;
  --ServiceAppTextColor: black;
  --TableRowBackground: #F2F2F2;
  --boxShadowGrid: '1px 2px 5px #2a262694';
  --TableHeaderBackground: #f2f2f2;
}

/* app-header img:before {
  background-color: var(--ButtonBackGroundColor) !important;
} */
/* sidebar */
.layout-menu-arrow,
.sidebar-layout-menu i {
  color: var(--TopBarBackGroundColor);
}

/* .sidebar-layout {
  background-color: var(--TopBarBackGroundColor);
} */

.newEditIcon {
  color: black;
  border-radius: 24px;
  float: right;
  font-size: 12px;
  line-height: 24px;
  min-height: 26px;
  text-align: center;
  width: 24px;
  height: 24px;
  cursor: pointer;
  margin: 4px 0px 0px 9px;
  padding-top: 0px;
  border: 1px solid var(--ButtonBackGroundColor);
}

.newEditIcon img {
  width: 60%;
}




.Ai_svg {
  fill: var(--ButtonBackGroundColor);
}

.ai-header-copilet {
  fill: blue;
}

.ai-header {
  fill: var(--TopBarTextColor);
}

.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
  background: var(--ButtonBackGroundColor);
}

.mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
  background: var(--ButtonBackGroundColor);
}

/* .mat-row:nth-child(even) {
  background-color: var(--TableRowBackground);
} */
.new-edit {
  background: var(--ButtonBackGroundColor);
}

.new-edit-icon {
  color: var(--ButtonTextColor);
}

.mat-header-row {
  background: var(--TableHeaderBackground);
}

.job-detail-section .job-title {
  background: var(--ButtonBackGroundColor);
  color: var(--ButtonTextColor);
}

.fins-details-title {
  color: var(--ButtonTextColor);
  background: var(--ButtonBackGroundColor);
}

.table-main-custom-details-page,
.table-main-report,
.box-shadow-grid,
.card-box1,
.account-box,
.mat-expansion-panel,
.asset-card,
.punch-status,
.att-statistics,
.em-tm-box,
.links-profile-widget,
.r-p-grid,
.wf-card,
.setting-main,
.wf-sla-tab,
.wf-notification-tab,
.permission-card,
.activity-div {
  box-shadow: var(--boxShadowGrid) !important;
}

.card-box,
.table-contain-main {
  border-top: 3px solid var(--TopBarBackGroundColor);
}



employee-full-profile .hrz-emp-full-profile .hrz-emp-more-section .emp-tab mat-tab-group {
  box-shadow: var(--boxShadowGrid) !important;
}

.dashboard-App {
  box-shadow: var(--boxShadowGrid)
}


notification-workflow,
sla-notification,
notification-workflow-reassign,
notification-workflow-sms,
notification-workflow-whatapp {
  .mat-expansion-panel {
    box-shadow: none !important;
  }
}

new-workflow .wf-config-container .wf-card.line {
  box-shadow: none !important;
}

.left-section .lead-activity-tabs {
  box-shadow: none !important;
}

.ngo-footer-main {
  color: var(--TopBarTextColor);
  background: var(--TopBarBackGroundColor);
}

.language-setting {
  color: var(--TopBarTextColor);
}


.no-image-team,
.no-image {
  background: var(--ButtonBackGroundColor);
  color: var(--ButtonTextColor);
}

.email-top-bar {
  background: var(--TopBarBackGroundColor);
}

.sidebar,
.side-bar {
  background-color: var(--TopBarBackGroundColor);
}

.sidebar-menu-style .la {
  color: var(--SubmenuAppIconsBackGroundColor);
}

.sidebar-menu-style .fa {
  color: var(--SubmenuAppIconsBackGroundColor);
}

.sidebar-menu li a {
  color: var(--SubmenuAppIconsTextColor);
}

.sidebar-menu li a:hover {
  color: var(--SubmenuAppIconsTextColor);
}

.sidebar-menu li.active a {
  color: var(--SubmenuAppIconsTextColor);
  background-color: var(--TopBarBackGroundColor);
}

.photo-gallery-buttons span {
  color: var(--color);
  background: var(--background-color);
}


.portal-social .social-icon a {
  margin-left: 5px;
  color: var(--color);
  background-color: var(--background-color);
}

.portal-social-footer .social-icon-footer a {
  color: var(--color);
  background-color: var(--background-color);
}



app-portal-footer .footer-main,
.footer-display {
  background: -webkit-gradient(linear,
      left top,
      left bottom,
      from(var(--background-color)));
  background-color: var(--background-color);
}

app-portal-ecommerce-footer .footer-main,
.footer-display {
  background: -webkit-gradient(linear,
      left top,
      left bottom,
      from(var(--background-color)));
  background-color: var(--background-color);
}







.edit-icon:hover {
  background-color: var(--background-color);
  border-color: var(--ButtonBackGroundColor);
}

.edit-icon-project:hover {
  background-color: var(--background-color);
  border-color: var(--background-color);
  color: var(--color);
  cursor: pointer;
}

img:before {
  background-color: var(--ButtonBackGroundColor);
}

.dropdown-toggle img:before {
  background-color: var(--TopBarBackGroundColor);
}




.customer-directory-rating,
.lead-rating {
  background: var(--background-color);
}

.background-effect {
  background-color: var(--background-color);
}

.cdk-overlay-pane .btn-primary {
  color: var(--ButtonTextColor);
  background-color: var(--ButtonBackGroundColor);
  border: 1px solid var(--ButtonBackGroundColor);
}





.text-primary,
.dropdown-menu>li>a.text-primary {
  color: var(--background-color);
}

.text-success,
.dropdown-menu>li>a.text-success {
  color: var(--background-color);
}

.fc-button-group .fc-button,
.fc-button-group-right .fc-button {
  color: var(--ButtonTextColor);
  background: var(--ButtonBackGroundColor);
  border: 1px solid var(--ButtonBackGroundColor);
}

.open>.dropdown-toggle.btn-success {
  background-color: #b24d79;
  border: 1px solid #b24d79;
}

.open>.dropdown-toggle.btn-success.focus,
.open>.dropdown-toggle.btn-success:focus,
.open>.dropdown-toggle.btn-success:hover {
  background-color: #b24d79;
  border: 1px solid #b24d79;
}

.open>.dropdown-toggle.btn-primary {
  background-color: var(--background-color);
  border: 1px solid var(--background-color);
}

.open>.dropdown-toggle.btn-primary.focus,
.open>.dropdown-toggle.btn-primary:focus,
.open>.dropdown-toggle.btn-primary:hover {
  background-color: var(--ButtonBackGroundColor);
  border: 1px solid var(--ButtonBackGroundColor);
}

.circles {
  width: 118px;
  height: 90px;
  position: relative;
  border-radius: 50%;
  left: calc(50% - 56px);
  overflow: hidden;
  cursor: pointer;
}



.circles1 {
  background: none;
}

.circles2 {
  background: none;
}

.circles3 {
  background: none;
}

.circles4 {
  background: none;
}

.dashboard-App h4 {
  height: 22px;
  margin-top: -15px;
  font-size: 14px;
  cursor: pointer;
}

.dash-widget-icon {
  /* background-color: #ffc0cb; */
  border-radius: 100%;
  color: var(--TopBarBackGroundColor);
  display: inline-block;
  float: left;
  font-size: 30px;
  height: 60px;
  line-height: 60px;
  margin-right: 10px;
  text-align: center;
  width: 60px;
}

.c1 {
  background: var(--background-color);
  border-radius: 50%;
}

.c2 {
  background: var(--background-color);
  border-radius: 50%;
}

.c3 {
  background: var(--background-color);
  border-radius: 50%;
}

.c4 {
  background: var(--background-color);
  border-radius: 50%;
}




.loader-ellips__dot:nth-child(2) {
  background: var(--background-color);
}

.mat-ink-bar {
  background-color: var(--TopBarBackGroundColor) !important;
}

.emp-card {
  border: 1px solid var(--background-color);
}

.avatar {
  background-color: var(--ButtonBackGroundColor);
  color: var(--ButtonTextColor);
}

.avatar:hover {
  background-color: var(--ButtonBackGroundColor);
  color: var(--ButtonTextColor);
}

.wf-crt-templt {
  border: 1px solid var(--background-color);
}



/* permission-workflow .div-text-click {
  border: 2px solid var(--background-color);
  border-right: 4px solid white
} */


.btn-default {
  border-color: var(--ButtonBackGroundColor);
}


.btn-primary.active,
.btn-primary:active,
.open>.dropdown-toggle.btn-primary {
  color: var(--ButtonTextColor);
  background-color: var(--ButtonBackGroundColor);
  background-image: none;
  border-color: var(--ButtonBackGroundColor);
}

.btn-default.active,
.btn-default:active,
.open>.dropdown-toggle.btn-default {
  color: var(--ButtonTextColor);
  background-image: none;
  border-color: var(--ButtonBackGroundColor);
}

.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:active.focus,
.btn-primary:active:focus,
.btn-primary:active:hover,
.open>.dropdown-toggle.btn-primary.focus,
.open>.dropdown-toggle.btn-primary:focus,
.open>.dropdown-toggle.btn-primary:hover {
  color: var(--ButtonTextColor);
  background-color: var(--ButtonBackGroundColor);
  border-color: var(--ButtonBackGroundColor);
}

.btn-default.active.focus,
.btn-default.active:focus,
.btn-default.active:hover,
.btn-default:active.focus,
.btn-default:active:focus,
.btn-default:active:hover,
.open>.dropdown-toggle.btn-default.focus,
.open>.dropdown-toggle.btn-default:focus,
.open>.dropdown-toggle.btn-default:hover {
  color: var(--ButtonTextColor);
  border-color: var(--ButtonBackGroundColor);
  background: transparent;
}

.nav .open>a,
.nav .open>a:focus,
.nav .open>a:hover {
  background-color: var(--background-color);
}



input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-internal-autofill-selected,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-internal-autofill-selected {
  /* border: 1px solid transparent!important;*/
  /* -webkit-text-fill-color:gray;*/
  -webkit-box-shadow: 0 0 0 30px #fff inset !important;
  transition: background-color 5000s transparent 0s !important;
  height: 30px;
}

textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-internal-autofill-selected {
  -webkit-box-shadow: 0 0 0 30px #fff inset !important;
  background-color: #fff !important;
  transition: background-color 5000s transparent 0s !important;
  margin-top: 2px !important;
}

/*crm task edit and delete btn*/


@media (min-width: 320px) and (max-width: 481px) {
  .circles .fa {
    font-size: 45px;
  }

  .circles {
    height: 100px;
  }

  .dashboard-App h4 {
    height: 10px;
    font-size: 11px;
  }

  .menu-icon .col-xs-4 {
    width: 50%;
  }
}

@media (min-width: 482px) and (max-width: 768px) {
  .circles .fa {
    font-size: 45px;
  }

  .circles {
    height: 100px;
  }

  .dashboard-App h4 {
    height: 10px;
    font-size: 11px;
  }
}

@-moz-document url-prefix() {
  .emp-card {
    border: 2px solid var(--background-color);
  }
}

/* theme  */
body {
  background-color: var(--BodyBackGroundColor);
}

app-header .header-main {
  background: -webkit-gradient(linear,
      left top,
      left bottom,
      from(var(--TopBarBackGroundColor)));
  background-color: var(--TopBarBackGroundColor);
}

app-portal-ecommerse-header .header-main {
  background: -webkit-gradient(linear,
      left top,
      left bottom,
      from(var(--TopBarBackGroundColor)));
  background-color: var(--TopBarBackGroundColor);
}

app-portal-header .header-main {
  background: -webkit-gradient(linear,
      left top,
      left bottom,
      from(var(--TopBarBackGroundColor)));
  background-color: var(--TopBarBackGroundColor);
}

.brand-name-title {
  color: var(--TopBarTextColor);
  font-size: 18px;
  font-weight: normal;
  margin: 0;
}

.circles .fa {
  font-size: 55px;
  position: relative;
  left: 50%;
  top: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
  color: var(--AppIconsBackGroundColor);
}



.app-icon-text {
  color: var(--AppIconsTextColor);
}

.btn-primary,
.btn {
  font-size: 12px;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:disabled:hover .btn-primary:active:hover {
  color: var(--ButtonTextColor);
  background-color: var(--ButtonBackGroundColor);
  border: 1px solid var(--ButtonBackGroundColor);
}

.btn-default,
.btn-default:hover,
.btn-default:active,
.btn-default:focus,
.btn-default:disabled:hover .btn-default:active:hover {
  color: black;
  border: 1px solid var(--ButtonBackGroundColor);
  background: transparent;
}

.btn-success,
.btn-success:hover,
.btn-success:active,
.btn-success:focus,
.btn-success:disabled:hover,
.btn-success:active:hover {
  color: var(--ButtonTextColor);
  background-color: var(--ButtonBackGroundColor);
  border: 1px solid var(--ButtonBackGroundColor);
}

.mat-table .mat-header-cell {
  color: var(--TableHeaderTextColor);
  font-size: var(--TableHeaderFontSize);
}

.mat-tab-label {
  font-size: var(--TabFontSize);
  color: var(--TabTextColor);
  opacity: 1;
  font-weight: 400;
}

.ticket-number {
  background-color: var(--ButtonBackGroundColor);
  color: var(--ButtonTextColor);
}

.user-menu.nav>li>a {
  color: var(--TopBarTextColor);
}

#toggle_btn {
  color: var(--TopBarTextColor);
}

.crm-menu-main,
.pop-menu-main {
  background: var(--TopBarBackGroundColor);
}

.edit-icon-call-log {
  background: var(--ButtonBackGroundColor);
  color: var(--ButtonTextColor);
}

.edit-icon-call-log:hover {
  background: var(--ButtonBackGroundColor);
  color: var(--ButtonTextColor);
}

.cardText,
.service-request-section .row .card-box .card-body a,
.report-permission a {
  color: var(--ServiceAppTextColor);
}

.material-icons,
.task-form-icon {
  color: var(--TopBarBackGroundColor);
  cursor: pointer;
}

.action-circle {
  background-color: var(--ButtonBackGroundColor);
}

.more_vert {
  color: var(--ButtonBackGroundColor);
}

.task-close-button:hover {
  background: transparent;
  color: var(--AppIconsBackGroundColor);
}

.user-menu.nav>li>a:hover,
.user-menu.nav>li>a:focus {
  background-color: var(--TopBarBackGroundColor);
}

.nav .open>a,
.nav .open>a:focus,
.nav .open>a:hover {
  background-color: var(--TopBarBackGroundColor);
}

.account-box .account-btn {
  background: var(--ButtonBackGroundColor);
  box-shadow: 0 6px 15px #888888;
  color: var(--ButtonTextColor);
}

.header-main-career-site {
  background: var(--TopBarBackGroundColor);
}

.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
.mat-checkbox-checked.mat-accent .mat-checkbox-background {
  background-color: var(--ButtonBackGroundColor);
}

.mat-radio-button.mat-accent .mat-radio-inner-circle,
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),
.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-persistent-ripple,
.mat-radio-button.mat-accent:active .mat-radio-persistent-ripple {
  background-color: var(--TopBarBackGroundColor);
}

.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
  border-color: var(--TopBarBackGroundColor);
}



permission-workflow .list::after {
  background: var(--TopBarBackGroundColor);
}

permission-workflow .list {
  color: var(--TopBarBackGroundColor);
}

permission-workflow .list::before {
  background: var(--TopBarBackGroundColor);
}

permission-workflow .list {
  color: var(--TopBarBackGroundColor);
}

notification-workflow .notification-button-main {
  border: 1px solid var(--TopBarBackGroundColor);
}

notification-workflow-reassign .notification-button-main {
  border: 1px solid var(--TopBarBackGroundColor);
}

sla-notification .notification-button-main {
  border: 1px solid var(--TopBarBackGroundColor);
}

notification-workflow-sms .notification-button-main {
  border: 1px solid var(--TopBarBackGroundColor);
}

notification-workflow-whatapp .notification-button-main {
  border: 1px solid var(--TopBarBackGroundColor);
}

/* permission-workflow .col-md-8 {
  border: 2px solid var(--TopBarBackGroundColor);
} */

.mat-checkbox-checkmark-path {
  stroke: var(--ButtonTextColor) !important;
}

.mat-pseudo-checkbox::after {
  color: var(--ButtonTextColor);
}



.email-icon-env {
  color: var(--TopBarBackGroundColor);
}

.email-icon-env-schedule .email-icon {
  color: var(--TopBarBackGroundColor);
}

.job-info .applyJob .btn {
  color: var(--ButtonTextColor);
}

.payroll-title span:first-of-type {
  background: var(--ButtonBackGroundColor);
  color: var(--ButtonTextColor);
  border-radius: 5px;
}

.payroll-box {
  margin-left: 10px;
}



.pf-image {
  background: var(--ButtonBackGroundColor);

}

.pf-initial {
  color: var(--ButtonTextColor);
}

.menu-icon .fa {
  color: var(--SubmenuAppIconsBackGroundColor);
}

.crm-menu-icon .app-icon-text {
  color: var(--SubmenuAppIconsTextColor);
}

.is-active-menu .app-icon-text {
  padding-bottom: 5px;
  border-bottom: 2px solid var(--SubmenuAppIconsTextColor);
  margin-right: 4px;
}

/* .is-active-menu .menu-icon {
  padding-top: 8px;
  border-top: 2px solid var(--SubmenuAppIconsTextColor);
  margin-right: 4px;
} */



.team-members li a {
  background: var(--ButtonBackGroundColor);
}

.edit-icon {
  background-color: var(--ButtonBackGroundColor);
}

.edit-icon .fa {
  color: var(--ButtonTextColor);
}

.edit-icon:hover {
  background-color: var(--ButtonBackGroundColor);
  border-color: var(--ButtonBackGroundColor);
  color: var(--ButtonTextColor);
  cursor: pointer;
}

.crm-task-details .action-circle:hover {
  background-color: var(--ButtonBackGroundColor);
}

.crm-task-details .material-icons {
  color: var(--ButtonTextColor);
}

.activity-heading .action-circle:hover {
  background-color: var(--ButtonBackGroundColor);
  color: var(--ButtonTextColor);

}

.action-icon-details .action-circle:hover {
  background-color: var(--ButtonBackGroundColor);
  color: var(--ButtonTextColor);
}

.component-sub-menu .fa {
  color: var(--AppIconsBackGroundColor);
}

.pop-menu-icon .menu-icon {
  color: var(--SubmenuAppIconsBackGroundColor);
}

.pop-menu-icon .app-icon-text {
  color: var(--SubmenuAppIconsTextColor);
}

.mat-primary .mat-pseudo-checkbox-checked {
  background-color: var(--ButtonBackGroundColor);
}

.notf-header-icon {
  color: var(--TopBarTextColor);
}

.mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
  color: black;
}