:root {
    --placeholder-color: #6c757d;
    --bq-primary-color: #7743DB;
    --bq-hoverprimary-color: #6325d7;
    --bq-secondary-color:#FFFBF5;
    --bq-tertiary-color-1:#C3ACD0;
    --bq-tertiary-color-2:#F7EFE5;

    --bq-success-color:#4CAF50;
    --bq-danger-color: #FF5722;
    --bq-warning-color:#FFC107;
    --bq-dark-color:#333333;
}

.bq-bg-primary{
    background-color: var(--bq-primary-color);
}
.bq-bg-secondary{
    background-color: var(--bq-secondary-color);
}
.bq-bg-tertiary-1{
    background-color: var(--bq-tertiary-color-1);
}
.bq-bg-tertiary-2{
    background-color: var(--bq-tertiary-color-2);
}

.bq-txt-primary{
    color: var(--bq-primary-color);
}
.bq-txt-secondary{
   color: var(--bq-secondary-color);
}
.bq-txt-tertiary-1{
    color: var(--bq-tertiary-color-1);
}
.bq-txt-tertiary-2{
    color: var(--bq-tertiary-color-2);
}

.bq-btn-primary {
    --bs-btn-color:var(--bq-secondary-color);
    --bs-btn-bg:var(--bq-primary-color);
    --bs-btn-border-color: var(--bq-primary-color);
    --bs-btn-hover-color: var(--bq-secondary-color);
    --bs-btn-hover-bg: var(--bq-hoverprimary-color);
    --bs-btn-hover-border-color:var(--bq-hoverprimary-color);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--bq-secondary-color);
    --bs-btn-active-bg:var(--bq-primary-color);
    --bs-btn-active-border-color: var(--bq-primary-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color:var(--bq-secondary-color);
    --bs-btn-disabled-bg: var(--bq-primary-color);
    --bs-btn-disabled-border-color: var(--bq-primary-color);
  }

/* Autocomplete UI */
.ui-autocomplete .ui-menu-item {
    font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
    background-color:lightgray;
    }

  .ui-menu-item-wrapper.ui-state-active {
      background: var(--bq-primary-color) !important;
      font-weight: bold !important;
      color: #ffffff !important;
      border-color: white !important;
  }
  /* Date Picker UI */
.ui-datepicker-calendar a {
    color: black !important;
    background-color: white !important;
    border-color: black !important;
}

.ui-datepicker-current-day .ui-state-active {
    background: var(--bq-primary-color) !important;
    color: white !important;
    border-color: black !important;
    font-weight: bold;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    color: var(--bq-primary-color) !important;
    font-weight: bold;
}