:root {
  --primary: #8667ff;
  --primary-light: #7c5df5;
  --primary-rgb: 134, 103, 255;
  --sidebarColor:#fff;
}

body.theme-red {
  --primary: #e65145;
  --primary-light: #ff4e74;
  --primary-rgb: 255, 47, 92;
  --sidebarColor:#fff;
}
body.theme-primary {
  --primary: #8667ff;
  --primary-light: #7c5df5;
  --primary-rgb: 134, 103, 255;
  --sidebarColor:#fff;
}
body.theme-green {
  --primary: #1b9783;
  --primary-light: #88f3e1;
  --primary-rgb: 27, 151, 131;
  --sidebarColor:#fff;
}
body.theme-blue {
  --primary: #4680ff;
  --primary-light: #7997d8;
  --primary-rgb: 70, 128, 255;
  --sidebarColor:#fff;
}
body.theme-purple {
  --primary: #824bab;
  --primary-light: #d0a5f1;
  --primary-rgb: 130, 75, 171;
  --sidebarColor:#fff;
}
body.theme-yellow {
  --primary: #e1ad01;
  --primary-light: #f5d159;
  --primary-rgb: 245, 209, 89;
  --sidebarColor:#fff;
}

.themeVarients {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px;
}
.changeThemeBtn {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: block;
}
.changeThemeBtn.theme-red {
  background-color: #e65145;
}
.changeThemeBtn.theme-primary {
  background-color: #8667ff;
}
.changeThemeBtn.theme-green {
  background-color: #1b9783;
}
.changeThemeBtn.theme-blue {
  background-color: #4680ff;
}
.changeThemeBtn.theme-purple {
  background-color: #824bab;
}
.changeThemeBtn.theme-yellow {
  background-color: #e1ad01;
}
.bg-primary,
.bg-primary::focus,
.bg-primary::hover {
  background-color: var(--primary) !important;
}
.bg-primary-transparent {
  background-color: rgb(var(--primary-rgb), 0.13);
}
.color-leftmenu .main-sidebar-body .nav-link{
    color:var(--sidebarColor);
}
.select2-container--classic.select2-container--open
  .select2-selection--multiple,
