// NOTE : PLEASE ADD COLOR RELATED STYLE CLASS IN THIS FILE WHICH IS ONLY DYNAMICALLY HANDLE FROM DB.

// MAIN THEME COLORS WHICH IMPECT MAJOR PART OF SITE
@bg_gradiant_primary: #ccc;
@bg_gradiant_light_primary: #fff;
@brand_color_secondary: #55a234;
@brand_color_secondary_dark: #4c8c37;
@box-shadow-color: #57a13f;
@btn-secondary-color: #6fbb57;
@btn-custom-color: #ffc53d;
@btn-custom-hover-color: #e9b302;
// BASIC THEME COLORS
@blue: #0747a6;
@indigo: #6610f2;
@purple: #7e57c2; // Deep Purple 400
@pink: #e83e8c;
@red: #e94141;
@orange: #ffa500; // Amber 400
@yellow: #ffc53d;
@green: #66bb6a; // Green 400
@teal: #20c997;
@cyan: #00adef;
@gray: #343a40;
@black: #000000;
@white: #ffffff;
@cyan-dark: #222222;
@light-gray: #cccccc;
@dark-gray: #484848;
@light-red: #bb3e3f;
@input-bg-color: #f5f5f6;
@success: @green;
@info: @cyan;
@warning: @yellow;
@danger: @red;

//Custom Brand Colors
@brand_color: @white;
@brand_color_secondary_hover: fade(@brand_color_secondary, 12);
@brand_color_secondary_light: fade(@brand_color_secondary, 10);
@brand_color_light: fade(@brand_color_secondary, 40);
@box-shadow: fade(@box-shadow-color, 20);

@table-text-color: #54667a;
@table-lable-color: #707070;
@table-border-color: #f7f4f4;
@lable-color: #707070;
@text-edit: @table-text-color;

@gray-background: #f8f8f8;
@app-bg: #f8f8f8;
@v-hr-border-color: #cbc9c9;

@primary: @brand_color_secondary;
@secondary: @brand_color_secondary;

// header color settings
@logo-bg-color: @white;
@menu-item-color: @white;
@menu-user-setting: @brand_color_secondary;
@menu-item-color-hover: @brand_color_secondary;
@menu-user-setting-hover: @brand_color_secondary;
@menu-bg: @white;
@footer-bg-color: #d5d4d4;

// breadcrumbs
@breadcrumbs-color: @brand_color_secondary;
@footer-bg-color: @gray;

// tabs
@tag-color: #dddddb;
@tabs-color: #bababa;

// alert
@ant-alert-error-color: #fff1f0;
@ant-alert-border-error-color: #ffa39e;
@ant-alert-success-color: #edfaeb;
@ant-alert-border-success-color: #b7ebbf;
@ant-alert-information-color: #e6f7ff;
@ant-alert-border-information-color: #91d5ff;
@ant-alert-warning-color: #fffbe6;
@ant-alert-border-warning-color: #fcc100;

// buttons
@custom-btn-color: #686565;

@cancel-button-bg-color: #eceaea;
@cancel-button-color: #333;
@cancel-button-hover-bg-color: #dedede;

@button-primary-color: @box-shadow-color;
@button-primary-hover-color: @brand_color_secondary_dark;
@button-primary-border-hover-color: @brand_color_secondary_dark;

@button-secondary-color: @btn-secondary-color;
@button-secondary-hover-color: @box-shadow-color;
@button-secondary-border-hover-color: @box-shadow-color;

@button-light-color: #ffffff;
@button-light-hover-color: #eceaea;
@button-light-border-hover-color: #eceaea;

@button-dark-color: #686565;
@button-dark-hover-color: #5d5c5c;
@button-dark-border-hover-color: #5d5c5c;

@button-reset-color: #9b9d9b;
@button-reset-hover-color: #888888;
@button-reset-border-hover-color: #888888;
@input-focus-color: #e6e6e6;
@light-text-color: #495057;
@footerbar-bg-color: #333;
@footer-text-color: #dbd8d4 !important;

//antd colors
@switch-bg-gray-color: #BDBDBD;

//scroll bar css
@scrollbar-thumb-hovor-color: #555;
@scrollbar-thumb-color:#888;
@scrollbar-track-color:#f1f1f1;
@body-bg: @scrollbar-track-color;
@force-white:#ffffff;

// basic css
a {
  color: @primary !important;
}
.ant-spin-dot-item {
  background-color: @brand_color_secondary !important;
}
.om-bg-gray {
  background-color: fade(@black, 35) !important;
}
.header-title-span {
  color: @lable-color !important;
}
.invoice-label {
  color: fade(@black, 85) !important;
}
.disable-link {
  color: @table-text-color !important;
}
.green-label {
  color: @green !important;
}
.text-danger {
  color: @red !important;
}
.text-primary {
  color: @brand_color_secondary !important;
}
.text-normal {
  color: @lable-color !important;
}
.ant-h4 {
  color: @primary !important;
}
.link-style {
  color: @breadcrumbs-color !important;
}
.ant-avatar-string {
  color: @primary !important;
}
.ant-btn {
  &:hover {
    color: @primary !important;
    border-color: @primary !important;
  }
  &.ant-btn-dashed:focus {
    color: @primary !important;
    border-color: @primary !important;
  }
}
.ant-btn-link {
  color: @primary !important;
}
.ant-table-row-expand-icon {
  background-color: @input-bg-color !important;
  &:hover {
    color: @primary !important;
    border-color: @primary !important;
  }
  &:active {
    color: @primary !important;
    border-color: @primary !important;
  }
  &:focus {
    color: @primary !important;
    border-color: @primary !important;
  }
}
.ant-btn-delete {
  background-color: @red !important;
  color: @white !important;
  border-color: @red !important;
  &:hover {
    background-color: @red !important;
    color: @white !important;
    border-color: @red !important;
  }
}
.ant-btn-danger {
  color: @cancel-button-color !important;
  background-color: @cancel-button-bg-color !important;
  border-color: @cancel-button-bg-color !important;
  &:hover,
  &:focus,
  &:focus {
    color: @cancel-button-color !important;
    background-color: @cancel-button-hover-bg-color !important;
    border-color: @cancel-button-hover-bg-color !important;
  }
}

.ant-btn-custom {
  background: @custom-btn-color !important;
  color: @white !important;
  &:hover,
  &:active {
    color: @white !important;
    border-color: @button-dark-hover-color !important;
    background-color: @button-dark-hover-color !important;
  }
}
.ant-btn-reset {
  background: @button-reset-color !important;
  color: @white !important;
  &:hover,
  &:active,
  &:focus {
    color: @white !important;
    border-color: @button-reset-border-hover-color !important;
    background-color: @button-reset-hover-color !important;
  }
}
.ant-btn-primary {
  color: #fff !important;
  // color: @white !important;
  border-color: @button-primary-color !important;
  background-color: @button-primary-color !important;
  &:hover,
  &:active {
    color: #fff !important;
    border-color: @button-primary-border-hover-color !important;
    background-color: @button-primary-hover-color !important;
  }
}

// EOD Reconciliation V2 header action buttons (Save/Add) use theme colors.
.recon2-header-actions {
  .ant-btn-primary.recon2-save-btn,
  .ant-btn-primary.recon2-add-btn {
    color: @button-light-color !important;
    border-color: @button-primary-color !important;
    background-color: @button-primary-color !important;

    &:hover,
    &:active,
    &:focus {
      color: @button-light-color !important;
      border-color: @button-primary-border-hover-color !important;
      background-color: @button-primary-hover-color !important;
    }
  }
}
.ant-btn-secondary {
  color: @white !important;
  border-color: @button-secondary-color !important;
  background-color: @button-secondary-color !important;
  &:hover,
  &:active {
    color: @white !important;
    border-color: @button-secondary-border-hover-color !important;
    background-color: @button-secondary-hover-color !important;
  }
}
.ant-btn-light {
  color: @white !important;
  border-color: @button-light-color !important;
  background-color: @button-light-color !important;
  &:hover,
  &:active {
    color: @white !important;
    border-color: @button-light-border-hover-color !important;
    background-color: @button-light-hover-color !important;
  }
}
.ant-btn-dark {
  color: @white !important;
  border-color: @button-dark-color !important;
  background-color: @button-dark-color !important;
  &:hover,
  &:active {
    color: @white !important;
    border-color: @button-dark-border-hover-color !important;
    background-color: @button-dark-hover-color !important;
  }
}
.btn-info {
  color: @white !important;
  background-color: @btn-custom-color !important;
  border-color: @btn-custom-color !important;
  &:hover,
  &:focus {
    color: @white !important;
    background-color: @btn-custom-hover-color !important;
    border-color: @btn-custom-hover-color !important;
  }
}
.ant-drawer-header {
  background: @primary !important;
}
.ant-drawer-content{
  background: @white !important;
}