.select2-container--classic.select2-container--open .select2-selection--single,
.select2-container--classic .select2-selection--multiple:focus,
.select2-container--classic .select2-selection--single:focus {
  border: 1px solid var(--primary);
}
.select2-container--classic.select2-container--open .select2-dropdown {
  border-color: var(--primary);
}
.main-header-center .search-btn {
  background-color: var(--primary);
}
.text-primary,
.text-primary :focus,
.text-primary:hover {
  color: var(--primary) !important;
}
.border-primary {
  border-color: var(--primary) !important;
}
.bd-primary {
  border-color: var(--primary);
}
.card-item .card-item-icon.card-icon {
  background: rgba(var(--primary-rgb), 0.13);
  fill: var(--primary);
}
.card-dashboard-calendar .ui-datepicker .ui-datepicker-month {
  color: var(--primary);
}
.card-dashboard-calendar
  .ui-datepicker
  .ui-datepicker-calendar
  .ui-datepicker-today
  a {
  background-color: var(--primary);
  border: 1px solid var(--primary);
}
#back-to-top {
  background: var(--primary);
}
.btn-primary,
.ckbox span:after {
  background-color: var(--primary);
}
.btn-primary {
  color: var(--bs-white);
  border-color: var(--primary);
}
.btn-primary,
.btn-primary {
  box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.2);
  color: var(--bs-white);
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.side-links {
  color: var(--primary) !important;
}
span.title {
  color: var(--primary) !important;
  font-weight: bold;
}
a#wizard1-t-0,
a#wizard1-t-1,
a#wizard1-t-2 {
  text-decoration: none !important;
}
li.disabled a {
  text-decoration: none !important;
}
.btn-primary.disabled,
.btn-primary:disabled {
  color: var(--bs-white);
  background-color: var(--primary);
  border-color: var(--primary);
}
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
  color: var(--bs-white);
  background-color: var(--primary-light);
  border-color: var(--primary-light);
}
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 1px rgab(var(--primary-rgb), 0.2);
}
.btn-main-primary {
  color: var(--bs-white);
  background-color: var(--primary);
  border-color: var(--primary);
}
.btn-main-primary:hover {
  color: var(--bs-white);
  background-color: var(--primary-light);
  border-color: var(--primary-light);
}
.btn-main-primary.focus,
.btn-main-primary:focus {
  box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.3);
}
.btn-main-primary.disabled,
.btn-main-primary:disabled,
.btn-main-primary:not(:disabled):not(.disabled).active,
.btn-main-primary:not(:disabled):not(.disabled):active,
.show > .btn-main-primary.dropdown-toggle {
  color: var(--bs-white);
  background-color: var(--primary);
  border-color: var(--primary);
}
.btn-main-primary:not(:disabled):not(.disabled).active:focus,
.btn-main-primary:not(:disabled):not(.disabled):active:focus,
.show > .btn-main-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.3);
}
.btn-outline-primary {
  color: var(--primary) !important;
  border-color: var(--primary);
}
.btn-outline-primary:hover {
  color: var(--bs-white) !important;
  background-color: var(--primary);
  border-color: var(--primary);
}
.btn-outline-primary.focus,
.btn-outline-primary:focus {
  box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.2);
}
.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
  color: var(--primary);
  background-color: transparent;
}
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show > .btn-outline-primary.dropdown-toggle {
  color: var(--bs-white) !important;
  background-color: var(--primary);
  border-color: var(--primary);
}
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.2);
}
.badge-primary,
a.badge-primary:focus,
a.badge-primary:hover {
  color: var(--bs-white);
  background-color: var(--primary);
}
a.badge-primary.focus,
a.badge-primary:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(135, 96, 251, 0.5);
}
.main-calendar .fc-view.fc-agenda-view .fc-day-header.fc-today > a,
.main-msg-send,
.main-nav-column .nav-link.active,
.main-nav-column .nav-link.active:focus,
.main-nav-column .nav-link.active:hover,
.main-nav-line-chat .nav-link.active,
a,
a:hover {
  color: var(--primary);
}
.main-avatar,
.main-calendar td.fc-today .fc-day-number,
.main-calendar td.fc-today .fc-day-number:focus,
.main-calendar td.fc-today .fc-day-number:hover {
  background-color: var(--primary);
}
.page-item.active .page-link {
  background-color: var(--primary);
  border-color: var(--primary);
}
.nav-pills .nav-link.active,
table.dataTable.dtr-inline.collapsed
  > tbody
  > tr[role="row"]
  > td:first-child:before,