.login-form {
  background: linear-gradient(
    to left top,
    @bg_gradiant_primary,
    @bg_gradiant_light_primary
  ) !important;
}
.user-profile {
  .ant-drawer-header {
    background: @gray-background !important;
    background-image: linear-gradient(
      to left top,
      @bg_gradiant_primary,
      @bg_gradiant_light_primary
    ) !important;
  }
}
.ant-drawer-title {
  color: @force-white !important;
}
.ant-menu{  
  background: @menu-bg !important; //#66BB6A !important;
  color: @light-text-color !important;  
}
.ant-card-bordered {
  box-shadow: 0 2px 4px 0 fade(@black, 15) !important;
}
.ant-card-head {
  background: @white !important;
}
.ant-card-body {
  .card-title {
    color: @brand_color_secondary !important;
  }
  .ant-input-group-addon{
    background-color: @white !important;
    color: @black !important;
    border-color: @light-gray !important;
  }
}
.ant-tabs-card {
  > .ant-tabs-content {
    > .ant-tabs-tabpane {
      background: @white !important;
    }
  }
  > .ant-tabs-bar {
    .ant-tabs-tab {
      border: 1px solid @primary !important;
      background: @primary !important;
    }
    .ant-tabs-tab-active {
      border: 1px solid @white !important;
      background: @white !important;
    }
  }
}
.button-link {
  background-color: transparent !important;
  border: 1px solid transparent !important;
  color: @primary !important;
}
.form-wrapper {
  .input-delete {
    color: @red !important;
  }
  .input-delete-with-label {
    color: @red !important;
  }
  .ant-input,
  input {
    &:hover {
      border: 0px solid transparent !important;
    }
  }
  .ant-select-selection,
  input,
  .ant-calendar-picker-input {
    background-color: @input-bg-color !important;
    // border: 1px solid @input-bg-color !important;
    color: @black !important;
    border-color: transparent !important;
    &:focus,
    &:active {
      background-color: @input-focus-color !important;
    }
  }
  textarea,
  .ant-input-number,
  .ant-input-number-input-wrap {
    background-color: @input-bg-color !important;
    color: @black !important;
    &:focus,
    &:active {
      background-color: @input-focus-color !important;
    }
  }
  :disabled {
    textarea,
    .ant-input-number,
    .ant-input-number-input-wrap,
    .ant-select-selection,
    input,
    .ant-calendar-picker-input {
      background-color: #e1e1e3 !important;
    }
  }
  .ant-select-arrow{
    color:fade(@black, 50) !important;
  }
}
.has-error {
  .ant-input,
  .ant-input:hover,
  .ant-select-selection,
  .ant-input-number-input-wrap {
    border: 1px solid @red !important;
    background: @input-bg-color !important;
  }
}
.gutter-form {
  .span-required {
    color: @red !important;
  }
}
.ant-tabs-nav {
  .ant-tabs-tab {
    color: @tabs-color !important;
  }
  .ant-tabs-tab-active {
    color: @brand_color_secondary !important;
    &.ant-tabs-tab {
      &::after {
        content: " " !important;
        border-bottom: 2px solid @brand_color_secondary !important;
      }
    }
  }
}
.ant-table-small {
  border-bottom: 1px solid @table-border-color !important;
}
.ant-table-thead {
  > tr {
    > th {
      color: @black !important;
      background: @white !important;
      .ant-table-header-column {
        .ant-table-column-sorters {
          &:hover {
            &::before {
              background: @white !important;
            }
          }
        }
      }
    }
  }
}
.ant-pagination.mini {
  .ant-pagination-item-active {
    border-color: @brand_color_secondary !important;
  }
  .ant-pagination-options,
  .ant-pagination-item {
    a,
    .ant-select {
      color: @brand_color_secondary !important;
      .ant-select-selection {
        border: 1px solid @brand_color_secondary !important;
        background-color: @white !important;
        &:hover {
          border-color: @brand_color_secondary !important;
        }
        .ant-select-arrow {
          color: @brand_color_secondary !important;
        }
      }
    }
  }
}
.form-wrapper {
  .ant-table-wrapper {
    .ant-pagination.mini {
      .ant-pagination-item-active {
        border-color: @brand_color_secondary !important;
      }
      .ant-pagination-options,
      .ant-pagination-item {
        a,
        .ant-select {
          color: @brand_color_secondary !important;
          .ant-select-selection {
            border: 1px solid @brand_color_secondary !important;
            background-color: transparent !important;
            &:hover {
              border-color: @brand_color_secondary !important;
            }
            .ant-select-arrow {
              color: @brand_color_secondary !important;
            }
            .ant-select-selection__rendered {
              .ant-select-selection-selected-value {
                color: @brand_color_secondary !important;
              }
            }
          }
        }
      }
    }
  }
}
.ant-breadcrumb {
  .link-style {
    &:after {
      background: @black !important;
    }
  }
  .breadcrumb-icon-style {
    color: @brand_color_secondary !important;
    // &:after {
    //   background: @black !important;
    // }
  }
}
.ant-breadcrumb-separator {
  color: @breadcrumbs-color !important;
}
.ant-select-dropdown-menu-item {
  color: @black !important;
  background-color: @white !important;
}
.page-err {
  .err-code-container {
    border: 2px solid @primary !important;
    .err-code {
      background-color: @primary !important;
    }
  }
}
.ant-form-item {
  label {
    > .anticon {
      color: @primary !important;
    }
  }
}
.title-border {
  border-bottom: 1px solid @primary !important;
}
.section-title {
  color: @primary !important;
}
.ant-alert {
  &.ant-alert-error {
    background: @ant-alert-error-color !important;
    border: 1px solid @ant-alert-border-error-color !important;
  }
  &.ant-alert-success {
    background-color: @ant-alert-success-color !important;
    border: 1px solid @ant-alert-border-success-color !important;
  }
  &.ant-alert-information {
    background-color: @ant-alert-information-color !important;
    border: 1px solid @ant-alert-border-information-color !important;
  }
  &.ant-alert-warning {
    background-color: @ant-alert-warning-color !important;
    border: 1px solid @ant-alert-border-warning-color !important;
  }
}
.ant-alert-success {
  .ant-notification-notice-message {
    color: @green !important;
  }
  .ant-notification-notice-close {
    color: @green !important;
  }
}
.anticon.ant-notification-notice-icon-success {
  color: @green !important;
}
.ant-form-item-label {
  > label {
    color: @cancel-button-color !important;
  }
}
.ant-card-body {
  .label-title {
    color: @cancel-button-color;
  }
}
.om-box {
  background-color: @white !important;
}

//Table
.ant-table {
  color: @table-text-color !important;
}
.anticon-delete {
  color: @red !important;
}
.anticon-edit,
.anticon-file,
.anticon-trademark {
  color: @primary !important;
}
.button-link {
  .anticon-delete {
    color: @red !important;
  }
}
.ant-collapse {
  background-color: @white !important;
  .ant-collapse-item {
    .ant-collapse-header {
      color: @brand_color_secondary !important;
    }
  }
}
.footer,
.drawer-footer,
.ant-modal-footer {
  background: @footer-bg-color !important;
}
.upload-wrapper {
  .ant-upload {
    img.upload-img-btn {
      :hover {
        border: 1px solid @black !important;
      }
    }
  }
  .ant-upload-text {
    color: @light-gray !important;
  }
  .ant-upload-hint {
    color: @light-gray !important;
  }
  .img-icon {
    color: @light-gray !important;
  }
  .ant-upload-list-picture-card {
    .ant-upload-list-item:first-child {
      border: 1px solid @brand_color !important;
    }
  }
  .ant-upload-drag{
    background: @input-bg-color !important;
  }
}
.menu-dropdown-button {
  color: @brand_color_secondary !important;
  &:hover {
    color: @black !important;
  }
}
.footer-option-menu {
  li {
    color: @brand_color_secondary !important;
    background: @white !important;
    &:hover {
      background: @brand_color_secondary_light !important;
    }
  }
}
.ant-list-items {
  color: @white !important;
}
.ant-table-thead {
  > tr.ant-table-row-hover {
    &:not(.ant-table-expanded-row) {
      > td {
        background: @brand_color_secondary_light !important;
      }
    }
  }
  > tr {
    &:hover {
      &:not(.ant-table-expanded-row) {
        > td {
          background: @white !important;
        }
      }
    }
  }
}
.ant-table-fixed {
  border-bottom: 1px solid @table-border-color !important;
}
.ant-table-fixed-right {
  .ant-table-header {
    border-bottom: 1px solid @table-border-color !important;
  }
  table{
    background: @white!important;
  }
}
.ant-table-tbody {
  > tr.ant-table-row-selected {
    td {
      background: transparent !important;
    }
  }
  > tr.ant-table-expanded-row {
    background: @white !important;
  }
  .list-img {
    border: 1px solid @light-gray !important;
  }
  > tr.ant-table-row-hover {
    box-shadow: 0 2px 13px 0 fade(@black, 10) !important;
    &:not(.ant-table-expanded-row) {
      > td {
        background: @white !important; //@brand_color_secondary_light !important;
      }
    }
  }
  > tr {
    &:hover {
      box-shadow: 0 2px 13px 0 fade(@black, 10) !important;
      &:not(.ant-table-expanded-row) {
        > td {
          background: @white !important;
          // background: @brand_color_secondary_light !important;
        }
      }
    }
    td {
      border-bottom: 1px solid @table-border-color !important;
    }
  }
}
tr.ant-table-row {
  td {
    &:not(.ant-table-fixed-columns-in-body) {
      .disable-link {
        .button-link {
          color: @table-text-color !important;
        }
      }
    }
  }
}
.ant-select-dropdown-menu-item {
  &:hover {
    &:not(.ant-select-dropdown-menu-item-disabled) {
      background-color: @brand_color_secondary_light !important;
    }
  }
}
.ant-select-dropdown-menu-item-active {
  background-color: @brand_color_secondary_light !important;
}
.ant-tree {
  li {
    .ant-tree-node-content-wrapper {
      &:hover {
        background-color: @primary !important;
        color: @brand_color !important;
        i {
          color: @brand_color !important;
        }
      }
    }
  }
}
.ant-dropdown-menu {
  background-color: @white !important;
}
.ant-dropdown-menu-item {
  color: @black !important;
  &:hover {
    background: @brand_color_light !important;
  }
}
.ant-calendar-in-range-cell {
  &:before {
    background: @brand_color_light !important;
  }
}
.ant-calendar-date {
  &:hover {
    color: @white !important;
  }
}
.ant-calendar-today {
  .ant-calendar-date {
    color: @primary !important;
    border-color: @primary !important;
    &:hover {
      color: @white !important;
    }
  }
}
.ant-tree {
  li {
    .ant-tree-node-content-wrapper.ant-tree-node-selected {
      background-color: @brand_color_secondary !important;
      color: @white !important;
    }
  }
}
::selection {
  color: @white !important;
  background: @brand_color_secondary !important;
}
.ant-switch{
  background-color: @switch-bg-gray-color  !important;
}
.ant-switch-checked {
  background-color: @brand_color_secondary !important;
}
.ant-table-placeholder{
  background-color: @white !important;
  color: @black !important;
}
// .ant-empty-normal{
//   color: @black !important;
// }
.ant-radio-group-solid {
  .ant-radio-button-wrapper-checked {
    &:not(.ant-radio-button-wrapper-disabled) {
      color: @force-white !important;
      background: @brand_color_secondary !important;
      border-color: @brand_color_secondary !important;
      box-shadow: -1px 0 0 0 @brand_color_secondary !important;
      &:hover {
        color: @brand_color_secondary !important;
        border-color: @brand_color_secondary !important;
        background-color: @brand_color_secondary_hover !important;
      }
    }
  }
}
.antTags {
  background: @tag-color !important;
  color: @black !important;
}
.ant-btn-round.ant-btn-lg {
  box-shadow: 0 0 3px 2px @box-shadow !important;
}
.filter-button.ant-btn-link {
  &:hover,
  &:focus {
    color: @red !important;
  }
}
.ant-layout {
  .app-header.ant-layout-header {
    box-shadow: 0 0 6px 0 @light-gray !important;
    .app-header-inner {
      .avatar-text {
        color: @menu-item-color !important;
      }
      .logo {
        background: @logo-bg-color !important;
      }
    }
  }
  .header-right {
    .ant-dropdown-link {
      i,
      span {
        color: @menu-user-setting !important;
      }
    }
    .ant-dropdown-link:hover {
      i,
      span {
        color: @menu-user-setting-hover !important;
      }
    }
  }
  .header-left {
    .ant-menu {
      background: @menu-bg !important; //#66BB6A !important;
      color: @menu-item-color !important;
      a {
        color: @menu-item-color !important;
        &:hover {
          color: @menu-item-color-hover !important;
        }
      }
    }
  }
  .ant-menu-submenu-selected,
  .ant-menu-submenu-active {
    color: @menu-item-color-hover !important;
    border-color: @menu-item-color-hover !important;
  }
}
.ant-menu-item {
  > a {
    color: rgba(0, 0, 0, 0.65) !important;
    &:hover {
      color: @primary !important;
    }
  }
}
.ant-menu-item:hover,
.ant-menu-item-selected,
.ant-menu-submenu-title:hover {
  color: @menu-item-color-hover !important;
  border-color: @menu-item-color-hover !important;
}
.ant-drawer-left {
  .ant-menu-submenu-title:hover {
    .ant-menu-submenu-arrow {
      &:before,
      &:after {
        background: @primary !important;
      }
    }
  }
}
.ant-drawer-right .ant-drawer-close {
  color: @light-gray !important;
}
.fixed-header {
  .app-footer.footer-fixed {
    background-color: @footerbar-bg-color !important;
    color: @footer-text-color !important;
  }
}
.my-account-link {
  color: @force-white !important;
}
.menu-button {
  color: @brand_color_secondary !important;
  background: transparent !important;
  &:hover {
    color: @black !important;
    background: transparent !important;
  }
}
.tag-color-currency {
  color: @brand_color_secondary !important;
}
.v-hr {
  border-right: 1px solid @v-hr-border-color !important;
}
@media (min-width: 1280px) {
  .menu-button,
  .menu-button:active,
  .menu-button:focus {
    color: @brand_color_secondary !important;
    &:hover {
      color: @black !important;
    }
  }
}