table.dataTable.dtr-inline.collapsed
  > tbody
  > tr[role="row"]
  > th:first-child:before {
  background-color: var(--primary);
}
.accordion .card-header a,
.main-nav .nav-link.active {
  color: var(--primary);
}
.accordion-color .card-header a.collapsed {
  background-color: var(--primary);
}
.timeline-wrapper-primary .timeline-badge,
.timeline-wrapper-primary .timeline-panel:before {
  background: var(--primary);
}
.br-theme-bars-1to10 .br-widget a.br-active,
.br-theme-bars-1to10 .br-widget a.br-selected {
  background-color: var(--primary);
}
.br-theme-bars-square .br-widget a.br-active,
.br-theme-bars-square .br-widget a.br-selected {
  border: 2px solid #f0f2f8;
  color: var(--primary);
}
.br-theme-bars-pill .br-widget a.br-active,
.br-theme-bars-pill .br-widget a.br-selected {
  background-color: var(--primary);
  color: var(--bs-white);
}
.br-theme-bars-horizontal .br-widget a.br-active,
.br-theme-bars-horizontal .br-widget a.br-selected {
  background-color: var(--primary);
}
.main-content-body-profile .main-nav-line .nav-link.active {
  color: var(--primary);
}
.custom-switch-input:checked ~ .custom-switch-indicator {
  background: var(--primary);
}
.rdiobox input[type="radio"]:checked + span:before {
  border-color: transparent;
  background-color: var(--primary);
}
.selectgroup-input:checked + .selectgroup-button {
  border-color: var(--primary);
  color: var(--primary);
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-next:before,
.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before {
  background: rgba(var(--primary-rgb), 0.13);
  color: var(--primary);
}
.ui-datepicker .ui-datepicker-calendar .ui-datepicker-today a,
.ui-datepicker .ui-datepicker-calendar .ui-datepicker-today a:focus,
.ui-datepicker .ui-datepicker-calendar .ui-datepicker-today a:hover {
  background-color: var(--primary);
  color: var(--bs-white);
}
.irs-bar {
  background-color: var(--primary);
}
.irs-from,
.irs-single,
.irs-to {
  color: var(--bs-white);
  background: var(--primary);
}
.wizard > .steps .current a .number,
.wizard > .steps .current a:active .number,
.wizard > .steps .current a:hover .number {
  background-color: var(--primary);
  color: var(--bs-white);
}
.pricing-tabs .nav-price li .active,
.profile-cover__info .nav strong,
.profile-tab .main-nav-line .nav-link.active {
  color: var(--primary);
}
.construction:before,
.signpages .details:before {
  background: var(--primary);
  opacity: 0.95;
}
.color-horizontal .main-navbar.hor-menu {
  background-color: var(--primary);
  box-shadow: -8px 12px 18px 0 rgba(21, 21, 62, 0.2);
}
.color-header .main-header,
.dark-theme.color-header .main-header {
  background: var(--primary);
  border-bottom: 1px solid rgba(240, 240, 255, 0.15) !important;
}
.second-sidemenu .menu .slide-item.active:before,
.second-sidemenu .slide-item.active {
  color: var(--primary);
}
.progress-bar,
.tag-primary {
  background-color: var(--primary);
}
.bg-primary .main-nav .nav-link.active,
.bg-secondary .main-nav .nav-link.active {
  color: var(--bs-white);
}
.popover-header {
  background-color: var(--primary);
  color: var(--bs-white);
}
.lds-heart div:after,
.lds-heart div:before {
  background: var(--primary);
}
.lds-ripple div {
  border: 4px solid var(--primary);
}
.lds-circle > div,
.lds-spinner div:after {
  background: var(--primary);
}
.lds-dual-ring:after {
  border-color: var(--primary) transparent;
  border-style: solid;
  border-width: 5px;
}
.lds-facebook div {
  background: var(--primary);
}
.color-horizontal .main-navbar .nav-item.active .nav-link,
.color-horizontal .main-navbar .nav-item.active .nav-link.with-sub:after,
.color-horizontal .main-navbar .nav-sub-item.active > .nav-sub-link,
.color-horizontal .main-navbar .nav-sub-item.active > .nav-sub-link:before,
.color-horizontal .main-navbar .nav-sub-link:focus,
.color-horizontal .main-navbar .nav-sub-link:hover {
  color: var(--primary);
}
@media (min-width: 992px) {
  .main-navbar.hor-menu .nav-sub-item.active a,
  .main-navbar .nav-sub-item.active > .nav-sub-link,
  .main-navbar .nav-sub-item.active > .nav-sub-link:before,
  .main-navbar .nav-sub-link:focus,
  .main-navbar .nav-sub-link:hover {
    color: var(--primary);
  }
}
.main-form-search .btn,
.main-form-search .sp-container button {
  background-color: var(--primary);
}
.flat a.active,
.flat a.active:after,
.flat a:hover,
.flat a:hover:after {
  background: var(--primary);
  color: var(--bs-white);
}
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  color: var(--bs-white);
}
.lds-heart div {
  background: var(--primary);
}
.accordion .card-header a.collapsed:focus,
.accordion .card-header a.collapsed:hover {
  background-color: var(--primary);
  color: var(--bs-white);
}
.light-horizontal .main-navbar.hor-menu .nav-item.active .nav-link,
.light-horizontal .main-navbar.hor-menu .nav-item:hover .nav-link,
.main-sidebar-body li.active .sidemenu-label,
.main-sidebar-body li.active i {
  color: var(--primary);
}
.first-sidemenu {
  background: var(--primary);
}
.resp-tabs-list li.resp-tab-active:after,
.resp-tabs-list li.resp-tab-active:before,
.resp-tabs-list li.resp-tab-item.active:after,
.resp-tabs-list li.resp-tab-item.active:before {
  border-right: 20px solid var(--primary);
}
.second-sidemenu .menu .slide-item.active:before,
.second-sidemenu .menu .slide-item:hover:before,
.second-sidemenu .slide-item.active,
.second-sidemenu .slide-item:hover {
  color: var(--primary);
}
@media (max-width: 767px) and (min-width: 576px) {
  .sidebar-mini.sidenav-toggled .main-content {
    background: var(--primary);
  }
}
.main-sidebar-body li.active .sidemenu-icon {
  background: var(--primary);
}
.project-status.primary:before {
  border-left: 3px solid var(--primary);
}
.badge-primary-light {
  background-color: rgba(var(--primary-rgb), 0.13);
  color: var(--primary);
}
.color-leftmenu .main-sidebar-sticky {
  background: var(--primary);
}
.color-leftmenu .main-sidebar-body .nav-item.active .nav-link:after,
.color-leftmenu .main-sidebar-body .nav-item.active .nav-link:before {
  border-right: 20px solid var(--primary);
}
.dark-theme.color-leftmenu .main-sidebar-sticky {
  background: var(--primary);
}
.dark-theme.color-leftmenu .main-sidebar-body .nav-item.active .nav-link:after,
.dark-theme.color-leftmenu
  .main-sidebar-body
  .nav-item.active
  .nav-link:before {
  border-right: 20px solid var(--primary);
}
input:checked + label.payment-cards {
  border-color: var(--primary) !important;
  color: var(--primary);
}
.form input:checked + label:after {
  border-color: var(--primary) var(--primary) transparent;
}
#checkoutsteps > .actions a,
#checkoutsteps > .steps .current a .number,
.card-pay .tabs-menu li a.active {
  background: var(--primary);
}
#checkoutsteps .total {
  color: var(--primary);
}
.item1-links .nav-item a.active {
  background-color: var(--primary);
}
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  background-color: var(--primary);
  color: var(--bs-white) !important;
}
.list-group-item.active {
  background-color: var(--primary);
  border-color: var(--primary);
}
.irs-from,
.irs-single,
.irs-to {
  background-color: var(--primary) !important;
}
.track .step.active .icon,
.track .step.active:before {
  background: var(--primary);
}
.bootstrap-tagsinput .badge {
  background-color: var(--primary);
  border: 1px solid var(--primary);
}
.select2-container--default
  .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: #eaedf7 !important;
}
@media (min-width: 768px) {
  .main-sidebar-hide .main-sidebar-body li.active .sidemenu-icon,
  .main-sidebar-hide.main-sidebar-open
    .main-sidebar-body
    li.active
    .sidemenu-icon {
    background: var(--primary);
  }
}
.product-timeline ul.timeline-1 > li .product-icon {
  background-color: #eaedf7;
  color: var(--primary);
}
.custom-control-input:checked ~ .custom-control-label:before {
  color: var(--bs-white);
  border-color: var(--primary);
  background-color: var(--primary);
}
.fc-h-event {
  border: 1px solid var(--primary) !important;
  background-color: var(--primary) !important;
}
.fc .fc-button-primary,
.fc .fc-button-primary:disabled {
  color: var(--bs-white);
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}
.bootstrap-tagsinput .badge {
  background-color: var(--primary) !important;
  border: 1px solid var(--primary) !important;
}
.accordion .card-header a {
  color: var(--primary);
}
.sweet-alert button {
  background-color: var(--primary) !important;
}
.main-header-center .search-btn:hover {
  background-color: var(--primary);
}
.bg-background2:before {
  background: var(--primary);
  opacity: 0.94;
}
.crypto-btc-usd .nav-link.active {
  background-color: var(--primary) !important;
}
.select2-container--default
  .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
  color: var(--primary);
}
.card-order i,
.product-timeline ul.timeline-1 > li .product-icon {
  background: #efebff;
  color: var(--primary);
}
.popover-primary {
  background-color: var(--primary);
  border-color: var(--primary);
}
.popover-primary.bs-popover-auto[x-placement^="top"] > .arrow:after,
.popover-primary.bs-popover-top > .arrow:after {
  border-top-color: var(--primary);
}
.br-theme-bars-movie .br-widget a.br-active,
.br-theme-bars-movie .br-widget a.br-selected {
  background-color: var(--primary);
}
a.text-primary:focus,
a.text-primary:hover {
  color: var(--primary-light) !important;
}
.crypto-wallet .clipboard-icon {
  border-color: var(--primary) !important;
}
.crypto-wallet .clipboard-icon,
.irs-slider:before {
  background-color: var(--primary) !important;
}
.tab.active {
  background-color: var(--primary);
}
.btn-color {
  background-color: var(--primary);
}