.acro-avatar,
.drawer-pic {
  background: @app-bg !important;
}
.rounded-circle.drawer-pic {
  color: @brand_color_secondary !important;
  border: 3px solid @white !important;
  box-shadow: 0 8px 18px 0px fade(@black, 34) !important;
}
.link-dropdown {
  .ant-select-selection--single,
  .ant-select-selection--single:active,
  .ant-select-selection--single:hover {
    color: @brand_color_secondary !important;
    i {
      color: @brand_color_secondary !important;
    }
  }
}
.brand_icon {
  color: @brand_color_secondary !important;
}
.home-icon {
  color: @light-text-color !important;
  background: @white !important;
  border: 3px solid fade(@black, 8) !important;
  i {
    color: fade(@brand_color_secondary, 90);
  }
}
.home-icon:hover {
  border: 3px solid fade(@brand_color_secondary, 53) !important;
  background-color: fade(@brand_color_secondary, 05) !important;
  box-shadow: 0 5px 12px 0px fade(#949494, 5) !important;
  color: @brand_color_secondary !important;
  i {
    color: @brand_color_secondary !important;
  }
}
.pricing-item {
  background: @white !important;
  box-shadow: 0 1.5px 4px fade(@black, 24), 0 1.5px 6px fade(@black, 12) !important;
  -webkit-transition: all 0.2s cubic-bezier(0.3, 0.6, 0.2, 1.8) !important;
  transition: all 0.2s cubic-bezier(0.3, 0.6, 0.2, 1.8) !important;
  &:hover {
    box-shadow: 0 3px 12px fade(@black, 23), 0 3px 12px fade(@black, 16) !important;
  }
  .pricing-title {
    color: @white !important;
    background: @brand_color_secondary !important;
  }
  &.pricing-featured .pricing-title {
    background: @brand_color_secondary !important;
  }
}
.pricing-item .pricing-features {
  & li {
    .keywords {
      color: @orange !important;
    }
  }
}
.selected {
  box-shadow: 0px 2px 5px #888888 !important;
  background: @yellow !important;
  border-top: 5px solid @yellow !important;
  border-bottom: 5px solid @yellow !important;
}
.demo-infinite-container {
  border: 1px solid @gray-background !important;
}
.colred {
  color: @brand_color_secondary !important;
}
.span-section-title {
  color: @primary !important;
}
.om-row-variants {
  img {
    border: 1px solid @cyan-dark !important;
  }
}
.om-variant-name:hover {
  color: @primary !important;
}
.select-group-icon {
  border: 1px solid @light-gray !important;
}
.store-multi-select {
  .ant-select-selection__rendered {
    ul {
      li {
        &:hover {
          border-color: @primary !important;
          color: @primary !important;
        }
      }
    }
  }
}
.unlink-qb-account i.anticon-delete {
  color: @white !important;
}
.ant-btn-group {
  .ant-btn-primary {
    &:not(:first-child):not(:last-child) {
      border-right-color: @primary !important;
      border-left-color: @primary !important;
    }
  }
}
.container-fluid-fullscreen {
  background: @body-bg !important;
}
.sales-layout {
  .ant-layout-header {
    background: @white !important;
  }
  .ant-card-meta-title {
    color: @primary !important;
  }
  .cart-section {
    background: @white !important;
    .customer-header,
    .customer-actions-wrapper {
      color: @primary !important;
    }
    .so-products-wrapper-header {
      color: @brand_color_secondary !important;
      .transaction-title {
        color: @brand_color_secondary !important;
      }
    }
    .cart-section-content {
      .transactions-cart-area {
        .product-row-wrapper {
          .addon-selectable-area {
            &:hover {
              background-color: fade(@brand_color_secondary, 6);
            }
          }
        }
      }
    }
  }
  .content-section {
    background: @white !important;
  }
  .product-view {
    .product-detail-head {
      background: @white !important;
      border-bottom: 1px solid #e8e8e8 !important;
    }
    .item-card {
      .card__title {
        color: @white !important;
        .title {
          color: @white !important;
        }
        .price {
          color: @white !important;
        }
      }
      .card__body {
        background: linear-gradient(
          to bottom,
          fade(@black, 0),
          fade(@black, 8)
        ) !important;
      }
    }
  }
  .gutter-form {
    .ant-row > div {
      background: transparent !important;
    }
  }
}
.checkbox-ul {
  label {
    border: 1px solid @white !important;
    &:before {
      background-color: white !important;
      color: white !important;
      border: 1px solid @gray !important;
    }
  }
  &:checked {
    & + label {
      border-color: #ddd !important;
      &:before {
        background-color: @gray !important;
      }
      img {
        box-shadow: 0 0 5px #333 !important;
      }
    }
  }
}
.ant-checkbox-checked {
  .ant-checkbox-inner {
    background-color: @primary !important;
    border-color: @primary !important;
  }
}
.ant-checkbox-disabled + span{
  color: @table-text-color !important;
}
.ant-checkbox-indeterminate {
  .ant-checkbox-inner {
    background-color: @white !important;
    border-color: @primary !important;
    &::after {
      background-color: @primary !important;
    }
  }
}
.checkbox-with-image {
  .ant-checkbox-wrapper.ant-checkbox-wrapper-checked {
    .cat-img {
      &::after {
        background: fade(@black, 60) !important;
      }
    }
  }
}
.setting-container {
  .ant-card {
    color: @primary !important;
    h4 {
      color: @light-text-color !important;
    }
    &:hover {
      color: @brand_color_secondary !important;
      h4 {
        color: @brand_color_secondary !important;
      }
    }
  }
}
.location-tab-card-box {
  .card-header {
    background: @white !important;
    color: @primary !important;
  }
}
.store-list {
  .store-btn {
    &:hover {
      background-color: @brand_color_secondary_dark !important;
    }
  }
}
.list-filter-wrapper {
  .fixed-filters {
    .ant-collapse {
      .ant-collapse-item-active {
        border-bottom: 1px solid @table-border-color !important;
      }
    }
  }
}
.ant-checkbox-wrapper .ant-checkbox .ant-checkbox-inner {
  background-color: @light-gray;
  border: 1px solid @light-gray;
}
.ant-checkbox-wrapper:hover .ant-checkbox-inner,
.ant-checkbox:hover .ant-checkbox-inner,
.ant-checkbox-input:focus + .ant-checkbox-inner {
  border-color: @tabs-color !important;
}

.ant-select-focused .ant-select-selection {
  background-color: @input-focus-color !important;
}
.ant-btn-link:hover span,
.ant-btn-link:hover i {
  color: @brand_color_secondary_dark;
}
.ant-popover .ant-popover-content {
  border: 4px solid @dark-gray;
}
.ant-popover-placement-bottom > .ant-popover-content > .ant-popover-arrow,
.ant-popover-placement-bottomLeft > .ant-popover-content > .ant-popover-arrow,
.ant-popover-placement-bottomRight > .ant-popover-content > .ant-popover-arrow {
  border-top-color: @dark-gray !important;
  border-left-color: @dark-gray !important;
}
.footer .ant-btn-danger,
.drawer-footer .ant-btn-danger {
  background-color: @white !important;
}
.footer .ant-btn-danger:hover,
.drawer-footer .ant-btn-danger:hover {
  background-color: @input-bg-color !important;
}
.ant-select-dropdown
  .ant-select-tree
  li
  .ant-select-tree-node-content-wrapper:hover,
ul.ant-select-dropdown-menu li.ant-select-dropdown-menu-item:hover {
  background-color: @input-focus-color !important;
}
.ant-select-tree
  li
  .ant-select-tree-node-content-wrapper.ant-select-tree-node-selected {
  background-color: @brand_color_secondary !important;
  color: @white !important;
}
ul.ant-select-dropdown-menu li.ant-select-dropdown-menu-item-selected {
  color: @brand_color_secondary !important;
  font-weight: 500 !important;
}
ul.ant-select-dropdown-menu li.ant-select-dropdown-menu-item-selected i {
  color: #55a234 !important;
}
ul.ant-pagination .pagination-left {
  color: @cancel-button-color;
}
ul.ant-pagination .pagination-left span {
  color: @cancel-button-color;
}
ul.ant-menu-inline li.ant-menu-item.ant-menu-item-selected,
ul.ant-menu-inline li.ant-menu-item:hover {
  color: @brand_color_secondary !important;
}
.summary-footer {
  background-color: fade(@brand_color_secondary, 10);
  span {
    color: @brand_color_secondary !important;
  }
}
.summary-footer-row {
  background-color: @gray-background;
  color: @cancel-button-color;
}
.table-title {
  color: @cancel-button-color;
}
.ant-tag-yellow {
  color: #dcc112 !important;
  border-color: #dcc112 !important;
}
.asterisk-note {
  color: @cancel-button-color;
}
.so-products-wrapper,
.scheduling-calendar-wrapper {
  .so-products-wrapper-header,
  .calendar-header {
    .deactive-color {
      color: fade(@lable-color, 35) !important;
    }
    .active-color {
      color: @brand_color_secondary;
    }
  }
}
.so-products-wrapper {
  .so-products-wrapper-header {
    p.card-title {
      .search-text {
        color: @cancel-button-color;
      }
      .search-result {
        color: @brand_color_secondary;
      }
      .search-products {
        color: @tabs-color;
      }
    }
  }
  .product-view-wrapper {
    .ant-card-body {
      .product-meta-info {
        .product-meta-info-bottom {
          .right {
            .qoh {
              color: @brand_color_secondary;
            }
          }
          .price-wrapper {
            color: @brand_color_secondary;
          }
          .add-to-cart {
            i {
              color: @brand_color_secondary;
            }
          }
        }
      }
    }
  }
}
.ant-radio-wrapper .ant-radio-inner {
  border: 1px solid @tabs-color !important;
}
.ant-radio-wrapper .ant-radio-inner:after {
  background-color: @brand_color_secondary;
}
.so-products-wrapper {
  .payble-info {
    .payble-amnt {
      span.amount {
        color: @brand_color_secondary;
      }
    }
  }
  .tip-selection {
    .tip-value-btn.selected-tip {
      border-color: @brand_color_secondary !important;
      color: @brand_color_secondary;
    }
  }
  .card-inner-section-wrapper {
    .change-issued-wrapper {
      .change-issued-value {
        color: @brand_color_secondary;
      }
    }
  }
  .product-detail {
    .product-right-meta {
      .qoh {
        p {
          color: @brand_color_secondary !important;
        }
      }
      .form-wrapper {
        .product-right-inner {
          .ant-form-item-control-wrapper {
            .option-unselected {
              color: @tabs-color!important;
              border-color: @input-focus-color !important;
            }
            .option-selected {
              color: @brand_color_secondary !important;
              border-color: @brand_color_secondary !important;
            }
          }
        }
      }
    }
  }
}
.ant-tabs-ink-bar {
  background-color: @brand_color_secondary !important;
}
.ant-tabs-vertical {
  .ant-tabs-nav {
    .ant-tabs-tab {
      color: #000 !important;
      &.ant-tabs-tab-active {
        background-color: fade(@brand_color_secondary, 10) !important;
        color: @brand_color_secondary !important;
      }
    }
  }
}
.catalog-drawer {
  .ant-tabs-vertical {
    .ant-tabs-nav {
      .ant-tabs-tab {
        &.ant-tabs-tab-active {
          background-color: fade(@brand_color_secondary, 10) !important;
          color: @brand_color_secondary !important;
        }
      }
    }
  }
}

.payment-list-wrapper {
  .ant-table-footer {
    background-color: fade(@light-red, 10) !important;
    color: @light-red;
  }
}
.payment-list-wrapper.success {
  .ant-table-footer {
    background-color: fade(@brand_color_secondary, 10) !important;
    color: @brand_color_secondary;
  }
}

.payment-selection {
  .ant-tabs {
    .card-holder {
      .ant-card.selected-card {
        border-color: @brand_color_secondary;
      }
      .ant-card {
        &:hover {
          border-color: @brand_color_secondary;
        }
      }
    }
  }
}
.login-container {
  .login-form-wrapper {
    .enter-pin-btn {
      background: linear-gradient(
        to top left,
        @bg_gradiant_primary,
        @btn-secondary-color
      ) !important;
    }
  }
}

.scheduling-calendar-wrapper {
  .calendar-header {
    .ant-row {
      ul.calendar-pagination {
        li.calendar-pagination-item.current-date {
          background-color: fade(@brand_color_secondary, 40) !important;
          color: @brand_color_secondary;
          font-weight: 700;
        }
        li.calendar-pagination-item {
          &:hover:not(.navigators) {
            background-color: fade(@brand_color_secondary, 25) !important;
          }
        }
      }
    }
  }
}
.scheduling-calendar-sidebar {
  .ant-collapse {
    .ant-collapse-item {
      background-color: @white !important;
      .ant-collapse-header {
        .calendar-date-tag {
          background-color: fade(@brand_color_secondary, 20) !important;
          color: @brand_color_secondary;
        }
      }
      .ant-collapse-content {
        .mini-calendar {
          background-color: @white !important;
          color: @black !important;
          .ant-fullcalendar-value:hover {
            color: @white;
          }
        }
        .appointment-list {
          .appointment-list-item.cancelled {
            i {
              color: fade(@lable-color, 70) !important;
            }
          }
        }
      }
    }
  }
}
.appointment-modal {
  .appointment-line-item {
    background-color: @white !important;
  }
  .appointment-cart {
    .cart-section-content {
      .transactions-cart-area {
        .product-row-wrapper {
          .addon-selectable-area {
            &:hover {
              background-color: fade(@brand_color_secondary, 6);
            }
          }
        }
      }
    }
  }
}
.app-settings-payment-options-wrap {
  .ant-card.selected-payment-option {
    background-color: fade(@brand_color_secondary, 5) !important;
  }
}
.store-list-wrapper {
  .ant-card-head {
    .ant-card-head-title {
      color: @brand_color_secondary !important;
    }
  }
}
.cart-section-footer {
  .related-total-row {
    i {
      color: @brand_color_secondary;
    }
  }
  .grand-total-row {
    color: @brand_color_secondary;
    background-color: fade(@brand_color_secondary, 10) !important;
  }
}
.transaction-footer {
  .transaction-pay {
    background-color: @brand_color_secondary !important;
    border-color: @btn-secondary-color !important;
    &:hover,
    &:active {
      color: @white !important;
      border-color: @button-primary-border-hover-color !important;
      background-color: @button-primary-hover-color !important;
    }
  }
}

.payment-flow-wrapper {
  .payment-options-wrapper {
    .payment-selection {
      p.more-payment-lable {
        color: @brand_color_secondary !important;
      }
      .ant-row {
        .payment-card {
          &:hover {
            border-color: @brand_color_secondary !important;
            .fa {
              color: @brand_color_secondary !important;
            }
            .payment-card-name {
              color: @brand_color_secondary !important;
            }
          }
        }
        .active-card {
          border-color: @brand_color_secondary !important;
          .fa {
            color: @brand_color_secondary !important;
          }
          .payment-card-name {
            color: @brand_color_secondary !important;
          }
        }
      }
    }
  }
}

.slick-slider {
  .slick-slide {
    .slider-card-wrapper {
      .slider-main-detial {
        border: 1px solid fade(@brand_color_secondary, 53);
        background-color: fade(@brand_color_secondary, 05);
        color: @brand_color_secondary !important;
        .slider-icon {
          i {
            color: @brand_color_secondary !important;
          }
        }
      }
      .slider-card-name {
        background-color: @brand_color_secondary !important;
      }
    }
  }
}

.features-detail {
  .slider-card-wrapper {
    .slider-main-detial {
      border: 1px solid fade(@brand_color_secondary, 53);
      background-color: fade(@brand_color_secondary, 05);
      color: @brand_color_secondary !important;
      .slider-icon {
        i {
          color: @brand_color_secondary !important;
        }
      }
    }
    .slider-card-name {
      background-color: @brand_color_secondary !important;
    }
  }
}

.feature-wrapper {
  .ant-card {
    .ant-card-body {
      .feature-list-wrapper {
        .slider-main-row {
          .slider-card-wrapper {
            .slider-main-detial {
              border: 1px solid fade(@brand_color_secondary, 53);
              background-color: fade(@brand_color_secondary, 05);
              color: @brand_color_secondary !important;
            }
            .slider-card-name {
              background-color: @brand_color_secondary !important;
              h5 {
                color: @white;
              }
            }
          }
        }
      }
    }
  }
}

.a-la-carte-feature-info {
  .trial-info {
    color: @brand_color_secondary !important;
    font-weight: 600;
  }
}

.ant-calendar-selected-day .ant-calendar-date {
  background: @brand_color_secondary !important;
  color: white !important;
}

.ant-modal-header {
  background-color: @brand_color_secondary !important;
}

// style-guide
.style-guide {
  .sg-container {
    .primary-color-darkest {
      background-color: @bg_gradiant_primary;
    }
    .primary-color-lighest {
      background-color: @bg_gradiant_light_primary;
    }
    .primary-color {
      background-color: @brand_color_secondary;
    }
    .primary-color-darker {
      background-color: @brand_color_secondary_dark;
    }
    .primary-color-dark {
      background-color: @box-shadow-color;
    }
    .primary-color-light {
      background-color: @btn-secondary-color;
    }
    .text-dark {
      color: @cancel-button-color !important;
    }
    .placeholder-color {
      color: @light-gray !important;
    }
    .text-danger {
      color: @danger !important;
    }
    .inactive-text {
      color: @tabs-color !important;
    }
    .gradient {
      background-image: linear-gradient(
        to left top,
        @bg_gradiant_primary,
        @bg_gradiant_light_primary
      );
    }
    .input-back-color {
      background-color: @input-bg-color;
    }
    .app-background-color {
      background-color: @app-bg;
    }
    .form-footer-color {
      background-color: @footer-bg-color;
    }
    .ant-col {
      .pointer {
        color: @white;
      }
    }
    .sg-inner-wrap {
      .card-title {
        color: @cancel-button-color !important;
      }
      .icon-wrapper {
        .icon-inner {
          i {
            color: @brand_color_secondary;
          }
        }
      }
      .page-layout li span {
        background-color: @input-focus-color;
      }
    }
  }
}
// Resizable Panel :: SO Transaction Screen
.resize-panel-wrapper {
  .leftPanel {
    // span {
      .drag-bar {
        &:hover {
          background-color: @brand_color_secondary !important;
          .icon-wrapper {
            background-color: @brand_color_secondary !important;
          }
        }
        &:focus {
          background-color: @brand_color_secondary !important;
          .icon-wrapper {
            background-color: @brand_color_secondary !important;
          }
        }
        &:active {
          background-color: @brand_color_secondary !important;
          .icon-wrapper {
            background-color: @brand_color_secondary !important;
          }
        }
        &:active {
          &:hover {
            background-color: @brand_color_secondary !important;
            .icon-wrapper {
              background-color: @brand_color_secondary !important;
            }
          }
        }
      }
    // }
  }
}
.payment-list-wrapper {
  .ant-table table {
    tbody {
      tr.last-row td {
        color: @brand_color_secondary !important;
      }
    }
  }
}
.payment-list-wrapper {
  .ant-table {
    table {
      tbody {
        tr.last-row {
          background-color: fade(@brand_color_secondary, 10);
        }
      }
    }
  }
}
input[disabled] {
  background-color: @input-focus-color !important;
}

.add-material-drawer {
  .ant-card-body {
    .add-material-wrapper {
      .addon-icon-header {
        color: @brand_color_secondary !important;
      }
    }
  }
}

.lms-category-wrapper {
  .lms-category-block-wrapper {
    .lms-category-block {
      .lms-category-inner-block {
        .doc-name {
          color: @brand_color_secondary !important;
        }
      }
    }
    .highlight-auto-open {
      .lms-category-inner-block {
        // animation: blink 1s;
        // animation-iteration-count: 3;
        // border-color: @brand_color_secondary !important;
      }
    }
  }
}
// @keyframes blink { 50% { border-color:#fff ; }  }
.calendar-options {
  .active-option {
    background-color: @brand_color_secondary;
    color: @white;
  }
}

.membership-report {
  .ant-table {
    .membership-footer-total {
      td {
        background-color: @gray-background !important;
      }
    }
    .membership-summary-footer {
      td {
        color: @brand_color_secondary;
        background-color: fade(@brand_color_secondary, 10) !important;
      }
    }
  }
}

.membership-report
  .ant-table-tbody
  > tr.membership-footer-total:hover:not(.ant-table-expanded-row)
  > td {
  background: @gray-background !important;
}
.membership-report
  .ant-table-tbody
  > tr.membership-summary-footer:hover:not(.ant-table-expanded-row)
  > td {
  background: fade(@brand_color_secondary, 10) !important;
}

.settingsContainer_Wrapper {
  .setting-SearchArea {
    .setting-Search-wrapper {
      .ant-select-focused {
        .ant-select-selection {
          background-color: @input-focus-color !important ;
        }
      }
    }
  }
}

.ant-select-dropdown--empty
  ul.ant-select-dropdown-menu
  li.ant-select-dropdown-menu-item:hover {
  background-color: inherit !important;
}

.vendor-address-drawer {
  .form-wrapper {
    .ant-select-search--inline {
      .ant-select-search__field__wrap {
        .ant-select-search__field {
          background-color: transparent !important;
          padding: 0 !important;
        }
      }
    }
  }
}
.customer-drawer {
  .ant-card-header {
    background: @primary !important;
  }
}
// .custom-menu-inner-wrap {
//       .half-menu-item{
//         border-right: 4px solid @brand_color_secondary !important;
//       }
// }

.custom-menu-inner-wrap {
  .leftPanel {
    .content-section {
      border-right: 4px solid @brand_color_secondary !important;
    }
  }
}
.custom-menu-inner-wrap .hundredPer.leftPanel .content-section {
  border-right: none !important;
}

// .sales-layout {
//   .content-section{
//     border-right: 4px solid @brand_color_secondary !important;
//   }
// }

// .resize-panel-wrapper {
//   .rightPanel {
//     .cart-section{
//         border-left: 4px solid #309bf3 !important;
//     }
//   }
// }

.tip-adjustment-modal {
  .ant-table {
    .ant-table-row.active {
      background-color: fade(@brand_color_secondary, 10);
    }
  }
}
.lms-content-wrapper {
  .document-card {
    color: @brand_color_secondary;
  }
}
.search-menu-drawer {
  .ant-drawer-wrapper-body {
    .search-menu-wrapper {
      .search-area {
        .searchInput {
          .ant-input {
            &:focus,
            &:active {
              background-color: @input-focus-color !important;
            }
          }
        }
      }
    }
    .search-result-area{
      .product-row-wrapper{
        .add-to-cart-btn{
          i{
            color: @brand_color_secondary !important;
          }	
        }
         input[type="number"]{
           &:focus{
              background-color:@input-focus-color !important;
            };
         }
      }
    }
  }
}

.menu-tab-wrapper {
  .menu-cart {
    &:hover {
      color: @button-primary-hover-color !important;
      .cart-count {
        background-color: @button-primary-hover-color !important;
      }
    }
    .cart-count {
      color: @white;
      border: 1px solid @white;
    }
  }
}

.selected-menu-wraaper {
  .menu-content-main-wrapper {
    .menu-content-wrapper {
      .product-list {
        .product-list-inner-wrap{
          &:hover{
            background-color: fade(@brand_color_secondary, 20);
          }
        }
        .selected-list-inner-wrap {
          background-color: fade(@brand_color_secondary, 20);
        }
      }
    }
  }
}
.invoice-payment-form{
  .ant-card{
    .ant-card-body{
      .invoice-payment-form-inner{
        .ant-table{
            tr.invoice-table-footer{
              background-color: @gray-background;
              color: @cancel-button-color;
            }
            tr.invoice-table-footer-total{
              background-color: fade(@brand_color_secondary, 10);
              color: @brand_color_secondary !important;
            }
        }
      }
    }
  }
}
.invoice-payment-form .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td {
  background: initial !important;
}
.invoice-payment-form .ant-table-tbody > tr:hover {
  box-shadow: none !important;
}
.ant-spin-spinning .ant-spin-dot .ant-spin-dot-item {
	    background-color: @brand_color_secondary !important;
}

.notification-customer-wrapper {
  .ant-radio-group {
    .ant-radio-button-wrapper-checked {
      background-color: @brand_color_secondary !important;
      border-color: @brand_color_secondary !important;
      color: @white !important;
      box-shadow: none !important;
    }
  }
}
.split-item-inner-wrapper{
  .cart-section-wrapper{
    .customer-name{
      .c-name-wrapper{
        color: @brand_color_secondary !important;
      }
    }
  }
}

.split-item-inner-wrapper{
  .split-order-wrapper {
    .split-order-cart-left {
      border-right: 4px solid @brand_color_secondary !important;
    }
    .split-order-cart-right {
      .cart-section-wrapper{
        .new-order-btns{
          .active{
            background-color: @brand_color_secondary_dark !important;
          }
          button{
            border-color: @brand_color_secondary !important;
            background-color: @btn-secondary-color !important;              
          }
        }
      }
    } 
  }
} 

.setup-wizard{
	.ant-breadcrumb {
		.ant-breadcrumb-separator{
			color: @force-white !important;
		}
		.ant-breadcrumb-link {
			color: @force-white !important;
		}
  }
  .setup-wizard-table-of-content{
			.menu-icon{
				color: @green !important;
			}
    }
    .ant-table-body{
      .menu-icon{
        color: @green !important;
      }
    }  
  }
.ant-calendar{
	.ant-calendar-panel{

      .ant-calendar-month-panel-selected-cell{
        .ant-calendar-month-panel-month{
            background: @brand_color_secondary !important;
              color: white !important;
              border-color:@brand_color_secondary !important;
             &:hover{
                background: @brand_color_secondary !important;
                color: white !important;
                border-color:@brand_color_secondary !important;
             }
        }
      }
      .ant-calendar-month-panel-month{
        &:hover{
          color: white !important;
        }
      }

      .ant-calendar-year-panel-selected-cell{
        .ant-calendar-year-panel-year{
            background: @brand_color_secondary !important;
              color: white !important;
              border-color:@brand_color_secondary !important;
             &:hover{
                background: @brand_color_secondary !important;
                color: white !important;
                border-color:@brand_color_secondary !important;
             }
        }
      }
      .ant-calendar-year-panel-year{
        &:hover{
          color: white !important;
        }
      }

      .ant-calendar-decade-panel-selected-cell{
        .ant-calendar-decade-panel-decade{
            background: @brand_color_secondary !important;
              color: white !important;
              border-color:@brand_color_secondary !important;
             &:hover{
                background: @brand_color_secondary !important;
                color: white !important;
                border-color:@brand_color_secondary !important;
             }
        }
      }
      .ant-calendar-decade-panel-decade{
        &:hover{
          color: white !important;
        }
      }

	}
}


.scheduling-calendar-sidebar .ant-collapse .ant-collapse-item .ant-collapse-content .mini-calendar {
  
  .react-calendar__navigation button.react-calendar__navigation__label {
    color: @brand_color_secondary !important;
  }

  .react-calendar__viewContainer {
    .react-calendar__year-view__months .react-calendar__year-view__months__month abbr, .react-calendar__decade-view__years .react-calendar__decade-view__years__year, .react-calendar__century-view .react-calendar__tile {
      color: @brand_color_secondary !important;
    }

    .react-calendar__month-view__days {
      .react-calendar__tile {
        &:disabled {
          background: transparent !important;
          opacity: inherit !important;
          color: @light-text-color;
        }

        abbr {
          line-height: 24px !important;
          border-radius: 2px !important;      
          color: @light-text-color;
          &:hover {
            background-color: #615c5b !important;
            color: white;
          }

          line-height: 24px !important;
          border-radius: 2px;
        }
      }

      .react-calendar__tile--now abbr {
        border-color: @brand_color_secondary !important;
        font-weight: 700;
        &:hover {
          color: white !important;
        }
      }

      .react-calendar__tile--active abbr {
        background: @brand_color_secondary !important;
        border: none;
        &:hover {
          background: @brand_color_secondary !important;
        }
      }
    }

    .react-calendar__year-view__months .react-calendar__tile--hasActive abbr {
      background-color: @brand_color_secondary !important;
      color: white;
    }

    .react-calendar__decade-view__years .react-calendar__tile--hasActive, .react-calendar__century-view .react-calendar__tile--hasActive {
      background-color: @brand_color_secondary !important;
      color: white !important;

      &:hover {
        background-color: @brand_color_secondary !important;
      }
    }

    .react-calendar__year-view__months .react-calendar__tile--hasActive abbr:hover {
      background-color: @brand_color_secondary !important;
      color: white;
    }

    .react-calendar__month-view__days .react-calendar__month-view__days__day--neighboringMonth {
      abbr {
        color: rgba(0, 0, 0, 0.25);
      }

      &:hover abbr {
        background-color: transparent !important;
      }
    }

    .react-calendar__decade-view__years .react-calendar__decade-view__years__year:disabled, .react-calendar__century-view .react-calendar__tile:disabled {
      background-color: transparent;
    }
  }

  .react-calendar__navigation button.react-calendar__navigation__label:disabled {
    background-color: transparent;
  }
}

.scheduling-calendar-sidebar .ant-collapse .ant-collapse-item .ant-collapse-content .mini-calendar .react-calendar__viewContainer .react-calendar__month-view__days .react-calendar__tile--now.react-calendar__tile--active abbr {
  border: none !important;
}
#app-content{
  .table-design-div{
    .title{
      color: @brand_color_secondary !important;
    }
    .table-canvas-area{
      .ant-carousel{
				.slick-dots {
					li{
						button{
              background: @btn-secondary-color !important;
						}
					}
				}
			} 
    }
  }
}
.product-name-font-color{
    color: @brand_color_secondary !important;
}
.app-main-sidenav  ul.ant-menu-inline li .ant-menu-submenu-title:hover , .app-main-sidenav ul.ant-menu-inline li:hover{
  color: @brand_color_secondary !important;
}
// Menu Badge
.ant-menu {
  .ant-menu-item {
    a {
      &:hover {
        color: @brand_color_secondary !important;
      }
    }
  }
}
body {
  .btn-link-blue-underline {
    color: @brand_color_secondary !important;
  }
  .btn-link-blue {
    color: @brand_color_secondary !important;
  }
  .so-products-wrapper {
    .ant-tabs-nav .ant-tabs-tab-active.ant-tabs-tab::after {
      color: @brand_color_secondary !important;
    }
    .ant-tabs-tab-active {
      color: @brand_color_secondary !important;
    }
  }
}
.so-products-wrapper {
  .so-products-wrapper-header {
    .ant-tabs {
      .ant-tabs-tab {
        .bookmark-tab-star-active {
          color: @brand_color_secondary_dark !important;
        }
      }
    }
  }
}
.customerinfowrapper{
  .ant-tabs-nav{
    .ant-tabs-tab-active{
      color: @brand_color_secondary !important;
    }
    .ant-tabs-tab-active.ant-tabs-tab::after{
      border-bottom: 2px solid @brand_color_secondary !important;
    }
  }
}
.return-products{
  .reference-order-title{
    color: @brand_color_secondary !important;
  }
}
.time-range-col{
	.discounted-report-title{
		color: @brand_color_secondary !important;
	}
}
.themeText{
  color: @bg_gradiant_light_primary;
}
.resendBtn:hover{
  color: @bg_gradiant_primary;
}
.ant-menu .ant-menu-item a {
  color: @light-text-color !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px @input-bg-color inset !important;
    -webkit-text-fill-color: @black !important;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  border-radius: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: @scrollbar-track-color;
  border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: @scrollbar-thumb-color;
  border-radius: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: @scrollbar-thumb-hovor-color;
}

// Sidebar V2: .app-sidenav-v2-logo-initials, .app-menu-v2-item.active, .app-menu-v2-subitem.active; uses @brand_color_secondary so DB theme (less.modifyVars) applies.
.app-sidenav-v2 .app-sidenav-v2-logo-initials {
  background-color: @brand_color_secondary !important;
}
.app-menu-v2 .app-menu-v2-item.active,
.app-menu-v2 .app-menu-v2-subitem.active {
  background-color: @brand_color_secondary !important;
}
.app-sidenav-v2 {
  
  .app-sidenav-v2-collapse-toggle {
    border: 1px solid @brand_color_secondary;
    .fa{
      color: @brand_color_secondary !important;
    }
  }
  .app-sidenav-v2-collapse-toggle:hover {
    background-color: @brand_color_secondary !important;
    color: @white !important;
    border: 1px solid @brand_color_secondary;
    .fa{
      color: @white !important;
    }
  }
}

.report-detail-store-item-v2 {
	&.selected-value {
		background-color: @brand_color_secondary_light !important;
		// color: rgba(4, 120, 87, 1);
		border: none !important;
		box-shadow: none !important;
		
		&:hover {
			background-color: @brand_color_secondary_light;
			border: none !important;
			box-shadow: none !important;
		//   color: rgba(4, 120, 87, 1);
		}

		&:focus,
		&:active {
			border: none !important;
			box-shadow: none !important;
			outline: none !important;
			background-color: @brand_color_secondary_light !important;
		//   color: rgba(4, 120, 87, 1);
		}
	}
	.report-detail-store-check-v2 {
		background-color: @brand_color_secondary !important;
	}
}

// .report-detail-time-input-wrapper-v2{
li.ant-time-picker-panel-select-option-selected{
	background-color: @brand_color_secondary_light !important;
	color: @brand_color_secondary !important;
}
// }

.report-detail-data-v2{
	.report-detail-data-icon-wrapper-v2{
		background-color: @brand_color_secondary_light !important;
		color: @brand_color_secondary !important;
	}
}

.report-page-v2 {
	.report-group-item-v2 {
		&:hover{
			color: @brand_color_secondary !important;
		}
	}
}
.report-detail-time-input-v2 {
	.ant-time-picker-input {
		&:focus {
			border-color: @brand_color_secondary !important;
		}
	}
}

.report-detail-page-v2 {
  .report-detail-filter-panel-v2 {
	 .report-detail-date-preset-v2.active{
		background-color: @brand_color_secondary !important;
	}
  }
  .report-detail-calendar-day-selected-v2 {
	background-color: @brand_color_secondary !important;
  }
  .report-detail-calendar-day-in-range-v2{
	color: @brand_color_secondary !important;
	background-color: @brand_color_secondary_light !important;
  }
}


.dashboard-v2-container{
	.dashboard-v2-date-pill{
		background-color: @brand_color_secondary_light !important;
	}
	.dashboard-v2-date-pill-dot{
		background-color: @brand_color_secondary !important;
	}
	.dashboard-v2-date-pill-text, .dashboard-v2-subtitle-highlight, .dashboard-v2-labor-primary{
		color: @brand_color_secondary !important;
	}
	.dashboard-v2-store-item-selected, .dashboard-v2-labor-badge{
		color: @brand_color_secondary !important;
		background-color: @brand_color_secondary_light !important;
	}
	.dashboard-v2-store-item-selected .dashboard-v2-store-check{
		background-color: @brand_color_secondary !important;
	}
	.dashboard-v2-labor-item:hover{
		border-color: @brand_color_secondary !important;
	}
    .dashboard-v2-calendar-day-selected {
      background-color: @brand_color_secondary !important;
      color: @white !important;
    }

    .dashboard-v2-calendar-day-in-range {
      background-color: @brand_color_secondary_light !important;
      color: @brand_color_secondary !important;
    }
	.dashboard-v2-date-preset-v2.active{
		background-color: @brand_color_secondary !important;
		color: @white !important;
	}
}


// Order Details Report V2 – theme-driven colors
.order-details-report-detail-table-v2 {
  .tax-positive {
    color: @brand_color_secondary;
  }
}

.order-details-report-detail-grand-body-v2 {
  .row.total {
    background-color: @brand_color_secondary_light;
    border: @ant-alert-border-success-color;
  }
}

.order-details-report-detail-grand-header-v2 {
	color: @brand_color_secondary;
}

.order-details-report-detail-grand-body-v2 .row.total {
  color: @brand_color_secondary;
}

.order-details-report-detail-header-actions-v2 .ant-btn.order-details-report-detail-print-btn-v2 {
	background: @brand_color_secondary;
	border: 1px solid @brand_color_secondary;
	color: @white;
}

.order-details-report-detail-print-btn-v2:hover,
.order-details-report-detail-print-btn-v2:focus {
	color: @white !important;
  
}

.order-details-report-detail-card-icon-v2 {
  color: @brand_color_secondary;
}

.order-details-report-detail-status-pill-completed-v2 {
  background: @brand_color_secondary;
}

// .order-details-report-detail-payment-status-success-v2 {
//   border: 1px solid @brand_color_secondary;
//   background: @brand_color_secondary_light;
//   color: @brand_color_secondary;
// }

.order-details-report-trans-link-v2 {
  color: @brand_color_secondary;
}

.order-details-report-action-icon-v2:hover {
  color: @brand_color_secondary;
}
// User Module Styles
.user-form-v2-last-visited-field {
	background-color: @input-bg-color;
	border-color: @input-bg-color;
}

// Customer Module Styles
.customer-name-cell-avatar {
  background-color: fade(@brand_color_secondary, 15) !important;
  color: @brand_color_secondary !important;
}

// settings module styles

.store-config-section-title, .store-config-banking-info-text  {
  .fa,
  .fas,
  .far {
    font-size: 16px;
    color: @brand_color_secondary;
  }
}

.company-profile-page {
	.company-profile-card-title {
		color: @brand_color_secondary !important;
	}
}
.expinet-card-title, .tsys-card-title {
	color: @brand_color_secondary !important;
  }
  
// discount list v2 styles
.dl2-discount-card:hover {
	box-shadow: 0 0 0 1px @brand_color_secondary,
	  0 4px 12px @brand_color_secondary !important;
}
  
.dl2-card-icon {
	background-color: @brand_color_secondary_light !important;
	color: @brand_color_secondary !important;
}
  
.dl2-discount-card:hover .dl2-card-icon {
	background-color: @brand_color_secondary !important;
	color: @white !important;
}

.dl2-card-edit {
	&:hover{
		background-color: @brand_color_secondary_light !important;
		color: @brand_color_secondary !important;
	}
}

.discount-days-to-apply
{
  .ant-checkbox-wrapper-checked{    
    background: @brand_color_secondary !important;
    border-color: @white !important;
  }
}
// category modules
.cl2-category-card{
	.cl2-card-accent{
		background-color: @brand_color_secondary_light;
	}

	&:hover {
		box-shadow: 0 0 0 1px @brand_color_secondary,
		  0 4px 12px @brand_color_secondary;
	}

	.cl2-show-active-btn:hover, .cl2-load-more-btn:hover {
		border-color: @brand_color_secondary;
		color: @brand_color_secondary;
	}
}
.cl2-add-card:hover {
	border-color: @brand_color_secondary;
	color: @brand_color_secondary;
	background-color: @input-bg-color;
}

// addon modules
.adg2-addon-card:hover {
	box-shadow: 0 0 0 1px @brand_color_secondary,
	  0 4px 12px @brand_color_secondary !important;
}

.adg2-card-edit {
&:hover{
	background-color: @brand_color_secondary_light !important;
	color: @brand_color_secondary !important;
}
}
.adg2-addon-card:hover .adg2-card-icon {
background-color: @brand_color_secondary !important;
color: @white !important;
}
.app-settings-v2-sider{
  ul.ant-menu-inline li.ant-menu-item.ant-menu-item-selected,
  ul.ant-menu-inline li.ant-menu-item:hover {
    border-color: fade(@brand_color_secondary, 15) !important;
  }
}
.app-settings-v2-switch-label-active{  
  background-color: fade(@brand_color_secondary, 10) !important;
  color: fade(@brand_color_secondary, 70) !important;
  border-color: fade(@brand_color_secondary, 70) !important;
}

.app-header-v2-left {
  .app-header-v2-breadcrumb {
    .app-header-v2-breadcrumb-title.app-header-v2-breadcrumb-title-link  {
      color: @brand_color_secondary !important;
    }
  }
}


// customization module styles
.pos-screen-order-row-dragging {
  box-shadow: 0 2px 8px @brand_color_secondary;
}


.pos-screen-order-name {
  color: @brand_color_secondary;
}